ui-thing 0.1.4 → 0.1.5

package/dist/index.js

@@ -2329,7 +2329,7 @@ export const buttonStyles = tv({
 
   const props = defineProps<ContextMenuTriggerProps>();
 </script>
-`}],utils:[],composables:[],plugins:[]},{name:"DataTables.net",value:"datatable",deps:["datatables.net-buttons-dt@^2.4.3","datatables.net-responsive-dt@^2.5.1","datatables.net-searchbuilder-dt@^1.7.0","datatables.net-select-dt@^1.7.1","datatables.net-vue3","jszip"],overrides:{"datatables.net":"1.13.10","datatables.net-dt":"1.13.10"},plugins:[{fileName:"datatables.client.ts",dirPath:"plugins",fileContent:`import DataTablesCore from "datatables.net";
+`}],utils:[],composables:[],plugins:[]},{name:"DataTables.net",value:"datatable",deps:["datatables.net-buttons-dt@^2.4.3","datatables.net-responsive-dt@^2.5.1","datatables.net-searchbuilder-dt@^1.7.0","datatables.net-select-dt@^1.7.1","datatables.net-vue3","jszip"],overrides:{"datatables.net":"1.13.11","datatables.net-dt":"1.13.11"},plugins:[{fileName:"datatables.client.ts",dirPath:"plugins",fileContent:`import DataTablesCore from "datatables.net";
 import DataTable from "datatables.net-vue3";
 import JSZip from "jszip";
 
@@ -2350,995 +2350,995 @@ DataTable.use(DataTablesCore);
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component("DataTable", DataTable);
 });
