next-data-kit 9.0.2 → 9.2.0

package/dist/index.js

@@ -11,6 +11,1219 @@ import { cva } from 'class-variance-authority';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import 'react-intersection-observer';
 
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// dist/styles.css
+styleInject(`/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+@layer properties {
+  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
+    *,
+    :before,
+    :after,
+    ::backdrop {
+      --tw-space-y-reverse:0;
+      --tw-border-style:solid;
+      --tw-font-weight:initial;
+      --tw-tracking:initial;
+      --tw-shadow:0 0 #0000;
+      --tw-shadow-color:initial;
+      --tw-shadow-alpha:100%;
+      --tw-inset-shadow:0 0 #0000;
+      --tw-inset-shadow-color:initial;
+      --tw-inset-shadow-alpha:100%;
+      --tw-ring-color:initial;
+      --tw-ring-shadow:0 0 #0000;
+      --tw-inset-ring-color:initial;
+      --tw-inset-ring-shadow:0 0 #0000;
+      --tw-ring-inset:initial;
+      --tw-ring-offset-width:0px;
+      --tw-ring-offset-color:#fff;
+      --tw-ring-offset-shadow:0 0 #0000;
+      --tw-translate-x:0;
+      --tw-translate-y:0;
+      --tw-translate-z:0;
+    }
+  }
+}
+@layer theme {
+  :root,
+  :host {
+    --ndk-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+    --ndk-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+    --ndk-color-red-400:oklch(70.4% .191 22.216);
+    --ndk-color-red-500:oklch(63.7% .237 25.331);
+    --ndk-color-red-600:oklch(57.7% .245 27.325);
+    --ndk-color-red-700:oklch(50.5% .213 27.518);
+    --ndk-color-gray-50:oklch(98.5% .002 247.839);
+    --ndk-color-gray-100:oklch(96.7% .003 264.542);
+    --ndk-color-gray-200:oklch(92.8% .006 264.531);
+    --ndk-color-gray-400:oklch(70.7% .022 261.325);
+    --ndk-color-gray-500:oklch(55.1% .027 264.364);
+    --ndk-color-gray-800:oklch(27.8% .033 256.848);
+    --ndk-color-gray-900:oklch(21% .034 264.665);
+    --ndk-color-gray-950:oklch(13% .028 261.692);
+    --ndk-color-black:#000;
+    --ndk-color-white:#fff;
+    --ndk-spacing:.25rem;
+    --ndk-text-xs:.75rem;
+    --ndk-text-xs--line-height:calc(1/.75);
+    --ndk-text-sm:.875rem;
+    --ndk-text-sm--line-height:calc(1.25/.875);
+    --ndk-font-weight-medium:500;
+    --ndk-tracking-widest:.1em;
+    --ndk-radius-sm:.25rem;
+    --ndk-radius-md:.375rem;
+    --ndk-radius-lg:.5rem;
+    --ndk-animate-spin:spin 1s linear infinite;
+    --ndk-default-transition-duration:.15s;
+    --ndk-default-transition-timing-function:cubic-bezier(.4,0,.2,1);
+    --ndk-default-font-family:var(--ndk-font-sans);
+    --ndk-default-mono-font-family:var(--ndk-font-mono);
+    --ndk-animate-in:animate-in;
+    --ndk-animate-out:animate-out;
+  }
+}
+@layer base {
+  *,
+  :after,
+  :before,
+  ::backdrop {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+  ::file-selector-button {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+  html,
+  :host {
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    line-height: 1.5;
+    font-family: var(--ndk-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");
+    font-feature-settings: var(--ndk-default-font-feature-settings,normal);
+    font-variation-settings: var(--ndk-default-font-variation-settings,normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--ndk-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);
+    font-feature-settings: var(--ndk-default-mono-font-feature-settings,normal);
+    font-variation-settings: var(--ndk-default-mono-font-variation-settings,normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub,
+  sup {
+    vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+  }
+  sub {
+    bottom: -.25em;
+  }
+  sup {
+    top: -.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    vertical-align: middle;
+    display: block;
+  }
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+  button,
+  input,
+  select,
+  optgroup,
+  textarea {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
+    ::placeholder {
+      color: currentColor;
+    }
+    @supports (color:color-mix(in lab, red, red)) {
+      ::placeholder {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-year-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-month-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-day-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-hour-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-minute-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-second-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-millisecond-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button,
+  input:where([type=button], [type=reset], [type=submit]) {
+    appearance: button;
+  }
+  ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden=until-found])) {
+    display: none !important;
+  }
+}
+@layer components;
+@layer utilities {
+  .ndk\\:pointer-events-none {
+    pointer-events: none;
+  }
+  .ndk\\:sr-only {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+  .ndk\\:absolute {
+    position: absolute;
+  }
+  .ndk\\:relative {
+    position: relative;
+  }
+  .ndk\\:right-2 {
+    right: calc(var(--ndk-spacing)*2);
+  }
+  .ndk\\:left-2 {
+    left: calc(var(--ndk-spacing)*2);
+  }
+  .ndk\\:z-50 {
+    z-index: 50;
+  }
+  .ndk\\:-mx-1 {
+    margin-inline: calc(var(--ndk-spacing)*-1);
+  }
+  .ndk\\:mx-0 {
+    margin-inline: calc(var(--ndk-spacing)*0);
+  }
+  .ndk\\:mx-auto {
+    margin-inline: auto;
+  }
+  .ndk\\:my-1 {
+    margin-block: calc(var(--ndk-spacing)*1);
+  }
+  .ndk\\:mt-4 {
+    margin-top: calc(var(--ndk-spacing)*4);
+  }
+  .ndk\\:mr-1\\.5 {
+    margin-right: calc(var(--ndk-spacing)*1.5);
+  }
+  .ndk\\:mr-2 {
+    margin-right: calc(var(--ndk-spacing)*2);
+  }
+  .ndk\\:-ml-4 {
+    margin-left: calc(var(--ndk-spacing)*-4);
+  }
+  .ndk\\:ml-1 {
+    margin-left: calc(var(--ndk-spacing)*1);
+  }
+  .ndk\\:ml-auto {
+    margin-left: auto;
+  }
+  .ndk\\:flex {
+    display: flex;
+  }
+  .ndk\\:grid {
+    display: grid;
+  }
+  .ndk\\:hidden {
+    display: none;
+  }
+  .ndk\\:inline-flex {
+    display: inline-flex;
+  }
+  .ndk\\:size-2 {
+    width: calc(var(--ndk-spacing)*2);
+    height: calc(var(--ndk-spacing)*2);
+  }
+  .ndk\\:size-3\\.5 {
+    width: calc(var(--ndk-spacing)*3.5);
+    height: calc(var(--ndk-spacing)*3.5);
+  }
+  .ndk\\:size-4 {
+    width: calc(var(--ndk-spacing)*4);
+    height: calc(var(--ndk-spacing)*4);
+  }
+  .ndk\\:size-5 {
+    width: calc(var(--ndk-spacing)*5);
+    height: calc(var(--ndk-spacing)*5);
+  }
+  .ndk\\:size-6 {
+    width: calc(var(--ndk-spacing)*6);
+    height: calc(var(--ndk-spacing)*6);
+  }
+  .ndk\\:size-8 {
+    width: calc(var(--ndk-spacing)*8);
+    height: calc(var(--ndk-spacing)*8);
+  }
+  .ndk\\:size-9 {
+    width: calc(var(--ndk-spacing)*9);
+    height: calc(var(--ndk-spacing)*9);
+  }
+  .ndk\\:size-10 {
+    width: calc(var(--ndk-spacing)*10);
+    height: calc(var(--ndk-spacing)*10);
+  }
+  .ndk\\:h-8 {
+    height: calc(var(--ndk-spacing)*8);
+  }
+  .ndk\\:h-9 {
+    height: calc(var(--ndk-spacing)*9);
+  }
+  .ndk\\:h-10 {
+    height: calc(var(--ndk-spacing)*10);
+  }
+  .ndk\\:h-24 {
+    height: calc(var(--ndk-spacing)*24);
+  }
+  .ndk\\:h-48 {
+    height: calc(var(--ndk-spacing)*48);
+  }
+  .ndk\\:h-\\[var\\(--radix-select-trigger-height\\)\\] {
+    height: var(--radix-select-trigger-height);
+  }
+  .ndk\\:h-auto {
+    height: auto;
+  }
+  .ndk\\:h-full {
+    height: 100%;
+  }
+  .ndk\\:h-px {
+    height: 1px;
+  }
+  .ndk\\:max-h-\\(--radix-dropdown-menu-content-available-height\\) {
+    max-height: var(--radix-dropdown-menu-content-available-height);
+  }
+  .ndk\\:max-h-\\(--radix-select-content-available-height\\) {
+    max-height: var(--radix-select-content-available-height);
+  }
+  .ndk\\:min-h-0 {
+    min-height: calc(var(--ndk-spacing)*0);
+  }
+  .ndk\\:min-h-\\[200px\\] {
+    min-height: 200px;
+  }
+  .ndk\\:w-12 {
+    width: calc(var(--ndk-spacing)*12);
+  }
+  .ndk\\:w-16 {
+    width: calc(var(--ndk-spacing)*16);
+  }
+  .ndk\\:w-72 {
+    width: calc(var(--ndk-spacing)*72);
+  }
+  .ndk\\:w-80 {
+    width: calc(var(--ndk-spacing)*80);
+  }
+  .ndk\\:w-auto {
+    width: auto;
+  }
+  .ndk\\:w-fit {
+    width: fit-content;
+  }
+  .ndk\\:w-full {
+    width: 100%;
+  }
+  .ndk\\:min-w-\\[8rem\\] {
+    min-width: 8rem;
+  }
+  .ndk\\:min-w-\\[var\\(--radix-select-trigger-width\\)\\] {
+    min-width: var(--radix-select-trigger-width);
+  }
+  .ndk\\:flex-1 {
+    flex: 1;
+  }
+  .ndk\\:shrink-0 {
+    flex-shrink: 0;
+  }
+  .ndk\\:caption-bottom {
+    caption-side: bottom;
+  }
+  .ndk\\:origin-\\(--radix-dropdown-menu-content-transform-origin\\) {
+    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  }
+  .ndk\\:origin-\\(--radix-popover-content-transform-origin\\) {
+    transform-origin: var(--radix-popover-content-transform-origin);
+  }
+  .ndk\\:origin-\\(--radix-select-content-transform-origin\\) {
+    transform-origin: var(--radix-select-content-transform-origin);
+  }
+  .ndk\\:animate-spin {
+    animation: var(--ndk-animate-spin);
+  }
+  .ndk\\:cursor-default {
+    cursor: default;
+  }
+  .ndk\\:scroll-my-1 {
+    scroll-margin-block: calc(var(--ndk-spacing)*1);
+  }
+  .ndk\\:flex-col {
+    flex-direction: column;
+  }
+  .ndk\\:flex-row {
+    flex-direction: row;
+  }
+  .ndk\\:place-content-center {
+    place-content: center;
+  }
+  .ndk\\:items-center {
+    align-items: center;
+  }
+  .ndk\\:justify-between {
+    justify-content: space-between;
+  }
+  .ndk\\:justify-center {
+    justify-content: center;
+  }
+  .ndk\\:justify-end {
+    justify-content: flex-end;
+  }
+  .ndk\\:gap-1 {
+    gap: calc(var(--ndk-spacing)*1);
+  }
+  .ndk\\:gap-1\\.5 {
+    gap: calc(var(--ndk-spacing)*1.5);
+  }
+  .ndk\\:gap-2 {
+    gap: calc(var(--ndk-spacing)*2);
+  }
+  .ndk\\:gap-3 {
+    gap: calc(var(--ndk-spacing)*3);
+  }
+  .ndk\\:gap-4 {
+    gap: calc(var(--ndk-spacing)*4);
+  }
+  :where(.ndk\\:space-y-3 > :not(:last-child)) {
+    --tw-space-y-reverse:0;
+    margin-block-start: calc(calc(var(--ndk-spacing)*3)*var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--ndk-spacing)*3)*calc(1 - var(--tw-space-y-reverse)));
+  }
+  .ndk\\:overflow-hidden {
+    overflow: hidden;
+  }
+  .ndk\\:overflow-x-auto {
+    overflow-x: auto;
+  }
+  .ndk\\:overflow-x-hidden {
+    overflow-x: hidden;
+  }
+  .ndk\\:overflow-y-auto {
+    overflow-y: auto;
+  }
+  .ndk\\:rounded-\\[4px\\] {
+    border-radius: 4px;
+  }
+  .ndk\\:rounded-lg {
+    border-radius: var(--ndk-radius-lg);
+  }
+  .ndk\\:rounded-md {
+    border-radius: var(--ndk-radius-md);
+  }
+  .ndk\\:rounded-sm {
+    border-radius: var(--ndk-radius-sm);
+  }
+  .ndk\\:border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .ndk\\:border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .ndk\\:border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .ndk\\:border-gray-100 {
+    border-color: var(--ndk-color-gray-100);
+  }
+  .ndk\\:border-gray-200 {
+    border-color: var(--ndk-color-gray-200);
+  }
+  .ndk\\:bg-gray-50\\/70 {
+    background-color: var(--ndk-color-gray-50);
+  }
+  @supports (color:color-mix(in lab, red, red)) {
+    .ndk\\:bg-gray-50\\/70 {
+      background-color: color-mix(in oklab, var(--ndk-color-gray-50)70%, transparent);
+    }
+  }
+  .ndk\\:bg-gray-100 {
+    background-color: var(--ndk-color-gray-100);
+  }
+  .ndk\\:bg-gray-900 {
+    background-color: var(--ndk-color-gray-900);
+  }
+  .ndk\\:bg-red-600 {
+    background-color: var(--ndk-color-red-600);
+  }
+  .ndk\\:bg-transparent {
+    background-color: #0000;
+  }
+  .ndk\\:bg-white {
+    background-color: var(--ndk-color-white);
+  }
+  .ndk\\:fill-current {
+    fill: currentColor;
+  }
+  .ndk\\:p-1 {
+    padding: calc(var(--ndk-spacing)*1);
+  }
+  .ndk\\:p-2 {
+    padding: calc(var(--ndk-spacing)*2);
+  }
+  .ndk\\:p-4 {
+    padding: calc(var(--ndk-spacing)*4);
+  }
+  .ndk\\:px-2 {
+    padding-inline: calc(var(--ndk-spacing)*2);
+  }
+  .ndk\\:px-2\\.5 {
+    padding-inline: calc(var(--ndk-spacing)*2.5);
+  }
+  .ndk\\:px-3 {
+    padding-inline: calc(var(--ndk-spacing)*3);
+  }
+  .ndk\\:px-4 {
+    padding-inline: calc(var(--ndk-spacing)*4);
+  }
+  .ndk\\:px-6 {
+    padding-inline: calc(var(--ndk-spacing)*6);
+  }
+  .ndk\\:py-0 {
+    padding-block: calc(var(--ndk-spacing)*0);
+  }
+  .ndk\\:py-1 {
+    padding-block: calc(var(--ndk-spacing)*1);
+  }
+  .ndk\\:py-1\\.5 {
+    padding-block: calc(var(--ndk-spacing)*1.5);
+  }
+  .ndk\\:py-2 {
+    padding-block: calc(var(--ndk-spacing)*2);
+  }
+  .ndk\\:py-4 {
+    padding-block: calc(var(--ndk-spacing)*4);
+  }
+  .ndk\\:pt-3 {
+    padding-top: calc(var(--ndk-spacing)*3);
+  }
+  .ndk\\:pt-4 {
+    padding-top: calc(var(--ndk-spacing)*4);
+  }
+  .ndk\\:pr-2 {
+    padding-right: calc(var(--ndk-spacing)*2);
+  }
+  .ndk\\:pr-8 {
+    padding-right: calc(var(--ndk-spacing)*8);
+  }
+  .ndk\\:pb-3 {
+    padding-bottom: calc(var(--ndk-spacing)*3);
+  }
+  .ndk\\:pl-2 {
+    padding-left: calc(var(--ndk-spacing)*2);
+  }
+  .ndk\\:pl-8 {
+    padding-left: calc(var(--ndk-spacing)*8);
+  }
+  .ndk\\:text-center {
+    text-align: center;
+  }
+  .ndk\\:text-left {
+    text-align: left;
+  }
+  .ndk\\:align-middle {
+    vertical-align: middle;
+  }
+  .ndk\\:text-sm {
+    font-size: var(--ndk-text-sm);
+    line-height: var(--tw-leading,var(--ndk-text-sm--line-height));
+  }
+  .ndk\\:text-xs {
+    font-size: var(--ndk-text-xs);
+    line-height: var(--tw-leading,var(--ndk-text-xs--line-height));
+  }
+  .ndk\\:font-medium {
+    --tw-font-weight:var(--ndk-font-weight-medium);
+    font-weight: var(--ndk-font-weight-medium);
+  }
+  .ndk\\:tracking-widest {
+    --tw-tracking:var(--ndk-tracking-widest);
+    letter-spacing: var(--ndk-tracking-widest);
+  }
+  .ndk\\:whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .ndk\\:text-current {
+    color: currentColor;
+  }
+  .ndk\\:text-gray-500 {
+    color: var(--ndk-color-gray-500);
+  }
+  .ndk\\:text-gray-900 {
+    color: var(--ndk-color-gray-900);
+  }
+  .ndk\\:text-red-500 {
+    color: var(--ndk-color-red-500);
+  }
+  .ndk\\:text-white {
+    color: var(--ndk-color-white);
+  }
+  .ndk\\:underline-offset-4 {
+    text-underline-offset: 4px;
+  }
+  .ndk\\:opacity-50 {
+    opacity: .5;
+  }
+  .ndk\\:shadow-lg {
+    --tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ndk\\:shadow-md {
+    --tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ndk\\:shadow-xs {
+    --tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ndk\\:outline-hidden {
+    --tw-outline-style:none;
+    outline-style: none;
+  }
+  @media (forced-colors: active) {
+    .ndk\\:outline-hidden {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+  .ndk\\:transition-\\[color\\,box-shadow\\] {
+    transition-property: color, box-shadow;
+    transition-timing-function: var(--tw-ease,var(--ndk-default-transition-timing-function));
+    transition-duration: var(--tw-duration,var(--ndk-default-transition-duration));
+  }
+  .ndk\\:transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease,var(--ndk-default-transition-timing-function));
+    transition-duration: var(--tw-duration,var(--ndk-default-transition-duration));
+  }
+  .ndk\\:transition-colors {
+    transition-property:
+      color,
+      background-color,
+      border-color,
+      outline-color,
+      text-decoration-color,
+      fill,
+      stroke,
+      --tw-gradient-from,
+      --tw-gradient-via,
+      --tw-gradient-to;
+    transition-timing-function: var(--tw-ease,var(--ndk-default-transition-timing-function));
+    transition-duration: var(--tw-duration,var(--ndk-default-transition-duration));
+  }
+  .ndk\\:transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease,var(--ndk-default-transition-timing-function));
+    transition-duration: var(--tw-duration,var(--ndk-default-transition-duration));
+  }
+  .ndk\\:transition-none {
+    transition-property: none;
+  }
+  .ndk\\:outline-none {
+    --tw-outline-style:none;
+    outline-style: none;
+  }
+  .ndk\\:select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  @media (hover: hover) {
+    .ndk\\:hover\\:bg-gray-50:hover {
+      background-color: var(--ndk-color-gray-50);
+    }
+    .ndk\\:hover\\:bg-gray-100:hover {
+      background-color: var(--ndk-color-gray-100);
+    }
+    .ndk\\:hover\\:bg-gray-200:hover {
+      background-color: var(--ndk-color-gray-200);
+    }
+    .ndk\\:hover\\:bg-gray-800:hover {
+      background-color: var(--ndk-color-gray-800);
+    }
+    .ndk\\:hover\\:bg-red-700:hover {
+      background-color: var(--ndk-color-red-700);
+    }
+    .ndk\\:hover\\:text-gray-900:hover {
+      color: var(--ndk-color-gray-900);
+    }
+    .ndk\\:hover\\:underline:hover {
+      text-decoration-line: underline;
+    }
+  }
+  .ndk\\:focus\\:bg-gray-50:focus {
+    background-color: var(--ndk-color-gray-50);
+  }
+  .ndk\\:focus\\:text-gray-900:focus {
+    color: var(--ndk-color-gray-900);
+  }
+  .ndk\\:focus\\:ring-2:focus {
+    --tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ndk\\:focus-visible\\:border-gray-900:focus-visible {
+    border-color: var(--ndk-color-gray-900);
+  }
+  .ndk\\:focus-visible\\:ring-\\[3px\\]:focus-visible {
+    --tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ndk\\:focus-visible\\:ring-black\\/20:focus-visible {
+    --tw-ring-color:var(--ndk-color-black);
+  }
+  @supports (color:color-mix(in lab, red, red)) {
+    .ndk\\:focus-visible\\:ring-black\\/20:focus-visible {
+      --tw-ring-color:color-mix(in oklab,var(--ndk-color-black)20%,transparent);
+    }
+  }
+  .ndk\\:disabled\\:pointer-events-none:disabled {
+    pointer-events: none;
+  }
+  .ndk\\:disabled\\:cursor-not-allowed:disabled {
+    cursor: not-allowed;
+  }
+  .ndk\\:disabled\\:opacity-50:disabled {
+    opacity: .5;
+  }
+  .ndk\\:has-\\[\\>svg\\]\\:px-2\\.5:has(> svg) {
+    padding-inline: calc(var(--ndk-spacing)*2.5);
+  }
+  .ndk\\:has-\\[\\>svg\\]\\:px-3:has(> svg) {
+    padding-inline: calc(var(--ndk-spacing)*3);
+  }
+  .ndk\\:has-\\[\\>svg\\]\\:px-4:has(> svg) {
+    padding-inline: calc(var(--ndk-spacing)*4);
+  }
+  .ndk\\:aria-invalid\\:border-red-500[aria-invalid=true] {
+    border-color: var(--ndk-color-red-500);
+  }
+  .ndk\\:aria-invalid\\:ring-red-500\\/20[aria-invalid=true] {
+    --tw-ring-color:var(--ndk-color-red-500);
+  }
+  @supports (color:color-mix(in lab, red, red)) {
+    .ndk\\:aria-invalid\\:ring-red-500\\/20[aria-invalid=true] {
+      --tw-ring-color:color-mix(in oklab,var(--ndk-color-red-500)20%,transparent);
+    }
+  }
+  .ndk\\:data-\\[disabled\\]\\:pointer-events-none[data-disabled] {
+    pointer-events: none;
+  }
+  .ndk\\:data-\\[disabled\\]\\:opacity-50[data-disabled] {
+    opacity: .5;
+  }
+  .ndk\\:data-\\[inset\\]\\:pl-8[data-inset] {
+    padding-left: calc(var(--ndk-spacing)*8);
+  }
+  .ndk\\:data-\\[placeholder\\]\\:text-gray-500[data-placeholder] {
+    color: var(--ndk-color-gray-500);
+  }
+  .ndk\\:data-\\[side\\=bottom\\]\\:translate-y-1[data-side=bottom] {
+    --tw-translate-y:calc(var(--ndk-spacing)*1);
+    translate: var(--tw-translate-x)var(--tw-translate-y);
+  }
+  .ndk\\:data-\\[side\\=left\\]\\:-translate-x-1[data-side=left] {
+    --tw-translate-x:calc(var(--ndk-spacing)*-1);
+    translate: var(--tw-translate-x)var(--tw-translate-y);
+  }
+  .ndk\\:data-\\[side\\=right\\]\\:translate-x-1[data-side=right] {
+    --tw-translate-x:calc(var(--ndk-spacing)*1);
+    translate: var(--tw-translate-x)var(--tw-translate-y);
+  }
+  .ndk\\:data-\\[side\\=top\\]\\:-translate-y-1[data-side=top] {
+    --tw-translate-y:calc(var(--ndk-spacing)*-1);
+    translate: var(--tw-translate-x)var(--tw-translate-y);
+  }
+  .ndk\\:data-\\[size\\=default\\]\\:h-9[data-size=default] {
+    height: calc(var(--ndk-spacing)*9);
+  }
+  .ndk\\:data-\\[size\\=sm\\]\\:h-8[data-size=sm] {
+    height: calc(var(--ndk-spacing)*8);
+  }
+  :is(.ndk\\:\\*\\:data-\\[slot\\=select-value\\]\\:line-clamp-1 > *)[data-slot=select-value] {
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+  :is(.ndk\\:\\*\\:data-\\[slot\\=select-value\\]\\:flex > *)[data-slot=select-value] {
+    display: flex;
+  }
+  :is(.ndk\\:\\*\\:data-\\[slot\\=select-value\\]\\:items-center > *)[data-slot=select-value] {
+    align-items: center;
+  }
+  :is(.ndk\\:\\*\\:data-\\[slot\\=select-value\\]\\:gap-2 > *)[data-slot=select-value] {
+    gap: calc(var(--ndk-spacing)*2);
+  }
+  .ndk\\:data-\\[state\\=checked\\]\\:border-gray-900[data-state=checked] {
+    border-color: var(--ndk-color-gray-900);
+  }
+  .ndk\\:data-\\[state\\=checked\\]\\:bg-gray-900[data-state=checked] {
+    background-color: var(--ndk-color-gray-900);
+  }
+  .ndk\\:data-\\[state\\=checked\\]\\:text-white[data-state=checked] {
+    color: var(--ndk-color-white);
+  }
+  .ndk\\:data-\\[state\\=closed\\]\\:animate-out[data-state=closed] {
+    animation: var(--ndk-animate-out);
+  }
+  .ndk\\:data-\\[state\\=open\\]\\:animate-in[data-state=open] {
+    animation: var(--ndk-animate-in);
+  }
+  .ndk\\:data-\\[state\\=open\\]\\:bg-gray-50[data-state=open] {
+    background-color: var(--ndk-color-gray-50);
+  }
+  .ndk\\:data-\\[state\\=open\\]\\:text-gray-900[data-state=open] {
+    color: var(--ndk-color-gray-900);
+  }
+  .ndk\\:data-\\[state\\=selected\\]\\:bg-gray-50[data-state=selected] {
+    background-color: var(--ndk-color-gray-50);
+  }
+  .ndk\\:data-\\[variant\\=destructive\\]\\:text-red-600[data-variant=destructive] {
+    color: var(--ndk-color-red-600);
+  }
+  .ndk\\:data-\\[variant\\=destructive\\]\\:focus\\:bg-red-500\\/10[data-variant=destructive]:focus {
+    background-color: var(--ndk-color-red-500);
+  }
+  @supports (color:color-mix(in lab, red, red)) {
+    .ndk\\:data-\\[variant\\=destructive\\]\\:focus\\:bg-red-500\\/10[data-variant=destructive]:focus {
+      background-color: color-mix(in oklab, var(--ndk-color-red-500)10%, transparent);
+    }
+  }
+  .ndk\\:data-\\[variant\\=destructive\\]\\:focus\\:text-red-700[data-variant=destructive]:focus {
+    color: var(--ndk-color-red-700);
+  }
+  @media (min-width: 40rem) {
+    .ndk\\:sm\\:block {
+      display: block;
+    }
+    .ndk\\:sm\\:hidden {
+      display: none;
+    }
+    .ndk\\:sm\\:pr-2\\.5 {
+      padding-right: calc(var(--ndk-spacing)*2.5);
+    }
+    .ndk\\:sm\\:pl-2\\.5 {
+      padding-left: calc(var(--ndk-spacing)*2.5);
+    }
+  }
+  @media (prefers-color-scheme: dark) {
+    .ndk\\:dark\\:border-gray-800 {
+      border-color: var(--ndk-color-gray-800);
+    }
+    .ndk\\:dark\\:bg-gray-100 {
+      background-color: var(--ndk-color-gray-100);
+    }
+    .ndk\\:dark\\:bg-gray-900,
+    .ndk\\:dark\\:bg-gray-900\\/40 {
+      background-color: var(--ndk-color-gray-900);
+    }
+    @supports (color:color-mix(in lab, red, red)) {
+      .ndk\\:dark\\:bg-gray-900\\/40 {
+        background-color: color-mix(in oklab, var(--ndk-color-gray-900)40%, transparent);
+      }
+    }
+    .ndk\\:dark\\:bg-gray-950 {
+      background-color: var(--ndk-color-gray-950);
+    }
+    .ndk\\:dark\\:bg-red-600 {
+      background-color: var(--ndk-color-red-600);
+    }
+    .ndk\\:dark\\:text-gray-100 {
+      color: var(--ndk-color-gray-100);
+    }
+    .ndk\\:dark\\:text-gray-400 {
+      color: var(--ndk-color-gray-400);
+    }
+    .ndk\\:dark\\:text-gray-900 {
+      color: var(--ndk-color-gray-900);
+    }
+    @media (hover: hover) {
+      .ndk\\:dark\\:hover\\:bg-gray-200:hover {
+        background-color: var(--ndk-color-gray-200);
+      }
+      .ndk\\:dark\\:hover\\:bg-gray-800:hover {
+        background-color: var(--ndk-color-gray-800);
+      }
+      .ndk\\:dark\\:hover\\:bg-gray-900:hover {
+        background-color: var(--ndk-color-gray-900);
+      }
+      .ndk\\:dark\\:hover\\:bg-red-500:hover {
+        background-color: var(--ndk-color-red-500);
+      }
+      .ndk\\:dark\\:hover\\:text-gray-100:hover {
+        color: var(--ndk-color-gray-100);
+      }
+    }
+    .ndk\\:dark\\:focus\\:bg-gray-900:focus {
+      background-color: var(--ndk-color-gray-900);
+    }
+    .ndk\\:dark\\:focus\\:text-gray-100:focus {
+      color: var(--ndk-color-gray-100);
+    }
+    .ndk\\:dark\\:focus-visible\\:border-gray-200:focus-visible {
+      border-color: var(--ndk-color-gray-200);
+    }
+    .ndk\\:dark\\:focus-visible\\:ring-white\\/20:focus-visible {
+      --tw-ring-color:var(--ndk-color-white);
+    }
+    @supports (color:color-mix(in lab, red, red)) {
+      .ndk\\:dark\\:focus-visible\\:ring-white\\/20:focus-visible {
+        --tw-ring-color:color-mix(in oklab,var(--ndk-color-white)20%,transparent);
+      }
+    }
+    .ndk\\:dark\\:aria-invalid\\:ring-red-500\\/30[aria-invalid=true] {
+      --tw-ring-color:var(--ndk-color-red-500);
+    }
+    @supports (color:color-mix(in lab, red, red)) {
+      .ndk\\:dark\\:aria-invalid\\:ring-red-500\\/30[aria-invalid=true] {
+        --tw-ring-color:color-mix(in oklab,var(--ndk-color-red-500)30%,transparent);
+      }
+    }
+    .ndk\\:dark\\:data-\\[placeholder\\]\\:text-gray-400[data-placeholder] {
+      color: var(--ndk-color-gray-400);
+    }
+    .ndk\\:dark\\:data-\\[state\\=checked\\]\\:border-gray-100[data-state=checked] {
+      border-color: var(--ndk-color-gray-100);
+    }
+    .ndk\\:dark\\:data-\\[state\\=checked\\]\\:bg-gray-100[data-state=checked] {
+      background-color: var(--ndk-color-gray-100);
+    }
+    .ndk\\:dark\\:data-\\[state\\=checked\\]\\:text-gray-900[data-state=checked] {
+      color: var(--ndk-color-gray-900);
+    }
+    .ndk\\:dark\\:data-\\[state\\=open\\]\\:bg-gray-900[data-state=open] {
+      background-color: var(--ndk-color-gray-900);
+    }
+    .ndk\\:dark\\:data-\\[state\\=open\\]\\:text-gray-100[data-state=open] {
+      color: var(--ndk-color-gray-100);
+    }
+    .ndk\\:dark\\:data-\\[state\\=selected\\]\\:bg-gray-900[data-state=selected] {
+      background-color: var(--ndk-color-gray-900);
+    }
+    .ndk\\:dark\\:data-\\[variant\\=destructive\\]\\:text-red-500[data-variant=destructive] {
+      color: var(--ndk-color-red-500);
+    }
+    .ndk\\:dark\\:data-\\[variant\\=destructive\\]\\:focus\\:bg-red-500\\/15[data-variant=destructive]:focus {
+      background-color: var(--ndk-color-red-500);
+    }
+    @supports (color:color-mix(in lab, red, red)) {
+      .ndk\\:dark\\:data-\\[variant\\=destructive\\]\\:focus\\:bg-red-500\\/15[data-variant=destructive]:focus {
+        background-color: color-mix(in oklab, var(--ndk-color-red-500)15%, transparent);
+      }
+    }
+    .ndk\\:dark\\:data-\\[variant\\=destructive\\]\\:focus\\:text-red-400[data-variant=destructive]:focus {
+      color: var(--ndk-color-red-400);
+    }
+  }
+  .ndk\\:\\[\\&_svg\\]\\:pointer-events-none svg {
+    pointer-events: none;
+  }
+  .ndk\\:\\[\\&_svg\\]\\:shrink-0 svg {
+    flex-shrink: 0;
+  }
+  .ndk\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 svg:not([class*=size-]) {
+    width: calc(var(--ndk-spacing)*4);
+    height: calc(var(--ndk-spacing)*4);
+  }
+  .ndk\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-gray-500 svg:not([class*=text-]) {
+    color: var(--ndk-color-gray-500);
+  }
+  @media (prefers-color-scheme: dark) {
+    .ndk\\:dark\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-gray-400 svg:not([class*=text-]) {
+      color: var(--ndk-color-gray-400);
+    }
+  }
+  .ndk\\:\\[\\&_tr\\]\\:border-b tr {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .ndk\\:\\[\\&_tr\\:last-child\\]\\:border-0 tr:last-child {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+  .ndk\\:\\[\\&\\:has\\(\\[role\\=checkbox\\]\\)\\]\\:pr-0:has([role=checkbox]) {
+    padding-right: calc(var(--ndk-spacing)*0);
+  }
+  :is(.ndk\\:\\*\\:\\[span\\]\\:last\\:flex > *):is(span):last-child {
+    display: flex;
+  }
+  :is(.ndk\\:\\*\\:\\[span\\]\\:last\\:items-center > *):is(span):last-child {
+    align-items: center;
+  }
+  :is(.ndk\\:\\*\\:\\[span\\]\\:last\\:gap-2 > *):is(span):last-child {
+    gap: calc(var(--ndk-spacing)*2);
+  }
+  :is(.ndk\\:data-\\[variant\\=destructive\\]\\:\\*\\:\\[svg\\]\\:\\!text-red-600[data-variant=destructive] > *):is(svg) {
+    color: var(--ndk-color-red-600) !important;
+  }
+  @media (prefers-color-scheme: dark) {
+    :is(.ndk\\:dark\\:data-\\[variant\\=destructive\\]\\:\\*\\:\\[svg\\]\\:\\!text-red-500[data-variant=destructive] > *):is(svg) {
+      color: var(--ndk-color-red-500) !important;
+    }
+  }
+  .ndk\\:\\[\\&\\>\\[role\\=checkbox\\]\\]\\:translate-y-\\[2px\\] > [role=checkbox] {
+    --tw-translate-y:2px;
+    translate: var(--tw-translate-x)var(--tw-translate-y);
+  }
+  .ndk\\:\\[\\&\\>tr\\]\\:last\\:border-b-0 > tr:last-child {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0;
+  }
+}
+@keyframes animate-in {
+  0% {
+    opacity: 0;
+    transform: scale(.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes animate-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(.95);
+  }
+}
+@property --tw-space-y-reverse { syntax:"*";inherits:false;initial-value:0 }
+@property --tw-border-style { syntax:"*";inherits:false;initial-value:solid }
+@property --tw-font-weight { syntax:"*";inherits:false }
+@property --tw-tracking { syntax:"*";inherits:false }
+@property --tw-shadow { syntax:"*";inherits:false;initial-value:0 0 #0000 }
+@property --tw-shadow-color { syntax:"*";inherits:false }
+@property --tw-shadow-alpha { syntax:"<percentage>";inherits:false;initial-value:100% }
+@property --tw-inset-shadow { syntax:"*";inherits:false;initial-value:0 0 #0000 }
+@property --tw-inset-shadow-color { syntax:"*";inherits:false }
+@property --tw-inset-shadow-alpha { syntax:"<percentage>";inherits:false;initial-value:100% }
+@property --tw-ring-color { syntax:"*";inherits:false }
+@property --tw-ring-shadow { syntax:"*";inherits:false;initial-value:0 0 #0000 }
+@property --tw-inset-ring-color { syntax:"*";inherits:false }
+@property --tw-inset-ring-shadow { syntax:"*";inherits:false;initial-value:0 0 #0000 }
+@property --tw-ring-inset { syntax:"*";inherits:false }
+@property --tw-ring-offset-width { syntax:"<length>";inherits:false;initial-value:0 }
+@property --tw-ring-offset-color { syntax:"*";inherits:false;initial-value:#fff }
+@property --tw-ring-offset-shadow { syntax:"*";inherits:false;initial-value:0 0 #0000 }
+@property --tw-translate-x { syntax:"*";inherits:false;initial-value:0 }
+@property --tw-translate-y { syntax:"*";inherits:false;initial-value:0 }
+@property --tw-translate-z { syntax:"*";inherits:false;initial-value:0 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+`);
+
 // src/server/utils.ts
 var isProvided = (value) => value !== void 0 && value !== null && value !== "";
 var getValueByPath = (obj, path) => {
@@ -526,9 +1739,45 @@ var useDataKit = (props) => {
       return next;
     });
   }, []);
