ui-thing 0.1.8 → 0.1.9

package/dist/index.js

@@ -2350,1070 +2350,1070 @@ DataTable.use(DataTablesCore);
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component("DataTable", DataTable);
 });
-`}],files:[{fileName:"Datatable.client.vue",dirPath:"components/UI",fileContent:`<template>
-  <DataTable
-    :columns="columns"
-    :ajax="ajax"
-    ref="table"
-    :data="data"
-    :class="props.class"
-    :options="options"
-  >
-    <template v-for="(_, name) in $slots" v-slot:[name]="scope">
-      <slot :name="name" v-bind="scope"></slot>
-    </template>
-  </DataTable>
-</template>
-
-<script lang="ts" setup generic="T extends Record<string, any>">
-  import type DataTableRef from "datatables.net";
-  import type { Config } from "datatables.net";
-
-  export type DataTablesNamedSlotProps<T> = {
-    /** The data to show in the cell (from the \`columns.data\` configuration) */
-    cellData: keyof T | null;
-    /** The column index for the cell (0-based index) */
-    colIndex: number;
-    /** The data object for the whole row */
-    rowData: T | Record<string, any>;
-    /** Row index for the cell (data index, not the display index) */
-    rowIndex: number;
-    /** Orthogonal data type */
-    type: string;
-  };
-
-  const table = shallowRef<{ dt: InstanceType<typeof DataTableRef<T[]>> } | null>(null);
-
-  const props = withDefaults(
-    defineProps<{
-      data?: Config["data"];
-      class?: any;
-      columns?: Config["columns"];
-      ajax?: Config["ajax"];
-      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,
-  /* V2 */
-  table.dataTable thead > tr > th.dt-orderable-asc,
-  table.dataTable thead > tr > th.dt-orderable-desc,
-  table.dataTable thead > tr > td.dt-orderable-asc,
-  table.dataTable thead > tr > td.dt-orderable-desc {
-    @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,
-  /* V2 */
-  table.dataTable thead > tr > th.dt-orderable-asc:before,
-  table.dataTable thead > tr > th.dt-orderable-asc:after,
-  table.dataTable thead > tr > th.dt-orderable-desc:before,
-  table.dataTable thead > tr > th.dt-orderable-desc:after,
-  table.dataTable thead > tr > td.dt-orderable-asc:before,
-  table.dataTable thead > tr > td.dt-orderable-asc:after,
-  table.dataTable thead > tr > td.dt-orderable-desc:before,
-  table.dataTable thead > tr > td.dt-orderable-desc: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,
-  /* V2 */
-  table.dataTable thead > tr > th.dt-orderable-asc:before,
-  table.dataTable thead > tr > th.dt-orderable-desc:before,
-  table.dataTable thead > tr > td.dt-orderable-asc:before,
-  table.dataTable thead > tr > td.dt-orderable-desc: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,
-  /* V2 */
-  table.dataTable thead > tr > th.dt-orderable-asc:after,
-  table.dataTable thead > tr > th.dt-orderable-desc:after,
-  table.dataTable thead > tr > td.dt-orderable-asc:after,
-  table.dataTable thead > tr > td.dt-orderable-desc: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,
-  /* V2 */
-  table.dataTable thead > tr > th.dt-ordering-asc:before,
-  table.dataTable thead > tr > th.dt-ordering-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 - v1 of datatables */
-  .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;
-    }
-  }
-  /* V2 of datatables button styles. 
-  */
-  .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;
-  }
-
-  /* Select box at bottom showing number of records being displayed - v1 of datatables */
-  .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;
-      }
-    }
-  }
-  /* Select box at the bottom showing how many items are being display - v2 */
-  .dt-length {
-    @apply inline-flex items-center gap-2;
-    label {
-      @apply 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;
-    }
-  }
-
-  /* Search box at the top styles - v1 of datatables */
-  .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;
-      }
-    }
-  }
-
-  /* Search box at the top styles -v2 */
-  .dt-search {
-    @apply flex items-center gap-3;
-    label {
-      @apply inline-flex 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 md:w-[50%] lg:w-[250px];
-    }
-  }
-
-  /* Info text that shows \`Showing X to XX of XXXX entries - v1  */
-  .dataTables_wrapper .dataTables_info,
-  .dt-info {
-    @apply flex items-center gap-3 text-sm !text-muted-foreground;
-  }
-
-  /* Pagination button styles - v1 datatables */
-  .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;
-    }
-  }
-  /* Pagination button - v2 */
-  .dt-paging-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;
-    &.current,
-    &:hover {
-      @apply bg-muted;
-    }
-    &.disabled,
-    &.disabled:hover,
-    &.disabled:active {
-      @apply pointer-events-none opacity-50;
-    }
-  }
-  .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,
-  .dt-paging .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,
-  table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
-  table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > 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,
-  table.dataTable.dtr-column > tbody > tr.dtr-expanded td.dtr-control:before,
-  table.dataTable.dtr-column > tbody > tr.dtr-expanded th.dtr-control:before,
-  table.dataTable.dtr-column > tbody > tr.dtr-expanded td.control:before,
-  table.dataTable.dtr-column > tbody > tr.dtr-expanded 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;
-  }
-  /* Responsive modal */
-  div.dtr-modal {
-    @apply fixed left-0 top-0 z-[1000] box-border size-full;
-  }
-  div.dtr-modal div.dtr-modal-display {
-    @apply absolute left-1/2 top-1/2 z-[102] max-h-[80%] w-full max-w-screen-sm -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-md border bg-background p-4 pb-0 md:px-7 md:py-4 md:pb-0 lg:max-h-[90%];
-  }
-  div.dtr-modal div.dtr-modal-content {
-    @apply relative flex flex-col p-0 text-[15px];
-    h2 {
-      @apply text-lg font-semibold text-foreground;
-    }
-    table tr td {
-      @apply space-x-10 pb-2 first:font-semibold [&:nth-child(2)]:pl-2;
-    }
-  }
-  div.dtr-modal div.dtr-modal-close {
-    @apply absolute right-2 top-2 z-[10] inline-flex size-6 cursor-pointer items-center justify-center rounded-md bg-muted/10 hover:bg-muted;
-  }
-  div.dtr-modal div.dtr-modal-background {
-    @apply fixed inset-0 z-[101] bg-background/20 backdrop-blur;
-  }
-
-  /* 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-20 top-7 flex min-w-[200px] flex-col rounded-md border bg-background py-2 shadow before:mx-2 before:mb-2 before:text-xs before:text-muted-foreground/70 before:content-['Select_columns'];
-      button {
-        @apply h-8 rounded-none border-none px-4 text-xs;
-      }
-      .dt-button.buttons-columnVisibility.dt-button-active {
-        @apply text-foreground after:ml-auto after:content-['\u2713'];
-      }
-    }
-  }
-</style>
+`}],files:[{fileName:"Datatable.client.vue",dirPath:"components/UI",fileContent:`<template>\r
+  <DataTable\r
+    :columns="columns"\r
+    :ajax="ajax"\r
+    ref="table"\r
+    :data="data"\r
+    :class="props.class"\r
+    :options="options"\r
+  >\r
+    <template v-for="(_, name) in $slots" v-slot:[name]="scope">\r
+      <slot :name="name" v-bind="scope"></slot>\r
+    </template>\r
+  </DataTable>\r
+</template>\r
+\r
+<script lang="ts" setup generic="T extends Record<string, any>">\r
+  import type DataTableRef from "datatables.net";\r
+  import type { Config } from "datatables.net";\r
+\r
+  export type DataTablesNamedSlotProps<T> = {\r
+    /** The data to show in the cell (from the \`columns.data\` configuration) */\r
+    cellData: keyof T | null;\r
+    /** The column index for the cell (0-based index) */\r
+    colIndex: number;\r
+    /** The data object for the whole row */\r
+    rowData: T | Record<string, any>;\r
+    /** Row index for the cell (data index, not the display index) */\r
+    rowIndex: number;\r
+    /** Orthogonal data type */\r
+    type: string;\r
+  };\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
+      columns?: Config["columns"];\r
+      ajax?: Config["ajax"];\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
+  /* V2 */\r
+  table.dataTable thead > tr > th.dt-orderable-asc,\r
+  table.dataTable thead > tr > th.dt-orderable-desc,\r
+  table.dataTable thead > tr > td.dt-orderable-asc,\r
+  table.dataTable thead > tr > td.dt-orderable-desc {\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
+  /* V2 */\r
+  table.dataTable thead > tr > th.dt-orderable-asc:before,\r
+  table.dataTable thead > tr > th.dt-orderable-asc:after,\r
+  table.dataTable thead > tr > th.dt-orderable-desc:before,\r
+  table.dataTable thead > tr > th.dt-orderable-desc:after,\r
+  table.dataTable thead > tr > td.dt-orderable-asc:before,\r
+  table.dataTable thead > tr > td.dt-orderable-asc:after,\r
+  table.dataTable thead > tr > td.dt-orderable-desc:before,\r
+  table.dataTable thead > tr > td.dt-orderable-desc: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
+  /* V2 */\r
+  table.dataTable thead > tr > th.dt-orderable-asc:before,\r
+  table.dataTable thead > tr > th.dt-orderable-desc:before,\r
+  table.dataTable thead > tr > td.dt-orderable-asc:before,\r
+  table.dataTable thead > tr > td.dt-orderable-desc: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
+  /* V2 */\r
+  table.dataTable thead > tr > th.dt-orderable-asc:after,\r
+  table.dataTable thead > tr > th.dt-orderable-desc:after,\r
+  table.dataTable thead > tr > td.dt-orderable-asc:after,\r
+  table.dataTable thead > tr > td.dt-orderable-desc: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
+  /* V2 */\r
+  table.dataTable thead > tr > th.dt-ordering-asc:before,\r
+  table.dataTable thead > tr > th.dt-ordering-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 - v1 of datatables */\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
+  /* V2 of datatables button styles. \r
+  */\r
+  .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
+  /* Select box at bottom showing number of records being displayed - v1 of datatables */\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
+  /* Select box at the bottom showing how many items are being display - v2 */\r
+  .dt-length {\r
+    @apply inline-flex items-center gap-2;\r
+    label {\r
+      @apply text-sm font-normal text-muted-foreground;\r
+    }\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
+  /* Search box at the top styles - v1 of datatables */\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
+\r
+  /* Search box at the top styles -v2 */\r
+  .dt-search {\r
+    @apply flex items-center gap-3;\r
+    label {\r
+      @apply inline-flex cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\r
+    }\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 md:w-[50%] lg:w-[250px];\r
+    }\r
+  }\r
+\r
+  /* Info text that shows \`Showing X to XX of XXXX entries - v1  */\r
+  .dataTables_wrapper .dataTables_info,\r
+  .dt-info {\r
+    @apply flex items-center gap-3 text-sm !text-muted-foreground;\r
+  }\r
+\r
+  /* Pagination button styles - v1 datatables */\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
+  /* Pagination button - v2 */\r
+  .dt-paging-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
+    &.current,\r
+    &:hover {\r
+      @apply bg-muted;\r
+    }\r
+    &.disabled,\r
+    &.disabled:hover,\r
+    &.disabled:active {\r
+      @apply pointer-events-none opacity-50;\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
+  .dt-paging .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
+  table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,\r
+  table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > 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
+  table.dataTable.dtr-column > tbody > tr.dtr-expanded td.dtr-control:before,\r
+  table.dataTable.dtr-column > tbody > tr.dtr-expanded th.dtr-control:before,\r
+  table.dataTable.dtr-column > tbody > tr.dtr-expanded td.control:before,\r
+  table.dataTable.dtr-column > tbody > tr.dtr-expanded 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
+  /* Responsive modal */\r
+  div.dtr-modal {\r
+    @apply fixed left-0 top-0 z-[1000] box-border size-full;\r
+  }\r
+  div.dtr-modal div.dtr-modal-display {\r
+    @apply absolute left-1/2 top-1/2 z-[102] max-h-[80%] w-full max-w-screen-sm -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-md border bg-background p-4 pb-0 md:px-7 md:py-4 md:pb-0 lg:max-h-[90%];\r
+  }\r
+  div.dtr-modal div.dtr-modal-content {\r
+    @apply relative flex flex-col p-0 text-[15px];\r
+    h2 {\r
+      @apply text-lg font-semibold text-foreground;\r
+    }\r
+    table tr td {\r
+      @apply space-x-10 pb-2 first:font-semibold [&:nth-child(2)]:pl-2;\r
+    }\r
+  }\r
+  div.dtr-modal div.dtr-modal-close {\r
+    @apply absolute right-2 top-2 z-[10] inline-flex size-6 cursor-pointer items-center justify-center rounded-md bg-muted/10 hover:bg-muted;\r
+  }\r
+  div.dtr-modal div.dtr-modal-background {\r
+    @apply fixed inset-0 z-[101] bg-background/20 backdrop-blur;\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-20 top-7 flex min-w-[200px] flex-col rounded-md border bg-background py-2 shadow before:mx-2 before:mb-2 before:text-xs before:text-muted-foreground/70 before:content-['Select_columns'];\r
+      button {\r
+        @apply h-8 rounded-none border-none px-4 text-xs;\r
+      }\r
+      .dt-button.buttons-columnVisibility.dt-button-active {\r
+        @apply text-foreground after:ml-auto after:content-['\u2713'];\r
+      }\r
+    }\r
+  }\r
+</style>\r
 `}],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 }"
@@ -3914,155 +3914,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>
-  <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:"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:"Dropdown Menu",value:"dropdown-menu",files:[{fileName:"DropdownMenu/Arrow.vue",dirPath:"components/UI",fileContent:`<template>
   <DropdownMenuArrow
     v-bind="reactiveOmit(props, 'class')"
@@ -4512,104 +4512,104 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   const props = defineProps<DropdownMenuTriggerProps>();
 </script>
-`}],utils:[],composables:[],plugins:[]},{name:"Dropfile",value:"dropfile",files:[{fileName:"Dropfile.vue",dirPath:"components/UI",fileContent:`<template>
-  <div @click="open()" ref="dropZoneRef" :class="styles({ isOverDropZone, class: props.class })">
-    <slot name="message">
-      <div class="py-10 text-center">
-        <slot name="icon">
-          <div
-            v-if="icon"
-            class="inline-flex items-center justify-center rounded-md border p-2 transition"
-            :class="[isOverDropZone && 'animate-bounce border-primary']"
-          >
-            <Icon
-              :name="icon"
-              class="h-7 w-7 opacity-70"
-              :class="[isOverDropZone && 'text-primary']"
-            />
-          </div>
-        </slot>
-        <slot name="title">
-          <p class="mt-5 text-sm font-medium" v-html="title"></p>
-        </slot>
-        <slot name="subtext">
-          <p class="mt-1 text-sm text-muted-foreground/60" v-html="subtext"></p>
-        </slot>
-      </div>
-    </slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-  const props = withDefaults(
-    defineProps<{
-      /**
-       * The text to display as the title of the dropzone.
-       */
-      title?: string;
-      /**
-       * The text to display as the subtext of the dropzone.
-       */
-      subtext?: string;
-      /**
-       * The icon to display in the dropzone.
-       */
-      icon?: string;
-      /**
-       * The function to call when files are dropped.
-       */
-      onDrop?: Function;
-      /**
-       * Whether or not to allow multiple files to be picked. Does not affect drag and drop.
-       */
-      multiple?: boolean;
-      /**
-       * The file types to accept. Does not affect drag and drop.
-       */
-      accept?: string;
-      class?: any;
-    }>(),
-    {
-      title: "Click to upload or drag & drop files.",
-      subtext: "All file types accepted",
-      icon: "heroicons:cloud-arrow-up",
-      multiple: true,
-      accept: "*",
-    }
-  );
-
-  const { open, reset, onChange } = useFileDialog({
-    multiple: props.multiple,
-    accept: props.accept,
-  });
-
-  onChange((files: FileList | null) => {
-    if (files?.length) {
-      handleDrop(Array.from(files || []))
-      reset()
-    }
-  })
-
-  const dropZoneRef = ref<HTMLDivElement>();
-  const emits = defineEmits<{
-    dropped: [any];
-  }>();
-
-  const handleDrop = (files: File[] | null) => {
-    if (!files) return;
-    if (props.onDrop) props.onDrop(files);
-    emits("dropped", files);
-  };
-
-  const { isOverDropZone } = useDropZone(dropZoneRef, handleDrop);
-
-  const styles = tv({
-    base: "flex w-full cursor-pointer items-center justify-center rounded-md border border-dashed transition hover:border-primary",
-    variants: {
-      isOverDropZone: { true: "border-primary bg-primary/10" },
-    },
-  });
-</script>
+`}],utils:[],composables:[],plugins:[]},{name:"Dropfile",value:"dropfile",files:[{fileName:"Dropfile.vue",dirPath:"components/UI",fileContent:`<template>\r
+  <div @click="open()" ref="dropZoneRef" :class="styles({ isOverDropZone, class: props.class })">\r
+    <slot name="message">\r
+      <div class="py-10 text-center">\r
+        <slot name="icon">\r
+          <div\r
+            v-if="icon"\r
+            class="inline-flex items-center justify-center rounded-md border p-2 transition"\r
+            :class="[isOverDropZone && 'animate-bounce border-primary']"\r
+          >\r
+            <Icon\r
+              :name="icon"\r
+              class="h-7 w-7 opacity-70"\r
+              :class="[isOverDropZone && 'text-primary']"\r
+            />\r
+          </div>\r
+        </slot>\r
+        <slot name="title">\r
+          <p class="mt-5 text-sm font-medium" v-html="title"></p>\r
+        </slot>\r
+        <slot name="subtext">\r
+          <p class="mt-1 text-sm text-muted-foreground/60" v-html="subtext"></p>\r
+        </slot>\r
+      </div>\r
+    </slot>\r
+  </div>\r
+</template>\r
+\r
+<script setup lang="ts">\r
+  const props = withDefaults(\r
+    defineProps<{\r
+      /**\r
+       * The text to display as the title of the dropzone.\r
+       */\r
+      title?: string;\r
+      /**\r
+       * The text to display as the subtext of the dropzone.\r
+       */\r
+      subtext?: string;\r
+      /**\r
+       * The icon to display in the dropzone.\r
+       */\r
+      icon?: string;\r
+      /**\r
+       * The function to call when files are dropped.\r
+       */\r
+      onDrop?: Function;\r
+      /**\r
+       * Whether or not to allow multiple files to be picked. Does not affect drag and drop.\r
+       */\r
+      multiple?: boolean;\r
+      /**\r
+       * The file types to accept. Does not affect drag and drop.\r
+       */\r
+      accept?: string;\r
+      class?: any;\r
+    }>(),\r
+    {\r
+      title: "Click to upload or drag & drop files.",\r
+      subtext: "All file types accepted",\r
+      icon: "heroicons:cloud-arrow-up",\r
+      multiple: true,\r
+      accept: "*",\r
+    }\r
+  );\r
+\r
+  const { open, reset, onChange } = useFileDialog({\r
+    multiple: props.multiple,\r
+    accept: props.accept,\r
+  });\r
+\r
+  onChange((files: FileList | null) => {\r
+    if (files?.length) {\r
+      handleDrop(Array.from(files || []))\r
+      reset()\r
+    }\r
+  })\r
+\r
+  const dropZoneRef = ref<HTMLDivElement>();\r
+  const emits = defineEmits<{\r
+    dropped: [any];\r
+  }>();\r
+\r
+  const handleDrop = (files: File[] | null) => {\r
+    if (!files) return;\r
+    if (props.onDrop) props.onDrop(files);\r
+    emits("dropped", files);\r
+  };\r
+\r
+  const { isOverDropZone } = useDropZone(dropZoneRef, handleDrop);\r
+\r
+  const styles = tv({\r
+    base: "flex w-full cursor-pointer items-center justify-center rounded-md border border-dashed transition hover:border-primary",\r
+    variants: {\r
+      isOverDropZone: { true: "border-primary bg-primary/10" },\r
+    },\r
+  });\r
+</script>\r
 `}],utils:[],composables:[],plugins:[]},{name:"Form",value:"form",deps:["@vee-validate/nuxt"],nuxtModules:["@vee-validate/nuxt"],composables:[{fileName:"useFormField.ts",dirPath:"composables",fileContent:`import { FORM_ITEM_INJECTION_KEY } from "@/components/Ui/Form/Item.vue";
 import {
   FieldContextKey,
@@ -4702,8 +4702,6 @@ export function useFormField() {
 </script>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
-
   defineOptions({ inheritAttrs: false });
 
   const id = useId();
@@ -5778,32 +5776,32 @@ export function useFormField() {
     base: "group flex flex-1 list-none items-center justify-center space-x-1",
   });
 </script>
-`},{fileName:"NavigationMenu/NavigationMenu.vue",dirPath:"components/UI",fileContent:`<template>
-  <NavigationMenuRoot :class="styles({ class: props.class })" v-bind="forwarded">
-    <slot></slot>
-    <slot name="viewport">
-      <UiNavigationMenuViewport />
-    </slot>
-  </NavigationMenuRoot>
-</template>
-
-<script lang="ts" setup>
-  import { NavigationMenuRoot, useForwardPropsEmits } from "radix-vue";
-  import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "radix-vue";
-
-  const props = defineProps<
-    NavigationMenuRootProps & {
-      /** Custom class(es) to add to the parent */
-      class?: any;
-    }
-  >();
-  const emits = defineEmits<NavigationMenuRootEmits>();
-  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
-
-  const styles = tv({
-    base: "relative flex max-w-max flex-1 items-center justify-center",
-  });
-</script>
+`},{fileName:"NavigationMenu/NavigationMenu.vue",dirPath:"components/UI",fileContent:`<template>\r
+  <NavigationMenuRoot :class="styles({ class: props.class })" v-bind="forwarded">\r
+    <slot></slot>\r
+    <slot name="viewport">\r
+      <UiNavigationMenuViewport />\r
+    </slot>\r
+  </NavigationMenuRoot>\r
+</template>\r
+\r
+<script lang="ts" setup>\r
+  import { NavigationMenuRoot, useForwardPropsEmits } from "radix-vue";\r
+  import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "radix-vue";\r
+\r
+  const props = defineProps<\r
+    NavigationMenuRootProps & {\r
+      /** Custom class(es) to add to the parent */\r
+      class?: any;\r
+    }\r
+  >();\r
+  const emits = defineEmits<NavigationMenuRootEmits>();\r
+  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\r
+\r
+  const styles = tv({\r
+    base: "relative flex max-w-max flex-1 items-center justify-center",\r
+  });\r
+</script>\r
 `},{fileName:"NavigationMenu/Sub.vue",dirPath:"components/UI",fileContent:`<template>
   <NavigationMenuSub v-bind="forwarded">
     <slot></slot>
@@ -5818,41 +5816,41 @@ export function useFormField() {
   const emits = defineEmits<NavigationMenuSubEmits>();
   const forwarded = useForwardPropsEmits(props, emits);
 </script>
-`},{fileName:"NavigationMenu/Trigger.vue",dirPath:"components/UI",fileContent:`<template>
-  <NavigationMenuTrigger
-    v-bind="reactiveOmit(props, 'class', 'icon', 'title')"
-    :class="styles({ class: props.class })"
-  >
-    <slot>{{ title }}</slot>
-    <slot name="icon">
-      <Icon
-        :name="icon || 'lucide:chevron-down'"
-        class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
-        aria-hidden="true"
-      />
-    </slot>
-  </NavigationMenuTrigger>
-</template>
-
-<script lang="ts" setup>
-  import { NavigationMenuTrigger } from "radix-vue";
-  import type { NavigationMenuTriggerProps } from "radix-vue";
-
-  const props = defineProps<
-    NavigationMenuTriggerProps & {
-      /** Custom class(es) to add to the parent */
-      class?: any;
-      /** Icon to show */
-      icon?: string;
-      /** Title to show */
-      title?: string;
-    }
-  >();
-
-  const styles = tv({
-    base: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
-  });
-</script>
+`},{fileName:"NavigationMenu/Trigger.vue",dirPath:"components/UI",fileContent:`<template>\r
+  <NavigationMenuTrigger\r
+    v-bind="reactiveOmit(props, 'class', 'icon', 'title')"\r
+    :class="styles({ class: props.class })"\r
+  >\r
+    <slot>{{ title }}</slot>\r
+    <slot name="icon">\r
+      <Icon\r
+        :name="icon || 'lucide:chevron-down'"\r
+        class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"\r
+        aria-hidden="true"\r
+      />\r
+    </slot>\r
+  </NavigationMenuTrigger>\r
+</template>\r
+\r
+<script lang="ts" setup>\r
+  import { NavigationMenuTrigger } from "radix-vue";\r
+  import type { NavigationMenuTriggerProps } from "radix-vue";\r
+\r
+  const props = defineProps<\r
+    NavigationMenuTriggerProps & {\r
+      /** Custom class(es) to add to the parent */\r
+      class?: any;\r
+      /** Icon to show */\r
+      icon?: string;\r
+      /** Title to show */\r
+      title?: string;\r
+    }\r
+  >();\r
+\r
+  const styles = tv({\r
+    base: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",\r
+  });\r
+</script>\r
 `},{fileName:"NavigationMenu/Viewport.vue",dirPath:"components/UI",fileContent:`<template>
   <div class="absolute left-0 top-full flex justify-center">
     <NavigationMenuViewport
@@ -8884,8 +8882,6 @@ export { toast, useToast };
 </template>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
-
   const props = defineProps<{
     label?: string;
     icon?: string;
@@ -8906,9 +8902,7 @@ export { toast, useToast };
     base: "flex gap-3",
   });
 
-  defineOptions({ inheritAttrs: false });
-
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const { errorMessage, checked, handleChange } = useField(
     () => props.name || inputId,
@@ -8971,8 +8965,6 @@ export { toast, useToast };
 </template>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
-
   const props = withDefaults(
     defineProps<{
       label?: string;
@@ -8993,9 +8985,7 @@ export { toast, useToast };
     }
   );
 
-  defineOptions({ inheritAttrs: false });
-
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));
 
@@ -9048,8 +9038,6 @@ export { toast, useToast };
 </template>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
-
   const props = defineProps<{
     label?: string;
     icon?: string;
@@ -9062,14 +9050,12 @@ export { toast, useToast };
     accept?: string;
   }>();
 
-  defineOptions({ inheritAttrs: false });
-
   const emits = defineEmits<{
     change: [files?: FileList | File | File[] | null];
     blur: [event?: FocusEvent];
   }>();
 
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));
 