-`}],files:[{fileName:"Datatable.client.vue",dirPath:"components/UI",fileContent:`<template>\r
-  <DataTable ref="table" :data="data" :class="props.class" :options="options">\r
-    <slot></slot>\r
-  </DataTable>\r
-</template>\r
-\r
-<script lang="ts" setup generic="T">\r
-  import type DataTableRef from "datatables.net";\r
-  import type { Config } from "datatables.net/types/types";\r
-\r
-  const table = shallowRef<{ dt: InstanceType<typeof DataTableRef<T[]>> } | null>(null);\r
-\r
-  const props = withDefaults(\r
-    defineProps<{\r
-      data?: Config["data"];\r
-      class?: any;\r
-      options?: Config;\r
-    }>(),\r
-    {\r
-      data: () => [],\r
-      class: "nowrap hover order-column row-border stripe display",\r
-      options: () => ({}),\r
-    }\r
-  );\r
-\r
-  const emits = defineEmits<{\r
-    ready: [any];\r
-  }>();\r
-\r
-  onMounted(() => {\r
-    nextTick(() => {\r
-      emits("ready", table.value?.dt);\r
-    });\r
-  });\r
-</script>\r
-\r
-<style>\r
-  :root {\r
-    --dt-row-selected: 262.1, 83.3%, 57.8%;\r
-    --dt-row-selected-text: 210, 20%, 98%;\r
-    --dt-row-selected-link: 262.1, 83.3%, 57.8%;\r
-    --dt-row-stripe: 0, 0%, 100%;\r
-    --dt-row-hover: 0, 0%, 100%;\r
-    --dt-column-ordering: 0, 0%, 100%;\r
-    --dt-border: 220, 13%, 91%;\r
-    --dt-foreground: 224, 71.4%, 4.1%;\r
-  }\r
-\r
-  .dark {\r
-    --dt-row-selected: 263.4, 70%, 50.4%;\r
-    --dt-row-selected-text: 210, 20%, 98%;\r
-    --dt-row-selected-link: 263.4, 70%, 50.4%;\r
-    --dt-row-stripe: 224, 71.4%, 4.1%;\r
-    --dt-row-hover: 224, 71.4%, 4.1%;\r
-    --dt-column-ordering: 224, 71.4%, 4.1%;\r
-    --dt-border: 215, 27.9%, 16.9%;\r
-    --dt-foreground: 224, 71.4%, 4.1%;\r
-  }\r
-\r
-  table.dataTable td.dt-control {\r
-    text-align: center;\r
-    cursor: pointer;\r
-  }\r
-  table.dataTable td.dt-control:before {\r
-    display: inline-block;\r
-    color: hsla(var(--dt-foreground), 0.5);\r
-    content: "\u25BA";\r
-  }\r
-  table.dataTable tr.dt-hasChild td.dt-control:before {\r
-    content: "\u25BC";\r
-  }\r
-\r
-  table.dataTable thead > tr > th.sorting,\r
-  table.dataTable thead > tr > th.sorting_asc,\r
-  table.dataTable thead > tr > th.sorting_desc,\r
-  table.dataTable thead > tr > th.sorting_asc_disabled,\r
-  table.dataTable thead > tr > th.sorting_desc_disabled,\r
-  table.dataTable thead > tr > td.sorting,\r
-  table.dataTable thead > tr > td.sorting_asc,\r
-  table.dataTable thead > tr > td.sorting_desc,\r
-  table.dataTable thead > tr > td.sorting_asc_disabled,\r
-  table.dataTable thead > tr > td.sorting_desc_disabled {\r
-    @apply relative cursor-pointer pr-7;\r
-  }\r
-  table.dataTable thead > tr > th.sorting:before,\r
-  table.dataTable thead > tr > th.sorting:after,\r
-  table.dataTable thead > tr > th.sorting_asc:before,\r
-  table.dataTable thead > tr > th.sorting_asc:after,\r
-  table.dataTable thead > tr > th.sorting_desc:before,\r
-  table.dataTable thead > tr > th.sorting_desc:after,\r
-  table.dataTable thead > tr > th.sorting_asc_disabled:before,\r
-  table.dataTable thead > tr > th.sorting_asc_disabled:after,\r
-  table.dataTable thead > tr > th.sorting_desc_disabled:before,\r
-  table.dataTable thead > tr > th.sorting_desc_disabled:after,\r
-  table.dataTable thead > tr > td.sorting:before,\r
-  table.dataTable thead > tr > td.sorting:after,\r
-  table.dataTable thead > tr > td.sorting_asc:before,\r
-  table.dataTable thead > tr > td.sorting_asc:after,\r
-  table.dataTable thead > tr > td.sorting_desc:before,\r
-  table.dataTable thead > tr > td.sorting_desc:after,\r
-  table.dataTable thead > tr > td.sorting_asc_disabled:before,\r
-  table.dataTable thead > tr > td.sorting_asc_disabled:after,\r
-  table.dataTable thead > tr > td.sorting_desc_disabled:before,\r
-  table.dataTable thead > tr > td.sorting_desc_disabled:after {\r
-    @apply absolute right-2.5 block text-xs leading-3 opacity-25;\r
-  }\r
-  table.dataTable thead > tr > th.sorting:before,\r
-  table.dataTable thead > tr > th.sorting_asc:before,\r
-  table.dataTable thead > tr > th.sorting_desc:before,\r
-  table.dataTable thead > tr > th.sorting_asc_disabled:before,\r
-  table.dataTable thead > tr > th.sorting_desc_disabled:before,\r
-  table.dataTable thead > tr > td.sorting:before,\r
-  table.dataTable thead > tr > td.sorting_asc:before,\r
-  table.dataTable thead > tr > td.sorting_desc:before,\r
-  table.dataTable thead > tr > td.sorting_asc_disabled:before,\r
-  table.dataTable thead > tr > td.sorting_desc_disabled:before {\r
-    @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
-  }\r
-  table.dataTable thead > tr > th.sorting:after,\r
-  table.dataTable thead > tr > th.sorting_asc:after,\r
-  table.dataTable thead > tr > th.sorting_desc:after,\r
-  table.dataTable thead > tr > th.sorting_asc_disabled:after,\r
-  table.dataTable thead > tr > th.sorting_desc_disabled:after,\r
-  table.dataTable thead > tr > td.sorting:after,\r
-  table.dataTable thead > tr > td.sorting_asc:after,\r
-  table.dataTable thead > tr > td.sorting_desc:after,\r
-  table.dataTable thead > tr > td.sorting_asc_disabled:after,\r
-  table.dataTable thead > tr > td.sorting_desc_disabled:after {\r
-    @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
-  }\r
-  table.dataTable thead > tr > th.sorting_asc:before,\r
-  table.dataTable thead > tr > th.sorting_desc:after,\r
-  table.dataTable thead > tr > td.sorting_asc:before,\r
-  table.dataTable thead > tr > td.sorting_desc:after {\r
-    @apply opacity-80;\r
-  }\r
-  table.dataTable thead > tr > th.sorting_desc_disabled:after,\r
-  table.dataTable thead > tr > th.sorting_asc_disabled:before,\r
-  table.dataTable thead > tr > td.sorting_desc_disabled:after,\r
-  table.dataTable thead > tr > td.sorting_asc_disabled:before {\r
-    @apply hidden;\r
-  }\r
-  table.dataTable thead > tr > th:active,\r
-  table.dataTable thead > tr > td:active {\r
-    @apply outline-none;\r
-  }\r
-\r
-  div.dataTables_scrollBody > table.dataTable > thead > tr > th:before,\r
-  div.dataTables_scrollBody > table.dataTable > thead > tr > th:after,\r
-  div.dataTables_scrollBody > table.dataTable > thead > tr > td:before,\r
-  div.dataTables_scrollBody > table.dataTable > thead > tr > td:after {\r
-    @apply hidden;\r
-  }\r
-\r
-  div.dataTables_processing {\r
-    @apply absolute left-[50%] top-[50%] ml-[-100px] mt-[-26px] w-[200px] p-0.5 text-center;\r
-  }\r
-  div.dataTables_processing > div:last-child {\r
-    @apply relative mx-auto my-4 h-4 w-20;\r
-  }\r
-  div.dataTables_processing > div:last-child > div {\r
-    @apply absolute top-0 h-3.5 w-3.5 rounded-full;\r
-    background: hsl(var(--dt-row-selected));\r
-    animation-timing-function: cubic-bezier(0, 1, 1, 0);\r
-  }\r
-  div.dataTables_processing > div:last-child > div:nth-child(1) {\r
-    left: 8px;\r
-    animation: datatables-loader-1 0.6s infinite;\r
-  }\r
-  div.dataTables_processing > div:last-child > div:nth-child(2) {\r
-    left: 8px;\r
-    animation: datatables-loader-2 0.6s infinite;\r
-  }\r
-  div.dataTables_processing > div:last-child > div:nth-child(3) {\r
-    left: 32px;\r
-    animation: datatables-loader-2 0.6s infinite;\r
-  }\r
-  div.dataTables_processing > div:last-child > div:nth-child(4) {\r
-    left: 56px;\r
-    animation: datatables-loader-3 0.6s infinite;\r
-  }\r
-\r
-  @keyframes datatables-loader-1 {\r
-    0% {\r
-      transform: scale(0);\r
-    }\r
-    100% {\r
-      transform: scale(1);\r
-    }\r
-  }\r
-  @keyframes datatables-loader-3 {\r
-    0% {\r
-      transform: scale(1);\r
-    }\r
-    100% {\r
-      transform: scale(0);\r
-    }\r
-  }\r
-  @keyframes datatables-loader-2 {\r
-    0% {\r
-      transform: translate(0, 0);\r
-    }\r
-    100% {\r
-      transform: translate(24px, 0);\r
-    }\r
-  }\r
-  table.dataTable.nowrap th,\r
-  table.dataTable.nowrap td {\r
-    white-space: nowrap;\r
-  }\r
-  table.dataTable th.dt-left,\r
-  table.dataTable td.dt-left {\r
-    text-align: left;\r
-  }\r
-  table.dataTable th.dt-center,\r
-  table.dataTable td.dt-center,\r
-  table.dataTable td.dataTables_empty {\r
-    text-align: center;\r
-  }\r
-  table.dataTable th.dt-right,\r
-  table.dataTable td.dt-right {\r
-    text-align: right;\r
-  }\r
-  table.dataTable th.dt-justify,\r
-  table.dataTable td.dt-justify {\r
-    text-align: justify;\r
-  }\r
-  table.dataTable th.dt-nowrap,\r
-  table.dataTable td.dt-nowrap {\r
-    white-space: nowrap;\r
-  }\r
-  table.dataTable thead th,\r
-  table.dataTable thead td,\r
-  table.dataTable tfoot th,\r
-  table.dataTable tfoot td {\r
-    text-align: left;\r
-  }\r
-  table.dataTable thead th.dt-head-left,\r
-  table.dataTable thead td.dt-head-left,\r
-  table.dataTable tfoot th.dt-head-left,\r
-  table.dataTable tfoot td.dt-head-left {\r
-    text-align: left;\r
-  }\r
-  table.dataTable thead th.dt-head-center,\r
-  table.dataTable thead td.dt-head-center,\r
-  table.dataTable tfoot th.dt-head-center,\r
-  table.dataTable tfoot td.dt-head-center {\r
-    text-align: center;\r
-  }\r
-  table.dataTable thead th.dt-head-right,\r
-  table.dataTable thead td.dt-head-right,\r
-  table.dataTable tfoot th.dt-head-right,\r
-  table.dataTable tfoot td.dt-head-right {\r
-    text-align: right;\r
-  }\r
-  table.dataTable thead th.dt-head-justify,\r
-  table.dataTable thead td.dt-head-justify,\r
-  table.dataTable tfoot th.dt-head-justify,\r
-  table.dataTable tfoot td.dt-head-justify {\r
-    text-align: justify;\r
-  }\r
-  table.dataTable thead th.dt-head-nowrap,\r
-  table.dataTable thead td.dt-head-nowrap,\r
-  table.dataTable tfoot th.dt-head-nowrap,\r
-  table.dataTable tfoot td.dt-head-nowrap {\r
-    white-space: nowrap;\r
-  }\r
-  table.dataTable tbody th.dt-body-left,\r
-  table.dataTable tbody td.dt-body-left {\r
-    text-align: left;\r
-  }\r
-  table.dataTable tbody th.dt-body-center,\r
-  table.dataTable tbody td.dt-body-center {\r
-    text-align: center;\r
-  }\r
-  table.dataTable tbody th.dt-body-right,\r
-  table.dataTable tbody td.dt-body-right {\r
-    text-align: right;\r
-  }\r
-  table.dataTable tbody th.dt-body-justify,\r
-  table.dataTable tbody td.dt-body-justify {\r
-    text-align: justify;\r
-  }\r
-  table.dataTable tbody th.dt-body-nowrap,\r
-  table.dataTable tbody td.dt-body-nowrap {\r
-    white-space: nowrap;\r
-  }\r
-\r
-  /* Table Styles */\r
-\r
-  table.dataTable {\r
-    @apply w-full table-auto border-collapse;\r
-  }\r
-\r
-  /* Table header styles */\r
-  table.dataTable thead th,\r
-  table.dataTable tfoot th {\r
-    @apply text-left text-sm font-medium text-muted-foreground;\r
-  }\r
-\r
-  table.dataTable > thead > tr > th {\r
-    @apply border-b border-t-0 px-6 py-3;\r
-  }\r
-  table.dataTable > thead > tr > td {\r
-    @apply border-b px-6 py-3 text-sm;\r
-  }\r
-  table.dataTable > thead > tr > th:active,\r
-  table.dataTable > thead > tr > td:active {\r
-    @apply outline-none;\r
-  }\r
-  table.dataTable > tfoot > tr > th,\r
-  table.dataTable > tfoot > tr > td {\r
-    @apply border-t px-6 py-3;\r
-  }\r
-  table.dataTable tbody tr {\r
-    @apply bg-transparent;\r
-  }\r
-  table.dataTable tbody tr.selected > * {\r
-    @apply bg-primary/10;\r
-  }\r
-  table.dataTable tbody tr.selected a {\r
-    @apply text-primary;\r
-  }\r
-  table.dataTable tbody th,\r
-  table.dataTable tbody td {\r
-    @apply px-6 py-3 text-sm;\r
-  }\r
-  table.dataTable.row-border > tbody > tr > th,\r
-  table.dataTable.row-border > tbody > tr > td,\r
-  table.dataTable.display > tbody > tr > th,\r
-  table.dataTable.display > tbody > tr > td {\r
-    @apply border-t;\r
-  }\r
-  table.dataTable.row-border > tbody > tr:first-child > th,\r
-  table.dataTable.row-border > tbody > tr:first-child > td,\r
-  table.dataTable.display > tbody > tr:first-child > th,\r
-  table.dataTable.display > tbody > tr:first-child > td {\r
-    @apply border-t-0;\r
-  }\r
-  table.dataTable.row-border > tbody > tr.selected + tr.selected > td,\r
-  table.dataTable.display > tbody > tr.selected + tr.selected > td {\r
-    @apply border-t-primary/30;\r
-  }\r
-  table.dataTable.cell-border > tbody > tr > th,\r
-  table.dataTable.cell-border > tbody > tr > td {\r
-    @apply border-r border-t;\r
-  }\r
-  table.dataTable.cell-border > tbody > tr > th:first-child,\r
-  table.dataTable.cell-border > tbody > tr > td:first-child {\r
-    @apply border-l;\r
-  }\r
-  table.dataTable.cell-border > tbody > tr:first-child > th,\r
-  table.dataTable.cell-border > tbody > tr:first-child > td {\r
-    @apply border-t-0;\r
-  }\r
-  table.dataTable.stripe > tbody > tr.odd > *,\r
-  table.dataTable.display > tbody > tr.odd > * {\r
-    @apply bg-muted/50;\r
-  }\r
-  table.dataTable.stripe > tbody > tr.odd.selected > *,\r
-  table.dataTable.display > tbody > tr.odd.selected > * {\r
-    @apply bg-primary/10;\r
-  }\r
-  table.dataTable.hover > tbody > tr:hover > *,\r
-  table.dataTable.display > tbody > tr:hover > * {\r
-    @apply bg-muted;\r
-  }\r
-  table.dataTable.hover > tbody > tr.selected:hover > *,\r
-  table.dataTable.display > tbody > tr.selected:hover > * {\r
-    @apply !bg-primary/10;\r
-  }\r
-  table.dataTable.order-column > tbody tr > .sorting_1,\r
-  table.dataTable.order-column > tbody tr > .sorting_2,\r
-  table.dataTable.order-column > tbody tr > .sorting_3,\r
-  table.dataTable.display > tbody tr > .sorting_1,\r
-  table.dataTable.display > tbody tr > .sorting_2,\r
-  table.dataTable.display > tbody tr > .sorting_3 {\r
-    @apply bg-muted;\r
-  }\r
-  table.dataTable.order-column > tbody tr.selected > .sorting_1,\r
-  table.dataTable.order-column > tbody tr.selected > .sorting_2,\r
-  table.dataTable.order-column > tbody tr.selected > .sorting_3,\r
-  table.dataTable.display > tbody tr.selected > .sorting_1,\r
-  table.dataTable.display > tbody tr.selected > .sorting_2,\r
-  table.dataTable.display > tbody tr.selected > .sorting_3 {\r
-    @apply !bg-primary/10;\r
-  }\r
-  table.dataTable.display > tbody > tr.odd > .sorting_1,\r
-  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1 {\r
-    @apply bg-muted/50;\r
-  }\r
-  table.dataTable.display > tbody > tr.odd > .sorting_2,\r
-  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_2 {\r
-    @apply bg-muted/30;\r
-  }\r
-  table.dataTable.display > tbody > tr.odd > .sorting_3,\r
-  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_3 {\r
-    @apply bg-muted/10;\r
-  }\r
-  table.dataTable.display > tbody > tr.odd.selected > .sorting_1,\r
-  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_1 {\r
-    @apply bg-muted/50;\r
-  }\r
-  table.dataTable.display > tbody > tr.odd.selected > .sorting_2,\r
-  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_2 {\r
-    @apply bg-muted/30;\r
-  }\r
-  table.dataTable.display > tbody > tr.odd.selected > .sorting_3,\r
-  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_3 {\r
-    @apply bg-muted/10;\r
-  }\r
-  table.dataTable.display > tbody > tr.even > .sorting_1,\r
-  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_1 {\r
-    @apply bg-muted/50;\r
-  }\r
-  table.dataTable.display > tbody > tr.even > .sorting_2,\r
-  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_2 {\r
-    @apply bg-muted/30;\r
-  }\r
-  table.dataTable.display > tbody > tr.even > .sorting_3,\r
-  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_3 {\r
-    @apply bg-muted/10;\r
-  }\r
-  table.dataTable.display > tbody > tr.even.selected > .sorting_1,\r
-  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_1 {\r
-    @apply bg-primary/10;\r
-  }\r
-  table.dataTable.display > tbody > tr.even.selected > .sorting_2,\r
-  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_2 {\r
-    @apply bg-primary/10;\r
-  }\r
-  table.dataTable.display > tbody > tr.even.selected > .sorting_3,\r
-  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_3 {\r
-    @apply bg-primary/10;\r
-  }\r
-  table.dataTable.display tbody tr:hover > .sorting_1,\r
-  table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {\r
-    @apply bg-muted;\r
-  }\r
-  table.dataTable.display tbody tr:hover > .sorting_2,\r
-  table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {\r
-    @apply bg-muted;\r
-  }\r
-  table.dataTable.display tbody tr:hover > .sorting_3,\r
-  table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {\r
-    @apply bg-muted;\r
-  }\r
-  table.dataTable.display tbody tr:hover.selected > .sorting_1,\r
-  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {\r
-    @apply bg-primary/10;\r
-  }\r
-  table.dataTable.display tbody tr:hover.selected > .sorting_2,\r
-  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {\r
-    @apply bg-primary/10;\r
-  }\r
-  table.dataTable.display tbody tr:hover.selected > .sorting_3,\r
-  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {\r
-    @apply bg-primary/10;\r
-  }\r
-  table.dataTable.no-footer {\r
-    @apply border-b-0;\r
-  }\r
-  table.dataTable.compact thead th,\r
-  table.dataTable.compact thead td,\r
-  table.dataTable.compact tfoot th,\r
-  table.dataTable.compact tfoot td,\r
-  table.dataTable.compact tbody th,\r
-  table.dataTable.compact tbody td {\r
-    @apply px-4 py-2;\r
-  }\r
-\r
-  table.dataTable th,\r
-  table.dataTable td {\r
-    @apply box-content border-y;\r
-  }\r
-\r
-  table.dataTable tr:last-child td {\r
-    @apply !border-b-0;\r
-  }\r
-\r
-  /* Control feature layout */\r
-  .dataTables_wrapper {\r
-    @apply w-full overflow-x-auto;\r
-  }\r
-\r
-  /* Export button styles */\r
-  .dataTables_wrapper .dt-buttons {\r
-    @apply inline-flex flex-wrap items-center gap-2;\r
-    button {\r
-      @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
-    }\r
-  }\r
-\r
-  /*  Copy modal */\r
-  .dt-button-info {\r
-    @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur;\r
-  }\r
-\r
-  .dataTables_wrapper .dataTables_length {\r
-    label {\r
-      @apply inline-flex items-center gap-2 text-sm font-normal text-muted-foreground;\r
-      select {\r
-        @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
-      }\r
-    }\r
-  }\r
-  .dataTables_wrapper .dataTables_filter {\r
-    label {\r
-      @apply inline-flex w-full cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\r
-      input {\r
-        @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
-      }\r
-    }\r
-  }\r
-  .dataTables_wrapper .dataTables_info {\r
-    @apply flex items-center gap-3 text-sm !text-muted-foreground;\r
-  }\r
-  .dataTables_wrapper .dataTables_paginate {\r
-    .paginate_button {\r
-      @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
-    }\r
-  }\r
-  .dataTables_wrapper .dataTables_paginate .paginate_button.current,\r
-  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {\r
-    @apply bg-muted;\r
-  }\r
-  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,\r
-  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,\r
-  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {\r
-    @apply pointer-events-none opacity-50;\r
-  }\r
-  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {\r
-    @apply bg-muted;\r
-  }\r
-  .dataTables_wrapper .dataTables_paginate .paginate_button:active {\r
-    @apply bg-muted;\r
-  }\r
-  .dataTables_wrapper .dataTables_paginate .ellipsis {\r
-    @apply inline-flex h-8 min-w-[32px] items-start justify-center text-sm;\r
-  }\r
-  .dataTables_wrapper .dataTables_scroll {\r
-    clear: both;\r
-  }\r
-  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {\r
-    -webkit-overflow-scrolling: touch;\r
-  }\r
-  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th,\r
-  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td,\r
-  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th,\r
-  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {\r
-    vertical-align: middle;\r
-  }\r
-  .dataTables_wrapper\r
-    .dataTables_scroll\r
-    div.dataTables_scrollBody\r
-    > table\r
-    > thead\r
-    > tr\r
-    > th\r
-    > div.dataTables_sizing,\r
-  .dataTables_wrapper\r
-    .dataTables_scroll\r
-    div.dataTables_scrollBody\r
-    > table\r
-    > thead\r
-    > tr\r
-    > td\r
-    > div.dataTables_sizing,\r
-  .dataTables_wrapper\r
-    .dataTables_scroll\r
-    div.dataTables_scrollBody\r
-    > table\r
-    > tbody\r
-    > tr\r
-    > th\r
-    > div.dataTables_sizing,\r
-  .dataTables_wrapper\r
-    .dataTables_scroll\r
-    div.dataTables_scrollBody\r
-    > table\r
-    > tbody\r
-    > tr\r
-    > td\r
-    > div.dataTables_sizing {\r
-    height: 0;\r
-    overflow: hidden;\r
-    margin: 0 !important;\r
-    padding: 0 !important;\r
-  }\r
-  .dataTables_wrapper.no-footer .dataTables_scrollBody {\r
-    @apply border-b;\r
-  }\r
-  .dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,\r
-  .dataTables_wrapper.no-footer div.dataTables_scrollBody > table {\r
-    border-bottom: none;\r
-  }\r
-  .dataTables_wrapper:after {\r
-    visibility: hidden;\r
-    display: block;\r
-    content: "";\r
-    clear: both;\r
-    height: 0;\r
-  }\r
-\r
-  /* \r
-  responsive styles\r
-   */\r
-  table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,\r
-  table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,\r
-  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {\r
-    cursor: default !important;\r
-  }\r
-  table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,\r
-  table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,\r
-  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {\r
-    display: none !important;\r
-  }\r
-  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,\r
-  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {\r
-    cursor: pointer;\r
-  }\r
-\r
-  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,\r
-  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {\r
-    @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
-  }\r
-  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.arrow-right::before,\r
-  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control.arrow-right::before {\r
-    content: "\u25C4";\r
-  }\r
-  table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,\r
-  table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {\r
-    @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
-  }\r
-  table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,\r
-  table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {\r
-    padding-left: 0.333em;\r
-  }\r
-  table.dataTable.dtr-column > tbody > tr > td.dtr-control,\r
-  table.dataTable.dtr-column > tbody > tr > th.dtr-control,\r
-  table.dataTable.dtr-column > tbody > tr > td.control,\r
-  table.dataTable.dtr-column > tbody > tr > th.control {\r
-    cursor: pointer;\r
-  }\r
-  table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,\r
-  table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,\r
-  table.dataTable.dtr-column > tbody > tr > td.control:before,\r
-  table.dataTable.dtr-column > tbody > tr > th.control:before {\r
-    @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
-  }\r
-  table.dataTable.dtr-column > tbody > tr > td.dtr-control.arrow-right::before,\r
-  table.dataTable.dtr-column > tbody > tr > th.dtr-control.arrow-right::before,\r
-  table.dataTable.dtr-column > tbody > tr > td.control.arrow-right::before,\r
-  table.dataTable.dtr-column > tbody > tr > th.control.arrow-right::before {\r
-    content: "\u25C4";\r
-  }\r
-  table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before,\r
-  table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before,\r
-  table.dataTable.dtr-column > tbody > tr.parent td.control:before,\r
-  table.dataTable.dtr-column > tbody > tr.parent th.control:before {\r
-    @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
-  }\r
-\r
-  table.dataTable > tbody td.child {\r
-    @apply p-0;\r
-  }\r
-  table.dataTable > tbody > tr.child:hover,\r
-  table.dataTable > tbody > tr.child:hover > td.child {\r
-    background: transparent !important;\r
-  }\r
-  table.dataTable > tbody > tr.child ul.dtr-details {\r
-    @apply m-0 block w-full list-none p-0;\r
-  }\r
-  table.dataTable > tbody > tr.child ul.dtr-details > li {\r
-    @apply border-b p-3 px-7 hover:bg-muted;\r
-  }\r
-\r
-  table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {\r
-    @apply border-b-0;\r
-  }\r
-  table.dataTable > tbody > tr.child span.dtr-title {\r
-    @apply inline-block min-w-[80px] font-bold;\r
-  }\r
-  div.dtr-modal {\r
-    position: fixed;\r
-    box-sizing: border-box;\r
-    top: 0;\r
-    left: 0;\r
-    height: 100%;\r
-    width: 100%;\r
-    z-index: 100;\r
-    padding: 10em 1em;\r
-  }\r
-  div.dtr-modal div.dtr-modal-display {\r
-    position: absolute;\r
-    top: 0;\r
-    left: 0;\r
-    bottom: 0;\r
-    right: 0;\r
-    width: 50%;\r
-    height: fit-content;\r
-    max-height: 75%;\r
-    overflow: auto;\r
-    margin: auto;\r
-    z-index: 102;\r
-    overflow: auto;\r
-    background-color: #f5f5f7;\r
-    border: 1px solid black;\r
-    border-radius: 0.5em;\r
-    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);\r
-  }\r
-  div.dtr-modal div.dtr-modal-content {\r
-    position: relative;\r
-    padding: 2.5em;\r
-  }\r
-  div.dtr-modal div.dtr-modal-content h2 {\r
-    margin-top: 0;\r
-  }\r
-  div.dtr-modal div.dtr-modal-close {\r
-    position: absolute;\r
-    top: 6px;\r
-    right: 6px;\r
-    width: 22px;\r
-    height: 22px;\r
-    text-align: center;\r
-    border-radius: 3px;\r
-    cursor: pointer;\r
-    z-index: 12;\r
-  }\r
-  div.dtr-modal div.dtr-modal-background {\r
-    position: fixed;\r
-    top: 0;\r
-    left: 0;\r
-    right: 0;\r
-    bottom: 0;\r
-    z-index: 101;\r
-    background: rgba(0, 0, 0, 0.6);\r
-  }\r
-\r
-  /* Search Builder Styles */\r
-  div.dt-button-collection {\r
-    overflow: visible !important;\r
-    z-index: 2002 !important;\r
-  }\r
-  div.dt-button-collection div.dtsb-searchBuilder {\r
-    padding-left: 1em !important;\r
-    padding-right: 1em !important;\r
-  }\r
-  div.dt-button-collection.dtb-collection-closeable div.dtsb-titleRow {\r
-    padding-right: 40px;\r
-  }\r
-  .dtsb-greyscale {\r
-    @apply !border;\r
-  }\r
-  div.dtsb-logicContainer .dtsb-greyscale {\r
-    border: none !important;\r
-  }\r
-  div.dtsb-searchBuilder {\r
-    @apply mb-4 cursor-default justify-evenly text-left;\r
-  }\r
-  div.dtsb-searchBuilder button.dtsb-button,\r
-  div.dtsb-searchBuilder select {\r
-    @apply text-sm;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-titleRow {\r
-    @apply mb-3 flex items-center justify-between;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title {\r
-    @apply inline-block text-sm font-normal;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title:empty {\r
-    display: inline;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-value,\r
-  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-data,\r
-  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-condition {\r
-    display: block;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-group {\r
-    @apply relative clear-both mb-4;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-group button.dtsb-search {\r
-    float: right;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-group button.dtsb-clearGroup {\r
-    margin: 2px;\r
-    text-align: center;\r
-    padding: 0;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\r
-    -webkit-transform: rotate(90deg);\r
-    -moz-transform: rotate(90deg);\r
-    -o-transform: rotate(90deg);\r
-    -ms-transform: rotate(90deg);\r
-    transform: rotate(90deg);\r
-    position: absolute;\r
-    margin-top: 0.8em;\r
-    margin-right: 0.8em;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\r
-    margin-bottom: 0.8em;\r
-    display: flex;\r
-    justify-content: flex-start;\r
-    flex-flow: row wrap;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r
-    padding: 0.4em;\r
-    margin-right: 0.8em;\r
-    min-width: 5em;\r
-    max-width: 20em;\r
-    color: inherit;\r
-  }\r
-  div.dtsb-searchBuilder\r
-    div.dtsb-group\r
-    div.dtsb-criteria\r
-    select.dtsb-dropDown\r
-    option.dtsb-notItalic,\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input option.dtsb-notItalic {\r
-    font-style: normal;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-italic {\r
-    font-style: italic;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\r
-    flex: 1;\r
-    white-space: nowrap;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont span.dtsp-joiner {\r
-    margin-right: 0.8em;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input.dtsb-value {\r
-    width: 33%;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont select,\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input {\r
-    height: 100%;\r
-    box-sizing: border-box;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\r
-    margin-left: auto;\r
-    display: inline-block;\r
-  }\r
-  div.dtsb-searchBuilder\r
-    div.dtsb-group\r
-    div.dtsb-criteria\r
-    div.dtsb-buttonContainer\r
-    button.dtsb-delete,\r
-  div.dtsb-searchBuilder\r
-    div.dtsb-group\r
-    div.dtsb-criteria\r
-    div.dtsb-buttonContainer\r
-    button.dtsb-right,\r
-  div.dtsb-searchBuilder\r
-    div.dtsb-group\r
-    div.dtsb-criteria\r
-    div.dtsb-buttonContainer\r
-    button.dtsb-left {\r
-    margin-right: 0.8em;\r
-  }\r
-  div.dtsb-searchBuilder\r
-    div.dtsb-group\r
-    div.dtsb-criteria\r
-    div.dtsb-buttonContainer\r
-    button.dtsb-delete:last-child,\r
-  div.dtsb-searchBuilder\r
-    div.dtsb-group\r
-    div.dtsb-criteria\r
-    div.dtsb-buttonContainer\r
-    button.dtsb-right:last-child,\r
-  div.dtsb-searchBuilder\r
-    div.dtsb-group\r
-    div.dtsb-criteria\r
-    div.dtsb-buttonContainer\r
-    button.dtsb-left:last-child {\r
-    margin-right: 0;\r
-  }\r
-  @media screen and (max-width: 550px) {\r
-    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\r
-      display: flex;\r
-      flex-flow: none;\r
-      flex-direction: column;\r
-      justify-content: flex-start;\r
-      padding-right: calc(35px + 0.8em);\r
-      margin-bottom: 0px;\r
-    }\r
-    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:first-child),\r
-    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:nth-child(2)),\r
-    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:last-child) {\r
-      padding-top: 0.8em;\r
-    }\r
-    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:first-child,\r
-    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:nth-child(2),\r
-    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:last-child {\r
-      padding-top: 0em;\r
-    }\r
-    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r
-    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r
-      max-width: none;\r
-      width: 100%;\r
-      margin-bottom: 0.8em;\r
-      margin-right: 0.8em;\r
-    }\r
-    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\r
-      margin-right: 0.8em;\r
-    }\r
-    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\r
-      position: absolute;\r
-      width: 35px;\r
-      display: flex;\r
-      flex-wrap: wrap-reverse;\r
-      right: 0;\r
-    }\r
-    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button {\r
-      margin-right: 0px !important;\r
-    }\r
-  }\r
-  div.dtsb-searchBuilder button,\r
-  div.dtsb-searchBuilder select.dtsb-dropDown,\r
-  div.dtsb-searchBuilder input {\r
-    @apply bg-background;\r
-  }\r
-  div.dtsb-searchBuilder button.dtsb-button {\r
-    @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
-  }\r
-  div.dtsb-searchBuilder button.dtsb-button:hover {\r
-    @apply cursor-pointer bg-muted;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-logicContainer {\r
-    @apply overflow-hidden rounded-none border;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-logicContainer button {\r
-    @apply rounded-md border-transparent bg-transparent;\r
-  }\r
-  div.dtsb-searchBuilder button.dtsb-clearGroup {\r
-    min-width: 2em;\r
-    padding: 0;\r
-  }\r
-  div.dtsb-searchBuilder button.dtsb-iptbtn {\r
-    min-width: 100px;\r
-    text-align: left;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\r
-    @apply flex flex-row content-start items-start justify-start rounded-md;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-logic {\r
-    @apply m-0 shrink-0 grow rounded-none border-0;\r
-    flex-basis: 3em;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-clearGroup {\r
-    border: none;\r
-    border-radius: 0px;\r
-    width: 2em;\r
-    margin: 0px;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r
-    @apply rounded-md border;\r
-  }\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-condition,\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-data,\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-value {\r
-    @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
-  }\r
-\r
-  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-value {\r
-    @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
-  }\r
-\r
-  /* Col vis styles */\r
-  .dt-button-background {\r
-    @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur-sm;\r
-  }\r
-  .dt-button-down-arrow {\r
-    @apply text-[10px];\r
-  }\r
-  .dt-button-collection {\r
-    @apply relative;\r
-    [role="menu"] {\r
-      @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
-      button {\r
-        @apply h-7 px-2 text-xs;\r
-      }\r
-      .dt-button.buttons-columnVisibility.dt-button-active {\r
-        @apply bg-primary text-primary-foreground;\r
-      }\r
-    }\r
-  }\r
-</style>\r
+`}],files:[{fileName:"Datatable.client.vue",dirPath:"components/UI",fileContent:`<template>
+  <DataTable ref="table" :data="data" :class="props.class" :options="options">
+    <slot></slot>
+  </DataTable>
+</template>
+
+<script lang="ts" setup generic="T">
+  import type DataTableRef from "datatables.net";
+  import type { Config } from "datatables.net/types/types";
+
+  const table = shallowRef<{ dt: InstanceType<typeof DataTableRef<T[]>> } | null>(null);
+
+  const props = withDefaults(
+    defineProps<{
+      data?: Config["data"];
+      class?: any;
+      options?: Config;
+    }>(),
+    {
+      data: () => [],
+      class: "nowrap hover order-column row-border stripe display",
+      options: () => ({}),
+    }
+  );
+
+  const emits = defineEmits<{
+    ready: [any];
+  }>();
+
+  onMounted(() => {
+    nextTick(() => {
+      emits("ready", table.value?.dt);
+    });
+  });
+</script>
+
+<style>
+  :root {
+    --dt-row-selected: 262.1, 83.3%, 57.8%;
+    --dt-row-selected-text: 210, 20%, 98%;
+    --dt-row-selected-link: 262.1, 83.3%, 57.8%;
+    --dt-row-stripe: 0, 0%, 100%;
+    --dt-row-hover: 0, 0%, 100%;
+    --dt-column-ordering: 0, 0%, 100%;
+    --dt-border: 220, 13%, 91%;
+    --dt-foreground: 224, 71.4%, 4.1%;
+  }
+
+  .dark {
+    --dt-row-selected: 263.4, 70%, 50.4%;
+    --dt-row-selected-text: 210, 20%, 98%;
+    --dt-row-selected-link: 263.4, 70%, 50.4%;
+    --dt-row-stripe: 224, 71.4%, 4.1%;
+    --dt-row-hover: 224, 71.4%, 4.1%;
+    --dt-column-ordering: 224, 71.4%, 4.1%;
+    --dt-border: 215, 27.9%, 16.9%;
+    --dt-foreground: 224, 71.4%, 4.1%;
+  }
+
+  table.dataTable td.dt-control {
+    text-align: center;
+    cursor: pointer;
+  }
+  table.dataTable td.dt-control:before {
+    display: inline-block;
+    color: hsla(var(--dt-foreground), 0.5);
+    content: "\u25BA";
+  }
+  table.dataTable tr.dt-hasChild td.dt-control:before {
+    content: "\u25BC";
+  }
+
+  table.dataTable thead > tr > th.sorting,
+  table.dataTable thead > tr > th.sorting_asc,
+  table.dataTable thead > tr > th.sorting_desc,
+  table.dataTable thead > tr > th.sorting_asc_disabled,
+  table.dataTable thead > tr > th.sorting_desc_disabled,
+  table.dataTable thead > tr > td.sorting,
+  table.dataTable thead > tr > td.sorting_asc,
+  table.dataTable thead > tr > td.sorting_desc,
+  table.dataTable thead > tr > td.sorting_asc_disabled,
+  table.dataTable thead > tr > td.sorting_desc_disabled {
+    @apply relative cursor-pointer pr-7;
+  }
+  table.dataTable thead > tr > th.sorting:before,
+  table.dataTable thead > tr > th.sorting:after,
+  table.dataTable thead > tr > th.sorting_asc:before,
+  table.dataTable thead > tr > th.sorting_asc:after,
+  table.dataTable thead > tr > th.sorting_desc:before,
+  table.dataTable thead > tr > th.sorting_desc:after,
+  table.dataTable thead > tr > th.sorting_asc_disabled:before,
+  table.dataTable thead > tr > th.sorting_asc_disabled:after,
+  table.dataTable thead > tr > th.sorting_desc_disabled:before,
+  table.dataTable thead > tr > th.sorting_desc_disabled:after,
+  table.dataTable thead > tr > td.sorting:before,
+  table.dataTable thead > tr > td.sorting:after,
+  table.dataTable thead > tr > td.sorting_asc:before,
+  table.dataTable thead > tr > td.sorting_asc:after,
+  table.dataTable thead > tr > td.sorting_desc:before,
+  table.dataTable thead > tr > td.sorting_desc:after,
+  table.dataTable thead > tr > td.sorting_asc_disabled:before,
+  table.dataTable thead > tr > td.sorting_asc_disabled:after,
+  table.dataTable thead > tr > td.sorting_desc_disabled:before,
+  table.dataTable thead > tr > td.sorting_desc_disabled:after {
+    @apply absolute right-2.5 block text-xs leading-3 opacity-25;
+  }
+  table.dataTable thead > tr > th.sorting:before,
+  table.dataTable thead > tr > th.sorting_asc:before,
+  table.dataTable thead > tr > th.sorting_desc:before,
+  table.dataTable thead > tr > th.sorting_asc_disabled:before,
+  table.dataTable thead > tr > th.sorting_desc_disabled:before,
+  table.dataTable thead > tr > td.sorting:before,
+  table.dataTable thead > tr > td.sorting_asc:before,
+  table.dataTable thead > tr > td.sorting_desc:before,
+  table.dataTable thead > tr > td.sorting_asc_disabled:before,
+  table.dataTable thead > tr > td.sorting_desc_disabled:before {
+    @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')];
+  }
+  table.dataTable thead > tr > th.sorting:after,
+  table.dataTable thead > tr > th.sorting_asc:after,
+  table.dataTable thead > tr > th.sorting_desc:after,
+  table.dataTable thead > tr > th.sorting_asc_disabled:after,
+  table.dataTable thead > tr > th.sorting_desc_disabled:after,
+  table.dataTable thead > tr > td.sorting:after,
+  table.dataTable thead > tr > td.sorting_asc:after,
+  table.dataTable thead > tr > td.sorting_desc:after,
+  table.dataTable thead > tr > td.sorting_asc_disabled:after,
+  table.dataTable thead > tr > td.sorting_desc_disabled:after {
+    @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')];
+  }
+  table.dataTable thead > tr > th.sorting_asc:before,
+  table.dataTable thead > tr > th.sorting_desc:after,
+  table.dataTable thead > tr > td.sorting_asc:before,
+  table.dataTable thead > tr > td.sorting_desc:after {
+    @apply opacity-80;
+  }
+  table.dataTable thead > tr > th.sorting_desc_disabled:after,
+  table.dataTable thead > tr > th.sorting_asc_disabled:before,
+  table.dataTable thead > tr > td.sorting_desc_disabled:after,
+  table.dataTable thead > tr > td.sorting_asc_disabled:before {
+    @apply hidden;
+  }
+  table.dataTable thead > tr > th:active,
+  table.dataTable thead > tr > td:active {
+    @apply outline-none;
+  }
+
+  div.dataTables_scrollBody > table.dataTable > thead > tr > th:before,
+  div.dataTables_scrollBody > table.dataTable > thead > tr > th:after,
+  div.dataTables_scrollBody > table.dataTable > thead > tr > td:before,
+  div.dataTables_scrollBody > table.dataTable > thead > tr > td:after {
+    @apply hidden;
+  }
+
+  div.dataTables_processing {
+    @apply absolute left-[50%] top-[50%] ml-[-100px] mt-[-26px] w-[200px] p-0.5 text-center;
+  }
+  div.dataTables_processing > div:last-child {
+    @apply relative mx-auto my-4 h-4 w-20;
+  }
+  div.dataTables_processing > div:last-child > div {
+    @apply absolute top-0 h-3.5 w-3.5 rounded-full;
+    background: hsl(var(--dt-row-selected));
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
+  div.dataTables_processing > div:last-child > div:nth-child(1) {
+    left: 8px;
+    animation: datatables-loader-1 0.6s infinite;
+  }
+  div.dataTables_processing > div:last-child > div:nth-child(2) {
+    left: 8px;
+    animation: datatables-loader-2 0.6s infinite;
+  }
+  div.dataTables_processing > div:last-child > div:nth-child(3) {
+    left: 32px;
+    animation: datatables-loader-2 0.6s infinite;
+  }
+  div.dataTables_processing > div:last-child > div:nth-child(4) {
+    left: 56px;
+    animation: datatables-loader-3 0.6s infinite;
+  }
+
+  @keyframes datatables-loader-1 {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  @keyframes datatables-loader-3 {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0);
+    }
+  }
+  @keyframes datatables-loader-2 {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(24px, 0);
+    }
+  }
+  table.dataTable.nowrap th,
+  table.dataTable.nowrap td {
+    white-space: nowrap;
+  }
+  table.dataTable th.dt-left,
+  table.dataTable td.dt-left {
+    text-align: left;
+  }
+  table.dataTable th.dt-center,
+  table.dataTable td.dt-center,
+  table.dataTable td.dataTables_empty {
+    text-align: center;
+  }
+  table.dataTable th.dt-right,
+  table.dataTable td.dt-right {
+    text-align: right;
+  }
+  table.dataTable th.dt-justify,
+  table.dataTable td.dt-justify {
+    text-align: justify;
+  }
+  table.dataTable th.dt-nowrap,
+  table.dataTable td.dt-nowrap {
+    white-space: nowrap;
+  }
+  table.dataTable thead th,
+  table.dataTable thead td,
+  table.dataTable tfoot th,
+  table.dataTable tfoot td {
+    text-align: left;
+  }
+  table.dataTable thead th.dt-head-left,
+  table.dataTable thead td.dt-head-left,
+  table.dataTable tfoot th.dt-head-left,
+  table.dataTable tfoot td.dt-head-left {
+    text-align: left;
+  }
+  table.dataTable thead th.dt-head-center,
+  table.dataTable thead td.dt-head-center,
+  table.dataTable tfoot th.dt-head-center,
+  table.dataTable tfoot td.dt-head-center {
+    text-align: center;
+  }
+  table.dataTable thead th.dt-head-right,
+  table.dataTable thead td.dt-head-right,
+  table.dataTable tfoot th.dt-head-right,
+  table.dataTable tfoot td.dt-head-right {
+    text-align: right;
+  }
+  table.dataTable thead th.dt-head-justify,
+  table.dataTable thead td.dt-head-justify,
+  table.dataTable tfoot th.dt-head-justify,
+  table.dataTable tfoot td.dt-head-justify {
+    text-align: justify;
+  }
+  table.dataTable thead th.dt-head-nowrap,
+  table.dataTable thead td.dt-head-nowrap,
+  table.dataTable tfoot th.dt-head-nowrap,
+  table.dataTable tfoot td.dt-head-nowrap {
+    white-space: nowrap;
+  }
+  table.dataTable tbody th.dt-body-left,
+  table.dataTable tbody td.dt-body-left {
+    text-align: left;
+  }
+  table.dataTable tbody th.dt-body-center,
+  table.dataTable tbody td.dt-body-center {
+    text-align: center;
+  }
+  table.dataTable tbody th.dt-body-right,
+  table.dataTable tbody td.dt-body-right {
+    text-align: right;
+  }
+  table.dataTable tbody th.dt-body-justify,
+  table.dataTable tbody td.dt-body-justify {
+    text-align: justify;
+  }
+  table.dataTable tbody th.dt-body-nowrap,
+  table.dataTable tbody td.dt-body-nowrap {
+    white-space: nowrap;
+  }
+
+  /* Table Styles */
+
+  table.dataTable {
+    @apply w-full table-auto border-collapse;
+  }
+
+  /* Table header styles */
+  table.dataTable thead th,
+  table.dataTable tfoot th {
+    @apply text-left text-sm font-medium text-muted-foreground;
+  }
+
+  table.dataTable > thead > tr > th {
+    @apply border-b border-t-0 px-6 py-3;
+  }
+  table.dataTable > thead > tr > td {
+    @apply border-b px-6 py-3 text-sm;
+  }
+  table.dataTable > thead > tr > th:active,
+  table.dataTable > thead > tr > td:active {
+    @apply outline-none;
+  }
+  table.dataTable > tfoot > tr > th,
+  table.dataTable > tfoot > tr > td {
+    @apply border-t px-6 py-3;
+  }
+  table.dataTable tbody tr {
+    @apply bg-transparent;
+  }
+  table.dataTable tbody tr.selected > * {
+    @apply bg-primary/10;
+  }
+  table.dataTable tbody tr.selected a {
+    @apply text-primary;
+  }
+  table.dataTable tbody th,
+  table.dataTable tbody td {
+    @apply px-6 py-3 text-sm;
+  }
+  table.dataTable.row-border > tbody > tr > th,
+  table.dataTable.row-border > tbody > tr > td,
+  table.dataTable.display > tbody > tr > th,
+  table.dataTable.display > tbody > tr > td {
+    @apply border-t;
+  }
+  table.dataTable.row-border > tbody > tr:first-child > th,
+  table.dataTable.row-border > tbody > tr:first-child > td,
+  table.dataTable.display > tbody > tr:first-child > th,
+  table.dataTable.display > tbody > tr:first-child > td {
+    @apply border-t-0;
+  }
+  table.dataTable.row-border > tbody > tr.selected + tr.selected > td,
+  table.dataTable.display > tbody > tr.selected + tr.selected > td {
+    @apply border-t-primary/30;
+  }
+  table.dataTable.cell-border > tbody > tr > th,
+  table.dataTable.cell-border > tbody > tr > td {
+    @apply border-r border-t;
+  }
+  table.dataTable.cell-border > tbody > tr > th:first-child,
+  table.dataTable.cell-border > tbody > tr > td:first-child {
+    @apply border-l;
+  }
+  table.dataTable.cell-border > tbody > tr:first-child > th,
+  table.dataTable.cell-border > tbody > tr:first-child > td {
+    @apply border-t-0;
+  }
+  table.dataTable.stripe > tbody > tr.odd > *,
+  table.dataTable.display > tbody > tr.odd > * {
+    @apply bg-muted/50;
+  }
+  table.dataTable.stripe > tbody > tr.odd.selected > *,
+  table.dataTable.display > tbody > tr.odd.selected > * {
+    @apply bg-primary/10;
+  }
+  table.dataTable.hover > tbody > tr:hover > *,
+  table.dataTable.display > tbody > tr:hover > * {
+    @apply bg-muted;
+  }
+  table.dataTable.hover > tbody > tr.selected:hover > *,
+  table.dataTable.display > tbody > tr.selected:hover > * {
+    @apply !bg-primary/10;
+  }
+  table.dataTable.order-column > tbody tr > .sorting_1,
+  table.dataTable.order-column > tbody tr > .sorting_2,
+  table.dataTable.order-column > tbody tr > .sorting_3,
+  table.dataTable.display > tbody tr > .sorting_1,
+  table.dataTable.display > tbody tr > .sorting_2,
+  table.dataTable.display > tbody tr > .sorting_3 {
+    @apply bg-muted;
+  }
+  table.dataTable.order-column > tbody tr.selected > .sorting_1,
+  table.dataTable.order-column > tbody tr.selected > .sorting_2,
+  table.dataTable.order-column > tbody tr.selected > .sorting_3,
+  table.dataTable.display > tbody tr.selected > .sorting_1,
+  table.dataTable.display > tbody tr.selected > .sorting_2,
+  table.dataTable.display > tbody tr.selected > .sorting_3 {
+    @apply !bg-primary/10;
+  }
+  table.dataTable.display > tbody > tr.odd > .sorting_1,
+  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1 {
+    @apply bg-muted/50;
+  }
+  table.dataTable.display > tbody > tr.odd > .sorting_2,
+  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_2 {
+    @apply bg-muted/30;
+  }
+  table.dataTable.display > tbody > tr.odd > .sorting_3,
+  table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_3 {
+    @apply bg-muted/10;
+  }
+  table.dataTable.display > tbody > tr.odd.selected > .sorting_1,
+  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_1 {
+    @apply bg-muted/50;
+  }
+  table.dataTable.display > tbody > tr.odd.selected > .sorting_2,
+  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_2 {
+    @apply bg-muted/30;
+  }
+  table.dataTable.display > tbody > tr.odd.selected > .sorting_3,
+  table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_3 {
+    @apply bg-muted/10;
+  }
+  table.dataTable.display > tbody > tr.even > .sorting_1,
+  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_1 {
+    @apply bg-muted/50;
+  }
+  table.dataTable.display > tbody > tr.even > .sorting_2,
+  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_2 {
+    @apply bg-muted/30;
+  }
+  table.dataTable.display > tbody > tr.even > .sorting_3,
+  table.dataTable.order-column.stripe > tbody > tr.even > .sorting_3 {
+    @apply bg-muted/10;
+  }
+  table.dataTable.display > tbody > tr.even.selected > .sorting_1,
+  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_1 {
+    @apply bg-primary/10;
+  }
+  table.dataTable.display > tbody > tr.even.selected > .sorting_2,
+  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_2 {
+    @apply bg-primary/10;
+  }
+  table.dataTable.display > tbody > tr.even.selected > .sorting_3,
+  table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_3 {
+    @apply bg-primary/10;
+  }
+  table.dataTable.display tbody tr:hover > .sorting_1,
+  table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
+    @apply bg-muted;
+  }
+  table.dataTable.display tbody tr:hover > .sorting_2,
+  table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
+    @apply bg-muted;
+  }
+  table.dataTable.display tbody tr:hover > .sorting_3,
+  table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
+    @apply bg-muted;
+  }
+  table.dataTable.display tbody tr:hover.selected > .sorting_1,
+  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
+    @apply bg-primary/10;
+  }
+  table.dataTable.display tbody tr:hover.selected > .sorting_2,
+  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
+    @apply bg-primary/10;
+  }
+  table.dataTable.display tbody tr:hover.selected > .sorting_3,
+  table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
+    @apply bg-primary/10;
+  }
+  table.dataTable.no-footer {
+    @apply border-b-0;
+  }
+  table.dataTable.compact thead th,
+  table.dataTable.compact thead td,
+  table.dataTable.compact tfoot th,
+  table.dataTable.compact tfoot td,
+  table.dataTable.compact tbody th,
+  table.dataTable.compact tbody td {
+    @apply px-4 py-2;
+  }
+
+  table.dataTable th,
+  table.dataTable td {
+    @apply box-content border-y;
+  }
+
+  table.dataTable tr:last-child td {
+    @apply !border-b-0;
+  }
+
+  /* Control feature layout */
+  .dataTables_wrapper {
+    @apply w-full overflow-x-auto;
+  }
+
+  /* Export button styles */
+  .dataTables_wrapper .dt-buttons {
+    @apply inline-flex flex-wrap items-center gap-2;
+    button {
+      @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;
+    }
+  }
+
+  /*  Copy modal */
+  .dt-button-info {
+    @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur;
+  }
+
+  .dataTables_wrapper .dataTables_length {
+    label {
+      @apply inline-flex items-center gap-2 text-sm font-normal text-muted-foreground;
+      select {
+        @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;
+      }
+    }
+  }
+  .dataTables_wrapper .dataTables_filter {
+    label {
+      @apply inline-flex w-full cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;
+      input {
+        @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;
+      }
+    }
+  }
+  .dataTables_wrapper .dataTables_info {
+    @apply flex items-center gap-3 text-sm !text-muted-foreground;
+  }
+  .dataTables_wrapper .dataTables_paginate {
+    .paginate_button {
+      @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;
+    }
+  }
+  .dataTables_wrapper .dataTables_paginate .paginate_button.current,
+  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
+    @apply bg-muted;
+  }
+  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
+  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
+  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
+    @apply pointer-events-none opacity-50;
+  }
+  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
+    @apply bg-muted;
+  }
+  .dataTables_wrapper .dataTables_paginate .paginate_button:active {
+    @apply bg-muted;
+  }
+  .dataTables_wrapper .dataTables_paginate .ellipsis {
+    @apply inline-flex h-8 min-w-[32px] items-start justify-center text-sm;
+  }
+  .dataTables_wrapper .dataTables_scroll {
+    clear: both;
+  }
+  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
+    -webkit-overflow-scrolling: touch;
+  }
+  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th,
+  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td,
+  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th,
+  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {
+    vertical-align: middle;
+  }
+  .dataTables_wrapper
+    .dataTables_scroll
+    div.dataTables_scrollBody
+    > table
+    > thead
+    > tr
+    > th
+    > div.dataTables_sizing,
+  .dataTables_wrapper
+    .dataTables_scroll
+    div.dataTables_scrollBody
+    > table
+    > thead
+    > tr
+    > td
+    > div.dataTables_sizing,
+  .dataTables_wrapper
+    .dataTables_scroll
+    div.dataTables_scrollBody
+    > table
+    > tbody
+    > tr
+    > th
+    > div.dataTables_sizing,
+  .dataTables_wrapper
+    .dataTables_scroll
+    div.dataTables_scrollBody
+    > table
+    > tbody
+    > tr
+    > td
+    > div.dataTables_sizing {
+    height: 0;
+    overflow: hidden;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+  .dataTables_wrapper.no-footer .dataTables_scrollBody {
+    @apply border-b;
+  }
+  .dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,
+  .dataTables_wrapper.no-footer div.dataTables_scrollBody > table {
+    border-bottom: none;
+  }
+  .dataTables_wrapper:after {
+    visibility: hidden;
+    display: block;
+    content: "";
+    clear: both;
+    height: 0;
+  }
+
+  /* 
+  responsive styles
+   */
+  table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
+  table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,
+  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
+    cursor: default !important;
+  }
+  table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,
+  table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,
+  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {
+    display: none !important;
+  }
+  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
+  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
+    cursor: pointer;
+  }
+
+  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
+  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
+    @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')];
+  }
+  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.arrow-right::before,
+  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control.arrow-right::before {
+    content: "\u25C4";
+  }
+  table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
+  table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
+    @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')];
+  }
+  table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,
+  table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {
+    padding-left: 0.333em;
+  }
+  table.dataTable.dtr-column > tbody > tr > td.dtr-control,
+  table.dataTable.dtr-column > tbody > tr > th.dtr-control,
+  table.dataTable.dtr-column > tbody > tr > td.control,
+  table.dataTable.dtr-column > tbody > tr > th.control {
+    cursor: pointer;
+  }
+  table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,
+  table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,
+  table.dataTable.dtr-column > tbody > tr > td.control:before,
+  table.dataTable.dtr-column > tbody > tr > th.control:before {
+    @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')];
+  }
+  table.dataTable.dtr-column > tbody > tr > td.dtr-control.arrow-right::before,
+  table.dataTable.dtr-column > tbody > tr > th.dtr-control.arrow-right::before,
+  table.dataTable.dtr-column > tbody > tr > td.control.arrow-right::before,
+  table.dataTable.dtr-column > tbody > tr > th.control.arrow-right::before {
+    content: "\u25C4";
+  }
+  table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before,
+  table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before,
+  table.dataTable.dtr-column > tbody > tr.parent td.control:before,
+  table.dataTable.dtr-column > tbody > tr.parent th.control:before {
+    @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')];
+  }
+
+  table.dataTable > tbody td.child {
+    @apply p-0;
+  }
+  table.dataTable > tbody > tr.child:hover,
+  table.dataTable > tbody > tr.child:hover > td.child {
+    background: transparent !important;
+  }
+  table.dataTable > tbody > tr.child ul.dtr-details {
+    @apply m-0 block w-full list-none p-0;
+  }
+  table.dataTable > tbody > tr.child ul.dtr-details > li {
+    @apply border-b p-3 px-7 hover:bg-muted;
+  }
+
+  table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
+    @apply border-b-0;
+  }
+  table.dataTable > tbody > tr.child span.dtr-title {
+    @apply inline-block min-w-[80px] font-bold;
+  }
+  div.dtr-modal {
+    position: fixed;
+    box-sizing: border-box;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 100;
+    padding: 10em 1em;
+  }
+  div.dtr-modal div.dtr-modal-display {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    width: 50%;
+    height: fit-content;
+    max-height: 75%;
+    overflow: auto;
+    margin: auto;
+    z-index: 102;
+    overflow: auto;
+    background-color: #f5f5f7;
+    border: 1px solid black;
+    border-radius: 0.5em;
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
+  }
+  div.dtr-modal div.dtr-modal-content {
+    position: relative;
+    padding: 2.5em;
+  }
+  div.dtr-modal div.dtr-modal-content h2 {
+    margin-top: 0;
+  }
+  div.dtr-modal div.dtr-modal-close {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 22px;
+    height: 22px;
+    text-align: center;
+    border-radius: 3px;
+    cursor: pointer;
+    z-index: 12;
+  }
+  div.dtr-modal div.dtr-modal-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 101;
+    background: rgba(0, 0, 0, 0.6);
+  }
+
+  /* Search Builder Styles */
+  div.dt-button-collection {
+    overflow: visible !important;
+    z-index: 2002 !important;
+  }
+  div.dt-button-collection div.dtsb-searchBuilder {
+    padding-left: 1em !important;
+    padding-right: 1em !important;
+  }
+  div.dt-button-collection.dtb-collection-closeable div.dtsb-titleRow {
+    padding-right: 40px;
+  }
+  .dtsb-greyscale {
+    @apply !border;
+  }
+  div.dtsb-logicContainer .dtsb-greyscale {
+    border: none !important;
+  }
+  div.dtsb-searchBuilder {
+    @apply mb-4 cursor-default justify-evenly text-left;
+  }
+  div.dtsb-searchBuilder button.dtsb-button,
+  div.dtsb-searchBuilder select {
+    @apply text-sm;
+  }
+  div.dtsb-searchBuilder div.dtsb-titleRow {
+    @apply mb-3 flex items-center justify-between;
+  }
+  div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title {
+    @apply inline-block text-sm font-normal;
+  }
+  div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title:empty {
+    display: inline;
+  }
+  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-value,
+  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-data,
+  div.dtsb-searchBuilder div.dtsb-vertical .dtsb-condition {
+    display: block;
+  }
+  div.dtsb-searchBuilder div.dtsb-group {
+    @apply relative clear-both mb-4;
+  }
+  div.dtsb-searchBuilder div.dtsb-group button.dtsb-search {
+    float: right;
+  }
+  div.dtsb-searchBuilder div.dtsb-group button.dtsb-clearGroup {
+    margin: 2px;
+    text-align: center;
+    padding: 0;
+  }
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    position: absolute;
+    margin-top: 0.8em;
+    margin-right: 0.8em;
+  }
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {
+    margin-bottom: 0.8em;
+    display: flex;
+    justify-content: flex-start;
+    flex-flow: row wrap;
+  }
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {
+    padding: 0.4em;
+    margin-right: 0.8em;
+    min-width: 5em;
+    max-width: 20em;
+    color: inherit;
+  }
+  div.dtsb-searchBuilder
+    div.dtsb-group
+    div.dtsb-criteria
+    select.dtsb-dropDown
+    option.dtsb-notItalic,
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input option.dtsb-notItalic {
+    font-style: normal;
+  }
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-italic {
+    font-style: italic;
+  }
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {
+    flex: 1;
+    white-space: nowrap;
+  }
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont span.dtsp-joiner {
+    margin-right: 0.8em;
+  }
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input.dtsb-value {
+    width: 33%;
+  }
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont select,
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input {
+    height: 100%;
+    box-sizing: border-box;
+  }
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {
+    margin-left: auto;
+    display: inline-block;
+  }
+  div.dtsb-searchBuilder
+    div.dtsb-group
+    div.dtsb-criteria
+    div.dtsb-buttonContainer
+    button.dtsb-delete,
+  div.dtsb-searchBuilder
+    div.dtsb-group
+    div.dtsb-criteria
+    div.dtsb-buttonContainer
+    button.dtsb-right,
+  div.dtsb-searchBuilder
+    div.dtsb-group
+    div.dtsb-criteria
+    div.dtsb-buttonContainer
+    button.dtsb-left {
+    margin-right: 0.8em;
+  }
+  div.dtsb-searchBuilder
+    div.dtsb-group
+    div.dtsb-criteria
+    div.dtsb-buttonContainer
+    button.dtsb-delete:last-child,
+  div.dtsb-searchBuilder
+    div.dtsb-group
+    div.dtsb-criteria
+    div.dtsb-buttonContainer
+    button.dtsb-right:last-child,
+  div.dtsb-searchBuilder
+    div.dtsb-group
+    div.dtsb-criteria
+    div.dtsb-buttonContainer
+    button.dtsb-left:last-child {
+    margin-right: 0;
+  }
+  @media screen and (max-width: 550px) {
+    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {
+      display: flex;
+      flex-flow: none;
+      flex-direction: column;
+      justify-content: flex-start;
+      padding-right: calc(35px + 0.8em);
+      margin-bottom: 0px;
+    }
+    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:first-child),
+    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:nth-child(2)),
+    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:last-child) {
+      padding-top: 0.8em;
+    }
+    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:first-child,
+    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:nth-child(2),
+    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:last-child {
+      padding-top: 0em;
+    }
+    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,
+    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {
+      max-width: none;
+      width: 100%;
+      margin-bottom: 0.8em;
+      margin-right: 0.8em;
+    }
+    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {
+      margin-right: 0.8em;
+    }
+    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {
+      position: absolute;
+      width: 35px;
+      display: flex;
+      flex-wrap: wrap-reverse;
+      right: 0;
+    }
+    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button {
+      margin-right: 0px !important;
+    }
+  }
+  div.dtsb-searchBuilder button,
+  div.dtsb-searchBuilder select.dtsb-dropDown,
+  div.dtsb-searchBuilder input {
+    @apply bg-background;
+  }
+  div.dtsb-searchBuilder button.dtsb-button {
+    @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;
+  }
+  div.dtsb-searchBuilder button.dtsb-button:hover {
+    @apply cursor-pointer bg-muted;
+  }
+  div.dtsb-searchBuilder div.dtsb-logicContainer {
+    @apply overflow-hidden rounded-none border;
+  }
+  div.dtsb-searchBuilder div.dtsb-logicContainer button {
+    @apply rounded-md border-transparent bg-transparent;
+  }
+  div.dtsb-searchBuilder button.dtsb-clearGroup {
+    min-width: 2em;
+    padding: 0;
+  }
+  div.dtsb-searchBuilder button.dtsb-iptbtn {
+    min-width: 100px;
+    text-align: left;
+  }
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {
+    @apply flex flex-row content-start items-start justify-start rounded-md;
+  }
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-logic {
+    @apply m-0 shrink-0 grow rounded-none border-0;
+    flex-basis: 3em;
+  }
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-clearGroup {
+    border: none;
+    border-radius: 0px;
+    width: 2em;
+    margin: 0px;
+  }
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {
+    @apply rounded-md border;
+  }
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-condition,
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-data,
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-value {
+    @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;
+  }
+
+  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-value {
+    @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;
+  }
+
+  /* Col vis styles */
+  .dt-button-background {
+    @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur-sm;
+  }
+  .dt-button-down-arrow {
+    @apply text-[10px];
+  }
+  .dt-button-collection {
+    @apply relative;
+    [role="menu"] {
+      @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];
+      button {
+        @apply h-7 px-2 text-xs;
+      }
+      .dt-button.buttons-columnVisibility.dt-button-active {
+        @apply bg-primary text-primary-foreground;
+      }
+    }
+  }
+</style>
 `}],utils:[],composables:[]},{name:"Date Field",value:"date-field",devDeps:["@internationalized/date"],files:[{fileName:"DateField.vue",dirPath:"components/UI",fileContent:`<template>
   <DateFieldRoot
     v-slot="{ segments, modelValue, isInvalid }"