+  const itemUpdate = useCallback((props2) => {
+    setItems((prev) => {
+      if ("index" in props2) {
+        const { index, data } = props2;
+        if (index < 0 || index >= prev.length) return prev;
+        const next = [...prev];
+        next[index] = { ...next[index], ...data };
+        return next;
+      } else {
+        const { id, data } = props2;
+        const index = prev.findIndex((item) => {
+          const itemWithId = item;
+          return itemWithId.id === id;
+        });
+        if (index === -1) return prev;
+        const next = [...prev];
+        next[index] = { ...next[index], ...data };
+        return next;
+      }
+    });
+  }, []);
   const deleteItemAt = useCallback((index) => {
     setItems((prev) => prev.filter((_, i) => i !== index));
   }, []);
+  const itemDelete = useCallback((props2) => {
+    setItems((prev) => {
+      if ("index" in props2) {
+        const { index } = props2;
+        if (index < 0 || index >= prev.length) return prev;
+        return prev.filter((_, i) => i !== index);
+      } else {
+        const { id } = props2;
+        return prev.filter((item) => {
+          const itemWithId = item;
+          return itemWithId.id !== id;
+        });
+      }
+    });
+  }, []);
   const itemPush = useCallback((item, position = 1) => {
     setItems((prev) => position === 0 ? [item, ...prev] : [...prev, item]);
   }, []);
