diff --git a/README.md b/README.md
index 054f28c5..9dc0e298 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,6 @@
 
 RSSA - Front End
 
-
 > [!IMPORTANT]
 > Read this following instructions before doing your job
 
@@ -65,22 +64,22 @@ The basic development workflow follows these steps:
 ## Code Conventions
 
 - Under the script setup block, putting things in group with the following order:
-   - Imports → all dependencies, sorted by external, alias (~), and relative imports.
-   - Props & Emits → clearly define component inputs & outputs.
-   - State & Computed → all ref, reactive, and computed variables grouped together.
-   - Lifecycle Hooks → grouped by mounting → updating → unmounting order.
-   - Functions → async first (fetching, API calls), then utility & event handlers.
-   - Watchers → if needed, put them at the bottom.
-   - Template → keep clean and minimal logic, use methods/computed instead of inline JS.
+  - Imports → all dependencies, sorted by external, alias (~), and relative imports.
+  - Props & Emits → clearly define component inputs & outputs.
+  - State & Computed → all ref, reactive, and computed variables grouped together.
+  - Lifecycle Hooks → grouped by mounting → updating → unmounting order.
+  - Functions → async first (fetching, API calls), then utility & event handlers.
+  - Watchers → if needed, put them at the bottom.
+  - Template → keep clean and minimal logic, use methods/computed instead of inline JS.
 - Declaration Naming
-   - Uses PascalCase for `type` naming
-   - Uses camelCase for `variable` and `const` naming
-   - Underscore can be used to indicates that a variable has derived from an attribute of an object<br />
-      for example: `person_name` indicates it is an attribute `name` from object `person`
+  - Uses PascalCase for `type` naming
+  - Uses camelCase for `variable` and `const` naming
+  - Underscore can be used to indicates that a variable has derived from an attribute of an object<br />
+    for example: `person_name` indicates it is an attribute `name` from object `person`
 - Looping
-   - Uses `i`, `j`, `k` as variable for `for` looping index
-   - Uses `item` as object instantition for `forEach` loop callback
-   - Uses `item` as object instantition for `v-for` loop callback in the template
+  - Uses `i`, `j`, `k` as variable for `for` looping index
+  - Uses `item` as object instantition for `forEach` loop callback
+  - Uses `item` as object instantition for `v-for` loop callback in the template
 
 ## Git Workflows
 
diff --git a/app/components/app/patient/entry-form.vue b/app/components/app/patient/entry-form.vue
index 0b636bcf..5768c6a0 100644
--- a/app/components/app/patient/entry-form.vue
+++ b/app/components/app/patient/entry-form.vue
@@ -13,22 +13,32 @@ import Label from '~/components/pub/form/label.vue'
     </div>
 
     <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div>
-        <Block>
-          <FieldGroup :column="2">
-            <Label>Nama</Label>
-            <Field name="name">
-              <Input type="text" name="name" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Nomor RM</Label>
-            <Field name="name">
-              <Input type="text" name="name" />
-            </Field>
-          </FieldGroup>
-        </Block>
-      </div>
+      <Block>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nomor RM</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup>
+          <Label dynamic>Alamat</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+      </Block>
     </div>
     <div class="my-2 flex justify-end py-2">
       <PubNavFooterCsd />
diff --git a/app/components/app/patient/list-cfg.ts b/app/components/app/patient/list-cfg.ts
index c1131bec..0e1fe7f4 100644
--- a/app/components/app/patient/list-cfg.ts
+++ b/app/components/app/patient/list-cfg.ts
@@ -1,11 +1,5 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/nav/types'
+import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '../../pub/nav/types'
+import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
diff --git a/app/components/app/patient/list.vue b/app/components/app/patient/list.vue
index beba372c..5b8778d9 100644
--- a/app/components/app/patient/list.vue
+++ b/app/components/app/patient/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg.ts'
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 defineProps<{
   data: any[]
diff --git a/app/components/pub/form/field-group.vue b/app/components/pub/form/field-group.vue
index 784870a7..d24d153b 100644
--- a/app/components/pub/form/field-group.vue
+++ b/app/components/pub/form/field-group.vue
@@ -16,71 +16,29 @@ const props = withDefaults(
   },
 )
 
-const classVal = computed(() => {
-  let val = ''
+const wrapperClass = computed(() => [
+  'w-full flex-shrink-0',
 
-  if (props.column === 2) val += 'column-2 '
-  else if (props.column === 3) val += 'column-3 '
-  else val += 'column-1 '
+  props.column === 1 && props.side !== 'break' ? 'pe-4 md:w-1/1 ' : '',
+  props.column === 2 && props.side !== 'break' ? 'pe-4 md:w-1/2 ' : '',
+  props.column === 3 && props.side !== 'break' ? 'pe-4 md:w-1/3' : '',
+  props.column === 2 && props.side === 'break' ? 'md:w-1/2' : '',
+  props.column === 3 && props.side === 'break' ? 'md:w-1/3' : '',
 
-  if (props.density === 'dense') val += 'density-dense '
+  props.density !== 'dense' ? 'mb-2 md:mb-2.5 xl:mb-3' : '',
 
-  if (props.side === 'break') val += 'side-break '
+  props.side !== 'break' ? 'md:flex' : '',
 
-  if (props.position === 'dynamic') val += 'position-dynamic '
+  props.position === 'dynamic' ? 'ps-4' : props.column > 1 ? 'pe-4' : '',
 
-  return (val + (props.class || '')).trim()
-})
+  props.class,
+])
 </script>
 
 <template>
-  <div
-    :class="[
-      column === 1 ? 'w-full' : column === 2 ? 'pe-4 md:w-1/2' : 'pe-4 md:w-1/3',
-      density === 'dense' ? '' : 'mb-2 md:mb-2.5 xl:mb-3',
-      side !== 'break' ? 'md:flex' : '',
-      position === 'dynamic' ? 'ps-4' : '',
-      props.class,
-    ]"
-  >
+  <div :class="wrapperClass">
     <slot />
   </div>
 </template>
 
-<style scoped>
-.column-1,
-.column-2,
-.column-3 {
-  @apply w-full flex-shrink-0;
-}
-
-.column-1:not(.density-dense):not(:last-child),
-.column-2:not(.density-dense):not(:last-child),
-.column-3:not(.density-dense):not(:last-child) {
-  @apply mb-2 md:mb-2.5 xl:mb-3;
-}
-
-.column-2:not(.position-dynamic),
-.column-3:not(.position-dynamic) {
-  @apply pe-4;
-}
-
-.column-2:is(.position-dynamic),
-.column-3:is(.position-dynamic) {
-  @apply ps-4;
-}
-
-.column-1:not(.side-break),
-.column-2:not(.side-break),
-.column-3:not(.side-break) {
-  @apply md:flex;
-}
-
-.column-2:not(.side-break) {
-  @apply md:w-1/2;
-}
-
-.column-3:not(.side-break) {
-  @apply md:w-1/3;
-}
-</style>
+<style scoped></style>
diff --git a/app/components/pub/form/label.vue b/app/components/pub/form/label.vue
index b1ad2d55..179cee89 100644
--- a/app/components/pub/form/label.vue
+++ b/app/components/pub/form/label.vue
@@ -4,69 +4,49 @@ const props = withDefaults(
     size?: 'default' | 'narrow' | 'wide'
     height?: 'default' | 'compact'
     position?: 'default' | 'dynamic'
-    class?: string
   }>(),
   {
     size: 'default',
     height: 'default',
     position: 'default',
-    class: '',
   },
 )
 
-const classVal = computed(() => {
-  let val = ''
+const sizeMap = {
+  default: 'w-28 2xl:w-36',
+  narrow: 'w-24 2xl:w-28',
+  wide: 'w-44 2xl:w-48',
+} as const
 
-  if (props.size === 'narrow') val += 'size-narrow '
-  else if (props.size === 'wide') val += 'size-wide '
-  else val += 'size-default '
+const heightMap = {
+  default: 'pt-2 2xl:pt-2.5',
+  compact: 'leading-[14pt]',
+} as const
 
-  if (props.height === 'compact') val += 'height-compact '
-  else val += 'height-default '
+const positionWrapMap = {
+  default: 'pe-2 text-start',
+  dynamic: 'md:text-end',
+} as const
 
-  if (props.position === 'dynamic') val += 'position-dynamic '
-  else val += 'position-default '
+const positionChildMap = {
+  default: '',
+  dynamic: 'block pe-2.5',
+} as const
 
-  return (val + (props.class || '')).trim()
-})
+const wrapperClass = computed(() => [
+  'block shrink-0',
+  sizeMap[props.size],
+  heightMap[props.height],
+  positionWrapMap[props.position],
+])
+
+const labelClass = computed(() => positionChildMap[props.position])
 </script>
 
 <template>
-  <div class="label" :class="classVal">
-    <label>
+  <div :class="wrapperClass">
+    <label :class="labelClass">
       <slot />
     </label>
   </div>
 </template>
