diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index e52351470..1d0479e71 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -1,4 +1,6 @@
 # Ran prettier on source
 # after adding tailwind plugin
 54563d9deba9d95c1212c1be2217ce8fa181162b
-8e07a190aff0eba2a3e072f9857a654dca6fa0e1
\ No newline at end of file
+8e07a190aff0eba2a3e072f9857a654dca6fa0e1
+72f8c1b0735361a80910e196a60dd705f5b2145e
+c0f9e8108e4e7c29b44c0ef0b7faf2e3711f93ca
\ No newline at end of file
diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml
new file mode 100644
index 000000000..cfdf3e6f3
--- /dev/null
+++ b/.github/workflows/format.yml
@@ -0,0 +1,22 @@
+name: Format Check
+
+on:
+  pull_request:
+    push:
+      branches: [main]
+
+jobs:
+  oxfmt:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - run: yarn install --frozen-lockfile
+
+      - name: Check formatting
+        run: yarn format:check
diff --git a/.husky/.gitignore b/.husky/.gitignore
deleted file mode 100644
index 31354ec13..000000000
--- a/.husky/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-_
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
new file mode 100644
index 000000000..18b7a3ac5
--- /dev/null
+++ b/.oxfmtrc.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "singleQuote": true,
+  "semi": false,
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 100,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "quoteProps": "consistent",
+  "objectWrap": "preserve",
+  "sortImports": {
+    "newlinesBetween": true,
+    "groups": [["builtin"], "external", ["parent", "sibling", "index"], "unknown"]
+  },
+  "sortTailwindcss": true,
+  "ignorePatterns": ["node_modules/**", "dist/**"]
+}
diff --git a/.oxlintrc.json b/.oxlintrc.json
new file mode 100644
index 000000000..d75db718a
--- /dev/null
+++ b/.oxlintrc.json
@@ -0,0 +1,34 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "unicorn", "oxc"],
+  "categories": {
+    "correctness": "error",
+    "suspicious": "warn",
+    "perf": "warn"
+  },
+  "env": {
+    "builtin": true
+  },
+  "rules": {
+    "no-empty": ["warn", { "allowEmptyCatch": true }],
+    "unicorn/no-array-for-each": "off",
+    "unicorn/no-null": "off",
+    "typescript/no-explicit-any": "warn",
+    "typescript/consistent-type-imports": ["warn", { "prefer": "type-imports" }]
+  },
+  // Relax rules that are overly strict in test code:
+  //  - no-shadow: callback params like (q) => and (doc) => shadow outer imports — unavoidable
+  //  - no-explicit-any: catch (e: any) and controller hook stubs legitimately need any
+  //  - consistent-function-scoping: helper closures inside describe blocks are fine
+  "overrides": [
+    {
+      "files": ["tests/**/*.ts"],
+      "rules": {
+        "no-shadow": "off",
+        "typescript/no-explicit-any": "off",
+        "unicorn/consistent-function-scoping": "off"
+      }
+    }
+  ],
+  "ignorePatterns": ["node_modules", "dist"]
+}
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
deleted file mode 100644
index d8776e235..000000000
--- a/.pre-commit-config.yaml
+++ /dev/null
@@ -1,27 +0,0 @@
-exclude: 'node_modules|.git'
-default_stages: [commit]
-fail_fast: false
-
-
-repos:
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v4.0.0-alpha.8
-    hooks:
-      - id: prettier
-        types_or:
-          - javascript
-          - vue
-        additional_dependencies:
-          - prettier
-          - prettier-plugin-tailwindcss
-        exclude: |
-            (?x)^(
-                .*node_modules.*|
-                .*boilerplate.*|
-                .*src.*.js|
-            )$
-
-ci:
-    autoupdate_schedule: weekly
-    skip: []
-    submodules: false
diff --git a/.prettierrc.json b/.prettierrc.json
deleted file mode 100644
index 50f7605fd..000000000
--- a/.prettierrc.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "semi": false,
-    "singleQuote": true,
-    "tabWidth": 2,
-    "proseWrap": "always"
-}
\ No newline at end of file
diff --git a/404.html b/404.html
index 2f9e807bc..0e4c58f3a 100644
--- a/404.html
+++ b/404.html
@@ -1,14 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="refresh" content="0; url=./index.html">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="refresh" content="0; url=./index.html" />
     <script>
-        // JavaScript redirect as a fallback
-        const path = window.location.pathname;
-        window.location.href = `/?route=${path}`;
+      // JavaScript redirect as a fallback
+      const path = window.location.pathname
+      window.location.href = `/?route=${path}`
     </script>
-</head>
-<body>
-</body>
-</html>
\ No newline at end of file
+  </head>
+  <body></body>
+</html>
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 9d2400790..b0b03575b 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -5,6 +5,4 @@
 // Generated by unplugin-auto-import
 // biome-ignore lint: disable
 export {}
-declare global {
-
-}
+declare global {}
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 698b01a42..95857aea4 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -34,4 +34,4 @@
 //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
 //     }
 //   }
-// }
\ No newline at end of file
+// }
diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
index ac6e79fd8..faf3b5f43 100644
--- a/cypress/support/component-index.html
+++ b/cypress/support/component-index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <title>Components App</title>
   </head>
   <body>
     <div data-cy-root></div>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
index 1d9645713..9decaa799 100644
--- a/cypress/support/component.ts
+++ b/cypress/support/component.ts
@@ -16,7 +16,6 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 import './setup'
-
 import { mount } from 'cypress/vue'
 
 // Augment the Cypress namespace to include type definitions for
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index b54ad53db..30646a812 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,11 +1,13 @@
+import fs from 'fs'
+import path from 'path'
+
+import { transformerStyleToClass } from '@shikijs/transformers'
 import { defineConfig } from 'vitepress'
+
 import { lucideIcons } from '../../vite/lucideIcons'
-import path from 'path'
 import { meta } from './meta'
-import { getComponentItems } from './utils'
-import { transformerStyleToClass } from '@shikijs/transformers'
 import componentTransformer from './plugins/componentTransformer'
-import fs from 'fs'
+import { getComponentItems } from './utils'
 
 // needed for transforming shiki inline styles to classes
 const toClass = transformerStyleToClass({
@@ -32,10 +34,7 @@ export default defineConfig({
   head: [
     // newsreader font
     ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
-    [
-      'link',
-      { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
-    ],
+    ['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }],
     [
       'link',
       {
@@ -92,9 +91,7 @@ export default defineConfig({
       { text: 'Blog', link: '/blog' },
     ],
     // sidebar: sidebarConfig,
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/frappe/frappe-ui' },
-    ],
+    socialLinks: [{ icon: 'github', link: 'https://github.com/frappe/frappe-ui' }],
   },
   vite: {
     plugins: [lucideIcons()],
diff --git a/docs/.vitepress/meta.ts b/docs/.vitepress/meta.ts
index 5c7f54b9b..39dc3895e 100644
--- a/docs/.vitepress/meta.ts
+++ b/docs/.vitepress/meta.ts
@@ -1,5 +1,5 @@
 export const meta = {
-	name: 'Frappe UI',
-	github: 'https://github.com/frappe/frappe-ui',
-	description: 'An UI component library based on the Frappe design system ',
+  name: 'Frappe UI',
+  github: 'https://github.com/frappe/frappe-ui',
+  description: 'An UI component library based on the Frappe design system ',
 }
diff --git a/docs/.vitepress/plugins/componentTransformer.ts b/docs/.vitepress/plugins/componentTransformer.ts
index eb967af07..9635c49d5 100644
--- a/docs/.vitepress/plugins/componentTransformer.ts
+++ b/docs/.vitepress/plugins/componentTransformer.ts
@@ -1,6 +1,7 @@
-import type { MarkdownEnv, MarkdownRenderer } from 'vitepress'
 import { dirname, resolve } from 'node:path'
 
+import type { MarkdownEnv, MarkdownRenderer } from 'vitepress'
+
 export default function (md: MarkdownRenderer) {
   md.core.ruler.after('inline', 'component-preview', (state) => {
     const previewRegex =
@@ -22,9 +23,10 @@ export default function (md: MarkdownRenderer) {
         token.content = `<script setup>\n${importStr}\n</script>\n`
         state.tokens.unshift(token)
       } else {
-        state.tokens[scriptIdx].content = state.tokens[
-          scriptIdx
-        ].content.replace('</script>', `${importStr}\n</script>`)
+        state.tokens[scriptIdx].content = state.tokens[scriptIdx].content.replace(
+          '</script>',
+          `${importStr}\n</script>`,
+        )
       }
 
       const idx = state.tokens.findIndex((i) => i.content.match(previewRegex))
@@ -48,8 +50,7 @@ export default function (md: MarkdownRenderer) {
     })
 
     // Handle PropsTable
-    const propsRegex =
-      /<PropsTable\s+name=["']([^"']+)["']\s+:data='([^']+)'\/>/g
+    const propsRegex = /<PropsTable\s+name=["']([^"']+)["']\s+:data='([^']+)'\/>/g
 
     state.src = state.src.replace(propsRegex, (match, name, data) => {
       const typesPath = `../../../../src/components/${name}/types.ts`
@@ -58,8 +59,7 @@ export default function (md: MarkdownRenderer) {
       if (idx !== -1) {
         const { realPath, path: _path } = state.env as MarkdownEnv
 
-        state.tokens[idx].content =
-          `<PropsTable name="${name}" :data='${data}'><template #code>`
+        state.tokens[idx].content = `<PropsTable name="${name}" :data='${data}'><template #code>`
 
         const code = new state.Token('fence', 'code', 0)
         code.info = 'typescript'
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 5d47ce4bf..dc2ce7d5b 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,7 +1,8 @@
 import type { Theme } from 'vitepress'
-import "../../../src/fonts/Inter/inter.css"
-import "../../css/style.css"
-import "../../css/shiki.css"
+
+import '../../../src/fonts/Inter/inter.css'
+import '../../css/style.css'
+import '../../css/shiki.css'
 import Demo from '../../components/Docs/Demo.vue'
 import Layout from '../../components/Layout.vue'
 
@@ -10,7 +11,7 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 export default {
-	Layout,
+  Layout,
   enhanceApp({ app, router, siteData }) {
     app.component('ComponentPreview', Demo)
   },
diff --git a/docs/components/Docs/Demo.vue b/docs/components/Docs/Demo.vue
index ec12ab8f1..d5b0bcbd2 100644
--- a/docs/components/Docs/Demo.vue
+++ b/docs/components/Docs/Demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Tabs } from 'frappe-ui'
-import LucidePreview from '~icons/lucide/square-mouse-pointer'
+import { ref } from 'vue'
 import LucideCode from '~icons/lucide/code'
+import LucidePreview from '~icons/lucide/square-mouse-pointer'
 
 interface ComponentPreviewProps {
   name: string
@@ -19,12 +19,19 @@ const tabs = [
 </script>
 
 <template>
-  <div class="grid gap-5 not-prose">
-    <Tabs :tabs="tabs" v-model="state" class="[&>[role=tablist]]:border-0 [&>[role=tablist]]:gap-4 [&>[role=tablist]]:px-0">
+  <div class="not-prose grid gap-5">
+    <Tabs
+      :tabs="tabs"
+      v-model="state"
+      class="[&>[role=tablist]]:gap-4 [&>[role=tablist]]:border-0 [&>[role=tablist]]:px-0"
+    >
       <template #tab-panel="{ tab }">
         <div
           v-if="tab.label === 'Preview'"
-          :class='["border border-outline-gray-2 p-5 rounded overflow-auto scrollbar mt-3 flex gap-3 items-center", css]'
+          :class="[
+            'scrollbar mt-3 flex items-center gap-3 overflow-auto rounded border border-outline-gray-2 p-5',
+            css,
+          ]"
         >
           <slot />
         </div>
diff --git a/docs/components/Docs/EmitsTable.vue b/docs/components/Docs/EmitsTable.vue
index 6c5cf585c..e41360943 100644
--- a/docs/components/Docs/EmitsTable.vue
+++ b/docs/components/Docs/EmitsTable.vue
@@ -15,16 +15,14 @@ defineProps<Props>()
 </script>
 
 <template>
-  <table class="overflow-auto scrollbar not-prose w-full">
+  <table class="scrollbar not-prose w-full overflow-auto">
     <colgroup>
       <col class="w-[50%]" />
       <col class="w-[50%]" />
     </colgroup>
 
-    <tbody
-      class="[&_td]:px-3 [&_th]:px-3 [&_td]:p-2 [&_th]:p-2 [&_td]:align-top"
-    >
-      <tr class="text-left *:bg-surface-gray-2 text-ink-gray-6 *:font-semibold">
+    <tbody class="[&_td]:p-2 [&_td]:px-3 [&_td]:align-top [&_th]:p-2 [&_th]:px-3">
+      <tr class="text-left text-ink-gray-6 *:bg-surface-gray-2 *:font-semibold">
         <th class="rounded-l">Event</th>
         <th class="rounded-r">Payload</th>
       </tr>
@@ -36,12 +34,12 @@ defineProps<Props>()
           </Badge>
         </td>
 
-        <td class="flex flex-wrap h-fit gap-2">
+        <td class="flex h-fit flex-wrap gap-2">
           <span class="text-sm font-semibold">
             {{ x.type }}
           </span>
 
-          <p class="text-sm text-ink-gray-5 leading-relaxed w-full">
+          <p class="w-full text-sm leading-relaxed text-ink-gray-5">
             {{ x.description }}
           </p>
         </td>
diff --git a/docs/components/Docs/OnThisPage.vue b/docs/components/Docs/OnThisPage.vue
index 565b50075..6f89a7322 100644
--- a/docs/components/Docs/OnThisPage.vue
+++ b/docs/components/Docs/OnThisPage.vue
@@ -1,78 +1,72 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch } from "vue";
-import { useRoute } from "vitepress";
+import { useRoute } from 'vitepress'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 interface Heading {
-  type: string;
-  name: string;
-  id: string;
-  scrollPos: number;
+  type: string
+  name: string
+  id: string
+  scrollPos: number
 }
 
-const headings = ref<Heading[]>([]);
-const activeHeading = ref();
-const h2Exists = ref(false);
+const headings = ref<Heading[]>([])
+const activeHeading = ref()
+const h2Exists = ref(false)
 
 const setHeadings = () => {
-  const elements = Array.from(document.querySelectorAll("h2, h3"));
+  const elements = Array.from(document.querySelectorAll('h2, h3'))
 
-  h2Exists.value = elements.some((el) => el.tagName == "H2");
+  h2Exists.value = elements.some((el) => el.tagName == 'H2')
 
   headings.value = elements.map((el) => ({
     type: el.tagName.toLowerCase(),
     name: el.textContent?.trim(),
     id: el.id,
     scrollPos: el.offsetTop,
-  }));
-};
+  }))
+}
 
 const setActiveHeading = () => {
-  const curScrollPos = document.documentElement.scrollTop;
+  const curScrollPos = document.documentElement.scrollTop
 
   for (let i = 0; i < headings.value.length; i++) {
     if (curScrollPos <= headings.value[i].scrollPos) {
-      activeHeading.value = headings.value[i].id;
-      break;
+      activeHeading.value = headings.value[i].id
+      break
     }
   }
-};
+}
 
-const route = useRoute();
+const route = useRoute()
 
 onMounted(() => {
-  setHeadings();
-  document.addEventListener("scroll", setActiveHeading);
-});
+  setHeadings()
+  document.addEventListener('scroll', setActiveHeading)
+})
 
 onUnmounted(() => {
-  document.removeEventListener("scroll", setActiveHeading);
-});
+  document.removeEventListener('scroll', setActiveHeading)
+})
 
-watch(route, setHeadings);
+watch(route, setHeadings)
 </script>
 
 <template>
   <aside
-    class="sticky top-24 hidden lg:flex flex-col h-fit mt-10 leading-relaxed w-[200px]"
-    :class='{ "invisible": headings.length == 0 }'
+    class="sticky top-24 mt-10 hidden h-fit w-[200px] flex-col leading-relaxed lg:flex"
+    :class="{ invisible: headings.length == 0 }"
   >
-    <span class="font-medium whitespace-nowrap pl-3">On this page</span>
+    <span class="whitespace-nowrap pl-3 font-medium">On this page</span>
 
     <a
       v-for="x in headings"
       :href="`#${x.id}`"
-      class="
-        text-ink-gray-6 whitespace-nowrap !no-underline pl-4 py-1 border-l
-        hover:text-ink-gray-9
-      "
+      class="whitespace-nowrap border-l py-1 pl-4 text-ink-gray-6 !no-underline hover:text-ink-gray-9"
       @click="activeHeading = x.id"
-      :class='
-        {
-          "pl-7": x.type == "h3" && h2Exists,
-          "border-outline-gray-5 text-ink-gray-9": activeHeading &&
-            x.id == activeHeading,
-        }
-      '
+      :class="{
+        'pl-7': x.type == 'h3' && h2Exists,
+        'border-outline-gray-5 text-ink-gray-9': activeHeading && x.id == activeHeading,
+      }"
     >
       {{ x.name }}
     </a>
diff --git a/docs/components/Docs/PrevNextBtns.vue b/docs/components/Docs/PrevNextBtns.vue
index 5aa373eaa..3de1d9938 100644
--- a/docs/components/Docs/PrevNextBtns.vue
+++ b/docs/components/Docs/PrevNextBtns.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { state } from '../../state'
 import { useData, useRoute } from 'vitepress'
-
+import { computed } from 'vue'
 import LucideLeft from '~icons/lucide/arrow-left'
 import LucideRight from '~icons/lucide/arrow-right'
 
+import { state } from '../../state'
+
 const route = useRoute()
 const { frontmatter } = useData()
 
@@ -47,7 +47,7 @@ const subtleMdLink =
 </script>
 
 <template>
-  <div class="flex justify-between gap-5 mt-10" v-if="visible">
+  <div class="mt-10 flex justify-between gap-5" v-if="visible">
     <a v-if="prevLink" :href="prevLink.link" :class="subtleMdLink">
       <LucideLeft class="h-4 w-4" />
       {{ prevLink.text }}
diff --git a/docs/components/Docs/PropsTable.vue b/docs/components/Docs/PropsTable.vue
index e41b11ffa..a944a9f3e 100644
--- a/docs/components/Docs/PropsTable.vue
+++ b/docs/components/Docs/PropsTable.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Badge, Button } from 'frappe-ui'
+import { ref } from 'vue'
 import LucideCode from '~icons/lucide/code-xml'
 
 interface itemProp {
@@ -21,7 +21,7 @@ defineProps<Props>()
 </script>
 
 <template>
-  <div class="flex items-center gap-3 justify-between my-5">
+  <div class="my-5 flex items-center justify-between gap-3">
     <h2 id="props" class="my-auto">Props</h2>
 
     <Button size="sm" @click="tsToggled = !tsToggled">
@@ -35,17 +35,15 @@ defineProps<Props>()
 
   <slot v-if="!tsToggled" name="code" />
 
-  <table class="overflow-auto scrollbar not-prose w-full">
+  <table class="scrollbar not-prose w-full overflow-auto">
     <colgroup>
       <col class="w-[20%]" />
       <col class="w-[20%]" />
       <col class="w-[60%]" />
     </colgroup>
 
-    <tbody
-      class="[&_td]:px-3 [&_th]:px-3 [&_td]:p-2 [&_th]:p-2 [&_td]:align-top"
-    >
-      <tr class="text-left *:bg-surface-gray-2 text-ink-gray-6 *:font-semibold">
+    <tbody class="[&_td]:p-2 [&_td]:px-3 [&_td]:align-top [&_th]:p-2 [&_th]:px-3">
+      <tr class="text-left text-ink-gray-6 *:bg-surface-gray-2 *:font-semibold">
         <th class="rounded-l">Name</th>
         <th>Default</th>
         <th class="rounded-r">Type</th>
@@ -53,7 +51,7 @@ defineProps<Props>()
 
       <tr v-for="x in data" :key="x.name" class="border-b last:border-0">
         <td>
-          <Badge class="w-fit !rounded-sm mb-auto flex font-mono">
+          <Badge class="mb-auto flex w-fit !rounded-sm font-mono">
             {{ x.name + (x.required ? '*' : '') }}
           </Badge>
         </td>
@@ -61,7 +59,7 @@ defineProps<Props>()
         <td class="font-mono text-sm">
           <div
             v-if="x.default?.includes('{')"
-            class="w-fit rounded-sm whitespace-pre px-3 py-2 leading-relaxed h-full !bg-surface-gray-1"
+            class="h-full w-fit whitespace-pre rounded-sm !bg-surface-gray-1 px-3 py-2 leading-relaxed"
           >
             {{ x.default }}
           </div>
@@ -69,12 +67,12 @@ defineProps<Props>()
           <template v-else>{{ x.default || '-' }}</template>
         </td>
 
-        <td class="flex flex-wrap h-fit gap-2">
-          <span class="text-sm font-semibold font-mono">
+        <td class="flex h-fit flex-wrap gap-2">
+          <span class="font-mono text-sm font-semibold">
             {{ x.type }}
           </span>
 
-          <p class="text-sm text-ink-gray-5 leading-relaxed w-full">
+          <p class="w-full text-sm leading-relaxed text-ink-gray-5">
             {{ x.description }}
           </p>
         </td>
diff --git a/docs/components/Docs/Sidebar.vue b/docs/components/Docs/Sidebar.vue
index e60e43aa5..a25556742 100644
--- a/docs/components/Docs/Sidebar.vue
+++ b/docs/components/Docs/Sidebar.vue
@@ -1,26 +1,20 @@
 <script setup lang="ts">
-import { state } from '../../state'
+import { ScrollAreaRoot, ScrollAreaViewport, ScrollAreaThumb, ScrollAreaScrollbar } from 'reka-ui'
 import { useData, useRoute } from 'vitepress'
-
-import LucidePalette from '~icons/lucide/palette'
-import LucideRows from '~icons/lucide/rows-3'
-import LucideJson from '~icons/lucide/braces'
-import LucideSquare from '~icons/lucide/square'
-import LucideDb from '~icons/lucide/database-zap'
-import LucideSettings from '~icons/lucide/settings'
 import LucideBaseline from '~icons/lucide/baseline'
 import LucideBlend from '~icons/lucide/blend'
-import LucideRadius from '~icons/lucide/radius'
-import ChevronRight from '~icons/lucide/chevron-right'
 import LucideBox from '~icons/lucide/box'
-import pkgJson from '../../../package.json'
+import LucideJson from '~icons/lucide/braces'
+import ChevronRight from '~icons/lucide/chevron-right'
+import LucideDb from '~icons/lucide/database-zap'
+import LucidePalette from '~icons/lucide/palette'
+import LucideRadius from '~icons/lucide/radius'
+import LucideRows from '~icons/lucide/rows-3'
+import LucideSettings from '~icons/lucide/settings'
+import LucideSquare from '~icons/lucide/square'
 
-import {
-  ScrollAreaRoot,
-  ScrollAreaViewport,
-  ScrollAreaThumb,
-  ScrollAreaScrollbar,
-} from 'reka-ui'
+import pkgJson from '../../../package.json'
+import { state } from '../../state'
 
 const curVersion = pkgJson.version
 const componentList = useData().theme.value.componentList
@@ -121,21 +115,16 @@ const list = [
 state.sidebarList = list
 
 const activeLink = (link: string) =>
-  useRoute().path === link
-    ? 'bg-surface-white dark:bg-surface-gray-1 shadow-sm'
-    : 'text-ink-gray-8'
+  useRoute().path === link ? 'bg-surface-white dark:bg-surface-gray-1 shadow-sm' : 'text-ink-gray-8'
 
 const linkClass = 'p-2 rounded'
 </script>
 
 <template>
   <aside
-    class="bg-surface-gray-1 dark:bg-surface-white border-r flex flex-col p-3 h-screen pr-0 pt-1 min-w-fit sticky top-0 w-full"
+    class="sticky top-0 flex h-screen w-full min-w-fit flex-col border-r bg-surface-gray-1 p-3 pr-0 pt-1 dark:bg-surface-white"
   >
-    <a
-      class="hidden lg:flex items-center gap-2 p-2 py-3 mb-3"
-      href="/"
-    >
+    <a class="mb-3 hidden items-center gap-2 p-2 py-3 lg:flex" href="/">
       <img src="/logo.svg" class="w-8" />
       <div class="flex flex-col gap-1 *:leading-none">
         <span class="text-base font-medium text-ink-gray-8">Frappe UI</span>
@@ -148,39 +137,34 @@ const linkClass = 'p-2 rounded'
       style="--scrollbar-size: 10px"
       :scroll-hide-delay="0"
     >
-      <ScrollAreaViewport class="w-full h-full">
+      <ScrollAreaViewport class="h-full w-full">
         <nav class="flex flex-col pr-2">
           <template v-for="(item, i) in list" :key="item.text">
             <a
               v-if="!item.items"
               :href="item.link"
-              :class="[
-                linkClass,
-                activeLink(item.link),
-                list[i + 1].items ? 'mb-6' : '',
-              ]"
+              :class="[linkClass, activeLink(item.link), list[i + 1].items ? 'mb-6' : '']"
             >
               {{ item.text }}
             </a>
 
             <details v-else class="group" :open="!item.collapsed">
               <summary
-                class="list-none w-full flex items-center justify-between gap-2 whitespace-nowrap font-medium
-                text-ink-gray-600 border-t p-3 pr-1 pl-2 group-open:text-ink-gray-800 cursor-pointer"
+                class="text-ink-gray-600 group-open:text-ink-gray-800 flex w-full cursor-pointer list-none items-center justify-between gap-2 whitespace-nowrap border-t p-3 pl-2 pr-1 font-medium"
               >
                 {{ item.text }}
 
                 <ChevronRight
-                  class="size-4 shrink-0 ml-5 transition-transform duration-200 group-open:rotate-90"
+                  class="ml-5 size-4 shrink-0 transition-transform duration-200 group-open:rotate-90"
                 />
               </summary>
 
-              <div class="flex flex-col mb-6">
+              <div class="mb-6 flex flex-col">
                 <a
                   :href="child.link"
                   v-for="child in item.items"
                   :key="child.text"
-                  class="inline-flex gap-2 items-center"
+                  class="inline-flex items-center gap-2"
                   :class="[linkClass, activeLink(child.link)]"
                 >
                   <component :is="child.icon" class="size-4" /> {{ child.text }}
@@ -192,11 +176,11 @@ const linkClass = 'p-2 rounded'
       </ScrollAreaViewport>
 
       <ScrollAreaScrollbar
-        class="flex select-none touch-none p-0.5 z-20 transition-colors duration-[160ms] ease-out data-[orientation=vertical]:w-2.5"
+        class="z-20 flex touch-none select-none p-0.5 transition-colors duration-[160ms] ease-out data-[orientation=vertical]:w-2.5"
         orientation="vertical"
       >
         <ScrollAreaThumb
-          class="flex-1 bg-surface-gray-3 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]"
+          class="relative flex-1 rounded-[10px] bg-surface-gray-3 before:absolute before:left-1/2 before:top-1/2 before:h-full before:min-h-[44px] before:w-full before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']"
         />
       </ScrollAreaScrollbar>
     </ScrollAreaRoot>
diff --git a/docs/components/Docs/SlotsTable.vue b/docs/components/Docs/SlotsTable.vue
index e018c9b60..0243c890c 100644
--- a/docs/components/Docs/SlotsTable.vue
+++ b/docs/components/Docs/SlotsTable.vue
@@ -15,16 +15,14 @@ defineProps<Props>()
 </script>
 
 <template>
-  <table class="overflow-auto scrollbar not-prose w-full">
+  <table class="scrollbar not-prose w-full overflow-auto">
     <colgroup>
       <col class="w-[20%]" />
       <col class="w-[80%]" />
     </colgroup>
 
-    <tbody
-      class="[&_td]:px-3 [&_th]:px-3 [&_td]:p-2 [&_th]:p-2 [&_td]:align-top"
-    >
-      <tr class="text-left *:bg-surface-gray-2 text-ink-gray-6 *:font-semibold">
+    <tbody class="[&_td]:p-2 [&_td]:px-3 [&_td]:align-top [&_th]:p-2 [&_th]:px-3">
+      <tr class="text-left text-ink-gray-6 *:bg-surface-gray-2 *:font-semibold">
         <th class="rounded-l">Slot</th>
         <th class="rounded-r">Payload</th>
       </tr>
@@ -36,12 +34,12 @@ defineProps<Props>()
           </Badge>
         </td>
 
-        <td class="flex flex-wrap h-fit gap-2">
+        <td class="flex h-fit flex-wrap gap-2">
           <span class="text-sm font-semibold">
-            {{ x.type == 'any'? '-' : x.type }}
+            {{ x.type == 'any' ? '-' : x.type }}
           </span>
 
-          <p class="text-sm text-ink-gray-5 leading-relaxed w-full">
+          <p class="w-full text-sm leading-relaxed text-ink-gray-5">
             {{ x.description }}
           </p>
         </td>
diff --git a/docs/components/Home/ComponentGroups.vue b/docs/components/Home/ComponentGroups.vue
index e6b1814bc..2356038a1 100644
--- a/docs/components/Home/ComponentGroups.vue
+++ b/docs/components/Home/ComponentGroups.vue
@@ -1,93 +1,78 @@
 <script setup lang="ts">
-import DataDisplay from "./dummies/DataDisplay.vue";
-import Navigation from "./dummies/Navigation.vue";
-import Forms from "./dummies/Forms.vue";
-import Datetime from "./dummies/Datetime.vue";
-import Overlays from "./dummies/Overlays.vue";
-import Feedback from "./dummies/Feedback.vue";
-import Charts from "./dummies/Charts.vue";
-import { Badge } from "frappe-ui";
+import { Badge } from 'frappe-ui'
+
+import Charts from './dummies/Charts.vue'
+import DataDisplay from './dummies/DataDisplay.vue'
+import Datetime from './dummies/Datetime.vue'
+import Feedback from './dummies/Feedback.vue'
+import Forms from './dummies/Forms.vue'
+import Navigation from './dummies/Navigation.vue'
+import Overlays from './dummies/Overlays.vue'
 
 const componentGroups = {
-  "Data Display": {
+  'Data Display': {
     component: DataDisplay,
-    list: ["Avatar", "Badge", "ListView"],
+    list: ['Avatar', 'Badge', 'ListView'],
   },
 
-  "Navigation": {
+  'Navigation': {
     component: Navigation,
-    list: [
-      "Breadcrumbs",
-      "Tabs",
-      "TabButtons",
-      "Sidebar",
-    ],
+    list: ['Breadcrumbs', 'Tabs', 'TabButtons', 'Sidebar'],
   },
-  "Forms": {
+  'Forms': {
     component: Forms,
     list: [
-      "Input",
-      "FormControl",
-      "Select",
-      "MultiSelect",
-      "Checkbox",
-      "Switch",
-      "Password",
-      "FileUploader",
-      "Rating",
-      "TextEditor",
+      'Input',
+      'FormControl',
+      'Select',
+      'MultiSelect',
+      'Checkbox',
+      'Switch',
+      'Password',
+      'FileUploader',
+      'Rating',
+      'TextEditor',
     ],
   },
-  "DateTime": {
+  'DateTime': {
     component: Datetime,
-    list: ["Calendar", "DatePicker", "MonthPicker", "TimePicker"],
+    list: ['Calendar', 'DatePicker', 'MonthPicker', 'TimePicker'],
   },
-  "Overlays": {
+  'Overlays': {
     component: Overlays,
-    list: ["Dialog", "Dropdown", "Popover", "Tooltip"],
+    list: ['Dialog', 'Dropdown', 'Popover', 'Tooltip'],
   },
-  "Feedback": {
+  'Feedback': {
     component: Feedback,
-    list: [
-      "Alert",
-      "ErrorMessage",
-      "Progress",
-      "CircularProgressBar",
-    ],
+    list: ['Alert', 'ErrorMessage', 'Progress', 'CircularProgressBar'],
   },
 
-  "Charts": {
+  'Charts': {
     component: Charts,
-    list: [
-      "Charts",
-    ],
+    list: ['Charts'],
   },
-};
+}
 </script>
 
 <template>
-  <div class="grid grid-cols-2 gap-6 not-prose">
+  <div class="not-prose grid grid-cols-2 gap-6">
     <div
       v-for="(components, group) in componentGroups"
       :key="group"
-      class="rounded border border-outline-gray-2 dark:border-0 grid"
+      class="grid rounded border border-outline-gray-2 dark:border-0"
     >
       <component
         :is="components.component"
-        class="min-h-[130px] bg-surface-gray-2 dark:bg-surface-gray-1 rounded-t"
+        class="min-h-[130px] rounded-t bg-surface-gray-2 dark:bg-surface-gray-1"
       />
 
-      <div class="grid gap-2 p-4 bg-surface-cards rounded-b">
+      <div class="grid gap-2 rounded-b bg-surface-cards p-4">
         <h3 class="text-lg font-semibold text-ink-gray-9">
           {{ group }}
         </h3>
 
-        <div class="flex gap-3 flex-wrap">
-          <a
-            v-for="x in components.list"
-            :key="x"
-            :href='"/docs/components/" + x.toLowerCase()'
-          >
+        <div class="flex flex-wrap gap-3">
+          <a v-for="x in components.list" :key="x" :href="'/docs/components/' + x.toLowerCase()">
             <Badge size="lg" class="hover:bg-surface-gray-4">
               {{ x }}
             </Badge>
diff --git a/docs/components/Home/Hero.vue b/docs/components/Home/Hero.vue
index c8f1cba3a..9e3910ca3 100644
--- a/docs/components/Home/Hero.vue
+++ b/docs/components/Home/Hero.vue
@@ -3,23 +3,21 @@ import LucideRight from '~icons/lucide/arrow-right'
 </script>
 
 <template>
-  <div class="grid gap-5 max-w-7xl mx-auto">
-    <div class="my-20 p-5 flex flex-col gap-5 text-center w-fit">
-      <h1
-        class="text-[40px] font-semibold tracing-tight leading-tight font-news"
-      >
+  <div class="mx-auto grid max-w-7xl gap-5">
+    <div class="my-20 flex w-fit flex-col gap-5 p-5 text-center">
+      <h1 class="tracing-tight font-news text-[40px] font-semibold leading-tight">
         Build Beautiful Interfaces Fast
       </h1>
 
-      <p class="text-xl text-ink-gray-5 leading-relaxed w-3/4 mx-auto">
-        Beautifully crafted components built for real world applications. Better
-        defaults helping you ship faster.
+      <p class="mx-auto w-3/4 text-xl leading-relaxed text-ink-gray-5">
+        Beautifully crafted components built for real world applications. Better defaults helping
+        you ship faster.
       </p>
 
-      <div class="flex gap-3 mt-2 mx-auto">
+      <div class="mx-auto mt-2 flex gap-3">
         <a
           href="/docs/getting-started"
-          class="inline-flex items-center gap-2 h-8 px-2.5 rounded text-base font-medium text-ink-white bg-surface-gray-7 hover:bg-surface-gray-6 active:bg-surface-gray-5 transition-colors focus:outline-none focus-visible:ring focus-visible:ring-outline-gray-3"
+          class="inline-flex h-8 items-center gap-2 rounded bg-surface-gray-7 px-2.5 text-base font-medium text-ink-white transition-colors hover:bg-surface-gray-6 focus:outline-none focus-visible:ring focus-visible:ring-outline-gray-3 active:bg-surface-gray-5"
         >
           Get Started
           <LucideRight class="h-4 w-4" />
diff --git a/docs/components/Home/Showcase/col1.vue b/docs/components/Home/Showcase/col1.vue
index eec7e4ee2..5688d3c73 100644
--- a/docs/components/Home/Showcase/col1.vue
+++ b/docs/components/Home/Showcase/col1.vue
@@ -1,52 +1,45 @@
 <script setup lang="ts">
-import {
-  Avatar,
-  Button,
-  FormControl,
-  Select,
-  Switch,
-  Tooltip,
-} from "frappe-ui";
-import LucideRight from "~icons/lucide/arrow-right";
-import LucideGlobe from "~icons/lucide/globe";
-import LucideLink from "~icons/lucide/link";
-import LucideSearch from "~icons/lucide/search";
-import LucideInfo from "~icons/lucide/info";
-import LucideCircle from "~icons/lucide/circle-plus";
+import { Avatar, Button, FormControl, Select, Switch, Tooltip } from 'frappe-ui'
+import LucideRight from '~icons/lucide/arrow-right'
+import LucideCircle from '~icons/lucide/circle-plus'
+import LucideGlobe from '~icons/lucide/globe'
+import LucideInfo from '~icons/lucide/info'
+import LucideLink from '~icons/lucide/link'
+import LucideSearch from '~icons/lucide/search'
 
 const countryOptions = [
-  { label: "Syria", value: "SY" },
-  { label: "Egypt", value: "EG" },
-  { label: "Canada", value: "CA" },
-  { label: "Ireland", value: "IR" },
-];
+  { label: 'Syria', value: 'SY' },
+  { label: 'Egypt', value: 'EG' },
+  { label: 'Canada', value: 'CA' },
+  { label: 'Ireland', value: 'IR' },
+]
 
 const users = [
   {
-    name: "Sandeep",
-    label: "sandeep@gmail.com",
-    img: "https://i.pravatar.cc/150?img=1",
+    name: 'Sandeep',
+    label: 'sandeep@gmail.com',
+    img: 'https://i.pravatar.cc/150?img=1',
   },
   {
-    name: "John",
-    label: "john@proton.me",
-    img: "https://i.pravatar.cc/150?img=2",
+    name: 'John',
+    label: 'john@proton.me',
+    img: 'https://i.pravatar.cc/150?img=2',
   },
   {
-    name: "Zach",
-    label: "zach@frappe.io",
-    img: "https://i.pravatar.cc/150?img=3",
+    name: 'Zach',
+    label: 'zach@frappe.io',
+    img: 'https://i.pravatar.cc/150?img=3',
   },
-];
+]
 
-const selOpts = ["Admin", "Editor", "Viewer", "Guest"]
+const selOpts = ['Admin', 'Editor', 'Viewer', 'Guest']
 </script>
 
 <template>
   <section
-    class="grid gap-5 *:rounded *:border [&_label]:text-ink-gray-9 [&_label]:mb-2 [&_label]:text-base h-fit"
+    class="grid h-fit gap-5 *:rounded *:border [&_label]:mb-2 [&_label]:text-base [&_label]:text-ink-gray-9"
   >
-    <div class="grid p-5 grid-cols-2 gap-y-5 gap-x-4 h-fit">
+    <div class="grid h-fit grid-cols-2 gap-x-4 gap-y-5 p-5">
       <FormControl
         label="Billing name"
         placeholder="Enter your name"
@@ -54,17 +47,9 @@ const selOpts = ["Admin", "Editor", "Viewer", "Guest"]
         class="col-span-2"
       />
 
-      <FormControl
-        type="select"
-        label="Country"
-        :options="countryOptions"
-      />
+      <FormControl type="select" label="Country" :options="countryOptions" />
 
-      <FormControl
-        type="select"
-        label="City"
-        :options="countryOptions"
-      />
+      <FormControl type="select" label="City" :options="countryOptions" />
 
       <FormControl
         label="Address"
@@ -84,32 +69,27 @@ const selOpts = ["Admin", "Editor", "Viewer", "Guest"]
         type="select"
         label="Month"
         placeholder="MM"
-        :options='
-          [
-            "January",
-            "February",
-            "March",
-            "April",
-            "May",
-            "June",
-            "July",
-            "August",
-            "September",
-            "October",
-            "November",
-            "December",
-          ]
-        '
+        :options="[
+          'January',
+          'February',
+          'March',
+          'April',
+          'May',
+          'June',
+          'July',
+          'August',
+          'September',
+          'October',
+          'November',
+          'December',
+        ]"
       />
 
       <FormControl
         type="select"
         label="Year"
         placeholder="Select Year"
-        :options="
-          Array.from({ length: 6 }, (_, i) =>
-            String(i + new Date().getFullYear()))
-        "
+        :options="Array.from({ length: 6 }, (_, i) => String(i + new Date().getFullYear()))"
       />
 
       <Button variant="solid" class="col-span-2 -mt-1">
@@ -120,24 +100,17 @@ const selOpts = ["Admin", "Editor", "Viewer", "Guest"]
       </Button>
     </div>
 
-    <div class="p-5 grid gap-5">
-      <h1 class="font-semibold text-lg">Create Project</h1>
-      <FormControl
-        label="Title"
-        variant="outline"
-        placeholder="Enter title"
-        value="Operations"
-      />
+    <div class="grid gap-5 p-5">
+      <h1 class="text-lg font-semibold">Create Project</h1>
+      <FormControl label="Title" variant="outline" placeholder="Enter title" value="Operations" />
 
       <div class="flex gap-3">
-        <div class="my-auto bg-surface-gray-2 p-2 rounded">
+        <div class="my-auto rounded bg-surface-gray-2 p-2">
           <LucideGlobe class="size-6" />
         </div>
-        <div class="grid gap-1 mr-auto">
+        <div class="mr-auto grid gap-1">
           <span class="text-ink-gray-9">Visible to everyone</span>
-          <p class="text-ink-gray-5">
-            Collaborate and stay in sync
-          </p>
+          <p class="text-ink-gray-5">Collaborate and stay in sync</p>
         </div>
         <Switch />
       </div>
@@ -159,7 +132,7 @@ const selOpts = ["Admin", "Editor", "Viewer", "Guest"]
         </div>
 
         <Select
-          :options='selOpts'
+          :options="selOpts"
           class="my-auto ml-auto !w-fit"
           variant="ghost"
           placeholder="Select"
@@ -167,17 +140,15 @@ const selOpts = ["Admin", "Editor", "Viewer", "Guest"]
         />
       </div>
 
-      <div class="flex gap-3 justify-between items-center">
+      <div class="flex items-center justify-between gap-3">
         <Button>
           <template #prefix>
             <LucideLink class="size-4" />
           </template>
-          Copy Link</Button>
-
-        <Tooltip
-          text="Gotchu!"
-          :hover-delay="0"
+          Copy Link</Button
         >
+
+        <Tooltip text="Gotchu!" :hover-delay="0">
           <span class="flex gap-2">
             Learn more
             <LucideInfo class="size-4" />
@@ -189,7 +160,8 @@ const selOpts = ["Admin", "Editor", "Viewer", "Guest"]
         <template #prefix>
           <LucideCircle class="size-4" />
         </template>
-        Create project</Button>
+        Create project</Button
+      >
     </div>
   </section>
 </template>
diff --git a/docs/components/Home/Showcase/col2.vue b/docs/components/Home/Showcase/col2.vue
index a078e5462..cb3f2d8a4 100644
--- a/docs/components/Home/Showcase/col2.vue
+++ b/docs/components/Home/Showcase/col2.vue
@@ -1,18 +1,10 @@
 <script setup lang="ts">
+import { Tabs, Badge, Button, FormControl, Progress, Rating, Switch } from 'frappe-ui'
 import { reactive, ref } from 'vue'
-import LucideUser from '~icons/lucide/user'
-import LucideCog from '~icons/lucide/cog'
 import LucideRight from '~icons/lucide/chevron-right'
-import {
-  Tabs,
-  Badge,
-  Button,
-  FormControl,
-  Progress,
-  Rating,
-  Switch,
-} from 'frappe-ui'
+import LucideCog from '~icons/lucide/cog'
 import LucideTag from '~icons/lucide/tag'
+import LucideUser from '~icons/lucide/user'
 
 const val = ref(0)
 const followed = ref(false)
@@ -44,22 +36,20 @@ const resetState = () => {
 
 <template>
   <section
-    class="grid gap-5 *:rounded *:border [&_label]:text-ink-gray-9 [&_label]:mb-2 [&_label]:text-base h-fit"
+    class="grid h-fit gap-5 *:rounded *:border [&_label]:mb-2 [&_label]:text-base [&_label]:text-ink-gray-9"
   >
     <div class="h-fit">
-      <Tabs :tabs v-model="val" class='[&>[role=tablist]]:px-4'>
+      <Tabs :tabs v-model="val" class="[&>[role=tablist]]:px-4">
         <template #tab-panel="{ tab }">
           <div v-if="tab.label == 'Profile'" class="p-5">
-            <div class="flex items-center gap-4 mb-4">
+            <div class="mb-4 flex items-center gap-4">
               <img src="/frappe-logo.svg" class="!size-14 rounded-full" />
 
               <div class="flex-1">
                 <h4 class="font-semibold text-ink-gray-9">
                   {{ state.username }}
                 </h4>
-                <p class="text-sm text-ink-gray-6">
-                  {{ state.username }}@zap.io
-                </p>
+                <p class="text-sm text-ink-gray-6">{{ state.username }}@zap.io</p>
               </div>
 
               <Button
@@ -71,19 +61,19 @@ const resetState = () => {
               </Button>
             </div>
 
-            <p class="text-sm text-ink-gray-7 mb-4 leading-relaxed">
+            <p class="mb-4 text-sm leading-relaxed text-ink-gray-7">
               {{ state.about }}
             </p>
 
             <div class="flex items-center gap-1 text-sm" v-if="state.followers">
               <span class="font-semibold text-ink-gray-9">4</span>
-              <span class="text-ink-gray-6 mr-5">Following</span>
+              <span class="mr-5 text-ink-gray-6">Following</span>
               <span class="font-semibold text-ink-gray-9">97.1K</span>
               <span class="text-ink-gray-6">Followers</span>
             </div>
           </div>
 
-          <div v-else class="p-5 grid gap-5">
+          <div v-else class="grid gap-5 p-5">
             <FormControl
               v-model="state.username"
               label="Username"
@@ -97,24 +87,20 @@ const resetState = () => {
               type="textarea"
             />
 
-            <div class="flex items-center justify-between -mb-2">
+            <div class="-mb-2 flex items-center justify-between">
               <Button theme="red" @click="resetState"> Reset</Button>
-              <Switch
-                label="Followers"
-                v-model="state.followers"
-                class="[&_label]:!m-0"
-              />
+              <Switch label="Followers" v-model="state.followers" class="[&_label]:!m-0" />
             </div>
           </div>
         </template>
       </Tabs>
     </div>
 
-    <div class="p-5 grid gap-5 h-fit">
+    <div class="grid h-fit gap-5 p-5">
       <Progress :value="20" label="Daily Progress" size="lg" :hint="true" />
 
       <div class="flex gap-3">
-        <span class="p-3 px-4 rounded bg-surface-gray-2 flex items-center">
+        <span class="flex items-center rounded bg-surface-gray-2 p-3 px-4">
           <LucideTag class="size-5" />
         </span>
 
@@ -125,18 +111,14 @@ const resetState = () => {
       </div>
     </div>
 
-    <div class="p-5 grid grid-cols-2 *:col-span-2 gap-y-5">
+    <div class="grid grid-cols-2 gap-y-5 p-5 *:col-span-2">
       <FormControl label="Username" placeholder="Enter username">
         <template #prefix>
           <LucideUser class="size-4" />
         </template>
       </FormControl>
 
-      <FormControl
-        label="Email"
-        :options="countryOptions"
-        placeholder="Enter email"
-      >
+      <FormControl label="Email" :options="countryOptions" placeholder="Enter email">
         <template #prefix>
           <LucideMail class="size-4" />
         </template>
@@ -152,8 +134,8 @@ const resetState = () => {
       </div>
     </div>
 
-    <div class="p-2 grid h-full [&_label]:!m-0 *:rounded *:cursor-pointer">
-      <div class="flex items-center gap-2 boder-b p-2 px-2 pb-3 !rounded-none">
+    <div class="grid h-full p-2 *:cursor-pointer *:rounded [&_label]:!m-0">
+      <div class="boder-b flex items-center gap-2 !rounded-none p-2 px-2 pb-3">
         <span class="text-ink-gray-5"> Settings </span>
         <LucideRight class="size-4 text-ink-gray-5" />
         <span class="text-ink-gray-5"> System </span>
@@ -161,11 +143,8 @@ const resetState = () => {
         <span>Power </span>
       </div>
 
-      <label
-        class="flex gap-3 p-3 has-[:checked]:bg-surface-gray-1"
-        for="balanced"
-      >
-        <div class="grid gap-1 flex-1">
+      <label class="flex gap-3 p-3 has-[:checked]:bg-surface-gray-1" for="balanced">
+        <div class="grid flex-1 gap-1">
           <span>Balanced </span>
           <span class="text-ink-gray-4">
             Automatically balances performance with energy consumption
@@ -177,40 +156,33 @@ const resetState = () => {
           id="balanced"
           name="power"
           defaultChecked
-          class="m-auto bg-surface-gray-2 text-ink-gray-9 dark:text-ink-gray-3 focus:!ring-outline-gray-5 transition-all"
+          class="m-auto bg-surface-gray-2 text-ink-gray-9 transition-all focus:!ring-outline-gray-5 dark:text-ink-gray-3"
         />
       </label>
 
-      <label
-        class="flex gap-3 p-3 has-[:checked]:bg-surface-gray-1"
-        for="power-save"
-      >
-        <div class="grid gap-1 flex-1">
+      <label class="flex gap-3 p-3 has-[:checked]:bg-surface-gray-1" for="power-save">
+        <div class="grid flex-1 gap-1">
           <span> Power Saving</span>
-          <span class="text-ink-gray-4">
-            Saves energy by reducing performance where possible
-          </span>
+          <span class="text-ink-gray-4"> Saves energy by reducing performance where possible </span>
         </div>
 
         <input
           type="radio"
-          class="m-auto bg-surface-gray-2 text-ink-gray-9 dark:text-ink-gray-3 focus:!ring-outline-gray-5 transition-all"
+          class="m-auto bg-surface-gray-2 text-ink-gray-9 transition-all focus:!ring-outline-gray-5 dark:text-ink-gray-3"
           id="power-save"
           name="power"
         />
       </label>
 
       <label class="flex gap-3 p-3 has-[:checked]:bg-surface-gray-1" for="perf">
-        <div class="grid gap-1 flex-1">
+        <div class="grid flex-1 gap-1">
           <span> Performance</span>
-          <span class="text-ink-gray-4">
-            High performance but uses more energy
-          </span>
+          <span class="text-ink-gray-4"> High performance but uses more energy </span>
         </div>
 
         <input
           type="radio"
-          class="m-auto bg-surface-gray-2 text-ink-gray-9 dark:text-ink-gray-3 focus:!ring-outline-gray-5 transition-all"
+          class="m-auto bg-surface-gray-2 text-ink-gray-9 transition-all focus:!ring-outline-gray-5 dark:text-ink-gray-3"
           id="perf"
           name="power"
         />
diff --git a/docs/components/Home/Showcase/col3.vue b/docs/components/Home/Showcase/col3.vue
index 027df6661..af12a7048 100644
--- a/docs/components/Home/Showcase/col3.vue
+++ b/docs/components/Home/Showcase/col3.vue
@@ -1,82 +1,70 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import {
-  Avatar,
-  Badge,
-  Button,
-  Checkbox,
-  Progress,
-  Select,
-  Slider,
-  Switch,
-} from "frappe-ui";
-import LucideCoins from "~icons/lucide/circle-dollar-sign";
-import LucideUsers from "~icons/lucide/users";
-import LucideVideo from "~icons/lucide/video";
-import LucideMapPin from "~icons/lucide/map-pin";
-import LucideClock from "~icons/lucide/clock";
-import LucideCalendar from "~icons/lucide/calendar";
-import LucideX from "~icons/lucide/x";
-import LucideLink from "~icons/lucide/send";
+import { Avatar, Badge, Button, Checkbox, Progress, Select, Slider, Switch } from 'frappe-ui'
+import { ref } from 'vue'
+import LucideCalendar from '~icons/lucide/calendar'
+import LucideCoins from '~icons/lucide/circle-dollar-sign'
+import LucideClock from '~icons/lucide/clock'
+import LucideMapPin from '~icons/lucide/map-pin'
+import LucideLink from '~icons/lucide/send'
+import LucideUsers from '~icons/lucide/users'
+import LucideVideo from '~icons/lucide/video'
+import LucideX from '~icons/lucide/x'
 
 const imgs = [
-  "https://avatars.githubusercontent.com/u/499550?s=60&v=4",
+  'https://avatars.githubusercontent.com/u/499550?s=60&v=4',
   'https://avatars.githubusercontent.com/u/2798204?s=70&v=4',
   'https://avatars.githubusercontent.com/u/28706372?s=96&v=4',
   'https://avatars.githubusercontent.com/u/1493221?s=70&v=4',
-];
+]
 
-const progressVal = ref(1);
-const checkboxVal = ref(true);
+const progressVal = ref(1)
+const checkboxVal = ref(true)
 
 const incProgress = () => {
   if (progressVal.value < 3) {
-    progressVal.value += 1;
+    progressVal.value += 1
   }
-};
+}
 
 const decProgress = () => {
   if (progressVal.value > 1) {
-    progressVal.value -= 1;
+    progressVal.value -= 1
   }
-};
+}
 
-const themes = ["green", "red", "blue", "yellow", "gray"];
+const themes = ['green', 'red', 'blue', 'yellow', 'gray']
 
-const slider2Val = ref([20, 50]);
-const switchVal = ref(true);
+const slider2Val = ref([20, 50])
+const switchVal = ref(true)
 
 const progressData = [
   {
-    title: "Objection Handling",
-    desc:
-      "In this objection handling role-play scenario, participants will engage in a simulated sales interaction.",
-    tags: ["Communication", "Negotiation"],
+    title: 'Objection Handling',
+    desc: 'In this objection handling role-play scenario, participants will engage in a simulated sales interaction.',
+    tags: ['Communication', 'Negotiation'],
   },
 
   {
-    title: "Business Development",
-    desc:
-      "In this business development role-play scenario, participants will engage in a simulated sales interaction.",
-    tags: ["Strategy", "Customer support"],
+    title: 'Business Development',
+    desc: 'In this business development role-play scenario, participants will engage in a simulated sales interaction.',
+    tags: ['Strategy', 'Customer support'],
   },
 
   {
-    title: "Marketing Strategy",
-    desc:
-      "In this marketing strategy role-play scenario, participants will engage in a simulated sales interaction.",
-    tags: ["Strategy", "Analytics"],
+    title: 'Marketing Strategy',
+    desc: 'In this marketing strategy role-play scenario, participants will engage in a simulated sales interaction.',
+    tags: ['Strategy', 'Analytics'],
   },
-];
+]
 
-const toggledDiv = ref(false);
+const toggledDiv = ref(false)
 </script>
 
 <template>
   <section
-    class="grid gap-5 *:rounded *:border [&_label]:text-ink-gray-9 [&_label]:mb-2 [&_label]:text-base h-fit"
+    class="grid h-fit gap-5 *:rounded *:border [&_label]:mb-2 [&_label]:text-base [&_label]:text-ink-gray-9"
   >
-    <div class="p-5 h-fit prose prose-sm">
+    <div class="prose prose-sm h-fit p-5">
       <Progress
         :value="progressVal * 30"
         :intervals="true"
@@ -93,11 +81,11 @@ const toggledDiv = ref(false);
         {{ progressData[progressVal - 1].desc }}
       </p>
 
-      <div class="flex gap-2 flex-wrap items-center not-prose mt-3">
+      <div class="not-prose mt-3 flex flex-wrap items-center gap-2">
         <Badge
           v-for="(tag, tagIndex) in progressData[progressVal - 1].tags"
           :key="tag"
-          :theme='themes[tagIndex] || "gray"'
+          :theme="themes[tagIndex] || 'gray'"
           size="lg"
           class="rounded-sm"
         >
@@ -105,75 +93,64 @@ const toggledDiv = ref(false);
         </Badge>
       </div>
 
-      <div class="flex items-center not-prose mt-4 ml-2">
+      <div class="not-prose ml-2 mt-4 flex items-center">
         <Avatar
           size="xl"
           v-for="img in imgs"
           :key="img"
           :image="img"
-          class="border-2 border-surface-white -ml-2"
+          class="border-surface-white -ml-2 border-2"
         />
 
-        <span class="ml-3 text-sm !text-ink-gray-9">
-          + 5 more
-        </span>
+        <span class="ml-3 text-sm !text-ink-gray-9"> + 5 more </span>
       </div>
 
-      <div
-        class="grid grid-cols-2 mt-3 gap-3 *:py-4 border-t rounded pt-3"
-      >
+      <div class="mt-3 grid grid-cols-2 gap-3 rounded border-t pt-3 *:py-4">
         <Button @click="decProgress">Back</Button>
         <Button @click="incProgress" variant="solid">Next</Button>
       </div>
     </div>
 
-    <div class="p-4 pt-3 flex flex-col gap-3">
-      <div class="flex items-center gap-2 justify-between">
+    <div class="flex flex-col gap-3 p-4 pt-3">
+      <div class="flex items-center justify-between gap-2">
         <span class="flex gap-2">
           <LucideCoins class="size-4" />
           Price range
         </span>
-        <Badge size="lg" class='rounded-sm'>
+        <Badge size="lg" class="rounded-sm">
           ${{ slider2Val[0] * 10 }} - ${{ slider2Val[1] * 10 }}
         </Badge>
       </div>
 
       <Slider v-model="slider2Val" class="w-full" />
 
-      <div class="flex gap-3 items-center justify-between">
+      <div class="flex items-center justify-between gap-3">
         <span>$0</span>
         <span>$1000</span>
       </div>
     </div>
 
-    <div class="grid p-5 gap-y-3 gap-x-4">
-      <div class="flex gap-3 justify-between">
+    <div class="grid gap-x-4 gap-y-3 p-5">
+      <div class="flex justify-between gap-3">
         <div class="grid gap-2">
           <span class="text-ink-gray-9">Smart compose</span>
-          <p class="text-ink-gray-5">
-            Enable predictive suggestions
-          </p>
+          <p class="text-ink-gray-5">Enable predictive suggestions</p>
         </div>
         <Switch v-model="switchVal" />
       </div>
 
       <hr />
 
-      <div class="flex gap-2 justify-between">
+      <div class="flex justify-between gap-2">
         <div class="grid gap-2">
           <span class="text-ink-gray-9">Inline completions</span>
-          <p class="text-ink-gray-5">
-            Auto completions as you type
-          </p>
+          <p class="text-ink-gray-5">Auto completions as you type</p>
         </div>
         <Switch />
       </div>
     </div>
 
-    <div
-      class="p-5 transition-all duration-200"
-      :class='{ "border-outline-gray-5": checkboxVal }'
-    >
+    <div class="p-5 transition-all duration-200" :class="{ 'border-outline-gray-5': checkboxVal }">
       <Checkbox
         v-model="checkboxVal"
         label="I agree to the terms and conditions"
@@ -182,41 +159,28 @@ const toggledDiv = ref(false);
       />
     </div>
 
-    <div
-      class="p-4 grid"
-      :class='{ "animate-bounce bg-surface-white shadow-lg": toggledDiv }'
-    >
-      <h3 class="text-xl mb-2 font-semibold flex gap-3 justify-between">
+    <div class="grid p-4" :class="{ 'animate-bounce bg-surface-white shadow-lg': toggledDiv }">
+      <h3 class="mb-2 flex justify-between gap-3 text-xl font-semibold">
         Schedule an event
         <LucideX class="size-5" @click="toggledDiv = !toggledDiv" />
       </h3>
 
-      <span class="leading-relaxed mb-1">Product marketing</span>
-      <p class="leading-relaxed text-ink-gray-5 mb-2">
+      <span class="mb-1 leading-relaxed">Product marketing</span>
+      <p class="mb-2 leading-relaxed text-ink-gray-5">
         Discussion of new marketing strategies and pricing for the new project
       </p>
 
-      <div
-        class="grid grid-cols-[auto_1fr_auto] gap-3 pt-2 items-center border-t"
-      >
-        <LucideUsers class="size-4 row-span-2 mb-auto" />
+      <div class="grid grid-cols-[auto_1fr_auto] items-center gap-3 border-t pt-2">
+        <LucideUsers class="row-span-2 mb-auto size-4" />
 
         <div>
           Add guests <br />
 
           <span
-            class="flex gap-1 items-center whitespace-nowrap text-sm w-fit h-fit mt-2 text-ink-gray-5"
+            class="mt-2 flex h-fit w-fit items-center gap-1 whitespace-nowrap text-sm text-ink-gray-5"
           >
-            <Avatar
-              size="sm"
-              :image="imgs[0]"
-              class="border-2 border-surface-white"
-            />
-            <Avatar
-              size="sm"
-              :image="imgs[0]"
-              class="border-2 border-surface-white -ml-2"
-            />
+            <Avatar size="sm" :image="imgs[0]" class="border-surface-white border-2" />
+            <Avatar size="sm" :image="imgs[0]" class="border-surface-white -ml-2 border-2" />
 
             1 awaiting
           </span>
@@ -225,12 +189,10 @@ const toggledDiv = ref(false);
         <Button> Send Invite </Button>
       </div>
 
-      <span
-        class="flex items-center gap-2 border-y py-2 items text-sm text-ink-gray-6"
-      >
+      <span class="items flex items-center gap-2 border-y py-2 text-sm text-ink-gray-6">
         <LucideClock class="size-4" />
         4:00 PM - 5:00 PM
-        <LucideCalendar class="size-4 ml-auto" />
+        <LucideCalendar class="ml-auto size-4" />
         Oct 19 2023
       </span>
 
diff --git a/docs/components/Home/Showcase/col4.vue b/docs/components/Home/Showcase/col4.vue
index de6a916bf..deeca1633 100644
--- a/docs/components/Home/Showcase/col4.vue
+++ b/docs/components/Home/Showcase/col4.vue
@@ -1,35 +1,34 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from "vue";
-import { Avatar, Button, Password, Progress, Tree } from "frappe-ui";
-
-import LucideFolder from "~icons/lucide/folder";
-import LucideFile from "~icons/lucide/file";
-import LucideShield from "~icons/lucide/shield-plus";
-import LucideChevronRight from "~icons/lucide/chevron-right";
-import LucideBell from "~icons/lucide/bell";
-import LucideX from "~icons/lucide/X";
-import LucideUpDown from "~icons/lucide/arrow-down-up";
+import { Avatar, Button, Password, Progress, Tree } from 'frappe-ui'
+import { computed, reactive, ref } from 'vue'
+import LucideUpDown from '~icons/lucide/arrow-down-up'
+import LucideBell from '~icons/lucide/bell'
+import LucideChevronRight from '~icons/lucide/chevron-right'
+import LucideFile from '~icons/lucide/file'
+import LucideFolder from '~icons/lucide/folder'
+import LucideShield from '~icons/lucide/shield-plus'
+import LucideX from '~icons/lucide/X'
 
 const treeState = reactive({
   showIndentationGuides: true,
-  rowHeight: "25px",
-  indentWidth: "15px",
+  rowHeight: '25px',
+  indentWidth: '15px',
   node: {
-    name: "guest",
-    label: "Guest",
+    name: 'guest',
+    label: 'Guest',
     isCollapsed: true,
     children: [
       {
-        name: "downloads",
-        label: "Downloads",
+        name: 'downloads',
+        label: 'Downloads',
         children: [
           {
-            name: "Images",
-            label: "download.zip",
+            name: 'Images',
+            label: 'download.zip',
             children: [
               {
-                name: "image.png",
-                label: "image.png",
+                name: 'image.png',
+                label: 'image.png',
                 children: [],
               },
             ],
@@ -37,106 +36,99 @@ const treeState = reactive({
         ],
       },
       {
-        name: "documents",
-        label: "Documents",
+        name: 'documents',
+        label: 'Documents',
         children: [
           {
-            name: "somefile.txt",
-            label: "somefile.txt",
+            name: 'somefile.txt',
+            label: 'somefile.txt',
             children: [],
           },
           {
-            name: "somefile.pdf",
-            label: "somefile.pdf",
+            name: 'somefile.pdf',
+            label: 'somefile.pdf',
             children: [],
           },
         ],
       },
     ],
   },
-});
+})
 
-const password = ref("000000000");
-const hasValidLength = computed(() => password.value.length >= 9);
+const password = ref('000000000')
+const hasValidLength = computed(() => password.value.length >= 9)
 
 const hasLettersAndNumbers = computed(
   () => /[a-zA-Z]/.test(password.value) && /\d/.test(password.value),
-);
-const hasSpecialChar = computed(
-  () => /[#@$%^&*_?@~]/.test(password.value),
-);
+)
+const hasSpecialChar = computed(() => /[#@$%^&*_?@~]/.test(password.value))
 
-const strengthScore = computed(() =>
-  [hasValidLength.value, hasLettersAndNumbers.value, hasSpecialChar.value]
-    .filter(Boolean).length
-);
+const strengthScore = computed(
+  () =>
+    [hasValidLength.value, hasLettersAndNumbers.value, hasSpecialChar.value].filter(Boolean).length,
+)
 
 const strengthLabel = computed(() =>
   strengthScore.value <= 1
-    ? { text: "Weak", class: "text-ink-red-3" }
+    ? { text: 'Weak', class: 'text-ink-red-3' }
     : strengthScore.value === 2
-    ? { text: "Moderate", class: "text-ink-yellow-3" }
-    : { text: "Strong", class: "text-ink-green-3" }
-);
+      ? { text: 'Moderate', class: 'text-ink-yellow-3' }
+      : { text: 'Strong', class: 'text-ink-green-3' },
+)
 
 const notifs = [
   {
-    img: "https://randomuser.me/api/portraits/men/32.jpg",
-    name: "Matthew Connor",
-    txt: "The deadline for you is tomorrow.",
-    type: "invitation",
-    time: "Just now",
+    img: 'https://randomuser.me/api/portraits/men/32.jpg',
+    name: 'Matthew Connor',
+    txt: 'The deadline for you is tomorrow.',
+    type: 'invitation',
+    time: 'Just now',
     unread: false,
   },
   {
-    img: "https://randomuser.me/api/portraits/men/45.jpg",
-    name: "Eeren McKenzie",
-    txt: "Review the latest design updates",
+    img: 'https://randomuser.me/api/portraits/men/45.jpg',
+    name: 'Eeren McKenzie',
+    txt: 'Review the latest design updates',
     type: null,
-    time: "5 min ago",
+    time: '5 min ago',
     unread: true,
   },
   {
-    img: "https://randomuser.me/api/portraits/men/68.jpg",
-    name: "John Doe",
-    txt: "Review the design changes",
+    img: 'https://randomuser.me/api/portraits/men/68.jpg',
+    name: 'John Doe',
+    txt: 'Review the design changes',
     type: null,
-    time: "10 min ago",
+    time: '10 min ago',
     unread: true,
   },
-];
+]
 </script>
 
 <template>
   <section
-    class="grid gap-5 *:rounded *:border [&_label]:text-ink-gray-9 [&_label]:mb-2 [&_label]:text-base h-fit"
+    class="grid h-fit gap-5 *:rounded *:border [&_label]:mb-2 [&_label]:text-base [&_label]:text-ink-gray-9"
   >
-    <div class="p-5 bg-urface-cards h-fit">
+    <div class="bg-urface-cards h-fit p-5">
       <Tree
-        :options="
-          {
-            showIndentationGuides: treeState.showIndentationGuides,
-            rowHeight: treeState.rowHeight,
-            indentWidth: treeState.indentWidth,
-            defaultCollapsed: false,
-          }
-        "
+        :options="{
+          showIndentationGuides: treeState.showIndentationGuides,
+          rowHeight: treeState.rowHeight,
+          indentWidth: treeState.indentWidth,
+          defaultCollapsed: false,
+        }"
         nodeKey="name"
         :node="treeState.node"
       >
         <template #node="{ node, hasChildren, isCollapsed, toggleCollapsed }">
-          <button
-            class="flex items-center gap-2 mb-3 cursor-pointer"
-            @click="toggleCollapsed"
-          >
+          <button class="mb-3 flex cursor-pointer items-center gap-2" @click="toggleCollapsed">
             <LucideChevronRight
               v-if="hasChildren"
               class="size-4 transition-transform"
-              :class='{ "rotate-90": isCollapsed }'
+              :class="{ 'rotate-90': isCollapsed }"
             />
 
             <LucideFolder v-if="hasChildren" class="size-4" />
-            <LucideFile v-else class="size-4 ml-2" />
+            <LucideFile v-else class="ml-2 size-4" />
 
             {{ node.name }}
           </button>
@@ -144,29 +136,24 @@ const notifs = [
       </Tree>
     </div>
 
-    <div class="prose prose-sm p-5 pt-3 grid gap-3">
+    <div class="prose prose-sm grid gap-3 p-5 pt-3">
       <h3 class="flex items-center gap-2 border-b pb-3">
         <LucideShield class="size-5" />
         Create Password
       </h3>
 
       <p>
-        To ensure the safety and security of your account, its essential to
-        create a strong password
+        To ensure the safety and security of your account, its essential to create a strong password
       </p>
 
       <div class="grid">
         <label class="!text-ink-gray-5">Password</label>
-        <Password
-          v-model="password"
-          placeholder="Enter password"
-          variant="outline"
-        />
+        <Password v-model="password" placeholder="Enter password" variant="outline" />
       </div>
 
       <Progress
         label="Password Strength"
-        class="[&_label]:text-ink-gray-5 mt-3"
+        class="mt-3 [&_label]:text-ink-gray-5"
         :value="strengthScore < 3 ? strengthScore * 30 : 100"
         :hint="true"
         size="md"
@@ -178,36 +165,32 @@ const notifs = [
         </template>
       </Progress>
 
-      <div class="px-8 !py-3 rounded bg-surface-gray-1 text-sm text-ink-gray-5">
-        <li :class='{ "line-through opacity-60": hasValidLength }'>
-          Includes 9-16 characters
-        </li>
-        <li :class='{ "line-through opacity-60": hasLettersAndNumbers }'>
+      <div class="rounded bg-surface-gray-1 !py-3 px-8 text-sm text-ink-gray-5">
+        <li :class="{ 'line-through opacity-60': hasValidLength }">Includes 9-16 characters</li>
+        <li :class="{ 'line-through opacity-60': hasLettersAndNumbers }">
           Combines letters and numbers
         </li>
-        <li :class='{ "line-through opacity-60": hasSpecialChar }'>
+        <li :class="{ 'line-through opacity-60': hasSpecialChar }">
           A special character #@$%^&*_?@~
         </li>
       </div>
 
-      <Button variant="solid" class="w-full py-4">
-        Create password
-      </Button>
+      <Button variant="solid" class="w-full py-4"> Create password </Button>
     </div>
 
     <div>
-      <div class="flex gap-3 p-4 border-b">
+      <div class="flex gap-3 border-b p-4">
         <LucideBell class="size-4" />
 
         Notifications
 
-        <LucideUpDown class="size-4 ml-auto" />
+        <LucideUpDown class="ml-auto size-4" />
         <LucideX class="size-4" />
       </div>
       <div
         v-for="(x, i) in notifs"
         class="flex gap-4 p-4"
-        :class='{ "border-b": i < notifs.length - 1 }'
+        :class="{ 'border-b': i < notifs.length - 1 }"
       >
         <Avatar size="xl" :image="x.img" />
 
@@ -226,7 +209,7 @@ const notifs = [
 
         <span
           v-if="x.unread"
-          class="bg-surface-blue-3 rounded-full w-1 h-1 my-auto shrink-0"
+          class="my-auto h-1 w-1 shrink-0 rounded-full bg-surface-blue-3"
         ></span>
       </div>
     </div>
diff --git a/docs/components/Home/Showcase/index.vue b/docs/components/Home/Showcase/index.vue
index 650241e53..830f30f8c 100644
--- a/docs/components/Home/Showcase/index.vue
+++ b/docs/components/Home/Showcase/index.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import Col1 from "./col1.vue";
-import Col2 from "./col2.vue";
-import Col3 from "./col3.vue";
-import Col4 from "./col4.vue";
+import Col1 from './col1.vue'
+import Col2 from './col2.vue'
+import Col3 from './col3.vue'
+import Col4 from './col4.vue'
 </script>
 
 <template>
   <main
-    class="grid lg:grid-cols-3 xl:grid-cols-4 p-5 pt-0 mb-20 gap-5 mx-auto *:w-full max-w-[1440px]"
+    class="mx-auto mb-20 grid max-w-[1440px] gap-5 p-5 pt-0 *:w-full lg:grid-cols-3 xl:grid-cols-4"
   >
     <Col1 />
     <Col2 />
diff --git a/docs/components/Home/dummies/Charts.vue b/docs/components/Home/dummies/Charts.vue
index 7028d33ac..0c91cc692 100644
--- a/docs/components/Home/dummies/Charts.vue
+++ b/docs/components/Home/dummies/Charts.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-let bars = [22, 36, 28, 44, 30, 52, 34, 40, 26, 48, 32, 44, 28];
+let bars = [22, 36, 28, 44, 30, 52, 34, 40, 26, 48, 32, 44, 28]
 // bars = [...bars,...bars]
 </script>
 
 <template>
-  <div
-    class="p-3 flex items-end gap-6 overflow-hidden"
-  >
-    <div class="flex items-end gap-2 w-full bg-surface-cards p-4 pt-8 rounded overflow-hidden shadow-lg dark:shadow-none ">
+  <div class="flex items-end gap-6 overflow-hidden p-3">
+    <div
+      class="flex w-full items-end gap-2 overflow-hidden rounded bg-surface-cards p-4 pt-8 shadow-lg dark:shadow-none"
+    >
       <div
         v-for="(h, i) in bars"
         :key="i"
@@ -17,4 +17,3 @@ let bars = [22, 36, 28, 44, 30, 52, 34, 40, 26, 48, 32, 44, 28];
     </div>
   </div>
 </template>
-
diff --git a/docs/components/Home/dummies/DataDisplay.vue b/docs/components/Home/dummies/DataDisplay.vue
index ea14d8215..bbcb3c1c2 100644
--- a/docs/components/Home/dummies/DataDisplay.vue
+++ b/docs/components/Home/dummies/DataDisplay.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="p-3 grid grid-cols-3 gap-2">
+  <div class="grid grid-cols-3 gap-2 p-3">
     <div
-      class="rounded bg-surface-cards dark:bg-surface-cards p-2 flex flex-col gap-2 shadow-lg dark:shadow-none "
+      class="flex flex-col gap-2 rounded bg-surface-cards p-2 shadow-lg dark:bg-surface-cards dark:shadow-none"
       v-for="_ in 3"
     >
       <div class="h-2 w-8 rounded bg-surface-gray-2" />
diff --git a/docs/components/Home/dummies/Datetime.vue b/docs/components/Home/dummies/Datetime.vue
index a5f54b00f..6fb54cfe2 100644
--- a/docs/components/Home/dummies/Datetime.vue
+++ b/docs/components/Home/dummies/Datetime.vue
@@ -1,18 +1,14 @@
 <template>
-  <div class="p-5 grid gap-3">
+  <div class="grid gap-3 p-5">
     <div
-      class="bg-surface-cards rounded-sm p-2 flex items-center justify-between shadow-lg dark:shadow-none"
+      class="flex items-center justify-between rounded-sm bg-surface-cards p-2 shadow-lg dark:shadow-none"
     >
-      <div class="h-3 w-1/2 bg-surface-gray-3 rounded" />
-      <div class="h-4 w-4 bg-surface-gray-4 rounded" />
+      <div class="h-3 w-1/2 rounded bg-surface-gray-3" />
+      <div class="h-4 w-4 rounded bg-surface-gray-4" />
     </div>
 
-    <div class="bg-surface-cards rounded p-3 grid grid-cols-7 gap-2 shadow-lg dark:shadow-none">
-      <div
-        v-for="i in 14"
-        :key="i"
-        class="h-4 rounded-sm bg-surface-gray-3"
-      />
+    <div class="grid grid-cols-7 gap-2 rounded bg-surface-cards p-3 shadow-lg dark:shadow-none">
+      <div v-for="i in 14" :key="i" class="h-4 rounded-sm bg-surface-gray-3" />
     </div>
   </div>
 </template>
diff --git a/docs/components/Home/dummies/Feedback.vue b/docs/components/Home/dummies/Feedback.vue
index 83e12ca58..946f7c3be 100644
--- a/docs/components/Home/dummies/Feedback.vue
+++ b/docs/components/Home/dummies/Feedback.vue
@@ -1,34 +1,32 @@
 <template>
-  <div
-    class="p-5 flex justify-center"
-  >
+  <div class="flex justify-center p-5">
     <div class="flex flex-col gap-3">
       <div
-        class="shadow-lg dark:shadow-none bg-surface-cards border border-outline-gray-3 rounded p-2 w-32 flex items-center gap-2"
+        class="flex w-32 items-center gap-2 rounded border border-outline-gray-3 bg-surface-cards p-2 shadow-lg dark:shadow-none"
       >
         <div class="flex w-full">
-          <span class="h-1.5 w-1/2 bg-gray-500 rounded-l mb-1" />
-          <span class="h-1.5 w-full bg-surface-gray-4 rounded-r mb-1" />
+          <span class="mb-1 h-1.5 w-1/2 rounded-l bg-gray-500" />
+          <span class="mb-1 h-1.5 w-full rounded-r bg-surface-gray-4" />
         </div>
       </div>
 
       <div
-        class="shadow-lg dark:shadow-none bg-surface-cards border border-surface-gray-3 rounded p-2 w-32 flex items-center gap-2"
+        class="border-surface-gray-3 flex w-32 items-center gap-2 rounded border bg-surface-cards p-2 shadow-lg dark:shadow-none"
       >
-        <div class="h-2 w-2 bg-green-400/40 rounded-full flex-shrink-0" />
+        <div class="h-2 w-2 flex-shrink-0 rounded-full bg-green-400/40" />
         <div class="flex-1">
-          <div class="h-1.5 w-full bg-surface-gray-3 rounded mb-1" />
-          <div class="h-1.5 w-3/4 bg-surface-gray-3 rounded" />
+          <div class="mb-1 h-1.5 w-full rounded bg-surface-gray-3" />
+          <div class="h-1.5 w-3/4 rounded bg-surface-gray-3" />
         </div>
       </div>
 
       <div
-        class="shadow-lg dark:shadow-none  bg-surface-cards border border-surface-gray-3 rounded p-2 w-32 flex items-center gap-2"
+        class="border-surface-gray-3 flex w-32 items-center gap-2 rounded border bg-surface-cards p-2 shadow-lg dark:shadow-none"
       >
-        <div class="h-2 w-2 bg-red-400/40 rounded-full flex-shrink-0" />
+        <div class="h-2 w-2 flex-shrink-0 rounded-full bg-red-400/40" />
         <div class="flex-1">
-          <div class="h-1.5 w-full bg-surface-gray-3 rounded mb-1" />
-          <div class="h-1.5 w-2/3 bg-surface-gray-3 rounded" />
+          <div class="mb-1 h-1.5 w-full rounded bg-surface-gray-3" />
+          <div class="h-1.5 w-2/3 rounded bg-surface-gray-3" />
         </div>
       </div>
     </div>
diff --git a/docs/components/Home/dummies/Forms.vue b/docs/components/Home/dummies/Forms.vue
index 141390cd0..b3ade0b61 100644
--- a/docs/components/Home/dummies/Forms.vue
+++ b/docs/components/Home/dummies/Forms.vue
@@ -1,20 +1,18 @@
 <template>
   <div class="p-5">
     <div
-      class="bg-surface-cards rounded p-3 grid grid-cols-2 gap-x-3 w-full shadow-lg dark:shadow-none"
+      class="grid w-full grid-cols-2 gap-x-3 rounded bg-surface-cards p-3 shadow-lg dark:shadow-none"
     >
       <span class="text-ink-gray-4">****</span>
       <span class="text-ink-gray-4">******</span>
-      <span class="h-3 bg-surface-gray-2 rounded-sm -mt-1" />
-      <span class="h-3 bg-surface-gray-2 rounded-sm -mt-1" />
+      <span class="-mt-1 h-3 rounded-sm bg-surface-gray-2" />
+      <span class="-mt-1 h-3 rounded-sm bg-surface-gray-2" />
       <span class="text-ink-gray-4">****</span>
       <span class="text-ink-gray-4">******</span>
-      <span class="h-3 bg-surface-gray-2 rounded-sm -mt-1" />
-      <span class="h-3 bg-surface-gray-2 rounded-sm -mt-1" />
+      <span class="-mt-1 h-3 rounded-sm bg-surface-gray-2" />
+      <span class="-mt-1 h-3 rounded-sm bg-surface-gray-2" />
 
-      <span
-        class="bg-surface-gray-7 p-1 mt-3 w-8 rounded-sm col-span-2 ml-auto"
-      />
+      <span class="col-span-2 ml-auto mt-3 w-8 rounded-sm bg-surface-gray-7 p-1" />
     </div>
   </div>
 </template>
diff --git a/docs/components/Home/dummies/Navigation.vue b/docs/components/Home/dummies/Navigation.vue
index b23dbebfb..3d0f9ccc4 100644
--- a/docs/components/Home/dummies/Navigation.vue
+++ b/docs/components/Home/dummies/Navigation.vue
@@ -1,38 +1,33 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
+import { onMounted, onUnmounted, ref } from 'vue'
 
-const active = ref(0);
-let timer: number;
+const active = ref(0)
+let timer: number
 
 onMounted(() => {
   timer = window.setInterval(() => {
-    active.value = (active.value + 1) % 3;
-  }, 500);
-});
+    active.value = (active.value + 1) % 3
+  }, 500)
+})
 
 onUnmounted(() => {
-  clearInterval(timer);
-});
+  clearInterval(timer)
+})
 </script>
 
 <template>
-  <div class="p-6 px-20 grid">
-    <div
-      class="flex items-center gap-1 bg-surface-gray-4 rounded-sm p-1 m-auto w-full"
-    >
+  <div class="grid p-6 px-20">
+    <div class="m-auto flex w-full items-center gap-1 rounded-sm bg-surface-gray-4 p-1">
       <div
         v-for="(_, i) in 3"
         :key="i"
         class="h-3 w-full rounded-sm transition-all duration-500 ease-in-out"
-        :class='active === i ? "bg-surface-white" : "bg-surface-gray-2"'
+        :class="active === i ? 'bg-surface-white' : 'bg-surface-gray-2'"
       />
     </div>
 
     <div
-      class="
-        mt-2 p-5 animate-pulse rounded flex items-center w-full bg-surface-gray-4
-        dark:bg-surface-gray-3
-      "
+      class="mt-2 flex w-full animate-pulse items-center rounded bg-surface-gray-4 p-5 dark:bg-surface-gray-3"
     />
   </div>
 </template>
diff --git a/docs/components/Home/dummies/Overlays.vue b/docs/components/Home/dummies/Overlays.vue
index c0522a69b..30db5e3b9 100644
--- a/docs/components/Home/dummies/Overlays.vue
+++ b/docs/components/Home/dummies/Overlays.vue
@@ -1,30 +1,26 @@
 <template>
-  <div
-    class="p-5 px-9"
-  >
-    <div class="mx-auto grid gap-2 relative w-1/2">
+  <div class="select-none p-5 px-9">
+    <div class="relative mx-auto grid w-1/2 gap-2">
       <div
-        class="absolute bottom-3 -left-6 bg-surface-cards rounded shadow-md border border-outline-gray-2 p-1.5 w-20"
+        class="absolute -left-6 bottom-3 w-20 rounded border border-outline-gray-2 bg-surface-cards p-1.5 shadow-md"
       >
-        <div class="h-2 w-full bg-surface-gray-2 rounded mb-1.5" />
-        <div class="h-2 w-3/4 bg-surface-gray-2 rounded mb-1.5" />
-        <div class="h-2 w-full bg-ink-blue-link/10 rounded" />
+        <div class="mb-1.5 h-2 w-full rounded bg-surface-gray-2" />
+        <div class="mb-1.5 h-2 w-3/4 rounded bg-surface-gray-2" />
+        <div class="bg-ink-blue-link/10 h-2 w-full rounded" />
       </div>
 
-      <span class="h-2 bg-surface-gray-3 w-6 mr-auto p-2 rounded-sm"> </span>
+      <span class="mr-auto h-2 w-6 rounded-sm bg-surface-gray-3 p-2"> </span>
 
-      <div
-        class="bg-surface-cards rounded-lg p-3 shadow-2xl border border-outline-gray-2"
-      >
-        <div class="flex items-center justify-between mb-2">
-          <div class="h-2 w-12 bg-surface-gray-3 rounded" />
-          <div class="h-2 w-2 bg-surface-gray-4 rounded-full" />
+      <div class="rounded-lg border border-outline-gray-2 bg-surface-cards p-3 shadow-2xl">
+        <div class="mb-2 flex items-center justify-between">
+          <div class="h-2 w-12 rounded bg-surface-gray-3" />
+          <div class="h-2 w-2 rounded-full bg-surface-gray-4" />
         </div>
-        <div class="h-2 w-full bg-surface-gray-2 rounded mb-1.5" />
-        <div class="h-2 w-3/4 bg-surface-gray-2 rounded mb-3" />
-        <div class="flex gap-1.5 justify-end">
-          <div class="h-4 w-10 bg-surface-gray-3 rounded text-[6px]" />
-          <div class="h-4 w-10 bg-ink-blue-link rounded" />
+        <div class="mb-1.5 h-2 w-full rounded bg-surface-gray-2" />
+        <div class="mb-3 h-2 w-3/4 rounded bg-surface-gray-2" />
+        <div class="flex justify-end gap-1.5">
+          <div class="h-4 w-10 rounded bg-surface-gray-3 text-[6px]" />
+          <div class="bg-ink-blue-link h-4 w-10 rounded" />
         </div>
       </div>
     </div>
diff --git a/docs/components/Home/index.vue b/docs/components/Home/index.vue
index 7acbad413..88d760b25 100644
--- a/docs/components/Home/index.vue
+++ b/docs/components/Home/index.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import Hero from "./Hero.vue";
-import Showcase from "./Showcase/index.vue"
+import Hero from './Hero.vue'
+import Showcase from './Showcase/index.vue'
 </script>
 
 <template>
-  <div class='flex flex-col min-h-screen'>
+  <div class="flex min-h-screen flex-col">
     <Hero />
-		<Showcase/>
+    <Showcase />
   </div>
 </template>
diff --git a/docs/components/Icons/Github.vue b/docs/components/Icons/Github.vue
index 0a0ab04e3..0cb311c70 100644
--- a/docs/components/Icons/Github.vue
+++ b/docs/components/Icons/Github.vue
@@ -1,10 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     <path
       fill="currentColor"
       fill-rule="evenodd"
diff --git a/docs/components/Layout.vue b/docs/components/Layout.vue
index f6e0c15b9..0ac687f17 100644
--- a/docs/components/Layout.vue
+++ b/docs/components/Layout.vue
@@ -1,21 +1,19 @@
 <script setup lang="ts">
-import Navbar from "./Navbar.vue";
-import Sidebar from "./Docs/Sidebar.vue";
-import Home from "./Home/index.vue";
+import { useData } from 'vitepress'
 
-import OnThisPage from "./Docs/OnThisPage.vue";
-import PrevNextBtns from "./Docs/PrevNextBtns.vue";
-
-import { state } from "../state.ts";
-
-import { useData } from "vitepress";
-const { frontmatter } = useData();
+import { state } from '../state.ts'
+import OnThisPage from './Docs/OnThisPage.vue'
+import PrevNextBtns from './Docs/PrevNextBtns.vue'
+import Sidebar from './Docs/Sidebar.vue'
+import Home from './Home/index.vue'
+import Navbar from './Navbar.vue'
+const { frontmatter } = useData()
 </script>
 
 <template>
   <div
-    v-if='frontmatter.layout === "home"'
-    class="h-full flex flex-col justify-between flex-1 w-full"
+    v-if="frontmatter.layout === 'home'"
+    class="flex h-full w-full flex-1 flex-col justify-between"
   >
     <Navbar />
     <Home />
@@ -29,8 +27,8 @@ const { frontmatter } = useData();
         <Navbar :isDocs="true" />
         <Sidebar v-if="state.mobsidebar" class="lg:hidden" />
 
-        <div class="p-5 lg:p-10 flex gap-5">
-          <main class="mx-auto lg:max-w-[740px] flex-1">
+        <div class="flex gap-5 p-5 lg:p-10">
+          <main class="mx-auto flex-1 lg:max-w-[740px]">
             <Content as="article" class="prose prose-sm !max-w-none" />
             <PrevNextBtns />
           </main>
diff --git a/docs/components/Navbar.vue b/docs/components/Navbar.vue
index db950ee3c..0d2bdd480 100644
--- a/docs/components/Navbar.vue
+++ b/docs/components/Navbar.vue
@@ -1,18 +1,18 @@
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { useMagicKeys, whenever } from '@vueuse/core'
 import { Button, Breadcrumbs } from 'frappe-ui'
-import LucideSun from '~icons/lucide/sun'
-import LucideMoon from '~icons/lucide/moon-star'
-import LucideSearch from '~icons/lucide/search'
+import { useRoute } from 'vitepress'
+import { computed, onMounted, ref, watch } from 'vue'
+import LucideCommand from '~icons/lucide/command'
 import LucideMenu from '~icons/lucide/menu'
+import LucideMoon from '~icons/lucide/moon-star'
 import LucideSide from '~icons/lucide/panel-right'
-import LucideCommand from '~icons/lucide/command'
-import GithubIcon from './Icons/Github.vue'
-import SearchPopup from './Search/Popup.vue'
+import LucideSearch from '~icons/lucide/search'
+import LucideSun from '~icons/lucide/sun'
 
 import { state } from '../state'
-import { useMagicKeys, whenever } from '@vueuse/core'
-import { useRoute } from 'vitepress'
+import GithubIcon from './Icons/Github.vue'
+import SearchPopup from './Search/Popup.vue'
 
 const theme = ref()
 
@@ -43,7 +43,7 @@ const routes = computed(() => {
   for (const x of state.sidebarList) {
     if (!x.items) {
       routelabels.push({ label: x.text, link: x.link })
-    } //
+    }  //
     else {
       const tmp = x.items.map((nested) => ({
         label: x.text + '/' + nested.text,
@@ -70,25 +70,19 @@ whenever(meta_k, (n) => {
 </script>
 
 <template>
-  <nav class="border-b sticky top-0 bg-surface-white !z-50">
-    <SearchPopup
-      v-if="state.searchDialog"
-      @close="state.searchDialog = false"
-    />
+  <nav class="sticky top-0 !z-50 border-b bg-surface-white">
+    <SearchPopup v-if="state.searchDialog" @close="state.searchDialog = false" />
 
     <div
-      class="py-2.5 px-5 flex items-center gap-3 flex-wrap"
-      :class="{ 'max-w-[1440px] mx-auto': !isDocs }"
+      class="flex flex-wrap items-center gap-3 px-5 py-2.5"
+      :class="{ 'mx-auto max-w-[1440px]': !isDocs }"
     >
-      <span
-        class="flex gap-2 items-center mr-auto md:mr-0"
-        :class="{ 'md:hidden': isDocs }"
-      >
+      <span class="mr-auto flex items-center gap-2 md:mr-0" :class="{ 'md:hidden': isDocs }">
         <img src="/logo.svg" class="w-6" />
         <a href="/" class="font-medium">Frappe UI</a>
       </span>
 
-      <Breadcrumbs :items="routes" class="[&_span]:capitalize hidden md:flex" />
+      <Breadcrumbs :items="routes" class="hidden md:flex [&_span]:capitalize" />
 
       <Button v-if="isDocs" @click="toggleMobSidebar" class="md:hidden">
         <template #icon>
@@ -103,7 +97,7 @@ whenever(meta_k, (n) => {
       </Button>
 
       <div
-        class="gap-3 md:flex items-center w-full ml-auto md:w-auto"
+        class="ml-auto w-full items-center gap-3 md:flex md:w-auto"
         :class="{ flex: state.mobnavbar, hidden: !state.mobnavbar }"
       >
         <a href="/docs/getting-started" v-if="route.path == '/'">Docs</a>
@@ -115,7 +109,7 @@ whenever(meta_k, (n) => {
           Search
 
           <template #suffix>
-            <span class="flex gap-1 items-center ml-auto text-xs text-ink-gray-5">
+            <span class="ml-auto flex items-center gap-1 text-xs text-ink-gray-5">
               <LucideCommand class="size-3" />
               K
             </span>
diff --git a/docs/components/Search/Popup.vue b/docs/components/Search/Popup.vue
index 36a718d83..e4ddd6bcc 100644
--- a/docs/components/Search/Popup.vue
+++ b/docs/components/Search/Popup.vue
@@ -1,30 +1,17 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
+import { computedAsync, debouncedWatch } from '@vueuse/core'
+import Mark from 'mark.js'
 import type { SearchResult } from 'minisearch'
-
 import MiniSearch from 'minisearch'
-import Mark from 'mark.js'
-
 import { useData } from 'vitepress'
-import { computedAsync, debouncedWatch } from '@vueuse/core'
-
-import {
-  markRaw,
-  nextTick,
-  onMounted,
-  ref,
-  shallowRef,
-  watch,
-  useTemplateRef,
-} from 'vue'
-
-import LucideX from '~icons/lucide/x'
-import LucideSearch from '~icons/lucide/search'
-import LucideCommand from '~icons/lucide/command'
+import type { Ref } from 'vue'
+import { markRaw, nextTick, onMounted, ref, shallowRef, watch, useTemplateRef } from 'vue'
 import LucideArrowDown from '~icons/lucide/arrow-down'
-import LucideEnter from '~icons/lucide/corner-down-left'
-
 import LucideChevronRight from '~icons/lucide/chevron-right'
+import LucideCommand from '~icons/lucide/command'
+import LucideEnter from '~icons/lucide/corner-down-left'
+import LucideSearch from '~icons/lucide/search'
+import LucideX from '~icons/lucide/x'
 
 import { LRUCache } from './cache'
 
@@ -64,18 +51,15 @@ const mark = computedAsync(async () => {
 
 const searchIndex = computedAsync(async () =>
   markRaw(
-    MiniSearch.loadJSON<Result>(
-      (await searchIndexData.value?.[localeIndex.value]?.())?.default,
-      {
-        fields: ['title', 'titles', 'text'],
-        storeFields: ['title', 'titles'],
-        searchOptions: {
-          fuzzy: 0.2,
-          prefix: true,
-          boost: { title: 4, text: 2, titles: 1 },
-        },
+    MiniSearch.loadJSON<Result>((await searchIndexData.value?.[localeIndex.value]?.())?.default, {
+      fields: ['title', 'titles', 'text'],
+      storeFields: ['title', 'titles'],
+      searchOptions: {
+        fuzzy: 0.2,
+        prefix: true,
+        boost: { title: 4, text: 2, titles: 1 },
       },
-    ),
+    }),
   ),
 )
 
@@ -129,8 +113,7 @@ watch(filterText, () => {
 
 const move = (delta: number) => {
   if (!results.value.length) return
-  activeIndex.value =
-    (activeIndex.value + delta + results.value.length) % results.value.length
+  activeIndex.value = (activeIndex.value + delta + results.value.length) % results.value.length
 }
 
 const selectActive = () => {
@@ -143,11 +126,8 @@ const selectActive = () => {
 const formMarkRegex = (terms: Set<string>) => {
   return new RegExp(
     [...terms]
-      .sort((a, b) => b.length - a.length)
-      .map(
-        (t) =>
-          `(${t.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d')})`,
-      )
+      .toSorted((a, b) => b.length - a.length)
+      .map((t) => `(${t.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d')})`)
       .join('|'),
     'gi',
   )
@@ -172,7 +152,7 @@ const vScrollActive = {
 
 <template>
   <div
-    class="fixed inset-0 z-100 flex items-start justify-center bg-black/50 backdrop-blur-sm"
+    class="z-100 fixed inset-0 flex items-start justify-center bg-black/50 backdrop-blur-sm"
     @click.self="emits('close')"
   >
     <div
@@ -180,14 +160,14 @@ const vScrollActive = {
       @keydown.esc.prevent="emits('close')"
     >
       <!-- input -->
-      <div class="flex gap-2 items-center border-b border-outline-gray-2 p-3">
+      <div class="flex items-center gap-2 border-b border-outline-gray-2 p-3">
         <LucideSearch class="size-4" />
 
         <input
           ref="inputRef"
           v-model="filterText"
           placeholder="Search documentation"
-          class="w-full bg-transparent !outline-none !border-0 text-sm p-0 !ring-0"
+          class="w-full !border-0 bg-transparent p-0 text-sm !outline-none !ring-0"
           @keydown.down.prevent="move(1)"
           @keydown.up.prevent="move(-1)"
           @keydown.enter.prevent="selectActive"
@@ -206,7 +186,7 @@ const vScrollActive = {
       <!-- results -->
       <ul
         ref="resultsEl"
-        class="max-h-[55vh] overflow-auto scrollbar"
+        class="scrollbar max-h-[55vh] overflow-auto"
         :class="{ 'border-b p-2': results.length > 0 }"
       >
         <a
@@ -214,9 +194,9 @@ const vScrollActive = {
           :key="p.id"
           :aria-selected="i === activeIndex"
           :href="p.id"
-          class="flex gap-1 items-center text-ink-gray-6"
+          class="flex items-center gap-1 text-ink-gray-6"
           :class="[
-            'p-2 cursor-pointer text-sm rounded',
+            'cursor-pointer rounded p-2 text-sm',
             i === activeIndex ? 'bg-surface-gray-2 text-ink-gray-9' : '',
           ]"
           @mouseenter="activeIndex = i"
@@ -232,17 +212,14 @@ const vScrollActive = {
         </a>
       </ul>
 
-      <div
-        v-if="filterText && !results.length && showNoResults"
-        class="my-8 text-center text-sm"
-      >
+      <div v-if="filterText && !results.length && showNoResults" class="my-8 text-center text-sm">
         No results for "<b>{{ filterText }}</b
         >"
       </div>
 
       <!-- kb helpers -->
       <div
-        class="flex items-center gap-2 text-ink-gray-6 [&>kbd]:bg-surface-gray-2 [&>kbd]:p-1 [&>kbd]:rounded-sm p-2"
+        class="flex items-center gap-2 p-2 text-ink-gray-6 [&>kbd]:rounded-sm [&>kbd]:bg-surface-gray-2 [&>kbd]:p-1"
       >
         <kbd> <LucideArrowDown class="size-4 text-ink-gray-5" /> </kbd>
         <kbd>
@@ -254,7 +231,7 @@ const vScrollActive = {
         <span class="mr-3">to select</span>
         <kbd> esc </kbd>
         <span> to close</span>
-        <kbd class="flex gap-1 items-center ml-auto">
+        <kbd class="ml-auto flex items-center gap-1">
           <LucideCommand class="size-4 text-ink-gray-5" />
           K
         </kbd>
diff --git a/docs/components/Search/cache.ts b/docs/components/Search/cache.ts
index 266104c7e..fcf549e29 100644
--- a/docs/components/Search/cache.ts
+++ b/docs/components/Search/cache.ts
@@ -21,11 +21,9 @@ export class LRUCache {
 
   set(key, val) {
     // refresh key
-    if (this.cache.has(key))
-      this.cache.delete(key)
-      // evict oldest
-    else if (this.cache.size === this.max)
-      this.cache.delete(this.first())
+    if (this.cache.has(key)) this.cache.delete(key)
+    // evict oldest
+    else if (this.cache.size === this.max) this.cache.delete(this.first())
     this.cache.set(key, val)
   }
 
diff --git a/docs/components/Story.vue b/docs/components/Story.vue
index 9f97812d7..3f030a74f 100644
--- a/docs/components/Story.vue
+++ b/docs/components/Story.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { Button } from "frappe-ui";
-import LucideBox from "~icons/lucide/box";
+import { Button } from 'frappe-ui'
+import LucideBox from '~icons/lucide/box'
 
 interface Props {
-  title?: string;
-  previewCss?: string;
+  title?: string
+  previewCss?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  title: "Default",
-});
+  title: 'Default',
+})
 </script>
 
 <template>
-  <section class="flex flex-col gap-3 h-fit">
+  <section class="flex h-fit flex-col gap-3">
     <Button class="w-fit capitalize" size="sm">
       <template #prefix>
         <LucideBox class="size-4" />
@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
     </Button>
 
     <div
-      class="border border-outline-gray-2 p-5 rounded overflow-auto scrollbar"
+      class="scrollbar overflow-auto rounded border border-outline-gray-2 p-5"
       :class="props.previewCss"
     >
       <slot />
diff --git a/docs/components/tokens/BgColor.vue b/docs/components/tokens/BgColor.vue
index eb1a4159e..5e0fa5e00 100644
--- a/docs/components/tokens/BgColor.vue
+++ b/docs/components/tokens/BgColor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import LucideCopy from '~icons/lucide/copy'
 import { Button } from 'frappe-ui'
+import LucideCopy from '~icons/lucide/copy'
 
 defineProps({
   data: {
@@ -21,28 +21,27 @@ const copyToClipboard = (txt: string) => {
 
 <template>
   <p class="text-bsae">
-    Background colors in Frappe UI are prefixed with "surface", for example:
-    surface-gray2
+    Background colors in Frappe UI are prefixed with "surface", for example: surface-gray2
     <br />
     classes would be: bg-surface-gray-2, bg-surface-cards etc
   </p>
 
   <div class="flex flex-wrap gap-5">
     <template v-for="color in data" :key="color.name">
-      <h2 :id="color.name" v-if="!color.value" class="capitalize w-full">
+      <h2 :id="color.name" v-if="!color.value" class="w-full capitalize">
         {{ color.name }}
       </h2>
 
       <div class="grid gap-3" v-else>
         <div
           v-if="color.value"
-          class="rounded size-20"
+          class="size-20 rounded"
           :style="{ backgroundColor: color.value }"
         ></div>
 
         <Button class="group relative" @click="copyToClipboard(color.name)">
           <span
-            class="absolute flex items-center inset-0 justify-center gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100"
+            class="absolute inset-0 flex items-center justify-center gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100"
           >
             <LucideCopy class="size-4" /> Copy
           </span>
diff --git a/docs/components/tokens/BorderColor.vue b/docs/components/tokens/BorderColor.vue
index 177f3dd31..1d41d55be 100644
--- a/docs/components/tokens/BorderColor.vue
+++ b/docs/components/tokens/BorderColor.vue
@@ -12,13 +12,13 @@ const _data = props.data.slice(0, props.data.length - 2)
 <template>
   <div class="grid grid-cols-3 gap-5">
     <template v-for="color in _data" :key="color.name">
-      <h2 :id="color.name" v-if="!color.value" class="capitalize col-span-full">
+      <h2 :id="color.name" v-if="!color.value" class="col-span-full capitalize">
         {{ color.name }}
       </h2>
 
       <div v-else class="grid gap-2">
         <div
-          class="rounded border-2 flex items-end p-5"
+          class="flex items-end rounded border-2 p-5"
           :style="{ borderColor: color.value }"
         ></div>
         <span>{{ color.name }}</span>
diff --git a/docs/components/tokens/BorderRadius.vue b/docs/components/tokens/BorderRadius.vue
index e294f8186..db778af68 100644
--- a/docs/components/tokens/BorderRadius.vue
+++ b/docs/components/tokens/BorderRadius.vue
@@ -1,25 +1,20 @@
 <script setup lang="ts">
-
 type BorderRadiusToken = {
-  name: string;
-  value: string;
-};
+  name: string
+  value: string
+}
 
 const props = defineProps<{
-  data: BorderRadiusToken[];
-}>();
+  data: BorderRadiusToken[]
+}>()
 
-const data = props.data.slice(0, props.data.length - 1);
+const data = props.data.slice(0, props.data.length - 1)
 </script>
 
 <template>
-  <div class="grid grid-cols-3 gap-5 my-10">
-    <div
-      v-for="radius in data"
-      :key="radius.name"
-      class="grid gap-3"
-    >
-      <div class="text-sm justify-between flex">
+  <div class="my-10 grid grid-cols-3 gap-5">
+    <div v-for="radius in data" :key="radius.name" class="grid gap-3">
+      <div class="flex justify-between text-sm">
         <span class="font-medium">
           {{ 'rounded-' + radius.name }}
         </span>
@@ -30,36 +25,29 @@ const data = props.data.slice(0, props.data.length - 1);
 
       <!-- card -->
       <div
-        class="
-          border grid gap-3
-          border-outline-gray-2
-          bg-surface-cards
-          p-4
-        "
+        class="grid gap-3 border border-outline-gray-2 bg-surface-cards p-4"
         :style="{ borderRadius: radius.value }"
       >
-        <div class="flex items-center gap-3 borer-b">
+        <div class="borer-b flex items-center gap-3">
           <div
-            class="size-8 grid place-items-center bg-surface-gray-2"
+            class="grid size-8 place-items-center bg-surface-gray-2"
             :style="{ borderRadius: radius.value }"
           >
             <span class="text-xs font-medium">U</span>
           </div>
-          <span class="font-medium whitespace-nowrap">Some Name</span>
+          <span class="whitespace-nowrap font-medium">Some Name</span>
         </div>
 
-        <div class="text-sm text-ink-gray-5 grid gap-2">
-          <span class="h-3 rounded-sm bg-surface-gray-2 w-1/2"> </span>
-          <span class="h-5 rounded-sm bg-surface-gray-3 w-full"> </span>
+        <div class="grid gap-2 text-sm text-ink-gray-5">
+          <span class="h-3 w-1/2 rounded-sm bg-surface-gray-2"> </span>
+          <span class="h-5 w-full rounded-sm bg-surface-gray-3"> </span>
         </div>
 
         <div class="flex items-center justify-between">
-          <span class="text-xs text-ink-gray-4">
-            8 items
-          </span>
+          <span class="text-xs text-ink-gray-4"> 8 items </span>
 
           <button
-            class="px-3 py-1 text-xs border bg-surface-white"
+            class="border bg-surface-white px-3 py-1 text-xs"
             :style="{ borderRadius: radius.value }"
           >
             Add
diff --git a/docs/components/tokens/DropShadow.vue b/docs/components/tokens/DropShadow.vue
index 4eded7ed8..c8e3882dd 100644
--- a/docs/components/tokens/DropShadow.vue
+++ b/docs/components/tokens/DropShadow.vue
@@ -1,24 +1,13 @@
 <script setup lang="ts">
-const classNames = [
-  "shadow-none",
-  "shadow-sm",
-  "shadow-md",
-  "shadow-lg",
-  "shadow-xl",
-  "shadow-2xl",
-];
+const classNames = ['shadow-none', 'shadow-sm', 'shadow-md', 'shadow-lg', 'shadow-xl', 'shadow-2xl']
 </script>
 
 <template>
-  <div class="grid grid-cols-3 gap-6 mt-10">
+  <div class="mt-10 grid grid-cols-3 gap-6">
     <div v-for="item in classNames" class="grid gap-3">
       <span>{{ item }} </span>
 
-      <div
-        :class="item"
-        class="rounded border grid gap-3 p-3 bg-surface-cards h-20"
-      >
-      </div>
+      <div :class="item" class="grid h-20 gap-3 rounded border bg-surface-cards p-3"></div>
     </div>
   </div>
 </template>
diff --git a/docs/components/tokens/Text.vue b/docs/components/tokens/Text.vue
index c278ae6c1..0bd8dd4b3 100644
--- a/docs/components/tokens/Text.vue
+++ b/docs/components/tokens/Text.vue
@@ -1,50 +1,45 @@
 <script setup>
-import { computed, ref } from "vue";
-import { Tabs } from "frappe-ui";
+import { Tabs } from 'frappe-ui'
+import { computed, ref } from 'vue'
 
 defineProps({
   data: {
     type: Array,
     required: true,
   },
-});
+})
 
-const activeTab = ref(0);
+const activeTab = ref(0)
 
 const tabs = [
-	{ label: "Text Color" },
-  { label: "Font Size" },
-  { label: "Font Weight" },
-  { label: "Letter Spacing" },
-  { label: "Line Height" },
-];
+  { label: 'Text Color' },
+  { label: 'Font Size' },
+  { label: 'Font Weight' },
+  { label: 'Letter Spacing' },
+  { label: 'Line Height' },
+]
 
-const activeTabLabel = computed(() => tabs[activeTab.value].label);
+const activeTabLabel = computed(() => tabs[activeTab.value].label)
 
-const text = ref("The quick brown fox jumps over the lazy dog");
+const text = ref('The quick brown fox jumps over the lazy dog')
 
 const para =
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
 </script>
 
 <template>
   <div class="grid gap-3">
-    <Tabs :tabs v-model="activeTab" class="[&>div]:!px-1 rounded" />
+    <Tabs :tabs v-model="activeTab" class="rounded [&>div]:!px-1" />
 
-    <template v-if='activeTabLabel === "Text Color"'>
+    <template v-if="activeTabLabel === 'Text Color'">
       <div class="grid grid-cols-4 gap-x-4 gap-y-10">
         <template v-for="color in data.txtColors" :key="color.name">
-          <span
-            v-if="!color.value"
-            class="capitalize col-span-full font-semibold text-xl"
-          >
+          <span v-if="!color.value" class="col-span-full text-xl font-semibold capitalize">
             {{ color.name }}
           </span>
 
           <div v-else class="grid gap-2">
-            <span :style='{ color: color.value, fontSize: "50px" }'>
-              Aa
-            </span>
+            <span :style="{ color: color.value, fontSize: '50px' }"> Aa </span>
             <span>{{ color.name }}</span>
             <span class="text-sm text-ink-gray-5">{{ color.value }}</span>
           </div>
@@ -52,92 +47,73 @@ const para =
       </div>
     </template>
 
-    <template v-if='activeTabLabel === "Font Size"'>
+    <template v-if="activeTabLabel === 'Font Size'">
       <div
         v-for="item in data.fontSize"
         :key="item.name"
         class="rounded border border-outline-gray-3 p-4"
       >
-        <div class="text-xs opacity-60 mb-1">
+        <div class="mb-1 text-xs opacity-60">
           {{ item.name }}
         </div>
 
         <div
-          :style="
-            {
-              fontSize: item.value[0],
-              lineHeight: item.value[1]?.lineHeight,
-              letterSpacing: item.value[1]?.letterSpacing,
-              fontWeight: item.value[1]?.fontWeight,
-            }
-          "
+          :style="{
+            fontSize: item.value[0],
+            lineHeight: item.value[1]?.lineHeight,
+            letterSpacing: item.value[1]?.letterSpacing,
+            fontWeight: item.value[1]?.fontWeight,
+          }"
         >
-          {{ item.name.includes("p") ? para : text }}
+          {{ item.name.includes('p') ? para : text }}
         </div>
 
         <div class="mt-2 text-xs opacity-60">
           {{ item.value[0] }}
-          · lh {{ item.value[1]?.lineHeight }}
-          · ls {{ item.value[1]?.letterSpacing }}
-          · fw {{ item.value[1]?.fontWeight }}
+          · lh {{ item.value[1]?.lineHeight }} · ls {{ item.value[1]?.letterSpacing }} · fw
+          {{ item.value[1]?.fontWeight }}
         </div>
       </div>
     </template>
 
-    <template v-if='activeTabLabel === "Font Weight"'>
+    <template v-if="activeTabLabel === 'Font Weight'">
       <div
         v-for="item in data.fontWeight"
         :key="item.name"
         class="rounded border border-outline-gray-2 p-4"
       >
-        <div class="text-sm text-gray-500 mb-1">
-          {{ item.name }} ({{ item.value }})
-        </div>
+        <div class="mb-1 text-sm text-gray-500">{{ item.name }} ({{ item.value }})</div>
 
-        <div
-          class="text-base"
-          :style="{ fontWeight: item.value }"
-        >
+        <div class="text-base" :style="{ fontWeight: item.value }">
           The quick brown fox jumps over the lazy dog
         </div>
       </div>
     </template>
 
-    <template v-if='activeTabLabel === "Letter Spacing"'>
+    <template v-if="activeTabLabel === 'Letter Spacing'">
       <div
         v-for="item in data.letterSpacing"
         :key="item.name"
         class="rounded border p-4"
-        :style='
-          {
-            letterSpacing: item.value,
-            fontSize: "16px",
-          }
-        '
+        :style="{
+          letterSpacing: item.value,
+          fontSize: '16px',
+        }"
       >
-        <div class="text-xs opacity-60 mb-2">
-          tracking-{{ item.name }} ({{ item.value }})
-        </div>
-        <div>
-          The quick brown fox jumps over the lazy dog
-        </div>
+        <div class="mb-2 text-xs opacity-60">tracking-{{ item.name }} ({{ item.value }})</div>
+        <div>The quick brown fox jumps over the lazy dog</div>
       </div>
     </template>
 
-    <template v-if='activeTabLabel === "Line Height"'>
+    <template v-if="activeTabLabel === 'Line Height'">
       <div
         v-for="item in data.lineHeight"
         :key="item.name"
         class="rounded border border-outline-gray-2 p-3"
       >
-        <div class="text-xs opacity-60 mb-1">
-          leading-{{ item.name }}
-        </div>
+        <div class="mb-1 text-xs opacity-60">leading-{{ item.name }}</div>
 
-        <p
-          class="text-base my-2"
-          :style="{ lineHeight: item.value }"
-        >
+        <p class="my-2 text-base" :style="{ lineHeight: item.value }">
           {{ para }}
         </p>
 
diff --git a/docs/components/tokens/TxtColor.vue b/docs/components/tokens/TxtColor.vue
index c2989ca85..6ffbfe6b6 100644
--- a/docs/components/tokens/TxtColor.vue
+++ b/docs/components/tokens/TxtColor.vue
@@ -4,20 +4,18 @@ defineProps({
     type: Array,
     required: true,
   },
-});
+})
 </script>
 
 <template>
   <div class="grid grid-cols-4 gap-4">
     <template v-for="color in data" :key="color.name">
-      <h2 :id="color.name" v-if="!color.value" class="capitalize col-span-full">
+      <h2 :id="color.name" v-if="!color.value" class="col-span-full capitalize">
         {{ color.name }}
       </h2>
 
       <div v-else class="grid gap-2">
-        <span :style='{ color: color.value, fontSize: "50px" }'>
-          Aa
-        </span>
+        <span :style="{ color: color.value, fontSize: '50px' }"> Aa </span>
         <span>{{ color.name }}</span>
         <span class="text-sm text-ink-gray-5">{{ color.value }}</span>
       </div>
diff --git a/docs/content/auto-imports.d.ts b/docs/content/auto-imports.d.ts
index 9d2400790..b0b03575b 100644
--- a/docs/content/auto-imports.d.ts
+++ b/docs/content/auto-imports.d.ts
@@ -5,6 +5,4 @@
 // Generated by unplugin-auto-import
 // biome-ignore lint: disable
 export {}
-declare global {
-
-}
+declare global {}
diff --git a/docs/content/docs/components/alert.md b/docs/content/docs/components/alert.md
index ce7c2ecb8..325f67314 100644
--- a/docs/content/docs/components/alert.md
+++ b/docs/content/docs/components/alert.md
@@ -3,12 +3,15 @@
 A prominent message used to communicate important information, warnings, or status updates to the user.
 
 ## Themes
+
 <ComponentPreview name="Alert-Themes" css="grid grid-cols-2" />
 
 ## Controlled state
+
 <ComponentPreview name="Alert-Controlled" css="grid" />
 
 ## Slots Example
+
 <ComponentPreview name="Alert-Slots" css='grid' />
 
 <!-- @include: ../../../meta/Alert.md -->
diff --git a/docs/content/docs/components/avatar.md b/docs/content/docs/components/avatar.md
index cfa357374..704eef0d0 100644
--- a/docs/content/docs/components/avatar.md
+++ b/docs/content/docs/components/avatar.md
@@ -3,9 +3,11 @@
 A visual representation of a user, typically shown as an image, initials, or an icon.
 
 ## Themes
+
 <ComponentPreview name="Avatar-Shapes" />
 
 ## Controlled state
+
 <ComponentPreview name="Avatar-Sizes"  />
 
 <!-- @include: ../../../meta/Avatar.md -->
diff --git a/docs/content/docs/components/button.md b/docs/content/docs/components/button.md
index 87d1393fb..1d7885444 100644
--- a/docs/content/docs/components/button.md
+++ b/docs/content/docs/components/button.md
@@ -10,7 +10,7 @@ An interactive element used to trigger actions, submit forms, or navigate betwee
 
 <ComponentPreview name='Button-Themes'  />
 
-## Sizes    
+## Sizes
 
 <ComponentPreview name='Button-Sizes'  />
 
diff --git a/docs/content/docs/components/calendar.md b/docs/content/docs/components/calendar.md
index 0884d9542..5cea1d251 100644
--- a/docs/content/docs/components/calendar.md
+++ b/docs/content/docs/components/calendar.md
@@ -3,7 +3,9 @@
 A full-featured date and event view for displaying, organizing, and navigating schedules across days, weeks, or months.
 
 ## Default
+
 <ComponentPreview name="Calendar-Examples" csr="true"   css='h-screen overflow-hidden'/>
 
 ## Custom Header
+
 <ComponentPreview name="Calendar-CustomHeader" csr="true" css='h-screen overflow-hidden'  />
diff --git a/docs/content/docs/components/combobox.md b/docs/content/docs/components/combobox.md
index 7d7f429ff..d307bf4f7 100644
--- a/docs/content/docs/components/combobox.md
+++ b/docs/content/docs/components/combobox.md
@@ -3,19 +3,23 @@
 Lets users choose from available options or type their own. Provides clear, responsive feedback for every interaction.
 
 ## Simple
+
 <ComponentPreview name="Combobox-Simple"  css='justify-center !py-20 grid'  />
 
 ## With Icons
+
 <ComponentPreview name="Combobox-WithIcons" css='justify-center !py-20 grid' />
 
 ## Grouped Options
+
 <ComponentPreview name="Combobox-Grouped" css='justify-center !py-20 grid' />
 
 ## Custom Render
+
 <ComponentPreview name="Combobox-CustomRender" css='justify-center !py-20 grid' />
 
 ## Custom Option Slots
-<ComponentPreview name="Combobox-OptionSlots" css='justify-center !py-20 grid' />
 
+<ComponentPreview name="Combobox-OptionSlots" css='justify-center !py-20 grid' />
 
 <!-- @include: ../../../meta/Combobox.md -->
diff --git a/docs/content/docs/components/datepicker.md b/docs/content/docs/components/datepicker.md
index 3d5463f3e..21efcff6e 100644
--- a/docs/content/docs/components/datepicker.md
+++ b/docs/content/docs/components/datepicker.md
@@ -3,12 +3,15 @@
 A set of pickers for selecting dates, date ranges, or date and time. Smooth, intuitive interfaces make choosing and adjusting values quick and precise.
 
 ## Date Picker
+
 <ComponentPreview name="DatePicker-Examples" css='grid *:w-fit justify-center !py-20 !gap-1' />
 
 ## DateTime Picker
+
 <ComponentPreview name="DatePicker-DateTime" css='grid *:w-fit justify-center !py-20 !gap-1' />
 
 ## Date Range Picker
+
 <ComponentPreview name="DatePicker-Range" css='grid *:w-fit justify-center !py-20 !gap-1'/>
 
 <!-- @include: ../../../meta/DatePicker.md -->
diff --git a/docs/content/docs/components/dialog.md b/docs/content/docs/components/dialog.md
index ba1b88763..a769e45f8 100644
--- a/docs/content/docs/components/dialog.md
+++ b/docs/content/docs/components/dialog.md
@@ -3,16 +3,19 @@
 A flexible overlay for showing messages, forms, or actions. Keeps focus on content while allowing clear, user-friendly interactions.
 
 ## Confirmation
+
 <ComponentPreview name="Dialog-Confirm" />
 
 ## Custom Content
+
 <ComponentPreview name="Dialog-Custom" />
 
 ## Modal
+
 <ComponentPreview name="Dialog-Modal" />
 
 ## Interactive Content
-<ComponentPreview name="Dialog-Interactive" />
 
+<ComponentPreview name="Dialog-Interactive" />
 
 <!-- @include: ../../../meta/Dialog.md -->
diff --git a/docs/content/docs/components/dropdown.md b/docs/content/docs/components/dropdown.md
index 4e291c5df..750a63917 100644
--- a/docs/content/docs/components/dropdown.md
+++ b/docs/content/docs/components/dropdown.md
@@ -3,19 +3,23 @@
 A flexible menu component for selecting actions or options. Easily handles lists, groups, and nested items in a clean. Supports switches, disabled items, custom triggers.
 
 ## Default
+
 <ComponentPreview name="Dropdown-Examples" />
 
 ## Custom Trigger
+
 <ComponentPreview name="Dropdown-CustomTrigger" />
 
 ## Groups
+
 <ComponentPreview name="Dropdown-Grouped" />
 
 ## Submenus
+
 <ComponentPreview name="Dropdown-Submenus" />
 
 ## Switches
-<ComponentPreview name="Dropdown-Switches" />
 
+<ComponentPreview name="Dropdown-Switches" />
 
 <!-- @include: ../../../meta/Dropdown.md -->
diff --git a/docs/content/docs/components/errormessage.md b/docs/content/docs/components/errormessage.md
index fc2e8b47b..7867dea20 100644
--- a/docs/content/docs/components/errormessage.md
+++ b/docs/content/docs/components/errormessage.md
@@ -3,10 +3,11 @@
 Displays a clear message to indicate errors or issues. Helps users understand problems and take corrective action quickly.
 
 ## String Message
+
 <ComponentPreview name="ErrorMessage-Examples" />
 
 ## Error Object
-<ComponentPreview name="ErrorMessage-ErrorObject" />
 
+<ComponentPreview name="ErrorMessage-ErrorObject" />
 
 <!-- @include: ../../../meta/ErrorMessage.md -->
diff --git a/docs/content/docs/components/listview.md b/docs/content/docs/components/listview.md
index dbe9bef19..28ccbb6d8 100644
--- a/docs/content/docs/components/listview.md
+++ b/docs/content/docs/components/listview.md
@@ -7,13 +7,17 @@ Displays data in a structured, scrollable list with support for columns, groups,
 <ComponentPreview name="ListView-Examples"  />
 
 ## Custom List
+
 <ComponentPreview name="ListView-CustomList"  />
 
-## Grouped Rows 
+## Grouped Rows
+
 <ComponentPreview name="ListView-GroupedRows"  />
 
 ## Cell Slot
+
 <ComponentPreview name="ListView-CellSlot"  />
 
 ## Empty List
+
 <ComponentPreview name="ListView-Empty"  />
diff --git a/docs/content/docs/components/multiselect.md b/docs/content/docs/components/multiselect.md
index e0e8ee388..4ea7cd764 100644
--- a/docs/content/docs/components/multiselect.md
+++ b/docs/content/docs/components/multiselect.md
@@ -3,12 +3,15 @@
 Allows selecting multiple options from a list with ease. Supports custom content, images, and convenient controls like “Select All” or “Clear All.”
 
 ## Default
+
 <ComponentPreview name="MultiSelect-Example" css='justify-center !py-20' />
 
 ## Option Slot
+
 <ComponentPreview name="MultiSelect-Options" css='justify-center !py-20' />
 
 ## Footer Slot
+
 <ComponentPreview name="MultiSelect-Footer" css='justify-center !py-20' />
 
 <!-- @include: ../../../meta/MultiSelect.md -->
diff --git a/docs/content/docs/components/popover.md b/docs/content/docs/components/popover.md
index 3984e1cb3..bcc4b0e96 100644
--- a/docs/content/docs/components/popover.md
+++ b/docs/content/docs/components/popover.md
@@ -3,9 +3,11 @@
 Shows information in a portal that doesnt disturb the page layout.
 
 ## Trigger Click
+
 <ComponentPreview name="Popover-Click"  />
 
 ## Trigger Hover
+
 <ComponentPreview name="Popover-Hover"  />
 
 <!-- @include: ../../../meta/Popover.md -->
diff --git a/docs/content/docs/components/progress.md b/docs/content/docs/components/progress.md
index 60a97d248..4a3726356 100644
--- a/docs/content/docs/components/progress.md
+++ b/docs/content/docs/components/progress.md
@@ -3,15 +3,19 @@
 Visually represents progress or completion of a task. Updates dynamically to give users clear feedback on status.
 
 ## Examples
+
 <ComponentPreview name="Progress-Examples"  />
 
 ## Hint
+
 <ComponentPreview name="Progress-Hint" />
 
 ## Intervals
+
 <ComponentPreview name="Progress-Intervals"  />
 
 ## Sizes
+
 <ComponentPreview name="Progress-Sizes" css='grid grid-cols-2 *:bordr *:rounded  *:p-3' />
 
 <!-- @include: ../../../meta/Progress.md -->
diff --git a/docs/content/docs/components/rating.md b/docs/content/docs/components/rating.md
index 7293898b1..a57cbc113 100644
--- a/docs/content/docs/components/rating.md
+++ b/docs/content/docs/components/rating.md
@@ -3,6 +3,7 @@
 Lets users rate items using stars in a simple, interactive way. Provides immediate visual feedback and supports partial or full selections.
 
 ## Examples
+
 <ComponentPreview name="Rating-Examples" css='justify-center !py-20'  />
 
 <!-- @include: ../../../meta/Rating.md -->
diff --git a/docs/content/docs/components/select.md b/docs/content/docs/components/select.md
index 0e3c75298..98e0fefd3 100644
--- a/docs/content/docs/components/select.md
+++ b/docs/content/docs/components/select.md
@@ -3,6 +3,7 @@
 Lets users select one option from a list. Ideal for forms, settings, or any interface where a single choice is required.
 
 ## Default
+
 <ComponentPreview name="Select-Example" css='grid justify-center *:w-fit py-20'  />
 
 ## Trigger Slots
@@ -12,6 +13,7 @@ Trigger has only Prefix and suffix slots.
 <ComponentPreview name="Select-TriggerSlots" css='grid py-20 justify-center' />
 
 ## Option Slot
+
 <ComponentPreview name="Select-OptionSlot" css='grid justify-center py-20' />
 
 <!-- @include: ../../../meta/Select.md -->
diff --git a/docs/content/docs/components/sidebar.md b/docs/content/docs/components/sidebar.md
index 6acf8fb84..b711d5542 100644
--- a/docs/content/docs/components/sidebar.md
+++ b/docs/content/docs/components/sidebar.md
@@ -3,6 +3,7 @@
 Provides a vertical navigation panel for organizing links and actions. Supports sections, collapsible groups, and quick access to key features.
 
 ## Default
+
 <ComponentPreview name="Sidebar-Example" css='!p-0'  />
 
 <!-- @include: ../../../meta/Sidebar.md -->
diff --git a/docs/content/docs/components/slider.md b/docs/content/docs/components/slider.md
index 75d698178..68021ae64 100644
--- a/docs/content/docs/components/slider.md
+++ b/docs/content/docs/components/slider.md
@@ -3,7 +3,9 @@
 Range slider
 
 ## Example
+
 <ComponentPreview name="Slider-Example" css='grid gap-5 !py-32 !px-60'  />
 
 ## Range
+
 <ComponentPreview name="Slider-Range" css='grid gap-5 !py-32 !px-60 '  />
diff --git a/docs/content/docs/components/switch.md b/docs/content/docs/components/switch.md
index 965407a98..151f7030f 100644
--- a/docs/content/docs/components/switch.md
+++ b/docs/content/docs/components/switch.md
@@ -3,9 +3,11 @@
 A toggle input for turning options on or off. Clearly indicates state changes and allows quick, intuitive control.
 
 ## Default
+
 <ComponentPreview name="Switch-Example" css='justify-center py-20'  />
 
-## Labels 
+## Labels
+
 <ComponentPreview name="Switch-Labels" css='grid' />
 
 <!-- @include: ../../../meta/Switch.md -->
diff --git a/docs/content/docs/components/tabs.md b/docs/content/docs/components/tabs.md
index 540b9676f..559341bb1 100644
--- a/docs/content/docs/components/tabs.md
+++ b/docs/content/docs/components/tabs.md
@@ -3,9 +3,11 @@
 Organizes content into separate panels that users can switch between. Makes navigating related sections quick and intuitive.
 
 ## Orientation
+
 <ComponentPreview name="Tabs-Orientation" css='grid gap-5'  />
 
 ## Icons
+
 <ComponentPreview name="Tabs-Icons"  />
 
 <!-- @include: ../../../meta/Tabs.md -->
diff --git a/docs/content/docs/components/textarea.md b/docs/content/docs/components/textarea.md
index cdfbfafee..92812ef11 100644
--- a/docs/content/docs/components/textarea.md
+++ b/docs/content/docs/components/textarea.md
@@ -3,6 +3,7 @@
 A multi-line input for entering longer text. Supports clear editing and flexible sizing for different content needs.
 
 ## Variants
+
 <ComponentPreview name="Textarea-Variants" css='grid grid-cols-2' />
 
 <!-- @include: ../../../meta/Textarea.md -->
diff --git a/docs/content/docs/components/texteditor.md b/docs/content/docs/components/texteditor.md
index 2072016f2..67e2157bf 100644
--- a/docs/content/docs/components/texteditor.md
+++ b/docs/content/docs/components/texteditor.md
@@ -3,9 +3,11 @@
 A rich text editor based on TipTap for creating and formatting content. Offers intuitive controls, styling options, and smooth editing experience.
 
 ## Default
+
 <ComponentPreview name="TextEditor-Example"  />
 
 ## Comment Editor
+
 <ComponentPreview name="TextEditor-Comment"  />
 
 <!-- @include: ../../../meta/TextEditor.md -->
diff --git a/docs/content/docs/components/timepicker.md b/docs/content/docs/components/timepicker.md
index 77efd067d..d9474d7eb 100644
--- a/docs/content/docs/components/timepicker.md
+++ b/docs/content/docs/components/timepicker.md
@@ -3,16 +3,19 @@
 Lets users select a specific time from a list or enter a custom value. Supports 12/24-hour formats, custom intervals, and optional time ranges.
 
 ## Basic
+
 <ComponentPreview name="TimePicker-Basic" css='grid justify-center py-20'  />
 
 ## 24 Hour Format
+
 <ComponentPreview name="TimePicker-TwentyFour" css='grid justify-center py-20'  />
 
 ## Custom Options
+
 <ComponentPreview name="TimePicker-CustomOptions" css='grid justify-center py-20'  />
 
 ## Min / Max Range
+
 <ComponentPreview name="TimePicker-Range" css='grid justify-center py-20'  />
 
 <!-- @include: ../../../meta/TimePicker.md -->
-
diff --git a/docs/content/docs/components/tooltip.md b/docs/content/docs/components/tooltip.md
index 160dfa5de..905e1ee60 100644
--- a/docs/content/docs/components/tooltip.md
+++ b/docs/content/docs/components/tooltip.md
@@ -1,8 +1,9 @@
-#  Tooltip
+# Tooltip
 
 A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
 
 ## Default
+
 <ComponentPreview name="Tooltip-Examples"  />
 
 ## With Slots
diff --git a/docs/content/docs/components/tree.md b/docs/content/docs/components/tree.md
index 7cc6e39c2..7bc3292e0 100644
--- a/docs/content/docs/components/tree.md
+++ b/docs/content/docs/components/tree.md
@@ -2,7 +2,8 @@
 
 Displays hierarchical data in a collapsible tree structure. Makes it easy to navigate nested items and manage complex relationships.
 
-## Default 
+## Default
+
 <ComponentPreview name="Tree-Example"  />
 
 <!-- @include: ../../../meta/Tree.md -->
diff --git a/docs/content/docs/data-fetching/document-resource.md b/docs/content/docs/data-fetching/document-resource.md
index 97d6c07c3..e813ce35a 100644
--- a/docs/content/docs/data-fetching/document-resource.md
+++ b/docs/content/docs/data-fetching/document-resource.md
@@ -18,12 +18,8 @@ the fields of the document. Along with this, you get `todo.setValue` and
       # {{ todo.description }}
       <Badge>{{ todo.status }}</Badge>
     </div>
-    <Button @click="todo.setValue.submit({ status: 'Closed' })">
-      Mark as Closed
-    </Button>
-    <Button @click="todo.sendEmail.submit({ email: todo.owner })">
-      Send email
-    </Button>
+    <Button @click="todo.setValue.submit({ status: 'Closed' })"> Mark as Closed </Button>
+    <Button @click="todo.sendEmail.submit({ email: todo.owner })"> Send email </Button>
   </div>
 </template>
 <script setup>
diff --git a/docs/content/docs/data-fetching/list-resource.md b/docs/content/docs/data-fetching/list-resource.md
index 31fa7ab58..819fc3f05 100644
--- a/docs/content/docs/data-fetching/list-resource.md
+++ b/docs/content/docs/data-fetching/list-resource.md
@@ -13,11 +13,7 @@ backend so there is no need to specify the url. Instead you only define
 ```vue
 <template>
   <div class="space-y-4">
-    <div
-      class="flex items-center justify-between"
-      v-for="todo in todos.data"
-      :key="todo.name"
-    >
+    <div class="flex items-center justify-between" v-for="todo in todos.data" :key="todo.name">
       <div>
         {{ todo.description }}
       </div>
diff --git a/docs/content/docs/design-system/[token].paths.ts b/docs/content/docs/design-system/[token].paths.ts
index 356bcbb51..4b568ee37 100644
--- a/docs/content/docs/design-system/[token].paths.ts
+++ b/docs/content/docs/design-system/[token].paths.ts
@@ -1,4 +1,5 @@
 import resolveConfig from 'tailwindcss/resolveConfig'
+
 import config from '../../../../tailwind.config'
 
 const designTokens = resolveConfig(config).theme
@@ -71,26 +72,20 @@ const fontSize = Object.entries(designTokens.fontSize).map(([name, value]) => ({
   value,
 }))
 
-const fontWeight = Object.entries(designTokens.fontWeight).map(
-  ([name, value]) => ({
-    name,
-    value,
-  }),
-)
-
-const letterSpacing = Object.entries(designTokens.letterSpacing).map(
-  ([name, value]) => ({
-    name,
-    value,
-  }),
-)
-
-const lineHeight = Object.entries(designTokens.lineHeight).map(
-  ([name, value]) => ({
-    name,
-    value,
-  }),
-)
+const fontWeight = Object.entries(designTokens.fontWeight).map(([name, value]) => ({
+  name,
+  value,
+}))
+
+const letterSpacing = Object.entries(designTokens.letterSpacing).map(([name, value]) => ({
+  name,
+  value,
+}))
+
+const lineHeight = Object.entries(designTokens.lineHeight).map(([name, value]) => ({
+  name,
+  value,
+}))
 
 // const dropShadow = Object.entries(designTokens.dropShadow).map(
 //   ([name, value]) => ({
@@ -99,12 +94,10 @@ const lineHeight = Object.entries(designTokens.lineHeight).map(
 //   }),
 // )
 
-const borderRadius = Object.entries(designTokens.borderRadius).map(
-  ([name, value]) => ({
-    name,
-    value,
-  }),
-)
+const borderRadius = Object.entries(designTokens.borderRadius).map(([name, value]) => ({
+  name,
+  value,
+}))
 
 export default {
   paths() {
diff --git a/docs/content/docs/getting-started.md b/docs/content/docs/getting-started.md
index 1bc717e94..01af5145b 100644
--- a/docs/content/docs/getting-started.md
+++ b/docs/content/docs/getting-started.md
@@ -10,7 +10,7 @@ You can quickly setup `frappe-ui` using
 you already have a Frappe app for which you want to build a frontend you can
 start with **Step 2**.
 
-###  Create your Frappe app
+### Create your Frappe app
 
 ```sh
 bench new-app todo
diff --git a/docs/content/docs/other/directives.md b/docs/content/docs/other/directives.md
index c65960c02..d28a4091f 100644
--- a/docs/content/docs/other/directives.md
+++ b/docs/content/docs/other/directives.md
@@ -46,10 +46,7 @@ and the second parameter to the function is the
 <template>
   <pre>visible: {{ visible }}</pre>
   <pre>intersectionRatio: {{ intersectionRatio }}</pre>
-  <div
-    class="mt-20 h-20 w-full rounded-lg bg-gray-100 p-8"
-    v-visibility="onVisibilityChange"
-  >
+  <div class="mt-20 h-20 w-full rounded-lg bg-gray-100 p-8" v-visibility="onVisibilityChange">
     <pre>target element</pre>
   </div>
 </template>
diff --git a/docs/css/shiki.css b/docs/css/shiki.css
index c8336bc84..04d3488b2 100644
--- a/docs/css/shiki.css
+++ b/docs/css/shiki.css
@@ -178,4 +178,3 @@
   --shiki-dark: #73daca;
   --shiki-light: #6f42c1;
 }
-
diff --git a/docs/css/style.css b/docs/css/style.css
index 281937f91..6acf24996 100644
--- a/docs/css/style.css
+++ b/docs/css/style.css
@@ -43,7 +43,7 @@ code {
       border-color 0.25s ease 0s,
       background-color 0.25s ease 0s,
       opacity 0.25s ease 0s;
-    @apply absolute top-0 right-2 w-9 h-9 bg-inherit;
+    @apply absolute right-2 top-0 h-9 w-9 bg-inherit;
   }
 
   .copied {
@@ -52,12 +52,12 @@ code {
 }
 
 .shiki {
-  @apply max-h-[500px] w-full overflow-auto leading-relaxed rounded;
-  @apply !p-5 !py-4 !bg-surface-gray-1 dark:!bg-transparent dark:border;
+  @apply max-h-[500px] w-full overflow-auto rounded leading-relaxed;
+  @apply !bg-surface-gray-1 !p-5 !py-4 dark:border dark:!bg-transparent;
 
   font-family: monospace;
   .line-number {
-    @apply text-gray-500 pr-3 select-none;
+    @apply select-none pr-3 text-gray-500;
   }
 
   .highlighted {
@@ -69,7 +69,7 @@ code {
   color: var(--shiki-light, inherit);
 }
 
-[data-theme='dark']  .shiki span {
+[data-theme='dark'] .shiki span {
   color: var(--shiki-dark, inherit);
 }
 
@@ -139,7 +139,7 @@ code {
 /* doc typography */
 .docs {
   code:not(pre code) {
-    @apply text-sm rounded-sm bg-surface-gray-3 dark:bg-surface-gray-2 p-0.5 px-1;
+    @apply rounded-sm bg-surface-gray-3 p-0.5 px-1 text-sm dark:bg-surface-gray-2;
   }
 }
 
diff --git a/docs/meta/Alert.md b/docs/meta/Alert.md
index e71aa53fb..bc1ed6fe6 100644
--- a/docs/meta/Alert.md
+++ b/docs/meta/Alert.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Alert" :data='[
   {
     "name": "title",
@@ -44,10 +45,11 @@
     "type": "boolean",
     "default": "true"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "icon",
     "description": "Custom icon shown before the content",
@@ -63,10 +65,11 @@
     "description": "Footer content shown at the bottom of the alert",
     "type": "any"
   }
-]'/> 
+]'/>
 
-## Emit Events 
- <EmitsTable :data='[
+## Emit Events
+
+<EmitsTable :data='[
   {
     "name": "update:modelValue",
     "description": "",
@@ -77,5 +80,4 @@
     "description": "",
     "type": "any[]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Autocomplete.md b/docs/meta/Autocomplete.md
index c20ef6515..a66b8d917 100644
--- a/docs/meta/Autocomplete.md
+++ b/docs/meta/Autocomplete.md
@@ -4,8 +4,10 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
-## Slots 
- <SlotsTable :data='[
+
+## Slots
+
+<SlotsTable :data='[
   {
     "name": "target",
     "description": "",
@@ -36,5 +38,4 @@
     "description": "",
     "type": "{ togglePopover: () => void; }"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Avatar.md b/docs/meta/Avatar.md
index 7e24764f5..021b6de4d 100644
--- a/docs/meta/Avatar.md
+++ b/docs/meta/Avatar.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Avatar" :data='[
   {
     "name": "image",
@@ -31,10 +32,11 @@
     "type": "\"circle\" | \"square\"",
     "default": "\"circle\""
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "default",
     "description": "Custom content shown inside the avatar (icon / initials replacement)",
@@ -45,5 +47,4 @@
     "description": "Small indicator shown at the bottom-right of the avatar",
     "type": "any"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Badge.md b/docs/meta/Badge.md
index 09529ac05..98fa23585 100644
--- a/docs/meta/Badge.md
+++ b/docs/meta/Badge.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Badge" :data='[
   {
     "name": "theme",
@@ -32,10 +33,11 @@
     "required": false,
     "type": "string | number | Label"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "prefix",
     "description": "Content shown before the badge label",
@@ -51,5 +53,4 @@
     "description": "Content shown after the badge label",
     "type": "any"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Breadcrumbs.md b/docs/meta/Breadcrumbs.md
index 1487fd4d4..5973fe220 100644
--- a/docs/meta/Breadcrumbs.md
+++ b/docs/meta/Breadcrumbs.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Breadcrumbs" :data='[
   {
     "name": "items",
@@ -11,10 +12,11 @@
     "required": true,
     "type": "BreadcrumbItem[]"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "prefix",
     "description": "Content shown before each breadcrumb label",
@@ -25,5 +27,4 @@
     "description": "Content shown after each breadcrumb label",
     "type": "{ item: BreadcrumbItem; }"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Button.md b/docs/meta/Button.md
index 645e27ef9..5851e6fdf 100644
--- a/docs/meta/Button.md
+++ b/docs/meta/Button.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Button" :data='[
   {
     "name": "theme",
@@ -95,10 +96,11 @@
     "type": "\"button\" | \"submit\" | \"reset\"",
     "default": "\"button\""
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "prefix",
     "description": "Content shown before the button label (left icon / custom content)",
@@ -119,5 +121,4 @@
     "description": "Content shown after the button label (right icon / custom content)",
     "type": "any"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Checkbox.md b/docs/meta/Checkbox.md
index 7a909235e..34620c8f8 100644
--- a/docs/meta/Checkbox.md
+++ b/docs/meta/Checkbox.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Checkbox" :data='[
   {
     "name": "size",
@@ -43,5 +44,4 @@
     "required": false,
     "type": "string"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/CircularProgressBar.md b/docs/meta/CircularProgressBar.md
index 73bad7271..ddac972ec 100644
--- a/docs/meta/CircularProgressBar.md
+++ b/docs/meta/CircularProgressBar.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="CircularProgressBar" :data='[
   {
     "name": "step",
@@ -54,5 +55,4 @@
     "type": "string",
     "default": "\"lightgreen\""
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Combobox.md b/docs/meta/Combobox.md
index d3aca82eb..422545422 100644
--- a/docs/meta/Combobox.md
+++ b/docs/meta/Combobox.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Combobox" :data='[
   {
     "name": "variant",
@@ -55,19 +56,21 @@
     "required": false,
     "type": "\"start\" | \"center\" | \"end\""
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "prefix",
     "description": "Custom content rendered before the input (left side)",
     "type": "any"
   }
-]'/> 
+]'/>
 
-## Emit Events 
- <EmitsTable :data='[
+## Emit Events
+
+<EmitsTable :data='[
   {
     "name": "update:modelValue",
     "description": "",
@@ -93,5 +96,4 @@
     "description": "",
     "type": "[]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/DatePicker.md b/docs/meta/DatePicker.md
index b7ff7c784..348432a41 100644
--- a/docs/meta/DatePicker.md
+++ b/docs/meta/DatePicker.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="DatePicker" :data='[
   {
     "name": "value",
@@ -93,10 +94,11 @@
     "type": "boolean",
     "default": "true"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "target",
     "description": "",
@@ -112,10 +114,11 @@
     "description": "",
     "type": "{ togglePopover: () => void; isOpen: boolean; displayLabel: string; inputValue: string; }"
   }
-]'/> 
+]'/>
 
-## Emit Events 
- <EmitsTable :data='[
+## Emit Events
+
+<EmitsTable :data='[
   {
     "name": "update:modelValue",
     "description": "",
@@ -126,5 +129,4 @@
     "description": "",
     "type": "[value: string]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Dialog.md b/docs/meta/Dialog.md
index 390d6a33a..10a11e055 100644
--- a/docs/meta/Dialog.md
+++ b/docs/meta/Dialog.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Dialog" :data='[
   {
     "name": "modelValue",
@@ -25,10 +26,11 @@
     "type": "boolean",
     "default": "false"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "body",
     "description": "Main body content of the dialog, overrides body-header and body-content",
@@ -54,10 +56,11 @@
     "description": "Actions section at the bottom of the dialog; exposes `{ close }`",
     "type": "{ close: () => void; }"
   }
-]'/> 
+]'/>
 
-## Emit Events 
- <EmitsTable :data='[
+## Emit Events
+
+<EmitsTable :data='[
   {
     "name": "update:modelValue",
     "description": "",
@@ -73,5 +76,4 @@
     "description": "",
     "type": "[]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Divider.md b/docs/meta/Divider.md
index 4b7464151..92eaec992 100644
--- a/docs/meta/Divider.md
+++ b/docs/meta/Divider.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Divider" :data='[
   {
     "name": "orientation",
@@ -31,5 +32,4 @@
     "required": false,
     "type": "DividerAction"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Dropdown.md b/docs/meta/Dropdown.md
index f184a7237..fa2a0a172 100644
--- a/docs/meta/Dropdown.md
+++ b/docs/meta/Dropdown.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Dropdown" :data='[
   {
     "name": "button",
@@ -39,10 +40,11 @@
     "type": "number",
     "default": "4"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "default",
     "description": "Default slot for custom trigger content (receives `open`, `close`, and extra attrs)",
@@ -53,5 +55,4 @@
     "description": "Custom rendering for each dropdown item (receives `item` and `close`)",
     "type": "{ item: DropdownOption; close: () => void; }"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/ErrorMessage.md b/docs/meta/ErrorMessage.md
index 54f2d80ae..56c758b4a 100644
--- a/docs/meta/ErrorMessage.md
+++ b/docs/meta/ErrorMessage.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="ErrorMessage" :data='[
   {
     "name": "message",
@@ -11,5 +12,4 @@
     "required": false,
     "type": "string | Error"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/FormControl.md b/docs/meta/FormControl.md
index 1e5fd88b8..d4cf74132 100644
--- a/docs/meta/FormControl.md
+++ b/docs/meta/FormControl.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="FormControl" :data='[
   {
     "name": "label",
@@ -44,10 +45,11 @@
     "required": false,
     "type": "boolean"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "prefix",
     "description": "Custom content rendered before the input (prefix icon/content)",
@@ -73,5 +75,4 @@
     "description": "Default slot override for full input rendering",
     "type": "any"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/MonthPicker.md b/docs/meta/MonthPicker.md
index f22add470..240fb4fbc 100644
--- a/docs/meta/MonthPicker.md
+++ b/docs/meta/MonthPicker.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="MonthPicker" :data='[
   {
     "name": "placeholder",
@@ -25,14 +26,14 @@
     "type": "String",
     "default": "\"\""
   }
-]'/> 
+]'/>
+
+## Emit Events
 
-## Emit Events 
- <EmitsTable :data='[
+<EmitsTable :data='[
   {
     "name": "update:modelValue",
     "description": "",
     "type": "[value: String]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/MultiSelect.md b/docs/meta/MultiSelect.md
index 4b1246983..0b7ab0e79 100644
--- a/docs/meta/MultiSelect.md
+++ b/docs/meta/MultiSelect.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="MultiSelect" :data='[
   {
     "name": "placeholder",
@@ -43,10 +44,11 @@
     "type": "String[]",
     "default": "[]"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "option",
     "description": "Rendered for each option in the dropdown. Receives the option object.",
@@ -57,14 +59,14 @@
     "description": "Footer slot at the bottom of the dropdown. Receives helper functions `clearAll` and `selectAll`.",
     "type": "{ clearAll: () => void; selectAll: () => void; }"
   }
-]'/> 
+]'/>
 
-## Emit Events 
- <EmitsTable :data='[
+## Emit Events
+
+<EmitsTable :data='[
   {
     "name": "update:modelValue",
     "description": "",
     "type": "[value: String[]]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Password.md b/docs/meta/Password.md
index dcdeb4dfd..6ca90ace5 100644
--- a/docs/meta/Password.md
+++ b/docs/meta/Password.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Password" :data='[
   {
     "name": "modelValue",
@@ -17,14 +18,14 @@
     "required": false,
     "type": "string | null"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "prefix",
     "description": "Content shown before the input field (left icon / custom content)",
     "type": "any"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Popover.md b/docs/meta/Popover.md
index 20924b737..320bd1251 100644
--- a/docs/meta/Popover.md
+++ b/docs/meta/Popover.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Popover" :data='[
   {
     "name": "show",
@@ -73,10 +74,11 @@
     "required": false,
     "type": "number"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "target",
     "description": "Content of the trigger/anchor element",
@@ -92,10 +94,11 @@
     "description": "Inner content inside the default body container",
     "type": "{ togglePopover: () => void; updatePosition: () => void; open: () => void; close: () => void; isOpen"
   }
-]'/> 
+]'/>
 
-## Emit Events 
- <EmitsTable :data='[
+## Emit Events
+
+<EmitsTable :data='[
   {
     "name": "open",
     "description": "",
@@ -111,5 +114,4 @@
     "description": "",
     "type": "[value: boolean]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Progress.md b/docs/meta/Progress.md
index 746ce73a7..e8aeca1c4 100644
--- a/docs/meta/Progress.md
+++ b/docs/meta/Progress.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Progress" :data='[
   {
     "name": "value",
@@ -46,14 +47,14 @@
     "type": "number",
     "default": "6"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "hint",
     "description": "Custom content for the hint area (usually displays the progress value). \nIf not provided, defaults to showing `props.value` followed by `%`.",
     "type": "any"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Rating.md b/docs/meta/Rating.md
index b2e37be95..1413b57aa 100644
--- a/docs/meta/Rating.md
+++ b/docs/meta/Rating.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Rating" :data='[
   {
     "name": "modelValue",
@@ -39,14 +40,14 @@
     "type": "\"sm\" | \"md\" | \"lg\" | \"xl\"",
     "default": "\"md\""
   }
-]'/> 
+]'/>
+
+## Emit Events
 
-## Emit Events 
- <EmitsTable :data='[
+<EmitsTable :data='[
   {
     "name": "update:modelValue",
     "description": "",
     "type": "any[]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Select.md b/docs/meta/Select.md
index 2d7b59d7d..87bbad03e 100644
--- a/docs/meta/Select.md
+++ b/docs/meta/Select.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Select" :data='[
   {
     "name": "size",
@@ -50,10 +51,11 @@
     "required": false,
     "type": "SelectOption[]"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "prefix",
     "description": "Content rendered before the selected value (e.g., left icon or custom content)",
@@ -74,14 +76,14 @@
     "description": "Custom content at the bottom of the dropdown",
     "type": "any"
   }
-]'/> 
+]'/>
 
-## Emit Events 
- <EmitsTable :data='[
+## Emit Events
+
+<EmitsTable :data='[
   {
     "name": "update:modelValue",
     "description": "",
     "type": "[value: String | undefined]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Sidebar.md b/docs/meta/Sidebar.md
index f8bf1ad30..554271277 100644
--- a/docs/meta/Sidebar.md
+++ b/docs/meta/Sidebar.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Sidebar" :data='[
   {
     "name": "header",
@@ -30,10 +31,11 @@
     "type": "boolean",
     "default": "null"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "header-logo",
     "description": "",
@@ -49,14 +51,14 @@
     "description": "",
     "type": "{ isCollapsed: boolean; isMobile: boolean; }"
   }
-]'/> 
+]'/>
 
-## Emit Events 
- <EmitsTable :data='[
+## Emit Events
+
+<EmitsTable :data='[
   {
     "name": "update:collapsed",
     "description": "",
     "type": "[value: boolean]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Slider.md b/docs/meta/Slider.md
index ab82901e8..f5ff6ecfd 100644
--- a/docs/meta/Slider.md
+++ b/docs/meta/Slider.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Slider" :data='[
   {
     "name": "step",
@@ -33,14 +34,14 @@
     "type": "never[]",
     "default": "[]"
   }
-]'/> 
+]'/>
+
+## Emit Events
 
-## Emit Events 
- <EmitsTable :data='[
+<EmitsTable :data='[
   {
     "name": "update:modelValue",
     "description": "",
     "type": "[value: never[]]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Switch.md b/docs/meta/Switch.md
index 3c5ce0756..852d3bcaa 100644
--- a/docs/meta/Switch.md
+++ b/docs/meta/Switch.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Switch" :data='[
   {
     "name": "size",
@@ -53,10 +54,11 @@
     "type": "boolean",
     "default": "false"
   }
-]'/> 
+]'/>
+
+## Emit Events
 
-## Emit Events 
- <EmitsTable :data='[
+<EmitsTable :data='[
   {
     "name": "update:modelValue",
     "description": "",
@@ -67,5 +69,4 @@
     "description": "",
     "type": "[value: boolean]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Tabs.md b/docs/meta/Tabs.md
index a994971fb..081844c5c 100644
--- a/docs/meta/Tabs.md
+++ b/docs/meta/Tabs.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Tabs" :data='[
   {
     "name": "as",
@@ -30,10 +31,11 @@
     "type": "string | number",
     "default": "0"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "tab-item",
     "description": "Custom renderer for a tab trigger (icon + label / router-link).",
@@ -44,14 +46,14 @@
     "description": "Content rendered for each tab panel.",
     "type": "{ tab: { label: string; icon?: string | undefined; route?: string | undefined; }; }"
   }
-]'/> 
+]'/>
 
-## Emit Events 
- <EmitsTable :data='[
+## Emit Events
+
+<EmitsTable :data='[
   {
     "name": "update:modelValue",
     "description": "",
     "type": "[value: string | number]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/TextEditor.md b/docs/meta/TextEditor.md
index 2cc17c862..a9434dfd7 100644
--- a/docs/meta/TextEditor.md
+++ b/docs/meta/TextEditor.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="TextEditor" :data='[
   {
     "name": "content",
@@ -108,10 +109,11 @@
     "required": false,
     "type": "object"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "top",
     "description": "",
@@ -127,10 +129,11 @@
     "description": "",
     "type": "{ editor: { contentComponent: { uid: number; type: FunctionalComponent<{}, {}, any, {}> | { [x: stri"
   }
-]'/> 
+]'/>
 
-## Emit Events 
- <EmitsTable :data='[
+## Emit Events
+
+<EmitsTable :data='[
   {
     "name": "change",
     "description": "",
@@ -151,5 +154,4 @@
     "description": "",
     "type": "[editor: object]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/TextInput.md b/docs/meta/TextInput.md
index b611341a1..910baf490 100644
--- a/docs/meta/TextInput.md
+++ b/docs/meta/TextInput.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="TextInput" :data='[
   {
     "name": "type",
@@ -62,10 +63,11 @@
     "required": false,
     "type": "boolean"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "prefix",
     "description": "Content rendered before the input (left side)",
@@ -76,14 +78,14 @@
     "description": "Content rendered after the input (right side)",
     "type": "any"
   }
-]'/> 
+]'/>
 
-## Emit Events 
- <EmitsTable :data='[
+## Emit Events
+
+<EmitsTable :data='[
   {
     "name": "update:modelValue",
     "description": "",
     "type": "any[]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Textarea.md b/docs/meta/Textarea.md
index 01bd2f5c1..acd62f3ad 100644
--- a/docs/meta/Textarea.md
+++ b/docs/meta/Textarea.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Textarea" :data='[
   {
     "name": "size",
@@ -62,14 +63,14 @@
     "required": false,
     "type": "string"
   }
-]'/> 
+]'/>
+
+## Emit Events
 
-## Emit Events 
- <EmitsTable :data='[
+<EmitsTable :data='[
   {
     "name": "update:modelValue",
     "description": "",
     "type": "any[]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/TimePicker.md b/docs/meta/TimePicker.md
index 5773af846..886f5160c 100644
--- a/docs/meta/TimePicker.md
+++ b/docs/meta/TimePicker.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="TimePicker" :data='[
   {
     "name": "value",
@@ -103,10 +104,11 @@
     "type": "string",
     "default": "\"\""
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "prefix",
     "description": "Slot rendered before the input value.\nUseful for icons or indicators.",
@@ -117,10 +119,11 @@
     "description": "Slot rendered after the input value.\nExposes popover controls.",
     "type": "{ togglePopover: () => void; isOpen: boolean; }"
   }
-]'/> 
+]'/>
 
-## Emit Events 
- <EmitsTable :data='[
+## Emit Events
+
+<EmitsTable :data='[
   {
     "name": "update:modelValue",
     "description": "",
@@ -151,5 +154,4 @@
     "description": "",
     "type": "[invalid: boolean]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Toast.md b/docs/meta/Toast.md
index 21e57f507..42adcd056 100644
--- a/docs/meta/Toast.md
+++ b/docs/meta/Toast.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Toast" :data='[
   {
     "name": "open",
@@ -47,10 +48,11 @@
     "required": false,
     "type": "{ label: string; altText?: string; onClick: () => void; } | undefined"
   }
-]'/> 
+]'/>
+
+## Emit Events
 
-## Emit Events 
- <EmitsTable :data='[
+<EmitsTable :data='[
   {
     "name": "action",
     "description": "",
@@ -61,5 +63,4 @@
     "description": "",
     "type": "[value: boolean]"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Tooltip.md b/docs/meta/Tooltip.md
index 4daf6b84f..39ae159e8 100644
--- a/docs/meta/Tooltip.md
+++ b/docs/meta/Tooltip.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Tooltip" :data='[
   {
     "name": "text",
@@ -40,10 +41,11 @@
     "type": "boolean",
     "default": "false"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "default",
     "description": "Default trigger slot.\nWraps the element that the tooltip is attached to.",
@@ -59,5 +61,4 @@
     "description": "Slot for tooltip content text.\nUsed inside the default tooltip body.",
     "type": "any"
   }
-]'/> 
-
+]'/>
diff --git a/docs/meta/Tree.md b/docs/meta/Tree.md
index f4e7bec55..9f1f70326 100644
--- a/docs/meta/Tree.md
+++ b/docs/meta/Tree.md
@@ -4,6 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 </script>
+
 <PropsTable name="Tree" :data='[
   {
     "name": "node",
@@ -24,10 +25,11 @@
     "type": "TreeOptions",
     "default": "{\n    rowHeight: \"25px\",\n    indentWidth: \"20px\",\n    showIndentationGuides: true,\n    defaultCollapsed: true,\n}"
   }
-]'/> 
+]'/>
+
+## Slots
 
-## Slots 
- <SlotsTable :data='[
+<SlotsTable :data='[
   {
     "name": "node",
     "description": "Slot to fully override how a tree node renders",
@@ -43,5 +45,4 @@
     "description": "Slot to override only the node label/content",
     "type": "any"
   }
-]'/> 
-
+]'/>
diff --git a/docs/scripts/propsgen.ts b/docs/scripts/propsgen.ts
index ef7a45a8e..b8515f372 100644
--- a/docs/scripts/propsgen.ts
+++ b/docs/scripts/propsgen.ts
@@ -1,6 +1,6 @@
-import * as url from 'url'
-import path from 'path'
 import fs from 'fs'
+import path from 'path'
+import * as url from 'url'
 
 import type { MetaCheckerOptions } from 'vue-component-meta'
 import { createChecker } from 'vue-component-meta'
@@ -13,10 +13,7 @@ const checkerOptions: MetaCheckerOptions = {
   printer: { newLine: 1 },
 }
 
-const tsconfigChecker = createChecker(
-  path.join(__dirname, '../../tsconfig.json'),
-  checkerOptions,
-)
+const tsconfigChecker = createChecker(path.join(__dirname, '../../tsconfig.json'), checkerOptions)
 
 // test meta obj for single component
 // const componentPath = path.join(
@@ -30,12 +27,12 @@ const ParseTypeStr = (type: string) => {
   if (hasUndefined) {
     return type.replace(' | undefined', '').trim()
   }
-	return type
+  return type
 }
 
 const arrToStr = (arr) => JSON.stringify(arr, null, 2)
 
-const genMetaTable = (name:string, data) => {
+const genMetaTable = (name: string, data) => {
   let markupStr = `<!-- Auto Generated by scripts/propsgen.ts -->
 <script setup>
   import PropsTable from '@/components/Docs/PropsTable.vue'
@@ -91,7 +88,7 @@ list.forEach((x) => {
     const meta = tsconfigChecker.getComponentMeta(componentPath)
 
     const metaFilePath = path.join(__dirname, `../meta/${x}.md`)
-    const str = genMetaTable(x,meta)
+    const str = genMetaTable(x, meta)
     fs.writeFileSync(metaFilePath, str)
     console.log(`Generated ${x} meta`)
   } catch (e) {
diff --git a/docs/state.ts b/docs/state.ts
index fab8e6754..7e3fc6253 100644
--- a/docs/state.ts
+++ b/docs/state.ts
@@ -4,5 +4,5 @@ export const state = reactive({
   mobsidebar: false,
   mobnavbar: false,
   searchDialog: false,
-  sidebarList: []
+  sidebarList: [],
 })
diff --git a/frappe/Billing/SignupBanner.vue b/frappe/Billing/SignupBanner.vue
index dff9dade1..f01b06782 100644
--- a/frappe/Billing/SignupBanner.vue
+++ b/frappe/Billing/SignupBanner.vue
@@ -1,15 +1,15 @@
 <template>
   <div
     v-if="!isSidebarCollapsed"
-    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-white text-base"
+    class="flex flex-col gap-3 rounded-lg bg-surface-white px-3 py-2.5 text-base shadow-sm"
   >
     <div class="flex flex-col gap-1">
       <slot>
-        <div class="inline-flex gap-2 items-center font-medium">
+        <div class="inline-flex items-center gap-2 font-medium">
           <FeatherIcon class="h-4" name="info" />
           Loved the demo?
         </div>
-        <div class="text-ink-gray-7 text-p-sm">
+        <div class="text-p-sm text-ink-gray-7">
           {{ `Try ${appName} for free with a 14-day trial.` }}
         </div>
       </slot>
@@ -21,7 +21,7 @@
     </Button>
   </div>
   <Button v-else @click="signupNow">
-    <LightningIcon class="h-4 my-0.5 shrink-0" />
+    <LightningIcon class="my-0.5 h-4 shrink-0" />
   </Button>
 </template>
 <script setup>
diff --git a/frappe/Billing/TrialBanner.vue b/frappe/Billing/TrialBanner.vue
index e0dd21281..9a4cd9381 100644
--- a/frappe/Billing/TrialBanner.vue
+++ b/frappe/Billing/TrialBanner.vue
@@ -1,14 +1,14 @@
 <template>
   <div
     v-if="!isSidebarCollapsed && showBanner"
-    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-modal text-base"
+    class="flex flex-col gap-3 rounded-lg bg-surface-modal px-3 py-2.5 text-base shadow-sm"
   >
     <div class="flex flex-col gap-1">
-      <div class="inline-flex text-ink-gray-9 gap-2 items-center font-medium">
+      <div class="inline-flex items-center gap-2 font-medium text-ink-gray-9">
         <FeatherIcon class="h-4" name="info" />
         {{ trialTitle }}
       </div>
-      <div class="text-ink-gray-7 text-p-sm">
+      <div class="text-p-sm text-ink-gray-7">
         {{ trialMessage }}
       </div>
     </div>
@@ -19,15 +19,16 @@
     </Button>
   </div>
   <Button v-else-if="isSidebarCollapsed && showBanner" @click="upgradePlan">
-    <LightningIcon class="h-4 my-0.5 shrink-0" />
+    <LightningIcon class="my-0.5 h-4 shrink-0" />
   </Button>
 </template>
 <script setup>
+import { ref, computed } from 'vue'
+
 import LightningIcon from '../../icons/LightningIcon.vue'
-import FeatherIcon from '../../src/components/FeatherIcon.vue'
 import { Button } from '../../src/components/Button'
+import FeatherIcon from '../../src/components/FeatherIcon.vue'
 import { createResource } from '../../src/resources'
-import { ref, computed } from 'vue'
 
 const props = defineProps({
   isSidebarCollapsed: {
@@ -76,10 +77,7 @@ function calculateTrialEndDays(trialEndDate) {
 }
 
 function upgradePlan() {
-  window.open(
-    `${baseEndpoint.value}/dashboard/sites/${siteName.value}`,
-    '_blank',
-  )
+  window.open(`${baseEndpoint.value}/dashboard/sites/${siteName.value}`, '_blank')
   props.afterUpgrade?.()
 }
 </script>
diff --git a/frappe/DataImport/DataImport.vue b/frappe/DataImport/DataImport.vue
index 1d165fbf7..db2303240 100644
--- a/frappe/DataImport/DataImport.vue
+++ b/frappe/DataImport/DataImport.vue
@@ -1,19 +1,27 @@
 <template>
   <header
-		class="sticky flex items-center justify-between space-x-28 top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
-    >
-      <Breadcrumbs :items="breadcrumbs" />
-      <ImportSteps class="flex-1 hidden lg:flex" v-if="step != 'list'" :data="data" :step="step" @updateStep="updateStep" />
+    class="sticky top-0 z-10 flex items-center justify-between space-x-28 border-b bg-surface-white px-3 py-2.5 sm:px-5"
+  >
+    <Breadcrumbs :items="breadcrumbs" />
+    <ImportSteps
+      class="hidden flex-1 lg:flex"
+      v-if="step != 'list'"
+      :data="data"
+      :step="step"
+      @updateStep="updateStep"
+    />
   </header>
   <div>
-      <ImportSteps class="flex-1 lg:hidden w-[90%] mx-auto mt-5" v-if="step != 'list'" :data="data" :step="step" @updateStep="updateStep" />
-
-    <DataImportList
-      v-if="step === 'list'"
-      :dataImports="dataImports"
+    <ImportSteps
+      class="mx-auto mt-5 w-[90%] flex-1 lg:hidden"
+      v-if="step != 'list'"
+      :data="data"
+      :step="step"
       @updateStep="updateStep"
     />
 
+    <DataImportList v-if="step === 'list'" :dataImports="dataImports" @updateStep="updateStep" />
+
     <UploadStep
       v-else-if="step === 'upload'"
       :dataImports="dataImports"
@@ -36,21 +44,24 @@
       :dataImports="dataImports"
       :data="data as DataImport"
       :fields="fields"
-      :doctypeMap="doctypeMap as Record<string, { title: string; listRoute?: string; pageRoute?: string }>"
+      :doctypeMap="
+        doctypeMap as Record<string, { title: string; listRoute?: string; pageRoute?: string }>
+      "
       @updateStep="updateStep"
     />
   </div>
 </template>
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue'
-import type { DataImportProps, DataImport } from './types'
-import { createListResource, createResource } from '../../src/resources'
 import { useRoute } from 'vue-router'
+
 import Breadcrumbs from '../../src/components/Breadcrumbs/Breadcrumbs.vue'
+import { createListResource, createResource } from '../../src/resources'
 import DataImportList from './DataImportList.vue'
 import ImportSteps from './ImportSteps.vue'
 import MappingStep from './MappingStep.vue'
 import PreviewStep from './PreviewStep.vue'
+import type { DataImportProps, DataImport } from './types'
 import UploadStep from './UploadStep.vue'
 
 const route = useRoute()
@@ -59,7 +70,7 @@ const data = ref<DataImport | null>(null)
 
 const props = defineProps<Partial<DataImportProps>>()
 
-  const dataImports = createListResource({
+const dataImports = createListResource({
   doctype: 'Data Import',
   fields: [
     'name',
@@ -70,14 +81,14 @@ const props = defineProps<Partial<DataImportProps>>()
     'mute_emails',
     'import_file',
     'google_sheets_url',
-    'template_options'
+    'template_options',
   ],
   auto: true,
   orderBy: 'modified desc',
 })
 
 const fields = createResource({
-  url: "frappe.desk.form.load.getdoctype",
+  url: 'frappe.desk.form.load.getdoctype',
   makeParams: (values: { doctype: string }) => {
     return {
       doctype: values.doctype,
@@ -87,11 +98,8 @@ const fields = createResource({
   auto: false,
 })
 
-
 const updateData = () => {
-  data.value = dataImports.data?.find(
-    (di: DataImport) => di.name === props.importName,
-    ) || null
+  data.value = dataImports.data?.find((di: DataImport) => di.name === props.importName) || null
 }
 
 watch(
@@ -121,11 +129,14 @@ watch(
   { immediate: true },
 )
 
-watch(() => route.query, () => {
-  if (route.query.step == 'list') {
-    step.value = 'list'
-  }
-})
+watch(
+  () => route.query,
+  () => {
+    if (route.query.step == 'list') {
+      step.value = 'list'
+    }
+  },
+)
 
 const updateStep = (newStep: 'list' | 'upload' | 'map' | 'preview', newData: DataImport) => {
   step.value = newStep
@@ -143,11 +154,11 @@ const breadcrumbs = computed(() => {
   let crumbs = [
     {
       label: 'Data Import',
-      route: { 
-        name: 'DataImportList', 
+      route: {
+        name: 'DataImportList',
         query: {
-          step: 'list'
-        } 
+          step: 'list',
+        },
       },
     },
   ]
@@ -160,6 +171,4 @@ const breadcrumbs = computed(() => {
 
   return crumbs
 })
-
-
 </script>
diff --git a/frappe/DataImport/DataImportList.vue b/frappe/DataImport/DataImportList.vue
index c3ca00daf..040451922 100644
--- a/frappe/DataImport/DataImportList.vue
+++ b/frappe/DataImport/DataImportList.vue
@@ -1,116 +1,111 @@
 <template>
-    <div class="flex min-h-0 flex-col text-base py-5 w-[90%] lg:w-[700px] mx-auto">
-		<div class="flex items-center justify-between">
-			<div>
-				<div class="text-xl font-semibold mb-1 text-ink-gray-9">
-					Data Import
-				</div>
-				<div class="text-ink-gray-6 leading-5">
-					Import data into your system using CSV files.
-				</div>
-			</div>
-            <Button variant="solid" @click="showModal = true">
-                <template #prefix>
-                    <FeatherIcon name="plus" class="size-4 stroke-1.5" />
-                </template>
-                Import
-            </Button>
-		</div>
+  <div class="mx-auto flex min-h-0 w-[90%] flex-col py-5 text-base lg:w-[700px]">
+    <div class="flex items-center justify-between">
+      <div>
+        <div class="mb-1 text-xl font-semibold text-ink-gray-9">Data Import</div>
+        <div class="leading-5 text-ink-gray-6">Import data into your system using CSV files.</div>
+      </div>
+      <Button variant="solid" @click="showModal = true">
+        <template #prefix>
+          <FeatherIcon name="plus" class="stroke-1.5 size-4" />
+        </template>
+        Import
+      </Button>
+    </div>
 
-        <div class="flex items-center space-x-2 my-5">
-            <FormControl
-                v-model="search"
-                placeholder="Search imported files"
-                type="text"
-                class="flex-1"
-            />
-            <FormControl
-                v-model="importStatus"
-                type="select"
-                :options="importOptions"
-            />
-        </div>
+    <div class="my-5 flex items-center space-x-2">
+      <FormControl
+        v-model="search"
+        placeholder="Search imported files"
+        type="text"
+        class="flex-1"
+      />
+      <FormControl v-model="importStatus" type="select" :options="importOptions" />
+    </div>
 
-        <div v-if="dataImports.data?.length" class="overflow-y-scroll">
-            <div class="divide-y">
-                <div class="grid grid-cols-[75%,20%] lg:grid-cols-[85%,20%] items-center text-sm text-ink-gray-5 py-1.5 mx-2 my-0.5 px-1">
-                    <div>
-                        Name
-                    </div>
-                    <div class="pl-1">
-                        Status
-                    </div>
-                </div>
-                <div 
-                    v-for="dataImport in dataImports.data" 
-                    @click="() => redirectToImport(dataImport.name!)"
-                    class="grid grid-cols-[75%,20%] lg:grid-cols-[85%,20%] items-center cursor-pointer py-2.5 px-1 mx-2"
-                >
-                    <div class="space-y-1">
-                        <div class="text-ink-gray-7">
-                            {{ dataImport.reference_doctype }}
-                        </div>
-                        <div class="text-ink-gray-5">
-                            {{ dayjs(dataImport.creation).fromNow() }}
-                        </div>
-                    </div>
-                    <Badge :label="dataImport.status" :theme="getBadgeColor(dataImport.status) as BadgeProps['theme']" class="w-fit" />
-                </div>
+    <div v-if="dataImports.data?.length" class="overflow-y-scroll">
+      <div class="divide-y">
+        <div
+          class="mx-2 my-0.5 grid grid-cols-[75%,20%] items-center px-1 py-1.5 text-sm text-ink-gray-5 lg:grid-cols-[85%,20%]"
+        >
+          <div>Name</div>
+          <div class="pl-1">Status</div>
+        </div>
+        <div
+          v-for="dataImport in dataImports.data"
+          @click="() => redirectToImport(dataImport.name!)"
+          class="mx-2 grid cursor-pointer grid-cols-[75%,20%] items-center px-1 py-2.5 lg:grid-cols-[85%,20%]"
+        >
+          <div class="space-y-1">
+            <div class="text-ink-gray-7">
+              {{ dataImport.reference_doctype }}
             </div>
-            <div class="my-5 flex justify-center">
-                <Button v-if="props.dataImports.hasNextPage" @click="props.dataImports.next()">
-                    <template #prefix>
-                        <FeatherIcon name="refresh-cw" class="size-4 stroke-1.5" />
-                    </template>
-                    Load More
-                </Button>
+            <div class="text-ink-gray-5">
+              {{ dayjs(dataImport.creation).fromNow() }}
             </div>
+          </div>
+          <Badge
+            :label="dataImport.status"
+            :theme="getBadgeColor(dataImport.status) as BadgeProps['theme']"
+            class="w-fit"
+          />
         </div>
-        <div v-else class="text-sm italic text-ink-gray-5 mt-5">
-            No data imports found.
-        </div>
-        <Dialog
-            v-model="showModal"
-            :options="{
-                title: 'New Data Import',
-                actions: [{
-                    label: 'Continue',
-                    variant: 'solid',
-                    onClick({ close }) {
-                        createDataImport(close)
-                    }
-                }]
+      </div>
+      <div class="my-5 flex justify-center">
+        <Button v-if="props.dataImports.hasNextPage" @click="props.dataImports.next()">
+          <template #prefix>
+            <FeatherIcon name="refresh-cw" class="stroke-1.5 size-4" />
+          </template>
+          Load More
+        </Button>
+      </div>
+    </div>
+    <div v-else class="mt-5 text-sm italic text-ink-gray-5">No data imports found.</div>
+    <Dialog
+      v-model="showModal"
+      :options="{
+        title: 'New Data Import',
+        actions: [
+          {
+            label: 'Continue',
+            variant: 'solid',
+            onClick({ close }) {
+              createDataImport(close)
+            },
+          },
+        ],
+      }"
+    >
+      <template #body-content>
+        <div>
+          <Link
+            v-model="doctypeForImport"
+            doctype="DocType"
+            :filters="{
+              allow_import: 1,
             }"
-        >
-            <template #body-content>
-                <div>
-                    <Link 
-                        v-model="doctypeForImport"
-                        doctype="DocType"
-                        :filters="{
-                            'allow_import': 1
-                        }"
-                        label="Choose a Document Type to import"
-                    />
-                </div>
-            </template>
-        </Dialog>
-	</div>
+            label="Choose a Document Type to import"
+          />
+        </div>
+      </template>
+    </Dialog>
+  </div>
 </template>
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import type { DataImports, DataImport } from './types'
-import { dayjs } from "../../src/utils/dayjs"
-import { getBadgeColor } from "./dataImport"
+
 import Badge from '../../src/components/Badge/Badge.vue'
 import type { BadgeProps } from '../../src/components/Badge/types'
-import { toast } from "../../src/components/Toast/index"
 import Button from '../../src/components/Button/Button.vue'
 import Dialog from '../../src/components/Dialog/Dialog.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
 import FormControl from '../../src/components/FormControl/FormControl.vue'
-import Link from "../Link/Link.vue"
+import { toast } from '../../src/components/Toast/index'
+import { dayjs } from '../../src/utils/dayjs'
+import Link from '../Link/Link.vue'
+import { getBadgeColor } from './dataImport'
+import type { DataImports, DataImport } from './types'
 
 const search = ref('')
 const importStatus = ref('All')
@@ -120,53 +115,56 @@ const emit = defineEmits(['updateStep'])
 const router = useRouter()
 
 const props = defineProps<{
-    dataImports: DataImports
+  dataImports: DataImports
 }>()
 
 const importOptions = computed(() => {
-    const options = ["All", "Pending", "Success", "Partial Success", "Error", "Timed Out"]
-    return options.map(option => ({ label: option, value: option }))
+  const options = ['All', 'Pending', 'Success', 'Partial Success', 'Error', 'Timed Out']
+  return options.map((option) => ({ label: option, value: option }))
 })
 
 watch([search, importStatus], ([newSearch, newStatus]) => {
-    props.dataImports.update({
-        filters: [
-            newSearch ? [['name', 'like', `%${newSearch}%`]] : [],
-            newStatus !== 'All' ? [['status', '=', newStatus]] : [],
-        ].flat(),
-    })
-    props.dataImports.reload()
+  props.dataImports.update({
+    filters: [
+      newSearch ? [['name', 'like', `%${newSearch}%`]] : [],
+      newStatus !== 'All' ? [['status', '=', newStatus]] : [],
+    ].flat(),
+  })
+  props.dataImports.reload()
 })
 
 const createDataImport = (close: () => void) => {
-    props.dataImports.insert.submit({
-        reference_doctype: doctypeForImport.value!,
-        import_type: 'Insert New Records',
-        mute_emails: true,
-        status: 'Pending',
-    }, {
-        onSuccess(data: DataImport) {
-            router.replace({
-                name: 'DataImport',
-                params: {
-                    importName: data.name
-                },
-            })
-            close()
-        },
-        onError(error: any) {
-            console.error(error)
-            toast.error(error.messages?.[0] || error)
-        }
-    })
+  props.dataImports.insert.submit(
+    {
+      reference_doctype: doctypeForImport.value!,
+      import_type: 'Insert New Records',
+      mute_emails: true,
+      status: 'Pending',
+    },
+    {
+      onSuccess(data: DataImport) {
+        router.replace({
+          name: 'DataImport',
+          params: {
+            importName: data.name,
+          },
+        })
+        close()
+      },
+      onError(error: any) {
+        console.error(error)
+        toast.error(error.messages?.[0] || error)
+      },
+    },
+  )
 }
 
 const redirectToImport = (importName: string) => {
-    router.replace({
-        name: 'DataImport',
-        params: {
-            importName
-        },
-    })
+  router.replace({
+    name: 'DataImport',
+    params: {
+      importName,
+    },
+  })
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frappe/DataImport/ImportSteps.vue b/frappe/DataImport/ImportSteps.vue
index d246d431c..4f856a28e 100644
--- a/frappe/DataImport/ImportSteps.vue
+++ b/frappe/DataImport/ImportSteps.vue
@@ -1,114 +1,137 @@
 <template>
-    <div class="flex items-center space-x-3 lg:space-x-10 text-xs lg:text-base">
-        <div class="flex items-center space-x-1 lg:space-x-2 text-ink-gray-5 cursor-pointer" 
+  <div class="flex items-center space-x-3 text-xs lg:space-x-10 lg:text-base">
+    <div
+      class="flex cursor-pointer items-center space-x-1 text-ink-gray-5 lg:space-x-2"
+      :class="{
+        'font-semibold text-ink-gray-9': onUploadStep,
+      }"
+      @click="emit('updateStep', 'upload', { ...data })"
+    >
+      <FeatherIcon
+        v-if="uploadStepCompleted"
+        name="check"
+        class="size-5 rounded-[5px] border p-0.5 text-sm"
         :class="{
-            'text-ink-gray-9 font-semibold': onUploadStep
+          'bg-surface-gray-7 text-ink-white': onUploadStep,
         }"
-        @click="emit('updateStep', 'upload', { ...data })"
-        >
-            <FeatherIcon v-if="uploadStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onUploadStep,
-            }"/>
-            <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onUploadStep,
-            }">
-                <span>
-                    1
-                </span>
-            </div>
-            <div>
-                Upload File
-            </div>
-        </div>
-        <div class="flex items-center space-x-1 lg:space-x-2 text-ink-gray-5" 
+      />
+      <div
+        v-else
+        class="rounded-[5px] border px-1.5 py-0.5 text-sm"
         :class="{
-            'text-ink-gray-9 font-semibold': onMapStep,
-            'cursor-pointer': uploadStepCompleted
+          'bg-surface-gray-7 text-ink-white': onUploadStep,
         }"
-        @click="moveToMapStep()"
-        >
-            <FeatherIcon v-if="mapStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onMapStep,
-            }"/>
-            <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onMapStep,
-            }">
-                <span>
-                    2
-                </span>
-            </div>
-            <div>
-                Map Data
-            </div>
-        </div>
-        <div class="flex items-center space-x-1 lg:space-x-2 text-ink-gray-5" 
+      >
+        <span> 1 </span>
+      </div>
+      <div>Upload File</div>
+    </div>
+    <div
+      class="flex items-center space-x-1 text-ink-gray-5 lg:space-x-2"
+      :class="{
+        'font-semibold text-ink-gray-9': onMapStep,
+        'cursor-pointer': uploadStepCompleted,
+      }"
+      @click="moveToMapStep()"
+    >
+      <FeatherIcon
+        v-if="mapStepCompleted"
+        name="check"
+        class="size-5 rounded-[5px] border p-0.5 text-sm"
+        :class="{
+          'bg-surface-gray-7 text-ink-white': onMapStep,
+        }"
+      />
+      <div
+        v-else
+        class="rounded-[5px] border px-1.5 py-0.5 text-sm"
         :class="{
-            'text-ink-gray-9 font-semibold': onPreviewStep,
-            'cursor-pointer': uploadStepCompleted
+          'bg-surface-gray-7 text-ink-white': onMapStep,
         }"
-        @click="moveToPreviewStep()"
-        >
-            <FeatherIcon v-if="previewStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onPreviewStep,
-            }"/>
-            <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onPreviewStep,
-            }">
-                <span>
-                    3
-                </span>
-            </div>
-            <div>
-                Review & Import
-            </div>
-        </div>
+      >
+        <span> 2 </span>
+      </div>
+      <div>Map Data</div>
     </div>
+    <div
+      class="flex items-center space-x-1 text-ink-gray-5 lg:space-x-2"
+      :class="{
+        'font-semibold text-ink-gray-9': onPreviewStep,
+        'cursor-pointer': uploadStepCompleted,
+      }"
+      @click="moveToPreviewStep()"
+    >
+      <FeatherIcon
+        v-if="previewStepCompleted"
+        name="check"
+        class="size-5 rounded-[5px] border p-0.5 text-sm"
+        :class="{
+          'bg-surface-gray-7 text-ink-white': onPreviewStep,
+        }"
+      />
+      <div
+        v-else
+        class="rounded-[5px] border px-1.5 py-0.5 text-sm"
+        :class="{
+          'bg-surface-gray-7 text-ink-white': onPreviewStep,
+        }"
+      >
+        <span> 3 </span>
+      </div>
+      <div>Review & Import</div>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
-import type { DataImport } from './types'
 import { computed } from 'vue'
+
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
+import type { DataImport } from './types'
 
 const emit = defineEmits(['updateStep'])
 
 const props = defineProps<{
-    data: DataImport | null
-    step: 'list' | 'upload' | 'map' | 'preview'
+  data: DataImport | null
+  step: 'list' | 'upload' | 'map' | 'preview'
 }>()
 
 const onUploadStep = computed(() => {
-    return props.step === 'upload'
+  return props.step === 'upload'
 })
 
 const uploadStepCompleted = computed(() => {
-    return props.data?.import_file || props.data?.google_sheets_url
+  return props.data?.import_file || props.data?.google_sheets_url
 })
 
 const onMapStep = computed(() => {
-    return props.step === 'map'
+  return props.step === 'map'
 })
 
 const mapStepCompleted = computed(() => {
-    return props.data && props.data?.template_options && JSON.parse(props.data.template_options).column_to_field_map
+  return (
+    props.data &&
+    props.data?.template_options &&
+    JSON.parse(props.data.template_options).column_to_field_map
+  )
 })
 
 const onPreviewStep = computed(() => {
-    return props.step === 'preview'
+  return props.step === 'preview'
 })
 
 const previewStepCompleted = computed(() => {
-    return props.data?.status === 'Success'
+  return props.data?.status === 'Success'
 })
 
 const moveToMapStep = () => {
-    if (uploadStepCompleted.value) {
-        emit('updateStep', 'map', { ...props.data })
-    }
+  if (uploadStepCompleted.value) {
+    emit('updateStep', 'map', { ...props.data })
+  }
 }
 
 const moveToPreviewStep = () => {
-    if (uploadStepCompleted.value) {
-        emit('updateStep', 'preview', { ...props.data })
-    }
+  if (uploadStepCompleted.value) {
+    emit('updateStep', 'preview', { ...props.data })
+  }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frappe/DataImport/MappingStep.vue b/frappe/DataImport/MappingStep.vue
index 9724fbd8a..90cae7f79 100644
--- a/frappe/DataImport/MappingStep.vue
+++ b/frappe/DataImport/MappingStep.vue
@@ -1,187 +1,181 @@
 <template>
-    <div class="w-[85%] lg:w-[700px] mx-auto py-12 space-y-8 text-base">
-       <div class="flex justify-between">
-            <div class="space-y-2">
-                <div class="text-lg font-semibold text-ink-gray-9">
-                    <span>
-                        Map Data
-                    </span>
-                    <Badge v-if="data?.status" :theme="getBadgeColor(data?.status)">
-                        {{ data?.status }}
-                    </Badge>
-                </div>
-                <div class="leading-5 text-ink-gray-7">
-                    Change the mapping of columns from your file to fields in the system
-                </div>
-            </div>
-            
-            <div class="flex flex-col lg:flex-row space-y-2 lg:space-x-2 lg:space-y-0">
-                <Button v-if="mappingUpdated" label="Reset Mapping" @click="resetMapping" />
-                <Button label="Continue" variant="solid" @click="$emit('updateStep', 'preview')" />
-            </div>
-       </div>
-
-       <div v-if="Object.keys(columnMappings).length" class="border rounded-md space-y-8">
-            <div class="grid grid-cols-2 text-ink-gray-5 border-b py-2 px-4">
-                <div>
-                    Fields in File
-                </div>
-                <div>
-                    Fields in System
-                </div>
-            </div>
-            <div class="grid grid-cols-2 py-2 px-4 gap-y-8">
-                <template v-for="i in columnsFromFile.length" :key="i">
-                    <div class="text-ink-gray-7">{{ columnsFromFile[i - 1] }}</div>
-                    <Autocomplete
-                        :model-value="columnMappings[columnsFromFile[i - 1]]"
-                        :options="columnsFromSystem"
-                        placeholder="Select field" 
-                        @update:model-value="(val: any) => updateColumnMappings(i, val)"
-                    />
-                </template>
-            </div>
+  <div class="mx-auto w-[85%] space-y-8 py-12 text-base lg:w-[700px]">
+    <div class="flex justify-between">
+      <div class="space-y-2">
+        <div class="text-lg font-semibold text-ink-gray-9">
+          <span> Map Data </span>
+          <Badge v-if="data?.status" :theme="getBadgeColor(data?.status)">
+            {{ data?.status }}
+          </Badge>
         </div>
+        <div class="leading-5 text-ink-gray-7">
+          Change the mapping of columns from your file to fields in the system
+        </div>
+      </div>
+
+      <div class="flex flex-col space-y-2 lg:flex-row lg:space-x-2 lg:space-y-0">
+        <Button v-if="mappingUpdated" label="Reset Mapping" @click="resetMapping" />
+        <Button label="Continue" variant="solid" @click="$emit('updateStep', 'preview')" />
+      </div>
+    </div>
+
+    <div v-if="Object.keys(columnMappings).length" class="space-y-8 rounded-md border">
+      <div class="grid grid-cols-2 border-b px-4 py-2 text-ink-gray-5">
+        <div>Fields in File</div>
+        <div>Fields in System</div>
+      </div>
+      <div class="grid grid-cols-2 gap-y-8 px-4 py-2">
+        <template v-for="i in columnsFromFile.length" :key="i">
+          <div class="text-ink-gray-7">{{ columnsFromFile[i - 1] }}</div>
+          <Autocomplete
+            :model-value="columnMappings[columnsFromFile[i - 1]]"
+            :options="columnsFromSystem"
+            placeholder="Select field"
+            @update:model-value="(val: any) => updateColumnMappings(i, val)"
+          />
+        </template>
+      </div>
     </div>
+  </div>
 </template>
 <script setup lang="ts">
-import type { DataImport, DataImports } from './types';
+import { computed, nextTick, onMounted, ref } from 'vue'
+
+import Autocomplete from '../../src/components/Autocomplete/Autocomplete.vue'
+import Badge from '../../src/components/Badge/Badge.vue'
+import Button from '../../src/components/Button/Button.vue'
+import { toast } from '../../src/components/Toast/index'
 import { fieldsToIgnore, getBadgeColor, getPreviewData } from './dataImport'
-import { computed, nextTick, onMounted, ref } from 'vue';
-import { toast } from "../../src/components/Toast/index"
-import Autocomplete from '../../src/components/Autocomplete/Autocomplete.vue';
-import Badge from '../../src/components/Badge/Badge.vue';
-import Button from '../../src/components/Button/Button.vue';
+import type { DataImport, DataImports } from './types'
 
-const previewData = ref<any>(null);
+const previewData = ref<any>(null)
 const emit = defineEmits(['updateStep'])
-const columnMappings = ref<Record<string, string>>({});
-const mappingUpdated = ref(false);
+const columnMappings = ref<Record<string, string>>({})
+const mappingUpdated = ref(false)
 
 const props = defineProps<{
-    dataImports: DataImports
-    data: DataImport
-    fields: any
+  dataImports: DataImports
+  data: DataImport
+  fields: any
 }>()
 
 onMounted(async () => {
-    previewData.value = await getPreviewData(props.data.name!, props.data.import_file, props.data.google_sheets_url);
-    initializeColumnMappings();
-});
+  previewData.value = await getPreviewData(
+    props.data.name!,
+    props.data.import_file,
+    props.data.google_sheets_url,
+  )
+  initializeColumnMappings()
+})
 
 const initializeColumnMappings = () => {
-    const mappings: Record<string, string> = {};
-    let columnToFieldMap = []
-    if (props.data?.template_options)
-        columnToFieldMap = JSON.parse(props.data?.template_options)?.["column_to_field_map"];
-
-        if (Object.keys(columnToFieldMap).length > 0)
-            mappingUpdated.value = true;
-
-        columnsFromFile.value.forEach((col: string, index: number) => {
-        if (columnToFieldMap && columnToFieldMap[index])
-            mappings[col] = getMappedColumnName(columnToFieldMap[index]);
-        else
-            mappings[col] = col;
-    });
-
-    columnMappings.value = mappings;
+  const mappings: Record<string, string> = {}
+  let columnToFieldMap = []
+  if (props.data?.template_options)
+    columnToFieldMap = JSON.parse(props.data?.template_options)?.['column_to_field_map']
+
+  if (Object.keys(columnToFieldMap).length > 0) mappingUpdated.value = true
+
+  columnsFromFile.value.forEach((col: string, index: number) => {
+    if (columnToFieldMap && columnToFieldMap[index])
+      mappings[col] = getMappedColumnName(columnToFieldMap[index])
+    else mappings[col] = col
+  })
+
+  columnMappings.value = mappings
 }
 
 const getMappedColumnName = (fieldname: string) => {
-    const field = columnsFromSystem.value.find((f: any) => f.value == fieldname);
-    if (field)
-        return field.label;
-    return fieldname;
+  const field = columnsFromSystem.value.find((f: any) => f.value == fieldname)
+  if (field) return field.label
+  return fieldname
 }
 
 const updateColumnMappings = (index: number, value: any) => {
-    if (!value) return;
-    mappingUpdated.value = true;
-    let templateOptions = props.data?.template_options ? JSON.parse(props.data?.template_options) : {};
-    let columnToFieldMap = templateOptions["column_to_field_map"] || {};
-    columnToFieldMap[index - 1] = value.value;
-
-    props.dataImports.setValue.submit({
-        ...props.data,
-        template_options: JSON.stringify({
-            ...templateOptions,
-            column_to_field_map: columnToFieldMap
+  if (!value) return
+  mappingUpdated.value = true
+  let templateOptions = props.data?.template_options ? JSON.parse(props.data?.template_options) : {}
+  let columnToFieldMap = templateOptions['column_to_field_map'] || {}
+  columnToFieldMap[index - 1] = value.value
+
+  props.dataImports.setValue.submit(
+    {
+      ...props.data,
+      template_options: JSON.stringify({
+        ...templateOptions,
+        column_to_field_map: columnToFieldMap,
+      }),
+    },
+    {
+      onSuccess: (data: DataImport) => {
+        emit('updateStep', 'map', { ...data })
+        nextTick(() => {
+          initializeColumnMappings()
         })
-    }, {
-        onSuccess: (data: DataImport) => {
-            emit('updateStep', 'map', { ...data })
-            nextTick(() => {
-                initializeColumnMappings()
-            })
-        },
-        onError: (error: any) => {
-            toast.error(error.messages?.[0] || error)
-            console.error("Error updating column mappings:", error);
-        }
-    })
+      },
+      onError: (error: any) => {
+        toast.error(error.messages?.[0] || error)
+        console.error('Error updating column mappings:', error)
+      },
+    },
+  )
 }
 
 const columnsFromFile = computed(() => {
-    const columns: string[] = [];
-    previewData.value?.columns.forEach((col: any) => {
-        if (col.header_title != "Sr. No")
-            columns.push(col.header_title);
-    })
-    return columns;
+  const columns: string[] = []
+  previewData.value?.columns.forEach((col: any) => {
+    if (col.header_title != 'Sr. No') columns.push(col.header_title)
+  })
+  return columns
 })
 
 const columnsFromSystem = computed(() => {
   const parent = props.data!.reference_doctype
   const docs = props.fields.data?.docs || []
 
-  return docs
-    .map((doc: any) => {
-      const isParent = doc.name === parent
-
-      const columns = doc.fields
-        .filter((f: any) => !fieldsToIgnore.includes(f.fieldtype))
-        .map((f: any) => ({
-          value: f.fieldname,
-          label: isParent
-            ? f.label
-            : `${f.label} (${getChildTableName(parent, doc.name)})`,
-        }))
-
-      return [
-        { value: "name", label: "ID" },
-        ...columns,
-      ]
-    })
-    .flat()
+  return docs.flatMap((doc: any) => {
+    const isParent = doc.name === parent
+
+    const columns = doc.fields
+      .filter((f: any) => !fieldsToIgnore.includes(f.fieldtype))
+      .map((f: any) => ({
+        value: f.fieldname,
+        label: isParent ? f.label : `${f.label} (${getChildTableName(parent, doc.name)})`,
+      }))
+
+    return [{ value: 'name', label: 'ID' }, ...columns]
+  })
 })
 
 const resetMapping = () => {
-    let templateOptions = props.data?.template_options ? JSON.parse(props.data?.template_options) : {};
-    props.dataImports.setValue.submit({
-        ...props.data,
-        template_options: JSON.stringify({
-            ...templateOptions,
-            column_to_field_map: {}
+  let templateOptions = props.data?.template_options ? JSON.parse(props.data?.template_options) : {}
+  props.dataImports.setValue.submit(
+    {
+      ...props.data,
+      template_options: JSON.stringify({
+        ...templateOptions,
+        column_to_field_map: {},
+      }),
+    },
+    {
+      onSuccess: (data: DataImport) => {
+        emit('updateStep', 'map', { ...data })
+        nextTick(() => {
+          initializeColumnMappings()
         })
-    }, {
-        onSuccess: (data: DataImport) => {
-            emit('updateStep', 'map', { ...data })
-            nextTick(() => {
-                initializeColumnMappings()
-            })
-        },
-        onError: (error: any) => {
-            toast.error(error.messages?.[0] || error)
-            console.error("Error resetting column mappings:", error);
-        }
-    })
+      },
+      onError: (error: any) => {
+        toast.error(error.messages?.[0] || error)
+        console.error('Error resetting column mappings:', error)
+      },
+    },
+  )
 }
 
 const getChildTableName = (parent: string, child: string) => {
-    let parentFields = props.fields.data?.docs.find((doc: any) => doc.name == parent)?.fields || [];
-    
-    let childField = parentFields.filter((field: any) => field.options == child)[0]
-    return childField?.label || child;
+  let parentFields = props.fields.data?.docs.find((doc: any) => doc.name == parent)?.fields || []
+
+  let childField = parentFields.filter((field: any) => field.options == child)[0]
+  return childField?.label || child
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frappe/DataImport/PreviewStep.vue b/frappe/DataImport/PreviewStep.vue
index 1ed47084d..88cd44fa6 100644
--- a/frappe/DataImport/PreviewStep.vue
+++ b/frappe/DataImport/PreviewStep.vue
@@ -1,373 +1,370 @@
 <template>
-    <div class="text-base h-full flex flex-col w-[90%] lg:w-[700px] mx-auto py-12 space-y-10">
-        <div class="flex flex-col space-y-1">
-            <div class="flex items-center justify-between text-ink-gray-7">
-                <div class="flex items-center space-x-2 text-lg font-semibold text-ink-gray-9">
-                    <span>
-                        Review and Import
-                    </span>
-
-                    <Badge :theme="getBadgeColor(data.status)">
-                        {{ data.status }}
-                    </Badge>
-                </div>
-                <Button 
-                    v-if="data.status != 'Success'" 
-                    :label="data.status != 'Pending' ? 'Retry' : 'Import'" 
-                    variant="solid" @click="startImport" />
-                <Button v-else-if="listRoute" label="Done" @click="redirectToList()" />
-            </div>
-            <div class="leading-5 text-ink-gray-7">
-                Verify the data before starting the import process
-            </div>
+  <div class="mx-auto flex h-full w-[90%] flex-col space-y-10 py-12 text-base lg:w-[700px]">
+    <div class="flex flex-col space-y-1">
+      <div class="flex items-center justify-between text-ink-gray-7">
+        <div class="flex items-center space-x-2 text-lg font-semibold text-ink-gray-9">
+          <span> Review and Import </span>
+
+          <Badge :theme="getBadgeColor(data.status)">
+            {{ data.status }}
+          </Badge>
         </div>
+        <Button
+          v-if="data.status != 'Success'"
+          :label="data.status != 'Pending' ? 'Retry' : 'Import'"
+          variant="solid"
+          @click="startImport"
+        />
+        <Button v-else-if="listRoute" label="Done" @click="redirectToList()" />
+      </div>
+      <div class="leading-5 text-ink-gray-7">
+        Verify the data before starting the import process
+      </div>
+    </div>
 
-        <div v-if="mapping.length" class="space-y-2">
-            <div class="text-ink-gray-5 text-sm">
-                Column Mapping
-            </div>
-            <div class="border rounded-md bg-surface-gray-2 p-4 space-y-4 text-sm text-ink-gray-7">
-                <div v-for="map in mapping" class="grid grid-cols-[40%,10%,40%] lg:grid-cols-3 space-x-3 items-center">
-                    <div class="">
-                        {{ map[0] }}
-                    </div>
-                    <div class="flex justify-end">
-                        <FeatherIcon name="arrow-right" class="inline size-4 text-ink-gray-5" />
-                    </div>
-                    <div>
-                        {{ map[1] }}
-                    </div>
-                </div>
-            </div>
+    <div v-if="mapping.length" class="space-y-2">
+      <div class="text-sm text-ink-gray-5">Column Mapping</div>
+      <div class="space-y-4 rounded-md border bg-surface-gray-2 p-4 text-sm text-ink-gray-7">
+        <div
+          v-for="map in mapping"
+          class="grid grid-cols-[40%,10%,40%] items-center space-x-3 lg:grid-cols-3"
+        >
+          <div class="">
+            {{ map[0] }}
+          </div>
+          <div class="flex justify-end">
+            <FeatherIcon name="arrow-right" class="inline size-4 text-ink-gray-5" />
+          </div>
+          <div>
+            {{ map[1] }}
+          </div>
         </div>
+      </div>
+    </div>
 
-        <div v-if="warnings.length" class="space-y-2">
-            <div class="text-ink-gray-5 text-sm">
-                Warnings
-            </div>
-            <div class="rounded-md bg-surface-amber-2 p-2 space-y-2 text-xs">
-                <div v-for="warning in warnings" class="flex items-center space-x-2">
-                    <FeatherIcon name="alert-circle" class="size-3 text-ink-amber-3" />
-                    <div v-html="warning.message" class="text-ink-amber-3"></div>
-                </div>
-            </div>
+    <div v-if="warnings.length" class="space-y-2">
+      <div class="text-sm text-ink-gray-5">Warnings</div>
+      <div class="space-y-2 rounded-md bg-surface-amber-2 p-2 text-xs">
+        <div v-for="warning in warnings" class="flex items-center space-x-2">
+          <FeatherIcon name="alert-circle" class="size-3 text-ink-amber-3" />
+          <div v-html="warning.message" class="text-ink-amber-3"></div>
         </div>
+      </div>
+    </div>
 
-        <div v-if="preview?.data?.length" class="border rounded-md overflow-x-auto">
-            <table class="divide-y">
-                <thead class="rounded-t-md">
-                    <tr>
-                        <th
-                            v-for="column in previewColumns"
-                            :key="column.key"
-                            :style="{ minWidth: column.width, textAlign: column.align }"
-                            class="p-2 text-left text-sm text-ink-gray-5"
-                            :class="{
-                                'border-r': column.key != previewColumns[previewColumns.length -1].key,
-                                'w-full': column.key == previewColumns[previewColumns.length -1].key
-                            }"
-                        >
-                            {{ column.label }}
-                        </th>
-                    </tr>
-                </thead>
-                <tbody class="bg-surface-white divide-y divide-surface-gray-2">
-                    <tr v-for="(row, rowIndex) in previewData" :key="rowIndex">
-                        <td
-                            v-for="column in previewColumns"
-                            :key="column.key"
-                            :style="{ minWidth: column.width, textAlign: column.align }"
-                            class="px-3 py-2 text-sm text-ink-gray-7 align-top"
-                            :class="{
-                                'border-r': column.key != previewColumns[previewColumns.length -1].key
-                            }"
-                        >
-                            <div class="leading-5 text-sm">
-                                {{ row[column.key] }}
-                            </div>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+    <div v-if="preview?.data?.length" class="overflow-x-auto rounded-md border">
+      <table class="divide-y">
+        <thead class="rounded-t-md">
+          <tr>
+            <th
+              v-for="column in previewColumns"
+              :key="column.key"
+              :style="{ minWidth: column.width, textAlign: column.align }"
+              class="p-2 text-left text-sm text-ink-gray-5"
+              :class="{
+                'border-r': column.key != previewColumns[previewColumns.length - 1].key,
+                'w-full': column.key == previewColumns[previewColumns.length - 1].key,
+              }"
+            >
+              {{ column.label }}
+            </th>
+          </tr>
+        </thead>
+        <tbody class="divide-surface-gray-2 divide-y bg-surface-white">
+          <tr v-for="(row, rowIndex) in previewData" :key="rowIndex">
+            <td
+              v-for="column in previewColumns"
+              :key="column.key"
+              :style="{ minWidth: column.width, textAlign: column.align }"
+              class="px-3 py-2 align-top text-sm text-ink-gray-7"
+              :class="{
+                'border-r': column.key != previewColumns[previewColumns.length - 1].key,
+              }"
+            >
+              <div class="text-sm leading-5">
+                {{ row[column.key] }}
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
 
-        <div v-if="data.status != 'Pending' && importLogs.length" class="space-y-4">
-
-            <div class="font-semibold text-ink-gray-9">
-                Import Logs
-            </div>
-
-            <div class="rounded-md p-2" :class="importBannerClass">
-                {{ importSuccessCount }} {{ importSuccessCount == 1 ? 'row' : 'rows' }} imported successfully, {{ importErrorCount }} {{ importErrorCount == 1 ? 'row' : 'rows' }} failed.
-            </div>
-
-            <TabButtons :buttons="tabButtons" v-model="activeTab" class="w-fit" />
-
-            <div v-if="filteredLogs.length" class="border rounded-md overflow-x-auto">
-                <table class="table-fixed w-full divide-y">
-                    <thead class="rounded-t-md">
-                        <tr>
-                            <th
-                                class="p-2 text-left text-sm text-ink-gray-5 w-20 border-r text-center"
-                            >
-                                Row no.
-                            </th>
-                            <th class="p-2 text-left text-sm text-ink-gray-5 w-[80%]">
-                                Message
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody class="bg-surface-white divide-y divide-surface-gray-2">
-                        <tr v-for="(row, rowIndex) in filteredLogs" :key="rowIndex" class="group">
-                            <td class="px-3 py-2 text-sm text-ink-gray-7 border-r">
-                                <div class="flex items-center justify-center space-x-2">
-                                    <div v-if="row.success" class="size-1.5 bg-surface-green-3 rounded"></div>
-                                    <div v-else class="size-1.5 bg-surface-red-5 rounded"></div>
-                                    <div>
-                                        {{ JSON.parse(row["row_indexes"])[0] - 1 }}
-                                    </div>
-                                </div>
-                            </td>
-                            
-                            <td class="px-3 py-2 text-sm text-ink-gray-7 w-full">
-                                <span v-if="rowMessage(row)" v-html="rowMessage(row)">
-                                </span>
-                                <span v-else-if="!rowMessage(row) && !row.success">
-                                    Failed to import
-                                </span>
-                                <span v-else-if="row.success">
-                                    Successfully imported 
-                                    <span @click="redirectToPage(row.docname)" :class="{
-                                        'cursor-pointer underline': pageRoute
-                                    }"> {{ row.docname }} </span>
-                                </span>
-                            </td>
-                            <td class="px-3 py-2 text-ink-gray-5 float-right invisible group-hover:visible">
-                                <Popover v-if="row.exception" trigger="hover" placement="left-start">
-                                    <template #target>
-                                        <FeatherIcon name="info" class="size-4" />
-                                    </template>
-                                    <template #body-main>
-                                        <div class="w-[500px] p-2 text-xs leading-5 font-mono">
-                                            {{ row.exception }}
-                                        </div>
-                                    </template>
-                                </Popover>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-            <div v-else class="text-ink-gray-5 text-sm">
-                No logs to display.
-            </div>
-        </div>
+    <div v-if="data.status != 'Pending' && importLogs.length" class="space-y-4">
+      <div class="font-semibold text-ink-gray-9">Import Logs</div>
+
+      <div class="rounded-md p-2" :class="importBannerClass">
+        {{ importSuccessCount }} {{ importSuccessCount == 1 ? 'row' : 'rows' }} imported
+        successfully, {{ importErrorCount }} {{ importErrorCount == 1 ? 'row' : 'rows' }} failed.
+      </div>
+
+      <TabButtons :buttons="tabButtons" v-model="activeTab" class="w-fit" />
+
+      <div v-if="filteredLogs.length" class="overflow-x-auto rounded-md border">
+        <table class="w-full table-fixed divide-y">
+          <thead class="rounded-t-md">
+            <tr>
+              <th class="w-20 border-r p-2 text-left text-center text-sm text-ink-gray-5">
+                Row no.
+              </th>
+              <th class="w-[80%] p-2 text-left text-sm text-ink-gray-5">Message</th>
+            </tr>
+          </thead>
+          <tbody class="divide-surface-gray-2 divide-y bg-surface-white">
+            <tr v-for="(row, rowIndex) in filteredLogs" :key="rowIndex" class="group">
+              <td class="border-r px-3 py-2 text-sm text-ink-gray-7">
+                <div class="flex items-center justify-center space-x-2">
+                  <div v-if="row.success" class="size-1.5 rounded bg-surface-green-3"></div>
+                  <div v-else class="size-1.5 rounded bg-surface-red-5"></div>
+                  <div>
+                    {{ JSON.parse(row['row_indexes'])[0] - 1 }}
+                  </div>
+                </div>
+              </td>
+
+              <td class="w-full px-3 py-2 text-sm text-ink-gray-7">
+                <span v-if="rowMessage(row)" v-html="rowMessage(row)"> </span>
+                <span v-else-if="!rowMessage(row) && !row.success"> Failed to import </span>
+                <span v-else-if="row.success">
+                  Successfully imported
+                  <span
+                    @click="redirectToPage(row.docname)"
+                    :class="{
+                      'cursor-pointer underline': pageRoute,
+                    }"
+                  >
+                    {{ row.docname }}
+                  </span>
+                </span>
+              </td>
+              <td class="invisible float-right px-3 py-2 text-ink-gray-5 group-hover:visible">
+                <Popover v-if="row.exception" trigger="hover" placement="left-start">
+                  <template #target>
+                    <FeatherIcon name="info" class="size-4" />
+                  </template>
+                  <template #body-main>
+                    <div class="w-[500px] p-2 font-mono text-xs leading-5">
+                      {{ row.exception }}
+                    </div>
+                  </template>
+                </Popover>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div v-else class="text-sm text-ink-gray-5">No logs to display.</div>
     </div>
+  </div>
 </template>
 <script setup lang="ts">
-import { getPreviewData, getBadgeColor } from './dataImport'
-import { computed, nextTick, onMounted, ref, watch } from 'vue';
-import type { DataImport, DataImports } from './types';
-import Badge from '../../src/components/Badge/Badge.vue';
-import Button from '../../src/components/Button/Button.vue';
-import call from '../../src/utils/call';
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+
+import Badge from '../../src/components/Badge/Badge.vue'
+import Button from '../../src/components/Button/Button.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
-import initSocket from "../../src/utils/socketio";
-import Popover from "../../src/components/Popover/Popover.vue"
-import TabButtons from '../../src/components/TabButtons/TabButtons.vue';
+import Popover from '../../src/components/Popover/Popover.vue'
+import TabButtons from '../../src/components/TabButtons/TabButtons.vue'
+import call from '../../src/utils/call'
+import initSocket from '../../src/utils/socketio'
+import { getPreviewData, getBadgeColor } from './dataImport'
+import type { DataImport, DataImports } from './types'
 
-const preview = ref<any>(null);
+const preview = ref<any>(null)
 const emit = defineEmits(['updateStep'])
-const importLogs = ref<any[]>([]);
-const filteredLogs = ref<any[]>([]);
-const activeTab = ref('all');
+const importLogs = ref<any[]>([])
+const filteredLogs = ref<any[]>([])
+const activeTab = ref('all')
 
 const props = defineProps<{
-    dataImports: DataImports
-    data: DataImport
-    fields: any
-    doctypeMap: Record<string, { title: string; listRoute?: string; pageRoute?: string }>
+  dataImports: DataImports
+  data: DataImport
+  fields: any
+  doctypeMap: Record<string, { title: string; listRoute?: string; pageRoute?: string }>
 }>()
 
 onMounted(async () => {
-    let socket = initSocket();
-    socket.on("data_import_refresh", (data: { data_import: string }) => {
-        reloadPreviewData(data.data_import);
-    })
-
-    if (!props.data?.name) return;
-    preview.value = await getPreviewData(
-        props.data.name, props.data.import_file, props.data.google_sheets_url
-    );
-    if (props.data.status != "Pending") {
-        getImportLogs();
-    }
-});
+  let socket = initSocket()
+  socket.on('data_import_refresh', (data: { data_import: string }) => {
+    reloadPreviewData(data.data_import)
+  })
+
+  if (!props.data?.name) return
+  preview.value = await getPreviewData(
+    props.data.name,
+    props.data.import_file,
+    props.data.google_sheets_url,
+  )
+  if (props.data.status != 'Pending') {
+    getImportLogs()
+  }
+})
 
 const reloadPreviewData = (dataImport: string) => {
-    if (dataImport != props.data.name) return;
-    nextTick(() => {
-        props.dataImports.reload()
-        nextTick(async () => {
-            let updatedData = props.dataImports.data?.find(d => d.name === props.data.name
-            )
-            emit('updateStep', 'preview', { ...updatedData })
-            getImportLogs()
-        })
+  if (dataImport != props.data.name) return
+  nextTick(() => {
+    props.dataImports.reload()
+    nextTick(async () => {
+      let updatedData = props.dataImports.data?.find((d) => d.name === props.data.name)
+      emit('updateStep', 'preview', { ...updatedData })
+      getImportLogs()
     })
+  })
 }
 
 const previewColumns = computed(() => {
-    const columns: any[] = [];
-    preview.value?.columns.forEach((col: any, index: number) => {
-        let align = 'left';
-        let width = "300px"
-        if (index == 0) {
-            col.header_title = "No"
-            align = 'center';
-            width = "60px"
-        } else if (col.header_title == "ID") {
-            width = "150px"
-        }
-        columns.push({
-            key: col.header_title,
-            label: col.header_title,
-            width: width,
-            align: align,
-        });
-    });
-    return columns;
+  const columns: any[] = []
+  preview.value?.columns.forEach((col: any, index: number) => {
+    let align = 'left'
+    let width = '300px'
+    if (index == 0) {
+      col.header_title = 'No'
+      align = 'center'
+      width = '60px'
+    } else if (col.header_title == 'ID') {
+      width = '150px'
+    }
+    columns.push({
+      key: col.header_title,
+      label: col.header_title,
+      width: width,
+      align: align,
+    })
+  })
+  return columns
 })
 
 const previewData = computed(() => {
-    const data: Record<string, any>[] = [];
-    preview.value?.data.forEach((row: any) => {
-        const dataMap: Record<string, any> = {};
-        Object.keys(row).forEach((key: any, index: number) => {
-            let columnLabel = getColumnLabel(index)
-            let mappedFieldIndex = getMappedColumnName(index);
-            if (columnLabel == "No") {
-                dataMap[columnLabel] = row[key] - 1;
-            } else if (mappedFieldIndex) {
-                dataMap[columnLabel] = row[mappedFieldIndex];
-            } else {
-                dataMap[columnLabel] = row[key];
-            }
-        })
-        data.push(dataMap);
+  const data: Record<string, any>[] = []
+  preview.value?.data.forEach((row: any) => {
+    const dataMap: Record<string, any> = {}
+    Object.keys(row).forEach((key: any, index: number) => {
+      let columnLabel = getColumnLabel(index)
+      let mappedFieldIndex = getMappedColumnName(index)
+      if (columnLabel == 'No') {
+        dataMap[columnLabel] = row[key] - 1
+      } else if (mappedFieldIndex) {
+        dataMap[columnLabel] = row[mappedFieldIndex]
+      } else {
+        dataMap[columnLabel] = row[key]
+      }
     })
-    return data;
+    data.push(dataMap)
+  })
+  return data
 })
 
 const getColumnLabel = (index: number) => {
-    return preview.value?.columns[index]?.header_title || `Column ${index + 1}`;
+  return preview.value?.columns[index]?.header_title || `Column ${index + 1}`
 }
 
 const getMappedColumnName = (index: number) => {
-    let mappedColumn = preview.value?.columns[index]?.map_to_field
-    if (!mappedColumn) return null
-    let mappedColumnLabel = preview.value?.columns[index]?.df?.label
-    let mappedColumnIndex = preview.value?.columns.filter((col: any) => col.header_title == mappedColumnLabel)[0]?.column_number
-    return mappedColumnIndex;
+  let mappedColumn = preview.value?.columns[index]?.map_to_field
+  if (!mappedColumn) return null
+  let mappedColumnLabel = preview.value?.columns[index]?.df?.label
+  let mappedColumnIndex = preview.value?.columns.filter(
+    (col: any) => col.header_title == mappedColumnLabel,
+  )[0]?.column_number
+  return mappedColumnIndex
 }
 
 const startImport = () => {
-    call("frappe.core.doctype.data_import.data_import.form_start_import", {
-        data_import: props.data.name
-    })
+  call('frappe.core.doctype.data_import.data_import.form_start_import', {
+    data_import: props.data.name,
+  })
 }
 
 const getImportLogs = () => {
-    call("frappe.core.doctype.data_import.data_import.get_import_logs", {
-        data_import: props.data.name
-    }).then((data: any) =>  {
-        importLogs.value = data;
-        filteredLogs.value = data;
-    })
+  call('frappe.core.doctype.data_import.data_import.get_import_logs', {
+    data_import: props.data.name,
+  }).then((data: any) => {
+    importLogs.value = data
+    filteredLogs.value = data
+  })
 }
 
 const updateImportLogs = () => {
-    if (activeTab.value == 'all') {
-        filteredLogs.value = importLogs.value;
-    } else if (activeTab.value == 'successful') {
-        filteredLogs.value = importLogs.value.filter(log => log.success);
-    } else if (activeTab.value == 'failed') {
-        filteredLogs.value = importLogs.value.filter(log => !log.success);
-    }
+  if (activeTab.value == 'all') {
+    filteredLogs.value = importLogs.value
+  } else if (activeTab.value == 'successful') {
+    filteredLogs.value = importLogs.value.filter((log) => log.success)
+  } else if (activeTab.value == 'failed') {
+    filteredLogs.value = importLogs.value.filter((log) => !log.success)
+  }
 }
 
 watch(activeTab, () => {
-    updateImportLogs();
+  updateImportLogs()
 })
 
 const importSuccessCount = computed(() => {
-    if (!importLogs.value.length) return 0;
-    return importLogs.value.filter(log => log.success).length
+  if (!importLogs.value.length) return 0
+  return importLogs.value.filter((log) => log.success).length
 })
 
 const importErrorCount = computed(() => {
-    if (!importLogs.value.length) return 0;
-    return importLogs.value.filter(log => !log.success).length
+  if (!importLogs.value.length) return 0
+  return importLogs.value.filter((log) => !log.success).length
 })
 
 const importBannerClass = computed(() => {
-    if (importErrorCount.value == 0) {
-        return 'bg-surface-green-2 text-ink-green-3'
-    } else if (importSuccessCount.value == 0) {
-        return 'bg-surface-red-2 text-ink-red-3'
-    } else {
-        return 'bg-surface-amber-2 text-ink-amber-3'
-    }
+  if (importErrorCount.value == 0) {
+    return 'bg-surface-green-2 text-ink-green-3'
+  } else if (importSuccessCount.value == 0) {
+    return 'bg-surface-red-2 text-ink-red-3'
+  } else {
+    return 'bg-surface-amber-2 text-ink-amber-3'
+  }
 })
 
 const mapping = computed(() => {
-    let warningMap: string[][] = [];
-    if (!preview.value?.warnings?.length) return [];
-    preview.value.warnings.forEach((warning: any) => {
-        if (warning.type == "info") {
-            const regex = /<strong>(.*?)<\/strong>/g;
-            let match;
-            const fields = [];
-            while ((match = regex.exec(warning.message)) !== null) {
-                fields.push(match[1]);
-            }
-            warningMap.push(fields);
-        }
-    })
-    return warningMap;
+  let warningMap: string[][] = []
+  if (!preview.value?.warnings?.length) return []
+  preview.value.warnings.forEach((warning: any) => {
+    if (warning.type == 'info') {
+      const regex = /<strong>(.*?)<\/strong>/g
+      let match
+      const fields = []
+      while ((match = regex.exec(warning.message)) !== null) {
+        fields.push(match[1])
+      }
+      warningMap.push(fields)
+    }
+  })
+  return warningMap
 })
 
 const warnings = computed(() => {
-    return preview.value?.warnings?.filter((warning: any) => warning.type != "info") || [];
+  return preview.value?.warnings?.filter((warning: any) => warning.type != 'info') || []
 })
 
 const listRoute = computed(() => {
-    return props.doctypeMap[props.data.reference_doctype]?.listRoute
+  return props.doctypeMap[props.data.reference_doctype]?.listRoute
 })
 
 const redirectToList = () => {
-    if (!listRoute.value) return;
-    window.location.href = listRoute.value;
+  if (!listRoute.value) return
+  window.location.href = listRoute.value
 }
 
 const pageRoute = computed(() => {
-    return props.doctypeMap[props.data.reference_doctype]?.pageRoute
+  return props.doctypeMap[props.data.reference_doctype]?.pageRoute
 })
 
 const redirectToPage = (docname: string) => {
-    if (!pageRoute.value) return;
-    window.location.href = pageRoute.value.replace('docname', docname);
+  if (!pageRoute.value) return
+  window.location.href = pageRoute.value.replace('docname', docname)
 }
 
 const tabButtons = computed(() => {
-    return [
-        { label: 'All', value: 'all' },
-        { label: 'Successful', value: 'successful' },
-        { label: 'Failed', value: 'failed' },
-    ]
+  return [
+    { label: 'All', value: 'all' },
+    { label: 'Successful', value: 'successful' },
+    { label: 'Failed', value: 'failed' },
+  ]
 })
 
 const rowMessage = (row: any) => {
-    return JSON.parse(row.messages)?.[0]?.message
+  return JSON.parse(row.messages)?.[0]?.message
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frappe/DataImport/TemplateModal.vue b/frappe/DataImport/TemplateModal.vue
index 88184bc55..128bc57a2 100644
--- a/frappe/DataImport/TemplateModal.vue
+++ b/frappe/DataImport/TemplateModal.vue
@@ -1,70 +1,86 @@
 <template>
-    <Dialog v-model="show" :options="{
-        title: 'Export Data',
-        size: '2xl',
-    }">
-        <template #body-content>
-            <div class="text-base space-y-5">
-                <div class="grid grid-cols-2 gap-5">
-                    <FormControl
-                        label="File Type"
-                        v-model="fileType"
-                        :options="['Excel', 'CSV']"
-                        type="select"
-                    />
+  <Dialog
+    v-model="show"
+    :options="{
+      title: 'Export Data',
+      size: '2xl',
+    }"
+  >
+    <template #body-content>
+      <div class="space-y-5 text-base">
+        <div class="grid grid-cols-2 gap-5">
+          <FormControl
+            label="File Type"
+            v-model="fileType"
+            :options="['Excel', 'CSV']"
+            type="select"
+          />
+        </div>
+        <div class="border-t">
+          <p class="mt-2 text-ink-gray-5">Select the fields you want to include in the template.</p>
+          <div class="mb-5 mt-2 space-x-2">
+            <Button label="Select All" @click="selectAllFields" />
+            <Button label="Select Mandatory Fields" @click="selectMandatoryFields" />
+            <Button label="Unselect All" @click="unselectAllFields" />
+          </div>
+          <div class="space-y-8">
+            <div
+              v-for="doctype in Object.keys(fields.data)"
+              :key="doctype"
+              class="flex flex-col space-y-2"
+            >
+              <div class="text-ink-gray-5">
+                {{ doctype }}
+              </div>
+              <div class="grid grid-cols-2 gap-5">
+                <div
+                  v-for="field in fields.data[doctype]"
+                  :key="field.fieldname"
+                  class="flex items-center space-x-2"
+                >
+                  <Checkbox
+                    :id="`checkbox-${doctype}-${field.fieldname}`"
+                    :checked="fieldSelection[doctype][field.fieldname]"
+                    @change="
+                      (e: Event) =>
+                        (fieldSelection[doctype][field.fieldname] = (
+                          e.target as HTMLInputElement
+                        ).checked)
+                    "
+                  />
+                  <label
+                    :for="`checkbox-${doctype}-${field.fieldname}`"
+                    :class="{
+                      'text-ink-red-3': field.reqd,
+                    }"
+                  >
+                    {{ field.label || field.fieldname }}
+                  </label>
                 </div>
-                <div class="border-t">
-                    <p class="mt-2 text-ink-gray-5">
-                        Select the fields you want to include in the template.
-                    </p>
-                    <div class="space-x-2 mt-2 mb-5">
-                        <Button label="Select All" @click="selectAllFields" />
-                        <Button label="Select Mandatory Fields" @click="selectMandatoryFields" />
-                        <Button label="Unselect All" @click="unselectAllFields" />
-                    </div>
-                    <div class="space-y-8">
-                        <div v-for="doctype in Object.keys(fields.data)" :key="doctype" class="flex flex-col space-y-2">
-                            <div class="text-ink-gray-5">
-                                {{ doctype }}
-                            </div>
-                            <div class="grid grid-cols-2 gap-5">
-                                <div v-for="field in fields.data[doctype]" :key="field.fieldname" class="flex items-center space-x-2">
-                                    <Checkbox
-                                        :id="`checkbox-${doctype}-${field.fieldname}`"
-                                        :checked="fieldSelection[doctype][field.fieldname]"
-                                        @change="(e: Event) => fieldSelection[doctype][field.fieldname] = (e.target as HTMLInputElement).checked"
-                                        />
-                                    <label
-                                        :for="`checkbox-${doctype}-${field.fieldname}`"
-                                        :class="{
-                                            'text-ink-red-3': field.reqd
-                                        }">
-                                        {{ field.label || field.fieldname }}
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </template>
-        <template #actions="{ close }">
-            <div class="flex justify-end space-x-2">
-                <Button label="Export" variant="solid" @click="handleExport" />
-                <Button label="Cancel" @click="close" />
+              </div>
             </div>
-        </template>
-    </Dialog>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #actions="{ close }">
+      <div class="flex justify-end space-x-2">
+        <Button label="Export" variant="solid" @click="handleExport" />
+        <Button label="Cancel" @click="close" />
+      </div>
+    </template>
+  </Dialog>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
-import type { DocField } from './types'
+
+import Button from '../../src/components/Button/Button.vue'
+import Checkbox from '../../src/components/Checkbox/Checkbox.vue'
+import Dialog from '../../src/components/Dialog/Dialog.vue'
+import FormControl from '../../src/components/FormControl/FormControl.vue'
 import { createResource } from '../../src/resources'
 import { fieldsToIgnore, getChildTableName } from './dataImport'
-import Button from "../../src/components/Button/Button.vue"
-import Checkbox from "../../src/components/Checkbox/Checkbox.vue"
-import Dialog from "../../src/components/Dialog/Dialog.vue"
-import FormControl from "../../src/components/FormControl/FormControl.vue"
+import type { DocField } from './types'
 
 const show = defineModel<boolean>({ required: true, default: false })
 const fileType = ref<'Excel' | 'CSV'>('CSV')
@@ -73,143 +89,153 @@ const fieldSelection = ref<Record<string, Record<string, boolean>>>({})
 const doctypeMeta = ref<any>(null)
 
 const props = defineProps<{
-    doctype: string
+  doctype: string
 }>()
 
 const fields = createResource({
-    url: "frappe.desk.form.load.getdoctype",
-    params: {
-        doctype: props.doctype,
-        with_parent: 1,
-    },
-    auto: true,
-    transform(data: any) {
-        doctypeMeta.value = data.docs
-        return transformFields(data)
-    }
+  url: 'frappe.desk.form.load.getdoctype',
+  params: {
+    doctype: props.doctype,
+    with_parent: 1,
+  },
+  auto: true,
+  transform(data: any) {
+    doctypeMeta.value = data.docs
+    return transformFields(data)
+  },
 })
 
 const transformFields = (data: any) => {
-    let doctypeMap: Record<string, { fieldname: string; label: string; reqd: number }[]> = {}
+  let doctypeMap: Record<string, { fieldname: string; label: string; reqd: number }[]> = {}
 
-    prepareDoctypeMap(data.docs, doctypeMap)
-    addIDField(doctypeMap)
-    updateFieldSelection(doctypeMap)
+  prepareDoctypeMap(data.docs, doctypeMap)
+  addIDField(doctypeMap)
+  updateFieldSelection(doctypeMap)
 
-    return doctypeMap
+  return doctypeMap
 }
 
-const prepareDoctypeMap = (docs: any[], doctypeMap: Record<string, { fieldname: string; label: string; reqd: number }[]>) => {
-    docs.forEach((doc: any) => {
-        doctypeMap[doc.name] = doc.fields.filter((field: DocField) => {
-            return !fieldsToIgnore.includes(field.fieldtype)
-        }).map((field: DocField) => {
-            return {
-                fieldname: field.fieldname,
-                label: field.label,
-                reqd: field.reqd,
-                disabled: doc.name == props.doctype && field.reqd ? true : false,
-            }
-        })
-    })
+const prepareDoctypeMap = (
+  docs: any[],
+  doctypeMap: Record<string, { fieldname: string; label: string; reqd: number }[]>,
+) => {
+  docs.forEach((doc: any) => {
+    doctypeMap[doc.name] = doc.fields
+      .filter((field: DocField) => {
+        return !fieldsToIgnore.includes(field.fieldtype)
+      })
+      .map((field: DocField) => {
+        return {
+          fieldname: field.fieldname,
+          label: field.label,
+          reqd: field.reqd,
+          disabled: doc.name == props.doctype && field.reqd ? true : false,
+        }
+      })
+  })
 }
 
-const addIDField = (doctypeMap: Record<string, { fieldname: string; label: string; reqd: number }[]>) => {
-    Object.keys(doctypeMap).forEach((doctype: string) => {
-        doctypeMap[doctype].unshift({
-            fieldname: "name",
-            label: "ID",
-            reqd: 1,
-        } as { fieldname: string; label: string; reqd: number })
-    })
+const addIDField = (
+  doctypeMap: Record<string, { fieldname: string; label: string; reqd: number }[]>,
+) => {
+  Object.keys(doctypeMap).forEach((doctype: string) => {
+    doctypeMap[doctype].unshift({
+      fieldname: 'name',
+      label: 'ID',
+      reqd: 1,
+    } as { fieldname: string; label: string; reqd: number })
+  })
 }
 
-const updateFieldSelection = (doctypeMap: Record<string, { fieldname: string; label: string; reqd: number }[]>) => {
-    Object.keys(doctypeMap).forEach((doctype: string) => {
-        if (!fieldSelection.value[doctype]) {
-            fieldSelection.value[doctype] = {}
-            if (doctype == props.doctype) {
-                doctypeMap[doctype].forEach((field) => {
-                    if (field.reqd) {
-                        fieldSelection.value[doctype][field.fieldname] = true
-                    }
-                })
-            }
-        }
-    })
+const updateFieldSelection = (
+  doctypeMap: Record<string, { fieldname: string; label: string; reqd: number }[]>,
+) => {
+  Object.keys(doctypeMap).forEach((doctype: string) => {
+    if (!fieldSelection.value[doctype]) {
+      fieldSelection.value[doctype] = {}
+      if (doctype == props.doctype) {
+        doctypeMap[doctype].forEach((field) => {
+          if (field.reqd) {
+            fieldSelection.value[doctype][field.fieldname] = true
+          }
+        })
+      }
+    }
+  })
 }
 
 const getExportURL = () => {
-    let doctype = props.doctype
-    let exportFields = getExportFields()
-    let exportRecords = getExportType()
-    let exportPageLength = exportType.value == "5 Records" ? 5 : ''
-    
-    return `/api/method/frappe.core.doctype.data_import.data_import.download_template
+  let doctype = props.doctype
+  let exportFields = getExportFields()
+  let exportRecords = getExportType()
+  let exportPageLength = exportType.value == '5 Records' ? 5 : ''
+
+  return `/api/method/frappe.core.doctype.data_import.data_import.download_template
         ?doctype=${encodeURIComponent(doctype)}
         &export_fields=${encodeURIComponent(JSON.stringify(exportFields))}
         &export_records=${encodeURIComponent(exportRecords)}
         &file_type=${encodeURIComponent(fileType.value)}
-        &export_page_length=${exportPageLength}`
-        .replace(/\s+/g, '')
+        &export_page_length=${exportPageLength}`.replace(/\s+/g, '')
 }
 
 const handleExport = async () => {
-    let url = getExportURL()
-    const response = await fetch(url)
-    const blob = await response.blob();
-    const link = document.createElement('a');
+  let url = getExportURL()
+  const response = await fetch(url)
+  const blob = await response.blob()
+  const link = document.createElement('a')
 
-    link.href = URL.createObjectURL(blob);
-    link.download = props.doctype + (fileType.value === 'CSV' ? '.csv' : '.xlsx');
-    document.body.appendChild(link);
+  link.href = URL.createObjectURL(blob)
+  link.download = props.doctype + (fileType.value === 'CSV' ? '.csv' : '.xlsx')
+  document.body.appendChild(link)
 
-    link.click();
-    document.body.removeChild(link);
+  link.click()
+  document.body.removeChild(link)
 }
 
 const getExportFields = () => {
-    let exportFields: Record<string, string[]> = {}
-    Object.keys(fieldSelection.value).forEach((doctype: string) => {
-        let doctypeName = doctype == props.doctype ? doctype : getChildTableName(doctype, props.doctype, doctypeMeta.value)
-        exportFields[doctypeName] = Object.keys(fieldSelection.value[doctype]).filter((fieldname: string) => fieldSelection.value[doctype][fieldname])
-    })
-    return exportFields
+  let exportFields: Record<string, string[]> = {}
+  Object.keys(fieldSelection.value).forEach((doctype: string) => {
+    let doctypeName =
+      doctype == props.doctype
+        ? doctype
+        : getChildTableName(doctype, props.doctype, doctypeMeta.value)
+    exportFields[doctypeName] = Object.keys(fieldSelection.value[doctype]).filter(
+      (fieldname: string) => fieldSelection.value[doctype][fieldname],
+    )
+  })
+  return exportFields
 }
 
 const getExportType = () => {
-    if (exportType.value == "Blank Template")
-        return "blank_template"
-    if (exportType.value == "5 Records")
-        return "5_records"
-    return "all"
+  if (exportType.value == 'Blank Template') return 'blank_template'
+  if (exportType.value == '5 Records') return '5_records'
+  return 'all'
 }
 
 const selectAllFields = () => {
-    Object.keys(fields.data).forEach((doctype: string) => {
-        fields.data[doctype].forEach((field: DocField) => {
-            if (!fieldSelection.value[doctype]) {
-                fieldSelection.value[doctype] = {};
-            }
-            fieldSelection.value[doctype][field.fieldname] = true;
-        })
+  Object.keys(fields.data).forEach((doctype: string) => {
+    fields.data[doctype].forEach((field: DocField) => {
+      if (!fieldSelection.value[doctype]) {
+        fieldSelection.value[doctype] = {}
+      }
+      fieldSelection.value[doctype][field.fieldname] = true
     })
+  })
 }
 
 const selectMandatoryFields = () => {
-    Object.keys(fields.data).forEach((doctype: string) => {
-        fields.data[doctype].forEach((field: DocField) => {
-            fieldSelection.value[doctype][field.fieldname] = field.reqd ? true : false
-        })
+  Object.keys(fields.data).forEach((doctype: string) => {
+    fields.data[doctype].forEach((field: DocField) => {
+      fieldSelection.value[doctype][field.fieldname] = field.reqd ? true : false
     })
+  })
 }
 
 const unselectAllFields = () => {
-    Object.keys(fields.data).forEach((doctype: string) => {
-        fields.data[doctype].forEach((field: DocField) => {
-            fieldSelection.value[doctype][field.fieldname] = false
-        })
+  Object.keys(fields.data).forEach((doctype: string) => {
+    fields.data[doctype].forEach((field: DocField) => {
+      fieldSelection.value[doctype][field.fieldname] = false
     })
+  })
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/frappe/DataImport/UploadStep.vue b/frappe/DataImport/UploadStep.vue
index bce4b4306..3c52bdc90 100644
--- a/frappe/DataImport/UploadStep.vue
+++ b/frappe/DataImport/UploadStep.vue
@@ -1,167 +1,184 @@
 <template>
-    <div class="text-base h-full flex flex-col w-[85%] lg:w-[700px] mx-auto pt-12 space-y-8">
-        <div class="flex flex-col space-y-1 text-ink-gray-7">
-            <div class="flex items-center justify-between">
-                <div class="flex items-center space-x-2 text-xl font-semibold text-ink-gray-9">
-                    <span>
-                        Choose Import
-                    </span>
-                    <Badge v-if="data?.status" :theme="getBadgeColor(data?.status)">
-                        {{ data?.status }}
-                    </Badge>
-                </div>
-                <Button 
-                    variant="solid" 
-                    @click="saveImport"
-                    :disabled="disableContinueButton"
-                >
-                    Continue
-                </Button>
-            </div>
-            <div class="leading-5">
-                Import data into your system using CSV files or Google Sheets.
-            </div>
+  <div class="mx-auto flex h-full w-[85%] flex-col space-y-8 pt-12 text-base lg:w-[700px]">
+    <div class="flex flex-col space-y-1 text-ink-gray-7">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center space-x-2 text-xl font-semibold text-ink-gray-9">
+          <span> Choose Import </span>
+          <Badge v-if="data?.status" :theme="getBadgeColor(data?.status)">
+            {{ data?.status }}
+          </Badge>
         </div>
+        <Button variant="solid" @click="saveImport" :disabled="disableContinueButton">
+          Continue
+        </Button>
+      </div>
+      <div class="leading-5">Import data into your system using CSV files or Google Sheets.</div>
+    </div>
 
-        <div class="space-y-4">
-            <div
-                v-if="showFileSelector && !importFile"
-                @dragover.prevent
-                @drop.prevent="(e) =>  uploadFile(e)" 
-                class="h-[300px] flex items-center justify-center bg-surface-gray-1 border border-dashed border-outline-gray-3 rounded-md">
-                <div v-if="showFileSelector && !uploading" class="w-4/5 lg:w-2/5 text-center">
-                    <FeatherIcon name="upload-cloud" class="size-6 stroke-1.5 text-ink-gray-6 mx-auto mb-2.5" />
-                    <input
-                        ref="fileInput"
-                        type="file"
-                        accept=".csv"
-                        class="hidden"
-                        @change="(e) => uploadFile(e)"
-                    />
-                    <div class="leading-5 text-ink-gray-9">
-                        Drag and drop a CSV file, or upload from your 
-                        <span @click="openFileSelector" class="cursor-pointer font-semibold hover:underline">Device</span> 
-                        or 
-                        <span @click="openSheetSelector" class="cursor-pointer font-semibold hover:underline"> 
-                            Google Sheet 
-                        </span>
-                    </div>
-                </div>
-                <div v-else-if="showFileSelector && uploading" class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2">
-                    <div class="space-y-2">
-                        <div class="font-medium">
-                            {{ uploadingdFile.name }}
-                        </div>
-                        <div class="text-ink-gray-6">
-                            {{ convertToKB(uploaded) }} of {{ convertToKB(total) }}
-                        </div>
-                    </div>
-                    <div class="w-full bg-surface-gray-1 h-1 rounded-full mt-3">
-                        <div 
-                            class="bg-surface-gray-7 h-1 rounded-full transition-all duration-500 ease-in-out"
-                            :style="`width: ${uploadProgress}%`"
-                        ></div>
-                    </div>
-                </div>
+    <div class="space-y-4">
+      <div
+        v-if="showFileSelector && !importFile"
+        @dragover.prevent
+        @drop.prevent="(e) => uploadFile(e)"
+        class="flex h-[300px] items-center justify-center rounded-md border border-dashed border-outline-gray-3 bg-surface-gray-1"
+      >
+        <div v-if="showFileSelector && !uploading" class="w-4/5 text-center lg:w-2/5">
+          <FeatherIcon
+            name="upload-cloud"
+            class="stroke-1.5 mx-auto mb-2.5 size-6 text-ink-gray-6"
+          />
+          <input
+            ref="fileInput"
+            type="file"
+            accept=".csv"
+            class="hidden"
+            @change="(e) => uploadFile(e)"
+          />
+          <div class="leading-5 text-ink-gray-9">
+            Drag and drop a CSV file, or upload from your
+            <span @click="openFileSelector" class="cursor-pointer font-semibold hover:underline"
+              >Device</span
+            >
+            or
+            <span @click="openSheetSelector" class="cursor-pointer font-semibold hover:underline">
+              Google Sheet
+            </span>
+          </div>
+        </div>
+        <div
+          v-else-if="showFileSelector && uploading"
+          class="w-4/5 rounded-md border bg-surface-white p-2 lg:w-2/5"
+        >
+          <div class="space-y-2">
+            <div class="font-medium">
+              {{ uploadingdFile.name }}
             </div>
-            <div v-else-if="importFile" class="h-[300px] flex items-center justify-center bg-surface-gray-1 border border-dashed border-outline-gray-3 rounded-md">
-                <div class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2 flex items-center justify-between items-center">
-                    <div class="space-y-2">
-                        <div class="font-medium leading-5 text-ink-gray-9">
-                            {{ importFile.file_name || importFile.split("/").pop() }}
-                        </div>
-                        <div v-if="importFile.file_size" class="text-ink-gray-6">
-                            {{ convertToKB(importFile.file_size) }}
-                        </div>
-                    </div>
-                    <FeatherIcon 
-                        name="trash-2" 
-                        class="size-4 stroke-1.5 text-ink-red-3 cursor-pointer"
-                        @click="deleteFile"
-                    />
-                </div>
+            <div class="text-ink-gray-6">
+              {{ convertToKB(uploaded) }} of {{ convertToKB(total) }}
             </div>
-
-            <div v-else-if="showSheetSelector" class="flex flex-col h-[300px] p-4 border border-dashed border-outline-gray-3 rounded-md">
-                <div class="flex items-center space-x-2 text-ink-gray-7">
-                    <FeatherIcon name="chevron-left" class="size-4 cursor-pointer" @click="backToFileSelector" />
-                    <div>
-                        Google Sheet
-                    </div>
-                </div>
-                <div class="flex-1 flex flex-col items-center justify-center w-[95%] lg:w-[400px] mx-auto space-y-3">
-                    <input
-                        v-model="googleSheet"
-                        type="text"
-                        class="w-full border border-outline-gray-2 rounded-md px-2.5 text-base"
-                        placeholder="Add Google Sheets Link"
-                    />
-                    <div class="text-ink-gray-5">
-                        Make sure the link is publically accessible to fetch the data.
-                    </div>
-                </div>
+          </div>
+          <div class="mt-3 h-1 w-full rounded-full bg-surface-gray-1">
+            <div
+              class="h-1 rounded-full bg-surface-gray-7 transition-all duration-500 ease-in-out"
+              :style="`width: ${uploadProgress}%`"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <div
+        v-else-if="importFile"
+        class="flex h-[300px] items-center justify-center rounded-md border border-dashed border-outline-gray-3 bg-surface-gray-1"
+      >
+        <div
+          class="flex w-4/5 items-center justify-between rounded-md border bg-surface-white p-2 lg:w-2/5"
+        >
+          <div class="space-y-2">
+            <div class="font-medium leading-5 text-ink-gray-9">
+              {{ importFile.file_name || importFile.split('/').pop() }}
             </div>
-
-            <div class="flex justify-end">
-                <Dropdown
-                    :options="[
-                        {
-                            label: 'Mandatory Fields',
-                            onClick() {
-                                exportTemplate('mandatory')
-                            },
-                        },
-                        {
-                            label: 'All Fields',
-                            onClick() {
-                                exportTemplate('all')
-                            },
-                        },
-                        {
-                            label: 'Custom Template',
-                            onClick() {
-                                showTemplateModal = true
-                            },
-                        }
-                    ]"
-                >
-                    <template v-slot="{ open }">
-                        <Button variant="ghost">
-                            <template #prefix>
-                                <FeatherIcon name="download" class="size-4 stroke-1.5" />
-                            </template>
-                            Download CSV Template
-                            <template #suffix>
-                                <FeatherIcon name="chevron-down" :class="[
-                                    'w-4 h-4 stroke-1.5 ml-1 transform transition-transform',
-                                    open ? 'rotate-180' : '',
-                                ]" />
-                            </template>
-                        </Button>
-                    </template>
-                </Dropdown>
+            <div v-if="importFile.file_size" class="text-ink-gray-6">
+              {{ convertToKB(importFile.file_size) }}
             </div>
+          </div>
+          <FeatherIcon
+            name="trash-2"
+            class="stroke-1.5 size-4 cursor-pointer text-ink-red-3"
+            @click="deleteFile"
+          />
         </div>
-
-        <TemplateModal
-            v-if="props.doctype || props.data?.reference_doctype"
-            v-model="showTemplateModal"
-            :doctype="props.doctype || props.data?.reference_doctype as string"
-        />
+      </div>
+
+      <div
+        v-else-if="showSheetSelector"
+        class="flex h-[300px] flex-col rounded-md border border-dashed border-outline-gray-3 p-4"
+      >
+        <div class="flex items-center space-x-2 text-ink-gray-7">
+          <FeatherIcon
+            name="chevron-left"
+            class="size-4 cursor-pointer"
+            @click="backToFileSelector"
+          />
+          <div>Google Sheet</div>
+        </div>
+        <div
+          class="mx-auto flex w-[95%] flex-1 flex-col items-center justify-center space-y-3 lg:w-[400px]"
+        >
+          <input
+            v-model="googleSheet"
+            type="text"
+            class="w-full rounded-md border border-outline-gray-2 px-2.5 text-base"
+            placeholder="Add Google Sheets Link"
+          />
+          <div class="text-ink-gray-5">
+            Make sure the link is publically accessible to fetch the data.
+          </div>
+        </div>
+      </div>
+
+      <div class="flex justify-end">
+        <Dropdown
+          :options="[
+            {
+              label: 'Mandatory Fields',
+              onClick() {
+                exportTemplate('mandatory')
+              },
+            },
+            {
+              label: 'All Fields',
+              onClick() {
+                exportTemplate('all')
+              },
+            },
+            {
+              label: 'Custom Template',
+              onClick() {
+                showTemplateModal = true
+              },
+            },
+          ]"
+        >
+          <template v-slot="{ open }">
+            <Button variant="ghost">
+              <template #prefix>
+                <FeatherIcon name="download" class="stroke-1.5 size-4" />
+              </template>
+              Download CSV Template
+              <template #suffix>
+                <FeatherIcon
+                  name="chevron-down"
+                  :class="[
+                    'stroke-1.5 ml-1 h-4 w-4 transform transition-transform',
+                    open ? 'rotate-180' : '',
+                  ]"
+                />
+              </template>
+            </Button>
+          </template>
+        </Dropdown>
+      </div>
     </div>
+
+    <TemplateModal
+      v-if="props.doctype || props.data?.reference_doctype"
+      v-model="showTemplateModal"
+      :doctype="props.doctype || (props.data?.reference_doctype as string)"
+    />
+  </div>
 </template>
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import type { DataImports, DataImport, DocField, DocType } from './types'
-import { toast } from "../../src/components/Toast/index"
-import { fieldsToIgnore, getChildTableName, getBadgeColor } from './dataImport'
+
 import Badge from '../../src/components/Badge/Badge.vue'
 import Button from '../../src/components/Button/Button.vue'
 import Dropdown from '../../src/components/Dropdown/Dropdown.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
-import FileUploadHandler from '../../src/utils/fileUploadHandler';
+import { toast } from '../../src/components/Toast/index'
+import FileUploadHandler from '../../src/utils/fileUploadHandler'
+import { fieldsToIgnore, getChildTableName, getBadgeColor } from './dataImport'
 import TemplateModal from './TemplateModal.vue'
+import type { DataImports, DataImport, DocField, DocType } from './types'
 
 const emit = defineEmits(['updateStep'])
 const importFile = ref<any | null>(null)
@@ -178,240 +195,265 @@ const showLibrarySelector = ref(false)
 const router = useRouter()
 
 const props = defineProps<{
-    dataImports: DataImports
-    doctype?: string
-    fields: any
-    data: DataImport | null
+  dataImports: DataImports
+  doctype?: string
+  fields: any
+  data: DataImport | null
 }>()
 
 const uploadProgress = computed(() => {
-    if (total.value === 0) return 0
-    return Math.floor((uploaded.value / total.value) * 100)
+  if (total.value === 0) return 0
+  return Math.floor((uploaded.value / total.value) * 100)
 })
 
 const extractFile = (e: Event): File | null => {
-    const inputFiles = (e.target as HTMLInputElement)?.files
-    const dt = (e as DragEvent).dataTransfer?.files
+  const inputFiles = (e.target as HTMLInputElement)?.files
+  const dt = (e as DragEvent).dataTransfer?.files
 
-    return inputFiles?.[0] || dt?.[0] || null
+  return inputFiles?.[0] || dt?.[0] || null
 }
 
 const uploadFile = (e: Event) => {
-    const file = extractFile(e)
-    if (!file) return;
-    
-    if (file.type !== 'text/csv') {
-        toast.error('Please upload a valid CSV file.')
-        console.error('Please upload a valid CSV file.')
-        return;
-    }
-
-    uploadingdFile.value = file
-    const uploader = new FileUploadHandler()
-
-    uploader.on("start", () => {
-        uploading.value = true
+  const file = extractFile(e)
+  if (!file) return
+
+  if (file.type !== 'text/csv') {
+    toast.error('Please upload a valid CSV file.')
+    console.error('Please upload a valid CSV file.')
+    return
+  }
+
+  uploadingdFile.value = file
+  const uploader = new FileUploadHandler()
+
+  uploader.on('start', () => {
+    uploading.value = true
+  })
+
+  uploader.on('progress', (data: { uploaded: number; total: number }) => {
+    uploaded.value = data.uploaded
+    total.value = data.total
+  })
+
+  uploader.on('error', (error: any) => {
+    uploading.value = false
+    toast.error(error)
+    console.error('File upload error:', error)
+  })
+
+  uploader.on('finish', () => {
+    uploading.value = false
+  })
+  uploader
+    .upload(file, {})
+    .then((data) => {
+      importFile.value = data
     })
-
-    uploader.on("progress", (data: { uploaded: number, total: number }) => {
-        uploaded.value = data.uploaded
-        total.value = data.total
-    })
-
-    uploader.on("error", (error: any) => {
-        uploading.value = false
-        toast.error(error)
-        console.error('File upload error:', error)
-    })
-
-    uploader.on("finish", () => {
-        uploading.value = false
-    })
-    uploader.upload(file, {}).then((data => {
-        importFile.value = data
-    })).catch(error => {
-        console.error('File upload error:', error)
+    .catch((error) => {
+      console.error('File upload error:', error)
     })
 }
 
 const saveImport = () => {
-    if (props.data?.name) {
-        updateImport()
-    } else {
-        createImport()
-    }
+  if (props.data?.name) {
+    updateImport()
+  } else {
+    createImport()
+  }
 }
 
 const createImport = () => {
-    props.dataImports.insert.submit({
-        reference_doctype: props.doctype!,
-        import_type: "Insert New Records",
-        mute_emails: true,
-        status: 'Pending',
-        google_sheets_url: googleSheet.value.trim(),
-        import_file: importFile.value?.file_url,
-    }, {
-        onSuccess(data: DataImport) {
-            router.replace({
-                name: 'DataImport',
-                params: {
-                    importName: data.name
-                },
-                query: {
-                    step: 'map'
-                }
-            })
-        },
-        onError(error: any) {
-            toast.error(error.messages?.[0] || error)
-            console.error('Error creating data import:', error)
-        }
-    })
+  props.dataImports.insert.submit(
+    {
+      reference_doctype: props.doctype!,
+      import_type: 'Insert New Records',
+      mute_emails: true,
+      status: 'Pending',
+      google_sheets_url: googleSheet.value.trim(),
+      import_file: importFile.value?.file_url,
+    },
+    {
+      onSuccess(data: DataImport) {
+        router.replace({
+          name: 'DataImport',
+          params: {
+            importName: data.name,
+          },
+          query: {
+            step: 'map',
+          },
+        })
+      },
+      onError(error: any) {
+        toast.error(error.messages?.[0] || error)
+        console.error('Error creating data import:', error)
+      },
+    },
+  )
 }
 
 const updateImport = () => {
-    if (!props.data) return;
-    props.dataImports.setValue.submit({
-        ...props.data,
-        google_sheets_url: googleSheet.value.trim(),
-        import_file: importFile.value ? importFile.value.file_url : '',
-    }, {
-        onSuccess(data: DataImport) {
-            nextTick(() => {
-                if (importFile.value || googleSheet.value.trim().length) {
-                    emit('updateStep', 'map', data)
-                } else {
-                    emit('updateStep', 'upload', data)
-                }
-            })
-        },
-        onError(error: any) {
-            toast.error(error.messages?.[0] || error, { duration: 1000 })
-            console.error('Error updating data import:', error)
-        }
-    })
+  if (!props.data) return
+  props.dataImports.setValue.submit(
+    {
+      ...props.data,
+      google_sheets_url: googleSheet.value.trim(),
+      import_file: importFile.value ? importFile.value.file_url : '',
+    },
+    {
+      onSuccess(data: DataImport) {
+        nextTick(() => {
+          if (importFile.value || googleSheet.value.trim().length) {
+            emit('updateStep', 'map', data)
+          } else {
+            emit('updateStep', 'upload', data)
+          }
+        })
+      },
+      onError(error: any) {
+        toast.error(error.messages?.[0] || error, { duration: 1000 })
+        console.error('Error updating data import:', error)
+      },
+    },
+  )
 }
 
 const exportTemplate = async (type: 'mandatory' | 'all') => {
-    let url = getExportURL(type)
-    const response = await fetch(url)
-    const blob = await response.blob();
-    const link = document.createElement('a');
+  let url = getExportURL(type)
+  const response = await fetch(url)
+  const blob = await response.blob()
+  const link = document.createElement('a')
 
-    link.href = URL.createObjectURL(blob);
-    link.download = props.doctype + '.csv'
-    document.body.appendChild(link);
+  link.href = URL.createObjectURL(blob)
+  link.download = props.doctype + '.csv'
+  document.body.appendChild(link)
 
-    link.click();
-    document.body.removeChild(link);
+  link.click()
+  document.body.removeChild(link)
 }
 
 const getExportURL = (type: 'mandatory' | 'all') => {
-    if (!props.doctype && !props.data?.reference_doctype) return ''
-    let exportFields = getExportFields(type)
-    
-    return `/api/method/frappe.core.doctype.data_import.data_import.download_template
-        ?doctype=${encodeURIComponent(props.doctype || props.data?.reference_doctype as string)}
+  if (!props.doctype && !props.data?.reference_doctype) return ''
+  let exportFields = getExportFields(type)
+
+  return `/api/method/frappe.core.doctype.data_import.data_import.download_template
+        ?doctype=${encodeURIComponent(props.doctype || (props.data?.reference_doctype as string))}
         &export_fields=${encodeURIComponent(JSON.stringify(exportFields))}
         &export_records=blank_template
-        &file_type=CSV`
-        .replace(/\s+/g, '')
+        &file_type=CSV`.replace(/\s+/g, '')
 }
 
 const getExportFields = (type: 'mandatory' | 'all') => {
-    /* {'Sales Invoice': ['name', 'customer'], 'Sales Invoice Item': ['item_code']} */
-    if (type == "mandatory") {
-        return getMandatoryFields()
-    }
-    return getAllFields()
+  /* {'Sales Invoice': ['name', 'customer'], 'Sales Invoice Item': ['item_code']} */
+  if (type == 'mandatory') {
+    return getMandatoryFields()
+  }
+  return getAllFields()
 }
 
 const getMandatoryFields = () => {
-    let exportableFields: Record<string, string[]> = {}
-    let docs = props.fields.data?.docs || []
-    let referenceDoctype = props.doctype || props.data?.reference_doctype as string
-    let parentDoctype = docs.find((doc: DocType) => doc.name == referenceDoctype)
-
-    let parentFields = parentDoctype.fields.filter((field: DocField) => {
-        return !fieldsToIgnore.includes(field.fieldtype) && field.reqd
-    }).map((field: DocField) => field.fieldname)
-    parentFields.unshift('name')
-    exportableFields[referenceDoctype] = parentFields
-
-    let childDoctypes = parentDoctype.fields.filter((field: DocField) => {
-        return (field.fieldtype === 'Table' || field.fieldtype === 'Table MultiSelect') && field.reqd
-    })
-
-    childDoctypes.forEach((field: DocField) => {
-        let childDoctype = docs.find((doc: DocType) => doc.name == field.options)
-        if (childDoctype) {
-            let childFields = childDoctype.fields.filter((f: DocField) => {
-                return !fieldsToIgnore.includes(f.fieldtype) && f.reqd
-            }).map((f: DocField) => f.fieldname)
-            childFields.unshift('name')
-            exportableFields[field.fieldname] = childFields
-        }
+  let exportableFields: Record<string, string[]> = {}
+  let docs = props.fields.data?.docs || []
+  let referenceDoctype = props.doctype || (props.data?.reference_doctype as string)
+  let parentDoctype = docs.find((doc: DocType) => doc.name == referenceDoctype)
+
+  let parentFields = parentDoctype.fields
+    .filter((field: DocField) => {
+      return !fieldsToIgnore.includes(field.fieldtype) && field.reqd
     })
+    .map((field: DocField) => field.fieldname)
+  parentFields.unshift('name')
+  exportableFields[referenceDoctype] = parentFields
+
+  let childDoctypes = parentDoctype.fields.filter((field: DocField) => {
+    return (field.fieldtype === 'Table' || field.fieldtype === 'Table MultiSelect') && field.reqd
+  })
+
+  childDoctypes.forEach((field: DocField) => {
+    let childDoctype = docs.find((doc: DocType) => doc.name == field.options)
+    if (childDoctype) {
+      let childFields = childDoctype.fields
+        .filter((f: DocField) => {
+          return !fieldsToIgnore.includes(f.fieldtype) && f.reqd
+        })
+        .map((f: DocField) => f.fieldname)
+      childFields.unshift('name')
+      exportableFields[field.fieldname] = childFields
+    }
+  })
 
-    return exportableFields
+  return exportableFields
 }
 
 const getAllFields = () => {
-    let doctypeMap: Record<string, string[]> = {}
-    let docs = props.fields.data?.docs || []
-    docs.forEach((doc: DocType) => {
-        let exportableFields = doc.fields.filter((field: DocField) => {
-            return !fieldsToIgnore.includes(field.fieldtype)
-        }).map((field: DocField) => field.fieldname)
-        exportableFields.unshift('name')
-        let doctypeName = doc.name == props.doctype ? doc.name : getChildTableName(doc.name, props.doctype || props.data?.reference_doctype as string, docs)
-        doctypeMap[doctypeName] = exportableFields
-    })
-    return doctypeMap
+  let doctypeMap: Record<string, string[]> = {}
+  let docs = props.fields.data?.docs || []
+  docs.forEach((doc: DocType) => {
+    let exportableFields = doc.fields
+      .filter((field: DocField) => {
+        return !fieldsToIgnore.includes(field.fieldtype)
+      })
+      .map((field: DocField) => field.fieldname)
+    exportableFields.unshift('name')
+    let doctypeName =
+      doc.name == props.doctype
+        ? doc.name
+        : getChildTableName(
+            doc.name,
+            props.doctype || (props.data?.reference_doctype as string),
+            docs,
+          )
+    doctypeMap[doctypeName] = exportableFields
+  })
+  return doctypeMap
 }
 
 const openFileSelector = () => {
-    fileInput.value?.click()
+  fileInput.value?.click()
 }
 
 const openSheetSelector = () => {
-    showFileSelector.value = false
-    showLibrarySelector.value = false
-    showSheetSelector.value = true
+  showFileSelector.value = false
+  showLibrarySelector.value = false
+  showSheetSelector.value = true
 }
 
 const backToFileSelector = () => {
-    showFileSelector.value = true
-    showLibrarySelector.value = false
-    showSheetSelector.value = false
+  showFileSelector.value = true
+  showLibrarySelector.value = false
+  showSheetSelector.value = false
 }
 
 const disableContinueButton = computed(() => {
-    return !importFile.value && !googleSheet.value.trim().length
+  return !importFile.value && !googleSheet.value.trim().length
 })
 
-watch(() => props.data, () => {
+watch(
+  () => props.data,
+  () => {
     if (props.data) {
-        if (props.data.import_file) {
-            importFile.value = props.data.import_file
-        } else if (props.data.google_sheets_url) {
-            openSheetSelector()
-            googleSheet.value = props.data.google_sheets_url
-        }
+      if (props.data.import_file) {
+        importFile.value = props.data.import_file
+      } else if (props.data.google_sheets_url) {
+        openSheetSelector()
+        googleSheet.value = props.data.google_sheets_url
+      }
     }
-}, { immediate: true })
+  },
+  { immediate: true },
+)
 
 watch([importFile, googleSheet], () => {
-    if (!importFile.value || !googleSheet.value.trim().length) {
-        updateImport()
-    }
+  if (!importFile.value || !googleSheet.value.trim().length) {
+    updateImport()
+  }
 })
 
 const deleteFile = () => {
-    importFile.value = null
+  importFile.value = null
 }
 
 const convertToKB = (bytes: number) => {
-    return (bytes / 1024).toFixed(2) + ' KB'
+  return (bytes / 1024).toFixed(2) + ' KB'
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frappe/DataImport/dataImport.ts b/frappe/DataImport/dataImport.ts
index 222fe0e85..2c5348f49 100644
--- a/frappe/DataImport/dataImport.ts
+++ b/frappe/DataImport/dataImport.ts
@@ -1,52 +1,56 @@
-import { toast } from "../../src/components/Toast/index"
+import { toast } from '../../src/components/Toast/index'
+import call from '../../src/utils/call'
 import type { DataImportStatus } from './types'
-import call from '../../src/utils/call';
 
 export const getBadgeColor = (status: DataImportStatus) => {
-    const colorMap = {
-        "Pending": "orange",
-        "Success": "green",
-        "Partial Success": "orange",
-        "Error": "red",
-        "Timed Out": "orange"
-    } as const;
-    return colorMap[status as DataImportStatus] || "gray"
+  const colorMap = {
+    'Pending': 'orange',
+    'Success': 'green',
+    'Partial Success': 'orange',
+    'Error': 'red',
+    'Timed Out': 'orange',
+  } as const
+  return colorMap[status as DataImportStatus] || 'gray'
 }
 
 export const fieldsToIgnore = [
-    "Section Break",
-    "Column Break",
-    "Tab Break",
-    "HTML",
-    "Table",
-    "Table MultiSelect",
-    "Button",
-    "Image",
-    "Fold",
-    "Heading"
+  'Section Break',
+  'Column Break',
+  'Tab Break',
+  'HTML',
+  'Table',
+  'Table MultiSelect',
+  'Button',
+  'Image',
+  'Fold',
+  'Heading',
 ]
 
 export const getChildTableName = (doctype: string, parentDocType: string, docs: any[]) => {
-    let childTableName = ''
-    let doctypeFields = docs.filter((doc: any) => {
-        return doc.name == parentDocType
-    })[0].fields
+  let childTableName = ''
+  let doctypeFields = docs.filter((doc: any) => {
+    return doc.name == parentDocType
+  })[0].fields
 
-   doctypeFields.forEach((field: any) => {
-        if (field.options == doctype) {
-            childTableName = field.fieldname
-        }
-   })
-    return childTableName
+  doctypeFields.forEach((field: any) => {
+    if (field.options == doctype) {
+      childTableName = field.fieldname
+    }
+  })
+  return childTableName
 }
 
-export const getPreviewData = (importName: string, file: string | undefined, sheet: string | undefined) => {
-    return call("frappe.core.doctype.data_import.data_import.get_preview_from_template", {
-        data_import: importName,
-        import_file: file,
-        google_sheets_url: sheet
-    }).catch((error: any) => {
-        toast.error(error.messages?.[0] || error)
-        console.error("Error fetching preview data:", error)
-    })
-}
\ No newline at end of file
+export const getPreviewData = (
+  importName: string,
+  file: string | undefined,
+  sheet: string | undefined,
+) => {
+  return call('frappe.core.doctype.data_import.data_import.get_preview_from_template', {
+    data_import: importName,
+    import_file: file,
+    google_sheets_url: sheet,
+  }).catch((error: any) => {
+    toast.error(error.messages?.[0] || error)
+    console.error('Error fetching preview data:', error)
+  })
+}
diff --git a/frappe/DataImport/types.ts b/frappe/DataImport/types.ts
index 406ab98c8..5f0dc8421 100644
--- a/frappe/DataImport/types.ts
+++ b/frappe/DataImport/types.ts
@@ -21,14 +21,28 @@ export interface DataImport {
 export interface DataImports {
   data: DataImport[]
   update: (args: { filters: any[] }) => void
-  insert: { submit: (params: DataImport, options: { validate?: () => boolean; onSuccess: (data: DataImport) => void; onError: (err: any) => void }) => void }
-  setValue: { submit: (params: DataImport, options: { onSuccess: (data: DataImport) => void; onError: (err: any) => void }) => void }
+  insert: {
+    submit: (
+      params: DataImport,
+      options: {
+        validate?: () => boolean
+        onSuccess: (data: DataImport) => void
+        onError: (err: any) => void
+      },
+    ) => void
+  }
+  setValue: {
+    submit: (
+      params: DataImport,
+      options: { onSuccess: (data: DataImport) => void; onError: (err: any) => void },
+    ) => void
+  }
   reload: () => void
   hasNextPage: () => boolean
   next: () => Promise<void>
 }
 
-export type DataImportStatus = "Pending" | "Success" | "Partial Success" | "Error" | "Timed Out"
+export type DataImportStatus = 'Pending' | 'Success' | 'Partial Success' | 'Error' | 'Timed Out'
 
 export interface DocField {
   label: string
@@ -48,4 +62,4 @@ export interface File {
   file_url: string
   file_name: string
   file_size: number
-}
\ No newline at end of file
+}
diff --git a/frappe/Filter/Filter.vue b/frappe/Filter/Filter.vue
index a21958950..27268b9f7 100644
--- a/frappe/Filter/Filter.vue
+++ b/frappe/Filter/Filter.vue
@@ -1,77 +1,69 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import type { FilterProps, StateRow } from "./types";
+import { computed, ref } from 'vue'
 
-import {
-  getDefaultOperator,
-  getOperators,
-  getValueControl,
-  parseFilters,
-} from "./utils";
+import Badge from '../../src/components/Badge/Badge.vue'
+import Button from '../../src/components/Button/Button.vue'
+import Combobox from '../../src/components/Combobox/Combobox.vue'
+import Popover from '../../src/components/Popover/Popover.vue'
+import Select from '../../src/components/Select/Select.vue'
+import { createResource } from '../../src/resources'
+import FilterIcon from '../Icons/FilterIcon.vue'
+import type { FilterProps, StateRow } from './types'
+import { getDefaultOperator, getOperators, getValueControl, parseFilters } from './utils'
 
-import Badge from "../../src/components/Badge/Badge.vue";
-import Button from "../../src/components/Button/Button.vue";
-import Combobox from "../../src/components/Combobox/Combobox.vue";
-import Popover from "../../src/components/Popover/Popover.vue";
-import Select from "../../src/components/Select/Select.vue";
-import { createResource } from "../../src/resources";
-
-import FilterIcon from "../Icons/FilterIcon.vue";
-
-let props = defineProps<FilterProps>();
+let props = defineProps<FilterProps>()
 
 const doctypeFields = createResource({
-  url: "frappe.desk.form.load.getdoctype",
-  method: "GET",
+  url: 'frappe.desk.form.load.getdoctype',
+  method: 'GET',
   params: { doctype: props.doctype },
   auto: true,
 
   transform(data) {
-    const options = data.docs[0].fields.map((x) => {
-      return {
-        label: x.label,
-        type: x.fieldtype,
-        value: x.fieldname,
-        options: x.options?.split("\n"),
-      };
-    })
-      .filter((x) =>
-        !["Section Break", "Read Only", "Column Break"].includes(x.type)
-      );
-
-    return options;
+    const options = data.docs[0].fields
+      .map((x) => {
+        return {
+          label: x.label,
+          type: x.fieldtype,
+          value: x.fieldname,
+          options: x.options?.split('\n'),
+        }
+      })
+      .filter((x) => !['Section Break', 'Read Only', 'Column Break'].includes(x.type))
+
+    return options
   },
-});
+})
 
 const dummyObj = () => ({
-  field: { fieldName: "", fieldType: "", options: [] },
-  operator: "",
-  value: "",
-});
+  field: { fieldName: '', fieldType: '', options: [] },
+  operator: '',
+  value: '',
+})
 
-const rows = ref([dummyObj()]);
-const insertRow = () => rows.value.push(dummyObj());
+const rows = ref([dummyObj()])
+const insertRow = () => rows.value.push(dummyObj())
 
 const clearRows = (closePopup: () => void) => {
-  rows.value = [dummyObj()];
-  closePopup();
-  apply();
-};
+  rows.value = [dummyObj()]
+  closePopup()
+  apply()
+}
 
 const deleteRow = (index: number) => {
-  rows.value.splice(index, 1);
-  if (rows.value.length === 0) insertRow();
-  apply();
-};
+  rows.value.splice(index, 1)
+  if (rows.value.length === 0) insertRow()
+  apply()
+}
 
 const getField = (val: string) => {
-  return doctypeFields.data?.find((x: StateRow) => x.value === val);
-};
+  return doctypeFields.data?.find((x: StateRow) => x.value === val)
+}
 
 const updateFilter = (val: string, index: number) => {
-  if (!val) return;
+  if (!val) return
 
-  const field = getField(val);
+  const field = getField(val)
   rows.value[index] = {
     field: {
       fieldName: val,
@@ -79,19 +71,17 @@ const updateFilter = (val: string, index: number) => {
       options: field.options,
     },
     operator: getDefaultOperator(field),
-    value: "",
-  };
-  apply();
-};
+    value: '',
+  }
+  apply()
+}
 
-const model = defineModel();
+const model = defineModel()
 const apply = () => {
-  model.value = parseFilters(rows.value);
-};
+  model.value = parseFilters(rows.value)
+}
 
-const filterCount = computed(() =>
-  rows.value.filter((row) => row.field.fieldName !== "").length
-);
+const filterCount = computed(() => rows.value.filter((row) => row.field.fieldName !== '').length)
 </script>
 
 <template>
@@ -101,15 +91,12 @@ const filterCount = computed(() =>
     :matchTargetWidth="true"
   >
     <template #target="{ close, togglePopover }">
-      <Button
-        @click="togglePopover()"
-        :class='{ "rounded-r-none": filterCount != 0 }'
-      >
+      <Button @click="togglePopover()" :class="{ 'rounded-r-none': filterCount != 0 }">
         <template #prefix><FilterIcon /></template>
         Filter
         <Badge
           v-if="filterCount != 0"
-          :class='"bg-surface-gray-4 ml-1 rounded"'
+          :class="'ml-1 rounded bg-surface-gray-4'"
           :label="filterCount"
         />
       </Button>
@@ -117,18 +104,18 @@ const filterCount = computed(() =>
       <Button
         v-if="filterCount != 0"
         @click="clearRows(close)"
-        class="bg-surface-gray-4 rounded-l-none"
+        class="rounded-l-none bg-surface-gray-4"
         icon="x"
       />
     </template>
 
     <template #body="{ close }">
-      <div class="grid lg:grid-cols-[1fr_0.7fr_1fr_auto] gap-2 items-center">
+      <div class="grid items-center gap-2 lg:grid-cols-[1fr_0.7fr_1fr_auto]">
         <!-- input fields -->
         <template v-for="(row, index) in rows">
           <Combobox
             :options="doctypeFields.data"
-            :placeholder='"Select an option..."'
+            :placeholder="'Select an option...'"
             :disabled="false"
             @update:modelValue="(e) => updateFilter(e, index)"
             v-model="row.field.fieldName"
@@ -141,25 +128,14 @@ const filterCount = computed(() =>
             @update:modelValue="apply"
           />
 
-          <component
-            :is="getValueControl(row)"
-            v-model="row.value"
-            @update:modelValue="apply"
-          />
-          <Button
-            class="ml-auto lg:-ml-1"
-            icon="x"
-            variant="ghost"
-            @click="deleteRow(index)"
-          />
+          <component :is="getValueControl(row)" v-model="row.value" @update:modelValue="apply" />
+          <Button class="ml-auto lg:-ml-1" icon="x" variant="ghost" @click="deleteRow(index)" />
         </template>
       </div>
 
       <!-- footer buttons -->
-      <div class="flex gap-2 justify-between mt-4">
-        <Button variant="ghost" @click="insertRow()" icon-left="plus">
-          Add Filter
-        </Button>
+      <div class="mt-4 flex justify-between gap-2">
+        <Button variant="ghost" @click="insertRow()" icon-left="plus"> Add Filter </Button>
 
         <Button variant="ghost" @click="clearRows(close)" icon-left="trash-2">
           Clear Filters
diff --git a/frappe/Filter/types.ts b/frappe/Filter/types.ts
index 7ca5b86c4..235fe32e4 100644
--- a/frappe/Filter/types.ts
+++ b/frappe/Filter/types.ts
@@ -1,15 +1,15 @@
 export interface FilterProps {
-	doctype: string;
+  doctype: string
 }
 
 export interface Field {
-	fieldName: string;
-	fieldType: string;
-	options?: string[];
+  fieldName: string
+  fieldType: string
+  options?: string[]
 }
 
 export interface StateRow {
-	field: Field;
-	operator: string;
-	value: string;
+  field: Field
+  operator: string
+  value: string
 }
diff --git a/frappe/Filter/utils.ts b/frappe/Filter/utils.ts
index b54359e3d..56268cbfc 100644
--- a/frappe/Filter/utils.ts
+++ b/frappe/Filter/utils.ts
@@ -1,15 +1,15 @@
 import { h } from 'vue'
-import Select from '../../src/components/Select/Select.vue'
-import TextInput from '../../src/components/TextInput/TextInput.vue'
-import Rating from '../../src/components/Rating/Rating.vue'
+
 import DatePicker from '../../src/components/DatePicker/DatePicker.vue'
 import DateRangePicker from '../../src/components/DatePicker/DateRangePicker.vue'
 import DateTimePicker from '../../src/components/DatePicker/DateTimePicker.vue'
+import Rating from '../../src/components/Rating/Rating.vue'
+import Select from '../../src/components/Select/Select.vue'
+import TextInput from '../../src/components/TextInput/TextInput.vue'
 import { Link } from '../Link'
-
 import type { Field, StateRow } from './types'
 
-const typeCheck = ['Check']
+const typeCheck = new Set(['Check'])
 const typeLink = ['Link', 'Dynamic Link']
 const typeNumber = ['Float', 'Int', 'Currency', 'Percent']
 const typeSelect = ['Select']
@@ -57,7 +57,7 @@ export const getOperators = (field: Field) => {
     return baseOperators
   }
 
-  if (typeCheck.includes(fieldType)) {
+  if (typeCheck.has(fieldType)) {
     return [{ label: 'Equals', value: 'equals' }]
   }
 
@@ -139,7 +139,7 @@ export const getValueControl = (row: StateRow) => {
     return h(TextInput, { placeholder: 'Enter value' })
   }
 
-  if (typeSelect.includes(fieldType) || typeCheck.includes(fieldType)) {
+  if (typeSelect.includes(fieldType) || typeCheck.has(fieldType)) {
     let _options = options || ['Yes', 'No']
 
     return h(Select, { placeholder: 'Select Option', options: _options })
@@ -186,10 +186,7 @@ export const getValueControl = (row: StateRow) => {
   return h(TextInput, { placeholder: 'Enter Value' })
 }
 
-export const getDefaultOperator = (field: {
-  fieldType: string
-  fieldName: string
-}) => {
+export const getDefaultOperator = (field: { fieldType: string; fieldName: string }) => {
   const operators = getOperators(field)
   return operators[0].value
 }
@@ -202,22 +199,22 @@ const transformIn = (row: StateRow) => {
 }
 
 const operatorMap = {
-  is: 'is',
+  'is': 'is',
   'is not': 'is not',
-  in: 'in',
+  'in': 'in',
   'not in': 'not in',
-  equals: '=',
+  'equals': '=',
   'not equals': '!=',
-  yes: true,
-  no: false,
-  like: 'LIKE',
+  'yes': true,
+  'no': false,
+  'like': 'LIKE',
   'not like': 'NOT LIKE',
   '>': '>',
   '<': '<',
   '>=': '>=',
   '<=': '<=',
-  between: 'between',
-  timespan: 'timespan',
+  'between': 'between',
+  'timespan': 'timespan',
 }
 
 export const parseFilters = (filters: any) => {
@@ -227,12 +224,9 @@ export const parseFilters = (filters: any) => {
     if (['equals', '='].includes(cur.operator)) {
       cur.value = cur.value == 'Yes' ? true : cur.value == 'No' ? false : cur.value
     } else if (cur.operator === 'between') {
-      cur.value = [...cur.value.split(',')]
+      cur.value = cur.value.split(',')
     }
 
-    return [
-      ...acc,
-      [cur.field.fieldName, operatorMap[cur.operator.toLowerCase()], cur.value],
-    ]
+    return [...acc, [cur.field.fieldName, operatorMap[cur.operator.toLowerCase()], cur.value]]
   }, [])
 }
diff --git a/frappe/Help/HelpModal.vue b/frappe/Help/HelpModal.vue
index 366fc1b92..ca01a3111 100644
--- a/frappe/Help/HelpModal.vue
+++ b/frappe/Help/HelpModal.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-show="show"
-    class="fixed z-50 right-0 w-80 h-[calc(100%_-_80px)] text-ink-gray-9 m-5 mt-[62px] p-3 flex gap-2 flex-col justify-between rounded-lg bg-surface-modal shadow-2xl"
+    class="fixed right-0 z-50 m-5 mt-[62px] flex h-[calc(100%_-_80px)] w-80 flex-col justify-between gap-2 rounded-lg bg-surface-modal p-3 text-ink-gray-9 shadow-2xl"
     :class="{ 'top-[calc(100%_-_120px)] border': minimize }"
     @click.stop
   >
@@ -14,17 +14,14 @@
           <Button variant="ghost" icon="more-horizontal" />
         </Dropdown>
         <Button @click="minimize = !minimize" variant="ghost">
-          <component
-            :is="minimize ? MaximizeIcon : MinimizeIcon"
-            class="h-3.5"
-          />
+          <component :is="minimize ? MaximizeIcon : MinimizeIcon" class="h-3.5" />
         </Button>
         <Button variant="ghost" @click="show = false">
           <FeatherIcon name="x" class="h-3.5" />
         </Button>
       </div>
     </div>
-    <div class="h-full overflow-hidden flex flex-col">
+    <div class="flex h-full flex-col overflow-hidden">
       <OnboardingSteps
         v-if="!isOnboardingStepsCompleted && !showHelpCenter"
         :title="title"
@@ -35,15 +32,11 @@
         :afterResetAll="afterResetAll"
         :appName="appName"
       />
-      <HelpCenter
-        v-else-if="showHelpCenter"
-        v-model="articles"
-        :docsLink="docsLink"
-      />
+      <HelpCenter v-else-if="showHelpCenter" v-model="articles" :docsLink="docsLink" />
     </div>
     <div v-for="item in footerItems" class="flex flex-col gap-1.5">
       <div
-        class="w-full flex gap-2 items-center hover:bg-surface-gray-1 text-ink-gray-8 rounded px-2 py-1.5 cursor-pointer"
+        class="flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-ink-gray-8 hover:bg-surface-gray-1"
         @click="item.onClick"
       >
         <component :is="item.icon" class="h-4" />
@@ -53,19 +46,20 @@
   </div>
 </template>
 <script setup>
-import Dropdown from '../../src/components/Dropdown/Dropdown.vue'
-import Button from '../../src/components/Button/Button.vue'
-import StepsIcon from '../../icons/StepsIcon.vue'
-import MinimizeIcon from '../../icons/MinimizeIcon.vue'
-import MaximizeIcon from '../../icons/MaximizeIcon.vue'
+import { onMounted, computed } from 'vue'
+
 import HelpIcon from '../../icons/HelpIcon.vue'
-import OnboardingSteps from '../Onboarding/OnboardingSteps.vue'
+import MaximizeIcon from '../../icons/MaximizeIcon.vue'
+import MinimizeIcon from '../../icons/MinimizeIcon.vue'
+import StepsIcon from '../../icons/StepsIcon.vue'
+import Button from '../../src/components/Button/Button.vue'
+import Dropdown from '../../src/components/Dropdown/Dropdown.vue'
+import FeatherIcon from '../../src/components/FeatherIcon.vue'
+import { minimize } from '../Help/help'
+import { showHelpCenter } from '../HelpCenter/helpCenter'
 import HelpCenter from '../HelpCenter/HelpCenter.vue'
 import { useOnboarding } from '../Onboarding/onboarding'
-import { showHelpCenter } from '../HelpCenter/helpCenter'
-import { minimize } from '../Help/help'
-import { onMounted, computed } from 'vue'
-import FeatherIcon from '../../src/components/FeatherIcon.vue'
+import OnboardingSteps from '../Onboarding/OnboardingSteps.vue'
 
 const props = defineProps({
   appName: {
@@ -102,9 +96,7 @@ const props = defineProps({
   },
 })
 
-const { syncStatus, resetAll, isOnboardingStepsCompleted } = useOnboarding(
-  props.appName,
-)
+const { syncStatus, resetAll, isOnboardingStepsCompleted } = useOnboarding(props.appName)
 
 const show = defineModel()
 const articles = defineModel('articles')
diff --git a/frappe/HelpCenter/HelpCenter.vue b/frappe/HelpCenter/HelpCenter.vue
index 8f308f69d..84e7bcc8f 100644
--- a/frappe/HelpCenter/HelpCenter.vue
+++ b/frappe/HelpCenter/HelpCenter.vue
@@ -12,22 +12,16 @@
         </template>
       </TextInput>
     </div>
-    <div
-      class="flex justify-between items-center text-base text-ink-gray-5 mx-2"
-    >
+    <div class="mx-2 flex items-center justify-between text-base text-ink-gray-5">
       <div>All articles</div>
       <Button variant="ghost" @click="openDocs">
         <FeatherIcon name="arrow-up-right" class="h-4 text-ink-gray-5" />
       </Button>
     </div>
     <div class="flex flex-col gap-1.5 overflow-y-auto">
-      <div
-        v-for="a in parsedArticles"
-        :key="a.title"
-        class="flex flex-col gap-1.5"
-      >
+      <div v-for="a in parsedArticles" :key="a.title" class="flex flex-col gap-1.5">
         <div
-          class="flex items-center justify-between p-1.5 hover:bg-surface-gray-1 rounded cursor-pointer"
+          class="flex cursor-pointer items-center justify-between rounded p-1.5 hover:bg-surface-gray-1"
           @click="a.opened = !a.opened"
         >
           <div class="flex items-center gap-2">
@@ -38,11 +32,11 @@
             <div class="text-base text-ink-gray-8">{{ a.title }}</div>
           </div>
         </div>
-        <div v-show="a.opened" class="flex flex-col gap-1.5 ml-5">
+        <div v-show="a.opened" class="ml-5 flex flex-col gap-1.5">
           <div
             v-for="subArticle in a.subArticles"
             :key="subArticle.name"
-            class="group flex items-center justify-between gap-2 p-1.5 hover:bg-surface-gray-1 rounded cursor-pointer"
+            class="group flex cursor-pointer items-center justify-between gap-2 rounded p-1.5 hover:bg-surface-gray-1"
             @click="() => openDoc(subArticle.name)"
           >
             <div class="flex items-center gap-2">
@@ -53,7 +47,7 @@
             </div>
             <FeatherIcon
               name="arrow-up-right"
-              class="h-4 hidden group-hover:flex text-ink-gray-5"
+              class="hidden h-4 text-ink-gray-5 group-hover:flex"
             />
           </div>
         </div>
@@ -62,10 +56,11 @@
   </div>
 </template>
 <script setup>
+import { ref, computed, onMounted } from 'vue'
+
 import Button from '../../src/components/Button/Button.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
 import TextInput from '../../src/components/TextInput/TextInput.vue'
-import { ref, computed, onMounted } from 'vue'
 
 const props = defineProps({
   docsLink: {
diff --git a/frappe/Icons/FilterIcon.vue b/frappe/Icons/FilterIcon.vue
index 002168e06..adcf1c463 100644
--- a/frappe/Icons/FilterIcon.vue
+++ b/frappe/Icons/FilterIcon.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="16"
-    height="17"
-    viewBox="0 0 16 17"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M2 4.5H14"
       stroke="currentColor"
diff --git a/frappe/Link/Link.vue b/frappe/Link/Link.vue
index c395ec5ab..6bbd20ac5 100644
--- a/frappe/Link/Link.vue
+++ b/frappe/Link/Link.vue
@@ -12,7 +12,7 @@
       :variant="props.variant"
     >
       <template #create-new="{ searchTerm }">
-        <LucidePlus class="size-4 mr-2" />
+        <LucidePlus class="mr-2 size-4" />
         <span class="font-medium"> Create new {{ doctype }}</span>
       </template>
     </Combobox>
@@ -21,14 +21,15 @@
 
 <script setup lang="ts">
 import { watch, useAttrs, computed } from 'vue'
+import LucidePlus from '~icons/lucide/plus'
+
 import { Combobox, type ComboboxOption } from '../../src/components/Combobox'
 import FormLabel from '../../src/components/FormLabel.vue'
-import debounce from '../../src/utils/debounce'
 // @ts-ignore - Vue SFC without explicit types
 import { createResource } from '../../src/resources'
+import debounce from '../../src/utils/debounce'
 import { frappeRequest } from '../../src/utils/frappeRequest'
 import type { LinkProps, SelectOption } from './types'
-import LucidePlus from '~icons/lucide/plus'
 
 const props = withDefaults(defineProps<LinkProps>(), {
   label: '',
diff --git a/frappe/Link/types.ts b/frappe/Link/types.ts
index cc1dd026f..29c9f8163 100644
--- a/frappe/Link/types.ts
+++ b/frappe/Link/types.ts
@@ -1,4 +1,4 @@
-import { ComboboxVariant } from '../../src/components/Combobox/types'
+import type { ComboboxVariant } from '../../src/components/Combobox/types'
 
 export interface LinkProps {
   doctype: string
diff --git a/frappe/Onboarding/GettingStartedBanner.vue b/frappe/Onboarding/GettingStartedBanner.vue
index ef630d484..4de4cc67d 100644
--- a/frappe/Onboarding/GettingStartedBanner.vue
+++ b/frappe/Onboarding/GettingStartedBanner.vue
@@ -1,14 +1,11 @@
 <template>
   <div
     v-if="!isSidebarCollapsed"
-    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-modal text-base"
+    class="flex flex-col gap-3 rounded-lg bg-surface-modal px-3 py-2.5 text-base shadow-sm"
   >
-    <div
-      v-if="stepsCompleted != totalSteps"
-      class="inline-flex text-ink-gray-9 gap-2"
-    >
-      <StepsIcon class="h-4 my-0.5 shrink-0" />
-      <div class="flex flex-col text-p-sm gap-0.5">
+    <div v-if="stepsCompleted != totalSteps" class="inline-flex gap-2 text-ink-gray-9">
+      <StepsIcon class="my-0.5 h-4 shrink-0" />
+      <div class="flex flex-col gap-0.5 text-p-sm">
         <div class="font-medium">
           {{ 'Getting started' }}
         </div>
@@ -19,9 +16,9 @@
     </div>
     <div v-else class="flex flex-col gap-1">
       <div class="flex items-center justify-between gap-1">
-        <div class="flex items-center gap-2 shrink-0">
-          <StepsIcon class="h-4 my-0.5" />
-          <div class="text-ink-gray-9 font-medium">
+        <div class="flex shrink-0 items-center gap-2">
+          <StepsIcon class="my-0.5 h-4" />
+          <div class="font-medium text-ink-gray-9">
             {{ 'You are all set' }}
           </div>
         </div>
@@ -52,16 +49,16 @@
     </Button>
   </div>
   <Button v-else-if="stepsCompleted != totalSteps" @click="openOnboarding">
-    <StepsIcon class="h-4 my-0.5 shrink-0" />
+    <StepsIcon class="my-0.5 h-4 shrink-0" />
   </Button>
 </template>
 <script setup>
 import StepsIcon from '../../icons/StepsIcon.vue'
 import Button from '../../src/components/Button/Button.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
-import { useOnboarding } from './onboarding'
-import { showHelpCenter } from '../HelpCenter/helpCenter'
 import { showHelpModal, minimize } from '../Help/help'
+import { showHelpCenter } from '../HelpCenter/helpCenter'
+import { useOnboarding } from './onboarding'
 
 const props = defineProps({
   isSidebarCollapsed: {
@@ -74,8 +71,7 @@ const props = defineProps({
   },
 })
 
-const { stepsCompleted, totalSteps, isOnboardingStepsCompleted } =
-  useOnboarding(props.appName)
+const { stepsCompleted, totalSteps, isOnboardingStepsCompleted } = useOnboarding(props.appName)
 
 const openOnboarding = () => {
   minimize.value = false
diff --git a/frappe/Onboarding/IntermediateStepModal.vue b/frappe/Onboarding/IntermediateStepModal.vue
index 8593ef1df..bf1c870df 100644
--- a/frappe/Onboarding/IntermediateStepModal.vue
+++ b/frappe/Onboarding/IntermediateStepModal.vue
@@ -5,15 +5,9 @@
     </template>
     <template #body-content>
       <slot>
-        <div class="flex flex-col gap-2 text-ink-gray-9 text-base">
+        <div class="flex flex-col gap-2 text-base text-ink-gray-9">
           <div v-if="currentStep.message">{{ currentStep.message }}</div>
-          <video
-            v-if="currentStep.videoURL"
-            class="w-full rounded"
-            controls
-            autoplay
-            muted
-          >
+          <video v-if="currentStep.videoURL" class="w-full rounded" controls autoplay muted>
             <source :src="currentStep.videoURL" type="video/mp4" />
             Your browser does not support the video tag.
           </video>
@@ -26,9 +20,10 @@
   </Dialog>
 </template>
 <script setup>
-import { Dialog } from '../../src/components/Dialog'
 import { computed } from 'vue'
 
+import { Dialog } from '../../src/components/Dialog'
+
 const props = defineProps({
   currentStep: {
     type: Object,
diff --git a/frappe/Onboarding/OnboardingSteps.vue b/frappe/Onboarding/OnboardingSteps.vue
index 5f4b8477e..8080efedc 100644
--- a/frappe/Onboarding/OnboardingSteps.vue
+++ b/frappe/Onboarding/OnboardingSteps.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col justify-center items-center gap-1 mt-4 mb-7">
-    <component :is="logo" class="size-10 shrink-0 rounded mb-4" />
+  <div class="mb-7 mt-4 flex flex-col items-center justify-center gap-1">
+    <component :is="logo" class="mb-4 size-10 shrink-0 rounded" />
     <div class="text-base font-medium">
       {{ 'Welcome to ' + title }}
     </div>
@@ -9,7 +9,7 @@
     </div>
   </div>
   <div class="flex flex-col gap-2.5 overflow-hidden">
-    <div class="flex justify-between items-center py-0.5">
+    <div class="flex items-center justify-between py-0.5">
       <Badge
         :label="`${completedPercentage}% completed`"
         :theme="completedPercentage == 100 ? 'green' : 'orange'"
@@ -34,17 +34,12 @@
       <div
         v-for="step in steps"
         :key="step.title"
-        class="group w-full flex gap-2 justify-between items-center hover:bg-surface-gray-1 rounded px-2 py-1.5 cursor-pointer"
-        @click.stop="
-          () => !step.completed && !isDependent(step) && step.onClick()
-        "
+        class="group flex w-full cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 hover:bg-surface-gray-1"
+        @click.stop="() => !step.completed && !isDependent(step) && step.onClick()"
       >
-        <component
-          :is="isDependent(step) ? Tooltip : 'div'"
-          :text="dependsOnTooltip(step)"
-        >
+        <component :is="isDependent(step) ? Tooltip : 'div'" :text="dependsOnTooltip(step)">
           <div
-            class="flex gap-2 items-center"
+            class="flex items-center gap-2"
             :class="[
               step.completed
                 ? 'text-ink-gray-5'
@@ -62,13 +57,13 @@
         <Button
           v-if="!step.completed && !isDependent(step)"
           :label="'Skip'"
-          class="!h-4 text-xs !text-ink-gray-6 hidden group-hover:flex"
+          class="hidden !h-4 text-xs !text-ink-gray-6 group-hover:flex"
           @click="() => skip(step.name, afterSkip)"
         />
         <Button
           v-else-if="!isDependent(step)"
           :label="'Reset'"
-          class="!h-4 text-xs !text-ink-gray-6 hidden group-hover:flex"
+          class="hidden !h-4 text-xs !text-ink-gray-6 group-hover:flex"
           @click.stop="() => reset(step.name, afterReset)"
         />
       </div>
@@ -76,10 +71,10 @@
   </div>
 </template>
 <script setup>
-import { useOnboarding } from './onboarding'
-import Tooltip from '../../src/components/Tooltip/Tooltip.vue'
-import Button from '../../src/components/Button/Button.vue'
 import Badge from '../../src/components/Badge/Badge.vue'
+import Button from '../../src/components/Button/Button.vue'
+import Tooltip from '../../src/components/Tooltip/Tooltip.vue'
+import { useOnboarding } from './onboarding'
 
 const props = defineProps({
   appName: {
@@ -132,14 +127,6 @@ function dependsOnTooltip(step) {
   return ''
 }
 
-const {
-  steps,
-  stepsCompleted,
-  totalSteps,
-  completedPercentage,
-  skip,
-  skipAll,
-  reset,
-  resetAll,
-} = useOnboarding(props.appName)
+const { steps, stepsCompleted, totalSteps, completedPercentage, skip, skipAll, reset, resetAll } =
+  useOnboarding(props.appName)
 </script>
diff --git a/frappe/Onboarding/onboarding.js b/frappe/Onboarding/onboarding.js
index c9a329ee7..8c583d2aa 100644
--- a/frappe/Onboarding/onboarding.js
+++ b/frappe/Onboarding/onboarding.js
@@ -1,9 +1,10 @@
-import call from '../../src/utils/call'
+import { useStorage } from '@vueuse/core'
+import { computed, reactive } from 'vue'
+
 import { createResource } from '../../src/resources'
+import call from '../../src/utils/call'
 import { minimize, showHelpModal } from '../Help/help'
 import { sessionUser } from '../session'
-import { useStorage } from '@vueuse/core'
-import { computed, reactive } from 'vue'
 
 const onboardings = reactive({})
 const onboardingStatus = useStorage('onboardingStatus', {})
@@ -19,8 +20,7 @@ export function useOnboarding(appName) {
   )
 
   const onboardingSteps = computed(
-    () =>
-      onboardingStatus.value?.[user]?.[appName + '_onboarding_status'] || [],
+    () => onboardingStatus.value?.[user]?.[appName + '_onboarding_status'] || [],
   )
 
   if (!onboardingSteps.value.length && !isOnboardingStepsCompleted.value) {
@@ -60,22 +60,18 @@ export function useOnboarding(appName) {
     updateAll(false, callback)
   }
 
-  function updateOnboardingStep(
-    step,
-    value = true,
-    skipped = false,
-    callback = null,
-  ) {
+  function updateOnboardingStep(step, value = true, skipped = false, callback = null) {
     if (isOnboardingStepsCompleted.value) return
 
     if (!onboardingSteps.value.length) {
       if (!onboardingStatus.value[user]) {
         onboardingStatus.value[user] = {}
       }
-      onboardingStatus.value[user][appName + '_onboarding_status'] =
-        onboardings[appName].map((s) => {
+      onboardingStatus.value[user][appName + '_onboarding_status'] = onboardings[appName].map(
+        (s) => {
           return { name: s.name, completed: false }
-        })
+        },
+      )
     }
 
     let index = onboardingSteps.value.findIndex((s) => s.name === step)
@@ -99,10 +95,11 @@ export function useOnboarding(appName) {
         onboardingStatus.value[user] = {}
       }
 
-      onboardingStatus.value[user][appName + '_onboarding_status'] =
-        onboardings[appName].map((s) => {
+      onboardingStatus.value[user][appName + '_onboarding_status'] = onboardings[appName].map(
+        (s) => {
           return { name: s.name, completed: value }
-        })
+        },
+      )
     } else {
       onboardingSteps.value.forEach((step) => {
         step.completed = value
diff --git a/frappe/drive/components/AppSwitcher.vue b/frappe/drive/components/AppSwitcher.vue
index ac14a3e93..f3f1e9077 100644
--- a/frappe/drive/components/AppSwitcher.vue
+++ b/frappe/drive/components/AppSwitcher.vue
@@ -20,9 +20,9 @@ const open = ref(false)
 </script>
 
 <template>
-  <div class="fixed left-0 top-0 h-screen w-3 z-40" @mouseenter="open = true" />
+  <div class="fixed left-0 top-0 z-40 h-screen w-3" @mouseenter="open = true" />
   <aside
-    class="fixed left-0 top-0 h-screen z-50 transition-transform duration-300 ease-out bg-surface-white border-r border-gray-200 px-2"
+    class="fixed left-0 top-0 z-50 h-screen border-r border-gray-200 bg-surface-white px-2 transition-transform duration-300 ease-out"
     :class="!open && '-translate-x-full'"
     @mouseleave="open = false"
   >
@@ -33,13 +33,9 @@ const open = ref(false)
           :key="app.route"
           :href="app.route"
           :title="app.title"
-          class="group flex items-center justify-center rounded-md hover:shadow-sm transition"
+          class="group flex items-center justify-center rounded-md transition hover:shadow-sm"
         >
-          <img
-            :src="app.logo"
-            :alt="app.title"
-            class="size-7 opacity-80 group-hover:opacity-100"
-          />
+          <img :src="app.logo" :alt="app.title" class="size-7 opacity-80 group-hover:opacity-100" />
         </a>
       </div>
     </div>
diff --git a/frappe/drive/components/InfoDialog.vue b/frappe/drive/components/InfoDialog.vue
index b28937d35..d3496f15c 100644
--- a/frappe/drive/components/InfoDialog.vue
+++ b/frappe/drive/components/InfoDialog.vue
@@ -1,12 +1,15 @@
 <template>
   <Dialog v-model="open" @close="dialogType = ''">
     <template #body-title>
-      <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9 cursor-pointer pr-2" @click="emitter.emit('rename')">
+      <h3
+        class="cursor-pointer pr-2 text-2xl font-semibold leading-6 text-ink-gray-9"
+        @click="emitter.emit('rename')"
+      >
         {{ entity.title }}
       </h3>
     </template>
     <template #body-content>
-      <ul class="space-y-3 text-sm mb-4 text-ink-gray-8">
+      <ul class="mb-4 space-y-3 text-sm text-ink-gray-8">
         <span class="text-base font-semibold">Information</span>
         <li>
           <span class="inline-block w-24 text-ink-gray-5">{{ __('Owner') }}:</span>
@@ -38,48 +41,50 @@
         </li>
       </ul>
 
-      <ul v-if="editor?.storage?.characterCount" class="space-y-3 text-sm mb-4 text-ink-gray-8">
+      <ul v-if="editor?.storage?.characterCount" class="mb-4 space-y-3 text-sm text-ink-gray-8">
         <span class="text-base font-semibold">{{ __('Stats') }}</span>
         <li>
           <span class="inline-block w-24 text-ink-gray-5">{{ __('Words') }}:</span>
-          <span class="col-span-1">{{
-            editor.storage.characterCount.words()
-            }}</span>
+          <span class="col-span-1">{{ editor.storage.characterCount.words() }}</span>
         </li>
         <li>
           <span class="inline-block w-24 text-ink-gray-5">{{ __('Characters') }}:</span>
-          <span class="col-span-1">{{
-            editor.storage.characterCount.characters()
-            }}</span>
+          <span class="col-span-1">{{ editor.storage.characterCount.characters() }}</span>
         </li>
         <li>
           <span class="inline-block w-24 text-ink-gray-5">{{ __('Reading time') }}:</span>
           <span class="col-span-1">
             {{ Math.ceil(editor.storage.characterCount.words() / 200) }}
-            {{
-              Math.ceil(editor.storage.characterCount.words() / 200) > 1
-                ? 'minutes'
-                : 'minute'
-            }}
+            {{ Math.ceil(editor.storage.characterCount.words() / 200) > 1 ? 'minutes' : 'minute' }}
           </span>
         </li>
       </ul>
-      <div class="flex justify-between items-center">
+      <div class="flex items-center justify-between">
         <span class="text-base font-semibold text-ink-gray-8">Access</span>
-        <Button v-if="entity.share" :variant="'subtle'" size="sm"
-          class="rounded flex justify-center items-center scale-[90%]" @click="emitter.emit('share')">
+        <Button
+          v-if="entity.share"
+          :variant="'subtle'"
+          size="sm"
+          class="flex scale-[90%] items-center justify-center rounded"
+          @click="emitter.emit('share')"
+        >
           {{ __('Manage') }}
         </Button>
       </div>
-      <LoadingIndicator v-if="!getGeneralAccess.data?.type" class="size-4 mx-auto my-1" />
-      <ul v-else class="space-y-3 text-sm py-2">
+      <LoadingIndicator v-if="!getGeneralAccess.data?.type" class="mx-auto my-1 size-4" />
+      <ul v-else class="space-y-3 py-2 text-sm">
         <li class="flex">
           <span class="inline-block w-24 text-ink-gray-5">{{ __('General') }}:</span>
           <div class="col-span-1 flex gap-2">
-            <div class="col-span-1 flex gap-2 items-center text-ink-gray-8">
-              <div class="rounded-full flex items-center justify-center p-0.5 size-4.5"
-                :class="accessConfig[getGeneralAccess.data.type].color">
-                <component :is="accessConfig[getGeneralAccess.data.type].icon" class="h-[90%] w-[90%]" />
+            <div class="col-span-1 flex items-center gap-2 text-ink-gray-8">
+              <div
+                class="flex size-4.5 items-center justify-center rounded-full p-0.5"
+                :class="accessConfig[getGeneralAccess.data.type].color"
+              >
+                <component
+                  :is="accessConfig[getGeneralAccess.data.type].icon"
+                  class="h-[90%] w-[90%]"
+                />
               </div>
               <span>{{ accessConfig[getGeneralAccess.data.type].label }}</span>
             </div>
@@ -94,17 +99,18 @@
               (userAccess.data.length === 1 ? __('person') : __('people'))
             }}
             {{
-              userAccess.data.length < 3 ? '(' + userAccess.data.map((k) => k.user).join(', ') + ')'
+              userAccess.data.length < 3
+                ? '(' + userAccess.data.map((k) => k.user).join(', ') + ')'
                 : ''
             }}
           </span>
           <span v-else>-</span>
         </li>
       </ul>
-      <ul v-if="developer" class="space-y-3 text-sm text-ink-gray-8 mb-4 mt-4">
+      <ul v-if="developer" class="mb-4 mt-4 space-y-3 text-sm text-ink-gray-8">
         <div>
           <span class="text-base font-semibold">{{ __('Developer') }}</span>
-          <Button variant="subtle" size="sm" class="scale-[90%] float-right">
+          <Button variant="subtle" size="sm" class="float-right scale-[90%]">
             <a :href="'/app/drive-file/' + entity.name" target="_blank">Open in Desk</a>
           </Button>
         </div>
@@ -130,21 +136,15 @@
 </template>
 
 <script setup>
-import {
-  Dialog,
-  Button,
-  LoadingIndicator,
-  createResource,
-} from '../../../src'
-import TagInput from './TagInput/TagInput.vue'
-import { ref, inject } from 'vue'
 import { onKeyDown } from '@vueuse/core'
-import { formatDate } from '../js/utils'
-
+import { ref, inject } from 'vue'
 import LucideBuilding2 from '~icons/lucide/building-2'
-import LucideLock from '~icons/lucide/lock'
 import LucideGlobe2 from '~icons/lucide/globe-2'
+import LucideLock from '~icons/lucide/lock'
 
+import { Dialog, Button, LoadingIndicator, createResource } from '../../../src'
+import { formatDate } from '../js/utils'
+import TagInput from './TagInput/TagInput.vue'
 
 const dialogType = defineModel()
 const open = ref(true)
@@ -164,8 +164,7 @@ const getGeneralAccess = createResource({
   }),
   transform: (data) => {
     if (!data || !data.read) {
-      if (getGeneralAccess.params.user === 'Guest')
-        getGeneralAccess.fetch({ team: 1 })
+      if (getGeneralAccess.params.user === 'Guest') getGeneralAccess.fetch({ team: 1 })
       else
         return {
           type: 'restricted',
diff --git a/frappe/drive/components/MoveDialog.vue b/frappe/drive/components/MoveDialog.vue
index 6e8571c3f..cdb57df77 100644
--- a/frappe/drive/components/MoveDialog.vue
+++ b/frappe/drive/components/MoveDialog.vue
@@ -2,14 +2,14 @@
   <Dialog v-model="open" :options="{ size: 'lg' }" @close="dialogType = ''">
     <template #body-main>
       <div class="p-4 sm:px-6">
-        <div class="flex w-full justify-between gap-x-15 mb-4">
-          <div class="font-semibold text-2xl flex text-nowrap overflow-hidden">
+        <div class="mb-4 flex w-full justify-between gap-x-15">
+          <div class="flex overflow-hidden text-nowrap text-2xl font-semibold">
             <template v-if="props.entities.length > 1">
               Moving {{ props.entities.length }} items
             </template>
             <template v-else>
               Moving "
-              <div class="truncate max-w-[80%]">
+              <div class="max-w-[80%] truncate">
                 {{ props.entities[0].title }}
               </div>
               "
@@ -23,23 +23,12 @@
         </div>
         <Tabs v-model="tabIndex" as="div" :tabs="tabs">
           <template #tab-panel>
-            <div class="py-1 h-64 overflow-auto flex flex-col">
-              <TeamSelector
-                v-if="tabIndex === 1"
-                v-model="chosenTeam"
-                class="py-2 px-1"
-              />
-              <Tree
-                v-for="k in tree.children"
-                :key="k.value"
-                node-key="value"
-                :node="k"
-              >
-                <template
-                  #node="{ node, hasChildren, isCollapsed, toggleCollapsed }"
-                >
+            <div class="flex h-64 flex-col overflow-auto py-1">
+              <TeamSelector v-if="tabIndex === 1" v-model="chosenTeam" class="px-1 py-2" />
+              <Tree v-for="k in tree.children" :key="k.value" node-key="value" :node="k">
+                <template #node="{ node, hasChildren, isCollapsed, toggleCollapsed }">
                   <div
-                    class="flex items-center cursor-pointer select-none gap-1 h-7 shrink-0"
+                    class="flex h-7 shrink-0 cursor-pointer select-none items-center gap-1"
                     @click="openEntity(node)"
                   >
                     <div
@@ -48,41 +37,26 @@
                         (e) => {
                           if (isCollapsed)
                             node.children.forEach((k) =>
-                              fetchFolderContents(
-                                k,
-                                { entity_name: k.value },
-                                true,
-                              ),
+                              fetchFolderContents(k, { entity_name: k.value }, true),
                             )
                           toggleCollapsed(e)
                         }
                       "
                     >
-                      <LucideChevronDown
-                        v-if="hasChildren && !isCollapsed"
-                        class="size-3.5"
-                      />
-                      <LucideChevronRight
-                        v-else-if="hasChildren"
-                        class="size-3.5"
-                      />
+                      <LucideChevronDown v-if="hasChildren && !isCollapsed" class="size-3.5" />
+                      <LucideChevronRight v-else-if="hasChildren" class="size-3.5" />
                       <div v-else class="ps-3.5" />
                     </div>
                     <div
-                      class="flex-grow rounded-sm text-base truncate h-full flex items-center pl-1"
+                      class="flex h-full flex-grow items-center truncate rounded-sm pl-1 text-base"
                       :class="[
-                        selected === node.value
-                          ? 'bg-surface-gray-3'
-                          : 'hover:bg-surface-gray-2',
+                        selected === node.value ? 'bg-surface-gray-3' : 'hover:bg-surface-gray-2',
                         entities[0].parent_entity === node.value
                           ? 'cursor-not-allowed hover:bg-surface-white'
                           : 'group',
                       ]"
                     >
-                      <LucideFolderClosed
-                        v-if="isCollapsed"
-                        class="mr-1 size-4"
-                      />
+                      <LucideFolderClosed v-if="isCollapsed" class="mr-1 size-4" />
                       <LucideFolder v-else class="mr-1 size-4" />
                       <div v-if="node.value === null" class="overflow-visible">
                         <Input
@@ -103,7 +77,7 @@
                         ></span
                       >
                       <Button
-                        class="shrink hidden group-hover:block ml-auto"
+                        class="ml-auto hidden shrink group-hover:block"
                         :class="{
                           '!bg-surface-gray-3': selected === node.value,
                         }"
@@ -125,19 +99,11 @@
                   </div>
                 </template>
               </Tree>
-              <div
-                v-if="tree.loading"
-                class="text-base flex justify-center flex-1"
-              >
+              <div v-if="tree.loading" class="flex flex-1 justify-center text-base">
                 <LoadingIndicator class="w-4.5" />
               </div>
-              <div
-                v-else-if="!tree.children.length"
-                class="flex justify-center flex-1"
-              >
-                <div
-                  class="self-center text-sm text-ink-gray-6 flex flex-col gap-2"
-                >
+              <div v-else-if="!tree.children.length" class="flex flex-1 justify-center">
+                <div class="flex flex-col gap-2 self-center text-sm text-ink-gray-6">
                   <LucideFolderClosed class="size-5 self-center" />
                   No folders found
                 </div>
@@ -146,21 +112,14 @@
           </template>
         </Tabs>
         <div class="flex items-center justify-between pt-4">
-          <div class="flex items-center my-auto justify-start">
-            <p class="text-sm pr-0.5 shrink-0">Moving to:</p>
-            <Dropdown
-              v-if="dropDownBreadcrumbs.length"
-              class="h-7"
-              :options="dropDownBreadcrumbs"
-            >
+          <div class="my-auto flex items-center justify-start">
+            <p class="shrink-0 pr-0.5 text-sm">Moving to:</p>
+            <Dropdown v-if="dropDownBreadcrumbs.length" class="h-7" :options="dropDownBreadcrumbs">
               <Button variant="ghost">
                 <LucideEllipsis class="size-3.5" />
               </Button>
             </Dropdown>
-            <span
-              v-if="dropDownBreadcrumbs.length"
-              class="text-ink-gray-5 mx-0.5"
-            >
+            <span v-if="dropDownBreadcrumbs.length" class="mx-0.5 text-ink-gray-5">
               {{ '/' }}
             </span>
             <div class="flex w-48 overflow-scroll">
@@ -169,19 +128,16 @@
                 :key="index"
                 class="flex items-center"
               >
-                <span
-                  v-if="breadcrumbs.length > 1 && index > 0"
-                  class="text-ink-gray-5 mx-0.5"
-                >
+                <span v-if="breadcrumbs.length > 1 && index > 0" class="mx-0.5 text-ink-gray-5">
                   {{ '/' }}
                 </span>
                 <button
-                  class="text-base cursor-pointer truncate max-w-20"
+                  class="max-w-20 cursor-pointer truncate text-base"
                   :title="crumb.title"
                   :class="
                     index === slicedBreadcrumbs.length - 1
-                      ? 'text-ink-gray-9 text-base font-medium p-1'
-                      : 'text-ink-gray-5 text-base rounded-[6px] hover:bg-surface-gray-2 p-1'
+                      ? 'p-1 text-base font-medium text-ink-gray-9'
+                      : 'rounded-[6px] p-1 text-base text-ink-gray-5 hover:bg-surface-gray-2'
                   "
                   @click="closeEntity(crumb.name)"
                 >
@@ -194,10 +150,7 @@
             variant="solid"
             class="ml-auto"
             size="sm"
-            :disabled="
-              entities[0].parent_entity !== selected &&
-              chosenTeam === entities[0].team
-            "
+            :disabled="entities[0].parent_entity !== selected && chosenTeam === entities[0].team"
             :loading="move.loading"
             @click="moveFile"
           >
@@ -213,6 +166,17 @@
 </template>
 <script setup>
 import { watch, computed, h, ref, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import LucideArrowLeftRight from '~icons/lucide/arrow-left-right'
+import LucideBuilding2 from '~icons/lucide/building-2'
+import LucideChevronDown from '~icons/lucide/chevron-down'
+import LucideChevronRight from '~icons/lucide/chevron-right'
+import LucideEllipsis from '~icons/lucide/ellipsis'
+import LucideFolder from '~icons/lucide/folder'
+import LucideFolderClosed from '~icons/lucide/folder-closed'
+import LucideFolderPlus from '~icons/lucide/folder-plus'
+import LucideHome from '~icons/lucide/home'
+import LucideX from '~icons/lucide/x'
 
 import {
   createResource,
@@ -226,19 +190,6 @@ import {
   toast,
 } from '../../../src'
 import { move, getTeams } from '../js/resources'
-
-import { useRoute } from 'vue-router'
-
-import LucideBuilding2 from '~icons/lucide/building-2'
-import LucideChevronDown from '~icons/lucide/chevron-down'
-import LucideChevronRight from '~icons/lucide/chevron-right'
-import LucideFolder from '~icons/lucide/folder'
-import LucideFolderPlus from '~icons/lucide/folder-plus'
-import LucideFolderClosed from '~icons/lucide/folder-closed'
-import LucideHome from '~icons/lucide/home'
-import LucideX from '~icons/lucide/x'
-import LucideArrowLeftRight from '~icons/lucide/arrow-left-right'
-import LucideEllipsis from '~icons/lucide/ellipsis'
 import TeamSelector from './TeamSelector.vue'
 
 const props = defineProps({
@@ -267,9 +218,7 @@ const tree = reactive({
 
 // State variables
 const selected = ref('')
-const breadcrumbs = ref([
-  { name: '', title: tabIndex.value === 0 ? 'Home' : 'Team' },
-])
+const breadcrumbs = ref([{ name: '', title: tabIndex.value === 0 ? 'Home' : 'Team' }])
 
 const tabs = [
   {
@@ -309,12 +258,7 @@ const fetchFolderContents = (tree, params = {}, nested = false) => {
         })
         node.isCollapsed = true
         tree.children.push(node)
-        if (!nested)
-          fetchFolderContents(
-            node,
-            { ...params, entity_name: node.value },
-            true,
-          )
+        if (!nested) fetchFolderContents(node, { ...params, entity_name: node.value }, true)
       })
       tree.loading = false
     },
@@ -343,8 +287,7 @@ watch(
   ([newValue, team], [prev, _]) => {
     selected.value = ''
     tree.loading = true
-    if ((newValue === 1 && !team) || (newValue === 0 && prev == newValue))
-      return
+    if ((newValue === 1 && !team) || (newValue === 0 && prev == newValue)) return
     tree.children = []
     switch (newValue) {
       case 0:
diff --git a/frappe/drive/components/RenameDialog.vue b/frappe/drive/components/RenameDialog.vue
index 9228a9e4a..d49765eb2 100644
--- a/frappe/drive/components/RenameDialog.vue
+++ b/frappe/drive/components/RenameDialog.vue
@@ -17,17 +17,11 @@
   >
     <template #body-content>
       <div class="flex gap-3">
-        <FormControl
-          v-model="newTitle"
-          v-focus
-          class="grow"
-          type="text"
-          @keyup.enter="submit"
-        />
+        <FormControl v-model="newTitle" v-focus class="grow" type="text" @keyup.enter="submit" />
         <div
           v-if="file_ext"
           disabled
-          class="w-12 text-ink-gray-7 bg-surface-gray-2 rounded text-center self-center py-1.5 text-sm"
+          class="w-12 self-center rounded bg-surface-gray-2 py-1.5 text-center text-sm text-ink-gray-7"
         >
           {{ file_ext }}
         </div>
@@ -38,6 +32,7 @@
 
 <script setup>
 import { ref } from 'vue'
+
 import { Dialog } from '../../../src'
 import { rename } from '../js/resources'
 
@@ -62,8 +57,7 @@ if (props.entity.is_group || props.entity.doc || props.entity.is_link) {
 }
 
 const submit = () => {
-  const formattedTitle =
-    newTitle.value + (file_ext.value ? '.' + file_ext.value : '')
+  const formattedTitle = newTitle.value + (file_ext.value ? '.' + file_ext.value : '')
   rename.submit({
     entity_name: props.entity.name,
     new_title: formattedTitle,
diff --git a/frappe/drive/components/Select/Select.vue b/frappe/drive/components/Select/Select.vue
index 309218b45..cb4667a1c 100644
--- a/frappe/drive/components/Select/Select.vue
+++ b/frappe/drive/components/Select/Select.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import {
   SelectContent,
   SelectGroup,
@@ -14,7 +13,10 @@ import {
   SelectValue,
   SelectViewport,
 } from 'reka-ui'
-import { SimpleOption } from '../TagInput/types'
+import { computed } from 'vue'
+import LucideChevronDown from '~icons/lucide/chevron-down'
+
+import type { SimpleOption } from '../TagInput/types'
 import {
   isGroup,
   getLabel,
@@ -24,9 +26,7 @@ import {
   RenderIcon,
   isDisabled,
 } from '../TagInput/utils'
-
-import LucideChevronDown from '~icons/lucide/chevron-down'
-import { SelectProps, SelectValue as SelectValue_ } from './types'
+import type { SelectProps, SelectValue as SelectValue_ } from './types'
 
 const props = withDefaults(defineProps<SelectProps>(), {
   placeholder: 'Select an option',
@@ -36,16 +36,12 @@ const selected = defineModel<SelectValue_>()
 const selectedOption = computed<SimpleOption | SimpleOption[]>(() => {
   if (!selected.value) return null
   if (props.multiple) {
-    return selected.value.map((k) =>
-      flatOptions.value.find((opt) => getValue(opt) === k),
-    )
+    return selected.value.map((k) => flatOptions.value.find((opt) => getValue(opt) === k))
   }
   return flatOptions.value.find((opt) => getValue(opt) === selected.value)
 })
 const selectedOptionIcon = computed(() =>
-  selectedOption.value && !props.multiple
-    ? getIcon(selectedOption.value)
-    : null,
+  selectedOption.value && !props.multiple ? getIcon(selectedOption.value) : null,
 )
 
 const flatOptions = computed<SimpleOption[]>(() =>
@@ -64,16 +60,16 @@ const labelFunction = (val: SelectValue_, selected = false) => {
     <SelectRoot v-model="selected" :multiple>
       <SelectTrigger
         :disabled
-        class="flex h-7 w-full overflow-hidden focus:ring-0 rounded bg-surface-gray-2 px-2 py-1 transition-colors hover:bg-surface-gray-3 focus:outline-0 focus:ring-0"
-        :class="{ 'opacity-50 pointer-events-none': disabled }"
+        class="flex h-7 w-full overflow-hidden rounded bg-surface-gray-2 px-2 py-1 transition-colors hover:bg-surface-gray-3 focus:outline-0 focus:ring-0"
+        :class="{ 'pointer-events-none opacity-50': disabled }"
       >
         <!-- Using SelectValue alone renders the icon too -->
         <SelectValue
           :placeholder
-          class="gap-2 text-base h-full flex items-center w-full focus:outline-0 text-ink-gray-8 data-[placeholder]:text-ink-gray-4"
+          class="flex h-full w-full items-center gap-2 text-base text-ink-gray-8 focus:outline-0 data-[placeholder]:text-ink-gray-4"
         >
           <RenderIcon v-if="selectedOptionIcon" :icon="selectedOptionIcon" />
-          <div class="flex-1 flex justify-start truncate">
+          <div class="flex flex-1 justify-start truncate">
             {{ labelFunction(selectedOption, true) }}
           </div>
           <RenderIcon :icon="LucideChevronDown" />
@@ -84,7 +80,7 @@ const labelFunction = (val: SelectValue_, selected = false) => {
         <SelectContent
           :hide-when-detached="true"
           :align="'start'"
-          class="z-10 min-w-[--reka-select-trigger-width] mt-1 bg-surface-modal overflow-hidden rounded-lg shadow-2xl"
+          class="z-10 mt-1 min-w-[--reka-select-trigger-width] overflow-hidden rounded-lg bg-surface-modal shadow-2xl"
         >
           <SelectViewport
             class="max-h-60 overflow-auto p-1.5"
@@ -99,29 +95,25 @@ const labelFunction = (val: SelectValue_, selected = false) => {
                   <hr v-if="optionOrGroup.group === true" class="my-1.5" />
                   <SelectLabel
                     v-else
-                    class="px-2.5 pt-3 pb-1.5 text-sm font-medium text-ink-gray-5 sticky top-0 bg-surface-modal z-10"
+                    class="sticky top-0 z-10 bg-surface-modal px-2.5 pb-1.5 pt-3 text-sm font-medium text-ink-gray-5"
                   >
                     {{ optionOrGroup.group }}
                   </SelectLabel>
                 </template>
                 <SelectItem
-                  v-for="(option, idx) in optionOrGroup.options || [
-                    optionOrGroup,
-                  ]"
+                  v-for="(option, idx) in optionOrGroup.options || [optionOrGroup]"
                   :key="idx"
                   :value="getValue(option)"
                   :disabled="isDisabled(option)"
-                  class="text-base leading-none text-ink-gray-7 rounded flex items-center h-7 px-2.5 py-1.5 relative select-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-surface-gray-3"
+                  class="relative flex h-7 select-none items-center rounded px-2.5 py-1.5 text-base leading-none text-ink-gray-7 data-[disabled]:pointer-events-none data-[highlighted]:bg-surface-gray-3 data-[disabled]:opacity-50 data-[highlighted]:outline-none"
                 >
                   <SelectItemText>
-                    <span class="flex items-center gap-2 pr-6 flex-1">
+                    <span class="flex flex-1 items-center gap-2 pr-6">
                       <RenderIcon :icon="getIcon(option)" />
                       {{ labelFunction(option) }}
                     </span>
                   </SelectItemText>
-                  <SelectItemIndicator
-                    class="inline-flex ml-auto items-center justify-center"
-                  >
+                  <SelectItemIndicator class="ml-auto inline-flex items-center justify-center">
                     <LucideCheck class="size-4" />
                   </SelectItemIndicator>
                 </SelectItem>
diff --git a/frappe/drive/components/ShareDialog.vue b/frappe/drive/components/ShareDialog.vue
index 0fdc26ccb..41f01725e 100644
--- a/frappe/drive/components/ShareDialog.vue
+++ b/frappe/drive/components/ShareDialog.vue
@@ -3,10 +3,10 @@
     <template #body-main>
       <div class="p-4">
         <!-- Header -->
-        <div class="flex w-full justify-between gap-x-2 mb-4">
-          <div class="font-semibold text-2xl flex text-nowrap overflow-hidden">
+        <div class="mb-4 flex w-full justify-between gap-x-2">
+          <div class="flex overflow-hidden text-nowrap text-2xl font-semibold">
             Sharing "
-            <div class="truncate max-w-[80%]">
+            <div class="max-w-[80%] truncate">
               {{ entity?.title }}
             </div>
             "
@@ -22,7 +22,7 @@
             <Button
               v-else
               variant="ghost"
-              class="flex text-sm gap-1 items-center mb-3 cursor-pointer"
+              class="mb-3 flex cursor-pointer items-center gap-1 text-sm"
               label="Back"
               :icon-left="h(LucideArrowLeft, { class: 'size-4' })"
               @click="advanced = false"
@@ -39,49 +39,34 @@
         </div>
         <div v-else>
           <!-- General section -->
-          <div class="border-b pb-4 mb-4">
-            <div class="mb-2 text-ink-gray-5 font-medium text-base">
-              General Access
-            </div>
-            <div class="flex justify-between mt-3">
+          <div class="mb-4 border-b pb-4">
+            <div class="mb-2 text-base font-medium text-ink-gray-5">General Access</div>
+            <div class="mt-3 flex justify-between">
               <div class="flex flex-col gap-2">
                 <Select
                   v-model="generalAccessLevel"
                   :options="levelOptions"
-                  @update:model-value="
-                    (val) => updateGeneralAccess(val, generalPerms)
-                  "
+                  @update:model-value="(val) => updateGeneralAccess(val, generalPerms)"
                 >
                   <template #prefix>
-                    <component
-                      :is="generalAccessLevel.icon"
-                      class="mr-2 size-4 text-ink-gray-6"
-                    />
+                    <component :is="generalAccessLevel.icon" class="mr-2 size-4 text-ink-gray-6" />
                   </template>
                   <template #item-prefix="{ option }">
-                    <component
-                      :is="option.icon"
-                      class="size-4 text-ink-gray-6"
-                    />
+                    <component :is="option.icon" class="size-4 text-ink-gray-6" />
                   </template>
                 </Select>
-                <TeamSelector
-                  v-if="generalAccessLevel == 'team'"
-                  v-model="chosenTeam"
-                />
+                <TeamSelector v-if="generalAccessLevel == 'team'" v-model="chosenTeam" />
               </div>
               <Select
                 v-if="generalAccessLevel !== 'restricted'"
                 v-model="generalPerms"
                 :options="accessOptions"
-                @update:model-value="
-                  (val) => updateGeneralAccess(generalAccessLevel, val)
-                "
+                @update:model-value="(val) => updateGeneralAccess(generalAccessLevel, val)"
               />
             </div>
           </div>
           <!-- Members section -->
-          <div class="text-ink-gray-5 font-medium text-base mb-2">Members</div>
+          <div class="mb-2 text-base font-medium text-ink-gray-5">Members</div>
           <div class="flex gap-3 pb-2">
             <TagInput
               v-model="usersToAdd"
@@ -96,63 +81,44 @@
               "
               placeholder="Add people..."
             />
-            <Select
-              v-if="usersToAdd.length"
-              v-model="accessToAdd"
-              :options="accessOptions"
-            />
+            <Select v-if="usersToAdd.length" v-model="accessToAdd" :options="accessOptions" />
           </div>
 
           <div
             v-if="usersWithAccess.data"
-            class="flex flex-col gap-4 overflow-y-auto text-base max-h-64 py-4 mb-3 overflow-auto"
+            class="mb-3 flex max-h-64 flex-col gap-4 overflow-auto overflow-y-auto py-4 text-base"
           >
             <div
               v-for="(user, idx) in usersWithAccess.data"
               :key="user.name"
               class="flex items-center gap-3 pr-1"
             >
-              <Avatar
-                size="xl"
-                :label="user.user || user.email"
-                :image="user.user_image"
-              />
+              <Avatar size="xl" :label="user.user || user.email" :image="user.user_image" />
 
-              <div class="flex items-start flex-col gap-1">
-                <span class="font-medium text-base text-ink-gray-9">{{
+              <div class="flex flex-col items-start gap-1">
+                <span class="text-base font-medium text-ink-gray-9">{{
                   user.full_name || user.user || user.email
                 }}</span>
-                <span class="text-ink-gray-7 text-sm">{{
+                <span class="text-sm text-ink-gray-7">{{
                   user.full_name ? user.user || user.email : ''
                 }}</span>
               </div>
               <div class="ml-auto">
-                <span
-                  v-if="user.user == $store.state.user.id"
-                  class="mr-1 text-ink-gray-7"
-                >
-                  <div v-if="user.user === entity.owner" class="flex gap-1">
-                    Owner (you)
-                  </div>
+                <span v-if="user.user == $store.state.user.id" class="mr-1 text-ink-gray-7">
+                  <div v-if="user.user === entity.owner" class="flex gap-1">Owner (you)</div>
                   <template v-else>You</template>
                 </span>
                 <Select
                   v-else-if="user.user !== entity.owner"
-                  :modelValue="
-                    user.write ? 'editor' : user.upload ? 'uploader' : 'reader'
-                  "
+                  :modelValue="user.write ? 'editor' : user.upload ? 'uploader' : 'reader'"
                   :options="[
                     ...accessOptions,
                     {
                       group: true,
-                      options: [
-                        { value: 'remove', label: 'Remove', theme: 'red' },
-                      ],
+                      options: [{ value: 'remove', label: 'Remove', theme: 'red' }],
                     },
                   ]"
-                  @update:model-value="
-                    (val) => updatePermissions(user, val, entity.name, idx)
-                  "
+                  @update:model-value="(val) => updatePermissions(user, val, entity.name, idx)"
                 />
                 <span v-else class="flex items-center gap-1 text-ink-gray-5">
                   Owner
@@ -162,15 +128,11 @@
             </div>
           </div>
           <div v-else class="flex min-h-[19.2vh] w-full">
-            <LoadingIndicator class="w-7 h-auto text-ink-gray-7 mx-auto" />
+            <LoadingIndicator class="mx-auto h-auto w-7 text-ink-gray-7" />
           </div>
-          <div class="w-full flex items-center justify-end">
+          <div class="flex w-full items-center justify-end">
             <div class="flex gap-2">
-              <Button
-                class="text-base"
-                variant="outline"
-                @click="getFileLink(entity)"
-              >
+              <Button class="text-base" variant="outline" @click="getFileLink(entity)">
                 <template #prefix>
                   <LucideLink2 class="w-4 text-ink-gray-6" />
                 </template>
@@ -191,31 +153,24 @@
 </template>
 <script setup>
 import { ref, computed, watch, markRaw, h } from 'vue'
-import {
-  Avatar,
-  Dialog,
-  LoadingIndicator,
-  createResource,
-  Switch,
-} from '../../../src'
-import Select from './Select/Select.vue'
-import TeamSelector from './TeamSelector.vue'
-import TagInput from './TagInput/TagInput.vue'
-import { getFileLink, dynamicList } from '../js/utils'
-
-import { usersWithAccess, updateAccess, allUsers } from '../js/resources'
-
+import LucideArrowLeft from '~icons/lucide/arrow-left'
 import LucideBuilding2 from '~icons/lucide/building-2'
 import LucideDiamond from '~icons/lucide/diamond'
-import LucideX from '~icons/lucide/x'
+import LucideEye from '~icons/lucide/eye'
+import LucideGlobe2 from '~icons/lucide/globe-2'
+import LucideLink2 from '~icons/lucide/link-2'
 import LucideLock from '~icons/lucide/lock'
+import LucidePencil from '~icons/lucide/pencil'
 import LucideSettings from '~icons/lucide/settings'
-import LucideArrowLeft from '~icons/lucide/arrow-left'
-import LucideGlobe2 from '~icons/lucide/globe-2'
-import LucideEye from '~icons/lucide/eye'
 import LucideUpload from '~icons/lucide/upload'
-import LucidePencil from '~icons/lucide/pencil'
-import LucideLink2 from '~icons/lucide/link-2'
+import LucideX from '~icons/lucide/x'
+
+import { Avatar, Dialog, LoadingIndicator, createResource, Switch } from '../../../src'
+import { usersWithAccess, updateAccess, allUsers } from '../js/resources'
+import { getFileLink, dynamicList } from '../js/utils'
+import Select from './Select/Select.vue'
+import TagInput from './TagInput/TagInput.vue'
+import TeamSelector from './TeamSelector.vue'
 
 const open = defineModel()
 const props = defineProps({
@@ -274,17 +229,12 @@ const getGeneralAccess = createResource({
   }),
   onSuccess: (data) => {
     if (!data || !data.read) {
-      if (getGeneralAccess.params.user === 'Guest')
-        getGeneralAccess.fetch({ team: 1 })
+      if (getGeneralAccess.params.user === 'Guest') getGeneralAccess.fetch({ team: 1 })
       return
     }
     generalAccessLevel.value = getGeneralAccess.params.team ? 'team' : 'public'
     chosenTeam.value = data.team
-    generalPerms.value = data.write
-      ? 'editor'
-      : data.upload
-        ? 'upload'
-        : 'reader'
+    generalPerms.value = data.write ? 'editor' : data.upload ? 'upload' : 'reader'
   },
 })
 getGeneralAccess.fetch({ user: 'Guest' })
@@ -319,8 +269,7 @@ const updateGeneralAccess = (level, perms) => {
 watch(
   chosenTeam,
   (now, prev) =>
-    (prev || selectingTeam) &&
-    updateGeneralAccess(generalAccessLevel.value, generalPerms.value),
+    (prev || selectingTeam) && updateGeneralAccess(generalAccessLevel.value, generalPerms.value),
 )
 
 // Invite specific users
@@ -331,9 +280,7 @@ watch(
   [() => props.users.data, () => props.usersWithAccess.data],
   ([users, existingUsers]) => {
     if (!existingUsers || !users) return []
-    filteredUsers.value = users.filter(
-      (k) => !existingUsers.find(({ user }) => user === k.name),
-    )
+    filteredUsers.value = users.filter((k) => !existingUsers.find(({ user }) => user === k.name))
   },
   { immediate: true },
 )
diff --git a/frappe/drive/components/TagInput/TagInput.vue b/frappe/drive/components/TagInput/TagInput.vue
index f19a00d28..5f9035d05 100644
--- a/frappe/drive/components/TagInput/TagInput.vue
+++ b/frappe/drive/components/TagInput/TagInput.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
 import {
   TagsInputRoot,
   TagsInputInput,
@@ -7,11 +6,13 @@ import {
   TagsInputItemText,
   TagsInputItemDelete,
 } from 'reka-ui'
+import { computed, ref } from 'vue'
+import LucideX from '~icons/lucide/x'
+
 import Combobox from '../../../../src/components/Combobox/Combobox.vue'
-import { getLabel, getIcon, RenderIcon, getValue } from './utils'
 import { type SimpleOption } from '../../../../src/components/Combobox/types'
-import { TagInputProps } from './types'
-import LucideX from '~icons/lucide/x'
+import type { TagInputProps } from './types'
+import { getLabel, getIcon, RenderIcon, getValue } from './utils'
 
 const props = defineProps<TagInputProps>()
 const options = defineModel<SimpleOption[]>('options', { default: [] })
@@ -20,9 +21,7 @@ const rerenderCombobox = ref(0)
 
 const optionsWithIcons = computed(() => {
   if (!props.renderIcon) return options.value
-  return options.value.map((k) =>
-    getIcon(k) ? k : { ...k, icon: props.renderIcon(k) },
-  )
+  return options.value.map((k) => (getIcon(k) ? k : { ...k, icon: props.renderIcon(k) }))
 })
 const selectedTags = computed(() => {
   return modelValue.value.map((k) => {
@@ -47,9 +46,7 @@ const filteredOptions = computed(() => {
       condition: ({ searchTerm }: any) => {
         if (!searchTerm) return false
         const lower = searchTerm.toLowerCase()
-        const matches = options.value.filter((opt) =>
-          getLabel(opt).toLowerCase().includes(lower),
-        )
+        const matches = options.value.filter((opt) => getLabel(opt).toLowerCase().includes(lower))
         return matches.length === 0
       },
       onClick: ({ searchTerm }: any) => {
@@ -78,20 +75,18 @@ function removeTag(tag: string) {
 <template>
   <TagsInputRoot
     v-model="modelValue"
-    class="flex flex-wrap p-1.5 gap-1.5 w-full items-center justify-start rounded-md bg-surface-gray-2"
+    class="flex w-full flex-wrap items-center justify-start gap-1.5 rounded-md bg-surface-gray-2 p-1.5"
   >
     <TagsInputItem
       v-for="item in selectedTags"
       :key="getValue(item)"
       :value="getValue(item)"
-      class="shadow-sm m-0.25 mr-0 p-1.5 text-sm bg-white flex items-center justify-center gap-1.5 rounded p-0.5 ring-1 ring-outline-gray-2 shadow-xs"
+      class="m-0.25 shadow-xs mr-0 flex items-center justify-center gap-1.5 rounded bg-white p-0.5 p-1.5 text-sm shadow-sm ring-1 ring-outline-gray-2"
     >
       <RenderIcon :icon="getIcon(item)" />
-      <TagsInputItemText class="text-xs text-ink-gray-8">{{
-        getLabel(item)
-      }}</TagsInputItemText>
+      <TagsInputItemText class="text-xs text-ink-gray-8">{{ getLabel(item) }}</TagsInputItemText>
       <TagsInputItemDelete
-        class="p-0.5 rounded-sm bg-transparent hover:bg-surface-gray-1"
+        class="rounded-sm bg-transparent p-0.5 hover:bg-surface-gray-1"
         @click="removeTag(getValue(item))"
       >
         <LucideX class="size-3 text-ink-gray-6" />
@@ -104,7 +99,7 @@ function removeTag(tag: string) {
         :options="filteredOptions"
         type=""
         :placeholder
-        class="flex-1 min-w-[100px] text-xs focus:outline-none"
+        class="min-w-[100px] flex-1 text-xs focus:outline-none"
         @update:modelValue="addTag"
         :open-on-click="true"
         variant="ghost"
diff --git a/frappe/drive/components/TagInput/utils.ts b/frappe/drive/components/TagInput/utils.ts
index d629331a5..c27b485ac 100644
--- a/frappe/drive/components/TagInput/utils.ts
+++ b/frappe/drive/components/TagInput/utils.ts
@@ -1,11 +1,7 @@
-import type {
-  CustomOption,
-  SimpleOption,
-  GroupedOption,
-  ComboboxOption,
-} from './types'
 import { type Component, type FunctionalComponent, h } from 'vue'
 
+import type { CustomOption, SimpleOption, GroupedOption, ComboboxOption } from './types'
+
 export function isCustomOption(option: SimpleOption): option is CustomOption {
   return typeof option === 'object' && option.type === 'custom'
 }
@@ -44,14 +40,10 @@ export function getIcon(option: SimpleOption): string | Component | undefined {
   return typeof option === 'object' ? option.icon : undefined
 }
 
-export const RenderIcon: FunctionalComponent<{ icon?: string | Component }> = (
-  props,
-) => {
+export const RenderIcon: FunctionalComponent<{ icon?: string | Component }> = (props) => {
   if (!props.icon) return null
   const iconContent =
-    typeof props.icon === 'string'
-      ? h('span', props.icon)
-      : h(props.icon, { class: 'w-4 h-4' })
+    typeof props.icon === 'string' ? h('span', props.icon) : h(props.icon, { class: 'w-4 h-4' })
 
   return h(
     'span',
diff --git a/frappe/drive/components/TeamSelector.vue b/frappe/drive/components/TeamSelector.vue
index 461bcc869..90d898440 100644
--- a/frappe/drive/components/TeamSelector.vue
+++ b/frappe/drive/components/TeamSelector.vue
@@ -1,19 +1,14 @@
 <template>
-  <Combobox
-    v-model="team"
-    placeholder="Select a team"
-    :options
-    :disabled
-    :open-on-click="true"
-  />
+  <Combobox v-model="team" placeholder="Select a team" :options :disabled :open-on-click="true" />
 </template>
 <script setup lang="ts">
-import { getTeams } from '../js/resources'
-import icons from '../js/icons'
-import { dynamicList } from '../js/utils'
 import { computed, watch } from 'vue'
+
 import Combobox from '../../../src/components/Combobox/Combobox.vue'
-import { DropdownItem } from '../../../src/components/Dropdown/types'
+import type { DropdownItem } from '../../../src/components/Dropdown/types'
+import icons from '../js/icons'
+import { getTeams } from '../js/resources'
+import { dynamicList } from '../js/utils'
 
 getTeams.fetch()
 const team = defineModel<string>()
diff --git a/frappe/drive/js/icons.js b/frappe/drive/js/icons.js
index c990161b0..b0219b2f6 100644
--- a/frappe/drive/js/icons.js
+++ b/frappe/drive/js/icons.js
@@ -1,705 +1,705 @@
-import ToggleRight from "~icons/lucide/toggle-right"
-import PlusSquare from "~icons/lucide/plus-square"
-import Sunset from "~icons/lucide/sunset"
-import Battery from "~icons/lucide/battery"
-import LogIn from "~icons/lucide/log-in"
-import Gitlab from "~icons/lucide/gitlab"
-import Map from "~icons/lucide/map"
-import CornerUpRight from "~icons/lucide/corner-up-right"
-import ZapOff from "~icons/lucide/zap-off"
-import BarChart2 from "~icons/lucide/bar-chart-2"
-import Home from "~icons/lucide/home"
-import Contact from "~icons/lucide/contact"
-import Coffee from "~icons/lucide/coffee"
-import GitBranch from "~icons/lucide/git-branch"
-import TrendingUp from "~icons/lucide/trending-up"
-import EyeOff from "~icons/lucide/eye-off"
-import Octagon from "~icons/lucide/octagon"
-import Edit from "~icons/lucide/edit"
-import Pocket from "~icons/lucide/pocket"
-import RefreshCcw from "~icons/lucide/refresh-ccw"
-import Truck from "~icons/lucide/truck"
-import Volume2 from "~icons/lucide/volume-2"
-import Star from "~icons/lucide/star"
-import MinusCircle from "~icons/lucide/minus-circle"
-import UserCheck from "~icons/lucide/user-check"
-import Copy from "~icons/lucide/copy"
-import Power from "~icons/lucide/power"
-import DivideCircle from "~icons/lucide/divide-circle"
-import Grid from "~icons/lucide/grid"
-import Music from "~icons/lucide/music"
-import Slash from "~icons/lucide/slash"
-import User from "~icons/lucide/user"
-import Activity from "~icons/lucide/activity"
-import Moon from "~icons/lucide/moon"
-import Layers from "~icons/lucide/layers"
-import Smile from "~icons/lucide/smile"
-import ZoomOut from "~icons/lucide/zoom-out"
-import Volume1 from "~icons/lucide/volume-1"
-import Meh from "~icons/lucide/meh"
-import GitPullRequest from "~icons/lucide/git-pull-request"
-import Info from "~icons/lucide/info"
-import Sidebar from "~icons/lucide/sidebar"
-import ThumbsUp from "~icons/lucide/thumbs-up"
-import Share from "~icons/lucide/share"
-import Printer from "~icons/lucide/printer"
-import Voicemail from "~icons/lucide/voicemail"
-import Paperclip from "~icons/lucide/paperclip"
-import CheckSquare from "~icons/lucide/check-square"
-import Radio from "~icons/lucide/radio"
-import Hexagon from "~icons/lucide/hexagon"
-import Tablet from "~icons/lucide/tablet"
-import HardDrive from "~icons/lucide/hard-drive"
-import Heart from "~icons/lucide/heart"
-import Send from "~icons/lucide/send"
-import Delete from "~icons/lucide/delete"
-import Link from "~icons/lucide/link"
-import Pause from "~icons/lucide/pause"
-import PhoneOutgoing from "~icons/lucide/phone-outgoing"
-import Save from "~icons/lucide/save"
-import Facebook from "~icons/lucide/facebook"
-import UserX from "~icons/lucide/user-x"
-import PenTool from "~icons/lucide/pen-tool"
-import Trash2 from "~icons/lucide/trash-2"
-import GitMerge from "~icons/lucide/git-merge"
-import Headphones from "~icons/lucide/headphones"
-import Bookmark from "~icons/lucide/bookmark"
-import Airplay from "~icons/lucide/airplay"
-import GitCommit from "~icons/lucide/git-commit"
-import Tv from "~icons/lucide/tv"
-import Flag from "~icons/lucide/flag"
-import PhoneMissed from "~icons/lucide/phone-missed"
-import Terminal from "~icons/lucide/terminal"
-import MousePointer from "~icons/lucide/mouse-pointer"
-import Minimize from "~icons/lucide/minimize"
-import Zap from "~icons/lucide/zap"
-import Mic from "~icons/lucide/mic"
-import Thermometer from "~icons/lucide/thermometer"
-import Sunrise from "~icons/lucide/sunrise"
-import Folder from "~icons/lucide/folder"
-import Repeat from "~icons/lucide/repeat"
-import XCircle from "~icons/lucide/x-circle"
-import FolderPlus from "~icons/lucide/folder-plus"
-import Settings from "~icons/lucide/settings"
-import MessageSquare from "~icons/lucide/message-square"
-import Cloud from "~icons/lucide/cloud"
-import MicOff from "~icons/lucide/mic-off"
-import ExternalLink from "~icons/lucide/external-link"
-import Menu from "~icons/lucide/menu"
-import PauseCircle from "~icons/lucide/pause-circle"
-import Instagram from "~icons/lucide/instagram"
-import ToggleLeft from "~icons/lucide/toggle-left"
-import Speaker from "~icons/lucide/speaker"
-import Image from "~icons/lucide/image"
-import Wifi from "~icons/lucide/wifi"
-import FileText from "~icons/lucide/file-text"
-import SkipBack from "~icons/lucide/skip-back"
-import SkipForward from "~icons/lucide/skip-forward"
-import Award from "~icons/lucide/award"
-import RefreshCw from "~icons/lucide/refresh-cw"
-import Video from "~icons/lucide/video"
-import Camera from "~icons/lucide/camera"
-import Loader from "~icons/lucide/loader"
-import Book from "~icons/lucide/book"
-import Tag from "~icons/lucide/tag"
-import Phone from "~icons/lucide/phone"
-import Rewind from "~icons/lucide/rewind"
-import MessageCircle from "~icons/lucide/message-circle"
-import VolumeX from "~icons/lucide/volume-x"
-import List from "~icons/lucide/list"
-import Key from "~icons/lucide/key"
-import Trash from "~icons/lucide/trash"
-import Briefcase from "~icons/lucide/briefcase"
-import Share2 from "~icons/lucide/share-2"
-import ZoomIn from "~icons/lucide/zoom-in"
-import Wind from "~icons/lucide/wind"
-import Move from "~icons/lucide/move"
-import Compass from "~icons/lucide/compass"
-import Gift from "~icons/lucide/gift"
-import Frown from "~icons/lucide/frown"
-import Upload from "~icons/lucide/upload"
-import UserMinus from "~icons/lucide/user-minus"
-import Database from "~icons/lucide/database"
-import Search from "~icons/lucide/search"
-import Globe from "~icons/lucide/globe"
-import Github from "~icons/lucide/github"
-import Bell from "~icons/lucide/bell"
-import Monitor from "~icons/lucide/monitor"
-import Scissors from "~icons/lucide/scissors"
-import FastForward from "~icons/lucide/fast-forward"
-import PieChart from "~icons/lucide/pie-chart"
-import MoreVertical from "~icons/lucide/more-vertical"
-import Eye from "~icons/lucide/eye"
-import VideoOff from "~icons/lucide/video-off"
-import Smartphone from "~icons/lucide/smartphone"
-import Server from "~icons/lucide/server"
-import PhoneOff from "~icons/lucide/phone-off"
-import WifiOff from "~icons/lucide/wifi-off"
-import Cast from "~icons/lucide/cast"
-import Package from "~icons/lucide/package"
-import DivideSquare from "~icons/lucide/divide-square"
-import Filter from "~icons/lucide/filter"
-import PlusCircle from "~icons/lucide/plus-circle"
-import Edit2 from "~icons/lucide/edit-2"
-import ChevronsRight from "~icons/lucide/chevrons-right"
-import Layout from "~icons/lucide/layout"
-import Unlock from "~icons/lucide/unlock"
-import Navigation from "~icons/lucide/navigation"
-import LogOut from "~icons/lucide/log-out"
-import Underline from "~icons/lucide/underline"
-import Triangle from "~icons/lucide/triangle"
-import Slack from "~icons/lucide/slack"
-import Watch from "~icons/lucide/watch"
-import Disc from "~icons/lucide/disc"
-import StopCircle from "~icons/lucide/stop-circle"
-import Film from "~icons/lucide/film"
-import PlayCircle from "~icons/lucide/play-circle"
-import UserPlus from "~icons/lucide/user-plus"
-import Type from "~icons/lucide/type"
-import Rss from "~icons/lucide/rss"
-import XSquare from "~icons/lucide/x-square"
-import PhoneForwarded from "~icons/lucide/phone-forwarded"
-import Calendar from "~icons/lucide/calendar"
-import File from "~icons/lucide/file"
-import ThumbsDown from "~icons/lucide/thumbs-down"
-import Download from "~icons/lucide/download"
-import Umbrella from "~icons/lucide/umbrella"
-import Framer from "~icons/lucide/framer"
-import Sun from "~icons/lucide/sun"
-import PhoneCall from "~icons/lucide/phone-call"
-import AlertCircle from "~icons/lucide/alert-circle"
-import CheckCircle from "~icons/lucide/check-circle"
-import Target from "~icons/lucide/target"
-import LifeBuoy from "~icons/lucide/life-buoy"
-import Shield from "~icons/lucide/shield"
-import Youtube from "~icons/lucide/youtube"
-import Cpu from "~icons/lucide/cpu"
-import Users from "~icons/lucide/users"
-import Mail from "~icons/lucide/mail"
-import RotateCw from "~icons/lucide/rotate-cw"
-import PhoneIncoming from "~icons/lucide/phone-incoming"
-import CreditCard from "~icons/lucide/credit-card"
-import Lock from "~icons/lucide/lock"
-import Maximize from "~icons/lucide/maximize"
-import Twitter from "~icons/lucide/twitter"
-import Inbox from "~icons/lucide/inbox"
-import Linkedin from "~icons/lucide/linkedin"
-import ShoppingCart from "~icons/lucide/shopping-cart"
-import Play from "~icons/lucide/play"
-import Code from "~icons/lucide/code"
-import RotateCcw from "~icons/lucide/rotate-ccw"
-import MoreHorizontal from "~icons/lucide/more-horizontal"
-import Percent from "~icons/lucide/percent"
-import HelpCircle from "~icons/lucide/help-circle"
-import Trello from "~icons/lucide/trello"
-import Shuffle from "~icons/lucide/shuffle"
-import Sliders from "~icons/lucide/sliders"
-import Volume from "~icons/lucide/volume"
-import Building from "~icons/lucide/building"
+import Activity from '~icons/lucide/activity'
+import Airplay from '~icons/lucide/airplay'
+import AlertCircle from '~icons/lucide/alert-circle'
+import Award from '~icons/lucide/award'
+import BarChart2 from '~icons/lucide/bar-chart-2'
+import Battery from '~icons/lucide/battery'
+import Bell from '~icons/lucide/bell'
+import Book from '~icons/lucide/book'
+import Bookmark from '~icons/lucide/bookmark'
+import Briefcase from '~icons/lucide/briefcase'
+import Building from '~icons/lucide/building'
+import Calendar from '~icons/lucide/calendar'
+import Camera from '~icons/lucide/camera'
+import Cast from '~icons/lucide/cast'
+import CheckCircle from '~icons/lucide/check-circle'
+import CheckSquare from '~icons/lucide/check-square'
+import ChevronsRight from '~icons/lucide/chevrons-right'
+import Cloud from '~icons/lucide/cloud'
+import Code from '~icons/lucide/code'
+import Coffee from '~icons/lucide/coffee'
+import Compass from '~icons/lucide/compass'
+import Contact from '~icons/lucide/contact'
+import Copy from '~icons/lucide/copy'
+import CornerUpRight from '~icons/lucide/corner-up-right'
+import Cpu from '~icons/lucide/cpu'
+import CreditCard from '~icons/lucide/credit-card'
+import Database from '~icons/lucide/database'
+import Delete from '~icons/lucide/delete'
+import Disc from '~icons/lucide/disc'
+import DivideCircle from '~icons/lucide/divide-circle'
+import DivideSquare from '~icons/lucide/divide-square'
+import Download from '~icons/lucide/download'
+import Edit from '~icons/lucide/edit'
+import Edit2 from '~icons/lucide/edit-2'
+import ExternalLink from '~icons/lucide/external-link'
+import Eye from '~icons/lucide/eye'
+import EyeOff from '~icons/lucide/eye-off'
+import Facebook from '~icons/lucide/facebook'
+import FastForward from '~icons/lucide/fast-forward'
+import File from '~icons/lucide/file'
+import FileText from '~icons/lucide/file-text'
+import Film from '~icons/lucide/film'
+import Filter from '~icons/lucide/filter'
+import Flag from '~icons/lucide/flag'
+import Folder from '~icons/lucide/folder'
+import FolderPlus from '~icons/lucide/folder-plus'
+import Framer from '~icons/lucide/framer'
+import Frown from '~icons/lucide/frown'
+import Gift from '~icons/lucide/gift'
+import GitBranch from '~icons/lucide/git-branch'
+import GitCommit from '~icons/lucide/git-commit'
+import GitMerge from '~icons/lucide/git-merge'
+import GitPullRequest from '~icons/lucide/git-pull-request'
+import Github from '~icons/lucide/github'
+import Gitlab from '~icons/lucide/gitlab'
+import Globe from '~icons/lucide/globe'
+import Grid from '~icons/lucide/grid'
+import HardDrive from '~icons/lucide/hard-drive'
+import Headphones from '~icons/lucide/headphones'
+import Heart from '~icons/lucide/heart'
+import HelpCircle from '~icons/lucide/help-circle'
+import Hexagon from '~icons/lucide/hexagon'
+import Home from '~icons/lucide/home'
+import Image from '~icons/lucide/image'
+import Inbox from '~icons/lucide/inbox'
+import Info from '~icons/lucide/info'
+import Instagram from '~icons/lucide/instagram'
+import Key from '~icons/lucide/key'
+import Layers from '~icons/lucide/layers'
+import Layout from '~icons/lucide/layout'
+import LifeBuoy from '~icons/lucide/life-buoy'
+import Link from '~icons/lucide/link'
+import Linkedin from '~icons/lucide/linkedin'
+import List from '~icons/lucide/list'
+import Loader from '~icons/lucide/loader'
+import Lock from '~icons/lucide/lock'
+import LogIn from '~icons/lucide/log-in'
+import LogOut from '~icons/lucide/log-out'
+import Mail from '~icons/lucide/mail'
+import Map from '~icons/lucide/map'
+import Maximize from '~icons/lucide/maximize'
+import Meh from '~icons/lucide/meh'
+import Menu from '~icons/lucide/menu'
+import MessageCircle from '~icons/lucide/message-circle'
+import MessageSquare from '~icons/lucide/message-square'
+import Mic from '~icons/lucide/mic'
+import MicOff from '~icons/lucide/mic-off'
+import Minimize from '~icons/lucide/minimize'
+import MinusCircle from '~icons/lucide/minus-circle'
+import Monitor from '~icons/lucide/monitor'
+import Moon from '~icons/lucide/moon'
+import MoreHorizontal from '~icons/lucide/more-horizontal'
+import MoreVertical from '~icons/lucide/more-vertical'
+import MousePointer from '~icons/lucide/mouse-pointer'
+import Move from '~icons/lucide/move'
+import Music from '~icons/lucide/music'
+import Navigation from '~icons/lucide/navigation'
+import Octagon from '~icons/lucide/octagon'
+import Package from '~icons/lucide/package'
+import Paperclip from '~icons/lucide/paperclip'
+import Pause from '~icons/lucide/pause'
+import PauseCircle from '~icons/lucide/pause-circle'
+import PenTool from '~icons/lucide/pen-tool'
+import Percent from '~icons/lucide/percent'
+import Phone from '~icons/lucide/phone'
+import PhoneCall from '~icons/lucide/phone-call'
+import PhoneForwarded from '~icons/lucide/phone-forwarded'
+import PhoneIncoming from '~icons/lucide/phone-incoming'
+import PhoneMissed from '~icons/lucide/phone-missed'
+import PhoneOff from '~icons/lucide/phone-off'
+import PhoneOutgoing from '~icons/lucide/phone-outgoing'
+import PieChart from '~icons/lucide/pie-chart'
+import Play from '~icons/lucide/play'
+import PlayCircle from '~icons/lucide/play-circle'
+import PlusCircle from '~icons/lucide/plus-circle'
+import PlusSquare from '~icons/lucide/plus-square'
+import Pocket from '~icons/lucide/pocket'
+import Power from '~icons/lucide/power'
+import Printer from '~icons/lucide/printer'
+import Radio from '~icons/lucide/radio'
+import RefreshCcw from '~icons/lucide/refresh-ccw'
+import RefreshCw from '~icons/lucide/refresh-cw'
+import Repeat from '~icons/lucide/repeat'
+import Rewind from '~icons/lucide/rewind'
+import RotateCcw from '~icons/lucide/rotate-ccw'
+import RotateCw from '~icons/lucide/rotate-cw'
+import Rss from '~icons/lucide/rss'
+import Save from '~icons/lucide/save'
+import Scissors from '~icons/lucide/scissors'
+import Search from '~icons/lucide/search'
+import Send from '~icons/lucide/send'
+import Server from '~icons/lucide/server'
+import Settings from '~icons/lucide/settings'
+import Share from '~icons/lucide/share'
+import Share2 from '~icons/lucide/share-2'
+import Shield from '~icons/lucide/shield'
+import ShoppingCart from '~icons/lucide/shopping-cart'
+import Shuffle from '~icons/lucide/shuffle'
+import Sidebar from '~icons/lucide/sidebar'
+import SkipBack from '~icons/lucide/skip-back'
+import SkipForward from '~icons/lucide/skip-forward'
+import Slack from '~icons/lucide/slack'
+import Slash from '~icons/lucide/slash'
+import Sliders from '~icons/lucide/sliders'
+import Smartphone from '~icons/lucide/smartphone'
+import Smile from '~icons/lucide/smile'
+import Speaker from '~icons/lucide/speaker'
+import Star from '~icons/lucide/star'
+import StopCircle from '~icons/lucide/stop-circle'
+import Sun from '~icons/lucide/sun'
+import Sunrise from '~icons/lucide/sunrise'
+import Sunset from '~icons/lucide/sunset'
+import Tablet from '~icons/lucide/tablet'
+import Tag from '~icons/lucide/tag'
+import Target from '~icons/lucide/target'
+import Terminal from '~icons/lucide/terminal'
+import Thermometer from '~icons/lucide/thermometer'
+import ThumbsDown from '~icons/lucide/thumbs-down'
+import ThumbsUp from '~icons/lucide/thumbs-up'
+import ToggleLeft from '~icons/lucide/toggle-left'
+import ToggleRight from '~icons/lucide/toggle-right'
+import Trash from '~icons/lucide/trash'
+import Trash2 from '~icons/lucide/trash-2'
+import Trello from '~icons/lucide/trello'
+import TrendingUp from '~icons/lucide/trending-up'
+import Triangle from '~icons/lucide/triangle'
+import Truck from '~icons/lucide/truck'
+import Tv from '~icons/lucide/tv'
+import Twitter from '~icons/lucide/twitter'
+import Type from '~icons/lucide/type'
+import Umbrella from '~icons/lucide/umbrella'
+import Underline from '~icons/lucide/underline'
+import Unlock from '~icons/lucide/unlock'
+import Upload from '~icons/lucide/upload'
+import User from '~icons/lucide/user'
+import UserCheck from '~icons/lucide/user-check'
+import UserMinus from '~icons/lucide/user-minus'
+import UserPlus from '~icons/lucide/user-plus'
+import UserX from '~icons/lucide/user-x'
+import Users from '~icons/lucide/users'
+import Video from '~icons/lucide/video'
+import VideoOff from '~icons/lucide/video-off'
+import Voicemail from '~icons/lucide/voicemail'
+import Volume from '~icons/lucide/volume'
+import Volume1 from '~icons/lucide/volume-1'
+import Volume2 from '~icons/lucide/volume-2'
+import VolumeX from '~icons/lucide/volume-x'
+import Watch from '~icons/lucide/watch'
+import Wifi from '~icons/lucide/wifi'
+import WifiOff from '~icons/lucide/wifi-off'
+import Wind from '~icons/lucide/wind'
+import XCircle from '~icons/lucide/x-circle'
+import XSquare from '~icons/lucide/x-square'
+import Youtube from '~icons/lucide/youtube'
+import Zap from '~icons/lucide/zap'
+import ZapOff from '~icons/lucide/zap-off'
+import ZoomIn from '~icons/lucide/zoom-in'
+import ZoomOut from '~icons/lucide/zoom-out'
 
 const icons = {
-  "toggle-right": ToggleRight,
-  "plus-square": PlusSquare,
-  sunset: Sunset,
-  battery: Battery,
-  "log-in": LogIn,
-  gitlab: Gitlab,
-  map: Map,
-  "corner-up-right": CornerUpRight,
-  "zap-off": ZapOff,
-  "bar-chart-2": BarChart2,
-  home: Home,
-  coffee: Coffee,
-  "git-branch": GitBranch,
-  "trending-up": TrendingUp,
-  "eye-off": EyeOff,
-  octagon: Octagon,
-  edit: Edit,
-  pocket: Pocket,
-  "refresh-ccw": RefreshCcw,
-  truck: Truck,
-  "volume-2": Volume2,
-  star: Star,
-  "minus-circle": MinusCircle,
-  "user-check": UserCheck,
-  copy: Copy,
-  power: Power,
-  "divide-circle": DivideCircle,
-  grid: Grid,
-  music: Music,
-  slash: Slash,
-  user: User,
-  activity: Activity,
-  moon: Moon,
-  layers: Layers,
-  smile: Smile,
-  "zoom-out": ZoomOut,
-  "volume-1": Volume1,
-  meh: Meh,
-  "git-pull-request": GitPullRequest,
-  info: Info,
-  sidebar: Sidebar,
-  "thumbs-up": ThumbsUp,
-  share: Share,
-  printer: Printer,
-  voicemail: Voicemail,
-  paperclip: Paperclip,
-  "check-square": CheckSquare,
-  radio: Radio,
-  hexagon: Hexagon,
-  tablet: Tablet,
-  "hard-drive": HardDrive,
-  heart: Heart,
-  send: Send,
-  delete: Delete,
-  link: Link,
-  pause: Pause,
-  "phone-outgoing": PhoneOutgoing,
-  save: Save,
-  facebook: Facebook,
-  "user-x": UserX,
-  "pen-tool": PenTool,
-  "trash-2": Trash2,
-  "git-merge": GitMerge,
-  headphones: Headphones,
-  bookmark: Bookmark,
-  airplay: Airplay,
-  "git-commit": GitCommit,
-  tv: Tv,
-  flag: Flag,
-  "phone-missed": PhoneMissed,
-  terminal: Terminal,
-  "mouse-pointer": MousePointer,
-  minimize: Minimize,
-  zap: Zap,
-  mic: Mic,
-  thermometer: Thermometer,
-  sunrise: Sunrise,
-  folder: Folder,
-  repeat: Repeat,
-  "x-circle": XCircle,
-  "folder-plus": FolderPlus,
-  settings: Settings,
-  "message-square": MessageSquare,
-  cloud: Cloud,
-  "mic-off": MicOff,
-  "external-link": ExternalLink,
-  menu: Menu,
-  "pause-circle": PauseCircle,
-  instagram: Instagram,
-  "toggle-left": ToggleLeft,
-  speaker: Speaker,
-  image: Image,
-  wifi: Wifi,
-  "file-text": FileText,
-  "skip-back": SkipBack,
-  "skip-forward": SkipForward,
-  award: Award,
-  "refresh-cw": RefreshCw,
-  video: Video,
-  camera: Camera,
-  loader: Loader,
-  book: Book,
-  tag: Tag,
-  phone: Phone,
-  rewind: Rewind,
-  "message-circle": MessageCircle,
-  "volume-x": VolumeX,
-  list: List,
-  key: Key,
-  trash: Trash,
-  briefcase: Briefcase,
-  "share-2": Share2,
-  "zoom-in": ZoomIn,
-  wind: Wind,
-  move: Move,
-  compass: Compass,
-  gift: Gift,
-  frown: Frown,
-  upload: Upload,
-  "user-minus": UserMinus,
-  database: Database,
-  search: Search,
-  globe: Globe,
-  github: Github,
-  bell: Bell,
-  monitor: Monitor,
-  scissors: Scissors,
-  "fast-forward": FastForward,
-  "pie-chart": PieChart,
-  "more-vertical": MoreVertical,
-  eye: Eye,
-  "video-off": VideoOff,
-  smartphone: Smartphone,
-  server: Server,
-  "phone-off": PhoneOff,
-  "wifi-off": WifiOff,
-  cast: Cast,
-  package: Package,
-  "divide-square": DivideSquare,
-  filter: Filter,
-  "plus-circle": PlusCircle,
-  "edit-2": Edit2,
-  "chevrons-right": ChevronsRight,
-  layout: Layout,
-  unlock: Unlock,
-  navigation: Navigation,
-  "log-out": LogOut,
-  underline: Underline,
-  triangle: Triangle,
-  slack: Slack,
-  watch: Watch,
-  disc: Disc,
-  "stop-circle": StopCircle,
-  film: Film,
-  "play-circle": PlayCircle,
-  "user-plus": UserPlus,
-  type: Type,
-  rss: Rss,
-  "x-square": XSquare,
-  "phone-forwarded": PhoneForwarded,
-  calendar: Calendar,
-  file: File,
-  "thumbs-down": ThumbsDown,
-  download: Download,
-  umbrella: Umbrella,
-  framer: Framer,
-  sun: Sun,
-  "phone-call": PhoneCall,
-  "alert-circle": AlertCircle,
-  "check-circle": CheckCircle,
-  target: Target,
-  "life-buoy": LifeBuoy,
-  shield: Shield,
-  youtube: Youtube,
-  cpu: Cpu,
-  users: Users,
-  mail: Mail,
-  "rotate-cw": RotateCw,
-  "phone-incoming": PhoneIncoming,
-  "credit-card": CreditCard,
-  lock: Lock,
-  maximize: Maximize,
-  twitter: Twitter,
-  inbox: Inbox,
-  linkedin: Linkedin,
-  "shopping-cart": ShoppingCart,
-  play: Play,
-  code: Code,
-  "rotate-ccw": RotateCcw,
-  "more-horizontal": MoreHorizontal,
-  percent: Percent,
-  "help-circle": HelpCircle,
-  trello: Trello,
-  shuffle: Shuffle,
-  sliders: Sliders,
-  volume: Volume,
-  "toggle-right": ToggleRight,
-  "plus-square": PlusSquare,
-  sunset: Sunset,
-  battery: Battery,
-  "log-in": LogIn,
-  gitlab: Gitlab,
-  map: Map,
-  "corner-up-right": CornerUpRight,
-  "zap-off": ZapOff,
-  "bar-chart-2": BarChart2,
-  home: Home,
-  coffee: Coffee,
-  "git-branch": GitBranch,
-  "trending-up": TrendingUp,
-  "eye-off": EyeOff,
-  octagon: Octagon,
-  edit: Edit,
-  pocket: Pocket,
-  "refresh-ccw": RefreshCcw,
-  truck: Truck,
-  "volume-2": Volume2,
-  star: Star,
-  "minus-circle": MinusCircle,
-  "user-check": UserCheck,
-  copy: Copy,
-  power: Power,
-  "divide-circle": DivideCircle,
-  grid: Grid,
-  music: Music,
-  slash: Slash,
-  user: User,
-  activity: Activity,
-  moon: Moon,
-  layers: Layers,
-  smile: Smile,
-  "zoom-out": ZoomOut,
-  "volume-1": Volume1,
-  meh: Meh,
-  "git-pull-request": GitPullRequest,
-  info: Info,
-  sidebar: Sidebar,
-  "thumbs-up": ThumbsUp,
-  share: Share,
-  printer: Printer,
-  voicemail: Voicemail,
-  paperclip: Paperclip,
-  "check-square": CheckSquare,
-  radio: Radio,
-  hexagon: Hexagon,
-  tablet: Tablet,
-  "hard-drive": HardDrive,
-  heart: Heart,
-  send: Send,
-  delete: Delete,
-  link: Link,
-  pause: Pause,
-  "phone-outgoing": PhoneOutgoing,
-  save: Save,
-  facebook: Facebook,
-  "user-x": UserX,
-  "pen-tool": PenTool,
-  "trash-2": Trash2,
-  "git-merge": GitMerge,
-  headphones: Headphones,
-  bookmark: Bookmark,
-  airplay: Airplay,
-  "git-commit": GitCommit,
-  tv: Tv,
-  flag: Flag,
-  "phone-missed": PhoneMissed,
-  terminal: Terminal,
-  "mouse-pointer": MousePointer,
-  minimize: Minimize,
-  zap: Zap,
-  mic: Mic,
-  thermometer: Thermometer,
-  sunrise: Sunrise,
-  folder: Folder,
-  repeat: Repeat,
-  "x-circle": XCircle,
-  "folder-plus": FolderPlus,
-  settings: Settings,
-  "message-square": MessageSquare,
-  cloud: Cloud,
-  "mic-off": MicOff,
-  "external-link": ExternalLink,
-  menu: Menu,
-  "pause-circle": PauseCircle,
-  instagram: Instagram,
-  "toggle-left": ToggleLeft,
-  speaker: Speaker,
-  image: Image,
-  wifi: Wifi,
-  "file-text": FileText,
-  "skip-back": SkipBack,
-  "skip-forward": SkipForward,
-  award: Award,
-  "refresh-cw": RefreshCw,
-  video: Video,
-  camera: Camera,
-  loader: Loader,
-  book: Book,
-  tag: Tag,
-  phone: Phone,
-  rewind: Rewind,
-  "message-circle": MessageCircle,
-  "volume-x": VolumeX,
-  list: List,
-  key: Key,
-  trash: Trash,
-  briefcase: Briefcase,
-  "share-2": Share2,
-  "zoom-in": ZoomIn,
-  wind: Wind,
-  move: Move,
-  compass: Compass,
-  gift: Gift,
-  frown: Frown,
-  upload: Upload,
-  "user-minus": UserMinus,
-  database: Database,
-  search: Search,
-  globe: Globe,
-  github: Github,
-  bell: Bell,
-  monitor: Monitor,
-  scissors: Scissors,
-  "fast-forward": FastForward,
-  "pie-chart": PieChart,
-  "more-vertical": MoreVertical,
-  eye: Eye,
-  "video-off": VideoOff,
-  smartphone: Smartphone,
-  server: Server,
-  "phone-off": PhoneOff,
-  "wifi-off": WifiOff,
-  cast: Cast,
-  package: Package,
-  "divide-square": DivideSquare,
-  filter: Filter,
-  "plus-circle": PlusCircle,
-  "edit-2": Edit2,
-  "chevrons-right": ChevronsRight,
-  layout: Layout,
-  unlock: Unlock,
-  navigation: Navigation,
-  "log-out": LogOut,
-  underline: Underline,
-  triangle: Triangle,
-  slack: Slack,
-  watch: Watch,
-  disc: Disc,
-  "stop-circle": StopCircle,
-  film: Film,
-  "play-circle": PlayCircle,
-  "user-plus": UserPlus,
-  type: Type,
-  rss: Rss,
-  "x-square": XSquare,
-  "phone-forwarded": PhoneForwarded,
-  calendar: Calendar,
-  file: File,
-  "thumbs-down": ThumbsDown,
-  download: Download,
-  umbrella: Umbrella,
-  framer: Framer,
-  sun: Sun,
-  "phone-call": PhoneCall,
-  "alert-circle": AlertCircle,
-  "check-circle": CheckCircle,
-  target: Target,
-  "life-buoy": LifeBuoy,
-  shield: Shield,
-  youtube: Youtube,
-  cpu: Cpu,
-  users: Users,
-  mail: Mail,
-  "rotate-cw": RotateCw,
-  "phone-incoming": PhoneIncoming,
-  "credit-card": CreditCard,
-  lock: Lock,
-  maximize: Maximize,
-  twitter: Twitter,
-  inbox: Inbox,
-  linkedin: Linkedin,
-  "shopping-cart": ShoppingCart,
-  play: Play,
-  code: Code,
-  "rotate-ccw": RotateCcw,
-  "more-horizontal": MoreHorizontal,
-  percent: Percent,
-  "help-circle": HelpCircle,
-  trello: Trello,
-  shuffle: Shuffle,
-  sliders: Sliders,
-  volume: Volume,
-  "toggle-right": ToggleRight,
-  "plus-square": PlusSquare,
-  sunset: Sunset,
-  battery: Battery,
-  "log-in": LogIn,
-  gitlab: Gitlab,
-  map: Map,
-  "corner-up-right": CornerUpRight,
-  "zap-off": ZapOff,
-  "bar-chart-2": BarChart2,
-  home: Home,
-  coffee: Coffee,
-  "git-branch": GitBranch,
-  "trending-up": TrendingUp,
-  "eye-off": EyeOff,
-  octagon: Octagon,
-  edit: Edit,
-  pocket: Pocket,
-  "refresh-ccw": RefreshCcw,
-  truck: Truck,
-  "volume-2": Volume2,
-  star: Star,
-  "minus-circle": MinusCircle,
-  "user-check": UserCheck,
-  copy: Copy,
-  power: Power,
-  "divide-circle": DivideCircle,
-  grid: Grid,
-  music: Music,
-  slash: Slash,
-  user: User,
-  activity: Activity,
-  moon: Moon,
-  layers: Layers,
-  smile: Smile,
-  "zoom-out": ZoomOut,
-  "volume-1": Volume1,
-  meh: Meh,
-  "git-pull-request": GitPullRequest,
-  info: Info,
-  sidebar: Sidebar,
-  "thumbs-up": ThumbsUp,
-  share: Share,
-  printer: Printer,
-  voicemail: Voicemail,
-  paperclip: Paperclip,
-  "check-square": CheckSquare,
-  radio: Radio,
-  hexagon: Hexagon,
-  tablet: Tablet,
-  "hard-drive": HardDrive,
-  heart: Heart,
-  send: Send,
-  delete: Delete,
-  link: Link,
-  pause: Pause,
-  "phone-outgoing": PhoneOutgoing,
-  save: Save,
-  facebook: Facebook,
-  "user-x": UserX,
-  "pen-tool": PenTool,
-  "trash-2": Trash2,
-  "git-merge": GitMerge,
-  headphones: Headphones,
-  bookmark: Bookmark,
-  airplay: Airplay,
-  "git-commit": GitCommit,
-  tv: Tv,
-  flag: Flag,
-  "phone-missed": PhoneMissed,
-  terminal: Terminal,
-  "mouse-pointer": MousePointer,
-  minimize: Minimize,
-  zap: Zap,
-  mic: Mic,
-  thermometer: Thermometer,
-  sunrise: Sunrise,
-  folder: Folder,
-  repeat: Repeat,
-  "x-circle": XCircle,
-  "folder-plus": FolderPlus,
-  settings: Settings,
-  "message-square": MessageSquare,
-  cloud: Cloud,
-  "mic-off": MicOff,
-  "external-link": ExternalLink,
-  menu: Menu,
-  "pause-circle": PauseCircle,
-  instagram: Instagram,
-  "toggle-left": ToggleLeft,
-  speaker: Speaker,
-  image: Image,
-  wifi: Wifi,
-  "file-text": FileText,
-  "skip-back": SkipBack,
-  "skip-forward": SkipForward,
-  award: Award,
-  "refresh-cw": RefreshCw,
-  video: Video,
-  camera: Camera,
-  loader: Loader,
-  book: Book,
-  tag: Tag,
-  phone: Phone,
-  rewind: Rewind,
-  "message-circle": MessageCircle,
-  "volume-x": VolumeX,
-  list: List,
-  building: Building,
-  contact: Contact,
+  'toggle-right': ToggleRight,
+  'plus-square': PlusSquare,
+  'sunset': Sunset,
+  'battery': Battery,
+  'log-in': LogIn,
+  'gitlab': Gitlab,
+  'map': Map,
+  'corner-up-right': CornerUpRight,
+  'zap-off': ZapOff,
+  'bar-chart-2': BarChart2,
+  'home': Home,
+  'coffee': Coffee,
+  'git-branch': GitBranch,
+  'trending-up': TrendingUp,
+  'eye-off': EyeOff,
+  'octagon': Octagon,
+  'edit': Edit,
+  'pocket': Pocket,
+  'refresh-ccw': RefreshCcw,
+  'truck': Truck,
+  'volume-2': Volume2,
+  'star': Star,
+  'minus-circle': MinusCircle,
+  'user-check': UserCheck,
+  'copy': Copy,
+  'power': Power,
+  'divide-circle': DivideCircle,
+  'grid': Grid,
+  'music': Music,
+  'slash': Slash,
+  'user': User,
+  'activity': Activity,
+  'moon': Moon,
+  'layers': Layers,
+  'smile': Smile,
+  'zoom-out': ZoomOut,
+  'volume-1': Volume1,
+  'meh': Meh,
+  'git-pull-request': GitPullRequest,
+  'info': Info,
+  'sidebar': Sidebar,
+  'thumbs-up': ThumbsUp,
+  'share': Share,
+  'printer': Printer,
+  'voicemail': Voicemail,
+  'paperclip': Paperclip,
+  'check-square': CheckSquare,
+  'radio': Radio,
+  'hexagon': Hexagon,
+  'tablet': Tablet,
+  'hard-drive': HardDrive,
+  'heart': Heart,
+  'send': Send,
+  'delete': Delete,
+  'link': Link,
+  'pause': Pause,
+  'phone-outgoing': PhoneOutgoing,
+  'save': Save,
+  'facebook': Facebook,
+  'user-x': UserX,
+  'pen-tool': PenTool,
+  'trash-2': Trash2,
+  'git-merge': GitMerge,
+  'headphones': Headphones,
+  'bookmark': Bookmark,
+  'airplay': Airplay,
+  'git-commit': GitCommit,
+  'tv': Tv,
+  'flag': Flag,
+  'phone-missed': PhoneMissed,
+  'terminal': Terminal,
+  'mouse-pointer': MousePointer,
+  'minimize': Minimize,
+  'zap': Zap,
+  'mic': Mic,
+  'thermometer': Thermometer,
+  'sunrise': Sunrise,
+  'folder': Folder,
+  'repeat': Repeat,
+  'x-circle': XCircle,
+  'folder-plus': FolderPlus,
+  'settings': Settings,
+  'message-square': MessageSquare,
+  'cloud': Cloud,
+  'mic-off': MicOff,
+  'external-link': ExternalLink,
+  'menu': Menu,
+  'pause-circle': PauseCircle,
+  'instagram': Instagram,
+  'toggle-left': ToggleLeft,
+  'speaker': Speaker,
+  'image': Image,
+  'wifi': Wifi,
+  'file-text': FileText,
+  'skip-back': SkipBack,
+  'skip-forward': SkipForward,
+  'award': Award,
+  'refresh-cw': RefreshCw,
+  'video': Video,
+  'camera': Camera,
+  'loader': Loader,
+  'book': Book,
+  'tag': Tag,
+  'phone': Phone,
+  'rewind': Rewind,
+  'message-circle': MessageCircle,
+  'volume-x': VolumeX,
+  'list': List,
+  'key': Key,
+  'trash': Trash,
+  'briefcase': Briefcase,
+  'share-2': Share2,
+  'zoom-in': ZoomIn,
+  'wind': Wind,
+  'move': Move,
+  'compass': Compass,
+  'gift': Gift,
+  'frown': Frown,
+  'upload': Upload,
+  'user-minus': UserMinus,
+  'database': Database,
+  'search': Search,
+  'globe': Globe,
+  'github': Github,
+  'bell': Bell,
+  'monitor': Monitor,
+  'scissors': Scissors,
+  'fast-forward': FastForward,
+  'pie-chart': PieChart,
+  'more-vertical': MoreVertical,
+  'eye': Eye,
+  'video-off': VideoOff,
+  'smartphone': Smartphone,
+  'server': Server,
+  'phone-off': PhoneOff,
+  'wifi-off': WifiOff,
+  'cast': Cast,
+  'package': Package,
+  'divide-square': DivideSquare,
+  'filter': Filter,
+  'plus-circle': PlusCircle,
+  'edit-2': Edit2,
+  'chevrons-right': ChevronsRight,
+  'layout': Layout,
+  'unlock': Unlock,
+  'navigation': Navigation,
+  'log-out': LogOut,
+  'underline': Underline,
+  'triangle': Triangle,
+  'slack': Slack,
+  'watch': Watch,
+  'disc': Disc,
+  'stop-circle': StopCircle,
+  'film': Film,
+  'play-circle': PlayCircle,
+  'user-plus': UserPlus,
+  'type': Type,
+  'rss': Rss,
+  'x-square': XSquare,
+  'phone-forwarded': PhoneForwarded,
+  'calendar': Calendar,
+  'file': File,
+  'thumbs-down': ThumbsDown,
+  'download': Download,
+  'umbrella': Umbrella,
+  'framer': Framer,
+  'sun': Sun,
+  'phone-call': PhoneCall,
+  'alert-circle': AlertCircle,
+  'check-circle': CheckCircle,
+  'target': Target,
+  'life-buoy': LifeBuoy,
+  'shield': Shield,
+  'youtube': Youtube,
+  'cpu': Cpu,
+  'users': Users,
+  'mail': Mail,
+  'rotate-cw': RotateCw,
+  'phone-incoming': PhoneIncoming,
+  'credit-card': CreditCard,
+  'lock': Lock,
+  'maximize': Maximize,
+  'twitter': Twitter,
+  'inbox': Inbox,
+  'linkedin': Linkedin,
+  'shopping-cart': ShoppingCart,
+  'play': Play,
+  'code': Code,
+  'rotate-ccw': RotateCcw,
+  'more-horizontal': MoreHorizontal,
+  'percent': Percent,
+  'help-circle': HelpCircle,
+  'trello': Trello,
+  'shuffle': Shuffle,
+  'sliders': Sliders,
+  'volume': Volume,
+  'toggle-right': ToggleRight,
+  'plus-square': PlusSquare,
+  'sunset': Sunset,
+  'battery': Battery,
+  'log-in': LogIn,
+  'gitlab': Gitlab,
+  'map': Map,
+  'corner-up-right': CornerUpRight,
+  'zap-off': ZapOff,
+  'bar-chart-2': BarChart2,
+  'home': Home,
+  'coffee': Coffee,
+  'git-branch': GitBranch,
+  'trending-up': TrendingUp,
+  'eye-off': EyeOff,
+  'octagon': Octagon,
+  'edit': Edit,
+  'pocket': Pocket,
+  'refresh-ccw': RefreshCcw,
+  'truck': Truck,
+  'volume-2': Volume2,
+  'star': Star,
+  'minus-circle': MinusCircle,
+  'user-check': UserCheck,
+  'copy': Copy,
+  'power': Power,
+  'divide-circle': DivideCircle,
+  'grid': Grid,
+  'music': Music,
+  'slash': Slash,
+  'user': User,
+  'activity': Activity,
+  'moon': Moon,
+  'layers': Layers,
+  'smile': Smile,
+  'zoom-out': ZoomOut,
+  'volume-1': Volume1,
+  'meh': Meh,
+  'git-pull-request': GitPullRequest,
+  'info': Info,
+  'sidebar': Sidebar,
+  'thumbs-up': ThumbsUp,
+  'share': Share,
+  'printer': Printer,
+  'voicemail': Voicemail,
+  'paperclip': Paperclip,
+  'check-square': CheckSquare,
+  'radio': Radio,
+  'hexagon': Hexagon,
+  'tablet': Tablet,
+  'hard-drive': HardDrive,
+  'heart': Heart,
+  'send': Send,
+  'delete': Delete,
+  'link': Link,
+  'pause': Pause,
+  'phone-outgoing': PhoneOutgoing,
+  'save': Save,
+  'facebook': Facebook,
+  'user-x': UserX,
+  'pen-tool': PenTool,
+  'trash-2': Trash2,
+  'git-merge': GitMerge,
+  'headphones': Headphones,
+  'bookmark': Bookmark,
+  'airplay': Airplay,
+  'git-commit': GitCommit,
+  'tv': Tv,
+  'flag': Flag,
+  'phone-missed': PhoneMissed,
+  'terminal': Terminal,
+  'mouse-pointer': MousePointer,
+  'minimize': Minimize,
+  'zap': Zap,
+  'mic': Mic,
+  'thermometer': Thermometer,
+  'sunrise': Sunrise,
+  'folder': Folder,
+  'repeat': Repeat,
+  'x-circle': XCircle,
+  'folder-plus': FolderPlus,
+  'settings': Settings,
+  'message-square': MessageSquare,
+  'cloud': Cloud,
+  'mic-off': MicOff,
+  'external-link': ExternalLink,
+  'menu': Menu,
+  'pause-circle': PauseCircle,
+  'instagram': Instagram,
+  'toggle-left': ToggleLeft,
+  'speaker': Speaker,
+  'image': Image,
+  'wifi': Wifi,
+  'file-text': FileText,
+  'skip-back': SkipBack,
+  'skip-forward': SkipForward,
+  'award': Award,
+  'refresh-cw': RefreshCw,
+  'video': Video,
+  'camera': Camera,
+  'loader': Loader,
+  'book': Book,
+  'tag': Tag,
+  'phone': Phone,
+  'rewind': Rewind,
+  'message-circle': MessageCircle,
+  'volume-x': VolumeX,
+  'list': List,
+  'key': Key,
+  'trash': Trash,
+  'briefcase': Briefcase,
+  'share-2': Share2,
+  'zoom-in': ZoomIn,
+  'wind': Wind,
+  'move': Move,
+  'compass': Compass,
+  'gift': Gift,
+  'frown': Frown,
+  'upload': Upload,
+  'user-minus': UserMinus,
+  'database': Database,
+  'search': Search,
+  'globe': Globe,
+  'github': Github,
+  'bell': Bell,
+  'monitor': Monitor,
+  'scissors': Scissors,
+  'fast-forward': FastForward,
+  'pie-chart': PieChart,
+  'more-vertical': MoreVertical,
+  'eye': Eye,
+  'video-off': VideoOff,
+  'smartphone': Smartphone,
+  'server': Server,
+  'phone-off': PhoneOff,
+  'wifi-off': WifiOff,
+  'cast': Cast,
+  'package': Package,
+  'divide-square': DivideSquare,
+  'filter': Filter,
+  'plus-circle': PlusCircle,
+  'edit-2': Edit2,
+  'chevrons-right': ChevronsRight,
+  'layout': Layout,
+  'unlock': Unlock,
+  'navigation': Navigation,
+  'log-out': LogOut,
+  'underline': Underline,
+  'triangle': Triangle,
+  'slack': Slack,
+  'watch': Watch,
+  'disc': Disc,
+  'stop-circle': StopCircle,
+  'film': Film,
+  'play-circle': PlayCircle,
+  'user-plus': UserPlus,
+  'type': Type,
+  'rss': Rss,
+  'x-square': XSquare,
+  'phone-forwarded': PhoneForwarded,
+  'calendar': Calendar,
+  'file': File,
+  'thumbs-down': ThumbsDown,
+  'download': Download,
+  'umbrella': Umbrella,
+  'framer': Framer,
+  'sun': Sun,
+  'phone-call': PhoneCall,
+  'alert-circle': AlertCircle,
+  'check-circle': CheckCircle,
+  'target': Target,
+  'life-buoy': LifeBuoy,
+  'shield': Shield,
+  'youtube': Youtube,
+  'cpu': Cpu,
+  'users': Users,
+  'mail': Mail,
+  'rotate-cw': RotateCw,
+  'phone-incoming': PhoneIncoming,
+  'credit-card': CreditCard,
+  'lock': Lock,
+  'maximize': Maximize,
+  'twitter': Twitter,
+  'inbox': Inbox,
+  'linkedin': Linkedin,
+  'shopping-cart': ShoppingCart,
+  'play': Play,
+  'code': Code,
+  'rotate-ccw': RotateCcw,
+  'more-horizontal': MoreHorizontal,
+  'percent': Percent,
+  'help-circle': HelpCircle,
+  'trello': Trello,
+  'shuffle': Shuffle,
+  'sliders': Sliders,
+  'volume': Volume,
+  'toggle-right': ToggleRight,
+  'plus-square': PlusSquare,
+  'sunset': Sunset,
+  'battery': Battery,
+  'log-in': LogIn,
+  'gitlab': Gitlab,
+  'map': Map,
+  'corner-up-right': CornerUpRight,
+  'zap-off': ZapOff,
+  'bar-chart-2': BarChart2,
+  'home': Home,
+  'coffee': Coffee,
+  'git-branch': GitBranch,
+  'trending-up': TrendingUp,
+  'eye-off': EyeOff,
+  'octagon': Octagon,
+  'edit': Edit,
+  'pocket': Pocket,
+  'refresh-ccw': RefreshCcw,
+  'truck': Truck,
+  'volume-2': Volume2,
+  'star': Star,
+  'minus-circle': MinusCircle,
+  'user-check': UserCheck,
+  'copy': Copy,
+  'power': Power,
+  'divide-circle': DivideCircle,
+  'grid': Grid,
+  'music': Music,
+  'slash': Slash,
+  'user': User,
+  'activity': Activity,
+  'moon': Moon,
+  'layers': Layers,
+  'smile': Smile,
+  'zoom-out': ZoomOut,
+  'volume-1': Volume1,
+  'meh': Meh,
+  'git-pull-request': GitPullRequest,
+  'info': Info,
+  'sidebar': Sidebar,
+  'thumbs-up': ThumbsUp,
+  'share': Share,
+  'printer': Printer,
+  'voicemail': Voicemail,
+  'paperclip': Paperclip,
+  'check-square': CheckSquare,
+  'radio': Radio,
+  'hexagon': Hexagon,
+  'tablet': Tablet,
+  'hard-drive': HardDrive,
+  'heart': Heart,
+  'send': Send,
+  'delete': Delete,
+  'link': Link,
+  'pause': Pause,
+  'phone-outgoing': PhoneOutgoing,
+  'save': Save,
+  'facebook': Facebook,
+  'user-x': UserX,
+  'pen-tool': PenTool,
+  'trash-2': Trash2,
+  'git-merge': GitMerge,
+  'headphones': Headphones,
+  'bookmark': Bookmark,
+  'airplay': Airplay,
+  'git-commit': GitCommit,
+  'tv': Tv,
+  'flag': Flag,
+  'phone-missed': PhoneMissed,
+  'terminal': Terminal,
+  'mouse-pointer': MousePointer,
+  'minimize': Minimize,
+  'zap': Zap,
+  'mic': Mic,
+  'thermometer': Thermometer,
+  'sunrise': Sunrise,
+  'folder': Folder,
+  'repeat': Repeat,
+  'x-circle': XCircle,
+  'folder-plus': FolderPlus,
+  'settings': Settings,
+  'message-square': MessageSquare,
+  'cloud': Cloud,
+  'mic-off': MicOff,
+  'external-link': ExternalLink,
+  'menu': Menu,
+  'pause-circle': PauseCircle,
+  'instagram': Instagram,
+  'toggle-left': ToggleLeft,
+  'speaker': Speaker,
+  'image': Image,
+  'wifi': Wifi,
+  'file-text': FileText,
+  'skip-back': SkipBack,
+  'skip-forward': SkipForward,
+  'award': Award,
+  'refresh-cw': RefreshCw,
+  'video': Video,
+  'camera': Camera,
+  'loader': Loader,
+  'book': Book,
+  'tag': Tag,
+  'phone': Phone,
+  'rewind': Rewind,
+  'message-circle': MessageCircle,
+  'volume-x': VolumeX,
+  'list': List,
+  'building': Building,
+  'contact': Contact,
 }
 
 export default icons
diff --git a/frappe/drive/js/utils.js b/frappe/drive/js/utils.js
index 7895ee10d..e3d17aae9 100644
--- a/frappe/drive/js/utils.js
+++ b/frappe/drive/js/utils.js
@@ -1,11 +1,11 @@
-import { toast } from '../../../src'
-import slugify from 'slugify'
 import { useTimeAgo } from '@vueuse/core'
-
 import dayjs from 'dayjs'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
-import utc from 'dayjs/plugin/utc'
 import timezone from 'dayjs/plugin/timezone'
+import utc from 'dayjs/plugin/utc'
+import slugify from 'slugify'
+
+import { toast } from '../../../src'
 dayjs.extend(utc)
 dayjs.extend(timezone)
 dayjs.extend(localizedFormat)
@@ -38,8 +38,7 @@ function getLinkStem(entity) {
     {
       true: 'f',
       [new Boolean(entity.is_group)]: 'd',
-      [new Boolean(entity.document || entity.mime_type === 'text/markdown')]:
-        'w',
+      [new Boolean(entity.document || entity.mime_type === 'text/markdown')]: 'w',
     }[true]
   }/${entity.name}/${slugger(entity.title)}`
 }
@@ -48,7 +47,7 @@ function slugger(title) {
   return slugify(title.split('.').join(' '), {
     lower: true,
     trim: true,
-    remove: /[^\w\s\']|_/,
+    remove: /[^\w\s']|_/,
   })
 }
 
diff --git a/frappe/index.d.ts b/frappe/index.d.ts
index f66374763..54157dc3b 100644
--- a/frappe/index.d.ts
+++ b/frappe/index.d.ts
@@ -22,15 +22,9 @@ declare module 'frappe-ui/frappe' {
           skipped?: boolean,
           callback?: ((step: string, skipped: boolean) => void) | null,
         ) => void
-        skip: (
-          step: string,
-          callback?: ((step: string, skipped: boolean) => void) | null,
-        ) => void
+        skip: (step: string, callback?: ((step: string, skipped: boolean) => void) | null) => void
         skipAll: (callback?: ((value: boolean) => void) | null) => void
-        reset: (
-          step: string,
-          callback?: ((step: string, skipped: boolean) => void) | null,
-        ) => void
+        reset: (step: string, callback?: ((step: string, skipped: boolean) => void) | null) => void
         resetAll: (callback?: ((value: boolean) => void) | null) => void
         setUp: (steps: OnboardingStep[]) => void
         syncStatus: () => void
diff --git a/frappe/telemetry/index.ts b/frappe/telemetry/index.ts
index b492dd144..cad9b4bef 100644
--- a/frappe/telemetry/index.ts
+++ b/frappe/telemetry/index.ts
@@ -1,6 +1,7 @@
 import { reactive, readonly, ref, type App } from 'vue'
 
-import { pulse_provider, PulseProvider } from './pulse.ts'
+import type { PulseProvider } from './pulse.ts'
+import { pulse_provider } from './pulse.ts'
 import { silentCall } from './utils.ts'
 
 let pulseProvider: PulseProvider | null = null
@@ -36,9 +37,7 @@ export default {
       return
     }
 
-    isEnabled.value = await silentCall<boolean>(
-      'frappe.utils.telemetry.pulse.client.is_enabled',
-    )
+    isEnabled.value = await silentCall<boolean>('frappe.utils.telemetry.pulse.client.is_enabled')
     if (!isEnabled.value) return
 
     pulseProvider = pulse_provider
diff --git a/frappe/telemetry/pulse.ts b/frappe/telemetry/pulse.ts
index 2a21b72ca..67e0c2197 100644
--- a/frappe/telemetry/pulse.ts
+++ b/frappe/telemetry/pulse.ts
@@ -71,8 +71,7 @@ export class PulseProvider {
   private sendBeacon(events: PulseEvent[]) {
     try {
       if (navigator.sendBeacon) {
-        const url =
-          '/api/method/frappe.utils.telemetry.pulse.client.bulk_capture'
+        const url = '/api/method/frappe.utils.telemetry.pulse.client.bulk_capture'
         const data = new FormData()
         data.append('events', JSON.stringify(events))
         navigator.sendBeacon(url, data)
diff --git a/frappe/telemetry/telemetry.test.ts b/frappe/telemetry/telemetry.test.ts
index 202fcbf16..0fbf6fa9d 100644
--- a/frappe/telemetry/telemetry.test.ts
+++ b/frappe/telemetry/telemetry.test.ts
@@ -3,6 +3,7 @@
  */
 
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import { PulseProvider } from './pulse'
 
 vi.mock('frappe-ui', () => ({
@@ -61,10 +62,9 @@ describe('PulseProvider', () => {
 
     await provider['sendEvents'](testEvents)
 
-    expect(mockCall).toHaveBeenCalledWith(
-      'frappe.utils.telemetry.pulse.client.bulk_capture',
-      { events: testEvents },
-    )
+    expect(mockCall).toHaveBeenCalledWith('frappe.utils.telemetry.pulse.client.bulk_capture', {
+      events: testEvents,
+    })
   })
 
   it('batches events before sending', () => {
diff --git a/frappe/telemetry/utils.ts b/frappe/telemetry/utils.ts
index 3a069871b..55c017714 100644
--- a/frappe/telemetry/utils.ts
+++ b/frappe/telemetry/utils.ts
@@ -8,8 +8,10 @@ export const silentCall = <T>(method: string): Promise<T> => {
   console.error = () => {}
   console.log = () => {}
 
-  return call(method).catch(() => {}).finally(() => {
-    console.log = originalLog
-    console.error = originalError
-  })
+  return call(method)
+    .catch(() => {})
+    .finally(() => {
+      console.log = originalLog
+      console.error = originalError
+    })
 }
diff --git a/icons/HelpIcon.vue b/icons/HelpIcon.vue
index 97c096987..75db46531 100644
--- a/icons/HelpIcon.vue
+++ b/icons/HelpIcon.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
diff --git a/icons/Icon.vue b/icons/Icon.vue
index 84db4979f..aed1903dc 100644
--- a/icons/Icon.vue
+++ b/icons/Icon.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted } from 'vue'
 
 const props = defineProps<{ name: string }>()
 
 onMounted(() => {
   if (!document.getElementById('lucide-sprite')) {
-    console.warn(
-      'Lucide sprite not found! Make sure to use the spritePlugin.'
-    )
+    console.warn('Lucide sprite not found! Make sure to use the spritePlugin.')
   }
 })
 </script>
diff --git a/icons/IconPicker.story.vue b/icons/IconPicker.story.vue
index 6473b00cc..530089daa 100644
--- a/icons/IconPicker.story.vue
+++ b/icons/IconPicker.story.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
+
 import IconPicker from './IconPicker.vue'
 
 const basicValue = ref(null)
@@ -19,7 +20,7 @@ const state = reactive({
   <Story title="IconPicker" :layout="{ type: 'grid', width: 400 }">
     <Variant title="Basic Usage">
       <div class="p-4">
-        <label class="block text-sm font-medium mb-2">Basic Icon Picker</label>
+        <label class="mb-2 block text-sm font-medium">Basic Icon Picker</label>
         <IconPicker
           v-model="basicValue"
           :placeholder="state.placeholder"
@@ -28,82 +29,66 @@ const state = reactive({
           :open-on-focus="state.openOnFocus"
           :placement="state.placement"
         />
-        <div class="mt-2 text-sm text-gray-600">
-          Selected: {{ basicValue || 'None' }}
-        </div>
+        <div class="mt-2 text-sm text-gray-600">Selected: {{ basicValue || 'None' }}</div>
       </div>
     </Variant>
 
     <Variant title="Subtle Variant (Default)">
       <div class="p-4">
-        <label class="block text-sm font-medium mb-2">Subtle Variant</label>
+        <label class="mb-2 block text-sm font-medium">Subtle Variant</label>
         <IconPicker
           variant="subtle"
           v-model="basicValue"
           :placeholder="state.placeholder"
           :disabled="state.disabled"
         />
-        <div class="mt-2 text-sm text-gray-600">
-          Selected: {{ basicValue || 'None' }}
-        </div>
+        <div class="mt-2 text-sm text-gray-600">Selected: {{ basicValue || 'None' }}</div>
       </div>
     </Variant>
 
     <Variant title="Outline Variant">
       <div class="p-4">
-        <label class="block text-sm font-medium mb-2">Outline Variant</label>
+        <label class="mb-2 block text-sm font-medium">Outline Variant</label>
         <IconPicker
           variant="outline"
           v-model="basicValue"
           :placeholder="state.placeholder"
           :disabled="state.disabled"
         />
-        <div class="mt-2 text-sm text-gray-600">
-          Selected: {{ basicValue || 'None' }}
-        </div>
+        <div class="mt-2 text-sm text-gray-600">Selected: {{ basicValue || 'None' }}</div>
       </div>
     </Variant>
 
     <Variant title="Ghost Variant">
       <div class="p-4">
-        <label class="block text-sm font-medium mb-2">Ghost Variant</label>
+        <label class="mb-2 block text-sm font-medium">Ghost Variant</label>
         <IconPicker
           variant="ghost"
           v-model="basicValue"
           :placeholder="state.placeholder"
           :disabled="state.disabled"
         />
-        <div class="mt-2 text-sm text-gray-600">
-          Selected: {{ basicValue || 'None' }}
-        </div>
+        <div class="mt-2 text-sm text-gray-600">Selected: {{ basicValue || 'None' }}</div>
       </div>
     </Variant>
 
     <Variant title="Pre-selected Icon">
       <div class="p-4">
-        <label class="block text-sm font-medium mb-2">Pre-selected Icon</label>
+        <label class="mb-2 block text-sm font-medium">Pre-selected Icon</label>
         <IconPicker
           v-model="preselectedValue"
           :placeholder="state.placeholder"
           :disabled="state.disabled"
         />
-        <div class="mt-2 text-sm text-gray-600">
-          Selected: {{ preselectedValue || 'None' }}
-        </div>
+        <div class="mt-2 text-sm text-gray-600">Selected: {{ preselectedValue || 'None' }}</div>
       </div>
     </Variant>
 
     <Variant title="Disabled State">
       <div class="p-4">
-        <label class="block text-sm font-medium mb-2">Disabled Icon Picker</label>
-        <IconPicker
-          v-model="disabledValue"
-          placeholder="This is disabled"
-          :disabled="true"
-        />
-        <div class="mt-2 text-sm text-gray-600">
-          Icon picker is disabled
-        </div>
+        <label class="mb-2 block text-sm font-medium">Disabled Icon Picker</label>
+        <IconPicker v-model="disabledValue" placeholder="This is disabled" :disabled="true" />
+        <div class="mt-2 text-sm text-gray-600">Icon picker is disabled</div>
       </div>
     </Variant>
 
@@ -118,7 +103,7 @@ const state = reactive({
         :options="[
           { value: 'start', label: 'Start' },
           { value: 'center', label: 'Center' },
-          { value: 'end', label: 'End' }
+          { value: 'end', label: 'End' },
         ]"
       />
     </template>
diff --git a/icons/IconPicker.vue b/icons/IconPicker.vue
index 690db1b13..e058e139c 100644
--- a/icons/IconPicker.vue
+++ b/icons/IconPicker.vue
@@ -10,6 +10,7 @@ import {
   ComboboxViewport,
 } from 'reka-ui'
 import { computed, onMounted, ref, watch } from 'vue'
+
 import Icon from './Icon.vue'
 
 export interface IconPickerProps {
@@ -94,9 +95,7 @@ const handleInputChange = (event: Event) => {
 const handleOpenChange = (open: boolean) => {
   isOpen.value = open
   if (!open) {
-    searchTerm.value = internalModelValue.value
-      ? getLabel(internalModelValue.value)
-      : ''
+    searchTerm.value = internalModelValue.value ? getLabel(internalModelValue.value) : ''
   }
 }
 
@@ -155,22 +154,19 @@ defineExpose({
       <ComboboxAnchor
         class="flex h-7 w-full items-center justify-between gap-2 rounded px-2 py-1 transition-colors"
         :class="{
-          'opacity-50 pointer-events-none': disabled,
+          'pointer-events-none opacity-50': disabled,
           [variantClasses]: true,
         }"
         @click="handleClick"
       >
-        <div class="flex items-center gap-2 flex-1 overflow-hidden">
-          <Icon
-            :name="internalModelValue || 'circle-dashed'"
-            class="w-4 h-4 flex-shrink-0"
-          />
+        <div class="flex flex-1 items-center gap-2 overflow-hidden">
+          <Icon :name="internalModelValue || 'circle-dashed'" class="h-4 w-4 flex-shrink-0" />
           <ComboboxInput
             :value="searchTerm"
             @input="handleInputChange"
             @focus="handleFocus"
             @blur="handleBlur"
-            class="bg-transparent p-0 focus:outline-0 border-0 focus:border-0 focus:ring-0 text-base text-ink-gray-8 h-full placeholder:text-ink-gray-4 w-full"
+            class="h-full w-full border-0 bg-transparent p-0 text-base text-ink-gray-8 placeholder:text-ink-gray-4 focus:border-0 focus:outline-0 focus:ring-0"
             :placeholder="placeholder || 'Select an icon...'"
             :disabled="disabled"
             autocomplete="off"
@@ -182,7 +178,7 @@ defineExpose({
       </ComboboxAnchor>
       <ComboboxPortal>
         <ComboboxContent
-          class="z-10 w-60 mt-1 bg-surface-modal overflow-hidden rounded-lg shadow-2xl"
+          class="z-10 mt-1 w-60 overflow-hidden rounded-lg bg-surface-modal shadow-2xl"
           position="popper"
           @openAutoFocus.prevent
           @closeAutoFocus.prevent
@@ -191,11 +187,9 @@ defineExpose({
           <ComboboxViewport class="max-h-60 overflow-auto p-2">
             <ComboboxEmpty
               v-if="filteredIcons.length === 0"
-              class="text-ink-gray-5 text-base text-center py-1.5 px-2.5"
+              class="px-2.5 py-1.5 text-center text-base text-ink-gray-5"
             >
-              <template v-if="searchTerm">
-                No icons found for "{{ searchTerm }}"
-              </template>
+              <template v-if="searchTerm"> No icons found for "{{ searchTerm }}" </template>
               <template v-else> No icons available. </template>
             </ComboboxEmpty>
             <div v-if="filteredIcons.length > 0" class="flex flex-wrap">
@@ -204,13 +198,13 @@ defineExpose({
                 :key="iconName"
                 @click="handleIconClick(iconName)"
                 type="button"
-                class="w-8 h-8 flex items-center justify-center rounded hover:bg-surface-gray-3 transition-colors"
+                class="flex h-8 w-8 items-center justify-center rounded transition-colors hover:bg-surface-gray-3"
                 :class="{
                   'bg-surface-gray-3': internalModelValue === iconName,
                 }"
                 :title="getLabel(iconName)"
               >
-                <Icon :name="iconName" class="w-4 h-4" />
+                <Icon :name="iconName" class="h-4 w-4" />
               </button>
             </div>
           </ComboboxViewport>
diff --git a/icons/LightningIcon.vue b/icons/LightningIcon.vue
index 18c9e08d0..f21278f4c 100644
--- a/icons/LightningIcon.vue
+++ b/icons/LightningIcon.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="17"
-    height="16"
-    viewBox="0 0 17 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
diff --git a/icons/StepsIcon.vue b/icons/StepsIcon.vue
index 94d2efabd..e61b6a725 100644
--- a/icons/StepsIcon.vue
+++ b/icons/StepsIcon.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
diff --git a/index.html b/index.html
index 5378c060c..24705fe9a 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/license.md b/license.md
index 3acdd754b..bdaff64d5 100644
--- a/license.md
+++ b/license.md
@@ -5,4 +5,4 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of
 
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/main.js b/main.js
index 55615e927..ac478aaf4 100644
--- a/main.js
+++ b/main.js
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+
 import './src/style.css'
 import App from './App.vue'
 import { spritePlugin } from './icons'
diff --git a/package.json b/package.json
index 09b81fb45..177bf4644 100644
--- a/package.json
+++ b/package.json
@@ -2,22 +2,23 @@
   "name": "frappe-ui",
   "version": "0.1.271",
   "description": "A set of components and utilities for rapid UI development",
+  "license": "MIT",
+  "author": "Frappe Technologies Pvt. Ltd.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/frappe/frappe-ui.git"
+  },
+  "files": [
+    "frappe",
+    "src",
+    "scripts",
+    "vite",
+    "icons",
+    "tailwind",
+    "tsconfig.base.json"
+  ],
   "type": "module",
   "sideEffects": false,
-  "scripts": {
-    "test": "vitest --run",
-    "type-check": "tsc --noEmit",
-    "prettier": "yarn prettier -w ./src",
-    "bump-and-release": "yarn test && git pull --rebase origin main && yarn run release-patch",
-    "release-patch": "yarn version --patch && git push && git push --tags",
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "docs:dev": "vitepress dev docs --host",
-    "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs",
-    "docs:gen": "node docs/scripts/propsgen.ts --trace-uncaught"
-  },
   "exports": {
     ".": {
       "import": "./src/index.ts",
@@ -53,21 +54,25 @@
       "types": "./tsconfig.base.json"
     }
   },
-  "files": [
-    "frappe",
-    "src",
-    "scripts",
-    "vite",
-    "icons",
-    "tailwind",
-    "tsconfig.base.json"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/frappe/frappe-ui.git"
+  "scripts": {
+    "test": "vitest --run",
+    "type-check": "tsc --noEmit",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix",
+    "lint-and-format": "yarn format && yarn lint:fix",
+    "bump-and-release": "yarn test && git pull --rebase origin main && yarn run release-patch",
+    "release-patch": "yarn version --patch && git push && git push --tags",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepare": "chmod +x ./scripts/setup-pre-commit.sh && ./scripts/setup-pre-commit.sh",
+    "docs:dev": "vitepress dev docs --host",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "docs:gen": "node docs/scripts/propsgen.ts --trace-uncaught"
   },
-  "author": "Frappe Technologies Pvt. Ltd.",
-  "license": "MIT",
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/vue": "^1.1.6",
@@ -125,10 +130,6 @@
     "unplugin-icons": "^22.1.0",
     "unplugin-vue-components": "^28.4.1"
   },
-  "peerDependencies": {
-    "vue": ">=3.5.0",
-    "vue-router": "^4.1.6"
-  },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.13",
@@ -137,6 +138,8 @@
     "jsdom": "^27.4.0",
     "lint-staged": ">=10",
     "msw": "^2.7.0",
+    "oxfmt": "^0.44.0",
+    "oxlint": "^1.59.0",
     "postcss": "^8.4.21",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.2.7",
@@ -147,13 +150,14 @@
     "vue-component-meta": "^3.1.8",
     "vue-router": "^4.1.6"
   },
+  "peerDependencies": {
+    "vue": ">=3.5.0",
+    "vue-router": "^4.1.6"
+  },
   "resolutions": {
     "prosemirror-model": "1.25.2",
     "prosemirror-state": "1.4.3",
-    "prosemirror-view": "1.40.0",
-    "prosemirror-transform": "1.10.4"
-  },
-  "lint-staged": {
-    "*.{js,css,md,vue}": "prettier --write"
+    "prosemirror-transform": "1.10.4",
+    "prosemirror-view": "1.40.0"
   }
 }
diff --git a/readme.md b/readme.md
index 3e701e506..25adf1845 100644
--- a/readme.md
+++ b/readme.md
@@ -3,6 +3,7 @@
 <img src="https://github.com/user-attachments/assets/0a81cdc1-d957-47a9-b151-f5571be0d038" width="80" />
 
 # Frappe UI
+
 **Rapidly build modern frontends for Frappe apps**
 
 <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/frappe-ui.svg?style=flat"/>
@@ -17,8 +18,8 @@
 Frappe UI provides a set of components and utilities for rapid UI development. Components are built using Vue 3 and Tailwind.
 Along with generic components like Button, Link, Dialog, etc., it also contains utilities for handling server-side data fetching, directives and utilities.
 
-
 ### Motivation
+
 In 2019, I began building [Frappe Books](https://github.com/frappe/books) which had a new design. This led to the creation of small reusable components like Button, Dialog, and Card. Moving on to [Frappe Cloud](https://github.com/frappe/press) in 2020, I reused and evolved these components in the Frappe Cloud UI. In 2022, while starting a new project, I decided to extract these components into a standalone package to avoid repeating the copy-paste process. This package is now being developed alongside the [Gameplan](https://github.com/frappe/gameplan), continually adding generic components and utilities for frontend development.
 
 ### Under the Hood
diff --git a/scripts/pre-commit.sh b/scripts/pre-commit.sh
new file mode 100644
index 000000000..e3b4a3e7e
--- /dev/null
+++ b/scripts/pre-commit.sh
@@ -0,0 +1,7 @@
+STAGED=$(git diff --cached --name-only --diff-filter=ACMR)
+yarn format
+
+git diff --exit-code $STAGED || {
+  echo "✗ Staged files were formatted - review and commit again."
+  exit 1
+}
\ No newline at end of file
diff --git a/scripts/setup-pre-commit.sh b/scripts/setup-pre-commit.sh
new file mode 100755
index 000000000..d67717620
--- /dev/null
+++ b/scripts/setup-pre-commit.sh
@@ -0,0 +1 @@
+cp ./scripts/pre-commit.sh "$(git rev-parse --git-dir)/hooks/pre-commit" && chmod +x "$(git rev-parse --git-dir)/hooks/pre-commit"
\ No newline at end of file
diff --git a/src/components/Alert/Alert.cy.ts b/src/components/Alert/Alert.cy.ts
index 97a43b54e..6dc1c85a1 100644
--- a/src/components/Alert/Alert.cy.ts
+++ b/src/components/Alert/Alert.cy.ts
@@ -1,6 +1,7 @@
-import Alert from './Alert.vue'
 import { h } from 'vue'
 
+import Alert from './Alert.vue'
+
 const titleTxt = 'some title'
 const description = 'some description'
 const el = '[role="alert"]'
diff --git a/src/components/Alert/Alert.vue b/src/components/Alert/Alert.vue
index eed0afb33..0e0ff97ff 100644
--- a/src/components/Alert/Alert.vue
+++ b/src/components/Alert/Alert.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import LucideCheck from '~icons/lucide/circle-check'
+import LucideCircleX from '~icons/lucide/circle-x'
+import LucideInfo from '~icons/lucide/info'
+import LucideWarning from '~icons/lucide/triangle-alert'
+import LucideX from '~icons/lucide/x'
 
-import type { AlertProps } from "./types";
-
-import LucideX from "~icons/lucide/x";
-import LucideInfo from "~icons/lucide/info";
-import LucideCircleX from "~icons/lucide/circle-x";
-import LucideCheck from "~icons/lucide/circle-check";
-import LucideWarning from "~icons/lucide/triangle-alert";
+import type { AlertProps } from './types'
 
 /** Controls the visibility of the alert for dismissing or toggling it */
-const visible = defineModel({ default: true });
+const visible = defineModel({ default: true })
 
 const emit = defineEmits(['dismiss'])
 
@@ -21,16 +20,16 @@ const dismissAlert = () => {
 
 const classes = computed(() => {
   const subtleBgs = {
-    yellow: "bg-surface-amber-2",
-    blue: "bg-surface-blue-2",
-    red: "bg-surface-red-2",
-    green: "bg-surface-green-2",
-  };
+    yellow: 'bg-surface-amber-2',
+    blue: 'bg-surface-blue-2',
+    red: 'bg-surface-red-2',
+    green: 'bg-surface-green-2',
+  }
 
-  if (props.variant == "outline") return "border border-outline-gray-3";
+  if (props.variant == 'outline') return 'border border-outline-gray-3'
 
-  return props.theme ? subtleBgs[props.theme] : "bg-surface-gray-2";
-});
+  return props.theme ? subtleBgs[props.theme] : 'bg-surface-gray-2'
+})
 
 const icon = computed(() => {
   const data = {
@@ -43,9 +42,9 @@ const icon = computed(() => {
 })
 
 const props = withDefaults(defineProps<AlertProps>(), {
-  variant: "subtle",
+  variant: 'subtle',
   dismissable: true,
-});
+})
 
 defineSlots<{
   /** Custom icon shown before the content */
@@ -64,22 +63,17 @@ defineSlots<{
     v-if="visible"
     role="alert"
     :class="classes"
-    class="grid grid-cols-[auto_1fr_auto] gap-3 rounded-md px-4 py-3.5 text-base items-start"
+    class="grid grid-cols-[auto_1fr_auto] items-start gap-3 rounded-md px-4 py-3.5 text-base"
   >
     <slot name="icon">
-      <component
-        :is="icon.component"
-        class="size-4"
-        v-if="icon"
-        :class="icon.css"
-      />
+      <component :is="icon.component" class="size-4" v-if="icon" :class="icon.css" />
     </slot>
 
-    <div class="grid gap-2" :class='{ "col-span-2": !$slots.icon && !icon }'>
+    <div class="grid gap-2" :class="{ 'col-span-2': !$slots.icon && !icon }">
       <span class="text-ink-gray-9"> {{ props.title }} </span>
 
       <slot name="description">
-        <p v-if="props.description" class="text-ink-gray-6 prose-sm">
+        <p v-if="props.description" class="prose-sm text-ink-gray-6">
           {{ props.description }}
         </p>
       </slot>
diff --git a/src/components/Alert/stories/Controlled.vue b/src/components/Alert/stories/Controlled.vue
index 0ec0a5cd3..75bd62554 100644
--- a/src/components/Alert/stories/Controlled.vue
+++ b/src/components/Alert/stories/Controlled.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Alert, Button } from 'frappe-ui'
+import { ref } from 'vue'
 
 const visible = ref(true)
 </script>
diff --git a/src/components/Autocomplete/Autocomplete.vue b/src/components/Autocomplete/Autocomplete.vue
index 6cb7d2115..36bc16af5 100644
--- a/src/components/Autocomplete/Autocomplete.vue
+++ b/src/components/Autocomplete/Autocomplete.vue
@@ -13,9 +13,7 @@
       :placement="placement"
       :match-target-width="true"
     >
-      <template
-        #target="{ open: openPopover, togglePopover, close: closePopover }"
-      >
+      <template #target="{ open: openPopover, togglePopover, close: closePopover }">
         <slot
           name="target"
           v-bind="{
@@ -30,16 +28,13 @@
               {{ props.label }}
             </label>
             <button
-              class="flex h-7 w-full items-center justify-between gap-2 rounded bg-surface-gray-2 px-2 py-1 transition-colors hover:bg-surface-gray-3 border border-transparent focus:border-outline-gray-4 focus:outline-none focus:ring-2 focus:ring-outline-gray-3"
+              class="flex h-7 w-full items-center justify-between gap-2 rounded border border-transparent bg-surface-gray-2 px-2 py-1 transition-colors hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:outline-none focus:ring-2 focus:ring-outline-gray-3"
               :class="{ 'bg-surface-gray-3': isComboboxOpen }"
               @click="() => togglePopover()"
             >
               <div class="flex items-center overflow-hidden">
                 <slot name="prefix" />
-                <span
-                  class="truncate text-base leading-5 text-ink-gray-8"
-                  v-if="displayValue"
-                >
+                <span class="truncate text-base leading-5 text-ink-gray-8" v-if="displayValue">
                   {{ displayValue }}
                 </span>
                 <span class="text-base leading-5 text-ink-gray-4" v-else>
@@ -47,11 +42,7 @@
                 </span>
                 <slot name="suffix" />
               </div>
-              <FeatherIcon
-                name="chevron-down"
-                class="h-4 w-4 text-ink-gray-5"
-                aria-hidden="true"
-              />
+              <FeatherIcon name="chevron-down" class="h-4 w-4 text-ink-gray-5" aria-hidden="true" />
             </button>
           </div>
         </slot>
@@ -74,31 +65,22 @@
                 <div class="relative w-full">
                   <ComboboxInput
                     ref="searchInput"
-                    class="form-input w-full focus:bg-surface-gray-3 hover:bg-surface-gray-4 text-ink-gray-8"
+                    class="form-input w-full text-ink-gray-8 hover:bg-surface-gray-4 focus:bg-surface-gray-3"
                     type="text"
                     :value="query"
                     @change="query = $event.target.value"
                     autocomplete="off"
                     placeholder="Search"
                   />
-                  <div
-                    class="absolute right-0 inline-flex h-7 w-7 items-center justify-center"
-                  >
-                    <LoadingIndicator
-                      v-if="props.loading"
-                      class="h-4 w-4 text-ink-gray-5"
-                    />
+                  <div class="absolute right-0 inline-flex h-7 w-7 items-center justify-center">
+                    <LoadingIndicator v-if="props.loading" class="h-4 w-4 text-ink-gray-5" />
                     <button v-else @click="clearAll">
                       <FeatherIcon name="x" class="w-4 text-ink-gray-8" />
                     </button>
                   </div>
                 </div>
               </div>
-              <div
-                v-for="group in groups"
-                :key="group.key"
-                v-show="group.items.length > 0"
-              >
+              <div v-for="group in groups" :key="group.key" v-show="group.items.length > 0">
                 <div
                   v-if="group.group && !group.hideLabel"
                   class="sticky top-10 truncate bg-surface-modal px-2.5 py-1.5 text-sm font-medium text-ink-gray-5"
@@ -107,10 +89,7 @@
                 </div>
                 <ComboboxOption
                   as="template"
-                  v-for="(option, idx) in group.items.slice(
-                    0,
-                    props.maxOptions,
-                  )"
+                  v-for="(option, idx) in group.items.slice(0, props.maxOptions)"
                   :key="idx"
                   :value="option"
                   :disabled="option.disabled"
@@ -125,15 +104,12 @@
                       },
                     ]"
                   >
-                    <div class="flex flex-1 gap-2 overflow-hidden items-center">
+                    <div class="flex flex-1 items-center gap-2 overflow-hidden">
                       <div
                         v-if="$slots['item-prefix'] || props.multiple"
                         class="flex flex-shrink-0"
                       >
-                        <slot
-                          name="item-prefix"
-                          v-bind="{ active, selected, option }"
-                        >
+                        <slot name="item-prefix" v-bind="{ active, selected, option }">
                           <FeatherIcon
                             name="check"
                             v-if="isOptionSelected(option)"
@@ -151,14 +127,8 @@
                       v-if="$slots['item-suffix'] || option?.description"
                       class="ml-2 flex-shrink-0"
                     >
-                      <slot
-                        name="item-suffix"
-                        v-bind="{ active, selected, option }"
-                      >
-                        <div
-                          v-if="option?.description"
-                          class="text-sm text-ink-gray-5"
-                        >
+                      <slot name="item-suffix" v-bind="{ active, selected, option }">
+                        <div v-if="option?.description" class="text-sm text-ink-gray-5">
                           {{ option.description }}
                         </div>
                       </slot>
@@ -174,10 +144,7 @@
               </li>
             </ComboboxOptions>
 
-            <div
-              v-if="$slots.footer || props.showFooter || multiple"
-              class="border-t p-1"
-            >
+            <div v-if="$slots.footer || props.showFooter || multiple" class="border-t p-1">
               <slot name="footer" v-bind="{ togglePopover }">
                 <div v-if="multiple" class="flex items-center justify-end">
                   <Button
@@ -185,11 +152,7 @@
                     label="Select All"
                     @click.stop="selectAll"
                   />
-                  <Button
-                    v-if="areAllOptionsSelected"
-                    label="Clear All"
-                    @click.stop="clearAll"
-                  />
+                  <Button v-if="areAllOptionsSelected" label="Clear All" @click.stop="clearAll" />
                 </div>
                 <div v-else class="flex items-center justify-end">
                   <Button label="Clear" @click.stop="clearAll" />
@@ -204,17 +167,13 @@
 </template>
 
 <script setup lang="ts">
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxOption,
-  ComboboxOptions,
-} from '@headlessui/vue'
+import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/vue'
 import { computed, nextTick, ref, watch } from 'vue'
-import { Popover } from '../Popover'
+
 import { Button } from '../Button'
 import FeatherIcon from '../FeatherIcon.vue'
 import LoadingIndicator from '../LoadingIndicator.vue'
+import { Popover } from '../Popover'
 import type {
   AutocompleteOptionGroup,
   AutocompleteOption,
@@ -270,9 +229,7 @@ const sanitizeOptions = (options: AutocompleteOption[]) => {
   if (!options) return []
   // in case the options are just values, convert them to objects
   return options.map((option) => {
-    return isOption(option)
-      ? option
-      : { label: option.toString(), value: option }
+    return isOption(option) ? option : { label: option.toString(), value: option }
   })
 }
 
@@ -281,10 +238,7 @@ const filterOptions = (options: Option[]) => {
   return options.filter((option) => {
     return (
       option.label.toLowerCase().includes(query.value.trim().toLowerCase()) ||
-      option.value
-        .toString()
-        .toLowerCase()
-        .includes(query.value.trim().toLowerCase())
+      option.value.toString().toLowerCase().includes(query.value.trim().toLowerCase())
     )
   })
 }
@@ -302,9 +256,7 @@ const selectedValue = computed({
     // in case of `multiple`, modelValue is an array of values
     // if the modelValue is a list of values, convert them to options
     const values = (props.modelValue || []) as AutocompleteOption[]
-    return isOption(values[0])
-      ? values
-      : values.map((v) => findOption(v) || makeOption(v))
+    return isOption(values[0]) ? values : values.map((v) => findOption(v) || makeOption(v))
   },
   set(val) {
     query.value = ''
@@ -336,9 +288,7 @@ const displayValue = computed(() => {
   if (!props.multiple) {
     return getLabel(selectedValue.value as AutocompleteOption)
   }
-  return (selectedValue.value as AutocompleteOption[])
-    .map((v) => getLabel(v))
-    .join(', ')
+  return (selectedValue.value as AutocompleteOption[]).map((v) => getLabel(v)).join(', ')
 })
 
 const isOptionSelected = (option: AutocompleteOption) => {
@@ -354,10 +304,7 @@ const isOptionSelected = (option: AutocompleteOption) => {
 
 const areAllOptionsSelected = computed(() => {
   if (!props.multiple) return false
-  return (
-    allOptions.value.length ===
-    (selectedValue.value as AutocompleteOption[])?.length
-  )
+  return allOptions.value.length === (selectedValue.value as AutocompleteOption[])?.length
 })
 
 const selectAll = () => {
diff --git a/src/components/Avatar/Avatar.cy.ts b/src/components/Avatar/Avatar.cy.ts
index ee7f4ce4b..ba9eadf61 100644
--- a/src/components/Avatar/Avatar.cy.ts
+++ b/src/components/Avatar/Avatar.cy.ts
@@ -3,19 +3,19 @@ import Avatar from './Avatar.vue'
 const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl']
 
 const sizeHeights = {
-  xs: '4',
-  sm: '5',
-  md: '6',
-  lg: '7',
-  xl: '8',
+  'xs': '4',
+  'sm': '5',
+  'md': '6',
+  'lg': '7',
+  'xl': '8',
   '2xl': '10',
   '3xl': '11.5',
 }
 
 const defaultProps = {
   'data-cy': 'avatar',
-  image: 'https://avatars.githubusercontent.com/u/499550',
-  label: 'Abc',
+  'image': 'https://avatars.githubusercontent.com/u/499550',
+  'label': 'Abc',
 }
 
 describe('Avatar', () => {
@@ -39,7 +39,7 @@ describe('Avatar', () => {
 
   it('Name', () => {
     cy.mount(Avatar, {
-      props: { 'data-cy': 'avatar', label: 'Abc' },
+      props: { 'data-cy': 'avatar', 'label': 'Abc' },
     })
 
     cy.get('[data-cy="avatar"]').should('have.text', 'A')
diff --git a/src/components/Avatar/Avatar.vue b/src/components/Avatar/Avatar.vue
index ec6dd71f1..66d802465 100644
--- a/src/components/Avatar/Avatar.vue
+++ b/src/components/Avatar/Avatar.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="relative inline-block shrink-0"
-    :class="[sizeClasses, shapeClasses]"
-  >
+  <div class="relative inline-block shrink-0" :class="[sizeClasses, shapeClasses]">
     <img
       v-if="image && !imgFetchError"
       :src="image"
@@ -12,7 +9,7 @@
     />
     <div
       v-else
-      class="flex h-full w-full items-center justify-center bg-surface-gray-2 uppercase text-ink-gray-5 select-none"
+      class="flex h-full w-full select-none items-center justify-center bg-surface-gray-2 uppercase text-ink-gray-5"
       :class="[labelClasses, shapeClasses]"
     >
       <div :class="iconClasses" v-if="$slots.default">
@@ -38,6 +35,7 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+
 import type { AvatarProps } from './types'
 
 const imgFetchError = ref(false)
@@ -51,11 +49,11 @@ const shapeClasses = computed(() => {
   return {
     circle: 'rounded-full',
     square: {
-      xs: 'rounded-[4px]',
-      sm: 'rounded-[5px]',
-      md: 'rounded-[5px]',
-      lg: 'rounded-[6px]',
-      xl: 'rounded-[6px]',
+      'xs': 'rounded-[4px]',
+      'sm': 'rounded-[5px]',
+      'md': 'rounded-[5px]',
+      'lg': 'rounded-[6px]',
+      'xl': 'rounded-[6px]',
       '2xl': 'rounded-[8px]',
       '3xl': 'rounded-[10px]',
     }[props.size],
@@ -64,11 +62,11 @@ const shapeClasses = computed(() => {
 
 const sizeClasses = computed(() => {
   return {
-    xs: 'w-4 h-4',
-    sm: 'w-5 h-5',
-    md: 'w-6 h-6',
-    lg: 'w-7 h-7',
-    xl: 'w-8 h-8',
+    'xs': 'w-4 h-4',
+    'sm': 'w-5 h-5',
+    'md': 'w-6 h-6',
+    'lg': 'w-7 h-7',
+    'xl': 'w-8 h-8',
     '2xl': 'w-10 h-10',
     '3xl': 'w-11.5 h-11.5',
   }[props.size]
@@ -76,11 +74,11 @@ const sizeClasses = computed(() => {
 
 const labelClasses = computed(() => {
   let sizeClass = {
-    xs: 'text-2xs',
-    sm: 'text-sm',
-    md: 'text-base',
-    lg: 'text-base',
-    xl: 'text-lg',
+    'xs': 'text-2xs',
+    'sm': 'text-sm',
+    'md': 'text-base',
+    'lg': 'text-base',
+    'xl': 'text-lg',
     '2xl': 'text-xl',
     '3xl': 'text-2xl',
   }[props.size]
@@ -89,11 +87,11 @@ const labelClasses = computed(() => {
 
 const indicatorContainerClasses = computed(() => {
   return {
-    xs: '-mr-[.1rem] -mb-[.1rem] h-2 w-2',
-    sm: '-mr-[.1rem] -mb-[.1rem] h-[9px] w-[9px]',
-    md: '-mr-[.1rem] -mb-[.1rem] h-2.5 w-2.5',
-    lg: '-mr-[.1rem] -mb-[.1rem] h-3 w-3',
-    xl: '-mr-[.1rem] -mb-[.1rem] h-3 w-3',
+    'xs': '-mr-[.1rem] -mb-[.1rem] h-2 w-2',
+    'sm': '-mr-[.1rem] -mb-[.1rem] h-[9px] w-[9px]',
+    'md': '-mr-[.1rem] -mb-[.1rem] h-2.5 w-2.5',
+    'lg': '-mr-[.1rem] -mb-[.1rem] h-3 w-3',
+    'xl': '-mr-[.1rem] -mb-[.1rem] h-3 w-3',
     '2xl': '-mr-[.1rem] -mb-[.1rem] h-3.5 w-3.5',
     '3xl': '-mr-[.2rem] -mb-[.2rem] h-4 w-4',
   }[props.size]
@@ -101,11 +99,11 @@ const indicatorContainerClasses = computed(() => {
 
 const indicatorClasses = computed(() => {
   return {
-    xs: 'h-1 w-1',
-    sm: 'h-[5px] w-[5px]',
-    md: 'h-1.5 w-1.5',
-    lg: 'h-2 w-2',
-    xl: 'h-2 w-2',
+    'xs': 'h-1 w-1',
+    'sm': 'h-[5px] w-[5px]',
+    'md': 'h-1.5 w-1.5',
+    'lg': 'h-2 w-2',
+    'xl': 'h-2 w-2',
     '2xl': 'h-2.5 w-2.5',
     '3xl': 'h-3 w-3',
   }[props.size]
@@ -113,11 +111,11 @@ const indicatorClasses = computed(() => {
 
 const iconClasses = computed(() => {
   return {
-    xs: 'h-2.5 w-2.5',
-    sm: 'h-3 w-3',
-    md: 'h-4 w-4',
-    lg: 'h-4 w-4',
-    xl: 'h-4 w-4',
+    'xs': 'h-2.5 w-2.5',
+    'sm': 'h-3 w-3',
+    'md': 'h-4 w-4',
+    'lg': 'h-4 w-4',
+    'xl': 'h-4 w-4',
     '2xl': 'h-5 w-5',
     '3xl': 'h-5 w-5',
   }[props.size]
@@ -136,5 +134,4 @@ defineSlots<{
   /** Small indicator shown at the bottom-right of the avatar */
   indicator?: () => any
 }>()
-
 </script>
diff --git a/src/components/Badge/Badge.cy.ts b/src/components/Badge/Badge.cy.ts
index 8d1febe1e..c53fac97c 100644
--- a/src/components/Badge/Badge.cy.ts
+++ b/src/components/Badge/Badge.cy.ts
@@ -1,6 +1,7 @@
-import Badge from './Badge.vue'
 import { h } from 'vue'
 
+import Badge from './Badge.vue'
+
 describe('<Badge />', () => {
   it('renders default badge', () => {
     cy.mount(Badge, {
@@ -239,7 +240,7 @@ describe('<Badge />', () => {
   it('renders prefix slot with correct size constraints', () => {
     const TestIcon = {
       render() {
-        return h('svg', { 'data-cy': 'prefix-icon', class: 'w-4 h-4' })
+        return h('svg', { 'data-cy': 'prefix-icon', 'class': 'w-4 h-4' })
       },
     }
 
diff --git a/src/components/Badge/Badge.vue b/src/components/Badge/Badge.vue
index 8099ae703..594d6656c 100644
--- a/src/components/Badge/Badge.vue
+++ b/src/components/Badge/Badge.vue
@@ -1,19 +1,13 @@
 <template>
   <div
-    class="inline-flex select-none items-center gap-1 rounded-full whitespace-nowrap"
+    class="inline-flex select-none items-center gap-1 whitespace-nowrap rounded-full"
     :class="classes"
   >
-    <div
-      :class="[props.size == 'lg' ? 'max-h-6' : 'max-h-4']"
-      v-if="$slots.prefix"
-    >
+    <div :class="[props.size == 'lg' ? 'max-h-6' : 'max-h-4']" v-if="$slots.prefix">
       <slot name="prefix"></slot>
     </div>
     <slot>{{ props.label?.toString() }}</slot>
-    <div
-      :class="[props.size == 'lg' ? 'max-h-6' : 'max-h-4']"
-      v-if="$slots.suffix"
-    >
+    <div :class="[props.size == 'lg' ? 'max-h-6' : 'max-h-4']" v-if="$slots.suffix">
       <slot name="suffix"></slot>
     </div>
   </div>
@@ -21,6 +15,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
+
 import type { BadgeProps } from './types'
 
 const props = withDefaults(defineProps<BadgeProps>(), {
@@ -73,7 +68,7 @@ const classes = computed(() => {
     sm: 'h-4 text-xs px-1.5',
     md: 'h-5 text-xs px-1.5',
     lg: 'h-6 text-sm px-2',
-		xl: 'h-7 text-base px-2',
+    xl: 'h-7 text-base px-2',
   }[props.size]
 
   return [variantClasses, sizeClasses]
diff --git a/src/components/Badge/stories/Themes.vue b/src/components/Badge/stories/Themes.vue
index 0ee989120..fe637be34 100644
--- a/src/components/Badge/stories/Themes.vue
+++ b/src/components/Badge/stories/Themes.vue
@@ -3,8 +3,8 @@ import { Badge } from 'frappe-ui'
 </script>
 
 <template>
-  <Badge theme="gray" size='lg'>Solid</Badge>
-  <Badge theme="blue" size='lg'>Subtle</Badge>
-  <Badge theme="green" size='lg'>Outline</Badge>
-  <Badge theme="orange" size='lg'>Ghost</Badge>
+  <Badge theme="gray" size="lg">Solid</Badge>
+  <Badge theme="blue" size="lg">Subtle</Badge>
+  <Badge theme="green" size="lg">Outline</Badge>
+  <Badge theme="orange" size="lg">Ghost</Badge>
 </template>
diff --git a/src/components/Badge/types.ts b/src/components/Badge/types.ts
index 0d9417564..8ca421afc 100644
--- a/src/components/Badge/types.ts
+++ b/src/components/Badge/types.ts
@@ -15,4 +15,3 @@ export interface BadgeProps {
   /** Content displayed inside the badge */
   label?: Label | string | number
 }
-
diff --git a/src/components/Breadcrumbs/Breadcrumbs.cy.ts b/src/components/Breadcrumbs/Breadcrumbs.cy.ts
index 698221063..b3d877942 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.cy.ts
+++ b/src/components/Breadcrumbs/Breadcrumbs.cy.ts
@@ -25,10 +25,7 @@ describe('Breadcrumbs', () => {
     const childrenLen = items.length * 2 - 1
 
     const el = '.flex.min-w-0.items-center.text-ellipsis.whitespace-nowrap > *'
-    cy.get(el)
-      .should('have.length', childrenLen)
-      .eq(0)
-      .should('have.text', 'Home')
+    cy.get(el).should('have.length', childrenLen).eq(0).should('have.text', 'Home')
   })
 
   it('Test dropdown', () => {
diff --git a/src/components/Breadcrumbs/Breadcrumbs.vue b/src/components/Breadcrumbs/Breadcrumbs.vue
index aaf9c848f..a7b8543c6 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.vue
+++ b/src/components/Breadcrumbs/Breadcrumbs.vue
@@ -8,9 +8,7 @@
           </template>
         </Button>
       </Dropdown>
-      <span class="ml-1 mr-0.5 text-base text-ink-gray-4" aria-hidden="true">
-        /
-      </span>
+      <span class="ml-1 mr-0.5 text-base text-ink-gray-4" aria-hidden="true"> / </span>
     </template>
 
     <div class="flex min-w-0 items-center text-ellipsis whitespace-nowrap">
@@ -21,9 +19,7 @@
           @click="item.onClick ? item.onClick() : null"
           class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
           :class="[
-            i == crumbs.length - 1
-              ? 'text-ink-gray-9'
-              : 'text-ink-gray-5 hover:text-ink-gray-7',
+            i == crumbs.length - 1 ? 'text-ink-gray-9' : 'text-ink-gray-5 hover:text-ink-gray-7',
           ]"
         >
           <slot name="prefix" :item="item" />
@@ -38,9 +34,7 @@
           @click="item.onClick ? item.onClick() : null"
           class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
           :class="[
-            i == crumbs.length - 1
-              ? 'text-ink-gray-9'
-              : 'text-ink-gray-5 hover:text-ink-gray-7',
+            i == crumbs.length - 1 ? 'text-ink-gray-9' : 'text-ink-gray-5 hover:text-ink-gray-7',
           ]"
         >
           <slot name="prefix" :item="item" />
@@ -54,9 +48,7 @@
           @click="item.onClick ? item.onClick() : null"
           class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
           :class="[
-            i == crumbs.length - 1
-              ? 'text-ink-gray-9'
-              : 'text-ink-gray-5 hover:text-ink-gray-7',
+            i == crumbs.length - 1 ? 'text-ink-gray-9' : 'text-ink-gray-5 hover:text-ink-gray-7',
           ]"
         >
           <slot name="prefix" :item="item" />
@@ -78,13 +70,14 @@
 </template>
 
 <script setup lang="ts">
+import { useResizeObserver } from '@vueuse/core'
+import { ref, computed, nextTick, useTemplateRef } from 'vue'
 import { useRouter } from 'vue-router'
-import { Dropdown } from '../Dropdown'
+import LucideEllipsis from '~icons/lucide/ellipsis'
+
 import { Button } from '../Button'
+import { Dropdown } from '../Dropdown'
 import type { BreadcrumbsProps } from './types'
-import { ref, computed, nextTick, useTemplateRef } from 'vue'
-import { useResizeObserver } from '@vueuse/core'
-import LucideEllipsis from '~icons/lucide/ellipsis'
 import type { BreadcrumbItem } from './types'
 
 const crumbsEl = useTemplateRef<HTMLDivElement>('crumbsRef')
diff --git a/src/components/Breadcrumbs/stories/Slots.vue b/src/components/Breadcrumbs/stories/Slots.vue
index 49f1680ef..83f518e53 100644
--- a/src/components/Breadcrumbs/stories/Slots.vue
+++ b/src/components/Breadcrumbs/stories/Slots.vue
@@ -18,7 +18,7 @@ import LucideView from '~icons/lucide/user-star'
     ]"
   >
     <template #prefix="{ item }">
-      <component :is="item.icon" class="size-4 mx-2" />
+      <component :is="item.icon" class="mx-2 size-4" />
     </template>
   </Breadcrumbs>
 </template>
diff --git a/src/components/Breadcrumbs/types.ts b/src/components/Breadcrumbs/types.ts
index 22b4de8e4..a01850b94 100644
--- a/src/components/Breadcrumbs/types.ts
+++ b/src/components/Breadcrumbs/types.ts
@@ -1,4 +1,4 @@
-import { RouterLinkProps } from 'vue-router'
+import type { RouterLinkProps } from 'vue-router'
 
 export interface BreadcrumbItem {
   /** Text shown for the breadcrumb item */
diff --git a/src/components/Button/Button.cy.ts b/src/components/Button/Button.cy.ts
index 52d990a6d..a48d3c82e 100644
--- a/src/components/Button/Button.cy.ts
+++ b/src/components/Button/Button.cy.ts
@@ -1,6 +1,7 @@
-import Button from './Button.vue'
 import { h } from 'vue'
 
+import Button from './Button.vue'
+
 describe('<Button />', () => {
   it('renders default button', () => {
     cy.mount(Button, {
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index 3fe748d80..f46497f69 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -6,7 +6,7 @@
       @click="handleClick"
       :disabled="isDisabled"
       :ariaLabel="label"
-      :type = "props.type"
+      :type="props.type"
       ref="rootRef"
     >
       <LoadingIndicator
@@ -30,11 +30,7 @@
 
       <template v-if="loading && loadingText">{{ loadingText }}</template>
       <template v-else-if="isIconButton && !loading">
-        <FeatherIcon
-          v-if="icon && typeof icon === 'string'"
-          :name="icon"
-          :class="slotClasses"
-        />
+        <FeatherIcon v-if="icon && typeof icon === 'string'" :name="icon" :class="slotClasses" />
         <component v-else-if="icon" :is="icon" :class="slotClasses" />
         <slot name="icon" v-else-if="$slots.icon" />
         <div v-else-if="hasLucideIconInDefaultSlot" :class="slotClasses">
@@ -52,22 +48,19 @@
           :class="slotClasses"
           aria-hidden="true"
         />
-          <component
-            v-else-if="iconRight"
-            :is="iconRight"
-            :class="slotClasses"
-          />
+        <component v-else-if="iconRight" :is="iconRight" :class="slotClasses" />
       </slot>
     </button>
   </Tooltip>
 </template>
 <script lang="ts" setup>
 import { computed, useSlots, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
 import FeatherIcon from '../FeatherIcon.vue'
 import LoadingIndicator from '../LoadingIndicator.vue'
-import { useRouter } from 'vue-router'
-import type { ButtonProps, ThemeVariant } from './types'
 import Tooltip from '../Tooltip/Tooltip.vue'
+import type { ButtonProps, ThemeVariant } from './types'
 
 defineOptions({ inheritAttrs: false })
 
@@ -77,7 +70,7 @@ const props = withDefaults(defineProps<ButtonProps>(), {
   variant: 'subtle',
   loading: false,
   disabled: false,
-  type: "button"
+  type: 'button',
 })
 
 const slots = useSlots()
@@ -87,16 +80,14 @@ const buttonClasses = computed(() => {
   let solidClasses = {
     gray: 'text-ink-white bg-surface-gray-7 hover:bg-surface-gray-6 active:bg-surface-gray-5',
     blue: 'text-ink-white bg-blue-500 hover:bg-surface-blue-3 active:bg-blue-700',
-    green:
-      'text-ink-white bg-surface-green-3 hover:bg-green-700 active:bg-green-800',
+    green: 'text-ink-white bg-surface-green-3 hover:bg-green-700 active:bg-green-800',
     red: 'text-ink-white bg-surface-red-5 hover:bg-surface-red-6 active:bg-surface-red-7',
   }[props.theme]
 
   let subtleClasses = {
     gray: 'text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4',
     blue: 'text-ink-blue-3 bg-surface-blue-2 hover:bg-blue-200 active:bg-blue-300',
-    green:
-      'text-green-800 bg-surface-green-2 hover:bg-green-200 active:bg-green-300',
+    green: 'text-green-800 bg-surface-green-2 hover:bg-green-200 active:bg-green-300',
     red: 'text-red-700 bg-surface-red-2 hover:bg-surface-red-3 active:bg-surface-red-4',
   }[props.theme]
 
@@ -111,8 +102,7 @@ const buttonClasses = computed(() => {
   let ghostClasses = {
     gray: 'text-ink-gray-8 bg-transparent hover:bg-surface-gray-3 active:bg-surface-gray-4',
     blue: 'text-ink-blue-3 bg-transparent hover:bg-blue-200 active:bg-blue-300',
-    green:
-      'text-green-800 bg-transparent hover:bg-green-200 active:bg-green-300',
+    green: 'text-green-800 bg-transparent hover:bg-green-200 active:bg-green-300',
     red: 'text-red-700 bg-transparent hover:bg-surface-red-3 active:bg-surface-red-4',
   }[props.theme]
 
@@ -135,44 +125,40 @@ const buttonClasses = computed(() => {
   let disabledClassesMap: Record<ThemeVariant, string> = {
     'gray-solid': 'bg-surface-gray-2 text-ink-gray-4',
     'gray-subtle': 'bg-surface-gray-2 text-ink-gray-4',
-    'gray-outline':
-      'bg-surface-gray-2 text-ink-gray-4 border border-outline-gray-2',
+    'gray-outline': 'bg-surface-gray-2 text-ink-gray-4 border border-outline-gray-2',
     'gray-ghost': 'text-ink-gray-4',
 
     'blue-solid': 'bg-blue-300 text-ink-white',
     'blue-subtle': 'bg-surface-blue-2 text-ink-blue-link',
-    'blue-outline':
-      'bg-surface-blue-2 text-ink-blue-link border border-outline-blue-1',
+    'blue-outline': 'bg-surface-blue-2 text-ink-blue-link border border-outline-blue-1',
     'blue-ghost': 'text-ink-blue-link',
 
     'green-solid': 'bg-surface-green-2 text-ink-green-2',
     'green-subtle': 'bg-surface-green-2 text-ink-green-2',
-    'green-outline':
-      'bg-surface-green-2 text-ink-green-2 border border-outline-green-2',
+    'green-outline': 'bg-surface-green-2 text-ink-green-2 border border-outline-green-2',
     'green-ghost': 'text-ink-green-2',
 
     'red-solid': 'bg-surface-red-2 text-ink-red-2',
     'red-subtle': 'bg-surface-red-2 text-ink-red-2',
-    'red-outline':
-      'bg-surface-red-2 text-ink-red-2 border border-outline-red-1',
+    'red-outline': 'bg-surface-red-2 text-ink-red-2 border border-outline-red-1',
     'red-ghost': 'text-ink-red-2',
   }
   let disabledClasses = disabledClassesMap[themeVariant]
 
   let sizeClasses = {
-    sm: 'h-7 text-base px-2 rounded',
-    md: 'h-8 text-base font-medium px-2.5 rounded',
-    lg: 'h-10 text-lg font-medium px-3 rounded-md',
-    xl: 'h-11.5 text-xl font-medium px-3.5 rounded-lg',
+    'sm': 'h-7 text-base px-2 rounded',
+    'md': 'h-8 text-base font-medium px-2.5 rounded',
+    'lg': 'h-10 text-lg font-medium px-3 rounded-md',
+    'xl': 'h-11.5 text-xl font-medium px-3.5 rounded-lg',
     '2xl': 'h-13 text-2xl font-medium px-3.5 rounded-xl',
   }[props.size]
 
   if (isIconButton.value) {
     sizeClasses = {
-      sm: 'h-7 w-7 rounded',
-      md: 'h-8 w-8 rounded',
-      lg: 'h-10 w-10 rounded-md',
-      xl: 'h-11.5 w-11.5 rounded-lg',
+      'sm': 'h-7 w-7 rounded',
+      'md': 'h-8 w-8 rounded',
+      'lg': 'h-10 w-10 rounded-md',
+      'xl': 'h-11.5 w-11.5 rounded-lg',
       '2xl': 'h-13 w-13 rounded-xl',
     }[props.size]
   }
@@ -187,10 +173,10 @@ const buttonClasses = computed(() => {
 
 const slotClasses = computed(() => {
   let classes = {
-    sm: 'h-4',
-    md: 'h-4.5',
-    lg: 'h-5',
-    xl: 'h-6',
+    'sm': 'h-4',
+    'md': 'h-4.5',
+    'lg': 'h-5',
+    'xl': 'h-6',
     '2xl': 'h-6',
   }[props.size]
 
@@ -213,10 +199,7 @@ const hasLucideIconInDefaultSlot = computed(() => {
   // if the slot contains only one element and it's a lucide icon
   // render it as an icon button
   let firstVNode = slotContent[0]
-  if (
-    typeof firstVNode.type?.name == 'string' &&
-    firstVNode.type?.name?.startsWith('lucide-')
-  ) {
+  if (typeof firstVNode.type?.name == 'string' && firstVNode.type?.name?.startsWith('lucide-')) {
     return true
   }
   return false
diff --git a/src/components/Button/types.ts b/src/components/Button/types.ts
index 7848f3531..abab0cba4 100644
--- a/src/components/Button/types.ts
+++ b/src/components/Button/types.ts
@@ -1,5 +1,5 @@
-import { type RouterLinkProps } from 'vue-router'
 import { type Component } from 'vue'
+import { type RouterLinkProps } from 'vue-router'
 
 type Theme = 'gray' | 'blue' | 'green' | 'red'
 type Size = 'sm' | 'md' | 'md' | 'lg' | 'xl' | '2xl'
diff --git a/src/components/Calendar/Calendar.vue b/src/components/Calendar/Calendar.vue
index 53341f59e..93cc0c16c 100644
--- a/src/components/Calendar/Calendar.vue
+++ b/src/components/Calendar/Calendar.vue
@@ -46,11 +46,7 @@
           <Button @click="increment" variant="ghost" icon="chevron-right" />
 
           <!--  View change button, default is months or can be set via props!  -->
-          <TabButtons
-            :buttons="enabledModes"
-            class="ml-2"
-            v-model="activeView"
-          />
+          <TabButtons :buttons="enabledModes" class="ml-2" v-model="activeView" />
         </div>
       </div>
     </slot>
@@ -78,32 +74,22 @@
       :config="overrideConfig"
     >
       <template #header="{ parseDateWithDay, currentDate, fullDay }">
-        <slot
-          name="daily-header"
-          v-bind="{ parseDateWithDay, currentDate, fullDay }"
-        />
+        <slot name="daily-header" v-bind="{ parseDateWithDay, currentDate, fullDay }" />
       </template>
     </CalendarDaily>
 
-    <NewEventModal
-      v-if="showEventModal"
-      v-model="showEventModal"
-      :event="newEvent"
-    />
+    <NewEventModal v-if="showEventModal" v-model="showEventModal" :event="newEvent" />
   </div>
 </template>
 <script setup>
-import {
-  computed,
-  onMounted,
-  onUnmounted,
-  provide,
-  ref,
-  watch,
-  nextTick,
-} from 'vue'
+import { computed, onMounted, onUnmounted, provide, ref, watch, nextTick } from 'vue'
+
+import { dayjs } from '../../utils/dayjs'
 import { Button } from '../Button'
+import DatePicker from '../DatePicker/DatePicker.vue'
 import { TabButtons } from '../TabButtons'
+import CalendarDaily from './CalendarDaily.vue'
+import CalendarMonthly from './CalendarMonthly.vue'
 import {
   getCalendarDates,
   monthList,
@@ -111,16 +97,12 @@ import {
   formatMonthYear,
   getWeekMonthParts,
 } from './calendarUtils'
-import { dayjs } from '../../utils/dayjs'
+import CalendarWeekly from './CalendarWeekly.vue'
+import useEventModal from './composables/useEventModal'
 import DayIcon from './Icon/DayIcon.vue'
-import WeekIcon from './Icon/WeekIcon.vue'
 import MonthIcon from './Icon/MonthIcon.vue'
-import DatePicker from '../DatePicker/DatePicker.vue'
-import CalendarMonthly from './CalendarMonthly.vue'
-import CalendarWeekly from './CalendarWeekly.vue'
-import CalendarDaily from './CalendarDaily.vue'
+import WeekIcon from './Icon/WeekIcon.vue'
 import NewEventModal from './NewEventModal.vue'
-import useEventModal from './composables/useEventModal'
 
 const props = defineProps({
   events: {
@@ -186,9 +168,7 @@ function syncSelectedMonth(year, month) {
   if (typeof year === 'number' && typeof month === 'number') {
     const currentDay = dayjs(selectedMonthDate.value).date()
 
-    let tentative = dayjs(
-      `${year}-${String(month + 1).padStart(2, '0')}-01`,
-    ).date(currentDay)
+    let tentative = dayjs(`${year}-${String(month + 1).padStart(2, '0')}-01`).date(currentDay)
 
     if (tentative.month() !== month) {
       // overflowed into next month, use last day of target month
@@ -342,9 +322,7 @@ const actionOptions = [
   { label: 'Week', value: 'Week', iconLeft: WeekIcon },
   { label: 'Month', value: 'Month', iconLeft: MonthIcon },
 ]
-let enabledModes = actionOptions.filter(
-  (mode) => !overrideConfig.disableModes.includes(mode.value),
-)
+let enabledModes = actionOptions.filter((mode) => !overrideConfig.disableModes.includes(mode.value))
 
 let currentYear = ref(new Date().getFullYear())
 let currentMonth = ref(new Date().getMonth())
@@ -442,9 +420,7 @@ function incrementWeek() {
   if (nextWeek < datesInWeeks.value.length) {
     week.value = nextWeek
     const weekDates = datesInWeeks.value[week.value]
-    const spansNextMonth = weekDates.some(
-      (d) => d.getMonth() !== currentMonth.value,
-    ) // overlap into next month
+    const spansNextMonth = weekDates.some((d) => d.getMonth() !== currentMonth.value) // overlap into next month
     if (spansNextMonth) {
       // cross boundary -> advance month
       incrementMonth()
@@ -474,9 +450,7 @@ function decrementWeek() {
   if (prevWeek >= 0) {
     week.value = prevWeek
     const weekDates = datesInWeeks.value[week.value]
-    const spansPrevMonth = weekDates.some(
-      (d) => d.getMonth() !== currentMonth.value,
-    ) // overlap into previous month
+    const spansPrevMonth = weekDates.some((d) => d.getMonth() !== currentMonth.value) // overlap into previous month
     if (spansPrevMonth) {
       // cross boundary -> go to previous month
       decrementMonth()
@@ -495,9 +469,7 @@ function decrementWeek() {
   decrementMonth()
   let targetIndex = datesInWeeks.value.length - 1 // start at last row
   const lastWeekDates = datesInWeeks.value[targetIndex]
-  const hasNextMonthDates = lastWeekDates.some(
-    (d) => d.getMonth() !== currentMonth.value,
-  ) // overlap into next month
+  const hasNextMonthDates = lastWeekDates.some((d) => d.getMonth() !== currentMonth.value) // overlap into next month
   if (hasNextMonthDates && targetIndex > 0) {
     targetIndex = targetIndex - 1 // skip overlap row
   }
@@ -519,10 +491,7 @@ function incrementDay() {
 
 function decrementDay() {
   date.value--
-  if (
-    date.value < 0 ||
-    !isCurrentMonthDate(currentMonthDates.value[date.value])
-  ) {
+  if (date.value < 0 || !isCurrentMonthDate(currentMonthDates.value[date.value])) {
     decrementMonth()
   }
 }
@@ -562,12 +531,10 @@ const currentMonthYear = computed(() => {
   }
 
   // Non-week views or empty week fallback
-  if (activeView.value !== 'Week')
-    return formatMonthYear(currentMonth.value, currentYear.value)
+  if (activeView.value !== 'Week') return formatMonthYear(currentMonth.value, currentYear.value)
 
   const weekDates = datesInWeeks.value[week.value] || []
-  if (!weekDates.length)
-    return formatMonthYear(currentMonth.value, currentYear.value)
+  if (!weekDates.length) return formatMonthYear(currentMonth.value, currentYear.value)
 
   const parts = getWeekMonthParts(weekDates)
   if (parts.length === 1) return formatMonthYear(parts[0].month, parts[0].year)
@@ -622,7 +589,7 @@ function getVisibleRange() {
   if (activeView.value === 'Week') {
     const weekDates = datesInWeeks.value[week.value] || []
     if (!weekDates.length) return null
-    const orderedWeek = [...weekDates].sort((a, b) => a - b)
+    const orderedWeek = [...weekDates].toSorted((a, b) => a - b)
     const end = dayjs(orderedWeek[orderedWeek.length - 1]).endOf('day')
     return {
       startDate: toDateString(start),
@@ -630,12 +597,8 @@ function getVisibleRange() {
     }
   }
 
-  const start = dayjs(
-    new Date(currentYear.value, currentMonth.value, 1),
-  ).startOf('day')
-  const end = dayjs(
-    new Date(currentYear.value, currentMonth.value + 1, 0),
-  ).endOf('day')
+  const start = dayjs(new Date(currentYear.value, currentMonth.value, 1)).startOf('day')
+  const end = dayjs(new Date(currentYear.value, currentMonth.value + 1, 0)).endOf('day')
   return {
     startDate: toDateString(start),
     endDate: toDateString(end),
diff --git a/src/components/Calendar/CalendarDaily.vue b/src/components/Calendar/CalendarDaily.vue
index 4a97636a2..e621d87d1 100644
--- a/src/components/Calendar/CalendarDaily.vue
+++ b/src/components/Calendar/CalendarDaily.vue
@@ -1,33 +1,27 @@
 <template>
-  <div class="flex flex-col flex-1 overflow-y-auto">
+  <div class="flex flex-1 flex-col overflow-y-auto">
     <!-- Full day events -->
     <div
-      class="flex shrink-0 h-fit"
+      class="flex h-fit shrink-0"
       :class="[config.noBorder ? 'border-t-[1px]' : 'border-[1px] border-b-0']"
     >
       <div
-        class="flex justify-center items-start pt-[3px] w-20 text-base text-ink-gray-6 text-center"
+        class="flex w-20 items-start justify-center pt-[3px] text-center text-base text-ink-gray-6"
       >
         <component
           :is="showCollapsable ? Button : 'div'"
-          :class="{ '!pl-1.5 pr-1 py-1 !gap-1': showCollapsable }"
+          :class="{ '!gap-1 py-1 !pl-1.5 pr-1': showCollapsable }"
           variant="ghost"
-          :iconRight="
-            showCollapsable ? (isCollapsed ? 'chevron-down' : 'chevron-up') : ''
-          "
+          :iconRight="showCollapsable ? (isCollapsed ? 'chevron-down' : 'chevron-up') : ''"
           @click="showCollapsable && (isCollapsed = !isCollapsed)"
         >
-          <div class="text-sm text-ink-gray-6 h-7 inline-flex items-center">
-            All day
-          </div>
+          <div class="inline-flex h-7 items-center text-sm text-ink-gray-6">All day</div>
         </component>
       </div>
       <div
-        class="flex flex-wrap gap-1 py-1 w-full overflow-hidden"
+        class="flex w-full flex-wrap gap-1 overflow-hidden py-1"
         :data-date-attr="currentDate"
-        @click.prevent="
-          calendarActions.handleCellClick($event, currentDate, '', true)
-        "
+        @click.prevent="calendarActions.handleCellClick($event, currentDate, '', true)"
       >
         <CalendarEvent
           v-for="(calendarEvent, idx) in !showCollapsable || !isCollapsed
@@ -43,7 +37,7 @@
           v-if="showCollapsable && isCollapsed && dayFullDayEvents.length > 4"
           :label="dayFullDayEvents.length - 4 + ' more'"
           variant="ghost"
-          class="w-fit text-sm !h-6 !justify-start cursor-pointer"
+          class="!h-6 w-fit cursor-pointer !justify-start text-sm"
           @click.stop="isCollapsed = false"
         />
       </div>
@@ -51,9 +45,7 @@
     <div class="h-full overflow-hidden">
       <div
         class="flex h-full w-full overflow-scroll border-outline-gray-1"
-        :class="[
-          config.noBorder ? 'border-t-[1px]' : 'border-[1px] border-r-0',
-        ]"
+        :class="[config.noBorder ? 'border-t-[1px]' : 'border-[1px] border-r-0']"
         ref="gridRef"
       >
         <!-- Left column -->
@@ -69,7 +61,7 @@
         <div class="grid h-full w-full grid-cols-1 pb-2">
           <div
             class="calendar-column relative border-l-[1px] border-outline-gray-1"
-            :class="[config.noBorder ? '' : ' border-r-[1px]']"
+            :class="[config.noBorder ? '' : 'border-r-[1px]']"
           >
             <!-- Day Grid -->
             <div
@@ -77,9 +69,7 @@
               v-for="(time, i) in timeArray"
               :key="time"
               :data-time-attr="i == 0 ? '' : time"
-              @click="
-                calendarActions.handleCellClick($event, currentDate, time)
-              "
+              @click="calendarActions.handleCellClick($event, currentDate, time)"
             >
               <div
                 class="w-full border-outline-gray-1"
@@ -88,9 +78,7 @@
               />
             </div>
             <CalendarEvent
-              v-for="(calendarEvent, idx) in timedEvents[
-                parseDate(currentDate)
-              ]"
+              v-for="(calendarEvent, idx) in timedEvents[parseDate(currentDate)]"
               class="absolute mb-2 cursor-pointer"
               :event="calendarEvent"
               :key="calendarEvent.id"
@@ -107,9 +95,10 @@
 
 <script setup>
 import { computed, inject, onMounted, ref, watch } from 'vue'
+
+import { Button } from '../Button'
 import CalendarEvent from './CalendarEvent.vue'
 import CalendarTimeMarker from './CalendarTimeMarker.vue'
-import { Button } from '../Button'
 import {
   parseDate,
   parseDateWithDay,
@@ -131,21 +120,15 @@ const props = defineProps({
     required: true,
   },
 })
-const timedEvents = computed(
-  () => useCalendarData(props.events).timedEvents.value,
-)
-const fullDayEvents = computed(
-  () => useCalendarData(props.events).fullDayEvents.value,
-)
+const timedEvents = computed(() => useCalendarData(props.events).timedEvents.value)
+const fullDayEvents = computed(() => useCalendarData(props.events).fullDayEvents.value)
 const gridRef = ref(null)
 const hourHeight = props.config.hourHeight
 const minuteHeight = hourHeight / 60
 
 const showCollapsable = ref(false)
 const isCollapsed = ref(true)
-const dayFullDayEvents = computed(
-  () => fullDayEvents.value?.[parseDate(props.currentDate)] || [],
-)
+const dayFullDayEvents = computed(() => fullDayEvents.value?.[parseDate(props.currentDate)] || [])
 
 function updateFullDayEventsState() {
   // Show collapsible if more than 4 events
@@ -157,8 +140,7 @@ function updateFullDayEventsState() {
 
 watch(dayFullDayEvents, updateFullDayEventsState, { immediate: true })
 
-const timeArray =
-  props.config.timeFormat == '24h' ? twentyFourHoursFormat : twelveHoursFormat
+const timeArray = props.config.timeFormat == '24h' ? twentyFourHoursFormat : twelveHoursFormat
 
 onMounted(() => {
   const currentHour = new Date().getHours()
diff --git a/src/components/Calendar/CalendarEvent.vue b/src/components/Calendar/CalendarEvent.vue
index 863d66007..eada6e990 100644
--- a/src/components/Calendar/CalendarEvent.vue
+++ b/src/components/Calendar/CalendarEvent.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Weekly and Daily Event Template  -->
   <div
-    class="event min-h-6 mx-px shadow rounded transition-all duration-75 shrink-0"
+    class="event mx-px min-h-6 shrink-0 rounded shadow transition-all duration-75"
     ref="eventRef"
     v-if="activeView !== 'Month'"
     v-bind="$attrs"
@@ -16,15 +16,13 @@
       mousedown: config.isEditMode && handleRepositionMouseDown,
     }"
   >
-    <div class="flex gap-1.5 h-full p-[5px]" :class="isPastEvent && 'past'">
+    <div class="flex h-full gap-1.5 p-[5px]" :class="isPastEvent && 'past'">
       <div
         v-if="props.event.fromTime"
-        class="event-border h-full w-[2px] rounded shrink-0"
+        class="event-border h-full w-[2px] shrink-0 rounded"
         :style="eventBorderStyle"
       />
-      <div
-        class="relative flex h-full select-none items-start gap-2 overflow-hidden"
-      >
+      <div class="relative flex h-full select-none items-start gap-2 overflow-hidden">
         <div v-if="config.showIcon && eventIcons[props.event.type]">
           <component
             v-if="eventIcons[props.event.type]"
@@ -34,25 +32,15 @@
         </div>
 
         <div class="flex w-fit flex-col gap-0.5 overflow-hidden">
-          <p
-            ref="eventTitleRef"
-            class="text-sm font-medium event-title"
-            :class="lineClampClass"
-          >
+          <p ref="eventTitleRef" class="event-title text-sm font-medium" :class="lineClampClass">
             {{ props.event.title || '(No title)' }}
           </p>
           <p
             ref="eventTimeRef"
-            class="text-xs font-normal event-subtitle"
+            class="event-subtitle text-xs font-normal"
             v-if="!props.event.isFullDay"
           >
-            {{
-              formattedDuration(
-                updatedEvent.fromTime,
-                updatedEvent.toTime,
-                config.timeFormat,
-              )
-            }}
+            {{ formattedDuration(updatedEvent.fromTime, updatedEvent.toTime, config.timeFormat) }}
           </p>
         </div>
       </div>
@@ -68,7 +56,7 @@
   <!-- Monthly Event Template -->
   <div
     v-else
-    class="event flex gap-1.5 min-h-6 mx-px rounded p-[5px] transition-all duration-75"
+    class="event mx-px flex min-h-6 gap-1.5 rounded p-[5px] transition-all duration-75"
     :class="[
       activeEvent == (props.event?.id || props.event?.name) && 'active',
       isPastEvent && 'past',
@@ -81,12 +69,10 @@
   >
     <div
       v-if="props.event.fromTime"
-      class="event-border w-[2px] rounded shrink-0"
+      class="event-border w-[2px] shrink-0 rounded"
       :style="eventBorderStyle"
     />
-    <div
-      class="relative flex h-full select-none items-start gap-2 overflow-hidden"
-    >
+    <div class="relative flex h-full select-none items-start gap-2 overflow-hidden">
       <div v-if="config.showIcon && eventIcons[props.event.type]">
         <component
           v-if="eventIcons[props.event.type]"
@@ -95,10 +81,8 @@
         />
       </div>
 
-      <div
-        class="flex w-fit flex-col text-start overflow-hidden whitespace-nowrap"
-      >
-        <p class="text-sm font-medium truncate">
+      <div class="flex w-fit flex-col overflow-hidden whitespace-nowrap text-start">
+        <p class="truncate text-sm font-medium">
           {{ props.event.title || 'New Event' }}
         </p>
       </div>
@@ -125,20 +109,8 @@
 </template>
 
 <script setup>
-import EventModalContent from './EventModalContent.vue'
-import NewEventModal from './NewEventModal.vue'
 import { useFloating, shift, flip, offset, autoUpdate } from '@floating-ui/vue'
-import { activeEvent } from './composables/useCalendarData.js'
-
-import {
-  ref,
-  inject,
-  computed,
-  onMounted,
-  onBeforeUnmount,
-  watch,
-  reactive,
-} from 'vue'
+import { ref, inject, computed, onMounted, onBeforeUnmount, watch, reactive } from 'vue'
 
 import {
   calculateMinutes,
@@ -149,6 +121,9 @@ import {
   colorMapDark,
   formattedDuration,
 } from './calendarUtils'
+import { activeEvent } from './composables/useCalendarData.js'
+import EventModalContent from './EventModalContent.vue'
+import NewEventModal from './NewEventModal.vue'
 
 const props = defineProps({
   event: {
@@ -219,10 +194,7 @@ const setEventStyles = computed(() => {
     }
   }
 
-  let diff = calculateDiff(
-    calendarEvent.value.fromTime,
-    calendarEvent.value.toTime,
-  )
+  let diff = calculateDiff(calendarEvent.value.fromTime, calendarEvent.value.toTime)
   let height = diff * minuteHeight
   if (height < heightThreshold) {
     height = minimumHeight
@@ -232,16 +204,10 @@ const setEventStyles = computed(() => {
   let top = calculateMinutes(calendarEvent.value.fromTime) * minuteHeight
 
   let hallNumber = calendarEvent.value.hallNumber
-  let width =
-    isResizing.value || isRepositioning.value
-      ? '100%'
-      : `${93 - hallNumber * 20}%`
-  let left =
-    isResizing.value || isRepositioning.value ? '0' : `${hallNumber * 20}%`
+  let width = isResizing.value || isRepositioning.value ? '100%' : `${93 - hallNumber * 20}%`
+  let left = isResizing.value || isRepositioning.value ? '0' : `${hallNumber * 20}%`
   let zIndex =
-    isResizing.value || isRepositioning.value
-      ? 100
-      : (props.event.idx || 1) * hallNumber + 1
+    isResizing.value || isRepositioning.value ? 100 : (props.event.idx || 1) * hallNumber + 1
 
   return {
     height,
@@ -279,9 +245,7 @@ const getTheme = () => {
   const theme = document.documentElement.getAttribute('data-theme')
 
   if (theme) return theme
-  return document.documentElement.classList.contains('htw-dark')
-    ? 'dark'
-    : 'light'
+  return document.documentElement.classList.contains('htw-dark') ? 'dark' : 'light'
 }
 
 function color(color) {
@@ -338,8 +302,7 @@ const isEventUpdated = ref(false)
 
 function newEventEndTime(newHeight) {
   let newEndTime =
-    parseFloat(newHeight) / minuteHeight +
-    calculateMinutes(calendarEvent.value.fromTime)
+    parseFloat(newHeight) / minuteHeight + calculateMinutes(calendarEvent.value.fromTime)
   newEndTime = Math.floor(newEndTime)
   if (newEndTime > 1440) {
     newEndTime = 1440
@@ -360,8 +323,7 @@ function handleResizeMouseDown(e) {
     preventClick.value = true
     // difference between where mouse is and where event's top is, to find the new height
     let diffX = e.clientY - eventRef.value.getBoundingClientRect().top
-    eventRef.value.style.height =
-      Math.round(diffX / height15Min) * height15Min + 'px'
+    eventRef.value.style.height = Math.round(diffX / height15Min) * height15Min + 'px'
 
     eventRef.value.style.width = '100%'
     updatedEvent.toTime = newEventEndTime(eventRef.value.style.height)
@@ -429,10 +391,8 @@ function handleRepositionMouseDown(e) {
       calendarEvent.value.date = updatedEvent.date
       calendarEvent.value.fromDate = updatedEvent.date
       calendarEvent.value.toDate = updatedEvent.date
-      calendarEvent.value.fromDateTime =
-        updatedEvent.date + ' ' + updatedEvent.fromTime
-      calendarEvent.value.toDateTime =
-        updatedEvent.date + ' ' + updatedEvent.toTime
+      calendarEvent.value.fromDateTime = updatedEvent.date + ' ' + updatedEvent.fromTime
+      calendarEvent.value.toDateTime = updatedEvent.date + ' ' + updatedEvent.toTime
       calendarEvent.value.fromTime = updatedEvent.fromTime
       calendarEvent.value.toTime = updatedEvent.toTime
       calendarActions.updateEventState(calendarEvent.value)
@@ -447,18 +407,12 @@ function handleRepositionMouseDown(e) {
 }
 
 function getDate(date, nextDate = 0) {
-  let newDate = new Date(
-    date.getFullYear(),
-    date.getMonth(),
-    date.getDate() + nextDate,
-  )
+  let newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + nextDate)
   return newDate
 }
 
 function handleHorizontalMovement(clientX, rect) {
-  const currentDate = new Date(
-    eventRef.value.parentNode.getAttribute('data-date-attr'),
-  )
+  const currentDate = new Date(eventRef.value.parentNode.getAttribute('data-date-attr'))
 
   if (props.event.isFullDay) {
     eventRef.value.style.width = '100%'
@@ -504,12 +458,10 @@ function handleVerticalMovement(clientY, prevY, rect) {
   state.yAxis = diffY
 
   updatedEvent.fromTime = convertMinutesToHours(
-    calculateMinutes(calendarEvent.value.fromTime) +
-      Math.round(diffY / minuteHeight),
+    calculateMinutes(calendarEvent.value.fromTime) + Math.round(diffY / minuteHeight),
   )
   updatedEvent.toTime = convertMinutesToHours(
-    calculateMinutes(calendarEvent.value.toTime) +
-      Math.round(diffY / minuteHeight),
+    calculateMinutes(calendarEvent.value.toTime) + Math.round(diffY / minuteHeight),
   )
   handleTimeConstraints()
 }
@@ -607,8 +559,7 @@ const isPastEvent = computed(() => {
     if (!endDateStr) return false
     // If event has a toTime use it; else if full day, treat end as end of day; fallback 00:00:00
     let endTimeStr = '00:00:00'
-    if (calendarEvent.value.isFullDay || props.event.isFullDay)
-      endTimeStr = '23:59:59'
+    if (calendarEvent.value.isFullDay || props.event.isFullDay) endTimeStr = '23:59:59'
     else if (calendarEvent.value.toTime) endTimeStr = calendarEvent.value.toTime
 
     const end = new Date(`${endDateStr}T${endTimeStr}`.replace(' ', 'T'))
diff --git a/src/components/Calendar/CalendarMonthly.vue b/src/components/Calendar/CalendarMonthly.vue
index e2dbd57f0..8142a90f3 100644
--- a/src/components/Calendar/CalendarMonthly.vue
+++ b/src/components/Calendar/CalendarMonthly.vue
@@ -4,7 +4,7 @@
     <div class="grid w-full grid-cols-7">
       <span
         v-for="day in daysList"
-        class="inline-flex items-center justify-center text-base text-ink-gray-6 h-8"
+        class="inline-flex h-8 items-center justify-center text-base text-ink-gray-6"
       >
         {{ day }}
       </span>
@@ -22,7 +22,7 @@
         v-for="(date, i) in currentMonthDates"
         class="overflow-y-auto"
         :class="[
-          config.noBorder ? 'border-l border-t border-0' : 'border-[0.5px]',
+          config.noBorder ? 'border-0 border-l border-t' : 'border-[0.5px]',
           config.noBorder && i % 7 === 0 && 'border-l-0',
           isWeekend(date, config) && 'bg-surface-gray-1',
         ]"
@@ -35,15 +35,11 @@
           class="flex justify-center font-normal"
           :class="isCurrentMonth(date) ? 'text-gray-700' : 'text-gray-200'"
         >
-          <div
-            class="flex gap-0.5 w-full flex-col items-center text-xs text-right"
-          >
+          <div class="flex w-full flex-col items-center gap-0.5 text-right text-xs">
             <span
-              class="z-10 w-full flex justify-between items-center"
+              class="z-10 flex w-full items-center justify-between"
               :class="[
-                date.toDateString() === new Date().toDateString()
-                  ? 'p-[3px] pb-0.5'
-                  : 'p-2',
+                date.toDateString() === new Date().toDateString() ? 'p-[3px] pb-0.5' : 'p-2',
               ]"
             >
               <div></div>
@@ -51,8 +47,8 @@
                 class="cursor-pointer"
                 :class="[
                   date.toDateString() === new Date().toDateString()
-                    ? 'flex items-center justify-center bg-surface-gray-7 text-ink-white rounded size-[25px]'
-                    : 'bg-surface-white ',
+                    ? 'flex size-[25px] items-center justify-center rounded bg-surface-gray-7 text-ink-white'
+                    : 'bg-surface-white',
                   isCurrentMonth(date) ? 'text-ink-gray-6' : 'text-ink-gray-4',
                 ]"
                 @click.stop="
@@ -91,9 +87,7 @@
                 v-if="timedEvents[parseDate(date)]"
                 class="z-10 cursor-pointer"
                 :draggable="config.isEditMode"
-                @dragstart="
-                  onDragStart($event, timedEvents[parseDate(date)][0].id)
-                "
+                @dragstart="onDragStart($event, timedEvents[parseDate(date)][0].id)"
                 @dragend="$event.target.style.opacity = '1'"
                 @dragover.prevent
                 :events="timedEvents[parseDate(date)]"
@@ -110,11 +104,12 @@
 </template>
 
 <script setup>
-import { daysList, parseDate, isWeekend } from './calendarUtils'
 import { inject } from 'vue'
+import { computed } from 'vue'
+
 import CalendarEvent from './CalendarEvent.vue'
+import { daysList, parseDate, isWeekend } from './calendarUtils'
 import useCalendarData from './composables/useCalendarData'
-import { computed } from 'vue'
 import ShowMoreCalendarEvent from './ShowMoreCalendarEvent.vue'
 const props = defineProps({
   events: {
@@ -136,13 +131,9 @@ const props = defineProps({
 
 const emit = defineEmits(['setCurrentDate'])
 
-const timedEvents = computed(
-  () => useCalendarData(props.events, 'Month').timedEvents.value,
-)
+const timedEvents = computed(() => useCalendarData(props.events, 'Month').timedEvents.value)
 
-const maxEventsInCell = computed(() =>
-  props.currentMonthDates.length > 35 ? 1 : 2,
-)
+const maxEventsInCell = computed(() => (props.currentMonthDates.length > 35 ? 1 : 2))
 
 function isCurrentMonth(date) {
   return date.getMonth() === props.currentMonth
diff --git a/src/components/Calendar/CalendarTimeMarker.vue b/src/components/Calendar/CalendarTimeMarker.vue
index a4fe42e3b..6e4d1aab5 100644
--- a/src/components/Calendar/CalendarTimeMarker.vue
+++ b/src/components/Calendar/CalendarTimeMarker.vue
@@ -5,15 +5,16 @@
     v-if="new Date(date).toDateString() === new Date().toDateString()"
   >
     <Tooltip :text="dayjs().format('ddd, MMM D, YYYY h:mm a')">
-      <div class="current-time relative h-0.5 bg-[#E03636] rounded" />
+      <div class="current-time relative h-0.5 rounded bg-[#E03636]" />
     </Tooltip>
   </div>
 </template>
 <script setup>
-import Tooltip from '../Tooltip/Tooltip.vue'
-import { dayjs } from '../../utils/dayjs'
 import { computed, inject } from 'vue'
 
+import { dayjs } from '../../utils/dayjs'
+import Tooltip from '../Tooltip/Tooltip.vue'
+
 const props = defineProps({
   date: {
     type: [String, Date],
diff --git a/src/components/Calendar/CalendarWeekly.vue b/src/components/Calendar/CalendarWeekly.vue
index ded14b39c..cdd1cf456 100644
--- a/src/components/Calendar/CalendarWeekly.vue
+++ b/src/components/Calendar/CalendarWeekly.vue
@@ -6,13 +6,13 @@
       <div class="grid w-full grid-cols-7">
         <span
           v-for="date in weeklyDates"
-          class="relative flex items-center justify-center gap-1.5 h-8 text-center text-base text-ink-gray-7 cursor-pointer"
+          class="relative flex h-8 cursor-pointer items-center justify-center gap-1.5 text-center text-base text-ink-gray-7"
           @click="calendarActions.updateActiveView('Day', date)"
         >
           {{ isToday(date) ? daysList[date.getDay()] : parseDateWithDay(date) }}
           <span
             v-if="isToday(date)"
-            class="inline-flex items-center justify-center bg-surface-gray-7 text-ink-white rounded size-[25px]"
+            class="inline-flex size-[25px] items-center justify-center rounded bg-surface-gray-7 text-ink-white"
           >
             {{ date.getDate() }}
           </span>
@@ -22,32 +22,26 @@
 
     <!-- Full day events -->
     <div
-      class="flex shrink-0 h-fit"
+      class="flex h-fit shrink-0"
       :class="[config.noBorder ? 'border-b-[1px]' : 'border-[1px] border-t-0']"
     >
       <div
-        class="flex justify-center items-start py-0.5 w-20 text-base text-ink-gray-6 text-center"
+        class="flex w-20 items-start justify-center py-0.5 text-center text-base text-ink-gray-6"
       >
         <component
           :is="showCollapsable ? Button : 'div'"
-          :class="{ '!pl-1.5 pr-1 py-1 !gap-1': showCollapsable }"
+          :class="{ '!gap-1 py-1 !pl-1.5 pr-1': showCollapsable }"
           variant="ghost"
-          :iconRight="
-            showCollapsable ? (isCollapsed ? 'chevron-down' : 'chevron-up') : ''
-          "
+          :iconRight="showCollapsable ? (isCollapsed ? 'chevron-down' : 'chevron-up') : ''"
           @click="showCollapsable && (isCollapsed = !isCollapsed)"
         >
-          <div
-            class="text-sm text-ink-gray-6 h-[29px] inline-flex items-center"
-          >
-            All day
-          </div>
+          <div class="inline-flex h-[29px] items-center text-sm text-ink-gray-6">All day</div>
         </component>
       </div>
       <div class="grid w-full grid-cols-7 overflow-hidden">
         <template v-for="(date, idx) in weeklyDates">
           <div
-            class="cell flex flex-col gap-1 py-1 w-full cursor-pointer"
+            class="cell flex w-full cursor-pointer flex-col gap-1 py-1"
             :data-date-attr="date"
             @click.prevent="
               (e) => {
@@ -69,14 +63,10 @@
               @click.stop
             />
             <Button
-              v-if="
-                showCollapsable &&
-                isCollapsed &&
-                fullDayEvents[parseDate(date)]?.length > 2
-              "
+              v-if="showCollapsable && isCollapsed && fullDayEvents[parseDate(date)]?.length > 2"
               :label="fullDayEvents[parseDate(date)]?.length - 2 + ' more'"
               variant="ghost"
-              class="w-fit text-sm !py-0.5 !h-5 !justify-start cursor-pointer"
+              class="!h-5 w-fit cursor-pointer !justify-start !py-0.5 text-sm"
               @click.stop="isCollapsed = false"
             />
           </div>
@@ -103,7 +93,7 @@
         <div class="relative flex w-full flex-col">
           <!-- time events => not full day events => overflow-scroll here -->
           <div
-            class="w-[calc(100%-4px)] h-px z-[2] left-0.5 mt-[0.5px] bg-[#F79596] absolute"
+            class="absolute left-0.5 z-[2] mt-[0.5px] h-px w-[calc(100%-4px)] bg-[#F79596]"
             :style="currentTime"
           />
           <div class="grid w-full grid-cols-7">
@@ -113,9 +103,7 @@
               class="relative w-full border-outline-gray-1"
               :class="[
                 idx === 0 && 'calendar-column border-l-[1px]',
-                config.noBorder && idx === weeklyDates.length - 1
-                  ? ''
-                  : 'border-r-[1px]',
+                config.noBorder && idx === weeklyDates.length - 1 ? '' : 'border-r-[1px]',
                 isWeekend(date, config) && 'bg-surface-gray-1',
               ]"
               :data-date-attr="date"
@@ -126,12 +114,10 @@
                 v-for="(time, i) in timeArray"
                 :key="time"
                 :data-time-attr="i == 0 ? '' : time"
-                @click.prevent="
-                  calendarActions.handleCellClick($event, date, time)
-                "
+                @click.prevent="calendarActions.handleCellClick($event, date, time)"
               >
                 <div
-                  class="border-outline-gray-1 w-full"
+                  class="w-full border-outline-gray-1"
                   :class="i !== timeArray.length - 1 && 'border-b-[1px]'"
                   :style="{ height: `${hourHeight}px` }"
                 />
@@ -157,6 +143,8 @@
 </template>
 <script setup>
 import { ref, onMounted, watch, computed, inject } from 'vue'
+
+import { Button } from '../Button'
 import CalendarEvent from './CalendarEvent.vue'
 import CalendarTimeMarker from './CalendarTimeMarker.vue'
 import {
@@ -167,8 +155,6 @@ import {
   daysList,
   isWeekend,
 } from './calendarUtils'
-
-import { Button } from '../Button'
 import useCalendarData from './composables/useCalendarData'
 
 const props = defineProps({
@@ -192,18 +178,12 @@ const isCollapsed = ref(true)
 const hourHeight = props.config.hourHeight
 const minuteHeight = hourHeight / 60
 
-const timeArray =
-  props.config.timeFormat == '24h' ? twentyFourHoursFormat : twelveHoursFormat
+const timeArray = props.config.timeFormat == '24h' ? twentyFourHoursFormat : twelveHoursFormat
 
-const timedEvents = computed(
-  () => useCalendarData(props.events).timedEvents.value,
-)
-const fullDayEvents = computed(
-  () => useCalendarData(props.events).fullDayEvents.value,
-)
+const timedEvents = computed(() => useCalendarData(props.events).timedEvents.value)
+const fullDayEvents = computed(() => useCalendarData(props.events).fullDayEvents.value)
 
-const isToday = (date) =>
-  new Date(date).toDateString() === new Date().toDateString()
+const isToday = (date) => new Date(date).toDateString() === new Date().toDateString()
 
 const currentTime = computed(() => {
   let d = new Date()
@@ -238,10 +218,7 @@ function getFullDayEventsCount(eventsObject) {
 }
 
 function setFullDayEventsHeight(eventsObject, weeklyDates) {
-  let currentWeekEvents = getFullDayEventsInCurrentWeek(
-    eventsObject,
-    weeklyDates,
-  )
+  let currentWeekEvents = getFullDayEventsInCurrentWeek(eventsObject, weeklyDates)
   let maxEvents = getFullDayEventsCount(currentWeekEvents)
   if (maxEvents > 3) {
     showCollapsable.value = true
diff --git a/src/components/Calendar/EventModalContent.vue b/src/components/Calendar/EventModalContent.vue
index d4dcc135b..37b9b71fc 100644
--- a/src/components/Calendar/EventModalContent.vue
+++ b/src/components/Calendar/EventModalContent.vue
@@ -1,24 +1,13 @@
 <template>
-  <div
-    class="w-80 rounded bg-surface-modal text-ink-gray-8 p-4 shadow"
-    @click.stop
-  >
+  <div class="w-80 rounded bg-surface-modal p-4 text-ink-gray-8 shadow" @click.stop>
     <div class="flex flex-row-reverse gap-2">
       <span class="cursor-pointer" @click.stop="$emit('close')">
         <FeatherIcon name="x" class="h-4 w-4" />
       </span>
-      <span
-        v-if="isEditMode"
-        class="cursor-pointer"
-        @click.stop="$emit('edit')"
-      >
+      <span v-if="isEditMode" class="cursor-pointer" @click.stop="$emit('edit')">
         <FeatherIcon name="edit-2" class="h-4 w-4" />
       </span>
-      <span
-        v-if="isEditMode"
-        class="cursor-pointer"
-        @click.stop="$emit('delete')"
-      >
+      <span v-if="isEditMode" class="cursor-pointer" @click.stop="$emit('delete')">
         <FeatherIcon name="trash-2" class="h-4 w-4" />
       </span>
     </div>
@@ -39,10 +28,7 @@
             {{ calendarEvent.participant }}
           </span>
         </div>
-        <div
-          class="flex items-center gap-2"
-          v-if="calendarEvent.fromTime && calendarEvent.toTime"
-        >
+        <div class="flex items-center gap-2" v-if="calendarEvent.fromTime && calendarEvent.toTime">
           <FeatherIcon name="clock" class="h-4 w-4" />
           <span class="text-sm font-normal">
             {{ calendarEvent.fromTime }} - {{ calendarEvent.toTime }}
@@ -60,7 +46,6 @@
 </template>
 <script setup>
 import FeatherIcon from '../FeatherIcon.vue'
-
 import { parseDateEventPopupFormat } from './calendarUtils'
 
 const props = defineProps({
diff --git a/src/components/Calendar/FloatingPopover.vue b/src/components/Calendar/FloatingPopover.vue
index 2f066501e..5811d9e22 100644
--- a/src/components/Calendar/FloatingPopover.vue
+++ b/src/components/Calendar/FloatingPopover.vue
@@ -1,17 +1,13 @@
 <template>
   <div ref="floating" :style="{ ...floatingStyles, zIndex: 100 }" v-if="opened">
-    <EventModalContent
-      :calendarEvent="calendarEvent"
-      :date="date"
-      @close="close"
-    />
+    <EventModalContent :calendarEvent="calendarEvent" :date="date" @close="close" />
   </div>
 </template>
 <script setup>
+import { useFloating, shift, flip, offset, autoUpdate } from '@floating-ui/vue'
 import { onMounted } from 'vue'
-import EventModalContent from './EventModalContent.vue'
 
-import { useFloating, shift, flip, offset, autoUpdate } from '@floating-ui/vue'
+import EventModalContent from './EventModalContent.vue'
 
 const props = defineProps({
   targetElement: { type: Object, required: true },
diff --git a/src/components/Calendar/Icon/DayIcon.vue b/src/components/Calendar/Icon/DayIcon.vue
index a4a4e1b06..39338d4cc 100644
--- a/src/components/Calendar/Icon/DayIcon.vue
+++ b/src/components/Calendar/Icon/DayIcon.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M8 6C9.10457 6 10 6.89543 10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6ZM8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9C8.55228 9 9 8.55228 9 8C9 7.44772 8.55228 7 8 7Z"
       fill="currentColor"
diff --git a/src/components/Calendar/Icon/MonthIcon.vue b/src/components/Calendar/Icon/MonthIcon.vue
index 37aabe402..93ace715d 100644
--- a/src/components/Calendar/Icon/MonthIcon.vue
+++ b/src/components/Calendar/Icon/MonthIcon.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5 9C6.10457 9 7 9.89543 7 11C7 12.1046 6.10457 13 5 13C3.89543 13 3 12.1046 3 11C3 9.89543 3.89543 9 5 9ZM11 9C12.1046 9 13 9.89543 13 11C13 12.1046 12.1046 13 11 13C9.89543 13 9 12.1046 9 11C9 9.89543 9.89543 9 11 9ZM5 10C4.44772 10 4 10.4477 4 11C4 11.5523 4.44772 12 5 12C5.55228 12 6 11.5523 6 11C6 10.4477 5.55228 10 5 10ZM11 10C10.4477 10 10 10.4477 10 11C10 11.5523 10.4477 12 11 12C11.5523 12 12 11.5523 12 11C12 10.4477 11.5523 10 11 10ZM5 3C6.10457 3 7 3.89543 7 5C7 6.10457 6.10457 7 5 7C3.89543 7 3 6.10457 3 5C3 3.89543 3.89543 3 5 3ZM11 3C12.1046 3 13 3.89543 13 5C13 6.10457 12.1046 7 11 7C9.89543 7 9 6.10457 9 5C9 3.89543 9.89543 3 11 3ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4ZM11 4C10.4477 4 10 4.44772 10 5C10 5.55228 10.4477 6 11 6C11.5523 6 12 5.55228 12 5C12 4.44772 11.5523 4 11 4Z"
       fill="currentColor"
diff --git a/src/components/Calendar/Icon/WeekIcon.vue b/src/components/Calendar/Icon/WeekIcon.vue
index 357e87f6d..33a157135 100644
--- a/src/components/Calendar/Icon/WeekIcon.vue
+++ b/src/components/Calendar/Icon/WeekIcon.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3 6C4.10457 6 5 6.89543 5 8C5 9.10457 4.10457 10 3 10C1.89543 10 1 9.10457 1 8C1 6.89543 1.89543 6 3 6ZM8 6C9.10457 6 10 6.89543 10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6ZM13 6C14.1046 6 15 6.89543 15 8C15 9.10457 14.1046 10 13 10C11.8954 10 11 9.10457 11 8C11 6.89543 11.8954 6 13 6ZM13 7C12.4477 7 12 7.44772 12 8C12 8.55228 12.4477 9 13 9C13.5523 9 14 8.55228 14 8C14 7.44772 13.5523 7 13 7ZM3 7C2.44772 7 2 7.44772 2 8C2 8.55228 2.44772 9 3 9C3.55228 9 4 8.55228 4 8C4 7.44772 3.55228 7 3 7ZM8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9C8.55228 9 9 8.55228 9 8C9 7.44772 8.55228 7 8 7Z"
       fill="currentColor"
diff --git a/src/components/Calendar/NewEventModal.vue b/src/components/Calendar/NewEventModal.vue
index e66cc80df..89ee8bd1c 100644
--- a/src/components/Calendar/NewEventModal.vue
+++ b/src/components/Calendar/NewEventModal.vue
@@ -74,34 +74,25 @@
               />
             </template>
           </FormControl>
-          <FormControl
-            type="checkbox"
-            label="Full Day Event?"
-            v-model="newEvent.isFullDay"
-          />
+          <FormControl type="checkbox" label="Full Day Event?" v-model="newEvent.isFullDay" />
           <ErrorMessage :message="errorMessage" v-if="errorMessage" />
         </div>
       </div>
     </template>
     <template #actions="{ close }">
       <div class="flex flex-row-reverse gap-2">
-        <Button
-          class="w-full"
-          variant="solid"
-          @click="submitEvent(close)"
-          label="Submit"
-        />
+        <Button class="w-full" variant="solid" @click="submitEvent(close)" label="Submit" />
       </div>
     </template>
   </Dialog>
 </template>
 <script setup>
 import { computed, inject, reactive, ref } from 'vue'
+
+import { Button } from '../Button'
 import { Dialog } from '../Dialog'
-import { FormControl } from '../FormControl'
 import { ErrorMessage } from '../ErrorMessage'
-import { Button } from '../Button'
-
+import { FormControl } from '../FormControl'
 import { calculateDiff, colorMap, handleSeconds } from './calendarUtils'
 const show = ref(false)
 
@@ -155,10 +146,7 @@ function validateFields() {
   } else {
     errorMessage.value = ''
   }
-  if (
-    newEvent.hasOwnProperty('fromTime') &&
-    newEvent.hasOwnProperty('toTime')
-  ) {
+  if (newEvent.hasOwnProperty('fromTime') && newEvent.hasOwnProperty('toTime')) {
     validateStartEndTime()
   }
 }
diff --git a/src/components/Calendar/ShowMoreCalendarEvent.vue b/src/components/Calendar/ShowMoreCalendarEvent.vue
index 3c6d594af..05d3b50d7 100644
--- a/src/components/Calendar/ShowMoreCalendarEvent.vue
+++ b/src/components/Calendar/ShowMoreCalendarEvent.vue
@@ -9,7 +9,7 @@
   />
   <span
     v-if="totalEventsCount > 2"
-    class="w-fit rounded-sm p-px px-2 mx-px text-base font-medium text-ink-gray-6 hover:cursor-pointer hover:bg-surface-gray-1"
+    class="mx-px w-fit rounded-sm p-px px-2 text-base font-medium text-ink-gray-6 hover:cursor-pointer hover:bg-surface-gray-1"
     @click="emit('showMoreEvents')"
   >
     {{ totalEventsCount - 2 }} more
diff --git a/src/components/Calendar/calendarUtils.js b/src/components/Calendar/calendarUtils.js
index 61f3d7e93..41da53953 100644
--- a/src/components/Calendar/calendarUtils.js
+++ b/src/components/Calendar/calendarUtils.js
@@ -25,13 +25,12 @@ export function getCalendarDates(month, year) {
 
   function getBeforeDates(firstDay, leftPadding) {
     let allDates = getDatesAfter(firstDay, 0, leftPadding, -1)
-    allDates = allDates.reverse()
+    allDates = allDates.toReversed()
     return allDates
   }
 
   function getNextMonthDates(currentAndPreviousMonthDates) {
-    const numberofDaysInCalendar =
-      currentAndPreviousMonthDates.length > 35 ? 42 : 35
+    const numberofDaysInCalendar = currentAndPreviousMonthDates.length > 35 ? 42 : 35
     let lengthOfDates = currentAndPreviousMonthDates.length
     let lastDate = currentAndPreviousMonthDates[lengthOfDates - 1]
     let diff = numberofDaysInCalendar - lengthOfDates + 1
@@ -40,13 +39,7 @@ export function getCalendarDates(month, year) {
     return allDates
   }
 
-  function getDatesAfter(
-    date,
-    startIndex,
-    counter,
-    stepper = 1,
-    getNextMonthDates = false,
-  ) {
+  function getDatesAfter(date, startIndex, counter, stepper = 1, getNextMonthDates = false) {
     let allDates = []
     for (let index = startIndex; index < counter; index++) {
       let tempDate = new Date(
@@ -145,15 +138,13 @@ export function handleSeconds(time) {
 
 export function findOverlappingEventsCount(events) {
   // Sort events based on start time
-  events = events.sort((a, b) => a.startTime - b.startTime)
+  events = events.toSorted((a, b) => a.startTime - b.startTime)
 
   let hallNumber = 0
   const result = []
 
   for (const event of events) {
-    const availableHall = result.find(
-      (hall) => hall[hall.length - 1].endTime <= event.startTime,
-    )
+    const availableHall = result.find((hall) => hall[hall.length - 1].endTime <= event.startTime)
 
     if (availableHall) {
       availableHall.push(event)
@@ -164,15 +155,13 @@ export function findOverlappingEventsCount(events) {
   }
 
   // flattening halls and events
-  return result
-    .map((hall, idx) =>
-      hall.map((event, eventIdx) => ({
-        ...event,
-        hallNumber: idx,
-        idx: eventIdx,
-      })),
-    )
-    .flat()
+  return result.flatMap((hall, idx) =>
+    hall.map((event, eventIdx) => ({
+      ...event,
+      hallNumber: idx,
+      idx: eventIdx,
+    })),
+  )
 }
 
 // Helpers
@@ -471,8 +460,7 @@ export function getWeekendDays(config) {
       if (typeof d === 'number') return d
       if (typeof d === 'string') {
         const key = d.trim().toLowerCase()
-        if (_weekdayNameToIndex.hasOwnProperty(key))
-          return _weekdayNameToIndex[key]
+        if (_weekdayNameToIndex.hasOwnProperty(key)) return _weekdayNameToIndex[key]
       }
       return null
     })
@@ -498,8 +486,7 @@ export function getWeekMonthParts(weekDates) {
     const m = dt.getMonth()
     const y = dt.getFullYear()
     const key = `${y}-${m}`
-    if (!parts.find((p) => p.key === key))
-      parts.push({ key, month: m, year: y })
+    if (!parts.find((p) => p.key === key)) parts.push({ key, month: m, year: y })
   }
   return parts
 }
diff --git a/src/components/Calendar/composables/useCalendarData.js b/src/components/Calendar/composables/useCalendarData.js
index df68bd2cf..24a00b465 100644
--- a/src/components/Calendar/composables/useCalendarData.js
+++ b/src/components/Calendar/composables/useCalendarData.js
@@ -1,9 +1,6 @@
 import { ref, computed } from 'vue'
-import {
-  groupBy,
-  calculateMinutes,
-  findOverlappingEventsCount,
-} from '../calendarUtils'
+
+import { groupBy, calculateMinutes, findOverlappingEventsCount } from '../calendarUtils'
 
 export const activeEvent = ref('')
 
@@ -22,7 +19,7 @@ export default function useCalendarData(events, view = '') {
           task.startTime = calculateMinutes(task.fromTime)
           task.endTime = calculateMinutes(task.toTime)
         })
-        let sortedEvents = value.sort((a, b) => a.startTime - b.startTime)
+        let sortedEvents = value.toSorted((a, b) => a.startTime - b.startTime)
         sortedArray[key] = findOverlappingEventsCount(sortedEvents)
       }
     }
@@ -42,7 +39,7 @@ function sortMonthlyEvents(events) {
   let fullDayEvents = events.filter((event) => event.isFullDay)
   let timedEvents = events
     .filter((event) => !event.isFullDay)
-    .sort((a, b) =>
+    .toSorted((a, b) =>
       a.fromTime !== b.fromTime
         ? calculateMinutes(a.fromTime) > calculateMinutes(b.fromTime)
           ? 1
diff --git a/src/components/Calendar/composables/useEventModal.js b/src/components/Calendar/composables/useEventModal.js
index 15228a2df..b911a2fec 100644
--- a/src/components/Calendar/composables/useEventModal.js
+++ b/src/components/Calendar/composables/useEventModal.js
@@ -1,9 +1,6 @@
 import { ref, reactive } from 'vue'
-import {
-  parseDate,
-  convertMinutesToHours,
-  calculateMinutes,
-} from '../calendarUtils'
+
+import { parseDate, convertMinutesToHours, calculateMinutes } from '../calendarUtils'
 
 export default function useEventModal() {
   const showEventModal = ref(false)
@@ -18,19 +15,9 @@ export default function useEventModal() {
     title: '',
     isFullDay: false,
   })
-  function openNewEventModal(
-    e,
-    view,
-    date,
-    isEditMode,
-    fromTime = '',
-    isFullDay = false,
-  ) {
+  function openNewEventModal(e, view, date, isEditMode, fromTime = '', isFullDay = false) {
     if (!isEditMode) return
-    date =
-      view === 'Week'
-        ? e.target.parentNode.parentNode.getAttribute('data-date-attr')
-        : date
+    date = view === 'Week' ? e.target.parentNode.parentNode.getAttribute('data-date-attr') : date
     newEvent.date = parseDate(new Date(date))
     newEvent.fromDate = date
     newEvent.toDate = date
@@ -41,10 +28,7 @@ export default function useEventModal() {
       return
     }
 
-    let toTime = convertMinutesToHours(calculateMinutes(fromTime) + 60).slice(
-      0,
-      -3,
-    )
+    let toTime = convertMinutesToHours(calculateMinutes(fromTime) + 60).slice(0, -3)
 
     newEvent.fromTime = fromTime
     newEvent.toTime = toTime
diff --git a/src/components/Calendar/stories/CustomHeader.vue b/src/components/Calendar/stories/CustomHeader.vue
index 652bf4eae..844ec16a6 100644
--- a/src/components/Calendar/stories/CustomHeader.vue
+++ b/src/components/Calendar/stories/CustomHeader.vue
@@ -1,6 +1,6 @@
 <script setup>
+import { Button, Calendar, DatePicker, Select } from 'frappe-ui'
 import { ref } from 'vue'
-import { Button, Calendar, DatePicker, Select } from "frappe-ui";
 
 const config = {
   defaultMode: 'Month',
@@ -119,21 +119,9 @@ const events = ref([
           </DatePicker>
         </div>
         <div class="flex items-center gap-2">
-          <Button
-            variant="ghost"
-            icon="chevron-left"
-            @click="headerProps.decrement"
-          />
-          <Button
-            label="Today"
-            variant="ghost"
-            @click="headerProps.setCalendarDate()"
-          />
-          <Button
-            variant="ghost"
-            icon="chevron-right"
-            @click="headerProps.increment"
-          />
+          <Button variant="ghost" icon="chevron-left" @click="headerProps.decrement" />
+          <Button label="Today" variant="ghost" @click="headerProps.setCalendarDate()" />
+          <Button variant="ghost" icon="chevron-right" @click="headerProps.increment" />
         </div>
         <div>
           <Select
diff --git a/src/components/Calendar/stories/Examples.vue b/src/components/Calendar/stories/Examples.vue
index b555c228e..c5e87bcc1 100644
--- a/src/components/Calendar/stories/Examples.vue
+++ b/src/components/Calendar/stories/Examples.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { ref } from 'vue'
 import { Calendar } from 'frappe-ui'
+import { ref } from 'vue'
 
 const config = {
   defaultMode: 'Month',
diff --git a/src/components/Card.vue b/src/components/Card.vue
index a02edd1d4..204e3b0a0 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -14,10 +14,7 @@
     <p class="mt-1.5 text-base text-gray-600" v-if="subtitle">
       {{ subtitle }}
     </p>
-    <div
-      v-if="loading"
-      class="mt-4 flex flex-auto flex-col items-center justify-center rounded-md"
-    >
+    <div v-if="loading" class="mt-4 flex flex-auto flex-col items-center justify-center rounded-md">
       <LoadingText />
     </div>
     <div class="mt-4 flex-auto overflow-auto" v-else-if="$slots['default']">
diff --git a/src/components/Charts/AxisChart.vue b/src/components/Charts/AxisChart.vue
index 7c39977fa..13ef1fd5e 100644
--- a/src/components/Charts/AxisChart.vue
+++ b/src/components/Charts/AxisChart.vue
@@ -4,9 +4,10 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+
 import useAxisChartOptions from './axisChartOptions'
 import ECharts from './ECharts.vue'
-import { AxisChartConfig } from './types'
+import type { AxisChartConfig } from './types'
 
 const props = defineProps<{ config: AxisChartConfig }>()
 
diff --git a/src/components/Charts/DonutChart.vue b/src/components/Charts/DonutChart.vue
index 20597ffdb..561d69972 100644
--- a/src/components/Charts/DonutChart.vue
+++ b/src/components/Charts/DonutChart.vue
@@ -4,9 +4,10 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+
 import useDonutChartOptions from './donutChartOptions'
 import ECharts from './ECharts.vue'
-import { DonutChartConfig } from './types'
+import type { DonutChartConfig } from './types'
 
 const props = defineProps<{ config: DonutChartConfig }>()
 
diff --git a/src/components/Charts/ECharts.vue b/src/components/Charts/ECharts.vue
index 7f8f17413..18f22b014 100644
--- a/src/components/Charts/ECharts.vue
+++ b/src/components/Charts/ECharts.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { EChartsOption, init } from 'echarts'
+import type { EChartsOption } from 'echarts'
+import { init } from 'echarts'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
 import debounce from '../../utils/debounce'
 
 const props = defineProps<{
@@ -16,8 +18,7 @@ let chart: echarts.ECharts
 const chartDiv = ref<HTMLDivElement>()
 
 const chartClass = computed(() => {
-  const defaults =
-    'h-full w-full min-w-[300px] md:min-w-[400px] min-h-[300px] px-4 py-2'
+  const defaults = 'h-full w-full min-w-[300px] md:min-w-[400px] min-h-[300px] px-4 py-2'
   return props.class || defaults
 })
 
diff --git a/src/components/Charts/FunnelChart.vue b/src/components/Charts/FunnelChart.vue
index 49174ba37..0590f246c 100644
--- a/src/components/Charts/FunnelChart.vue
+++ b/src/components/Charts/FunnelChart.vue
@@ -4,9 +4,10 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import useFunnelChartOptions from './funnelChartOptions'
+
 import ECharts from './ECharts.vue'
-import { FunnelChartConfig } from './types'
+import useFunnelChartOptions from './funnelChartOptions'
+import type { FunnelChartConfig } from './types'
 
 const props = defineProps<{ config: FunnelChartConfig }>()
 
diff --git a/src/components/Charts/NumberChart.vue b/src/components/Charts/NumberChart.vue
index c45d8baa7..00ffe0550 100644
--- a/src/components/Charts/NumberChart.vue
+++ b/src/components/Charts/NumberChart.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex max-h-[140px] items-center gap-2 overflow-hidden bg-surface-white text-ink-gray-8 px-6 pt-5"
+    class="flex max-h-[140px] items-center gap-2 overflow-hidden bg-surface-white px-6 pt-5 text-ink-gray-8"
     :class="config.delta ? 'pb-6' : 'pb-3'"
   >
     <slot name="body">
@@ -12,13 +12,9 @@
         </slot>
         <slot name="subtitle" v-bind="{ formatValue }">
           <div
-            class="flex flex-1 items-center gap-0.5 flex-shrink-0 truncate text-[24px] text-ink-gray-6 font-semibold leading-10"
+            class="flex flex-1 flex-shrink-0 items-center gap-0.5 truncate text-[24px] font-semibold leading-10 text-ink-gray-6"
           >
-            <div
-              v-if="config.prefix"
-              v-html="config.prefix"
-              class="size-4 table"
-            />
+            <div v-if="config.prefix" v-html="config.prefix" class="table size-4" />
             {{ formatValue(config.value, 1, true) }}{{ config.suffix }}
           </div>
         </slot>
@@ -52,7 +48,7 @@
 
 <script setup lang="ts">
 import { formatValue } from './helpers'
-import { NumberChartConfig } from './types'
+import type { NumberChartConfig } from './types'
 
 defineProps<{ config: NumberChartConfig }>()
 </script>
diff --git a/src/components/Charts/axisChartOptions.ts b/src/components/Charts/axisChartOptions.ts
index 23d8910f0..59b1de62e 100644
--- a/src/components/Charts/axisChartOptions.ts
+++ b/src/components/Charts/axisChartOptions.ts
@@ -1,11 +1,6 @@
 import useEchartsOptions from './eChartOptions'
 import { formatValue, mergeDeep } from './helpers'
-import {
-  AreaSeriesConfig,
-  AxisChartConfig,
-  BarSeriesConfig,
-  LineSeriesConfig,
-} from './types'
+import type { AreaSeriesConfig, AxisChartConfig, BarSeriesConfig, LineSeriesConfig } from './types'
 
 export default function useAxisChartOptions(config: AxisChartConfig) {
   const data = config.data || []
@@ -15,17 +10,14 @@ export default function useAxisChartOptions(config: AxisChartConfig) {
     throw new Error('Swap axes is not supported for time series data')
   }
 
-  if (
-    config.series.find((s) => s.axis === 'y2' || s.type !== 'bar') &&
-    config.swapXY
-  ) {
+  if (config.series.find((s) => s.axis === 'y2' || s.type !== 'bar') && config.swapXY) {
     throw new Error('Swap axes is not supported for non-bar series or y2 axis')
   }
 
   const swapXY = config.swapXY
   const lastBarSeriesIdx = config.series
     .slice()
-    .reverse()
+    .toReversed()
     .findIndex((s) => s.type === 'bar')
   const hasY2 = config.series.some((s) => s.axis === 'y2')
 
@@ -94,7 +86,7 @@ function getBarSeriesOptions(config: AxisChartConfig, series: BarSeriesConfig) {
   const idx = config.series.findIndex((s) => s.name === series.name)
   const lastBarSeriesIdx = config.series
     .slice()
-    .reverse()
+    .toReversed()
     .findIndex((s) => s.type === 'bar')
 
   const isLastBar = lastBarSeriesIdx === idx
@@ -103,19 +95,12 @@ function getBarSeriesOptions(config: AxisChartConfig, series: BarSeriesConfig) {
     stack: config.stacked ? 'stack' : undefined,
     barMaxWidth: 60,
     itemStyle: {
-      borderRadius: config.stacked
-        ? isLastBar
-          ? roundedCorners
-          : 0
-        : roundedCorners,
+      borderRadius: config.stacked ? (isLastBar ? roundedCorners : 0) : roundedCorners,
     },
   }
 }
 
-function getLineSeriesOptions(
-  config: AxisChartConfig,
-  series: LineSeriesConfig,
-) {
+function getLineSeriesOptions(config: AxisChartConfig, series: LineSeriesConfig) {
   const showSymbol = series.showDataPoints || series.showDataLabels
   return {
     connectNulls: true,
@@ -130,10 +115,7 @@ function getLineSeriesOptions(
   }
 }
 
-function getAreaSeriesOptions(
-  config: AxisChartConfig,
-  series: AreaSeriesConfig,
-) {
+function getAreaSeriesOptions(config: AxisChartConfig, series: AreaSeriesConfig) {
   return {
     type: 'line',
     showSymbol: series.showDataPoints,
diff --git a/src/components/Charts/donutChartOptions.ts b/src/components/Charts/donutChartOptions.ts
index 772ba68d8..c69036e08 100644
--- a/src/components/Charts/donutChartOptions.ts
+++ b/src/components/Charts/donutChartOptions.ts
@@ -1,11 +1,11 @@
 import { getTitleOptions } from './eChartOptions'
 import { formatValue } from './helpers'
-import { DonutChartConfig } from './types'
+import type { DonutChartConfig } from './types'
 
 export default function useDonutChartOptions(config: DonutChartConfig) {
   let data = config.data || []
 
-  data = data.sort((a, b) => {
+  data = data.toSorted((a, b) => {
     const aValue = a[config.valueColumn]
     const bValue = b[config.valueColumn]
     if (aValue === bValue) {
@@ -88,8 +88,7 @@ export default function useDonutChartOptions(config: DonutChartConfig) {
           itemGap: 12,
           formatter: function (name: string) {
             const labelIndex = labels.indexOf(name)
-            const percentage =
-              total > 0 ? (values[labelIndex] / total) * 100 : 0
+            const percentage = total > 0 ? (values[labelIndex] / total) * 100 : 0
             return `${name} (${percentage.toFixed(0)}%)`
           },
           textStyle: {
diff --git a/src/components/Charts/eChartOptions.ts b/src/components/Charts/eChartOptions.ts
index 6c9f01f2e..783dd9738 100644
--- a/src/components/Charts/eChartOptions.ts
+++ b/src/components/Charts/eChartOptions.ts
@@ -1,5 +1,5 @@
 import { formatDate, formatLabel, formatValue, mergeDeep } from './helpers'
-import { AxisChartConfig } from './types'
+import type { AxisChartConfig } from './types'
 
 export const PADDING_TOP = 0
 export const PADDING_BOTTOM = 10
@@ -32,11 +32,7 @@ export default function useEchartsOptions(config: AxisChartConfig) {
     grid: {
       left: '1%',
       right: config.swapXY ? '2.5%' : '1.5%',
-      top:
-        PADDING_TOP +
-        TITLE_HEIGHT * hasTitle +
-        SUBTITLE_HEIGHT * hasSubtitle +
-        TITLE_BOTTOM,
+      top: PADDING_TOP + TITLE_HEIGHT * hasTitle + SUBTITLE_HEIGHT * hasSubtitle + TITLE_BOTTOM,
       bottom: PADDING_BOTTOM + LEGEND_HEIGHT * hasLegend,
       containLabel: true,
     },
@@ -46,13 +42,13 @@ export default function useEchartsOptions(config: AxisChartConfig) {
     tooltip: {
       show: true,
       trigger: 'axis',
-      formatter: (params: Object | Array<Object>) => {
+      formatter: (params: object | Array<object>) => {
         if (Array.isArray(params)) {
           params = params
             // remove zero values
             .filter((p) => p.value?.[1] !== 0)
             // sort in descending order by value
-            .sort((a, b) => b.value?.[1] - a.value?.[1])
+            .toSorted((a, b) => b.value?.[1] - a.value?.[1])
         }
 
         if (!Array.isArray(params)) {
@@ -218,8 +214,7 @@ function getXAxisOptions(config: AxisChartConfig) {
         axisLabel: {
           show: true,
           hideOverlap: true,
-          showMaxLabel:
-            config.xAxis.type === 'category' || config.xAxis.type === 'value',
+          showMaxLabel: config.xAxis.type === 'category' || config.xAxis.type === 'value',
           margin: 8,
         },
       }
@@ -298,7 +293,7 @@ function getYAxisOptions(config: AxisChartConfig) {
 
   primaryYAxisOptions = mergeDeep(
     primaryYAxisOptions,
-    config.swapXY ? config.xAxis.echartOptions : config.yAxis.echartOptions
+    config.swapXY ? config.xAxis.echartOptions : config.yAxis.echartOptions,
   )
 
   let secondaryYAxisOptions = {
@@ -349,10 +344,8 @@ function getYAxisOptions(config: AxisChartConfig) {
 
   secondaryYAxisOptions = mergeDeep(
     secondaryYAxisOptions,
-    config.swapXY ? config.y2Axis?.echartOptions : config.y2Axis?.echartOptions
+    config.swapXY ? config.y2Axis?.echartOptions : config.y2Axis?.echartOptions,
   )
 
-  return config.swapXY
-    ? [primaryYAxisOptions]
-    : [primaryYAxisOptions, secondaryYAxisOptions]
+  return config.swapXY ? [primaryYAxisOptions] : [primaryYAxisOptions, secondaryYAxisOptions]
 }
diff --git a/src/components/Charts/funnelChartOptions.ts b/src/components/Charts/funnelChartOptions.ts
index d20dc351b..a9dd9e7ce 100644
--- a/src/components/Charts/funnelChartOptions.ts
+++ b/src/components/Charts/funnelChartOptions.ts
@@ -6,7 +6,7 @@ import {
   TITLE_HEIGHT,
 } from './eChartOptions'
 import { formatValue } from './helpers'
-import { FunnelChartConfig } from './types'
+import type { FunnelChartConfig } from './types'
 
 export default function getFunnelChartOptions(config: FunnelChartConfig) {
   let data = config.data || []
@@ -44,11 +44,7 @@ export default function getFunnelChartOptions(config: FunnelChartConfig) {
         type: 'funnel',
         orient: 'vertical',
         funnelAlign: 'center',
-        top:
-          PADDING_TOP +
-          TITLE_HEIGHT +
-          SUBTITLE_HEIGHT * hasSubtitle +
-          TITLE_BOTTOM,
+        top: PADDING_TOP + TITLE_HEIGHT + SUBTITLE_HEIGHT * hasSubtitle + TITLE_BOTTOM,
         left: 'center',
         width: '60%',
         height: '75%',
diff --git a/src/components/Charts/helpers.ts b/src/components/Charts/helpers.ts
index bfaed7a86..eaa5e972c 100644
--- a/src/components/Charts/helpers.ts
+++ b/src/components/Charts/helpers.ts
@@ -40,15 +40,7 @@ function guessPrecision(number: number) {
   return Math.min(str.length - decimalIndex - 1, 2)
 }
 
-export type TimeGrain =
-  | 'second'
-  | 'minute'
-  | 'hour'
-  | 'day'
-  | 'week'
-  | 'month'
-  | 'quarter'
-  | 'year'
+export type TimeGrain = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'
 export function formatDate(date: string, format?: string, grain: TimeGrain = 'day') {
   if (!date) return ''
 
@@ -74,33 +66,32 @@ export function formatDate(date: string, format?: string, grain: TimeGrain = 'da
   return dayjs(date).format(format)
 }
 
-
 export function isObject(item: any) {
   return item && typeof item === 'object' && !Array.isArray(item)
 }
 
 export function mergeDeep(target: any, ...sources: any[]) {
-  if (!sources.length) return target;
-  const source = sources.shift();
+  if (!sources.length) return target
+  const source = sources.shift()
 
   if (!source || !isObject(target) || !isObject(source)) {
     // Skip the current source if it's not a proper object
-    return mergeDeep(target, ...sources);
+    return mergeDeep(target, ...sources)
   }
 
-  let output = Object.assign({}, target);
+  let output = Object.assign({}, target)
 
   Object.keys(source).forEach((key) => {
     if (isObject(source[key])) {
       if (!(key in output)) {
-        output[key] = source[key];
+        output[key] = source[key]
       } else {
-        output[key] = mergeDeep(output[key], source[key]);
+        output[key] = mergeDeep(output[key], source[key])
       }
     } else {
-      output[key] = source[key];
+      output[key] = source[key]
     }
-  });
+  })
 
-  return mergeDeep(output, ...sources);
+  return mergeDeep(output, ...sources)
 }
diff --git a/src/components/Charts/stories/Examples.vue b/src/components/Charts/stories/Examples.vue
index f31eea0ec..d3018fae6 100644
--- a/src/components/Charts/stories/Examples.vue
+++ b/src/components/Charts/stories/Examples.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import { AxisChart, DonutChart, FunnelChart, NumberChart } from 'frappe-ui'
-
-import {
-  AxisChartConfig,
-  DonutChartConfig,
-} from 'frappe-ui/src/components/Charts/types'
+import type { AxisChartConfig, DonutChartConfig } from 'frappe-ui/src/components/Charts/types'
 
 import Story from '@/components/Story.vue'
 
diff --git a/src/components/Charts/types.ts b/src/components/Charts/types.ts
index 828d67b87..db3f18606 100644
--- a/src/components/Charts/types.ts
+++ b/src/components/Charts/types.ts
@@ -1,4 +1,4 @@
-import { TimeGrain } from './helpers'
+import type { TimeGrain } from './helpers'
 
 export type AxisChartConfig = {
   data: Record<string, any>[]
diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
index 6e276b817..7e2a72722 100644
--- a/src/components/Checkbox/Checkbox.vue
+++ b/src/components/Checkbox/Checkbox.vue
@@ -9,16 +9,13 @@
     }"
   >
     <input
-      class="rounded-sm mt-[1px] bg-surface-white"
+      class="mt-[1px] rounded-sm bg-surface-white"
       :class="inputClasses"
       type="checkbox"
       :disabled="disabled"
       :id="htmlId"
       :checked="Boolean(modelValue)"
-      @change="
-        (e) =>
-          $emit('update:modelValue', (e.target as HTMLInputElement).checked)
-      "
+      @change="(e) => $emit('update:modelValue', (e.target as HTMLInputElement).checked)"
       v-bind="attrs"
     />
     <label class="block" :class="labelClasses" v-if="label" :for="htmlId">
@@ -28,6 +25,7 @@
 </template>
 <script lang="ts" setup>
 import { computed, useAttrs } from 'vue'
+
 import { useId } from '../../utils/useId'
 import type { CheckboxProps } from './types'
 
diff --git a/src/components/Checkbox/index.ts b/src/components/Checkbox/index.ts
index 4e7abd311..f2b20f33b 100644
--- a/src/components/Checkbox/index.ts
+++ b/src/components/Checkbox/index.ts
@@ -1,2 +1,2 @@
 export { default as Checkbox } from './Checkbox.vue'
-export type { CheckboxProps } from './types'
\ No newline at end of file
+export type { CheckboxProps } from './types'
diff --git a/src/components/Checkbox/stories/Examples.vue b/src/components/Checkbox/stories/Examples.vue
index 1271e6275..3fd5579d1 100644
--- a/src/components/Checkbox/stories/Examples.vue
+++ b/src/components/Checkbox/stories/Examples.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Checkbox } from "frappe-ui";
+import { Checkbox } from 'frappe-ui'
 </script>
 
 <template>
diff --git a/src/components/CircularProgressBar/CircularProgressBar.story.vue b/src/components/CircularProgressBar/CircularProgressBar.story.vue
index af33aa6f6..93c26f1f2 100644
--- a/src/components/CircularProgressBar/CircularProgressBar.story.vue
+++ b/src/components/CircularProgressBar/CircularProgressBar.story.vue
@@ -1,11 +1,12 @@
 <script setup>
-import { CircularProgressBar } from "frappe-ui";
-import Story from "@/components/Story.vue";
+import { CircularProgressBar } from 'frappe-ui'
+
+import Story from '@/components/Story.vue'
 
 // 'black' | 'red' | 'green' | 'blue' | 'orange'
 
-const themes = ["black", "red", "green", "blue", "orange"];
-const sizes = ["xs", "sm", "md", "lg", "xl"];
+const themes = ['black', 'red', 'green', 'blue', 'orange']
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
 </script>
 
 <template>
@@ -15,51 +16,27 @@ const sizes = ["xs", "sm", "md", "lg", "xl"];
     </Story>
 
     <Story title="Solid Variant (Complete)">
-      <CircularProgressBar
-        :step="9"
-        :totalSteps="9"
-        variant="solid"
-        themeComplete="lightgreen"
-      />
+      <CircularProgressBar :step="9" :totalSteps="9" variant="solid" themeComplete="lightgreen" />
     </Story>
 
     <Story title="Outline Variant (Complete)">
-      <CircularProgressBar
-        :step="9"
-        :totalSteps="9"
-        variant="outline"
-        themeComplete="lightgreen"
-      />
+      <CircularProgressBar :step="9" :totalSteps="9" variant="outline" themeComplete="lightgreen" />
     </Story>
 
     <Story title="Custom Theme">
       <CircularProgressBar
         :step="2"
         :totalSteps="6"
-        :theme='{ primary: "#2376f5", secondary: "#ddd5d5" }'
+        :theme="{ primary: '#2376f5', secondary: '#ddd5d5' }"
       />
     </Story>
 
     <Story title="Themes" preview-css="flex gap-4" class="col-span-2">
-      <CircularProgressBar
-        v-for="theme in themes"
-        :step="3"
-        :totalSteps="4"
-        :theme="theme"
-      />
+      <CircularProgressBar v-for="theme in themes" :step="3" :totalSteps="4" :theme="theme" />
     </Story>
 
-    <Story
-      title="Sizes"
-      preview-css="flex gap-3 items-center"
-      class="col-span-2"
-    >
-      <CircularProgressBar
-        v-for="size in sizes"
-        :step="3"
-        :totalSteps="4"
-        :size="size"
-      />
+    <Story title="Sizes" preview-css="flex gap-3 items-center" class="col-span-2">
+      <CircularProgressBar v-for="size in sizes" :step="3" :totalSteps="4" :size="size" />
     </Story>
   </div>
 </template>
diff --git a/src/components/CircularProgressBar/CircularProgressBar.vue b/src/components/CircularProgressBar/CircularProgressBar.vue
index 0f14374e1..f4de536d5 100644
--- a/src/components/CircularProgressBar/CircularProgressBar.vue
+++ b/src/components/CircularProgressBar/CircularProgressBar.vue
@@ -17,6 +17,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+
 import FeatherIcon from '../FeatherIcon.vue'
 import type { CircularProgressBarProps, Size, SizeProps } from './types'
 
diff --git a/src/components/CircularProgressBar/index.ts b/src/components/CircularProgressBar/index.ts
index 020527ac3..2dc9ac7a7 100644
--- a/src/components/CircularProgressBar/index.ts
+++ b/src/components/CircularProgressBar/index.ts
@@ -1,2 +1,2 @@
 export { default as CircularProgressBar } from './CircularProgressBar.vue'
-export type { CircularProgressBarProps } from './types'
\ No newline at end of file
+export type { CircularProgressBarProps } from './types'
diff --git a/src/components/Combobox/Combobox.cy.ts b/src/components/Combobox/Combobox.cy.ts
index b178460b4..028b477e8 100644
--- a/src/components/Combobox/Combobox.cy.ts
+++ b/src/components/Combobox/Combobox.cy.ts
@@ -1,6 +1,7 @@
-import Combobox from './Combobox.vue'
 import { h } from 'vue'
 
+import Combobox from './Combobox.vue'
+
 const options = ['Apple', 'Mango', 'Cherry']
 
 describe('Combobox', () => {
@@ -72,9 +73,9 @@ describe('Combobox', () => {
     cy.mount(Combobox, {
       props: {
         options,
-        onBlur: onBlurSpy,
-        onFocus: onFocus,
-        onInput: onInput,
+        'onBlur': onBlurSpy,
+        'onFocus': onFocus,
+        'onInput': onInput,
         'onUpdate:selectedOption': onSelectedOption,
       },
     })
diff --git a/src/components/Combobox/Combobox.vue b/src/components/Combobox/Combobox.vue
index 306cf8560..f28e2faa5 100644
--- a/src/components/Combobox/Combobox.vue
+++ b/src/components/Combobox/Combobox.vue
@@ -1,13 +1,4 @@
 <script setup lang="ts">
-import {
-  computed,
-  type Component,
-  type VNode,
-  ref,
-  watch,
-  h,
-  FunctionalComponent,
-} from 'vue'
 import {
   ComboboxAnchor,
   ComboboxContent,
@@ -22,8 +13,11 @@ import {
   ComboboxTrigger,
   ComboboxViewport,
 } from 'reka-ui'
+import type { FunctionalComponent } from 'vue'
+import { computed, type Component, type VNode, ref, watch, h } from 'vue'
 import LucideCheck from '~icons/lucide/check'
 import LucideChevronDown from '~icons/lucide/chevron-down'
+
 import type {
   CustomOption,
   SimpleOption,
@@ -45,16 +39,15 @@ const emit = defineEmits<{
   'update:selectedOption': (option: SimpleOption | null) => void
 
   /** Emitted when the input receives focus */
-  focus: (event: FocusEvent) => void
+  'focus': (event: FocusEvent) => void
 
   /** Emitted when the input loses focus */
-  blur: (event: FocusEvent) => void
+  'blur': (event: FocusEvent) => void
 
   /** Emitted when the user types in the input */
-  input: (value: string) => void
+  'input': (value: string) => void
 }>()
 
-
 const searchTerm = ref(getDisplayValue(props.modelValue))
 const internalModelValue = ref(props.modelValue)
 const isOpen = ref(false)
@@ -160,32 +153,24 @@ const allOptionsFlat = computed(() => {
 
 function getDisplayValue(selectedValue: string | null | undefined): string {
   if (!selectedValue) return ''
-  const options = props.options.flatMap((opt) =>
-    isGroup(opt) ? opt.options : opt,
-  )
+  const options = props.options.flatMap((opt) => (isGroup(opt) ? opt.options : opt))
   const selectedOption = options.find((opt) => getKey(opt) === selectedValue)
   return selectedOption ? getLabel(selectedOption) : selectedValue || ''
 }
 
 const selectedOption = computed(() => {
   if (!internalModelValue.value) return null
-  return allOptionsFlat.value.find(
-    (opt) => getKey(opt) === internalModelValue.value,
-  )
+  return allOptionsFlat.value.find((opt) => getKey(opt) === internalModelValue.value)
 })
 
 const selectedOptionIcon = computed(() => {
   return selectedOption.value ? getIcon(selectedOption.value) : undefined
 })
 
-const RenderIcon: FunctionalComponent<{ icon?: string | Component }> = (
-  props,
-) => {
+const RenderIcon: FunctionalComponent<{ icon?: string | Component }> = (props) => {
   if (!props.icon) return null
   const iconContent =
-    typeof props.icon === 'string'
-      ? h('span', props.icon)
-      : h(props.icon, { class: 'w-4 h-4' })
+    typeof props.icon === 'string' ? h('span', props.icon) : h(props.icon, { class: 'w-4 h-4' })
 
   return h(
     'span',
@@ -313,7 +298,6 @@ defineSlots<{
   /** Custom slot for individual options, only used if the option has `slotName` */
   [slotName: string]: (props: { option: SimpleOption; searchTerm: string }) => any
 }>()
-
 </script>
 
 <template>
@@ -328,12 +312,12 @@ defineSlots<{
       <ComboboxAnchor
         class="flex h-7 w-full items-center justify-between gap-2 rounded px-2 py-1 transition-colors"
         :class="{
-          'opacity-50 pointer-events-none': disabled,
+          'pointer-events-none opacity-50': disabled,
           [variantClasses]: true,
         }"
         @click="handleClick"
       >
-        <div class="flex items-center gap-2 flex-1 overflow-hidden">
+        <div class="flex flex-1 items-center gap-2 overflow-hidden">
           <slot name="prefix" />
           <RenderIcon v-if="selectedOptionIcon" :icon="selectedOptionIcon" />
           <ComboboxInput
@@ -341,7 +325,7 @@ defineSlots<{
             @input="handleInputChange"
             @focus="handleFocus"
             @blur="handleBlur"
-            class="bg-transparent p-0 focus:outline-0 border-0 focus:border-0 focus:ring-0 text-base text-ink-gray-8 h-full placeholder:text-ink-gray-4 w-full"
+            class="h-full w-full border-0 bg-transparent p-0 text-base text-ink-gray-8 placeholder:text-ink-gray-4 focus:border-0 focus:outline-0 focus:ring-0"
             :placeholder="placeholder || ''"
             :disabled="disabled"
             autocomplete="off"
@@ -353,7 +337,7 @@ defineSlots<{
       </ComboboxAnchor>
       <ComboboxPortal>
         <ComboboxContent
-          class="z-10 min-w-[--reka-combobox-trigger-width] mt-1 bg-surface-modal overflow-hidden rounded-lg shadow-2xl"
+          class="z-10 mt-1 min-w-[--reka-combobox-trigger-width] overflow-hidden rounded-lg bg-surface-modal shadow-2xl"
           position="popper"
           @openAutoFocus.prevent
           @closeAutoFocus.prevent
@@ -363,18 +347,13 @@ defineSlots<{
             class="max-h-60 overflow-auto pb-1.5"
             :class="{ 'px-1.5 pt-1.5': !isGroup(filteredOptions[0]) }"
           >
-            <ComboboxEmpty
-              class="text-ink-gray-5 text-base text-center py-1.5 px-2.5"
-            >
-              {{ searchTerm ? `No results found for "${searchTerm}"` : "No results found" }}
+            <ComboboxEmpty class="px-2.5 py-1.5 text-center text-base text-ink-gray-5">
+              {{ searchTerm ? `No results found for "${searchTerm}"` : 'No results found' }}
             </ComboboxEmpty>
-            <template
-              v-for="(optionOrGroup, index) in filteredOptions"
-              :key="index"
-            >
+            <template v-for="(optionOrGroup, index) in filteredOptions" :key="index">
               <ComboboxGroup class="px-1.5" v-if="isGroup(optionOrGroup)">
                 <ComboboxLabel
-                  class="px-2.5 pt-3 pb-1.5 text-sm font-medium text-ink-gray-5 sticky top-0 bg-surface-modal z-10"
+                  class="sticky top-0 z-10 bg-surface-modal px-2.5 pb-1.5 pt-3 text-sm font-medium text-ink-gray-5"
                 >
                   {{ optionOrGroup.group }}
                 </ComboboxLabel>
@@ -383,7 +362,7 @@ defineSlots<{
                   :key="`${index}-${idx}`"
                   :value="getKey(option)"
                   :disabled="isDisabled(option)"
-                  class="text-base leading-none text-ink-gray-7 rounded flex items-center h-7 px-2.5 py-1.5 relative select-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-surface-gray-3"
+                  class="relative flex h-7 select-none items-center rounded px-2.5 py-1.5 text-base leading-none text-ink-gray-7 data-[disabled]:pointer-events-none data-[highlighted]:bg-surface-gray-3 data-[disabled]:opacity-50 data-[highlighted]:outline-none"
                 >
                   <slot
                     v-if="getSlotName(option)"
@@ -396,12 +375,12 @@ defineSlots<{
                     :is="getRenderFunction(option)"
                   />
                   <template v-else>
-                    <span class="flex items-center gap-2 pr-6 flex-1">
+                    <span class="flex flex-1 items-center gap-2 pr-6">
                       <RenderIcon :icon="getIcon(option)" />
                       {{ getLabel(option) }}
                     </span>
                     <ComboboxItemIndicator
-                      class="absolute right-0 w-6 inline-flex items-center justify-center"
+                      class="absolute right-0 inline-flex w-6 items-center justify-center"
                     >
                       <LucideCheck class="size-4" />
                     </ComboboxItemIndicator>
@@ -413,7 +392,7 @@ defineSlots<{
                 :key="index"
                 :value="getKey(optionOrGroup)"
                 :disabled="isDisabled(optionOrGroup)"
-                class="text-base leading-none text-ink-gray-7 rounded flex items-center h-7 px-2.5 py-1.5 relative select-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-surface-gray-3"
+                class="relative flex h-7 select-none items-center rounded px-2.5 py-1.5 text-base leading-none text-ink-gray-7 data-[disabled]:pointer-events-none data-[highlighted]:bg-surface-gray-3 data-[disabled]:opacity-50 data-[highlighted]:outline-none"
               >
                 <slot
                   v-if="getSlotName(optionOrGroup)"
@@ -426,15 +405,12 @@ defineSlots<{
                   :is="getRenderFunction(optionOrGroup)"
                 />
                 <template v-else>
-                  <span class="flex items-center gap-2 pr-6 flex-1">
-                    <RenderIcon
-                      v-if="getIcon(optionOrGroup)"
-                      :icon="getIcon(optionOrGroup)"
-                    />
+                  <span class="flex flex-1 items-center gap-2 pr-6">
+                    <RenderIcon v-if="getIcon(optionOrGroup)" :icon="getIcon(optionOrGroup)" />
                     {{ getLabel(optionOrGroup) }}
                   </span>
                   <ComboboxItemIndicator
-                    class="absolute right-0 w-6 inline-flex items-center justify-center"
+                    class="absolute right-0 inline-flex w-6 items-center justify-center"
                   >
                     <LucideCheck class="h-4 w-4" />
                   </ComboboxItemIndicator>
diff --git a/src/components/Combobox/stories/CustomRender.vue b/src/components/Combobox/stories/CustomRender.vue
index c8efd5c32..7c940ff90 100644
--- a/src/components/Combobox/stories/CustomRender.vue
+++ b/src/components/Combobox/stories/CustomRender.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { h, ref } from 'vue'
 import { Combobox } from 'frappe-ui'
+import { h, ref } from 'vue'
 import LucideSettings from '~icons/lucide/settings'
 
 const value = ref('')
diff --git a/src/components/Combobox/stories/Grouped.vue b/src/components/Combobox/stories/Grouped.vue
index 24e013dee..9c7057335 100644
--- a/src/components/Combobox/stories/Grouped.vue
+++ b/src/components/Combobox/stories/Grouped.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Combobox } from 'frappe-ui'
+import { ref } from 'vue'
 
 const value = ref('')
 
diff --git a/src/components/Combobox/stories/OptionSlots.vue b/src/components/Combobox/stories/OptionSlots.vue
index fc6f09559..286e2da84 100644
--- a/src/components/Combobox/stories/OptionSlots.vue
+++ b/src/components/Combobox/stories/OptionSlots.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Avatar, Combobox } from 'frappe-ui'
+import { ref } from 'vue'
 import LucideSettings from '~icons/lucide/settings'
 
 const value = ref('')
diff --git a/src/components/Combobox/stories/Simple.vue b/src/components/Combobox/stories/Simple.vue
index c496a6765..bcb9ac530 100644
--- a/src/components/Combobox/stories/Simple.vue
+++ b/src/components/Combobox/stories/Simple.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Combobox } from 'frappe-ui'
+import { ref } from 'vue'
 
 const value = ref('')
 
@@ -8,12 +8,7 @@ const options = ['John Doe', 'Jane Doe', 'John Smith', 'Jane Smith']
 </script>
 
 <template>
-  <Combobox
-    v-model="value"
-    :options="options"
-    placeholder="Select an option"
-    show-cancel
-  />
+  <Combobox v-model="value" :options="options" placeholder="Select an option" show-cancel />
 
   <div class="text-sm text-gray-600">Selected: {{ value || 'None' }}</div>
 </template>
diff --git a/src/components/Combobox/stories/WithIcons.vue b/src/components/Combobox/stories/WithIcons.vue
index eb6fdf083..5374f69be 100644
--- a/src/components/Combobox/stories/WithIcons.vue
+++ b/src/components/Combobox/stories/WithIcons.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Combobox } from 'frappe-ui'
+import { ref } from 'vue'
 
 const value = ref('')
 
diff --git a/src/components/CommandPalette/CommandPalette.vue b/src/components/CommandPalette/CommandPalette.vue
index 0257062bc..4e39b0a55 100644
--- a/src/components/CommandPalette/CommandPalette.vue
+++ b/src/components/CommandPalette/CommandPalette.vue
@@ -29,10 +29,7 @@
                 v-for="(group, index) in groups"
                 :key="group.title"
               >
-                <div
-                  class="mb-2.5 px-4.5 text-base text-ink-gray-5"
-                  v-if="!group.hideTitle"
-                >
+                <div class="mb-2.5 px-4.5 text-base text-ink-gray-5" v-if="!group.hideTitle">
                   {{ group.title }}
                 </div>
                 <ComboboxOption
@@ -43,11 +40,7 @@
                   class="px-2.5"
                   :disabled="item.disabled"
                 >
-                  <component
-                    :is="group.component"
-                    :item="item"
-                    :active="active"
-                  />
+                  <component :is="group.component" :item="item" :active="active" />
                 </ComboboxOption>
               </div>
             </ComboboxOptions>
@@ -59,12 +52,7 @@
 </template>
 
 <script setup>
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxOption,
-  ComboboxOptions,
-} from '@headlessui/vue'
+import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/vue'
 import { computed, onBeforeUnmount, onMounted } from 'vue'
 
 const emit = defineEmits(['update:show', 'update:searchQuery', 'select'])
@@ -95,11 +83,7 @@ function keydownWatcher(e) {
     e.preventDefault()
   }
 
-  if (
-    e.key === 'k' &&
-    (e.ctrlKey || e.metaKey) &&
-    !e.target.classList.contains('ProseMirror')
-  ) {
+  if (e.key === 'k' && (e.ctrlKey || e.metaKey) && !e.target.classList.contains('ProseMirror')) {
     show.value = true
     e.preventDefault()
   }
diff --git a/src/components/CommandPalette/CommandPaletteItem.vue b/src/components/CommandPalette/CommandPaletteItem.vue
index 76d6c382f..ad5c392fa 100644
--- a/src/components/CommandPalette/CommandPaletteItem.vue
+++ b/src/components/CommandPalette/CommandPaletteItem.vue
@@ -10,18 +10,11 @@ defineProps({
     class="flex w-full min-w-0 items-center rounded px-2 py-2 text-base font-medium text-ink-gray-8"
     :class="{ 'bg-surface-gray-3': active }"
   >
-    <component
-      :is="item.icon"
-      v-if="item.icon"
-      class="mr-3 h-4 w-4 text-ink-gray-7"
-    />
+    <component :is="item.icon" v-if="item.icon" class="mr-3 h-4 w-4 text-ink-gray-7" />
     <span class="overflow-hidden text-ellipsis whitespace-nowrap">
       {{ item.title }}
     </span>
-    <span
-      v-if="item.description"
-      class="ml-auto whitespace-nowrap pl-2 text-ink-gray-5"
-    >
+    <span v-if="item.description" class="ml-auto whitespace-nowrap pl-2 text-ink-gray-5">
       {{ item.description }}
     </span>
   </div>
diff --git a/src/components/ConfirmDialog.vue b/src/components/ConfirmDialog.vue
index b28560303..0dd0c8386 100644
--- a/src/components/ConfirmDialog.vue
+++ b/src/components/ConfirmDialog.vue
@@ -2,11 +2,7 @@
   <Dialog v-model="showDialog" :options="{ title }" @close="closeDialog">
     <template #body-content>
       <div class="space-y-4">
-        <p
-          class="text-p-base text-ink-gray-6"
-          v-if="message"
-          v-html="message"
-        />
+        <p class="text-p-base text-ink-gray-6" v-if="message" v-html="message" />
       </div>
     </template>
     <template #actions>
diff --git a/src/components/DatePicker/DatePicker.cy.ts b/src/components/DatePicker/DatePicker.cy.ts
index e731b7fdc..17dd07b4f 100644
--- a/src/components/DatePicker/DatePicker.cy.ts
+++ b/src/components/DatePicker/DatePicker.cy.ts
@@ -69,19 +69,19 @@ describe('DatePicker', () => {
 
     cy.get('[role=dialog]').should('exist')
     cy.get('[aria-label="Today"]').click()
-    cy.get('[role=dialog]').should('not.exist') 
+    cy.get('[role=dialog]').should('not.exist')
     cy.get('input').should('have.value', getTodaysDate())
 
     cy.get('input').dblclick()
 
     cy.get('[aria-label="Tomorrow"]').click()
-    cy.get('[role=dialog]').should('not.exist') 
+    cy.get('[role=dialog]').should('not.exist')
     cy.get('input').should('have.value', getTomorrowsDate())
 
     cy.get('input').dblclick()
 
     cy.get('[aria-label="Clear"]').click()
-    cy.get('[role=dialog]').should('not.exist') 
+    cy.get('[role=dialog]').should('not.exist')
     cy.get('input').should('have.value', '')
 
     cy.get('[role=dialog]').should('not.exist')
@@ -110,7 +110,7 @@ describe('DatePicker', () => {
   it('v-model', () => {
     cy.mount(DatePicker, {
       props: {
-        onChange: cy.spy().as('onChange'),
+        'onChange': cy.spy().as('onChange'),
         'onUpdate:modelValue': cy.spy().as('onUpdate'),
       },
     })
diff --git a/src/components/DatePicker/DatePicker.vue b/src/components/DatePicker/DatePicker.vue
index eafc3c4c3..8bbd1555d 100644
--- a/src/components/DatePicker/DatePicker.vue
+++ b/src/components/DatePicker/DatePicker.vue
@@ -1,19 +1,11 @@
 <template>
-  <Popover
-    class="inline-block"
-    :placement="placement"
-    @open="initFromValue"
-    @close="handleClose"
-  >
+  <Popover class="inline-block" :placement="placement" @open="initFromValue" @close="handleClose">
     <template #target="{ togglePopover, isOpen }">
-      <slot
-        name="target"
-        v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-      >
+      <slot name="target" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }">
         <TextInput
           v-model="inputValue"
           type="text"
-          class="cursor-text w-full"
+          class="w-full cursor-text"
           :class="props.inputClass"
           :label="props.label"
           :variant="props.variant"
@@ -26,16 +18,10 @@
           @keydown.enter.prevent="onEnter(togglePopover)"
         >
           <template v-if="$slots.prefix" #prefix>
-            <slot
-              name="prefix"
-              v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-            />
+            <slot name="prefix" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }" />
           </template>
           <template #suffix>
-            <slot
-              name="suffix"
-              v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-            >
+            <slot name="suffix" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }">
               <FeatherIcon
                 name="chevron-down"
                 class="h-4 w-4 cursor-pointer"
@@ -49,9 +35,9 @@
     <template #body="{ togglePopover }">
       <div
         ref="popoverContentRef"
-        class="w-fit min-w-60 select-none text-base text-ink-gray-9 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 mt-2"
+        class="mt-2 w-fit min-w-60 select-none rounded-lg bg-surface-modal text-base text-ink-gray-9 shadow-2xl ring-1 ring-black ring-opacity-5"
       >
-        <div class="flex items-center justify-between p-2 pb-0 gap-1">
+        <div class="flex items-center justify-between gap-1 p-2 pb-0">
           <Button
             variant="ghost"
             size="sm"
@@ -59,13 +45,9 @@
             @click="cycleView"
             label="cycle-calendar-view"
           >
-            <span v-if="view === 'date'">
-              {{ months[currentMonth] }} {{ currentYear }}
-            </span>
+            <span v-if="view === 'date'"> {{ months[currentMonth] }} {{ currentYear }} </span>
             <span v-else-if="view === 'month'">{{ currentYear }}</span>
-            <span v-else>
-              {{ yearRangeStart }} - {{ yearRangeStart + 11 }}
-            </span>
+            <span v-else> {{ yearRangeStart }} - {{ yearRangeStart + 11 }} </span>
           </Button>
           <div class="flex items-center">
             <Button
@@ -93,9 +75,7 @@
         </div>
         <div class="p-2">
           <div v-if="view === 'date'" role="grid" aria-label="Calendar dates">
-            <div
-              class="flex items-center text-xs font-medium uppercase text-ink-gray-4 mb-1"
-            >
+            <div class="mb-1 flex items-center text-xs font-medium uppercase text-ink-gray-4">
               <div
                 v-for="d in ['S', 'M', 'T', 'W', 'T', 'F', 'S']"
                 :key="d"
@@ -109,7 +89,7 @@
                 v-for="dateObj in week"
                 type="button"
                 :key="dateObj.key"
-                class="flex h-8 w-8 items-center justify-center rounded cursor-pointer text-sm focus:outline-none focus:ring-2 focus:ring-outline-gray-2"
+                class="flex h-8 w-8 cursor-pointer items-center justify-center rounded text-sm focus:outline-none focus:ring-2 focus:ring-outline-gray-2"
                 :class="[
                   dateObj.inMonth ? 'text-ink-gray-8' : 'text-ink-gray-3',
                   dateObj.isToday ? 'font-extrabold text-ink-gray-9' : '',
@@ -120,8 +100,7 @@
                 role="gridcell"
                 :aria-selected="dateObj.isSelected ? 'true' : 'false'"
                 :aria-label="
-                  dateObj.date.format('YYYY-MM-DD') +
-                  (dateObj.isToday ? ' (Today)' : '')
+                  dateObj.date.format('YYYY-MM-DD') + (dateObj.isToday ? ' (Today)' : '')
                 "
                 @click="handleDateCellClick(dateObj.date, togglePopover)"
               >
@@ -139,10 +118,9 @@
               v-for="(m, i) in months"
               type="button"
               :key="m"
-              class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
+              class="focus:ring-brand-6 cursor-pointer rounded py-2 text-center text-sm hover:bg-surface-gray-2 focus:outline-none focus:ring-2"
               :class="{
-                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
-                  i === currentMonth,
+                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6': i === currentMonth,
               }"
               :aria-selected="i === currentMonth ? 'true' : 'false'"
               @click="selectMonth(i)"
@@ -150,20 +128,14 @@
               {{ m.slice(0, 3) }}
             </button>
           </div>
-          <div
-            v-else
-            class="grid grid-cols-3 gap-1"
-            role="grid"
-            aria-label="Select year"
-          >
+          <div v-else class="grid grid-cols-3 gap-1" role="grid" aria-label="Select year">
             <button
               v-for="y in yearRange"
               type="button"
               :key="y"
-              class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
+              class="focus:ring-brand-6 cursor-pointer rounded py-2 text-center text-sm hover:bg-surface-gray-2 focus:outline-none focus:ring-2"
               :class="{
-                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
-                  y === currentYear,
+                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6': y === currentYear,
               }"
               :aria-selected="y === currentYear ? 'true' : 'false'"
               @click="selectYear(y)"
@@ -172,10 +144,7 @@
             </button>
           </div>
         </div>
-        <div
-          v-if="props.clearable"
-          class="flex items-center justify-between gap-1 p-2 border-t"
-        >
+        <div v-if="props.clearable" class="flex items-center justify-between gap-1 border-t p-2">
           <div class="flex gap-1">
             <Button
               variant="outline"
@@ -201,21 +170,22 @@
   </Popover>
 </template>
 <script setup lang="ts">
+import type { Dayjs } from 'dayjs'
 import { ref, computed, watch, toRefs } from 'vue'
-import { Popover } from '../Popover'
+
+import { dayjs, dayjsLocal } from '../../utils/dayjs'
 import { Button } from '../Button'
-import { TextInput } from '../TextInput'
 // @ts-ignore - Vue SFC without explicit types
 import FeatherIcon from '../FeatherIcon.vue'
-import { dayjs, dayjsLocal } from '../../utils/dayjs'
-import { months, monthStart, generateWeeks, getDateValue } from './utils'
-import type { Dayjs } from 'dayjs'
+import { Popover } from '../Popover'
+import { TextInput } from '../TextInput'
 import type {
   DatePickerProps,
   DatePickerEmits,
   DatePickerViewMode as ViewMode,
   DatePickerDateObj as DateObj,
 } from './types'
+import { months, monthStart, generateWeeks, getDateValue } from './utils'
 
 const props = withDefaults(defineProps<DatePickerProps>(), {
   value: '',
@@ -380,9 +350,7 @@ function selectDate(date: string | Date | Dayjs): void {
 
   // Reflect new value in input immediately if not typing
   if (!isTyping.value) {
-    inputValue.value = props.format
-      ? formatter(selected.value, props.format)
-      : selected.value
+    inputValue.value = props.format ? formatter(selected.value, props.format) : selected.value
   }
   view.value = 'date'
 }
@@ -396,10 +364,7 @@ function selectYear(y: number): void {
 }
 function prev(): void {
   if (view.value === 'date') {
-    const m = monthStart(currentYear.value, currentMonth.value).subtract(
-      1,
-      'month',
-    )
+    const m = monthStart(currentYear.value, currentMonth.value).subtract(1, 'month')
     currentYear.value = m.year()
     currentMonth.value = m.month()
   } else if (view.value === 'month') {
@@ -419,10 +384,7 @@ function next(): void {
     currentYear.value += 12
   }
 }
-function handleDateCellClick(
-  date: string | Date | Dayjs,
-  togglePopover: () => void,
-) {
+function handleDateCellClick(date: string | Date | Dayjs, togglePopover: () => void) {
   selectDate(date)
   if (autoClose.value) togglePopover()
   isTyping.value = false
@@ -459,9 +421,7 @@ function handleClose() {
   }
 }
 
-const yearRangeStart = computed(
-  () => currentYear.value - (currentYear.value % 12),
-)
+const yearRangeStart = computed(() => currentYear.value - (currentYear.value % 12))
 const yearRange = computed<number[]>(() =>
   Array.from({ length: 12 }, (_, i) => yearRangeStart.value + i),
 )
diff --git a/src/components/DatePicker/DateRangePicker.vue b/src/components/DatePicker/DateRangePicker.vue
index 7226ec5a1..036352364 100644
--- a/src/components/DatePicker/DateRangePicker.vue
+++ b/src/components/DatePicker/DateRangePicker.vue
@@ -7,14 +7,11 @@
     ref="popoverRef"
   >
     <template #target="{ togglePopover, isOpen }">
-      <slot
-        name="target"
-        v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-      >
+      <slot name="target" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }">
         <TextInput
           v-model="inputValue"
           type="text"
-          class="cursor-text w-full"
+          class="w-full cursor-text"
           :class="props.inputClass"
           :label="props.label"
           :variant="props.variant"
@@ -27,16 +24,10 @@
           @keydown.enter.prevent="onEnter(togglePopover)"
         >
           <template v-if="$slots.prefix" #prefix>
-            <slot
-              name="prefix"
-              v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-            />
+            <slot name="prefix" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }" />
           </template>
           <template #suffix>
-            <slot
-              name="suffix"
-              v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-            >
+            <slot name="suffix" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }">
               <FeatherIcon
                 name="chevron-down"
                 class="h-4 w-4 cursor-pointer"
@@ -50,10 +41,10 @@
     <template #body="{ togglePopover }">
       <div
         ref="popoverContentRef"
-        class="w-fit min-w-60 select-none text-base text-ink-gray-9 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 mt-2"
+        class="mt-2 w-fit min-w-60 select-none rounded-lg bg-surface-modal text-base text-ink-gray-9 shadow-2xl ring-1 ring-black ring-opacity-5"
       >
         <!-- Header / Navigation -->
-        <div class="flex items-center justify-between p-2 pb-0 gap-1">
+        <div class="flex items-center justify-between gap-1 p-2 pb-0">
           <Button
             variant="ghost"
             size="sm"
@@ -61,9 +52,7 @@
             label="cycle-calendar-view"
             @click="cycleView"
           >
-            <span v-if="view === 'date'">
-              {{ months[currentMonth] }} {{ currentYear }}
-            </span>
+            <span v-if="view === 'date'"> {{ months[currentMonth] }} {{ currentYear }} </span>
             <span v-else-if="view === 'month'">{{ currentYear }}</span>
             <span v-else>{{ yearRangeStart }} - {{ yearRangeStart + 11 }}</span>
           </Button>
@@ -94,9 +83,7 @@
         <div class="p-2">
           <!-- Date Grid -->
           <div v-if="view === 'date'">
-            <div
-              class="flex items-center text-xs font-medium uppercase text-ink-gray-4 mb-1"
-            >
+            <div class="mb-1 flex items-center text-xs font-medium uppercase text-ink-gray-4">
               <div
                 v-for="d in ['S', 'M', 'T', 'W', 'T', 'F', 'S']"
                 :key="d"
@@ -110,32 +97,23 @@
                 v-for="dateObj in week"
                 type="button"
                 :key="dateObj.key"
-                class="flex h-8 w-8 items-center justify-center rounded cursor-pointer text-sm focus:outline-none focus:ring-2 focus:ring-outline-gray-2"
+                class="flex h-8 w-8 cursor-pointer items-center justify-center rounded text-sm focus:outline-none focus:ring-2 focus:ring-outline-gray-2"
                 :class="[
                   dateObj.inMonth ? 'text-ink-gray-8' : 'text-ink-gray-3',
                   dateObj.isToday ? 'font-extrabold text-ink-gray-9' : '',
                   dateObj.isRangeStart || dateObj.isRangeEnd
                     ? 'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6'
                     : dateObj.inRange
-                      ? 'bg-surface-gray-3 rounded-none'
+                      ? 'rounded-none bg-surface-gray-3'
                       : 'hover:bg-surface-gray-2',
-                  dateObj.isRangeStart && !dateObj.isRangeEnd
-                    ? 'rounded-l-md rounded-r-none'
-                    : '',
-                  dateObj.isRangeEnd && !dateObj.isRangeStart
-                    ? 'rounded-r-md rounded-l-none'
-                    : '',
-                  dateObj.isRangeStart && dateObj.isRangeEnd
-                    ? 'rounded-md'
-                    : '',
+                  dateObj.isRangeStart && !dateObj.isRangeEnd ? 'rounded-l-md rounded-r-none' : '',
+                  dateObj.isRangeEnd && !dateObj.isRangeStart ? 'rounded-l-none rounded-r-md' : '',
+                  dateObj.isRangeStart && dateObj.isRangeEnd ? 'rounded-md' : '',
                 ]"
                 role="gridcell"
-                :aria-selected="
-                  dateObj.isRangeStart || dateObj.isRangeEnd ? 'true' : 'false'
-                "
+                :aria-selected="dateObj.isRangeStart || dateObj.isRangeEnd ? 'true' : 'false'"
                 :aria-label="
-                  dateObj.date.format('YYYY-MM-DD') +
-                  (dateObj.isToday ? ' (Today)' : '')
+                  dateObj.date.format('YYYY-MM-DD') + (dateObj.isToday ? ' (Today)' : '')
                 "
                 @click="handleDateCellClick(dateObj.date, togglePopover)"
               >
@@ -154,10 +132,9 @@
               v-for="(m, i) in months"
               type="button"
               :key="m"
-              class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
+              class="focus:ring-brand-6 cursor-pointer rounded py-2 text-center text-sm hover:bg-surface-gray-2 focus:outline-none focus:ring-2"
               :class="{
-                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
-                  i === currentMonth,
+                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6': i === currentMonth,
               }"
               :aria-selected="i === currentMonth ? 'true' : 'false'"
               @click="selectMonth(i)"
@@ -166,20 +143,14 @@
             </button>
           </div>
           <!-- Year Grid -->
-          <div
-            v-else
-            class="grid grid-cols-3 gap-1"
-            role="grid"
-            aria-label="Select year"
-          >
+          <div v-else class="grid grid-cols-3 gap-1" role="grid" aria-label="Select year">
             <button
               v-for="y in yearRange"
               type="button"
               :key="y"
-              class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
+              class="focus:ring-brand-6 cursor-pointer rounded py-2 text-center text-sm hover:bg-surface-gray-2 focus:outline-none focus:ring-2"
               :class="{
-                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
-                  y === currentYear,
+                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6': y === currentYear,
               }"
               :aria-selected="y === currentYear ? 'true' : 'false'"
               @click="selectYear(y)"
@@ -188,9 +159,7 @@
             </button>
           </div>
         </div>
-        <div
-          class="flex justify-end gap-1 p-2 border-t dark:border-outline-gray-2"
-        >
+        <div class="flex justify-end gap-1 border-t p-2 dark:border-outline-gray-2">
           <Button
             size="sm"
             variant="outline"
@@ -205,20 +174,17 @@
 </template>
 
 <script setup lang="ts">
+import type { Dayjs } from 'dayjs'
 import { ref, computed, watch, toRefs } from 'vue'
-import { Popover } from '../Popover'
+
+import { dayjs, dayjsLocal } from '../../utils/dayjs'
 import { Button } from '../Button'
-import { TextInput } from '../TextInput'
 // @ts-ignore - Vue SFC without explicit types
 import FeatherIcon from '../FeatherIcon.vue'
-import { dayjs, dayjsLocal } from '../../utils/dayjs'
+import type { Popover } from '../Popover'
+import { TextInput } from '../TextInput'
+import type { DatePickerEmits, DateRangePickerProps, DatePickerViewMode as ViewMode } from './types'
 import { months, monthStart, generateWeeks, getDateValue } from './utils'
-import type { Dayjs } from 'dayjs'
-import type {
-  DatePickerEmits,
-  DateRangePickerProps,
-  DatePickerViewMode as ViewMode,
-} from './types'
 
 const props = withDefaults(defineProps<DateRangePickerProps>(), {
   value: '',
@@ -258,9 +224,7 @@ function formatOne(dateStr: string): string {
   if (!d.isValid()) return dateStr
   return props.format ? d.format(props.format) : dateStr
 }
-const displayLabel = computed<string>(() =>
-  formatDisplay(fromDate.value, toDate.value),
-)
+const displayLabel = computed<string>(() => formatDisplay(fromDate.value, toDate.value))
 
 function coerceToDayjs(val?: string | null): Dayjs | null {
   if (!val) return null
@@ -404,10 +368,7 @@ const weeks = computed<RangeDateObj[][]>(() => {
       const isRangeStart = f.isValid() && d.date.isSame(f, 'day')
       const isRangeEnd = t.isValid() && d.date.isSame(t, 'day')
       const inRange =
-        f.isValid() &&
-        t.isValid() &&
-        d.date.isAfter(f, 'day') &&
-        d.date.isBefore(t, 'day')
+        f.isValid() && t.isValid() && d.date.isAfter(f, 'day') && d.date.isBefore(t, 'day')
       return {
         date: d.date,
         key: d.key,
@@ -445,10 +406,7 @@ function ensureOrder() {
   }
 }
 
-function handleDateCellClick(
-  date: string | Date | Dayjs,
-  togglePopover: () => void,
-) {
+function handleDateCellClick(date: string | Date | Dayjs, togglePopover: () => void) {
   selectDate(date)
   if (autoClose.value && fromDate.value && toDate.value) {
     emitIfComplete()
@@ -503,10 +461,7 @@ function selectYear(y: number): void {
 }
 function prev(): void {
   if (view.value === 'date') {
-    const m = monthStart(currentYear.value, currentMonth.value).subtract(
-      1,
-      'month',
-    )
+    const m = monthStart(currentYear.value, currentMonth.value).subtract(1, 'month')
     currentYear.value = m.year()
     currentMonth.value = m.month()
   } else if (view.value === 'month') {
@@ -539,9 +494,7 @@ function handleClose() {
   }
 }
 
-const yearRangeStart = computed(
-  () => currentYear.value - (currentYear.value % 12),
-)
+const yearRangeStart = computed(() => currentYear.value - (currentYear.value % 12))
 const yearRange = computed<number[]>(() =>
   Array.from({ length: 12 }, (_, i) => yearRangeStart.value + i),
 )
diff --git a/src/components/DatePicker/DateTimePicker.vue b/src/components/DatePicker/DateTimePicker.vue
index 1bc602676..fb9fc3a85 100644
--- a/src/components/DatePicker/DateTimePicker.vue
+++ b/src/components/DatePicker/DateTimePicker.vue
@@ -1,19 +1,11 @@
 <template>
-  <Popover
-    class="inline-block"
-    :placement="placement"
-    @open="initFromValue"
-    @close="handleClose"
-  >
+  <Popover class="inline-block" :placement="placement" @open="initFromValue" @close="handleClose">
     <template #target="{ togglePopover, isOpen }">
-      <slot
-        name="target"
-        v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-      >
+      <slot name="target" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }">
         <TextInput
           v-model="inputValue"
           type="text"
-          class="cursor-text w-full"
+          class="w-full cursor-text"
           :class="props.inputClass"
           :label="props.label"
           :variant="props.variant"
@@ -26,16 +18,10 @@
           @keydown.enter.prevent="onEnter(togglePopover)"
         >
           <template v-if="$slots.prefix" #prefix>
-            <slot
-              name="prefix"
-              v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-            />
+            <slot name="prefix" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }" />
           </template>
           <template #suffix>
-            <slot
-              name="suffix"
-              v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-            >
+            <slot name="suffix" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }">
               <FeatherIcon
                 name="chevron-down"
                 class="h-4 w-4 cursor-pointer"
@@ -50,29 +36,22 @@
     <template #body="{ togglePopover }">
       <div
         ref="popoverContentRef"
-        class="w-fit min-w-60 select-none text-base text-ink-gray-9 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 mt-2"
+        class="mt-2 w-fit min-w-60 select-none rounded-lg bg-surface-modal text-base text-ink-gray-9 shadow-2xl ring-1 ring-black ring-opacity-5"
       >
         <!-- Header (Month/Year navigation) -->
-        <div class="flex items-center justify-between p-2 pb-0 gap-1">
+        <div class="flex items-center justify-between gap-1 p-2 pb-0">
           <Button
             variant="ghost"
             size="sm"
             class="text-sm font-medium text-ink-gray-7"
             @click="cycleView"
           >
-            <span v-if="view === 'date'"
-              >{{ months[currentMonth] }} {{ currentYear }}</span
-            >
+            <span v-if="view === 'date'">{{ months[currentMonth] }} {{ currentYear }}</span>
             <span v-else-if="view === 'month'">{{ currentYear }}</span>
             <span v-else>{{ yearRangeStart }} - {{ yearRangeStart + 11 }}</span>
           </Button>
           <div class="flex items-center">
-            <Button
-              variant="ghost"
-              icon="chevron-left"
-              class="size-7"
-              @click="prev"
-            />
+            <Button variant="ghost" icon="chevron-left" class="size-7" @click="prev" />
             <Button
               v-if="!clearable"
               variant="ghost"
@@ -80,21 +59,14 @@
               :label="'Now'"
               @click="() => handleNowClick(togglePopover)"
             />
-            <Button
-              variant="ghost"
-              icon="chevron-right"
-              class="size-7"
-              @click="next"
-            />
+            <Button variant="ghost" icon="chevron-right" class="size-7" @click="next" />
           </div>
         </div>
 
         <!-- Calendar -->
         <div class="p-2">
           <div v-if="view === 'date'" role="grid" aria-label="Calendar dates">
-            <div
-              class="flex items-center text-xs font-medium uppercase text-ink-gray-4 mb-1"
-            >
+            <div class="mb-1 flex items-center text-xs font-medium uppercase text-ink-gray-4">
               <div
                 v-for="d in ['S', 'M', 'T', 'W', 'T', 'F', 'S']"
                 :key="d"
@@ -108,12 +80,12 @@
                 v-for="dateObj in week"
                 type="button"
                 :key="dateObj.key"
-                class="flex h-8 w-8 items-center justify-center rounded cursor-pointer text-sm focus:outline-none focus:ring-2 focus:ring-outline-gray-2"
+                class="flex h-8 w-8 cursor-pointer items-center justify-center rounded text-sm focus:outline-none focus:ring-2 focus:ring-outline-gray-2"
                 :class="[
                   dateObj.inMonth ? 'text-ink-gray-8' : 'text-ink-gray-3',
                   dateObj.isToday ? 'font-extrabold text-ink-gray-9' : '',
                   dateObj.disabled
-                    ? 'opacity-30 cursor-not-allowed hover:bg-transparent'
+                    ? 'cursor-not-allowed opacity-30 hover:bg-transparent'
                     : dateObj.isSelected
                       ? 'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6'
                       : 'hover:bg-surface-gray-2',
@@ -121,14 +93,10 @@
                 role="gridcell"
                 :aria-selected="dateObj.isSelected ? 'true' : 'false'"
                 :aria-label="
-                  dateObj.date.format('YYYY-MM-DD') +
-                  (dateObj.isToday ? ' (Today)' : '')
+                  dateObj.date.format('YYYY-MM-DD') + (dateObj.isToday ? ' (Today)' : '')
                 "
                 :disabled="dateObj.disabled"
-                @click="
-                  !dateObj.disabled &&
-                  handleDateCellClick(dateObj.date, togglePopover)
-                "
+                @click="!dateObj.disabled && handleDateCellClick(dateObj.date, togglePopover)"
               >
                 {{ dateObj.date.date() }}
               </button>
@@ -144,10 +112,9 @@
               v-for="(m, i) in months"
               type="button"
               :key="m"
-              class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
+              class="focus:ring-brand-6 cursor-pointer rounded py-2 text-center text-sm hover:bg-surface-gray-2 focus:outline-none focus:ring-2"
               :class="{
-                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
-                  i === currentMonth,
+                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6': i === currentMonth,
               }"
               :aria-selected="i === currentMonth ? 'true' : 'false'"
               @click="selectMonth(i)"
@@ -155,20 +122,14 @@
               {{ m.slice(0, 3) }}
             </button>
           </div>
-          <div
-            v-else
-            class="grid grid-cols-3 gap-1"
-            role="grid"
-            aria-label="Select year"
-          >
+          <div v-else class="grid grid-cols-3 gap-1" role="grid" aria-label="Select year">
             <button
               v-for="y in yearRange"
               type="button"
               :key="y"
-              class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
+              class="focus:ring-brand-6 cursor-pointer rounded py-2 text-center text-sm hover:bg-surface-gray-2 focus:outline-none focus:ring-2"
               :class="{
-                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
-                  y === currentYear,
+                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6': y === currentYear,
               }"
               :aria-selected="y === currentYear ? 'true' : 'false'"
               @click="selectYear(y)"
@@ -192,21 +153,10 @@
         </div>
 
         <!-- Footer Actions (clearable variant) -->
-        <div
-          v-if="props.clearable"
-          class="flex items-center justify-between gap-1 p-2 border-t"
-        >
+        <div v-if="props.clearable" class="flex items-center justify-between gap-1 border-t p-2">
           <div class="flex gap-1">
-            <Button
-              variant="outline"
-              :label="'Now'"
-              @click="() => handleNowClick(togglePopover)"
-            />
-            <Button
-              variant="outline"
-              :label="'Tomorrow'"
-              @click="() => handleTomorrowClick()"
-            />
+            <Button variant="outline" :label="'Now'" @click="() => handleNowClick(togglePopover)" />
+            <Button variant="outline" :label="'Tomorrow'" @click="() => handleTomorrowClick()" />
           </div>
           <Button
             v-if="selectedDate"
@@ -222,21 +172,18 @@
 </template>
 
 <script setup lang="ts">
+import type { Dayjs } from 'dayjs'
 import { ref, computed, watch, toRefs } from 'vue'
-import { Popover } from '../Popover'
+
+import { dayjs, dayjsLocal, dayjsSystem } from '../../utils/dayjs'
 import { Button } from '../Button'
-import { TextInput } from '../TextInput'
 // @ts-ignore - Vue SFC without explicit types
 import FeatherIcon from '../FeatherIcon.vue'
+import { Popover } from '../Popover'
+import { TextInput } from '../TextInput'
 import TimePicker from '../TimePicker/TimePicker.vue'
-import { dayjs, dayjsLocal, dayjsSystem } from '../../utils/dayjs'
+import type { DatePickerProps, DatePickerEmits, DatePickerViewMode as ViewMode } from './types'
 import { months, monthStart, generateWeeks, getDateValue } from './utils'
-import type { Dayjs } from 'dayjs'
-import type {
-  DatePickerProps,
-  DatePickerEmits,
-  DatePickerViewMode as ViewMode,
-} from './types'
 
 interface ExtraDateTimeProps {
   minDateTime?: string
@@ -244,22 +191,19 @@ interface ExtraDateTimeProps {
   allowCustomTime?: boolean
 }
 
-const props = withDefaults(
-  defineProps<DatePickerProps & ExtraDateTimeProps>(),
-  {
-    value: '',
-    modelValue: '',
-    placement: 'bottom-start',
-    variant: 'subtle',
-    placeholder: 'Select date & time',
-    readonly: false,
-    allowCustom: true,
-    autoClose: true,
-    disabled: false,
-    clearable: true,
-    allowCustomTime: true,
-  },
-)
+const props = withDefaults(defineProps<DatePickerProps & ExtraDateTimeProps>(), {
+  value: '',
+  modelValue: '',
+  placement: 'bottom-start',
+  variant: 'subtle',
+  placeholder: 'Select date & time',
+  readonly: false,
+  allowCustom: true,
+  autoClose: true,
+  disabled: false,
+  clearable: true,
+  allowCustomTime: true,
+})
 const emit = defineEmits<DatePickerEmits>()
 
 const { autoClose } = toRefs(props)
@@ -424,26 +368,18 @@ function dateDisabled(d: Dayjs): boolean {
 }
 
 const weeks = computed<any[][]>(() => {
-  const base = generateWeeks(
-    currentYear.value,
-    currentMonth.value,
-    selectedDate.value,
-  )
-  return base.map((week) =>
-    week.map((obj) => ({ ...obj, disabled: dateDisabled(obj.date) })),
-  )
+  const base = generateWeeks(currentYear.value, currentMonth.value, selectedDate.value)
+  return base.map((week) => week.map((obj) => ({ ...obj, disabled: dateDisabled(obj.date) })))
 })
 
 const computedMinTime = computed<string>(() => {
   if (!minDT.value || !selectedDate.value) return ''
-  if (dayjs(selectedDate.value).isSame(minDT.value, 'day'))
-    return minDT.value.format('HH:mm:ss')
+  if (dayjs(selectedDate.value).isSame(minDT.value, 'day')) return minDT.value.format('HH:mm:ss')
   return ''
 })
 const computedMaxTime = computed<string>(() => {
   if (!maxDT.value || !selectedDate.value) return ''
-  if (dayjs(selectedDate.value).isSame(maxDT.value, 'day'))
-    return maxDT.value.format('HH:mm:ss')
+  if (dayjs(selectedDate.value).isSame(maxDT.value, 'day')) return maxDT.value.format('HH:mm:ss')
   return ''
 })
 
@@ -474,10 +410,7 @@ function selectYear(y: number): void {
 }
 function prev(): void {
   if (view.value === 'date') {
-    const m = monthStart(currentYear.value, currentMonth.value).subtract(
-      1,
-      'month',
-    )
+    const m = monthStart(currentYear.value, currentMonth.value).subtract(1, 'month')
     currentYear.value = m.year()
     currentMonth.value = m.month()
   } else if (view.value === 'month') currentYear.value -= 1
@@ -491,10 +424,7 @@ function next(): void {
   } else if (view.value === 'month') currentYear.value += 1
   else currentYear.value += 12
 }
-function handleDateCellClick(
-  date: string | Date | Dayjs,
-  togglePopover: () => void,
-) {
+function handleDateCellClick(date: string | Date | Dayjs, togglePopover: () => void) {
   selectDate(date)
   emitChange(true, togglePopover)
   isTyping.value = false
@@ -561,9 +491,7 @@ function handleClose() {
   }
 }
 
-const yearRangeStart = computed(
-  () => currentYear.value - (currentYear.value % 12),
-)
+const yearRangeStart = computed(() => currentYear.value - (currentYear.value % 12))
 const yearRange = computed<number[]>(() =>
   Array.from({ length: 12 }, (_, i) => yearRangeStart.value + i),
 )
diff --git a/src/components/DatePicker/stories/DateTime.vue b/src/components/DatePicker/stories/DateTime.vue
index 6b0cc9af3..085374325 100644
--- a/src/components/DatePicker/stories/DateTime.vue
+++ b/src/components/DatePicker/stories/DateTime.vue
@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { DateTimePicker } from 'frappe-ui'
+import { ref } from 'vue'
 
 const value = ref('')
 </script>
 
 <template>
-  <DateTimePicker
-    v-model="value"
-    placeholder="Select Date & time"
-    label="Label"
-  />
+  <DateTimePicker v-model="value" placeholder="Select Date & time" label="Label" />
 
   <div class="mt-2 text-sm text-gray-600">Selected: {{ value || 'None' }}</div>
 </template>
diff --git a/src/components/DatePicker/stories/Examples.vue b/src/components/DatePicker/stories/Examples.vue
index 7c4c4e56c..e6da44110 100644
--- a/src/components/DatePicker/stories/Examples.vue
+++ b/src/components/DatePicker/stories/Examples.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { DatePicker } from 'frappe-ui'
+import { ref } from 'vue'
 
 const value = ref('')
 </script>
diff --git a/src/components/DatePicker/stories/Range.vue b/src/components/DatePicker/stories/Range.vue
index 1e3cefade..7fda47359 100644
--- a/src/components/DatePicker/stories/Range.vue
+++ b/src/components/DatePicker/stories/Range.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { DateRangePicker } from 'frappe-ui'
+import { ref } from 'vue'
 
 const value = ref('')
 </script>
diff --git a/src/components/DatePicker/useDatePicker.ts b/src/components/DatePicker/useDatePicker.ts
index 18741ad6b..55b058b18 100644
--- a/src/components/DatePicker/useDatePicker.ts
+++ b/src/components/DatePicker/useDatePicker.ts
@@ -1,4 +1,5 @@
 import { computed, ref } from 'vue'
+
 import { getDate, getDatesAfter, getDaysInMonth } from './utils'
 
 export function useDatePicker() {
@@ -24,12 +25,7 @@ export function useDatePicker() {
     const daysInMonth = getDaysInMonth(monthIndex, year)
     const datesInMonth = getDatesAfter(firstDayOfMonth, daysInMonth - 1)
 
-    let dates = [
-      ...leftPadding,
-      firstDayOfMonth,
-      ...datesInMonth,
-      ...rightPadding,
-    ]
+    let dates = [...leftPadding, firstDayOfMonth, ...datesInMonth, ...rightPadding]
 
     if (dates.length < 42) {
       const lastDate = dates.at(-1)
diff --git a/src/components/DatePicker/utils.ts b/src/components/DatePicker/utils.ts
index dd146876b..07b961f17 100644
--- a/src/components/DatePicker/utils.ts
+++ b/src/components/DatePicker/utils.ts
@@ -1,5 +1,6 @@
-import { dayjs, dayjsLocal } from '../../utils/dayjs'
 import type { Dayjs } from 'dayjs'
+
+import { dayjs, dayjsLocal } from '../../utils/dayjs'
 import type { DatePickerDateObj as DateObj } from './types'
 
 // Constant list of month labels
@@ -24,11 +25,7 @@ export function monthStart(year: number, monthIndex: number): Dayjs {
 }
 
 // Build weeks grid for the calendar
-export function generateWeeks(
-  year: number,
-  monthIndex: number,
-  selected: string,
-): DateObj[][] {
+export function generateWeeks(year: number, monthIndex: number, selected: string): DateObj[][] {
   const start = monthStart(year, monthIndex).startOf('week')
   const end = monthStart(year, monthIndex).endOf('month').endOf('week')
   const days: DateObj[] = []
@@ -76,17 +73,13 @@ function getDatesAfter(date: Date, count: number) {
   const dates: Date[] = []
 
   while (count) {
-    date = getDate(
-      date.getFullYear(),
-      date.getMonth(),
-      date.getDate() + incrementer,
-    )
+    date = getDate(date.getFullYear(), date.getMonth(), date.getDate() + incrementer)
     dates.push(date)
     count--
   }
 
   if (incrementer === -1) {
-    return dates.reverse()
+    return dates.toReversed()
   }
   return dates
 }
diff --git a/src/components/Dialog/Dialog.cy.ts b/src/components/Dialog/Dialog.cy.ts
index 6075db11a..47613598e 100644
--- a/src/components/Dialog/Dialog.cy.ts
+++ b/src/components/Dialog/Dialog.cy.ts
@@ -1,6 +1,7 @@
 import { ref, h } from 'vue'
-import Dialog from './Dialog.vue'
+
 import Button from '../Button/Button.vue'
+import Dialog from './Dialog.vue'
 
 describe('Dialog', () => {
   it('test modal', () => {
@@ -15,23 +16,19 @@ describe('Dialog', () => {
       render() {
         return [
           h('main', [
-            h(
-              Button,
-              { onClick: () => (this.open = true) },
-              () => 'Show Modal Dialog',
-            ),
+            h(Button, { onClick: () => (this.open = true) }, () => 'Show Modal Dialog'),
 
             h(Dialog, {
               onClose,
               onAfterLeave,
-              modelValue: this.open,
+              'modelValue': this.open,
               'onUpdate:modelValue': (value) => {
                 this.open = value
                 onUpdate(value)
               },
-              disableOutsideClickToClose: false,
+              'disableOutsideClickToClose': false,
 
-              options: {
+              'options': {
                 title: 'Modal Dialog',
                 message: 'This dialog cannot be closed by clicking outside.',
                 actions: [{ label: 'Close', variant: 'solid' }],
@@ -67,19 +64,11 @@ describe('Dialog', () => {
         modelValue: true,
       },
       slots: {
-        'body-header': h(
-          'div',
-          { 'data-cy': 'body-header' },
-          'some body header',
-        ),
+        'body-header': h('div', { 'data-cy': 'body-header' }, 'some body header'),
 
-        'body-content': h(
-          'div',
-          { 'data-cy': 'body-content' },
-          'some body content',
-        ),
+        'body-content': h('div', { 'data-cy': 'body-content' }, 'some body content'),
 
-        actions: h('div', { 'data-cy': 'actions' }, 'some actions'),
+        'actions': h('div', { 'data-cy': 'actions' }, 'some actions'),
       },
     })
 
diff --git a/src/components/Dialog/Dialog.vue b/src/components/Dialog/Dialog.vue
index eb4964363..54e677367 100644
--- a/src/components/Dialog/Dialog.vue
+++ b/src/components/Dialog/Dialog.vue
@@ -2,7 +2,7 @@
   <DialogRoot v-model:open="isOpen" @update:open="handleOpenChange">
     <DialogPortal>
       <DialogOverlay
-        class="fixed inset-0 bg-black-overlay-200 dark:bg-black-overlay-700 overflow-y-auto dialog-overlay outline-none"
+        class="dialog-overlay fixed inset-0 overflow-y-auto bg-black-overlay-200 outline-none dark:bg-black-overlay-700"
         :data-dialog="options.title"
         @after-leave="$emit('after-leave')"
       >
@@ -12,7 +12,7 @@
           :style="dialogPositionStyles"
         >
           <DialogContent
-            class="my-8 inline-block w-full transform overflow-hidden rounded-xl bg-surface-modal text-left align-middle shadow-xl dialog-content focus-visible:outline-none"
+            class="dialog-content my-8 inline-block w-full transform overflow-hidden rounded-xl bg-surface-modal text-left align-middle shadow-xl focus-visible:outline-none"
             :class="{
               'max-w-7xl': options.size === '7xl',
               'max-w-6xl': options.size === '6xl',
@@ -57,9 +57,7 @@
                             </div>
                             <DialogTitle as="header">
                               <slot name="body-title">
-                                <h3
-                                  class="text-2xl font-semibold leading-6 text-ink-gray-9"
-                                >
+                                <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
                                   {{ options.title || 'Untitled' }}
                                 </h3>
                               </slot>
@@ -86,10 +84,7 @@
                   </div>
                 </div>
               </slot>
-              <div
-                class="px-4 pb-7 pt-4 sm:px-6"
-                v-if="actions.length || $slots.actions"
-              >
+              <div class="px-4 pb-7 pt-4 sm:px-6" v-if="actions.length || $slots.actions">
                 <slot name="actions" v-bind="{ close }">
                   <div class="space-y-2">
                     <Button
@@ -123,15 +118,11 @@ import {
   DialogClose,
 } from 'reka-ui'
 import { computed, reactive } from 'vue'
+import LucideX from '~icons/lucide/x'
+
 import { Button } from '../Button'
 import FeatherIcon from '../FeatherIcon.vue'
-import LucideX from '~icons/lucide/x'
-import type {
-  DialogProps,
-  DialogIcon,
-  DialogAction,
-  DialogActionContext,
-} from './types'
+import type { DialogProps, DialogIcon, DialogAction, DialogActionContext } from './types'
 
 // Type for dialog action with reactive loading state
 type ReactiveDialogAction = DialogAction & {
@@ -170,8 +161,7 @@ const actions = computed((): ReactiveDialogAction[] => {
               if (action.onClick) {
                 // deprecated: uncomment this when we remove the backwards compatibility
                 // let context: DialogActionContext = { close }
-                type BackwardsCompatibleDialogActionContext = (() => void) &
-                  DialogActionContext
+                type BackwardsCompatibleDialogActionContext = (() => void) & DialogActionContext
 
                 let backwardsCompatibleContext = (() => {
                   console.warn(
@@ -265,7 +255,7 @@ const dialogIconClasses = computed(() => {
 
 const slots = defineSlots<{
   /** Main body content of the dialog, overrides body-header and body-content */
-  body?: () => any
+  'body'?: () => any
 
   /** Header section inside the dialog body */
   'body-header'?: () => any
@@ -277,7 +267,7 @@ const slots = defineSlots<{
   'body-content'?: () => any
 
   /** Actions section at the bottom of the dialog; exposes `{ close }` */
-  actions?: (scope: { close: () => void }) => any
+  'actions'?: (scope: { close: () => void }) => any
 }>()
 </script>
 
diff --git a/src/components/Dialog/index.ts b/src/components/Dialog/index.ts
index d8e470c0a..a8bde513b 100644
--- a/src/components/Dialog/index.ts
+++ b/src/components/Dialog/index.ts
@@ -1,5 +1,6 @@
-import DialogMain from './Dialog.vue'
 import { DialogTitle, DialogDescription } from 'reka-ui'
+
+import DialogMain from './Dialog.vue'
 export type { DialogProps } from './types'
 
 type DialogExport = typeof DialogMain & {
diff --git a/src/components/Dialog/stories/Confirm.vue b/src/components/Dialog/stories/Confirm.vue
index 07f3cb5f8..ee7bf8564 100644
--- a/src/components/Dialog/stories/Confirm.vue
+++ b/src/components/Dialog/stories/Confirm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Button, Dialog } from 'frappe-ui'
+import { ref } from 'vue'
 
 const open = ref(false)
 </script>
@@ -10,17 +10,13 @@ const open = ref(false)
 
   <Dialog v-model="open">
     <template #body-title>
-      <h3 class="text-2xl font-semibold text-blue-600">
-        Custom Title with Styling
-      </h3>
+      <h3 class="text-2xl font-semibold text-blue-600">Custom Title with Styling</h3>
     </template>
 
     <template #body-content>
       <div class="space-y-4">
-        <p class="text-gray-700">
-          This dialog uses custom slots for flexible content layout.
-        </p>
-        <div class="bg-blue-50 p-4 rounded-lg">
+        <p class="text-gray-700">This dialog uses custom slots for flexible content layout.</p>
+        <div class="rounded-lg bg-blue-50 p-4">
           <p class="text-blue-800">
             You can put any content here including forms or other components.
           </p>
diff --git a/src/components/Dialog/stories/Custom.vue b/src/components/Dialog/stories/Custom.vue
index 98bb04a47..ee7bf8564 100644
--- a/src/components/Dialog/stories/Custom.vue
+++ b/src/components/Dialog/stories/Custom.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { Button, Dialog } from "frappe-ui";
+import { Button, Dialog } from 'frappe-ui'
+import { ref } from 'vue'
 
-const open = ref(false);
+const open = ref(false)
 </script>
 
 <template>
@@ -10,17 +10,13 @@ const open = ref(false);
 
   <Dialog v-model="open">
     <template #body-title>
-      <h3 class="text-2xl font-semibold text-blue-600">
-        Custom Title with Styling
-      </h3>
+      <h3 class="text-2xl font-semibold text-blue-600">Custom Title with Styling</h3>
     </template>
 
     <template #body-content>
       <div class="space-y-4">
-        <p class="text-gray-700">
-          This dialog uses custom slots for flexible content layout.
-        </p>
-        <div class="bg-blue-50 p-4 rounded-lg">
+        <p class="text-gray-700">This dialog uses custom slots for flexible content layout.</p>
+        <div class="rounded-lg bg-blue-50 p-4">
           <p class="text-blue-800">
             You can put any content here including forms or other components.
           </p>
diff --git a/src/components/Dialog/stories/Interactive.vue b/src/components/Dialog/stories/Interactive.vue
index 3203000e1..569b7fec2 100644
--- a/src/components/Dialog/stories/Interactive.vue
+++ b/src/components/Dialog/stories/Interactive.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Button, Dialog, Dropdown } from 'frappe-ui'
+import { ref } from 'vue'
 import LucideChevronDown from '~icons/lucide/chevron-down'
 
 const open = ref(false)
@@ -32,7 +32,7 @@ const dropdownOptions = [
           </Button>
         </Dropdown>
 
-        <div class="bg-gray-50 p-4 rounded text-sm">
+        <div class="rounded bg-gray-50 p-4 text-sm">
           <strong>Selected:</strong> {{ selectedOption }}
         </div>
       </div>
diff --git a/src/components/Dialog/stories/Modal.vue b/src/components/Dialog/stories/Modal.vue
index 9eca86b8e..e97f295c5 100644
--- a/src/components/Dialog/stories/Modal.vue
+++ b/src/components/Dialog/stories/Modal.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { Button, Dialog } from "frappe-ui";
+import { Button, Dialog } from 'frappe-ui'
+import { ref } from 'vue'
 
-const open = ref(false);
+const open = ref(false)
 </script>
 
 <template>
@@ -13,8 +13,7 @@ const open = ref(false);
     :disable-outside-click-to-close="true"
     :options="{
       title: 'Modal Dialog',
-      message:
-        'This dialog cannot be closed by clicking outside.',
+      message: 'This dialog cannot be closed by clicking outside.',
       actions: [{ label: 'Close', variant: 'solid' }],
     }"
   />
diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts
index 2e7bca01b..c3c84d803 100644
--- a/src/components/Dialog/types.ts
+++ b/src/components/Dialog/types.ts
@@ -9,18 +9,7 @@ type DialogOptions = {
   title?: string
   message?: string
   // default size = 'lg'
-  size?:
-    | 'xs'
-    | 'sm'
-    | 'md'
-    | 'lg'
-    | 'xl'
-    | '2xl'
-    | '3xl'
-    | '4xl'
-    | '5xl'
-    | '6xl'
-    | '7xl'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl'
   icon?: DialogIcon | string
   actions?: Array<DialogAction>
   // default position = 'center'
diff --git a/src/components/Divider/Divider.vue b/src/components/Divider/Divider.vue
index ad718988a..07a7c3d5c 100644
--- a/src/components/Divider/Divider.vue
+++ b/src/components/Divider/Divider.vue
@@ -18,6 +18,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
+
 import { Button } from '../../index'
 import type { DividerProps } from './types'
 
diff --git a/src/components/Divider/index.ts b/src/components/Divider/index.ts
index eafa2264b..487643683 100644
--- a/src/components/Divider/index.ts
+++ b/src/components/Divider/index.ts
@@ -1,2 +1,2 @@
 export { default as Divider } from './Divider.vue'
-export type { DividerProps } from './types'
\ No newline at end of file
+export type { DividerProps } from './types'
diff --git a/src/components/Divider/types.ts b/src/components/Divider/types.ts
index 075de64b7..19b6cd0f4 100644
--- a/src/components/Divider/types.ts
+++ b/src/components/Divider/types.ts
@@ -9,4 +9,4 @@ export interface DividerProps {
   position?: 'start' | 'center' | 'end'
   flexItem?: boolean
   action?: DividerAction
-}
\ No newline at end of file
+}
diff --git a/src/components/Dropdown/Dropdown.cy.ts b/src/components/Dropdown/Dropdown.cy.ts
index 3b4217d14..18285efcb 100644
--- a/src/components/Dropdown/Dropdown.cy.ts
+++ b/src/components/Dropdown/Dropdown.cy.ts
@@ -1,6 +1,7 @@
-import Dropdown from './Dropdown.vue'
 import { h } from 'vue'
 
+import Dropdown from './Dropdown.vue'
+
 const options = [
   { label: 'Edit', icon: 'edit' },
   {
diff --git a/src/components/Dropdown/Dropdown.vue b/src/components/Dropdown/Dropdown.vue
index fd4fc3531..08f699c50 100644
--- a/src/components/Dropdown/Dropdown.vue
+++ b/src/components/Dropdown/Dropdown.vue
@@ -61,20 +61,11 @@
                 class="data-[disabled]:cursor-not-allowed"
               >
                 <slot v-if="$slots.item" name="item" v-bind="{ item, close }" />
-                <component
-                  v-else-if="item.component"
-                  :is="item.component"
-                  :active="false"
-                />
+                <component v-else-if="item.component" :is="item.component" :active="false" />
 
                 <DropdownMenuSub v-else-if="item.submenu">
                   <DropdownMenuSubTrigger as-child>
-                    <button
-                      :class="[
-                        cssClasses.submenuTrigger,
-                        getSubmenuBackgroundColor(item),
-                      ]"
-                    >
+                    <button :class="[cssClasses.submenuTrigger, getSubmenuBackgroundColor(item)]">
                       <FeatherIcon
                         v-if="item.icon && typeof item.icon === 'string'"
                         :name="item.icon"
@@ -101,10 +92,7 @@
                     </button>
                   </DropdownMenuSubTrigger>
                   <DropdownMenuPortal :to="portalTo">
-                    <DropdownMenuSubContent
-                      :class="cssClasses.dropdownContent"
-                      :side-offset="4"
-                    >
+                    <DropdownMenuSubContent :class="cssClasses.dropdownContent" :side-offset="4">
                       <div
                         v-for="submenuGroup in getSubmenuGroups(item.submenu)"
                         :key="submenuGroup.key"
@@ -116,39 +104,20 @@
                         >
                           {{ submenuGroup.group }}
                         </DropdownMenuLabel>
-                        <template
-                          v-for="subItem in submenuGroup.items"
-                          :key="subItem.label"
-                        >
-                          <div
-                            v-if="subItem.switch"
-                            :class="cssClasses.itemButton"
-                          >
+                        <template v-for="subItem in submenuGroup.items" :key="subItem.label">
+                          <div v-if="subItem.switch" :class="cssClasses.itemButton">
                             <FeatherIcon
-                              v-if="
-                                subItem.icon && typeof subItem.icon === 'string'
-                              "
+                              v-if="subItem.icon && typeof subItem.icon === 'string'"
                               :name="subItem.icon"
-                              :class="[
-                                cssClasses.itemIcon,
-                                getIconColor(subItem),
-                              ]"
+                              :class="[cssClasses.itemIcon, getIconColor(subItem)]"
                               aria-hidden="true"
                             />
                             <component
-                              :class="[
-                                cssClasses.itemIcon,
-                                getIconColor(subItem),
-                              ]"
+                              :class="[cssClasses.itemIcon, getIconColor(subItem)]"
                               v-else-if="subItem.icon"
                               :is="subItem.icon"
                             />
-                            <span
-                              :class="[
-                                cssClasses.itemLabel,
-                                getTextColor(subItem),
-                              ]"
-                            >
+                            <span :class="[cssClasses.itemLabel, getTextColor(subItem)]">
                               {{ subItem.label }}
                             </span>
                             <Switch
@@ -162,10 +131,7 @@
                           <DropdownMenuItem
                             v-else
                             as-child
-                            @select="
-                              (event: PointerEvent) =>
-                                handleItemClick(subItem, event)
-                            "
+                            @select="(event: PointerEvent) => handleItemClick(subItem, event)"
                             :disabled="subItem.disabled"
                             class="data-[disabled]:cursor-not-allowed"
                           >
@@ -176,28 +142,16 @@
                             />
                             <button
                               v-else
-                              :class="[
-                                cssClasses.itemButton,
-                                getBackgroundColor(subItem),
-                              ]"
+                              :class="[cssClasses.itemButton, getBackgroundColor(subItem)]"
                             >
                               <FeatherIcon
-                                v-if="
-                                  subItem.icon &&
-                                  typeof subItem.icon === 'string'
-                                "
+                                v-if="subItem.icon && typeof subItem.icon === 'string'"
                                 :name="subItem.icon"
-                                :class="[
-                                  cssClasses.itemIcon,
-                                  getIconColor(subItem),
-                                ]"
+                                :class="[cssClasses.itemIcon, getIconColor(subItem)]"
                                 aria-hidden="true"
                               />
                               <component
-                                :class="[
-                                  cssClasses.itemIcon,
-                                  getIconColor(subItem),
-                                ]"
+                                :class="[cssClasses.itemIcon, getIconColor(subItem)]"
                                 v-else-if="subItem.icon"
                                 :is="subItem.icon"
                               />
@@ -205,12 +159,7 @@
                                 v-else-if="groupHasIcons(submenuGroup)"
                                 :class="cssClasses.itemIconPlaceholder"
                               />
-                              <span
-                                :class="[
-                                  cssClasses.itemLabel,
-                                  getTextColor(subItem),
-                                ]"
-                              >
+                              <span :class="[cssClasses.itemLabel, getTextColor(subItem)]">
                                 {{ subItem.label }}
                               </span>
                             </button>
@@ -220,10 +169,7 @@
                     </DropdownMenuSubContent>
                   </DropdownMenuPortal>
                 </DropdownMenuSub>
-                <button
-                  v-else
-                  :class="[cssClasses.itemButton, getBackgroundColor(item)]"
-                >
+                <button v-else :class="[cssClasses.itemButton, getBackgroundColor(item)]">
                   <FeatherIcon
                     v-if="item.icon && typeof item.icon === 'string'"
                     :name="item.icon"
@@ -235,13 +181,8 @@
                     v-else-if="item.icon"
                     :is="item.icon"
                   />
-                  <div
-                    v-else-if="groupHasIcons(group)"
-                    :class="cssClasses.itemIconPlaceholder"
-                  />
-                  <span :class="[cssClasses.itemLabel, getTextColor(item)]"
-                    >{{ item.label }}
-                  </span>
+                  <div v-else-if="groupHasIcons(group)" :class="cssClasses.itemIconPlaceholder" />
+                  <span :class="[cssClasses.itemLabel, getTextColor(item)]">{{ item.label }} </span>
                 </button>
               </DropdownMenuItem>
             </template>
@@ -264,10 +205,12 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
 } from 'reka-ui'
-import { Button } from '../Button'
-import FeatherIcon from '../FeatherIcon.vue'
 import { ref, computed, useAttrs } from 'vue'
 import { useRouter } from 'vue-router'
+
+import { Button } from '../Button'
+import FeatherIcon from '../FeatherIcon.vue'
+import Switch from '../Switch/Switch.vue'
 import type {
   DropdownProps,
   DropdownOption,
@@ -275,7 +218,6 @@ import type {
   DropdownOptions,
   DropdownItem,
 } from './types'
-import Switch from '../Switch/Switch.vue'
 
 defineOptions({
   inheritAttrs: false,
@@ -338,9 +280,7 @@ const getSubmenuBackgroundColor = (item: DropdownItem) =>
   (item.theme === 'red' ? 'red-3' : 'gray-3')
 
 // Unified group processing for both main options and submenu options
-const processOptionsIntoGroups = (
-  options: DropdownOptions,
-): DropdownGroupOption[] => {
+const processOptionsIntoGroups = (options: DropdownOptions): DropdownGroupOption[] => {
   let groups: DropdownGroupOption[] = []
   let currentGroup: DropdownGroupOption | null = null
   let i = 0
@@ -415,8 +355,7 @@ const cssClasses = {
   chevronIcon: 'ml-auto h-4 w-4 flex-shrink-0',
 
   // Button classes
-  itemButton:
-    'group flex h-7 w-full items-center rounded px-2 text-base focus:outline-none',
+  itemButton: 'group flex h-7 w-full items-center rounded px-2 text-base focus:outline-none',
   submenuTrigger:
     'group flex h-7 w-full items-center rounded px-2 text-base text-ink-gray-6 focus:outline-none',
 }
@@ -434,11 +373,7 @@ const align = computed(() => {
 
 defineSlots<{
   /** Default slot for custom trigger content (receives `open`, `close`, and extra attrs) */
-  default?: (props: {
-    open: boolean
-    close: () => void
-    [key: string]: any
-  }) => any
+  default?: (props: { open: boolean; close: () => void; [key: string]: any }) => any
 
   /** Custom rendering for each dropdown item (receives `item` and `close`) */
   item?: (props: { item: DropdownOption; close: () => void }) => any
diff --git a/src/components/Dropdown/types.ts b/src/components/Dropdown/types.ts
index 0ff3b532e..8ea8cf729 100644
--- a/src/components/Dropdown/types.ts
+++ b/src/components/Dropdown/types.ts
@@ -1,6 +1,7 @@
-import { RouterLinkProps } from 'vue-router'
-import { ButtonProps } from '../Button'
 import { type Component } from 'vue'
+import type { RouterLinkProps } from 'vue-router'
+
+import type { ButtonProps } from '../Button'
 
 export type DropdownOption = {
   label: string
@@ -48,4 +49,3 @@ export interface DropdownProps {
   /** Teleport target for dropdown portal content */
   portalTo?: string | HTMLElement
 }
-
diff --git a/src/components/ErrorMessage/ErrorMessage.vue b/src/components/ErrorMessage/ErrorMessage.vue
index a3cc15376..72f672eba 100644
--- a/src/components/ErrorMessage/ErrorMessage.vue
+++ b/src/components/ErrorMessage/ErrorMessage.vue
@@ -9,6 +9,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+
 import type { ErrorMessageProps } from './types'
 
 const props = defineProps<ErrorMessageProps>()
diff --git a/src/components/ErrorMessage/index.ts b/src/components/ErrorMessage/index.ts
index ac91bd6d9..199af50fb 100644
--- a/src/components/ErrorMessage/index.ts
+++ b/src/components/ErrorMessage/index.ts
@@ -1,2 +1,2 @@
 export { default as ErrorMessage } from './ErrorMessage.vue'
-export type { ErrorMessageProps } from './types'
\ No newline at end of file
+export type { ErrorMessageProps } from './types'
diff --git a/src/components/ErrorMessage/stories/ErrorObject.vue b/src/components/ErrorMessage/stories/ErrorObject.vue
index 9d5faf3de..c0ab8cfac 100644
--- a/src/components/ErrorMessage/stories/ErrorObject.vue
+++ b/src/components/ErrorMessage/stories/ErrorObject.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ErrorMessage } from "frappe-ui";
+import { ErrorMessage } from 'frappe-ui'
 
-const error = new Error("There was an error");
+const error = new Error('There was an error')
 </script>
 
 <template>
diff --git a/src/components/ErrorMessage/stories/Examples.vue b/src/components/ErrorMessage/stories/Examples.vue
index 4d6eae1a0..f7824c068 100644
--- a/src/components/ErrorMessage/stories/Examples.vue
+++ b/src/components/ErrorMessage/stories/Examples.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { ErrorMessage } from 'frappe-ui'
+import { ref } from 'vue'
 
 const message = ref('Invalid value')
 </script>
diff --git a/src/components/FeatherIcon.vue b/src/components/FeatherIcon.vue
index 09900f4a7..d7e51615a 100644
--- a/src/components/FeatherIcon.vue
+++ b/src/components/FeatherIcon.vue
@@ -1,6 +1,6 @@
 <script>
-import { h, mergeProps } from 'vue'
 import feather from 'feather-icons'
+import { h, mergeProps } from 'vue'
 
 const validIcons = Object.keys(feather.icons)
 
@@ -12,9 +12,7 @@ export default {
       validator(value) {
         const valid = validIcons.includes(value)
         if (!valid) {
-          console.groupCollapsed(
-            '[frappe-ui] name property for feather-icon must be one of ',
-          )
+          console.groupCollapsed('[frappe-ui] name property for feather-icon must be one of ')
           console.dir(validIcons)
           console.groupEnd()
         }
@@ -40,16 +38,16 @@ export default {
       mergeProps(
         icon.attrs,
         {
-          fill: 'none',
-          stroke: 'currentColor',
-          color: this.color,
+          'fill': 'none',
+          'stroke': 'currentColor',
+          'color': this.color,
           'stroke-linecap': 'round',
           'stroke-linejoin': 'round',
           'stroke-width': this.strokeWidth,
-          width: null,
-          height: null,
-          class: [icon.attrs.class, 'shrink-0'],
-          innerHTML: icon.contents,
+          'width': null,
+          'height': null,
+          'class': [icon.attrs.class, 'shrink-0'],
+          'innerHTML': icon.contents,
         },
         this.$attrs,
       ),
diff --git a/src/components/FileUploader/FileUploader.vue b/src/components/FileUploader/FileUploader.vue
index fcb667b2d..524a94e03 100644
--- a/src/components/FileUploader/FileUploader.vue
+++ b/src/components/FileUploader/FileUploader.vue
@@ -1,12 +1,6 @@
 <template>
   <div>
-    <input
-      ref="input"
-      type="file"
-      :accept="fileTypes"
-      class="hidden"
-      @change="onFileAdd"
-    />
+    <input ref="input" type="file" :accept="fileTypes" class="hidden" @change="onFileAdd" />
     <slot
       v-bind="{
         file,
@@ -28,8 +22,8 @@
 </template>
 
 <script>
-import { Button } from '../Button'
 import FileUploadHandler from '../../utils/fileUploadHandler'
+import { Button } from '../Button'
 
 export default {
   name: 'FileUploader',
@@ -124,9 +118,7 @@ export default {
           if (error?.message) {
             errorMessage = error.message
           } else if (error?._server_messages) {
-            errorMessage = JSON.parse(
-              JSON.parse(error._server_messages)[0],
-            ).message
+            errorMessage = JSON.parse(JSON.parse(error._server_messages)[0]).message
           } else if (error?.exc) {
             errorMessage = JSON.parse(error.exc)[0].split('\n').slice(-2, -1)[0]
           }
diff --git a/src/components/FileUploader/stories/Examples.vue b/src/components/FileUploader/stories/Examples.vue
index abc8b40a9..964a23e19 100644
--- a/src/components/FileUploader/stories/Examples.vue
+++ b/src/components/FileUploader/stories/Examples.vue
@@ -11,11 +11,7 @@ const onSuccess = (file: File) => {
 </script>
 
 <template>
-  <FileUploader
-    :fileTypes="['image/*']"
-    :validateFile="validateFileFunction"
-    @success="onSuccess"
-  >
+  <FileUploader :fileTypes="['image/*']" :validateFile="validateFileFunction" @success="onSuccess">
     <template #default="{ uploading, progress, openFileSelector }">
       <Button @click="openFileSelector" :loading="uploading">
         {{ uploading ? `Uploading ${progress}%` : 'Upload Image' }}
diff --git a/src/components/FormControl/FormControl.story.vue b/src/components/FormControl/FormControl.story.vue
index 215e6f14b..593d90c08 100644
--- a/src/components/FormControl/FormControl.story.vue
+++ b/src/components/FormControl/FormControl.story.vue
@@ -1,32 +1,25 @@
 <script setup lang="ts">
-import Story from "@/components/Story.vue";
-import { reactive, ref } from "vue";
+import { Avatar, FormControl } from 'frappe-ui'
+import { reactive, ref } from 'vue'
 // import FeatherIcon from "../FeatherIcon.vue";
-import LucideSearch from "~icons/lucide/search";
-import { Avatar, FormControl } from "frappe-ui";
+import LucideSearch from '~icons/lucide/search'
+
+import Story from '@/components/Story.vue'
 
 const state = reactive({
-  size: "sm",
-  variant: "subtle",
-  placeholder: "Placeholder",
+  size: 'sm',
+  variant: 'subtle',
+  placeholder: 'Placeholder',
   disabled: false,
-  label: "Label",
-});
+  label: 'Label',
+})
 
-const inputValue = ref("");
-const selectValue = ref(null);
-const autocompleteValue = ref(null);
-const checkboxValue = ref(false);
+const inputValue = ref('')
+const selectValue = ref(null)
+const autocompleteValue = ref(null)
+const checkboxValue = ref(false)
 
-const inputTypes = [
-  "text",
-  "number",
-  "email",
-  "date",
-  "password",
-  "search",
-  "textarea",
-];
+const inputTypes = ['text', 'number', 'email', 'date', 'password', 'search', 'textarea']
 </script>
 
 <template>
@@ -38,13 +31,11 @@ const inputTypes = [
     <Story title="Select Input" :layout="{ width: 250 }">
       <FormControl
         type="select"
-        :options='
-          [
-            { label: "One", value: "1" },
-            { label: "Two", value: "2" },
-            { label: "Three", value: "3" },
-          ]
-        '
+        :options="[
+          { label: 'One', value: '1' },
+          { label: 'Two', value: '2' },
+          { label: 'Three', value: '3' },
+        ]"
         v-bind="state"
         v-model="selectValue"
       />
@@ -53,13 +44,11 @@ const inputTypes = [
     <Story title="Combobox Input" :layout="{ width: 250 }">
       <FormControl
         type="combobox"
-        :options='
-          [
-            { label: "One", value: "1" },
-            { label: "Two", value: "2" },
-            { label: "Three", value: "3" },
-          ]
-        '
+        :options="[
+          { label: 'One', value: '1' },
+          { label: 'Two', value: '2' },
+          { label: 'Three', value: '3' },
+        ]"
         v-bind="state"
         v-model="autocompleteValue"
       />
@@ -88,10 +77,7 @@ const inputTypes = [
     <Story title="Prefix Avatar" :layout="{ width: 250 }">
       <FormControl type="text" label="Label">
         <template #prefix>
-          <Avatar
-            size="sm"
-            image="https://avatars.githubusercontent.com/u/499550?s=60&v=4"
-          />
+          <Avatar size="sm" image="https://avatars.githubusercontent.com/u/499550?s=60&v=4" />
         </template>
       </FormControl>
     </Story>
diff --git a/src/components/FormControl/FormControl.vue b/src/components/FormControl/FormControl.vue
index 0ee30ce1b..a5f819dbc 100644
--- a/src/components/FormControl/FormControl.vue
+++ b/src/components/FormControl/FormControl.vue
@@ -1,38 +1,17 @@
 <template>
-  <div
-    v-if="type != 'checkbox'"
-    :class="['space-y-1.5', attrs.class]"
-    :style="attrs.style"
-  >
-    <FormLabel
-      v-if="label"
-      :label="label"
-      :size="size"
-      :id="id"
-      :required="required"
-    />
-    <Select
-      v-if="type === 'select'"
-      :id="id"
-      v-bind="{ ...controlAttrs, size, variant }"
-    >
+  <div v-if="type != 'checkbox'" :class="['space-y-1.5', attrs.class]" :style="attrs.style">
+    <FormLabel v-if="label" :label="label" :size="size" :id="id" :required="required" />
+    <Select v-if="type === 'select'" :id="id" v-bind="{ ...controlAttrs, size, variant }">
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
       </template>
     </Select>
-    <Combobox
-      v-else-if="type === 'combobox'"
-      :id="id"
-      v-bind="{ ...controlAttrs, variant }"
-    >
+    <Combobox v-else-if="type === 'combobox'" :id="id" v-bind="{ ...controlAttrs, variant }">
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
       </template>
     </Combobox>
-    <Autocomplete
-      v-else-if="type === 'autocomplete'"
-      v-bind="{ ...controlAttrs }"
-    >
+    <Autocomplete v-else-if="type === 'autocomplete'" v-bind="{ ...controlAttrs }">
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
       </template>
@@ -45,11 +24,7 @@
       :id="id"
       v-bind="{ ...controlAttrs, size, variant }"
     />
-    <TextInput
-      v-else
-      :id="id"
-      v-bind="{ ...controlAttrs, type, size, variant, required }"
-    >
+    <TextInput v-else :id="id" v-bind="{ ...controlAttrs, type, size, variant, required }">
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
       </template>
@@ -61,22 +36,19 @@
       <p v-if="description" :class="descriptionClasses">{{ description }}</p>
     </slot>
   </div>
-  <Checkbox
-    v-else
-    :id="id"
-    v-bind="{ ...controlAttrs, label, size, class: attrs.class }"
-  />
+  <Checkbox v-else :id="id" v-bind="{ ...controlAttrs, label, size, class: attrs.class }" />
 </template>
 <script setup lang="ts">
 import { useAttrs, computed } from 'vue'
+
 import { useId } from '../../utils/useId'
-import { TextInput } from '../TextInput'
-import { Select } from '../Select'
-import { Textarea } from '../Textarea'
-import { Checkbox } from '../Checkbox'
 import { Autocomplete } from '../Autocomplete'
+import { Checkbox } from '../Checkbox'
 import { Combobox } from '../Combobox'
 import FormLabel from '../FormLabel.vue'
+import { Select } from '../Select'
+import { Textarea } from '../Textarea'
+import { TextInput } from '../TextInput'
 import type { FormControlProps } from './types'
 
 const id = useId()
@@ -110,15 +82,15 @@ const descriptionClasses = computed(() => {
 
 defineSlots<{
   /** Custom content rendered before the input (prefix icon/content) */
-  prefix?: () => any
+  'prefix'?: () => any
   /** Custom content rendered after the input (suffix icon/content) */
-  suffix?: () => any
+  'suffix'?: () => any
   /** Custom description slot (replaces description prop) */
-  description?: () => any
+  'description'?: () => any
   /** Custom slot for autocomplete items prefix (if using Autocomplete type) */
   'item-prefix'?: (props: { item: any }) => any
   /** Default slot override for full input rendering */
-  default?: () => any
+  'default'?: () => any
 }>()
 </script>
 <script lang="ts">
diff --git a/src/components/FormLabel.vue b/src/components/FormLabel.vue
index 8b4c1a276..053304795 100644
--- a/src/components/FormLabel.vue
+++ b/src/components/FormLabel.vue
@@ -2,7 +2,7 @@
   <label class="block" :class="labelClasses" :for="id">
     {{ label }}
     <template v-if="required">
-      <span class="text-ink-red-3 select-none" aria-hidden="true">*</span>
+      <span class="select-none text-ink-red-3" aria-hidden="true">*</span>
       <span class="sr-only">(required)</span>
     </template>
   </label>
diff --git a/src/components/Input.vue b/src/components/Input.vue
index 92cd55986..dd82eb840 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -1,15 +1,9 @@
 <template>
   <label :class="[type == 'checkbox' ? 'flex' : 'block', $attrs.class]" :style="$attrs.style">
-    <span
-      v-if="label && type != 'checkbox'"
-      class="mb-2 block text-sm leading-4 text-gray-700"
-    >
+    <span v-if="label && type != 'checkbox'" class="mb-2 block text-sm leading-4 text-gray-700">
       {{ label }}
     </span>
-    <div
-      class="relative flex"
-      :class="{ 'items-center': isNormalInput || type == 'select' }"
-    >
+    <div class="relative flex" :class="{ 'items-center': isNormalInput || type == 'select' }">
       <FeatherIcon
         v-if="iconLeft && type != 'checkbox'"
         :name="iconLeft"
@@ -70,10 +64,7 @@
         </option>
       </select>
     </div>
-    <span
-      v-if="label && type == 'checkbox'"
-      class="ml-2 inline-block text-base leading-4"
-    >
+    <span v-if="label && type == 'checkbox'" class="ml-2 inline-block text-base leading-4">
       {{ label }}
     </span>
   </label>
@@ -195,14 +186,7 @@ export default {
         .filter(Boolean)
     },
     isNormalInput() {
-      return [
-        'text',
-        'number',
-        'checkbox',
-        'email',
-        'password',
-        'date',
-      ].includes(this.type)
+      return ['text', 'number', 'checkbox', 'email', 'password', 'date'].includes(this.type)
     },
   },
 }
diff --git a/src/components/KeyboardShortcut.vue b/src/components/KeyboardShortcut.vue
index 254ecff9d..a56a24b62 100644
--- a/src/components/KeyboardShortcut.vue
+++ b/src/components/KeyboardShortcut.vue
@@ -11,27 +11,25 @@
       <template v-for="(part, idx) in parsedParts" :key="idx + '-' + part.raw">
         <!-- Explicit modifier icons -->
         <span v-if="part.type === 'cmd'">
-          <LucideCommand class="w-3 h-3" aria-label="Command" />
+          <LucideCommand class="h-3 w-3" aria-label="Command" />
         </span>
         <span v-else-if="part.type === 'shift'">
-          <LucideShift class="w-3 h-3" aria-label="Shift" />
+          <LucideShift class="h-3 w-3" aria-label="Shift" />
         </span>
         <span v-else-if="part.type === 'alt'">
-          <LucideAlt class="w-3 h-3" aria-label="Option" />
+          <LucideAlt class="h-3 w-3" aria-label="Option" />
         </span>
         <!-- Non-modifier key -->
         <span v-else>
           <component
             v-if="iconFor(part)"
             :is="iconFor(part)"
-            class="w-3 h-3"
+            class="h-3 w-3"
             :aria-label="part.display"
           />
-          <span
-            v-else
-            class="font-mono leading-none tracking-wide uppercase text-[10px]"
-            >{{ part.display }}</span
-          >
+          <span v-else class="font-mono text-[10px] uppercase leading-none tracking-wide">{{
+            part.display
+          }}</span>
         </span>
         <!-- + separator (visually): hidden from screen readers because ariaLabel combines sequence -->
         <span
@@ -45,23 +43,21 @@
     <!-- Backward compatibility path (legacy boolean props + slot) -->
     <template v-else>
       <span v-if="ctrl || meta">
-        <LucideCommand v-if="isMac" class="w-3 h-3" aria-label="Command" />
+        <LucideCommand v-if="isMac" class="h-3 w-3" aria-label="Command" />
         <span v-else class="font-mono text-[10px] leading-none">Ctrl</span>
       </span>
-      <span v-if="shift"
-        ><LucideShift class="w-3 h-3" aria-label="Shift"
-      /></span>
-      <span v-if="alt"><LucideAlt class="w-3 h-3" aria-label="Option" /></span>
+      <span v-if="shift"><LucideShift class="h-3 w-3" aria-label="Shift" /></span>
+      <span v-if="alt"><LucideAlt class="h-3 w-3" aria-label="Option" /></span>
       <slot></slot>
     </template>
   </div>
   <!-- Alternative combos (equivalents) rendered alongside -->
   <template v-if="altCombos && altCombos.length">
-    <span class="inline-flex items-center gap-1 ml-1">
+    <span class="ml-1 inline-flex items-center gap-1">
       <div
         v-for="(alt, i) in altCombos"
         :key="'alt-' + i + alt"
-        class="inline-flex items-center gap-0.5 text-sm bg-surface-gray-2 rounded-sm text-ink-gray-5 py-0.5 px-1"
+        class="inline-flex items-center gap-0.5 rounded-sm bg-surface-gray-2 px-1 py-0.5 text-sm text-ink-gray-5"
         :aria-label="'Alternative shortcut ' + alt"
       >
         <!-- Pass primitive boolean, not Ref -->
@@ -72,21 +68,20 @@
 </template>
 <script setup lang="ts">
 import { computed } from 'vue'
-import LucideCommand from '~icons/lucide/command'
 import LucideShift from '~icons/lucide/arrow-big-up'
-import LucideAlt from '~icons/lucide/option'
-import IconArrowUp from '~icons/lucide/arrow-up'
 import IconArrowDown from '~icons/lucide/arrow-down'
 import IconArrowLeft from '~icons/lucide/arrow-left'
 import IconArrowRight from '~icons/lucide/arrow-right'
+import IconArrowUp from '~icons/lucide/arrow-up'
+import LucideCommand from '~icons/lucide/command'
 import IconEnter from '~icons/lucide/corner-down-left'
 import IconBackspace from '~icons/lucide/delete'
+import LucideAlt from '~icons/lucide/option'
 
 // Robust mac detection (navigator.platform deprecated)
 const isMac = computed(() => {
   if (typeof navigator === 'undefined') return false
-  const p =
-    (navigator as any).userAgentData?.platform || navigator.platform || ''
+  const p = (navigator as any).userAgentData?.platform || navigator.platform || ''
   if (/Mac|iPod|iPhone|iPad/i.test(p)) return true
   return /Mac OS X|Macintosh|iPhone|iPad|iPod/i.test(navigator.userAgent)
 })
@@ -123,9 +118,7 @@ const showPlus = computed<boolean>(() => props.showPlus)
 
 // Dynamic root styling based on bg prop
 const rootClasses = computed(() =>
-  props.bg
-    ? 'bg-surface-gray-2 rounded-sm text-ink-gray-5 py-0.5 px-1'
-    : 'text-ink-gray-4',
+  props.bg ? 'bg-surface-gray-2 rounded-sm text-ink-gray-5 py-0.5 px-1' : 'text-ink-gray-4',
 )
 
 // Normalize one combo string (e.g. Mod+Shift+K)
@@ -133,45 +126,45 @@ function parseCombo(raw?: string): Part[] {
   if (!raw) return []
   // Maps input token (lowercased) to a canonical type (modifier) or leaves as key.
   const aliasMap: Record<string, string> = {
-    mod: isMac.value ? 'cmd' : 'ctrl',
-    command: 'cmd',
-    cmd: 'cmd',
+    'mod': isMac.value ? 'cmd' : 'ctrl',
+    'command': 'cmd',
+    'cmd': 'cmd',
     '⌘': 'cmd',
-    control: 'ctrl',
-    ctrl: 'ctrl',
-    option: 'alt',
-    opt: 'alt',
-    alt: 'alt',
+    'control': 'ctrl',
+    'ctrl': 'ctrl',
+    'option': 'alt',
+    'opt': 'alt',
+    'alt': 'alt',
     '⌥': 'alt',
-    shift: 'shift',
+    'shift': 'shift',
     '⇧': 'shift',
-    meta: isMac.value ? 'cmd' : 'win',
-    win: 'win',
-    windows: 'win',
+    'meta': isMac.value ? 'cmd' : 'win',
+    'win': 'win',
+    'windows': 'win',
   }
   const keyMap: Record<string, string> = {
-    esc: 'Esc',
-    escape: 'Esc',
-    enter: '↵',
-    return: '↵',
-    space: 'Space',
+    'esc': 'Esc',
+    'escape': 'Esc',
+    'enter': '↵',
+    'return': '↵',
+    'space': 'Space',
     ' ': 'Space',
-    tab: 'Tab',
-    backspace: '⌫',
-    delete: '⌦',
-    del: '⌦',
-    up: '↑',
-    arrowup: '↑',
-    down: '↓',
-    arrowdown: '↓',
-    left: '←',
-    arrowleft: '←',
-    right: '→',
-    arrowright: '→',
-    pageup: 'PgUp',
-    pagedown: 'PgDn',
-    home: 'Home',
-    end: 'End',
+    'tab': 'Tab',
+    'backspace': '⌫',
+    'delete': '⌦',
+    'del': '⌦',
+    'up': '↑',
+    'arrowup': '↑',
+    'down': '↓',
+    'arrowdown': '↓',
+    'left': '←',
+    'arrowleft': '←',
+    'right': '→',
+    'arrowright': '→',
+    'pageup': 'PgUp',
+    'pagedown': 'PgDn',
+    'home': 'Home',
+    'end': 'End',
   }
 
   const result: Part[] = raw
@@ -222,8 +215,8 @@ const ariaLabel = computed(() => {
     '⌘': 'Command',
     '⇧': 'Shift',
     '⌥': 'Option',
-    Ctrl: 'Control',
-    Win: 'Windows',
+    'Ctrl': 'Control',
+    'Win': 'Windows',
     '↵': 'Enter',
     '⌫': 'Backspace',
     '⌦': 'Delete',
@@ -232,9 +225,7 @@ const ariaLabel = computed(() => {
     '←': 'Left Arrow',
     '→': 'Right Arrow',
   }
-  const seq = parsedParts.value
-    .map((p) => wordMap[p.display] || p.display)
-    .join(' + ')
+  const seq = parsedParts.value.map((p) => wordMap[p.display] || p.display).join(' + ')
   return 'Shortcut ' + seq
 })
 
diff --git a/src/components/ListFilter/FilterIcon.vue b/src/components/ListFilter/FilterIcon.vue
index 002168e06..adcf1c463 100644
--- a/src/components/ListFilter/FilterIcon.vue
+++ b/src/components/ListFilter/FilterIcon.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="16"
-    height="17"
-    viewBox="0 0 16 17"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M2 4.5H14"
       stroke="currentColor"
diff --git a/src/components/ListFilter/ListFilter.vue b/src/components/ListFilter/ListFilter.vue
index 3065429a3..9c81b4685 100644
--- a/src/components/ListFilter/ListFilter.vue
+++ b/src/components/ListFilter/ListFilter.vue
@@ -13,9 +13,7 @@
       </Button>
     </template>
     <template #body="{ close }">
-      <div
-        class="my-2 rounded-lg border border-gray-100 bg-surface-white shadow-xl"
-      >
+      <div class="my-2 rounded-lg border border-gray-100 bg-surface-white shadow-xl">
         <div class="min-w-[400px] p-2">
           <div
             v-if="filters.length"
@@ -25,9 +23,7 @@
             class="mb-3 flex items-center justify-between gap-2"
           >
             <div class="flex flex-1 items-center gap-2">
-              <div
-                class="w-13 flex-shrink-0 ps-2 text-end text-base text-ink-gray-5"
-              >
+              <div class="w-13 flex-shrink-0 ps-2 text-end text-base text-ink-gray-5">
                 {{ i == 0 ? 'Where' : 'And' }}
               </div>
               <div id="fieldname" class="!min-w-[140px] flex-1">
@@ -60,12 +56,7 @@
                 />
                 <component
                   v-else
-                  :is="
-                    getValueSelector(
-                      filter.field.fieldtype,
-                      filter.field.options,
-                    )
-                  "
+                  :is="getValueSelector(filter.field.fieldtype, filter.field.options)"
                   v-model="filter.value"
                   placeholder="Value"
                 />
@@ -75,10 +66,7 @@
               <Button variant="ghost" icon="x" @click="removeFilter(i)" />
             </div>
           </div>
-          <div
-            v-else
-            class="mb-3 flex h-7 items-center px-3 text-sm text-ink-gray-5"
-          >
+          <div v-else class="mb-3 flex h-7 items-center px-3 text-sm text-ink-gray-5">
             Empty - Choose a field to filter by
           </div>
           <div class="flex items-center justify-between gap-2">
@@ -116,25 +104,18 @@
 </template>
 
 <script setup>
-import { Autocomplete, FeatherIcon, FormControl } from '../../index'
 import { computed, h } from 'vue'
+
+import { Autocomplete, FeatherIcon, FormControl } from '../../index'
 import FilterIcon from './FilterIcon.vue'
 import NestedPopover from './NestedPopover.vue'
 import SearchComplete from './SearchComplete.vue'
 
-const typeCheck = ['Check']
+const typeCheck = new Set(['Check'])
 const typeLink = ['Link']
 const typeNumber = ['Float', 'Int']
 const typeSelect = ['Select']
-const typeString = [
-  'Data',
-  'Long Text',
-  'Small Text',
-  'Text Editor',
-  'Text',
-  'JSON',
-  'Code',
-]
+const typeString = ['Data', 'Long Text', 'Small Text', 'Text Editor', 'Text', 'JSON', 'Code']
 
 const emits = defineEmits(['update:modelValue'])
 const props = defineProps({
@@ -153,7 +134,7 @@ const fields = computed(() => {
     .filter((field) => {
       return (
         !field.is_virtual &&
-        (typeCheck.includes(field.fieldtype) ||
+        (typeCheck.has(field.fieldtype) ||
           typeLink.includes(field.fieldtype) ||
           typeNumber.includes(field.fieldtype) ||
           typeSelect.includes(field.fieldtype) ||
@@ -232,7 +213,7 @@ function getOperators(fieldtype) {
       ],
     )
   }
-  if (typeCheck.includes(fieldtype)) {
+  if (typeCheck.has(fieldtype)) {
     options.push(...[{ label: 'Equals', value: '=' }])
   }
   return options
@@ -242,7 +223,7 @@ function getDefaultOperator(fieldtype) {
   if (
     typeSelect.includes(fieldtype) ||
     typeLink.includes(fieldtype) ||
-    typeCheck.includes(fieldtype) ||
+    typeCheck.has(fieldtype) ||
     typeNumber.includes(fieldtype)
   ) {
     return '='
@@ -251,9 +232,8 @@ function getDefaultOperator(fieldtype) {
 }
 
 function getValueSelector(fieldtype, options) {
-  if (typeSelect.includes(fieldtype) || typeCheck.includes(fieldtype)) {
-    const _options =
-      fieldtype == 'Check' ? ['Yes', 'No'] : getSelectOptions(options)
+  if (typeSelect.includes(fieldtype) || typeCheck.has(fieldtype)) {
+    const _options = fieldtype == 'Check' ? ['Yes', 'No'] : getSelectOptions(options)
     return h(FormControl, {
       type: 'select',
       options: _options,
@@ -267,7 +247,7 @@ function getDefaultValue(field) {
   if (typeSelect.includes(field.fieldtype)) {
     return getSelectOptions(field.options)[0]
   }
-  if (typeCheck.includes(field.fieldtype)) {
+  if (typeCheck.has(field.fieldtype)) {
     return 'Yes'
   }
   return ''
diff --git a/src/components/ListFilter/NestedPopover.vue b/src/components/ListFilter/NestedPopover.vue
index 48e5b3d5e..8525ebeb0 100644
--- a/src/components/ListFilter/NestedPopover.vue
+++ b/src/components/ListFilter/NestedPopover.vue
@@ -11,12 +11,7 @@
       <slot name="target" v-bind="{ open }" />
     </PopoverButton>
     <div v-show="open">
-      <PopoverPanel
-        v-slot="{ open, close }"
-        ref="popover"
-        static
-        class="z-[100]"
-      >
+      <PopoverPanel v-slot="{ open, close }" ref="popover" static class="z-[100]">
         <slot name="body" v-bind="{ open, close }" />
       </PopoverPanel>
     </div>
diff --git a/src/components/ListFilter/SearchComplete.vue b/src/components/ListFilter/SearchComplete.vue
index 378cd8941..3af1c79fb 100644
--- a/src/components/ListFilter/SearchComplete.vue
+++ b/src/components/ListFilter/SearchComplete.vue
@@ -9,9 +9,10 @@
 </template>
 
 <script setup>
-import { Autocomplete, createListResource } from '../../index'
 import { computed, ref, watch } from 'vue'
 
+import { Autocomplete, createListResource } from '../../index'
+
 const props = defineProps({
   value: {
     type: String,
@@ -59,9 +60,7 @@ const r = createListResource({
   auto: true,
   fields: [props.labelField, props.searchField, props.valueField],
   onSuccess: () => {
-    selection.value = props.value
-      ? options.value.find((o) => o.value === props.value)
-      : null
+    selection.value = props.value ? options.value.find((o) => o.value === props.value) : null
   },
 })
 const options = computed(
diff --git a/src/components/ListView/ListEmptyState.vue b/src/components/ListView/ListEmptyState.vue
index 093f3c3ea..4286a57f4 100644
--- a/src/components/ListView/ListEmptyState.vue
+++ b/src/components/ListView/ListEmptyState.vue
@@ -1,9 +1,9 @@
 <template>
-  <div
-    class="flex h-full w-full flex-col items-center justify-center text-base"
-  >
+  <div class="flex h-full w-full flex-col items-center justify-center text-base">
     <slot>
-      <div class="text-xl font-medium text-ink-gray-8 mt-6">{{ list.options.emptyState.title }}</div>
+      <div class="mt-6 text-xl font-medium text-ink-gray-8">
+        {{ list.options.emptyState.title }}
+      </div>
       <div class="mt-1 text-base text-ink-gray-5">
         {{ list.options.emptyState.description }}
       </div>
@@ -18,6 +18,7 @@
 
 <script setup>
 import { inject } from 'vue'
+
 import { Button } from '../Button'
 
 const list = inject('list')
diff --git a/src/components/ListView/ListFooter.vue b/src/components/ListView/ListFooter.vue
index 611ed0ae4..3e102e062 100644
--- a/src/components/ListView/ListFooter.vue
+++ b/src/components/ListView/ListFooter.vue
@@ -9,11 +9,7 @@
       </slot>
       <slot name="right">
         <div class="flex items-center">
-          <Button
-            v-if="showLoadMore"
-            label="Load More"
-            @click="emit('loadMore')"
-          />
+          <Button v-if="showLoadMore" label="Load More" @click="emit('loadMore')" />
           <div v-if="showLoadMore" class="mx-3 h-[80%] border-l" />
           <div class="flex items-center gap-1 text-base text-ink-gray-5">
             <div>{{ options.rowCount || '0' }}</div>
@@ -26,9 +22,10 @@
   </div>
 </template>
 <script setup>
-import TabButtons from '../TabButtons/TabButtons.vue'
 import { ref, computed } from 'vue'
 
+import TabButtons from '../TabButtons/TabButtons.vue'
+
 const props = defineProps({
   modelValue: {
     type: Number,
diff --git a/src/components/ListView/ListGroupHeader.vue b/src/components/ListView/ListGroupHeader.vue
index 68b5cbfa8..c136ad0f6 100644
--- a/src/components/ListView/ListGroupHeader.vue
+++ b/src/components/ListView/ListGroupHeader.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="flex items-center">
-    <button
-      @click="toggleGroup"
-      class="ms-[3px] me-[11px] rounded p-1 hover:bg-surface-gray-2"
-    >
+    <button @click="toggleGroup" class="me-[11px] ms-[3px] rounded p-1 hover:bg-surface-gray-2">
       <DownSolid
         class="h-4 w-4 text-ink-gray-6 transition-transform duration-200"
         :class="[group.collapsed ? '-rotate-90' : '']"
@@ -26,6 +23,7 @@
 </template>
 <script setup>
 import { inject } from 'vue'
+
 import DownSolid from '../../../icons/DownSolidIcon.vue'
 
 const props = defineProps({
diff --git a/src/components/ListView/ListGroupRows.vue b/src/components/ListView/ListGroupRows.vue
index c805e8440..9fb0f76e0 100644
--- a/src/components/ListView/ListGroupRows.vue
+++ b/src/components/ListView/ListGroupRows.vue
@@ -11,9 +11,10 @@
   </div>
 </template>
 <script setup>
-import ListRow from './ListRow.vue'
 import { inject } from 'vue'
 
+import ListRow from './ListRow.vue'
+
 const props = defineProps({
   group: {
     type: Object,
diff --git a/src/components/ListView/ListGroups.vue b/src/components/ListView/ListGroups.vue
index cc7f32dbc..28931cc11 100644
--- a/src/components/ListView/ListGroups.vue
+++ b/src/components/ListView/ListGroups.vue
@@ -3,11 +3,7 @@
     <div v-for="group in list.rows" :key="group.group">
       <slot>
         <ListGroupHeader :group="group">
-          <slot
-            name="group-header"
-            v-if="$slots['group-header']"
-            v-bind="{ group }"
-          />
+          <slot name="group-header" v-if="$slots['group-header']" v-bind="{ group }" />
         </ListGroupHeader>
         <ListGroupRows :group="group" />
       </slot>
@@ -16,9 +12,10 @@
 </template>
 
 <script setup>
+import { inject } from 'vue'
+
 import ListGroupHeader from './ListGroupHeader.vue'
 import ListGroupRows from './ListGroupRows.vue'
-import { inject } from 'vue'
 
 const list = inject('list')
 </script>
diff --git a/src/components/ListView/ListHeader.vue b/src/components/ListView/ListHeader.vue
index bc129be9e..0657efbc1 100644
--- a/src/components/ListView/ListHeader.vue
+++ b/src/components/ListView/ListHeader.vue
@@ -2,10 +2,7 @@
   <div
     class="mb-2 grid items-center gap-4 rounded bg-surface-gray-2 p-2"
     :style="{
-      gridTemplateColumns: getGridTemplateColumns(
-        list.columns,
-        list.options.selectable,
-      ),
+      gridTemplateColumns: getGridTemplateColumns(list.columns, list.options.selectable),
     }"
   >
     <Checkbox
@@ -26,10 +23,11 @@
 </template>
 
 <script setup>
+import { inject } from 'vue'
+
 import Checkbox from '../Checkbox/Checkbox.vue'
 import ListHeaderItem from './ListHeaderItem.vue'
 import { getGridTemplateColumns } from './utils'
-import { inject } from 'vue'
 
 const emit = defineEmits(['columnWidthUpdated'])
 
diff --git a/src/components/ListView/ListHeaderItem.vue b/src/components/ListView/ListHeaderItem.vue
index 2d06dcf9b..de27bde6c 100644
--- a/src/components/ListView/ListHeaderItem.vue
+++ b/src/components/ListView/ListHeaderItem.vue
@@ -4,10 +4,7 @@
     class="group relative flex items-center"
     :class="item.align ? alignmentMap[item.align] : 'justify-between'"
   >
-    <div
-      class="flex items-center gap-2 truncate text-sm text-ink-gray-5"
-      :class="$attrs.class"
-    >
+    <div class="flex items-center gap-2 truncate text-sm text-ink-gray-5" :class="$attrs.class">
       <slot name="prefix" v-bind="{ item }" />
       <slot>
         <div class="truncate">
@@ -18,7 +15,7 @@
     </div>
     <slot v-if="list.options.resizeColumn" name="resizer" v-bind="{ item }">
       <div
-        class="flex h-4 absolute -right-2 w-2 cursor-col-resize justify-center"
+        class="absolute -right-2 flex h-4 w-2 cursor-col-resize justify-center"
         @mousedown="startResizing"
       >
         <div
@@ -31,10 +28,11 @@
 </template>
 
 <script setup>
-import { alignmentMap } from './utils'
 import { useDebounceFn } from '@vueuse/core'
 import { ref, computed, inject } from 'vue'
 
+import { alignmentMap } from './utils'
+
 const props = defineProps({
   item: {
     type: Object,
diff --git a/src/components/ListView/ListRow.vue b/src/components/ListView/ListRow.vue
index 194a5650f..07d0901b9 100644
--- a/src/components/ListView/ListRow.vue
+++ b/src/components/ListView/ListRow.vue
@@ -25,15 +25,12 @@
         class="grid items-center gap-4 px-2"
         :style="{
           height: rowHeight,
-          gridTemplateColumns: getGridTemplateColumns(
-            list.columns,
-            list.options.selectable
-          ),
+          gridTemplateColumns: getGridTemplateColumns(list.columns, list.options.selectable),
         }"
       >
         <div
           v-if="list.options.selectable"
-          class="w-fit pe-2 py-3 flex"
+          class="flex w-fit py-3 pe-2"
           @click.stop.prevent
           @dblclick.stop
         >
@@ -46,10 +43,7 @@
         <div
           v-for="(column, i) in list.columns"
           :key="column.key"
-          :class="[
-            alignmentMap[column.align],
-            i == 0 ? 'text-ink-gray-9' : 'text-ink-gray-7',
-          ]"
+          :class="[alignmentMap[column.align], i == 0 ? 'text-ink-gray-9' : 'text-ink-gray-7']"
         >
           <slot v-bind="{ idx: i, column, item: row[column.key], isActive }">
             <component
@@ -86,10 +80,11 @@
 </template>
 
 <script setup>
+import { computed, inject } from 'vue'
+
 import Checkbox from '../Checkbox/Checkbox.vue'
 import ListRowItem from './ListRowItem.vue'
 import { alignmentMap, getGridTemplateColumns } from './utils'
-import { computed, inject } from 'vue'
 
 const props = defineProps({
   row: {
@@ -101,8 +96,7 @@ const props = defineProps({
 const list = inject('list')
 
 const rowRoute = computed(
-  () =>
-    list.value.options.getRowRoute && list.value.options.getRowRoute(props.row)
+  () => list.value.options.getRowRoute && list.value.options.getRowRoute(props.row),
 )
 
 const isExternalRoute = computed(() => {
@@ -128,8 +122,7 @@ const getLinkBindings = () => {
 const isLastRow = computed(() => {
   if (!list.value.rows?.length) return false
   return (
-    list.value.rows[list.value.rows.length - 1][list.value.rowKey] ===
-    props.row[list.value.rowKey]
+    list.value.rows[list.value.rows.length - 1][list.value.rowKey] === props.row[list.value.rowKey]
   )
 })
 
@@ -137,9 +130,7 @@ const isSelected = computed(() => {
   return list.value.selections.has(props.row[list.value.rowKey])
 })
 const isActive = computed(
-  () =>
-    list.value.options.enableActive &&
-    list.value.activeRow.value === props.row.name
+  () => list.value.options.enableActive && list.value.activeRow.value === props.row.name,
 )
 
 const isHoverable = computed(() => {
@@ -155,23 +146,20 @@ const rowHeight = computed(() => {
 
 const roundedClass = computed(() => {
   if (!isSelected.value) return 'rounded'
-  const selections = [...list.value.selections]
-  let groups = list.value.rows[0]?.group
-    ? list.value.rows.map((k) => k.rows)
-    : [list.value.rows]
+  const selections = new Set([...list.value.selections])
+  let groups = list.value.rows[0]?.group ? list.value.rows.map((k) => k.rows) : [list.value.rows]
 
   for (let rows of groups) {
     let currentIndex = rows.findIndex((k) => k == props.row)
     if (currentIndex === -1) continue
-    let atBottom = !selections.includes(rows[currentIndex + 1]?.name)
-    let atTop = !selections.includes(rows[currentIndex - 1]?.name)
+    let atBottom = !selections.has(rows[currentIndex + 1]?.name)
+    let atTop = !selections.has(rows[currentIndex - 1]?.name)
     return (atBottom ? 'rounded-b ' : '') + (atTop ? 'rounded-t' : '')
   }
 })
 
 const onRowClick = (event) => {
-  if (list.value.options.onRowClick)
-    list.value.options.onRowClick(props.row, event)
+  if (list.value.options.onRowClick) list.value.options.onRowClick(props.row, event)
   if (list.value.activeRow.value === props.row.name) {
     list.value.activeRow.value = null
   } else {
@@ -186,9 +174,7 @@ const handleCheckboxClick = (event) => {
     const rows = list.value.rows.find((k) => k.group)
       ? list.value.rows.reduce((acc, curr) => acc.concat(curr.rows), [])
       : list.value.rows
-    const lastIndex = rows.findIndex(
-      (k) => lastSelected === k[list.value.rowKey]
-    )
+    const lastIndex = rows.findIndex((k) => lastSelected === k[list.value.rowKey])
     const curIndex = rows.findIndex((k) => value === k[list.value.rowKey])
     const start = Math.min(lastIndex, curIndex)
     const end = Math.max(lastIndex, curIndex)
diff --git a/src/components/ListView/ListRowItem.vue b/src/components/ListView/ListRowItem.vue
index 387a4c8d0..149aa2476 100644
--- a/src/components/ListView/ListRowItem.vue
+++ b/src/components/ListView/ListRowItem.vue
@@ -3,11 +3,7 @@
     <slot name="prefix">
       <component
         v-if="column.prefix"
-        :is="
-          typeof column.prefix === 'function'
-            ? column.prefix({ row })
-            : column.prefix
-        "
+        :is="typeof column.prefix === 'function' ? column.prefix({ row }) : column.prefix"
       />
     </slot>
     <Tooltip
@@ -28,6 +24,7 @@
 </template>
 <script setup>
 import { computed, inject } from 'vue'
+
 import { Tooltip } from '../../index'
 import { alignmentMap } from './utils'
 
@@ -57,9 +54,7 @@ const label = computed(() => {
 
 const tooltip = computed(() => {
   if (!list.value.options.showTooltip) return ''
-  return props.column.getTooltip
-    ? props.column.getTooltip(props.row)
-    : getValue(props.item).label
+  return props.column.getTooltip ? props.column.getTooltip(props.row) : getValue(props.item).label
 })
 
 function getValue(value) {
diff --git a/src/components/ListView/ListRows.vue b/src/components/ListView/ListRows.vue
index 767f75d76..5ab4e8470 100644
--- a/src/components/ListView/ListRows.vue
+++ b/src/components/ListView/ListRows.vue
@@ -7,8 +7,9 @@
 </template>
 
 <script setup>
-import ListRow from './ListRow.vue'
 import { inject } from 'vue'
 
+import ListRow from './ListRow.vue'
+
 const list = inject('list')
 </script>
diff --git a/src/components/ListView/ListSelectBanner.vue b/src/components/ListView/ListSelectBanner.vue
index 02a335857..8d02a48e7 100644
--- a/src/components/ListView/ListSelectBanner.vue
+++ b/src/components/ListView/ListSelectBanner.vue
@@ -7,10 +7,7 @@
     leave-from-class="opacity-100"
     leave-to-class="transform opacity-0"
   >
-    <div
-      v-if="list.selections.size"
-      class="absolute inset-x-0 bottom-6 mx-auto w-max text-base"
-    >
+    <div v-if="list.selections.size" class="absolute inset-x-0 bottom-6 mx-auto w-max text-base">
       <div
         class="flex min-w-[596px] items-center gap-3 rounded-lg bg-surface-white px-4 py-2 shadow-2xl"
         :class="$attrs.class"
@@ -23,15 +20,9 @@
             unselectAll: () => list.toggleAllRows(false),
           }"
         >
-          <div
-            class="flex flex-1 justify-between border-r border-outline-gray-2 text-ink-gray-9"
-          >
+          <div class="flex flex-1 justify-between border-r border-outline-gray-2 text-ink-gray-9">
             <div class="flex items-center gap-3">
-              <Checkbox
-                :modelValue="true"
-                :disabled="true"
-                class="text-ink-gray-9"
-              />
+              <Checkbox :modelValue="true" :disabled="true" class="text-ink-gray-9" />
               <div>{{ selectedText }}</div>
             </div>
             <div class="me-3">
@@ -56,11 +47,7 @@
             >
               Select all
             </Button>
-            <Button
-              icon="x"
-              variant="ghost"
-              @click="list.toggleAllRows(false)"
-            />
+            <Button icon="x" variant="ghost" @click="list.toggleAllRows(false)" />
           </div>
         </slot>
       </div>
@@ -69,10 +56,11 @@
 </template>
 
 <script setup>
-import Checkbox from '../Checkbox/Checkbox.vue'
-import { Button } from '../Button'
 import { computed, inject } from 'vue'
 
+import { Button } from '../Button'
+import Checkbox from '../Checkbox/Checkbox.vue'
+
 defineOptions({
   inheritAttrs: false,
 })
diff --git a/src/components/ListView/ListView.vue b/src/components/ListView/ListView.vue
index 7f5051716..96df76222 100644
--- a/src/components/ListView/ListView.vue
+++ b/src/components/ListView/ListView.vue
@@ -18,12 +18,13 @@
   </div>
 </template>
 <script setup>
+import { ref, reactive, computed, provide, watch, useSlots } from 'vue'
+
 import ListEmptyState from './ListEmptyState.vue'
+import ListGroups from './ListGroups.vue'
 import ListHeader from './ListHeader.vue'
 import ListRows from './ListRows.vue'
-import ListGroups from './ListGroups.vue'
 import ListSelectBanner from './ListSelectBanner.vue'
-import { ref, reactive, computed, provide, watch, useSlots } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
@@ -104,10 +105,7 @@ let _options = computed(() => {
 const allRowsSelected = computed(() => {
   if (!props.rows.length) return false
   if (showGroupedRows.value) {
-    return (
-      selections.size ===
-      props.rows.reduce((acc, row) => acc + row.rows.length, 0)
-    )
+    return selections.size === props.rows.reduce((acc, row) => acc + row.rows.length, 0)
   }
   return selections.size === props.rows.length
 })
@@ -117,9 +115,7 @@ const selectable = computed(() => {
 })
 
 let showGroupedRows = computed(() => {
-  return props.rows.every(
-    (row) => row.group && row.rows && Array.isArray(row.rows)
-  )
+  return props.rows.every((row) => row.group && row.rows && Array.isArray(row.rows))
 })
 
 function toggleRow(row) {
@@ -155,7 +151,7 @@ provide(
     slots: slots,
     toggleRow,
     toggleAllRows,
-  }))
+  })),
 )
 
 defineExpose({
diff --git a/src/components/ListView/stories/CellSlot.vue b/src/components/ListView/stories/CellSlot.vue
index 99b02e926..16f4c3529 100644
--- a/src/components/ListView/stories/CellSlot.vue
+++ b/src/components/ListView/stories/CellSlot.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { h, reactive } from 'vue'
 import { Avatar, Badge, ListView } from 'frappe-ui'
+import { h, reactive } from 'vue'
 
 const cols = reactive([
   {
@@ -8,8 +8,7 @@ const cols = reactive([
     key: 'name',
     width: 3,
     getLabel: ({ row }) => row.name,
-    prefix: ({ row }) =>
-      h(Avatar, { shape: 'circle', image: row.user_image, size: 'sm' }),
+    prefix: ({ row }) => h(Avatar, { shape: 'circle', image: row.user_image, size: 'sm' }),
   },
   { label: 'Email', key: 'email', width: '200px' },
   { label: 'Role', key: 'role' },
diff --git a/src/components/ListView/stories/CustomList.vue b/src/components/ListView/stories/CustomList.vue
index 5a8828a4c..3bcf15f7f 100644
--- a/src/components/ListView/stories/CustomList.vue
+++ b/src/components/ListView/stories/CustomList.vue
@@ -1,10 +1,4 @@
 <script setup>
-import { reactive } from 'vue'
-import LucideAtSign from '~icons/lucide/at-sign'
-import LucideCheckCircle from '~icons/lucide/check-circle'
-import LucideUsers from '~icons/lucide/users'
-import LucideUser from '~icons/lucide/user'
-
 import {
   Avatar,
   Badge,
@@ -17,6 +11,11 @@ import {
   ListSelectBanner,
   ListView,
 } from 'frappe-ui'
+import { reactive } from 'vue'
+import LucideAtSign from '~icons/lucide/at-sign'
+import LucideCheckCircle from '~icons/lucide/check-circle'
+import LucideUser from '~icons/lucide/user'
+import LucideUsers from '~icons/lucide/users'
 
 const custom_columns = reactive([
   // { label: "Name", key: "name", width: 3, icon: "user" },
@@ -67,23 +66,14 @@ const custom_rows = [
     row-key="id"
   >
     <ListHeader>
-      <ListHeaderItem
-        v-for="column in custom_columns"
-        :key="column.key"
-        :item="column"
-      >
+      <ListHeaderItem v-for="column in custom_columns" :key="column.key" :item="column">
         <template #prefix="{ item }">
           <component :is="item.icon" class="size-4" />
         </template>
       </ListHeaderItem>
     </ListHeader>
     <ListRows>
-      <ListRow
-        v-for="row in custom_rows"
-        :key="row.id"
-        v-slot="{ column, item }"
-        :row="row"
-      >
+      <ListRow v-for="row in custom_rows" :key="row.id" v-slot="{ column, item }" :row="row">
         <ListRowItem :item="item" :align="column.align">
           <template #prefix>
             <div
@@ -91,12 +81,7 @@ const custom_rows = [
               class="h-3 w-3 rounded-full"
               :class="item.bg_color"
             />
-            <Avatar
-              v-if="column.key === 'name'"
-              shape="circle"
-              :image="item.image"
-              size="sm"
-            />
+            <Avatar v-if="column.key === 'name'" shape="circle" :image="item.image" size="sm" />
           </template>
           <Badge
             v-if="column.key === 'role'"
diff --git a/src/components/ListView/stories/Empty.vue b/src/components/ListView/stories/Empty.vue
index 2ca63dc43..275747ae8 100644
--- a/src/components/ListView/stories/Empty.vue
+++ b/src/components/ListView/stories/Empty.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { h, reactive } from 'vue'
 import { Avatar, ListView } from 'frappe-ui'
+import { h, reactive } from 'vue'
 
 const cols = reactive([
   {
@@ -8,8 +8,7 @@ const cols = reactive([
     key: 'name',
     width: 3,
     getLabel: ({ row }) => row.name,
-    prefix: ({ row }) =>
-      h(Avatar, { shape: 'circle', image: row.user_image, size: 'sm' }),
+    prefix: ({ row }) => h(Avatar, { shape: 'circle', image: row.user_image, size: 'sm' }),
   },
   { label: 'Email', key: 'email', width: '200px' },
   { label: 'Role', key: 'role' },
diff --git a/src/components/ListView/stories/Examples.vue b/src/components/ListView/stories/Examples.vue
index 441c2a179..029d9f364 100644
--- a/src/components/ListView/stories/Examples.vue
+++ b/src/components/ListView/stories/Examples.vue
@@ -1,7 +1,6 @@
 <script setup>
-import { h, reactive } from 'vue'
-
 import { Avatar, ListView } from 'frappe-ui'
+import { h, reactive } from 'vue'
 
 const columns = reactive([
   {
@@ -9,8 +8,7 @@ const columns = reactive([
     key: 'name',
     width: 3,
     getLabel: ({ row }) => row.name,
-    prefix: ({ row }) =>
-      h(Avatar, { shape: 'circle', image: row.user_image, size: 'sm' }),
+    prefix: ({ row }) => h(Avatar, { shape: 'circle', image: row.user_image, size: 'sm' }),
   },
   { label: 'Email', key: 'email', width: '200px' },
   { label: 'Role', key: 'role' },
diff --git a/src/components/ListView/stories/GroupedRows.vue b/src/components/ListView/stories/GroupedRows.vue
index 4318629d7..dabc82e97 100644
--- a/src/components/ListView/stories/GroupedRows.vue
+++ b/src/components/ListView/stories/GroupedRows.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { reactive, ref } from 'vue'
 import { ListView } from 'frappe-ui'
+import { reactive, ref } from 'vue'
 
 const group_columns = reactive([
   { label: 'Name', key: 'name', width: 3 },
diff --git a/src/components/MonthPicker/MonthPicker.cy.ts b/src/components/MonthPicker/MonthPicker.cy.ts
index 850a8bb2e..56c70be64 100644
--- a/src/components/MonthPicker/MonthPicker.cy.ts
+++ b/src/components/MonthPicker/MonthPicker.cy.ts
@@ -8,19 +8,11 @@ describe('MonthPicker', () => {
     cy.mount(MonthPicker)
 
     cy.get('[role=dialog]').should('not.exist')
-    cy.get('[aria-haspopup="dialog"]').should(
-      'have.attr',
-      'aria-expanded',
-      'false',
-    )
+    cy.get('[aria-haspopup="dialog"]').should('have.attr', 'aria-expanded', 'false')
 
     cy.get('button').click()
 
-    cy.get('[aria-haspopup="dialog"]').should(
-      'have.attr',
-      'aria-expanded',
-      'true',
-    )
+    cy.get('[aria-haspopup="dialog"]').should('have.attr', 'aria-expanded', 'true')
     cy.get('[role=dialog]').should('exist')
   })
 
@@ -32,10 +24,7 @@ describe('MonthPicker', () => {
 
     cy.get('[aria-label="previous"]').click()
 
-    cy.get('[aria-label="Toggle view mode"]').should(
-      'have.text',
-      currentYear - 1,
-    )
+    cy.get('[aria-label="Toggle view mode"]').should('have.text', currentYear - 1)
 
     cy.get('[aria-label="next"]').click()
 
diff --git a/src/components/MonthPicker/MonthPicker.vue b/src/components/MonthPicker/MonthPicker.vue
index 8fbf3f547..2d651f83d 100644
--- a/src/components/MonthPicker/MonthPicker.vue
+++ b/src/components/MonthPicker/MonthPicker.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { MonthPickerProps } from './types'
-
-import Button from '../Button/Button.vue'
-import Popover from '../Popover/Popover.vue'
 import LucideCalender from '~icons/lucide/calendar'
 import LucideChevronLeft from '~icons/lucide/chevron-left'
 import LucideChevronRight from '~icons/lucide/chevron-right'
 
+import Button from '../Button/Button.vue'
+import Popover from '../Popover/Popover.vue'
+import type { MonthPickerProps } from './types'
+
 const props = withDefaults(defineProps<MonthPickerProps>(), {
   placeholder: 'Select month',
 })
 
 const viewMode = ref('month')
-const model = defineModel<String>({ default: '' })
+const model = defineModel<string>({ default: '' })
 
 const months = [
   'January',
@@ -32,16 +32,10 @@ const months = [
 
 const currentYear = ref(new Date().getFullYear())
 
-const yearRangeStart = computed(
-  () => currentYear.value - (currentYear.value % 12),
-)
-const yearRange = computed(() =>
-  Array.from({ length: 12 }, (_, i) => yearRangeStart.value + i),
-)
+const yearRangeStart = computed(() => currentYear.value - (currentYear.value % 12))
+const yearRange = computed(() => Array.from({ length: 12 }, (_, i) => yearRangeStart.value + i))
 
-const pickerList = computed(() =>
-  viewMode.value == 'year' ? yearRange.value : months,
-)
+const pickerList = computed(() => (viewMode.value == 'year' ? yearRange.value : months))
 
 const toggleViewMode = () => {
   viewMode.value = viewMode.value == 'year' ? 'month' : 'year'
@@ -63,42 +57,44 @@ const nextClick = () => {
 }
 
 const formatBtn = (v: string | number) =>
-  viewMode.value == 'month' ? (v as String).slice(0, 3) : v
+  viewMode.value == 'month' ? (v as string).slice(0, 3) : v
 
 const txtClass = computed(() => {
-  return model.value || props.disabled ? '': '!text-ink-gray-5' 
+  return model.value || props.disabled ? '' : '!text-ink-gray-5'
 })
 </script>
 
 <template>
-  <Popover
-    popover-class="mt-2 shadow-xl rounded-lg border bg-surface-modal p-2"
-  >
+  <Popover popover-class="mt-2 shadow-xl rounded-lg border bg-surface-modal p-2">
     <template #target="{ togglePopover, isOpen }">
-      <Button @click="togglePopover" class="w-full justify-between border" :class="txtClass"
-				:disabled="disabled" aria-haspopup="dialog" :aria-expanded="isOpen">
+      <Button
+        @click="togglePopover"
+        class="w-full justify-between border"
+        :class="txtClass"
+        :disabled="disabled"
+        aria-haspopup="dialog"
+        :aria-expanded="isOpen"
+      >
         {{ model || props.placeholder }}
         <template #suffix> <LucideCalender class="size-4" /> </template>
       </Button>
     </template>
 
     <template #body>
-      <div class="flex gap-2 justify-between">
-        <Button variant="ghost" @click="prevClick" label='previous'>
+      <div class="flex justify-between gap-2">
+        <Button variant="ghost" @click="prevClick" label="previous">
           <LucideChevronLeft class="size-4 text-ink-gray-5" />
         </Button>
 
         <!-- view toggler -->
-         <Button @click="toggleViewMode" label="Toggle view mode">
+        <Button @click="toggleViewMode" label="Toggle view mode">
           <template v-if="viewMode == 'month'">
             {{ model.split(' ')[1] ?? currentYear }}
           </template>
-          <template v-else>
-            {{ yearRangeStart }} - {{ yearRangeStart + 11 }}
-          </template>
+          <template v-else> {{ yearRangeStart }} - {{ yearRangeStart + 11 }} </template>
         </Button>
 
-        <Button variant="ghost" @click="nextClick" label='next'>
+        <Button variant="ghost" @click="nextClick" label="next">
           <LucideChevronRight class="size-4 text-ink-gray-5" />
         </Button>
       </div>
diff --git a/src/components/MonthPicker/index.ts b/src/components/MonthPicker/index.ts
index 995f7e7b8..3a082a008 100644
--- a/src/components/MonthPicker/index.ts
+++ b/src/components/MonthPicker/index.ts
@@ -1 +1 @@
-export { default as MonthPicker } from "./MonthPicker.vue";
+export { default as MonthPicker } from './MonthPicker.vue'
diff --git a/src/components/MonthPicker/stories/Example.vue b/src/components/MonthPicker/stories/Example.vue
index c51938fed..0675514f3 100644
--- a/src/components/MonthPicker/stories/Example.vue
+++ b/src/components/MonthPicker/stories/Example.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { MonthPicker } from "frappe-ui";
+import { MonthPicker } from 'frappe-ui'
+import { ref } from 'vue'
 
-const val = ref("");
+const val = ref('')
 </script>
 
 <template>
diff --git a/src/components/MonthPicker/types.ts b/src/components/MonthPicker/types.ts
index e436e9fa1..8f9e1eff3 100644
--- a/src/components/MonthPicker/types.ts
+++ b/src/components/MonthPicker/types.ts
@@ -1,7 +1,7 @@
 export interface MonthPickerProps {
-	/** Placeholder text shown when no value is selected */
-  placeholder?: string;
+  /** Placeholder text shown when no value is selected */
+  placeholder?: string
 
-	/** Disables the month picker */
-	disabled?: boolean;
+  /** Disables the month picker */
+  disabled?: boolean
 }
diff --git a/src/components/MultiSelect/MultiSelect.cy.ts b/src/components/MultiSelect/MultiSelect.cy.ts
index 43f7d09ac..e3d3cbdf8 100644
--- a/src/components/MultiSelect/MultiSelect.cy.ts
+++ b/src/components/MultiSelect/MultiSelect.cy.ts
@@ -1,6 +1,7 @@
-import MultiSelect from './MultiSelect.vue'
 import { h } from 'vue'
 
+import MultiSelect from './MultiSelect.vue'
+
 const options = [
   { label: 'Apple', value: 'apple' },
   { label: 'Banana', value: 'banana' },
@@ -26,10 +27,7 @@ describe('MultiSelect', () => {
     cy.get('[role=option]').eq(0).click()
     cy.get('[role=option]').eq(1).click()
 
-    cy.get('button:first').should(
-      'have.text',
-      options[0].label + ', ' + options[1].label + ' ',
-    )
+    cy.get('button:first').should('have.text', options[0].label + ', ' + options[1].label + ' ')
   })
 
   it('input', () => {
diff --git a/src/components/MultiSelect/MultiSelect.vue b/src/components/MultiSelect/MultiSelect.vue
index e46f1bc88..6c804fbe9 100644
--- a/src/components/MultiSelect/MultiSelect.vue
+++ b/src/components/MultiSelect/MultiSelect.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { MultiSelectOption, MultiSelectProps } from "./types";
-
 import {
   ComboboxContent,
   ComboboxEmpty,
@@ -10,34 +7,34 @@ import {
   ComboboxItemIndicator,
   ComboboxRoot,
   ComboboxViewport,
-} from "reka-ui";
+} from 'reka-ui'
+import { computed } from 'vue'
+import LucideCheck from '~icons/lucide/check'
+import LucideChevronDown from '~icons/lucide/chevron-down'
+import LucideX from '~icons/lucide/x'
 
-import LucideX from "~icons/lucide/x";
-import Button from "../Button/Button.vue";
-import Popover from "../Popover/Popover.vue";
-import LucideCheck from "~icons/lucide/check";
-import LoadingIndicator from "../LoadingIndicator.vue";
-import LucideChevronDown from "~icons/lucide/chevron-down";
+import Button from '../Button/Button.vue'
+import LoadingIndicator from '../LoadingIndicator.vue'
+import Popover from '../Popover/Popover.vue'
+import type { MultiSelectOption, MultiSelectProps } from './types'
 
 const props = withDefaults(defineProps<MultiSelectProps>(), {
-  placeholder: "Select option",
-});
+  placeholder: 'Select option',
+})
 
-const model = defineModel<String[]>({ default: [] });
+const model = defineModel<string[]>({ default: [] })
 
-const getValues = (arr: String[]) =>
-  arr.map((x) => props.options.find((y) => y.value === x)?.label);
+const getValues = (arr: string[]) => arr.map((x) => props.options.find((y) => y.value === x)?.label)
 
-const optionToStr = (options: MultiSelectOption[]) =>
-  options.map((x) => x.value);
+const optionToStr = (options: MultiSelectOption[]) => options.map((x) => x.value)
 
 const selectedOptions = computed(() => {
-  const values = getValues(model.value).join(", ");
-  return model.value.length > 0 ? values : props.placeholder;
-});
+  const values = getValues(model.value).join(', ')
+  return model.value.length > 0 ? values : props.placeholder
+})
 
-const clearAll = () => model.value = [];
-const selectAll = () => model.value = optionToStr(props.options);
+const clearAll = () => (model.value = [])
+const selectAll = () => (model.value = optionToStr(props.options))
 
 defineSlots<{
   /** Rendered for each option in the dropdown. Receives the option object. */
@@ -57,7 +54,7 @@ defineSlots<{
       <Button
         @click="togglePopover"
         class="w-full justify-between"
-        :class='{ "!text-ink-gray-4": model.length == 0 }'
+        :class="{ '!text-ink-gray-4': model.length == 0 }"
       >
         {{ selectedOptions }}
         <template #suffix>
@@ -67,42 +64,25 @@ defineSlots<{
     </template>
 
     <template #body>
-      <ComboboxRoot
-        :open="true"
-        class="relative p-2 pb-0"
-        v-model="model"
-        multiple
-      >
+      <ComboboxRoot :open="true" class="relative p-2 pb-0" v-model="model" multiple>
         <div
           v-if="!props.hideSearch"
-          class="
-            flex w-full items-center justify-between gap-2
-            rounded bg-surface-gray-2 px-2 py-1 ring-2 ring-outline-gray-2
-            transition-colors hover:bg-surface-gray-3 boder borer-transparent
-          "
+          class="boder borer-transparent flex w-full items-center justify-between gap-2 rounded bg-surface-gray-2 px-2 py-1 ring-2 ring-outline-gray-2 transition-colors hover:bg-surface-gray-3"
         >
           <ComboboxInput
             placeholder="Search for..."
-            class="
-              bg-transparent p-0 focus:outline-0 border-0 focus:border-0 focus:ring-0
-              text-base text-ink-gray-8 h-full placeholder:text-ink-gray-4 w-full
-            "
+            class="h-full w-full border-0 bg-transparent p-0 text-base text-ink-gray-8 placeholder:text-ink-gray-4 focus:border-0 focus:outline-0 focus:ring-0"
           />
 
           <div class="inline-flex gap-1">
-            <LoadingIndicator
-              v-if="props.loading"
-              class="size-4 text-ink-gray-5"
-            />
+            <LoadingIndicator v-if="props.loading" class="size-4 text-ink-gray-5" />
             <LucideX class="size-4 text-ink-gray-9" />
           </div>
         </div>
 
-        <ComboboxContent class="z-10 overflow-hidden mt-2">
+        <ComboboxContent class="z-10 mt-2 overflow-hidden">
           <ComboboxViewport class="max-h-60 overflow-auto pb-1.5">
-            <ComboboxEmpty
-              class="text-ink-gray-5 text-base text-center py-1.5 px-2.5"
-            >
+            <ComboboxEmpty class="px-2.5 py-1.5 text-center text-base text-ink-gray-5">
               No results found
             </ComboboxEmpty>
 
@@ -111,11 +91,7 @@ defineSlots<{
               :key="item.value"
               :value="item.value"
               :disabled="item.disabled"
-              class="
-                text-base leading-none text-ink-gray-7 rounded flex items-center h-7 p-1.5
-                relative select-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none
-                data-[highlighted]:outline-none data-[highlighted]:bg-surface-gray-3
-              "
+              class="relative flex h-7 select-none items-center rounded p-1.5 text-base leading-none text-ink-gray-7 data-[disabled]:pointer-events-none data-[highlighted]:bg-surface-gray-3 data-[disabled]:opacity-50 data-[highlighted]:outline-none"
             >
               <slot name="option" v-bind="{ item }">
                 {{ item.label }}
@@ -133,7 +109,7 @@ defineSlots<{
 
           <!-- footer btns -->
           <slot name="footer" v-bind="{ clearAll, selectAll }">
-            <div class="flex justify-between my-2">
+            <div class="my-2 flex justify-between">
               <Button variant="ghost" @click="clearAll"> Clear All</Button>
               <Button variant="ghost" @click="selectAll"> Select All</Button>
             </div>
diff --git a/src/components/MultiSelect/stories/Example.vue b/src/components/MultiSelect/stories/Example.vue
index 509abbfe7..5bbc4fca9 100644
--- a/src/components/MultiSelect/stories/Example.vue
+++ b/src/components/MultiSelect/stories/Example.vue
@@ -1,24 +1,20 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { MultiSelect } from "frappe-ui";
+import { MultiSelect } from 'frappe-ui'
+import { ref } from 'vue'
 
-const state = ref();
+const state = ref()
 
 const options = [
-  { value: "red-apple", label: "Red Apple" },
-  { value: "blueberry-burst", label: "Blueberry Burst" },
-  { value: "orange-grove", label: "Orange Grove" },
-  { value: "banana-split", label: "Banana Split" },
-  { value: "grapes-cluster", label: "Grapes Cluster" },
-  { value: "kiwi-slice", label: "Kiwi Slice" },
-  { value: "mango-fusion", label: "Mango Fusion" },
-];
+  { value: 'red-apple', label: 'Red Apple' },
+  { value: 'blueberry-burst', label: 'Blueberry Burst' },
+  { value: 'orange-grove', label: 'Orange Grove' },
+  { value: 'banana-split', label: 'Banana Split' },
+  { value: 'grapes-cluster', label: 'Grapes Cluster' },
+  { value: 'kiwi-slice', label: 'Kiwi Slice' },
+  { value: 'mango-fusion', label: 'Mango Fusion' },
+]
 </script>
 
 <template>
-  <MultiSelect
-    :options="options"
-    v-model="state"
-    placeholder="Select fruit"
-  />
+  <MultiSelect :options="options" v-model="state" placeholder="Select fruit" />
 </template>
diff --git a/src/components/MultiSelect/stories/Footer.vue b/src/components/MultiSelect/stories/Footer.vue
index 1ae1c582e..734b1d54f 100644
--- a/src/components/MultiSelect/stories/Footer.vue
+++ b/src/components/MultiSelect/stories/Footer.vue
@@ -1,29 +1,26 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { Button, MultiSelect } from "frappe-ui";
-import LucideCheck from "~icons/lucide/check-check";
-import LucideTrash from "~icons/lucide/trash-2";
+import { Button, MultiSelect } from 'frappe-ui'
+import { ref } from 'vue'
+import LucideCheck from '~icons/lucide/check-check'
+import LucideTrash from '~icons/lucide/trash-2'
 
-const state = ref();
+const state = ref()
 
 const options = [
-  { value: "red-apple", label: "Red Apple" },
-  { value: "blueberry-burst", label: "Blueberry Burst" },
-  { value: "orange-grove", label: "Orange Grove" },
-  { value: "banana-split", label: "Banana Split" },
-  { value: "grapes-cluster", label: "Grapes Cluster" },
-  { value: "kiwi-slice", label: "Kiwi Slice" },
-  { value: "mango-fusion", label: "Mango Fusion" },
-];
+  { value: 'red-apple', label: 'Red Apple' },
+  { value: 'blueberry-burst', label: 'Blueberry Burst' },
+  { value: 'orange-grove', label: 'Orange Grove' },
+  { value: 'banana-split', label: 'Banana Split' },
+  { value: 'grapes-cluster', label: 'Grapes Cluster' },
+  { value: 'kiwi-slice', label: 'Kiwi Slice' },
+  { value: 'mango-fusion', label: 'Mango Fusion' },
+]
 </script>
 
 <template>
-  <MultiSelect
-    :options="options"
-    v-model="state"
-  >
+  <MultiSelect :options="options" v-model="state">
     <template #footer="{ clearAll, selectAll }">
-      <div class="flex justify-between my-2">
+      <div class="my-2 flex justify-between">
         <Button theme="red" @click="clearAll">
           <template #prefix>
             <LucideTrash class="size-4" />
diff --git a/src/components/MultiSelect/stories/Options.vue b/src/components/MultiSelect/stories/Options.vue
index 8a919a510..fd2158d26 100644
--- a/src/components/MultiSelect/stories/Options.vue
+++ b/src/components/MultiSelect/stories/Options.vue
@@ -1,30 +1,24 @@
-
 <script setup lang="ts">
-import { ref } from "vue";
-import { Avatar, MultiSelect } from "frappe-ui";
+import { Avatar, MultiSelect } from 'frappe-ui'
+import { ref } from 'vue'
 
-const state = ref();
+const state = ref()
 
-const img =
-  "https://images.unsplash.com/photo-1502741338009-cac2772e18bc?w=100&h=100&fit=crop";
+const img = 'https://images.unsplash.com/photo-1502741338009-cac2772e18bc?w=100&h=100&fit=crop'
 
 const options = [
-  { value: "red-apple", label: "Red Apple", img },
-  { value: "blueberry-burst", label: "Blueberry Burst", img },
-  { value: "orange-grove", label: "Orange Grove", img },
-  { value: "banana-split", label: "Banana Split", img },
-  { value: "grapes-cluster", label: "Grapes Cluster", img },
-  { value: "kiwi-slice", label: "Kiwi Slice", img },
-  { value: "mango-fusion", label: "Mango Fusion", img },
-];
+  { value: 'red-apple', label: 'Red Apple', img },
+  { value: 'blueberry-burst', label: 'Blueberry Burst', img },
+  { value: 'orange-grove', label: 'Orange Grove', img },
+  { value: 'banana-split', label: 'Banana Split', img },
+  { value: 'grapes-cluster', label: 'Grapes Cluster', img },
+  { value: 'kiwi-slice', label: 'Kiwi Slice', img },
+  { value: 'mango-fusion', label: 'Mango Fusion', img },
+]
 </script>
 
 <template>
-  <MultiSelect
-    :options="options"
-    v-model="state"
-    placeholder="Select fruit"
-  >
+  <MultiSelect :options="options" v-model="state" placeholder="Select fruit">
     <template #option="{ item }">
       <Avatar :image="item.img" size="sm" class="mr-2" />
       {{ item.label }}
diff --git a/src/components/Password/Password.cy.ts b/src/components/Password/Password.cy.ts
index 88000161d..6ef3ef905 100644
--- a/src/components/Password/Password.cy.ts
+++ b/src/components/Password/Password.cy.ts
@@ -1,6 +1,7 @@
-import Password from './Password.vue'
 import { h } from 'vue'
 
+import Password from './Password.vue'
+
 describe('Password', () => {
   it('Renders & password toggle ', () => {
     cy.mount(Password)
@@ -14,7 +15,7 @@ describe('Password', () => {
   it('v-model', () => {
     cy.mount(Password, {
       props: {
-        value: '123456',
+        'value': '123456',
         'onUpdate:modelValue': cy.spy().as('onUpdate'),
       },
     })
diff --git a/src/components/Password/Password.vue b/src/components/Password/Password.vue
index d5aa740cf..47c1c4b5b 100644
--- a/src/components/Password/Password.vue
+++ b/src/components/Password/Password.vue
@@ -1,6 +1,6 @@
 <template>
   <FormControl
-    :type='show ? "text" : "password"'
+    :type="show ? 'text' : 'password'"
     :value="modelValue || value"
     v-bind="$attrs"
     @keydown.meta.i.prevent="show = !show"
@@ -12,16 +12,10 @@
     <template #suffix>
       <Tooltip>
         <template #body>
-          <div
-            class="rounded bg-surface-gray-7 py-1.5 px-2 text-xs text-ink-white shadow-xl"
-          >
+          <div class="rounded bg-surface-gray-7 px-2 py-1.5 text-xs text-ink-white shadow-xl">
             <span class="flex items-center gap-1">
-              {{ show ? "Hide Password" : "Show Password" }}
-              <KeyboardShortcut
-                bg
-                combo="Mod+I"
-                class="!bg-surface-gray-5 !text-ink-gray-2 px-1"
-              />
+              {{ show ? 'Hide Password' : 'Show Password' }}
+              <KeyboardShortcut bg combo="Mod+I" class="!bg-surface-gray-5 px-1 !text-ink-gray-2" />
             </span>
           </div>
         </template>
@@ -29,7 +23,7 @@
           <component
             v-show="showEye"
             :is="show ? LucideEyeOff : LucideEye"
-            class="h-3 cursor-pointer mr-1"
+            class="mr-1 h-3 cursor-pointer"
             @click="show = !show"
           />
         </div>
@@ -38,24 +32,25 @@
   </FormControl>
 </template>
 <script setup lang="ts">
-import LucideEye from "~icons/lucide/eye";
-import LucideEyeOff from "~icons/lucide/eye-off";
-import KeyboardShortcut from "../KeyboardShortcut.vue";
-import FormControl from "../FormControl/FormControl.vue";
-import Tooltip from "../Tooltip/Tooltip.vue";
-import type { PasswordProps } from "./types";
-import { computed, ref } from "vue";
+import { computed, ref } from 'vue'
+import LucideEye from '~icons/lucide/eye'
+import LucideEyeOff from '~icons/lucide/eye-off'
 
-const props = defineProps<PasswordProps>();
+import FormControl from '../FormControl/FormControl.vue'
+import KeyboardShortcut from '../KeyboardShortcut.vue'
+import Tooltip from '../Tooltip/Tooltip.vue'
+import type { PasswordProps } from './types'
 
-const show = ref(false);
+const props = defineProps<PasswordProps>()
+
+const show = ref(false)
 const showEye = computed(() => {
-  let v = props.modelValue || props.value;
-  return !v?.includes("*");
-});
+  let v = props.modelValue || props.value
+  return !v?.includes('*')
+})
 
 defineSlots<{
   /** Content shown before the input field (left icon / custom content) */
-  prefix?: () => any;
-}>();
+  prefix?: () => any
+}>()
 </script>
diff --git a/src/components/Password/stories/Example.vue b/src/components/Password/stories/Example.vue
index 7ed2da55f..f56a8a643 100644
--- a/src/components/Password/stories/Example.vue
+++ b/src/components/Password/stories/Example.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Password } from 'frappe-ui'
+import { ref } from 'vue'
 
 const value = ref('')
 </script>
diff --git a/src/components/Popover/Popover.cy.ts b/src/components/Popover/Popover.cy.ts
index 75cd3c0a1..a51f874ef 100644
--- a/src/components/Popover/Popover.cy.ts
+++ b/src/components/Popover/Popover.cy.ts
@@ -1,10 +1,11 @@
 import { h } from 'vue'
-import Popover from './Popover.vue'
+
 import Button from '../Button/Button.vue'
+import Popover from './Popover.vue'
 
 const PopoverSlots = {
-  target: ({ togglePopover }) =>
-    h(Button, { 'data-cy': 'trigger', onClick: togglePopover }, 'Click me'),
+  'target': ({ togglePopover }) =>
+    h(Button, { 'data-cy': 'trigger', 'onClick': togglePopover }, 'Click me'),
   'body-main': h('div', { 'data-cy': 'popover-content' }, 'Popover content'),
 }
 
@@ -36,7 +37,7 @@ describe('Popover', () => {
       slots: PopoverSlots,
       props: {
         'onUpdate:show': onUpdateShow,
-        onClose: onClose,
+        'onClose': onClose,
       },
     })
 
diff --git a/src/components/Popover/Popover.vue b/src/components/Popover/Popover.vue
index 8bcc7182a..a2f126e5c 100644
--- a/src/components/Popover/Popover.vue
+++ b/src/components/Popover/Popover.vue
@@ -4,7 +4,7 @@
       <div
         ref="anchorRef"
         :class="['flex', $attrs.class]"
-        :style="($attrs.style as StyleValue)"
+        :style="$attrs.style as StyleValue"
         @mouseover="onMouseover"
         @mouseleave="onMouseleave"
       >
@@ -27,9 +27,7 @@
         :sideOffset="offset"
         :collisionPadding="collisionPadding"
         :style="{
-          minWidth: matchTargetWidth
-            ? 'var(--reka-popover-trigger-width)'
-            : undefined,
+          minWidth: matchTargetWidth ? 'var(--reka-popover-trigger-width)' : undefined,
         }"
         :class="['PopoverContent', { 'has-transition': hasTransition }]"
         @mouseover="
@@ -41,10 +39,7 @@
         @interact-outside="onInteractOutside"
       >
         <div class="relative" :class="['body-container', popoverClass]">
-          <slot
-            name="body"
-            v-bind="{ togglePopover, updatePosition, open, close, isOpen }"
-          >
+          <slot name="body" v-bind="{ togglePopover, updatePosition, open, close, isOpen }">
             <div class="rounded-lg border bg-surface-modal shadow-xl">
               <slot
                 name="body-main"
@@ -65,14 +60,11 @@
 </template>
 
 <script setup lang="ts">
+import { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot } from 'reka-ui'
 import { computed, ref, onUnmounted, type StyleValue } from 'vue'
-import {
-  PopoverAnchor,
-  PopoverContent,
-  PopoverPortal,
-  PopoverRoot,
-} from 'reka-ui'
-import { PopoverProps, PopoverEmits } from './types'
+
+import type { PopoverProps } from './types'
+import { PopoverEmits } from './types'
 
 const props = withDefaults(defineProps<PopoverProps>(), {
   show: undefined,
@@ -222,10 +214,7 @@ function onInteractOutside(event: Event) {
 
   // Check if the click is on the trigger/anchor element
   const target = event.target as Element
-  if (
-    anchorRef.value &&
-    (anchorRef.value.contains(target) || anchorRef.value === target)
-  ) {
+  if (anchorRef.value && (anchorRef.value.contains(target) || anchorRef.value === target)) {
     event.preventDefault()
     return
   }
@@ -247,7 +236,7 @@ onUnmounted(() => {
 
 defineSlots<{
   /** Content of the trigger/anchor element */
-  target?: (props: {
+  'target'?: (props: {
     togglePopover: () => void
     updatePosition: () => void
     open: () => void
@@ -256,7 +245,7 @@ defineSlots<{
   }) => any
 
   /** Main content of the popover body */
-  body?: (props: {
+  'body'?: (props: {
     togglePopover: () => void
     updatePosition: () => void
     open: () => void
@@ -273,7 +262,6 @@ defineSlots<{
     isOpen: boolean
   }) => any
 }>()
-
 </script>
 
 <style>
diff --git a/src/components/Popover/index.ts b/src/components/Popover/index.ts
index c20021652..2188e6752 100644
--- a/src/components/Popover/index.ts
+++ b/src/components/Popover/index.ts
@@ -1 +1 @@
-export { default as Popover } from './Popover.vue'
\ No newline at end of file
+export { default as Popover } from './Popover.vue'
diff --git a/src/components/Progress/Progress.cy.ts b/src/components/Progress/Progress.cy.ts
index cb42ac8ee..5c3e6df7b 100644
--- a/src/components/Progress/Progress.cy.ts
+++ b/src/components/Progress/Progress.cy.ts
@@ -13,9 +13,7 @@ describe('Progress', () => {
 
     cy.get('span').should('have.text', 'label')
 
-    cy.get('[role=progressbar] div')
-      .should('have.attr', 'style')
-      .and('include', `width: ${val}%`)
+    cy.get('[role=progressbar] div').should('have.attr', 'style').and('include', `width: ${val}%`)
   })
 
   it('hint prop & slot', () => {
diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index ed6e2fe55..569ee9a5a 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="w-full space-y-[10px]">
-    <div
-      v-if="props.label || props.hint"
-      class="flex items-baseline justify-between"
-    >
+    <div v-if="props.label || props.hint" class="flex items-baseline justify-between">
       <span v-if="props.label" class="text-base font-medium text-ink-gray-8">
         {{ props.label }}
       </span>
@@ -12,9 +9,7 @@
 
       <span class="self-end" v-if="props.hint || $slots.hint">
         <slot name="hint">
-          <span class="text-base font-medium text-ink-gray-4">
-            {{ props.value }}%
-          </span>
+          <span class="text-base font-medium text-ink-gray-4"> {{ props.value }}% </span>
         </slot>
       </span>
     </div>
@@ -39,11 +34,7 @@
         v-else
         v-for="index in intervalCount"
         class="h-full w-full"
-        :class="
-          index <= filledIntervalCount
-            ? 'bg-surface-gray-7'
-            : 'bg-surface-gray-2'
-        "
+        :class="index <= filledIntervalCount ? 'bg-surface-gray-7' : 'bg-surface-gray-2'"
       ></div>
     </div>
   </div>
@@ -51,6 +42,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
+
 import type { ProgressProps } from './types'
 
 const MIN_VALUE = 0
@@ -72,9 +64,7 @@ const indicatorContainerClasses = computed(() => {
     xl: 'h-3',
   }[props.size]
 
-  const layoutClasses = props.intervals
-    ? 'flex space-x-1'
-    : 'relative bg-surface-gray-2'
+  const layoutClasses = props.intervals ? 'flex space-x-1' : 'relative bg-surface-gray-2'
 
   return [heightClass, layoutClasses]
 })
@@ -88,7 +78,7 @@ const filledIntervalCount = computed(() => {
 })
 
 defineSlots<{
-  /** Custom content for the hint area (usually displays the progress value). 
+  /** Custom content for the hint area (usually displays the progress value).
    * If not provided, defaults to showing `props.value` followed by `%`.
    */
   hint?: () => any
diff --git a/src/components/Progress/index.ts b/src/components/Progress/index.ts
index 93ff00025..c096672f2 100644
--- a/src/components/Progress/index.ts
+++ b/src/components/Progress/index.ts
@@ -1,2 +1,2 @@
 export { default as Progress } from './Progress.vue'
-export type { ProgressProps } from './types'
\ No newline at end of file
+export type { ProgressProps } from './types'
diff --git a/src/components/Progress/stories/Intervals.vue b/src/components/Progress/stories/Intervals.vue
index 0bb25936c..fc0e93cc5 100644
--- a/src/components/Progress/stories/Intervals.vue
+++ b/src/components/Progress/stories/Intervals.vue
@@ -3,10 +3,5 @@ import { Progress } from 'frappe-ui'
 </script>
 
 <template>
-  <Progress
-    :value="30"
-    label="Progress"
-    :intervals="true"
-    :interval-count="5"
-  />
+  <Progress :value="30" label="Progress" :intervals="true" :interval-count="5" />
 </template>
diff --git a/src/components/Rating/Rating.cy.ts b/src/components/Rating/Rating.cy.ts
index 7668e209a..5f7f83a78 100644
--- a/src/components/Rating/Rating.cy.ts
+++ b/src/components/Rating/Rating.cy.ts
@@ -7,10 +7,7 @@ describe('Rating', () => {
     cy.get('label').should('have.text', 'abc')
 
     cy.get('svg').each((x, i) => {
-      cy.wrap(x).should(
-        'have.class',
-        i < 2 ? '!fill-yellow-500' : 'fill-gray-300',
-      )
+      cy.wrap(x).should('have.class', i < 2 ? '!fill-yellow-500' : 'fill-gray-300')
     })
   })
 
@@ -19,7 +16,7 @@ describe('Rating', () => {
     const rating = 3
 
     cy.mount(Rating, {
-      props: { modelValue: rating, 'onUpdate:modelValue': onUpdate },
+      props: { 'modelValue': rating, 'onUpdate:modelValue': onUpdate },
     })
 
     cy.get('svg')
@@ -35,7 +32,7 @@ describe('Rating', () => {
 
   it('readonly', () => {
     cy.mount(Rating, {
-      props: { 'onUpdate:modelValue': cy.spy().as('onUpdate'), readonly: true },
+      props: { 'onUpdate:modelValue': cy.spy().as('onUpdate'), 'readonly': true },
     })
 
     cy.get('svg').eq(1).click()
diff --git a/src/components/Rating/Rating.vue b/src/components/Rating/Rating.vue
index 2904cf39f..fa1f8c146 100644
--- a/src/components/Rating/Rating.vue
+++ b/src/components/Rating/Rating.vue
@@ -12,7 +12,7 @@
       >
         <FeatherIcon
           name="star"
-          class="fill-gray-300 text-transparent mr-0.5"
+          class="mr-0.5 fill-gray-300 text-transparent"
           :class="iconClasses(index)"
           @click="markRating(index)"
         />
@@ -23,6 +23,7 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+
 import FeatherIcon from '../FeatherIcon.vue'
 import type { RatingProps } from './types'
 
diff --git a/src/components/Rating/index.ts b/src/components/Rating/index.ts
index f893a0100..abf9c092c 100644
--- a/src/components/Rating/index.ts
+++ b/src/components/Rating/index.ts
@@ -1,2 +1,2 @@
 export { default as Rating } from './Rating.vue'
-export type { RatingProps } from './types'
\ No newline at end of file
+export type { RatingProps } from './types'
diff --git a/src/components/Select/Select.cy.ts b/src/components/Select/Select.cy.ts
index d989b9f7e..45923bfc0 100644
--- a/src/components/Select/Select.cy.ts
+++ b/src/components/Select/Select.cy.ts
@@ -1,6 +1,7 @@
-import Select from './Select.vue'
 import { h } from 'vue'
 
+import Select from './Select.vue'
+
 const options = ['abc', 'def', 'xyz']
 
 describe('Select', () => {
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
index 7fe0a4bda..e0dae8073 100644
--- a/src/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { SelectProps, SelectOption } from './types'
-import LucideChevronDown from '~icons/lucide/chevron-down'
-import LucideCheck from '~icons/lucide/check'
-
 import {
   SelectContent,
   SelectItem,
@@ -15,8 +10,13 @@ import {
   SelectValue,
   SelectViewport,
 } from 'reka-ui'
+import { computed } from 'vue'
+import LucideCheck from '~icons/lucide/check'
+import LucideChevronDown from '~icons/lucide/chevron-down'
 
-const model = defineModel<String>()
+import type { SelectProps, SelectOption } from './types'
+
+const model = defineModel<string>()
 
 const props = withDefaults(defineProps<SelectProps>(), {
   size: 'sm',
@@ -54,16 +54,12 @@ const selectClasses = computed(() => {
   let variantClasses = {
     subtle:
       'border border-[--surface-gray-2] bg-surface-gray-2 hover:border-outline-gray-modals hover:bg-surface-gray-3',
-    outline:
-      'border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3',
-    ghost:
-      'bg-transparent border-transparent hover:bg-surface-gray-3 focus:bg-surface-gray-3',
+    outline: 'border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3',
+    ghost: 'bg-transparent border-transparent hover:bg-surface-gray-3 focus:bg-surface-gray-3',
     disabled: [
       'border cursor-not-allowed',
       props.variant !== 'ghost' ? 'bg-surface-gray-1' : '',
-      props.variant === 'outline'
-        ? 'border-outline-gray-2'
-        : 'border-transparent',
+      props.variant === 'outline' ? 'border-outline-gray-2' : 'border-transparent',
     ],
   }[variant]
 
@@ -95,13 +91,12 @@ defineSlots<{
   /** Custom content at the bottom of the dropdown */
   footer?: () => any
 }>()
-
 </script>
 
 <template>
   <SelectRoot v-model="model">
     <SelectTrigger
-      class="inline-flex items-center gap-2 outline-none text-base text-ink-gray-7 data-[placeholder]:text-ink-gray-4 data-[disabled]:text-ink-gray-4"
+      class="inline-flex items-center gap-2 text-base text-ink-gray-7 outline-none data-[disabled]:text-ink-gray-4 data-[placeholder]:text-ink-gray-4"
       aria-label="Customise options"
       :class="[selectClasses, $attrs.class]"
       :disabled="disabled"
@@ -109,27 +104,27 @@ defineSlots<{
       <slot name="prefix" />
       <SelectValue :placeholder="placeholder" class="truncate" />
       <slot name="suffix">
-        <LucideChevronDown class="size-4 text-ink-gray-4 ml-auto shrink-0" />
+        <LucideChevronDown class="ml-auto size-4 shrink-0 text-ink-gray-4" />
       </slot>
     </SelectTrigger>
 
     <SelectPortal>
       <SelectContent
-        class="bg-surface-modal ring-1 ring-black ring-opacity-5 rounded-lg shadow-2xl will-change-[opacity,transform] z-[100] overflow-hidden origin-center data-[state=open]:animate-[fadeInScale_100ms] data-[state=closed]:animate-[fadeOutScale_100ms]"
+        class="z-[100] origin-center overflow-hidden rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 will-change-[opacity,transform] data-[state=closed]:animate-[fadeOutScale_100ms] data-[state=open]:animate-[fadeInScale_100ms]"
       >
-        <SelectViewport class="p-1 flex flex-col">
+        <SelectViewport class="flex flex-col p-1">
           <SelectItem
             v-for="option in selectOptions"
             :disabled="option.disabled"
             :key="option.value"
             :value="option.value"
             :class="[sizeClasses, paddingClasses, fontSizeClasses]"
-            class="text-base text-ink-gray-9 flex items-center data-[highlighted]:bg-surface-gray-2 border-0 data-[state=checked]:bg-surface-gray-2 data-[disabled]:text-ink-gray-4 select-none"
+            class="flex select-none items-center border-0 text-base text-ink-gray-9 data-[highlighted]:bg-surface-gray-2 data-[state=checked]:bg-surface-gray-2 data-[disabled]:text-ink-gray-4"
           >
             <SelectItemText>
               <slot name="option" v-bind="{ option }">{{ option.label }}</slot>
             </SelectItemText>
-            <SelectItemIndicator :as="LucideCheck" class="size-4 ml-auto" />
+            <SelectItemIndicator :as="LucideCheck" class="ml-auto size-4" />
           </SelectItem>
           <slot name="footer" />
         </SelectViewport>
diff --git a/src/components/Select/index.ts b/src/components/Select/index.ts
index 3dae8e304..1dde67c02 100644
--- a/src/components/Select/index.ts
+++ b/src/components/Select/index.ts
@@ -1,2 +1,2 @@
 export { default as Select } from './Select.vue'
-export type { SelectProps } from './types'
\ No newline at end of file
+export type { SelectProps } from './types'
diff --git a/src/components/Select/stories/Example.vue b/src/components/Select/stories/Example.vue
index 8c23f30a7..2bc49a732 100644
--- a/src/components/Select/stories/Example.vue
+++ b/src/components/Select/stories/Example.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Select } from 'frappe-ui'
+import { ref } from 'vue'
 
 const value = ref('')
 const options = [
@@ -37,6 +37,6 @@ const options = [
 </script>
 
 <template>
-    <Select :options="options" v-model="value" />
-    {{ value }}
+  <Select :options="options" v-model="value" />
+  {{ value }}
 </template>
diff --git a/src/components/Select/stories/OptionSlot.vue b/src/components/Select/stories/OptionSlot.vue
index efe484cdd..50a4d157a 100644
--- a/src/components/Select/stories/OptionSlot.vue
+++ b/src/components/Select/stories/OptionSlot.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
 import { Avatar, Select } from 'frappe-ui'
+import { computed, ref } from 'vue'
 
 const value = ref('')
 const options = [
@@ -42,18 +42,16 @@ const options = [
   },
 ]
 
-const activeImg = computed(
-  () => options.find((x) => x.value === value.value)?.img,
-)
+const activeImg = computed(() => options.find((x) => x.value === value.value)?.img)
 </script>
 
 <template>
   <Select :options="options" v-model="value">
-    <template #prefix v-if='activeImg'>
+    <template #prefix v-if="activeImg">
       <Avatar size="sm" :image="activeImg" />
     </template>
     <template #option="{ option }">
-      <div class="inline-flex gap-2 items-center">
+      <div class="inline-flex items-center gap-2">
         <Avatar size="sm" :image="option.img" />
         {{ option.label }}
       </div>
diff --git a/src/components/Select/stories/TriggerSlots.vue b/src/components/Select/stories/TriggerSlots.vue
index 97afee0da..2d9f30064 100644
--- a/src/components/Select/stories/TriggerSlots.vue
+++ b/src/components/Select/stories/TriggerSlots.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { Select } from 'frappe-ui'
 import { ref } from 'vue'
 import LucideUser from '~icons/lucide/user'
-import { Select } from 'frappe-ui'
 
 const value = ref('')
 const options = [
@@ -45,7 +45,7 @@ const options = [
 
   <Select :options="options" v-model="value">
     <template #suffix>
-      <LucideUser class="size-4 ml-auto text-ink-gray-9" />
+      <LucideUser class="ml-auto size-4 text-ink-gray-9" />
     </template>
   </Select>
 </template>
diff --git a/src/components/Sidebar/Sidebar.cy.ts b/src/components/Sidebar/Sidebar.cy.ts
index 9fcd7a416..9e874df95 100644
--- a/src/components/Sidebar/Sidebar.cy.ts
+++ b/src/components/Sidebar/Sidebar.cy.ts
@@ -1,6 +1,7 @@
-import Sidebar from './Sidebar.vue'
 import { h } from 'vue'
 import LucideBox from '~icons/lucide/box'
+
+import Sidebar from './Sidebar.vue'
 import SidebarHeader from './SidebarHeader.vue'
 
 const header = {
diff --git a/src/components/Sidebar/Sidebar.vue b/src/components/Sidebar/Sidebar.vue
index c1526e085..9a9d263ab 100644
--- a/src/components/Sidebar/Sidebar.vue
+++ b/src/components/Sidebar/Sidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex h-full flex-col flex-shrink-0 overflow-y-auto overflow-x-hidden border-r border-outline-gray-1 bg-surface-menu-bar transition-all duration-300 ease-in-out p-2"
+    class="flex h-full flex-shrink-0 flex-col overflow-y-auto overflow-x-hidden border-r border-outline-gray-1 bg-surface-menu-bar p-2 transition-all duration-300 ease-in-out"
     :class="shouldCollapse ? 'w-12' : 'w-60'"
   >
     <slot name="header">
@@ -31,10 +31,7 @@
     </SidebarSection>
 
     <div class="mt-auto flex flex-col gap-2">
-      <slot
-        name="footer-items"
-        v-bind="{ isCollapsed: shouldCollapse, isMobile }"
-      />
+      <slot name="footer-items" v-bind="{ isCollapsed: shouldCollapse, isMobile }" />
       <SidebarItem
         v-if="!props.disableCollapse"
         :label="shouldCollapse ? 'Expand' : 'Collapse'"
@@ -55,12 +52,12 @@
 <script setup lang="ts">
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import { provide, computed } from 'vue'
+import LucidePanelRightOpen from '~icons/lucide/panel-right-open'
+
 import SidebarHeader from './SidebarHeader.vue'
 import SidebarItem from './SidebarItem.vue'
-import { SidebarProps } from './types'
-
-import LucidePanelRightOpen from '~icons/lucide/panel-right-open'
 import SidebarSection from './SidebarSection.vue'
+import type { SidebarProps } from './types'
 
 const props = defineProps<SidebarProps>()
 
diff --git a/src/components/Sidebar/SidebarHeader.vue b/src/components/Sidebar/SidebarHeader.vue
index a9ccc1c5f..e7c0ab1e2 100644
--- a/src/components/Sidebar/SidebarHeader.vue
+++ b/src/components/Sidebar/SidebarHeader.vue
@@ -2,7 +2,7 @@
   <Dropdown :options="props.menuItems">
     <template v-slot="{ open }">
       <button
-        class="flex h-12 items-center rounded-md py-2 duration-300 ease-in-out w-[14rem]"
+        class="flex h-12 w-[14rem] items-center rounded-md py-2 duration-300 ease-in-out"
         :class="
           isCollapsed
             ? 'w-auto px-0'
@@ -11,45 +11,37 @@
               : 'px-2 hover:bg-surface-gray-3'
         "
       >
-        <div class="w-8 h-8 rounded overflow-hidden">
+        <div class="h-8 w-8 overflow-hidden rounded">
           <slot name="logo">
             <img
               v-if="typeof props.logo === 'string'"
               :src="props.logo"
-              class="w-full h-full object-cover"
+              class="h-full w-full object-cover"
               alt="Logo"
             />
             <div
               v-else-if="!props.logo"
-              class="w-full h-full bg-surface-gray-4 flex items-center justify-center text-ink-gray-7"
+              class="flex h-full w-full items-center justify-center bg-surface-gray-4 text-ink-gray-7"
             >
               {{ props.title.charAt(0).toUpperCase() }}
             </div>
-            <component v-else :is="props.logo" class="w-full h-full" />
+            <component v-else :is="props.logo" class="h-full w-full" />
           </slot>
         </div>
         <div
-          class="flex flex-1 flex-col text-left duration-300 ease-in-out truncate"
-          :class="
-            isCollapsed
-              ? 'ml-0 w-0 overflow-hidden opacity-0'
-              : 'ml-2 w-auto opacity-100'
-          "
+          class="flex flex-1 flex-col truncate text-left duration-300 ease-in-out"
+          :class="isCollapsed ? 'ml-0 w-0 overflow-hidden opacity-0' : 'ml-2 w-auto opacity-100'"
         >
-          <div class="text-base font-medium text-ink-gray-8 leading-none">
+          <div class="text-base font-medium leading-none text-ink-gray-8">
             {{ props.title }}
           </div>
-          <div class="mt-1 text-sm text-ink-gray-6 leading-none">
+          <div class="mt-1 text-sm leading-none text-ink-gray-6">
             {{ props.subtitle }}
           </div>
         </div>
         <div
           class="duration-300 ease-in-out"
-          :class="
-            isCollapsed
-              ? 'ml-0 w-0 overflow-hidden opacity-0'
-              : 'ml-2 w-auto opacity-100'
-          "
+          :class="isCollapsed ? 'ml-0 w-0 overflow-hidden opacity-0' : 'ml-2 w-auto opacity-100'"
         >
           <LucideChevronDown class="h-4 w-4 text-ink-gray-7" />
         </div>
@@ -61,8 +53,9 @@
 <script setup lang="ts">
 import { inject } from 'vue'
 import LucideChevronDown from '~icons/lucide/chevron-down'
+
 import Dropdown from '../Dropdown/Dropdown.vue'
-import { SidebarHeaderProps } from './types'
+import type { SidebarHeaderProps } from './types'
 
 const props = defineProps<SidebarHeaderProps>()
 const isCollapsed = inject('isSidebarCollapsed', false)
diff --git a/src/components/Sidebar/SidebarItem.vue b/src/components/Sidebar/SidebarItem.vue
index 3e94d56b3..bc24ce43f 100644
--- a/src/components/Sidebar/SidebarItem.vue
+++ b/src/components/Sidebar/SidebarItem.vue
@@ -2,25 +2,15 @@
   <Button
     :label="props.label"
     @click="handleClick"
-    class="!w-full focus-visible:ring-0 focus:outline-none"
-    :class="
-      props.isActive
-        ? '!bg-surface-selected shadow-sm'
-        : 'hover:bg-surface-gray-2'
-    "
+    class="!w-full focus:outline-none focus-visible:ring-0"
+    :class="props.isActive ? '!bg-surface-selected shadow-sm' : 'hover:bg-surface-gray-2'"
     variant="ghost"
     :accesskey="props.accessKey"
   >
     <template #icon>
-      <div
-        class="flex w-full items-center justify-between transition-all ease-in-out px-2 py-1"
-      >
+      <div class="flex w-full items-center justify-between px-2 py-1 transition-all ease-in-out">
         <div class="flex items-center truncate">
-          <Tooltip
-            :text="props.label"
-            placement="right"
-            :disabled="!isCollapsed"
-          >
+          <Tooltip :text="props.label" placement="right" :disabled="!isCollapsed">
             <span class="grid flex-shrink-0 place-items-center">
               <slot name="icon">
                 <span
@@ -29,26 +19,15 @@
                 >
                   {{ props.icon }}
                 </span>
-                <component
-                  v-else
-                  :is="props.icon"
-                  class="size-4 text-ink-gray-6"
-                />
+                <component v-else :is="props.icon" class="size-4 text-ink-gray-6" />
               </slot>
             </span>
           </Tooltip>
-          <Tooltip
-            :text="props.label"
-            placement="right"
-            :disabled="isCollapsed"
-            :hoverDelay="1.5"
-          >
+          <Tooltip :text="props.label" placement="right" :disabled="isCollapsed" :hoverDelay="1.5">
             <span
               class="flex-1 flex-shrink-0 truncate text-sm transition-all ease-in-out"
               :class="
-                isCollapsed
-                  ? 'ml-0 w-0 overflow-hidden opacity-0'
-                  : 'ml-2 w-auto opacity-100'
+                isCollapsed ? 'ml-0 w-0 overflow-hidden opacity-0' : 'ml-2 w-auto opacity-100'
               "
             >
               {{ props.label }}
@@ -57,11 +36,7 @@
         </div>
         <div
           class="transition-all ease-in-out"
-          :class="
-            isCollapsed
-              ? 'ml-0 w-0 overflow-hidden opacity-0'
-              : 'ml-auto w-auto opacity-100'
-          "
+          :class="isCollapsed ? 'ml-0 w-0 overflow-hidden opacity-0' : 'ml-auto w-auto opacity-100'"
         >
           <slot name="suffix">
             <span v-if="props.suffix" class="text-sm text-ink-gray-4">
@@ -77,9 +52,10 @@
 <script setup lang="ts">
 import { inject } from 'vue'
 import { useRouter } from 'vue-router'
+
 import Button from '../Button/Button.vue'
 import Tooltip from '../Tooltip/Tooltip.vue'
-import { SidebarItemProps } from './types'
+import type { SidebarItemProps } from './types'
 
 const props = defineProps<SidebarItemProps>()
 const isCollapsed = inject('isSidebarCollapsed', false)
diff --git a/src/components/Sidebar/SidebarSection.vue b/src/components/Sidebar/SidebarSection.vue
index 4e08475d8..9cb02a217 100644
--- a/src/components/Sidebar/SidebarSection.vue
+++ b/src/components/Sidebar/SidebarSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col mt-2">
+  <div class="mt-2 flex flex-col">
     <div
       v-if="props.label"
       class="relative flex items-center gap-1 px-2 py-1.5"
@@ -8,27 +8,23 @@
     >
       <h3
         class="h-4 text-sm text-ink-gray-5 transition-all duration-300 ease-in-out"
-        :class="
-          isSidebarCollapsed
-            ? 'w-0 overflow-hidden opacity-0'
-            : 'w-auto opacity-100'
-        "
+        :class="isSidebarCollapsed ? 'w-0 overflow-hidden opacity-0' : 'w-auto opacity-100'"
       >
         {{ props.label }}
       </h3>
       <div v-if="props.collapsible">
         <LucideChevronRight
           v-if="!isSidebarCollapsed"
-          class="w-4 h-4 text-ink-gray-5 transition-all duration-300 ease-in-out"
+          class="h-4 w-4 text-ink-gray-5 transition-all duration-300 ease-in-out"
           :class="{ 'rotate-90': !isCollapsed }"
         />
       </div>
       <div
         v-if="isSidebarCollapsed"
-        class="absolute top-0 left-0 flex h-full w-full items-center justify-center transition-all duration-300 ease-in-out"
+        class="absolute left-0 top-0 flex h-full w-full items-center justify-center transition-all duration-300 ease-in-out"
         :class="isSidebarCollapsed ? 'opacity-100' : 'opacity-0'"
       >
-        <hr class="w-full border-t border-ink-gray-3" />
+        <hr class="border-ink-gray-3 w-full border-t" />
       </div>
     </div>
     <transition
@@ -61,10 +57,11 @@
 
 <script setup lang="ts">
 import { inject, ref } from 'vue'
-import SidebarItem from './SidebarItem.vue'
-import { SidebarSectionProps } from './types'
 import LucideChevronRight from '~icons/lucide/chevron-right'
 
+import SidebarItem from './SidebarItem.vue'
+import type { SidebarSectionProps } from './types'
+
 const props = defineProps<SidebarSectionProps>()
 
 const isSidebarCollapsed = inject('isSidebarCollapsed', false)
diff --git a/src/components/Sidebar/stories/Example.vue b/src/components/Sidebar/stories/Example.vue
index 435686a1b..a6f79caaa 100644
--- a/src/components/Sidebar/stories/Example.vue
+++ b/src/components/Sidebar/stories/Example.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
 import { Sidebar } from 'frappe-ui'
-
+import { reactive } from 'vue'
 import Notifications from '~icons/lucide/bell'
 import Deals from '~icons/lucide/briefcase'
 import Organizations from '~icons/lucide/building'
diff --git a/src/components/Sidebar/types.ts b/src/components/Sidebar/types.ts
index 34f1c7b26..9cea7cdaf 100644
--- a/src/components/Sidebar/types.ts
+++ b/src/components/Sidebar/types.ts
@@ -1,4 +1,4 @@
-import { RouteLocationRaw } from 'vue-router'
+import type { RouteLocationRaw } from 'vue-router'
 
 export type SidebarHeaderProps = {
   title: string
diff --git a/src/components/Slider/Slider.vue b/src/components/Slider/Slider.vue
index 9ce745d0c..b3106bd95 100644
--- a/src/components/Slider/Slider.vue
+++ b/src/components/Slider/Slider.vue
@@ -1,37 +1,27 @@
 <script setup lang="ts">
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "reka-ui";
-import type { SliderProps } from "./types";
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui'
 
-const model = defineModel({ default: [] });
+import type { SliderProps } from './types'
+
+const model = defineModel({ default: [] })
 
 withDefaults(defineProps<SliderProps>(), {
   step: 1,
   max: 100,
   min: 0,
-});
+})
 </script>
 
 <template>
-  <SliderRoot
-    v-model="model"
-    class="relative flex items-center select-none touch-none"
-    :max="100"
-  >
-    <SliderTrack class="bg-surface-gray-3 relative grow rounded h-1">
-      <SliderRange class="absolute bg-surface-gray-7 rounded h-full" />
+  <SliderRoot v-model="model" class="relative flex touch-none select-none items-center" :max="100">
+    <SliderTrack class="relative h-1 grow rounded bg-surface-gray-3">
+      <SliderRange class="absolute h-full rounded bg-surface-gray-7" />
     </SliderTrack>
 
     <SliderThumb
-      v-for="_,i in model"
-      :key='"slider-thumb-" + i'
-      class="
-        size-4 rounded-full
-        bg-surface-white dark:bg-surface-gray-7
-        shadow-md
-        transition-shadow duration-200 ease-out
-        hover:ring-[6px] ring-gray-600/20 dark:ring-gray-100/20
-        focus:outline-none
-      "
+      v-for="(_, i) in model"
+      :key="'slider-thumb-' + i"
+      class="size-4 rounded-full bg-surface-white shadow-md ring-gray-600/20 transition-shadow duration-200 ease-out hover:ring-[6px] focus:outline-none dark:bg-surface-gray-7 dark:ring-gray-100/20"
       aria-label="Volume"
     />
   </SliderRoot>
diff --git a/src/components/Slider/stories/Example.vue b/src/components/Slider/stories/Example.vue
index c5588df94..17f227ed0 100644
--- a/src/components/Slider/stories/Example.vue
+++ b/src/components/Slider/stories/Example.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Badge, Slider } from 'frappe-ui'
+import { ref } from 'vue'
 
 const val = ref([10])
 </script>
diff --git a/src/components/Slider/stories/Range.vue b/src/components/Slider/stories/Range.vue
index b341aa671..4881bedd8 100644
--- a/src/components/Slider/stories/Range.vue
+++ b/src/components/Slider/stories/Range.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Badge, Slider } from 'frappe-ui'
+import { ref } from 'vue'
 
 const val = ref([10, 50])
 </script>
diff --git a/src/components/Switch/Switch.cy.ts b/src/components/Switch/Switch.cy.ts
index a665c698d..01e664f00 100644
--- a/src/components/Switch/Switch.cy.ts
+++ b/src/components/Switch/Switch.cy.ts
@@ -28,7 +28,7 @@ describe('Switch', () => {
     cy.mount(Switch, {
       props: {
         'onUpdate:modelValue': cy.spy().as('onUpdate'),
-        onChange: cy.spy().as('onChange'),
+        'onChange': cy.spy().as('onChange'),
       },
     })
 
diff --git a/src/components/Switch/Switch.vue b/src/components/Switch/Switch.vue
index 6019ca081..0b55096ee 100644
--- a/src/components/Switch/Switch.vue
+++ b/src/components/Switch/Switch.vue
@@ -8,11 +8,7 @@
           :class="iconClasses"
           aria-hidden="true"
         />
-        <component
-          :class="iconClasses"
-          v-else-if="props.icon"
-          :is="props.icon"
-        />
+        <component :class="iconClasses" v-else-if="props.icon" :is="props.icon" />
         <label :class="switchLabelClasses" :for="id">
           {{ props.label }}
         </label>
@@ -35,10 +31,11 @@
 </template>
 
 <script lang="ts" setup>
+import { SwitchRoot, SwitchThumb } from 'reka-ui'
 import { computed, watch } from 'vue'
+
 import { useId } from '../../utils/useId'
 import FeatherIcon from '../FeatherIcon.vue'
-import { SwitchRoot, SwitchThumb } from 'reka-ui'
 import type { SwitchProps } from './types'
 
 const props = withDefaults(defineProps<SwitchProps>(), {
@@ -90,9 +87,7 @@ const iconClasses = 'mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-6'
 const switchLabelClasses = computed(() => {
   return [
     'font-medium leading-normal',
-    props.disabled && !props.description
-      ? 'text-ink-gray-4'
-      : 'text-ink-gray-8',
+    props.disabled && !props.description ? 'text-ink-gray-4' : 'text-ink-gray-8',
     props.size === 'md' ? 'text-lg' : 'text-base',
     props.labelClasses,
   ]
@@ -107,9 +102,7 @@ const switchGroupClasses = computed(() => {
     )
 
     classes.push(
-      props.disabled
-        ? 'cursor-not-allowed'
-        : 'hover:bg-surface-gray-3 active:bg-surface-gray-4',
+      props.disabled ? 'cursor-not-allowed' : 'hover:bg-surface-gray-3 active:bg-surface-gray-4',
     )
   } else {
     classes.push('items-start')
diff --git a/src/components/Switch/index.ts b/src/components/Switch/index.ts
index 0cf115f9d..0d0b52dfd 100644
--- a/src/components/Switch/index.ts
+++ b/src/components/Switch/index.ts
@@ -1,2 +1,2 @@
 export { default as Switch } from './Switch.vue'
-export type { SwitchProps } from './types'
\ No newline at end of file
+export type { SwitchProps } from './types'
diff --git a/src/components/Switch/stories/Labels.vue b/src/components/Switch/stories/Labels.vue
index 7103ccf89..9727ca4f6 100644
--- a/src/components/Switch/stories/Labels.vue
+++ b/src/components/Switch/stories/Labels.vue
@@ -3,15 +3,8 @@ import { Switch } from 'frappe-ui'
 </script>
 
 <template>
-  <Switch
-    label="Enable Notifications"
-    description="Get notified when something happens."
-  />
-  <Switch
-    label="Enable Notifications"
-    icon="inbox"
-    description="This has an icon."
-  />
+  <Switch label="Enable Notifications" description="Get notified when something happens." />
+  <Switch label="Enable Notifications" icon="inbox" description="This has an icon." />
 
   <Switch label="This is a disabled switch" :disabled="true" />
 </template>
diff --git a/src/components/TabButtons/TabButtons.story.vue b/src/components/TabButtons/TabButtons.story.vue
index ba013ac92..67f73a0e8 100644
--- a/src/components/TabButtons/TabButtons.story.vue
+++ b/src/components/TabButtons/TabButtons.story.vue
@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import Story from "@/components/Story.vue";
-import { TabButtons } from "frappe-ui";
-const currentTab = ref("mytasks");
+import { TabButtons } from 'frappe-ui'
+import { ref } from 'vue'
+
+import Story from '@/components/Story.vue'
+const currentTab = ref('mytasks')
 </script>
 
 <template>
   <div class="flex w-4/5">
     <Story>
       <TabButtons
-        :buttons='
-          [
-            { label: "Tasks assigned to me", value: "mytasks" },
-            { label: "Tasks created by me", value: "created" },
-          ]
-        '
+        :buttons="[
+          { label: 'Tasks assigned to me', value: 'mytasks' },
+          { label: 'Tasks created by me', value: 'created' },
+        ]"
         v-model="currentTab"
       />
     </Story>
diff --git a/src/components/TabButtons/TabButtons.vue b/src/components/TabButtons/TabButtons.vue
index 13b71fcaa..b0341478e 100644
--- a/src/components/TabButtons/TabButtons.vue
+++ b/src/components/TabButtons/TabButtons.vue
@@ -1,8 +1,6 @@
 <template>
   <RadioGroup v-model="value">
-    <div
-      class="flex space-x-0.5 rounded-md bg-surface-gray-2 h-7 items-center px-[1px] text-sm"
-    >
+    <div class="flex h-7 items-center space-x-0.5 rounded-md bg-surface-gray-2 px-[1px] text-sm">
       <RadioGroupOption
         as="div"
         v-for="button in buttons"
@@ -18,11 +16,7 @@
           :class="[
             active ? 'ring-outline-gray-2 focus-visible:ring' : '',
             checked && '!bg-surface-white',
-            button.disabled
-              ? ''
-              : checked
-                ? ' text-ink-gray-8 shadow'
-                : '!text-ink-gray-5',
+            button.disabled ? '' : checked ? 'text-ink-gray-8 shadow' : '!text-ink-gray-5',
           ]"
         >
           <RadioGroupLabel
@@ -38,8 +32,9 @@
 </template>
 <script>
 import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
-import FeatherIcon from '../FeatherIcon.vue'
+
 import Button from '../Button/Button.vue'
+import FeatherIcon from '../FeatherIcon.vue'
 
 export default {
   name: 'TabButtons',
diff --git a/src/components/TabButtons/index.ts b/src/components/TabButtons/index.ts
index a5e78227b..387c73d2e 100644
--- a/src/components/TabButtons/index.ts
+++ b/src/components/TabButtons/index.ts
@@ -1 +1 @@
-export { default as TabButtons } from './TabButtons.vue'
\ No newline at end of file
+export { default as TabButtons } from './TabButtons.vue'
diff --git a/src/components/Tabs/Tabs.cy.ts b/src/components/Tabs/Tabs.cy.ts
index aa1a129ab..540dbb6ca 100644
--- a/src/components/Tabs/Tabs.cy.ts
+++ b/src/components/Tabs/Tabs.cy.ts
@@ -1,6 +1,7 @@
-import Tabs from './Tabs.vue'
 import { h } from 'vue'
 
+import Tabs from './Tabs.vue'
+
 const tabs = [
   {
     label: 'Tab 1',
@@ -21,11 +22,7 @@ describe('Tabs', () => {
 
     cy.get('[role=tablist]').should('exist')
     cy.get('[role=tab]').should('have.length', tabs.length)
-    cy.get('[role=tablist]').should(
-      'have.attr',
-      'aria-orientation',
-      'horizontal',
-    )
+    cy.get('[role=tablist]').should('have.attr', 'aria-orientation', 'horizontal')
   })
 
   it('Horizontal', () => {
@@ -45,8 +42,7 @@ describe('Tabs', () => {
 
       slots: {
         'tab-item': ({ tab }) => h('div', { 'data-cy': tab.label }, tab.label),
-        'tab-panel': ({ tab }) =>
-          h('div', { 'data-cy': tab.content }, tab.content),
+        'tab-panel': ({ tab }) => h('div', { 'data-cy': tab.content }, tab.content),
       },
     })
 
@@ -59,18 +55,14 @@ describe('Tabs', () => {
       props: { tabs, 'onUpdate:modelValue': cy.spy().as('onUpdate') },
 
       slots: {
-        'tab-panel': ({ tab }) =>
-          h('div', { 'data-cy': tab.content }, tab.content),
+        'tab-panel': ({ tab }) => h('div', { 'data-cy': tab.content }, tab.content),
       },
     })
 
     cy.get('@onUpdate').should('not.have.been.called')
     cy.get('[role=tab]').eq(1).should('have.attr', 'aria-selected', 'false')
 
-    cy.get('[role=tab]')
-      .eq(1)
-      .should('have.attr', 'aria-selected', 'false')
-      .click()
+    cy.get('[role=tab]').eq(1).should('have.attr', 'aria-selected', 'false').click()
 
     cy.get('@onUpdate').should('have.been.calledWith', 1)
     cy.get('[role=tab]').eq(1).should('have.attr', 'aria-selected', 'true')
diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue
index 9e8eb055c..86b42335b 100644
--- a/src/components/Tabs/Tabs.vue
+++ b/src/components/Tabs/Tabs.vue
@@ -1,14 +1,8 @@
 <script setup lang="ts">
-import {
-  TabsContent,
-  TabsIndicator,
-  TabsList,
-  TabsRoot,
-  TabsTrigger,
-} from 'reka-ui'
+import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
+import { h } from 'vue'
 
 import type { TabProps } from './types'
-import { h } from 'vue'
 
 const props = defineProps<TabProps>()
 const model = defineModel<string | number>({ default: 0 })
@@ -35,13 +29,13 @@ defineSlots<{
 <template>
   <TabsRoot
     :as="props.as"
-    class="flex flex-1 overflow-hidden flex-col data-[orientation=vertical]:flex-row"
+    class="flex flex-1 flex-col overflow-hidden data-[orientation=vertical]:flex-row"
     :orientation="props.vertical ? 'vertical' : 'horizontal'"
     :default-value="props.tabs[0].label"
     v-model="model"
   >
     <TabsList
-      class="relative min-h-fit flex data-[orientation=vertical]:flex-col p-1 border-b data-[orientation=vertical]:border-e gap-5"
+      class="relative flex min-h-fit gap-5 border-b p-1 data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-e"
       :class="{
         'overflow-x-auto overflow-y-hidden px-5': !props.vertical,
         'py-3': props.vertical,
@@ -51,7 +45,7 @@ defineSlots<{
         class="absolute rounded-full duration-300"
         :class="props.vertical ? indicatorYCss : indicatorXCss"
       >
-        <div class="w-full h-full bg-surface-gray-7" />
+        <div class="h-full w-full bg-surface-gray-7" />
       </TabsIndicator>
 
       <TabsTrigger as="template" v-for="(tab, i) in props.tabs" :value="i">
@@ -62,8 +56,7 @@ defineSlots<{
             class="flex items-center gap-1.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:text-ink-gray-9 data-[state=active]:text-ink-gray-9"
             :class="{ 'px-2.5': props.vertical, 'py-2.5': !props.vertical }"
           >
-            <component v-if="tab.icon" :is="tab.icon" class="size-4">
-            </component>
+            <component v-if="tab.icon" :is="tab.icon" class="size-4"> </component>
 
             {{ tab.label }}
           </component>
@@ -71,11 +64,7 @@ defineSlots<{
       </TabsTrigger>
     </TabsList>
 
-    <TabsContent
-      v-for="(tab, i) in props.tabs"
-      :value="i"
-      class="flex flex-col overflow-auto"
-    >
+    <TabsContent v-for="(tab, i) in props.tabs" :value="i" class="flex flex-col overflow-auto">
       <slot name="tab-panel" v-bind="{ tab }" />
     </TabsContent>
   </TabsRoot>
diff --git a/src/components/Tabs/stories/Icons.vue b/src/components/Tabs/stories/Icons.vue
index 0cc7af35b..1d7915c89 100644
--- a/src/components/Tabs/stories/Icons.vue
+++ b/src/components/Tabs/stories/Icons.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
 import { Tabs } from 'frappe-ui'
+import { reactive } from 'vue'
 import LucideGithub from '~icons/lucide/github'
-import LucideTwitter from '~icons/lucide/twitter'
 import LucideLinkedin from '~icons/lucide/linkedin'
+import LucideTwitter from '~icons/lucide/twitter'
 
 const state = reactive({
   index: 0,
@@ -32,7 +32,7 @@ const state = reactive({
 </script>
 
 <template>
-  <Tabs class="border rounded" v-model="state.index" :tabs="state.tabs">
+  <Tabs class="rounded border" v-model="state.index" :tabs="state.tabs">
     <template #tab-panel="{ tab }">
       <div class="p-5">{{ tab.content }}</div>
     </template>
diff --git a/src/components/Tabs/stories/Orientation.vue b/src/components/Tabs/stories/Orientation.vue
index 5ec29dc6d..4c7719931 100644
--- a/src/components/Tabs/stories/Orientation.vue
+++ b/src/components/Tabs/stories/Orientation.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
 import { Tabs } from 'frappe-ui'
+import { reactive } from 'vue'
 
 const state = reactive({
   index: 0,
   tabs: [
     {
       label: 'Github',
-      content:
-        'Github is a code hosting platform for version control and collaboration',
+      content: 'Github is a code hosting platform for version control and collaboration',
     },
     {
       label: 'Twitter',
@@ -17,26 +16,20 @@ const state = reactive({
     },
     {
       label: 'Linkedin',
-      content:
-        'LinkedIn is an American business and employment-oriented online service',
+      content: 'LinkedIn is an American business and employment-oriented online service',
     },
   ],
 })
 </script>
 
 <template>
-  <Tabs class="border rounded" v-model="state.index" :tabs="state.tabs">
+  <Tabs class="rounded border" v-model="state.index" :tabs="state.tabs">
     <template #tab-panel="{ tab }">
       <div class="p-5">{{ tab.content }}</div>
     </template>
   </Tabs>
 
-  <Tabs
-    class="border rounded"
-    v-model="state.index"
-    :tabs="state.tabs"
-    :vertical="true"
-  >
+  <Tabs class="rounded border" v-model="state.index" :tabs="state.tabs" :vertical="true">
     <template #tab-panel="{ tab }">
       <div class="p-5">{{ tab.content }}</div>
     </template>
diff --git a/src/components/Tabs/types.ts b/src/components/Tabs/types.ts
index d4d26e913..7674c8fe4 100644
--- a/src/components/Tabs/types.ts
+++ b/src/components/Tabs/types.ts
@@ -18,4 +18,4 @@ export interface TabProps {
 
   /** Renders tabs vertically instead of horizontally */
   vertical?: boolean
-}
\ No newline at end of file
+}
diff --git a/src/components/TextEditor/TextEditor.cy.ts b/src/components/TextEditor/TextEditor.cy.ts
index 098ff8fa6..38787fee1 100644
--- a/src/components/TextEditor/TextEditor.cy.ts
+++ b/src/components/TextEditor/TextEditor.cy.ts
@@ -114,11 +114,7 @@ describe('<TextEditor />', () => {
     cy.get('.ProseMirror').type('{enter}')
 
     // Check insertion
-    cy.get('.ProseMirror span.mention').should(
-      'have.attr',
-      'data-label',
-      'John Doe',
-    )
+    cy.get('.ProseMirror span.mention').should('have.attr', 'data-label', 'John Doe')
     cy.get('.ProseMirror').should('contain.text', '@John Doe')
 
     // Verify suggestion list is hidden
@@ -145,11 +141,7 @@ describe('<TextEditor />', () => {
     cy.get('.ProseMirror').type('{enter}')
 
     // Verify insertion
-    cy.get('.ProseMirror span.tag-item').should(
-      'have.attr',
-      'data-tag-label',
-      'NewTag',
-    )
+    cy.get('.ProseMirror span.tag-item').should('have.attr', 'data-tag-label', 'NewTag')
     cy.get('.ProseMirror').should('contain.text', '#NewTag')
 
     // Verify list is hidden
diff --git a/src/components/TextEditor/TextEditor.vue b/src/components/TextEditor/TextEditor.vue
index f60cf9a69..0904f2b06 100644
--- a/src/components/TextEditor/TextEditor.vue
+++ b/src/components/TextEditor/TextEditor.vue
@@ -37,44 +37,37 @@ import {
 
 defineOptions({ inheritAttrs: false })
 
-import { Editor, EditorContent } from '@tiptap/vue-3'
-import StarterKit from '@tiptap/starter-kit'
-import { Placeholder } from '@tiptap/extensions'
-import Typography from '@tiptap/extension-typography'
-import { TextStyleKit } from '@tiptap/extension-text-style'
 import { TaskList, TaskItem } from '@tiptap/extension-list'
+import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table'
 import TextAlign from '@tiptap/extension-text-align'
-import {
-  Table,
-  TableRow,
-  TableCell,
-  TableHeader,
-} from '@tiptap/extension-table'
+import { TextStyleKit } from '@tiptap/extension-text-style'
+import Typography from '@tiptap/extension-typography'
+import { Placeholder } from '@tiptap/extensions'
+import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 
-import { ImageExtension } from './extensions/image'
-import { VideoExtension } from './extensions/video-extension'
-import ImageViewerExtension from './extensions/image-viewer-extension'
-import { IframeExtension } from './extensions/iframe'
-import { TocNodeExtension } from './extensions/toc-node'
-import { LinkExtension } from './extensions/link/'
+import { useFileUpload } from '../../utils/useFileUpload'
+import TextEditorBubbleMenu from './components/TextEditorBubbleMenu.vue'
+import TextEditorFixedMenu from './components/TextEditorFixedMenu.vue'
+import TextEditorFloatingMenu from './components/TextEditorFloatingMenu.vue'
+import { ExtendedCode, ExtendedCodeBlock } from './extensions/code-block'
 import NamedColorExtension from './extensions/color'
-import NamedHighlightExtension from './extensions/highlight'
+import { ContentPasteExtension } from './extensions/content-paste-extension'
 import StyleClipboardExtension from './extensions/copy-styles'
-import { MentionExtension } from './extensions/mention'
 import EmojiExtension from './extensions/emoji/emoji-extension'
-import SlashCommands from './extensions/slash-commands/slash-commands-extension'
-import { ContentPasteExtension } from './extensions/content-paste-extension'
 import { Heading } from './extensions/heading/heading'
+import NamedHighlightExtension from './extensions/highlight'
+import { IframeExtension } from './extensions/iframe'
+import { ImageExtension } from './extensions/image'
 import { ImageGroup } from './extensions/image-group/image-group-extension'
-import { ExtendedCode, ExtendedCodeBlock } from './extensions/code-block'
-
-import TextEditorFixedMenu from './components/TextEditorFixedMenu.vue'
-import TextEditorBubbleMenu from './components/TextEditorBubbleMenu.vue'
-import TextEditorFloatingMenu from './components/TextEditorFloatingMenu.vue'
-
-import { useFileUpload } from '../../utils/useFileUpload'
-import { TextEditorEmits, TextEditorProps } from './types'
+import ImageViewerExtension from './extensions/image-viewer-extension'
+import { LinkExtension } from './extensions/link/'
+import { MentionExtension } from './extensions/mention'
+import SlashCommands from './extensions/slash-commands/slash-commands-extension'
 import { getTagExtensions } from './extensions/tag'
+import { TocNodeExtension } from './extensions/toc-node'
+import { VideoExtension } from './extensions/video-extension'
+import type { TextEditorEmits, TextEditorProps } from './types'
 
 function defaultUploadFunction(file: File) {
   // useFileUpload is frappe specific
diff --git a/src/components/TextEditor/commands.js b/src/components/TextEditor/commands.js
index 9c32d66f1..9fc145aa7 100644
--- a/src/components/TextEditor/commands.js
+++ b/src/components/TextEditor/commands.js
@@ -1,38 +1,38 @@
 import { defineAsyncComponent } from 'vue'
+import Bold from '~icons/lucide/bold'
+import CodeView from '~icons/lucide/code'
 import H1 from '~icons/lucide/heading-1'
 import H2 from '~icons/lucide/heading-2'
 import H3 from '~icons/lucide/heading-3'
 import H4 from '~icons/lucide/heading-4'
 import H5 from '~icons/lucide/heading-5'
 import H6 from '~icons/lucide/heading-6'
-import Text from '~icons/lucide/type'
-import Underline from '~icons/lucide/underline'
+import Image from '~icons/lucide/image-plus'
 import Italic from '~icons/lucide/italic'
-import Bold from '~icons/lucide/bold'
-import Strikethrough from '~icons/lucide/strikethrough'
-import AlignLeft from '~icons/lucide/text-align-start'
-import AlignRight from '~icons/lucide/text-align-end'
-import AlignCenter from '~icons/lucide/text-align-center'
-import FontColor from '~icons/lucide/paint-bucket'
+import Link from '~icons/lucide/link-2'
 import ListUnordered from '~icons/lucide/list'
-import ListOrdered from '~icons/lucide/list-ordered'
 import ListTask from '~icons/lucide/list-check'
-import IndentList from '~icons/lucide/list-indent-increase'
 import DedentList from '~icons/lucide/list-indent-decrease'
+import IndentList from '~icons/lucide/list-indent-increase'
+import ListOrdered from '~icons/lucide/list-ordered'
+import FontColor from '~icons/lucide/paint-bucket'
 import DoubleQuotes from '~icons/lucide/quote'
-import CodeView from '~icons/lucide/code'
-import Link from '~icons/lucide/link-2'
-import Image from '~icons/lucide/image-plus'
-import GalleryVertical from '~icons/lucide/youtube'
-import Video from '~icons/lucide/video'
-import Undo from '~icons/lucide/undo-2'
 import Redo from '~icons/lucide/redo-2'
 import Separator from '~icons/lucide/separator-horizontal'
-import Table from '~icons/lucide/table-properties'
 import TableOfContentsIcon from '~icons/lucide/square-menu'
+import Strikethrough from '~icons/lucide/strikethrough'
+import Table from '~icons/lucide/table-properties'
+import AlignCenter from '~icons/lucide/text-align-center'
+import AlignRight from '~icons/lucide/text-align-end'
+import AlignLeft from '~icons/lucide/text-align-start'
+import Text from '~icons/lucide/type'
+import Underline from '~icons/lucide/underline'
+import Undo from '~icons/lucide/undo-2'
+import Video from '~icons/lucide/video'
+import GalleryVertical from '~icons/lucide/youtube'
 
 export default {
-  Paragraph: {
+  'Paragraph': {
     label: 'Paragraph',
     icon: Text,
     action: (editor) => editor.chain().focus().setParagraph().run(),
@@ -43,8 +43,7 @@ export default {
     label: 'Heading 1',
     text: 'H1',
     icon: H1,
-    action: (editor) =>
-      editor.chain().focus().toggleHeading({ level: 1 }).run(),
+    action: (editor) => editor.chain().focus().toggleHeading({ level: 1 }).run(),
     shortcut: 'Meta-Alt-1',
     isActive: (editor) => editor.isActive('heading', { level: 1 }),
   },
@@ -52,8 +51,7 @@ export default {
     label: 'Heading 2',
     text: 'H2',
     icon: H2,
-    action: (editor) =>
-      editor.chain().focus().toggleHeading({ level: 2 }).run(),
+    action: (editor) => editor.chain().focus().toggleHeading({ level: 2 }).run(),
     shortcut: 'Meta-Alt-2',
     isActive: (editor) => editor.isActive('heading', { level: 2 }),
   },
@@ -61,8 +59,7 @@ export default {
     label: 'Heading 3',
     text: 'H3',
     icon: H3,
-    action: (editor) =>
-      editor.chain().focus().toggleHeading({ level: 3 }).run(),
+    action: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(),
     shortcut: 'Meta-Alt-3',
     isActive: (editor) => editor.isActive('heading', { level: 3 }),
   },
@@ -70,8 +67,7 @@ export default {
     label: 'Heading 4',
     text: 'H4',
     icon: H4,
-    action: (editor) =>
-      editor.chain().focus().toggleHeading({ level: 4 }).run(),
+    action: (editor) => editor.chain().focus().toggleHeading({ level: 4 }).run(),
     shortcut: 'Meta-Alt-4',
     isActive: (editor) => editor.isActive('heading', { level: 4 }),
   },
@@ -79,8 +75,7 @@ export default {
     label: 'Heading 5',
     text: 'H5',
     icon: H5,
-    action: (editor) =>
-      editor.chain().focus().toggleHeading({ level: 5 }).run(),
+    action: (editor) => editor.chain().focus().toggleHeading({ level: 5 }).run(),
     shortcut: 'Meta-Alt-5',
     isActive: (editor) => editor.isActive('heading', { level: 5 }),
   },
@@ -88,33 +83,32 @@ export default {
     label: 'Heading 6',
     text: 'H6',
     icon: H6,
-    action: (editor) =>
-      editor.chain().focus().toggleHeading({ level: 6 }).run(),
+    action: (editor) => editor.chain().focus().toggleHeading({ level: 6 }).run(),
     shortcut: 'Meta-Alt-6',
     isActive: (editor) => editor.isActive('heading', { level: 6 }),
   },
-  Bold: {
+  'Bold': {
     label: 'Bold',
     icon: Bold,
     action: (editor) => editor.chain().focus().toggleBold().run(),
     shortcut: 'Meta-B',
     isActive: (editor) => editor.isActive('bold'),
   },
-  Italic: {
+  'Italic': {
     label: 'Italic',
     icon: Italic,
     action: (editor) => editor.chain().focus().toggleItalic().run(),
     shortcut: 'Meta-I',
     isActive: (editor) => editor.isActive('italic'),
   },
-  Underline: {
+  'Underline': {
     label: 'Underline',
     icon: Underline,
     action: (editor) => editor.chain().focus().toggleUnderline().run(),
     shortcut: 'Meta-U',
     isActive: (editor) => editor.isActive('underline'),
   },
-  Strikethrough: {
+  'Strikethrough': {
     label: 'Strikethrough',
     icon: Strikethrough,
     action: (editor) => editor.chain().focus().toggleStrike().run(),
@@ -142,13 +136,13 @@ export default {
     shortcut: 'Meta-Shift-9',
     isActive: (editor) => editor.isActive('taskList'),
   },
-  IndentList: {
+  'IndentList': {
     label: 'Indent List',
     action: (editor) => editor.chain().focus().sinkListItem('listItem').run(),
     icon: IndentList,
     condition: (editor) => editor.can().sinkListItem('listItem'),
   },
-  DedentList: {
+  'DedentList': {
     label: 'Dedent List',
     action: (editor) => editor.chain().focus().liftListItem('listItem').run(),
     icon: DedentList,
@@ -175,21 +169,20 @@ export default {
     shortcut: 'Meta-Shift-R',
     isActive: (editor) => editor.isActive({ textAlign: 'right' }),
   },
-  FontColor: {
+  'FontColor': {
     label: 'Font Color',
     icon: FontColor,
-    isActive: (editor) =>
-      editor.getAttributes('textStyle')?.color || editor.isActive('highlight'),
+    isActive: (editor) => editor.getAttributes('textStyle')?.color || editor.isActive('highlight'),
     component: defineAsyncComponent(() => import('./components/FontColor.vue')),
   },
-  Blockquote: {
+  'Blockquote': {
     label: 'Blockquote',
     icon: DoubleQuotes,
     action: (editor) => editor.chain().focus().toggleBlockquote().run(),
     shortcut: 'Meta-Shift-B',
     isActive: (editor) => editor.isActive('blockquote'),
   },
-  Code: {
+  'Code': {
     label: 'Code',
     icon: CodeView,
     action: (editor) => editor.chain().focus().toggleCodeBlock().run(),
@@ -202,143 +195,130 @@ export default {
     action: (editor) => editor.chain().focus().setHorizontalRule().run(),
     isActive: (editor) => false,
   },
-  Link: {
+  'Link': {
     label: 'Link',
     icon: Link,
     isActive: (editor) => editor.isActive('link'),
-    component: defineAsyncComponent(
-      () => import('./components/InsertLink.vue'),
-    ),
+    component: defineAsyncComponent(() => import('./components/InsertLink.vue')),
   },
-  Image: {
+  'Image': {
     label: 'Image',
     icon: Image,
     isActive: (editor) => false,
-    component: defineAsyncComponent(
-      () => import('./components/InsertImage.vue'),
-    ),
+    component: defineAsyncComponent(() => import('./components/InsertImage.vue')),
   },
-  Video: {
+  'Video': {
     label: 'Video',
     icon: Video,
     isActive: (editor) => false,
-    component: defineAsyncComponent(
-      () => import('./components/InsertVideo.vue'),
-    ),
+    component: defineAsyncComponent(() => import('./components/InsertVideo.vue')),
   },
-  Iframe: {
+  'Iframe': {
     label: 'Embed',
     icon: GalleryVertical,
     isActive: (editor) => editor.isActive('iframe'),
-    component: defineAsyncComponent(
-      () => import('./extensions/iframe/InsertIframe.vue'),
-    ),
+    component: defineAsyncComponent(() => import('./extensions/iframe/InsertIframe.vue')),
   },
-  Undo: {
+  'Undo': {
     label: 'Undo',
     icon: Undo,
     action: (editor) => editor.chain().focus().undo().run(),
     shortcut: 'Meta-Z',
     isDisabled: (editor) => !editor.can().chain().focus().undo().run(),
   },
-  Redo: {
+  'Redo': {
     label: 'Redo',
     icon: Redo,
     action: (editor) => editor.chain().focus().redo().run(),
     shortcut: 'Meta-Shift-Z',
     isDisabled: (editor) => !editor.can().chain().focus().redo().run(),
   },
-  InsertTable: {
+  'InsertTable': {
     label: 'Insert Table',
     icon: Table,
     action: (editor) =>
-      editor
-        .chain()
-        .focus()
-        .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
-        .run(),
+      editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
     isActive: (editor) => editor.can().deleteTable(),
   },
-  AddColumnBefore: {
+  'AddColumnBefore': {
     label: 'Add Column Before',
     action: (editor) => editor.chain().focus().addColumnBefore().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().addColumnBefore(),
   },
-  AddColumnAfter: {
+  'AddColumnAfter': {
     label: 'Add Column After',
     action: (editor) => editor.chain().focus().addColumnAfter().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().addColumnAfter(),
   },
-  DeleteColumn: {
+  'DeleteColumn': {
     label: 'Delete Column',
     action: (editor) => editor.chain().focus().deleteColumn().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().deleteColumn(),
   },
-  AddRowBefore: {
+  'AddRowBefore': {
     label: 'Add Row Before',
     action: (editor) => editor.chain().focus().addRowBefore().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().addRowBefore(),
   },
-  AddRowAfter: {
+  'AddRowAfter': {
     label: 'Add Row After',
     action: (editor) => editor.chain().focus().addRowAfter().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().addRowAfter(),
   },
-  DeleteRow: {
+  'DeleteRow': {
     label: 'Delete Row',
     action: (editor) => editor.chain().focus().deleteRow().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().deleteRow(),
   },
-  DeleteTable: {
+  'DeleteTable': {
     label: 'Delete Table',
     action: (editor) => editor.chain().focus().deleteTable().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().deleteTable(),
   },
-  MergeCells: {
+  'MergeCells': {
     label: 'Merge Cells',
     action: (editor) => editor.chain().focus().mergeCells().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().mergeCells(),
   },
-  SplitCell: {
+  'SplitCell': {
     label: 'Split Cell',
     action: (editor) => editor.chain().focus().splitCell().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().splitCell(),
   },
-  ToggleHeaderColumn: {
+  'ToggleHeaderColumn': {
     label: 'Toggle Header Column',
     action: (editor) => editor.chain().focus().toggleHeaderColumn().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().toggleHeaderColumn(),
   },
-  ToggleHeaderRow: {
+  'ToggleHeaderRow': {
     label: 'Toggle Header Row',
     action: (editor) => editor.chain().focus().toggleHeaderRow().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().toggleHeaderRow(),
   },
-  ToggleHeaderCell: {
+  'ToggleHeaderCell': {
     label: 'Toggle Header Cell',
     action: (editor) => editor.chain().focus().toggleHeaderCell().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().toggleHeaderCell(),
   },
-  TableOfContents: {
+  'TableOfContents': {
     label: 'Table of Contents',
     icon: TableOfContentsIcon,
-    action: (editor) =>
-      editor.chain().focus().insertTableOfContentsNode().run(),
+    action: (editor) => editor.chain().focus().insertTableOfContentsNode().run(),
     isActive: (editor) => editor.isActive('tocNode'),
   },
-  Separator: {
+  'Separator': {
     type: 'separator',
   },
 }
diff --git a/src/components/TextEditor/components/CodeBlockComponent.vue b/src/components/TextEditor/components/CodeBlockComponent.vue
index 067807f90..2e3b2b9f3 100644
--- a/src/components/TextEditor/components/CodeBlockComponent.vue
+++ b/src/components/TextEditor/components/CodeBlockComponent.vue
@@ -49,7 +49,7 @@ export default {
           }
         })
         .concat([{ label: 'html', value: 'xml' }])
-        .sort((a, b) => a.label.localeCompare(b.label))
+        .toSorted((a, b) => a.label.localeCompare(b.label))
     },
   },
 }
@@ -100,9 +100,10 @@ export default {
 .ProseMirror pre {
   background: #0d0d0d;
   color: #fff;
-  font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Mono', 'Source Code Pro', 'Fira Mono',
-    'Droid Sans Mono', 'Consolas', 'Courier New', monospace;
+  font-family:
+    ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono',
+    'Ubuntu Mono', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Consolas', 'Courier New',
+    monospace;
   padding: 0.75rem 1rem;
   border-radius: 0.75rem;
   caret-color: #fff;
diff --git a/src/components/TextEditor/components/FontColor.vue b/src/components/TextEditor/components/FontColor.vue
index a8da8b603..4de8d6364 100644
--- a/src/components/TextEditor/components/FontColor.vue
+++ b/src/components/TextEditor/components/FontColor.vue
@@ -1,9 +1,7 @@
 <template>
   <Popover transition="default">
     <template #target="{ togglePopover, isOpen }">
-      <slot
-        v-bind="{ onClick: () => togglePopover(), isActive: isOpen }"
-      ></slot>
+      <slot v-bind="{ onClick: () => togglePopover(), isActive: isOpen }"></slot>
     </template>
     <template #body-main>
       <div class="p-2">
@@ -48,8 +46,8 @@
   </Popover>
 </template>
 <script>
-import Popover from '../../Popover/Popover.vue'
 import { Tooltip } from '../../../index'
+import Popover from '../../Popover/Popover.vue'
 
 export default {
   name: 'FontColor',
@@ -58,22 +56,14 @@ export default {
   methods: {
     setBackgroundColor(color) {
       if (color.name != 'Default') {
-        this.editor
-          .chain()
-          .focus()
-          .toggleHighlightByName(color.name.toLowerCase())
-          .run()
+        this.editor.chain().focus().toggleHighlightByName(color.name.toLowerCase()).run()
       } else {
         this.editor.chain().focus().unsetHighlight().run()
       }
     },
     setForegroundColor(color) {
       if (color.name != 'Default') {
-        this.editor
-          .chain()
-          .focus()
-          .setColorByName(color.name.toLowerCase())
-          .run()
+        this.editor.chain().focus().setColorByName(color.name.toLowerCase()).run()
       } else {
         this.editor.chain().focus().unsetColor().run()
       }
diff --git a/src/components/TextEditor/components/ImageViewerModal.vue b/src/components/TextEditor/components/ImageViewerModal.vue
index e274ee319..b26334116 100644
--- a/src/components/TextEditor/components/ImageViewerModal.vue
+++ b/src/components/TextEditor/components/ImageViewerModal.vue
@@ -9,33 +9,24 @@
     >
       <div
         v-if="props.show"
-        class="fixed top-0 left-0 w-full h-full bg-black sm:bg-black/90 z-[50] flex flex-col justify-center items-center overflow-hidden touch-none"
+        class="fixed left-0 top-0 z-[50] flex h-full w-full touch-none flex-col items-center justify-center overflow-hidden bg-black sm:bg-black/90"
         ref="imageContainer"
         @mousemove="handleActivity"
         @touchstart="handleActivity"
         @touchmove="handleActivity"
       >
         <!-- Dedicated Backdrop -->
-        <div
-          class="absolute inset-0 z-0"
-          ref="backdropElement"
-          @click="close"
-        ></div>
+        <div class="absolute inset-0 z-0" ref="backdropElement" @click="close"></div>
 
         <!-- Image Container -->
         <div class="relative z-10 flex flex-col items-center">
           <img
             :src="currentImage.src"
             :alt="currentImage.alt || 'Image preview'"
-            class="max-w-screen max-h-screen object-contain block"
+            class="max-w-screen block max-h-screen object-contain"
             :style="{
               transform: `scale(${zoomLevel / 100}) translate(${panPosition.x}px, ${panPosition.y}px)`,
-              cursor:
-                zoomLevel > 100
-                  ? isMousePanning
-                    ? 'grabbing'
-                    : 'grab'
-                  : 'default',
+              cursor: zoomLevel > 100 ? (isMousePanning ? 'grabbing' : 'grab') : 'default',
               transition:
                 isPanning || isPinching || isAnimatingPan
                   ? 'none'
@@ -49,8 +40,8 @@
         <!-- Caption -->
         <div
           v-if="currentImage.alt"
-          class="absolute bottom-4 p-2 text-center rounded-sm text-white text-sm bg-black/65 z-10 transition-opacity duration-300 ease-in-out"
-          :class="{ 'opacity-0 pointer-events-none': !isControlsVisible }"
+          class="absolute bottom-4 z-10 rounded-sm bg-black/65 p-2 text-center text-sm text-white transition-opacity duration-300 ease-in-out"
+          :class="{ 'pointer-events-none opacity-0': !isControlsVisible }"
         >
           {{ currentImage.alt }}
         </div>
@@ -58,8 +49,8 @@
         <!-- Controls bar -->
         <div
           ref="controlsBar"
-          class="absolute top-4 flex items-center space-x-3 p-2 text-white z-20 transition-opacity duration-300 ease-in-out"
-          :class="{ 'opacity-0 pointer-events-none': !isControlsVisible }"
+          class="absolute top-4 z-20 flex items-center space-x-3 p-2 text-white transition-opacity duration-300 ease-in-out"
+          :class="{ 'pointer-events-none opacity-0': !isControlsVisible }"
           @touchstart.stop
           @touchmove.stop
           @touchend.stop
@@ -67,23 +58,23 @@
           @wheel.stop
         >
           <!-- Navigation controls -->
-          <div class="bg-black/65 rounded flex items-center">
+          <div class="flex items-center rounded bg-black/65">
             <Tooltip text="Previous image">
               <button
-                class="p-2 hover:bg-gray-900 rounded-l focus:outline-none"
+                class="rounded-l p-2 hover:bg-gray-900 focus:outline-none"
                 @click.stop="previousImage"
               >
                 <LucideChevronLeft class="size-4" />
               </button>
             </Tooltip>
 
-            <span class="px-2 text-sm tabular-nums text-gray-400 select-none">
+            <span class="select-none px-2 text-sm tabular-nums text-gray-400">
               {{ currentIndex + 1 }}/{{ props.images.length }}
             </span>
 
             <Tooltip text="Next image">
               <button
-                class="p-2 hover:bg-gray-900 rounded-r focus:outline-none"
+                class="rounded-r p-2 hover:bg-gray-900 focus:outline-none"
                 @click.stop="nextImage"
               >
                 <LucideChevronRight class="size-4" />
@@ -92,10 +83,10 @@
           </div>
 
           <!-- Zoom controls -->
-          <div class="bg-black/65 rounded flex items-center">
+          <div class="flex items-center rounded bg-black/65">
             <Tooltip text="Zoom out">
               <button
-                class="p-2 hover:bg-gray-900 rounded-l focus:outline-none"
+                class="rounded-l p-2 hover:bg-gray-900 focus:outline-none"
                 @click.stop="zoomOut"
               >
                 <LucideMinus class="size-4" />
@@ -104,7 +95,7 @@
 
             <Tooltip text="Reset zoom">
               <button
-                class="p-2 hover:bg-gray-900 text-sm text-gray-400 focus:outline-none"
+                class="p-2 text-sm text-gray-400 hover:bg-gray-900 focus:outline-none"
                 @click.stop="resetZoom"
               >
                 {{ zoomLevel }}%
@@ -113,7 +104,7 @@
 
             <Tooltip text="Zoom in">
               <button
-                class="p-2 hover:bg-gray-900 rounded-r focus:outline-none"
+                class="rounded-r p-2 hover:bg-gray-900 focus:outline-none"
                 @click.stop="zoomIn"
               >
                 <LucidePlus class="size-4" />
@@ -122,21 +113,19 @@
           </div>
 
           <!-- Action controls -->
-          <div class="bg-black/65 rounded flex items-center">
+          <div class="flex items-center rounded bg-black/65">
             <Tooltip text="Download image">
               <button
-                class="p-2 hover:bg-gray-900 rounded-l focus:outline-none"
+                class="rounded-l p-2 hover:bg-gray-900 focus:outline-none"
                 @click.stop="downloadImage"
               >
                 <LucideDownload class="size-4" />
               </button>
             </Tooltip>
 
-            <Tooltip
-              :text="isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'"
-            >
+            <Tooltip :text="isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'">
               <button
-                class="p-2 hover:bg-gray-900 rounded-r focus:outline-none hidden sm:block"
+                class="hidden rounded-r p-2 hover:bg-gray-900 focus:outline-none sm:block"
                 @click.stop="toggleFullscreen"
               >
                 <LucideMaximize v-if="!isFullscreen" class="size-4" />
@@ -146,12 +135,9 @@
           </div>
 
           <!-- Close button -->
-          <div class="bg-black/65 rounded flex items-center">
+          <div class="flex items-center rounded bg-black/65">
             <Tooltip text="Close">
-              <button
-                class="p-2 hover:bg-gray-900 rounded focus:outline-none"
-                @click.stop="close"
-              >
+              <button class="rounded p-2 hover:bg-gray-900 focus:outline-none" @click.stop="close">
                 <LucideX class="size-4" />
               </button>
             </Tooltip>
@@ -163,29 +149,21 @@
 </template>
 
 <script setup lang="ts">
-import {
-  ref,
-  onMounted,
-  onUnmounted,
-  useTemplateRef,
-  computed,
-  toRef,
-  watch,
-} from 'vue'
-import Tooltip from '../../Tooltip/Tooltip.vue'
-import { useTouchHandler } from '../../../composables/useTouchHandler'
-import { useImageNavigation } from '../../../composables/useImageNavigation'
-import { useZoomPan } from '../../../composables/useZoomPan'
-
+import { ref, onMounted, onUnmounted, useTemplateRef, computed, toRef, watch } from 'vue'
+import LucideChevronLeft from '~icons/lucide/chevron-left'
+import LucideChevronRight from '~icons/lucide/chevron-right'
 import LucideDownload from '~icons/lucide/download'
 import LucideMaximize from '~icons/lucide/maximize'
 import LucideMinimize from '~icons/lucide/minimize'
-import LucideChevronLeft from '~icons/lucide/chevron-left'
-import LucideChevronRight from '~icons/lucide/chevron-right'
-import LucidePlus from '~icons/lucide/plus'
 import LucideMinus from '~icons/lucide/minus'
+import LucidePlus from '~icons/lucide/plus'
 import LucideX from '~icons/lucide/x'
 
+import { useImageNavigation } from '../../../composables/useImageNavigation'
+import { useTouchHandler } from '../../../composables/useTouchHandler'
+import { useZoomPan } from '../../../composables/useZoomPan'
+import Tooltip from '../../Tooltip/Tooltip.vue'
+
 interface ImageInfo {
   src: string
   alt: string | null
diff --git a/src/components/TextEditor/components/InsertImage.vue b/src/components/TextEditor/components/InsertImage.vue
index cfb8626dd..400ac1b69 100644
--- a/src/components/TextEditor/components/InsertImage.vue
+++ b/src/components/TextEditor/components/InsertImage.vue
@@ -18,8 +18,9 @@
   />
 </template>
 <script setup lang="ts">
-import { ref, useTemplateRef } from 'vue'
 import type { Editor } from '@tiptap/vue-3'
+import { ref, useTemplateRef } from 'vue'
+
 import ImageGroupUploadDialog from '../extensions/image-group/ImageGroupUploadDialog.vue'
 
 const props = defineProps<{
diff --git a/src/components/TextEditor/components/InsertVideo.vue b/src/components/TextEditor/components/InsertVideo.vue
index 862f51649..91ba164fc 100644
--- a/src/components/TextEditor/components/InsertVideo.vue
+++ b/src/components/TextEditor/components/InsertVideo.vue
@@ -2,7 +2,7 @@
   <slot v-bind="{ onClick: selectAndUploadVideo }"></slot>
 </template>
 <script setup lang="ts">
-import { Editor } from '@tiptap/vue-3'
+import type { Editor } from '@tiptap/vue-3'
 
 const props = defineProps<{
   editor: Editor
diff --git a/src/components/TextEditor/components/LinkPopup.vue b/src/components/TextEditor/components/LinkPopup.vue
index 25596c36c..7aedd12e9 100644
--- a/src/components/TextEditor/components/LinkPopup.vue
+++ b/src/components/TextEditor/components/LinkPopup.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="p-2 w-72 flex items-center gap-2 bg-surface-white shadow-xl rounded"
-  >
+  <div class="flex w-72 items-center gap-2 rounded bg-surface-white p-2 shadow-xl">
     <TextInput
       v-if="edit"
       ref="input"
@@ -14,21 +12,16 @@
     />
     <a
       v-else
-      class="text-ink-gray-700 underline text-sm flex-1 truncate pl-1"
+      class="text-ink-gray-700 flex-1 truncate pl-1 text-sm underline"
       :title="_href"
       :href="_href"
       target="_blank"
     >
       {{ _href }}
     </a>
-    <div class="shrink-0 flex items-center gap-1.5 ml-auto">
+    <div class="ml-auto flex shrink-0 items-center gap-1.5">
       <template v-if="edit">
-        <Button
-          @click="submitLink"
-          tooltip="Submit"
-          :icon="LucideCheck"
-          variant="subtle"
-        />
+        <Button @click="submitLink" tooltip="Submit" :icon="LucideCheck" variant="subtle" />
         <Button
           @click="props.href ? (edit = false) : $emit('updateHref', '')"
           tooltip="Exit"
@@ -37,18 +30,8 @@
         />
       </template>
       <template v-else>
-        <Button
-          @click="copyLink"
-          tooltip="Copy"
-          :icon="LucideCopy"
-          variant="subtle"
-        />
-        <Button
-          @click="edit = true"
-          tooltip="Edit"
-          :icon="LucidePencil"
-          variant="subtle"
-        />
+        <Button @click="copyLink" tooltip="Copy" :icon="LucideCopy" variant="subtle" />
+        <Button @click="edit = true" tooltip="Edit" :icon="LucidePencil" variant="subtle" />
         <Button
           tooltip="Remove"
           variant="subtle"
@@ -62,14 +45,15 @@
 
 <script setup lang="ts">
 import { onMounted, ref, useTemplateRef, nextTick } from 'vue'
-import Button from '../../Button/Button.vue'
-import TextInput from '../../TextInput/TextInput.vue'
-import LucideCopy from '~icons/lucide/copy'
 import LucideCheck from '~icons/lucide/check'
+import LucideCopy from '~icons/lucide/copy'
+import Link2Off from '~icons/lucide/link-2-off'
 import LucidePencil from '~icons/lucide/pencil'
 import LucideX from '~icons/lucide/x'
-import Link2Off from '~icons/lucide/link-2-off'
+
 import { isValidUrl } from '../../../utils/url-validation'
+import Button from '../../Button/Button.vue'
+import TextInput from '../../TextInput/TextInput.vue'
 
 const props = defineProps<{
   href: string
diff --git a/src/components/TextEditor/components/MediaNodeView.vue b/src/components/TextEditor/components/MediaNodeView.vue
index 1a4546427..74fac4188 100644
--- a/src/components/TextEditor/components/MediaNodeView.vue
+++ b/src/components/TextEditor/components/MediaNodeView.vue
@@ -1,20 +1,21 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, h } from 'vue'
 import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
-import LoadingIndicator from '../../LoadingIndicator.vue'
-import Tooltip from '../../Tooltip/Tooltip.vue'
-import { localFileMap } from '../extensions/image/image-extension'
-import { ErrorMessage } from '../../ErrorMessage'
-import LucideAlignLeft from '~icons/lucide/align-left'
+import { ref, onMounted, onUnmounted, computed, h } from 'vue'
 import LucideAlignCenter from '~icons/lucide/align-center'
-import LucideAlignRight from '~icons/lucide/align-right'
-import LucideWrapText from '~icons/lucide/wrap-text'
-import LucideFloatLeft from '~icons/lucide/align-horizontal-justify-start'
 import LucideFloatRight from '~icons/lucide/align-horizontal-justify-end'
+import LucideFloatLeft from '~icons/lucide/align-horizontal-justify-start'
+import LucideAlignLeft from '~icons/lucide/align-left'
+import LucideAlignRight from '~icons/lucide/align-right'
 import LucideNoFloat from '~icons/lucide/align-vertical-space-around'
 import LucideCaptions from '~icons/lucide/captions'
 import LucideMoveDiagonal2 from '~icons/lucide/move-diagonal-2'
 import LucideRotateCw from '~icons/lucide/rotate-cw'
+import LucideWrapText from '~icons/lucide/wrap-text'
+
+import { ErrorMessage } from '../../ErrorMessage'
+import LoadingIndicator from '../../LoadingIndicator.vue'
+import Tooltip from '../../Tooltip/Tooltip.vue'
+import { localFileMap } from '../extensions/image/image-extension'
 
 const props = defineProps(nodeViewProps)
 
@@ -266,90 +267,141 @@ const wrapperClasses = (float: string) => [
 
 <template>
   <NodeViewWrapper as="div" :class="node.attrs.float ? wrapperClasses(node.attrs.float) : 'my-2'">
-    <div ref="containerRef" class="group relative overflow-hidden not-prose rounded-[2px]" :class="[
-      {
-        'ring-2 ring-outline-gray-3 ring-offset-2': selected,
-      },
-      node.attrs.align === 'center' || !node.attrs.align ? 'mx-auto' : '',
-      node.attrs.align === 'right' ? 'ml-auto mr-0' : '',
-      node.attrs.align === 'left' ? 'mr-auto ml-0' : '',
-      !node.attrs.float && 'block max-w-full',
-    ]" :style="{
-      width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
-    }">
+    <div
+      ref="containerRef"
+      class="not-prose group relative overflow-hidden rounded-[2px]"
+      :class="[
+        {
+          'ring-2 ring-outline-gray-3 ring-offset-2': selected,
+        },
+        node.attrs.align === 'center' || !node.attrs.align ? 'mx-auto' : '',
+        node.attrs.align === 'right' ? 'ml-auto mr-0' : '',
+        node.attrs.align === 'left' ? 'ml-0 mr-auto' : '',
+        !node.attrs.float && 'block max-w-full',
+      ]"
+      :style="{
+        width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
+      }"
+    >
       <div v-if="isUploaded || fileContent" class="relative">
-        <img v-if="!isVideo" ref="mediaRef" class="rounded-[2px]" :class="!isUploaded && 'opacity-40'" :src="node.attrs.src || fileContent"
-          :alt="node.attrs.alt || ''" :width="node.attrs.width" :height="node.attrs.height"
-          @click.stop="selectMedia" @load="handleMediaLoaded" />
-        <video v-else ref="mediaRef" class="rounded-[2px]" :class="!isUploaded && 'opacity-40'" :src="node.attrs.src || fileContent"
-          :width="node.attrs.width" :height="node.attrs.height" :autoplay="node.attrs.autoplay"
-          :loop="node.attrs.loop" :muted="node.attrs.muted" :controls="isUploaded" @click.stop="selectMedia"
-          @loadedmetadata="handleMediaLoaded" />
-
-        <div v-if="isUploaded" class="absolute top-2 right-2 items-center bg-black/65 px-1.5 py-1 gap-2 rounded group-hover:flex"
-          :class="selected && isEditable ? 'flex' : 'hidden'">
+        <img
+          v-if="!isVideo"
+          ref="mediaRef"
+          class="rounded-[2px]"
+          :class="!isUploaded && 'opacity-40'"
+          :src="node.attrs.src || fileContent"
+          :alt="node.attrs.alt || ''"
+          :width="node.attrs.width"
+          :height="node.attrs.height"
+          @click.stop="selectMedia"
+          @load="handleMediaLoaded"
+        />
+        <video
+          v-else
+          ref="mediaRef"
+          class="rounded-[2px]"
+          :class="!isUploaded && 'opacity-40'"
+          :src="node.attrs.src || fileContent"
+          :width="node.attrs.width"
+          :height="node.attrs.height"
+          :autoplay="node.attrs.autoplay"
+          :loop="node.attrs.loop"
+          :muted="node.attrs.muted"
+          :controls="isUploaded"
+          @click.stop="selectMedia"
+          @loadedmetadata="handleMediaLoaded"
+        />
+
+        <div
+          v-if="isUploaded"
+          class="absolute right-2 top-2 items-center gap-2 rounded bg-black/65 px-1.5 py-1 group-hover:flex"
+          :class="selected && isEditable ? 'flex' : 'hidden'"
+        >
           <button>
-            <LucideCaptions @click="toggleCaptions" class="size-4"
-              :class="[showCaption ? 'text-ink-white' : 'text-ink-gray-4']" />
+            <LucideCaptions
+              @click="toggleCaptions"
+              class="size-4"
+              :class="[showCaption ? 'text-ink-white' : 'text-ink-gray-4']"
+            />
           </button>
-          <button v-if="!node.attrs.float && !isVideo" @click.stop="toggleAlignPopper"
-            class="hover:text-ink-white text-ink-gray-4"
-            :class="[node.attrs.align ? 'text-ink-white' : 'text-ink-gray-4']">
+          <button
+            v-if="!node.attrs.float && !isVideo"
+            @click.stop="toggleAlignPopper"
+            class="text-ink-gray-4 hover:text-ink-white"
+            :class="[node.attrs.align ? 'text-ink-white' : 'text-ink-gray-4']"
+          >
             <component :is="currentAlignIcon" class="size-4" />
           </button>
-          <button @click.stop="toggleFloatPopper" class="hover:text-ink-white text-ink-gray-4"
-            :class="[node.attrs.float ? 'text-ink-white' : 'text-ink-gray-4']">
+          <button
+            @click.stop="toggleFloatPopper"
+            class="text-ink-gray-4 hover:text-ink-white"
+            :class="[node.attrs.float ? 'text-ink-white' : 'text-ink-gray-4']"
+          >
             <component :is="currentFloatIcon" class="size-4" />
           </button>
 
-          <div ref="alignButtonRef" v-if="showAlignPopper && !isVideo"
-            class="absolute top-full mt-1 right-6 bg-black/65 rounded shadow-lg px-1.5 py-1 z-50 gap-2.5 flex items-center">
+          <div
+            ref="alignButtonRef"
+            v-if="showAlignPopper && !isVideo"
+            class="absolute right-6 top-full z-50 mt-1 flex items-center gap-2.5 rounded bg-black/65 px-1.5 py-1 shadow-lg"
+          >
             <Tooltip text="Align left" class="h-5">
-              <button @click="setAlignment('left')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.align === 'left'
-                ? 'text-ink-white'
-                : 'text-ink-gray-4'
-                ">
+              <button
+                @click="setAlignment('left')"
+                class="text-ink-gray-4 hover:text-ink-white"
+                :class="node.attrs.align === 'left' ? 'text-ink-white' : 'text-ink-gray-4'"
+              >
                 <LucideAlignLeft class="size-4" />
               </button>
             </Tooltip>
             <Tooltip text="Align center" class="h-5">
-              <button @click="setAlignment('center')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.align === 'center'
-                ? 'text-ink-white'
-                : 'text-ink-gray-4'
-                ">
+              <button
+                @click="setAlignment('center')"
+                class="text-ink-gray-4 hover:text-ink-white"
+                :class="node.attrs.align === 'center' ? 'text-ink-white' : 'text-ink-gray-4'"
+              >
                 <LucideAlignCenter class="size-4" />
               </button>
             </Tooltip>
             <Tooltip text="Align right" class="h-5">
-              <button @click="setAlignment('right')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.align === 'right'
-                ? 'text-ink-white'
-                : 'text-ink-gray-4'
-                ">
+              <button
+                @click="setAlignment('right')"
+                class="text-ink-gray-4 hover:text-ink-white"
+                :class="node.attrs.align === 'right' ? 'text-ink-white' : 'text-ink-gray-4'"
+              >
                 <LucideAlignRight class="size-4" />
               </button>
             </Tooltip>
           </div>
 
-          <div v-if="showFloatPopper" ref="floatButtonRef"
-            class="absolute top-full mt-1 right-0 bg-black/65 rounded shadow-lg px-1.5 py-1 z-50 gap-2.5 flex items-center">
+          <div
+            v-if="showFloatPopper"
+            ref="floatButtonRef"
+            class="absolute right-0 top-full z-50 mt-1 flex items-center gap-2.5 rounded bg-black/65 px-1.5 py-1 shadow-lg"
+          >
             <Tooltip text="Float left" class="h-5">
-              <button @click="setFloat('left')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.float === 'left'
-                ? 'text-ink-white'
-                : 'text-ink-gray-4'
-                ">
+              <button
+                @click="setFloat('left')"
+                class="text-ink-gray-4 hover:text-ink-white"
+                :class="node.attrs.float === 'left' ? 'text-ink-white' : 'text-ink-gray-4'"
+              >
                 <LucideFloatLeft class="size-4" />
               </button>
             </Tooltip>
             <Tooltip text="Float right" class="h-5">
-              <button @click="setFloat('right')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.float === 'right'
-                ? 'text-ink-white'
-                : 'text-ink-gray-4'
-                ">
+              <button
+                @click="setFloat('right')"
+                class="text-ink-gray-4 hover:text-ink-white"
+                :class="node.attrs.float === 'right' ? 'text-ink-white' : 'text-ink-gray-4'"
+              >
                 <LucideFloatRight class="size-4" />
               </button>
             </Tooltip>
             <Tooltip v-if="node.attrs.float" text="Remove float" class="h-5">
-              <button @click="setFloat(null)" class="text-ink-gray-4 hover:text-ink-white hover:bg-transparent">
+              <button
+                @click="setFloat(null)"
+                class="text-ink-gray-4 hover:bg-transparent hover:text-ink-white"
+              >
                 <LucideNoFloat class="size-4" />
               </button>
             </Tooltip>
@@ -359,38 +411,70 @@ const wrapperClasses = (float: string) => [
         <Button
           v-else
           variant="solid"
-          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+          class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
           :icon-left="h(LucideRotateCw, { class: 'size-4' })"
           label="Try again"
-          @click="isVideo ? editor.commands.reuploadVideo(node.attrs.uploadId) : editor.commands.reuploadImage(node.attrs.uploadId)"
+          @click="
+            isVideo
+              ? editor.commands.reuploadVideo(node.attrs.uploadId)
+              : editor.commands.reuploadImage(node.attrs.uploadId)
+          "
         />
 
-        <button v-if="selected && isEditable && isUploaded" class="absolute bottom-2 right-2 cursor-nw-resize bg-black/65 rounded p-1"
-          @mousedown.prevent="startResize">
-          <LucideMoveDiagonal2 class="text-white size-4" />
+        <button
+          v-if="selected && isEditable && isUploaded"
+          class="absolute bottom-2 right-2 cursor-nw-resize rounded bg-black/65 p-1"
+          @mousedown.prevent="startResize"
+        >
+          <LucideMoveDiagonal2 class="size-4 text-white" />
         </button>
-        <div v-if="node.attrs.loading" class="inset-0 absolute flex items-center justify-center z-10">
+        <div
+          v-if="node.attrs.loading"
+          class="absolute inset-0 z-10 flex items-center justify-center"
+        >
           <div
-            class="bg-gray-900/80 p-2 inset-0 leading-none rounded-sm flex flex-col items-center justify-center gap-2">
+            class="inset-0 flex flex-col items-center justify-center gap-2 rounded-sm bg-gray-900/80 p-2 leading-none"
+          >
             <div class="flex items-center gap-2">
-              <LoadingIndicator class="text-gray-100 size-4" />
+              <LoadingIndicator class="size-4 text-gray-100" />
               <span class="text-gray-100">Uploading {{ isVideo ? 'video' : 'image' }}...</span>
             </div>
           </div>
         </div>
       </div>
-      <div v-else class="flex flex-col items-center justify-center gap-2 border rounded text-ink-gray-6 text-sm py-5 max-w-full" :class="{ 'border-none': selected }" :style="{ width: node.attrs.width + 'px', aspectRatio: node.attrs.width && node.attrs.height ? `${node.attrs.width} / ${node.attrs.height}` : undefined,}">
-        <div class="text-ink-gray-8 text-base">This {{ isVideo ? 'video' : 'image' }} hasn't yet been uploaded.</div>
-        <div v-if="node.attrs.error" class="text-sm text-ink-red-4">Upload failed: {{ node.attrs.error }}</div>
+      <div
+        v-else
+        class="flex max-w-full flex-col items-center justify-center gap-2 rounded border py-5 text-sm text-ink-gray-6"
+        :class="{ 'border-none': selected }"
+        :style="{
+          width: node.attrs.width + 'px',
+          aspectRatio:
+            node.attrs.width && node.attrs.height
+              ? `${node.attrs.width} / ${node.attrs.height}`
+              : undefined,
+        }"
+      >
+        <div class="text-base text-ink-gray-8">
+          This {{ isVideo ? 'video' : 'image' }} hasn't yet been uploaded.
+        </div>
+        <div v-if="node.attrs.error" class="text-sm text-ink-red-4">
+          Upload failed: {{ node.attrs.error }}
+        </div>
       </div>
 
-      <input v-if="(node.attrs.alt || showCaption) && !node.attrs.error" v-model="caption"
-        class="w-full text-center bg-transparent text-sm text-ink-gray-6 h-7 border-none focus:ring-0 placeholder-ink-gray-4"
-        placeholder="Add caption" :disabled="!isEditable" @change="updateCaption" @keydown="handleKeydown" />
+      <input
+        v-if="(node.attrs.alt || showCaption) && !node.attrs.error"
+        v-model="caption"
+        class="h-7 w-full border-none bg-transparent text-center text-sm text-ink-gray-6 placeholder-ink-gray-4 focus:ring-0"
+        placeholder="Add caption"
+        :disabled="!isEditable"
+        @change="updateCaption"
+        @keydown="handleKeydown"
+      />
 
       <div v-if="node.attrs.error && fileContent" class="w-full py-1.5 text-center">
         <ErrorMessage :message="`Upload failed: ${node.attrs.error}`" />
       </div>
     </div>
   </NodeViewWrapper>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/TextEditor/components/MentionList.vue b/src/components/TextEditor/components/MentionList.vue
index eac67f88d..6c789674a 100644
--- a/src/components/TextEditor/components/MentionList.vue
+++ b/src/components/TextEditor/components/MentionList.vue
@@ -59,8 +59,7 @@ export default {
       return false
     },
     upHandler() {
-      this.selectedIndex =
-        (this.selectedIndex + this.items.length - 1) % this.items.length
+      this.selectedIndex = (this.selectedIndex + this.items.length - 1) % this.items.length
     },
     downHandler() {
       this.selectedIndex = (this.selectedIndex + 1) % this.items.length
diff --git a/src/components/TextEditor/components/Menu.vue b/src/components/TextEditor/components/Menu.vue
index de589d177..8dbf71b37 100644
--- a/src/components/TextEditor/components/Menu.vue
+++ b/src/components/TextEditor/components/Menu.vue
@@ -5,24 +5,15 @@
         v-for="(button, index) in buttons"
         :key="button?.label || button?.type || `btn-${index}`"
       >
-        <template
-          v-if="button && (!button.condition || button.condition(editor))"
-        >
-          <div
-            class="h-4 w-[2px] border-l"
-            v-if="button && button.type === 'separator'"
-          ></div>
+        <template v-if="button && (!button.condition || button.condition(editor))">
+          <div class="h-4 w-[2px] border-l" v-if="button && button.type === 'separator'"></div>
           <div class="shrink-0" v-else-if="button && button.map">
             <Popover>
               <template #target="{ togglePopover }">
                 <button
                   class="rounded p-1 text-base font-medium text-ink-gray-8 transition-colors"
                   @click="togglePopover"
-                  :class="
-                    getActiveButton(button)
-                      ? 'bg-surface-gray-3'
-                      : 'hover:bg-surface-gray-2'
-                  "
+                  :class="getActiveButton(button) ? 'bg-surface-gray-3' : 'hover:bg-surface-gray-2'"
                 >
                   <component
                     v-if="(getActiveButton(button) || button[0]).icon"
@@ -36,7 +27,7 @@
               </template>
               <template #body="{ close }">
                 <ul
-                  class="p-1.5 mt-2 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+                  class="mt-2 rounded-lg bg-surface-modal p-1.5 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
                 >
                   <li
                     v-for="option in button"
@@ -49,15 +40,11 @@
                     >
                       <template v-slot="componentSlotProps">
                         <button
-                          class="w-full h-7 rounded px-2 text-base flex items-center gap-2 hover:bg-surface-gray-3"
-                          :class="
-                            option.isDisabled?.(editor) &&
-                            'opacity-50 pointer-events-none'
-                          "
+                          class="flex h-7 w-full items-center gap-2 rounded px-2 text-base hover:bg-surface-gray-3"
+                          :class="option.isDisabled?.(editor) && 'pointer-events-none opacity-50'"
                           @click="
                             () => {
-                              if (componentSlotProps?.onClick)
-                                componentSlotProps.onClick(option)
+                              if (componentSlotProps?.onClick) componentSlotProps.onClick(option)
                               else if (option.action) onButtonClick(option)
 
                               close()
@@ -65,15 +52,8 @@
                           "
                           :title="option.label"
                         >
-                          <component
-                            v-if="option.icon"
-                            :is="option.icon"
-                            class="h-4 w-4"
-                          />
-                          <span
-                            class="whitespace-nowrap text-ink-gray-7"
-                            v-if="option.label"
-                          >
+                          <component v-if="option.icon" :is="option.icon" class="h-4 w-4" />
+                          <span class="whitespace-nowrap text-ink-gray-7" v-if="option.label">
                             {{ option.label }}
                           </span>
                         </button>
@@ -81,11 +61,8 @@
                     </component>
                     <button
                       v-else
-                      class="w-full h-7 rounded px-2 text-base flex items-center gap-2 hover:bg-surface-gray-3"
-                      :class="
-                        option.isDisabled?.(editor) &&
-                        'opacity-50 pointer-events-none'
-                      "
+                      class="flex h-7 w-full items-center gap-2 rounded px-2 text-base hover:bg-surface-gray-3"
+                      :class="option.isDisabled?.(editor) && 'pointer-events-none opacity-50'"
                       @click="
                         () => {
                           if (!option.action) return
@@ -99,11 +76,9 @@
                         :is="option.icon"
                         class="size-4 flex-shrink-0 text-ink-gray-6"
                       />
-                      <span
-                        v-if="option.label"
-                        class="whitespace-nowrap text-ink-gray-7"
-                        >{{ option.label }}</span
-                      >
+                      <span v-if="option.label" class="whitespace-nowrap text-ink-gray-7">{{
+                        option.label
+                      }}</span>
                     </button>
                   </li>
                 </ul>
@@ -114,27 +89,19 @@
             v-else-if="!button.component"
             class="flex rounded text-ink-gray-8 transition-colors focus-within:ring-0"
             :class="[
-              buttons.length > 1 ? 'p-1' : 'p-1.5 border',
-              button.isDisabled?.(editor) && 'opacity-50 pointer-events-none',
-              button.isActive?.(editor)
-                ? 'bg-surface-gray-3'
-                : 'hover:bg-surface-gray-2',
+              buttons.length > 1 ? 'p-1' : 'border p-1.5',
+              button.isDisabled?.(editor) && 'pointer-events-none opacity-50',
+              button.isActive?.(editor) ? 'bg-surface-gray-3' : 'hover:bg-surface-gray-2',
               button.class,
             ]"
             @click="onButtonClick(button)"
             :title="button.label || button.text"
           >
             <component v-if="button.icon" :is="button.icon" class="h-4 w-4" />
-            <span
-              class="inline-block h-4 min-w-[1rem] text-sm leading-4"
-              v-else-if="button.text"
-            >
+            <span class="inline-block h-4 min-w-[1rem] text-sm leading-4" v-else-if="button.text">
               {{ button.text }}
             </span>
-            <span
-              class="inline-block h-4 min-w-[1rem] text-sm leading-4"
-              v-else-if="button.label"
-            >
+            <span class="inline-block h-4 min-w-[1rem] text-sm leading-4" v-else-if="button.label">
               {{ button.label }}
             </span>
           </button>
@@ -144,8 +111,7 @@
                 <button
                   class="flex rounded p-1 text-ink-gray-8 transition-colors"
                   :class="[
-                    button.isDisabled?.(editor) &&
-                      'opacity-50 pointer-events-none',
+                    button.isDisabled?.(editor) && 'pointer-events-none opacity-50',
                     button.isActive?.(editor) || componentSlotProps?.isActive
                       ? 'bg-surface-gray-3'
                       : 'hover:bg-surface-gray-2',
@@ -158,15 +124,8 @@
                   "
                   :title="button.label"
                 >
-                  <component
-                    v-if="button.icon"
-                    :is="button.icon"
-                    class="h-4 w-4"
-                  />
-                  <span
-                    class="inline-block h-4 min-w-[1rem] text-sm leading-4"
-                    v-else
-                  >
+                  <component v-if="button.icon" :is="button.icon" class="h-4 w-4" />
+                  <span class="inline-block h-4 min-w-[1rem] text-sm leading-4" v-else>
                     {{ button.text }}
                   </span>
                 </button>
@@ -176,23 +135,15 @@
               <button
                 class="flex rounded p-1 text-ink-gray-8 transition-colors"
                 :class="[
-                  button.isDisabled?.(editor) &&
-                    'opacity-50 pointer-events-none',
+                  button.isDisabled?.(editor) && 'pointer-events-none opacity-50',
                   'hover:bg-surface-gray-2',
                   button.class,
                 ]"
                 @click="onButtonClick(button)"
                 :title="button.label"
               >
-                <component
-                  v-if="button.icon"
-                  :is="button.icon"
-                  class="h-4 w-4"
-                />
-                <span
-                  class="inline-block h-4 min-w-[1rem] text-sm leading-4"
-                  v-else
-                >
+                <component v-if="button.icon" :is="button.icon" class="h-4 w-4" />
+                <span class="inline-block h-4 min-w-[1rem] text-sm leading-4" v-else>
                   {{ button.text }}
                 </span>
               </button></template
@@ -204,9 +155,10 @@
   </div>
 </template>
 <script setup>
-import Popover from '../../Popover/Popover.vue'
 import { inject } from 'vue'
 
+import Popover from '../../Popover/Popover.vue'
+
 const props = defineProps({
   buttons: Array,
 })
diff --git a/src/components/TextEditor/components/TextEditorBubbleMenu.vue b/src/components/TextEditor/components/TextEditorBubbleMenu.vue
index f0d1f11e5..e8f7be8dc 100644
--- a/src/components/TextEditor/components/TextEditorBubbleMenu.vue
+++ b/src/components/TextEditor/components/TextEditorBubbleMenu.vue
@@ -1,11 +1,21 @@
 <template>
-  <BubbleMenu v-if="bubbleMenuButtons" class="bubble-menu rounded-md z-[100]"
-    :class="bubbleMenuButtons.length > 1 && 'shadow-sm'" :editor="editor" v-bind="options">
-    <Menu class="rounded" :class="bubbleMenuButtons.length > 1 && 'shadow-lg'" :buttons="bubbleMenuButtons" />
+  <BubbleMenu
+    v-if="bubbleMenuButtons"
+    class="bubble-menu z-[100] rounded-md"
+    :class="bubbleMenuButtons.length > 1 && 'shadow-sm'"
+    :editor="editor"
+    v-bind="options"
+  >
+    <Menu
+      class="rounded"
+      :class="bubbleMenuButtons.length > 1 && 'shadow-lg'"
+      :buttons="bubbleMenuButtons"
+    />
   </BubbleMenu>
 </template>
 <script>
 import { BubbleMenu } from '@tiptap/vue-3/menus'
+
 import { createEditorButton } from '../utils'
 import Menu from './Menu.vue'
 
diff --git a/src/components/TextEditor/components/TextEditorFixedMenu.vue b/src/components/TextEditor/components/TextEditorFixedMenu.vue
index 463249fb9..327f18fd8 100644
--- a/src/components/TextEditor/components/TextEditorFixedMenu.vue
+++ b/src/components/TextEditor/components/TextEditorFixedMenu.vue
@@ -2,8 +2,8 @@
   <Menu v-if="fixedMenuButtons" :buttons="fixedMenuButtons" />
 </template>
 <script>
-import Menu from './Menu.vue'
 import { createEditorButton } from '../utils'
+import Menu from './Menu.vue'
 
 export default {
   name: 'TextEditorFixedMenu',
@@ -19,14 +19,7 @@ export default {
       } else {
         buttons = [
           'Paragraph',
-          [
-            'Heading 1',
-            'Heading 2',
-            'Heading 3',
-            'Heading 4',
-            'Heading 5',
-            'Heading 6',
-          ],
+          ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Heading 5', 'Heading 6'],
           'Separator',
           'Bold',
           'Italic',
diff --git a/src/components/TextEditor/components/TextEditorFloatingMenu.vue b/src/components/TextEditor/components/TextEditorFloatingMenu.vue
index 241da4e75..917b3ce52 100644
--- a/src/components/TextEditor/components/TextEditorFloatingMenu.vue
+++ b/src/components/TextEditor/components/TextEditorFloatingMenu.vue
@@ -9,11 +9,7 @@
       v-for="button in floatingMenuButtons"
       :key="button.label"
       class="flex rounded p-1 text-ink-gray-8 transition-colors"
-      :class="
-        button.isActive(editor)
-          ? 'bg-surface-gray-2'
-          : 'hover:bg-surface-gray-2'
-      "
+      :class="button.isActive(editor) ? 'bg-surface-gray-2' : 'hover:bg-surface-gray-2'"
       @click="() => button.action(editor)"
       :title="button.label"
     >
@@ -26,6 +22,7 @@
 </template>
 <script>
 import { FloatingMenu } from '@tiptap/vue-3/menus'
+
 import { createEditorButton } from '../utils'
 
 export default {
diff --git a/src/components/TextEditor/extensions/code-block.ts b/src/components/TextEditor/extensions/code-block.ts
index 68e6145df..508481828 100644
--- a/src/components/TextEditor/extensions/code-block.ts
+++ b/src/components/TextEditor/extensions/code-block.ts
@@ -1,9 +1,10 @@
-import { common, createLowlight } from 'lowlight'
-import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import { markInputRule } from '@tiptap/core'
 import Code from '@tiptap/extension-code'
-import CodeBlockComponent from '../components/CodeBlockComponent.vue'
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
-import { markInputRule } from '@tiptap/core'
+import { common, createLowlight } from 'lowlight'
+
+import CodeBlockComponent from '../components/CodeBlockComponent.vue'
 
 const INDENT = ' '.repeat(4)
 export const inputRegex = /(?<=^|[^`])`([^`]+)`(?!`)$/
@@ -46,7 +47,7 @@ export const ExtendedCodeBlock = CodeBlockLowlight.extend({
   },
   addKeyboardShortcuts() {
     return {
-      Tab: () => {
+      'Tab': () => {
         const { state, dispatch } = this.editor.view
         const ctx = getCodeBlockCtx(state)
         if (!ctx) return false
diff --git a/src/components/TextEditor/extensions/color/color-extension.ts b/src/components/TextEditor/extensions/color/color-extension.ts
index 3ce44170c..fe946c17e 100644
--- a/src/components/TextEditor/extensions/color/color-extension.ts
+++ b/src/components/TextEditor/extensions/color/color-extension.ts
@@ -1,6 +1,6 @@
 import '@tiptap/extension-text-style'
-
 import { Extension } from '@tiptap/core'
+
 import { extractTextColorFromStyle } from '../shared/color-utils'
 
 export type ColorOptions = {
@@ -72,18 +72,13 @@ export const NamedColorExtension = Extension.create<ColorOptions>({
               // Check for CSS custom property format in style attribute
               const style = element.getAttribute('style')
               if (style) {
-                const colorMatch = style.match(
-                  /color:\s*var\(--prose-color-(\w+)\)/,
-                )
+                const colorMatch = style.match(/color:\s*var\(--prose-color-(\w+)\)/)
                 if (colorMatch && this.options.colors.includes(colorMatch[1])) {
                   return colorMatch[1]
                 }
 
                 // Fallback: try extracting from legacy formats
-                const extractedColor = extractTextColorFromStyle(
-                  style,
-                  this.options.colors,
-                )
+                const extractedColor = extractTextColorFromStyle(style, this.options.colors)
                 if (extractedColor) {
                   return extractedColor
                 }
@@ -92,10 +87,7 @@ export const NamedColorExtension = Extension.create<ColorOptions>({
               return null
             },
             renderHTML: (attributes) => {
-              if (
-                !attributes.color ||
-                !this.options.colors.includes(attributes.color)
-              ) {
+              if (!attributes.color || !this.options.colors.includes(attributes.color)) {
                 return {}
               }
               return {
@@ -115,9 +107,7 @@ export const NamedColorExtension = Extension.create<ColorOptions>({
         ({ chain }) => {
           // Validate that the color name is allowed
           if (!this.options.colors.includes(colorName)) {
-            console.warn(
-              `Color "${colorName}" is not in the allowed colors list`,
-            )
+            console.warn(`Color "${colorName}" is not in the allowed colors list`)
             return false
           }
 
@@ -128,10 +118,7 @@ export const NamedColorExtension = Extension.create<ColorOptions>({
       unsetColor:
         () =>
         ({ chain }) => {
-          return chain()
-            .setMark('textStyle', { color: null })
-            .removeEmptyTextStyle()
-            .run()
+          return chain().setMark('textStyle', { color: null }).removeEmptyTextStyle().run()
         },
     }
   },
diff --git a/src/components/TextEditor/extensions/content-paste-extension.ts b/src/components/TextEditor/extensions/content-paste-extension.ts
index ca5ad5433..ef650a26b 100644
--- a/src/components/TextEditor/extensions/content-paste-extension.ts
+++ b/src/components/TextEditor/extensions/content-paste-extension.ts
@@ -1,8 +1,10 @@
-import { Extension, Node } from '@tiptap/core'
-import { Plugin, PluginKey } from '@tiptap/pm/state'
+import type { Node } from '@tiptap/core'
+import { Extension } from '@tiptap/core'
 import { Slice, Fragment } from '@tiptap/pm/model'
 import { DOMParser } from '@tiptap/pm/model'
-import { EditorView } from '@tiptap/pm/view'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import type { EditorView } from '@tiptap/pm/view'
+
 import { detectMarkdown, markdownToHTML } from '../../../utils/markdown'
 import { processMultipleImages } from './image/image-extension'
 
@@ -35,12 +37,8 @@ export const ContentPasteExtension = Extension.create<ContentPasteOptions>({
             if (!this.options.enabled) return false
 
             // handle image pasting
-            const files: File[] | [] = Array.from(
-              event.clipboardData?.files || [],
-            )
-            const images = Array.from(files).filter((file) =>
-              file.type.startsWith('image/'),
-            )
+            const files: File[] | [] = Array.from(event.clipboardData?.files || [])
+            const images = Array.from(files).filter((file) => file.type.startsWith('image/'))
             if (images.length > 0) {
               processMultipleImages(images, view, null, extensionThis.options)
               return true
diff --git a/src/components/TextEditor/extensions/emoji/EmojiList.vue b/src/components/TextEditor/extensions/emoji/EmojiList.vue
index f950c28a1..8233ff2dc 100644
--- a/src/components/TextEditor/extensions/emoji/EmojiList.vue
+++ b/src/components/TextEditor/extensions/emoji/EmojiList.vue
@@ -13,9 +13,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, type PropType } from 'vue'
-import SuggestionList from '../suggestion/SuggestionList.vue'
 import type { Editor, Range } from '@tiptap/core'
+import { ref, type PropType } from 'vue'
+
+import type SuggestionList from '../suggestion/SuggestionList.vue'
 import type { EmojiItem } from './emoji-extension'
 
 const props = defineProps({
diff --git a/src/components/TextEditor/extensions/emoji/emoji-extension.ts b/src/components/TextEditor/extensions/emoji/emoji-extension.ts
index 39f29641c..6092159b5 100644
--- a/src/components/TextEditor/extensions/emoji/emoji-extension.ts
+++ b/src/components/TextEditor/extensions/emoji/emoji-extension.ts
@@ -1,8 +1,7 @@
 import { PluginKey } from '@tiptap/pm/state'
-import {
-  BaseSuggestionItem,
-  createSuggestionExtension,
-} from '../suggestion/createSuggestionExtension'
+
+import type { BaseSuggestionItem } from '../suggestion/createSuggestionExtension'
+import { createSuggestionExtension } from '../suggestion/createSuggestionExtension'
 import EmojiList from './EmojiList.vue'
 import _EMOJIS from './emojis.json'
 
@@ -18,10 +17,8 @@ export default createSuggestionExtension<EmojiItem>({
   char: ':',
   pluginKey: new PluginKey('emojiSuggestion'),
   items: ({ query }: { query: string }) => {
-    return EMOJIS.filter((item) =>
-      item.name.toLowerCase().includes(query.toLowerCase()),
-    )
-      .sort((a, b) => {
+    return EMOJIS.filter((item) => item.name.toLowerCase().includes(query.toLowerCase()))
+      .toSorted((a, b) => {
         const aName = a.name.toLowerCase()
         const bName = b.name.toLowerCase()
         const queryLower = query.toLowerCase()
@@ -31,10 +28,8 @@ export default createSuggestionExtension<EmojiItem>({
         if (bName === queryLower && aName !== queryLower) return 1
 
         // Then names starting with the query
-        if (aName.startsWith(queryLower) && !bName.startsWith(queryLower))
-          return -1
-        if (bName.startsWith(queryLower) && !aName.startsWith(queryLower))
-          return 1
+        if (aName.startsWith(queryLower) && !bName.startsWith(queryLower)) return -1
+        if (bName.startsWith(queryLower) && !aName.startsWith(queryLower)) return 1
 
         // Then sort by name length (shorter first)
         return aName.length - bName.length
diff --git a/src/components/TextEditor/extensions/heading/heading.ts b/src/components/TextEditor/extensions/heading/heading.ts
index bd1b125dd..09f57b9a8 100644
--- a/src/components/TextEditor/extensions/heading/heading.ts
+++ b/src/components/TextEditor/extensions/heading/heading.ts
@@ -1,5 +1,5 @@
-import TiptapHeading from '@tiptap/extension-heading'
 import { textblockTypeInputRule } from '@tiptap/core'
+import TiptapHeading from '@tiptap/extension-heading'
 
 // This custom Heading extension modifies the default input rule behavior.
 // The default Tiptap heading input rule converts text to a heading when '#' is followed by any whitespace (including Enter).
diff --git a/src/components/TextEditor/extensions/highlight/highlight-extension.ts b/src/components/TextEditor/extensions/highlight/highlight-extension.ts
index 1de9e0d5b..3d3ecad01 100644
--- a/src/components/TextEditor/extensions/highlight/highlight-extension.ts
+++ b/src/components/TextEditor/extensions/highlight/highlight-extension.ts
@@ -1,4 +1,5 @@
 import { Mark, mergeAttributes } from '@tiptap/core'
+
 import {
   getClosestNamedColor,
   highlightColorHexMap,
@@ -88,13 +89,8 @@ export const NamedHighlightExtension = Mark.create<HighlightOptions>({
           // Check for CSS custom property format in style attribute
           const style = element.getAttribute('style')
           if (style) {
-            const highlightMatch = style.match(
-              /background-color:\s*var\(--prose-highlight-(\w+)\)/,
-            )
-            if (
-              highlightMatch &&
-              this.options.colors.includes(highlightMatch[1])
-            ) {
+            const highlightMatch = style.match(/background-color:\s*var\(--prose-highlight-(\w+)\)/)
+            if (highlightMatch && this.options.colors.includes(highlightMatch[1])) {
               return highlightMatch[1]
             }
           }
@@ -115,10 +111,7 @@ export const NamedHighlightExtension = Mark.create<HighlightOptions>({
 
           // Try extracting from style attribute as fallback
           if (style) {
-            const extractedColor = extractHighlightColorFromStyle(
-              style,
-              this.options.colors,
-            )
+            const extractedColor = extractHighlightColorFromStyle(style, this.options.colors)
             if (extractedColor) {
               return extractedColor
             }
@@ -127,10 +120,7 @@ export const NamedHighlightExtension = Mark.create<HighlightOptions>({
           return null
         },
         renderHTML: (attributes) => {
-          if (
-            !attributes.color ||
-            !this.options.colors.includes(attributes.color)
-          ) {
+          if (!attributes.color || !this.options.colors.includes(attributes.color)) {
             return {}
           }
 
@@ -151,11 +141,7 @@ export const NamedHighlightExtension = Mark.create<HighlightOptions>({
   },
 
   renderHTML({ HTMLAttributes }) {
-    return [
-      'mark',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-      0,
-    ]
+    return ['mark', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
   },
 
   addCommands() {
@@ -165,9 +151,7 @@ export const NamedHighlightExtension = Mark.create<HighlightOptions>({
         ({ chain, commands, editor, state }) => {
           // Validate that the color name is allowed
           if (!this.options.colors.includes(colorName)) {
-            console.warn(
-              `Highlight color "${colorName}" is not in the allowed colors list`,
-            )
+            console.warn(`Highlight color "${colorName}" is not in the allowed colors list`)
             return false
           }
 
@@ -181,12 +165,10 @@ export const NamedHighlightExtension = Mark.create<HighlightOptions>({
           }
 
           if (!empty) {
-            commandChain = commandChain
-              .setTextSelection(to)
-              .command(({ tr }) => {
-                tr.setStoredMarks([])
-                return true
-              })
+            commandChain = commandChain.setTextSelection(to).command(({ tr }) => {
+              tr.setStoredMarks([])
+              return true
+            })
           }
 
           return commandChain.focus().run()
@@ -196,35 +178,26 @@ export const NamedHighlightExtension = Mark.create<HighlightOptions>({
         ({ chain, commands, editor, state }) => {
           // Validate that the color name is allowed
           if (!this.options.colors.includes(colorName)) {
-            console.warn(
-              `Highlight color "${colorName}" is not in the allowed colors list`,
-            )
+            console.warn(`Highlight color "${colorName}" is not in the allowed colors list`)
             return false
           }
 
           const { to, empty } = state.selection // Get original selection details
-          const highlightAttributes = this.options.multicolor
-            ? { color: colorName }
-            : undefined
+          const highlightAttributes = this.options.multicolor ? { color: colorName } : undefined
 
           // Check if the mark is currently active with the given attributes *before* toggling
           // This helps determine if the toggle action will be setting or unsetting the mark.
-          const isCurrentlyActive = editor.isActive(
-            this.name,
-            highlightAttributes,
-          )
+          const isCurrentlyActive = editor.isActive(this.name, highlightAttributes)
 
           let commandChain = chain().toggleMark(this.name, highlightAttributes)
 
           // If the selection was not empty AND the toggle action is about to *set* the mark
           // (i.e., it wasn't active before)
           if (!empty && !isCurrentlyActive) {
-            commandChain = commandChain
-              .setTextSelection(to)
-              .command(({ tr }) => {
-                tr.setStoredMarks([])
-                return true
-              })
+            commandChain = commandChain.setTextSelection(to).command(({ tr }) => {
+              tr.setStoredMarks([])
+              return true
+            })
           }
 
           return commandChain.focus().run()
diff --git a/src/components/TextEditor/extensions/iframe/IframeNodeView.vue b/src/components/TextEditor/extensions/iframe/IframeNodeView.vue
index 44f3331eb..965a15d50 100644
--- a/src/components/TextEditor/extensions/iframe/IframeNodeView.vue
+++ b/src/components/TextEditor/extensions/iframe/IframeNodeView.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, nextTick } from 'vue'
 import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
-import { detectPlatform, calculateAspectRatio } from './utils'
-import LucideMoveDiagonal2 from '~icons/lucide/move-diagonal-2'
-import LucideAlignLeft from '~icons/lucide/align-left'
+import { ref, onMounted, computed, nextTick } from 'vue'
 import LucideAlignCenter from '~icons/lucide/align-center'
+import LucideAlignLeft from '~icons/lucide/align-left'
 import LucideAlignRight from '~icons/lucide/align-right'
+import LucideMoveDiagonal2 from '~icons/lucide/move-diagonal-2'
+
+import { detectPlatform, calculateAspectRatio } from './utils'
 
 const props = defineProps(nodeViewProps)
 
@@ -14,7 +15,7 @@ const containerRef = ref<HTMLDivElement | null>(null)
 const isResizing = ref(false)
 const startDragX = ref(0)
 const startWidth = ref(0)
-const originalAspectRatio = ref(9/16) // Default 16:9
+const originalAspectRatio = ref(9 / 16) // Default 16:9
 const isEditable = ref(false)
 
 function selectIframe() {
@@ -28,19 +29,19 @@ const platformInfo = computed(() => {
     const aspectInfo = calculateAspectRatio(props.node.attrs.src)
     return {
       platform: platform?.name || 'Generic',
-      aspectRatio: aspectInfo.ratio
+      aspectRatio: aspectInfo.ratio,
     }
   }
-  return { platform: 'Generic', aspectRatio: 9/16 }
+  return { platform: 'Generic', aspectRatio: 9 / 16 }
 })
 
 const iframeStyles = computed(() => {
   const width = props.node.attrs.width || 640
-  const height = props.node.attrs.height || (width * originalAspectRatio.value)
+  const height = props.node.attrs.height || width * originalAspectRatio.value
 
   return {
     width: `${width}px`,
-    height: `${height}px`
+    height: `${height}px`,
   }
 })
 
@@ -75,7 +76,7 @@ function startResize(event: MouseEvent) {
     originalAspectRatio.value = props.node.attrs.aspectRatio
   } else {
     const width = props.node.attrs.width || startWidth.value
-    const height = props.node.attrs.height || (width * originalAspectRatio.value)
+    const height = props.node.attrs.height || width * originalAspectRatio.value
     if (width && height) {
       originalAspectRatio.value = height / width
     }
@@ -125,7 +126,7 @@ function stopResize() {
     props.updateAttributes({
       width: finalWidth,
       height: finalHeight,
-      aspectRatio: originalAspectRatio.value
+      aspectRatio: originalAspectRatio.value,
     })
 
     // Clear temporary styles immediately (like image extension)
@@ -185,16 +186,16 @@ function setCursorBeforeIframe() {
   <NodeViewWrapper>
     <div
       ref="containerRef"
-      class="relative overflow-hidden not-prose my-6 rounded-lg block max-w-full focus:outline-none"
+      class="not-prose relative my-6 block max-w-full overflow-hidden rounded-lg focus:outline-none"
       :class="[
         { 'ring-2 ring-outline-gray-3 ring-offset-2': selected },
         node.attrs.align === 'center' ? 'mx-auto' : '',
         node.attrs.align === 'right' ? 'ml-auto mr-0' : '',
-        node.attrs.align === 'left' ? 'mr-auto ml-0' : '',
+        node.attrs.align === 'left' ? 'ml-0 mr-auto' : '',
       ]"
       :style="{
         width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
-        maxWidth: '100%'
+        maxWidth: '100%',
       }"
       @keydown="handleKeydown"
       tabindex="0"
@@ -203,7 +204,7 @@ function setCursorBeforeIframe() {
         <iframe
           v-if="node.attrs.src"
           ref="iframeRef"
-          class="rounded-lg border-0 block max-w-full h-auto"
+          class="block h-auto max-w-full rounded-lg border-0"
           :class="{
             'pointer-events-none': isEditable && !props.node.attrs.interactive,
           }"
@@ -221,22 +222,22 @@ function setCursorBeforeIframe() {
         <!-- Transparent overlay for selection in edit mode -->
         <div
           v-if="isEditable && !props.node.attrs.interactive"
-          class="absolute inset-0 cursor-pointer z-10"
+          class="absolute inset-0 z-10 cursor-pointer"
           @click.stop="selectIframe"
         ></div>
 
         <!-- Controls overlay -->
-        <div class="absolute bottom-2 right-2 flex items-center gap-2 z-20">
+        <div class="absolute bottom-2 right-2 z-20 flex items-center gap-2">
           <!-- Alignment Controls -->
           <div
             v-if="selected && isEditable"
-            class="flex divide-x divide-ink-gray-6 rounded-md bg-black/65"
+            class="divide-ink-gray-6 flex divide-x rounded-md bg-black/65"
           >
             <button
               @click.stop="setAlignment('left')"
               :class="[
-                'px-1.5 py-1 text-ink-gray-4 hover:text-white transition-colors duration-150',
-                { 'text-white': node.attrs.align === 'left' }
+                'px-1.5 py-1 text-ink-gray-4 transition-colors duration-150 hover:text-white',
+                { 'text-white': node.attrs.align === 'left' },
               ]"
               title="Align Left"
             >
@@ -245,8 +246,8 @@ function setCursorBeforeIframe() {
             <button
               @click.stop="setAlignment('center')"
               :class="[
-                'px-1.5 py-1 text-ink-gray-4 hover:text-white transition-colors duration-150',
-                { 'text-white': node.attrs.align === 'center' }
+                'px-1.5 py-1 text-ink-gray-4 transition-colors duration-150 hover:text-white',
+                { 'text-white': node.attrs.align === 'center' },
               ]"
               title="Align Center"
             >
@@ -255,8 +256,8 @@ function setCursorBeforeIframe() {
             <button
               @click.stop="setAlignment('right')"
               :class="[
-                'px-1.5 py-1 text-ink-gray-4 hover:text-white transition-colors duration-150',
-                { 'text-white': node.attrs.align === 'right' }
+                'px-1.5 py-1 text-ink-gray-4 transition-colors duration-150 hover:text-white',
+                { 'text-white': node.attrs.align === 'right' },
               ]"
               title="Align Right"
             >
@@ -267,22 +268,21 @@ function setCursorBeforeIframe() {
           <!-- Resize Handle -->
           <button
             v-if="selected && isEditable"
-            class="cursor-nw-resize bg-black/65 rounded-md p-1"
+            class="cursor-nw-resize rounded-md bg-black/65 p-1"
             @mousedown.prevent="startResize"
             title="Resize"
           >
-            <LucideMoveDiagonal2 class="text-white size-4" />
+            <LucideMoveDiagonal2 class="size-4 text-white" />
           </button>
         </div>
 
-
         <!-- Loading state for new embeds -->
         <div
           v-if="!node.attrs.src"
-          class="flex items-center justify-center bg-surface-gray-1 rounded-lg w-[640px] h-[360px]"
+          class="flex h-[360px] w-[640px] items-center justify-center rounded-lg bg-surface-gray-1"
         >
-          <div class="text-ink-gray-5 text-center">
-            <div class="text-lg mb-1">🔗</div>
+          <div class="text-center text-ink-gray-5">
+            <div class="mb-1 text-lg">🔗</div>
             <div class="text-sm">Loading embed...</div>
           </div>
         </div>
@@ -292,7 +292,7 @@ function setCursorBeforeIframe() {
       <input
         v-if="(isEditable || node.attrs.title) && node.attrs.src"
         :value="node.attrs.title"
-        class="w-full text-center bg-transparent text-sm text-ink-gray-6 h-7 border-0 mt-2 focus:outline-none focus:ring-0 placeholder-ink-gray-4 disabled:opacity-60"
+        class="mt-2 h-7 w-full border-0 bg-transparent text-center text-sm text-ink-gray-6 placeholder-ink-gray-4 focus:outline-none focus:ring-0 disabled:opacity-60"
         placeholder="Add caption"
         :disabled="!isEditable"
         @input="(e) => props.updateAttributes({ title: (e.target as HTMLInputElement).value })"
diff --git a/src/components/TextEditor/extensions/iframe/InsertIframe.vue b/src/components/TextEditor/extensions/iframe/InsertIframe.vue
index 7d5a513be..cc9b5457c 100644
--- a/src/components/TextEditor/extensions/iframe/InsertIframe.vue
+++ b/src/components/TextEditor/extensions/iframe/InsertIframe.vue
@@ -3,14 +3,11 @@
     <slot v-bind="{ onClick: openIframeDialog }"></slot>
 
     <!-- Iframe URL Input Dialog -->
-    <Dialog
-      v-model="showDialog"
-      :options="{ title: 'Insert Embed', size: 'md' }"
-    >
+    <Dialog v-model="showDialog" :options="{ title: 'Insert Embed', size: 'md' }">
       <template #body-content>
         <div class="space-y-4">
           <div>
-            <label class="block text-sm font-medium text-ink-gray-7 mb-2">
+            <label class="mb-2 block text-sm font-medium text-ink-gray-7">
               URL or Embed Code
             </label>
             <Textarea
@@ -20,13 +17,10 @@
               @keydown.enter="insertIframe"
               @input="validateUrl"
             />
-            <p v-if="urlError" class="text-red-500 text-sm mt-1">
+            <p v-if="urlError" class="mt-1 text-sm text-red-500">
               {{ urlError }}
             </p>
-            <p
-              v-else-if="embedUrl && isValidUrl"
-              class="text-ink-green-3 text-sm mt-1"
-            >
+            <p v-else-if="embedUrl && isValidUrl" class="mt-1 text-sm text-ink-green-3">
               ✓ Valid {{ platformInfo.platform }} URL
             </p>
           </div>
@@ -36,11 +30,7 @@
       <template #actions>
         <div class="flex justify-end space-x-2">
           <Button variant="subtle" @click="showDialog = false">Cancel</Button>
-          <Button
-            variant="solid"
-            :disabled="!embedUrl || !isValidUrl"
-            @click="insertIframe"
-          >
+          <Button variant="solid" :disabled="!embedUrl || !isValidUrl" @click="insertIframe">
             Insert Embed
           </Button>
         </div>
@@ -50,20 +40,19 @@
 </template>
 
 <script setup lang="ts">
+import type { Editor } from '@tiptap/vue-3'
 import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
-import { Editor } from '@tiptap/vue-3'
-import { Dialog, Button, TextInput, Textarea } from '../../../..'
 
+import { Dialog, Button, TextInput, Textarea } from '../../../..'
 import {
   validateURL,
   processURL,
   detectPlatform,
   calculateAspectRatio,
   getOptimalDimensions,
-  ALLOWED_DOMAINS
+  ALLOWED_DOMAINS,
 } from './utils'
 
-
 const props = defineProps<{
   editor: Editor
 }>()
@@ -88,7 +77,7 @@ const isValidUrl = computed(() => {
       if (srcMatch?.[1]) {
         return validateURL(srcMatch[1], {
           allowedDomains: ALLOWED_DOMAINS,
-          HTMLAttributes: {}
+          HTMLAttributes: {},
         })
       }
       return false
@@ -97,7 +86,7 @@ const isValidUrl = computed(() => {
     // Handle direct URLs
     return validateURL(embedUrl.value, {
       allowedDomains: ALLOWED_DOMAINS,
-      HTMLAttributes: {}
+      HTMLAttributes: {},
     })
   } catch {
     return false
@@ -120,14 +109,14 @@ const processedUrl = computed(() => {
 })
 
 const platformInfo = computed(() => {
-  if (!embedUrl.value || !isValidUrl.value) return { platform: 'Generic', aspectRatio: 9/16 }
+  if (!embedUrl.value || !isValidUrl.value) return { platform: 'Generic', aspectRatio: 9 / 16 }
 
   const platform = detectPlatform(processedUrl.value)
   const aspectInfo = calculateAspectRatio(processedUrl.value)
 
   return {
     platform: platform?.name || 'Generic',
-    aspectRatio: aspectInfo.ratio
+    aspectRatio: aspectInfo.ratio,
   }
 })
 
@@ -180,7 +169,7 @@ function insertIframe() {
     width: customWidth.value,
     height: customHeight.value,
     title: title.value,
-    align: alignment.value
+    align: alignment.value,
   })
 
   if (success) {
@@ -198,12 +187,18 @@ function handleSlashCommandInsert(event: CustomEvent) {
 }
 
 onMounted(() => {
-  props.editor.view.dom.addEventListener('iframe:open-dialog', handleSlashCommandInsert as EventListener)
+  props.editor.view.dom.addEventListener(
+    'iframe:open-dialog',
+    handleSlashCommandInsert as EventListener,
+  )
 })
 
 onUnmounted(() => {
   try {
-  props.editor.view.dom.removeEventListener('iframe:open-dialog', handleSlashCommandInsert as EventListener)
+    props.editor.view.dom.removeEventListener(
+      'iframe:open-dialog',
+      handleSlashCommandInsert as EventListener,
+    )
   } catch {}
 })
 </script>
diff --git a/src/components/TextEditor/extensions/iframe/iframe-extension.ts b/src/components/TextEditor/extensions/iframe/iframe-extension.ts
index fa1b621bc..72a6b960b 100644
--- a/src/components/TextEditor/extensions/iframe/iframe-extension.ts
+++ b/src/components/TextEditor/extensions/iframe/iframe-extension.ts
@@ -1,6 +1,7 @@
 import { Node, mergeAttributes } from '@tiptap/core'
-import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
 import IframeNodeView from './IframeNodeView.vue'
 import { validateURL, processURL, getOptimalDimensions, ALLOWED_DOMAINS } from './utils'
 
@@ -80,7 +81,7 @@ export const IframeExtension = Node.create<IframeOptions>({
         }),
       },
       aspectRatio: {
-        default: 9/16, // Default 16:9 aspect ratio
+        default: 9 / 16, // Default 16:9 aspect ratio
         parseHTML: () => null, // Don't parse from HTML
         renderHTML: () => ({}), // Don't render to HTML
       },
@@ -155,7 +156,7 @@ export const IframeExtension = Node.create<IframeOptions>({
             width: width ? parseInt(width, 10) : null,
             height: height ? parseInt(height, 10) : null,
             title: title || null,
-            align: align || 'center'
+            align: align || 'center',
           }
         },
       },
@@ -210,7 +211,7 @@ export const IframeExtension = Node.create<IframeOptions>({
 
           return commands.insertContent({
             type: this.name,
-            attrs
+            attrs,
           })
         },
 
@@ -227,7 +228,7 @@ export const IframeExtension = Node.create<IframeOptions>({
           // Emit a custom event on the editor's view DOM element
           // This is more localized than document.dispatchEvent
           const event = new CustomEvent('iframe:open-dialog', {
-            detail: { editor }
+            detail: { editor },
           })
           editor.view.dom.dispatchEvent(event)
           return true
@@ -251,7 +252,14 @@ export const IframeExtension = Node.create<IframeOptions>({
             if (html) {
               const iframeData = parseIframeFromHTML(html)
               if (iframeData) {
-                return createIframeNode(view, extensionThis, iframeData.src, iframeData.width, iframeData.height, iframeData.title)
+                return createIframeNode(
+                  view,
+                  extensionThis,
+                  iframeData.src,
+                  iframeData.width,
+                  iframeData.height,
+                  iframeData.title,
+                )
               }
             }
 
@@ -259,14 +267,22 @@ export const IframeExtension = Node.create<IframeOptions>({
             if (text && text.includes('<iframe')) {
               const iframeData = parseIframeFromHTML(text)
               if (iframeData) {
-                return createIframeNode(view, extensionThis, iframeData.src, iframeData.width, iframeData.height, iframeData.title)
+                return createIframeNode(
+                  view,
+                  extensionThis,
+                  iframeData.src,
+                  iframeData.width,
+                  iframeData.height,
+                  iframeData.title,
+                )
               }
             }
 
             // Fallback to URL detection for plain text
             if (text) {
               // Check if pasted text is a supported embed URL
-              const urlPattern = /^https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=[\w-]+|youtu\.be\/[\w-]+|youtube\.com\/embed\/[\w-]+|vimeo\.com\/\d+|player\.vimeo\.com\/video\/\d+|codepen\.io\/[\w-]+\/pen\/[\w-]+|codesandbox\.io\/[\w\/.-]+|figma\.com\/[\w\/.-]+|embed\.figma\.com\/[\w\/.-]+)$/
+              const urlPattern =
+                /^https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=[\w-]+|youtu\.be\/[\w-]+|youtube\.com\/embed\/[\w-]+|vimeo\.com\/\d+|player\.vimeo\.com\/video\/\d+|codepen\.io\/[\w-]+\/pen\/[\w-]+|codesandbox\.io\/[\w/.-]+|figma\.com\/[\w/.-]+|embed\.figma\.com\/[\w/.-]+)$/
 
               if (urlPattern.test(text.trim())) {
                 return createIframeNode(view, extensionThis, text.trim())
@@ -282,7 +298,9 @@ export const IframeExtension = Node.create<IframeOptions>({
 })
 
 // Helper function to parse iframe embed codes from pasted HTML content
-function parseIframeFromHTML(html: string): { src: string, width?: number, height?: number, title?: string } | null {
+function parseIframeFromHTML(
+  html: string,
+): { src: string; width?: number; height?: number; title?: string } | null {
   try {
     const parser = new DOMParser()
     const doc = parser.parseFromString(html, 'text/html')
@@ -301,7 +319,7 @@ function parseIframeFromHTML(html: string): { src: string, width?: number, heigh
           src,
           width: widthMatch ? parseInt(widthMatch[1], 10) : undefined,
           height: heightMatch ? parseInt(heightMatch[1], 10) : undefined,
-          title: titleMatch ? titleMatch[1] : undefined
+          title: titleMatch ? titleMatch[1] : undefined,
         }
       }
       return null
@@ -310,8 +328,12 @@ function parseIframeFromHTML(html: string): { src: string, width?: number, heigh
     const src = iframe.getAttribute('src')
     if (!src) return null
 
-    const width = iframe.getAttribute('width') ? parseInt(iframe.getAttribute('width')!, 10) : undefined
-    const height = iframe.getAttribute('height') ? parseInt(iframe.getAttribute('height')!, 10) : undefined
+    const width = iframe.getAttribute('width')
+      ? parseInt(iframe.getAttribute('width')!, 10)
+      : undefined
+    const height = iframe.getAttribute('height')
+      ? parseInt(iframe.getAttribute('height')!, 10)
+      : undefined
     const title = iframe.getAttribute('title') || undefined
 
     return { src, width, height, title }
@@ -321,9 +343,18 @@ function parseIframeFromHTML(html: string): { src: string, width?: number, heigh
 }
 
 // Helper function to create iframe node from parsed data
-function createIframeNode(view: any, extensionThis: any, src: string, width?: number, height?: number, title?: string) {
+function createIframeNode(
+  view: any,
+  extensionThis: any,
+  src: string,
+  width?: number,
+  height?: number,
+  title?: string,
+) {
   // Ask user for confirmation before creating iframe
-  const shouldCreateEmbed = confirm(`Do you want to embed this content?\n\nURL: ${src}\n\nClick "OK" to create an embed, or "Cancel" to paste as plain text.`)
+  const shouldCreateEmbed = confirm(
+    `Do you want to embed this content?\n\nURL: ${src}\n\nClick "OK" to create an embed, or "Cancel" to paste as plain text.`,
+  )
 
   if (!shouldCreateEmbed) {
     return false // Allow default paste behavior (paste as text)
@@ -348,7 +379,7 @@ function createIframeNode(view: any, extensionThis: any, src: string, width?: nu
     height: finalHeight,
     title: title,
     align: 'center' as const,
-    aspectRatio: finalHeight / finalWidth
+    aspectRatio: finalHeight / finalWidth,
   }
 
   const node = view.state.schema.nodes.iframe.create(attrs)
diff --git a/src/components/TextEditor/extensions/iframe/index.ts b/src/components/TextEditor/extensions/iframe/index.ts
index 39accb8d5..a92485e5b 100644
--- a/src/components/TextEditor/extensions/iframe/index.ts
+++ b/src/components/TextEditor/extensions/iframe/index.ts
@@ -6,6 +6,6 @@ export {
   getOptimalDimensions,
   validateURL,
   processURL,
-  ALLOWED_DOMAINS
+  ALLOWED_DOMAINS,
 } from './utils'
 export type { AspectRatioInfo, PlatformConfig } from './utils'
diff --git a/src/components/TextEditor/extensions/iframe/utils.ts b/src/components/TextEditor/extensions/iframe/utils.ts
index 4ef20fa4e..947dd6c53 100644
--- a/src/components/TextEditor/extensions/iframe/utils.ts
+++ b/src/components/TextEditor/extensions/iframe/utils.ts
@@ -1,5 +1,4 @@
-import { IframeOptions } from './iframe-extension'
-
+import type { IframeOptions } from './iframe-extension'
 
 export const ALLOWED_DOMAINS = [
   'youtube.com',
@@ -36,45 +35,45 @@ export interface PlatformConfig {
 const PLATFORM_CONFIGS: PlatformConfig[] = [
   {
     name: 'YouTube',
-    ratio: 9/16, // 16:9 aspect ratio
+    ratio: 9 / 16, // 16:9 aspect ratio
     defaultWidth: 640,
-    urlPatterns: ['youtube.com', 'youtu.be', 'youtube-nocookie.com']
+    urlPatterns: ['youtube.com', 'youtu.be', 'youtube-nocookie.com'],
   },
   {
     name: 'Vimeo',
-    ratio: 9/16, // 16:9 aspect ratio
+    ratio: 9 / 16, // 16:9 aspect ratio
     defaultWidth: 640,
-    urlPatterns: ['vimeo.com', 'player.vimeo.com']
+    urlPatterns: ['vimeo.com', 'player.vimeo.com'],
   },
   {
     name: 'CodePen',
-    ratio: 3/2, // 2:3 aspect ratio (taller for code demos)
+    ratio: 3 / 2, // 2:3 aspect ratio (taller for code demos)
     defaultWidth: 500,
-    urlPatterns: ['codepen.io']
+    urlPatterns: ['codepen.io'],
   },
   {
     name: 'CodeSandbox',
-    ratio: 3/2, // 2:3 aspect ratio
+    ratio: 3 / 2, // 2:3 aspect ratio
     defaultWidth: 500,
-    urlPatterns: ['codesandbox.io']
+    urlPatterns: ['codesandbox.io'],
   },
   {
     name: 'Figma',
-    ratio: 9/16, // 16:9 default for design embeds
+    ratio: 9 / 16, // 16:9 default for design embeds
     defaultWidth: 800,
-    urlPatterns: ['figma.com', 'www.figma.com', 'embed.figma.com']
+    urlPatterns: ['figma.com', 'www.figma.com', 'embed.figma.com'],
   },
   {
     name: 'Google Docs',
-    ratio: 4/3, // 4:3 for documents
+    ratio: 4 / 3, // 4:3 for documents
     defaultWidth: 600,
-    urlPatterns: ['docs.google.com', 'drive.google.com']
+    urlPatterns: ['docs.google.com', 'drive.google.com'],
   },
   {
     name: 'Notion',
-    ratio: 4/3, // 4:3 for pages
+    ratio: 4 / 3, // 4:3 for pages
     defaultWidth: 600,
-    urlPatterns: ['notion.so', 'www.notion.so']
+    urlPatterns: ['notion.so', 'www.notion.so'],
   },
 ]
 
@@ -83,9 +82,11 @@ export function detectPlatform(url: string): PlatformConfig | null {
     const urlObj = new URL(url)
     const domain = urlObj.hostname.toLowerCase()
 
-    return PLATFORM_CONFIGS.find(config =>
-      config.urlPatterns.some(pattern => domain.includes(pattern))
-    ) || null
+    return (
+      PLATFORM_CONFIGS.find((config) =>
+        config.urlPatterns.some((pattern) => domain.includes(pattern)),
+      ) || null
+    )
   } catch {
     return null
   }
@@ -99,20 +100,23 @@ export function calculateAspectRatio(url: string): AspectRatioInfo {
       ratio: platform.ratio,
       width: platform.defaultWidth,
       height: Math.round(platform.defaultWidth * platform.ratio),
-      platform: platform.name
+      platform: platform.name,
     }
   }
 
   // Default to 16:9 for unknown platforms
   return {
-    ratio: 9/16,
+    ratio: 9 / 16,
     width: 640,
     height: 360,
-    platform: 'Generic'
+    platform: 'Generic',
   }
 }
 
-export function getOptimalDimensions(url: string, containerWidth?: number): { width: number, height: number } {
+export function getOptimalDimensions(
+  url: string,
+  containerWidth?: number,
+): { width: number; height: number } {
   const aspectInfo = calculateAspectRatio(url)
 
   // If container width is provided, scale to fit
@@ -121,13 +125,13 @@ export function getOptimalDimensions(url: string, containerWidth?: number): { wi
     const maxWidth = Math.min(containerWidth - CONTAINER_PADDING, aspectInfo.width)
     return {
       width: maxWidth,
-      height: Math.round(maxWidth * aspectInfo.ratio)
+      height: Math.round(maxWidth * aspectInfo.ratio),
     }
   }
 
   return {
     width: aspectInfo.width,
-    height: aspectInfo.height
+    height: aspectInfo.height,
   }
 }
 
@@ -144,9 +148,7 @@ export function validateURL(url: string, options: IframeOptions): boolean {
 
     // If allowedDomains is specified, check if domain is allowed
     if (options.allowedDomains?.length) {
-      return options.allowedDomains.some((allowed) =>
-        domain.includes(allowed.toLowerCase())
-      )
+      return options.allowedDomains.some((allowed) => domain.includes(allowed.toLowerCase()))
     }
 
     // If no allowedDomains specified, allow all except blocked
@@ -240,7 +242,7 @@ function convertToCodePenEmbed(url: string): string {
       return url
     }
 
-    const match = url.match(/codepen\.io\/([^\/]+)\/pen\/([^\/\?]+)/)
+    const match = url.match(/codepen\.io\/([^/]+)\/pen\/([^/?]+)/)
     if (match?.[1] && match?.[2]) {
       return `https://codepen.io/${match[1]}/embed/${match[2]}?default-tab=result`
     }
diff --git a/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue b/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue
index 863e8ee82..589399e48 100644
--- a/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue
+++ b/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue
@@ -1,56 +1,92 @@
 <template>
   <NodeViewWrapper>
     <div class="w-full">
-      <div v-if="isEditable" class="flex items-center mb-2 gap-2">
+      <div v-if="isEditable" class="mb-2 flex items-center gap-2">
         <Button @click="edit">
           <template #prefix>
             <LucideEdit class="size-4" />
           </template>
           Edit
         </Button>
-        <Select :options="selectOptions" v-model="internalColumns" size="sm" variant="subtle" class="w-28" />
+        <Select
+          :options="selectOptions"
+          v-model="internalColumns"
+          size="sm"
+          variant="subtle"
+          class="w-28"
+        />
       </div>
       <div class="grid gap-px" :style="gridStyle">
-        <div v-for="(img, idx) in images" :key="img.attrs.src + idx"
-          class="relative aspect-square w-full h-full overflow-hidden bg-surface-white group">
-          <button v-if="isEditable" type="button"
-            class="absolute top-1 right-1 z-10 bg-white/80 hover:bg-white rounded-full p-1 shadow transition-opacity opacity-0 group-hover:opacity-100 focus:opacity-100"
-            aria-label="Remove image" @click.stop="removeImage(idx)">
-            <LucideX class="w-4 h-4 text-gray-700" />
+        <div
+          v-for="(img, idx) in images"
+          :key="img.attrs.src + idx"
+          class="group relative aspect-square h-full w-full overflow-hidden bg-surface-white"
+        >
+          <button
+            v-if="isEditable"
+            type="button"
+            class="absolute right-1 top-1 z-10 rounded-full bg-white/80 p-1 opacity-0 shadow transition-opacity hover:bg-white focus:opacity-100 group-hover:opacity-100"
+            aria-label="Remove image"
+            @click.stop="removeImage(idx)"
+          >
+            <LucideX class="h-4 w-4 text-gray-700" />
           </button>
-          <img :src="img.attrs.src" :alt="img.attrs.alt || ''"
-            class="object-cover w-full h-full not-prose cursor-pointer rounded-[2px]" v-if="!isEditable"
-            @click="openViewer(idx)" />
-          <img v-else :src="img.attrs.src" :alt="img.attrs.alt || ''"
-            class="object-cover w-full h-full not-prose rounded-[2px]" />
+          <img
+            :src="img.attrs.src"
+            :alt="img.attrs.alt || ''"
+            class="not-prose h-full w-full cursor-pointer rounded-[2px] object-cover"
+            v-if="!isEditable"
+            @click="openViewer(idx)"
+          />
+          <img
+            v-else
+            :src="img.attrs.src"
+            :alt="img.attrs.alt || ''"
+            class="not-prose h-full w-full rounded-[2px] object-cover"
+          />
 
           <!-- Caption overlay (visible when there's alt text) -->
-          <div v-if="img.attrs.alt"
-            class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent rounded-b-[2px] opacity-0 group-hover:opacity-100 transition-opacity">
+          <div
+            v-if="img.attrs.alt"
+            class="absolute bottom-0 left-0 right-0 rounded-b-[2px] bg-gradient-to-t from-black/60 to-transparent opacity-0 transition-opacity group-hover:opacity-100"
+          >
             <div class="p-2">
-              <div class="text-white text-xs truncate" :title="img.attrs.alt">
+              <div class="truncate text-xs text-white" :title="img.attrs.alt">
                 {{ img.attrs.alt }}
               </div>
             </div>
           </div>
         </div>
       </div>
-      <ImageViewerModal v-if="showViewer" v-model:show="showViewer" :images="viewerImages"
-        :initialIndex="viewerIndex" />
-      <ImageGroupUploadDialog v-if="showEditModal" v-model="showEditModal" :files="editFiles" :editor="props.editor"
-        mode="edit" :existingImages="existingImages" :initialColumns="columns" @close="handleEditModalClose"
-        @save="handleEditSave" />
+      <ImageViewerModal
+        v-if="showViewer"
+        v-model:show="showViewer"
+        :images="viewerImages"
+        :initialIndex="viewerIndex"
+      />
+      <ImageGroupUploadDialog
+        v-if="showEditModal"
+        v-model="showEditModal"
+        :files="editFiles"
+        :editor="props.editor"
+        mode="edit"
+        :existingImages="existingImages"
+        :initialColumns="columns"
+        @close="handleEditModalClose"
+        @save="handleEditSave"
+      />
       <slot />
     </div>
   </NodeViewWrapper>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { NodeViewWrapper, type Editor } from '@tiptap/vue-3'
 import type { NodeViewProps } from '@tiptap/vue-3'
-import LucideX from '~icons/lucide/x'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import LucideEdit from '~icons/lucide/edit'
+import LucideX from '~icons/lucide/x'
+
 import Button from '../../../Button/Button.vue'
 import Select from '../../../Select/Select.vue'
 import ImageViewerModal from '../../components/ImageViewerModal.vue'
@@ -120,10 +156,7 @@ function handleEditModalClose() {
   editFiles.value = []
 }
 
-async function handleEditSave(data: {
-  images: ExistingImage[]
-  columns: number
-}) {
+async function handleEditSave(data: { images: ExistingImage[]; columns: number }) {
   // Update the node with the final images and columns from the modal
   props.editor.commands.command(({ tr, state }) => {
     const pos = props.getPos()
@@ -167,9 +200,7 @@ function removeImage(idx: number) {
       if (typeof pos === 'number') {
         const node = state.doc.nodeAt(pos)
         if (node && node.type.name === 'imageGroup') {
-          const newContent = newImages.map((img) =>
-            state.schema.nodes.image.create(img.attrs),
-          )
+          const newContent = newImages.map((img) => state.schema.nodes.image.create(img.attrs))
           tr.replaceWith(pos + 1, pos + 1 + node.content.size, newContent)
           return true
         }
diff --git a/src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue b/src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue
index 19c7beb25..999bceeb6 100644
--- a/src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue
+++ b/src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue
@@ -27,30 +27,26 @@
             @update:modelValue="(val) => (columns = +val)"
           />
         </div>
-        <div
-          v-if="images && images.length"
-          class="grid gap-px mb-4"
-          :style="gridStyle"
-        >
+        <div v-if="images && images.length" class="mb-4 grid gap-px" :style="gridStyle">
           <div
             v-for="(item, idx) in images"
             :key="item.id"
-            class="relative aspect-square w-full h-full overflow-hidden group bg-surface-white"
+            class="group relative aspect-square h-full w-full overflow-hidden bg-surface-white"
             :draggable="true"
             @dragstart="onDragStart(idx)"
             @dragover="onDragOver($event, idx)"
             @drop="onDrop($event)"
             @dragend="onDragEnd"
             @dragleave="onDragLeave($event, idx)"
-            :class="{ 'ring-2 ring-primary-400 z-10': isDropTarget(idx) }"
+            :class="{ 'ring-primary-400 z-10 ring-2': isDropTarget(idx) }"
           >
             <button
               type="button"
-              class="absolute top-1 right-1 z-10 bg-white/80 hover:bg-white rounded-full p-1 shadow transition-opacity opacity-0 group-hover:opacity-100 focus:opacity-100"
+              class="absolute right-1 top-1 z-10 rounded-full bg-white/80 p-1 opacity-0 shadow transition-opacity hover:bg-white focus:opacity-100 group-hover:opacity-100"
               aria-label="Remove image"
               @click.stop="removeImage(idx)"
             >
-              <LucideX class="w-4 h-4 text-gray-700" />
+              <LucideX class="h-4 w-4 text-gray-700" />
             </button>
 
             <!-- Existing images from edit mode -->
@@ -58,11 +54,11 @@
               <img
                 :src="item.existing?.src"
                 :alt="item.existing?.alt || ''"
-                class="object-cover w-full h-full rounded-[2px]"
+                class="h-full w-full rounded-[2px] object-cover"
               />
               <!-- Caption overlay -->
               <div
-                class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent rounded-b-[2px] transition-opacity"
+                class="absolute bottom-0 left-0 right-0 rounded-b-[2px] bg-gradient-to-t from-black/60 to-transparent transition-opacity"
                 :class="
                   editingCaption === `${item.type}-${idx}`
                     ? 'opacity-100'
@@ -71,16 +67,11 @@
               >
                 <div
                   v-if="editingCaption !== `${item.type}-${idx}`"
-                  class="p-2 cursor-pointer"
-                  @click.stop="
-                    startEditingCaption(
-                      `${item.type}-${idx}`,
-                      item.existing?.alt || '',
-                    )
-                  "
+                  class="cursor-pointer p-2"
+                  @click.stop="startEditingCaption(`${item.type}-${idx}`, item.existing?.alt || '')"
                 >
                   <div
-                    class="text-white text-xs truncate"
+                    class="truncate text-xs text-white"
                     :title="item.existing?.alt || 'Click to add caption'"
                   >
                     {{ item.existing?.alt || 'Add caption...' }}
@@ -91,11 +82,9 @@
                     :ref="(el) => (captionInputRef = el as HTMLInputElement)"
                     v-model="captionEditValue"
                     @blur="handleCaptionBlur(`${item.type}-${idx}`, idx)"
-                    @keydown.enter.prevent="
-                      saveCaption(`${item.type}-${idx}`, idx)
-                    "
+                    @keydown.enter.prevent="saveCaption(`${item.type}-${idx}`, idx)"
                     @keydown.escape="cancelEditingCaption"
-                    class="w-full text-xs bg-white/90 text-gray-900 px-1 py-0.5 rounded-sm border-none outline-none"
+                    class="w-full rounded-sm border-none bg-white/90 px-1 py-0.5 text-xs text-gray-900 outline-none"
                     placeholder="Add caption..."
                     maxlength="200"
                   />
@@ -107,10 +96,10 @@
             <template v-else-if="item.type === 'file' && item.file">
               <template v-if="!isImageSupported(item.file)">
                 <div
-                  class="flex flex-col items-center justify-center w-full h-full text-ink-gray-4 bg-surface-gray-1 rounded-[2px]"
+                  class="flex h-full w-full flex-col items-center justify-center rounded-[2px] bg-surface-gray-1 text-ink-gray-4"
                 >
                   <span
-                    class="text-p-xs text-ink-gray-4 w-full text-center px-2 mt-1"
+                    class="mt-1 w-full px-2 text-center text-p-xs text-ink-gray-4"
                     :title="item.file.name"
                   >
                     {{ item.file.name }}
@@ -120,12 +109,12 @@
               <template v-else-if="item.file.type.startsWith('image/')">
                 <img
                   :src="filePreview(item.file)"
-                  class="object-cover w-full h-full rounded-[2px]"
+                  class="h-full w-full rounded-[2px] object-cover"
                   :alt="item.alt || ''"
                 />
                 <!-- Caption overlay -->
                 <div
-                  class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent rounded-b-[2px] transition-opacity"
+                  class="absolute bottom-0 left-0 right-0 rounded-b-[2px] bg-gradient-to-t from-black/60 to-transparent transition-opacity"
                   :class="
                     editingCaption === `${item.type}-${idx}`
                       ? 'opacity-100'
@@ -134,13 +123,11 @@
                 >
                   <div
                     v-if="editingCaption !== `${item.type}-${idx}`"
-                    class="p-2 cursor-pointer"
-                    @click.stop="
-                      startEditingCaption(`${item.type}-${idx}`, item.alt || '')
-                    "
+                    class="cursor-pointer p-2"
+                    @click.stop="startEditingCaption(`${item.type}-${idx}`, item.alt || '')"
                   >
                     <div
-                      class="text-white text-xs truncate"
+                      class="truncate text-xs text-white"
                       :title="item.alt || 'Click to add caption'"
                     >
                       {{ item.alt || 'Add caption...' }}
@@ -151,11 +138,9 @@
                       ref="captionInput"
                       v-model="captionEditValue"
                       @blur="handleCaptionBlur(`${item.type}-${idx}`, idx)"
-                      @keydown.enter.prevent="
-                        saveCaption(`${item.type}-${idx}`, idx)
-                      "
+                      @keydown.enter.prevent="saveCaption(`${item.type}-${idx}`, idx)"
                       @keydown.escape="cancelEditingCaption"
-                      class="w-full text-xs bg-white/90 text-gray-900 px-1 py-0.5 rounded border-none outline-none"
+                      class="w-full rounded border-none bg-white/90 px-1 py-0.5 text-xs text-gray-900 outline-none"
                       placeholder="Add caption..."
                       maxlength="200"
                     />
@@ -166,41 +151,33 @@
           </div>
         </div>
         <div v-if="images && images.length" class="text-p-sm text-ink-gray-5">
-          Upload more images by dropping them anywhere in this window. Reorder
-          images by dragging them. Hover over an image to edit caption.
+          Upload more images by dropping them anywhere in this window. Reorder images by dragging
+          them. Hover over an image to edit caption.
         </div>
-        <div
-          v-else
-          class="flex flex-col items-center justify-center min-h-[200px]"
-        >
+        <div v-else class="flex min-h-[200px] flex-col items-center justify-center">
           <div
-            class="w-full flex flex-1 flex-col items-center justify-center border border-outline-gray-2 rounded-lg bg-surface-gray-1 h-full cursor-pointer transition hover:border-primary-400 hover:bg-primary-50 text-center"
+            class="hover:border-primary-400 hover:bg-primary-50 flex h-full w-full flex-1 cursor-pointer flex-col items-center justify-center rounded-lg border border-outline-gray-2 bg-surface-gray-1 text-center transition"
             @click="triggerFileInput"
             @dragover.prevent
             @drop.prevent="onDrop"
           >
-            <div class="text-ink-gray-4 mb-2">
+            <div class="mb-2 text-ink-gray-4">
               <LucideImagePlus class="size-6" />
             </div>
-            <div class="text-ink-gray-5 text-sm font-medium">
+            <div class="text-sm font-medium text-ink-gray-5">
               Drag & drop images here or click to select
             </div>
           </div>
         </div>
         <div v-if="uploading">
-          <div class="mb-2 text-sm">
-            Uploading: {{ uploadedCount }}/{{ totalCount }}
-          </div>
-          <div class="w-full bg-gray-200 rounded h-2 overflow-hidden">
+          <div class="mb-2 text-sm">Uploading: {{ uploadedCount }}/{{ totalCount }}</div>
+          <div class="h-2 w-full overflow-hidden rounded bg-gray-200">
             <div
-              class="bg-surface-gray-5 h-2 transition-all"
+              class="h-2 bg-surface-gray-5 transition-all"
               :style="{ width: uploadProgress + '%' }"
             ></div>
           </div>
-          <div
-            v-if="uploadErrors && uploadErrors.some((e) => e)"
-            class="mt-2 text-red-500 text-xs"
-          >
+          <div v-if="uploadErrors && uploadErrors.some((e) => e)" class="mt-2 text-xs text-red-500">
             Some files failed to upload.
           </div>
         </div>
@@ -208,9 +185,7 @@
     </template>
     <template #actions>
       <div class="flex justify-end gap-2">
-        <Button variant="ghost" :disabled="uploading" @click="handleCancel">
-          Cancel
-        </Button>
+        <Button variant="ghost" :disabled="uploading" @click="handleCancel"> Cancel </Button>
         <Button
           v-if="props.mode === 'edit'"
           variant="solid"
@@ -242,33 +217,24 @@
     >
       <div
         v-if="isFileDragging"
-        class="fixed inset-0 z-50 bg-gray-900/60 pointer-events-none flex items-center justify-center"
+        class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center bg-gray-900/60"
       >
-        <div class="text-ink-gray-1 text-base font-medium">
-          Drop images anywhere
-        </div>
+        <div class="text-base font-medium text-ink-gray-1">Drop images anywhere</div>
       </div>
     </Transition>
   </Teleport>
 </template>
 
 <script setup lang="ts">
-import {
-  computed,
-  ref,
-  onMounted,
-  onUnmounted,
-  watch,
-  nextTick,
-  useTemplateRef,
-} from 'vue'
-import Dialog from '../../../Dialog/Dialog.vue'
-import Button from '../../../Button/Button.vue'
-import Select from '../../../Select/Select.vue'
 import type { Editor } from '@tiptap/vue-3'
-import type { UploadedFile } from '../../../../utils/useFileUpload'
-import LucideX from '~icons/lucide/x'
+import { computed, ref, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue'
 import LucideImagePlus from '~icons/lucide/image-plus'
+import LucideX from '~icons/lucide/x'
+
+import type { UploadedFile } from '../../../../utils/useFileUpload'
+import Button from '../../../Button/Button.vue'
+import Dialog from '../../../Dialog/Dialog.vue'
+import Select from '../../../Select/Select.vue'
 
 interface UploadResult {
   success: boolean
@@ -336,9 +302,7 @@ watch(
   () => props.modelValue,
   (isOpen) => {
     if (isOpen && props.mode === 'edit') {
-      const existingItems = (props.existingImages || []).map(
-        createExistingImageItem,
-      )
+      const existingItems = (props.existingImages || []).map(createExistingImageItem)
       const fileItems = (props.files || []).map(createImageItem)
       images.value = [...existingItems, ...fileItems]
 
@@ -359,9 +323,7 @@ watch(
   () => props.existingImages,
   (newExistingImages) => {
     if (props.modelValue && props.mode === 'edit') {
-      const existingItems = (newExistingImages || []).map(
-        createExistingImageItem,
-      )
+      const existingItems = (newExistingImages || []).map(createExistingImageItem)
       const fileItems = (props.files || []).map(createImageItem)
       images.value = [...existingItems, ...fileItems]
     }
@@ -500,13 +462,14 @@ function addFiles(files: File[]) {
   const imageFiles = files.filter((file) => file.type.startsWith('image/'))
   const newImageItems = imageFiles.map(createImageItem)
 
-  const existingFileSignatures = images.value
-    .filter((item) => item.type === 'file' && item.file)
-    .map((item) => `${item.file!.name}-${item.file!.size}`)
+  const existingFileSignatures = new Set(
+    images.value
+      .filter((item) => item.type === 'file' && item.file)
+      .map((item) => `${item.file!.name}-${item.file!.size}`),
+  )
 
   const uniqueNewItems = newImageItems.filter(
-    (item) =>
-      !existingFileSignatures.includes(`${item.file!.name}-${item.file!.size}`),
+    (item) => !existingFileSignatures.has(`${item.file!.name}-${item.file!.size}`),
   )
 
   images.value.push(...uniqueNewItems)
@@ -621,11 +584,7 @@ function onDragLeave(e: DragEvent, idx: number) {
 }
 
 function isDropTarget(idx: number) {
-  return (
-    overIndex.value === idx &&
-    draggedIndex.value !== null &&
-    draggedIndex.value !== idx
-  )
+  return overIndex.value === idx && draggedIndex.value !== null && draggedIndex.value !== idx
 }
 
 function onDragOverWindow(e: DragEvent) {
@@ -725,9 +684,7 @@ async function uploadFiles(files: File[]): Promise<UploadResult[]> {
       return { success: false, error: err }
     } finally {
       uploadedCount.value++
-      uploadProgress.value = Math.round(
-        (uploadedCount.value / totalCount.value) * 100,
-      )
+      uploadProgress.value = Math.round((uploadedCount.value / totalCount.value) * 100)
     }
   })
 
diff --git a/src/components/TextEditor/extensions/image-group/image-group-extension.ts b/src/components/TextEditor/extensions/image-group/image-group-extension.ts
index 37a303e65..577ca2582 100644
--- a/src/components/TextEditor/extensions/image-group/image-group-extension.ts
+++ b/src/components/TextEditor/extensions/image-group/image-group-extension.ts
@@ -1,7 +1,8 @@
 import { Node, mergeAttributes } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
+import type { UploadedFile } from '../../../../utils/useFileUpload'
 import ImageGroupNodeView from './ImageGroupNodeView.vue'
-import { UploadedFile } from '../../../../utils/useFileUpload'
 
 export interface ImageGroupOptions {
   /**
@@ -70,9 +71,7 @@ export const ImageGroup = Node.create<ImageGroupOptions>({
           if (typeof element === 'string') return {}
           const el = element as HTMLElement
           return {
-            columns: el.getAttribute('data-columns')
-              ? Number(el.getAttribute('data-columns'))
-              : 4,
+            columns: el.getAttribute('data-columns') ? Number(el.getAttribute('data-columns')) : 4,
           }
         },
       },
@@ -140,7 +139,7 @@ export const ImageGroup = Node.create<ImageGroupOptions>({
           }
 
           // Sort by position (descending) for deletion
-          const sortedImages = [...images].sort((a, b) => b.pos - a.pos)
+          const sortedImages = [...images].toSorted((a, b) => b.pos - a.pos)
 
           // Find the position to insert the group (start of selection)
           const insertPos = Math.min(...images.map((img) => img.pos))
diff --git a/src/components/TextEditor/extensions/image-viewer-extension.ts b/src/components/TextEditor/extensions/image-viewer-extension.ts
index d71d8cde8..886608536 100644
--- a/src/components/TextEditor/extensions/image-viewer-extension.ts
+++ b/src/components/TextEditor/extensions/image-viewer-extension.ts
@@ -1,6 +1,7 @@
 import { Extension } from '@tiptap/core'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { createApp, h } from 'vue'
+
 import ImageViewerModal from '../components/ImageViewerModal.vue'
 
 interface ImageInfo {
@@ -106,10 +107,7 @@ export default Extension.create({
                 if (node.type.name === 'image' && !foundImageNode) {
                   const domNode = view.nodeDOM(nodePos)
                   // Check if the event target is the DOM representation of this node or inside it
-                  if (
-                    domNode &&
-                    (domNode === event.target || domNode.contains(event.target))
-                  ) {
+                  if (domNode && (domNode === event.target || domNode.contains(event.target))) {
                     event.preventDefault()
                     extension.editor.commands.openImageViewer(node.attrs.src)
                     foundImageNode = true
@@ -139,7 +137,7 @@ function openImageViewerModal(images: ImageInfo[], initialIndex: number) {
   const app = createApp({
     render() {
       return h(ImageViewerModal, {
-        show: true,
+        'show': true,
         images, // Pass the collected image data
         initialIndex, // Pass the starting index
         'onUpdate:show': (value: boolean) => {
diff --git a/src/components/TextEditor/extensions/image/image-extension.ts b/src/components/TextEditor/extensions/image/image-extension.ts
index f98a63330..640e39410 100644
--- a/src/components/TextEditor/extensions/image/image-extension.ts
+++ b/src/components/TextEditor/extensions/image/image-extension.ts
@@ -1,15 +1,13 @@
-import {
-  Node as NodeExtension,
-  nodeInputRule,
-  mergeAttributes,
-} from '@tiptap/core'
+import { Node as NodeExtension, nodeInputRule, mergeAttributes } from '@tiptap/core'
+import type { Node } from '@tiptap/pm/model'
+import type { Transaction, EditorState } from '@tiptap/pm/state'
+import { Plugin, Selection } from '@tiptap/pm/state'
+import type { EditorView } from '@tiptap/pm/view'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
-import MediaNodeView from '../../components/MediaNodeView.vue'
-import { Plugin, Selection, Transaction, EditorState } from '@tiptap/pm/state'
-import { EditorView } from '@tiptap/pm/view'
-import { Node } from '@tiptap/pm/model'
+
 import { fileToBase64 } from '../../../../index'
-import { UploadedFile } from '../../../../utils/useFileUpload'
+import type { UploadedFile } from '../../../../utils/useFileUpload'
+import MediaNodeView from '../../components/MediaNodeView.vue'
 
 export const localFileMap = new Map()
 
@@ -155,10 +153,7 @@ export const ImageExtension = NodeExtension.create<ImageExtensionOptions>({
   },
 
   renderHTML({ HTMLAttributes }) {
-    return [
-      'img',
-      mergeAttributes(this.options.HTMLAttributes || {}, HTMLAttributes),
-    ]
+    return ['img', mergeAttributes(this.options.HTMLAttributes || {}, HTMLAttributes)]
   },
 
   addNodeView() {
@@ -237,31 +232,19 @@ export const ImageExtension = NodeExtension.create<ImageExtensionOptions>({
           // Find the node position
           let nodePos: number | null = null
           editor.view.state.doc.descendants((node, pos) => {
-            if (
-              node.type.name === 'image' &&
-              node.attrs.uploadId === uploadId
-            ) {
+            if (node.type.name === 'image' && node.attrs.uploadId === uploadId) {
               nodePos = pos
               return false
             }
           })
 
           if (nodePos === null) {
-            console.error(
-              'reuploadImage: could not find node with uploadId',
-              uploadId,
-            )
+            console.error('reuploadImage: could not find node with uploadId', uploadId)
             return false
           }
 
           // Re-run the upload using the stored file, replacing the node at its position
-          return uploadImageBase(
-            fileData.file,
-            editor.view,
-            nodePos,
-            this.options,
-            'replace',
-          )
+          return uploadImageBase(fileData.file, editor.view, nodePos, this.options, 'replace')
         },
     }
   },
@@ -293,8 +276,8 @@ export const ImageExtension = NodeExtension.create<ImageExtensionOptions>({
                 return false
               }
 
-              const images = Array.from(event.dataTransfer.files).filter(
-                (file) => /image/i.test(file.type),
+              const images = Array.from(event.dataTransfer.files).filter((file) =>
+                /image/i.test(file.type),
               )
 
               if (images.length === 0) {
@@ -335,10 +318,7 @@ export const ImageExtension = NodeExtension.create<ImageExtensionOptions>({
 
               for (let i = 0; i < clipboardItems.length; i++) {
                 const item = clipboardItems[i]
-                if (
-                  item.kind === 'file' &&
-                  item.type.indexOf('image/') !== -1
-                ) {
+                if (item.kind === 'file' && item.type.indexOf('image/') !== -1) {
                   const file = item.getAsFile()
                   if (file) {
                     images.push(file)
@@ -393,10 +373,7 @@ export const ImageExtension = NodeExtension.create<ImageExtensionOptions>({
   },
 })
 
-function findInsertPosition(
-  view: EditorView,
-  lastNodeId: string | null,
-): number | null {
+function findInsertPosition(view: EditorView, lastNodeId: string | null): number | null {
   if (!lastNodeId) {
     return null
   }
@@ -574,11 +551,7 @@ function findImageNodeBySource(
   })
 }
 
-function updateNodeWithDimensions(
-  src: string,
-  view: EditorView,
-  pos: number,
-): void {
+function updateNodeWithDimensions(src: string, view: EditorView, pos: number): void {
   getImageDimensions(src)
     .then((dimensions) => {
       const node = view.state.doc.nodeAt(pos)
@@ -601,9 +574,7 @@ function updateNodeWithDimensions(
     })
 }
 
-function getImageDimensions(
-  src: string,
-): Promise<{ width: number; height: number }> {
+function getImageDimensions(src: string): Promise<{ width: number; height: number }> {
   return new Promise((resolve, reject) => {
     const img = new Image()
     img.onload = () =>
@@ -639,9 +610,7 @@ export function processMultipleImages(
     const file = imageQueue.shift()
     if (!file) return
 
-    const currentPos = lastInsertedNodeId
-      ? findInsertPosition(view, lastInsertedNodeId)
-      : pos
+    const currentPos = lastInsertedNodeId ? findInsertPosition(view, lastInsertedNodeId) : pos
 
     uploadImageWithTracking(file, view, currentPos, options, (newNodeId) => {
       lastInsertedNodeId = newNodeId
diff --git a/src/components/TextEditor/extensions/image/index.ts b/src/components/TextEditor/extensions/image/index.ts
index 0ed930548..47a9ee87c 100644
--- a/src/components/TextEditor/extensions/image/index.ts
+++ b/src/components/TextEditor/extensions/image/index.ts
@@ -1,5 +1 @@
-export {
-  ImageExtension,
-  type ImageExtensionOptions,
-  type SetImageOptions,
-} from './image-extension'
+export { ImageExtension, type ImageExtensionOptions, type SetImageOptions } from './image-extension'
diff --git a/src/components/TextEditor/extensions/link/link-extension.ts b/src/components/TextEditor/extensions/link/link-extension.ts
index 34101ce72..3537f291f 100644
--- a/src/components/TextEditor/extensions/link/link-extension.ts
+++ b/src/components/TextEditor/extensions/link/link-extension.ts
@@ -1,9 +1,11 @@
-import { createApp, h } from 'vue'
+import type { Range, Editor } from '@tiptap/core'
+import { getMarkRange } from '@tiptap/core'
 import Link from '@tiptap/extension-link'
-import tippy, { type Instance as TippyInstance } from 'tippy.js'
-import { getMarkRange, Range, Editor } from '@tiptap/core'
-import { MarkType } from '@tiptap/pm/model'
+import type { MarkType } from '@tiptap/pm/model'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
+import tippy, { type Instance as TippyInstance } from 'tippy.js'
+import { createApp, h } from 'vue'
+
 import LinkPopup from '../../components/LinkPopup.vue'
 import { linkPasteHandler } from './linkPasteHandler'
 
@@ -50,10 +52,7 @@ export const LinkExtension = Link.extend({
             if (markRange) {
               range = markRange
               // Select the link text
-              editor
-                .chain()
-                .setTextSelection({ from: markRange.from, to: markRange.to })
-                .run()
+              editor.chain().setTextSelection({ from: markRange.from, to: markRange.to }).run()
               shouldDelayPopover = true
             } else {
               // No selection and not within a link, and cursor not in link
@@ -75,9 +74,7 @@ export const LinkExtension = Link.extend({
                   return
                 }
 
-                let chain = editor
-                  .chain()
-                  .focus(null, { scrollIntoView: false })
+                let chain = editor.chain().focus(null, { scrollIntoView: false })
 
                 if (href === '') {
                   chain
@@ -269,10 +266,7 @@ function openLinkEditor(href: string, anchor: HTMLElement): Promise<string> {
   })
 }
 
-function clearLinkOnBoundaryPlugin(options: {
-  editor: Editor
-  type: MarkType
-}) {
+function clearLinkOnBoundaryPlugin(options: { editor: Editor; type: MarkType }) {
   return new Plugin({
     key: new PluginKey('clearLinkMarkOnBoundary'),
     appendTransaction: (transactions, oldState, newState) => {
@@ -289,9 +283,7 @@ function clearLinkOnBoundaryPlugin(options: {
       }
 
       const linkMarkType = options.type
-      const hasStoredLinkMark = storedMarks.some(
-        (mark) => mark.type === linkMarkType,
-      )
+      const hasStoredLinkMark = storedMarks.some((mark) => mark.type === linkMarkType)
 
       if (!hasStoredLinkMark) {
         return null
@@ -299,9 +291,7 @@ function clearLinkOnBoundaryPlugin(options: {
 
       // Check if the cursor position itself has an active link mark in the document
       const marksAtCursor = $from.marks()
-      const activeLinkAtCursor = marksAtCursor.some(
-        (mark) => mark.type === linkMarkType,
-      )
+      const activeLinkAtCursor = marksAtCursor.some((mark) => mark.type === linkMarkType)
 
       if (activeLinkAtCursor) {
         // If there's an actual link mark active in the document at the cursor,
diff --git a/src/components/TextEditor/extensions/link/linkPasteHandler.ts b/src/components/TextEditor/extensions/link/linkPasteHandler.ts
index 8ba697549..a6112b011 100644
--- a/src/components/TextEditor/extensions/link/linkPasteHandler.ts
+++ b/src/components/TextEditor/extensions/link/linkPasteHandler.ts
@@ -1,6 +1,7 @@
-import { Editor } from '@tiptap/core'
-import { MarkType } from '@tiptap/pm/model'
+import type { Editor } from '@tiptap/core'
+import type { MarkType } from '@tiptap/pm/model'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
+
 import { isValidUrl } from '../../../../utils/url-validation'
 
 type PasteHandlerOptions = {
diff --git a/src/components/TextEditor/extensions/mention/mention-extension.ts b/src/components/TextEditor/extensions/mention/mention-extension.ts
index 207d0abda..6ace32dd6 100644
--- a/src/components/TextEditor/extensions/mention/mention-extension.ts
+++ b/src/components/TextEditor/extensions/mention/mention-extension.ts
@@ -1,11 +1,11 @@
-import { MaybeRefOrGetter, toValue, type Component } from 'vue'
 import { Extension, Node, mergeAttributes } from '@tiptap/core'
-import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import { PluginKey } from '@tiptap/pm/state'
-import {
-  createSuggestionExtension,
-  BaseSuggestionItem,
-} from '../suggestion/createSuggestionExtension'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import type { MaybeRefOrGetter } from 'vue'
+import { toValue, type Component } from 'vue'
+
+import type { BaseSuggestionItem } from '../suggestion/createSuggestionExtension'
+import { createSuggestionExtension } from '../suggestion/createSuggestionExtension'
 import SuggestionList from '../suggestion/SuggestionList.vue'
 import './style.css'
 
@@ -44,8 +44,7 @@ function createMentionNode(component?: Component) {
         },
         label: {
           default: null,
-          parseHTML: (element: HTMLElement) =>
-            element.getAttribute('data-label'),
+          parseHTML: (element: HTMLElement) => element.getAttribute('data-label'),
           renderHTML: (attributes: any) => {
             if (!attributes.label) {
               return {}
@@ -75,7 +74,7 @@ function createMentionNode(component?: Component) {
       return [
         'span',
         mergeAttributes(HTMLAttributes, {
-          class: 'mention',
+          'class': 'mention',
           'data-type': 'mention',
         }),
         `@${HTMLAttributes['data-label'] || HTMLAttributes.id || ''}`,
@@ -95,64 +94,63 @@ function createMentionNode(component?: Component) {
   return Node.create(config)
 }
 
-const MentionSuggestionExtension =
-  createSuggestionExtension<MentionSuggestionItem>({
-    name: 'mentionSuggestion',
-    char: '@',
-    pluginKey: new PluginKey('mentionSuggestion'),
-    component: SuggestionList,
+const MentionSuggestionExtension = createSuggestionExtension<MentionSuggestionItem>({
+  name: 'mentionSuggestion',
+  char: '@',
+  pluginKey: new PluginKey('mentionSuggestion'),
+  component: SuggestionList,
 
-    addOptions() {
-      return {
-        mentions: [],
-      }
-    },
+  addOptions() {
+    return {
+      mentions: [],
+    }
+  },
 
-    items: ({ query, editor }) => {
-      const { mentions: _mentions } = editor.extensionManager.extensions.find(
-        (ext) => ext.name === 'mentionSuggestion',
-      )!.options
-      const mentions = toValue(_mentions)
-
-      const filtered = mentions
-        .filter((mention: MentionSuggestionItem) =>
-          mention.label.toLowerCase().startsWith(query.toLowerCase()),
-        )
-        .slice(0, 10)
-        .map((mention: MentionSuggestionItem) => ({
-          ...mention,
-          display: mention.label,
-        }))
-
-      return filtered
-    },
+  items: ({ query, editor }) => {
+    const { mentions: _mentions } = editor.extensionManager.extensions.find(
+      (ext) => ext.name === 'mentionSuggestion',
+    )!.options
+    const mentions = toValue(_mentions)
+
+    const filtered = mentions
+      .filter((mention: MentionSuggestionItem) =>
+        mention.label.toLowerCase().startsWith(query.toLowerCase()),
+      )
+      .slice(0, 10)
+      .map((mention: MentionSuggestionItem) => ({
+        ...mention,
+        display: mention.label,
+      }))
+
+    return filtered
+  },
 
-    command: ({ editor, range, props }) => {
-      const attributes = {
-        id: props.id || props.value,
-        label: props.label,
-      }
+  command: ({ editor, range, props }) => {
+    const attributes = {
+      id: props.id || props.value,
+      label: props.label,
+    }
 
-      editor
-        .chain()
-        .focus()
-        .insertContentAt(range, [
-          {
-            type: 'mention',
-            attrs: attributes,
-          },
-        ])
-        .run()
-    },
+    editor
+      .chain()
+      .focus()
+      .insertContentAt(range, [
+        {
+          type: 'mention',
+          attrs: attributes,
+        },
+      ])
+      .run()
+  },
 
-    tippyOptions: {
-      placement: 'bottom-start',
-      offset: [0, 8],
-    },
-    allowSpaces: false,
-    decorationTag: 'span',
-    decorationClass: 'mention-suggestion-active',
-  })
+  tippyOptions: {
+    placement: 'bottom-start',
+    offset: [0, 8],
+  },
+  allowSpaces: false,
+  decorationTag: 'span',
+  decorationClass: 'mention-suggestion-active',
+})
 
 export const MentionExtension = Extension.create<{
   mentions: MaybeRefOrGetter<MentionSuggestionItem[]>
diff --git a/src/components/TextEditor/extensions/mention/style.css b/src/components/TextEditor/extensions/mention/style.css
index 5c3e4c3de..7a85d75e3 100644
--- a/src/components/TextEditor/extensions/mention/style.css
+++ b/src/components/TextEditor/extensions/mention/style.css
@@ -6,6 +6,7 @@
   display: inline-block;
 }
 
-.mention.ProseMirror-selectednode, .mention:hover {
+.mention.ProseMirror-selectednode,
+.mention:hover {
   background-color: var(--surface-gray-1, #f8f8f8);
 }
diff --git a/src/components/TextEditor/extensions/shared/color-utils.ts b/src/components/TextEditor/extensions/shared/color-utils.ts
index 6e805f214..0c9902c70 100644
--- a/src/components/TextEditor/extensions/shared/color-utils.ts
+++ b/src/components/TextEditor/extensions/shared/color-utils.ts
@@ -111,9 +111,7 @@ export function getClosestNamedColor(
     const namedHex = colorMap[colorName]
     if (!namedHex) continue
 
-    const namedHexClean = namedHex.startsWith('#')
-      ? namedHex.substring(1)
-      : namedHex
+    const namedHexClean = namedHex.startsWith('#') ? namedHex.substring(1) : namedHex
 
     if (namedHexClean.length !== 6) continue
 
@@ -122,9 +120,7 @@ export function getClosestNamedColor(
     const nb = parseInt(namedHexClean.substring(4, 6), 16)
 
     // Calculate Euclidean distance
-    const distance = Math.sqrt(
-      Math.pow(r - nr, 2) + Math.pow(g - ng, 2) + Math.pow(b - nb, 2),
-    )
+    const distance = Math.sqrt(Math.pow(r - nr, 2) + Math.pow(g - ng, 2) + Math.pow(b - nb, 2))
 
     if (distance < minDistance) {
       minDistance = distance
@@ -154,9 +150,7 @@ export function extractColorFromStyle(
   const allColorsInMap = Object.keys(colorMap)
 
   // Check for color in hex format
-  const hexColorMatch = new RegExp(`${property}:\\s*(#[0-9a-f]{6})`, 'i').exec(
-    style,
-  )
+  const hexColorMatch = new RegExp(`${property}:\\s*(#[0-9a-f]{6})`, 'i').exec(style)
   if (hexColorMatch && hexColorMatch[1]) {
     const closestOverallColor = getClosestNamedColor(
       hexColorMatch[1],
@@ -206,17 +200,8 @@ export function extractColorFromStyle(
 /**
  * Extracts text color from a style attribute
  */
-export function extractTextColorFromStyle(
-  style: string,
-  allowedColors: string[],
-): string | null {
-  return extractColorFromStyle(
-    style,
-    allowedColors,
-    textColorHexMap,
-    legacyTextColorMap,
-    'color',
-  )
+export function extractTextColorFromStyle(style: string, allowedColors: string[]): string | null {
+  return extractColorFromStyle(style, allowedColors, textColorHexMap, legacyTextColorMap, 'color')
 }
 
 /**
diff --git a/src/components/TextEditor/extensions/slash-commands/SlashCommandsList.vue b/src/components/TextEditor/extensions/slash-commands/SlashCommandsList.vue
index 40b154572..69777c245 100644
--- a/src/components/TextEditor/extensions/slash-commands/SlashCommandsList.vue
+++ b/src/components/TextEditor/extensions/slash-commands/SlashCommandsList.vue
@@ -16,9 +16,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, type PropType } from 'vue'
-import SuggestionList from '../suggestion/SuggestionList.vue'
 import type { Editor, Range } from '@tiptap/core'
+import { ref, type PropType } from 'vue'
+
+import type SuggestionList from '../suggestion/SuggestionList.vue'
 import type { CommandItem } from './slash-commands-extension'
 
 const props = defineProps({
diff --git a/src/components/TextEditor/extensions/slash-commands/slash-commands-extension.ts b/src/components/TextEditor/extensions/slash-commands/slash-commands-extension.ts
index b7cf9e075..7cc1bdd4d 100644
--- a/src/components/TextEditor/extensions/slash-commands/slash-commands-extension.ts
+++ b/src/components/TextEditor/extensions/slash-commands/slash-commands-extension.ts
@@ -1,30 +1,28 @@
-import { Editor, Range } from '@tiptap/core'
+import type { Editor, Range } from '@tiptap/core'
 import { PluginKey } from '@tiptap/pm/state'
-import {
-  createSuggestionExtension,
-  type BaseSuggestionItem,
-} from '../suggestion/createSuggestionExtension'
-import SlashCommandsList from './SlashCommandsList.vue'
-import { Component as VueComponent } from 'vue'
-
+import type { Component as VueComponent } from 'vue'
+import Code from '~icons/lucide/code'
+import GalleryVertical from '~icons/lucide/gallery-vertical'
 import Heading2 from '~icons/lucide/heading-2'
 import Heading3 from '~icons/lucide/heading-3'
-import List from '~icons/lucide/list'
-import ListOrdered from '~icons/lucide/list-ordered'
-import ListTask from '~icons/lucide/list-checks'
-import Code from '~icons/lucide/code'
-import Quote from '~icons/lucide/quote'
 import Image from '~icons/lucide/image'
-import Video from '~icons/lucide/video'
-import GalleryVertical from '~icons/lucide/gallery-vertical'
 import Link from '~icons/lucide/link'
+import List from '~icons/lucide/list'
+import ListTask from '~icons/lucide/list-checks'
+import ListOrdered from '~icons/lucide/list-ordered'
 import Minus from '~icons/lucide/minus'
+import Quote from '~icons/lucide/quote'
 import Table from '~icons/lucide/table-2'
 import TableOfContents from '~icons/lucide/table-of-contents'
+import Video from '~icons/lucide/video'
 
-export const SlashCommandSuggestionKey = new PluginKey<any>(
-  'slashCommandSuggestion',
-)
+import {
+  createSuggestionExtension,
+  type BaseSuggestionItem,
+} from '../suggestion/createSuggestionExtension'
+import SlashCommandsList from './SlashCommandsList.vue'
+
+export const SlashCommandSuggestionKey = new PluginKey<any>('slashCommandSuggestion')
 
 export interface CommandItem extends BaseSuggestionItem {
   title: string
@@ -42,24 +40,14 @@ const getCommands = (): CommandItem[] => [
     title: 'Heading 2',
     icon: Heading2,
     command: ({ editor, range }: CommandExecutionProps) => {
-      editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .setNode('heading', { level: 2 })
-        .run()
+      editor.chain().focus().deleteRange(range).setNode('heading', { level: 2 }).run()
     },
   },
   {
     title: 'Heading 3',
     icon: Heading3,
     command: ({ editor, range }: CommandExecutionProps) => {
-      editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .setNode('heading', { level: 3 })
-        .run()
+      editor.chain().focus().deleteRange(range).setNode('heading', { level: 3 }).run()
     },
   },
   {
@@ -148,12 +136,7 @@ const getCommands = (): CommandItem[] => [
     title: 'Table of Contents',
     icon: TableOfContents,
     command: ({ editor, range }: CommandExecutionProps) => {
-      editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .insertTableOfContentsNode()
-        .run()
+      editor.chain().focus().deleteRange(range).insertTableOfContentsNode().run()
     },
   },
 ]
@@ -164,9 +147,7 @@ export const SlashCommands = createSuggestionExtension<CommandItem>({
   pluginKey: SlashCommandSuggestionKey,
   items: ({ query }) => {
     const commands = getCommands()
-    return commands.filter((item) =>
-      item.title.toLowerCase().startsWith(query.toLowerCase()),
-    )
+    return commands.filter((item) => item.title.toLowerCase().startsWith(query.toLowerCase()))
   },
   command: ({ editor, range, props: item }) => {
     if (item && typeof item.command === 'function') {
diff --git a/src/components/TextEditor/extensions/suggestion/SuggestionList.vue b/src/components/TextEditor/extensions/suggestion/SuggestionList.vue
index 2157dd0f0..401f3c2a1 100644
--- a/src/components/TextEditor/extensions/suggestion/SuggestionList.vue
+++ b/src/components/TextEditor/extensions/suggestion/SuggestionList.vue
@@ -25,10 +25,7 @@
         <span>{{ item.display || item.title || item.name }}</span>
       </slot>
     </button>
-    <div
-      v-if="!items.length && showNoResults"
-      class="px-3 py-1.5 text-sm text-ink-gray-5"
-    >
+    <div v-if="!items.length && showNoResults" class="px-3 py-1.5 text-sm text-ink-gray-5">
       No results
     </div>
   </div>
@@ -36,6 +33,7 @@
 
 <script setup lang="ts">
 import { ref, watch, type PropType, nextTick, onBeforeUpdate } from 'vue'
+
 import type { BaseSuggestionItem } from './createSuggestionExtension'
 
 const props = defineProps({
@@ -104,8 +102,7 @@ const onKeyDown = ({ event }: { event: KeyboardEvent }) => {
 }
 
 const upHandler = () => {
-  selectedIndex.value =
-    (selectedIndex.value + props.items.length - 1) % props.items.length
+  selectedIndex.value = (selectedIndex.value + props.items.length - 1) % props.items.length
   scrollIntoView()
 }
 
diff --git a/src/components/TextEditor/extensions/suggestion/createSuggestionExtension.ts b/src/components/TextEditor/extensions/suggestion/createSuggestionExtension.ts
index e7f8ff6aa..8154e8a46 100644
--- a/src/components/TextEditor/extensions/suggestion/createSuggestionExtension.ts
+++ b/src/components/TextEditor/extensions/suggestion/createSuggestionExtension.ts
@@ -1,12 +1,12 @@
-import { Extension, Editor, Range } from '@tiptap/core'
+import type { Editor, Range } from '@tiptap/core'
+import { Extension } from '@tiptap/core'
+import type { PluginKey } from '@tiptap/pm/state'
+import type { SuggestionOptions, SuggestionProps } from '@tiptap/suggestion'
+import Suggestion from '@tiptap/suggestion'
 import { VueRenderer } from '@tiptap/vue-3'
-import Suggestion, {
-  SuggestionOptions,
-  SuggestionProps,
-} from '@tiptap/suggestion'
-import { PluginKey } from '@tiptap/pm/state'
-import tippy, { Instance as TippyInstance, Props as TippyProps } from 'tippy.js'
-import { Component as VueComponent } from 'vue'
+import type { Instance as TippyInstance, Props as TippyProps } from 'tippy.js'
+import tippy from 'tippy.js'
+import type { Component as VueComponent } from 'vue'
 
 export interface BaseSuggestionItem {
   title?: string
@@ -14,16 +14,11 @@ export interface BaseSuggestionItem {
   [key: string]: any
 }
 
-export interface CreateSuggestionExtensionOptions<
-  TItem extends BaseSuggestionItem,
-> {
+export interface CreateSuggestionExtensionOptions<TItem extends BaseSuggestionItem> {
   name: string
   char: string
   pluginKey: PluginKey
-  items: (props: {
-    query: string
-    editor: Editor
-  }) => TItem[] | Promise<TItem[]>
+  items: (props: { query: string; editor: Editor }) => TItem[] | Promise<TItem[]>
   command: (props: { editor: Editor; range: Range; props: TItem }) => void
   component: VueComponent
   tippyOptions?: Partial<TippyProps>
@@ -45,9 +40,7 @@ export function createSuggestionExtension<TItem extends BaseSuggestionItem>(
     name: options.name,
 
     addOptions() {
-      const customOptions = options.addOptions
-        ? options.addOptions.call(this)
-        : {}
+      const customOptions = options.addOptions ? options.addOptions.call(this) : {}
 
       return {
         ...customOptions,
diff --git a/src/components/TextEditor/extensions/tag/tag-extension.ts b/src/components/TextEditor/extensions/tag/tag-extension.ts
index 575f592f2..77c57b061 100644
--- a/src/components/TextEditor/extensions/tag/tag-extension.ts
+++ b/src/components/TextEditor/extensions/tag/tag-extension.ts
@@ -1,12 +1,11 @@
 import { Node, mergeAttributes, Range, Editor } from '@tiptap/core'
 import { PluginKey } from '@tiptap/pm/state'
-import {
-  createSuggestionExtension,
-  BaseSuggestionItem,
-} from '../suggestion/createSuggestionExtension'
-import SuggestionList from '../suggestion/SuggestionList.vue'
 import { toValue } from 'vue'
-import { TextEditorProps } from '../../types'
+
+import type { TextEditorProps } from '../../types'
+import type { BaseSuggestionItem } from '../suggestion/createSuggestionExtension'
+import { createSuggestionExtension } from '../suggestion/createSuggestionExtension'
+import SuggestionList from '../suggestion/SuggestionList.vue'
 
 export const TagNode = Node.create({
   name: 'tagItem',
@@ -43,9 +42,7 @@ export const TagNode = Node.create({
           const element = dom as HTMLElement
           return {
             tagId: element.getAttribute('data-tag-id'),
-            tagLabel:
-              element.getAttribute('data-tag-label') ||
-              element.innerText.replace(/^#/, ''),
+            tagLabel: element.getAttribute('data-tag-label') || element.innerText.replace(/^#/, ''),
           }
         },
       },
@@ -61,7 +58,7 @@ export const TagNode = Node.create({
     ]
   },
   renderText({ node }: any) {
-    return `#${node.attrs.tagLabel ||  ''}`
+    return `#${node.attrs.tagLabel || ''}`
   },
   addCommands() {
     return {
@@ -103,17 +100,12 @@ export const TagExtension = createSuggestionExtension<TagSuggestionItem>({
 
     // Filter existing tags based on the query
     let filteredTags = tags
-      .filter((tag: TagSuggestionItem) =>
-        tag.label.toLowerCase().startsWith(query.toLowerCase()),
-      )
+      .filter((tag: TagSuggestionItem) => tag.label.toLowerCase().startsWith(query.toLowerCase()))
       .map((tag: TagSuggestionItem) => ({ ...tag, display: tag.label }))
 
     if (
       query.length > 0 &&
-      !tags.some(
-        (tag: TagSuggestionItem) =>
-          tag.label.toLowerCase() === query.toLowerCase(),
-      )
+      !tags.some((tag: TagSuggestionItem) => tag.label.toLowerCase() === query.toLowerCase())
     ) {
       filteredTags.push({
         display: `New tag: "${query}"`,
diff --git a/src/components/TextEditor/extensions/toc-node/TocNodeView.vue b/src/components/TextEditor/extensions/toc-node/TocNodeView.vue
index 95e6d73f6..16f3f5710 100644
--- a/src/components/TextEditor/extensions/toc-node/TocNodeView.vue
+++ b/src/components/TextEditor/extensions/toc-node/TocNodeView.vue
@@ -1,9 +1,6 @@
 <template>
-  <NodeViewWrapper
-    class="table-of-contents-node group relative"
-    contenteditable="false"
-  >
-    <p v-if="anchorTree.length === 0" class="text-sm text-ink-gray-5 py-3">
+  <NodeViewWrapper class="table-of-contents-node group relative" contenteditable="false">
+    <p v-if="anchorTree.length === 0" class="py-3 text-sm text-ink-gray-5">
       There are no headings in this document.
     </p>
     <ol v-else v-bind="orderedListHTMLAttrs">
@@ -21,7 +18,7 @@
     <button
       v-if="isEditable"
       @click="removeNode"
-      class="absolute top-2 right-2 bg-black/65 hover:bg-black/80 text-ink-gray-4 hover:text-ink-white p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
+      class="absolute right-2 top-2 rounded bg-black/65 p-1 text-ink-gray-4 opacity-0 transition-opacity hover:bg-black/80 hover:text-ink-white group-hover:opacity-100"
       title="Remove table of contents"
     >
       <LucideX class="size-4" />
@@ -30,19 +27,10 @@
 </template>
 
 <script setup lang="ts">
-import {
-  computed,
-  ref,
-  onMounted,
-  onBeforeUnmount,
-  nextTick,
-  watch,
-  defineComponent,
-  h,
-} from 'vue'
-import type { PropType, VNode } from 'vue'
-import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
 import { TextSelection } from '@tiptap/pm/state'
+import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+import { computed, ref, onMounted, onBeforeUnmount, nextTick, watch, defineComponent, h } from 'vue'
+import type { PropType, VNode } from 'vue'
 
 const props = defineProps(nodeViewProps)
 
@@ -63,12 +51,8 @@ const anchors = ref<HeadingAnchor[]>([])
 const anchorTree = computed(() => buildAnchorTree(anchors.value))
 const isEditable = ref(false)
 
-const orderedListHTMLAttrs = computed(
-  () => getExtensionHTMLAttributes('orderedList') ?? {},
-)
-const listItemHTMLAttrs = computed(
-  () => getExtensionHTMLAttributes('listItem') ?? {},
-)
+const orderedListHTMLAttrs = computed(() => getExtensionHTMLAttributes('orderedList') ?? {})
+const listItemHTMLAttrs = computed(() => getExtensionHTMLAttributes('listItem') ?? {})
 
 const removeNode = () => {
   if (!props.editor || !isEditable.value) return
@@ -112,13 +96,8 @@ const scrollToHeading = (heading: HeadingAnchor) => {
   }
 
   if (!element) {
-    const allHeadings = Array.from(
-      editorDom.querySelectorAll('h1, h2, h3, h4, h5, h6'),
-    )
-    element =
-      allHeadings.find(
-        (el) => el.textContent?.trim() === heading.textContent,
-      ) || null
+    const allHeadings = Array.from(editorDom.querySelectorAll('h1, h2, h3, h4, h5, h6'))
+    element = allHeadings.find((el) => el.textContent?.trim() === heading.textContent) || null
   }
 
   const tr = view.state.tr
@@ -132,8 +111,7 @@ const scrollToHeading = (heading: HeadingAnchor) => {
     const containerRect = editorContainer.getBoundingClientRect()
 
     const currentScrollTop = editorContainer.scrollTop
-    const elementTopRelativeToContainer =
-      elementRect.top - containerRect.top + currentScrollTop
+    const elementTopRelativeToContainer = elementRect.top - containerRect.top + currentScrollTop
 
     editorContainer.scrollTo({
       top: Math.max(0, elementTopRelativeToContainer - 20),
@@ -152,8 +130,7 @@ const scrollToHeading = (heading: HeadingAnchor) => {
         const nodeRect = node.getBoundingClientRect()
         const containerRect = editorContainer.getBoundingClientRect()
         const currentScrollTop = editorContainer.scrollTop
-        const nodeTopRelativeToContainer =
-          nodeRect.top - containerRect.top + currentScrollTop
+        const nodeTopRelativeToContainer = nodeRect.top - containerRect.top + currentScrollTop
 
         editorContainer.scrollTo({
           top: Math.max(0, nodeTopRelativeToContainer - 20),
@@ -201,9 +178,7 @@ const TocRecursiveItem = defineComponent({
             props.listAttrs?.class,
             'toc-item',
             props.node.isScrolledOver ? 'text-ink-gray-5' : 'text-ink-gray-8',
-            props.node.isActive && !props.node.isScrolledOver
-              ? 'font-medium'
-              : '',
+            props.node.isActive && !props.node.isScrolledOver ? 'font-medium' : '',
           ]
             .filter(Boolean)
             .join(' '),
@@ -240,9 +215,8 @@ const TocRecursiveItem = defineComponent({
 })
 
 const getExtensionHTMLAttributes = (name: string) => {
-  return props.editor?.extensionManager?.extensions.find(
-    (ext: any) => ext.name === name,
-  )?.options?.HTMLAttributes
+  return props.editor?.extensionManager?.extensions.find((ext: any) => ext.name === name)?.options
+    ?.HTMLAttributes
 }
 
 const buildAnchorTree = (items: HeadingAnchor[]): AnchorNode[] => {
@@ -321,13 +295,8 @@ const extractAnchors = (): HeadingAnchor[] => {
       const domPos = props.editor.view.domAtPos(pos)
       const domNode = domPos.node
       if (domNode?.nodeType === Node.ELEMENT_NODE) {
-        const headingEl = (domNode as Element).closest(
-          'h1, h2, h3, h4, h5, h6, [data-toc-id]',
-        )
-        id =
-          headingEl?.getAttribute('data-toc-id') ||
-          headingEl?.getAttribute('id') ||
-          undefined
+        const headingEl = (domNode as Element).closest('h1, h2, h3, h4, h5, h6, [data-toc-id]')
+        id = headingEl?.getAttribute('data-toc-id') || headingEl?.getAttribute('id') || undefined
       }
     }
 
@@ -339,21 +308,15 @@ const extractAnchors = (): HeadingAnchor[] => {
     })
   })
 
-  if (!headings.length || !scrollParent || !props.editor?.view?.dom)
-    return headings
+  if (!headings.length || !scrollParent || !props.editor?.view?.dom) return headings
 
   const scrollTop = scrollParent.scrollTop
   headings.forEach((heading) => {
-    const element = props.editor.view.dom.querySelector(
-      `[data-toc-id="${heading.id}"]`,
-    )
+    const element = props.editor.view.dom.querySelector(`[data-toc-id="${heading.id}"]`)
     if (element) {
       const relativeTop =
-        element.getBoundingClientRect().top -
-        scrollParent.getBoundingClientRect().top +
-        scrollTop
-      heading.isActive =
-        relativeTop >= scrollTop - 50 && relativeTop <= scrollTop + 100
+        element.getBoundingClientRect().top - scrollParent.getBoundingClientRect().top + scrollTop
+      heading.isActive = relativeTop >= scrollTop - 50 && relativeTop <= scrollTop + 100
       heading.isScrolledOver = relativeTop < scrollTop - 50
     }
   })
diff --git a/src/components/TextEditor/extensions/toc-node/index.ts b/src/components/TextEditor/extensions/toc-node/index.ts
index 28e9f840c..a46f1b674 100644
--- a/src/components/TextEditor/extensions/toc-node/index.ts
+++ b/src/components/TextEditor/extensions/toc-node/index.ts
@@ -1,3 +1,2 @@
 export { TocNodeExtension } from './toc-node-extension'
 export { default } from './toc-node-extension'
-
diff --git a/src/components/TextEditor/extensions/toc-node/toc-node-extension.ts b/src/components/TextEditor/extensions/toc-node/toc-node-extension.ts
index f260a2d10..b021ec16a 100644
--- a/src/components/TextEditor/extensions/toc-node/toc-node-extension.ts
+++ b/src/components/TextEditor/extensions/toc-node/toc-node-extension.ts
@@ -1,5 +1,6 @@
 import { Node } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
 import TocNodeView from './TocNodeView.vue'
 
 declare module '@tiptap/core' {
@@ -43,8 +44,7 @@ export const TocNodeExtension = Node.create({
       if (this.editor?.commands?.getCurrentTab) {
         activeTabId = this.editor.commands.getCurrentTab() || null
       }
-    } catch (e) {
-    }
+    } catch (e) {}
 
     if (this.editor?.state?.doc) {
       const doc = this.editor.state.doc
@@ -80,7 +80,7 @@ export const TocNodeExtension = Node.create({
     if (headings.length === 0) {
       return [
         'div',
-        { ...HTMLAttributes, 'data-type': 'toc-node', class: 'table-of-contents-node' },
+        { ...HTMLAttributes, 'data-type': 'toc-node', 'class': 'table-of-contents-node' },
         'No headings found in this document.',
       ]
     }
@@ -123,7 +123,13 @@ export const TocNodeExtension = Node.create({
           {},
           ['p', { style: 'margin: 0' }, node.text],
           ...(node.children.length > 0
-            ? [['ol', { style: 'list-style-type: decimal; padding-left: 1.5em' }, ...convertToHTML(node.children)]]
+            ? [
+                [
+                  'ol',
+                  { style: 'list-style-type: decimal; padding-left: 1.5em' },
+                  ...convertToHTML(node.children),
+                ],
+              ]
             : []),
         ])
       }
@@ -135,8 +141,12 @@ export const TocNodeExtension = Node.create({
 
     return [
       'div',
-      { ...HTMLAttributes, 'data-type': 'toc-node', class: 'table-of-contents-node' },
-      ['ol', { style: 'list-style-type: decimal; margin: 0.5em 0; padding-left: 1.5em' }, ...listItems],
+      { ...HTMLAttributes, 'data-type': 'toc-node', 'class': 'table-of-contents-node' },
+      [
+        'ol',
+        { style: 'list-style-type: decimal; margin: 0.5em 0; padding-left: 1.5em' },
+        ...listItems,
+      ],
     ]
   },
 
@@ -161,6 +171,3 @@ export const TocNodeExtension = Node.create({
 })
 
 export default TocNodeExtension
-
-
-
diff --git a/src/components/TextEditor/extensions/video-extension.ts b/src/components/TextEditor/extensions/video-extension.ts
index abc0b5e68..51a3d1c6b 100644
--- a/src/components/TextEditor/extensions/video-extension.ts
+++ b/src/components/TextEditor/extensions/video-extension.ts
@@ -1,15 +1,13 @@
-import {
-  Node as NodeExtension,
-  nodeInputRule,
-  mergeAttributes,
-} from '@tiptap/core'
+import { Node as NodeExtension, nodeInputRule, mergeAttributes } from '@tiptap/core'
+import type { Node } from '@tiptap/pm/model'
+import type { Transaction, EditorState } from '@tiptap/pm/state'
+import { Plugin, Selection } from '@tiptap/pm/state'
+import type { EditorView } from '@tiptap/pm/view'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
-import MediaNodeView from '../components/MediaNodeView.vue'
-import { Plugin, Selection, Transaction, EditorState } from '@tiptap/pm/state'
-import { EditorView } from '@tiptap/pm/view'
-import { Node } from '@tiptap/pm/model'
+
 import { fileToBase64 } from '../../../index'
-import { UploadedFile } from '../../../utils/useFileUpload'
+import type { UploadedFile } from '../../../utils/useFileUpload'
+import MediaNodeView from '../components/MediaNodeView.vue'
 import { localFileMap } from './image/image-extension'
 
 export interface VideoExtensionOptions {
@@ -71,8 +69,7 @@ declare module '@tiptap/core' {
 /**
  * Matches markdown-style video syntax (custom): !video[alt](src "title")
  */
-const inputRegex =
-  /(?:^|\s)(!video\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
+const inputRegex = /(?:^|\s)(!video\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
 
 export const VideoExtension = NodeExtension.create<VideoExtensionOptions>({
   name: 'video',
@@ -105,8 +102,7 @@ export const VideoExtension = NodeExtension.create<VideoExtensionOptions>({
       float: {
         default: null,
         parseHTML: (element) => {
-          const float =
-            element.getAttribute('data-float') || element.getAttribute('float')
+          const float = element.getAttribute('data-float') || element.getAttribute('float')
 
           if (['left', 'right', null].includes(float)) {
             return float as 'left' | 'right' | null
@@ -218,41 +214,26 @@ export const VideoExtension = NodeExtension.create<VideoExtensionOptions>({
         ({ editor }) => {
           const fileData = localFileMap.get(uploadId)
           if (!fileData) {
-            console.error(
-              'reuploadVideo: no file found in localFileMap for uploadId',
-              uploadId,
-            )
+            console.error('reuploadVideo: no file found in localFileMap for uploadId', uploadId)
             return false
           }
 
           // Find the node position
           let nodePos: number | null = null
           editor.view.state.doc.descendants((node, pos) => {
-            if (
-              node.type.name === 'video' &&
-              node.attrs.uploadId === uploadId
-            ) {
+            if (node.type.name === 'video' && node.attrs.uploadId === uploadId) {
               nodePos = pos
               return false
             }
           })
 
           if (nodePos === null) {
-            console.error(
-              'reuploadVideo: could not find node with uploadId',
-              uploadId,
-            )
+            console.error('reuploadVideo: could not find node with uploadId', uploadId)
             return false
           }
 
           // Re-run the upload using the stored file, replacing the node at its position
-          return uploadVideoBase(
-            fileData.file,
-            editor.view,
-            nodePos,
-            this.options,
-            'replace',
-          )
+          return uploadVideoBase(fileData.file, editor.view, nodePos, this.options, 'replace')
         },
     }
   },
@@ -284,8 +265,8 @@ export const VideoExtension = NodeExtension.create<VideoExtensionOptions>({
                 return false
               }
 
-              const videos = Array.from(event.dataTransfer.files).filter(
-                (file) => /video/i.test(file.type),
+              const videos = Array.from(event.dataTransfer.files).filter((file) =>
+                /video/i.test(file.type),
               )
 
               if (videos.length === 0) {
@@ -326,10 +307,7 @@ export const VideoExtension = NodeExtension.create<VideoExtensionOptions>({
 
               for (let i = 0; i < clipboardItems.length; i++) {
                 const item = clipboardItems[i]
-                if (
-                  item.kind === 'file' &&
-                  item.type.indexOf('video/') !== -1
-                ) {
+                if (item.kind === 'file' && item.type.indexOf('video/') !== -1) {
                   const file = item.getAsFile()
                   if (file) videos.push(file)
                 }
@@ -380,10 +358,7 @@ export const VideoExtension = NodeExtension.create<VideoExtensionOptions>({
   },
 })
 
-function findInsertPosition(
-  view: EditorView,
-  lastNodeId: string | null,
-): number | null {
+function findInsertPosition(view: EditorView, lastNodeId: string | null): number | null {
   if (!lastNodeId) {
     return null
   }
@@ -567,11 +542,7 @@ function findVideoNodeBySource(
   })
 }
 
-function updateNodeWithDimensions(
-  src: string,
-  view: EditorView,
-  pos: number,
-): void {
+function updateNodeWithDimensions(src: string, view: EditorView, pos: number): void {
   getVideoDimensions(src)
     .then((dimensions) => {
       const node = view.state.doc.nodeAt(pos)
@@ -594,9 +565,7 @@ function updateNodeWithDimensions(
     })
 }
 
-function getVideoDimensions(
-  src: string,
-): Promise<{ width: number; height: number }> {
+function getVideoDimensions(src: string): Promise<{ width: number; height: number }> {
   return new Promise((resolve, reject) => {
     const video = document.createElement('video')
     video.preload = 'metadata'
@@ -638,9 +607,7 @@ export function processMultipleVideos(
     const file = videoQueue.shift()
     if (!file) return
 
-    const currentPos = lastInsertedNodeId
-      ? findInsertPosition(view, lastInsertedNodeId)
-      : pos
+    const currentPos = lastInsertedNodeId ? findInsertPosition(view, lastInsertedNodeId) : pos
 
     uploadVideoWithTracking(file, view, currentPos, options, (newNodeId) => {
       lastInsertedNodeId = newNodeId
diff --git a/src/components/TextEditor/index.ts b/src/components/TextEditor/index.ts
index e07c3e131..8fac23ac1 100644
--- a/src/components/TextEditor/index.ts
+++ b/src/components/TextEditor/index.ts
@@ -4,4 +4,4 @@ export { default as TextEditorBubbleMenu } from './components/TextEditorBubbleMe
 export { default as TextEditorFixedMenu } from './components/TextEditorFixedMenu.vue'
 export { default as TextEditorFloatingMenu } from './components/TextEditorFloatingMenu.vue'
 export { EditorContent as TextEditorContent } from '@tiptap/vue-3'
-export { createEditorButton as createEditorButton } from './utils'
+export { createEditorButton } from './utils'
diff --git a/src/components/TextEditor/stories/Comment.vue b/src/components/TextEditor/stories/Comment.vue
index b63e22de1..65796f1df 100644
--- a/src/components/TextEditor/stories/Comment.vue
+++ b/src/components/TextEditor/stories/Comment.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { EditorContent } from '@tiptap/vue-3'
 import { Button, TextEditor, TextEditorFixedMenu } from 'frappe-ui'
+import { ref } from 'vue'
 
 const customValue = ref('')
 const customButtons = [
@@ -29,20 +29,12 @@ const customButtons = [
     placeholder="Write something amazing..."
   >
     <template v-slot:editor="{ editor }">
-      <EditorContent
-        class="max-h-[50vh] overflow-y-auto border rounded-lg p-4"
-        :editor="editor"
-      />
+      <EditorContent class="max-h-[50vh] overflow-y-auto rounded-lg border p-4" :editor="editor" />
     </template>
 
     <template v-slot:bottom>
-      <div
-        class="mt-2 flex flex-col justify-between sm:flex-row sm:items-center"
-      >
-        <TextEditorFixedMenu
-          class="-ml-1 overflow-x-auto"
-          :buttons="customButtons"
-        />
+      <div class="mt-2 flex flex-col justify-between sm:flex-row sm:items-center">
+        <TextEditorFixedMenu class="-ml-1 overflow-x-auto" :buttons="customButtons" />
         <div class="mt-2 flex items-center justify-end space-x-2 sm:mt-0">
           <Button>Cancel</Button>
           <Button variant="solid">Submit</Button>
diff --git a/src/components/TextEditor/stories/Example.vue b/src/components/TextEditor/stories/Example.vue
index 26b209613..e7df8c961 100644
--- a/src/components/TextEditor/stories/Example.vue
+++ b/src/components/TextEditor/stories/Example.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { TextEditor } from 'frappe-ui'
+import { ref } from 'vue'
 
 const value = ref(`
 <div>
diff --git a/src/components/TextEditor/types.ts b/src/components/TextEditor/types.ts
index 1ffbf1d69..459329bd2 100644
--- a/src/components/TextEditor/types.ts
+++ b/src/components/TextEditor/types.ts
@@ -1,4 +1,5 @@
 import { type Component } from 'vue'
+
 import { type UploadedFile } from '../../utils/useFileUpload'
 import { type MentionSuggestionItem } from './extensions/mention/mention-extension'
 
diff --git a/src/components/TextInput/TextInput.cy.ts b/src/components/TextInput/TextInput.cy.ts
index 2bf0a882a..309f9f3ea 100644
--- a/src/components/TextInput/TextInput.cy.ts
+++ b/src/components/TextInput/TextInput.cy.ts
@@ -1,6 +1,7 @@
-import TextInput from './TextInput.vue'
 import { h } from 'vue'
 
+import TextInput from './TextInput.vue'
+
 const inputTypes = [
   'text',
   'number',
diff --git a/src/components/TextInput/TextInput.vue b/src/components/TextInput/TextInput.vue
index 662ed489a..7d0a279ef 100644
--- a/src/components/TextInput/TextInput.vue
+++ b/src/components/TextInput/TextInput.vue
@@ -1,15 +1,7 @@
 <template>
-  <div
-    class="relative flex items-center"
-    :class="attrs.class"
-    :style="attrs.style"
-  >
+  <div class="relative flex items-center" :class="attrs.class" :style="attrs.style">
     <div
-      :class="[
-        'absolute inset-y-0 left-0 flex items-center',
-        textColor,
-        prefixClasses,
-      ]"
+      :class="['absolute inset-y-0 left-0 flex items-center', textColor, prefixClasses]"
       v-if="$slots.prefix"
     >
       <slot name="prefix"> </slot>
@@ -28,11 +20,7 @@
       v-bind="attrsWithoutClassStyle"
     />
     <div
-      :class="[
-        'absolute inset-y-0 right-0 flex items-center',
-        textColor,
-        suffixClasses,
-      ]"
+      :class="['absolute inset-y-0 right-0 flex items-center', textColor, suffixClasses]"
       v-if="$slots.suffix"
     >
       <slot name="suffix"> </slot>
@@ -42,6 +30,7 @@
 
 <script setup lang="ts">
 import { computed, useSlots, useAttrs, ref } from 'vue'
+
 import debounce from '../../utils/debounce'
 import type { TextInputProps } from './types'
 
@@ -92,26 +81,10 @@ const inputClasses = computed(() => {
   }[props.size]
 
   let paddingClasses = {
-    sm: [
-      'py-1.5',
-      slots.prefix ? 'pl-8' : 'pl-2',
-      slots.suffix ? 'pr-8' : 'pr-2',
-    ],
-    md: [
-      'py-1.5',
-      slots.prefix ? 'pl-9' : 'pl-2.5',
-      slots.suffix ? 'pr-9' : 'pr-2.5',
-    ],
-    lg: [
-      'py-1.5',
-      slots.prefix ? 'pl-10' : 'pl-3',
-      slots.suffix ? 'pr-10' : 'pr-3',
-    ],
-    xl: [
-      'py-1.5',
-      slots.prefix ? 'pl-10' : 'pl-3',
-      slots.suffix ? 'pr-10' : 'pr-3',
-    ],
+    sm: ['py-1.5', slots.prefix ? 'pl-8' : 'pl-2', slots.suffix ? 'pr-8' : 'pr-2'],
+    md: ['py-1.5', slots.prefix ? 'pl-9' : 'pl-2.5', slots.suffix ? 'pr-9' : 'pr-2.5'],
+    lg: ['py-1.5', slots.prefix ? 'pl-10' : 'pl-3', slots.suffix ? 'pr-10' : 'pr-3'],
+    xl: ['py-1.5', slots.prefix ? 'pl-10' : 'pl-3', slots.suffix ? 'pr-10' : 'pr-3'],
   }[props.size]
 
   let variant = props.disabled ? 'disabled' : props.variant
@@ -122,9 +95,7 @@ const inputClasses = computed(() => {
       'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
     disabled: [
       'border bg-surface-gray-1 placeholder-ink-gray-3',
-      props.variant === 'outline'
-        ? 'border-outline-gray-2'
-        : 'border-transparent',
+      props.variant === 'outline' ? 'border-outline-gray-2' : 'border-transparent',
     ],
     ghost: 'border-0 focus:ring-0 focus-visible:ring-0',
   }[variant]
diff --git a/src/components/TextInput/index.ts b/src/components/TextInput/index.ts
index 1f4a4ba5f..97cbc1f60 100644
--- a/src/components/TextInput/index.ts
+++ b/src/components/TextInput/index.ts
@@ -1,2 +1,2 @@
 export { default as TextInput } from './TextInput.vue'
-export type { TextInputProps } from './types'
\ No newline at end of file
+export type { TextInputProps } from './types'
diff --git a/src/components/TextInput/stories/List.vue b/src/components/TextInput/stories/List.vue
index 79811d2e3..d1048f4e4 100644
--- a/src/components/TextInput/stories/List.vue
+++ b/src/components/TextInput/stories/List.vue
@@ -1,31 +1,28 @@
 <script setup lang="ts">
-import Story from "@/components/Story.vue";
-import { Avatar, TextInput } from "frappe-ui";
-import LucideSearch from "~icons/lucide/search";
+import { Avatar, TextInput } from 'frappe-ui'
+import LucideSearch from '~icons/lucide/search'
+
+import Story from '@/components/Story.vue'
 
 const inputTypes = [
-  "text",
-  "number",
-  "email",
-  "date",
-  "datetime-local",
-  "password",
-  "search",
-  "tel",
-  "time",
-  "url",
-];
-const sizes = ["sm", "md", "lg", "xl"];
-const variants = ["subtle", "outline"];
+  'text',
+  'number',
+  'email',
+  'date',
+  'datetime-local',
+  'password',
+  'search',
+  'tel',
+  'time',
+  'url',
+]
+const sizes = ['sm', 'md', 'lg', 'xl']
+const variants = ['subtle', 'outline']
 </script>
 
 <template>
   <div class="grid grid-cols-2 gap-5">
-    <Story
-      v-for="inputType in inputTypes"
-      :key="inputType"
-      :title="inputType"
-    >
+    <Story v-for="inputType in inputTypes" :key="inputType" :title="inputType">
       <TextInput :type="inputType" placeholder="Enter input" />
     </Story>
 
@@ -48,10 +45,7 @@ const variants = ["subtle", "outline"];
     <Story title="prefix slot avatar">
       <TextInput placeholder="Enter Name">
         <template #prefix>
-          <Avatar
-            size="sm"
-            image="https://avatars.githubusercontent.com/u/499550?s=60&v=4"
-          />
+          <Avatar size="sm" image="https://avatars.githubusercontent.com/u/499550?s=60&v=4" />
         </template>
       </TextInput>
     </Story>
@@ -61,11 +55,7 @@ const variants = ["subtle", "outline"];
     </Story>
 
     <Story title="Variants" class="col-span-2" preview-css="flex gap-3">
-      <TextInput
-        v-for="variant in variants"
-        :variant="variant"
-        placeholder="Enter input"
-      />
+      <TextInput v-for="variant in variants" :variant="variant" placeholder="Enter input" />
     </Story>
   </div>
 </template>
diff --git a/src/components/Textarea/Textarea.vue b/src/components/Textarea/Textarea.vue
index 8bfd679ad..92ebaa292 100644
--- a/src/components/Textarea/Textarea.vue
+++ b/src/components/Textarea/Textarea.vue
@@ -20,6 +20,7 @@
 
 <script setup lang="ts">
 import { computed, useAttrs, ref } from 'vue'
+
 import debounce from '../../utils/debounce'
 import type { TextareaProps } from './types'
 
@@ -57,9 +58,7 @@ const inputClasses = computed(() => {
       'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
     disabled: [
       'border bg-surface-gray-1 placeholder-ink-gray-3',
-      props.variant === 'outline'
-        ? 'border-outline-gray-2'
-        : 'border-transparent',
+      props.variant === 'outline' ? 'border-outline-gray-2' : 'border-transparent',
     ],
   }[variant]
 
diff --git a/src/components/Textarea/index.ts b/src/components/Textarea/index.ts
index 779234d5e..36e8d63e5 100644
--- a/src/components/Textarea/index.ts
+++ b/src/components/Textarea/index.ts
@@ -1,2 +1,2 @@
 export { default as Textarea } from './Textarea.vue'
-export type { TextareaProps } from './types'
\ No newline at end of file
+export type { TextareaProps } from './types'
diff --git a/src/components/TimePicker/TimePicker.cy.ts b/src/components/TimePicker/TimePicker.cy.ts
index f4b6baf5b..53cd370e0 100644
--- a/src/components/TimePicker/TimePicker.cy.ts
+++ b/src/components/TimePicker/TimePicker.cy.ts
@@ -31,12 +31,12 @@ describe('TimePicker', () => {
     cy.mount(TimePicker, {
       props: {
         'onUpdate:modelValue': onUpdate,
-        onChange: onChange,
-        onInputInvalid: onInputInvalid,
-        onInvalidChange: onInvalidChange,
-        onOpen: onOpen,
-        onClose: onClose,
-        use12Hour: false,
+        'onChange': onChange,
+        'onInputInvalid': onInputInvalid,
+        'onInvalidChange': onInvalidChange,
+        'onOpen': onOpen,
+        'onClose': onClose,
+        'use12Hour': false,
       },
     })
 
diff --git a/src/components/TimePicker/TimePicker.vue b/src/components/TimePicker/TimePicker.vue
index c5477d882..0f62fb91e 100644
--- a/src/components/TimePicker/TimePicker.vue
+++ b/src/components/TimePicker/TimePicker.vue
@@ -1,16 +1,12 @@
 <template>
-  <Popover
-    v-model:show="showOptions"
-    transition="default"
-    :placement="placement"
-  >
+  <Popover v-model:show="showOptions" transition="default" :placement="placement">
     <template #target="{ togglePopover, isOpen }">
       <TextInput
         ref="inputRef"
         v-model="displayValue"
         :variant="variant"
         type="text"
-        class="text-sm w-full cursor-text"
+        class="w-full cursor-text text-sm"
         :placeholder="placeholder"
         :disabled="disabled"
         :readonly="!props.allowCustom"
@@ -66,10 +62,11 @@
 </template>
 
 <script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue'
+
+import FeatherIcon from '../FeatherIcon.vue'
 import Popover from '../Popover/Popover.vue'
 import TextInput from '../TextInput/TextInput.vue'
-import FeatherIcon from '../FeatherIcon.vue'
-import { ref, computed, watch, nextTick } from 'vue'
 import type {
   Option,
   ParsedTime,
@@ -177,9 +174,7 @@ function normalize24(raw: string): string {
   if (/^\d{2}:\d{2}:\d{2}$/.test(raw)) return raw // keep seconds if present
   const parsed = parseFlexibleTime(raw)
   if (!parsed.valid) return ''
-  return parsed.ss
-    ? `${parsed.hh24}:${parsed.mm}:${parsed.ss}`
-    : `${parsed.hh24}:${parsed.mm}`
+  return parsed.ss ? `${parsed.hh24}:${parsed.mm}:${parsed.ss}` : `${parsed.hh24}:${parsed.mm}`
 }
 
 function formatDisplay(val24: string): string {
@@ -194,9 +189,7 @@ function formatDisplay(val24: string): string {
   if (!props.use12Hour) return base24
   const am = h < 12
   const hour12 = h % 12 === 0 ? 12 : h % 12
-  return `${hour12}:${m.toString().padStart(2, '0')}${s ? `:${s}` : ''} ${
-    am ? 'am' : 'pm'
-  }`
+  return `${hour12}:${m.toString().padStart(2, '0')}${s ? `:${s}` : ''} ${am ? 'am' : 'pm'}`
 }
 
 function parseFlexibleTime(input: string): ParsedTime {
@@ -251,10 +244,8 @@ function findNearestIndex(targetMinutes: number, list: Option[]): number {
   if (lo < minutesArr.length) candidates.push(lo)
   if (lo - 1 >= 0) candidates.push(lo - 1)
   if (!candidates.length) return -1
-  return candidates.sort(
-    (a, b) =>
-      Math.abs(minutesArr[a] - targetMinutes) -
-      Math.abs(minutesArr[b] - targetMinutes),
+  return candidates.toSorted(
+    (a, b) => Math.abs(minutesArr[a] - targetMinutes) - Math.abs(minutesArr[b] - targetMinutes),
   )[0]
 }
 
@@ -336,8 +327,7 @@ const selectedAndNearest = computed<{
         : `${parsedTyped.hh24}:${parsedTyped.mm}`
       : internalValue.value || null
   if (!candidate) return { selected: null, nearest: null }
-  const candidateCompare =
-    candidate && candidate.length === 8 ? candidate.slice(0, 5) : candidate
+  const candidateCompare = candidate && candidate.length === 8 ? candidate.slice(0, 5) : candidate
   const selected = list.find((o) => o.value === candidateCompare) || null
   if (selected) return { selected, nearest: null }
   const parsed = parseFlexibleTime(candidate)
@@ -350,14 +340,11 @@ function buttonClasses(opt: Option, idx: number): string {
   if (idx === highlightIndex.value) return 'bg-surface-gray-3 text-ink-gray-8'
   const { selected, nearest } = selectedAndNearest.value
   if (isTyping.value && !selected) {
-    if (nearest && nearest.value === opt.value)
-      return 'text-ink-gray-7 italic bg-surface-gray-2'
+    if (nearest && nearest.value === opt.value) return 'text-ink-gray-7 italic bg-surface-gray-2'
     return 'text-ink-gray-6 hover:bg-surface-gray-2 hover:text-ink-gray-8'
   }
-  if (selected && selected.value === opt.value)
-    return 'bg-surface-gray-3 text-ink-gray-8'
-  if (nearest && nearest.value === opt.value)
-    return 'text-ink-gray-7 italic bg-surface-gray-2'
+  if (selected && selected.value === opt.value) return 'bg-surface-gray-3 text-ink-gray-8'
+  if (nearest && nearest.value === opt.value) return 'text-ink-gray-7 italic bg-surface-gray-2'
   return 'text-ink-gray-6 hover:bg-surface-gray-2 hover:text-ink-gray-8'
 }
 
@@ -429,9 +416,7 @@ function moveHighlight(delta: number) {
   const list = displayedOptions.value
   if (!list.length) return
   if (highlightIndex.value === -1) initHighlight()
-  else
-    highlightIndex.value =
-      (highlightIndex.value + delta + list.length) % list.length
+  else highlightIndex.value = (highlightIndex.value + delta + list.length) % list.length
   const opt = list[highlightIndex.value]
   if (opt) {
     navUpdating = true
@@ -471,8 +456,7 @@ function onEnter() {
     : null
   const exists = normalized
     ? displayedOptions.value.some((o) => {
-        const base =
-          normalized.length === 8 ? normalized.slice(0, 5) : normalized
+        const base = normalized.length === 8 ? normalized.slice(0, 5) : normalized
         return o.value === base
       })
     : false
@@ -560,10 +544,6 @@ defineSlots<{
    * Slot rendered after the input value.
    * Exposes popover controls.
    */
-  suffix?: (props: {
-    togglePopover: () => void
-    isOpen: boolean
-  }) => any
+  suffix?: (props: { togglePopover: () => void; isOpen: boolean }) => any
 }>()
-
 </script>
diff --git a/src/components/TimePicker/stories/Basic.vue b/src/components/TimePicker/stories/Basic.vue
index 4fb0e58d0..fc1aab3d8 100644
--- a/src/components/TimePicker/stories/Basic.vue
+++ b/src/components/TimePicker/stories/Basic.vue
@@ -1,15 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { TimePicker } from 'frappe-ui'
+import { ref } from 'vue'
 
 const valueBasic = ref('')
 </script>
 
 <template>
-  <TimePicker
-    v-model="valueBasic"
-    placeholder="Select time"
-    placement="bottom-start"
-  />
+  <TimePicker v-model="valueBasic" placeholder="Select time" placement="bottom-start" />
   <div class="mt-2 text-xs text-gray-500">Value: {{ valueBasic || '—' }}</div>
 </template>
diff --git a/src/components/TimePicker/stories/CustomOptions.vue b/src/components/TimePicker/stories/CustomOptions.vue
index adf072126..02cdea31e 100644
--- a/src/components/TimePicker/stories/CustomOptions.vue
+++ b/src/components/TimePicker/stories/CustomOptions.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { TimePicker } from 'frappe-ui'
+import { ref } from 'vue'
 
 const val = ref('09:00')
 
@@ -15,12 +15,7 @@ const customOptions = [
 </script>
 
 <template>
-  <TimePicker
-    v-model="val"
-    :interval="15"
-    :options="customOptions"
-    :allowCustom="true"
-  />
+  <TimePicker v-model="val" :interval="15" :options="customOptions" :allowCustom="true" />
 
   <div class="text-xs text-gray-500">Value: {{ val }}</div>
 </template>
diff --git a/src/components/TimePicker/stories/Range.vue b/src/components/TimePicker/stories/Range.vue
index f7aab2a7c..ec1120b68 100644
--- a/src/components/TimePicker/stories/Range.vue
+++ b/src/components/TimePicker/stories/Range.vue
@@ -1,15 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { TimePicker } from 'frappe-ui'
+import { ref } from 'vue'
 const val = ref()
 </script>
 
 <template>
-  <TimePicker
-    v-model="val"
-    minTime="05:00"
-    maxTime="09:00"
-    :interval="10"
-  />
+  <TimePicker v-model="val" minTime="05:00" maxTime="09:00" :interval="10" />
   <div class="text-xs text-gray-500">Value: {{ val }}</div>
 </template>
diff --git a/src/components/TimePicker/stories/TwentyFour.vue b/src/components/TimePicker/stories/TwentyFour.vue
index d8e772e09..66dbfd7ce 100644
--- a/src/components/TimePicker/stories/TwentyFour.vue
+++ b/src/components/TimePicker/stories/TwentyFour.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { TimePicker } from 'frappe-ui'
+import { ref } from 'vue'
 
 const val = ref('13:30')
 </script>
diff --git a/src/components/Toast/Toast.vue b/src/components/Toast/Toast.vue
index ab9f52b70..d3536c880 100644
--- a/src/components/Toast/Toast.vue
+++ b/src/components/Toast/Toast.vue
@@ -4,34 +4,28 @@
     :duration="closable ? duration : 0"
     :class="[
       'toast-root-animatable',
-      'bg-surface-gray-6 border-none rounded-md px-4 py-1.5 shadow-lg flex items-center justify-between gap-3 min-w-[280px] max-w-[400px] pointer-events-auto list-none',
+      'pointer-events-auto flex min-w-[280px] max-w-[400px] list-none items-center justify-between gap-3 rounded-md border-none bg-surface-gray-6 px-4 py-1.5 shadow-lg',
     ]"
   >
-    <div class="flex items-center gap-2 flex-grow overflow-hidden">
+    <div class="flex flex-grow items-center gap-2 overflow-hidden">
       <div>
-        <component v-if="icon" :is="icon" class="flex-shrink-0 size-4" />
-        <CircleCheck
-          v-else-if="type == 'success'"
-          class="flex-shrink-0 size-4 text-ink-green-2"
-        />
+        <component v-if="icon" :is="icon" class="size-4 flex-shrink-0" />
+        <CircleCheck v-else-if="type == 'success'" class="size-4 flex-shrink-0 text-ink-green-2" />
         <LucideAlertTriangle
           v-else-if="type == 'warning'"
-          class="flex-shrink-0 size-4 text-ink-amber-2"
-        />
-        <LucideInfo
-          v-else-if="type == 'error'"
-          class="flex-shrink-0 size-4 text-ink-red-2"
+          class="size-4 flex-shrink-0 text-ink-amber-2"
         />
+        <LucideInfo v-else-if="type == 'error'" class="size-4 flex-shrink-0 text-ink-red-2" />
       </div>
-      <div class="flex flex-col flex-grow overflow-hidden">
+      <div class="flex flex-grow flex-col overflow-hidden">
         <ToastDescription
           v-if="message"
-          class="text-p-sm break-words text-ink-white"
+          class="break-words text-p-sm text-ink-white"
           v-html="message"
         />
       </div>
     </div>
-    <div class="flex items-center gap-2 h-7">
+    <div class="flex h-7 items-center gap-2">
       <ToastAction
         v-if="action"
         class="flex-shrink-0 rounded px-2 py-1 text-sm text-ink-blue-link hover:text-ink-gray-3 focus:outline-none focus-visible:ring focus-visible:ring-outline-gray-4"
@@ -51,11 +45,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import { ToastAction, ToastClose, ToastDescription, ToastRoot } from 'reka-ui'
-import LucideInfo from '~icons/lucide/info'
+import { computed } from 'vue'
 import LucideAlertTriangle from '~icons/lucide/alert-triangle'
+import LucideInfo from '~icons/lucide/info'
 import LucideX from '~icons/lucide/x'
+
 import CircleCheck from '../../../icons/CircleCheckIcon.vue'
 import type { ToastProps } from './types'
 
@@ -80,8 +75,7 @@ function handleAction() {
 <style>
 @keyframes KSlideIn {
   from {
-    transform: translateY(calc(100% + var(--viewport-padding, 32px)))
-      scale(0.95);
+    transform: translateY(calc(100% + var(--viewport-padding, 32px))) scale(0.95);
     opacity: 0;
   }
   to {
diff --git a/src/components/Toast/ToastProvider.vue b/src/components/Toast/ToastProvider.vue
index b64645a54..e165f8e63 100644
--- a/src/components/Toast/ToastProvider.vue
+++ b/src/components/Toast/ToastProvider.vue
@@ -3,12 +3,13 @@
     <slot />
     <Toasts />
     <ToastViewport
-      class="fixed bottom-0 items-end right-0 flex flex-col p-5 gap-[10px] w-auto max-w-full z-[2147483647] outline-none pointer-events-none"
+      class="pointer-events-none fixed bottom-0 right-0 z-[2147483647] flex w-auto max-w-full flex-col items-end gap-[10px] p-5 outline-none"
     />
   </ToastProvider>
 </template>
 
 <script setup lang="ts">
 import { ToastProvider, ToastViewport } from 'reka-ui'
+
 import { Toasts } from '../Toast/index'
 </script>
diff --git a/src/components/Toast/index.ts b/src/components/Toast/index.ts
index 3eace6804..e08d16f40 100644
--- a/src/components/Toast/index.ts
+++ b/src/components/Toast/index.ts
@@ -1,20 +1,17 @@
 import DOMPurify from 'dompurify'
-import { defineComponent, h, ref, Ref } from 'vue'
+import type { Ref } from 'vue'
+import { defineComponent, h, ref } from 'vue'
+
 import LoadingIndicator from '../LoadingIndicator.vue'
 import ToastComponent from './Toast.vue'
 import type { ToastProps } from './types'
 
-interface ToastOptions
-  extends Omit<Partial<ToastProps>, 'open' | 'message' | 'title'> {
+interface ToastOptions extends Omit<Partial<ToastProps>, 'open' | 'message' | 'title'> {
   id?: string
   message: string
 }
 
-interface ToastItem
-  extends Pick<
-    ToastProps,
-    'duration' | 'action' | 'type' | 'icon' | 'closable'
-  > {
+interface ToastItem extends Pick<ToastProps, 'duration' | 'action' | 'type' | 'icon' | 'closable'> {
   id: string
   open: boolean
   message: string
@@ -49,10 +46,7 @@ interface ToastPromiseOptions<TData = any, TError = any> {
 const toastsState: Ref<ToastItem[]> = ref([])
 let toastIdCounter = 0
 
-const updateToastInState = (
-  id: string,
-  updates: Partial<Omit<ToastItem, 'id'>>,
-) => {
+const updateToastInState = (id: string, updates: Partial<Omit<ToastItem, 'id'>>) => {
   const index = toastsState.value.findIndex((t) => t.id === id)
   if (index !== -1) {
     toastsState.value[index] = {
@@ -66,8 +60,7 @@ const updateToastInState = (
 export const toast = {
   create: (options: ToastOptions): string => {
     const id = `toast-${toastIdCounter++}`
-    const durationInMs =
-      options.duration != null ? options.duration * 1000 : 5000
+    const durationInMs = options.duration != null ? options.duration * 1000 : 5000
 
     const sanitizedMessage = DOMPurify.sanitize(options.message, {
       ALLOWED_TAGS: ['a', 'em', 'strong', 'i', 'b', 'u'],
@@ -110,12 +103,9 @@ export const toast = {
     try {
       const data = await promiseToResolve
       const successMessage =
-        typeof options.success === 'function'
-          ? options.success(data)
-          : options.success
+        typeof options.success === 'function' ? options.success(data) : options.success
 
-      const successToastDurationInSeconds =
-        options.successDuration ?? options.duration ?? 5
+      const successToastDurationInSeconds = options.successDuration ?? options.duration ?? 5
 
       updateToastInState(toastId, {
         message: successMessage,
@@ -123,17 +113,14 @@ export const toast = {
         duration: successToastDurationInSeconds * 1000,
         icon: undefined,
         closable: true,
-		action: options.successAction,
+        action: options.successAction,
       })
       return data
     } catch (error) {
       const errorMessage =
-        typeof options.error === 'function'
-          ? options.error(error as TError)
-          : options.error
+        typeof options.error === 'function' ? options.error(error as TError) : options.error
 
-      const errorToastDurationInSeconds =
-        options.errorDuration ?? options.duration ?? 5
+      const errorToastDurationInSeconds = options.errorDuration ?? options.duration ?? 5
 
       updateToastInState(toastId, {
         message: errorMessage,
@@ -141,28 +128,20 @@ export const toast = {
         duration: errorToastDurationInSeconds * 1000,
         icon: undefined,
         closable: true,
-		action: options.errorAction,
+        action: options.errorAction,
       })
       throw error
     }
   },
 
-  success: (
-    message: string,
-    options: Omit<ToastOptions, 'message' | 'type'> = {},
-  ) => toast.create({ message, type: 'success', ...options }),
-  error: (
-    message: string,
-    options: Omit<ToastOptions, 'message' | 'type'> = {},
-  ) => toast.create({ message, type: 'error', ...options }),
-  warning: (
-    message: string,
-    options: Omit<ToastOptions, 'message' | 'type'> = {},
-  ) => toast.create({ message, type: 'warning', ...options }),
-  info: (
-    message: string,
-    options: Omit<ToastOptions, 'message' | 'type'> = {},
-  ) => toast.create({ message, type: 'info', ...options }),
+  success: (message: string, options: Omit<ToastOptions, 'message' | 'type'> = {}) =>
+    toast.create({ message, type: 'success', ...options }),
+  error: (message: string, options: Omit<ToastOptions, 'message' | 'type'> = {}) =>
+    toast.create({ message, type: 'error', ...options }),
+  warning: (message: string, options: Omit<ToastOptions, 'message' | 'type'> = {}) =>
+    toast.create({ message, type: 'warning', ...options }),
+  info: (message: string, options: Omit<ToastOptions, 'message' | 'type'> = {}) =>
+    toast.create({ message, type: 'info', ...options }),
 }
 
 export const Toasts = defineComponent({
@@ -184,16 +163,16 @@ export const Toasts = defineComponent({
     return () =>
       toastsState.value.map((t) =>
         h(ToastComponent, {
-          key: t.id,
-          open: t.open,
-          message: t.message,
-          type: t.type,
-          duration: t.duration,
-          action: t.action,
-          icon: t.icon,
-          closable: t.closable,
+          'key': t.id,
+          'open': t.open,
+          'message': t.message,
+          'type': t.type,
+          'duration': t.duration,
+          'action': t.action,
+          'icon': t.icon,
+          'closable': t.closable,
           'onUpdate:open': (isOpen) => handleUpdateOpen(t.id, isOpen),
-          onAction: () => handleActionForItem(t),
+          'onAction': () => handleActionForItem(t),
         }),
       )
   },
diff --git a/src/components/Tooltip/Tooltip.cy.ts b/src/components/Tooltip/Tooltip.cy.ts
index 74345efc6..85fb644f3 100644
--- a/src/components/Tooltip/Tooltip.cy.ts
+++ b/src/components/Tooltip/Tooltip.cy.ts
@@ -1,11 +1,10 @@
-import Tooltip from './Tooltip.vue'
-import Button from '../Button/Button.vue'
 import { h } from 'vue'
 
+import Button from '../Button/Button.vue'
+import Tooltip from './Tooltip.vue'
+
 const Comp = () =>
-  h(Tooltip, { text: 'some tooltip', hoverDelay: 0, placement: 'top' }, [
-    h(Button, {}, 'k'),
-  ])
+  h(Tooltip, { text: 'some tooltip', hoverDelay: 0, placement: 'top' }, [h(Button, {}, 'k')])
 
 describe('Tooltip', () => {
   it('Renders', () => {
@@ -22,10 +21,7 @@ describe('Tooltip', () => {
   })
 
   it('disabled prop', () => {
-    cy.mount(
-      h(Tooltip, { text: 'abc', disabled: true }, [h(Button, {}, 'k')]),
-      { disabled: true },
-    )
+    cy.mount(h(Tooltip, { text: 'abc', disabled: true }, [h(Button, {}, 'k')]), { disabled: true })
 
     cy.get('button').trigger('focus')
     cy.get('[role=tooltip]').should('not.exist')
@@ -55,9 +51,7 @@ describe('Tooltip', () => {
 
   it('arrowClass prop', () => {
     cy.mount(
-      h(Tooltip, { text: 'abc', hoverDelay: 0, arrowClass: 'fill-red-500' }, [
-        h(Button, {}, 'k'),
-      ]),
+      h(Tooltip, { text: 'abc', hoverDelay: 0, arrowClass: 'fill-red-500' }, [h(Button, {}, 'k')]),
     )
 
     cy.get('button').trigger('focus')
diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index 025b2aeae..e898cdc73 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -8,6 +8,7 @@ import {
   TooltipArrow,
 } from 'reka-ui'
 import { computed } from 'vue'
+
 import type { TooltipProps } from './types'
 
 defineOptions({
@@ -43,7 +44,6 @@ defineSlots<{
    */
   content?: () => any
 }>()
-
 </script>
 
 <template>
@@ -61,9 +61,7 @@ defineSlots<{
           class="z-[100]"
         >
           <slot name="body">
-            <div
-              class="rounded bg-surface-gray-7 px-2 py-1 text-xs text-ink-white shadow-xl"
-            >
+            <div class="rounded bg-surface-gray-7 px-2 py-1 text-xs text-ink-white shadow-xl">
               <slot name="content">{{ props.text }}</slot>
             </div>
           </slot>
diff --git a/src/components/Tooltip/index.ts b/src/components/Tooltip/index.ts
index 90b567843..5a3f9eed5 100644
--- a/src/components/Tooltip/index.ts
+++ b/src/components/Tooltip/index.ts
@@ -1,2 +1,2 @@
 export { default as Tooltip } from './Tooltip.vue'
-export type { TooltipProps } from './types'
\ No newline at end of file
+export type { TooltipProps } from './types'
diff --git a/src/components/Tooltip/types.ts b/src/components/Tooltip/types.ts
index 06ec44d5f..8393677be 100644
--- a/src/components/Tooltip/types.ts
+++ b/src/components/Tooltip/types.ts
@@ -1,5 +1,5 @@
-import { type HTMLAttributes } from 'vue'
 import { type TooltipContentProps } from 'reka-ui'
+import { type HTMLAttributes } from 'vue'
 
 export interface TooltipProps {
   /**
@@ -28,4 +28,3 @@ export interface TooltipProps {
    */
   disabled?: boolean
 }
-
diff --git a/src/components/Tree/Tree.vue b/src/components/Tree/Tree.vue
index 565aed859..0c3fd4cad 100644
--- a/src/components/Tree/Tree.vue
+++ b/src/components/Tree/Tree.vue
@@ -1,33 +1,22 @@
 <template>
   <!-- Current Tree Node -->
-  <slot
-    name="node"
-    v-bind="{ node, hasChildren, isCollapsed, toggleCollapsed }"
-  >
+  <slot name="node" v-bind="{ node, hasChildren, isCollapsed, toggleCollapsed }">
     <div
-      class="flex items-center cursor-pointer gap-1"
+      class="flex cursor-pointer items-center gap-1"
       :style="{ height: options.rowHeight }"
       @click="toggleCollapsed"
     >
       <div ref="iconRef">
         <!-- slot to only override the Icon -->
         <slot name="icon" v-bind="{ hasChildren, isCollapsed }">
-          <FeatherIcon
-            v-if="hasChildren && !isCollapsed"
-            name="chevron-down"
-            class="h-3.5"
-          />
-          <FeatherIcon
-            v-else-if="hasChildren"
-            name="chevron-right"
-            class="h-3.5"
-          />
+          <FeatherIcon v-if="hasChildren && !isCollapsed" name="chevron-down" class="h-3.5" />
+          <FeatherIcon v-else-if="hasChildren" name="chevron-right" class="h-3.5" />
         </slot>
       </div>
 
       <!-- slot to only override the label -->
       <slot name="label" v-bind="{ node, hasChildren, isCollapsed }">
-        <div class="text-base truncate" :class="hasChildren ? '' : 'pl-3.5'">
+        <div class="truncate text-base" :class="hasChildren ? '' : 'pl-3.5'">
           {{ node.label }}
         </div>
       </slot>
@@ -46,10 +35,7 @@
         <Tree :node="child" :nodeKey="nodeKey" :options="options">
           <!-- Pass the parent slots to the children of current node -->
           <template #node="{ node, hasChildren, isCollapsed, toggleCollapsed }">
-            <slot
-              name="node"
-              v-bind="{ node, hasChildren, isCollapsed, toggleCollapsed }"
-            />
+            <slot name="node" v-bind="{ node, hasChildren, isCollapsed, toggleCollapsed }" />
           </template>
 
           <template #icon="{ hasChildren, isCollapsed }">
@@ -67,6 +53,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
+
 import FeatherIcon from '../FeatherIcon.vue'
 import type { TreeNode, TreeProps } from './types'
 
diff --git a/src/components/Tree/index.ts b/src/components/Tree/index.ts
index b3767421f..4c73847b8 100644
--- a/src/components/Tree/index.ts
+++ b/src/components/Tree/index.ts
@@ -1,2 +1,2 @@
 export { default as Tree } from './Tree.vue'
-export type { TreeProps } from './types'
\ No newline at end of file
+export type { TreeProps } from './types'
diff --git a/src/components/Tree/stories/Example.vue b/src/components/Tree/stories/Example.vue
index 65decfb38..6e86f99d3 100644
--- a/src/components/Tree/stories/Example.vue
+++ b/src/components/Tree/stories/Example.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
 import { Tree } from 'frappe-ui'
+import { reactive } from 'vue'
 
 const state = reactive({
   showIndentationGuides: true,
diff --git a/src/components/Tree/tree.cy.ts b/src/components/Tree/tree.cy.ts
index 3d7aef8bf..ff06bfd5f 100644
--- a/src/components/Tree/tree.cy.ts
+++ b/src/components/Tree/tree.cy.ts
@@ -1,5 +1,6 @@
-import Tree from './Tree.vue'
 import { h } from 'vue'
+
+import Tree from './Tree.vue'
 import type { TreeNode } from './types'
 
 const data: TreeNode = {
@@ -93,9 +94,7 @@ describe('Tree', () => {
       },
     })
 
-    cy.contains('Root')
-      .parent()
-      .should('have.css', 'height', '40px')
+    cy.contains('Root').parent().should('have.css', 'height', '40px')
 
     // indentation line
     cy.get('.border-r').should('exist')
@@ -118,8 +117,7 @@ describe('Tree', () => {
             `label-${node.label}`,
           ),
 
-        icon: () =>
-          h('span', { 'data-cy': 'icon' }, 'icon'),
+        icon: () => h('span', { 'data-cy': 'icon' }, 'icon'),
       },
     })
 
diff --git a/src/components/VueGridLayout/Layout.vue b/src/components/VueGridLayout/Layout.vue
index 262946607..ecd53a212 100644
--- a/src/components/VueGridLayout/Layout.vue
+++ b/src/components/VueGridLayout/Layout.vue
@@ -1,9 +1,5 @@
 <template>
-  <GridLayout
-    v-model:layout="layout"
-    v-bind="options"
-    @layout-ready="() => (layoutReady = true)"
-  >
+  <GridLayout v-model:layout="layout" v-bind="options" @layout-ready="() => (layoutReady = true)">
     <GridItem
       v-for="(l, index) in layout"
       :key="l.i"
@@ -51,9 +47,10 @@
 
 <script setup lang="ts">
 import { GridLayout, GridItem } from 'grid-layout-plus'
-import { Layout, GridLayoutProps } from './types'
 import { computed, reactive, ref } from 'vue'
 
+import type { Layout, GridLayoutProps } from './types'
+
 const props = defineProps<GridLayoutProps>()
 
 const layout = defineModel<Layout>({
diff --git a/src/components/VueGridLayout/types.ts b/src/components/VueGridLayout/types.ts
index 35e16600e..8f394dbf4 100644
--- a/src/components/VueGridLayout/types.ts
+++ b/src/components/VueGridLayout/types.ts
@@ -22,5 +22,5 @@ export type Layout = Array<LayoutItem>
 export interface GridLayoutProps {
   cols?: number
   rowHeight?: number
-  disabled?: Boolean
+  disabled?: boolean
 }
diff --git a/src/composables/useImageNavigation.ts b/src/composables/useImageNavigation.ts
index 08c549d05..ee5fcbcdf 100644
--- a/src/composables/useImageNavigation.ts
+++ b/src/composables/useImageNavigation.ts
@@ -27,8 +27,7 @@ export function useImageNavigation({
 
   function previousImage() {
     if (imageCount.value > 0) {
-      currentIndex.value =
-        (currentIndex.value - 1 + imageCount.value) % imageCount.value
+      currentIndex.value = (currentIndex.value - 1 + imageCount.value) % imageCount.value
       onNavigate?.()
     }
   }
diff --git a/src/composables/useTouchHandler.ts b/src/composables/useTouchHandler.ts
index 22eceaf03..52dba6916 100644
--- a/src/composables/useTouchHandler.ts
+++ b/src/composables/useTouchHandler.ts
@@ -188,8 +188,7 @@ export function useTouchHandler(options: UseTouchHandlerOptions) {
       if (
         !isPanning.value &&
         zoomLevel.value > 100 &&
-        (Math.abs(deltaXFromStart) > panThreshold ||
-          Math.abs(deltaYFromStart) > panThreshold)
+        (Math.abs(deltaXFromStart) > panThreshold || Math.abs(deltaYFromStart) > panThreshold)
       ) {
         isPanning.value = true
         // Adjust start coords slightly to avoid jump if pan starts mid-movement
@@ -219,11 +218,7 @@ export function useTouchHandler(options: UseTouchHandlerOptions) {
     const finalVelocity = { ...panVelocity.value }
 
     // Handle Pan End and Inertia
-    if (
-      wasPanning &&
-      initialTouchPoints.value &&
-      touchesLeft < initialTouchPoints.value.length
-    ) {
+    if (wasPanning && initialTouchPoints.value && touchesLeft < initialTouchPoints.value.length) {
       isPanning.value = false // Set panning to false *before* starting animation
       if (onPanEnd) onPanEnd(event)
 
@@ -262,10 +257,7 @@ export function useTouchHandler(options: UseTouchHandlerOptions) {
           animVelocity.y *= dampingFactor
 
           // Stop animation if velocity is negligible or zoom changed back to <= 100%
-          if (
-            Math.hypot(animVelocity.x, animVelocity.y) < 0.01 ||
-            zoomLevel.value <= 100
-          ) {
+          if (Math.hypot(animVelocity.x, animVelocity.y) < 0.01 || zoomLevel.value <= 100) {
             cancelInertiaAnimation()
           } else {
             animationFrameId.value = requestAnimationFrame(animate)
diff --git a/src/composables/useZoomPan.ts b/src/composables/useZoomPan.ts
index 79db63a16..b84a00d63 100644
--- a/src/composables/useZoomPan.ts
+++ b/src/composables/useZoomPan.ts
@@ -85,10 +85,7 @@ export function useZoomPan({ containerRef, isEnabled }: UseZoomPanOptions) {
       const newZoom = Math.round(currentZoom + zoomChange)
       let clampedZoom = Math.max(25, Math.min(300, newZoom))
 
-      if (
-        (currentZoom > 100 && clampedZoom < 100) ||
-        (currentZoom < 100 && clampedZoom > 100)
-      ) {
+      if ((currentZoom > 100 && clampedZoom < 100) || (currentZoom < 100 && clampedZoom > 100)) {
         if (Math.abs(100 - clampedZoom) < Math.abs(zoomChange) * 1.5) {
           clampedZoom = 100
         }
diff --git a/src/data-fetching/docStore.ts b/src/data-fetching/docStore.ts
index 0e28e291c..5d4322b9c 100644
--- a/src/data-fetching/docStore.ts
+++ b/src/data-fetching/docStore.ts
@@ -1,4 +1,6 @@
-import { Ref, ref, MaybeRefOrGetter, toValue } from 'vue'
+import type { Ref, MaybeRefOrGetter } from 'vue'
+import { ref, toValue } from 'vue'
+
 import { idbStore } from './idbStore'
 
 type Doc = {
@@ -70,11 +72,7 @@ class DocStore {
     return this.docs.get(key)!
   }
 
-  private async loadDoc(
-    key: DocKey,
-    isFirstLoad: boolean,
-    transform: (doc: Doc) => Doc,
-  ) {
+  private async loadDoc(key: DocKey, isFirstLoad: boolean, transform: (doc: Doc) => Doc) {
     try {
       if (!isFirstLoad && this.isStale(key)) {
         await this.cleanup(key)
@@ -146,9 +144,7 @@ class DocStore {
   async clearAll() {
     try {
       const allKeys = await idbStore.keys()
-      const docKeys = allKeys.filter((key: string) =>
-        key.startsWith(this.storePrefix),
-      )
+      const docKeys = allKeys.filter((key: string) => key.startsWith(this.storePrefix))
       await Promise.all(docKeys.map((key: string) => idbStore.delete(key)))
       this.docs.clear()
       this.lastFetched.clear()
diff --git a/src/data-fetching/useCall/types.ts b/src/data-fetching/useCall/types.ts
index 7784c3006..b602c42d1 100644
--- a/src/data-fetching/useCall/types.ts
+++ b/src/data-fetching/useCall/types.ts
@@ -1,12 +1,9 @@
-import { Ref } from 'vue'
+import type { Ref } from 'vue'
 
 export type BasicParams = Record<string, any> | undefined
 export type CacheKey = string | Array<string | number | boolean | object>
 
-export interface UseCallOptions<
-  TResponse = any,
-  TParams extends BasicParams = undefined,
-> {
+export interface UseCallOptions<TResponse = any, TParams extends BasicParams = undefined> {
   url: string | Ref<string>
   method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
   params?: TParams | (() => TParams)
diff --git a/src/data-fetching/useCall/useCall.test.ts b/src/data-fetching/useCall/useCall.test.ts
index 5977143cc..4c28ae8b3 100644
--- a/src/data-fetching/useCall/useCall.test.ts
+++ b/src/data-fetching/useCall/useCall.test.ts
@@ -3,8 +3,9 @@
  */
 
 import { ref } from 'vue'
-import { useCall } from '../index'
+
 import { url, waitUntilValueChanges } from '../../mocks/utils'
+import { useCall } from '../index'
 
 describe('msw works', () => {
   it('ping responds with pong', async () => {
@@ -63,9 +64,7 @@ describe('useCall', () => {
 
     expect(errorCall.loading).toBe(false)
     expect(errorCall.error).toBeInstanceOf(Error)
-    expect(errorCall.error.message).toEqual(
-      'ServerError: Internal Server Error occurred',
-    )
+    expect(errorCall.error.message).toEqual('ServerError: Internal Server Error occurred')
     expect(errorCall.data).toBe(null)
     expect(onError).toHaveBeenCalledWith(errorCall.error)
   })
diff --git a/src/data-fetching/useCall/useCall.ts b/src/data-fetching/useCall/useCall.ts
index d1523622b..9b06866b6 100644
--- a/src/data-fetching/useCall/useCall.ts
+++ b/src/data-fetching/useCall/useCall.ts
@@ -1,9 +1,10 @@
+import type { AfterFetchContext, UseFetchOptions } from '@vueuse/core'
 import { computed, reactive, readonly, ref, unref } from 'vue'
-import { AfterFetchContext, UseFetchOptions } from '@vueuse/core'
+
+import { idbStore } from '../idbStore'
 import { useFrappeFetch } from '../useFrappeFetch'
 import { unrefObject, makeGetParams, normalizeCacheKey } from '../utils'
-import { idbStore } from '../idbStore'
-import { BasicParams, UseCallOptions } from './types'
+import type { BasicParams, UseCallOptions } from './types'
 
 export function useCall<TResponse, TParams extends BasicParams = undefined>(
   options: UseCallOptions<TResponse, TParams>,
@@ -101,25 +102,19 @@ export function useCall<TResponse, TParams extends BasicParams = undefined>(
 
   let result
   if (method === 'POST') {
-    result = useFrappeFetch<FrappeResponse<TResponse>>(
-      computedUrl,
-      fetchOptions,
-    ).post(computedParams)
+    result = useFrappeFetch<FrappeResponse<TResponse>>(computedUrl, fetchOptions).post(
+      computedParams,
+    )
   } else if (method === 'PUT') {
-    result = useFrappeFetch<FrappeResponse<TResponse>>(
-      computedUrl,
-      fetchOptions,
-    ).put(computedParams)
+    result = useFrappeFetch<FrappeResponse<TResponse>>(computedUrl, fetchOptions).put(
+      computedParams,
+    )
   } else if (method === 'DELETE') {
-    result = useFrappeFetch<FrappeResponse<TResponse>>(
-      computedUrl,
-      fetchOptions,
-    ).delete(computedParams)
+    result = useFrappeFetch<FrappeResponse<TResponse>>(computedUrl, fetchOptions).delete(
+      computedParams,
+    )
   } else {
-    result = useFrappeFetch<FrappeResponse<TResponse>>(
-      computedUrl,
-      fetchOptions,
-    ).get()
+    result = useFrappeFetch<FrappeResponse<TResponse>>(computedUrl, fetchOptions).get()
   }
 
   const {
diff --git a/src/data-fetching/useDoc/useDoc.test.ts b/src/data-fetching/useDoc/useDoc.test.ts
index e91b14e96..e05c626f5 100644
--- a/src/data-fetching/useDoc/useDoc.test.ts
+++ b/src/data-fetching/useDoc/useDoc.test.ts
@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 import { ref } from 'vue'
+
 import { baseUrl, waitUntilValueChanges } from '../../mocks/utils'
 import { useCall, useDoc } from '../index'
 
diff --git a/src/data-fetching/useDoc/useDoc.ts b/src/data-fetching/useDoc/useDoc.ts
index 6fdc6702d..350affba1 100644
--- a/src/data-fetching/useDoc/useDoc.ts
+++ b/src/data-fetching/useDoc/useDoc.ts
@@ -1,16 +1,11 @@
-import {
-  computed,
-  reactive,
-  readonly,
-  Ref,
-  MaybeRefOrGetter,
-  toValue,
-} from 'vue'
-import { UseFetchOptions, AfterFetchContext } from '@vueuse/core'
-import { useFrappeFetch } from '../useFrappeFetch'
-import { useCall } from '../useCall/useCall'
-import { UseCallOptions } from '../useCall/types'
+import type { UseFetchOptions, AfterFetchContext } from '@vueuse/core'
+import type { Ref, MaybeRefOrGetter } from 'vue'
+import { computed, reactive, readonly, toValue } from 'vue'
+
 import { docStore } from '../docStore'
+import type { UseCallOptions } from '../useCall/types'
+import { useCall } from '../useCall/useCall'
+import { useFrappeFetch } from '../useFrappeFetch'
 import { listStore } from '../useList/listStore'
 
 // Transform method signatures into useCall return type
@@ -24,8 +19,7 @@ type TransformMethods<T> = {
       : never
 }
 
-interface DocMethodOption<T = any>
-  extends Omit<UseCallOptions<T>, 'url' | 'baseUrl'> {
+interface DocMethodOption<T = any> extends Omit<UseCallOptions<T>, 'url' | 'baseUrl'> {
   name: string
 }
 
@@ -39,9 +33,7 @@ interface UseDocOptions<TDoc> {
   transform?: (doc: TDoc & { doctype: string }) => TDoc & { doctype: string }
 }
 
-export function useDoc<TDoc extends { name: string }, TMethods = {}>(
-  options: UseDocOptions<TDoc>,
-) {
+export function useDoc<TDoc extends { name: string }, TMethods = {}>(options: UseDocOptions<TDoc>) {
   const {
     baseUrl = '',
     doctype,
@@ -92,8 +84,10 @@ export function useDoc<TDoc extends { name: string }, TMethods = {}>(
     },
   }
 
-  const { error, isFetching, isFinished, canAbort, aborted, abort, execute } =
-    useFrappeFetch(url, fetchOptions).get()
+  const { error, isFetching, isFinished, canAbort, aborted, abort, execute } = useFrappeFetch(
+    url,
+    fetchOptions,
+  ).get()
 
   let docMethods: Record<string, ReturnType<typeof useCall>> = {}
   if (methods) {
@@ -113,10 +107,7 @@ export function useDoc<TDoc extends { name: string }, TMethods = {}>(
         method: 'POST',
         ...option,
         baseUrl,
-        url: computed(
-          () =>
-            `/api/v2/document/${doctype}/${toValue(name)}/method/${option.name}`,
-        ),
+        url: computed(() => `/api/v2/document/${doctype}/${toValue(name)}/method/${option.name}`),
       }
 
       docMethods[key] = readonly(useCall(callOptions))
diff --git a/src/data-fetching/useDoctype/useDoctype.ts b/src/data-fetching/useDoctype/useDoctype.ts
index c3d2dc30e..c2eba4386 100644
--- a/src/data-fetching/useDoctype/useDoctype.ts
+++ b/src/data-fetching/useDoctype/useDoctype.ts
@@ -1,16 +1,14 @@
 import { computed, reactive, ref } from 'vue'
-import { useCall } from '../index'
+
 import { docStore } from '../docStore'
+import { useCall } from '../index'
 import { listStore } from '../useList/listStore'
 
 interface UseDoctypeOptions {
   baseUrl?: string
 }
 
-export function useDoctype<T>(
-  doctype: string,
-  options: UseDoctypeOptions = {},
-) {
+export function useDoctype<T>(doctype: string, options: UseDoctypeOptions = {}) {
   const insert = useInsert<T>(doctype, options)
   const delete_ = useDelete(doctype, options)
   const setValue = useSetValue<T>(doctype, options)
@@ -113,8 +111,7 @@ function useRunDocMethod(doctype: string, options: UseDoctypeOptions = {}) {
     },
     isLoading: (name: string, method: string) => {
       return (
-        runDocMethod.loading &&
-        url.value === `/api/v2/document/${doctype}/${name}/method/${method}`
+        runDocMethod.loading && url.value === `/api/v2/document/${doctype}/${name}/method/${method}`
       )
     },
   } as RunDocMethodReturnValue)
@@ -161,9 +158,7 @@ function useRunMethod(doctype: string, options: UseDoctypeOptions = {}) {
       return runMethod.submit(params)
     },
     isLoading: (method: string) => {
-      return (
-        runMethod.loading && url.value === `/api/v2/method/${doctype}/${method}`
-      )
+      return runMethod.loading && url.value === `/api/v2/method/${doctype}/${method}`
     },
   } as RunMethodReturnValue)
 }
diff --git a/src/data-fetching/useFrappeFetch.ts b/src/data-fetching/useFrappeFetch.ts
index 48c23233f..7548d8794 100644
--- a/src/data-fetching/useFrappeFetch.ts
+++ b/src/data-fetching/useFrappeFetch.ts
@@ -1,4 +1,5 @@
 import { createFetch } from '@vueuse/core'
+
 import { docStore } from './docStore'
 import { listStore } from './useList/listStore'
 
@@ -62,10 +63,7 @@ export const useFrappeFetch = createFetch({
     onFetchError(ctx) {
       if (ctx.response?.ok && ctx.error) {
         // if response is ok and there is an error, it's a client side programming error
-        console.error(
-          'Fetch request succeeded but there was a programming error:\n\n',
-          ctx.error,
-        )
+        console.error('Fetch request succeeded but there was a programming error:\n\n', ctx.error)
         return ctx
       }
 
@@ -85,15 +83,12 @@ export const useFrappeFetch = createFetch({
           : error.exception
             ? ` (Traceback)`
             : ''
-        let frappeError = new FrappeResponseError(
-          `${error.type}${errorDescription}`,
-          {
-            title: error.title,
-            type: error.type,
-            exception: error.exception,
-            indicator: error.indicator,
-          },
-        )
+        let frappeError = new FrappeResponseError(`${error.type}${errorDescription}`, {
+          title: error.title,
+          type: error.type,
+          exception: error.exception,
+          indicator: error.indicator,
+        })
 
         if (import.meta.env.DEV && error.exception) {
           console.log(error.exception)
@@ -115,12 +110,11 @@ function setHeaders(headers: HeadersInit) {
   let csrfToken = null
   if (typeof window !== 'undefined') {
     siteName = window.location.hostname
-    csrfToken =
-      window.csrf_token !== '{{ csrf_token }}' ? window.csrf_token : null
+    csrfToken = window.csrf_token !== '{{ csrf_token }}' ? window.csrf_token : null
   }
 
   const defaultHeaders: Record<string, string> = {
-    Accept: 'application/json',
+    'Accept': 'application/json',
     'Content-Type': 'application/json; charset=utf-8',
   }
   if (siteName) {
diff --git a/src/data-fetching/useList/types.ts b/src/data-fetching/useList/types.ts
index 133c65a60..caebba453 100644
--- a/src/data-fetching/useList/types.ts
+++ b/src/data-fetching/useList/types.ts
@@ -1,5 +1,7 @@
-import { MaybeRefOrGetter, Reactive, Ref } from 'vue'
-import { CacheKey } from '../useCall/types'
+import type { MaybeRefOrGetter } from 'vue'
+import { Reactive, Ref } from 'vue'
+
+import type { CacheKey } from '../useCall/types'
 
 export type Field = string
 export type LinkField = `${Field}.${Field}` | `${Field}.${Field} as ${string}`
@@ -17,11 +19,7 @@ export interface Filters {
   [key: Field]: FilterValue | undefined
 }
 
-export type OrderBy =
-  | `${Field} ASC`
-  | `${Field} DESC`
-  | `${Field} asc`
-  | `${Field} desc`
+export type OrderBy = `${Field} ASC` | `${Field} DESC` | `${Field} asc` | `${Field} desc`
 
 export interface UseListOptions<T> {
   doctype: string
diff --git a/src/data-fetching/useList/useList.test.ts b/src/data-fetching/useList/useList.test.ts
index 5df9e34b0..f2d6a3adb 100644
--- a/src/data-fetching/useList/useList.test.ts
+++ b/src/data-fetching/useList/useList.test.ts
@@ -3,6 +3,7 @@
  */
 
 import { ref } from 'vue'
+
 import { baseUrl, waitUntilValueChanges } from '../../mocks/utils'
 import { useList } from '../index'
 
@@ -88,15 +89,11 @@ describe('useList', () => {
     })
 
     await waitUntilValueChanges(() => users.data)
-    expect(users.data).toStrictEqual([
-      { name: 'User1', email: 'user1@example.com' },
-    ])
+    expect(users.data).toStrictEqual([{ name: 'User1', email: 'user1@example.com' }])
 
     query.value = 'user2'
     await waitUntilValueChanges(() => users.data)
-    expect(users.data).toStrictEqual([
-      { name: 'User2', email: 'user2@example.com' },
-    ])
+    expect(users.data).toStrictEqual([{ name: 'User2', email: 'user2@example.com' }])
   })
 
   it('params are parsed and sent to server correctly', async () => {
@@ -129,9 +126,7 @@ describe('useList', () => {
     })
 
     expect(fetchSpy).toHaveBeenCalledWith(
-      expect.stringContaining(
-        `${baseUrl}/api/v2/document/User?${searchParams.toString()}`,
-      ),
+      expect.stringContaining(`${baseUrl}/api/v2/document/User?${searchParams.toString()}`),
       expect.any(Object),
     )
 
diff --git a/src/data-fetching/useList/useList.ts b/src/data-fetching/useList/useList.ts
index f11fad22c..86a070745 100644
--- a/src/data-fetching/useList/useList.ts
+++ b/src/data-fetching/useList/useList.ts
@@ -1,28 +1,16 @@
-import {
-  computed,
-  MaybeRefOrGetter,
-  reactive,
-  readonly,
-  Ref,
-  ref,
-  toValue,
-} from 'vue'
-import {
-  AfterFetchContext,
-  OnFetchErrorContext,
-  UseFetchOptions,
-} from '@vueuse/core'
-import { useFrappeFetch } from '../useFrappeFetch'
+import type { AfterFetchContext, OnFetchErrorContext, UseFetchOptions } from '@vueuse/core'
+import type { Ref } from 'vue'
+import { computed, MaybeRefOrGetter, reactive, readonly, ref, toValue } from 'vue'
+
+import { docStore } from '../docStore'
+import { idbStore } from '../idbStore'
 import { useCall } from '../useCall/useCall'
+import { useFrappeFetch } from '../useFrappeFetch'
 import { parseFilters, makeGetParams, normalizeCacheKey } from '../utils'
-import { UseListOptions, UseListResponse } from './types'
-import { idbStore } from '../idbStore'
 import { listStore } from './listStore'
-import { docStore } from '../docStore'
+import type { UseListOptions, UseListResponse } from './types'
 
-export function useList<T extends { name: string }>(
-  options: UseListOptions<T>,
-) {
+export function useList<T extends { name: string }>(options: UseListOptions<T>) {
   const {
     doctype,
     fields,
@@ -86,18 +74,9 @@ export function useList<T extends { name: string }>(
     onFetchError: handleFetchError<T>(options),
   }
 
-  const {
-    data,
-    error,
-    isFetching,
-    isFinished,
-    canAbort,
-    aborted,
-    abort,
-    execute,
-  } = useFrappeFetch<UseListResponse<T>>(_url, fetchOptions).get()
-
-
+  const { data, error, isFetching, isFinished, canAbort, aborted, abort, execute } = useFrappeFetch<
+    UseListResponse<T>
+  >(_url, fetchOptions).get()
 
   const result = computed(() => {
     if (normalizedCacheKey && (out.loading || !out.isFinished)) {
@@ -133,9 +112,7 @@ export function useList<T extends { name: string }>(
     if (!refetch) execute()
   }
 
-  const updateRow = (
-    doc: Partial<{ name: string }> & Record<string, unknown>,
-  ) => {
+  const updateRow = (doc: Partial<{ name: string }> & Record<string, unknown>) => {
     if (allData.value == null) return
     let changed = false
     for (let row of allData.value) {
diff --git a/src/data-fetching/useNewDoc/useNewDoc.ts b/src/data-fetching/useNewDoc/useNewDoc.ts
index 198b21093..b629846b6 100644
--- a/src/data-fetching/useNewDoc/useNewDoc.ts
+++ b/src/data-fetching/useNewDoc/useNewDoc.ts
@@ -1,16 +1,12 @@
 import { reactive, unref } from 'vue'
-import { useCall } from '../useCall/useCall'
-import { UseCallOptions } from '../useCall/types'
+
 import { docStore } from '../docStore'
+import type { UseCallOptions } from '../useCall/types'
+import { useCall } from '../useCall/useCall'
 
-type UseNewDocOptions = Omit<
-  UseCallOptions,
-  'url' | 'method' | 'params' | 'immediate'
->
+type UseNewDocOptions = Omit<UseCallOptions, 'url' | 'method' | 'params' | 'immediate'>
 
-type NewDoc<T> = Partial<
-  Omit<T, 'creation' | 'modified' | 'owner' | 'modified_by'>
->
+type NewDoc<T> = Partial<Omit<T, 'creation' | 'modified' | 'owner' | 'modified_by'>>
 
 export function useNewDoc<T extends object>(
   doctype: string,
diff --git a/src/data-fetching/utils.ts b/src/data-fetching/utils.ts
index 56bb7b6a5..9612d5e9b 100644
--- a/src/data-fetching/utils.ts
+++ b/src/data-fetching/utils.ts
@@ -1,5 +1,7 @@
-import { MaybeRef, toValue, MaybeRefOrGetter } from 'vue'
-import { Filters } from './useList/types'
+import type { MaybeRef, MaybeRefOrGetter } from 'vue'
+import { toValue } from 'vue'
+
+import type { Filters } from './useList/types'
 
 export function makeGetParams(params: Record<string, any>) {
   let url = new URLSearchParams()
@@ -16,9 +18,7 @@ export function isEmptyObject(obj: any) {
   return Object.keys(obj).length === 0 && obj.constructor === Object
 }
 
-export function parseFilters(
-  _filters: MaybeRefOrGetter<Filters>,
-): Filters | null {
+export function parseFilters(_filters: MaybeRefOrGetter<Filters>): Filters | null {
   let filters = typeof _filters == 'function' ? _filters() : toValue(_filters)
   let parsedFilters: Filters = {}
   for (let key in filters) {
@@ -49,9 +49,7 @@ export function parseFilters(
   return parsedFilters
 }
 
-export function unrefObject(
-  obj: Record<string, MaybeRef<string | number | boolean>>,
-) {
+export function unrefObject(obj: Record<string, MaybeRef<string | number | boolean>>) {
   let newObj: Record<keyof typeof obj, any> = {}
   for (let key in obj) {
     newObj[key] = toValue(obj[key])
diff --git a/src/directives/focus.ts b/src/directives/focus.ts
index 6779dabaa..ee37c1fb0 100644
--- a/src/directives/focus.ts
+++ b/src/directives/focus.ts
@@ -1,4 +1,4 @@
-import { type ObjectDirective, type DirectiveBinding, nextTick } from "vue"
+import { type ObjectDirective, type DirectiveBinding, nextTick } from 'vue'
 
 interface FocusDirective extends ObjectDirective<HTMLElement> {
   mounted(el: HTMLElement, binding: DirectiveBinding<boolean>): void
@@ -14,7 +14,7 @@ const focusDirective: FocusDirective = {
       await nextTick()
       firstFocusableElement.focus()
       if (
-        binding.arg === "autoselect" &&
+        binding.arg === 'autoselect' &&
         (firstFocusableElement instanceof HTMLInputElement ||
           firstFocusableElement instanceof HTMLTextAreaElement)
       ) {
@@ -38,8 +38,7 @@ function getFirstFocusableElement(parent: HTMLElement): HTMLElement | null {
     return parent
   }
 
-  const focusableElements =
-    parent.querySelectorAll<HTMLElement>(focusableSelector)
+  const focusableElements = parent.querySelectorAll<HTMLElement>(focusableSelector)
   return focusableElements.length > 0 ? focusableElements[0] : null
 }
 
diff --git a/src/directives/visibility.ts b/src/directives/visibility.ts
index 94a125677..41dd37430 100644
--- a/src/directives/visibility.ts
+++ b/src/directives/visibility.ts
@@ -6,24 +6,15 @@ interface VisibilityElement extends Element {
 }
 
 export default {
-  beforeMount(
-    el: VisibilityElement,
-    binding: DirectiveBinding,
-    vnode: VNode,
-  ): void {
-    const fn = binding.value as (
-      visible: boolean,
-      entry: IntersectionObserverEntry,
-    ) => void
+  beforeMount(el: VisibilityElement, binding: DirectiveBinding, vnode: VNode): void {
+    const fn = binding.value as (visible: boolean, entry: IntersectionObserverEntry) => void
     if (!fn) return
 
-    const observer = new IntersectionObserver(
-      (entries: IntersectionObserverEntry[]) => {
-        const entry = entries[0]
-        const visible = entry.isIntersecting && entry.intersectionRatio > 0
-        fn(visible, entry)
-      },
-    )
+    const observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
+      const entry = entries[0]
+      const visible = entry.isIntersecting && entry.intersectionRatio > 0
+      fn(visible, entry)
+    })
 
     nextTick(() => {
       observer.observe(el)
diff --git a/src/fonts/Inter/inter.css b/src/fonts/Inter/inter.css
index e01007ebc..452d02ca2 100644
--- a/src/fonts/Inter/inter.css
+++ b/src/fonts/Inter/inter.css
@@ -13,11 +13,11 @@
     url('Inter.var.woff2?v=3.19') format('woff2');
   src: url('Inter.var.woff2?v=3.19') format('woff2') tech('variations');
   unicode-range:
-    U+0000-05FF, /* Latin, Greek, Cyrillic, Hebrew */
-    U+0700-1FFF, /* Extended Latin, Greek, Cyrillic, Armenian, Georgian */
-    U+2C00-2FFF, /* Additional scripts */
-    U+4E00-9FFF, /* CJK (Chinese, Japanese, Korean) */
-    U+AC00-D7AF; /* Hangul (Korean) */
+    U+0000-05FF,
+    /* Latin, Greek, Cyrillic, Hebrew */ U+0700-1FFF,
+    /* Extended Latin, Greek, Cyrillic, Armenian, Georgian */ U+2C00-2FFF,
+    /* Additional scripts */ U+4E00-9FFF,
+    /* CJK (Chinese, Japanese, Korean) */ U+AC00-D7AF; /* Hangul (Korean) */
 }
 @font-face {
   font-family: 'InterVar';
@@ -42,11 +42,11 @@
     url('Inter.var.woff2?v=3.19') format('woff2');
   src: url('Inter.var.woff2?v=3.19') format('woff2') tech('variations');
   unicode-range:
-    U+0000-05FF, /* Latin, Greek, Cyrillic, Hebrew */
-    U+0700-1FFF, /* Extended Latin, Greek, Cyrillic, Armenian, Georgian */
-    U+2C00-2FFF, /* Additional scripts */
-    U+4E00-9FFF, /* CJK (Chinese, Japanese, Korean) */
-    U+AC00-D7AF; /* Hangul (Korean) */
+    U+0000-05FF,
+    /* Latin, Greek, Cyrillic, Hebrew */ U+0700-1FFF,
+    /* Extended Latin, Greek, Cyrillic, Armenian, Georgian */ U+2C00-2FFF,
+    /* Additional scripts */ U+4E00-9FFF,
+    /* CJK (Chinese, Japanese, Korean) */ U+AC00-D7AF; /* Hangul (Korean) */
 }
 @font-face {
   font-family: 'Inter';
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 742921bcc..2c6ef1d52 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -1,4 +1,5 @@
 import { http, HttpResponse, delay } from 'msw'
+
 import { url } from './utils'
 
 export const handlers = [
@@ -73,23 +74,20 @@ export const handlers = [
       },
     })
   }),
-  http.post(
-    url('/api/v2/document/User/user1/method/update_email'),
-    async ({ request }) => {
-      let body = await request.json()
-      return HttpResponse.json({
-        docs: [
-          {
-            doctype: 'User',
-            name: 'user1',
-            email: body['email'],
-            first_name: 'User',
-            last_name: '1',
-          },
-        ],
-      })
-    },
-  ),
+  http.post(url('/api/v2/document/User/user1/method/update_email'), async ({ request }) => {
+    let body = await request.json()
+    return HttpResponse.json({
+      docs: [
+        {
+          doctype: 'User',
+          name: 'user1',
+          email: body['email'],
+          first_name: 'User',
+          last_name: '1',
+        },
+      ],
+    })
+  }),
 ]
 
 function getUsers(listParams) {
diff --git a/src/mocks/node.ts b/src/mocks/node.ts
index 86f7d6154..e5e2e69c8 100644
--- a/src/mocks/node.ts
+++ b/src/mocks/node.ts
@@ -1,4 +1,5 @@
 import { setupServer } from 'msw/node'
+
 import { handlers } from './handlers'
 
 export const server = setupServer(...handlers)
diff --git a/src/resources/documentResource.js b/src/resources/documentResource.js
index 99a0adb5b..d1d656e7f 100644
--- a/src/resources/documentResource.js
+++ b/src/resources/documentResource.js
@@ -1,5 +1,6 @@
 import { reactive, watch } from 'vue'
-import { getCacheKey, createResource } from './resources'
+
+import { getConfig } from '../utils/config'
 import {
   updateRowInListResource,
   deleteRowInListResource,
@@ -7,7 +8,7 @@ import {
 } from './listResource'
 import { getLocal, saveLocal, deleteLocal } from './local'
 import { onDocUpdate } from './realtime'
-import { getConfig } from '../utils/config'
+import { getCacheKey, createResource } from './resources'
 
 let documentCache = reactive({})
 
@@ -24,12 +25,9 @@ export function createDocumentResource(options, vm) {
   }
 
   let defaultDocGetUrl = getConfig('defaultDocGetUrl') || 'frappe.client.get'
-  let defaultDocUpdateUrl =
-    getConfig('defaultDocUpdateUrl') || 'frappe.client.set_value'
-  let defaultDocDeleteUrl =
-    getConfig('defaultDocDeleteUrl') || 'frappe.client.delete'
-  let defaultRunDocMethodUrl =
-    getConfig('defaultRunDocMethodUrl') || 'run_doc_method'
+  let defaultDocUpdateUrl = getConfig('defaultDocUpdateUrl') || 'frappe.client.set_value'
+  let defaultDocDeleteUrl = getConfig('defaultDocDeleteUrl') || 'frappe.client.delete'
+  let defaultRunDocMethodUrl = getConfig('defaultRunDocMethodUrl') || 'run_doc_method'
 
   let setValueOptions = {
     url: defaultDocUpdateUrl,
@@ -162,13 +160,7 @@ export function createDocumentResource(options, vm) {
       }
     }
 
-    let {
-      method,
-      onSuccess,
-      makeParams,
-      transform: _transform,
-      ...otherOptions
-    } = methodOptions
+    let { method, onSuccess, makeParams, transform: _transform, ...otherOptions } = methodOptions
 
     out[methodKey] = createResource(
       {
@@ -194,10 +186,7 @@ export function createDocumentResource(options, vm) {
         onSuccess(data) {
           if (data.docs) {
             for (let doc of data.docs) {
-              if (
-                doc.doctype === out.doctype &&
-                doc.name.toString() === out.name.toString()
-              ) {
+              if (doc.doctype === out.doctype && doc.name.toString() === out.name.toString()) {
                 out.doc = transform(doc)
                 // update data in list resources
                 updateRowInListResource(out.doctype, out.doc)
diff --git a/src/resources/index.ts b/src/resources/index.ts
index 6e7b33265..fb8834f23 100644
--- a/src/resources/index.ts
+++ b/src/resources/index.ts
@@ -1,7 +1,4 @@
-export {
-  createDocumentResource,
-  getCachedDocumentResource,
-} from './documentResource'
+export { createDocumentResource, getCachedDocumentResource } from './documentResource'
 export { createListResource, getCachedListResource } from './listResource'
 export * from './local'
 export { default as resourcesPlugin } from './plugin'
diff --git a/src/resources/listResource.js b/src/resources/listResource.js
index 9a0d6031b..0ba916491 100644
--- a/src/resources/listResource.js
+++ b/src/resources/listResource.js
@@ -1,8 +1,9 @@
 import { reactive } from 'vue'
-import { getCacheKey, createResource } from './resources'
+
+import { getConfig } from '../utils/config'
 import { saveLocal, getLocal } from './local'
 import { onDocUpdate } from './realtime'
-import { getConfig } from '../utils/config'
+import { getCacheKey, createResource } from './resources'
 
 let listCache = reactive({})
 let resourcesByDocType = {}
@@ -24,14 +25,10 @@ export function createListResource(options, vm) {
   }
 
   let defaultListUrl = getConfig('defaultListUrl') || 'frappe.client.get_list'
-  let defaultDocInsertUrl =
-    getConfig('defaultDocInsertUrl') || 'frappe.client.insert'
-  let defaultDocUpdateUrl =
-    getConfig('defaultDocUpdateUrl') || 'frappe.client.set_value'
-  let defaultDocDeleteUrl =
-    getConfig('defaultDocDeleteUrl') || 'frappe.client.delete'
-  let defaultRunDocMethodUrl =
-    getConfig('defaultRunDocMethodUrl') || 'run_doc_method'
+  let defaultDocInsertUrl = getConfig('defaultDocInsertUrl') || 'frappe.client.insert'
+  let defaultDocUpdateUrl = getConfig('defaultDocUpdateUrl') || 'frappe.client.set_value'
+  let defaultDocDeleteUrl = getConfig('defaultDocDeleteUrl') || 'frappe.client.delete'
+  let defaultRunDocMethodUrl = getConfig('defaultRunDocMethodUrl') || 'run_doc_method'
 
   let out = reactive({
     doctype: options.doctype,
diff --git a/src/resources/plugin.js b/src/resources/plugin.js
index be4c2c01b..822c6280a 100644
--- a/src/resources/plugin.js
+++ b/src/resources/plugin.js
@@ -1,10 +1,8 @@
 import { reactive, watch } from 'vue'
-import { createResource, getCachedResource } from './resources'
-import {
-  createDocumentResource,
-  getCachedDocumentResource,
-} from './documentResource'
+
+import { createDocumentResource, getCachedDocumentResource } from './documentResource'
 import { createListResource, getCachedListResource } from './listResource'
+import { createResource, getCachedResource } from './resources'
 
 let createMixin = (mixinOptions) => ({
   created() {
@@ -30,9 +28,7 @@ let createMixin = (mixinOptions) => ({
                 return
               }
 
-              let changed =
-                !oldOptions ||
-                JSON.stringify(options) !== JSON.stringify(oldOptions)
+              let changed = !oldOptions || JSON.stringify(options) !== JSON.stringify(oldOptions)
 
               if (!changed) return
               this._resources[key] = createResourceForOptions(options, this)
diff --git a/src/resources/realtime.ts b/src/resources/realtime.ts
index 17a1768ad..86cfe4780 100644
--- a/src/resources/realtime.ts
+++ b/src/resources/realtime.ts
@@ -1,4 +1,4 @@
-import { Socket } from 'socket.io-client'
+import type { Socket } from 'socket.io-client'
 
 export function onDocUpdate(
   socket: Socket,
diff --git a/src/resources/resources.js b/src/resources/resources.js
index e7d1d91d2..32f349226 100644
--- a/src/resources/resources.js
+++ b/src/resources/resources.js
@@ -1,8 +1,9 @@
 import { reactive } from 'vue'
+
+import { getConfig } from '../utils/config'
 import debounce from '../utils/debounce'
 import { request } from '../utils/request'
 import { getLocal, saveLocal } from './local'
-import { getConfig } from '../utils/config'
 
 let cached = {}
 
@@ -27,9 +28,7 @@ export function createResource(options, vm) {
     }
   }
 
-  let fetchFunction = options.debounce
-    ? debounce(fetch, options.debounce)
-    : fetch
+  let fetchFunction = options.debounce ? debounce(fetch, options.debounce) : fetch
 
   let out = reactive({
     method: options.method,
@@ -51,8 +50,7 @@ export function createResource(options, vm) {
   })
 
   async function fetch(params, tempOptions = {}) {
-    let resourceFetcher =
-      options.resourceFetcher || getConfig('resourceFetcher') || request
+    let resourceFetcher = options.resourceFetcher || getConfig('resourceFetcher') || request
 
     if (params instanceof Event) {
       params = null
diff --git a/src/utils/call.js b/src/utils/call.js
index a1b84fa79..065e27cf0 100644
--- a/src/utils/call.js
+++ b/src/utils/call.js
@@ -5,7 +5,7 @@ export default async function call(method, args, options = {}) {
 
   let headers = Object.assign(
     {
-      Accept: 'application/json',
+      'Accept': 'application/json',
       'Content-Type': 'application/json; charset=utf-8',
       'X-Frappe-Site-Name': window.location.hostname,
     },
@@ -50,9 +50,7 @@ export default async function call(method, args, options = {}) {
       error = JSON.parse(response)
       // eslint-disable-next-line no-empty
     } catch (e) {}
-    let errorParts = [
-      [method, error.exc_type, error._error_message].filter(Boolean).join(' '),
-    ]
+    let errorParts = [[method, error.exc_type, error._error_message].filter(Boolean).join(' ')]
     if (error.exc) {
       exception = error.exc
       try {
@@ -65,9 +63,7 @@ export default async function call(method, args, options = {}) {
     e.exc_type = error.exc_type
     e.exc = exception
     e.status = res.status
-    e.messages = error._server_messages
-      ? JSON.parse(error._server_messages)
-      : []
+    e.messages = error._server_messages ? JSON.parse(error._server_messages) : []
     e.messages = e.messages.concat(error.message)
     e.messages = e.messages.map((m) => {
       try {
@@ -78,9 +74,7 @@ export default async function call(method, args, options = {}) {
     })
     e.messages = e.messages.filter(Boolean)
     if (!e.messages.length) {
-      e.messages = error._error_message
-        ? [error._error_message]
-        : ['Internal Server Error']
+      e.messages = error._error_message ? [error._error_message] : ['Internal Server Error']
     }
 
     if (options.onError) {
diff --git a/src/utils/config.ts b/src/utils/config.ts
index 2861a0696..692b0dc68 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -22,15 +22,10 @@ interface FrappeUIConfig {
 
 let config: FrappeUIConfig = {}
 
-export function setConfig<K extends keyof FrappeUIConfig>(
-  key: K,
-  value: FrappeUIConfig[K],
-): void {
+export function setConfig<K extends keyof FrappeUIConfig>(key: K, value: FrappeUIConfig[K]): void {
   config[key] = value
 }
 
-export function getConfig<K extends keyof FrappeUIConfig>(
-  key: K,
-): FrappeUIConfig[K] | null {
+export function getConfig<K extends keyof FrappeUIConfig>(key: K): FrappeUIConfig[K] | null {
   return config[key] ?? null
 }
diff --git a/src/utils/confirmDialog.js b/src/utils/confirmDialog.js
index 1c38ae94b..8da9f2116 100644
--- a/src/utils/confirmDialog.js
+++ b/src/utils/confirmDialog.js
@@ -1,13 +1,14 @@
-import ConfirmDialog from '../components/ConfirmDialog.vue'
 import { h, ref } from 'vue'
 
+import ConfirmDialog from '../components/ConfirmDialog.vue'
+
 export function confirmDialog({ title = 'Untitled', message = '', onConfirm, onCancel }) {
   renderDialog(
     h(ConfirmDialog, {
       title,
       message,
       onConfirm,
-      onCancel
+      onCancel,
     }),
   )
 }
diff --git a/src/utils/dayjs.ts b/src/utils/dayjs.ts
index 7cd33aee7..507d7a696 100644
--- a/src/utils/dayjs.ts
+++ b/src/utils/dayjs.ts
@@ -1,13 +1,15 @@
-import _dayjs, { Dayjs } from 'dayjs/esm'
-import relativeTime from 'dayjs/esm/plugin/relativeTime'
+import type { Dayjs } from 'dayjs/esm'
+import _dayjs from 'dayjs/esm'
+import advancedFormat from 'dayjs/esm/plugin/advancedFormat'
+import customParseFormat from 'dayjs/esm/plugin/customParseFormat'
+import duration from 'dayjs/esm/plugin/duration'
+import isToday from 'dayjs/esm/plugin/isToday'
 import localizedFormat from 'dayjs/esm/plugin/localizedFormat'
+import relativeTime from 'dayjs/esm/plugin/relativeTime'
+import timezone from 'dayjs/esm/plugin/timezone'
 import updateLocale from 'dayjs/esm/plugin/updateLocale'
-import isToday from 'dayjs/esm/plugin/isToday'
-import duration from 'dayjs/esm/plugin/duration'
 import utc from 'dayjs/esm/plugin/utc'
-import timezone from 'dayjs/esm/plugin/timezone'
-import advancedFormat from 'dayjs/esm/plugin/advancedFormat'
-import customParseFormat from 'dayjs/esm/plugin/customParseFormat'
+
 import { getConfig } from './config'
 
 _dayjs.extend(updateLocale)
diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts
index 2faddc082..36c42536e 100644
--- a/src/utils/debounce.ts
+++ b/src/utils/debounce.ts
@@ -1,8 +1,4 @@
-export default function debounce(
-  func: Function,
-  wait: number,
-  immediate?: boolean,
-) {
+export default function debounce(func: Function, wait: number, immediate?: boolean) {
   var timeout: number | undefined
   return function () {
     var context = this,
diff --git a/src/utils/fileUploadHandler.ts b/src/utils/fileUploadHandler.ts
index c3d72c3bf..007e4eff6 100644
--- a/src/utils/fileUploadHandler.ts
+++ b/src/utils/fileUploadHandler.ts
@@ -1,4 +1,4 @@
-import { UploadOptions } from "./useFileUpload"
+import type { UploadOptions } from './useFileUpload'
 
 type EventListenerOption = 'start' | 'progress' | 'finish' | 'error'
 
@@ -90,8 +90,7 @@ class FileUploadHandler {
         }
       }
 
-      const uploadEndpoint =
-        options.upload_endpoint || '/api/method/upload_file'
+      const uploadEndpoint = options.upload_endpoint || '/api/method/upload_file'
       xhr.open('POST', uploadEndpoint, true)
       xhr.setRequestHeader('Accept', 'application/json')
 
@@ -133,10 +132,10 @@ class FileUploadHandler {
       if (options.optimize) {
         form_data.append('optimize', '1')
         if (options.max_width) {
-            form_data.append('max_width', options.max_width.toString())
+          form_data.append('max_width', options.max_width.toString())
         }
         if (options.max_height) {
-            form_data.append('max_height', options.max_height.toString())
+          form_data.append('max_height', options.max_height.toString())
         }
       }
 
diff --git a/src/utils/frappeRequest.js b/src/utils/frappeRequest.js
index 66e425328..816326068 100644
--- a/src/utils/frappeRequest.js
+++ b/src/utils/frappeRequest.js
@@ -10,7 +10,7 @@ export function frappeRequest(options) {
       }
       let headers = Object.assign(
         {
-          Accept: 'application/json',
+          'Accept': 'application/json',
           'Content-Type': 'application/json; charset=utf-8',
           'X-Frappe-Site-Name': window.location.hostname,
         },
@@ -66,9 +66,7 @@ export function frappeRequest(options) {
           // eslint-disable-next-line no-empty
         } catch (e) {}
         let errorParts = [
-          [options.url, error?.exc_type, error?._error_message]
-            .filter(Boolean)
-            .join(' '),
+          [options.url, error?.exc_type, error?._error_message].filter(Boolean).join(' '),
         ]
         if (error.exc) {
           exception = error.exc
@@ -83,9 +81,7 @@ export function frappeRequest(options) {
         e.exc = exception
         e.response = response
         e.status = errorResponse.status
-        e.messages = error._server_messages
-          ? JSON.parse(error._server_messages)
-          : []
+        e.messages = error._server_messages ? JSON.parse(error._server_messages) : []
         e.messages = e.messages.concat(error.message)
         e.messages = e.messages.map((m) => {
           try {
@@ -96,9 +92,7 @@ export function frappeRequest(options) {
         })
         e.messages = e.messages.filter(Boolean)
         if (!e.messages.length) {
-          e.messages = error._error_message
-            ? [error._error_message]
-            : ['Internal Server Error']
+          e.messages = error._error_message ? [error._error_message] : ['Internal Server Error']
         }
         options.onError && options.onError(e)
         throw e
diff --git a/src/utils/pageMeta.ts b/src/utils/pageMeta.ts
index fbfd0ce6b..eb47b4c5a 100644
--- a/src/utils/pageMeta.ts
+++ b/src/utils/pageMeta.ts
@@ -1,10 +1,4 @@
-import {
-  watch,
-  getCurrentInstance,
-  onBeforeUnmount,
-  type App,
-  type WatchStopHandle,
-} from 'vue'
+import { watch, getCurrentInstance, onBeforeUnmount, type App, type WatchStopHandle } from 'vue'
 
 interface PageMeta {
   title?: string
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index ac3ed54f4..63b80101c 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -1,4 +1,5 @@
-import { ref, onMounted, Ref } from 'vue'
+import type { Ref } from 'vue'
+import { ref, onMounted } from 'vue'
 
 export type Theme = 'light' | 'dark' | 'system'
 
@@ -6,9 +7,7 @@ export function useTheme() {
   const currentTheme: Ref<Theme> = ref('light')
 
   const getSystemTheme = (): 'light' | 'dark' => {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : 'light'
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
   }
 
   const toggleTheme = (): void => {
diff --git a/src/utils/url-validation.ts b/src/utils/url-validation.ts
index 89138e77b..3005666bd 100644
--- a/src/utils/url-validation.ts
+++ b/src/utils/url-validation.ts
@@ -31,7 +31,7 @@ export function isValidUrl(url: string): boolean {
   // (alphanumeric, -, _, ., /, #, ?, =, &, %).
   // This prevents colons (avoiding 'javascript:' like schemes) and other problematic
   // characters like spaces, (, ), !, {, }.
-  if (/^[\w\-]([\w\-./#?=&%]*)$/i.test(url)) {
+  if (/^[\w-]([\w\-./#?=&%]*)$/i.test(url)) {
     return true
   }
 
diff --git a/src/utils/useFileUpload.ts b/src/utils/useFileUpload.ts
index d308eab88..6d815b952 100644
--- a/src/utils/useFileUpload.ts
+++ b/src/utils/useFileUpload.ts
@@ -68,8 +68,7 @@ export function useFileUpload() {
   const result = computed(() => state.result)
 
   return {
-    upload: (file: File, options: UploadOptions = {}) =>
-      upload(file, options, state, reset),
+    upload: (file: File, options: UploadOptions = {}) => upload(file, options, state, reset),
     reset,
     state,
     isUploading,
@@ -141,9 +140,7 @@ async function upload(
 
         if (error) {
           let exception
-          let errorParts = [
-            [error.exc_type, error._error_message].filter(Boolean).join(' '),
-          ]
+          let errorParts = [[error.exc_type, error._error_message].filter(Boolean).join(' ')]
           if (error.exc) {
             exception = error.exc
             try {
@@ -153,9 +150,7 @@ async function upload(
             } catch (e) {}
           }
           let e = new Error(errorParts.join('\n'))
-          let messages = error._server_messages
-            ? JSON.parse(error._server_messages)
-            : []
+          let messages = error._server_messages ? JSON.parse(error._server_messages) : []
           messages = messages
             .map((m: string) => {
               try {
@@ -166,9 +161,7 @@ async function upload(
             })
             .filter(Boolean)
           if (!messages.length) {
-            messages = error._error_message
-              ? [error._error_message]
-              : ['Internal Server Error']
+            messages = error._error_message ? [error._error_message] : ['Internal Server Error']
           }
           e.message = messages.join('\n')
           state.error = e
diff --git a/tailwind/colorPalette.js b/tailwind/colorPalette.js
index c76d7a51d..c380edac5 100644
--- a/tailwind/colorPalette.js
+++ b/tailwind/colorPalette.js
@@ -1,25 +1,26 @@
 import tailwindColors from 'tailwindcss/colors'
+
 import colorsData from './colors.json'
 
 function generateColorPalette() {
   const colorPalette = {
-    inherit: tailwindColors.inherit,
-    current: tailwindColors.current,
-    transparent: tailwindColors.transparent,
-    black: tailwindColors.black,
-    white: tailwindColors.white,
-    gray: {},
-    blue: {},
-    green: {},
-    red: {},
-    orange: {},
-    yellow: {},
-    teal: {},
-    violet: {},
-    cyan: {},
-    amber: {},
-    pink: {},
-    purple: {},
+    'inherit': tailwindColors.inherit,
+    'current': tailwindColors.current,
+    'transparent': tailwindColors.transparent,
+    'black': tailwindColors.black,
+    'white': tailwindColors.white,
+    'gray': {},
+    'blue': {},
+    'green': {},
+    'red': {},
+    'orange': {},
+    'yellow': {},
+    'teal': {},
+    'violet': {},
+    'cyan': {},
+    'amber': {},
+    'pink': {},
+    'purple': {},
     'white-overlay': {},
     'black-overlay': {},
   }
@@ -64,26 +65,22 @@ function generateCSSVariables() {
 
   // Generate CSS variables for light mode
   Object.keys(colorsData.themedVariables.light).forEach((category) => {
-    Object.keys(colorsData.themedVariables.light[category]).forEach(
-      (colorName) => {
-        const variableName = `--${category}-${colorName}`
-        const reference = colorsData.themedVariables.light[category][colorName]
-        const lightValue = resolveColorReference(reference)
-        output[':root'][variableName] = lightValue
-      },
-    )
+    Object.keys(colorsData.themedVariables.light[category]).forEach((colorName) => {
+      const variableName = `--${category}-${colorName}`
+      const reference = colorsData.themedVariables.light[category][colorName]
+      const lightValue = resolveColorReference(reference)
+      output[':root'][variableName] = lightValue
+    })
   })
 
   // Generate CSS variables for dark mode
   Object.keys(colorsData.themedVariables.dark).forEach((category) => {
-    Object.keys(colorsData.themedVariables.dark[category]).forEach(
-      (colorName) => {
-        const variableName = `--${category}-${colorName}`
-        const reference = colorsData.themedVariables.dark[category][colorName]
-        const darkValue = resolveColorReference(reference)
-        output['[data-theme="dark"]'][variableName] = darkValue
-      },
-    )
+    Object.keys(colorsData.themedVariables.dark[category]).forEach((colorName) => {
+      const variableName = `--${category}-${colorName}`
+      const reference = colorsData.themedVariables.dark[category][colorName]
+      const darkValue = resolveColorReference(reference)
+      output['[data-theme="dark"]'][variableName] = darkValue
+    })
   })
 
   // Generate CSS variables for each color shade
@@ -115,14 +112,12 @@ function generateSemanticColors() {
 
   // Generate semantic colors
   Object.keys(colorsData.themedVariables.light).forEach((category) => {
-    Object.keys(colorsData.themedVariables.light[category]).forEach(
-      (colorName) => {
-        const variableName = `${category}-${colorName}`
-        const reference = colorsData.themedVariables.light[category][colorName]
-        const lightValue = resolveColorReference(reference)
-        output[category][colorName] = `var(--${variableName}, ${lightValue})`
-      },
-    )
+    Object.keys(colorsData.themedVariables.light[category]).forEach((colorName) => {
+      const variableName = `${category}-${colorName}`
+      const reference = colorsData.themedVariables.light[category][colorName]
+      const lightValue = resolveColorReference(reference)
+      output[category][colorName] = `var(--${variableName}, ${lightValue})`
+    })
   })
 
   return output
diff --git a/tailwind/colors.js b/tailwind/colors.js
index 9d30ef1d7..ca8504551 100644
--- a/tailwind/colors.js
+++ b/tailwind/colors.js
@@ -337,18 +337,7 @@ function withOpacity(color) {
 function getDefaultColorMap(color) {
   let defaultColors = lightModeColors
   let obj = {}
-  let keys = [
-    '50',
-    '100',
-    '200',
-    '300',
-    '400',
-    '500',
-    '600',
-    '700',
-    '800',
-    '900',
-  ]
+  let keys = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']
   keys.forEach((key) => {
     let rgbString = defaultColors[color][key]
     if (color) {
@@ -534,7 +523,7 @@ let semanticColors = {
     'red-2': withOpacity('var(--outline-red-2)'),
     'red-3': withOpacity('var(--outline-red-3)'),
     'red-4': withOpacity('var(--outline-red-4)'),
-    white: withOpacity('var(--outline-white)'),
+    'white': withOpacity('var(--outline-white)'),
   },
   // for background color
   surface: {
@@ -542,7 +531,7 @@ let semanticColors = {
     'amber-2': withOpacity('var(--surface-amber-2)'),
     'blue-1': withOpacity('var(--surface-blue-1)'),
     'blue-2': withOpacity('var(--surface-blue-2)'),
-    cards: withOpacity('var(--surface-cards)'),
+    'cards': withOpacity('var(--surface-cards)'),
     'cyan-1': withOpacity('var(--surface-cyan-1)'),
     'gray-1': withOpacity('var(--surface-gray-1)'),
     'gray-2': withOpacity('var(--surface-gray-2)'),
@@ -555,7 +544,7 @@ let semanticColors = {
     'green-2': withOpacity('var(--surface-green-2)'),
     'green-3': withOpacity('var(--surface-green-3)'),
     'menu-bar': withOpacity('var(--surface-menu-bar)'),
-    modal: withOpacity('var(--surface-modal)'),
+    'modal': withOpacity('var(--surface-modal)'),
     'orange-1': withOpacity('var(--surface-orange-1)'),
     'pink-1': withOpacity('var(--surface-pink-1)'),
     'red-1': withOpacity('var(--surface-red-1)'),
@@ -564,9 +553,9 @@ let semanticColors = {
     'red-4': withOpacity('var(--surface-red-4)'),
     'red-5': withOpacity('var(--surface-red-5)'),
     'red-6': withOpacity('var(--surface-red-6)'),
-    selected: withOpacity('var(--surface-selected)'),
+    'selected': withOpacity('var(--surface-selected)'),
     'violet-1': withOpacity('var(--surface-violet-1)'),
-    white: withOpacity('var(--surface-white)'),
+    'white': withOpacity('var(--surface-white)'),
   },
   // for text color and svg stroke/fill
   ink: {
@@ -595,29 +584,29 @@ let semanticColors = {
     'red-3': withOpacity('var(--text-ink-red-3)'),
     'red-4': withOpacity('var(--text-ink-red-4)'),
     'violet-1': withOpacity('var(--text-ink-violet-1)'),
-    white: withOpacity('var(--text-ink-white)'),
+    'white': withOpacity('var(--text-ink-white)'),
   },
 }
 
 function colorPalette({ colors }) {
   return {
-    inherit: colors.inherit,
-    current: colors.current,
-    transparent: colors.transparent,
-    black: colors.black,
-    white: colors.white,
-    gray: getDefaultColorMap('gray'),
-    blue: getDefaultColorMap('blue'),
-    green: getDefaultColorMap('green'),
-    red: getDefaultColorMap('red'),
-    orange: getDefaultColorMap('orange'),
-    yellow: getDefaultColorMap('yellow'),
-    teal: getDefaultColorMap('teal'),
-    violet: getDefaultColorMap('violet'),
-    cyan: getDefaultColorMap('cyan'),
-    amber: getDefaultColorMap('amber'),
-    pink: getDefaultColorMap('pink'),
-    purple: getDefaultColorMap('purple'),
+    'inherit': colors.inherit,
+    'current': colors.current,
+    'transparent': colors.transparent,
+    'black': colors.black,
+    'white': colors.white,
+    'gray': getDefaultColorMap('gray'),
+    'blue': getDefaultColorMap('blue'),
+    'green': getDefaultColorMap('green'),
+    'red': getDefaultColorMap('red'),
+    'orange': getDefaultColorMap('orange'),
+    'yellow': getDefaultColorMap('yellow'),
+    'teal': getDefaultColorMap('teal'),
+    'violet': getDefaultColorMap('violet'),
+    'cyan': getDefaultColorMap('cyan'),
+    'amber': getDefaultColorMap('amber'),
+    'pink': getDefaultColorMap('pink'),
+    'purple': getDefaultColorMap('purple'),
     'white-overlay': (() => {
       let obj = {}
       for (let shade in whiteOverlay) {
diff --git a/tailwind/figma-variables-to-colors.js b/tailwind/figma-variables-to-colors.js
index 2ef52a591..c4d67fdf4 100644
--- a/tailwind/figma-variables-to-colors.js
+++ b/tailwind/figma-variables-to-colors.js
@@ -40,11 +40,11 @@ function convertToJSON(variables) {
     },
   }
 
-  const lightPattern = /^light\/([^\/]+)\/([^\/]+)$/
-  const darkPattern = /^dark\/([^\/]+)\/([^\/]+)$/
-  const neutralPattern = /^neutral\/([^\/]+)$/
-  const whiteOverlayPattern = /^white overlay\/([^\/]+)$/
-  const blackOverlayPattern = /^black overlay\/([^\/]+)$/
+  const lightPattern = /^light\/([^/]+)\/([^/]+)$/
+  const darkPattern = /^dark\/([^/]+)\/([^/]+)$/
+  const neutralPattern = /^neutral\/([^/]+)$/
+  const whiteOverlayPattern = /^white overlay\/([^/]+)$/
+  const blackOverlayPattern = /^black overlay\/([^/]+)$/
 
   const colorMap = {}
 
@@ -66,8 +66,7 @@ function convertToJSON(variables) {
                 output.lightMode[color] = {}
               }
               output.lightMode[color][shade] = variable.value
-              colorMap[`light/${color}/${shade}`] =
-                `lightMode/${color}/${shade}`
+              colorMap[`light/${color}/${shade}`] = `lightMode/${color}/${shade}`
             }
           } else if ((match = name.match(darkPattern))) {
             const [_, color, shade] = match
@@ -106,23 +105,15 @@ function convertToJSON(variables) {
             const value = variable.value.name
             const [category, colorName] = name.split('/')
             const targetCategory = category === 'text-icons' ? 'ink' : category
-            if (
-              mode.name === 'Light' &&
-              output.themedVariables.light[targetCategory]
-            ) {
+            if (mode.name === 'Light' && output.themedVariables.light[targetCategory]) {
               if (colorMap[value]) {
-                output.themedVariables.light[targetCategory][colorName] =
-                  colorMap[value]
+                output.themedVariables.light[targetCategory][colorName] = colorMap[value]
               } else {
                 console.warn(`Reference not found for value: ${value}`)
               }
-            } else if (
-              mode.name === 'Dark' &&
-              output.themedVariables.dark[targetCategory]
-            ) {
+            } else if (mode.name === 'Dark' && output.themedVariables.dark[targetCategory]) {
               if (colorMap[value]) {
-                output.themedVariables.dark[targetCategory][colorName] =
-                  colorMap[value]
+                output.themedVariables.dark[targetCategory][colorName] = colorMap[value]
               } else {
                 console.warn(`Reference not found for value: ${value}`)
               }
diff --git a/tailwind/plugin.js b/tailwind/plugin.js
index 95b603e01..a401aa017 100644
--- a/tailwind/plugin.js
+++ b/tailwind/plugin.js
@@ -1,4 +1,5 @@
 import plugin from 'tailwindcss/plugin'
+
 import {
   generateColorPalette,
   generateSemanticColors,
@@ -10,7 +11,7 @@ let semanticColors = generateSemanticColors()
 let cssVariables = generateCSSVariables()
 
 let globalStyles = (theme) => ({
-  html: {
+  'html': {
     'font-family': `InterVar, ${theme('fontFamily.sans')}`,
     'font-optical-sizing': 'auto',
   },
@@ -19,7 +20,7 @@ let globalStyles = (theme) => ({
     WebkitFontSmoothing: 'antialiased',
     MozOsxFontSmoothing: 'grayscale',
   },
-  select: {
+  'select': {
     backgroundImage:
       'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%237C7C7C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" aria-hidden="true" viewBox="0 0 24 24" ><path d="m6 9 6 6 6-6" /></svg>\')',
     backgroundSize: '1.13em',
@@ -33,8 +34,7 @@ let componentStyles = {
       {},
   },
   '.form-checkbox': {
-    '@apply rounded-md bg-surface-gray-2 text-ink-blue-2 focus:ring-0 focus-visible:ring-1':
-      {},
+    '@apply rounded-md bg-surface-gray-2 text-ink-blue-2 focus:ring-0 focus-visible:ring-1': {},
   },
   "[data-theme='dark'] [type='checkbox']:checked": {
     'background-image': `url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230F0F0F' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")`,
@@ -53,25 +53,24 @@ export default plugin(
     theme: {
       colors: colorPalette,
       borderRadius: {
-        none: '0px', // 0
-        sm: '0.25rem', // 4px
-        DEFAULT: '0.5rem', // 8px
-        md: '0.625rem', // 10px
-        lg: '0.75rem', // 12px
-        xl: '1rem', // 16px
+        'none': '0px', // 0
+        'sm': '0.25rem', // 4px
+        'DEFAULT': '0.5rem', // 8px
+        'md': '0.625rem', // 10px
+        'lg': '0.75rem', // 12px
+        'xl': '1rem', // 16px
         '2xl': '1.25rem', // 20px
-        full: '9999px', // 9999px
+        'full': '9999px', // 9999px
       },
       boxShadow: {
-        sm: '0px 1px 2px rgba(0, 0, 0, 0.1)',
-        DEFAULT:
-          '0px 0px 1px rgba(0, 0, 0, 0.45), 0px 1px 2px rgba(0, 0, 0, 0.1)',
-        md: '0px 0px 1px rgba(0, 0, 0, 0.12), 0px 0.5px 2px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.16)',
-        lg: '0px 0px 1px rgba(0, 0, 0, 0.35), 0px 6px 8px -4px rgba(0, 0, 0, 0.1)',
-        xl: '0px 0px 1px rgba(0, 0, 0, 0.19), 0px 1px 2px rgba(0, 0, 0, 0.07), 0px 6px 15px -5px rgba(0, 0, 0, 0.11)',
+        'sm': '0px 1px 2px rgba(0, 0, 0, 0.1)',
+        'DEFAULT': '0px 0px 1px rgba(0, 0, 0, 0.45), 0px 1px 2px rgba(0, 0, 0, 0.1)',
+        'md': '0px 0px 1px rgba(0, 0, 0, 0.12), 0px 0.5px 2px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.16)',
+        'lg': '0px 0px 1px rgba(0, 0, 0, 0.35), 0px 6px 8px -4px rgba(0, 0, 0, 0.1)',
+        'xl': '0px 0px 1px rgba(0, 0, 0, 0.19), 0px 1px 2px rgba(0, 0, 0, 0.07), 0px 6px 15px -5px rgba(0, 0, 0, 0.11)',
         '2xl':
           '0px 0px 1px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.05), 0px 10px 24px -3px rgba(0, 0, 0, 0.1)',
-        none: 'none',
+        'none': 'none',
       },
       container: {
         padding: {
@@ -87,7 +86,7 @@ export default plugin(
             fontWeight: '420',
           },
         ],
-        xs: [
+        'xs': [
           '12px',
           {
             lineHeight: '1.15',
@@ -95,7 +94,7 @@ export default plugin(
             fontWeight: '420',
           },
         ],
-        sm: [
+        'sm': [
           '13px',
           {
             lineHeight: '1.15',
@@ -103,7 +102,7 @@ export default plugin(
             fontWeight: '420',
           },
         ],
-        base: [
+        'base': [
           '14px',
           {
             lineHeight: '1.15',
@@ -111,7 +110,7 @@ export default plugin(
             fontWeight: '420',
           },
         ],
-        lg: [
+        'lg': [
           '16px',
           {
             lineHeight: '1.15',
@@ -119,7 +118,7 @@ export default plugin(
             fontWeight: '400',
           },
         ],
-        xl: [
+        'xl': [
           '18px',
           {
             lineHeight: '1.15',
@@ -293,19 +292,19 @@ export default plugin(
               '--tw-prose-pre-bg': 'var(--ink-gray-8)',
               '--tw-prose-th-borders': 'var(--ink-gray-2)',
               '--tw-prose-td-borders': 'var(--ink-gray-1)',
-              h1: {
+              'h1': {
                 fontWeight: 600,
               },
-              h2: {
+              'h2': {
                 fontWeight: 600,
               },
-              h3: {
+              'h3': {
                 fontWeight: 600,
               },
-              h4: {
+              'h4': {
                 fontWeight: 600,
               },
-              h5: {
+              'h5': {
                 fontWeight: 600,
               },
               'h1 strong': {
@@ -335,31 +334,31 @@ export default plugin(
           },
           sm: {
             css: {
-              fontSize: '14px',
-              fontWeight: 420,
-              lineHeight: 1.5,
-              letterSpacing: '0.02em',
-              h1: {
+              'fontSize': '14px',
+              'fontWeight': 420,
+              'lineHeight': 1.5,
+              'letterSpacing': '0.02em',
+              'h1': {
                 fontSize: em(20, 14),
               },
-              h2: {
+              'h2': {
                 fontSize: em(18, 14),
               },
-              h3: {
+              'h3': {
                 fontSize: em(16, 14),
               },
-              h4: {
+              'h4': {
                 fontSize: em(14, 14),
               },
-              h5: {
+              'h5': {
                 fontSize: em(13, 14),
               },
-              p: {
+              'p': {
                 marginTop: '0.5rem',
                 marginBottom: '0.5rem',
               },
               'ul > li': {
-                margin: '0.5rem 0',
+                'margin': '0.5rem 0',
                 '> p': {
                   margin: '0.5rem 0',
                 },
@@ -374,7 +373,7 @@ export default plugin(
                 },
               },
               'ol > li': {
-                margin: '0.5rem 0',
+                'margin': '0.5rem 0',
                 '> p': {
                   margin: '0.5rem 0',
                 },
@@ -393,7 +392,7 @@ export default plugin(
         }),
       },
     },
-  }
+  },
 )
 
 function em(pixels, base = 16) {
diff --git a/tailwind/preset.js b/tailwind/preset.js
index 150e274b8..202bacde3 100644
--- a/tailwind/preset.js
+++ b/tailwind/preset.js
@@ -1,7 +1,8 @@
-import themePlugin from './plugin.js'
 import forms from '@tailwindcss/forms'
 import typography from '@tailwindcss/typography'
 
+import themePlugin from './plugin.js'
+
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: ['selector', '[data-theme="dark"]'],
diff --git a/tailwind/update-tailwind-classes.js b/tailwind/update-tailwind-classes.js
index 6b11e16b6..09eb74ea3 100644
--- a/tailwind/update-tailwind-classes.js
+++ b/tailwind/update-tailwind-classes.js
@@ -1,5 +1,6 @@
 import fs from 'fs'
 import path from 'path'
+
 import colors from './colors.json' assert { type: 'json' }
 
 function generateClassMap() {
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 198a0ac75..e0affd6d3 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -15,6 +15,6 @@
     "noEmit": true,
     "types": ["vitest/globals", "unplugin-icons/types/vue"],
     "declaration": true,
-    "emitDeclarationOnly": true,
+    "emitDeclarationOnly": true
   }
 }
diff --git a/tsconfig.node.json b/tsconfig.node.json
index a41676015..3938fccf7 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -5,10 +5,5 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": [
-    "vite.config.ts",
-    "vitest.config.ts",
-    "vitest.setup.ts",
-    "src/mocks/**/*"
-  ]
+  "include": ["vite.config.ts", "vitest.config.ts", "vitest.setup.ts", "src/mocks/**/*"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 14fa27f3d..19f9f06cb 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,8 @@
 import path from 'path'
-import { defineConfig } from 'vite'
+
 import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+
 import { lucideIcons } from './vite/lucideIcons'
 
 // https://vitejs.dev/config/
diff --git a/vite/README.md b/vite/README.md
index 4eb2ccb2c..1082ccde3 100644
--- a/vite/README.md
+++ b/vite/README.md
@@ -73,10 +73,10 @@ instance.
 - Proxies routes like `/api`, `/app`, `/assets`, `/files`, etc.
 - Auto-detects the Frappe port from `common_site_config.json`
 
-| Option   | Description                                    | Default                                          |
-| -------- | ---------------------------------------------- | ------------------------------------------------ |
-| `port`   | Vite dev server port                           | Auto-calculated from `webserver_port`            |
-| `source` | Regex for routes to proxy                      | `'^/(app\|login\|api\|assets\|files\|private)'`  |
+| Option   | Description               | Default                                         |
+| -------- | ------------------------- | ----------------------------------------------- |
+| `port`   | Vite dev server port      | Auto-calculated from `webserver_port`           |
+| `source` | Regex for routes to proxy | `'^/(app\|login\|api\|assets\|files\|private)'` |
 
 ```javascript
 frappeui({
@@ -111,10 +111,10 @@ import LucideArrowRight from '~icons/lucide/arrow-right'
 Auto-generates TypeScript interfaces from Frappe DocType JSON files. Interfaces
 are regenerated only when the source DocType changes.
 
-| Option   | Description                                | Default                  |
-| -------- | ------------------------------------------ | ------------------------ |
-| `input`  | Map of `app_name` → array of doctype names | *(required)*             |
-| `output` | Output file path for generated types       | `src/types/doctypes.ts`  |
+| Option   | Description                                | Default                 |
+| -------- | ------------------------------------------ | ----------------------- |
+| `input`  | Map of `app_name` → array of doctype names | _(required)_            |
+| `output` | Output file path for generated types       | `src/types/doctypes.ts` |
 
 ```javascript
 frappeui({
@@ -166,13 +166,13 @@ directory structure.
 - Sets correct base URLs for Frappe's asset serving
 - Copies the built `index.html` to the specified location (typically in `www/`)
 
-| Option          | Description                          | Default                                   |
-| --------------- | ------------------------------------ | ----------------------------------------- |
-| `outDir`        | Build output directory               | `'../app_name/public/frontend'` (auto)    |
-| `baseUrl`       | Base URL for assets                  | `'/assets/app_name/frontend/'` (auto)     |
-| `indexHtmlPath` | Where to copy built `index.html`     | Inferred from `frontendRoute`             |
-| `emptyOutDir`   | Clear output directory before build  | `true`                                    |
-| `sourcemap`     | Generate source maps                 | `true`                                    |
+| Option          | Description                         | Default                                |
+| --------------- | ----------------------------------- | -------------------------------------- |
+| `outDir`        | Build output directory              | `'../app_name/public/frontend'` (auto) |
+| `baseUrl`       | Base URL for assets                 | `'/assets/app_name/frontend/'` (auto)  |
+| `indexHtmlPath` | Where to copy built `index.html`    | Inferred from `frontendRoute`          |
+| `emptyOutDir`   | Clear output directory before build | `true`                                 |
+| `sourcemap`     | Generate source maps                | `true`                                 |
 
 ```javascript
 frappeui({
diff --git a/vite/buildConfig.js b/vite/buildConfig.js
index 147a0c035..582ca381b 100644
--- a/vite/buildConfig.js
+++ b/vite/buildConfig.js
@@ -1,5 +1,6 @@
-import path from 'path'
 import fs from 'fs'
+import path from 'path'
+
 import { findAppName } from './utils.js'
 
 export function buildConfig(options = {}) {
@@ -78,10 +79,7 @@ export function buildConfig(options = {}) {
             )
           }
         } catch (error) {
-          console.error(
-            '[frappeui-build-config-plugin] Error copying index.html:',
-            error,
-          )
+          console.error('[frappeui-build-config-plugin] Error copying index.html:', error)
         }
       }
     },
@@ -127,10 +125,7 @@ function getBaseUrl(outputDir) {
     // fallback
     return '/'
   } catch (error) {
-    console.error(
-      '[frappeui-build-config-plugin] Error calculating base URL:',
-      error,
-    )
+    console.error('[frappeui-build-config-plugin] Error calculating base URL:', error)
     // fallback on error
     return '/'
   }
@@ -162,10 +157,7 @@ function findAppDir() {
       }
     }
   } catch (error) {
-    console.error(
-      '[frappeui-build-config-plugin] Error finding app directory:',
-      error,
-    )
+    console.error('[frappeui-build-config-plugin] Error finding app directory:', error)
   }
 
   return null
diff --git a/vite/doctypeInterfaceGenerator.js b/vite/doctypeInterfaceGenerator.js
index d0e31b92d..83a9da6ba 100644
--- a/vite/doctypeInterfaceGenerator.js
+++ b/vite/doctypeInterfaceGenerator.js
@@ -34,10 +34,9 @@ export class DocTypeInterfaceGenerator {
 
     if (this.updatedInterfaces > 0) {
       const baseInterfaces = this.generateBaseInterfaces()
-      const interfacesString = [
-        baseInterfaces,
-        ...Object.values(this.existingInterfaces),
-      ].join('\n')
+      const interfacesString = [baseInterfaces, ...Object.values(this.existingInterfaces)].join(
+        '\n',
+      )
 
       await fs.mkdir(path.dirname(this.outputPath), { recursive: true })
       await fs.writeFile(this.outputPath, interfacesString)
@@ -102,10 +101,7 @@ export class DocTypeInterfaceGenerator {
 
     const interfaceName = jsonData.name.replace(/\s+/g, '')
     const existingInterface = this.existingInterfaces[interfaceName]
-    if (
-      existingInterface &&
-      existingInterface.includes(`// Last updated: ${lastModified}`)
-    ) {
+    if (existingInterface && existingInterface.includes(`// Last updated: ${lastModified}`)) {
       this.summary.skipped++
       this.summary.details.push(`${doctypeName}: skipped (no changes)`)
       return
@@ -114,25 +110,25 @@ export class DocTypeInterfaceGenerator {
     const fields = jsonData.fields
 
     const typeMapping = {
-      Data: 'string',
+      'Data': 'string',
       'Text Editor': 'string',
-      Link: 'string',
-      Table: 'any[]',
+      'Link': 'string',
+      'Table': 'any[]',
       'Table MultiSelect': 'any[]',
-      Percent: 'number',
-      Int: 'number',
-      Float: 'number',
-      Datetime: 'string', // "YYYY-MM-DD HH:MM:SS"
-      Date: 'string', // "YYYY-MM-DD"
-      Check: '0 | 1',
+      'Percent': 'number',
+      'Int': 'number',
+      'Float': 'number',
+      'Datetime': 'string', // "YYYY-MM-DD HH:MM:SS"
+      'Date': 'string', // "YYYY-MM-DD"
+      'Check': '0 | 1',
       'Attach Image': 'string',
       'Dynamic Link': 'string',
       'Small Text': 'string',
-      Color: 'string',
-      Text: 'string',
-      Autocomplete: 'string',
-      Password: 'string',
-      Code: 'string',
+      'Color': 'string',
+      'Text': 'string',
+      'Autocomplete': 'string',
+      'Password': 'string',
+      'Code': 'string',
       'Read Only': 'string',
     }
 
@@ -140,13 +136,7 @@ export class DocTypeInterfaceGenerator {
 
     for (const field of fields) {
       if (
-        [
-          'Section Break',
-          'Column Break',
-          'Tab Break',
-          'HTML',
-          'Button',
-        ].includes(field.fieldtype)
+        ['Section Break', 'Column Break', 'Tab Break', 'HTML', 'Button'].includes(field.fieldtype)
       ) {
         continue
       }
@@ -157,32 +147,21 @@ export class DocTypeInterfaceGenerator {
           .map((option) => `'${option}'`)
           .join(' | ')
         tsType = options
-      } else if (
-        ['Table', 'Table MultiSelect'].includes(field.fieldtype) &&
-        field.options
-      ) {
+      } else if (['Table', 'Table MultiSelect'].includes(field.fieldtype) && field.options) {
         const relatedDoctype = field.options
         tsType = `${relatedDoctype.replace(/\s+/g, '')}[]`
-        await this.processDoctype(
-          appName,
-          relatedDoctype.toLowerCase().replace(/ /g, '_'),
-        )
+        await this.processDoctype(appName, relatedDoctype.toLowerCase().replace(/ /g, '_'))
       }
       let description = `/** ${field.label}: ${field.fieldtype}`
       if (
-        ['Table', 'Table MultiSelect', 'Link', 'Dynamic Link'].includes(
-          field.fieldtype,
-        ) &&
+        ['Table', 'Table MultiSelect', 'Link', 'Dynamic Link'].includes(field.fieldtype) &&
         field.options
       ) {
         description += ` (${field.options})`
       }
       description += ' */'
       let optional =
-        field.reqd ||
-        ['Check', 'Table', 'Table MultiSelect'].includes(field.fieldtype)
-          ? ''
-          : '?'
+        field.reqd || ['Check', 'Table', 'Table MultiSelect'].includes(field.fieldtype) ? '' : '?'
       interfaceString += `  ${description}\n  ${field.fieldname}${optional}: ${tsType};\n`
     }
 
@@ -199,11 +178,7 @@ export class DocTypeInterfaceGenerator {
       return this.jsonFileCache.get(cacheKey)
     }
 
-    const targetPattern = path.join(
-      'doctype',
-      doctypeName,
-      `${doctypeName}.json`,
-    )
+    const targetPattern = path.join('doctype', doctypeName, `${doctypeName}.json`)
     let foundPath = null
 
     const searchDirectory = async (directory) => {
diff --git a/vite/frappeProxy.js b/vite/frappeProxy.js
index abe221d7a..d0e190013 100644
--- a/vite/frappeProxy.js
+++ b/vite/frappeProxy.js
@@ -1,14 +1,10 @@
 import { getCommonSiteConfig } from './utils.js'
 
-export function frappeProxy({
-  port,
-  source = '^/(desk|app|login|api|assets|files|private)',
-} = {}) {
+export function frappeProxy({ port, source = '^/(desk|app|login|api|assets|files|private)' } = {}) {
   const commonSiteConfig = getCommonSiteConfig()
   const env_web_server_port = process.env.FRAPPE_WEB_SERVER_PORT
   const webserver_port =
-    env_web_server_port ||
-    (commonSiteConfig ? commonSiteConfig.webserver_port : 8000)
+    env_web_server_port || (commonSiteConfig ? commonSiteConfig.webserver_port : 8000)
 
   // Calculate Vite dev server port based on webserver port
   // If webserver_port is 8000, vite port is 8080
@@ -21,9 +17,7 @@ export function frappeProxy({
   }
 
   if (env_web_server_port) {
-    console.log(
-      `Using web server port from environment: ${env_web_server_port}`,
-    )
+    console.log(`Using web server port from environment: ${env_web_server_port}`)
   }
 
   if (!commonSiteConfig) {
diff --git a/vite/frappeTypes.js b/vite/frappeTypes.js
index 2beba8462..ef8b76485 100644
--- a/vite/frappeTypes.js
+++ b/vite/frappeTypes.js
@@ -1,5 +1,5 @@
-import path from 'path'
 import { spawn } from 'child_process'
+import path from 'path'
 import { fileURLToPath } from 'url'
 
 // Get __dirname equivalent in ES modules
diff --git a/vite/generateTypes.js b/vite/generateTypes.js
index 85c419fab..ff46d1fa8 100644
--- a/vite/generateTypes.js
+++ b/vite/generateTypes.js
@@ -1,7 +1,8 @@
 import path from 'path'
 import { fileURLToPath } from 'url'
-import { findAppsFolder } from './utils.js'
+
 import { DocTypeInterfaceGenerator } from './doctypeInterfaceGenerator.js'
+import { findAppsFolder } from './utils.js'
 
 // Handle termination signals to exit cleanly
 process.on('SIGINT', () => process.exit(0))
@@ -37,11 +38,7 @@ async function main() {
       return
     }
 
-    const generator = new DocTypeInterfaceGenerator(
-      appsFolder,
-      options.input,
-      outputPath,
-    )
+    const generator = new DocTypeInterfaceGenerator(appsFolder, options.input, outputPath)
     await generator.generate()
   } catch (error) {
     console.error('Error generating DocType interfaces:', error)
diff --git a/vite/index.js b/vite/index.js
index f490e6673..9ece22656 100644
--- a/vite/index.js
+++ b/vite/index.js
@@ -1,8 +1,8 @@
-import { lucideIcons } from './lucideIcons.js'
+import { buildConfig } from './buildConfig.js'
 import { frappeProxy } from './frappeProxy.js'
 import { frappeTypes } from './frappeTypes.js'
 import { jinjaBootData } from './jinjaBootData.js'
-import { buildConfig } from './buildConfig.js'
+import { lucideIcons } from './lucideIcons.js'
 import { siteBanner } from './siteBanner.js'
 
 function frappeuiPlugin(options = {}) {
diff --git a/vite/lucideIcons.js b/vite/lucideIcons.js
index 7abefb33e..6b2503c1d 100644
--- a/vite/lucideIcons.js
+++ b/vite/lucideIcons.js
@@ -1,7 +1,7 @@
 import * as LucideIcons from 'lucide-static'
 import AutoImport from 'unplugin-auto-import/vite'
-import Components from 'unplugin-vue-components/vite'
 import IconsResolver from 'unplugin-icons/resolver'
+import Components from 'unplugin-vue-components/vite'
 
 const VIRTUAL_PREFIX = '~icons/lucide/'
 const RESOLVED_PREFIX = '\0~icons/lucide/'
@@ -16,11 +16,7 @@ export function lucideIcons() {
     ],
   }
   const icons = getIcons()
-  return [
-    AutoImport(resolverObj),
-    Components(resolverObj),
-    LucideIconsPlugin(icons),
-  ]
+  return [AutoImport(resolverObj), Components(resolverObj), LucideIconsPlugin(icons)]
 }
 
 function LucideIconsPlugin(icons) {
diff --git a/vite/siteBanner.js b/vite/siteBanner.js
index 48ba9bafb..5f76631e9 100644
--- a/vite/siteBanner.js
+++ b/vite/siteBanner.js
@@ -31,9 +31,7 @@ export function siteBanner({ frontendRoute } = {}) {
           }
         } catch (error) {
           const message = error instanceof Error ? error.message : String(error)
-          console.warn(
-            `Failed to list installed sites for ${appName}: ${message}`,
-          )
+          console.warn(`Failed to list installed sites for ${appName}: ${message}`)
         }
       })
     },
diff --git a/vite/utils.js b/vite/utils.js
index 7fd8a541f..8b49c8097 100644
--- a/vite/utils.js
+++ b/vite/utils.js
@@ -1,5 +1,5 @@
-import path from 'path'
 import fs from 'fs'
+import path from 'path'
 
 export function getConfig() {
   let configPath = path.join(process.cwd(), 'frappeui.json')
@@ -93,10 +93,7 @@ export async function getInstalledAppSites(appName) {
       stdout
         .split('\n')
         .map((line) => line.trim())
-        .filter(
-          (line) =>
-            Boolean(line) && sitePattern.test(line) && line.includes('.'),
-        ),
+        .filter((line) => Boolean(line) && sitePattern.test(line) && line.includes('.')),
     ),
   )
 }
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 57b0a1e1c..28f7a1a86 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1,6 +1,7 @@
-import { server } from './src/mocks/node'
 import { beforeAll, afterEach, afterAll } from 'vitest'
 
+import { server } from './src/mocks/node'
+
 beforeAll(() => {
   server.listen()
 })
diff --git a/yarn.lock b/yarn.lock
index 312f8bd2a..e2e8af4dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -793,6 +793,196 @@
   resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-2.1.0.tgz#0acf32f470af2ceaf47f095cdecd40d68666efda"
   integrity sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==
 
+"@oxfmt/binding-android-arm-eabi@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-android-arm-eabi/-/binding-android-arm-eabi-0.44.0.tgz#5974105a730c44c7404ef163c5b8b686682fa06d"
+  integrity sha512-5UvghMd9SA/yvKTWCAxMAPXS1d2i054UeOf4iFjZjfayTwCINcC3oaSXjtbZfCaEpxgJod7XiOjTtby5yEv/BQ==
+
+"@oxfmt/binding-android-arm64@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-android-arm64/-/binding-android-arm64-0.44.0.tgz#77f553e42571b99cae390baadc237a84207178bd"
+  integrity sha512-IVudM1BWfvrYO++Khtzr8q9n5Rxu7msUvoFMqzGJVdX7HfUXUDHwaH2zHZNB58svx2J56pmCUzophyaPFkcG/A==
+
+"@oxfmt/binding-darwin-arm64@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-darwin-arm64/-/binding-darwin-arm64-0.44.0.tgz#a43262f59aa8da667db53ba3d454ef1afcef3e18"
+  integrity sha512-eWCLAIKAHfx88EqEP1Ga2yz7qVcqDU5lemn4xck+07bH182hDdprOHjbogyk0In1Djys3T0/pO2JepFnRJ41Mg==
+
+"@oxfmt/binding-darwin-x64@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-darwin-x64/-/binding-darwin-x64-0.44.0.tgz#cd95251cfc545f26a6ee7e664d5bd6df71b4f567"
+  integrity sha512-eHTBznHLM49++dwz07MblQ2cOXyIgeedmE3Wgy4ptUESj38/qYZyRi1MPwC9olQJWssMeY6WI3UZ7YmU5ggvyQ==
+
+"@oxfmt/binding-freebsd-x64@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-freebsd-x64/-/binding-freebsd-x64-0.44.0.tgz#eb3234a5a3c63346d134c3823cc763e01924be01"
+  integrity sha512-jLMmbj0u0Ft43QpkUVr/0v1ZfQCGWAvU+WznEHcN3wZC/q6ox7XeSJtk9P36CCpiDSUf3sGnzbIuG1KdEMEDJQ==
+
+"@oxfmt/binding-linux-arm-gnueabihf@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.44.0.tgz#b939bc27eb8be72c7e689b9307ed6086dc683059"
+  integrity sha512-n+A/u/ByK1qV8FVGOwyaSpw5NPNl0qlZfgTBqHeGIqr8Qzq1tyWZ4lAaxPoe5mZqE3w88vn3+jZtMxriHPE7tg==
+
+"@oxfmt/binding-linux-arm-musleabihf@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.44.0.tgz#0725a2d091643a00bbacdffaa12e377abf32606c"
+  integrity sha512-5eax+FkxyCqAi3Rw0mrZFr7+KTt/XweFsbALR+B5ljWBLBl8nHe4ADrUnb1gLEfQCJLl+Ca5FIVD4xEt95AwIw==
+
+"@oxfmt/binding-linux-arm64-gnu@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.44.0.tgz#416e68d5e536fa19ca8499611fca9928cc2ee9d4"
+  integrity sha512-58l8JaHxSGOmOMOG2CIrNsnkRJAj0YcHQCmvNACniOa/vd1iRHhlPajczegzS5jwMENlqgreyiTR9iNlke8qCw==
+
+"@oxfmt/binding-linux-arm64-musl@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.44.0.tgz#8bb3bd2461b354caa443d093471b347547426e8a"
+  integrity sha512-AlObQIXyVRZ96LbtVljtFq0JqH5B92NU+BQeDFrXWBUWlCKAM0wF5GLfIhCLT5kQ3Sl+U0YjRJ7Alqj5hGQaCg==
+
+"@oxfmt/binding-linux-ppc64-gnu@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-0.44.0.tgz#427a2278fa9aff179d2c66dce29dabe78f907474"
+  integrity sha512-YcFE8/q/BbrCiIiM5piwbkA6GwJc5QqhMQp2yDrqQ2fuVkZ7CInb1aIijZ/k8EXc72qXMSwKpVlBv1w/MsGO/A==
+
+"@oxfmt/binding-linux-riscv64-gnu@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.44.0.tgz#587c4381de6e30d9302ddc4b3f40b0cd7af209ee"
+  integrity sha512-eOdzs6RqkRzuqNHUX5C8ISN5xfGh4xDww8OEd9YAmc3OWN8oAe5bmlIqQ+rrHLpv58/0BuU48bxkhnIGjA/ATQ==
+
+"@oxfmt/binding-linux-riscv64-musl@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-0.44.0.tgz#c9e41aa68ebad6966642ef4df4fac17cdd67fa34"
+  integrity sha512-YBgNTxntD/QvlFUfgvh8bEdwOhXiquX8gaofZJAwYa/Xp1S1DQrFVZEeck7GFktr24DztsSp8N8WtWCBwxs0Hw==
+
+"@oxfmt/binding-linux-s390x-gnu@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.44.0.tgz#c04ffde3e1e2703704fcdf3875ba08b0c2881334"
+  integrity sha512-GLIh1R6WHWshl/i4QQDNgj0WtT25aRO4HNUWEoitxiywyRdhTFmFEYT2rXlcl9U6/26vhmOqG5cRlMLG3ocaIA==
+
+"@oxfmt/binding-linux-x64-gnu@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.44.0.tgz#b3109a3c8bebb42612d3c684c251d2cdd614c94e"
+  integrity sha512-gZOpgTlOsLcLfAF9qgpTr7FIIFSKnQN3hDf/0JvQ4CIwMY7h+eilNjxq/CorqvYcEOu+LRt1W4ZS7KccEHLOdA==
+
+"@oxfmt/binding-linux-x64-musl@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-x64-musl/-/binding-linux-x64-musl-0.44.0.tgz#26a3c17c0bb4d171cd582986cddbad188ff9534d"
+  integrity sha512-1CyS9JTB+pCUFYFI6pkQGGZaT/AY5gnhHVrQQLhFba6idP9AzVYm1xbdWfywoldTYvjxQJV6x4SuduCIfP3W+A==
+
+"@oxfmt/binding-openharmony-arm64@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-openharmony-arm64/-/binding-openharmony-arm64-0.44.0.tgz#2702d7cfc86821e55878c2bffba5f75430d5107a"
+  integrity sha512-bmEv70Ak6jLr1xotCbF5TxIKjsmQaiX+jFRtnGtfA03tJPf6VG3cKh96S21boAt3JZc+Vjx8PYcDuLj39vM2Pw==
+
+"@oxfmt/binding-win32-arm64-msvc@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.44.0.tgz#c0ebbde2b30452d0d36adaa2cb566ab6c31849f0"
+  integrity sha512-yWzB+oCpSnP/dmw85eFLAT5o35Ve5pkGS2uF/UCISpIwDqf1xa7OpmtomiqY/Vzg8VyvMbuf6vroF2khF/+1Vg==
+
+"@oxfmt/binding-win32-ia32-msvc@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-0.44.0.tgz#b6cba86c0f87a95648a10ef3482aa1a1c1d18de9"
+  integrity sha512-TcWpo18xEIE3AmIG2kpr3kz5IEhQgnx0lazl2+8L+3eTopOAUevQcmlr4nhguImNWz0OMeOZrYZOhJNCf16nlQ==
+
+"@oxfmt/binding-win32-x64-msvc@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.44.0.tgz#61ce119e828b46e2c89254f05529a8c2f7ee25f1"
+  integrity sha512-oj8aLkPJZppIM4CMQNsyir9ybM1Xw/CfGPTSsTnzpVGyljgfbdP0EVUlURiGM0BDrmw5psQ6ArmGCcUY/yABaQ==
+
+"@oxlint/binding-android-arm-eabi@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-android-arm-eabi/-/binding-android-arm-eabi-1.59.0.tgz#d16603910761e22b7346b10e1293fd22c9051020"
+  integrity sha512-etYDw/UaEv936AQUd/CRMBVd+e+XuuU6wC+VzOv1STvsTyZenLChepLWqLtnyTTp4YMlM22ypzogDDwqYxv5cg==
+
+"@oxlint/binding-android-arm64@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-android-arm64/-/binding-android-arm64-1.59.0.tgz#a54b26068fcaf6ab7f6cae9d84f0c3d7e29d3c9c"
+  integrity sha512-TgLc7XVLKH2a4h8j3vn1MDjfK33i9MY60f/bKhRGWyVzbk5LCZ4X01VZG7iHrMmi5vYbAp8//Ponigx03CLsdw==
+
+"@oxlint/binding-darwin-arm64@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-darwin-arm64/-/binding-darwin-arm64-1.59.0.tgz#097fecd40271af5882fadcdb6ea904973c642e97"
+  integrity sha512-DXyFPf5ZKldMLloRHx/B9fsxsiTQomaw7cmEW3YIJko2HgCh+GUhp9gGYwHrqlLJPsEe3dYj9JebjX92D3j3AA==
+
+"@oxlint/binding-darwin-x64@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-darwin-x64/-/binding-darwin-x64-1.59.0.tgz#b7b3a898406c9c05a44647b43a2e3f646dfcc2bc"
+  integrity sha512-LgvrsdgVLX1qWqIEmNsSmMXJhpAWdtUQ0M+oR0CySwi+9IHWyOGuIL8w8+u/kbZNMyZr4WUyYB5i0+D+AKgkLg==
+
+"@oxlint/binding-freebsd-x64@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-freebsd-x64/-/binding-freebsd-x64-1.59.0.tgz#e7a513e5d06d9f0df18d75bd2ed0466420e5078f"
+  integrity sha512-bOJhqX/ny4hrFuTPlyk8foSRx/vLRpxJh0jOOKN2NWW6FScXHPAA5rQbrwdQPcgGB5V8Ua51RS03fke8ssBcug==
+
+"@oxlint/binding-linux-arm-gnueabihf@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.59.0.tgz#38d0d20b3fd6b25672a34328125e99c45fff39d1"
+  integrity sha512-vVUXxYMF9trXCsz4m9H6U0IjehosVHxBzVgJUxly1uz4W1PdDyicaBnpC0KRXsHYretLVe+uS9pJy8iM57Kujw==
+
+"@oxlint/binding-linux-arm-musleabihf@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-1.59.0.tgz#76b57f78729d4854458886b68cedfb776586356b"
+  integrity sha512-TULQW8YBPGRWg5yZpFPL54HLOnJ3/HiX6VenDPi6YfxB/jlItwSMFh3/hCeSNbh+DAMaE1Py0j5MOaivHkI/9Q==
+
+"@oxlint/binding-linux-arm64-gnu@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.59.0.tgz#64ab5de73c894265726c83cc7e431ba924436e2a"
+  integrity sha512-Gt54Y4eqSgYJ90xipm24xeyaPV854706o/kiT8oZvUt3VDY7qqxdqyGqchMaujd87ib+/MXvnl9WkK8Cc1BExg==
+
+"@oxlint/binding-linux-arm64-musl@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.59.0.tgz#d6bc4914a8d80125e06b61891c125aa1acf326a7"
+  integrity sha512-3CtsKp7NFB3OfqQzbuAecrY7GIZeiv7AD+xutU4tefVQzlfmTI7/ygWLrvkzsDEjTlMq41rYHxgsn6Yh8tybmA==
+
+"@oxlint/binding-linux-ppc64-gnu@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.59.0.tgz#c999194b32e6fc75709d451070bf56720af6d537"
+  integrity sha512-K0diOpT3ncDmOfl9I1HuvpEsAuTxkts0VYwIv/w6Xiy9CdwyPBVX88Ga9l8VlGgMrwBMnSY4xIvVlVY/fkQk7Q==
+
+"@oxlint/binding-linux-riscv64-gnu@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-1.59.0.tgz#d85938028f4c4666fe299bbc3c87cceae907fd2b"
+  integrity sha512-xAU7+QDU6kTJJ7mJLOGgo7oOjtAtkKyFZ0Yjdb5cEo3DiCCPFLvyr08rWiQh6evZ7RiUTf+o65NY/bqttzJiQQ==
+
+"@oxlint/binding-linux-riscv64-musl@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-1.59.0.tgz#9225a568a0138fe0f252785cfffe86d2b35d2e92"
+  integrity sha512-KUmZmKlTTyauOnvUNVxK7G40sSSx0+w5l1UhaGsC6KPpOYHenx2oqJTnabmpLJicok7IC+3Y6fXAUOMyexaeJQ==
+
+"@oxlint/binding-linux-s390x-gnu@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.59.0.tgz#75dc546c7c92f3a2c52885ffe5031810bea2f759"
+  integrity sha512-4usRxC8gS0PGdkHnRmwJt/4zrQNZyk6vL0trCxwZSsAKM+OxhB8nKiR+mhjdBbl8lbMh2gc3bZpNN/ik8c4c2A==
+
+"@oxlint/binding-linux-x64-gnu@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.59.0.tgz#aee13be2b05d1ec9859b00693f7729c0438370f8"
+  integrity sha512-s/rNE2gDmbwAOOP493xk2X7M8LZfI1LJFSSW1+yanz3vuQCFPiHkx4GY+O1HuLUDtkzGlhtMrIcxxzyYLv308w==
+
+"@oxlint/binding-linux-x64-musl@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-x64-musl/-/binding-linux-x64-musl-1.59.0.tgz#0a068ef0041332b1cd08132ba0ce70b86c271991"
+  integrity sha512-+yYj1udJa2UvvIUmEm0IcKgc0UlPMgz0nsSTvkPL2y6n0uU5LgIHSwVu4AHhrve6j9BpVSoRksnz8c9QcvITJA==
+
+"@oxlint/binding-openharmony-arm64@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-openharmony-arm64/-/binding-openharmony-arm64-1.59.0.tgz#cc7cdce8aeebcee2d5e8e7fac3d3712d012df77f"
+  integrity sha512-bUplUb48LYsB3hHlQXP2ZMOenpieWoOyppLAnnAhuPag3MGPnt+7caxE3w/Vl9wpQsTA3gzLntQi9rxWrs7Xqg==
+
+"@oxlint/binding-win32-arm64-msvc@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.59.0.tgz#6fe74088bac2c9a560aba8475071e5ff4e8be9ba"
+  integrity sha512-/HLsLuz42rWl7h7ePdmMTpHm2HIDmPtcEMYgm5BBEHiEiuNOrzMaUpd2z7UnNni5LGN9obJy2YoAYBLXQwazrA==
+
+"@oxlint/binding-win32-ia32-msvc@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.59.0.tgz#9223a0a4ffa47fd9c0e56e8cf7933253abd93688"
+  integrity sha512-rUPy+JnanpPwV/aJCPnxAD1fW50+XPI0VkWr7f0vEbqcdsS8NpB24Rw6RsS7SdpFv8Dw+8ugCwao5nCFbqOUSg==
+
+"@oxlint/binding-win32-x64-msvc@1.59.0":
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.59.0.tgz#e2d94ab9567a2c1302e15ef927a7363675b740ba"
+  integrity sha512-xkE7puteDS/vUyRngLXW0t8WgdWoS/tfxXjhP/P7SMqPDx+hs44SpssO3h3qmTqECYEuXBUPzcAw5257Ka+ofA==
+
 "@popperjs/core@^2.11.2", "@popperjs/core@^2.9.0":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
@@ -4434,6 +4624,58 @@ outvariant@^1.4.0, outvariant@^1.4.3:
   resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.3.tgz#221c1bfc093e8fec7075497e7799fdbf43d14873"
   integrity sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==
 
+oxfmt@^0.44.0:
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/oxfmt/-/oxfmt-0.44.0.tgz#36ba90ef3fc958d37e01d38a3024c3f3dc0ff055"
+  integrity sha512-lnncqvHewyRvaqdrnntVIrZV2tEddz8lbvPsQzG/zlkfvgZkwy0HP1p/2u1aCDToeg1jb9zBpbJdfkV73Itw+w==
+  dependencies:
+    tinypool "2.1.0"
+  optionalDependencies:
+    "@oxfmt/binding-android-arm-eabi" "0.44.0"
+    "@oxfmt/binding-android-arm64" "0.44.0"
+    "@oxfmt/binding-darwin-arm64" "0.44.0"
+    "@oxfmt/binding-darwin-x64" "0.44.0"
+    "@oxfmt/binding-freebsd-x64" "0.44.0"
+    "@oxfmt/binding-linux-arm-gnueabihf" "0.44.0"
+    "@oxfmt/binding-linux-arm-musleabihf" "0.44.0"
+    "@oxfmt/binding-linux-arm64-gnu" "0.44.0"
+    "@oxfmt/binding-linux-arm64-musl" "0.44.0"
+    "@oxfmt/binding-linux-ppc64-gnu" "0.44.0"
+    "@oxfmt/binding-linux-riscv64-gnu" "0.44.0"
+    "@oxfmt/binding-linux-riscv64-musl" "0.44.0"
+    "@oxfmt/binding-linux-s390x-gnu" "0.44.0"
+    "@oxfmt/binding-linux-x64-gnu" "0.44.0"
+    "@oxfmt/binding-linux-x64-musl" "0.44.0"
+    "@oxfmt/binding-openharmony-arm64" "0.44.0"
+    "@oxfmt/binding-win32-arm64-msvc" "0.44.0"
+    "@oxfmt/binding-win32-ia32-msvc" "0.44.0"
+    "@oxfmt/binding-win32-x64-msvc" "0.44.0"
+
+oxlint@^1.59.0:
+  version "1.59.0"
+  resolved "https://registry.yarnpkg.com/oxlint/-/oxlint-1.59.0.tgz#7bc0b9abe87b96ed7d640f90cb0956b9558f3b96"
+  integrity sha512-0xBLeGGjP4vD9pygRo8iuOkOzEU1MqOnfiOl7KYezL/QvWL8NUg6n03zXc7ZVqltiOpUxBk2zgHI3PnRIEdAvw==
+  optionalDependencies:
+    "@oxlint/binding-android-arm-eabi" "1.59.0"
+    "@oxlint/binding-android-arm64" "1.59.0"
+    "@oxlint/binding-darwin-arm64" "1.59.0"
+    "@oxlint/binding-darwin-x64" "1.59.0"
+    "@oxlint/binding-freebsd-x64" "1.59.0"
+    "@oxlint/binding-linux-arm-gnueabihf" "1.59.0"
+    "@oxlint/binding-linux-arm-musleabihf" "1.59.0"
+    "@oxlint/binding-linux-arm64-gnu" "1.59.0"
+    "@oxlint/binding-linux-arm64-musl" "1.59.0"
+    "@oxlint/binding-linux-ppc64-gnu" "1.59.0"
+    "@oxlint/binding-linux-riscv64-gnu" "1.59.0"
+    "@oxlint/binding-linux-riscv64-musl" "1.59.0"
+    "@oxlint/binding-linux-s390x-gnu" "1.59.0"
+    "@oxlint/binding-linux-x64-gnu" "1.59.0"
+    "@oxlint/binding-linux-x64-musl" "1.59.0"
+    "@oxlint/binding-openharmony-arm64" "1.59.0"
+    "@oxlint/binding-win32-arm64-msvc" "1.59.0"
+    "@oxlint/binding-win32-ia32-msvc" "1.59.0"
+    "@oxlint/binding-win32-x64-msvc" "1.59.0"
+
 p-map@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
@@ -5650,6 +5892,11 @@ tinyglobby@^0.2.0, tinyglobby@^0.2.11, tinyglobby@^0.2.12, tinyglobby@^0.2.13, t
     fdir "^6.5.0"
     picomatch "^4.0.3"
 
+tinypool@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-2.1.0.tgz#303a671d6ef68d03c9512cdc9a47c86b8a85f20c"
+  integrity sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==
+
 tinypool@^1.0.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-1.1.1.tgz#059f2d042bd37567fbc017d3d426bdd2a2612591"