@@ -617,7 +1866,9 @@ var useDataKit = (props) => {
       getInput,
       setItems: setItemsAction,
       setItemAt,
+      itemUpdate,
       deleteItemAt,
+      itemDelete,
       itemPush,
       deleteBulk
     }
@@ -748,11 +1999,11 @@ var {
   Context: DefaultDataKitContext
 } = createDataKitContext();
 function Table({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { "data-slot": "table-container", className: "ndk:relative ndk:w-full ndk:overflow-x-auto", children: /* @__PURE__ */ jsx(
     "table",
     {
       "data-slot": "table",
-      className: cn("w-full caption-bottom text-sm", className),
+      className: cn("ndk:w-full ndk:caption-bottom ndk:text-sm", className),
       ...props
     }
   ) });
@@ -762,7 +2013,7 @@ function TableHeader({ className, ...props }) {
     "thead",
     {
       "data-slot": "table-header",
-      className: cn("[&_tr]:border-b", className),
+      className: cn("ndk:[&_tr]:border-b", className),
       ...props
     }
   );
@@ -772,7 +2023,7 @@ function TableBody({ className, ...props }) {
     "tbody",
     {
       "data-slot": "table-body",
-      className: cn("[&_tr:last-child]:border-0", className),
+      className: cn("ndk:[&_tr:last-child]:border-0", className),
       ...props
     }
   );
@@ -783,7 +2034,7 @@ function TableRow({ className, ...props }) {
     {
       "data-slot": "table-row",
       className: cn(
-        "hover:bg-gray-50 dark:hover:bg-gray-900 data-[state=selected]:bg-gray-50 dark:data-[state=selected]:bg-gray-900 border-b border-gray-100 dark:border-gray-800 transition-colors",
+        "ndk:hover:bg-gray-50 ndk:dark:hover:bg-gray-900 ndk:data-[state=selected]:bg-gray-50 ndk:dark:data-[state=selected]:bg-gray-900 ndk:border-b ndk:border-gray-100 ndk:dark:border-gray-800 ndk:transition-colors",
         className
       ),
       ...props
@@ -796,7 +2047,7 @@ function TableHead({ className, ...props }) {
     {
       "data-slot": "table-head",
       className: cn(
-        "text-gray-900 dark:text-gray-100 h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "ndk:text-gray-900 ndk:dark:text-gray-100 ndk:h-10 ndk:px-2 ndk:text-left ndk:align-middle ndk:font-medium ndk:whitespace-nowrap ndk:[&:has([role=checkbox])]:pr-0 ndk:[&>[role=checkbox]]:translate-y-[2px]",
         className
       ),
       ...props
@@ -809,7 +2060,7 @@ function TableCell({ className, ...props }) {
     {
       "data-slot": "table-cell",
       className: cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "ndk:p-2 ndk:align-middle ndk:whitespace-nowrap ndk:[&:has([role=checkbox])]:pr-0 ndk:[&>[role=checkbox]]:translate-y-[2px]",
         className
       ),
       ...props
@@ -825,7 +2076,7 @@ function Checkbox({
     {
       "data-slot": "checkbox",
       className: cn(
-        "peer border-gray-200 bg-white text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-100 data-[state=checked]:bg-gray-900 data-[state=checked]:text-white dark:data-[state=checked]:bg-gray-100 dark:data-[state=checked]:text-gray-900 data-[state=checked]:border-gray-900 dark:data-[state=checked]:border-gray-100 focus-visible:border-gray-900 dark:focus-visible:border-gray-200 focus-visible:ring-black/20 dark:focus-visible:ring-white/20 aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/30 aria-invalid:border-red-500 size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "ndk:peer ndk:border-gray-200 ndk:bg-white ndk:text-gray-900 ndk:dark:border-gray-800 ndk:dark:bg-gray-950 ndk:dark:text-gray-100 ndk:data-[state=checked]:bg-gray-900 ndk:data-[state=checked]:text-white ndk:dark:data-[state=checked]:bg-gray-100 ndk:dark:data-[state=checked]:text-gray-900 ndk:data-[state=checked]:border-gray-900 ndk:dark:data-[state=checked]:border-gray-100 ndk:focus-visible:border-gray-900 ndk:dark:focus-visible:border-gray-200 ndk:focus-visible:ring-black/20 ndk:dark:focus-visible:ring-white/20 ndk:aria-invalid:ring-red-500/20 ndk:dark:aria-invalid:ring-red-500/30 ndk:aria-invalid:border-red-500 ndk:size-4 ndk:shrink-0 ndk:rounded-[4px] ndk:border ndk:shadow-xs ndk:transition-shadow ndk:outline-none ndk:focus-visible:ring-[3px] ndk:disabled:cursor-not-allowed ndk:disabled:opacity-50",
         className
       ),
       ...props,
@@ -833,8 +2084,8 @@ function Checkbox({
         CheckboxPrimitive.Indicator,
         {
           "data-slot": "checkbox-indicator",
-          className: "grid place-content-center text-current transition-none",
-          children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+          className: "ndk:grid ndk:place-content-center ndk:text-current ndk:transition-none",
+          children: /* @__PURE__ */ jsx(CheckIcon, { className: "ndk:size-3.5" })
         }
       )
     }
@@ -860,7 +2111,7 @@ function PopoverContent({
       align,
       sideOffset,
       className: cn(
-        "bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-gray-200 dark:border-gray-800 p-4 shadow-md outline-hidden",
+        "ndk:bg-white ndk:text-gray-900 ndk:dark:bg-gray-950 ndk:dark:text-gray-100 ndk:data-[state=open]:animate-in ndk:data-[state=closed]:animate-out ndk:data-[state=closed]:fade-out-0 ndk:data-[state=open]:fade-in-0 ndk:data-[state=closed]:zoom-out-95 ndk:data-[state=open]:zoom-in-95 ndk:data-[side=bottom]:slide-in-from-top-2 ndk:data-[side=left]:slide-in-from-right-2 ndk:data-[side=right]:slide-in-from-left-2 ndk:data-[side=top]:slide-in-from-bottom-2 ndk:z-50 ndk:w-72 ndk:origin-(--radix-popover-content-transform-origin) ndk:rounded-md ndk:border ndk:border-gray-200 ndk:dark:border-gray-800 ndk:p-4 ndk:shadow-md ndk:outline-hidden",
         className
       ),
       ...props
@@ -895,7 +2146,7 @@ function DropdownMenuContent({
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn(
-        "bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-gray-200 dark:border-gray-800 p-1 shadow-md",
+        "ndk:bg-white ndk:text-gray-900 ndk:dark:bg-gray-950 ndk:dark:text-gray-100 ndk:data-[state=open]:animate-in ndk:data-[state=closed]:animate-out ndk:data-[state=closed]:fade-out-0 ndk:data-[state=open]:fade-in-0 ndk:data-[state=closed]:zoom-out-95 ndk:data-[state=open]:zoom-in-95 ndk:data-[side=bottom]:slide-in-from-top-2 ndk:data-[side=left]:slide-in-from-right-2 ndk:data-[side=right]:slide-in-from-left-2 ndk:data-[side=top]:slide-in-from-bottom-2 ndk:z-50 ndk:max-h-(--radix-dropdown-menu-content-available-height) ndk:min-w-[8rem] ndk:origin-(--radix-dropdown-menu-content-transform-origin) ndk:overflow-x-hidden ndk:overflow-y-auto ndk:rounded-md ndk:border ndk:border-gray-200 ndk:dark:border-gray-800 ndk:p-1 ndk:shadow-md",
         className
       ),
       ...props
@@ -915,7 +2166,7 @@ function DropdownMenuItem({
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "focus:bg-gray-50 dark:focus:bg-gray-900 focus:text-gray-900 dark:focus:text-gray-100 data-[variant=destructive]:text-red-600 dark:data-[variant=destructive]:text-red-500 data-[variant=destructive]:focus:bg-red-500/10 dark:data-[variant=destructive]:focus:bg-red-500/15 data-[variant=destructive]:focus:text-red-700 dark:data-[variant=destructive]:focus:text-red-400 data-[variant=destructive]:*:[svg]:!text-red-600 dark:data-[variant=destructive]:*:[svg]:!text-red-500 [&_svg:not([class*='text-'])]:text-gray-500 dark:[&_svg:not([class*='text-'])]:text-gray-400 relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "ndk:focus:bg-gray-50 ndk:dark:focus:bg-gray-900 ndk:focus:text-gray-900 ndk:dark:focus:text-gray-100 ndk:data-[variant=destructive]:text-red-600 ndk:dark:data-[variant=destructive]:text-red-500 ndk:data-[variant=destructive]:focus:bg-red-500/10 ndk:dark:data-[variant=destructive]:focus:bg-red-500/15 ndk:data-[variant=destructive]:focus:text-red-700 ndk:dark:data-[variant=destructive]:focus:text-red-400 ndk:data-[variant=destructive]:*:[svg]:!text-red-600 ndk:dark:data-[variant=destructive]:*:[svg]:!text-red-500 ndk:[&_svg:not([class*='text-'])]:text-gray-500 ndk:dark:[&_svg:not([class*='text-'])]:text-gray-400 ndk:relative ndk:flex ndk:cursor-default ndk:items-center ndk:gap-2 ndk:rounded-sm ndk:px-2 ndk:py-1.5 ndk:text-sm ndk:outline-hidden ndk:select-none ndk:data-[disabled]:pointer-events-none ndk:data-[disabled]:opacity-50 ndk:data-[inset]:pl-8 ndk:[&_svg]:pointer-events-none ndk:[&_svg]:shrink-0 ndk:[&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -930,30 +2181,30 @@ function DropdownMenuSeparator({
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
-      className: cn("bg-gray-100 dark:bg-gray-900 -mx-1 my-1 h-px", className),
+      className: cn("ndk:bg-gray-100 ndk:dark:bg-gray-900 ndk:-mx-1 ndk:my-1 ndk:h-px", className),
       ...props
     }
   );
 }
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-black/20 dark:focus-visible:ring-white/20 focus-visible:ring-[3px] aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/30 aria-invalid:border-red-500",
+  "ndk:inline-flex ndk:items-center ndk:justify-center ndk:gap-2 ndk:whitespace-nowrap ndk:rounded-md ndk:text-sm ndk:font-medium ndk:transition-all ndk:disabled:pointer-events-none ndk:disabled:opacity-50 ndk:[&_svg]:pointer-events-none ndk:[&_svg:not([class*='size-'])]:size-4 ndk:shrink-0 ndk:[&_svg]:shrink-0 ndk:outline-none ndk:focus-visible:ring-black/20 ndk:dark:focus-visible:ring-white/20 ndk:focus-visible:ring-[3px] ndk:aria-invalid:ring-red-500/20 ndk:dark:aria-invalid:ring-red-500/30 ndk:aria-invalid:border-red-500",
   {
     variants: {
       variant: {
-        default: "bg-gray-900 text-white hover:bg-gray-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200",
-        destructive: "bg-red-600 text-white hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-500",
-        outline: "border border-gray-200 bg-white text-gray-900 shadow-xs hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-100 dark:hover:bg-gray-900",
-        secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800",
-        ghost: "hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-900 dark:hover:text-gray-100",
-        link: "text-gray-900 underline-offset-4 hover:underline dark:text-gray-100"
+        default: "ndk:bg-gray-900 ndk:text-white ndk:hover:bg-gray-800 ndk:dark:bg-gray-100 ndk:dark:text-gray-900 ndk:dark:hover:bg-gray-200",
+        destructive: "ndk:bg-red-600 ndk:text-white ndk:hover:bg-red-700 ndk:dark:bg-red-600 ndk:dark:hover:bg-red-500",
+        outline: "ndk:border ndk:border-gray-200 ndk:bg-white ndk:text-gray-900 ndk:shadow-xs ndk:hover:bg-gray-50 ndk:dark:border-gray-800 ndk:dark:bg-gray-950 ndk:dark:text-gray-100 ndk:dark:hover:bg-gray-900",
+        secondary: "ndk:bg-gray-100 ndk:text-gray-900 ndk:hover:bg-gray-200 ndk:dark:bg-gray-900 ndk:dark:text-gray-100 ndk:dark:hover:bg-gray-800",
+        ghost: "ndk:hover:bg-gray-100 ndk:hover:text-gray-900 ndk:dark:hover:bg-gray-900 ndk:dark:hover:text-gray-100",
+        link: "ndk:text-gray-900 ndk:underline-offset-4 ndk:hover:underline ndk:dark:text-gray-100"
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
+        default: "ndk:h-9 ndk:px-4 ndk:py-2 ndk:has-[>svg]:px-3",
+        sm: "ndk:h-8 ndk:rounded-md ndk:gap-1.5 ndk:px-3 ndk:has-[>svg]:px-2.5",
+        lg: "ndk:h-10 ndk:rounded-md ndk:px-6 ndk:has-[>svg]:px-4",
+        icon: "ndk:size-9",
+        "icon-sm": "ndk:size-8",
+        "icon-lg": "ndk:size-10"
       }
     },
     defaultVariants: {
@@ -990,7 +2241,7 @@ function Pagination({ className, ...props }) {
       role: "navigation",
       "aria-label": "pagination",
       "data-slot": "pagination",
-      className: cn("flex", className),
+      className: cn("ndk:flex", className),
       ...props
     }
   );
@@ -1003,7 +2254,7 @@ function PaginationContent({
     "ul",
     {
       "data-slot": "pagination-content",
-      className: cn("flex flex-row items-center gap-1", className),
+      className: cn("ndk:flex ndk:flex-row ndk:items-center ndk:gap-1", className),
       ...props
     }
   );
@@ -1045,11 +2296,11 @@ function PaginationPrevious({
     {
       "aria-label": "Go to previous page",
       size: "default",
-      className: cn("gap-1 px-2.5 sm:pl-2.5", className),
+      className: cn("ndk:gap-1 ndk:px-2.5 ndk:sm:pl-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: "Previous" })
+        /* @__PURE__ */ jsx(ChevronLeft, { className: "ndk:size-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "ndk:hidden ndk:sm:block", children: "Previous" })
       ]
     }
   );
@@ -1063,11 +2314,11 @@ function PaginationNext({
     {
       "aria-label": "Go to next page",
       size: "default",
-      className: cn("gap-1 px-2.5 sm:pr-2.5", className),
+      className: cn("ndk:gap-1 ndk:px-2.5 ndk:sm:pr-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: "Next" }),
-        /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+        /* @__PURE__ */ jsx("span", { className: "ndk:hidden ndk:sm:block", children: "Next" }),
+        /* @__PURE__ */ jsx(ChevronRight, { className: "ndk:size-4", "aria-hidden": "true" })
       ]
     }
   );
@@ -1081,11 +2332,11 @@ function PaginationEllipsis({
     {
       "aria-hidden": "true",
       "data-slot": "pagination-ellipsis",
-      className: cn("flex size-9 items-center justify-center", className),
+      className: cn("ndk:flex ndk:size-9 ndk:items-center ndk:justify-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ jsx(MoreHorizontal, { className: "ndk:size-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "ndk:sr-only", children: "More pages" })
       ]
     }
   );
@@ -1112,13 +2363,13 @@ function SelectTrigger({
       "data-slot": "select-trigger",
       "data-size": size,
       className: cn(
-        "border-gray-200 dark:border-gray-800 data-[placeholder]:text-gray-500 dark:data-[placeholder]:text-gray-400 [&_svg:not([class*='text-'])]:text-gray-500 dark:[&_svg:not([class*='text-'])]:text-gray-400 focus-visible:border-gray-900 dark:focus-visible:border-gray-200 focus-visible:ring-black/20 dark:focus-visible:ring-white/20 aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/30 aria-invalid:border-red-500 bg-white dark:bg-gray-950 hover:bg-gray-50 dark:hover:bg-gray-900 flex w-fit items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "ndk:border-gray-200 ndk:dark:border-gray-800 ndk:data-[placeholder]:text-gray-500 ndk:dark:data-[placeholder]:text-gray-400 ndk:[&_svg:not([class*='text-'])]:text-gray-500 ndk:dark:[&_svg:not([class*='text-'])]:text-gray-400 ndk:focus-visible:border-gray-900 ndk:dark:focus-visible:border-gray-200 ndk:focus-visible:ring-black/20 ndk:dark:focus-visible:ring-white/20 ndk:aria-invalid:ring-red-500/20 ndk:dark:aria-invalid:ring-red-500/30 ndk:aria-invalid:border-red-500 ndk:bg-white ndk:dark:bg-gray-950 ndk:hover:bg-gray-50 ndk:dark:hover:bg-gray-900 ndk:flex ndk:w-fit ndk:items-center ndk:justify-between ndk:gap-2 ndk:rounded-md ndk:border ndk:px-3 ndk:py-2 ndk:text-sm ndk:whitespace-nowrap ndk:shadow-xs ndk:transition-[color,box-shadow] ndk:outline-none ndk:focus-visible:ring-[3px] ndk:disabled:cursor-not-allowed ndk:disabled:opacity-50 ndk:data-[size=default]:h-9 ndk:data-[size=sm]:h-8 ndk:*:data-[slot=select-value]:line-clamp-1 ndk:*:data-[slot=select-value]:flex ndk:*:data-[slot=select-value]:items-center ndk:*:data-[slot=select-value]:gap-2 ndk:[&_svg]:pointer-events-none ndk:[&_svg]:shrink-0 ndk:[&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ndk:size-4 ndk:opacity-50" }) })
       ]
     }
   );
@@ -1136,8 +2387,8 @@ function SelectContent({
     {
       "data-slot": "select-content",
       className: cn(
-        "bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-gray-200 dark:border-gray-800 shadow-md",
-        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        "ndk:bg-white ndk:text-gray-900 ndk:dark:bg-gray-950 ndk:dark:text-gray-100 ndk:data-[state=open]:animate-in ndk:data-[state=closed]:animate-out ndk:data-[state=closed]:fade-out-0 ndk:data-[state=open]:fade-in-0 ndk:data-[state=closed]:zoom-out-95 ndk:data-[state=open]:zoom-in-95 ndk:data-[side=bottom]:slide-in-from-top-2 ndk:data-[side=left]:slide-in-from-right-2 ndk:data-[side=right]:slide-in-from-left-2 ndk:data-[side=top]:slide-in-from-bottom-2 ndk:relative ndk:z-50 ndk:max-h-(--radix-select-content-available-height) ndk:min-w-[8rem] ndk:origin-(--radix-select-content-transform-origin) ndk:overflow-x-hidden ndk:overflow-y-auto ndk:rounded-md ndk:border ndk:border-gray-200 ndk:dark:border-gray-800 ndk:shadow-md",
+        position === "popper" && "ndk:data-[side=bottom]:translate-y-1 ndk:data-[side=left]:-translate-x-1 ndk:data-[side=right]:translate-x-1 ndk:data-[side=top]:-translate-y-1",
         className
       ),
       position,
@@ -1149,8 +2400,8 @@ function SelectContent({
           SelectPrimitive.Viewport,
           {
             className: cn(
-              "p-1",
-              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+              "ndk:p-1",
+              position === "popper" && "ndk:h-[var(--radix-select-trigger-height)] ndk:w-full ndk:min-w-[var(--radix-select-trigger-width)] ndk:scroll-my-1"
             ),
             children
           }
@@ -1170,7 +2421,7 @@ function SelectItem({
     {
       "data-slot": "select-item",
       className: cn(
-        "focus:bg-gray-50 dark:focus:bg-gray-900 focus:text-gray-900 dark:focus:text-gray-100 [&_svg:not([class*='text-'])]:text-gray-500 dark:[&_svg:not([class*='text-'])]:text-gray-400 relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "ndk:focus:bg-gray-50 ndk:dark:focus:bg-gray-900 ndk:focus:text-gray-900 ndk:dark:focus:text-gray-100 ndk:[&_svg:not([class*='text-'])]:text-gray-500 ndk:dark:[&_svg:not([class*='text-'])]:text-gray-400 ndk:relative ndk:flex ndk:w-full ndk:cursor-default ndk:items-center ndk:gap-2 ndk:rounded-sm ndk:py-1.5 ndk:pr-8 ndk:pl-2 ndk:text-sm ndk:outline-hidden ndk:select-none ndk:data-[disabled]:pointer-events-none ndk:data-[disabled]:opacity-50 ndk:[&_svg]:pointer-events-none ndk:[&_svg]:shrink-0 ndk:[&_svg:not([class*='size-'])]:size-4 ndk:*:[span]:last:flex ndk:*:[span]:last:items-center ndk:*:[span]:last:gap-2",
         className
       ),
       ...props,
@@ -1179,8 +2430,8 @@ function SelectItem({
           "span",
           {
             "data-slot": "select-item-indicator",
-            className: "absolute right-2 flex size-3.5 items-center justify-center",
-            children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+            className: "ndk:absolute ndk:right-2 ndk:flex ndk:size-3.5 ndk:items-center ndk:justify-center",
+            children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "ndk:size-4" }) })
           }
         ),
         /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
@@ -1197,11 +2448,11 @@ function SelectScrollUpButton({
     {
       "data-slot": "select-scroll-up-button",
       className: cn(
-        "flex cursor-default items-center justify-center py-1",
+        "ndk:flex ndk:cursor-default ndk:items-center ndk:justify-center ndk:py-1",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "ndk:size-4" })
     }
   );
 }
@@ -1214,11 +2465,11 @@ function SelectScrollDownButton({
     {
       "data-slot": "select-scroll-down-button",
       className: cn(
-        "flex cursor-default items-center justify-center py-1",
+        "ndk:flex ndk:cursor-default ndk:items-center ndk:justify-center ndk:py-1",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ndk:size-4" })
     }
   );
 }
@@ -1238,7 +2489,8 @@ var DataKitRoot = (props) => {
     refetchInterval,
     memory: memoryMode = "memory",
     pagination: paginationType = "NUMBER",
-    controller
+    controller,
+    sorts: defaultSorts = []
   } = props;
   const tableRef = useRef(null);
   const intervalRef = useRef(null);
@@ -1270,12 +2522,17 @@ var DataKitRoot = (props) => {
     initial: {
       limit: limitConfig?.default ?? 10,
       query: query ?? {},
-      sorts: columns.reduce((acc, col) => {
-        if (col.sortable && col.sortable.default !== 0) {
-          acc.push({ path: col.sortable.path, value: col.sortable.default });
-        }
-        return acc;
-      }, []),
+      sorts: (() => {
+        const columnSorts = columns.reduce((acc, col) => {
+          if (col.sortable && col.sortable.default !== 0) {
+            acc.push({ path: col.sortable.path, value: col.sortable.default });
+          }
+          return acc;
+        }, []);
+        const columnPaths = new Set(columnSorts.map((s) => s.path));
+        const additionalSorts = defaultSorts.filter((s) => !columnPaths.has(s.path));
+        return [...columnSorts, ...additionalSorts];
+      })(),
       filter: filters.reduce((acc, f) => {
         if (f.defaultValue !== void 0) acc[f.id] = f.defaultValue;
         return acc;
@@ -1346,6 +2603,8 @@ var DataKitRoot = (props) => {
     if (controller) {
       controller.current = {
         itemPush: dataKit.actions.itemPush,
+        itemUpdate: dataKit.actions.itemUpdate,
+        itemDelete: dataKit.actions.itemDelete,
         refetchData: dataKit.actions.refresh,
         deleteBulk: dataKit.actions.deleteBulk,
         getSelectedItems: () => dataKit.items.filter((item) => selection.isSelected(item.id)),
@@ -1380,20 +2639,20 @@ var DataKitRoot = (props) => {
   useEffect(() => {
     selection.deselectAll();
   }, [dataKit.items.length]);
-  return /* @__PURE__ */ jsxs("div", { ref: tableRef, className: `space-y-3 ${className ?? ""}`, children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-2", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: filters.length > 0 && /* @__PURE__ */ jsxs(Popover, { open: isFilterOpen, onOpenChange: setIsFilterOpen, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: tableRef, className: `ndk:space-y-3 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "ndk:flex ndk:items-center ndk:justify-between ndk:gap-2", children: /* @__PURE__ */ jsx("div", { className: "ndk:flex ndk:items-center ndk:gap-2", children: filters.length > 0 && /* @__PURE__ */ jsxs(Popover, { open: isFilterOpen, onOpenChange: setIsFilterOpen, children: [
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
-        /* @__PURE__ */ jsx(Filter, { className: "mr-1.5 size-4" }),
+        /* @__PURE__ */ jsx(Filter, { className: "ndk:mr-1.5 ndk:size-4" }),
         "Filters"
       ] }) }),
-      /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "w-80", container: overlayContainer, children: [
-        /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: filters.map((f) => /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
-          /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: f.label }),
+      /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "ndk:w-80", container: overlayContainer, children: [
+        /* @__PURE__ */ jsx("div", { className: "ndk:grid ndk:gap-3", children: filters.map((f) => /* @__PURE__ */ jsxs("div", { className: "ndk:grid ndk:gap-1.5", children: [
+          /* @__PURE__ */ jsx("label", { className: "ndk:text-sm ndk:font-medium", children: f.label }),
           f.type === "TEXT" && /* @__PURE__ */ jsx(
             "input",
             {
               type: "text",
-              className: "h-9 w-full rounded-md border bg-transparent px-3 text-sm outline-none focus:ring-2 focus:ring-ring",
+              className: "ndk:h-9 ndk:w-full ndk:rounded-md ndk:border ndk:bg-transparent ndk:px-3 ndk:text-sm ndk:outline-none ndk:focus:ring-2 ndk:focus:ring-ring",
               placeholder: f.placeholder,
               value: dataKit.filter[f.id] ?? "",
               onChange: (e) => dataKit.actions.setFilter(f.id, e.target.value)
@@ -1413,7 +2672,7 @@ var DataKitRoot = (props) => {
               ]
             }
           ),
-          f.type === "BOOLEAN" && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx(
+          f.type === "BOOLEAN" && /* @__PURE__ */ jsx("div", { className: "ndk:flex ndk:items-center ndk:justify-between", children: /* @__PURE__ */ jsx(
             Checkbox,
             {
               checked: Boolean(dataKit.filter[f.id]),
@@ -1421,15 +2680,15 @@ var DataKitRoot = (props) => {
             }
           ) })
         ] }, f.id)) }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-between border-t pt-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ndk:mt-4 ndk:flex ndk:justify-between ndk:border-t ndk:pt-3", children: [
           /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: handleResetFilters, children: "Reset" }),
           /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => setIsFilterOpen(false), children: "Done" })
         ] })
       ] })
     ] }) }) }),
-    /* @__PURE__ */ jsx("div", { className: `overflow-hidden border border-gray-200 dark:border-gray-800 ${bordered === "rounded" ? "rounded-lg" : bordered ? "" : "rounded-lg"}`, children: /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx("div", { className: `ndk:overflow-hidden ndk:border ndk:border-gray-200 ndk:dark:border-gray-800 ${bordered === "rounded" ? "ndk:rounded-lg" : bordered ? "" : "ndk:rounded-lg"}`, children: /* @__PURE__ */ jsxs(Table, { children: [
       /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-        selectable?.enabled && /* @__PURE__ */ jsx(TableHead, { className: "w-12", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        selectable?.enabled && /* @__PURE__ */ jsx(TableHead, { className: "ndk:w-12", children: /* @__PURE__ */ jsxs("div", { className: "ndk:flex ndk:items-center ndk:gap-2", children: [
           /* @__PURE__ */ jsx(
             Checkbox,
             {
@@ -1443,9 +2702,9 @@ var DataKitRoot = (props) => {
               {
                 variant: "ghost",
                 size: "icon",
-                className: "size-6",
+                className: "ndk:size-6",
                 disabled: selectedCount === 0 || !!actionLoading,
-                children: actionLoading ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" })
+                children: actionLoading ? /* @__PURE__ */ jsx(Loader2, { className: "ndk:size-4 ndk:animate-spin" }) : /* @__PURE__ */ jsx(MoreHorizontal, { className: "ndk:size-4" })
               }
             ) }),
             /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", container: overlayContainer, children: Object.entries(selectable.actions).map(
@@ -1461,20 +2720,20 @@ var DataKitRoot = (props) => {
           {
             variant: "ghost",
             size: "sm",
-            className: "-ml-4 h-auto py-0",
+            className: "ndk:-ml-4 ndk:h-auto ndk:py-0",
             onClick: () => handleSort(col.sortable.path),
             children: [
               React2__default.isValidElement(col.head) ? col.head.props.children : col.head,
-              getSortFor(col.sortable.path) === 1 && /* @__PURE__ */ jsx(ArrowUp, { className: "ml-1 size-4" }),
-              getSortFor(col.sortable.path) === -1 && /* @__PURE__ */ jsx(ArrowDown, { className: "ml-1 size-4" })
+              getSortFor(col.sortable.path) === 1 && /* @__PURE__ */ jsx(ArrowUp, { className: "ndk:ml-1 ndk:size-4" }),
+              getSortFor(col.sortable.path) === -1 && /* @__PURE__ */ jsx(ArrowDown, { className: "ndk:ml-1 ndk:size-4" })
             ]
           }
         ) }) : col.head }, idx))
       ] }) }),
-      /* @__PURE__ */ jsx(TableBody, { children: dataKit.state.isLoading ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan, className: "h-24 text-center", children: /* @__PURE__ */ jsx(Loader2, { className: "mx-auto size-5 animate-spin" }) }) }) : dataKit.state.error ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsxs(TableCell, { colSpan, className: "h-24 text-center text-red-500", children: [
+      /* @__PURE__ */ jsx(TableBody, { children: dataKit.state.isLoading ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan, className: "ndk:h-24 ndk:text-center", children: /* @__PURE__ */ jsx(Loader2, { className: "ndk:mx-auto ndk:size-5 ndk:animate-spin" }) }) }) : dataKit.state.error ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsxs(TableCell, { colSpan, className: "ndk:h-24 ndk:text-center ndk:text-red-500", children: [
         "Error: ",
         dataKit.state.error.message
-      ] }) }) : dataKit.items.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan, className: "h-24 text-center text-muted-foreground", children: "No results found." }) }) : dataKit.items.map((item, idx) => {
+      ] }) }) : dataKit.items.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan, className: "ndk:h-24 ndk:text-center ndk:text-muted-foreground", children: "No results found." }) }) : dataKit.items.map((item, idx) => {
         const rowId = item.id ?? idx;
         return /* @__PURE__ */ jsxs(TableRow, { children: [
           selectable?.enabled && /* @__PURE__ */ jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
@@ -1497,24 +2756,24 @@ var DataKitRoot = (props) => {
         ] }, rowId);
       }) })
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ndk:flex ndk:items-center ndk:gap-4 ndk:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ndk:flex ndk:items-center ndk:gap-3", children: [
         /* @__PURE__ */ jsxs(Select, { value: String(dataKit.limit), onValueChange: (v) => dataKit.actions.setLimit(Number(v)), disabled: dataKit.state.isLoading, children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-16", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "ndk:w-16", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
           /* @__PURE__ */ jsx(SelectContent, { container: overlayContainer, children: limitOptions.map((v) => /* @__PURE__ */ jsx(SelectItem, { value: String(v), children: v }, v)) })
         ] }),
-        /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground whitespace-nowrap", children: [
+        /* @__PURE__ */ jsxs("p", { className: "ndk:text-sm ndk:text-muted-foreground ndk:whitespace-nowrap", children: [
           "Page ",
           dataKit.page,
           " of ",
           pagination.totalPages
         ] }),
-        selectable?.enabled && selectedCount > 0 && /* @__PURE__ */ jsxs("p", { className: "text-sm text-foreground", children: [
+        selectable?.enabled && selectedCount > 0 && /* @__PURE__ */ jsxs("p", { className: "ndk:text-sm ndk:text-foreground", children: [
           selectedCount,
           " selected"
         ] })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: paginationType === "SIMPLE" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "ndk:flex ndk:justify-end", children: paginationType === "SIMPLE" ? /* @__PURE__ */ jsxs("div", { className: "ndk:flex ndk:items-center ndk:gap-1", children: [
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -1522,7 +2781,7 @@ var DataKitRoot = (props) => {
             size: "icon",
             disabled: !pagination.hasPrevPage || dataKit.state.isLoading,
             onClick: () => dataKit.actions.setPage(dataKit.page - 1),
-            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "ndk:size-4" })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1532,26 +2791,26 @@ var DataKitRoot = (props) => {
             size: "icon",
             disabled: !pagination.hasNextPage || dataKit.state.isLoading,
             onClick: () => dataKit.actions.setPage(dataKit.page + 1),
-            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "ndk:size-4" })
           }
         )
-      ] }) : /* @__PURE__ */ jsx(Pagination, { className: "w-auto", children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
-        /* @__PURE__ */ jsx(PaginationItem, { className: "hidden sm:block", children: /* @__PURE__ */ jsx(
+      ] }) : /* @__PURE__ */ jsx(Pagination, { className: "ndk:w-auto", children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+        /* @__PURE__ */ jsx(PaginationItem, { className: "ndk:hidden ndk:sm:block", children: /* @__PURE__ */ jsx(
           PaginationPrevious,
           {
             disabled: !pagination.hasPrevPage || dataKit.state.isLoading,
             onClick: () => dataKit.actions.setPage(dataKit.page - 1)
           }
         ) }),
-        /* @__PURE__ */ jsx(PaginationItem, { className: "sm:hidden", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(PaginationItem, { className: "ndk:sm:hidden", children: /* @__PURE__ */ jsx(
           PaginationLink,
           {
             disabled: !pagination.hasPrevPage || dataKit.state.isLoading,
             onClick: () => dataKit.actions.setPage(dataKit.page - 1),
-            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "ndk:size-4" })
           }
         ) }),
-        pagination.pages.map((pageNum, idx) => /* @__PURE__ */ jsx(PaginationItem, { className: "hidden sm:block", children: pageNum === "ellipsis" ? /* @__PURE__ */ jsx(PaginationEllipsis, {}) : /* @__PURE__ */ jsx(
+        pagination.pages.map((pageNum, idx) => /* @__PURE__ */ jsx(PaginationItem, { className: "ndk:hidden ndk:sm:block", children: pageNum === "ellipsis" ? /* @__PURE__ */ jsx(PaginationEllipsis, {}) : /* @__PURE__ */ jsx(
           PaginationLink,
           {
             isActive: pageNum === dataKit.page,
@@ -1560,20 +2819,20 @@ var DataKitRoot = (props) => {
             children: pageNum
           }
         ) }, idx)),
-        /* @__PURE__ */ jsx(PaginationItem, { className: "sm:hidden", children: /* @__PURE__ */ jsx("span", { className: "flex size-9 items-center justify-center text-sm", children: dataKit.page }) }),
-        /* @__PURE__ */ jsx(PaginationItem, { className: "hidden sm:block", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(PaginationItem, { className: "ndk:sm:hidden", children: /* @__PURE__ */ jsx("span", { className: "ndk:flex ndk:size-9 ndk:items-center ndk:justify-center ndk:text-sm", children: dataKit.page }) }),
+        /* @__PURE__ */ jsx(PaginationItem, { className: "ndk:hidden ndk:sm:block", children: /* @__PURE__ */ jsx(
           PaginationNext,
           {
             disabled: !pagination.hasNextPage || dataKit.state.isLoading,
             onClick: () => dataKit.actions.setPage(dataKit.page + 1)
           }
         ) }),
-        /* @__PURE__ */ jsx(PaginationItem, { className: "sm:hidden", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(PaginationItem, { className: "ndk:sm:hidden", children: /* @__PURE__ */ jsx(
           PaginationLink,
           {
             disabled: !pagination.hasNextPage || dataKit.state.isLoading,
             onClick: () => dataKit.actions.setPage(dataKit.page + 1),
-            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "ndk:size-4" })
           }
         ) })
       ] }) }) })
@@ -1660,21 +2919,21 @@ var DataKitInner = (props, ref) => {
       if (intervalRef.current) clearInterval(intervalRef.current);
     };
   }, [refetchInterval, isVisible, dataKit.actions]);
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: `space-y-3 ${className ?? ""}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: filters.length > 0 && /* @__PURE__ */ jsxs(Popover, { open: isFilterOpen, onOpenChange: setIsFilterOpen, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: `ndk:space-y-3 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ndk:flex ndk:items-center ndk:justify-between ndk:gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "ndk:flex ndk:items-center ndk:gap-2", children: filters.length > 0 && /* @__PURE__ */ jsxs(Popover, { open: isFilterOpen, onOpenChange: setIsFilterOpen, children: [
         /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
-          /* @__PURE__ */ jsx(Filter, { className: "mr-1.5 size-4" }),
+          /* @__PURE__ */ jsx(Filter, { className: "ndk:mr-1.5 ndk:size-4" }),
           "Filters"
         ] }) }),
-        /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "w-80", container: overlayContainer, children: [
-          /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: filters.map((f) => /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
-            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: f.label }),
+        /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "ndk:w-80", container: overlayContainer, children: [
+          /* @__PURE__ */ jsx("div", { className: "ndk:grid ndk:gap-3", children: filters.map((f) => /* @__PURE__ */ jsxs("div", { className: "ndk:grid ndk:gap-1.5", children: [
+            /* @__PURE__ */ jsx("label", { className: "ndk:text-sm ndk:font-medium", children: f.label }),
             f.type === "TEXT" && /* @__PURE__ */ jsx(
               "input",
               {
                 type: "text",
-                className: "h-9 w-full rounded-md border bg-transparent px-3 text-sm outline-none focus:ring-2 focus:ring-ring",
+                className: "ndk:h-9 ndk:w-full ndk:rounded-md ndk:border ndk:bg-transparent ndk:px-3 ndk:text-sm ndk:outline-none ndk:focus:ring-2 ndk:focus:ring-ring",
                 placeholder: f.placeholder,
                 value: dataKit.filter[f.id] ?? "",
                 onChange: (e) => dataKit.actions.setFilter(f.id, e.target.value)
@@ -1694,7 +2953,7 @@ var DataKitInner = (props, ref) => {
                 ]
               }
             ),
-            f.type === "BOOLEAN" && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx(
+            f.type === "BOOLEAN" && /* @__PURE__ */ jsx("div", { className: "ndk:flex ndk:items-center ndk:justify-between", children: /* @__PURE__ */ jsx(
               Checkbox,
               {
                 checked: Boolean(dataKit.filter[f.id]),
@@ -1702,33 +2961,33 @@ var DataKitInner = (props, ref) => {
               }
             ) })
           ] }, f.id)) }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-between border-t pt-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ndk:mt-4 ndk:flex ndk:justify-between ndk:border-t ndk:pt-3", children: [
             /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: handleResetFilters, children: "Reset" }),
             /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => setIsFilterOpen(false), children: "Done" })
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxs("span", { className: "mr-2 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ndk:flex ndk:items-center ndk:gap-1", children: [
+        /* @__PURE__ */ jsxs("span", { className: "ndk:mr-2 ndk:text-sm ndk:text-muted-foreground", children: [
           dataKit.items.length,
           " of ",
           dataKit.total
         ] }),
         /* @__PURE__ */ jsxs(Select, { value: String(dataKit.limit), onValueChange: (v) => dataKit.actions.setLimit(Number(v)), disabled: dataKit.state.isLoading, children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-16", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "ndk:w-16", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
           /* @__PURE__ */ jsx(SelectContent, { container: overlayContainer, children: limitOptions.map((v) => /* @__PURE__ */ jsx(SelectItem, { value: String(v), children: v }, v)) })
         ] })
       ] })
     ] }),
-    manual ? children(dataKit) : /* @__PURE__ */ jsx("div", { className: "min-h-[200px]", children: dataKit.state.isLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "size-6 animate-spin text-muted-foreground" }) }) : dataKit.items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center text-muted-foreground", children: "No results found." }) : children(dataKit) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+    manual ? children(dataKit) : /* @__PURE__ */ jsx("div", { className: "ndk:min-h-[200px]", children: dataKit.state.isLoading ? /* @__PURE__ */ jsx("div", { className: "ndk:flex ndk:h-48 ndk:items-center ndk:justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "ndk:size-6 ndk:animate-spin ndk:text-muted-foreground" }) }) : dataKit.items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ndk:flex ndk:h-48 ndk:items-center ndk:justify-center ndk:text-muted-foreground", children: "No results found." }) : children(dataKit) }),
+    /* @__PURE__ */ jsxs("div", { className: "ndk:flex ndk:items-center ndk:justify-between", children: [
+      /* @__PURE__ */ jsxs("p", { className: "ndk:text-sm ndk:text-muted-foreground", children: [
         "Page ",
         dataKit.page,
         " of ",
         pagination.totalPages
       ] }),
-      paginationType === "SIMPLE" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      paginationType === "SIMPLE" ? /* @__PURE__ */ jsxs("div", { className: "ndk:flex ndk:items-center ndk:gap-1", children: [
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -1736,7 +2995,7 @@ var DataKitInner = (props, ref) => {
             size: "icon",
             disabled: !pagination.hasPrevPage || dataKit.state.isLoading,
             onClick: () => dataKit.actions.setPage(dataKit.page - 1),
-            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "ndk:size-4" })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1746,26 +3005,26 @@ var DataKitInner = (props, ref) => {
             size: "icon",
             disabled: !pagination.hasNextPage || dataKit.state.isLoading,
             onClick: () => dataKit.actions.setPage(dataKit.page + 1),
-            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "ndk:size-4" })
           }
         )
-      ] }) : /* @__PURE__ */ jsx(Pagination, { className: "mx-0 w-auto", children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
-        /* @__PURE__ */ jsx(PaginationItem, { className: "hidden sm:block", children: /* @__PURE__ */ jsx(
+      ] }) : /* @__PURE__ */ jsx(Pagination, { className: "ndk:mx-0 ndk:w-auto", children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+        /* @__PURE__ */ jsx(PaginationItem, { className: "ndk:hidden ndk:sm:block", children: /* @__PURE__ */ jsx(
           PaginationPrevious,
           {
             disabled: !pagination.hasPrevPage || dataKit.state.isLoading,
             onClick: () => dataKit.actions.setPage(dataKit.page - 1)
           }
         ) }),
-        /* @__PURE__ */ jsx(PaginationItem, { className: "sm:hidden", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(PaginationItem, { className: "ndk:sm:hidden", children: /* @__PURE__ */ jsx(
           PaginationLink,
           {
             disabled: !pagination.hasPrevPage || dataKit.state.isLoading,
             onClick: () => dataKit.actions.setPage(dataKit.page - 1),
-            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "ndk:size-4" })
           }
         ) }),
-        pagination.pages.map((pageNum, idx) => /* @__PURE__ */ jsx(PaginationItem, { className: "hidden sm:block", children: pageNum === "ellipsis" ? /* @__PURE__ */ jsx(PaginationEllipsis, {}) : /* @__PURE__ */ jsx(
+        pagination.pages.map((pageNum, idx) => /* @__PURE__ */ jsx(PaginationItem, { className: "ndk:hidden ndk:sm:block", children: pageNum === "ellipsis" ? /* @__PURE__ */ jsx(PaginationEllipsis, {}) : /* @__PURE__ */ jsx(
           PaginationLink,
           {
             isActive: pageNum === dataKit.page,
@@ -1774,20 +3033,20 @@ var DataKitInner = (props, ref) => {
             children: pageNum
           }
         ) }, idx)),
-        /* @__PURE__ */ jsx(PaginationItem, { className: "sm:hidden", children: /* @__PURE__ */ jsx("span", { className: "flex size-9 items-center justify-center text-sm", children: dataKit.page }) }),
-        /* @__PURE__ */ jsx(PaginationItem, { className: "hidden sm:block", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(PaginationItem, { className: "ndk:sm:hidden", children: /* @__PURE__ */ jsx("span", { className: "ndk:flex ndk:size-9 ndk:items-center ndk:justify-center ndk:text-sm", children: dataKit.page }) }),
+        /* @__PURE__ */ jsx(PaginationItem, { className: "ndk:hidden ndk:sm:block", children: /* @__PURE__ */ jsx(
           PaginationNext,
           {
             disabled: !pagination.hasNextPage || dataKit.state.isLoading,
             onClick: () => dataKit.actions.setPage(dataKit.page + 1)
           }
         ) }),
-        /* @__PURE__ */ jsx(PaginationItem, { className: "sm:hidden", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(PaginationItem, { className: "ndk:sm:hidden", children: /* @__PURE__ */ jsx(
           PaginationLink,
           {
             disabled: !pagination.hasNextPage || dataKit.state.isLoading,
             onClick: () => dataKit.actions.setPage(dataKit.page + 1),
-            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "ndk:size-4" })
           }
         ) })
       ] }) })