ui-thing 0.0.20 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "CLI used to add Nuxt 3 components to a project",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -61,12 +61,12 @@
     "@types/figlet": "^1.5.8",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.10.4",
+    "@types/node": "^20.10.5",
     "@types/prompts": "^2.4.9",
-    "@vitest/coverage-v8": "^1.0.4",
+    "@vitest/coverage-v8": "^1.1.0",
     "magicast": "^0.3.2",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
-    "vitest": "^1.0.4"
+    "vitest": "^1.1.0"
   }
 }

package/src/comps.ts

@@ -579,7 +579,7 @@ export default [
         fileName: "Container.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\r\n  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\r\n    <slot></slot>\r\n  </Primitive>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n  import type { PrimitiveProps } from "radix-vue";\r\n\r\n  const props = withDefaults(\r\n    defineProps<\r\n      PrimitiveProps & {\r\n        class?: any;\r\n      }\r\n    >(),\r\n    {\r\n      as: "div",\r\n    }\r\n  );\r\n\r\n  const styles = tv({\r\n    base: "container mx-auto",\r\n  });\r\n</script>\r\n',
+          '<template>\r\n  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\r\n    <slot></slot>\r\n  </Primitive>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n  import { Primitive } from "radix-vue";\r\n  import type { PrimitiveProps } from "radix-vue";\r\n\r\n  const props = withDefaults(\r\n    defineProps<\r\n      PrimitiveProps & {\r\n        class?: any;\r\n      }\r\n    >(),\r\n    {\r\n      as: "div",\r\n    }\r\n  );\r\n\r\n  const styles = tv({\r\n    base: "container mx-auto",\r\n  });\r\n</script>\r\n',
       },
     ],
     utils: [],