@@ -3839,155 +3839,155 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   const { base, border, container, icon: iconClass, label: labelClass } = style();
 </script>
-`}],utils:[],composables:[],plugins:[]},{name:"Drawer",value:"drawer",deps:["vaul-vue"],files:[{fileName:"Drawer/Close.vue",dirPath:"components/UI",fileContent:`<template>\r
-  <DrawerClose v-bind="props">\r
-    <slot />\r
-  </DrawerClose>\r
-</template>\r
-\r
-<script lang="ts" setup>\r
-  import { DrawerClose } from "vaul-vue";\r
-\r
-  interface Props\r
-    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerClose>, "$props">> {}\r
-  const props = defineProps<Props>();\r
-</script>\r
-`},{fileName:"Drawer/Content.vue",dirPath:"components/UI",fileContent:`<template>\r
-  <UiDrawerPortal>\r
-    <slot name="overlay">\r
-      <UiDrawerOverlay />\r
-    </slot>\r
-    <slot name="content">\r
-      <DrawerContent v-bind="{ ...props, ...$attrs }" :class="styles({ class: props.class })">\r
-        <slot name="knob">\r
-          <div\r
-            className="mx-auto shrink-0 cursor-grab active:cursor-grabbing my-5 h-2 w-[60px] rounded-full bg-muted"\r
-          />\r
-        </slot>\r
-        <slot />\r
-      </DrawerContent>\r
-    </slot>\r
-  </UiDrawerPortal>\r
-</template>\r
-\r
-<script lang="ts" setup>\r
-  import { DrawerContent } from "vaul-vue";\r
-\r
-  defineOptions({ inheritAttrs: false });\r
-\r
-  interface Props\r
-    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerContent>, "$props">> {}\r
-\r
-  const props = defineProps<Props & { class?: any }>();\r
-  const styles = tv({\r
-    base: "fixed bottom-0 left-0 right-0 z-50 mt-24 flex h-auto max-h-[95%] flex-col rounded-t-[10px] border bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/40",\r
-  });\r
-</script>\r
-`},{fileName:"Drawer/Description.vue",dirPath:"components/UI",fileContent:`<template>\r
-  <DrawerDescription v-bind="props" :class="styles({ class: props.class })">\r
-    <slot>\r
-      {{ props.text }}\r
-    </slot>\r
-  </DrawerDescription>\r
-</template>\r
-\r
-<script lang="ts" setup>\r
-  import { DrawerDescription } from "vaul-vue";\r
-\r
-  interface Props\r
-    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerDescription>, "$props">> {\r
-    class?: any;\r
-    text?: string;\r
-  }\r
-\r
-  const props = defineProps<Props>();\r
-\r
-  const styles = tv({\r
-    base: "text-sm text-muted-foreground",\r
-  });\r
-</script>\r
-`},{fileName:"Drawer/Drawer.vue",dirPath:"components/UI",fileContent:`<template>\r
-  <DrawerRoot v-bind="forwarded">\r
-    <slot />\r
-  </DrawerRoot>\r
-</template>\r
-\r
-<script lang="ts" setup>\r
-  import { useForwardPropsEmits } from "radix-vue";\r
-  import { DrawerRoot } from "vaul-vue";\r
-  import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue";\r
-\r
-  const props = defineProps<DrawerRootProps>();\r
-  const emits = defineEmits<DrawerRootEmits>();\r
-  const forwarded = useForwardPropsEmits(props, emits);\r
-</script>\r
-`},{fileName:"Drawer/Overlay.vue",dirPath:"components/UI",fileContent:`<template>\r
-  <DrawerOverlay v-bind="props" :class="styles({ class: props.class })" />\r
-</template>\r
-\r
-<script lang="ts" setup>\r
-  import { DrawerOverlay } from "vaul-vue";\r
-\r
-  interface Props\r
-    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerOverlay>, "$props">> {}\r
-\r
-  const props = defineProps<Props & { class?: any }>();\r
-\r
-  const styles = tv({\r
-    base: "fixed inset-0 z-50 bg-black/40 backdrop-blur",\r
-  });\r
-</script>\r
-`},{fileName:"Drawer/Portal.vue",dirPath:"components/UI",fileContent:`<template>\r
-  <DrawerPortal v-bind="props">\r
-    <slot />\r
-  </DrawerPortal>\r
-</template>\r
-\r
-<script lang="ts" setup>\r
-  import { DrawerPortal } from "vaul-vue";\r
-\r
-  interface Props\r
-    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerPortal>, "$props">> {}\r
-\r
-  const props = defineProps<Props>();\r
-</script>\r
-`},{fileName:"Drawer/Title.vue",dirPath:"components/UI",fileContent:`<template>\r
-  <DrawerTitle v-bind="props" :class="styles({ class: props.class })">\r
-    <slot>\r
-      {{ props.text }}\r
-    </slot>\r
-  </DrawerTitle>\r
-</template>\r
-\r
-<script lang="ts" setup>\r
-  import { DrawerTitle } from "vaul-vue";\r
-\r
-  interface Props\r
-    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTitle>, "$props">> {\r
-    class?: any;\r
-    text?: string;\r
-  }\r
-\r
-  const props = defineProps<Props>();\r
-\r
-  const styles = tv({\r
-    base: "text-lg font-semibold leading-none tracking-tight",\r
-  });\r
-</script>\r
-`},{fileName:"Drawer/Trigger.vue",dirPath:"components/UI",fileContent:`<template>\r
-  <DrawerTrigger v-bind="props">\r
-    <slot />\r
-  </DrawerTrigger>\r
-</template>\r
-\r
-<script lang="ts" setup>\r
-  import { DrawerTrigger } from "vaul-vue";\r
-\r
-  interface Props\r
-    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTrigger>, "$props">> {}\r
-\r
-  const props = defineProps<Props>();\r
-</script>\r
+`}],utils:[],composables:[],plugins:[]},{name:"Drawer",value:"drawer",deps:["vaul-vue"],files:[{fileName:"Drawer/Close.vue",dirPath:"components/UI",fileContent:`<template>
+  <DrawerClose v-bind="props">
+    <slot />
+  </DrawerClose>
+</template>
+
+<script lang="ts" setup>
+  import { DrawerClose } from "vaul-vue";
+
+  interface Props
+    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerClose>, "$props">> {}
+  const props = defineProps<Props>();
+</script>
+`},{fileName:"Drawer/Content.vue",dirPath:"components/UI",fileContent:`<template>
+  <UiDrawerPortal>
+    <slot name="overlay">
+      <UiDrawerOverlay />
+    </slot>
+    <slot name="content">
+      <DrawerContent v-bind="{ ...props, ...$attrs }" :class="styles({ class: props.class })">
+        <slot name="knob">
+          <div
+            className="mx-auto shrink-0 cursor-grab active:cursor-grabbing my-5 h-2 w-[60px] rounded-full bg-muted"
+          />
+        </slot>
+        <slot />
+      </DrawerContent>
+    </slot>
+  </UiDrawerPortal>
+</template>
+
+<script lang="ts" setup>
+  import { DrawerContent } from "vaul-vue";
+
+  defineOptions({ inheritAttrs: false });
+
+  interface Props
+    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerContent>, "$props">> {}
+
+  const props = defineProps<Props & { class?: any }>();
+  const styles = tv({
+    base: "fixed bottom-0 left-0 right-0 z-50 mt-24 flex h-auto max-h-[95%] flex-col rounded-t-[10px] border bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/40",
+  });
+</script>
+`},{fileName:"Drawer/Description.vue",dirPath:"components/UI",fileContent:`<template>
+  <DrawerDescription v-bind="props" :class="styles({ class: props.class })">
+    <slot>
+      {{ props.text }}
+    </slot>
+  </DrawerDescription>
+</template>
+
+<script lang="ts" setup>
+  import { DrawerDescription } from "vaul-vue";
+
+  interface Props
+    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerDescription>, "$props">> {
+    class?: any;
+    text?: string;
+  }
+
+  const props = defineProps<Props>();
+
+  const styles = tv({
+    base: "text-sm text-muted-foreground",
+  });
+</script>
+`},{fileName:"Drawer/Drawer.vue",dirPath:"components/UI",fileContent:`<template>
+  <DrawerRoot v-bind="forwarded">
+    <slot />
+  </DrawerRoot>
+</template>
+
+<script lang="ts" setup>
+  import { useForwardPropsEmits } from "radix-vue";
+  import { DrawerRoot } from "vaul-vue";
+  import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue";
+
+  const props = defineProps<DrawerRootProps>();
+  const emits = defineEmits<DrawerRootEmits>();
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>
+`},{fileName:"Drawer/Overlay.vue",dirPath:"components/UI",fileContent:`<template>
+  <DrawerOverlay v-bind="props" :class="styles({ class: props.class })" />
+</template>
+
+<script lang="ts" setup>
+  import { DrawerOverlay } from "vaul-vue";
+
+  interface Props
+    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerOverlay>, "$props">> {}
+
+  const props = defineProps<Props & { class?: any }>();
+
+  const styles = tv({
+    base: "fixed inset-0 z-50 bg-black/40 backdrop-blur",
+  });
+</script>
+`},{fileName:"Drawer/Portal.vue",dirPath:"components/UI",fileContent:`<template>
+  <DrawerPortal v-bind="props">
+    <slot />
+  </DrawerPortal>
+</template>
+
+<script lang="ts" setup>
+  import { DrawerPortal } from "vaul-vue";
+
+  interface Props
+    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerPortal>, "$props">> {}
+
+  const props = defineProps<Props>();
+</script>
+`},{fileName:"Drawer/Title.vue",dirPath:"components/UI",fileContent:`<template>
+  <DrawerTitle v-bind="props" :class="styles({ class: props.class })">
+    <slot>
+      {{ props.text }}
+    </slot>
+  </DrawerTitle>
+</template>
+
+<script lang="ts" setup>
+  import { DrawerTitle } from "vaul-vue";
+
+  interface Props
+    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTitle>, "$props">> {
+    class?: any;
+    text?: string;
+  }
+
+  const props = defineProps<Props>();
+
+  const styles = tv({
+    base: "text-lg font-semibold leading-none tracking-tight",
+  });
+</script>
+`},{fileName:"Drawer/Trigger.vue",dirPath:"components/UI",fileContent:`<template>
+  <DrawerTrigger v-bind="props">
+    <slot />
+  </DrawerTrigger>
+</template>
+
+<script lang="ts" setup>
+  import { DrawerTrigger } from "vaul-vue";
+
+  interface Props
+    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTrigger>, "$props">> {}
+
+  const props = defineProps<Props>();
+</script>
 `}],utils:[],composables:[],plugins:[]},{name:"Dropdown Menu",value:"dropdown-menu",files:[{fileName:"DropdownMenu/Arrow.vue",dirPath:"components/UI",fileContent:`<template>
   <DropdownMenuArrow
     v-bind="reactiveOmit(props, 'class')"
@@ -4508,10 +4508,12 @@ export default defineNuxtPlugin((nuxtApp) => {
     accept: props.accept,
   });
 
-  onChange((files: FileList) => {
-    handleDrop(Array.from(files || []));
-    reset();
-  });
+  onChange((files: FileList | null) => {
+    if (files?.length) {
+      handleDrop(Array.from(files || []))
+      reset()
+    }
+  })
 
   const dropZoneRef = ref<HTMLDivElement>();
   const emits = defineEmits<{