-
-<style scoped>
-.label {
-  @apply block flex-shrink-0 shrink-0;
-}
-
-.size-default {
-  @apply w-28 2xl:w-36;
-}
-.size-narrow {
-  @apply w-24 2xl:w-28;
-}
-.size-wide {
-  @apply w-44 2xl:w-48;
-}
-
-.height-default {
-  @apply pt-2 2xl:pt-2.5;
-}
-
-.height-compact {
-  line-height: 14pt;
-}
-
-.position-default {
-  @apply pe-2 text-start;
-}
-
-.position-dynamic > * {
-  @apply block pe-2.5 md:text-end;
-}
-</style>
diff --git a/app/components/pub/nav/types.ts b/app/components/pub/nav/types.ts
index aa4d130b..c1dbe8d3 100644
--- a/app/components/pub/nav/types.ts
+++ b/app/components/pub/nav/types.ts
@@ -1,4 +1,5 @@
-import type { ComponentType } from '@unovis/ts'
+// import type { ComponentType } from '@unovis/ts'
+import type { Component } from 'vue'
 
 export interface ListItemDto {
   id: number
@@ -6,6 +7,8 @@ export interface ListItemDto {
   code: string
 }
 
+export type ComponentType = Component
+
 export interface RecComponent {
   idx?: number
   rec: object
diff --git a/app/components/pub/ui/accordion/AccordionContent.vue b/app/components/pub/ui/accordion/AccordionContent.vue
index 585ad9bb..c3b9e2fa 100644
--- a/app/components/pub/ui/accordion/AccordionContent.vue
+++ b/app/components/pub/ui/accordion/AccordionContent.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { AccordionContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { AccordionContent } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/accordion/AccordionItem.vue b/app/components/pub/ui/accordion/AccordionItem.vue
index d0875a90..af2bd31d 100644
--- a/app/components/pub/ui/accordion/AccordionItem.vue
+++ b/app/components/pub/ui/accordion/AccordionItem.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { AccordionItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { AccordionItem, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/accordion/AccordionTrigger.vue b/app/components/pub/ui/accordion/AccordionTrigger.vue
index 36ff1cad..62598fcf 100644
--- a/app/components/pub/ui/accordion/AccordionTrigger.vue
+++ b/app/components/pub/ui/accordion/AccordionTrigger.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { AccordionTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ChevronDown } from 'lucide-vue-next'
 import {
   AccordionHeader,
@@ -9,6 +8,7 @@ import {
 
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogAction.vue b/app/components/pub/ui/alert-dialog/AlertDialogAction.vue
index 38956c41..d2e408a0 100644
--- a/app/components/pub/ui/alert-dialog/AlertDialogAction.vue
+++ b/app/components/pub/ui/alert-dialog/AlertDialogAction.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { AlertDialogActionProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { AlertDialogAction } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { buttonVariants } from '../button'
 
 const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogCancel.vue b/app/components/pub/ui/alert-dialog/AlertDialogCancel.vue
index 624b1962..be351f34 100644
--- a/app/components/pub/ui/alert-dialog/AlertDialogCancel.vue
+++ b/app/components/pub/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { AlertDialogCancelProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { AlertDialogCancel } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { buttonVariants } from '../button'
 
 const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogContent.vue b/app/components/pub/ui/alert-dialog/AlertDialogContent.vue
index 3ecf1506..1212671c 100644
--- a/app/components/pub/ui/alert-dialog/AlertDialogContent.vue
+++ b/app/components/pub/ui/alert-dialog/AlertDialogContent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { AlertDialogContentEmits, AlertDialogContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   AlertDialogContent,
 
@@ -10,6 +9,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<AlertDialogContentEmits>()
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogDescription.vue b/app/components/pub/ui/alert-dialog/AlertDialogDescription.vue
index 3c78b776..7eed9d3d 100644
--- a/app/components/pub/ui/alert-dialog/AlertDialogDescription.vue
+++ b/app/components/pub/ui/alert-dialog/AlertDialogDescription.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { AlertDialogDescriptionProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   AlertDialogDescription,
 
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogTitle.vue b/app/components/pub/ui/alert-dialog/AlertDialogTitle.vue
index c39522ab..26c4ff6a 100644
--- a/app/components/pub/ui/alert-dialog/AlertDialogTitle.vue
+++ b/app/components/pub/ui/alert-dialog/AlertDialogTitle.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { AlertDialogTitleProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { AlertDialogTitle } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/avatar/Avatar.vue b/app/components/pub/ui/avatar/Avatar.vue
index c6b9432e..c7bbdcce 100644
--- a/app/components/pub/ui/avatar/Avatar.vue
+++ b/app/components/pub/ui/avatar/Avatar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import type { AvatarVariants } from '.'
-import { cn } from '@/lib/utils'
 import { AvatarRoot } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { avatarVariant } from '.'
 
 const props = withDefaults(defineProps<{
diff --git a/app/components/pub/ui/breadcrumb/BreadcrumbEllipsis.vue b/app/components/pub/ui/breadcrumb/BreadcrumbEllipsis.vue
index cfccf9fe..4925600d 100644
--- a/app/components/pub/ui/breadcrumb/BreadcrumbEllipsis.vue
+++ b/app/components/pub/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { MoreHorizontal } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/app/components/pub/ui/breadcrumb/BreadcrumbLink.vue b/app/components/pub/ui/breadcrumb/BreadcrumbLink.vue
index 5d301fb8..8ca93506 100644
--- a/app/components/pub/ui/breadcrumb/BreadcrumbLink.vue
+++ b/app/components/pub/ui/breadcrumb/BreadcrumbLink.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { PrimitiveProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Primitive } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
   as: 'a',
diff --git a/app/components/pub/ui/breadcrumb/BreadcrumbSeparator.vue b/app/components/pub/ui/breadcrumb/BreadcrumbSeparator.vue
index 8b56104b..436015df 100644
--- a/app/components/pub/ui/breadcrumb/BreadcrumbSeparator.vue
+++ b/app/components/pub/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ChevronRight } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/app/components/pub/ui/button/index.ts b/app/components/pub/ui/button/index.ts
index 53b8435f..66fa9888 100644
--- a/app/components/pub/ui/button/index.ts
+++ b/app/components/pub/ui/button/index.ts
@@ -1,35 +1,35 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
 
-export { default as Button } from "./Button.vue"
+export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   },
 )
diff --git a/app/components/pub/ui/calendar/Calendar.vue b/app/components/pub/ui/calendar/Calendar.vue
index faf86ff6..015c2a18 100644
--- a/app/components/pub/ui/calendar/Calendar.vue
+++ b/app/components/pub/ui/calendar/Calendar.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarRootEmits, CalendarRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
 
 const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/app/components/pub/ui/calendar/CalendarCell.vue b/app/components/pub/ui/calendar/CalendarCell.vue
index cfbfb88b..fc4f317d 100644
--- a/app/components/pub/ui/calendar/CalendarCell.vue
+++ b/app/components/pub/ui/calendar/CalendarCell.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarCellProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarCell, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/calendar/CalendarCellTrigger.vue b/app/components/pub/ui/calendar/CalendarCellTrigger.vue
index b8ae8e53..e496376e 100644
--- a/app/components/pub/ui/calendar/CalendarCellTrigger.vue
+++ b/app/components/pub/ui/calendar/CalendarCellTrigger.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarCellTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarCellTrigger, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { buttonVariants } from '../button'
 
 const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/app/components/pub/ui/calendar/CalendarGrid.vue b/app/components/pub/ui/calendar/CalendarGrid.vue
index 9f8fa7f4..a6e5f2b1 100644
--- a/app/components/pub/ui/calendar/CalendarGrid.vue
+++ b/app/components/pub/ui/calendar/CalendarGrid.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarGridProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarGrid, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/calendar/CalendarGridRow.vue b/app/components/pub/ui/calendar/CalendarGridRow.vue
index 5310a3c7..d370d9f3 100644
--- a/app/components/pub/ui/calendar/CalendarGridRow.vue
+++ b/app/components/pub/ui/calendar/CalendarGridRow.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarGridRowProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarGridRow, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/calendar/CalendarHeadCell.vue b/app/components/pub/ui/calendar/CalendarHeadCell.vue
index 95f773f8..8ce574b1 100644
--- a/app/components/pub/ui/calendar/CalendarHeadCell.vue
+++ b/app/components/pub/ui/calendar/CalendarHeadCell.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarHeadCellProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarHeadCell, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/calendar/CalendarHeader.vue b/app/components/pub/ui/calendar/CalendarHeader.vue
index 50255fe2..88f7b8d0 100644
--- a/app/components/pub/ui/calendar/CalendarHeader.vue
+++ b/app/components/pub/ui/calendar/CalendarHeader.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarHeaderProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarHeader, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/calendar/CalendarHeading.vue b/app/components/pub/ui/calendar/CalendarHeading.vue
index ca5bfb58..ccbd8744 100644
--- a/app/components/pub/ui/calendar/CalendarHeading.vue
+++ b/app/components/pub/ui/calendar/CalendarHeading.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarHeadingProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarHeading, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/calendar/CalendarNextButton.vue b/app/components/pub/ui/calendar/CalendarNextButton.vue
index 0297b15d..0f7e3b47 100644
--- a/app/components/pub/ui/calendar/CalendarNextButton.vue
+++ b/app/components/pub/ui/calendar/CalendarNextButton.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarNextProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarNext, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { buttonVariants } from '../button'
 
 const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()
diff --git a/app/components/pub/ui/calendar/CalendarPrevButton.vue b/app/components/pub/ui/calendar/CalendarPrevButton.vue
index 9cde027e..cbcc28be 100644
--- a/app/components/pub/ui/calendar/CalendarPrevButton.vue
+++ b/app/components/pub/ui/calendar/CalendarPrevButton.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarPrevProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarPrev, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { buttonVariants } from '../button'
 
 const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
diff --git a/app/components/pub/ui/carousel/CarouselNext.vue b/app/components/pub/ui/carousel/CarouselNext.vue
index 687a5773..4153ed82 100644
--- a/app/components/pub/ui/carousel/CarouselNext.vue
+++ b/app/components/pub/ui/carousel/CarouselNext.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { WithClassAsProps } from './interface'
-import { cn } from '@/lib/utils'
 import { ArrowRight } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
 import { Button } from '../button'
 import { useCarousel } from './useCarousel'
 
diff --git a/app/components/pub/ui/carousel/CarouselPrevious.vue b/app/components/pub/ui/carousel/CarouselPrevious.vue
index c8440e41..f8bded9e 100644
--- a/app/components/pub/ui/carousel/CarouselPrevious.vue
+++ b/app/components/pub/ui/carousel/CarouselPrevious.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { WithClassAsProps } from './interface'
-import { cn } from '@/lib/utils'
 import { ArrowLeft } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
 import { Button } from '../button'
 import { useCarousel } from './useCarousel'
 
diff --git a/app/components/pub/ui/carousel/useCarousel.ts b/app/components/pub/ui/carousel/useCarousel.ts
index 4fb58ddd..fa5781c8 100644
--- a/app/components/pub/ui/carousel/useCarousel.ts
+++ b/app/components/pub/ui/carousel/useCarousel.ts
@@ -34,7 +34,7 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
 
     onMounted(() => {
       if (!emblaApi.value)
-        return
+      { return }
 
       emblaApi.value?.on('init', onSelect)
       emblaApi.value?.on('reInit', onSelect)
@@ -51,7 +51,7 @@ function useCarousel() {
   const carouselState = useInjectCarousel()
 
   if (!carouselState)
-    throw new Error('useCarousel must be used within a <Carousel />')
+  { throw new Error('useCarousel must be used within a <Carousel />') }
 
   return carouselState
 }
diff --git a/app/components/pub/ui/chart-area/AreaChart.vue b/app/components/pub/ui/chart-area/AreaChart.vue
index cf219519..ea9e5340 100644
--- a/app/components/pub/ui/chart-area/AreaChart.vue
+++ b/app/components/pub/ui/chart-area/AreaChart.vue
@@ -2,11 +2,11 @@
 import type { BulletLegendItemInterface } from '@unovis/ts'
 import type { Component } from 'vue'
 import type { BaseChartProps } from '.'
-import { cn } from '@/lib/utils'
 import { Area, Axis, CurveType, Line } from '@unovis/ts'
 import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
 import { useMounted } from '@vueuse/core'
 import { computed, ref } from 'vue'
+import { cn } from '@/lib/utils'
 import { ChartCrosshair, ChartLegend, defaultColors } from '../chart'
 
 const props = withDefaults(defineProps<BaseChartProps<T> & {
diff --git a/app/components/pub/ui/chart-bar/BarChart.vue b/app/components/pub/ui/chart-bar/BarChart.vue
index b0d18b7e..47b8d968 100644
--- a/app/components/pub/ui/chart-bar/BarChart.vue
+++ b/app/components/pub/ui/chart-bar/BarChart.vue
@@ -2,11 +2,11 @@
 import type { BulletLegendItemInterface } from '@unovis/ts'
 import type { Component } from 'vue'
 import type { BaseChartProps } from '.'
-import { cn } from '@/lib/utils'
 import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
 import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { useMounted } from '@vueuse/core'
 import { computed, ref } from 'vue'
+import { cn } from '@/lib/utils'
 import { ChartCrosshair, ChartLegend, defaultColors } from '../chart'
 
 const props = withDefaults(defineProps<BaseChartProps<T> & {
diff --git a/app/components/pub/ui/chart-donut/DonutChart.vue b/app/components/pub/ui/chart-donut/DonutChart.vue
index ddf1889b..edae878e 100644
--- a/app/components/pub/ui/chart-donut/DonutChart.vue
+++ b/app/components/pub/ui/chart-donut/DonutChart.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { Component } from 'vue'
 import type { BaseChartProps } from '.'
-import { cn } from '@/lib/utils'
 import { Donut } from '@unovis/ts'
 import { VisDonut, VisSingleContainer } from '@unovis/vue'
 import { useMounted } from '@vueuse/core'
 import { computed, ref } from 'vue'
+import { cn } from '@/lib/utils'
 import { ChartSingleTooltip, defaultColors } from '../chart'
 
 const props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {
diff --git a/app/components/pub/ui/chart-line/LineChart.vue b/app/components/pub/ui/chart-line/LineChart.vue
index a269b2cb..bd18f4b6 100644
--- a/app/components/pub/ui/chart-line/LineChart.vue
+++ b/app/components/pub/ui/chart-line/LineChart.vue
@@ -2,11 +2,11 @@
 import type { BulletLegendItemInterface } from '@unovis/ts'
 import type { Component } from 'vue'
 import type { BaseChartProps } from '.'
-import { cn } from '@/lib/utils'
 import { Axis, CurveType, Line } from '@unovis/ts'
 import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
 import { useMounted } from '@vueuse/core'
 import { computed, ref } from 'vue'
+import { cn } from '@/lib/utils'
 import { ChartCrosshair, ChartLegend, defaultColors } from '../chart'
 
 const props = withDefaults(defineProps<BaseChartProps<T> & {
diff --git a/app/components/pub/ui/checkbox/Checkbox.vue b/app/components/pub/ui/checkbox/Checkbox.vue
index c846eae0..ada0a386 100644
--- a/app/components/pub/ui/checkbox/Checkbox.vue
+++ b/app/components/pub/ui/checkbox/Checkbox.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<CheckboxRootEmits>()
diff --git a/app/components/pub/ui/command/Command.vue b/app/components/pub/ui/command/Command.vue
index dda41937..89860d64 100644
--- a/app/components/pub/ui/command/Command.vue
+++ b/app/components/pub/ui/command/Command.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
   open: true,
diff --git a/app/components/pub/ui/command/CommandEmpty.vue b/app/components/pub/ui/command/CommandEmpty.vue
index 21368efa..29c9075a 100644
--- a/app/components/pub/ui/command/CommandEmpty.vue
+++ b/app/components/pub/ui/command/CommandEmpty.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ComboboxEmptyProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ComboboxEmpty } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/command/CommandGroup.vue b/app/components/pub/ui/command/CommandGroup.vue
index eaca02de..24fd7065 100644
--- a/app/components/pub/ui/command/CommandGroup.vue
+++ b/app/components/pub/ui/command/CommandGroup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ComboboxGroupProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ComboboxGroupProps & {
   class?: HTMLAttributes['class']
diff --git a/app/components/pub/ui/command/CommandInput.vue b/app/components/pub/ui/command/CommandInput.vue
index e2e2b1d0..ae9e3c55 100644
--- a/app/components/pub/ui/command/CommandInput.vue
+++ b/app/components/pub/ui/command/CommandInput.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { ComboboxInputProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Search } from 'lucide-vue-next'
 import { ComboboxInput, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 defineOptions({
   inheritAttrs: false,
diff --git a/app/components/pub/ui/command/CommandItem.vue b/app/components/pub/ui/command/CommandItem.vue
index adca1fef..dd611169 100644
--- a/app/components/pub/ui/command/CommandItem.vue
+++ b/app/components/pub/ui/command/CommandItem.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ComboboxItemEmits>()
diff --git a/app/components/pub/ui/command/CommandList.vue b/app/components/pub/ui/command/CommandList.vue
index d540cf08..2dd9ff53 100644
--- a/app/components/pub/ui/command/CommandList.vue
+++ b/app/components/pub/ui/command/CommandList.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
   dismissable: false,
diff --git a/app/components/pub/ui/command/CommandSeparator.vue b/app/components/pub/ui/command/CommandSeparator.vue
index 9000939f..e0338b62 100644
--- a/app/components/pub/ui/command/CommandSeparator.vue
+++ b/app/components/pub/ui/command/CommandSeparator.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ComboboxSeparatorProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ComboboxSeparator } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/context-menu/ContextMenuCheckboxItem.vue b/app/components/pub/ui/context-menu/ContextMenuCheckboxItem.vue
index 62f6c481..e3453267 100644
--- a/app/components/pub/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/app/components/pub/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Check } from 'lucide-vue-next'
 import {
   ContextMenuCheckboxItem,
@@ -10,6 +9,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuCheckboxItemEmits>()
diff --git a/app/components/pub/ui/context-menu/ContextMenuContent.vue b/app/components/pub/ui/context-menu/ContextMenuContent.vue
index 651d3b26..d104a4ba 100644
--- a/app/components/pub/ui/context-menu/ContextMenuContent.vue
+++ b/app/components/pub/ui/context-menu/ContextMenuContent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { ContextMenuContentEmits, ContextMenuContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   ContextMenuContent,
 
@@ -9,6 +8,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuContentEmits>()
diff --git a/app/components/pub/ui/context-menu/ContextMenuItem.vue b/app/components/pub/ui/context-menu/ContextMenuItem.vue
index 1773330c..93b6f3b2 100644
--- a/app/components/pub/ui/context-menu/ContextMenuItem.vue
+++ b/app/components/pub/ui/context-menu/ContextMenuItem.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { ContextMenuItemEmits, ContextMenuItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   ContextMenuItem,
 
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 const emits = defineEmits<ContextMenuItemEmits>()
diff --git a/app/components/pub/ui/context-menu/ContextMenuLabel.vue b/app/components/pub/ui/context-menu/ContextMenuLabel.vue
index 5ad9742a..43b0e685 100644
--- a/app/components/pub/ui/context-menu/ContextMenuLabel.vue
+++ b/app/components/pub/ui/context-menu/ContextMenuLabel.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ContextMenuLabelProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ContextMenuLabel } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
diff --git a/app/components/pub/ui/context-menu/ContextMenuRadioItem.vue b/app/components/pub/ui/context-menu/ContextMenuRadioItem.vue
index 05ff7bde..d1c89f16 100644
--- a/app/components/pub/ui/context-menu/ContextMenuRadioItem.vue
+++ b/app/components/pub/ui/context-menu/ContextMenuRadioItem.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Circle } from 'lucide-vue-next'
 import {
   ContextMenuItemIndicator,
@@ -10,6 +9,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuRadioItemEmits>()
diff --git a/app/components/pub/ui/context-menu/ContextMenuSeparator.vue b/app/components/pub/ui/context-menu/ContextMenuSeparator.vue
index c03377f9..10ee706a 100644
--- a/app/components/pub/ui/context-menu/ContextMenuSeparator.vue
+++ b/app/components/pub/ui/context-menu/ContextMenuSeparator.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { ContextMenuSeparatorProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   ContextMenuSeparator,
 
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/context-menu/ContextMenuSubContent.vue b/app/components/pub/ui/context-menu/ContextMenuSubContent.vue
index 2d7adb69..45e16aef 100644
--- a/app/components/pub/ui/context-menu/ContextMenuSubContent.vue
+++ b/app/components/pub/ui/context-menu/ContextMenuSubContent.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   ContextMenuSubContent,
 
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
diff --git a/app/components/pub/ui/context-menu/ContextMenuSubTrigger.vue b/app/components/pub/ui/context-menu/ContextMenuSubTrigger.vue
index 77eeb378..cbdaec09 100644
--- a/app/components/pub/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/app/components/pub/ui/context-menu/ContextMenuSubTrigger.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { ContextMenuSubTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ChevronRight } from 'lucide-vue-next'
 import {
   ContextMenuSubTrigger,
@@ -9,6 +8,7 @@ import {
   useForwardProps,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
diff --git a/app/components/pub/ui/dialog/DialogContent.vue b/app/components/pub/ui/dialog/DialogContent.vue
index bb1842bb..3777e89c 100644
--- a/app/components/pub/ui/dialog/DialogContent.vue
+++ b/app/components/pub/ui/dialog/DialogContent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { X } from 'lucide-vue-next'
 import {
   DialogClose,
@@ -12,6 +11,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DialogContentEmits>()
diff --git a/app/components/pub/ui/dialog/DialogDescription.vue b/app/components/pub/ui/dialog/DialogDescription.vue
index 373381e0..a90c2bfc 100644
--- a/app/components/pub/ui/dialog/DialogDescription.vue
+++ b/app/components/pub/ui/dialog/DialogDescription.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { DialogDescriptionProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { DialogDescription, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/dialog/DialogScrollContent.vue b/app/components/pub/ui/dialog/DialogScrollContent.vue
index 15a2031e..f81a51f8 100644
--- a/app/components/pub/ui/dialog/DialogScrollContent.vue
+++ b/app/components/pub/ui/dialog/DialogScrollContent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { X } from 'lucide-vue-next'
 import {
   DialogClose,
@@ -12,6 +11,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DialogContentEmits>()
diff --git a/app/components/pub/ui/dialog/DialogTitle.vue b/app/components/pub/ui/dialog/DialogTitle.vue
index d815c4b1..81e77677 100644
--- a/app/components/pub/ui/dialog/DialogTitle.vue
+++ b/app/components/pub/ui/dialog/DialogTitle.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { DialogTitleProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { DialogTitle, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/drawer/DrawerContent.vue b/app/components/pub/ui/drawer/DrawerContent.vue
index 9639a6f3..8fb51b87 100644
--- a/app/components/pub/ui/drawer/DrawerContent.vue
+++ b/app/components/pub/ui/drawer/DrawerContent.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
 import type { HtmlHTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { useForwardPropsEmits } from 'radix-vue'
 import { DrawerContent, DrawerPortal } from 'vaul-vue'
+import { cn } from '@/lib/utils'
 import DrawerOverlay from './DrawerOverlay.vue'
 
 const props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()
diff --git a/app/components/pub/ui/drawer/DrawerDescription.vue b/app/components/pub/ui/drawer/DrawerDescription.vue
index 33c01401..12e55cc5 100644
--- a/app/components/pub/ui/drawer/DrawerDescription.vue
+++ b/app/components/pub/ui/drawer/DrawerDescription.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { DrawerDescriptionProps } from 'vaul-vue'
 import type { HtmlHTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { DrawerDescription } from 'vaul-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/drawer/DrawerOverlay.vue b/app/components/pub/ui/drawer/DrawerOverlay.vue
index bda38ce2..db940844 100644
--- a/app/components/pub/ui/drawer/DrawerOverlay.vue
+++ b/app/components/pub/ui/drawer/DrawerOverlay.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { DialogOverlayProps } from 'radix-vue'
 import type { HtmlHTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { DrawerOverlay } from 'vaul-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/drawer/DrawerTitle.vue b/app/components/pub/ui/drawer/DrawerTitle.vue
index 04d48646..6a5061af 100644
--- a/app/components/pub/ui/drawer/DrawerTitle.vue
+++ b/app/components/pub/ui/drawer/DrawerTitle.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { DrawerTitleProps } from 'vaul-vue'
 import type { HtmlHTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { DrawerTitle } from 'vaul-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 12d948a2..a3e7e523 100644
--- a/app/components/pub/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Check } from 'lucide-vue-next'
 import {
   DropdownMenuCheckboxItem,
@@ -10,6 +9,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuContent.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuContent.vue
index 95e82df6..0d598a45 100644
--- a/app/components/pub/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuContent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   DropdownMenuContent,
 
@@ -9,6 +8,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(
   defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuItem.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuItem.vue
index 234cbc87..038cb399 100644
--- a/app/components/pub/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { DropdownMenuItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { DropdownMenuItem, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuLabel.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuLabel.vue
index 156e28ca..6908a348 100644
--- a/app/components/pub/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { DropdownMenuLabelProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { DropdownMenuLabel, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuRadioItem.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuRadioItem.vue
index db5b802d..7a3ccfe7 100644
--- a/app/components/pub/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Circle } from 'lucide-vue-next'
 import {
   DropdownMenuItemIndicator,
@@ -10,6 +9,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuSeparator.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuSeparator.vue
index 6bb639e1..76d21ec5 100644
--- a/app/components/pub/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { DropdownMenuSeparatorProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   DropdownMenuSeparator,
 
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuSeparatorProps & {
   class?: HTMLAttributes['class']
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuSubContent.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuSubContent.vue
index 0cba446a..4a4d1035 100644
--- a/app/components/pub/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   DropdownMenuSubContent,
 
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index fdb058e7..2821039c 100644
--- a/app/components/pub/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { DropdownMenuSubTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ChevronRight } from 'lucide-vue-next'
 import {
   DropdownMenuSubTrigger,
@@ -9,6 +8,7 @@ import {
   useForwardProps,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/form/FormItem.vue b/app/components/pub/ui/form/FormItem.vue
index a4c1e8df..a2a6bfd2 100644
--- a/app/components/pub/ui/form/FormItem.vue
+++ b/app/components/pub/ui/form/FormItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { provide } from 'vue'
+import { cn } from '@/lib/utils'
 import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 
 const props = defineProps<{
diff --git a/app/components/pub/ui/form/FormLabel.vue b/app/components/pub/ui/form/FormLabel.vue
index 05a51929..080dfb8d 100644
--- a/app/components/pub/ui/form/FormLabel.vue
+++ b/app/components/pub/ui/form/FormLabel.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { LabelProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { Label } from '@/components/ui/label'
+import { Label } from '@/components/pub/ui/label'
 import { cn } from '@/lib/utils'
 import { useFormField } from './useFormField'
 
@@ -11,13 +11,7 @@ const { error, formItemId } = useFormField()
 </script>
 
 <template>
-  <Label
-    :class="cn(
-      error && 'text-destructive',
-      props.class,
-    )"
-    :for="formItemId"
-  >
+  <Label :class="cn(error && 'text-destructive', props.class)" :for="formItemId">
     <slot />
   </Label>
 </template>
diff --git a/app/components/pub/ui/form/useFormField.ts b/app/components/pub/ui/form/useFormField.ts
index 2da133b8..b94b79ae 100644
--- a/app/components/pub/ui/form/useFormField.ts
+++ b/app/components/pub/ui/form/useFormField.ts
@@ -13,7 +13,7 @@ export function useFormField() {
   }
 
   if (!fieldContext)
-    throw new Error('useFormField should be used within <FormField>')
+  { throw new Error('useFormField should be used within <FormField>') }
 
   const { name } = fieldContext
   const id = fieldItemContext
diff --git a/app/components/pub/ui/hover-card/HoverCardContent.vue b/app/components/pub/ui/hover-card/HoverCardContent.vue
index f35e3809..47b1517a 100644
--- a/app/components/pub/ui/hover-card/HoverCardContent.vue
+++ b/app/components/pub/ui/hover-card/HoverCardContent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { HoverCardContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   HoverCardContent,
 
@@ -9,6 +8,7 @@ import {
   useForwardProps,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(
   defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
diff --git a/app/components/pub/ui/label/Label.vue b/app/components/pub/ui/label/Label.vue
index 04232226..fd7c736b 100644
--- a/app/components/pub/ui/label/Label.vue
+++ b/app/components/pub/ui/label/Label.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { LabelProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Label } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/menubar/Menubar.vue b/app/components/pub/ui/menubar/Menubar.vue
index 614a545f..effebec8 100644
--- a/app/components/pub/ui/menubar/Menubar.vue
+++ b/app/components/pub/ui/menubar/Menubar.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { MenubarRootEmits, MenubarRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   MenubarRoot,
 
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<MenubarRootEmits>()
diff --git a/app/components/pub/ui/menubar/MenubarCheckboxItem.vue b/app/components/pub/ui/menubar/MenubarCheckboxItem.vue
index f566f317..123ccc53 100644
--- a/app/components/pub/ui/menubar/MenubarCheckboxItem.vue
+++ b/app/components/pub/ui/menubar/MenubarCheckboxItem.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { MenubarCheckboxItemEmits, MenubarCheckboxItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   MenubarCheckboxItem,
 
@@ -9,6 +8,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<MenubarCheckboxItemEmits>()
diff --git a/app/components/pub/ui/menubar/MenubarContent.vue b/app/components/pub/ui/menubar/MenubarContent.vue
index d1de1ae9..1dbb808e 100644
--- a/app/components/pub/ui/menubar/MenubarContent.vue
+++ b/app/components/pub/ui/menubar/MenubarContent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { MenubarContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   MenubarContent,
 
@@ -9,6 +8,7 @@ import {
   useForwardProps,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(
   defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),
diff --git a/app/components/pub/ui/menubar/MenubarItem.vue b/app/components/pub/ui/menubar/MenubarItem.vue
index e1457d60..dbc089de 100644
--- a/app/components/pub/ui/menubar/MenubarItem.vue
+++ b/app/components/pub/ui/menubar/MenubarItem.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { MenubarItemEmits, MenubarItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   MenubarItem,
 
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
diff --git a/app/components/pub/ui/menubar/MenubarLabel.vue b/app/components/pub/ui/menubar/MenubarLabel.vue
index 34089911..0777d4dd 100644
--- a/app/components/pub/ui/menubar/MenubarLabel.vue
+++ b/app/components/pub/ui/menubar/MenubarLabel.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { MenubarLabelProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { MenubarLabel } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 </script>
diff --git a/app/components/pub/ui/menubar/MenubarRadioItem.vue b/app/components/pub/ui/menubar/MenubarRadioItem.vue
index a4d72455..688034dc 100644
--- a/app/components/pub/ui/menubar/MenubarRadioItem.vue
+++ b/app/components/pub/ui/menubar/MenubarRadioItem.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { MenubarRadioItemEmits, MenubarRadioItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   MenubarItemIndicator,
   MenubarRadioItem,
@@ -9,6 +8,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<MenubarRadioItemEmits>()
diff --git a/app/components/pub/ui/menubar/MenubarSeparator.vue b/app/components/pub/ui/menubar/MenubarSeparator.vue
index 6850518e..4e71fd84 100644
--- a/app/components/pub/ui/menubar/MenubarSeparator.vue
+++ b/app/components/pub/ui/menubar/MenubarSeparator.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { MenubarSeparatorProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { MenubarSeparator, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/menubar/MenubarSubContent.vue b/app/components/pub/ui/menubar/MenubarSubContent.vue
index 5986c7d9..db2eb483 100644
--- a/app/components/pub/ui/menubar/MenubarSubContent.vue
+++ b/app/components/pub/ui/menubar/MenubarSubContent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { MenubarSubContentEmits, MenubarSubContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   MenubarPortal,
   MenubarSubContent,
@@ -9,6 +8,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/menubar/MenubarSubTrigger.vue b/app/components/pub/ui/menubar/MenubarSubTrigger.vue
index 7bdbec92..9a36830c 100644
--- a/app/components/pub/ui/menubar/MenubarSubTrigger.vue
+++ b/app/components/pub/ui/menubar/MenubarSubTrigger.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { MenubarSubTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { MenubarSubTrigger, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
diff --git a/app/components/pub/ui/menubar/MenubarTrigger.vue b/app/components/pub/ui/menubar/MenubarTrigger.vue
index 7538fe7a..30d977f8 100644
--- a/app/components/pub/ui/menubar/MenubarTrigger.vue
+++ b/app/components/pub/ui/menubar/MenubarTrigger.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { MenubarTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { MenubarTrigger, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenu.vue b/app/components/pub/ui/navigation-menu/NavigationMenu.vue
index f7fc216c..ad0f2adb 100644
--- a/app/components/pub/ui/navigation-menu/NavigationMenu.vue
+++ b/app/components/pub/ui/navigation-menu/NavigationMenu.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { NavigationMenuRootEmits, NavigationMenuRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   NavigationMenuRoot,
 
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import NavigationMenuViewport from './NavigationMenuViewport.vue'
 
 const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuContent.vue b/app/components/pub/ui/navigation-menu/NavigationMenuContent.vue
index e6b5060f..bab1a5ca 100644
--- a/app/components/pub/ui/navigation-menu/NavigationMenuContent.vue
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuContent.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { NavigationMenuContentEmits, NavigationMenuContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   NavigationMenuContent,
 
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuIndicator.vue b/app/components/pub/ui/navigation-menu/NavigationMenuIndicator.vue
index 018c0868..0b6d01a3 100644
--- a/app/components/pub/ui/navigation-menu/NavigationMenuIndicator.vue
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuIndicator.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { NavigationMenuIndicatorProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { NavigationMenuIndicator, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuList.vue b/app/components/pub/ui/navigation-menu/NavigationMenuList.vue
index 7275908c..3d5dd898 100644
--- a/app/components/pub/ui/navigation-menu/NavigationMenuList.vue
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuList.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { NavigationMenuListProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { NavigationMenuList, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuTrigger.vue b/app/components/pub/ui/navigation-menu/NavigationMenuTrigger.vue
index c15f094d..cb822967 100644
--- a/app/components/pub/ui/navigation-menu/NavigationMenuTrigger.vue
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { NavigationMenuTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   NavigationMenuTrigger,
 
   useForwardProps,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { navigationMenuTriggerStyle } from '.'
 
 const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuViewport.vue b/app/components/pub/ui/navigation-menu/NavigationMenuViewport.vue
index b6cdfc54..2427f5c7 100644
--- a/app/components/pub/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuViewport.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { NavigationMenuViewportProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   NavigationMenuViewport,
 
   useForwardProps,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/number-field/NumberField.vue b/app/components/pub/ui/number-field/NumberField.vue
index 020ea0bc..d64930ee 100644
--- a/app/components/pub/ui/number-field/NumberField.vue
+++ b/app/components/pub/ui/number-field/NumberField.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<NumberFieldRootEmits>()
diff --git a/app/components/pub/ui/number-field/NumberFieldDecrement.vue b/app/components/pub/ui/number-field/NumberFieldDecrement.vue
index 77fe4586..fcf13486 100644
--- a/app/components/pub/ui/number-field/NumberFieldDecrement.vue
+++ b/app/components/pub/ui/number-field/NumberFieldDecrement.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { NumberFieldDecrementProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Minus } from 'lucide-vue-next'
 import { NumberFieldDecrement, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/number-field/NumberFieldIncrement.vue b/app/components/pub/ui/number-field/NumberFieldIncrement.vue
index e4e12f24..fed0508d 100644
--- a/app/components/pub/ui/number-field/NumberFieldIncrement.vue
+++ b/app/components/pub/ui/number-field/NumberFieldIncrement.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { NumberFieldIncrementProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Plus } from 'lucide-vue-next'
 import { NumberFieldIncrement, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/number-field/NumberFieldInput.vue b/app/components/pub/ui/number-field/NumberFieldInput.vue
index 2d91d9ed..9a0ee0e6 100644
--- a/app/components/pub/ui/number-field/NumberFieldInput.vue
+++ b/app/components/pub/ui/number-field/NumberFieldInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
 import { NumberFieldInput } from 'radix-vue'
+import { cn } from '@/lib/utils'
 </script>
 
 <template>
diff --git a/app/components/pub/ui/pagination/PaginationEllipsis.vue b/app/components/pub/ui/pagination/PaginationEllipsis.vue
index b26177c9..bba2b8b9 100644
--- a/app/components/pub/ui/pagination/PaginationEllipsis.vue
+++ b/app/components/pub/ui/pagination/PaginationEllipsis.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { PaginationEllipsisProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { PaginationEllipsis } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/pagination/PaginationFirst.vue b/app/components/pub/ui/pagination/PaginationFirst.vue
index af1caf2b..e3aac095 100644
--- a/app/components/pub/ui/pagination/PaginationFirst.vue
+++ b/app/components/pub/ui/pagination/PaginationFirst.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import type { PaginationFirstProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import {
-  Button,
-} from '@/components/ui/button'
-import { cn } from '@/lib/utils'
 import { PaginationFirst } from 'radix-vue'
 import { computed } from 'vue'
+import { Button } from '@/components/pub/ui/button'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -21,7 +19,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationFirst v-bind="delegatedProps">
-    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
       <slot>
         <Icon name="i-radix-icons-double-arrow-left" />
       </slot>
diff --git a/app/components/pub/ui/pagination/PaginationLast.vue b/app/components/pub/ui/pagination/PaginationLast.vue
index fc4cea8d..7d8d60b4 100644
--- a/app/components/pub/ui/pagination/PaginationLast.vue
+++ b/app/components/pub/ui/pagination/PaginationLast.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import type { PaginationLastProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import {
-  Button,
-} from '@/components/ui/button'
-import { cn } from '@/lib/utils'
 import { PaginationLast } from 'radix-vue'
 import { computed } from 'vue'
+import { Button } from '@/components/pub/ui/button'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -21,7 +19,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationLast v-bind="delegatedProps">
-    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
       <slot>
         <Icon name="i-radix-icons-double-arrow-right" />
       </slot>
diff --git a/app/components/pub/ui/pagination/PaginationNext.vue b/app/components/pub/ui/pagination/PaginationNext.vue
index 24203dfb..f2e885ef 100644
--- a/app/components/pub/ui/pagination/PaginationNext.vue
+++ b/app/components/pub/ui/pagination/PaginationNext.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import type { PaginationNextProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import {
-  Button,
-} from '@/components/ui/button'
-import { cn } from '@/lib/utils'
 import { PaginationNext } from 'radix-vue'
 import { computed } from 'vue'
+import { Button } from '@/components/pub/ui/button'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -21,7 +19,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationNext v-bind="delegatedProps">
-    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
       <slot>
         <Icon name="i-radix-icons-chevron-right" />
       </slot>
diff --git a/app/components/pub/ui/pagination/PaginationPrev.vue b/app/components/pub/ui/pagination/PaginationPrev.vue
index 81fe1be0..c685f73f 100644
--- a/app/components/pub/ui/pagination/PaginationPrev.vue
+++ b/app/components/pub/ui/pagination/PaginationPrev.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import type { PaginationPrevProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import {
-  Button,
-} from '@/components/ui/button'
-import { cn } from '@/lib/utils'
 import { PaginationPrev } from 'radix-vue'
 import { computed } from 'vue'
+import { Button } from '@/components/pub/ui/button'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -21,7 +19,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationPrev v-bind="delegatedProps">
-    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
       <slot>
         <Icon name="i-radix-icons-chevron-left" />
       </slot>
diff --git a/app/components/pub/ui/pin-input/PinInput.vue b/app/components/pub/ui/pin-input/PinInput.vue
index 1152b78b..509a8f92 100644
--- a/app/components/pub/ui/pin-input/PinInput.vue
+++ b/app/components/pub/ui/pin-input/PinInput.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { PinInputRootEmits, PinInputRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { PinInputRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {
   modelValue: () => [],
diff --git a/app/components/pub/ui/pin-input/PinInputGroup.vue b/app/components/pub/ui/pin-input/PinInputGroup.vue
index 7b008a5f..b44f9a0b 100644
--- a/app/components/pub/ui/pin-input/PinInputGroup.vue
+++ b/app/components/pub/ui/pin-input/PinInputGroup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { PrimitiveProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Primitive, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
 const delegatedProps = computed(() => {
diff --git a/app/components/pub/ui/pin-input/PinInputInput.vue b/app/components/pub/ui/pin-input/PinInputInput.vue
index 5091e777..1d5219d3 100644
--- a/app/components/pub/ui/pin-input/PinInputInput.vue
+++ b/app/components/pub/ui/pin-input/PinInputInput.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { PinInputInputProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { PinInputInput, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/popover/PopoverContent.vue b/app/components/pub/ui/popover/PopoverContent.vue
index 665efa30..fde7d4ba 100644
--- a/app/components/pub/ui/popover/PopoverContent.vue
+++ b/app/components/pub/ui/popover/PopoverContent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { PopoverContentEmits, PopoverContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   PopoverContent,
 
@@ -9,6 +8,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 defineOptions({
   inheritAttrs: false,
diff --git a/app/components/pub/ui/progress/Progress.vue b/app/components/pub/ui/progress/Progress.vue
index 0a1e90af..fbdf358c 100644
--- a/app/components/pub/ui/progress/Progress.vue
+++ b/app/components/pub/ui/progress/Progress.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { ProgressRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   ProgressIndicator,
   ProgressRoot,
 
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(
   defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
diff --git a/app/components/pub/ui/radio-group/RadioGroup.vue b/app/components/pub/ui/radio-group/RadioGroup.vue
index 7fbcf9b8..cc41d8cf 100644
--- a/app/components/pub/ui/radio-group/RadioGroup.vue
+++ b/app/components/pub/ui/radio-group/RadioGroup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { RadioGroupRootEmits, RadioGroupRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { RadioGroupRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<RadioGroupRootEmits>()
diff --git a/app/components/pub/ui/radio-group/RadioGroupItem.vue b/app/components/pub/ui/radio-group/RadioGroupItem.vue
index 57d452b9..a099dac8 100644
--- a/app/components/pub/ui/radio-group/RadioGroupItem.vue
+++ b/app/components/pub/ui/radio-group/RadioGroupItem.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { RadioGroupItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   RadioGroupIndicator,
   RadioGroupItem,
@@ -9,6 +8,7 @@ import {
   useForwardProps,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/range-calendar/RangeCalendar.vue b/app/components/pub/ui/range-calendar/RangeCalendar.vue
index 631d5780..bacf350f 100644
--- a/app/components/pub/ui/range-calendar/RangeCalendar.vue
+++ b/app/components/pub/ui/range-calendar/RangeCalendar.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { RangeCalendarRootEmits, RangeCalendarRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { RangeCalendarRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'
 
 const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarCell.vue b/app/components/pub/ui/range-calendar/RangeCalendarCell.vue
index b6f9a1cc..70e9d3b5 100644
--- a/app/components/pub/ui/range-calendar/RangeCalendarCell.vue
+++ b/app/components/pub/ui/range-calendar/RangeCalendarCell.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { RangeCalendarCellProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { RangeCalendarCell, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarCellTrigger.vue b/app/components/pub/ui/range-calendar/RangeCalendarCellTrigger.vue
index 5c8aaef1..1439177a 100644
--- a/app/components/pub/ui/range-calendar/RangeCalendarCellTrigger.vue
+++ b/app/components/pub/ui/range-calendar/RangeCalendarCellTrigger.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { RangeCalendarCellTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { RangeCalendarCellTrigger, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { buttonVariants } from '../button'
 
 const props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarGrid.vue b/app/components/pub/ui/range-calendar/RangeCalendarGrid.vue
index 9a1295c5..068e067f 100644
--- a/app/components/pub/ui/range-calendar/RangeCalendarGrid.vue
+++ b/app/components/pub/ui/range-calendar/RangeCalendarGrid.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { RangeCalendarGridProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { RangeCalendarGrid, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarGridRow.vue b/app/components/pub/ui/range-calendar/RangeCalendarGridRow.vue
index fad16899..011a90c1 100644
--- a/app/components/pub/ui/range-calendar/RangeCalendarGridRow.vue
+++ b/app/components/pub/ui/range-calendar/RangeCalendarGridRow.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { RangeCalendarGridRowProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { RangeCalendarGridRow, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarHeadCell.vue b/app/components/pub/ui/range-calendar/RangeCalendarHeadCell.vue
index 92769853..57738f2f 100644
--- a/app/components/pub/ui/range-calendar/RangeCalendarHeadCell.vue
+++ b/app/components/pub/ui/range-calendar/RangeCalendarHeadCell.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { RangeCalendarHeadCellProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { RangeCalendarHeadCell, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarHeader.vue b/app/components/pub/ui/range-calendar/RangeCalendarHeader.vue
index b99648f5..3b57bef2 100644
--- a/app/components/pub/ui/range-calendar/RangeCalendarHeader.vue
+++ b/app/components/pub/ui/range-calendar/RangeCalendarHeader.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { RangeCalendarHeaderProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { RangeCalendarHeader, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarHeading.vue b/app/components/pub/ui/range-calendar/RangeCalendarHeading.vue
index 0f592bc5..732bd8ec 100644
--- a/app/components/pub/ui/range-calendar/RangeCalendarHeading.vue
+++ b/app/components/pub/ui/range-calendar/RangeCalendarHeading.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { RangeCalendarHeadingProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { RangeCalendarHeading, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarNextButton.vue b/app/components/pub/ui/range-calendar/RangeCalendarNextButton.vue
index 201151cb..75824d7b 100644
--- a/app/components/pub/ui/range-calendar/RangeCalendarNextButton.vue
+++ b/app/components/pub/ui/range-calendar/RangeCalendarNextButton.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import type { RangeCalendarNextProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ChevronRight } from 'lucide-vue-next'
 import { RangeCalendarNext, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { buttonVariants } from '../button'
 
 const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarPrevButton.vue b/app/components/pub/ui/range-calendar/RangeCalendarPrevButton.vue
index 503ce5cb..89d3df03 100644
--- a/app/components/pub/ui/range-calendar/RangeCalendarPrevButton.vue
+++ b/app/components/pub/ui/range-calendar/RangeCalendarPrevButton.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import type { RangeCalendarPrevProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ChevronLeft } from 'lucide-vue-next'
 import { RangeCalendarPrev, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { buttonVariants } from '../button'
 
 const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()
diff --git a/app/components/pub/ui/resizable/ResizableHandle.vue b/app/components/pub/ui/resizable/ResizableHandle.vue
index 7b57f64d..b96f1ffd 100644
--- a/app/components/pub/ui/resizable/ResizableHandle.vue
+++ b/app/components/pub/ui/resizable/ResizableHandle.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { GripVertical } from 'lucide-vue-next'
 import { SplitterResizeHandle, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
 const emits = defineEmits<SplitterResizeHandleEmits>()
diff --git a/app/components/pub/ui/resizable/ResizablePanelGroup.vue b/app/components/pub/ui/resizable/ResizablePanelGroup.vue
index 397c0b1d..cb3bc1d3 100644
--- a/app/components/pub/ui/resizable/ResizablePanelGroup.vue
+++ b/app/components/pub/ui/resizable/ResizablePanelGroup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { SplitterGroupEmits, SplitterGroupProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { SplitterGroup, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<SplitterGroupEmits>()
diff --git a/app/components/pub/ui/scroll-area/ScrollArea.vue b/app/components/pub/ui/scroll-area/ScrollArea.vue
index 46a132cf..6f26d495 100644
--- a/app/components/pub/ui/scroll-area/ScrollArea.vue
+++ b/app/components/pub/ui/scroll-area/ScrollArea.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { ScrollAreaRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   ScrollAreaCorner,
   ScrollAreaRoot,
@@ -9,6 +8,7 @@ import {
   ScrollAreaViewport,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import ScrollBar from './ScrollBar.vue'
 
 const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/app/components/pub/ui/scroll-area/ScrollBar.vue b/app/components/pub/ui/scroll-area/ScrollBar.vue
index fadaf9ef..1c61cbf9 100644
--- a/app/components/pub/ui/scroll-area/ScrollBar.vue
+++ b/app/components/pub/ui/scroll-area/ScrollBar.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ScrollAreaScrollbarProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ScrollAreaScrollbar, ScrollAreaThumb } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
   orientation: 'vertical',
diff --git a/app/components/pub/ui/select/SelectContent.vue b/app/components/pub/ui/select/SelectContent.vue
index d06ac835..b15bed29 100644
--- a/app/components/pub/ui/select/SelectContent.vue
+++ b/app/components/pub/ui/select/SelectContent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { SelectContentEmits, SelectContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   SelectContent,
 
@@ -10,6 +9,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { SelectScrollDownButton, SelectScrollUpButton } from '.'
 
 defineOptions({
diff --git a/app/components/pub/ui/select/SelectGroup.vue b/app/components/pub/ui/select/SelectGroup.vue
index ef6b3c15..c6524f58 100644
--- a/app/components/pub/ui/select/SelectGroup.vue
+++ b/app/components/pub/ui/select/SelectGroup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { SelectGroupProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { SelectGroup } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/select/SelectItem.vue b/app/components/pub/ui/select/SelectItem.vue
index f1c81907..3858ab9c 100644
--- a/app/components/pub/ui/select/SelectItem.vue
+++ b/app/components/pub/ui/select/SelectItem.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { SelectItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   SelectItem,
   SelectItemIndicator,
@@ -10,6 +9,7 @@ import {
   useForwardProps,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/select/SelectLabel.vue b/app/components/pub/ui/select/SelectLabel.vue
index 4869948e..14c5091b 100644
--- a/app/components/pub/ui/select/SelectLabel.vue
+++ b/app/components/pub/ui/select/SelectLabel.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { SelectLabelProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { SelectLabel } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
 </script>
diff --git a/app/components/pub/ui/select/SelectScrollDownButton.vue b/app/components/pub/ui/select/SelectScrollDownButton.vue
index 345134e5..a50c2a18 100644
--- a/app/components/pub/ui/select/SelectScrollDownButton.vue
+++ b/app/components/pub/ui/select/SelectScrollDownButton.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { SelectScrollDownButtonProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { SelectScrollDownButton, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/select/SelectScrollUpButton.vue b/app/components/pub/ui/select/SelectScrollUpButton.vue
index 5e369815..79800203 100644
--- a/app/components/pub/ui/select/SelectScrollUpButton.vue
+++ b/app/components/pub/ui/select/SelectScrollUpButton.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { SelectScrollUpButtonProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { SelectScrollUpButton, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/select/SelectSeparator.vue b/app/components/pub/ui/select/SelectSeparator.vue
index 79987f54..e8f05903 100644
--- a/app/components/pub/ui/select/SelectSeparator.vue
+++ b/app/components/pub/ui/select/SelectSeparator.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { SelectSeparatorProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { SelectSeparator } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/select/SelectTrigger.vue b/app/components/pub/ui/select/SelectTrigger.vue
index cfcf80b4..254bc4bc 100644
--- a/app/components/pub/ui/select/SelectTrigger.vue
+++ b/app/components/pub/ui/select/SelectTrigger.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { SelectTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { SelectIcon, SelectTrigger, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/separator/Separator.vue b/app/components/pub/ui/separator/Separator.vue
index b1a98f14..9baddcdc 100644
--- a/app/components/pub/ui/separator/Separator.vue
+++ b/app/components/pub/ui/separator/Separator.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { SeparatorProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Separator } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<
   SeparatorProps & { class?: HTMLAttributes['class'], label?: string }
diff --git a/app/components/pub/ui/sheet/SheetContent.vue b/app/components/pub/ui/sheet/SheetContent.vue
index a8561bfb..de060270 100644
--- a/app/components/pub/ui/sheet/SheetContent.vue
+++ b/app/components/pub/ui/sheet/SheetContent.vue
@@ -2,7 +2,6 @@
 import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 import type { SheetVariants } from '.'
-import { cn } from '@/lib/utils'
 import { X } from 'lucide-vue-next'
 import {
   DialogClose,
@@ -14,6 +13,7 @@ import {
   VisuallyHidden,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { sheetVariants } from '.'
 
 interface SheetContentProps extends DialogContentProps {
diff --git a/app/components/pub/ui/sheet/SheetDescription.vue b/app/components/pub/ui/sheet/SheetDescription.vue
index 06b21bba..53e886bd 100644
--- a/app/components/pub/ui/sheet/SheetDescription.vue
+++ b/app/components/pub/ui/sheet/SheetDescription.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { DialogDescriptionProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { DialogDescription } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/sheet/SheetTitle.vue b/app/components/pub/ui/sheet/SheetTitle.vue
index b1661957..2bdb2bcf 100644
--- a/app/components/pub/ui/sheet/SheetTitle.vue
+++ b/app/components/pub/ui/sheet/SheetTitle.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { DialogTitleProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { DialogTitle } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/sidebar/Sidebar.vue b/app/components/pub/ui/sidebar/Sidebar.vue
index 8a0c8bc8..30ea6a6e 100644
--- a/app/components/pub/ui/sidebar/Sidebar.vue
+++ b/app/components/pub/ui/sidebar/Sidebar.vue
@@ -20,7 +20,7 @@ const props = withDefaults(
     side: 'left',
     variant: 'sidebar',
     collapsible: 'offcanvas',
-  }
+  },
 )
 
 const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
@@ -68,7 +68,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
           'group-data-[side=right]:rotate-180',
           variant === 'floating' || variant === 'inset'
             ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]'
-            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]'
+            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
         )
       "
     />
@@ -83,7 +83,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
           variant === 'floating' || variant === 'inset'
             ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+_2px)]'
             : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
-          props.class
+          props.class,
         )
       "
       v-bind="$attrs"
diff --git a/app/components/pub/ui/sidebar/SidebarGroupAction.vue b/app/components/pub/ui/sidebar/SidebarGroupAction.vue
index 74cac4ea..cfbd3b40 100644
--- a/app/components/pub/ui/sidebar/SidebarGroupAction.vue
+++ b/app/components/pub/ui/sidebar/SidebarGroupAction.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { PrimitiveProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Primitive } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<PrimitiveProps & {
   class?: HTMLAttributes['class']
diff --git a/app/components/pub/ui/sidebar/SidebarGroupLabel.vue b/app/components/pub/ui/sidebar/SidebarGroupLabel.vue
index 83826c3e..0b8995d2 100644
--- a/app/components/pub/ui/sidebar/SidebarGroupLabel.vue
+++ b/app/components/pub/ui/sidebar/SidebarGroupLabel.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { PrimitiveProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Primitive } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<PrimitiveProps & {
   class?: HTMLAttributes['class']
diff --git a/app/components/pub/ui/sidebar/SidebarMenuAction.vue b/app/components/pub/ui/sidebar/SidebarMenuAction.vue
index cc6ced01..21d4cb5f 100644
--- a/app/components/pub/ui/sidebar/SidebarMenuAction.vue
+++ b/app/components/pub/ui/sidebar/SidebarMenuAction.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { PrimitiveProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Primitive } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PrimitiveProps & {
   showOnHover?: boolean
diff --git a/app/components/pub/ui/sidebar/SidebarMenuButton.vue b/app/components/pub/ui/sidebar/SidebarMenuButton.vue
index e97c8fa6..92dd31fa 100644
--- a/app/components/pub/ui/sidebar/SidebarMenuButton.vue
+++ b/app/components/pub/ui/sidebar/SidebarMenuButton.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
 import type { SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
+import { computed } from 'vue'
 import Tooltip from '@/components/pub/ui/tooltip/Tooltip.vue'
 import TooltipContent from '@/components/pub/ui/tooltip/TooltipContent.vue'
 import TooltipTrigger from '@/components/pub/ui/tooltip/TooltipTrigger.vue'
-import { computed } from 'vue'
 import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue'
 import { useSidebar } from './utils'
 
@@ -22,7 +22,7 @@ const props = withDefaults(
     as: 'button',
     variant: 'default',
     size: 'default',
-  }
+  },
 )
 
 const { isMobile, state } = useSidebar()
diff --git a/app/components/pub/ui/sidebar/SidebarMenuButtonChild.vue b/app/components/pub/ui/sidebar/SidebarMenuButtonChild.vue
index 43bea5eb..e4f6a172 100644
--- a/app/components/pub/ui/sidebar/SidebarMenuButtonChild.vue
+++ b/app/components/pub/ui/sidebar/SidebarMenuButtonChild.vue
@@ -2,8 +2,8 @@
 import type { PrimitiveProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 import type { SidebarMenuButtonVariants } from '.'
-import { cn } from '@/lib/utils'
 import { Primitive } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { sidebarMenuButtonVariants } from '.'
 
 export interface SidebarMenuButtonProps extends PrimitiveProps {
diff --git a/app/components/pub/ui/sidebar/SidebarMenuSubButton.vue b/app/components/pub/ui/sidebar/SidebarMenuSubButton.vue
index 353b3ae7..b055f71a 100644
--- a/app/components/pub/ui/sidebar/SidebarMenuSubButton.vue
+++ b/app/components/pub/ui/sidebar/SidebarMenuSubButton.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { PrimitiveProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Primitive } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PrimitiveProps & {
   size?: 'sm' | 'md'
diff --git a/app/components/pub/ui/sidebar/SidebarProvider.vue b/app/components/pub/ui/sidebar/SidebarProvider.vue
index d252f951..5538a30d 100644
--- a/app/components/pub/ui/sidebar/SidebarProvider.vue
+++ b/app/components/pub/ui/sidebar/SidebarProvider.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { AppConfigInput } from 'nuxt/schema'
 import type { HTMLAttributes, Ref } from 'vue'
 import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
 import { TooltipProvider } from 'radix-vue'
@@ -23,7 +22,7 @@ const props = withDefaults(
   {
     defaultOpen: true,
     open: undefined,
-  }
+  },
 )
 
 const emits = defineEmits<{
@@ -92,7 +91,7 @@ provideSidebarContext({
       :class="
         cn(
           `group/sidebar-wrapper text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full`,
-          [props.class, sidebar?.side === 'right' ? 'flex-row-reverse' : '']
+          [props.class, sidebar?.side === 'right' ? 'flex-row-reverse' : ''],
         )
       "
     >
diff --git a/app/components/pub/ui/slider/Slider.vue b/app/components/pub/ui/slider/Slider.vue
index b56a323c..d31e75ba 100644
--- a/app/components/pub/ui/slider/Slider.vue
+++ b/app/components/pub/ui/slider/Slider.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<SliderRootEmits>()
diff --git a/app/components/pub/ui/stepper/Stepper.vue b/app/components/pub/ui/stepper/Stepper.vue
index a9bb7826..87cdb398 100644
--- a/app/components/pub/ui/stepper/Stepper.vue
+++ b/app/components/pub/ui/stepper/Stepper.vue
@@ -2,9 +2,9 @@
 import type { StepperRootEmits, StepperRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 
-import { cn } from '@/lib/utils'
 import { StepperRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<StepperRootEmits>()
diff --git a/app/components/pub/ui/stepper/StepperDescription.vue b/app/components/pub/ui/stepper/StepperDescription.vue
index dbf68040..a4cb3bb8 100644
--- a/app/components/pub/ui/stepper/StepperDescription.vue
+++ b/app/components/pub/ui/stepper/StepperDescription.vue
@@ -2,9 +2,9 @@
 import type { StepperDescriptionProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 
-import { cn } from '@/lib/utils'
 import { StepperDescription, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/stepper/StepperIndicator.vue b/app/components/pub/ui/stepper/StepperIndicator.vue
index 75e3751c..39fcc370 100644
--- a/app/components/pub/ui/stepper/StepperIndicator.vue
+++ b/app/components/pub/ui/stepper/StepperIndicator.vue
@@ -2,9 +2,9 @@
 import type { StepperIndicatorProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 
-import { cn } from '@/lib/utils'
 import { StepperIndicator, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/stepper/StepperItem.vue b/app/components/pub/ui/stepper/StepperItem.vue
index 1d3b9450..79f5f95e 100644
--- a/app/components/pub/ui/stepper/StepperItem.vue
+++ b/app/components/pub/ui/stepper/StepperItem.vue
@@ -2,9 +2,9 @@
 import type { StepperItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 
-import { cn } from '@/lib/utils'
 import { StepperItem, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/stepper/StepperSeparator.vue b/app/components/pub/ui/stepper/StepperSeparator.vue
index 50e9b131..05e4beff 100644
--- a/app/components/pub/ui/stepper/StepperSeparator.vue
+++ b/app/components/pub/ui/stepper/StepperSeparator.vue
@@ -2,9 +2,9 @@
 import type { StepperSeparatorProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 
-import { cn } from '@/lib/utils'
 import { StepperSeparator, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/stepper/StepperTitle.vue b/app/components/pub/ui/stepper/StepperTitle.vue
index 70e672c9..d0446648 100644
--- a/app/components/pub/ui/stepper/StepperTitle.vue
+++ b/app/components/pub/ui/stepper/StepperTitle.vue
@@ -2,9 +2,9 @@
 import type { StepperTitleProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 
-import { cn } from '@/lib/utils'
 import { StepperTitle, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/stepper/StepperTrigger.vue b/app/components/pub/ui/stepper/StepperTrigger.vue
index 0c426da1..31107f67 100644
--- a/app/components/pub/ui/stepper/StepperTrigger.vue
+++ b/app/components/pub/ui/stepper/StepperTrigger.vue
@@ -2,9 +2,9 @@
 import type { StepperTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 
-import { cn } from '@/lib/utils'
 import { StepperTrigger, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/switch/Switch.vue b/app/components/pub/ui/switch/Switch.vue
index bb9c199a..e24492dc 100644
--- a/app/components/pub/ui/switch/Switch.vue
+++ b/app/components/pub/ui/switch/Switch.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { SwitchRootEmits, SwitchRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   SwitchRoot,
 
@@ -9,6 +8,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/table/TableEmpty.vue b/app/components/pub/ui/table/TableEmpty.vue
index 6576cdde..f8eda73b 100644
--- a/app/components/pub/ui/table/TableEmpty.vue
+++ b/app/components/pub/ui/table/TableEmpty.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import TableCell from './TableCell.vue'
 import TableRow from './TableRow.vue'
 
diff --git a/app/components/pub/ui/table/separator/Separator.vue b/app/components/pub/ui/table/separator/Separator.vue
index ac098256..bd61c59d 100644
--- a/app/components/pub/ui/table/separator/Separator.vue
+++ b/app/components/pub/ui/table/separator/Separator.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { SeparatorProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Separator } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<
   SeparatorProps & { class?: HTMLAttributes['class'], label?: string }
diff --git a/app/components/pub/ui/tabs/TabsContent.vue b/app/components/pub/ui/tabs/TabsContent.vue
index dc6d9f8a..d1cf99dd 100644
--- a/app/components/pub/ui/tabs/TabsContent.vue
+++ b/app/components/pub/ui/tabs/TabsContent.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { TabsContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { TabsContent } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/tabs/TabsList.vue b/app/components/pub/ui/tabs/TabsList.vue
index f4bd9c04..db0701a0 100644
--- a/app/components/pub/ui/tabs/TabsList.vue
+++ b/app/components/pub/ui/tabs/TabsList.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { TabsListProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { TabsList } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/tabs/TabsTrigger.vue b/app/components/pub/ui/tabs/TabsTrigger.vue
index bb8d92c9..7e6cdccf 100644
--- a/app/components/pub/ui/tabs/TabsTrigger.vue
+++ b/app/components/pub/ui/tabs/TabsTrigger.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { TabsTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { TabsTrigger, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/tags-input/TagsInput.vue b/app/components/pub/ui/tags-input/TagsInput.vue
index a6cc3d7b..bc70a20c 100644
--- a/app/components/pub/ui/tags-input/TagsInput.vue
+++ b/app/components/pub/ui/tags-input/TagsInput.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { TagsInputRootEmits, TagsInputRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { TagsInputRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<TagsInputRootEmits>()
diff --git a/app/components/pub/ui/tags-input/TagsInputInput.vue b/app/components/pub/ui/tags-input/TagsInputInput.vue
index 83365804..3a04aecb 100644
--- a/app/components/pub/ui/tags-input/TagsInputInput.vue
+++ b/app/components/pub/ui/tags-input/TagsInputInput.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { TagsInputInputProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { TagsInputInput, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/tags-input/TagsInputItem.vue b/app/components/pub/ui/tags-input/TagsInputItem.vue
index e074a475..41795145 100644
--- a/app/components/pub/ui/tags-input/TagsInputItem.vue
+++ b/app/components/pub/ui/tags-input/TagsInputItem.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { TagsInputItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-
 import { TagsInputItem, useForwardProps } from 'radix-vue'
+
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/tags-input/TagsInputItemDelete.vue b/app/components/pub/ui/tags-input/TagsInputItemDelete.vue
index 77489a36..9745d159 100644
--- a/app/components/pub/ui/tags-input/TagsInputItemDelete.vue
+++ b/app/components/pub/ui/tags-input/TagsInputItemDelete.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { TagsInputItemDeleteProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { TagsInputItemDelete, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/tags-input/TagsInputItemText.vue b/app/components/pub/ui/tags-input/TagsInputItemText.vue
index 5c8888cf..608578cd 100644
--- a/app/components/pub/ui/tags-input/TagsInputItemText.vue
+++ b/app/components/pub/ui/tags-input/TagsInputItemText.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { TagsInputItemTextProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { TagsInputItemText, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/textarea/Textarea.vue b/app/components/pub/ui/textarea/Textarea.vue
index 1dee55d2..b72cb7e7 100644
--- a/app/components/pub/ui/textarea/Textarea.vue
+++ b/app/components/pub/ui/textarea/Textarea.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/app/components/pub/ui/toast/Toast.vue b/app/components/pub/ui/toast/Toast.vue
index 4f8478d8..2f17a29a 100644
--- a/app/components/pub/ui/toast/Toast.vue
+++ b/app/components/pub/ui/toast/Toast.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ToastRootEmits } from 'radix-vue'
 import type { ToastProps } from '.'
-import { cn } from '@/lib/utils'
 import { ToastRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { toastVariants } from '.'
 
 const props = defineProps<ToastProps>()
diff --git a/app/components/pub/ui/toast/ToastAction.vue b/app/components/pub/ui/toast/ToastAction.vue
index 6b791b94..b8256b9d 100644
--- a/app/components/pub/ui/toast/ToastAction.vue
+++ b/app/components/pub/ui/toast/ToastAction.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ToastActionProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ToastAction } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/toast/ToastClose.vue b/app/components/pub/ui/toast/ToastClose.vue
index 1012e1d7..cf078a61 100644
--- a/app/components/pub/ui/toast/ToastClose.vue
+++ b/app/components/pub/ui/toast/ToastClose.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { ToastCloseProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-
 import { ToastClose } from 'radix-vue'
+
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastCloseProps & {
   class?: HTMLAttributes['class']
diff --git a/app/components/pub/ui/toast/ToastDescription.vue b/app/components/pub/ui/toast/ToastDescription.vue
index 8fd121e4..d51ce436 100644
--- a/app/components/pub/ui/toast/ToastDescription.vue
+++ b/app/components/pub/ui/toast/ToastDescription.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ToastDescriptionProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ToastDescription } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/toast/ToastTitle.vue b/app/components/pub/ui/toast/ToastTitle.vue
index a85d3c8a..f785f963 100644
--- a/app/components/pub/ui/toast/ToastTitle.vue
+++ b/app/components/pub/ui/toast/ToastTitle.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ToastTitleProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ToastTitle } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/toast/ToastViewport.vue b/app/components/pub/ui/toast/ToastViewport.vue
index 13a80741..889ba13e 100644
--- a/app/components/pub/ui/toast/ToastViewport.vue
+++ b/app/components/pub/ui/toast/ToastViewport.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ToastViewportProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ToastViewport } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/app/components/pub/ui/toast/use-toast.ts b/app/components/pub/ui/toast/use-toast.ts
index 228e5a79..00ac23a4 100644
--- a/app/components/pub/ui/toast/use-toast.ts
+++ b/app/components/pub/ui/toast/use-toast.ts
@@ -5,10 +5,10 @@ import { computed, ref } from 'vue'
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
 
-export type StringOrVNode =
-  | string
-  | VNode
-  | (() => VNode)
+export type StringOrVNode
+  = | string
+    | VNode
+    | (() => VNode)
 
 type ToasterToast = ToastProps & {
   id: string
@@ -33,8 +33,8 @@ function genId() {
 
 type ActionType = typeof actionTypes
 
-type Action =
-  | {
+type Action
+  = | {
     type: ActionType['ADD_TOAST']
     toast: ToasterToast
   }
@@ -59,7 +59,7 @@ const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 
 function addToRemoveQueue(toastId: string) {
   if (toastTimeouts.has(toastId))
-    return
+  { return }
 
   const timeout = setTimeout(() => {
     toastTimeouts.delete(toastId)
@@ -113,9 +113,9 @@ function dispatch(action: Action) {
 
     case actionTypes.REMOVE_TOAST:
       if (action.toastId === undefined)
-        state.value.toasts = []
+      { state.value.toasts = [] }
       else
-        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)
+      { state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId) }
 
       break
   }
@@ -150,7 +150,7 @@ function toast(props: Toast) {
       open: true,
       onOpenChange: (open: boolean) => {
         if (!open)
-          dismiss()
+        { dismiss() }
       },
     },
   })
diff --git a/app/components/pub/ui/toggle-group/ToggleGroup.vue b/app/components/pub/ui/toggle-group/ToggleGroup.vue
index 97416f88..c7eaf6dc 100644
--- a/app/components/pub/ui/toggle-group/ToggleGroup.vue
+++ b/app/components/pub/ui/toggle-group/ToggleGroup.vue
@@ -1,19 +1,21 @@
 <script setup lang="ts">
-import type { toggleVariants } from '@/components/ui/toggle'
 import type { VariantProps } from 'class-variance-authority'
 import type { ToggleGroupRootEmits, ToggleGroupRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { toggleVariants } from '@/components/pub/ui/toggle'
 import { ToggleGroupRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed, provide } from 'vue'
+import { cn } from '~/lib/utils'
 
 type ToggleGroupVariants = VariantProps<typeof toggleVariants>
 
-const props = defineProps<ToggleGroupRootProps & {
-  class?: HTMLAttributes['class']
-  variant?: ToggleGroupVariants['variant']
-  size?: ToggleGroupVariants['size']
-}>()
+const props = defineProps<
+  ToggleGroupRootProps & {
+    class?: HTMLAttributes['class']
+    variant?: ToggleGroupVariants['variant']
+    size?: ToggleGroupVariants['size']
+  }
+>()
 const emits = defineEmits<ToggleGroupRootEmits>()
 
 provide('toggleGroup', {
diff --git a/app/components/pub/ui/toggle-group/ToggleGroupItem.vue b/app/components/pub/ui/toggle-group/ToggleGroupItem.vue
index dad82106..0eb5003e 100644
--- a/app/components/pub/ui/toggle-group/ToggleGroupItem.vue
+++ b/app/components/pub/ui/toggle-group/ToggleGroupItem.vue
@@ -2,18 +2,20 @@
 import type { VariantProps } from 'class-variance-authority'
 import type { ToggleGroupItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { toggleVariants } from '@/components/ui/toggle'
-import { cn } from '@/lib/utils'
 import { ToggleGroupItem, useForwardProps } from 'radix-vue'
 import { computed, inject } from 'vue'
+import { toggleVariants } from '@/components/pub/ui/toggle'
+import { cn } from '@/lib/utils'
 
 type ToggleGroupVariants = VariantProps<typeof toggleVariants>
 
-const props = defineProps<ToggleGroupItemProps & {
-  class?: HTMLAttributes['class']
-  variant?: ToggleGroupVariants['variant']
-  size?: ToggleGroupVariants['size']
-}>()
+const props = defineProps<
+  ToggleGroupItemProps & {
+    class?: HTMLAttributes['class']
+    variant?: ToggleGroupVariants['variant']
+    size?: ToggleGroupVariants['size']
+  }
+>()
 
 const context = inject<ToggleGroupVariants>('toggleGroup')
 
@@ -27,10 +29,16 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 <template>
   <ToggleGroupItem
-    v-bind="forwardedProps" :class="cn(toggleVariants({
-      variant: context?.variant || variant,
-      size: context?.size || size,
-    }), props.class)"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        toggleVariants({
+          variant: context?.variant || variant,
+          size: context?.size || size,
+        }),
+        props.class,
+      )
+    "
   >
     <slot />
   </ToggleGroupItem>
diff --git a/app/components/pub/ui/toggle/Toggle.vue b/app/components/pub/ui/toggle/Toggle.vue
index 2a24e28f..03108098 100644
--- a/app/components/pub/ui/toggle/Toggle.vue
+++ b/app/components/pub/ui/toggle/Toggle.vue
@@ -2,9 +2,9 @@
 import type { ToggleEmits, ToggleProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 import type { ToggleVariants } from '.'
-import { cn } from '@/lib/utils'
 import { Toggle, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { toggleVariants } from '.'
 
 const props = withDefaults(defineProps<ToggleProps & {
diff --git a/app/components/pub/ui/tooltip/TooltipContent.vue b/app/components/pub/ui/tooltip/TooltipContent.vue
index 62a65434..91a63071 100644
--- a/app/components/pub/ui/tooltip/TooltipContent.vue
+++ b/app/components/pub/ui/tooltip/TooltipContent.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { TooltipContentEmits, TooltipContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 defineOptions({
   inheritAttrs: false,
diff --git a/app/pages/(features)/patient/add.vue b/app/pages/(features)/patient/add.vue
index f354264d..ec540c08 100644
--- a/app/pages/(features)/patient/add.vue
+++ b/app/pages/(features)/patient/add.vue
@@ -9,8 +9,10 @@ definePageMeta({
   contentFrame: 'cf-full-width',
 })
 
+const route = useRoute()
+
 useHead({
-  title: () => useRoute().meta.title,
+  title: () => route.meta.title,
 })
 
 const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
diff --git a/app/pages/(features)/patient/index.vue b/app/pages/(features)/patient/index.vue
index d4bf0313..cb0f8405 100644
--- a/app/pages/(features)/patient/index.vue
+++ b/app/pages/(features)/patient/index.vue
@@ -9,8 +9,10 @@ definePageMeta({
   contentFrame: 'cf-full-width',
 })
 
+const route = useRoute()
+
 useHead({
-  title: () => useRoute().meta.title,
+  title: () => route.meta.title,
 })
 
 const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']