@@ -726,7 +726,7 @@ export default [
         fileName: "Datatable.client.vue",
         dirPath: "components/UI",
         fileContent:
-          "<template>\r\n  <DataTable ref=\"table\" :data=\"data\" :class=\"props.class\" :options=\"options\">\r\n    <slot></slot>\r\n  </DataTable>\r\n</template>\r\n\r\n<script lang=\"ts\" setup generic=\"T\">\r\n  import type DataTableRef from \"datatables.net\";\r\n  import type { Config } from \"datatables.net/types/types\";\r\n\r\n  const table = shallowRef<{ dt: InstanceType<typeof DataTableRef<T[]>> } | null>(null);\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      data?: Config[\"data\"];\r\n      class?: any;\r\n      options?: Config;\r\n    }>(),\r\n    {\r\n      data: () => [],\r\n      class: \"nowrap hover order-column row-border stripe display\",\r\n      options: () => ({}),\r\n    }\r\n  );\r\n\r\n  const emits = defineEmits<{\r\n    ready: [any];\r\n  }>();\r\n\r\n  onMounted(() => {\r\n    nextTick(() => {\r\n      emits(\"ready\", table.value?.dt);\r\n    });\r\n  });\r\n</script>\r\n\r\n<style>\r\n  :root {\r\n    --dt-row-selected: 262.1, 83.3%, 57.8%;\r\n    --dt-row-selected-text: 210, 20%, 98%;\r\n    --dt-row-selected-link: 262.1, 83.3%, 57.8%;\r\n    --dt-row-stripe: 0, 0%, 100%;\r\n    --dt-row-hover: 0, 0%, 100%;\r\n    --dt-column-ordering: 0, 0%, 100%;\r\n    --dt-border: 220, 13%, 91%;\r\n    --dt-foreground: 224, 71.4%, 4.1%;\r\n  }\r\n\r\n  .dark {\r\n    --dt-row-selected: 263.4, 70%, 50.4%;\r\n    --dt-row-selected-text: 210, 20%, 98%;\r\n    --dt-row-selected-link: 263.4, 70%, 50.4%;\r\n    --dt-row-stripe: 224, 71.4%, 4.1%;\r\n    --dt-row-hover: 224, 71.4%, 4.1%;\r\n    --dt-column-ordering: 224, 71.4%, 4.1%;\r\n    --dt-border: 215, 27.9%, 16.9%;\r\n    --dt-foreground: 224, 71.4%, 4.1%;\r\n  }\r\n\r\n  table.dataTable td.dt-control {\r\n    text-align: center;\r\n    cursor: pointer;\r\n  }\r\n  table.dataTable td.dt-control:before {\r\n    display: inline-block;\r\n    color: hsla(var(--dt-foreground), 0.5);\r\n    content: \"►\";\r\n  }\r\n  table.dataTable tr.dt-hasChild td.dt-control:before {\r\n    content: \"▼\";\r\n  }\r\n\r\n  table.dataTable thead > tr > th.sorting,\r\n  table.dataTable thead > tr > th.sorting_asc,\r\n  table.dataTable thead > tr > th.sorting_desc,\r\n  table.dataTable thead > tr > th.sorting_asc_disabled,\r\n  table.dataTable thead > tr > th.sorting_desc_disabled,\r\n  table.dataTable thead > tr > td.sorting,\r\n  table.dataTable thead > tr > td.sorting_asc,\r\n  table.dataTable thead > tr > td.sorting_desc,\r\n  table.dataTable thead > tr > td.sorting_asc_disabled,\r\n  table.dataTable thead > tr > td.sorting_desc_disabled {\r\n    @apply relative cursor-pointer pr-7;\r\n  }\r\n  table.dataTable thead > tr > th.sorting:before,\r\n  table.dataTable thead > tr > th.sorting:after,\r\n  table.dataTable thead > tr > th.sorting_asc:before,\r\n  table.dataTable thead > tr > th.sorting_asc:after,\r\n  table.dataTable thead > tr > th.sorting_desc:before,\r\n  table.dataTable thead > tr > th.sorting_desc:after,\r\n  table.dataTable thead > tr > th.sorting_asc_disabled:before,\r\n  table.dataTable thead > tr > th.sorting_asc_disabled:after,\r\n  table.dataTable thead > tr > th.sorting_desc_disabled:before,\r\n  table.dataTable thead > tr > th.sorting_desc_disabled:after,\r\n  table.dataTable thead > tr > td.sorting:before,\r\n  table.dataTable thead > tr > td.sorting:after,\r\n  table.dataTable thead > tr > td.sorting_asc:before,\r\n  table.dataTable thead > tr > td.sorting_asc:after,\r\n  table.dataTable thead > tr > td.sorting_desc:before,\r\n  table.dataTable thead > tr > td.sorting_desc:after,\r\n  table.dataTable thead > tr > td.sorting_asc_disabled:before,\r\n  table.dataTable thead > tr > td.sorting_asc_disabled:after,\r\n  table.dataTable thead > tr > td.sorting_desc_disabled:before,\r\n  table.dataTable thead > tr > td.sorting_desc_disabled:after {\r\n    @apply absolute right-2.5 block text-xs leading-3 opacity-25;\r\n  }\r\n  table.dataTable thead > tr > th.sorting:before,\r\n  table.dataTable thead > tr > th.sorting_asc:before,\r\n  table.dataTable thead > tr > th.sorting_desc:before,\r\n  table.dataTable thead > tr > th.sorting_asc_disabled:before,\r\n  table.dataTable thead > tr > th.sorting_desc_disabled:before,\r\n  table.dataTable thead > tr > td.sorting:before,\r\n  table.dataTable thead > tr > td.sorting_asc:before,\r\n  table.dataTable thead > tr > td.sorting_desc:before,\r\n  table.dataTable thead > tr > td.sorting_asc_disabled:before,\r\n  table.dataTable thead > tr > td.sorting_desc_disabled:before {\r\n    @apply bottom-[43%] h-4 w-4 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')];\r\n  }\r\n  table.dataTable thead > tr > th.sorting:after,\r\n  table.dataTable thead > tr > th.sorting_asc:after,\r\n  table.dataTable thead > tr > th.sorting_desc:after,\r\n  table.dataTable thead > tr > th.sorting_asc_disabled:after,\r\n  table.dataTable thead > tr > th.sorting_desc_disabled:after,\r\n  table.dataTable thead > tr > td.sorting:after,\r\n  table.dataTable thead > tr > td.sorting_asc:after,\r\n  table.dataTable thead > tr > td.sorting_desc:after,\r\n  table.dataTable thead > tr > td.sorting_asc_disabled:after,\r\n  table.dataTable thead > tr > td.sorting_desc_disabled:after {\r\n    @apply top-[43%] 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')];\r\n  }\r\n  table.dataTable thead > tr > th.sorting_asc:before,\r\n  table.dataTable thead > tr > th.sorting_desc:after,\r\n  table.dataTable thead > tr > td.sorting_asc:before,\r\n  table.dataTable thead > tr > td.sorting_desc:after {\r\n    @apply opacity-80;\r\n  }\r\n  table.dataTable thead > tr > th.sorting_desc_disabled:after,\r\n  table.dataTable thead > tr > th.sorting_asc_disabled:before,\r\n  table.dataTable thead > tr > td.sorting_desc_disabled:after,\r\n  table.dataTable thead > tr > td.sorting_asc_disabled:before {\r\n    @apply hidden;\r\n  }\r\n  table.dataTable thead > tr > th:active,\r\n  table.dataTable thead > tr > td:active {\r\n    @apply outline-none;\r\n  }\r\n\r\n  div.dataTables_scrollBody > table.dataTable > thead > tr > th:before,\r\n  div.dataTables_scrollBody > table.dataTable > thead > tr > th:after,\r\n  div.dataTables_scrollBody > table.dataTable > thead > tr > td:before,\r\n  div.dataTables_scrollBody > table.dataTable > thead > tr > td:after {\r\n    @apply hidden;\r\n  }\r\n\r\n  div.dataTables_processing {\r\n    @apply absolute left-[50%] top-[50%] ml-[-100px] mt-[-26px] w-[200px] p-0.5 text-center;\r\n  }\r\n  div.dataTables_processing > div:last-child {\r\n    @apply relative mx-auto my-4 h-4 w-20;\r\n  }\r\n  div.dataTables_processing > div:last-child > div {\r\n    @apply absolute top-0 h-3.5 w-3.5 rounded-full;\r\n    background: hsl(var(--dt-row-selected));\r\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\r\n  }\r\n  div.dataTables_processing > div:last-child > div:nth-child(1) {\r\n    left: 8px;\r\n    animation: datatables-loader-1 0.6s infinite;\r\n  }\r\n  div.dataTables_processing > div:last-child > div:nth-child(2) {\r\n    left: 8px;\r\n    animation: datatables-loader-2 0.6s infinite;\r\n  }\r\n  div.dataTables_processing > div:last-child > div:nth-child(3) {\r\n    left: 32px;\r\n    animation: datatables-loader-2 0.6s infinite;\r\n  }\r\n  div.dataTables_processing > div:last-child > div:nth-child(4) {\r\n    left: 56px;\r\n    animation: datatables-loader-3 0.6s infinite;\r\n  }\r\n\r\n  @keyframes datatables-loader-1 {\r\n    0% {\r\n      transform: scale(0);\r\n    }\r\n    100% {\r\n      transform: scale(1);\r\n    }\r\n  }\r\n  @keyframes datatables-loader-3 {\r\n    0% {\r\n      transform: scale(1);\r\n    }\r\n    100% {\r\n      transform: scale(0);\r\n    }\r\n  }\r\n  @keyframes datatables-loader-2 {\r\n    0% {\r\n      transform: translate(0, 0);\r\n    }\r\n    100% {\r\n      transform: translate(24px, 0);\r\n    }\r\n  }\r\n  table.dataTable.nowrap th,\r\n  table.dataTable.nowrap td {\r\n    white-space: nowrap;\r\n  }\r\n  table.dataTable th.dt-left,\r\n  table.dataTable td.dt-left {\r\n    text-align: left;\r\n  }\r\n  table.dataTable th.dt-center,\r\n  table.dataTable td.dt-center,\r\n  table.dataTable td.dataTables_empty {\r\n    text-align: center;\r\n  }\r\n  table.dataTable th.dt-right,\r\n  table.dataTable td.dt-right {\r\n    text-align: right;\r\n  }\r\n  table.dataTable th.dt-justify,\r\n  table.dataTable td.dt-justify {\r\n    text-align: justify;\r\n  }\r\n  table.dataTable th.dt-nowrap,\r\n  table.dataTable td.dt-nowrap {\r\n    white-space: nowrap;\r\n  }\r\n  table.dataTable thead th,\r\n  table.dataTable thead td,\r\n  table.dataTable tfoot th,\r\n  table.dataTable tfoot td {\r\n    text-align: left;\r\n  }\r\n  table.dataTable thead th.dt-head-left,\r\n  table.dataTable thead td.dt-head-left,\r\n  table.dataTable tfoot th.dt-head-left,\r\n  table.dataTable tfoot td.dt-head-left {\r\n    text-align: left;\r\n  }\r\n  table.dataTable thead th.dt-head-center,\r\n  table.dataTable thead td.dt-head-center,\r\n  table.dataTable tfoot th.dt-head-center,\r\n  table.dataTable tfoot td.dt-head-center {\r\n    text-align: center;\r\n  }\r\n  table.dataTable thead th.dt-head-right,\r\n  table.dataTable thead td.dt-head-right,\r\n  table.dataTable tfoot th.dt-head-right,\r\n  table.dataTable tfoot td.dt-head-right {\r\n    text-align: right;\r\n  }\r\n  table.dataTable thead th.dt-head-justify,\r\n  table.dataTable thead td.dt-head-justify,\r\n  table.dataTable tfoot th.dt-head-justify,\r\n  table.dataTable tfoot td.dt-head-justify {\r\n    text-align: justify;\r\n  }\r\n  table.dataTable thead th.dt-head-nowrap,\r\n  table.dataTable thead td.dt-head-nowrap,\r\n  table.dataTable tfoot th.dt-head-nowrap,\r\n  table.dataTable tfoot td.dt-head-nowrap {\r\n    white-space: nowrap;\r\n  }\r\n  table.dataTable tbody th.dt-body-left,\r\n  table.dataTable tbody td.dt-body-left {\r\n    text-align: left;\r\n  }\r\n  table.dataTable tbody th.dt-body-center,\r\n  table.dataTable tbody td.dt-body-center {\r\n    text-align: center;\r\n  }\r\n  table.dataTable tbody th.dt-body-right,\r\n  table.dataTable tbody td.dt-body-right {\r\n    text-align: right;\r\n  }\r\n  table.dataTable tbody th.dt-body-justify,\r\n  table.dataTable tbody td.dt-body-justify {\r\n    text-align: justify;\r\n  }\r\n  table.dataTable tbody th.dt-body-nowrap,\r\n  table.dataTable tbody td.dt-body-nowrap {\r\n    white-space: nowrap;\r\n  }\r\n\r\n  /* Table Styles */\r\n\r\n  table.dataTable {\r\n    @apply w-full table-auto border-collapse;\r\n  }\r\n\r\n  /* Table header styles */\r\n  table.dataTable thead th,\r\n  table.dataTable tfoot th {\r\n    @apply text-left text-sm font-medium text-muted-foreground;\r\n  }\r\n\r\n  table.dataTable > thead > tr > th {\r\n    @apply border-b border-t-0 px-6 py-3;\r\n  }\r\n  table.dataTable > thead > tr > td {\r\n    @apply border-b px-6 py-3 text-sm;\r\n  }\r\n  table.dataTable > thead > tr > th:active,\r\n  table.dataTable > thead > tr > td:active {\r\n    @apply outline-none;\r\n  }\r\n  table.dataTable > tfoot > tr > th,\r\n  table.dataTable > tfoot > tr > td {\r\n    @apply border-t px-6 py-3;\r\n  }\r\n  table.dataTable tbody tr {\r\n    @apply bg-transparent;\r\n  }\r\n  table.dataTable tbody tr.selected > * {\r\n    @apply bg-primary/10;\r\n  }\r\n  table.dataTable tbody tr.selected a {\r\n    @apply text-primary;\r\n  }\r\n  table.dataTable tbody th,\r\n  table.dataTable tbody td {\r\n    @apply px-6 py-3 text-sm;\r\n  }\r\n  table.dataTable.row-border > tbody > tr > th,\r\n  table.dataTable.row-border > tbody > tr > td,\r\n  table.dataTable.display > tbody > tr > th,\r\n  table.dataTable.display > tbody > tr > td {\r\n    @apply border-t;\r\n  }\r\n  table.dataTable.row-border > tbody > tr:first-child > th,\r\n  table.dataTable.row-border > tbody > tr:first-child > td,\r\n  table.dataTable.display > tbody > tr:first-child > th,\r\n  table.dataTable.display > tbody > tr:first-child > td {\r\n    @apply border-t-0;\r\n  }\r\n  table.dataTable.row-border > tbody > tr.selected + tr.selected > td,\r\n  table.dataTable.display > tbody > tr.selected + tr.selected > td {\r\n    @apply border-t-primary/30;\r\n  }\r\n  table.dataTable.cell-border > tbody > tr > th,\r\n  table.dataTable.cell-border > tbody > tr > td {\r\n    @apply border-r border-t;\r\n  }\r\n  table.dataTable.cell-border > tbody > tr > th:first-child,\r\n  table.dataTable.cell-border > tbody > tr > td:first-child {\r\n    @apply border-l;\r\n  }\r\n  table.dataTable.cell-border > tbody > tr:first-child > th,\r\n  table.dataTable.cell-border > tbody > tr:first-child > td {\r\n    @apply border-t-0;\r\n  }\r\n  table.dataTable.stripe > tbody > tr.odd > *,\r\n  table.dataTable.display > tbody > tr.odd > * {\r\n    @apply bg-muted/50;\r\n  }\r\n  table.dataTable.stripe > tbody > tr.odd.selected > *,\r\n  table.dataTable.display > tbody > tr.odd.selected > * {\r\n    @apply bg-primary/10;\r\n  }\r\n  table.dataTable.hover > tbody > tr:hover > *,\r\n  table.dataTable.display > tbody > tr:hover > * {\r\n    @apply bg-muted;\r\n  }\r\n  table.dataTable.hover > tbody > tr.selected:hover > *,\r\n  table.dataTable.display > tbody > tr.selected:hover > * {\r\n    @apply !bg-primary/10;\r\n  }\r\n  table.dataTable.order-column > tbody tr > .sorting_1,\r\n  table.dataTable.order-column > tbody tr > .sorting_2,\r\n  table.dataTable.order-column > tbody tr > .sorting_3,\r\n  table.dataTable.display > tbody tr > .sorting_1,\r\n  table.dataTable.display > tbody tr > .sorting_2,\r\n  table.dataTable.display > tbody tr > .sorting_3 {\r\n    @apply bg-muted;\r\n  }\r\n  table.dataTable.order-column > tbody tr.selected > .sorting_1,\r\n  table.dataTable.order-column > tbody tr.selected > .sorting_2,\r\n  table.dataTable.order-column > tbody tr.selected > .sorting_3,\r\n  table.dataTable.display > tbody tr.selected > .sorting_1,\r\n  table.dataTable.display > tbody tr.selected > .sorting_2,\r\n  table.dataTable.display > tbody tr.selected > .sorting_3 {\r\n    @apply !bg-primary/10;\r\n  }\r\n  table.dataTable.display > tbody > tr.odd > .sorting_1,\r\n  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1 {\r\n    @apply bg-muted/50;\r\n  }\r\n  table.dataTable.display > tbody > tr.odd > .sorting_2,\r\n  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_2 {\r\n    @apply bg-muted/30;\r\n  }\r\n  table.dataTable.display > tbody > tr.odd > .sorting_3,\r\n  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_3 {\r\n    @apply bg-muted/10;\r\n  }\r\n  table.dataTable.display > tbody > tr.odd.selected > .sorting_1,\r\n  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_1 {\r\n    @apply bg-muted/50;\r\n  }\r\n  table.dataTable.display > tbody > tr.odd.selected > .sorting_2,\r\n  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_2 {\r\n    @apply bg-muted/30;\r\n  }\r\n  table.dataTable.display > tbody > tr.odd.selected > .sorting_3,\r\n  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_3 {\r\n    @apply bg-muted/10;\r\n  }\r\n  table.dataTable.display > tbody > tr.even > .sorting_1,\r\n  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_1 {\r\n    @apply bg-muted/50;\r\n  }\r\n  table.dataTable.display > tbody > tr.even > .sorting_2,\r\n  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_2 {\r\n    @apply bg-muted/30;\r\n  }\r\n  table.dataTable.display > tbody > tr.even > .sorting_3,\r\n  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_3 {\r\n    @apply bg-muted/10;\r\n  }\r\n  table.dataTable.display > tbody > tr.even.selected > .sorting_1,\r\n  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_1 {\r\n    @apply bg-primary/10;\r\n  }\r\n  table.dataTable.display > tbody > tr.even.selected > .sorting_2,\r\n  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_2 {\r\n    @apply bg-primary/10;\r\n  }\r\n  table.dataTable.display > tbody > tr.even.selected > .sorting_3,\r\n  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_3 {\r\n    @apply bg-primary/10;\r\n  }\r\n  table.dataTable.display tbody tr:hover > .sorting_1,\r\n  table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {\r\n    @apply bg-muted;\r\n  }\r\n  table.dataTable.display tbody tr:hover > .sorting_2,\r\n  table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {\r\n    @apply bg-muted;\r\n  }\r\n  table.dataTable.display tbody tr:hover > .sorting_3,\r\n  table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {\r\n    @apply bg-muted;\r\n  }\r\n  table.dataTable.display tbody tr:hover.selected > .sorting_1,\r\n  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {\r\n    @apply bg-primary/10;\r\n  }\r\n  table.dataTable.display tbody tr:hover.selected > .sorting_2,\r\n  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {\r\n    @apply bg-primary/10;\r\n  }\r\n  table.dataTable.display tbody tr:hover.selected > .sorting_3,\r\n  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {\r\n    @apply bg-primary/10;\r\n  }\r\n  table.dataTable.no-footer {\r\n    @apply border-b-0;\r\n  }\r\n  table.dataTable.compact thead th,\r\n  table.dataTable.compact thead td,\r\n  table.dataTable.compact tfoot th,\r\n  table.dataTable.compact tfoot td,\r\n  table.dataTable.compact tbody th,\r\n  table.dataTable.compact tbody td {\r\n    @apply px-4 py-2;\r\n  }\r\n\r\n  table.dataTable th,\r\n  table.dataTable td {\r\n    @apply box-content border-y;\r\n  }\r\n\r\n  table.dataTable tr:last-child td {\r\n    @apply !border-b-0;\r\n  }\r\n\r\n  /* Control feature layout */\r\n  .dataTables_wrapper {\r\n    @apply w-full overflow-x-auto;\r\n  }\r\n\r\n  /* Export button styles */\r\n  .dataTables_wrapper .dt-buttons {\r\n    @apply inline-flex items-center gap-2;\r\n    button {\r\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;\r\n    }\r\n  }\r\n\r\n  /*  Copy modal */\r\n  .dt-button-info {\r\n    @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur;\r\n  }\r\n\r\n  .dataTables_wrapper .dataTables_length {\r\n    label {\r\n      @apply inline-flex items-center gap-2 text-sm font-normal text-muted-foreground;\r\n      select {\r\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;\r\n      }\r\n    }\r\n  }\r\n  .dataTables_wrapper .dataTables_filter {\r\n    label {\r\n      @apply inline-flex w-full cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\r\n      input {\r\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;\r\n      }\r\n    }\r\n  }\r\n  .dataTables_wrapper .dataTables_info {\r\n    @apply flex items-center gap-3 text-sm !text-muted-foreground;\r\n  }\r\n  .dataTables_wrapper .dataTables_paginate {\r\n    .paginate_button {\r\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;\r\n    }\r\n  }\r\n  .dataTables_wrapper .dataTables_paginate .paginate_button.current,\r\n  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {\r\n    @apply bg-muted;\r\n  }\r\n  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,\r\n  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,\r\n  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {\r\n    @apply pointer-events-none opacity-50;\r\n  }\r\n  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {\r\n    @apply bg-muted;\r\n  }\r\n  .dataTables_wrapper .dataTables_paginate .paginate_button:active {\r\n    @apply bg-muted;\r\n  }\r\n  .dataTables_wrapper .dataTables_paginate .ellipsis {\r\n    @apply inline-flex h-8 min-w-[32px] items-start justify-center text-sm;\r\n  }\r\n  .dataTables_wrapper .dataTables_scroll {\r\n    clear: both;\r\n  }\r\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {\r\n    -webkit-overflow-scrolling: touch;\r\n  }\r\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th,\r\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td,\r\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th,\r\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {\r\n    vertical-align: middle;\r\n  }\r\n  .dataTables_wrapper\r\n    .dataTables_scroll\r\n    div.dataTables_scrollBody\r\n    > table\r\n    > thead\r\n    > tr\r\n    > th\r\n    > div.dataTables_sizing,\r\n  .dataTables_wrapper\r\n    .dataTables_scroll\r\n    div.dataTables_scrollBody\r\n    > table\r\n    > thead\r\n    > tr\r\n    > td\r\n    > div.dataTables_sizing,\r\n  .dataTables_wrapper\r\n    .dataTables_scroll\r\n    div.dataTables_scrollBody\r\n    > table\r\n    > tbody\r\n    > tr\r\n    > th\r\n    > div.dataTables_sizing,\r\n  .dataTables_wrapper\r\n    .dataTables_scroll\r\n    div.dataTables_scrollBody\r\n    > table\r\n    > tbody\r\n    > tr\r\n    > td\r\n    > div.dataTables_sizing {\r\n    height: 0;\r\n    overflow: hidden;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n  }\r\n  .dataTables_wrapper.no-footer .dataTables_scrollBody {\r\n    @apply border-b;\r\n  }\r\n  .dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,\r\n  .dataTables_wrapper.no-footer div.dataTables_scrollBody > table {\r\n    border-bottom: none;\r\n  }\r\n  .dataTables_wrapper:after {\r\n    visibility: hidden;\r\n    display: block;\r\n    content: \"\";\r\n    clear: both;\r\n    height: 0;\r\n  }\r\n\r\n  /* \r\n  responsive styles\r\n   */\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {\r\n    cursor: default !important;\r\n  }\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {\r\n    display: none !important;\r\n  }\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {\r\n    cursor: pointer;\r\n  }\r\n\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {\r\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')];\r\n  }\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.arrow-right::before,\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control.arrow-right::before {\r\n    content: \"◄\";\r\n  }\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {\r\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')];\r\n  }\r\n  table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,\r\n  table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {\r\n    padding-left: 0.333em;\r\n  }\r\n  table.dataTable.dtr-column > tbody > tr > td.dtr-control,\r\n  table.dataTable.dtr-column > tbody > tr > th.dtr-control,\r\n  table.dataTable.dtr-column > tbody > tr > td.control,\r\n  table.dataTable.dtr-column > tbody > tr > th.control {\r\n    cursor: pointer;\r\n  }\r\n  table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,\r\n  table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,\r\n  table.dataTable.dtr-column > tbody > tr > td.control:before,\r\n  table.dataTable.dtr-column > tbody > tr > th.control:before {\r\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')];\r\n  }\r\n  table.dataTable.dtr-column > tbody > tr > td.dtr-control.arrow-right::before,\r\n  table.dataTable.dtr-column > tbody > tr > th.dtr-control.arrow-right::before,\r\n  table.dataTable.dtr-column > tbody > tr > td.control.arrow-right::before,\r\n  table.dataTable.dtr-column > tbody > tr > th.control.arrow-right::before {\r\n    content: \"◄\";\r\n  }\r\n  table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before,\r\n  table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before,\r\n  table.dataTable.dtr-column > tbody > tr.parent td.control:before,\r\n  table.dataTable.dtr-column > tbody > tr.parent th.control:before {\r\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')];\r\n  }\r\n\r\n  table.dataTable > tbody td.child {\r\n    @apply p-0;\r\n  }\r\n  table.dataTable > tbody > tr.child:hover,\r\n  table.dataTable > tbody > tr.child:hover > td.child {\r\n    background: transparent !important;\r\n  }\r\n  table.dataTable > tbody > tr.child ul.dtr-details {\r\n    @apply m-0 block w-full list-none p-0;\r\n  }\r\n  table.dataTable > tbody > tr.child ul.dtr-details > li {\r\n    @apply border-b p-3 px-7 hover:bg-muted;\r\n  }\r\n\r\n  table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {\r\n    @apply border-b-0;\r\n  }\r\n  table.dataTable > tbody > tr.child span.dtr-title {\r\n    @apply inline-block min-w-[80px] font-bold;\r\n  }\r\n  div.dtr-modal {\r\n    position: fixed;\r\n    box-sizing: border-box;\r\n    top: 0;\r\n    left: 0;\r\n    height: 100%;\r\n    width: 100%;\r\n    z-index: 100;\r\n    padding: 10em 1em;\r\n  }\r\n  div.dtr-modal div.dtr-modal-display {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    bottom: 0;\r\n    right: 0;\r\n    width: 50%;\r\n    height: fit-content;\r\n    max-height: 75%;\r\n    overflow: auto;\r\n    margin: auto;\r\n    z-index: 102;\r\n    overflow: auto;\r\n    background-color: #f5f5f7;\r\n    border: 1px solid black;\r\n    border-radius: 0.5em;\r\n    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);\r\n  }\r\n  div.dtr-modal div.dtr-modal-content {\r\n    position: relative;\r\n    padding: 2.5em;\r\n  }\r\n  div.dtr-modal div.dtr-modal-content h2 {\r\n    margin-top: 0;\r\n  }\r\n  div.dtr-modal div.dtr-modal-close {\r\n    position: absolute;\r\n    top: 6px;\r\n    right: 6px;\r\n    width: 22px;\r\n    height: 22px;\r\n    text-align: center;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    z-index: 12;\r\n  }\r\n  div.dtr-modal div.dtr-modal-background {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    z-index: 101;\r\n    background: rgba(0, 0, 0, 0.6);\r\n  }\r\n\r\n  /* Search Builder Styles */\r\n  div.dt-button-collection {\r\n    overflow: visible !important;\r\n    z-index: 2002 !important;\r\n  }\r\n  div.dt-button-collection div.dtsb-searchBuilder {\r\n    padding-left: 1em !important;\r\n    padding-right: 1em !important;\r\n  }\r\n  div.dt-button-collection.dtb-collection-closeable div.dtsb-titleRow {\r\n    padding-right: 40px;\r\n  }\r\n  .dtsb-greyscale {\r\n    @apply !border;\r\n  }\r\n  div.dtsb-logicContainer .dtsb-greyscale {\r\n    border: none !important;\r\n  }\r\n  div.dtsb-searchBuilder {\r\n    @apply mb-4 cursor-default justify-evenly text-left;\r\n  }\r\n  div.dtsb-searchBuilder button.dtsb-button,\r\n  div.dtsb-searchBuilder select {\r\n    @apply text-sm;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-titleRow {\r\n    @apply mb-3 flex items-center justify-between;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title {\r\n    @apply inline-block text-sm font-normal;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title:empty {\r\n    display: inline;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-value,\r\n  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-data,\r\n  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-condition {\r\n    display: block;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group {\r\n    @apply relative clear-both mb-4;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group button.dtsb-search {\r\n    float: right;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group button.dtsb-clearGroup {\r\n    margin: 2px;\r\n    text-align: center;\r\n    padding: 0;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\r\n    -webkit-transform: rotate(90deg);\r\n    -moz-transform: rotate(90deg);\r\n    -o-transform: rotate(90deg);\r\n    -ms-transform: rotate(90deg);\r\n    transform: rotate(90deg);\r\n    position: absolute;\r\n    margin-top: 0.8em;\r\n    margin-right: 0.8em;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\r\n    margin-bottom: 0.8em;\r\n    display: flex;\r\n    justify-content: flex-start;\r\n    flex-flow: row wrap;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r\n    padding: 0.4em;\r\n    margin-right: 0.8em;\r\n    min-width: 5em;\r\n    max-width: 20em;\r\n    color: inherit;\r\n  }\r\n  div.dtsb-searchBuilder\r\n    div.dtsb-group\r\n    div.dtsb-criteria\r\n    select.dtsb-dropDown\r\n    option.dtsb-notItalic,\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input option.dtsb-notItalic {\r\n    font-style: normal;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-italic {\r\n    font-style: italic;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\r\n    flex: 1;\r\n    white-space: nowrap;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont span.dtsp-joiner {\r\n    margin-right: 0.8em;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input.dtsb-value {\r\n    width: 33%;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont select,\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input {\r\n    height: 100%;\r\n    box-sizing: border-box;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\r\n    margin-left: auto;\r\n    display: inline-block;\r\n  }\r\n  div.dtsb-searchBuilder\r\n    div.dtsb-group\r\n    div.dtsb-criteria\r\n    div.dtsb-buttonContainer\r\n    button.dtsb-delete,\r\n  div.dtsb-searchBuilder\r\n    div.dtsb-group\r\n    div.dtsb-criteria\r\n    div.dtsb-buttonContainer\r\n    button.dtsb-right,\r\n  div.dtsb-searchBuilder\r\n    div.dtsb-group\r\n    div.dtsb-criteria\r\n    div.dtsb-buttonContainer\r\n    button.dtsb-left {\r\n    margin-right: 0.8em;\r\n  }\r\n  div.dtsb-searchBuilder\r\n    div.dtsb-group\r\n    div.dtsb-criteria\r\n    div.dtsb-buttonContainer\r\n    button.dtsb-delete:last-child,\r\n  div.dtsb-searchBuilder\r\n    div.dtsb-group\r\n    div.dtsb-criteria\r\n    div.dtsb-buttonContainer\r\n    button.dtsb-right:last-child,\r\n  div.dtsb-searchBuilder\r\n    div.dtsb-group\r\n    div.dtsb-criteria\r\n    div.dtsb-buttonContainer\r\n    button.dtsb-left:last-child {\r\n    margin-right: 0;\r\n  }\r\n  @media screen and (max-width: 550px) {\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\r\n      display: flex;\r\n      flex-flow: none;\r\n      flex-direction: column;\r\n      justify-content: flex-start;\r\n      padding-right: calc(35px + 0.8em);\r\n      margin-bottom: 0px;\r\n    }\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:first-child),\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:nth-child(2)),\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:last-child) {\r\n      padding-top: 0.8em;\r\n    }\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:first-child,\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:nth-child(2),\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:last-child {\r\n      padding-top: 0em;\r\n    }\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r\n      max-width: none;\r\n      width: 100%;\r\n      margin-bottom: 0.8em;\r\n      margin-right: 0.8em;\r\n    }\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\r\n      margin-right: 0.8em;\r\n    }\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\r\n      position: absolute;\r\n      width: 35px;\r\n      display: flex;\r\n      flex-wrap: wrap-reverse;\r\n      right: 0;\r\n    }\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button {\r\n      margin-right: 0px !important;\r\n    }\r\n  }\r\n  div.dtsb-searchBuilder button,\r\n  div.dtsb-searchBuilder select.dtsb-dropDown,\r\n  div.dtsb-searchBuilder input {\r\n    @apply bg-background;\r\n  }\r\n  div.dtsb-searchBuilder button.dtsb-button {\r\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;\r\n  }\r\n  div.dtsb-searchBuilder button.dtsb-button:hover {\r\n    @apply cursor-pointer bg-muted;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-logicContainer {\r\n    @apply overflow-hidden rounded-none border;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-logicContainer button {\r\n    @apply rounded-md border-transparent bg-transparent;\r\n  }\r\n  div.dtsb-searchBuilder button.dtsb-clearGroup {\r\n    min-width: 2em;\r\n    padding: 0;\r\n  }\r\n  div.dtsb-searchBuilder button.dtsb-iptbtn {\r\n    min-width: 100px;\r\n    text-align: left;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\r\n    @apply flex flex-row content-start items-start justify-start rounded-md;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-logic {\r\n    @apply m-0 shrink-0 grow rounded-none border-0;\r\n    flex-basis: 3em;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-clearGroup {\r\n    border: none;\r\n    border-radius: 0px;\r\n    width: 2em;\r\n    margin: 0px;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r\n    @apply rounded-md border;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-condition,\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-data,\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-value {\r\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;\r\n  }\r\n\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-value {\r\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;\r\n  }\r\n</style>\r\n",
+          "<template>\r\n  <DataTable ref=\"table\" :data=\"data\" :class=\"props.class\" :options=\"options\">\r\n    <slot></slot>\r\n  </DataTable>\r\n</template>\r\n\r\n<script lang=\"ts\" setup generic=\"T\">\r\n  import type DataTableRef from \"datatables.net\";\r\n  import type { Config } from \"datatables.net/types/types\";\r\n\r\n  const table = shallowRef<{ dt: InstanceType<typeof DataTableRef<T[]>> } | null>(null);\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      data?: Config[\"data\"];\r\n      class?: any;\r\n      options?: Config;\r\n    }>(),\r\n    {\r\n      data: () => [],\r\n      class: \"nowrap hover order-column row-border stripe display\",\r\n      options: () => ({}),\r\n    }\r\n  );\r\n\r\n  const emits = defineEmits<{\r\n    ready: [any];\r\n  }>();\r\n\r\n  onMounted(() => {\r\n    nextTick(() => {\r\n      emits(\"ready\", table.value?.dt);\r\n    });\r\n  });\r\n</script>\r\n\r\n<style>\r\n  :root {\r\n    --dt-row-selected: 262.1, 83.3%, 57.8%;\r\n    --dt-row-selected-text: 210, 20%, 98%;\r\n    --dt-row-selected-link: 262.1, 83.3%, 57.8%;\r\n    --dt-row-stripe: 0, 0%, 100%;\r\n    --dt-row-hover: 0, 0%, 100%;\r\n    --dt-column-ordering: 0, 0%, 100%;\r\n    --dt-border: 220, 13%, 91%;\r\n    --dt-foreground: 224, 71.4%, 4.1%;\r\n  }\r\n\r\n  .dark {\r\n    --dt-row-selected: 263.4, 70%, 50.4%;\r\n    --dt-row-selected-text: 210, 20%, 98%;\r\n    --dt-row-selected-link: 263.4, 70%, 50.4%;\r\n    --dt-row-stripe: 224, 71.4%, 4.1%;\r\n    --dt-row-hover: 224, 71.4%, 4.1%;\r\n    --dt-column-ordering: 224, 71.4%, 4.1%;\r\n    --dt-border: 215, 27.9%, 16.9%;\r\n    --dt-foreground: 224, 71.4%, 4.1%;\r\n  }\r\n\r\n  table.dataTable td.dt-control {\r\n    text-align: center;\r\n    cursor: pointer;\r\n  }\r\n  table.dataTable td.dt-control:before {\r\n    display: inline-block;\r\n    color: hsla(var(--dt-foreground), 0.5);\r\n    content: \"►\";\r\n  }\r\n  table.dataTable tr.dt-hasChild td.dt-control:before {\r\n    content: \"▼\";\r\n  }\r\n\r\n  table.dataTable thead > tr > th.sorting,\r\n  table.dataTable thead > tr > th.sorting_asc,\r\n  table.dataTable thead > tr > th.sorting_desc,\r\n  table.dataTable thead > tr > th.sorting_asc_disabled,\r\n  table.dataTable thead > tr > th.sorting_desc_disabled,\r\n  table.dataTable thead > tr > td.sorting,\r\n  table.dataTable thead > tr > td.sorting_asc,\r\n  table.dataTable thead > tr > td.sorting_desc,\r\n  table.dataTable thead > tr > td.sorting_asc_disabled,\r\n  table.dataTable thead > tr > td.sorting_desc_disabled {\r\n    @apply relative cursor-pointer pr-7;\r\n  }\r\n  table.dataTable thead > tr > th.sorting:before,\r\n  table.dataTable thead > tr > th.sorting:after,\r\n  table.dataTable thead > tr > th.sorting_asc:before,\r\n  table.dataTable thead > tr > th.sorting_asc:after,\r\n  table.dataTable thead > tr > th.sorting_desc:before,\r\n  table.dataTable thead > tr > th.sorting_desc:after,\r\n  table.dataTable thead > tr > th.sorting_asc_disabled:before,\r\n  table.dataTable thead > tr > th.sorting_asc_disabled:after,\r\n  table.dataTable thead > tr > th.sorting_desc_disabled:before,\r\n  table.dataTable thead > tr > th.sorting_desc_disabled:after,\r\n  table.dataTable thead > tr > td.sorting:before,\r\n  table.dataTable thead > tr > td.sorting:after,\r\n  table.dataTable thead > tr > td.sorting_asc:before,\r\n  table.dataTable thead > tr > td.sorting_asc:after,\r\n  table.dataTable thead > tr > td.sorting_desc:before,\r\n  table.dataTable thead > tr > td.sorting_desc:after,\r\n  table.dataTable thead > tr > td.sorting_asc_disabled:before,\r\n  table.dataTable thead > tr > td.sorting_asc_disabled:after,\r\n  table.dataTable thead > tr > td.sorting_desc_disabled:before,\r\n  table.dataTable thead > tr > td.sorting_desc_disabled:after {\r\n    @apply absolute right-2.5 block text-xs leading-3 opacity-25;\r\n  }\r\n  table.dataTable thead > tr > th.sorting:before,\r\n  table.dataTable thead > tr > th.sorting_asc:before,\r\n  table.dataTable thead > tr > th.sorting_desc:before,\r\n  table.dataTable thead > tr > th.sorting_asc_disabled:before,\r\n  table.dataTable thead > tr > th.sorting_desc_disabled:before,\r\n  table.dataTable thead > tr > td.sorting:before,\r\n  table.dataTable thead > tr > td.sorting_asc:before,\r\n  table.dataTable thead > tr > td.sorting_desc:before,\r\n  table.dataTable thead > tr > td.sorting_asc_disabled:before,\r\n  table.dataTable thead > tr > td.sorting_desc_disabled:before {\r\n    @apply bottom-[43%] h-4 w-4 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')];\r\n  }\r\n  table.dataTable thead > tr > th.sorting:after,\r\n  table.dataTable thead > tr > th.sorting_asc:after,\r\n  table.dataTable thead > tr > th.sorting_desc:after,\r\n  table.dataTable thead > tr > th.sorting_asc_disabled:after,\r\n  table.dataTable thead > tr > th.sorting_desc_disabled:after,\r\n  table.dataTable thead > tr > td.sorting:after,\r\n  table.dataTable thead > tr > td.sorting_asc:after,\r\n  table.dataTable thead > tr > td.sorting_desc:after,\r\n  table.dataTable thead > tr > td.sorting_asc_disabled:after,\r\n  table.dataTable thead > tr > td.sorting_desc_disabled:after {\r\n    @apply top-[43%] 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')];\r\n  }\r\n  table.dataTable thead > tr > th.sorting_asc:before,\r\n  table.dataTable thead > tr > th.sorting_desc:after,\r\n  table.dataTable thead > tr > td.sorting_asc:before,\r\n  table.dataTable thead > tr > td.sorting_desc:after {\r\n    @apply opacity-80;\r\n  }\r\n  table.dataTable thead > tr > th.sorting_desc_disabled:after,\r\n  table.dataTable thead > tr > th.sorting_asc_disabled:before,\r\n  table.dataTable thead > tr > td.sorting_desc_disabled:after,\r\n  table.dataTable thead > tr > td.sorting_asc_disabled:before {\r\n    @apply hidden;\r\n  }\r\n  table.dataTable thead > tr > th:active,\r\n  table.dataTable thead > tr > td:active {\r\n    @apply outline-none;\r\n  }\r\n\r\n  div.dataTables_scrollBody > table.dataTable > thead > tr > th:before,\r\n  div.dataTables_scrollBody > table.dataTable > thead > tr > th:after,\r\n  div.dataTables_scrollBody > table.dataTable > thead > tr > td:before,\r\n  div.dataTables_scrollBody > table.dataTable > thead > tr > td:after {\r\n    @apply hidden;\r\n  }\r\n\r\n  div.dataTables_processing {\r\n    @apply absolute left-[50%] top-[50%] ml-[-100px] mt-[-26px] w-[200px] p-0.5 text-center;\r\n  }\r\n  div.dataTables_processing > div:last-child {\r\n    @apply relative mx-auto my-4 h-4 w-20;\r\n  }\r\n  div.dataTables_processing > div:last-child > div {\r\n    @apply absolute top-0 h-3.5 w-3.5 rounded-full;\r\n    background: hsl(var(--dt-row-selected));\r\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\r\n  }\r\n  div.dataTables_processing > div:last-child > div:nth-child(1) {\r\n    left: 8px;\r\n    animation: datatables-loader-1 0.6s infinite;\r\n  }\r\n  div.dataTables_processing > div:last-child > div:nth-child(2) {\r\n    left: 8px;\r\n    animation: datatables-loader-2 0.6s infinite;\r\n  }\r\n  div.dataTables_processing > div:last-child > div:nth-child(3) {\r\n    left: 32px;\r\n    animation: datatables-loader-2 0.6s infinite;\r\n  }\r\n  div.dataTables_processing > div:last-child > div:nth-child(4) {\r\n    left: 56px;\r\n    animation: datatables-loader-3 0.6s infinite;\r\n  }\r\n\r\n  @keyframes datatables-loader-1 {\r\n    0% {\r\n      transform: scale(0);\r\n    }\r\n    100% {\r\n      transform: scale(1);\r\n    }\r\n  }\r\n  @keyframes datatables-loader-3 {\r\n    0% {\r\n      transform: scale(1);\r\n    }\r\n    100% {\r\n      transform: scale(0);\r\n    }\r\n  }\r\n  @keyframes datatables-loader-2 {\r\n    0% {\r\n      transform: translate(0, 0);\r\n    }\r\n    100% {\r\n      transform: translate(24px, 0);\r\n    }\r\n  }\r\n  table.dataTable.nowrap th,\r\n  table.dataTable.nowrap td {\r\n    white-space: nowrap;\r\n  }\r\n  table.dataTable th.dt-left,\r\n  table.dataTable td.dt-left {\r\n    text-align: left;\r\n  }\r\n  table.dataTable th.dt-center,\r\n  table.dataTable td.dt-center,\r\n  table.dataTable td.dataTables_empty {\r\n    text-align: center;\r\n  }\r\n  table.dataTable th.dt-right,\r\n  table.dataTable td.dt-right {\r\n    text-align: right;\r\n  }\r\n  table.dataTable th.dt-justify,\r\n  table.dataTable td.dt-justify {\r\n    text-align: justify;\r\n  }\r\n  table.dataTable th.dt-nowrap,\r\n  table.dataTable td.dt-nowrap {\r\n    white-space: nowrap;\r\n  }\r\n  table.dataTable thead th,\r\n  table.dataTable thead td,\r\n  table.dataTable tfoot th,\r\n  table.dataTable tfoot td {\r\n    text-align: left;\r\n  }\r\n  table.dataTable thead th.dt-head-left,\r\n  table.dataTable thead td.dt-head-left,\r\n  table.dataTable tfoot th.dt-head-left,\r\n  table.dataTable tfoot td.dt-head-left {\r\n    text-align: left;\r\n  }\r\n  table.dataTable thead th.dt-head-center,\r\n  table.dataTable thead td.dt-head-center,\r\n  table.dataTable tfoot th.dt-head-center,\r\n  table.dataTable tfoot td.dt-head-center {\r\n    text-align: center;\r\n  }\r\n  table.dataTable thead th.dt-head-right,\r\n  table.dataTable thead td.dt-head-right,\r\n  table.dataTable tfoot th.dt-head-right,\r\n  table.dataTable tfoot td.dt-head-right {\r\n    text-align: right;\r\n  }\r\n  table.dataTable thead th.dt-head-justify,\r\n  table.dataTable thead td.dt-head-justify,\r\n  table.dataTable tfoot th.dt-head-justify,\r\n  table.dataTable tfoot td.dt-head-justify {\r\n    text-align: justify;\r\n  }\r\n  table.dataTable thead th.dt-head-nowrap,\r\n  table.dataTable thead td.dt-head-nowrap,\r\n  table.dataTable tfoot th.dt-head-nowrap,\r\n  table.dataTable tfoot td.dt-head-nowrap {\r\n    white-space: nowrap;\r\n  }\r\n  table.dataTable tbody th.dt-body-left,\r\n  table.dataTable tbody td.dt-body-left {\r\n    text-align: left;\r\n  }\r\n  table.dataTable tbody th.dt-body-center,\r\n  table.dataTable tbody td.dt-body-center {\r\n    text-align: center;\r\n  }\r\n  table.dataTable tbody th.dt-body-right,\r\n  table.dataTable tbody td.dt-body-right {\r\n    text-align: right;\r\n  }\r\n  table.dataTable tbody th.dt-body-justify,\r\n  table.dataTable tbody td.dt-body-justify {\r\n    text-align: justify;\r\n  }\r\n  table.dataTable tbody th.dt-body-nowrap,\r\n  table.dataTable tbody td.dt-body-nowrap {\r\n    white-space: nowrap;\r\n  }\r\n\r\n  /* Table Styles */\r\n\r\n  table.dataTable {\r\n    @apply w-full table-auto border-collapse;\r\n  }\r\n\r\n  /* Table header styles */\r\n  table.dataTable thead th,\r\n  table.dataTable tfoot th {\r\n    @apply text-left text-sm font-medium text-muted-foreground;\r\n  }\r\n\r\n  table.dataTable > thead > tr > th {\r\n    @apply border-b border-t-0 px-6 py-3;\r\n  }\r\n  table.dataTable > thead > tr > td {\r\n    @apply border-b px-6 py-3 text-sm;\r\n  }\r\n  table.dataTable > thead > tr > th:active,\r\n  table.dataTable > thead > tr > td:active {\r\n    @apply outline-none;\r\n  }\r\n  table.dataTable > tfoot > tr > th,\r\n  table.dataTable > tfoot > tr > td {\r\n    @apply border-t px-6 py-3;\r\n  }\r\n  table.dataTable tbody tr {\r\n    @apply bg-transparent;\r\n  }\r\n  table.dataTable tbody tr.selected > * {\r\n    @apply bg-primary/10;\r\n  }\r\n  table.dataTable tbody tr.selected a {\r\n    @apply text-primary;\r\n  }\r\n  table.dataTable tbody th,\r\n  table.dataTable tbody td {\r\n    @apply px-6 py-3 text-sm;\r\n  }\r\n  table.dataTable.row-border > tbody > tr > th,\r\n  table.dataTable.row-border > tbody > tr > td,\r\n  table.dataTable.display > tbody > tr > th,\r\n  table.dataTable.display > tbody > tr > td {\r\n    @apply border-t;\r\n  }\r\n  table.dataTable.row-border > tbody > tr:first-child > th,\r\n  table.dataTable.row-border > tbody > tr:first-child > td,\r\n  table.dataTable.display > tbody > tr:first-child > th,\r\n  table.dataTable.display > tbody > tr:first-child > td {\r\n    @apply border-t-0;\r\n  }\r\n  table.dataTable.row-border > tbody > tr.selected + tr.selected > td,\r\n  table.dataTable.display > tbody > tr.selected + tr.selected > td {\r\n    @apply border-t-primary/30;\r\n  }\r\n  table.dataTable.cell-border > tbody > tr > th,\r\n  table.dataTable.cell-border > tbody > tr > td {\r\n    @apply border-r border-t;\r\n  }\r\n  table.dataTable.cell-border > tbody > tr > th:first-child,\r\n  table.dataTable.cell-border > tbody > tr > td:first-child {\r\n    @apply border-l;\r\n  }\r\n  table.dataTable.cell-border > tbody > tr:first-child > th,\r\n  table.dataTable.cell-border > tbody > tr:first-child > td {\r\n    @apply border-t-0;\r\n  }\r\n  table.dataTable.stripe > tbody > tr.odd > *,\r\n  table.dataTable.display > tbody > tr.odd > * {\r\n    @apply bg-muted/50;\r\n  }\r\n  table.dataTable.stripe > tbody > tr.odd.selected > *,\r\n  table.dataTable.display > tbody > tr.odd.selected > * {\r\n    @apply bg-primary/10;\r\n  }\r\n  table.dataTable.hover > tbody > tr:hover > *,\r\n  table.dataTable.display > tbody > tr:hover > * {\r\n    @apply bg-muted;\r\n  }\r\n  table.dataTable.hover > tbody > tr.selected:hover > *,\r\n  table.dataTable.display > tbody > tr.selected:hover > * {\r\n    @apply !bg-primary/10;\r\n  }\r\n  table.dataTable.order-column > tbody tr > .sorting_1,\r\n  table.dataTable.order-column > tbody tr > .sorting_2,\r\n  table.dataTable.order-column > tbody tr > .sorting_3,\r\n  table.dataTable.display > tbody tr > .sorting_1,\r\n  table.dataTable.display > tbody tr > .sorting_2,\r\n  table.dataTable.display > tbody tr > .sorting_3 {\r\n    @apply bg-muted;\r\n  }\r\n  table.dataTable.order-column > tbody tr.selected > .sorting_1,\r\n  table.dataTable.order-column > tbody tr.selected > .sorting_2,\r\n  table.dataTable.order-column > tbody tr.selected > .sorting_3,\r\n  table.dataTable.display > tbody tr.selected > .sorting_1,\r\n  table.dataTable.display > tbody tr.selected > .sorting_2,\r\n  table.dataTable.display > tbody tr.selected > .sorting_3 {\r\n    @apply !bg-primary/10;\r\n  }\r\n  table.dataTable.display > tbody > tr.odd > .sorting_1,\r\n  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1 {\r\n    @apply bg-muted/50;\r\n  }\r\n  table.dataTable.display > tbody > tr.odd > .sorting_2,\r\n  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_2 {\r\n    @apply bg-muted/30;\r\n  }\r\n  table.dataTable.display > tbody > tr.odd > .sorting_3,\r\n  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_3 {\r\n    @apply bg-muted/10;\r\n  }\r\n  table.dataTable.display > tbody > tr.odd.selected > .sorting_1,\r\n  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_1 {\r\n    @apply bg-muted/50;\r\n  }\r\n  table.dataTable.display > tbody > tr.odd.selected > .sorting_2,\r\n  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_2 {\r\n    @apply bg-muted/30;\r\n  }\r\n  table.dataTable.display > tbody > tr.odd.selected > .sorting_3,\r\n  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_3 {\r\n    @apply bg-muted/10;\r\n  }\r\n  table.dataTable.display > tbody > tr.even > .sorting_1,\r\n  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_1 {\r\n    @apply bg-muted/50;\r\n  }\r\n  table.dataTable.display > tbody > tr.even > .sorting_2,\r\n  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_2 {\r\n    @apply bg-muted/30;\r\n  }\r\n  table.dataTable.display > tbody > tr.even > .sorting_3,\r\n  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_3 {\r\n    @apply bg-muted/10;\r\n  }\r\n  table.dataTable.display > tbody > tr.even.selected > .sorting_1,\r\n  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_1 {\r\n    @apply bg-primary/10;\r\n  }\r\n  table.dataTable.display > tbody > tr.even.selected > .sorting_2,\r\n  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_2 {\r\n    @apply bg-primary/10;\r\n  }\r\n  table.dataTable.display > tbody > tr.even.selected > .sorting_3,\r\n  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_3 {\r\n    @apply bg-primary/10;\r\n  }\r\n  table.dataTable.display tbody tr:hover > .sorting_1,\r\n  table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {\r\n    @apply bg-muted;\r\n  }\r\n  table.dataTable.display tbody tr:hover > .sorting_2,\r\n  table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {\r\n    @apply bg-muted;\r\n  }\r\n  table.dataTable.display tbody tr:hover > .sorting_3,\r\n  table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {\r\n    @apply bg-muted;\r\n  }\r\n  table.dataTable.display tbody tr:hover.selected > .sorting_1,\r\n  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {\r\n    @apply bg-primary/10;\r\n  }\r\n  table.dataTable.display tbody tr:hover.selected > .sorting_2,\r\n  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {\r\n    @apply bg-primary/10;\r\n  }\r\n  table.dataTable.display tbody tr:hover.selected > .sorting_3,\r\n  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {\r\n    @apply bg-primary/10;\r\n  }\r\n  table.dataTable.no-footer {\r\n    @apply border-b-0;\r\n  }\r\n  table.dataTable.compact thead th,\r\n  table.dataTable.compact thead td,\r\n  table.dataTable.compact tfoot th,\r\n  table.dataTable.compact tfoot td,\r\n  table.dataTable.compact tbody th,\r\n  table.dataTable.compact tbody td {\r\n    @apply px-4 py-2;\r\n  }\r\n\r\n  table.dataTable th,\r\n  table.dataTable td {\r\n    @apply box-content border-y;\r\n  }\r\n\r\n  table.dataTable tr:last-child td {\r\n    @apply !border-b-0;\r\n  }\r\n\r\n  /* Control feature layout */\r\n  .dataTables_wrapper {\r\n    @apply w-full overflow-x-auto;\r\n  }\r\n\r\n  /* Export button styles */\r\n  .dataTables_wrapper .dt-buttons {\r\n    @apply inline-flex flex-wrap items-center gap-2;\r\n    button {\r\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;\r\n    }\r\n  }\r\n\r\n  /*  Copy modal */\r\n  .dt-button-info {\r\n    @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur;\r\n  }\r\n\r\n  .dataTables_wrapper .dataTables_length {\r\n    label {\r\n      @apply inline-flex items-center gap-2 text-sm font-normal text-muted-foreground;\r\n      select {\r\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;\r\n      }\r\n    }\r\n  }\r\n  .dataTables_wrapper .dataTables_filter {\r\n    label {\r\n      @apply inline-flex w-full cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\r\n      input {\r\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;\r\n      }\r\n    }\r\n  }\r\n  .dataTables_wrapper .dataTables_info {\r\n    @apply flex items-center gap-3 text-sm !text-muted-foreground;\r\n  }\r\n  .dataTables_wrapper .dataTables_paginate {\r\n    .paginate_button {\r\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;\r\n    }\r\n  }\r\n  .dataTables_wrapper .dataTables_paginate .paginate_button.current,\r\n  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {\r\n    @apply bg-muted;\r\n  }\r\n  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,\r\n  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,\r\n  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {\r\n    @apply pointer-events-none opacity-50;\r\n  }\r\n  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {\r\n    @apply bg-muted;\r\n  }\r\n  .dataTables_wrapper .dataTables_paginate .paginate_button:active {\r\n    @apply bg-muted;\r\n  }\r\n  .dataTables_wrapper .dataTables_paginate .ellipsis {\r\n    @apply inline-flex h-8 min-w-[32px] items-start justify-center text-sm;\r\n  }\r\n  .dataTables_wrapper .dataTables_scroll {\r\n    clear: both;\r\n  }\r\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {\r\n    -webkit-overflow-scrolling: touch;\r\n  }\r\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th,\r\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td,\r\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th,\r\n  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {\r\n    vertical-align: middle;\r\n  }\r\n  .dataTables_wrapper\r\n    .dataTables_scroll\r\n    div.dataTables_scrollBody\r\n    > table\r\n    > thead\r\n    > tr\r\n    > th\r\n    > div.dataTables_sizing,\r\n  .dataTables_wrapper\r\n    .dataTables_scroll\r\n    div.dataTables_scrollBody\r\n    > table\r\n    > thead\r\n    > tr\r\n    > td\r\n    > div.dataTables_sizing,\r\n  .dataTables_wrapper\r\n    .dataTables_scroll\r\n    div.dataTables_scrollBody\r\n    > table\r\n    > tbody\r\n    > tr\r\n    > th\r\n    > div.dataTables_sizing,\r\n  .dataTables_wrapper\r\n    .dataTables_scroll\r\n    div.dataTables_scrollBody\r\n    > table\r\n    > tbody\r\n    > tr\r\n    > td\r\n    > div.dataTables_sizing {\r\n    height: 0;\r\n    overflow: hidden;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n  }\r\n  .dataTables_wrapper.no-footer .dataTables_scrollBody {\r\n    @apply border-b;\r\n  }\r\n  .dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,\r\n  .dataTables_wrapper.no-footer div.dataTables_scrollBody > table {\r\n    border-bottom: none;\r\n  }\r\n  .dataTables_wrapper:after {\r\n    visibility: hidden;\r\n    display: block;\r\n    content: \"\";\r\n    clear: both;\r\n    height: 0;\r\n  }\r\n\r\n  /* \r\n  responsive styles\r\n   */\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {\r\n    cursor: default !important;\r\n  }\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {\r\n    display: none !important;\r\n  }\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {\r\n    cursor: pointer;\r\n  }\r\n\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {\r\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')];\r\n  }\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.arrow-right::before,\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control.arrow-right::before {\r\n    content: \"◄\";\r\n  }\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,\r\n  table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {\r\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')];\r\n  }\r\n  table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,\r\n  table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {\r\n    padding-left: 0.333em;\r\n  }\r\n  table.dataTable.dtr-column > tbody > tr > td.dtr-control,\r\n  table.dataTable.dtr-column > tbody > tr > th.dtr-control,\r\n  table.dataTable.dtr-column > tbody > tr > td.control,\r\n  table.dataTable.dtr-column > tbody > tr > th.control {\r\n    cursor: pointer;\r\n  }\r\n  table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,\r\n  table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,\r\n  table.dataTable.dtr-column > tbody > tr > td.control:before,\r\n  table.dataTable.dtr-column > tbody > tr > th.control:before {\r\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')];\r\n  }\r\n  table.dataTable.dtr-column > tbody > tr > td.dtr-control.arrow-right::before,\r\n  table.dataTable.dtr-column > tbody > tr > th.dtr-control.arrow-right::before,\r\n  table.dataTable.dtr-column > tbody > tr > td.control.arrow-right::before,\r\n  table.dataTable.dtr-column > tbody > tr > th.control.arrow-right::before {\r\n    content: \"◄\";\r\n  }\r\n  table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before,\r\n  table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before,\r\n  table.dataTable.dtr-column > tbody > tr.parent td.control:before,\r\n  table.dataTable.dtr-column > tbody > tr.parent th.control:before {\r\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')];\r\n  }\r\n\r\n  table.dataTable > tbody td.child {\r\n    @apply p-0;\r\n  }\r\n  table.dataTable > tbody > tr.child:hover,\r\n  table.dataTable > tbody > tr.child:hover > td.child {\r\n    background: transparent !important;\r\n  }\r\n  table.dataTable > tbody > tr.child ul.dtr-details {\r\n    @apply m-0 block w-full list-none p-0;\r\n  }\r\n  table.dataTable > tbody > tr.child ul.dtr-details > li {\r\n    @apply border-b p-3 px-7 hover:bg-muted;\r\n  }\r\n\r\n  table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {\r\n    @apply border-b-0;\r\n  }\r\n  table.dataTable > tbody > tr.child span.dtr-title {\r\n    @apply inline-block min-w-[80px] font-bold;\r\n  }\r\n  div.dtr-modal {\r\n    position: fixed;\r\n    box-sizing: border-box;\r\n    top: 0;\r\n    left: 0;\r\n    height: 100%;\r\n    width: 100%;\r\n    z-index: 100;\r\n    padding: 10em 1em;\r\n  }\r\n  div.dtr-modal div.dtr-modal-display {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    bottom: 0;\r\n    right: 0;\r\n    width: 50%;\r\n    height: fit-content;\r\n    max-height: 75%;\r\n    overflow: auto;\r\n    margin: auto;\r\n    z-index: 102;\r\n    overflow: auto;\r\n    background-color: #f5f5f7;\r\n    border: 1px solid black;\r\n    border-radius: 0.5em;\r\n    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);\r\n  }\r\n  div.dtr-modal div.dtr-modal-content {\r\n    position: relative;\r\n    padding: 2.5em;\r\n  }\r\n  div.dtr-modal div.dtr-modal-content h2 {\r\n    margin-top: 0;\r\n  }\r\n  div.dtr-modal div.dtr-modal-close {\r\n    position: absolute;\r\n    top: 6px;\r\n    right: 6px;\r\n    width: 22px;\r\n    height: 22px;\r\n    text-align: center;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    z-index: 12;\r\n  }\r\n  div.dtr-modal div.dtr-modal-background {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    z-index: 101;\r\n    background: rgba(0, 0, 0, 0.6);\r\n  }\r\n\r\n  /* Search Builder Styles */\r\n  div.dt-button-collection {\r\n    overflow: visible !important;\r\n    z-index: 2002 !important;\r\n  }\r\n  div.dt-button-collection div.dtsb-searchBuilder {\r\n    padding-left: 1em !important;\r\n    padding-right: 1em !important;\r\n  }\r\n  div.dt-button-collection.dtb-collection-closeable div.dtsb-titleRow {\r\n    padding-right: 40px;\r\n  }\r\n  .dtsb-greyscale {\r\n    @apply !border;\r\n  }\r\n  div.dtsb-logicContainer .dtsb-greyscale {\r\n    border: none !important;\r\n  }\r\n  div.dtsb-searchBuilder {\r\n    @apply mb-4 cursor-default justify-evenly text-left;\r\n  }\r\n  div.dtsb-searchBuilder button.dtsb-button,\r\n  div.dtsb-searchBuilder select {\r\n    @apply text-sm;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-titleRow {\r\n    @apply mb-3 flex items-center justify-between;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title {\r\n    @apply inline-block text-sm font-normal;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title:empty {\r\n    display: inline;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-value,\r\n  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-data,\r\n  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-condition {\r\n    display: block;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group {\r\n    @apply relative clear-both mb-4;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group button.dtsb-search {\r\n    float: right;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group button.dtsb-clearGroup {\r\n    margin: 2px;\r\n    text-align: center;\r\n    padding: 0;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\r\n    -webkit-transform: rotate(90deg);\r\n    -moz-transform: rotate(90deg);\r\n    -o-transform: rotate(90deg);\r\n    -ms-transform: rotate(90deg);\r\n    transform: rotate(90deg);\r\n    position: absolute;\r\n    margin-top: 0.8em;\r\n    margin-right: 0.8em;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\r\n    margin-bottom: 0.8em;\r\n    display: flex;\r\n    justify-content: flex-start;\r\n    flex-flow: row wrap;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r\n    padding: 0.4em;\r\n    margin-right: 0.8em;\r\n    min-width: 5em;\r\n    max-width: 20em;\r\n    color: inherit;\r\n  }\r\n  div.dtsb-searchBuilder\r\n    div.dtsb-group\r\n    div.dtsb-criteria\r\n    select.dtsb-dropDown\r\n    option.dtsb-notItalic,\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input option.dtsb-notItalic {\r\n    font-style: normal;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-italic {\r\n    font-style: italic;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\r\n    flex: 1;\r\n    white-space: nowrap;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont span.dtsp-joiner {\r\n    margin-right: 0.8em;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input.dtsb-value {\r\n    width: 33%;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont select,\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input {\r\n    height: 100%;\r\n    box-sizing: border-box;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\r\n    margin-left: auto;\r\n    display: inline-block;\r\n  }\r\n  div.dtsb-searchBuilder\r\n    div.dtsb-group\r\n    div.dtsb-criteria\r\n    div.dtsb-buttonContainer\r\n    button.dtsb-delete,\r\n  div.dtsb-searchBuilder\r\n    div.dtsb-group\r\n    div.dtsb-criteria\r\n    div.dtsb-buttonContainer\r\n    button.dtsb-right,\r\n  div.dtsb-searchBuilder\r\n    div.dtsb-group\r\n    div.dtsb-criteria\r\n    div.dtsb-buttonContainer\r\n    button.dtsb-left {\r\n    margin-right: 0.8em;\r\n  }\r\n  div.dtsb-searchBuilder\r\n    div.dtsb-group\r\n    div.dtsb-criteria\r\n    div.dtsb-buttonContainer\r\n    button.dtsb-delete:last-child,\r\n  div.dtsb-searchBuilder\r\n    div.dtsb-group\r\n    div.dtsb-criteria\r\n    div.dtsb-buttonContainer\r\n    button.dtsb-right:last-child,\r\n  div.dtsb-searchBuilder\r\n    div.dtsb-group\r\n    div.dtsb-criteria\r\n    div.dtsb-buttonContainer\r\n    button.dtsb-left:last-child {\r\n    margin-right: 0;\r\n  }\r\n  @media screen and (max-width: 550px) {\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\r\n      display: flex;\r\n      flex-flow: none;\r\n      flex-direction: column;\r\n      justify-content: flex-start;\r\n      padding-right: calc(35px + 0.8em);\r\n      margin-bottom: 0px;\r\n    }\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:first-child),\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:nth-child(2)),\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:last-child) {\r\n      padding-top: 0.8em;\r\n    }\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:first-child,\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:nth-child(2),\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:last-child {\r\n      padding-top: 0em;\r\n    }\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r\n      max-width: none;\r\n      width: 100%;\r\n      margin-bottom: 0.8em;\r\n      margin-right: 0.8em;\r\n    }\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\r\n      margin-right: 0.8em;\r\n    }\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\r\n      position: absolute;\r\n      width: 35px;\r\n      display: flex;\r\n      flex-wrap: wrap-reverse;\r\n      right: 0;\r\n    }\r\n    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button {\r\n      margin-right: 0px !important;\r\n    }\r\n  }\r\n  div.dtsb-searchBuilder button,\r\n  div.dtsb-searchBuilder select.dtsb-dropDown,\r\n  div.dtsb-searchBuilder input {\r\n    @apply bg-background;\r\n  }\r\n  div.dtsb-searchBuilder button.dtsb-button {\r\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;\r\n  }\r\n  div.dtsb-searchBuilder button.dtsb-button:hover {\r\n    @apply cursor-pointer bg-muted;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-logicContainer {\r\n    @apply overflow-hidden rounded-none border;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-logicContainer button {\r\n    @apply rounded-md border-transparent bg-transparent;\r\n  }\r\n  div.dtsb-searchBuilder button.dtsb-clearGroup {\r\n    min-width: 2em;\r\n    padding: 0;\r\n  }\r\n  div.dtsb-searchBuilder button.dtsb-iptbtn {\r\n    min-width: 100px;\r\n    text-align: left;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\r\n    @apply flex flex-row content-start items-start justify-start rounded-md;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-logic {\r\n    @apply m-0 shrink-0 grow rounded-none border-0;\r\n    flex-basis: 3em;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-clearGroup {\r\n    border: none;\r\n    border-radius: 0px;\r\n    width: 2em;\r\n    margin: 0px;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r\n    @apply rounded-md border;\r\n  }\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-condition,\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-data,\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-value {\r\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;\r\n  }\r\n\r\n  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-value {\r\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;\r\n  }\r\n\r\n  /* Col vis styles */\r\n  .dt-button-background {\r\n    @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur-sm;\r\n  }\r\n  .dt-button-down-arrow {\r\n    @apply text-[10px];\r\n  }\r\n  .dt-button-collection {\r\n    @apply relative;\r\n    [role=\"menu\"] {\r\n      @apply absolute -left-40 top-7 flex w-[300px] flex-wrap gap-x-3 gap-y-2 rounded-md border bg-background p-2 shadow lg:w-[500px];\r\n      button {\r\n        @apply h-7 px-2 text-xs;\r\n      }\r\n      .dt-button.buttons-columnVisibility.dt-button-active {\r\n        @apply bg-primary text-primary-foreground;\r\n      }\r\n    }\r\n  }\r\n</style>\r\n",
       },
     ],
     utils: [],
