diff --git a/README.md b/README.md
index a7776bf..1ba9983 100644
--- a/README.md
+++ b/README.md
@@ -1,280 +1,280 @@
-# Keep Vue
-
-Keep Vue is an open-source component library built on Tailwind CSS and React.js. It provides a versatile set of pre-designed UI components that enable developers to streamline the creation of modern, responsive, and visually appealing web applications.
-
-![Keep Vue](https://images.prismic.io/staticmania/468819ab-dcc8-4393-85b2-b93913eee369_For+Github.png?auto=compress,format)
-
-## Table of Contents
-
-- [Keep Vue](#keep-vue)
-  - [Table of Contents](#table-of-contents)
-  - [Installation](#installation)
-    - [Vue Application](#vue-application)
-    - [Nuxt JS Application](#nuxt-js-application)
-  - [usage](#usage)
-  - [Components](#components)
-  - [Contributing](#contributing)
-  - [Figma](#figma)
-  - [License](#license)
-
-## Installation
-
-## Vue Application
-
-Setting Up Keep Vue in vue Application
-
-`Step 1:` Create a vue Application
-
-```console
-npm create vite@latest my-project -- --template vue
-cd my-project
-```
-
-`Step 2:` Install Tailwind CSS
-
-```console
-npm i autoprefixer postcss tailwindcss
-npx tailwindcss init -p
-```
-
-`Step 3:` Install Keep Vue:
-
-```console
-npm i keep-vue @phosphor-icons/vue
-```
-
-Or with Yarn
-
-```console
-yarn add keep-vue @phosphor-icons/vue
-```
-
-Or with Pnpm
-
-```console
-pnpm add keep-vue @phosphor-icons/vue
-```
-
-`Step 4:` Go to the `tailwind.config.js` file and paste the
-following code:
-
-```tsx
-import { keepTheme } from "keep-vue/keepTheme";
-
-const config = {
-  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
-  darkMode: "selector",
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
-export default keepTheme(config);
-```
-
-```tailwind.config.ts
-import type { Config } from 'tailwindcss'
-
-  import { keepTheme } from "keep-vue/keepTheme";
-const config : Config = {
-    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
-    darkMode: 'selector',
-    theme: {
-      extend: {}
-    },
-    plugins: []
-  }
-export default keepTheme(config);
-```
-
-`Step 5:` Add Tailwind CSS to src/main.css File:
-
-```css
-@import "keep-vue/css";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-
-Congratulations! You have successfully installed the Keep Vue on your nuxt application. Now you can import any component from keep-vue and use it in your project.
-
-```tsx
- import { Button } from "keep-vue";
-</script>
-
-<template>
-  <Button>Keep Vue</Button>
-</template>
-```
-
-## Nuxt JS Application
-
-You can easily integrate `keep-vue` into your Nuxt.js application.
-
-`Step 1:` Install Nuxt JS Application
-
-with npx
-
-```console
-npx nuxi@latest init <project-name>
-```
-
-Or with Yarn
-
-```console
-yarn dlx nuxi@latest init <project-name>
-```
-
-Or with pnpm
-
-```console
-pnpm dlx nuxi@latest init <project-name>
-```
-
-`Step 2:` Install Tailwind module for Nuxt
-
-with npm
-
-```console
-npx nuxi@latest module add tailwindcss
-npx tailwindcss init
-```
-
-Or with Yarn
-
-```console
-yarn add -D @nuxtjs/tailwindcss
-npx tailwindcss init
-```
-
-if you use yarn for installing tailwind then you need to add the tailwind module in the `nuxt.config.js` file manually.
-
-```tsx
-  modules: [
-  //rest modules...
- '@nuxtjs/tailwindcss'
-  ],
-```
-
-`Step 3:` Install Keep Vue
-
-with npm
-
-```console
-npm i keep-vue
-npm install --save-dev nuxt-phosphor-icons
-```
-
-Or with yarn
-
-```console
-yarn add keep-vue
-yarn add --dev nuxt-phosphor-icons
-```
-
-Or with pnpm
-
-```console
-pnpm add keep-vue
-pnpm add -D nuxt-phosphor-icons
-```
-
-if you use yarn or pnpm for installing phosphor Icon then you need to add the `nuxt-phosphor-icons` module in the `nuxt.config.js` file manually.
-
-```tsx
-  modules: [
-    "nuxt-phosphor-icons",
-  ],
-```
-
-`Step 4:` Go to the `tailwind.config.js` file and paste the
-following code
-
-```js
-import { keepTheme } from "keep-vue/keepTheme";
-module.exports = keepTheme({
-  content: [
-    "./components/**/*.{js,vue,ts}",
-    "./layouts/**/*.vue",
-    "./pages/**/*.vue",
-    "./plugins/**/*.{js,ts}",
-    "./app.vue",
-    "./error.vue",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-});
-```
-
-```ts
-import { keepTheme } from "keep-vue/keepTheme";
-import type { Config } from "tailwindcss";
-
-const config: Config = keepTheme({
-  content: [
-    "./components/**/*.{js,vue,ts}",
-    "./layouts/**/*.vue",
-    "./pages/**/*.vue",
-    "./plugins/**/*.{js,ts}",
-    "./app.vue",
-    "./error.vue",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-});
-export default config;
-```
-
-`Step 5:` Create a style folder and then add Tailwind CSS to `main.css` File:
-
-```css
-@import "keep-vue/css";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-
-Congratulations! You have successfully installed the Keep Vue on your nuxt application. Now you can import any component from keep-vue and use it in your project.
-
-## usage
-
-```jsx
-import { Button } from "keep-vue";
-</script>
-
-<template>
-  <Button>Keep Vue</Button>
-</template>
-```
-
-## Components
-
-The Keep Vue offers a wide range of components to build your user interfaces. For detailed usage and examples of each component, refer to our [component documentation](https://vue.keepdesign.io/docs/getting-started/introduction).
-
-## Contributing
-
-If you want to contribute to the Keep Vue, you can follow the [contributing guide](https://github.com/StaticMania/keep-vue/blob/main/Contribute.md).
-
-## Contributors
-
-This project exists thanks to all the people who contribute:
-
-<a href="https://github.com/StaticMania/keep-vue/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=StaticMania/keep-vue"/>
-</a>
-
-## Figma
-
-If you need access to Figma design files for the components, you can check out our website for more information:
-
-[Get access to the Figma design files](https://keepdesign.io)
-
-## License
-
-The keep-vue name and logos are trademarks of StaticMania.
-
-[Read about the licensing terms](https://github.com/StaticMania/keep-vue/blob/main/License)
+# Keep Vue
+
+Keep Vue is an open-source component library built on Tailwind CSS and React.js. It provides a versatile set of pre-designed UI components that enable developers to streamline the creation of modern, responsive, and visually appealing web applications.
+
+![Keep Vue](https://images.prismic.io/staticmania/468819ab-dcc8-4393-85b2-b93913eee369_For+Github.png?auto=compress,format)
+
+## Table of Contents
+
+- [Keep Vue](#keep-vue)
+  - [Table of Contents](#table-of-contents)
+  - [Installation](#installation)
+    - [Vue Application](#vue-application)
+    - [Nuxt JS Application](#nuxt-js-application)
+  - [usage](#usage)
+  - [Components](#components)
+  - [Contributing](#contributing)
+  - [Figma](#figma)
+  - [License](#license)
+
+## Installation
+
+## Vue Application
+
+Setting Up Keep Vue in vue Application
+
+`Step 1:` Create a vue Application
+
+```console
+npm create vite@latest my-project -- --template vue
+cd my-project
+```
+
+`Step 2:` Install Tailwind CSS
+
+```console
+npm i autoprefixer postcss tailwindcss
+npx tailwindcss init -p
+```
+
+`Step 3:` Install Keep Vue:
+
+```console
+npm i keep-vue @phosphor-icons/vue
+```
+
+Or with Yarn
+
+```console
+yarn add keep-vue @phosphor-icons/vue
+```
+
+Or with Pnpm
+
+```console
+pnpm add keep-vue @phosphor-icons/vue
+```
+
+`Step 4:` Go to the `tailwind.config.js` file and paste the
+following code:
+
+```tsx
+import { keepTheme } from "keep-vue/keepTheme";
+
+const config = {
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  darkMode: "selector",
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+export default keepTheme(config);
+```
+
+```tailwind.config.ts
+import type { Config } from 'tailwindcss'
+
+  import { keepTheme } from "keep-vue/keepTheme";
+const config : Config = {
+    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+    darkMode: 'selector',
+    theme: {
+      extend: {}
+    },
+    plugins: []
+  }
+export default keepTheme(config);
+```
+
+`Step 5:` Add Tailwind CSS to src/main.css File:
+
+```css
+@import "keep-vue/css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Congratulations! You have successfully installed the Keep Vue on your nuxt application. Now you can import any component from keep-vue and use it in your project.
+
+```tsx
+ import { Button } from "keep-vue";
+</script>
+
+<template>
+  <Button>Keep Vue</Button>
+</template>
+```
+
+## Nuxt JS Application
+
+You can easily integrate `keep-vue` into your Nuxt.js application.
+
+`Step 1:` Install Nuxt JS Application
+
+with npx
+
+```console
+npx nuxi@latest init <project-name>
+```
+
+Or with Yarn
+
+```console
+yarn dlx nuxi@latest init <project-name>
+```
+
+Or with pnpm
+
+```console
+pnpm dlx nuxi@latest init <project-name>
+```
+
+`Step 2:` Install Tailwind module for Nuxt
+
+with npm
+
+```console
+npx nuxi@latest module add tailwindcss
+npx tailwindcss init
+```
+
+Or with Yarn
+
+```console
+yarn add -D @nuxtjs/tailwindcss
+npx tailwindcss init
+```
+
+if you use yarn for installing tailwind then you need to add the tailwind module in the `nuxt.config.js` file manually.
+
+```tsx
+  modules: [
+  //rest modules...
+ '@nuxtjs/tailwindcss'
+  ],
+```
+
+`Step 3:` Install Keep Vue
+
+with npm
+
+```console
+npm i keep-vue
+npm install --save-dev nuxt-phosphor-icons
+```
+
+Or with yarn
+
+```console
+yarn add keep-vue
+yarn add --dev nuxt-phosphor-icons
+```
+
+Or with pnpm
+
+```console
+pnpm add keep-vue
+pnpm add -D nuxt-phosphor-icons
+```
+
+if you use yarn or pnpm for installing phosphor Icon then you need to add the `nuxt-phosphor-icons` module in the `nuxt.config.js` file manually.
+
+```tsx
+  modules: [
+    "nuxt-phosphor-icons",
+  ],
+```
+
+`Step 4:` Go to the `tailwind.config.js` file and paste the
+following code
+
+```js
+import { keepTheme } from "keep-vue/keepTheme";
+module.exports = keepTheme({
+  content: [
+    "./components/**/*.{js,vue,ts}",
+    "./layouts/**/*.vue",
+    "./pages/**/*.vue",
+    "./plugins/**/*.{js,ts}",
+    "./app.vue",
+    "./error.vue",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+});
+```
+
+```ts
+import { keepTheme } from "keep-vue/keepTheme";
+import type { Config } from "tailwindcss";
+
+const config: Config = keepTheme({
+  content: [
+    "./components/**/*.{js,vue,ts}",
+    "./layouts/**/*.vue",
+    "./pages/**/*.vue",
+    "./plugins/**/*.{js,ts}",
+    "./app.vue",
+    "./error.vue",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+});
+export default config;
+```
+
+`Step 5:` Create a style folder and then add Tailwind CSS to `main.css` File:
+
+```css
+@import "keep-vue/css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Congratulations! You have successfully installed the Keep Vue on your nuxt application. Now you can import any component from keep-vue and use it in your project.
+
+## usage
+
+```jsx
+import { Button } from "keep-vue";
+</script>
+
+<template>
+  <Button>Keep Vue</Button>
+</template>
+```
+
+## Components
+
+The Keep Vue offers a wide range of components to build your user interfaces. For detailed usage and examples of each component, refer to our [component documentation](https://vue.keepdesign.io/docs/getting-started/introduction).
+
+## Contributing
+
+If you want to contribute to the Keep Vue, you can follow the [contributing guide](https://github.com/StaticMania/keep-vue/blob/main/Contribute.md).
+
+## Contributors
+
+This project exists thanks to all the people who contribute:
+
+<a href="https://github.com/StaticMania/keep-vue/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=StaticMania/keep-vue"/>
+</a>
+
+## Figma
+
+If you need access to Figma design files for the components, you can check out our website for more information:
+
+[Get access to the Figma design files](https://keepdesign.io)
+
+## License
+
+The keep-vue name and logos are trademarks of StaticMania.
+
+[Read about the licensing terms](https://github.com/StaticMania/keep-vue/blob/main/License)
diff --git a/components/TableOfContent.vue b/components/TableOfContent.vue
index 4b0a2db..f6b24e0 100644
--- a/components/TableOfContent.vue
+++ b/components/TableOfContent.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 
 const { toc } = useContent();
 const activeLink = ref("");
@@ -7,6 +7,47 @@ const activeLink = ref("");
 const setActiveLink = (id: string) => {
   activeLink.value = id;
 };
+
+//handle current active link
+const updateActiveLinkOnScroll = () => {
+  // in doc the heading element is h2
+  const headingElements = Array.from(
+    document?.querySelectorAll<HTMLHeadingElement>("h2[id]"),
+  );
+
+  const scrollTop =
+    document?.documentElement.scrollTop || document?.body.scrollTop;
+
+  headingElements?.forEach((anchor) => {
+    // get anchor tag under the h2 element
+    const link = document?.querySelector<HTMLAnchorElement>(
+      `h2[id="${anchor.id}"] a`,
+    );
+
+    if (link) {
+      link?.classList.remove("active-link");
+    }
+  });
+
+  // Activate the first matching anchor as  scroll
+  for (let i = headingElements?.length; i >= 0; i--) {
+    const singleHeading = headingElements[i];
+    if (scrollTop > singleHeading?.offsetTop - 75) {
+      const link = document?.querySelector<HTMLAnchorElement>(
+        `h2[id="${singleHeading.id}"] a`,
+      );
+      if (link) {
+        setActiveLink(singleHeading.id);
+        link.classList.add("active-link");
+        break;
+      }
+    }
+  }
+};
+
+onMounted(() => {
+  document.addEventListener("scroll", updateActiveLinkOnScroll);
+});
 </script>
 
 <template>
diff --git a/components/ThemeSwitcher.vue b/components/ThemeSwitcher.vue
index 06f7d1c..792b2f8 100644
--- a/components/ThemeSwitcher.vue
+++ b/components/ThemeSwitcher.vue
@@ -13,8 +13,11 @@ const toggleTheme = () => {
     <Button
       class="rounded-lg border border-metal-100 bg-white p-2.5 transition-all duration-300 hover:bg-metal-25 dark:border-metal-800 dark:bg-metal-900 dark:hover:border-metal-600 dark:hover:bg-metal-900"
       @click="() => toggleTheme()">
-      <PhosphorIconMoon v-if="colorMode.preference === 'dark'" :size="21" />
-      <PhosphorIconSunDim v-else color="black" :size="21" />
+      <PhosphorIconMoon
+        v-if="colorMode.preference === 'dark'"
+        v-motion-slide-top
+        :size="21" />
+      <PhosphorIconSunDim v-else v-motion-slide-top color="black" :size="21" />
     </Button>
   </ClientOnly>
 </template>
diff --git a/components/content/CodeHighlight.vue b/components/content/CodeHighlight.vue
index d791686..e5bcc45 100644
--- a/components/content/CodeHighlight.vue
+++ b/components/content/CodeHighlight.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed, type HTMLAttributes } from "vue";
-import { useCopy } from "~/hooks/UseCopy";
 import { Toast } from "~/src";
 import { cn } from "~/src/utils/cn";
 import type { ClassProps } from "~/src/utils/interface";
@@ -15,7 +14,9 @@ interface CodeHighlightWithPreviewProps
 const props = defineProps<CodeHighlightWithPreviewProps & ClassProps>();
 
 const codeType = ref(0);
-const { copy, copyToClipboard } = useCopy();
+const { copied, copy } = useClipboard({
+  copiedDuring: 3000,
+});
 
 const restProps = computed(() => {
   const { class: _, code, ...rest } = props;
@@ -23,7 +24,7 @@ const restProps = computed(() => {
 });
 
 const handleCopy = (code: object, codeType: number): void => {
-  copyToClipboard(Object.values(code)[codeType]);
+  copy(Object.values(code)[codeType]);
   Toast.success("Copied to clipboard");
 };
 </script>
@@ -55,7 +56,7 @@ const handleCopy = (code: object, codeType: number): void => {
       <div>
         <button class="mx-6 my-2.5" @click="() => handleCopy(code, codeType)">
           <PhosphorIconCheck
-            v-if="copy"
+            v-if="copied"
             :size="20"
             weight="light"
             color="#fff" />
diff --git a/components/content/CodeHighlightWithPreview.vue b/components/content/CodeHighlightWithPreview.vue
index d34b56b..9504d9b 100644
--- a/components/content/CodeHighlightWithPreview.vue
+++ b/components/content/CodeHighlightWithPreview.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed, ref, type HTMLAttributes } from "vue";
-import { useCopy } from "~/hooks/UseCopy";
 import { Toast } from "~/src";
 import { cn } from "~/src/utils/cn";
 import type { ClassProps } from "~/src/utils/interface";
@@ -16,17 +15,16 @@ interface CodeHighlightWithPreviewProps
 const props = defineProps<CodeHighlightWithPreviewProps & ClassProps>();
 const active = ref(props.activeTab ?? 0);
 
-const { copy, copyToClipboard } = useCopy();
-
+const { copied, copy } = useClipboard({
+  copiedDuring: 3000,
+});
 const restProps = computed(() => {
   const { class: _, activeTab, code, ...rest } = props;
   return rest;
 });
 
 const handleCopy = (code: object) => {
-  copyToClipboard(
-    Object.values(code)[active.value === 0 ? 0 : active.value - 1],
-  );
+  copy(Object.values(code)[active.value === 0 ? 0 : active.value - 1]);
   Toast.success("Copied to clipboard");
 };
 </script>
@@ -76,7 +74,7 @@ const handleCopy = (code: object) => {
       <div>
         <button class="mx-6 my-2.5" @click="() => handleCopy(code)">
           <PhosphorIconCheck
-            v-if="copy"
+            v-if="copied"
             :size="20"
             weight="light"
             color="#fff" />
diff --git a/hooks/UseCopy.ts b/hooks/UseCopy.ts
deleted file mode 100644
index dff3e78..0000000
--- a/hooks/UseCopy.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ref } from "vue";
-
-export function useCopy() {
-  const copy = ref<boolean>(false);
-
-  const copyToClipboard = (text: string) => {
-    navigator?.clipboard
-      ?.writeText(text)
-      .then(() => {
-        copy.value = true;
-        setTimeout(() => {
-          copy.value = false;
-        }, 3000);
-      })
-      .catch((error) => {
-        console.error(error);
-        copy.value = false;
-      });
-  };
-
-  return {
-    copy,
-    copyToClipboard,
-  };
-}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7b8415b..c0aa9ca 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,10 +9,6 @@ export default defineNuxtConfig({
       Inter: {
         wght: "100..900",
       },
-      // SpaceMono: {
-      //   subsets: "latin",
-      //   wght: ["400"],
-      // },
     },
   },
   postcss: {
@@ -57,5 +53,6 @@ export default defineNuxtConfig({
     "nuxt-shiki",
     "@nuxtjs/color-mode",
     "nuxt-phosphor-icons",
+    "@vueuse/motion/nuxt",
   ],
 });
diff --git a/package.json b/package.json
index ef79b07..5cc09ed 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^11.0.1",
+    "@vueuse/motion": "^2.2.6",
     "chart.js": "^4.4.3",
     "clsx": "^2.1.1",
     "deepmerge": "^4.3.1",
@@ -38,6 +39,10 @@
     "src/**/*.{ts,js,vue,css,}": [
       "npm run lint",
       "npm run format"
+    ],
+    "components/**/*.{ts,js,vue,css,}": [
+      "npm run lint",
+      "npm run format"
     ]
   },
   "devDependencies": {
diff --git a/src/components/Calender/Calendar.vue b/src/components/Calender/Calendar.vue
index c3e475c..76f8e6b 100644
--- a/src/components/Calender/Calendar.vue
+++ b/src/components/Calender/Calendar.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/require-default-prop -->
 <script lang="ts" setup>
 import {
   CalendarRoot,
diff --git a/yarn.lock b/yarn.lock
index 290e54c..62cfd23 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1213,7 +1213,7 @@
     unimport "^3.9.0"
     untyped "^1.4.2"
 
-"@nuxt/kit@^3.13.1":
+"@nuxt/kit@^3.13.0", "@nuxt/kit@^3.13.1":
   version "3.13.2"
   resolved "https://registry.npmjs.org/@nuxt/kit/-/kit-3.13.2.tgz"
   integrity sha512-KvRw21zU//wdz25IeE1E5m/aFSzhJloBRAQtv+evcFeZvuroIxpIQuUqhbzuwznaUwpiWbmwlcsp5uOWmi4vwA==
@@ -2600,7 +2600,7 @@
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.4.30.tgz"
   integrity sha512-CLg+f8RQCHQnKvuHY9adMsMaQOcqclh6Z5V9TaoMgy0ut0tz848joZ7/CYFFyF/yZ5i2yaw7Fn498C+CNZVHIg==
 
-"@vueuse/core@10.11.1", "@vueuse/core@^10.11.0", "@vueuse/core@^10.8.0":
+"@vueuse/core@10.11.1", "@vueuse/core@^10.10.0", "@vueuse/core@^10.11.0", "@vueuse/core@^10.8.0":
   version "10.11.1"
   resolved "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz"
   integrity sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==
@@ -2640,6 +2640,20 @@
   resolved "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.0.1.tgz"
   integrity sha512-dTFvuHFAjLYOiSd+t9Sk7xUiuL6jbfay/eX+g+jaipXXlwKur2VCqBCZX+jfu+2vROUGcUsdn3fJR9KkpadIOg==
 
+"@vueuse/motion@^2.2.6":
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/@vueuse/motion/-/motion-2.2.6.tgz#26fe7b1f3aefd8159fdfbc1ce32dffa27296946c"
+  integrity sha512-gKFktPtrdypSv44SaW1oBJKLBiP6kE5NcoQ6RsAU3InemESdiAutgQncfPe/rhLSLCtL4jTAhMmFfxoR6gm5LQ==
+  dependencies:
+    "@vueuse/core" "^10.10.0"
+    "@vueuse/shared" "^10.10.0"
+    csstype "^3.1.3"
+    framesync "^6.1.2"
+    popmotion "^11.0.5"
+    style-value-types "^5.1.2"
+  optionalDependencies:
+    "@nuxt/kit" "^3.13.0"
+
 "@vueuse/nuxt@^10.11.0":
   version "10.11.1"
   resolved "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-10.11.1.tgz"
@@ -2662,7 +2676,7 @@
     local-pkg "^0.5.0"
     vue-demi ">=0.14.10"
 
-"@vueuse/shared@10.11.1", "@vueuse/shared@^10.11.0":
+"@vueuse/shared@10.11.1", "@vueuse/shared@^10.10.0", "@vueuse/shared@^10.11.0":
   version "10.11.1"
   resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz"
   integrity sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==
@@ -4565,6 +4579,13 @@ fraction.js@^4.3.7:
   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
+framesync@6.1.2, framesync@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.1.2.tgz#755eff2fb5b8f3b4d2b266dd18121b300aefea27"
+  integrity sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==
+  dependencies:
+    tslib "2.4.0"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"
@@ -4971,6 +4992,11 @@ he@^1.2.0:
   resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 highlight.js@^11.10.0:
   version "11.10.0"
   resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz"
@@ -7226,6 +7252,16 @@ pluralize@^8.0.0:
   resolved "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz"
   integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==
 
+popmotion@^11.0.5:
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.5.tgz#8e3e014421a0ffa30ecd722564fd2558954e1f7d"
+  integrity sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==
+  dependencies:
+    framesync "6.1.2"
+    hey-listen "^1.0.8"
+    style-value-types "5.1.2"
+    tslib "2.4.0"
+
 postcss-calc@^10.0.0:
   version "10.0.0"
   resolved "https://registry.npmjs.org/postcss-calc/-/postcss-calc-10.0.0.tgz"
@@ -8577,6 +8613,14 @@ strip-literal@^2.1.0:
   dependencies:
     js-tokens "^9.0.0"
 
+style-value-types@5.1.2, style-value-types@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.1.2.tgz#6be66b237bd546048a764883528072ed95713b62"
+  integrity sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "2.4.0"
+
 stylehacks@^7.0.2:
   version "7.0.2"
   resolved "https://registry.npmjs.org/stylehacks/-/stylehacks-7.0.2.tgz"
@@ -8858,6 +8902,11 @@ tsc-alias@^1.8.10:
     normalize-path "^3.0.0"
     plimit-lit "^1.2.6"
 
+tslib@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tslib@^2.0.0, tslib@^2.0.3, tslib@^2.4.0, tslib@^2.6.2:
   version "2.6.3"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz"