@yuno-payments/dashboard-design-system 1.0.7 → 1.0.9

package/dist/components/atoms/combobox/combobox.js

@@ -98,7 +98,7 @@ const te = ({ message: n = "No results" }) => /* @__PURE__ */ t.jsx("div", { cla
             "aria-haspopup": "listbox",
             "aria-controls": c ? `${i}-listbox` : void 0,
             className: f(
-              "flex h-auto min-h-[38px] w-full items-center justify-between gap-2 rounded-md border border-input bg-input px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 h-[38px]",
+              "flex h-auto min-h-[38px] w-full items-center justify-between gap-2 rounded-md border border-input bg-input px-3 py-1.5 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
               u && "border-destructive",
               v && "w-full"
             ),

package/dist/components/atoms/filter-dropdown/filter-dropdown.js

@@ -1,6 +1,6 @@
 import { j as o } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as I, useState as N, useRef as S, useCallback as j, useEffect as $ } from "react";
-import { Button as k } from "../../../vendor/shadcn/button.js";
+import { forwardRef as I, useState as N, useRef as S, useCallback as k, useEffect as $ } from "react";
+import { Button as j } from "../../../vendor/shadcn/button.js";
 import { Separator as q } from "../../../vendor/shadcn/separator.js";
 import { Icon as F } from "../icon/icon.js";
 import { FilterSection as G } from "../filter/filter.js";
@@ -12,8 +12,7 @@ const J = I(
     {
       ref: V,
       className: h(
-        "flex items-center gap-2 h-8 px-2 rounded-md w-full transition-colors",
-        "hover:bg-secondary",
+        "flex items-center gap-2 h-8 px-2 rounded-md w-full transition-colors shrink-0 hover:bg-secondary",
         b
       ),
       ...u,
@@ -59,7 +58,7 @@ const Q = I(
     {
       ref: b,
       className: h(
-        "flex flex-col gap-2 w-64 h-full p-2 bg-surface border border-border rounded-md overflow-y-auto",
+        "flex flex-col gap-2 w-64 h-full p-2 bg-muted border border-border rounded-md overflow-y-auto",
         g
       ),
       children: d.map((u) => /* @__PURE__ */ o.jsx(
@@ -77,7 +76,7 @@ const Q = I(
   )
 );
 Q.displayName = "FilterMenu";
-const je = I(
+const ke = I(
   ({
     filters: d,
     buttonText: C = "Add filter",
@@ -89,12 +88,12 @@ const je = I(
     className: Z,
     disabled: O = !1,
     applyOnClose: s = !1
-  }, D) => {
-    const [f, ee] = N(!1), [m, te] = N({}), p = S({}), y = S(d), c = j(
+  }, p) => {
+    const [f, ee] = N(!1), [m, te] = N({}), D = S({}), y = S(d), c = k(
       (e) => {
         te((r) => {
           const a = typeof e == "function" ? e(r) : e;
-          return p.current = a, a;
+          return D.current = a, a;
         });
       },
       []
@@ -102,12 +101,12 @@ const je = I(
     $(() => {
       y.current = d;
     }, [d]);
-    const B = j(() => {
+    const B = k(() => {
       if (console.log("[FilterDropdown] applyBufferedChanges called", {
         applyOnClose: s,
-        bufferedChanges: p.current
+        bufferedChanges: D.current
       }), !s) return;
-      const e = p.current, r = y.current;
+      const e = D.current, r = y.current;
       console.log("[FilterDropdown] Processing buffered changes", {
         changesCount: Object.keys(e).length,
         changes: e,
@@ -130,23 +129,23 @@ const je = I(
               break;
           }
       }), c({});
-    }, [s, c]), w = j(
+    }, [s, c]), w = k(
       (e) => {
         console.log("[FilterDropdown] setIsOpen called", {
           open: e,
           isOpen: f,
           applyOnClose: s,
-          bufferedChanges: p.current
-        }), !e && f && s && (console.log("[FilterDropdown] Applying buffered changes on close", p.current), B()), e && !f && s && (console.log("[FilterDropdown] Clearing buffered changes on open"), c({})), ee(e), u?.(e);
+          bufferedChanges: D.current
+        }), !e && f && s && (console.log("[FilterDropdown] Applying buffered changes on close", D.current), B()), e && !f && s && (console.log("[FilterDropdown] Clearing buffered changes on open"), c({})), ee(e), u?.(e);
       },
       [u, f, s, B, c]
     ), [M, A] = N(
       d.length > 0 && d[0]?.id || ""
-    ), R = S(null), ne = j(
+    ), R = S(null), ne = k(
       (e) => {
-        R.current = e, typeof D == "function" ? D(e) : D && (D.current = e);
+        R.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
       },
-      [D]
+      [p]
     );
     $(() => {
       if (!f) return;
@@ -226,7 +225,7 @@ const je = I(
           dateInit: a
         }
       })) : r?.(a);
-    }, De = (e, r) => (a) => {
+    }, pe = (e, r) => (a) => {
       s ? c((n) => ({
         ...n,
         [e]: {
@@ -235,7 +234,7 @@ const je = I(
           dateEnd: a
         }
       })) : r?.(a);
-    }, pe = (e, r) => (a) => {
+    }, De = (e, r) => (a) => {
       s ? c((n) => ({
         ...n,
         [e]: {
@@ -309,10 +308,10 @@ const je = I(
           ), E = Ce(
             t.id,
             t.onDateInitChange
-          ), L = De(
+          ), L = pe(
             t.id,
             t.onDateEndChange
-          ), U = pe(
+          ), U = De(
             t.id,
             t.onStartTimeChange
           ), _ = we(
@@ -379,7 +378,7 @@ const je = I(
         children: [
           /* @__PURE__ */ o.jsxs("div", { className: "flex items-center gap-4", children: [
             /* @__PURE__ */ o.jsxs(
-              k,
+              j,
               {
                 variant: "outline",
                 size: "sm",
@@ -398,7 +397,7 @@ const je = I(
                 ae.map((e) => {
                   const r = z(e.id);
                   return /* @__PURE__ */ o.jsxs(
-                    k,
+                    j,
                     {
                       variant: "secondary",
                       onClick: () => oe(e.id),
@@ -422,13 +421,13 @@ const je = I(
                     e.id
                   );
                 }),
-                H > 0 && /* @__PURE__ */ o.jsxs(k, { children: [
+                H > 0 && /* @__PURE__ */ o.jsxs(j, { children: [
                   "+",
                   H,
                   " more"
                 ] }),
                 b && se && /* @__PURE__ */ o.jsx(
-                  k,
+                  j,
                   {
                     variant: "ghost",
                     size: "sm",
@@ -447,7 +446,7 @@ const je = I(
             "div",
             {
               className: h(
-                "z-50 shadow-lg",
+                "z-popover shadow-lg",
                 "absolute top-full left-0 mt-1",
                 "flex flex-row gap-2",
                 "w-[728px] h-[448px]",
@@ -471,9 +470,9 @@ const je = I(
     );
   }
 );
-je.displayName = "FilterDropdown";
+ke.displayName = "FilterDropdown";
 export {
-  je as FilterDropdown,
+  ke as FilterDropdown,
   Q as FilterMenu,
   J as FilterMenuItem
 };

package/dist/components/atoms/search-field/search-field.js

@@ -150,7 +150,7 @@ const P = D("flex gap-2 w-full", {
               onMouseEnter: () => I(!0),
               onMouseLeave: () => I(!1),
               className: r(
-                "absolute z-50 w-full mt-1 rounded-md border bg-popover text-popover-foreground shadow-md",
+                "absolute z-popover w-full mt-1 rounded-md border bg-popover text-popover-foreground shadow-md",
                 "max-h-[300px] overflow-y-auto"
               ),
               children: /* @__PURE__ */ t.jsx("div", { className: "py-1", children: C.map((e, s) => /* @__PURE__ */ t.jsx(

package/dist/components/atoms/time-picker/time-picker.js

@@ -1,22 +1,22 @@
-import { j as n } from "../../../_virtual/jsx-runtime.js";
+import { j as r } from "../../../_virtual/jsx-runtime.js";
 import * as G from "react";
 import { useId as J, useState as $, useRef as C, useEffect as E } from "react";
 import { cn as c } from "../../../lib/utils.js";
 import { Icon as K } from "../icon/icon.js";
 import { TimePicker as Q } from "../../../vendor/shadcn/time-picker.js";
 import { Field as R, FieldLabel as T, FieldDescription as O, FieldError as _ } from "../../../vendor/shadcn/field.js";
-const X = Array.from({ length: 12 }, (e, r) => r + 1), Y = Array.from({ length: 24 }, (e, r) => r), Z = ["AM", "PM"], H = (e) => {
+const X = Array.from({ length: 12 }, (e, n) => n + 1), Y = Array.from({ length: 24 }, (e, n) => n), Z = ["AM", "PM"], H = (e) => {
   if (e === 0)
     return Array.from({ length: 60 }, (o, i) => i);
-  const r = 60 / e;
-  return Array.from({ length: r }, (o, i) => i * e);
+  const n = 60 / e;
+  return Array.from({ length: n }, (o, i) => i * e);
 }, d = (e) => e.toString().padStart(2, "0"), ee = (e) => {
-  const r = e >= 12 ? "PM" : "AM";
-  return { hour: e === 0 ? 12 : e > 12 ? e - 12 : e, meridiem: r };
-}, te = (e, r) => e === 12 ? r === "AM" ? 0 : 12 : r === "PM" ? e + 12 : e, ne = G.forwardRef(
+  const n = e >= 12 ? "PM" : "AM";
+  return { hour: e === 0 ? 12 : e > 12 ? e - 12 : e, meridiem: n };
+}, te = (e, n) => e === 12 ? n === "AM" ? 0 : 12 : n === "PM" ? e + 12 : e, re = G.forwardRef(
   ({
     className: e,
-    label: r,
+    label: n,
     error: o,
     description: i,
     orientation: x = "vertical",
@@ -32,7 +32,7 @@ const X = Array.from({ length: 12 }, (e, r) => r + 1), Y = Array.from({ length:
   }, P) => {
     const S = J(), u = m || S, v = !!o;
     if (y === "native") {
-      const k = /* @__PURE__ */ n.jsx(
+      const k = /* @__PURE__ */ r.jsx(
         Q,
         {
           ref: P,
@@ -41,7 +41,7 @@ const X = Array.from({ length: 12 }, (e, r) => r + 1), Y = Array.from({ length:
           disabled: p,
           className: c(
             v && "border-destructive focus-visible:border-destructive",
-            !(r || o || i) && e
+            !(n || o || i) && e
           ),
           "aria-invalid": v ? !0 : void 0,
           "aria-describedby": i || o ? `${u}-description` : void 0,
@@ -51,31 +51,31 @@ const X = Array.from({ length: 12 }, (e, r) => r + 1), Y = Array.from({ length:
           }
         }
       );
-      return r || o || i ? /* @__PURE__ */ n.jsxs(
+      return n || o || i ? /* @__PURE__ */ r.jsxs(
         R,
         {
           orientation: x,
           "data-invalid": v,
           className: c("w-full", e),
           children: [
-            r && /* @__PURE__ */ n.jsx(T, { htmlFor: u, children: r }),
-            /* @__PURE__ */ n.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
+            n && /* @__PURE__ */ r.jsx(T, { htmlFor: u, children: n }),
+            /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
               k,
-              i && !o && /* @__PURE__ */ n.jsx(O, { id: `${u}-description`, children: i }),
-              o && /* @__PURE__ */ n.jsx(_, { id: `${u}-description`, children: o })
+              i && !o && /* @__PURE__ */ r.jsx(O, { id: `${u}-description`, children: i }),
+              o && /* @__PURE__ */ r.jsx(_, { id: `${u}-description`, children: o })
             ] })
           ]
         }
       ) : k;
     }
-    return /* @__PURE__ */ n.jsx(
-      re,
+    return /* @__PURE__ */ r.jsx(
+      ne,
       {
         value: l || (w ? "00:00" : "12:00"),
         onChange: f,
         divisorMinutes: j,
         width: s,
-        label: r,
+        label: n,
         error: o,
         description: i,
         disabled: p,
@@ -85,10 +85,10 @@ const X = Array.from({ length: 12 }, (e, r) => r + 1), Y = Array.from({ length:
     );
   }
 );
-ne.displayName = "TimePicker";
-const re = ({
+re.displayName = "TimePicker";
+const ne = ({
   value: e,
-  onChange: r,
+  onChange: n,
   divisorMinutes: o,
   width: i,
   label: x,
@@ -109,22 +109,22 @@ const re = ({
     let t;
     s ? t = a : t = te(a, M);
     const g = `${d(t)}:${d(b)}`;
-    r?.(g);
-  }, [a, b, M, r, s]), E(() => {
+    n?.(g);
+  }, [a, b, M, n, s]), E(() => {
     const t = (g) => {
       h.current && !h.current.contains(g.target) && p(!1);
     };
     if (l)
       return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
   }, [l]);
-  const V = s ? `${d(a)}:${d(b)}` : `${d(a)}:${d(b)} ${M}`, z = s ? Y : X, I = /* @__PURE__ */ n.jsxs(
+  const V = s ? `${d(a)}:${d(b)}` : `${d(a)}:${d(b)} ${M}`, z = s ? Y : X, I = /* @__PURE__ */ r.jsxs(
     "div",
     {
       ref: h,
       className: c("relative inline-block", j),
       style: { width: typeof i == "number" ? `${i}px` : i },
       children: [
-        /* @__PURE__ */ n.jsxs(
+        /* @__PURE__ */ r.jsxs(
           "button",
           {
             type: "button",
@@ -139,8 +139,8 @@ const re = ({
               m && "border-destructive"
             ),
             children: [
-              /* @__PURE__ */ n.jsx("span", { children: V }),
-              /* @__PURE__ */ n.jsx(
+              /* @__PURE__ */ r.jsx("span", { children: V }),
+              /* @__PURE__ */ r.jsx(
                 K,
                 {
                   name: l ? "CaretUp" : "CaretDown",
@@ -151,17 +151,17 @@ const re = ({
             ]
           }
         ),
-        l && /* @__PURE__ */ n.jsxs(
+        l && /* @__PURE__ */ r.jsxs(
           "div",
           {
             ref: w,
             className: c(
-              "absolute z-50 mt-1 bg-popover border border-border rounded-md shadow-lg",
+              "absolute z-popover mt-1 bg-popover border border-border rounded-md shadow-lg",
               "flex divide-x divide-border"
             ),
             style: { width: "fit-content", minWidth: s ? "140px" : "200px" },
             children: [
-              /* @__PURE__ */ n.jsx("div", { className: "flex flex-col overflow-y-auto max-h-[200px] min-w-[60px]", children: z.map((t) => /* @__PURE__ */ n.jsx(
+              /* @__PURE__ */ r.jsx("div", { className: "flex flex-col overflow-y-auto max-h-[200px] min-w-[60px]", children: z.map((t) => /* @__PURE__ */ r.jsx(
                 "button",
                 {
                   type: "button",
@@ -174,7 +174,7 @@ const re = ({
                 },
                 t
               )) }),
-              /* @__PURE__ */ n.jsx("div", { className: "flex flex-col overflow-y-auto max-h-[200px] min-w-[60px]", children: U.map((t) => /* @__PURE__ */ n.jsx(
+              /* @__PURE__ */ r.jsx("div", { className: "flex flex-col overflow-y-auto max-h-[200px] min-w-[60px]", children: U.map((t) => /* @__PURE__ */ r.jsx(
                 "button",
                 {
                   type: "button",
@@ -187,7 +187,7 @@ const re = ({
                 },
                 t
               )) }),
-              !s && /* @__PURE__ */ n.jsx("div", { className: "flex flex-col min-w-[60px]", children: Z.map((t) => /* @__PURE__ */ n.jsx(
+              !s && /* @__PURE__ */ r.jsx("div", { className: "flex flex-col min-w-[60px]", children: Z.map((t) => /* @__PURE__ */ r.jsx(
                 "button",
                 {
                   type: "button",
@@ -206,15 +206,15 @@ const re = ({
       ]
     }
   );
-  return x || m || f ? /* @__PURE__ */ n.jsxs(R, { orientation: "vertical", className: c("w-full", j), children: [
-    x && /* @__PURE__ */ n.jsx(T, { children: x }),
-    /* @__PURE__ */ n.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
+  return x || m || f ? /* @__PURE__ */ r.jsxs(R, { orientation: "vertical", className: c("w-full", j), children: [
+    x && /* @__PURE__ */ r.jsx(T, { children: x }),
+    /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
       I,
-      f && !m && /* @__PURE__ */ n.jsx(O, { children: f }),
-      m && /* @__PURE__ */ n.jsx(_, { children: m })
+      f && !m && /* @__PURE__ */ r.jsx(O, { children: f }),
+      m && /* @__PURE__ */ r.jsx(_, { children: m })
     ] })
   ] }) : I;
 };
 export {
-  ne as TimePicker
+  re as TimePicker
 };

package/dist/components/atoms/tooltip/tooltip.d.ts

@@ -31,36 +31,5 @@ interface TooltipProps extends ShadcnTooltipRootProps {
      */
     show?: boolean;
 }
-/**
- * Tooltip component for displaying helpful content on hover or focus.
- *
- * @example
- * ```tsx
- * // Simple text tooltip
- * <Tooltip content="Click to edit">
- *   <Button>Edit</Button>
- * </Tooltip>
- *
- * // Conditional tooltip
- * <Tooltip content="Info" show={showTooltip}>
- *   <Icon name="Info" />
- * </Tooltip>
- *
- * // ReactNode content with formatting
- * <Tooltip content={<div><strong>Bold</strong> and <em>italic</em> text</div>}>
- *   <Button>Rich Content</Button>
- * </Tooltip>
- *
- * // Complex JSX content
- * <Tooltip content={
- *   <div className="space-y-1">
- *     <Typography variant="sm" weight="semibold">Title</Typography>
- *     <Typography variant="sm">Description here</Typography>
- *   </div>
- * }>
- *   <Icon name="Info" />
- * </Tooltip>
- * ```
- */
 declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Tooltip, TooltipProvider, type TooltipProps, type TooltipProviderProps, };

package/dist/components/atoms/tooltip/tooltip.js

@@ -1,22 +1,22 @@
-import { j as o } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as m } from "react";
-import { TooltipProvider as x, Tooltip as d, TooltipTrigger as j, TooltipContent as T } from "../../../vendor/shadcn/tooltip.js";
-const a = m(
+import { j as i } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as a } from "react";
+import { TooltipProvider as f, Tooltip as m, TooltipTrigger as d, TooltipContent as n } from "../../../vendor/shadcn/tooltip.js";
+const x = (r) => !!(r == null || typeof r == "string" && r.trim() === "" || Array.isArray(r) && r.length === 0), j = a(
   ({
-    content: t,
-    children: r,
-    contentProps: i,
+    content: r,
+    children: o,
+    contentProps: t,
     providerProps: e,
     triggerProps: s,
-    show: p = !0,
-    ...l
-  }, n) => p ? /* @__PURE__ */ o.jsx(x, { ...e, children: /* @__PURE__ */ o.jsxs(d, { ...l, children: [
-    /* @__PURE__ */ o.jsx(j, { asChild: !0, ...s, children: /* @__PURE__ */ o.jsx("div", { children: r }) }),
-    /* @__PURE__ */ o.jsx(T, { ref: n, ...i, children: t })
-  ] }) }) : /* @__PURE__ */ o.jsx(o.Fragment, { children: r })
+    show: l = !0,
+    ...p
+  }, u) => !l || x(r) ? /* @__PURE__ */ i.jsx(i.Fragment, { children: o }) : /* @__PURE__ */ i.jsx(f, { delayDuration: 0, ...e, children: /* @__PURE__ */ i.jsxs(m, { ...p, children: [
+    /* @__PURE__ */ i.jsx(d, { asChild: !0, ...s, children: /* @__PURE__ */ i.jsx("div", { children: o }) }),
+    /* @__PURE__ */ i.jsx(n, { ref: u, ...t, children: r })
+  ] }) })
 );
-a.displayName = "Tooltip";
+j.displayName = "Tooltip";
 export {
-  a as Tooltip,
-  x as TooltipProvider
+  j as Tooltip,
+  f as TooltipProvider
 };

package/dist/components/molecules/empty/empty.js

@@ -3,17 +3,17 @@ import { forwardRef as o } from "react";
 import { cn as d } from "../../../lib/utils.js";
 import { Typography as r } from "../../atoms/typography/typography.js";
 const x = "https://dashboard-assets.y.uno/common/empty_illustration.svg", f = o(
-  ({ className: c, media: s, title: i, description: t, actions: l, ...n }, m) => {
+  ({ className: n, media: s, title: c, description: t, actions: l, ...i }, m) => {
     const a = s === void 0 ? /* @__PURE__ */ e.jsx("img", { src: x, alt: "" }) : s;
     return /* @__PURE__ */ e.jsxs(
       "div",
       {
         ref: m,
         className: d(
-          "flex flex-col items-center gap-6 bg-surface px-6 py-12 rounded-lg",
-          c
+          "flex flex-col items-center gap-6 bg-secondary px-6 py-12 rounded-lg",
+          n
         ),
-        ...n,
+        ...i,
         children: [
           a && /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0", children: a }),
           /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-6 items-center w-full", children: [
@@ -23,7 +23,7 @@ const x = "https://dashboard-assets.y.uno/common/empty_illustration.svg", f = o(
                 {
                   as: "h3",
                   className: "text-base font-semibold text-center leading-none",
-                  children: i
+                  children: c
                 }
               ),
               t && /* @__PURE__ */ e.jsx(r, { variant: "muted", className: "text-center", children: t })

package/dist/components/molecules/highlight-banner/highlight-banner.js

@@ -3,7 +3,7 @@ import { forwardRef as m } from "react";
 import { cn as i } from "../../../lib/utils.js";
 import { Icon as c } from "../../atoms/icon/icon.js";
 const p = m(
-  ({ className: t, icon: d, title: a, description: o, button: s, variant: l = "default", ...n }, x) => {
+  ({ className: s, icon: d, title: o, description: a, button: t, variant: l = "default", ...n }, x) => {
     const r = l === "secondary";
     return /* @__PURE__ */ e.jsxs(
       "div",
@@ -12,7 +12,7 @@ const p = m(
         className: i(
           "flex items-center gap-6 rounded-xl border p-6",
           r ? "border-border bg-background" : "border-primary bg-primary",
-          t
+          s
         ),
         style: {
           boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10)"
@@ -24,7 +24,7 @@ const p = m(
             {
               className: i(
                 "flex size-16 shrink-0 items-center justify-center rounded-full border-2",
-                r ? "border-primary" : "border-[#FAFAFA]"
+                r ? "border-primary" : "border-muted"
               ),
               children: /* @__PURE__ */ e.jsx(
                 c,
@@ -33,7 +33,7 @@ const p = m(
                   size: "xl",
                   className: i(
                     "text-muted-foreground",
-                    r ? "text-primary" : "text-[#FAFAFA]"
+                    r ? "text-primary" : "text-primary-foreground"
                   ),
                   weight: "fill"
                 }
@@ -48,7 +48,7 @@ const p = m(
                   "text-lg font-semibold leading-7",
                   r ? "text-foreground" : "text-[#FAFAFA]"
                 ),
-                children: a
+                children: o
               }
             ),
             /* @__PURE__ */ e.jsx(
@@ -58,11 +58,11 @@ const p = m(
                   "text-sm leading-5 opacity-80",
                   r ? "text-muted-foreground" : "text-[#FAFAFA]"
                 ),
-                children: o
+                children: a
               }
             )
           ] }),
-          s && /* @__PURE__ */ e.jsx("div", { className: "shrink-0", children: s })
+          t && /* @__PURE__ */ e.jsx("div", { className: "shrink-0", children: t })
         ]
       }
     );

package/dist/components/organisms/data-table/components/data-table-header.js

@@ -1,15 +1,15 @@
 import { j as e } from "../../../../_virtual/jsx-runtime.js";
-import { TableHeader as i, TableRow as m } from "../../../../vendor/shadcn/table.js";
-import { DataTableHeaderCell as o } from "./cells/data-table-header-cell.js";
+import { TableHeader as s, TableRow as t } from "../../../../vendor/shadcn/table.js";
+import { DataTableHeaderCell as i } from "./cells/data-table-header-cell.js";
 function p({
-  table: s,
-  enableColumnResizing: l
+  table: l,
+  enableColumnResizing: m
 }) {
-  return /* @__PURE__ */ e.jsx(i, { children: s.getHeaderGroups().map((a) => /* @__PURE__ */ e.jsx(m, { className: "bg-surface", children: a.headers.map((r) => /* @__PURE__ */ e.jsx(
-    o,
+  return /* @__PURE__ */ e.jsx(s, { children: l.getHeaderGroups().map((a) => /* @__PURE__ */ e.jsx(t, { className: "bg-muted", children: a.headers.map((r) => /* @__PURE__ */ e.jsx(
+    i,
     {
       header: r,
-      enableColumnResizing: l ?? !1
+      enableColumnResizing: m ?? !1
     },
     r.id
   )) }, a.id)) });

package/dist/components/organisms/data-table/components/states/data-table-loading.js

@@ -1,5 +1,5 @@
 import { j as e } from "../../../../../_virtual/jsx-runtime.js";
-import { Table as u, TableHeader as f, TableRow as a, TableHead as x, TableBody as p, TableCell as h } from "../../../../../vendor/shadcn/table.js";
+import { Table as u, TableHeader as x, TableRow as a, TableHead as f, TableBody as p, TableCell as h } from "../../../../../vendor/shadcn/table.js";
 import { Skeleton as o } from "../../../../../vendor/shadcn/skeleton.js";
 function j(s) {
   return typeof s == "object" && s !== null && "title" in s && typeof s.title == "string";
@@ -13,20 +13,20 @@ function v({
   rowsCount: l = 5,
   checkboxSelection: c = !1,
   actions: d,
-  rowHeight: t
+  rowHeight: i
 }) {
   const n = [];
   return c && n.push(null), s.forEach((r) => {
     n.push(b(r));
   }), d && n.push("Actions"), /* @__PURE__ */ e.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ e.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ e.jsxs(u, { children: [
-    /* @__PURE__ */ e.jsx(f, { children: /* @__PURE__ */ e.jsx(a, { className: "bg-surface", children: n.map((r, i) => /* @__PURE__ */ e.jsx(x, { children: r ? /* @__PURE__ */ e.jsx("div", { className: "text-xs font-medium", children: r }) : /* @__PURE__ */ e.jsx(o, { className: "h-4 w-4" }) }, i)) }) }),
-    /* @__PURE__ */ e.jsx(p, { children: Array.from({ length: l }).map((r, i) => /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(x, { children: /* @__PURE__ */ e.jsx(a, { className: "bg-muted", children: n.map((r, t) => /* @__PURE__ */ e.jsx(f, { children: r ? /* @__PURE__ */ e.jsx("div", { className: "text-xs font-medium", children: r }) : /* @__PURE__ */ e.jsx(o, { className: "h-4 w-4" }) }, t)) }) }),
+    /* @__PURE__ */ e.jsx(p, { children: Array.from({ length: l }).map((r, t) => /* @__PURE__ */ e.jsx(
       a,
       {
-        style: { height: t ? `${t}px` : void 0 },
+        style: { height: i ? `${i}px` : void 0 },
         children: n.map((T, m) => /* @__PURE__ */ e.jsx(h, { children: /* @__PURE__ */ e.jsx(o, { className: "h-4 w-[80px]" }) }, m))
       },
-      i
+      t
     )) })
   ] }) }) });
 }