@@ -1312,7 +1312,7 @@ export default [
         fileName: "Navbar.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\r\n  <Primitive :class="styles({ sticky, class: props.class })" v-bind="reactiveOmit(props, \'class\')">\r\n    <slot> </slot>\r\n  </Primitive>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n  import { type PrimitiveProps } from "radix-vue";\r\n\r\n  const props = withDefaults(\r\n    defineProps<\r\n      PrimitiveProps & {\r\n        class?: any;\r\n        sticky?: boolean;\r\n      }\r\n    >(),\r\n    {\r\n      as: "header",\r\n    }\r\n  );\r\n\r\n  const styles = tv({\r\n    base: "z-20 border-b bg-background/90 backdrop-blur",\r\n    variants: {\r\n      sticky: {\r\n        true: "sticky top-0",\r\n      },\r\n    },\r\n  });\r\n</script>\r\n',
+          '<template>\r\n  <Primitive :class="styles({ sticky, class: props.class })" v-bind="reactiveOmit(props, \'class\')">\r\n    <slot> </slot>\r\n  </Primitive>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n  import { Primitive } from "radix-vue";\r\n  import type { PrimitiveProps } from "radix-vue";\r\n\r\n  const props = withDefaults(\r\n    defineProps<\r\n      PrimitiveProps & {\r\n        class?: any;\r\n        sticky?: boolean;\r\n      }\r\n    >(),\r\n    {\r\n      as: "header",\r\n    }\r\n  );\r\n\r\n  const styles = tv({\r\n    base: "z-20 border-b bg-background/90 backdrop-blur",\r\n    variants: {\r\n      sticky: {\r\n        true: "sticky top-0",\r\n      },\r\n    },\r\n  });\r\n</script>\r\n',
       },
     ],
     utils: [],