@@ -9118,8 +9104,6 @@ export { toast, useToast };
 </template>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
-
   const props = defineProps<{
     label?: string;
     labelHint?: string;
@@ -9135,9 +9119,7 @@ export { toast, useToast };
     placeholder?: string;
   }>();
 
-  defineOptions({ inheritAttrs: false });
-
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));
 
@@ -9197,8 +9179,6 @@ export { toast, useToast };
 
   import "@vueform/multiselect/themes/default.css";
 
-  import { useId } from "radix-vue";
-
   const multiselect = shallowRef<InstanceType<typeof Multiselect> | null>(null);
 
   interface Props
@@ -9238,9 +9218,7 @@ export { toast, useToast };
     "ready",
   ]);
 
-  defineOptions({ inheritAttrs: false });
-
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {
     initialValue: props.modelValue,
@@ -9354,7 +9332,6 @@ export { toast, useToast };
 </template>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
   import type { PinInputRootProps } from "radix-vue";
 
   const props = defineProps<
@@ -9373,9 +9350,7 @@ export { toast, useToast };
     complete: [value: string[]];
   }>();
 
-  defineOptions({ inheritAttrs: false });
-
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {
     initialValue: props.modelValue || [],
@@ -9489,8 +9464,6 @@ export { toast, useToast };
 </template>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
-
   const props = defineProps<{
     label?: string;
     icon?: string;
@@ -9504,9 +9477,7 @@ export { toast, useToast };
     trailingIcon?: string;
   }>();
 
-  defineOptions({ inheritAttrs: false });
-
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));
 
@@ -9555,8 +9526,6 @@ export { toast, useToast };
 </template>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
-
   const props = defineProps<{
     label?: string;
     icon?: string;
@@ -9571,9 +9540,7 @@ export { toast, useToast };
     placeholder?: string;
   }>();
 
-  defineOptions({ inheritAttrs: false });
-
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));
 
@@ -9619,8 +9586,6 @@ export { toast, useToast };
 </template>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
-
   const props = defineProps<{
     label?: string;
     icon?: string;
@@ -9634,9 +9599,7 @@ export { toast, useToast };
     rows?: number;
   }>();
 
-  defineOptions({ inheritAttrs: false });
-
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));