ui-thing 0.1.49 → 0.1.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.1.49",
+  "version": "0.1.51",
   "description": "CLI used to add Nuxt 3 components to a project",
   "keywords": [
     "cli",
@@ -42,15 +42,15 @@
     "boxen": "^8.0.1",
     "build": "^0.1.4",
     "c12": "^2.0.1",
-    "commander": "^13.0.0",
+    "commander": "^13.1.0",
     "defu": "^6.1.4",
     "execa": "^9.5.2",
     "figlet": "^1.8.0",
     "fs-extra": "^11.3.0",
     "kleur": "^4.1.5",
     "lodash": "^4.17.21",
-    "nypm": "^0.4.1",
-    "ora": "^8.1.1",
+    "nypm": "^0.5.2",
+    "ora": "^8.2.0",
     "prompts": "^2.4.2"
   },
   "devDependencies": {
@@ -58,14 +58,14 @@
     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
     "@types/figlet": "^1.7.0",
     "@types/fs-extra": "^11.0.4",
-    "@types/lodash": "^4.17.14",
-    "@types/node": "^22.10.6",
+    "@types/lodash": "^4.17.15",
+    "@types/node": "^22.13.0",
     "@types/prompts": "^2.4.9",
-    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/coverage-v8": "^3.0.4",
     "magicast": "^0.3.5",
-    "tsup": "^8.3.5",
+    "tsup": "^8.3.6",
     "typescript": "^5.7.3",
-    "vitest": "^2.1.8"
+    "vitest": "^3.0.4"
   },
   "publishConfig": {
     "access": "public"

package/src/comps.ts

@@ -8,7 +8,7 @@ export default [
         fileName: "Accordion/Accordion.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <AccordionRoot v-slot="rootSlotProps" v-bind="forwarded">\n    <slot v-bind="rootSlotProps" :items="items">\n      <template v-for="(item, i) in items" :key="i">\n        <UiAccordionItem v-slot="itemSlotProps" :disabled="item.disabled" :value="item.value">\n          <slot v-bind="{ ...itemSlotProps, ...rootSlotProps, items, item }" name="header">\n            <UiAccordionHeader>\n              <slot v-bind="{ ...itemSlotProps, ...rootSlotProps, items, item }" name="trigger">\n                <UiAccordionTrigger :title="item.title" :icon="item.icon" />\n              </slot>\n            </UiAccordionHeader>\n          </slot>\n          <slot name="content" v-bind="{ ...itemSlotProps, ...rootSlotProps, items, item }">\n            <UiAccordionContent :content="item.content" />\n          </slot>\n        </UiAccordionItem>\n      </template>\n    </slot>\n  </AccordionRoot>\n</template>\n\n<script setup lang="ts">\n  import { AccordionRoot, useForwardPropsEmits } from "radix-vue";\n  import type { AccordionRootEmits, AccordionRootProps } from "radix-vue";\n\n  export interface AccordionItem {\n    title?: string;\n    content?: string;\n    value: string;\n    disabled?: boolean;\n    icon?: string;\n  }\n\n  const props = withDefaults(\n    defineProps<\n      AccordionRootProps & {\n        items?: AccordionItem[];\n      }\n    >(),\n    { type: "single", collapsible: true, items: () => [] }\n  );\n\n  const emits = defineEmits<AccordionRootEmits>();\n  const forwarded = useForwardPropsEmits(reactiveOmit(props, "items"), emits);\n</script>\n',
+          '<template>\n  <AccordionRoot v-slot="rootSlotProps" v-bind="forwarded">\n    <slot v-bind="rootSlotProps" :items="items">\n      <template v-for="(item, i) in items" :key="i">\n        <UiAccordionItem v-slot="itemSlotProps" :disabled="item.disabled" :value="item.value">\n          <slot v-bind="{ ...itemSlotProps, ...rootSlotProps, items, item }" name="header">\n            <UiAccordionHeader>\n              <slot v-bind="{ ...itemSlotProps, ...rootSlotProps, items, item }" name="trigger">\n                <UiAccordionTrigger :title="item.title" :icon="item.icon" />\n              </slot>\n            </UiAccordionHeader>\n          </slot>\n          <slot name="content" v-bind="{ ...itemSlotProps, ...rootSlotProps, items, item }">\n            <UiAccordionContent :content="item.content" />\n          </slot>\n        </UiAccordionItem>\n      </template>\n    </slot>\n  </AccordionRoot>\n</template>\n\n<script setup lang="ts">\n  import { AccordionRoot, useForwardPropsEmits } from "radix-vue";\n  import type { AccordionRootEmits, AccordionRootProps } from "radix-vue";\n\n  export interface AccordionItem {\n    title?: string;\n    content?: string;\n    value: string;\n    disabled?: boolean;\n    icon?: string;\n    [key: string]: any;\n  }\n\n  const props = withDefaults(\n    defineProps<\n      AccordionRootProps & {\n        items?: AccordionItem[];\n      }\n    >(),\n    { type: "single", collapsible: true, items: () => [] }\n  );\n\n  const emits = defineEmits<AccordionRootEmits>();\n  const forwarded = useForwardPropsEmits(reactiveOmit(props, "items"), emits);\n</script>\n',
       },
       {
         fileName: "Accordion/Content.vue",
@@ -32,7 +32,7 @@ export default [
         fileName: "Accordion/Trigger.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <AccordionTrigger v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot :props="props">\n      {{ title }}\n    </slot>\n    <slot name="icon" :props="props">\n      <Icon v-if="icon" :name="icon" class="h-4 w-4 shrink-0 transition-transform duration-200" />\n    </slot>\n  </AccordionTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { AccordionTrigger } from "radix-vue";\n  import type { AccordionTriggerProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      AccordionTriggerProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n        /** The title of the accordion trigger */\n        title?: string;\n        /** The icon to show next to the title */\n        icon?: string;\n      }\n    >(),\n    {\n      class: undefined,\n      title: "",\n      icon: "lucide:chevron-down",\n    }\n  );\n\n  const forwarded = reactiveOmit(props, "class", "icon", "title");\n\n  const styles = tv({\n    base: "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background [&[data-state=open]>svg]:rotate-180",\n  });\n</script>\n',
+          '<template>\n  <AccordionTrigger v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot :props="props">\n      {{ title }}\n    </slot>\n    <slot name="icon" :props="props">\n      <Icon\n        v-if="icon"\n        mode="svg"\n        :name="icon"\n        class="h-4 w-4 shrink-0 transition-transform duration-200"\n      />\n    </slot>\n  </AccordionTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { AccordionTrigger } from "radix-vue";\n  import type { AccordionTriggerProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      AccordionTriggerProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n        /** The title of the accordion trigger */\n        title?: string;\n        /** The icon to show next to the title */\n        icon?: string;\n      }\n    >(),\n    {\n      class: undefined,\n      title: "",\n      icon: "lucide:chevron-down",\n    }\n  );\n\n  const forwarded = reactiveOmit(props, "class", "icon", "title");\n\n  const styles = tv({\n    base: "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background [&[data-state=open]>svg]:rotate-180",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -818,7 +818,7 @@ export default [
         fileName: "datatables.client.ts",
         dirPath: "plugins",
         fileContent:
-          'import DataTablesCore from "datatables.net";\nimport DataTable from "datatables.net-vue3";\nimport JSZip from "jszip";\n\nimport "datatables.net-buttons";\nimport "datatables.net-buttons-dt";\nimport "datatables.net-buttons/js/buttons.colVis.mjs";\nimport "datatables.net-buttons/js/buttons.html5.mjs";\nimport "datatables.net-buttons/js/buttons.print.mjs";\nimport "datatables.net-responsive-dt";\nimport "datatables.net-searchbuilder-dt";\nimport "datatables.net-select-dt";\nimport "datatables.net-fixedcolumns-dt";\nimport "datatables.net-fixedcolumns-dt/css/fixedColumns.dataTables.css";\nimport "datatables.net-fixedheader-dt";\nimport "datatables.net-fixedheader-dt/css/fixedHeader.dataTables.css";\n\n// @ts-expect-error - We are not creating a declaration file for this library\nwindow.JSZip = JSZip;\n\nDataTable.use(DataTablesCore);\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.component("DataTable", DataTable);\n});\n',
+          'import DataTablesCore from "datatables.net";\nimport DataTable from "datatables.net-vue3";\nimport JSZip from "jszip";\n\nimport "datatables.net-buttons";\nimport "datatables.net-buttons-dt";\nimport "datatables.net-buttons/js/buttons.colVis.mjs";\nimport "datatables.net-buttons/js/buttons.html5.mjs";\nimport "datatables.net-buttons/js/buttons.print.mjs";\nimport "datatables.net-responsive-dt";\nimport "datatables.net-searchbuilder-dt";\nimport "datatables.net-select-dt";\nimport "datatables.net-fixedcolumns-dt";\nimport "datatables.net-fixedcolumns-dt/css/fixedColumns.dataTables.css";\nimport "datatables.net-fixedheader-dt";\nimport "datatables.net-fixedheader-dt/css/fixedHeader.dataTables.css";\nimport "datatables.net-colreorder-dt";\nimport "datatables.net-colreorder-dt/css/colReorder.dataTables.css";\n\n// @ts-expect-error - We are not creating a declaration file for this library\nwindow.JSZip = JSZip;\n\nDataTable.use(DataTablesCore);\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.component("DataTable", DataTable);\n});\n',
       },
     ],
     files: [
@@ -826,7 +826,7 @@ export default [
         fileName: "Datatable.client.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <DataTable\n    ref="table"\n    :columns="columns"\n    :ajax="ajax"\n    :data="data"\n    :class="props.class"\n    :options="options"\n  >\n    <template v-for="(_, name) in $slots" #[name]="scope">\n      <slot :name="name" v-bind="scope" />\n    </template>\n  </DataTable>\n</template>\n\n<script lang="ts" setup generic="T extends Record<string, any>">\n  import type DataTableRef from "datatables.net";\n  import type { Config } from "datatables.net";\n\n  export type DataTablesNamedSlotProps<T> = {\n    /** The data to show in the cell (from the `columns.data` configuration) */\n    cellData: keyof T | null;\n    /** The column index for the cell (0-based index) */\n    colIndex: number;\n    /** The data object for the whole row */\n    rowData: T | Record<string, any>;\n    /** Row index for the cell (data index, not the display index) */\n    rowIndex: number;\n    /** Orthogonal data type */\n    type: string;\n  };\n\n  const table = shallowRef<{ dt: InstanceType<typeof DataTableRef<T[]>> } | null>(null);\n\n  const props = withDefaults(\n    defineProps<{\n      data?: Config["data"];\n      class?: any;\n      columns?: Config["columns"];\n      ajax?: Config["ajax"];\n      options?: Config;\n    }>(),\n    {\n      data: () => [],\n      class: "nowrap hover order-column row-border stripe display",\n      options: () => ({}),\n    }\n  );\n\n  const emits = defineEmits<{\n    ready: [any];\n  }>();\n\n  onMounted(() => {\n    nextTick(() => {\n      emits("ready", table.value?.dt);\n    });\n  });\n</script>\n\n<style>\n  :root {\n    --dt-row-selected: 262.1, 83.3%, 57.8%;\n    --dt-row-selected-text: 210, 20%, 98%;\n    --dt-row-selected-link: 262.1, 83.3%, 57.8%;\n    --dt-row-stripe: 0, 0%, 100%;\n    --dt-row-hover: 0, 0%, 100%;\n    --dt-column-ordering: 0, 0%, 100%;\n    --dt-border: 220, 13%, 91%;\n    --dt-foreground: 224, 71.4%, 4.1%;\n  }\n\n  .dark {\n    --dt-row-selected: 263.4, 70%, 50.4%;\n    --dt-row-selected-text: 210, 20%, 98%;\n    --dt-row-selected-link: 263.4, 70%, 50.4%;\n    --dt-row-stripe: 224, 71.4%, 4.1%;\n    --dt-row-hover: 224, 71.4%, 4.1%;\n    --dt-column-ordering: 224, 71.4%, 4.1%;\n    --dt-border: 215, 27.9%, 16.9%;\n    --dt-foreground: 224, 71.4%, 4.1%;\n  }\n\n  table.dataTable td.dt-control {\n    text-align: center;\n    cursor: pointer;\n  }\n  table.dataTable td.dt-control:before {\n    display: inline-block;\n    color: hsla(var(--dt-foreground), 0.5);\n    content: "►";\n  }\n  table.dataTable tr.dt-hasChild td.dt-control:before {\n    content: "▼";\n  }\n\n  table.dataTable thead > tr > th.sorting,\n  table.dataTable thead > tr > th.sorting_asc,\n  table.dataTable thead > tr > th.sorting_desc,\n  table.dataTable thead > tr > th.sorting_asc_disabled,\n  table.dataTable thead > tr > th.sorting_desc_disabled,\n  table.dataTable thead > tr > td.sorting,\n  table.dataTable thead > tr > td.sorting_asc,\n  table.dataTable thead > tr > td.sorting_desc,\n  table.dataTable thead > tr > td.sorting_asc_disabled,\n  table.dataTable thead > tr > td.sorting_desc_disabled,\n  /* V2 */\n  table.dataTable thead > tr > th.dt-orderable-asc,\n  table.dataTable thead > tr > th.dt-orderable-desc,\n  table.dataTable thead > tr > td.dt-orderable-asc,\n  table.dataTable thead > tr > td.dt-orderable-desc {\n    @apply relative cursor-pointer pr-7;\n  }\n  table.dataTable thead > tr > th.sorting:before,\n  table.dataTable thead > tr > th.sorting:after,\n  table.dataTable thead > tr > th.sorting_asc:before,\n  table.dataTable thead > tr > th.sorting_asc:after,\n  table.dataTable thead > tr > th.sorting_desc:before,\n  table.dataTable thead > tr > th.sorting_desc:after,\n  table.dataTable thead > tr > th.sorting_asc_disabled:before,\n  table.dataTable thead > tr > th.sorting_asc_disabled:after,\n  table.dataTable thead > tr > th.sorting_desc_disabled:before,\n  table.dataTable thead > tr > th.sorting_desc_disabled:after,\n  table.dataTable thead > tr > td.sorting:before,\n  table.dataTable thead > tr > td.sorting:after,\n  table.dataTable thead > tr > td.sorting_asc:before,\n  table.dataTable thead > tr > td.sorting_asc:after,\n  table.dataTable thead > tr > td.sorting_desc:before,\n  table.dataTable thead > tr > td.sorting_desc:after,\n  table.dataTable thead > tr > td.sorting_asc_disabled:before,\n  table.dataTable thead > tr > td.sorting_asc_disabled:after,\n  table.dataTable thead > tr > td.sorting_desc_disabled:before,\n  table.dataTable thead > tr > td.sorting_desc_disabled:after,\n  /* V2 */\n  table.dataTable thead > tr > th.dt-orderable-asc:before,\n  table.dataTable thead > tr > th.dt-orderable-asc:after,\n  table.dataTable thead > tr > th.dt-orderable-desc:before,\n  table.dataTable thead > tr > th.dt-orderable-desc:after,\n  table.dataTable thead > tr > td.dt-orderable-asc:before,\n  table.dataTable thead > tr > td.dt-orderable-asc:after,\n  table.dataTable thead > tr > td.dt-orderable-desc:before,\n  table.dataTable thead > tr > td.dt-orderable-desc:after {\n    @apply absolute right-2.5 block text-xs leading-3 opacity-25;\n  }\n  table.dataTable thead > tr > th.sorting:before,\n  table.dataTable thead > tr > th.sorting_asc:before,\n  table.dataTable thead > tr > th.sorting_desc:before,\n  table.dataTable thead > tr > th.sorting_asc_disabled:before,\n  table.dataTable thead > tr > th.sorting_desc_disabled:before,\n  table.dataTable thead > tr > td.sorting:before,\n  table.dataTable thead > tr > td.sorting_asc:before,\n  table.dataTable thead > tr > td.sorting_desc:before,\n  table.dataTable thead > tr > td.sorting_asc_disabled:before,\n  table.dataTable thead > tr > td.sorting_desc_disabled:before,\n  /* V2 */\n  table.dataTable thead > tr > th.dt-orderable-asc:before,\n  table.dataTable thead > tr > th.dt-orderable-desc:before,\n  table.dataTable thead > tr > td.dt-orderable-asc:before,\n  table.dataTable thead > tr > td.dt-orderable-desc:before {\n    @apply bottom-[43%] size-[14px] bg-[url(\'https://api.iconify.design/lucide:chevron-up.svg\')] bg-contain bg-center bg-no-repeat content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-up.svg?color=white\')];\n  }\n  table.dataTable thead > tr > th.sorting:after,\n  table.dataTable thead > tr > th.sorting_asc:after,\n  table.dataTable thead > tr > th.sorting_desc:after,\n  table.dataTable thead > tr > th.sorting_asc_disabled:after,\n  table.dataTable thead > tr > th.sorting_desc_disabled:after,\n  table.dataTable thead > tr > td.sorting:after,\n  table.dataTable thead > tr > td.sorting_asc:after,\n  table.dataTable thead > tr > td.sorting_desc:after,\n  table.dataTable thead > tr > td.sorting_asc_disabled:after,\n  table.dataTable thead > tr > td.sorting_desc_disabled:after,\n  /* V2 */\n  table.dataTable thead > tr > th.dt-orderable-asc:after,\n  table.dataTable thead > tr > th.dt-orderable-desc:after,\n  table.dataTable thead > tr > td.dt-orderable-asc:after,\n  table.dataTable thead > tr > td.dt-orderable-desc:after {\n    @apply top-[43%] size-[14px] bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg\')] bg-contain bg-center bg-no-repeat content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg?color=white\')];\n  }\n  table.dataTable thead > tr > th.sorting_asc:before,\n  table.dataTable thead > tr > th.sorting_desc:after,\n  table.dataTable thead > tr > td.sorting_asc:before,\n  table.dataTable thead > tr > td.sorting_desc:after,\n  /* V2 */\n  table.dataTable thead > tr > th.dt-ordering-asc:before,\n  table.dataTable thead > tr > th.dt-ordering-desc:after {\n    @apply opacity-80;\n  }\n  table.dataTable thead > tr > th.sorting_desc_disabled:after,\n  table.dataTable thead > tr > th.sorting_asc_disabled:before,\n  table.dataTable thead > tr > td.sorting_desc_disabled:after,\n  table.dataTable thead > tr > td.sorting_asc_disabled:before {\n    @apply hidden;\n  }\n  table.dataTable thead > tr > th:active,\n  table.dataTable thead > tr > td:active {\n    @apply outline-none;\n  }\n\n  div.dataTables_scrollBody > table.dataTable > thead > tr > th:before,\n  div.dataTables_scrollBody > table.dataTable > thead > tr > th:after,\n  div.dataTables_scrollBody > table.dataTable > thead > tr > td:before,\n  div.dataTables_scrollBody > table.dataTable > thead > tr > td:after {\n    @apply hidden;\n  }\n\n  div.dataTables_processing {\n    @apply absolute left-[50%] top-[50%] ml-[-100px] mt-[-26px] w-[200px] p-0.5 text-center;\n  }\n  div.dataTables_processing > div:last-child {\n    @apply relative mx-auto my-4 h-4 w-20;\n  }\n  div.dataTables_processing > div:last-child > div {\n    @apply absolute top-0 h-3.5 w-3.5 rounded-full;\n    background: hsl(var(--dt-row-selected));\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\n  }\n  div.dataTables_processing > div:last-child > div:nth-child(1) {\n    left: 8px;\n    animation: datatables-loader-1 0.6s infinite;\n  }\n  div.dataTables_processing > div:last-child > div:nth-child(2) {\n    left: 8px;\n    animation: datatables-loader-2 0.6s infinite;\n  }\n  div.dataTables_processing > div:last-child > div:nth-child(3) {\n    left: 32px;\n    animation: datatables-loader-2 0.6s infinite;\n  }\n  div.dataTables_processing > div:last-child > div:nth-child(4) {\n    left: 56px;\n    animation: datatables-loader-3 0.6s infinite;\n  }\n\n  @keyframes datatables-loader-1 {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  @keyframes datatables-loader-3 {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  }\n  @keyframes datatables-loader-2 {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(24px, 0);\n    }\n  }\n  .dtfh-floatingparent.dtfh-floatingparent-head {\n    @apply z-10 bg-background/90 backdrop-blur;\n  }\n  table.dataTable.nowrap th,\n  table.dataTable.nowrap td {\n    white-space: nowrap;\n  }\n  table.dataTable th.dt-left,\n  table.dataTable td.dt-left {\n    text-align: left;\n  }\n  table.dataTable th.dt-center,\n  table.dataTable td.dt-center,\n  table.dataTable td.dataTables_empty {\n    text-align: center;\n  }\n  table.dataTable th.dt-right,\n  table.dataTable td.dt-right {\n    text-align: right;\n  }\n  table.dataTable th.dt-justify,\n  table.dataTable td.dt-justify {\n    text-align: justify;\n  }\n  table.dataTable th.dt-nowrap,\n  table.dataTable td.dt-nowrap {\n    white-space: nowrap;\n  }\n  table.dataTable thead th,\n  table.dataTable thead td,\n  table.dataTable tfoot th,\n  table.dataTable tfoot td {\n    text-align: left;\n  }\n  table.dataTable thead th.dt-head-left,\n  table.dataTable thead td.dt-head-left,\n  table.dataTable tfoot th.dt-head-left,\n  table.dataTable tfoot td.dt-head-left {\n    text-align: left;\n  }\n  table.dataTable thead th.dt-head-center,\n  table.dataTable thead td.dt-head-center,\n  table.dataTable tfoot th.dt-head-center,\n  table.dataTable tfoot td.dt-head-center {\n    text-align: center;\n  }\n  table.dataTable thead th.dt-head-right,\n  table.dataTable thead td.dt-head-right,\n  table.dataTable tfoot th.dt-head-right,\n  table.dataTable tfoot td.dt-head-right {\n    text-align: right;\n  }\n  table.dataTable thead th.dt-head-justify,\n  table.dataTable thead td.dt-head-justify,\n  table.dataTable tfoot th.dt-head-justify,\n  table.dataTable tfoot td.dt-head-justify {\n    text-align: justify;\n  }\n  table.dataTable thead th.dt-head-nowrap,\n  table.dataTable thead td.dt-head-nowrap,\n  table.dataTable tfoot th.dt-head-nowrap,\n  table.dataTable tfoot td.dt-head-nowrap {\n    white-space: nowrap;\n  }\n  table.dataTable tbody th.dt-body-left,\n  table.dataTable tbody td.dt-body-left {\n    text-align: left;\n  }\n  table.dataTable tbody th.dt-body-center,\n  table.dataTable tbody td.dt-body-center {\n    text-align: center;\n  }\n  table.dataTable tbody th.dt-body-right,\n  table.dataTable tbody td.dt-body-right {\n    text-align: right;\n  }\n  table.dataTable tbody th.dt-body-justify,\n  table.dataTable tbody td.dt-body-justify {\n    text-align: justify;\n  }\n  table.dataTable tbody th.dt-body-nowrap,\n  table.dataTable tbody td.dt-body-nowrap {\n    white-space: nowrap;\n  }\n\n  /* Table Styles */\n\n  table.dataTable {\n    @apply w-full table-auto border-collapse;\n  }\n\n  /* Table header styles */\n  table.dataTable thead th,\n  table.dataTable tfoot th {\n    @apply text-left text-sm font-medium text-muted-foreground;\n  }\n\n  table.dataTable > thead > tr > th {\n    @apply border-b border-t-0 px-6 py-3;\n  }\n  table.dataTable > thead > tr > td {\n    @apply border-b px-6 py-3 text-sm;\n  }\n  table.dataTable > thead > tr > th:active,\n  table.dataTable > thead > tr > td:active {\n    @apply outline-none;\n  }\n  table.dataTable > tfoot > tr > th,\n  table.dataTable > tfoot > tr > td {\n    @apply border-t px-6 py-3;\n  }\n  table.dataTable tbody tr {\n    @apply bg-transparent;\n  }\n  table.dataTable tbody tr.selected > * {\n    @apply bg-primary/10;\n  }\n  table.dataTable tbody tr.selected a {\n    @apply text-primary;\n  }\n  table.dataTable tbody th,\n  table.dataTable tbody td {\n    @apply px-6 py-3 text-sm;\n  }\n  table.dataTable.row-border > tbody > tr > th,\n  table.dataTable.row-border > tbody > tr > td,\n  table.dataTable.display > tbody > tr > th,\n  table.dataTable.display > tbody > tr > td {\n    @apply border-t;\n  }\n  table.dataTable.row-border > tbody > tr:first-child > th,\n  table.dataTable.row-border > tbody > tr:first-child > td,\n  table.dataTable.display > tbody > tr:first-child > th,\n  table.dataTable.display > tbody > tr:first-child > td {\n    @apply border-t-0;\n  }\n  table.dataTable.row-border > tbody > tr.selected + tr.selected > td,\n  table.dataTable.display > tbody > tr.selected + tr.selected > td {\n    @apply border-t-primary/30;\n  }\n  table.dataTable.cell-border > tbody > tr > th,\n  table.dataTable.cell-border > tbody > tr > td {\n    @apply border-r border-t;\n  }\n  table.dataTable.cell-border > tbody > tr > th:first-child,\n  table.dataTable.cell-border > tbody > tr > td:first-child {\n    @apply border-l;\n  }\n  table.dataTable.cell-border > tbody > tr:first-child > th,\n  table.dataTable.cell-border > tbody > tr:first-child > td {\n    @apply border-t-0;\n  }\n  table.dataTable.stripe > tbody > tr.odd > *,\n  table.dataTable.display > tbody > tr.odd > * {\n    @apply bg-muted/50;\n  }\n  table.dataTable.stripe > tbody > tr.odd.selected > *,\n  table.dataTable.display > tbody > tr.odd.selected > * {\n    @apply bg-primary/10;\n  }\n  table.dataTable.hover > tbody > tr:hover > *,\n  table.dataTable.display > tbody > tr:hover > * {\n    @apply bg-muted;\n  }\n  table.dataTable.hover > tbody > tr.selected:hover > *,\n  table.dataTable.display > tbody > tr.selected:hover > * {\n    @apply !bg-primary/10;\n  }\n  table.dataTable.order-column > tbody tr > .sorting_1,\n  table.dataTable.order-column > tbody tr > .sorting_2,\n  table.dataTable.order-column > tbody tr > .sorting_3,\n  table.dataTable.display > tbody tr > .sorting_1,\n  table.dataTable.display > tbody tr > .sorting_2,\n  table.dataTable.display > tbody tr > .sorting_3 {\n    @apply bg-muted;\n  }\n  table.dataTable.order-column > tbody tr.selected > .sorting_1,\n  table.dataTable.order-column > tbody tr.selected > .sorting_2,\n  table.dataTable.order-column > tbody tr.selected > .sorting_3,\n  table.dataTable.display > tbody tr.selected > .sorting_1,\n  table.dataTable.display > tbody tr.selected > .sorting_2,\n  table.dataTable.display > tbody tr.selected > .sorting_3 {\n    @apply !bg-primary/10;\n  }\n  table.dataTable.display > tbody > tr.odd > .sorting_1,\n  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1 {\n    @apply bg-muted/50;\n  }\n  table.dataTable.display > tbody > tr.odd > .sorting_2,\n  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_2 {\n    @apply bg-muted/30;\n  }\n  table.dataTable.display > tbody > tr.odd > .sorting_3,\n  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_3 {\n    @apply bg-muted/10;\n  }\n  table.dataTable.display > tbody > tr.odd.selected > .sorting_1,\n  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_1 {\n    @apply bg-muted/50;\n  }\n  table.dataTable.display > tbody > tr.odd.selected > .sorting_2,\n  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_2 {\n    @apply bg-muted/30;\n  }\n  table.dataTable.display > tbody > tr.odd.selected > .sorting_3,\n  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_3 {\n    @apply bg-muted/10;\n  }\n  table.dataTable.display > tbody > tr.even > .sorting_1,\n  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_1 {\n    @apply bg-muted/50;\n  }\n  table.dataTable.display > tbody > tr.even > .sorting_2,\n  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_2 {\n    @apply bg-muted/30;\n  }\n  table.dataTable.display > tbody > tr.even > .sorting_3,\n  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_3 {\n    @apply bg-muted/10;\n  }\n  table.dataTable.display > tbody > tr.even.selected > .sorting_1,\n  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_1 {\n    @apply bg-primary/10;\n  }\n  table.dataTable.display > tbody > tr.even.selected > .sorting_2,\n  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_2 {\n    @apply bg-primary/10;\n  }\n  table.dataTable.display > tbody > tr.even.selected > .sorting_3,\n  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_3 {\n    @apply bg-primary/10;\n  }\n  table.dataTable.display tbody tr:hover > .sorting_1,\n  table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {\n    @apply bg-muted;\n  }\n  table.dataTable.display tbody tr:hover > .sorting_2,\n  table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {\n    @apply bg-muted;\n  }\n  table.dataTable.display tbody tr:hover > .sorting_3,\n  table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {\n    @apply bg-muted;\n  }\n  table.dataTable.display tbody tr:hover.selected > .sorting_1,\n  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {\n    @apply bg-primary/10;\n  }\n  table.dataTable.display tbody tr:hover.selected > .sorting_2,\n  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {\n    @apply bg-primary/10;\n  }\n  table.dataTable.display tbody tr:hover.selected > .sorting_3,\n  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {\n    @apply bg-primary/10;\n  }\n  table.dataTable.no-footer {\n    @apply border-b-0;\n  }\n  table.dataTable.compact thead th,\n  table.dataTable.compact thead td,\n  table.dataTable.compact tfoot th,\n  table.dataTable.compact tfoot td,\n  table.dataTable.compact tbody th,\n  table.dataTable.compact tbody td {\n    @apply px-4 py-2;\n  }\n\n  table.dataTable th,\n  table.dataTable td {\n    @apply box-content border-y;\n  }\n\n  table.dataTable tr:last-child td {\n    @apply !border-b-0;\n  }\n\n  /* Control feature layout */\n  .dataTables_wrapper {\n    @apply w-full overflow-x-auto;\n  }\n\n  /* Export button styles - v1 of datatables */\n  .dataTables_wrapper .dt-buttons {\n    @apply inline-flex flex-wrap items-center gap-2;\n    button {\n      @apply inline-flex h-9 items-center gap-2 whitespace-nowrap rounded-md border bg-background px-3 text-sm text-muted-foreground hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\n    }\n  }\n  /* V2 of datatables button styles. \n  */\n  .dt-buttons {\n    @apply inline-flex flex-wrap items-center gap-2;\n    button {\n      @apply inline-flex h-9 items-center gap-2 whitespace-nowrap rounded-md border bg-background px-3 text-sm text-muted-foreground hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\n    }\n  }\n\n  /*  Copy modal */\n  .dt-button-info {\n    @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur;\n  }\n\n  /* Select box at bottom showing number of records being displayed - v1 of datatables */\n  .dataTables_wrapper .dataTables_length {\n    label {\n      @apply inline-flex items-center gap-2 text-sm font-normal text-muted-foreground;\n      select {\n        @apply h-9 w-[70px] cursor-pointer rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus-visible:border-input focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background sm:text-sm;\n      }\n    }\n  }\n  /* Select box at the bottom showing how many items are being display - v2 */\n  .dt-length {\n    @apply inline-flex items-center gap-2;\n    label {\n      @apply text-sm font-normal text-muted-foreground;\n    }\n    select {\n      @apply h-9 w-[70px] cursor-pointer rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus-visible:border-input focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background sm:text-sm;\n    }\n  }\n\n  /* Search box at the top styles - v1 of datatables */\n  .dataTables_wrapper .dataTables_filter {\n    label {\n      @apply inline-flex w-full cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\n      input {\n        @apply h-9 w-full rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input sm:text-sm;\n      }\n    }\n  }\n\n  /* Search box at the top styles -v2 */\n  .dt-search {\n    @apply flex items-center gap-3;\n    label {\n      @apply inline-flex cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\n    }\n    input {\n      @apply h-9 w-full rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input sm:text-sm md:w-[50%] lg:w-[250px];\n    }\n  }\n\n  /* Info text that shows `Showing X to XX of XXXX entries - v1  */\n  .dataTables_wrapper .dataTables_info,\n  .dt-info {\n    @apply flex items-center gap-3 text-sm !text-muted-foreground;\n  }\n\n  /* Pagination button styles - v1 datatables */\n  .dataTables_wrapper .dataTables_paginate {\n    .paginate_button {\n      @apply ml-1 box-border inline-flex h-9 min-w-[36px] cursor-pointer items-center justify-center rounded bg-transparent px-3 py-2 text-center text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\n    }\n  }\n  /* Pagination button - v2 */\n  .dt-paging-button {\n    @apply ml-1 box-border inline-flex h-9 min-w-[36px] cursor-pointer items-center justify-center rounded bg-transparent px-3 py-2 text-center text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\n    &.current,\n    &:hover {\n      @apply bg-muted;\n    }\n    &.disabled,\n    &.disabled:hover,\n    &.disabled:active {\n      @apply pointer-events-none opacity-50;\n    }\n  }\n  .dataTables_wrapper .dataTables_paginate .paginate_button.current,\n  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {\n    @apply bg-muted;\n  }\n  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,\n  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,\n  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {\n    @apply pointer-events-none opacity-50;\n  }\n  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {\n    @apply bg-muted;\n  }\n  .dataTables_wrapper .dataTables_paginate .paginate_button:active {\n    @apply bg-muted;\n  }\n  .dataTables_wrapper .dataTables_paginate .ellipsis,\n  .dt-paging .ellipsis {\n    @apply inline-flex h-8 min-w-[32px] items-start justify-center text-sm;\n  }\n  .dataTables_wrapper .dataTables_scroll {\n    clear: both;\n  }\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {\n    -webkit-overflow-scrolling: touch;\n  }\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th,\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td,\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th,\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {\n    vertical-align: middle;\n  }\n  .dataTables_wrapper\n    .dataTables_scroll\n    div.dataTables_scrollBody\n    > table\n    > thead\n    > tr\n    > th\n    > div.dataTables_sizing,\n  .dataTables_wrapper\n    .dataTables_scroll\n    div.dataTables_scrollBody\n    > table\n    > thead\n    > tr\n    > td\n    > div.dataTables_sizing,\n  .dataTables_wrapper\n    .dataTables_scroll\n    div.dataTables_scrollBody\n    > table\n    > tbody\n    > tr\n    > th\n    > div.dataTables_sizing,\n  .dataTables_wrapper\n    .dataTables_scroll\n    div.dataTables_scrollBody\n    > table\n    > tbody\n    > tr\n    > td\n    > div.dataTables_sizing {\n    height: 0;\n    overflow: hidden;\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n  .dataTables_wrapper.no-footer .dataTables_scrollBody {\n    @apply border-b;\n  }\n  .dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,\n  .dataTables_wrapper.no-footer div.dataTables_scrollBody > table {\n    border-bottom: none;\n  }\n  .dataTables_wrapper:after {\n    visibility: hidden;\n    display: block;\n    content: "";\n    clear: both;\n    height: 0;\n  }\n\n  /* \n  responsive styles\n   */\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {\n    cursor: default !important;\n  }\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {\n    display: none !important;\n  }\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {\n    cursor: pointer;\n  }\n\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {\n    @apply mr-2 inline-flex h-4 w-4 bg-[url(\'https://api.iconify.design/lucide:chevron-right.svg\')] bg-contain bg-center bg-no-repeat pb-[3px] content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-right.svg?color=white\')];\n  }\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.arrow-right::before,\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control.arrow-right::before {\n    content: "◄";\n  }\n  table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,\n  table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before,\n  table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,\n  table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before {\n    @apply mr-2 inline-block h-4 w-4 bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg\')] bg-contain bg-center bg-no-repeat content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg?color=white\')];\n  }\n  table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,\n  table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {\n    padding-left: 0.333em;\n  }\n  table.dataTable.dtr-column > tbody > tr > td.dtr-control,\n  table.dataTable.dtr-column > tbody > tr > th.dtr-control,\n  table.dataTable.dtr-column > tbody > tr > td.control,\n  table.dataTable.dtr-column > tbody > tr > th.control {\n    cursor: pointer;\n  }\n  table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,\n  table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,\n  table.dataTable.dtr-column > tbody > tr > td.control:before,\n  table.dataTable.dtr-column > tbody > tr > th.control:before {\n    @apply mr-2 inline-flex h-4 w-4 bg-[url(\'https://api.iconify.design/lucide:chevron-right.svg\')] bg-contain bg-center bg-no-repeat pb-[3px] content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-right.svg?color=white\')];\n  }\n  table.dataTable.dtr-column > tbody > tr > td.dtr-control.arrow-right::before,\n  table.dataTable.dtr-column > tbody > tr > th.dtr-control.arrow-right::before,\n  table.dataTable.dtr-column > tbody > tr > td.control.arrow-right::before,\n  table.dataTable.dtr-column > tbody > tr > th.control.arrow-right::before {\n    content: "◄";\n  }\n  table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before,\n  table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before,\n  table.dataTable.dtr-column > tbody > tr.parent td.control:before,\n  table.dataTable.dtr-column > tbody > tr.parent th.control:before,\n  table.dataTable.dtr-column > tbody > tr.dtr-expanded td.dtr-control:before,\n  table.dataTable.dtr-column > tbody > tr.dtr-expanded th.dtr-control:before,\n  table.dataTable.dtr-column > tbody > tr.dtr-expanded td.control:before,\n  table.dataTable.dtr-column > tbody > tr.dtr-expanded th.control:before {\n    @apply mr-2 inline-block h-4 w-4 bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg\')] bg-contain bg-center bg-no-repeat content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg?color=white\')];\n  }\n\n  table.dataTable > tbody td.child {\n    @apply p-0;\n  }\n  table.dataTable > tbody > tr.child:hover,\n  table.dataTable > tbody > tr.child:hover > td.child {\n    background: transparent !important;\n  }\n  table.dataTable > tbody > tr.child ul.dtr-details {\n    @apply m-0 block w-full list-none p-0;\n  }\n  table.dataTable > tbody > tr.child ul.dtr-details > li {\n    @apply flex items-center gap-6 border-b p-3 px-7 hover:bg-muted;\n  }\n\n  table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {\n    @apply border-b-0;\n  }\n  table.dataTable > tbody > tr.child span.dtr-title {\n    @apply inline-block min-w-[80px] font-bold;\n  }\n  /* Responsive modal */\n  div.dtr-modal {\n    @apply fixed left-0 top-0 z-[1000] box-border size-full;\n  }\n  div.dtr-modal div.dtr-modal-display {\n    @apply absolute left-1/2 top-1/2 z-[102] max-h-[80%] w-full max-w-screen-sm -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-md border bg-background p-4 md:px-7 md:py-4 lg:max-h-[90%];\n  }\n  div.dtr-modal div.dtr-modal-content {\n    @apply relative flex flex-col p-0 text-[15px];\n    h2 {\n      @apply text-lg font-semibold text-foreground;\n    }\n    table tr td {\n      @apply space-x-10 pb-2 first:font-semibold [&:nth-child(2)]:pl-2;\n    }\n  }\n  div.dtr-modal div.dtr-modal-close {\n    @apply absolute right-2 top-2 z-[10] inline-flex size-6 cursor-pointer items-center justify-center rounded-md bg-muted/10 hover:bg-muted;\n  }\n  div.dtr-modal div.dtr-modal-background {\n    @apply fixed inset-0 z-[101] bg-background/20 backdrop-blur;\n  }\n\n  /* Search Builder Styles */\n  div.dt-button-collection {\n    overflow: visible !important;\n    z-index: 2002 !important;\n  }\n  div.dt-button-collection div.dtsb-searchBuilder {\n    padding-left: 1em !important;\n    padding-right: 1em !important;\n  }\n  div.dt-button-collection.dtb-collection-closeable div.dtsb-titleRow {\n    padding-right: 40px;\n  }\n  .dtsb-greyscale {\n    @apply !border;\n  }\n  div.dtsb-logicContainer .dtsb-greyscale {\n    border: none !important;\n  }\n  div.dtsb-searchBuilder {\n    @apply mb-4 cursor-default justify-evenly text-left;\n  }\n  div.dtsb-searchBuilder button.dtsb-button,\n  div.dtsb-searchBuilder select {\n    @apply text-sm;\n  }\n  div.dtsb-searchBuilder div.dtsb-titleRow {\n    @apply mb-3 flex items-center justify-between;\n  }\n  div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title {\n    @apply inline-block text-sm font-normal;\n  }\n  div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title:empty {\n    display: inline;\n  }\n  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-value,\n  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-data,\n  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-condition {\n    display: block;\n  }\n  div.dtsb-searchBuilder div.dtsb-group {\n    @apply relative clear-both mb-4;\n  }\n  div.dtsb-searchBuilder div.dtsb-group button.dtsb-search {\n    float: right;\n  }\n  div.dtsb-searchBuilder div.dtsb-group button.dtsb-clearGroup {\n    margin: 2px;\n    text-align: center;\n    padding: 0;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\n    -webkit-transform: rotate(90deg);\n    -moz-transform: rotate(90deg);\n    -o-transform: rotate(90deg);\n    -ms-transform: rotate(90deg);\n    transform: rotate(90deg);\n    position: absolute;\n    margin-top: 0.8em;\n    margin-right: 0.8em;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\n    margin-bottom: 0.8em;\n    display: flex;\n    justify-content: flex-start;\n    flex-flow: row wrap;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\n    padding: 0.4em;\n    margin-right: 0.8em;\n    min-width: 5em;\n    max-width: 20em;\n    color: inherit;\n  }\n  div.dtsb-searchBuilder\n    div.dtsb-group\n    div.dtsb-criteria\n    select.dtsb-dropDown\n    option.dtsb-notItalic,\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input option.dtsb-notItalic {\n    font-style: normal;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-italic {\n    font-style: italic;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\n    flex: 1;\n    white-space: nowrap;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont span.dtsp-joiner {\n    margin-right: 0.8em;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input.dtsb-value {\n    width: 33%;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont select,\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input {\n    height: 100%;\n    box-sizing: border-box;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\n    margin-left: auto;\n    display: inline-block;\n  }\n  div.dtsb-searchBuilder\n    div.dtsb-group\n    div.dtsb-criteria\n    div.dtsb-buttonContainer\n    button.dtsb-delete,\n  div.dtsb-searchBuilder\n    div.dtsb-group\n    div.dtsb-criteria\n    div.dtsb-buttonContainer\n    button.dtsb-right,\n  div.dtsb-searchBuilder\n    div.dtsb-group\n    div.dtsb-criteria\n    div.dtsb-buttonContainer\n    button.dtsb-left {\n    margin-right: 0.8em;\n  }\n  div.dtsb-searchBuilder\n    div.dtsb-group\n    div.dtsb-criteria\n    div.dtsb-buttonContainer\n    button.dtsb-delete:last-child,\n  div.dtsb-searchBuilder\n    div.dtsb-group\n    div.dtsb-criteria\n    div.dtsb-buttonContainer\n    button.dtsb-right:last-child,\n  div.dtsb-searchBuilder\n    div.dtsb-group\n    div.dtsb-criteria\n    div.dtsb-buttonContainer\n    button.dtsb-left:last-child {\n    margin-right: 0;\n  }\n  @media screen and (max-width: 550px) {\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\n      display: flex;\n      flex-flow: none;\n      flex-direction: column;\n      justify-content: flex-start;\n      padding-right: calc(35px + 0.8em);\n      margin-bottom: 0px;\n    }\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:first-child),\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:nth-child(2)),\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:last-child) {\n      padding-top: 0.8em;\n    }\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:first-child,\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:nth-child(2),\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:last-child {\n      padding-top: 0em;\n    }\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\n      max-width: none;\n      width: 100%;\n      margin-bottom: 0.8em;\n      margin-right: 0.8em;\n    }\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\n      margin-right: 0.8em;\n    }\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\n      position: absolute;\n      width: 35px;\n      display: flex;\n      flex-wrap: wrap-reverse;\n      right: 0;\n    }\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button {\n      margin-right: 0px !important;\n    }\n  }\n  div.dtsb-searchBuilder button,\n  div.dtsb-searchBuilder select.dtsb-dropDown,\n  div.dtsb-searchBuilder input {\n    @apply bg-background;\n  }\n  div.dtsb-searchBuilder button.dtsb-button {\n    @apply relative box-border inline-flex h-9 cursor-pointer select-none items-center justify-center overflow-hidden text-ellipsis whitespace-nowrap rounded-md border bg-background px-3 py-2 text-sm font-normal text-muted-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\n  }\n  div.dtsb-searchBuilder button.dtsb-button:hover {\n    @apply cursor-pointer bg-muted;\n  }\n  div.dtsb-searchBuilder div.dtsb-logicContainer {\n    @apply overflow-hidden rounded-none border;\n  }\n  div.dtsb-searchBuilder div.dtsb-logicContainer button {\n    @apply rounded-md border-transparent bg-transparent;\n  }\n  div.dtsb-searchBuilder button.dtsb-clearGroup {\n    min-width: 2em;\n    padding: 0;\n  }\n  div.dtsb-searchBuilder button.dtsb-iptbtn {\n    min-width: 100px;\n    text-align: left;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\n    @apply flex flex-row content-start items-start justify-start rounded-md;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-logic {\n    @apply m-0 shrink-0 grow rounded-none border-0;\n    flex-basis: 3em;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-clearGroup {\n    border: none;\n    border-radius: 0px;\n    width: 2em;\n    margin: 0px;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\n    @apply rounded-md border;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-condition,\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-data,\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-value {\n    @apply rounded-md border border-input bg-background text-sm transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input;\n  }\n\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-value {\n    @apply rounded-md border border-input bg-background text-sm transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input;\n  }\n\n  /* Col vis styles */\n  .dt-button-background {\n    @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur-sm;\n  }\n  .dt-button-down-arrow {\n    @apply text-[10px];\n  }\n  .dt-button-collection {\n    @apply relative;\n    [role="menu"] {\n      @apply absolute -left-20 top-7 flex min-w-[200px] flex-col rounded-md border bg-background py-2 shadow before:mx-2 before:mb-2 before:text-xs before:text-muted-foreground/70 before:content-[\'Select_columns\'];\n      button {\n        @apply h-8 rounded-none border-none px-4 text-xs;\n      }\n      .dt-button.buttons-columnVisibility.dt-button-active {\n        @apply text-foreground after:ml-auto after:content-[\'✓\'];\n      }\n    }\n  }\n</style>\n',
+          '<template>\n  <DataTable\n    ref="table"\n    :columns="columns"\n    :ajax="ajax"\n    :data="data"\n    :class="props.class"\n    :options="options"\n  >\n    <template v-for="(_, name) in $slots" #[name]="scope">\n      <slot :name="name" v-bind="scope" />\n    </template>\n  </DataTable>\n</template>\n\n<script lang="ts" setup generic="T extends Record<string, any>">\n  import type DataTableRef from "datatables.net";\n  import type { Config } from "datatables.net";\n\n  export type DataTablesNamedSlotProps<T> = {\n    /** The data to show in the cell (from the `columns.data` configuration) */\n    cellData: keyof T | null;\n    /** The column index for the cell (0-based index) */\n    colIndex: number;\n    /** The data object for the whole row */\n    rowData: T | Record<string, any>;\n    /** Row index for the cell (data index, not the display index) */\n    rowIndex: number;\n    /** Orthogonal data type */\n    type: string;\n  };\n\n  const table = shallowRef<{ dt: InstanceType<typeof DataTableRef<T[]>> } | null>(null);\n\n  const props = withDefaults(\n    defineProps<{\n      data?: Config["data"];\n      class?: any;\n      columns?: Config["columns"];\n      ajax?: Config["ajax"];\n      options?: Config;\n    }>(),\n    {\n      data: () => [],\n      class: "nowrap hover order-column row-border stripe display",\n      options: () => ({}),\n    }\n  );\n\n  const emits = defineEmits<{\n    ready: [any];\n  }>();\n\n  onMounted(() => {\n    nextTick(() => {\n      emits("ready", table.value?.dt);\n    });\n  });\n</script>\n\n<style>\n  :root {\n    --dt-row-selected: 262.1, 83.3%, 57.8%;\n    --dt-row-selected-text: 210, 20%, 98%;\n    --dt-row-selected-link: 262.1, 83.3%, 57.8%;\n    --dt-row-stripe: 0, 0%, 100%;\n    --dt-row-hover: 0, 0%, 100%;\n    --dt-column-ordering: 0, 0%, 100%;\n    --dt-border: 220, 13%, 91%;\n    --dt-foreground: 224, 71.4%, 4.1%;\n  }\n\n  .dark {\n    --dt-row-selected: 263.4, 70%, 50.4%;\n    --dt-row-selected-text: 210, 20%, 98%;\n    --dt-row-selected-link: 263.4, 70%, 50.4%;\n    --dt-row-stripe: 224, 71.4%, 4.1%;\n    --dt-row-hover: 224, 71.4%, 4.1%;\n    --dt-column-ordering: 224, 71.4%, 4.1%;\n    --dt-border: 215, 27.9%, 16.9%;\n    --dt-foreground: 224, 71.4%, 4.1%;\n  }\n\n  table.dataTable td.dt-control {\n    text-align: center;\n    cursor: pointer;\n  }\n  table.dataTable td.dt-control:before {\n    display: inline-block;\n    color: hsla(var(--dt-foreground), 0.5);\n    content: "►";\n  }\n  table.dataTable tr.dt-hasChild td.dt-control:before {\n    content: "▼";\n  }\n\n  table.dataTable thead > tr > th.sorting,\n  table.dataTable thead > tr > th.sorting_asc,\n  table.dataTable thead > tr > th.sorting_desc,\n  table.dataTable thead > tr > th.sorting_asc_disabled,\n  table.dataTable thead > tr > th.sorting_desc_disabled,\n  table.dataTable thead > tr > td.sorting,\n  table.dataTable thead > tr > td.sorting_asc,\n  table.dataTable thead > tr > td.sorting_desc,\n  table.dataTable thead > tr > td.sorting_asc_disabled,\n  table.dataTable thead > tr > td.sorting_desc_disabled,\n  /* V2 */\n  table.dataTable thead > tr > th.dt-orderable-asc,\n  table.dataTable thead > tr > th.dt-orderable-desc,\n  table.dataTable thead > tr > td.dt-orderable-asc,\n  table.dataTable thead > tr > td.dt-orderable-desc {\n    @apply relative cursor-pointer pr-7;\n  }\n  table.dataTable thead > tr > th.sorting:before,\n  table.dataTable thead > tr > th.sorting:after,\n  table.dataTable thead > tr > th.sorting_asc:before,\n  table.dataTable thead > tr > th.sorting_asc:after,\n  table.dataTable thead > tr > th.sorting_desc:before,\n  table.dataTable thead > tr > th.sorting_desc:after,\n  table.dataTable thead > tr > th.sorting_asc_disabled:before,\n  table.dataTable thead > tr > th.sorting_asc_disabled:after,\n  table.dataTable thead > tr > th.sorting_desc_disabled:before,\n  table.dataTable thead > tr > th.sorting_desc_disabled:after,\n  table.dataTable thead > tr > td.sorting:before,\n  table.dataTable thead > tr > td.sorting:after,\n  table.dataTable thead > tr > td.sorting_asc:before,\n  table.dataTable thead > tr > td.sorting_asc:after,\n  table.dataTable thead > tr > td.sorting_desc:before,\n  table.dataTable thead > tr > td.sorting_desc:after,\n  table.dataTable thead > tr > td.sorting_asc_disabled:before,\n  table.dataTable thead > tr > td.sorting_asc_disabled:after,\n  table.dataTable thead > tr > td.sorting_desc_disabled:before,\n  table.dataTable thead > tr > td.sorting_desc_disabled:after,\n  /* V2 */\n  table.dataTable thead > tr > th.dt-orderable-asc:before,\n  table.dataTable thead > tr > th.dt-orderable-asc:after,\n  table.dataTable thead > tr > th.dt-orderable-desc:before,\n  table.dataTable thead > tr > th.dt-orderable-desc:after,\n  table.dataTable thead > tr > td.dt-orderable-asc:before,\n  table.dataTable thead > tr > td.dt-orderable-asc:after,\n  table.dataTable thead > tr > td.dt-orderable-desc:before,\n  table.dataTable thead > tr > td.dt-orderable-desc:after {\n    @apply absolute right-2.5 block text-xs leading-3 opacity-25;\n  }\n  table.dataTable thead > tr > th.sorting:before,\n  table.dataTable thead > tr > th.sorting_asc:before,\n  table.dataTable thead > tr > th.sorting_desc:before,\n  table.dataTable thead > tr > th.sorting_asc_disabled:before,\n  table.dataTable thead > tr > th.sorting_desc_disabled:before,\n  table.dataTable thead > tr > td.sorting:before,\n  table.dataTable thead > tr > td.sorting_asc:before,\n  table.dataTable thead > tr > td.sorting_desc:before,\n  table.dataTable thead > tr > td.sorting_asc_disabled:before,\n  table.dataTable thead > tr > td.sorting_desc_disabled:before,\n  /* V2 */\n  table.dataTable thead > tr > th.dt-orderable-asc:before,\n  table.dataTable thead > tr > th.dt-orderable-desc:before,\n  table.dataTable thead > tr > td.dt-orderable-asc:before,\n  table.dataTable thead > tr > td.dt-orderable-desc:before {\n    @apply bottom-[43%] size-[14px] shrink-0 bg-[url(\'https://api.iconify.design/lucide:chevron-up.svg\')] bg-contain bg-center bg-no-repeat content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-up.svg?color=white\')];\n  }\n  table.dataTable thead > tr > th.sorting:after,\n  table.dataTable thead > tr > th.sorting_asc:after,\n  table.dataTable thead > tr > th.sorting_desc:after,\n  table.dataTable thead > tr > th.sorting_asc_disabled:after,\n  table.dataTable thead > tr > th.sorting_desc_disabled:after,\n  table.dataTable thead > tr > td.sorting:after,\n  table.dataTable thead > tr > td.sorting_asc:after,\n  table.dataTable thead > tr > td.sorting_desc:after,\n  table.dataTable thead > tr > td.sorting_asc_disabled:after,\n  table.dataTable thead > tr > td.sorting_desc_disabled:after,\n  /* V2 */\n  table.dataTable thead > tr > th.dt-orderable-asc:after,\n  table.dataTable thead > tr > th.dt-orderable-desc:after,\n  table.dataTable thead > tr > td.dt-orderable-asc:after,\n  table.dataTable thead > tr > td.dt-orderable-desc:after {\n    @apply top-[43%] size-[14px] shrink-0 bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg\')] bg-contain bg-center bg-no-repeat content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg?color=white\')];\n  }\n  table.dataTable thead > tr > th.sorting_asc:before,\n  table.dataTable thead > tr > th.sorting_desc:after,\n  table.dataTable thead > tr > td.sorting_asc:before,\n  table.dataTable thead > tr > td.sorting_desc:after,\n  /* V2 */\n  table.dataTable thead > tr > th.dt-ordering-asc:before,\n  table.dataTable thead > tr > th.dt-ordering-desc:after {\n    @apply opacity-80;\n  }\n  table.dataTable thead > tr > th.sorting_desc_disabled:after,\n  table.dataTable thead > tr > th.sorting_asc_disabled:before,\n  table.dataTable thead > tr > td.sorting_desc_disabled:after,\n  table.dataTable thead > tr > td.sorting_asc_disabled:before {\n    @apply hidden;\n  }\n  table.dataTable thead > tr > th:active,\n  table.dataTable thead > tr > td:active {\n    @apply outline-none;\n  }\n\n  div.dataTables_scrollBody > table.dataTable > thead > tr > th:before,\n  div.dataTables_scrollBody > table.dataTable > thead > tr > th:after,\n  div.dataTables_scrollBody > table.dataTable > thead > tr > td:before,\n  div.dataTables_scrollBody > table.dataTable > thead > tr > td:after {\n    @apply hidden;\n  }\n\n  div.dataTables_processing,\n  div.dt-processing {\n    @apply absolute inset-0 z-[999] flex size-full items-center justify-center bg-background/50 backdrop-blur-sm transition;\n\n    > div:last-child {\n      @apply relative mx-auto my-4 h-4 w-20;\n\n      > div {\n        @apply absolute top-0 h-3.5 w-3.5 rounded-full bg-primary;\n        animation-timing-function: cubic-bezier(0, 1, 1, 0);\n      }\n\n      > div:nth-child(1) {\n        left: 8px;\n        animation: datatables-loader-1 0.6s infinite;\n      }\n\n      > div:nth-child(2) {\n        left: 8px;\n        animation: datatables-loader-2 0.6s infinite;\n      }\n\n      > div:nth-child(3) {\n        left: 32px;\n        animation: datatables-loader-2 0.6s infinite;\n      }\n\n      > div:nth-child(4) {\n        left: 56px;\n        animation: datatables-loader-3 0.6s infinite;\n      }\n    }\n  }\n  @keyframes datatables-loader-1 {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  @keyframes datatables-loader-3 {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  }\n  @keyframes datatables-loader-2 {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(24px, 0);\n    }\n  }\n  .dtfh-floatingparent.dtfh-floatingparent-head {\n    @apply z-10 bg-background/90 backdrop-blur;\n  }\n  table.dataTable.nowrap th,\n  table.dataTable.nowrap td {\n    white-space: nowrap;\n  }\n  table.dataTable th.dt-left,\n  table.dataTable td.dt-left {\n    text-align: left;\n  }\n  table.dataTable th.dt-center,\n  table.dataTable td.dt-center,\n  table.dataTable td.dataTables_empty {\n    text-align: center;\n  }\n  table.dataTable th.dt-right,\n  table.dataTable td.dt-right {\n    text-align: right;\n  }\n  table.dataTable th.dt-justify,\n  table.dataTable td.dt-justify {\n    text-align: justify;\n  }\n  table.dataTable th.dt-nowrap,\n  table.dataTable td.dt-nowrap {\n    white-space: nowrap;\n  }\n  table.dataTable thead th,\n  table.dataTable thead td,\n  table.dataTable tfoot th,\n  table.dataTable tfoot td {\n    text-align: left;\n  }\n  table.dataTable thead th.dt-head-left,\n  table.dataTable thead td.dt-head-left,\n  table.dataTable tfoot th.dt-head-left,\n  table.dataTable tfoot td.dt-head-left {\n    text-align: left;\n  }\n  table.dataTable thead th.dt-head-center,\n  table.dataTable thead td.dt-head-center,\n  table.dataTable tfoot th.dt-head-center,\n  table.dataTable tfoot td.dt-head-center {\n    text-align: center;\n  }\n  table.dataTable thead th.dt-head-right,\n  table.dataTable thead td.dt-head-right,\n  table.dataTable tfoot th.dt-head-right,\n  table.dataTable tfoot td.dt-head-right {\n    text-align: right;\n  }\n  table.dataTable thead th.dt-head-justify,\n  table.dataTable thead td.dt-head-justify,\n  table.dataTable tfoot th.dt-head-justify,\n  table.dataTable tfoot td.dt-head-justify {\n    text-align: justify;\n  }\n  table.dataTable thead th.dt-head-nowrap,\n  table.dataTable thead td.dt-head-nowrap,\n  table.dataTable tfoot th.dt-head-nowrap,\n  table.dataTable tfoot td.dt-head-nowrap {\n    white-space: nowrap;\n  }\n  table.dataTable tbody th.dt-body-left,\n  table.dataTable tbody td.dt-body-left {\n    text-align: left;\n  }\n  table.dataTable tbody th.dt-body-center,\n  table.dataTable tbody td.dt-body-center {\n    text-align: center;\n  }\n  table.dataTable tbody th.dt-body-right,\n  table.dataTable tbody td.dt-body-right {\n    text-align: right;\n  }\n  table.dataTable tbody th.dt-body-justify,\n  table.dataTable tbody td.dt-body-justify {\n    text-align: justify;\n  }\n  table.dataTable tbody th.dt-body-nowrap,\n  table.dataTable tbody td.dt-body-nowrap {\n    white-space: nowrap;\n  }\n\n  /* Table Styles */\n\n  table.dataTable {\n    @apply w-full table-auto border-collapse;\n  }\n\n  /* Table header styles */\n  table.dataTable thead th,\n  table.dataTable tfoot th {\n    @apply text-left text-sm font-medium text-muted-foreground;\n  }\n\n  table.dataTable > thead > tr > th {\n    @apply border-b border-t-0 px-6 py-3;\n  }\n  table.dataTable > thead > tr > td {\n    @apply border-b px-6 py-3 text-sm;\n  }\n  table.dataTable > thead > tr > th:active,\n  table.dataTable > thead > tr > td:active {\n    @apply outline-none;\n  }\n  table.dataTable > tfoot > tr > th,\n  table.dataTable > tfoot > tr > td {\n    @apply border-t px-6 py-3;\n  }\n  table.dataTable tbody tr {\n    @apply bg-transparent;\n  }\n  table.dataTable tbody tr.selected > * {\n    @apply bg-primary/10;\n  }\n  table.dataTable tbody tr.selected a {\n    @apply text-primary;\n  }\n  table.dataTable tbody th,\n  table.dataTable tbody td {\n    @apply px-6 py-3 text-sm;\n  }\n  table.dataTable.row-border > tbody > tr > th,\n  table.dataTable.row-border > tbody > tr > td,\n  table.dataTable.display > tbody > tr > th,\n  table.dataTable.display > tbody > tr > td {\n    @apply border-t;\n  }\n  table.dataTable.row-border > tbody > tr:first-child > th,\n  table.dataTable.row-border > tbody > tr:first-child > td,\n  table.dataTable.display > tbody > tr:first-child > th,\n  table.dataTable.display > tbody > tr:first-child > td {\n    @apply border-t-0;\n  }\n  table.dataTable.row-border > tbody > tr.selected + tr.selected > td,\n  table.dataTable.display > tbody > tr.selected + tr.selected > td {\n    @apply border-t-primary/30;\n  }\n  table.dataTable.cell-border > tbody > tr > th,\n  table.dataTable.cell-border > tbody > tr > td {\n    @apply border-r border-t;\n  }\n  table.dataTable.cell-border > tbody > tr > th:first-child,\n  table.dataTable.cell-border > tbody > tr > td:first-child {\n    @apply border-l;\n  }\n  table.dataTable.cell-border > tbody > tr:first-child > th,\n  table.dataTable.cell-border > tbody > tr:first-child > td {\n    @apply border-t-0;\n  }\n  table.dataTable.stripe > tbody > tr.odd > *,\n  table.dataTable.display > tbody > tr.odd > * {\n    @apply bg-muted/50;\n  }\n  table.dataTable.stripe > tbody > tr.odd.selected > *,\n  table.dataTable.display > tbody > tr.odd.selected > * {\n    @apply bg-primary/10;\n  }\n  table.dataTable.hover > tbody > tr:hover > *,\n  table.dataTable.display > tbody > tr:hover > * {\n    @apply bg-muted;\n  }\n  table.dataTable.hover > tbody > tr.selected:hover > *,\n  table.dataTable.display > tbody > tr.selected:hover > * {\n    @apply !bg-primary/10;\n  }\n  table.dataTable.order-column > tbody tr > .sorting_1,\n  table.dataTable.order-column > tbody tr > .sorting_2,\n  table.dataTable.order-column > tbody tr > .sorting_3,\n  table.dataTable.display > tbody tr > .sorting_1,\n  table.dataTable.display > tbody tr > .sorting_2,\n  table.dataTable.display > tbody tr > .sorting_3 {\n    @apply bg-muted;\n  }\n  table.dataTable.order-column > tbody tr.selected > .sorting_1,\n  table.dataTable.order-column > tbody tr.selected > .sorting_2,\n  table.dataTable.order-column > tbody tr.selected > .sorting_3,\n  table.dataTable.display > tbody tr.selected > .sorting_1,\n  table.dataTable.display > tbody tr.selected > .sorting_2,\n  table.dataTable.display > tbody tr.selected > .sorting_3 {\n    @apply !bg-primary/10;\n  }\n  table.dataTable.display > tbody > tr.odd > .sorting_1,\n  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1 {\n    @apply bg-muted/50;\n  }\n  table.dataTable.display > tbody > tr.odd > .sorting_2,\n  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_2 {\n    @apply bg-muted/30;\n  }\n  table.dataTable.display > tbody > tr.odd > .sorting_3,\n  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_3 {\n    @apply bg-muted/10;\n  }\n  table.dataTable.display > tbody > tr.odd.selected > .sorting_1,\n  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_1 {\n    @apply bg-muted/50;\n  }\n  table.dataTable.display > tbody > tr.odd.selected > .sorting_2,\n  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_2 {\n    @apply bg-muted/30;\n  }\n  table.dataTable.display > tbody > tr.odd.selected > .sorting_3,\n  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_3 {\n    @apply bg-muted/10;\n  }\n  table.dataTable.display > tbody > tr.even > .sorting_1,\n  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_1 {\n    @apply bg-muted/50;\n  }\n  table.dataTable.display > tbody > tr.even > .sorting_2,\n  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_2 {\n    @apply bg-muted/30;\n  }\n  table.dataTable.display > tbody > tr.even > .sorting_3,\n  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_3 {\n    @apply bg-muted/10;\n  }\n  table.dataTable.display > tbody > tr.even.selected > .sorting_1,\n  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_1 {\n    @apply bg-primary/10;\n  }\n  table.dataTable.display > tbody > tr.even.selected > .sorting_2,\n  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_2 {\n    @apply bg-primary/10;\n  }\n  table.dataTable.display > tbody > tr.even.selected > .sorting_3,\n  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_3 {\n    @apply bg-primary/10;\n  }\n  table.dataTable.display tbody tr:hover > .sorting_1,\n  table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {\n    @apply bg-muted;\n  }\n  table.dataTable.display tbody tr:hover > .sorting_2,\n  table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {\n    @apply bg-muted;\n  }\n  table.dataTable.display tbody tr:hover > .sorting_3,\n  table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {\n    @apply bg-muted;\n  }\n  table.dataTable.display tbody tr:hover.selected > .sorting_1,\n  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {\n    @apply bg-primary/10;\n  }\n  table.dataTable.display tbody tr:hover.selected > .sorting_2,\n  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {\n    @apply bg-primary/10;\n  }\n  table.dataTable.display tbody tr:hover.selected > .sorting_3,\n  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {\n    @apply bg-primary/10;\n  }\n  table.dataTable.no-footer {\n    @apply border-b-0;\n  }\n  table.dataTable.compact thead th,\n  table.dataTable.compact thead td,\n  table.dataTable.compact tfoot th,\n  table.dataTable.compact tfoot td,\n  table.dataTable.compact tbody th,\n  table.dataTable.compact tbody td {\n    @apply px-4 py-2;\n  }\n\n  table.dataTable th,\n  table.dataTable td {\n    @apply box-content border-y;\n  }\n\n  table.dataTable tr:last-child td {\n    @apply !border-b-0;\n  }\n\n  /* Control feature layout */\n  .dataTables_wrapper {\n    @apply w-full overflow-x-auto;\n  }\n\n  /* Export button styles - v1 of datatables */\n  .dataTables_wrapper .dt-buttons {\n    @apply inline-flex flex-wrap items-center gap-2;\n    button {\n      @apply inline-flex h-9 items-center gap-2 whitespace-nowrap rounded-md border bg-background px-3 text-sm text-muted-foreground hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\n    }\n  }\n  /* V2 of datatables button styles. \n  */\n  .dt-buttons {\n    @apply inline-flex flex-wrap items-center gap-2;\n    button {\n      @apply inline-flex h-9 items-center gap-2 whitespace-nowrap rounded-md border bg-background px-3 text-sm text-muted-foreground hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\n    }\n  }\n\n  /*  Copy modal */\n  .dt-button-info {\n    @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur;\n  }\n\n  /* Select box at bottom showing number of records being displayed - v1 of datatables */\n  .dataTables_wrapper .dataTables_length {\n    label {\n      @apply inline-flex items-center gap-2 text-sm font-normal text-muted-foreground;\n      select {\n        @apply h-9 w-[70px] cursor-pointer rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus-visible:border-input focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background sm:text-sm;\n      }\n    }\n  }\n  /* Select box at the bottom showing how many items are being display - v2 */\n  .dt-length {\n    @apply inline-flex items-center gap-2;\n    label {\n      @apply text-sm font-normal text-muted-foreground;\n    }\n    select {\n      @apply h-9 w-[70px] cursor-pointer rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus-visible:border-input focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background sm:text-sm;\n    }\n  }\n\n  /* Search box at the top styles - v1 of datatables */\n  .dataTables_wrapper .dataTables_filter {\n    label {\n      @apply inline-flex w-full cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\n      input {\n        @apply h-9 w-full rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input sm:text-sm;\n      }\n    }\n  }\n\n  /* Search box at the top styles -v2 */\n  .dt-search {\n    @apply flex items-center gap-3;\n    label {\n      @apply inline-flex cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\n    }\n    input {\n      @apply h-9 w-full rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input sm:text-sm md:w-[50%] lg:w-[250px];\n    }\n  }\n\n  /* Info text that shows `Showing X to XX of XXXX entries - v1  */\n  .dataTables_wrapper .dataTables_info,\n  .dt-info {\n    @apply flex items-center gap-3 text-sm !text-muted-foreground;\n  }\n\n  /* Pagination button styles - v1 datatables */\n  .dataTables_wrapper .dataTables_paginate {\n    .paginate_button {\n      @apply ml-1 box-border inline-flex h-9 min-w-[36px] cursor-pointer items-center justify-center rounded bg-transparent px-3 py-2 text-center text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\n    }\n  }\n  /* Pagination button - v2 */\n  .dt-paging-button {\n    @apply ml-1 box-border inline-flex h-9 min-w-[36px] cursor-pointer items-center justify-center rounded bg-transparent px-3 py-2 text-center text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\n    &.current,\n    &:hover {\n      @apply bg-muted;\n    }\n    &.disabled,\n    &.disabled:hover,\n    &.disabled:active {\n      @apply pointer-events-none opacity-50;\n    }\n  }\n  .dataTables_wrapper .dataTables_paginate .paginate_button.current,\n  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {\n    @apply bg-muted;\n  }\n  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,\n  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,\n  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {\n    @apply pointer-events-none opacity-50;\n  }\n  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {\n    @apply bg-muted;\n  }\n  .dataTables_wrapper .dataTables_paginate .paginate_button:active {\n    @apply bg-muted;\n  }\n  .dataTables_wrapper .dataTables_paginate .ellipsis,\n  .dt-paging .ellipsis {\n    @apply inline-flex h-8 min-w-[32px] items-start justify-center text-sm;\n  }\n  .dataTables_wrapper .dataTables_scroll {\n    clear: both;\n  }\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {\n    -webkit-overflow-scrolling: touch;\n  }\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th,\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td,\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th,\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {\n    vertical-align: middle;\n  }\n  .dataTables_wrapper\n    .dataTables_scroll\n    div.dataTables_scrollBody\n    > table\n    > thead\n    > tr\n    > th\n    > div.dataTables_sizing,\n  .dataTables_wrapper\n    .dataTables_scroll\n    div.dataTables_scrollBody\n    > table\n    > thead\n    > tr\n    > td\n    > div.dataTables_sizing,\n  .dataTables_wrapper\n    .dataTables_scroll\n    div.dataTables_scrollBody\n    > table\n    > tbody\n    > tr\n    > th\n    > div.dataTables_sizing,\n  .dataTables_wrapper\n    .dataTables_scroll\n    div.dataTables_scrollBody\n    > table\n    > tbody\n    > tr\n    > td\n    > div.dataTables_sizing {\n    height: 0;\n    overflow: hidden;\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n  .dataTables_wrapper.no-footer .dataTables_scrollBody {\n    @apply border-b;\n  }\n  .dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,\n  .dataTables_wrapper.no-footer div.dataTables_scrollBody > table {\n    border-bottom: none;\n  }\n  .dataTables_wrapper:after {\n    visibility: hidden;\n    display: block;\n    content: "";\n    clear: both;\n    height: 0;\n  }\n\n  /* \n  responsive styles\n   */\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {\n    cursor: default !important;\n  }\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {\n    display: none !important;\n  }\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {\n    cursor: pointer;\n  }\n\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {\n    @apply mr-2 inline-flex size-[14px] shrink-0 bg-[url(\'https://api.iconify.design/lucide:chevron-right.svg\')] bg-contain bg-center bg-no-repeat pb-[3px] content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-right.svg?color=white\')];\n  }\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.arrow-right::before,\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control.arrow-right::before {\n    content: "◄";\n  }\n  table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,\n  table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before,\n  table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,\n  table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before {\n    @apply mr-2 inline-block size-[14px] shrink-0 bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg\')] bg-contain bg-center bg-no-repeat content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg?color=white\')];\n  }\n  table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,\n  table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {\n    padding-left: 0.333em;\n  }\n  table.dataTable.dtr-column > tbody > tr > td.dtr-control,\n  table.dataTable.dtr-column > tbody > tr > th.dtr-control,\n  table.dataTable.dtr-column > tbody > tr > td.control,\n  table.dataTable.dtr-column > tbody > tr > th.control {\n    cursor: pointer;\n  }\n  table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,\n  table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,\n  table.dataTable.dtr-column > tbody > tr > td.control:before,\n  table.dataTable.dtr-column > tbody > tr > th.control:before {\n    @apply mr-2 inline-flex size-[14px] shrink-0 bg-[url(\'https://api.iconify.design/lucide:chevron-right.svg\')] bg-contain bg-center bg-no-repeat pb-[3px] content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-right.svg?color=white\')];\n  }\n  table.dataTable.dtr-column > tbody > tr > td.dtr-control.arrow-right::before,\n  table.dataTable.dtr-column > tbody > tr > th.dtr-control.arrow-right::before,\n  table.dataTable.dtr-column > tbody > tr > td.control.arrow-right::before,\n  table.dataTable.dtr-column > tbody > tr > th.control.arrow-right::before {\n    content: "◄";\n  }\n  table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before,\n  table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before,\n  table.dataTable.dtr-column > tbody > tr.parent td.control:before,\n  table.dataTable.dtr-column > tbody > tr.parent th.control:before,\n  table.dataTable.dtr-column > tbody > tr.dtr-expanded td.dtr-control:before,\n  table.dataTable.dtr-column > tbody > tr.dtr-expanded th.dtr-control:before,\n  table.dataTable.dtr-column > tbody > tr.dtr-expanded td.control:before,\n  table.dataTable.dtr-column > tbody > tr.dtr-expanded th.control:before {\n    @apply mr-2 inline-block size-[14px] shrink-0 bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg\')] bg-contain bg-center bg-no-repeat content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg?color=white\')];\n  }\n\n  table.dataTable > tbody td.child {\n    @apply p-0;\n  }\n  table.dataTable > tbody > tr.child:hover,\n  table.dataTable > tbody > tr.child:hover > td.child {\n    background: transparent !important;\n  }\n  table.dataTable > tbody > tr.child ul.dtr-details {\n    @apply m-0 block w-full list-none p-0;\n  }\n  table.dataTable > tbody > tr.child ul.dtr-details > li {\n    @apply flex items-center gap-6 border-b p-3 px-7 hover:bg-muted;\n  }\n\n  table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {\n    @apply border-b-0;\n  }\n  table.dataTable > tbody > tr.child span.dtr-title {\n    @apply inline-block min-w-[80px] font-bold;\n  }\n  /* Responsive modal */\n  div.dtr-modal {\n    @apply fixed left-0 top-0 z-[1000] box-border size-full;\n  }\n  div.dtr-modal div.dtr-modal-display {\n    @apply absolute left-1/2 top-1/2 z-[102] max-h-[80%] w-full max-w-screen-sm -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-md border bg-background p-4 md:px-7 md:py-4 lg:max-h-[90%];\n  }\n  div.dtr-modal div.dtr-modal-content {\n    @apply relative flex flex-col p-0 text-[15px];\n    h2 {\n      @apply text-lg font-semibold text-foreground;\n    }\n    table tr td {\n      @apply space-x-10 pb-2 first:font-semibold [&:nth-child(2)]:pl-2;\n    }\n  }\n  div.dtr-modal div.dtr-modal-close {\n    @apply absolute right-2 top-2 z-[10] inline-flex size-6 cursor-pointer items-center justify-center rounded-md bg-muted/10 hover:bg-muted;\n  }\n  div.dtr-modal div.dtr-modal-background {\n    @apply fixed inset-0 z-[101] bg-background/20 backdrop-blur;\n  }\n\n  /* Search Builder Styles */\n  div.dt-button-collection {\n    overflow: visible !important;\n    z-index: 2002 !important;\n  }\n  div.dt-button-collection div.dtsb-searchBuilder {\n    padding-left: 1em !important;\n    padding-right: 1em !important;\n  }\n  div.dt-button-collection.dtb-collection-closeable div.dtsb-titleRow {\n    padding-right: 40px;\n  }\n  .dtsb-greyscale {\n    @apply !border;\n  }\n  div.dtsb-logicContainer .dtsb-greyscale {\n    border: none !important;\n  }\n  div.dtsb-searchBuilder {\n    @apply mb-4 cursor-default justify-evenly text-left;\n  }\n  div.dtsb-searchBuilder button.dtsb-button,\n  div.dtsb-searchBuilder select {\n    @apply text-sm;\n  }\n  div.dtsb-searchBuilder div.dtsb-titleRow {\n    @apply mb-3 flex items-center justify-between;\n  }\n  div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title {\n    @apply inline-block text-sm font-normal;\n  }\n  div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title:empty {\n    display: inline;\n  }\n  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-value,\n  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-data,\n  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-condition {\n    display: block;\n  }\n  div.dtsb-searchBuilder div.dtsb-group {\n    @apply relative clear-both mb-4;\n  }\n  div.dtsb-searchBuilder div.dtsb-group button.dtsb-search {\n    float: right;\n  }\n  div.dtsb-searchBuilder div.dtsb-group button.dtsb-clearGroup {\n    margin: 2px;\n    text-align: center;\n    padding: 0;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\n    -webkit-transform: rotate(90deg);\n    -moz-transform: rotate(90deg);\n    -o-transform: rotate(90deg);\n    -ms-transform: rotate(90deg);\n    transform: rotate(90deg);\n    position: absolute;\n    margin-top: 0.8em;\n    margin-right: 0.8em;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\n    margin-bottom: 0.8em;\n    display: flex;\n    justify-content: flex-start;\n    flex-flow: row wrap;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\n    padding: 0.4em;\n    margin-right: 0.8em;\n    min-width: 5em;\n    max-width: 20em;\n    color: inherit;\n  }\n  div.dtsb-searchBuilder\n    div.dtsb-group\n    div.dtsb-criteria\n    select.dtsb-dropDown\n    option.dtsb-notItalic,\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input option.dtsb-notItalic {\n    font-style: normal;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-italic {\n    font-style: italic;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\n    flex: 1;\n    white-space: nowrap;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont span.dtsp-joiner {\n    margin-right: 0.8em;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input.dtsb-value {\n    width: 33%;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont select,\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input {\n    height: 100%;\n    box-sizing: border-box;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\n    margin-left: auto;\n    display: inline-block;\n  }\n  div.dtsb-searchBuilder\n    div.dtsb-group\n    div.dtsb-criteria\n    div.dtsb-buttonContainer\n    button.dtsb-delete,\n  div.dtsb-searchBuilder\n    div.dtsb-group\n    div.dtsb-criteria\n    div.dtsb-buttonContainer\n    button.dtsb-right,\n  div.dtsb-searchBuilder\n    div.dtsb-group\n    div.dtsb-criteria\n    div.dtsb-buttonContainer\n    button.dtsb-left {\n    margin-right: 0.8em;\n  }\n  div.dtsb-searchBuilder\n    div.dtsb-group\n    div.dtsb-criteria\n    div.dtsb-buttonContainer\n    button.dtsb-delete:last-child,\n  div.dtsb-searchBuilder\n    div.dtsb-group\n    div.dtsb-criteria\n    div.dtsb-buttonContainer\n    button.dtsb-right:last-child,\n  div.dtsb-searchBuilder\n    div.dtsb-group\n    div.dtsb-criteria\n    div.dtsb-buttonContainer\n    button.dtsb-left:last-child {\n    margin-right: 0;\n  }\n  @media screen and (max-width: 550px) {\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\n      display: flex;\n      flex-flow: none;\n      flex-direction: column;\n      justify-content: flex-start;\n      padding-right: calc(35px + 0.8em);\n      margin-bottom: 0px;\n    }\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:first-child),\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:nth-child(2)),\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:last-child) {\n      padding-top: 0.8em;\n    }\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:first-child,\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:nth-child(2),\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:last-child {\n      padding-top: 0em;\n    }\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\n      max-width: none;\n      width: 100%;\n      margin-bottom: 0.8em;\n      margin-right: 0.8em;\n    }\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\n      margin-right: 0.8em;\n    }\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\n      position: absolute;\n      width: 35px;\n      display: flex;\n      flex-wrap: wrap-reverse;\n      right: 0;\n    }\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button {\n      margin-right: 0px !important;\n    }\n  }\n  div.dtsb-searchBuilder button,\n  div.dtsb-searchBuilder select.dtsb-dropDown,\n  div.dtsb-searchBuilder input {\n    @apply bg-background;\n  }\n  div.dtsb-searchBuilder button.dtsb-button {\n    @apply relative box-border inline-flex h-9 cursor-pointer select-none items-center justify-center overflow-hidden text-ellipsis whitespace-nowrap rounded-md border bg-background px-3 py-2 text-sm font-normal text-muted-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\n  }\n  div.dtsb-searchBuilder button.dtsb-button:hover {\n    @apply cursor-pointer bg-muted;\n  }\n  div.dtsb-searchBuilder div.dtsb-logicContainer {\n    @apply overflow-hidden rounded-none border;\n  }\n  div.dtsb-searchBuilder div.dtsb-logicContainer button {\n    @apply rounded-md border-transparent bg-transparent;\n  }\n  div.dtsb-searchBuilder button.dtsb-clearGroup {\n    min-width: 2em;\n    padding: 0;\n  }\n  div.dtsb-searchBuilder button.dtsb-iptbtn {\n    min-width: 100px;\n    text-align: left;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\n    @apply flex flex-row content-start items-start justify-start rounded-md;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-logic {\n    @apply m-0 shrink-0 grow rounded-none border-0;\n    flex-basis: 3em;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-clearGroup {\n    border: none;\n    border-radius: 0px;\n    width: 2em;\n    margin: 0px;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\n    @apply rounded-md border;\n  }\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-condition,\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-data,\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-value {\n    @apply rounded-md border border-input bg-background text-sm transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input;\n  }\n\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-value {\n    @apply rounded-md border border-input bg-background text-sm transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input;\n  }\n\n  /* Col vis styles */\n  .dt-button-background {\n    @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur-sm;\n  }\n  .dt-button-down-arrow {\n    @apply text-[10px];\n  }\n  .dt-button-collection {\n    @apply relative;\n    [role="menu"] {\n      @apply absolute -left-20 top-7 flex min-w-[200px] flex-col rounded-md border bg-background py-2 shadow before:mx-2 before:mb-2 before:text-xs before:text-muted-foreground/70 before:content-[\'Select_columns\'];\n      button {\n        @apply h-8 rounded-none border-none px-4 text-xs;\n      }\n      .dt-button.buttons-columnVisibility.dt-button-active {\n        @apply text-foreground after:ml-auto after:content-[\'✓\'];\n      }\n    }\n  }\n</style>\n',
       },
     ],
     utils: [],
@@ -2891,6 +2891,40 @@ export default [
     composables: [],
     plugins: [],
   },
+  {
+    name: "Form Builder",
+    value: "vee-form-builder",
+    deps: ["@vee-validate/nuxt", "@morev/vue-transitions"],
+    askValidator: true,
+    nuxtModules: ["@vee-validate/nuxt", "@morev/vue-transitions/nuxt"],
+    components: [
+      "label",
+      "vee-checkbox",
+      "Vee-input",
+      "divider",
+      "vee-currency-input",
+      "vee-date-field",
+      "vee-textarea",
+      "vee-file-input",
+      "vee-multi-select",
+      "vee-select",
+      "vee-pin-input",
+      "vee-tags-input",
+      "vee-radio-group",
+      "vee-vue-form-slider",
+    ],
+    files: [
+      {
+        fileName: "FormBuilder/FormBuilder.vue",
+        dirPath: "app/components/Ui",
+        fileContent:
+          '<template>\n  <div>\n    <template v-for="(field, index) in fields" :key="index">\n      <template v-if="field.variant === \'Checkbox\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeCheckbox v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'Input\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeInput v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'Divider\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiDivider v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'CurrencyInput\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeCurrencyInput v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'DateField\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeDateField v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'Textarea\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeTextarea v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'FileInput\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeFileInput :name="field.name" v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'MultiSelect\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeMultiSelect v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'Select\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeSelect v-bind="removeFields(field)">\n              <template v-for="(option, optIndex) in field.options" :key="optIndex">\n                <option v-bind="option">{{ option.label }}</option>\n              </template>\n            </UiVeeSelect>\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'RadioGroup\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeRadioGroup :name="field.name" v-bind="removeFields(field)">\n              <template v-for="(option, optIndex) in field.options" :key="optIndex">\n                <div class="mb-2 flex items-center gap-3">\n                  <UiRadioGroupItem :id="option.value" :value="option.value" />\n                  <UiLabel :for="option.value">{{ option.label }}</UiLabel>\n                </div>\n              </template>\n            </UiVeeRadioGroup>\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'PinInput\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeePinInput v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'TagsInput\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeTagsInput v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'VueformSlider\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeVueFormSlider v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n    </template>\n  </div>\n</template>\n\n<script lang="ts">\n  export type FormBuilder = {\n    description?: string;\n    hint?: string;\n    disabled?: boolean;\n    label?: string;\n    name: string;\n    placeholder?: string;\n    required?: boolean;\n    type?: string;\n    value?: any;\n    rules?: any;\n    class?: any;\n    slot?: string;\n    wrapperClass?: any;\n    renderIf?: () => boolean;\n    options?: any[];\n    variant:\n      | "Checkbox"\n      | "Input"\n      | "Divider"\n      | "CurrencyInput"\n      | "DateField"\n      | "FileInput"\n      | "Select"\n      | "Textarea"\n      | "MultiSelect"\n      | "PinInput"\n      | "TagsInput"\n      | "RadioGroup"\n      | "VueformSlider";\n    [key: string]: any;\n  };\n  export type FormBuilderProps = {\n    fields: FormBuilder[];\n  };\n</script>\n<script lang="ts" setup>\n  defineProps<FormBuilderProps>();\n\n  const omit = (obj: FormBuilder, keys: Array<keyof FormBuilder>) =>\n    Object.fromEntries(\n      Object.entries(obj).filter(([key]) => !keys.includes(key as keyof FormBuilder))\n    );\n\n  const removeFields = (field: FormBuilder) => {\n    return omit(field, ["wrapperClass", "renderIf", "variant", "slot"]);\n  };\n</script>\n',
+      },
+    ],
+    utils: [],
+    composables: [],
+    plugins: [],
+  },
   {
     name: "Vee Input",
     value: "vee-input",
@@ -3055,7 +3089,7 @@ export default [
         fileName: "Vee/VueFormSlider.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <Slider v-bind="{ ...forwarded, ...$attrs }" v-model="model" />\n  <TransitionSlide group tag="div">\n    <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n      {{ hint }}\n    </p>\n\n    <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n      {{ errorMessage }}\n    </p>\n  </TransitionSlide>\n</template>\n\n<script lang="ts">\n  import Slider from "@vueform/slider";\n  import { useForwardPropsEmits } from "radix-vue";\n\n  export type SliderFormatObject = {\n    /**\n     * Prefix to prepend to the value.\n     * @example "$"\n     */\n    prefix?: string;\n    /**\n     * Suffix to append to the value.\n     * @example "USD"\n     */\n    suffix?: string;\n    /**\n     * Number of decimals to show.\n     * @example 2\n     */\n    decimals?: number;\n    /**\n     * Character to use as thousand separator.\n     * @example ","\n     */\n    thousand?: string;\n  };\n\n  export interface SliderProps {\n    /**\n     * The hint to display below the slider.\n     */\n    hint?: string;\n    /**\n     * The rules for the slider. Used with vee-validate for validation.\n     */\n    rules?: any;\n    /**\n     * Whether the slider should be validated on mount.\n     */\n    validateOnMount?: boolean;\n    /**\n     * The label of the slider. Used with vee-validate for error messages\n     */\n    label?: string;\n    /**\n     * The name we want to give this slider in the form.\n     */\n    name?: string;\n    /**\n     * The id attribute of slider container DOM.\n     * @default "slider"\n     */\n    id?: string;\n    /**\n     * Whether to update v-model only when the slider value is set and not while dragging.\n     *\n     * If disabled you must not use inline objects as props (eg. format, options, classes) but outsource them to a data property.\n     *\n     * @default true\n     */\n    lazy?: boolean;\n    /**\n     * Whether the slider should be disabled.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Minimum value of the slider.\n     * @default 0\n     */\n    min?: number;\n    /**\n     * Maximum value of the slider.\n     * @default 100\n     */\n    max?: number;\n    /**\n     * The jump between intervals. If `-1` it enables fractions (eg. `1.23`).\n     * @default 1\n     */\n    step?: number;\n    /**\n     * Whether tooltips should show above handlers.\n     * @default true\n     */\n    tooltips?: boolean;\n    /**\n     * When tooltips should be shown.\n     * @default "always"\n     */\n    showTooltip?: "always" | "focus" | "drag";\n    /**\n     * The step distance between two handles when their tooltips should be merged (when step is `-1` then `1` is assumed).\n     *\n     * @example\n     *\n     * ```js\n     * { merge: 5, step: 10 }\n     * // values: 0, <=50 will merge\n     * // values: 0, 60 will not merge\n     *\n     * { merge: 5, step: -1 }\n     *\n     * // values: 0, <=5 will merge\n     * // values: 0, 5.01 will not merge\n     *\n     * ```\n     * @default -1\n     */\n    merge?: number;\n    /**\n     * Formats the tooltip.\n     *\n     * It can be either a function that receives a `value` param and expects a string or number as return or an object with the following properties:\n     *\n     *\n     * prefix - eg $ -> $100\n     *\n     * suffix - eg USD -> 100USD\n     *\n     * decimals - eg 2 -> 100.00\n     *\n     * thousand - eg , - 1,000\n     */\n    format?: SliderFormatObject | ((value: number) => string | number);\n    /**\n     * The orientation of the slider.\n     * @default "horizontal"\n     */\n    orientation?: "horizontal" | "vertical";\n    /**\n     * The direction of the slider.\n     *\n     * By default value increases left-to-right and top-to-bottom, which is reversed when using `rtl`.\n     *\n     * @default "ltr"\n     */\n    direction?: "ltr" | "rtl";\n    /**\n     * The position of the slider tooltips.\n     *\n     * Possible values: `null` | `top` | `bottom` | `left` | `right` depending on orientation prop.\n     *\n     * When null it equals to orientation default (`top` for `horizontal` and `left` for `vertical`).\n     * @default null\n     */\n    tooltipPosition?: null | "top" | "bottom" | "left" | "right";\n    /**\n     * An object containing aria attributes to be added for each handle.\n     */\n    aria?: Record<string, any>;\n    /**\n     * Sets the aria-labelledby attribute of handles.\n     */\n    ariaLabelledby?: string;\n    /**\n     * Additional options for noUiSlider.\n     * @see https://refreshless.com/nouislider/slider-options/\n     */\n    options?: Record<string, any>;\n    /**\n     * Initial value of the slider.\n     */\n    modelValue?: any;\n    value?: any;\n    /**\n     * An object of class names that gets merged with the default values\n     */\n    classes?: Record<string, any>;\n  }\n\n  export type SliderEmits = {\n    /**\n     * Emitted when dragging the slider is finished or it\'s value changed by clicking, keyboard or programmatically set.\n     */\n    change: [v: any];\n    /**\n     * Emitted in the same scenarios as in `@change`, but also when the slider is being dragged if `lazy` option is disabled.\n     */\n    update: [v: any];\n    /**\n     * Emitted in the same scenarios as in `@change`, but also when the slider\'s `.set()` method is called.\n     */\n    set: [v: any];\n    /**\n     * Emitted while the slider moves.\n     */\n    slide: [v: any];\n    /**\n     * Emitted the slider connect moves while dragging.\n     */\n    drag: [v: any];\n    /**\n     * Emitted when the handle is activated and dragging started.\n     */\n    start: [v: any];\n    /**\n     * Emitted when the dragging ended.\n     */\n    end: [v: any];\n  };\n</script>\n<script lang="ts" setup>\n  defineOptions({ inheritAttrs: false });\n  const props = defineProps<SliderProps>();\n\n  const emits = defineEmits<SliderEmits>();\n\n  const forwarded = useForwardPropsEmits(props, emits);\n\n  const { errorMessage, value: model } = useField(\n    () => props.name || props.id || useId(),\n    props.rules,\n    {\n      initialValue: props.modelValue,\n      label: props.label,\n      validateOnMount: props.validateOnMount,\n      syncVModel: true,\n    }\n  );\n</script>\n\n<style src="@vueform/slider/themes/default.css"></style>\n\n<style>\n  :root {\n    --slider-bg: theme(colors.muted.DEFAULT);\n    --slider-connect-bg: theme(colors.primary.DEFAULT);\n    --slider-connect-bg-disabled: theme(colors.primary.DEFAULT/45%);\n    --slider-height: 8px;\n    --slider-vertical-height: 300px;\n    --slider-radius: 999999px;\n\n    --slider-handle-bg: #ffffff;\n    --slider-handle-border: 0;\n    --slider-handle-width: 20px;\n    --slider-handle-height: 20px;\n    --slider-handle-radius: 99999px;\n    --slider-handle-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);\n    --slider-handle-shadow-active: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.42);\n    --slider-handle-ring-width: 3px;\n    --slider-handle-ring-color: theme(colors.primary.DEFAULT/20%);\n\n    --slider-tooltip-font-size: 0.875rem;\n    --slider-tooltip-line-height: 1.25rem;\n    --slider-tooltip-font-weight: 600;\n    --slider-tooltip-min-width: 24px;\n    --slider-tooltip-bg: theme(colors.primary.DEFAULT);\n    --slider-tooltip-bg-disabled: theme(colors.primary.DEFAULT/90%);\n    --slider-tooltip-color: theme(colors.primary.foreground);\n    --slider-tooltip-radius: theme(borderRadius.sm);\n    --slider-tooltip-py: 2px;\n    --slider-tooltip-px: 6px;\n    --slider-tooltip-arrow-size: 5px;\n    --slider-tooltip-distance: 4px;\n  }\n</style>\n',
+          '<template>\n  <div class="w-full">\n    <UiLabel\n      v-if="label"\n      :for="inputId"\n      :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n      ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n    >\n    <Slider v-bind="{ ...forwarded, ...$attrs }" v-model="model" />\n    <TransitionSlide group tag="div">\n      <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n        {{ hint }}\n      </p>\n\n      <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n        {{ errorMessage }}\n      </p>\n    </TransitionSlide>\n  </div>\n</template>\n\n<script lang="ts">\n  import Slider from "@vueform/slider";\n  import { useForwardPropsEmits } from "radix-vue";\n\n  export type SliderFormatObject = {\n    /**\n     * Prefix to prepend to the value.\n     * @example "$"\n     */\n    prefix?: string;\n    /**\n     * Suffix to append to the value.\n     * @example "USD"\n     */\n    suffix?: string;\n    /**\n     * Number of decimals to show.\n     * @example 2\n     */\n    decimals?: number;\n    /**\n     * Character to use as thousand separator.\n     * @example ","\n     */\n    thousand?: string;\n  };\n\n  export interface SliderProps {\n    /**\n     * The hint to display below the slider.\n     */\n    hint?: string;\n    /**\n     * The rules for the slider. Used with vee-validate for validation.\n     */\n    rules?: any;\n    /**\n     * Whether the slider should be validated on mount.\n     */\n    validateOnMount?: boolean;\n    /**\n     * The label of the slider. Used with vee-validate for error messages\n     */\n    label?: string;\n    /**\n     * The name we want to give this slider in the form.\n     */\n    name?: string;\n    /**\n     * The id attribute of slider container DOM.\n     * @default "slider"\n     */\n    id?: string;\n    /**\n     * Whether to update v-model only when the slider value is set and not while dragging.\n     *\n     * If disabled you must not use inline objects as props (eg. format, options, classes) but outsource them to a data property.\n     *\n     * @default true\n     */\n    lazy?: boolean;\n    /**\n     * Whether the slider should be disabled.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Minimum value of the slider.\n     * @default 0\n     */\n    min?: number;\n    /**\n     * Maximum value of the slider.\n     * @default 100\n     */\n    max?: number;\n    /**\n     * The jump between intervals. If `-1` it enables fractions (eg. `1.23`).\n     * @default 1\n     */\n    step?: number;\n    /**\n     * Whether tooltips should show above handlers.\n     * @default true\n     */\n    tooltips?: boolean;\n    /**\n     * When tooltips should be shown.\n     * @default "always"\n     */\n    showTooltip?: "always" | "focus" | "drag";\n    /**\n     * The step distance between two handles when their tooltips should be merged (when step is `-1` then `1` is assumed).\n     *\n     * @example\n     *\n     * ```js\n     * { merge: 5, step: 10 }\n     * // values: 0, <=50 will merge\n     * // values: 0, 60 will not merge\n     *\n     * { merge: 5, step: -1 }\n     *\n     * // values: 0, <=5 will merge\n     * // values: 0, 5.01 will not merge\n     *\n     * ```\n     * @default -1\n     */\n    merge?: number;\n    /**\n     * Formats the tooltip.\n     *\n     * It can be either a function that receives a `value` param and expects a string or number as return or an object with the following properties:\n     *\n     *\n     * prefix - eg $ -> $100\n     *\n     * suffix - eg USD -> 100USD\n     *\n     * decimals - eg 2 -> 100.00\n     *\n     * thousand - eg , - 1,000\n     */\n    format?: SliderFormatObject | ((value: number) => string | number);\n    /**\n     * The orientation of the slider.\n     * @default "horizontal"\n     */\n    orientation?: "horizontal" | "vertical";\n    /**\n     * The direction of the slider.\n     *\n     * By default value increases left-to-right and top-to-bottom, which is reversed when using `rtl`.\n     *\n     * @default "ltr"\n     */\n    direction?: "ltr" | "rtl";\n    /**\n     * The position of the slider tooltips.\n     *\n     * Possible values: `null` | `top` | `bottom` | `left` | `right` depending on orientation prop.\n     *\n     * When null it equals to orientation default (`top` for `horizontal` and `left` for `vertical`).\n     * @default null\n     */\n    tooltipPosition?: null | "top" | "bottom" | "left" | "right";\n    /**\n     * An object containing aria attributes to be added for each handle.\n     */\n    aria?: Record<string, any>;\n    /**\n     * Sets the aria-labelledby attribute of handles.\n     */\n    ariaLabelledby?: string;\n    /**\n     * Additional options for noUiSlider.\n     * @see https://refreshless.com/nouislider/slider-options/\n     */\n    options?: Record<string, any>;\n    /**\n     * Initial value of the slider.\n     */\n    modelValue?: any;\n    value?: any;\n    /**\n     * An object of class names that gets merged with the default values\n     */\n    classes?: Record<string, any>;\n    /**\n     * Whether the slider is required.\n     *\n     * @default false\n     */\n    required?: boolean;\n  }\n\n  export type SliderEmits = {\n    /**\n     * Emitted when dragging the slider is finished or it\'s value changed by clicking, keyboard or programmatically set.\n     */\n    change: [v: any];\n    /**\n     * Emitted in the same scenarios as in `@change`, but also when the slider is being dragged if `lazy` option is disabled.\n     */\n    update: [v: any];\n    /**\n     * Emitted in the same scenarios as in `@change`, but also when the slider\'s `.set()` method is called.\n     */\n    set: [v: any];\n    /**\n     * Emitted while the slider moves.\n     */\n    slide: [v: any];\n    /**\n     * Emitted the slider connect moves while dragging.\n     */\n    drag: [v: any];\n    /**\n     * Emitted when the handle is activated and dragging started.\n     */\n    start: [v: any];\n    /**\n     * Emitted when the dragging ended.\n     */\n    end: [v: any];\n    /**\n     * Emitted when the slider\'s value is updated.\n     */\n    "update:modelValue": [v: any];\n  };\n</script>\n<script lang="ts" setup>\n  defineOptions({ inheritAttrs: false });\n  const props = withDefaults(defineProps<SliderProps>(), {\n    showTooltip: "drag",\n  });\n\n  const emits = defineEmits<SliderEmits>();\n\n  const inputId = props.id || useId();\n\n  const forwarded = useForwardPropsEmits(props, emits);\n\n  const { errorMessage, value: model } = useField(\n    () => props.name || props.id || useId(),\n    props.rules,\n    {\n      initialValue: props.modelValue,\n      label: props.label,\n      validateOnMount: props.validateOnMount,\n      syncVModel: true,\n    }\n  );\n</script>\n\n<style src="@vueform/slider/themes/default.css"></style>\n\n<style>\n  :root {\n    --slider-bg: theme(colors.muted.DEFAULT);\n    --slider-connect-bg: theme(colors.primary.DEFAULT);\n    --slider-connect-bg-disabled: theme(colors.primary.DEFAULT/45%);\n    --slider-height: 8px;\n    --slider-vertical-height: 300px;\n    --slider-radius: 999999px;\n\n    --slider-handle-bg: #ffffff;\n    --slider-handle-border: 0;\n    --slider-handle-width: 20px;\n    --slider-handle-height: 20px;\n    --slider-handle-radius: 99999px;\n    --slider-handle-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);\n    --slider-handle-shadow-active: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.42);\n    --slider-handle-ring-width: 3px;\n    --slider-handle-ring-color: theme(colors.primary.DEFAULT/20%);\n\n    --slider-tooltip-font-size: 0.875rem;\n    --slider-tooltip-line-height: 1.25rem;\n    --slider-tooltip-font-weight: 600;\n    --slider-tooltip-min-width: 24px;\n    --slider-tooltip-bg: theme(colors.primary.DEFAULT);\n    --slider-tooltip-bg-disabled: theme(colors.primary.DEFAULT/90%);\n    --slider-tooltip-color: theme(colors.primary.foreground);\n    --slider-tooltip-radius: theme(borderRadius.sm);\n    --slider-tooltip-py: 2px;\n    --slider-tooltip-px: 6px;\n    --slider-tooltip-arrow-size: 5px;\n    --slider-tooltip-distance: 4px;\n  }\n</style>\n',
       },
     ],
     utils: [],