@@ -2150,7 +2150,7 @@ export default [
         fileName: "Toast/Toast.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\r\n  <ToastRoot\r\n    v-bind="forwarded"\r\n    :class="styles({ variant, class: props.class })"\r\n    @update:open="onOpenChange"\r\n  >\r\n    <slot></slot>\r\n  </ToastRoot>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n  import { ToastRoot, useForwardPropsEmits } from "radix-vue";\r\n  import type { ToastRootEmits, ToastRootProps } from "radix-vue";\r\n\r\n  export interface ToastProps extends ToastRootProps {\r\n    /**\r\n     * Custom class names to add to the toast.\r\n     */\r\n    class?: any;\r\n    /**\r\n     * The variant of the toast.\r\n     */\r\n    variant?: VariantProps<typeof styles>["variant"];\r\n    /**\r\n     * Callback that fires when the toast is closed.\r\n     */\r\n    onOpenChange?: ((value: boolean) => void) | undefined;\r\n  }\r\n\r\n  const props = withDefaults(defineProps<ToastProps>(), {});\r\n\r\n  const emits = defineEmits<ToastRootEmits>();\r\n  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\r\n\r\n  const styles = tv({\r\n    base: "group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-md border p-4 pr-9 shadow-sm transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",\r\n    variants: {\r\n      variant: {\r\n        default: "border bg-background text-foreground",\r\n        success:\r\n          "success group border-[var(--success-border)] bg-[--success-bg] text-[--success-text]",\r\n        info: "info group border-[var(--info-border)] bg-[--info-bg] text-[--info-text]",\r\n        warning:\r\n          "warning group border-[var(--warning-border)] bg-[--warning-bg] text-[--warning-text]",\r\n        destructive:\r\n          "destructive group border-[var(--error-border)] bg-[--error-bg] text-[--error-text]",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: "default",\r\n    },\r\n  });\r\n</script>\r\n',
+          '<template>\r\n  <ToastRoot\r\n    v-bind="forwarded"\r\n    :class="styles({ variant, class: props.class })"\r\n    @update:open="onOpenChange"\r\n  >\r\n    <slot></slot>\r\n  </ToastRoot>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n  import { ToastRoot, useForwardPropsEmits } from "radix-vue";\r\n  import type { ToastRootEmits, ToastRootProps } from "radix-vue";\r\n\r\n  export interface ToastProps extends ToastRootProps {\r\n    /**\r\n     * Custom class names to add to the toast.\r\n     */\r\n    class?: any;\r\n    /**\r\n     * The variant of the toast.\r\n     */\r\n    variant?: VariantProps<typeof styles>["variant"];\r\n    /**\r\n     * Callback that fires when the toast is closed.\r\n     */\r\n    onOpenChange?: ((value: boolean) => void) | undefined;\r\n  }\r\n\r\n  const props = withDefaults(defineProps<ToastProps>(), {});\r\n\r\n  const emits = defineEmits<ToastRootEmits>();\r\n  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\r\n\r\n  const styles = tv({\r\n    base: "group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-md border p-4 pr-9 shadow-sm transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",\r\n    variants: {\r\n      variant: {\r\n        default: "border bg-background text-foreground",\r\n        success:\r\n          "success group border-[var(--success-border)] bg-[--success-bg] text-[--success-text]",\r\n        info: "info group border-[var(--info-border)] bg-[--info-bg] text-[--info-text]",\r\n        warning:\r\n          "warning group border-[var(--warning-border)] bg-[--warning-bg] text-[--warning-text]",\r\n        destructive:\r\n          "destructive group border-[var(--error-border)] bg-[--error-bg] text-[--error-text]",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: "default",\r\n    },\r\n  });\r\n</script>\r\n',
       },
       {
         fileName: "Toast/Toaster.vue",