@skalar-saas/design-system 0.1.95 → 0.1.97

package/dist/index.mjs

@@ -358,7 +358,7 @@ const Gr = S.memo(({
         ...N.panel,
         isResizing: u === w
       };
-  }, [n, u]), C = Ge(() => ({
+  }, [n, u]), y = Ge(() => ({
     panels: n,
     onResizeStart: m,
     onResize: h,
@@ -367,7 +367,7 @@ const Gr = S.memo(({
     getPanelState: v,
     minCentralWidth: s,
     containerRef: d
-  }), [n, m, h, p, x, v, s]), { leftPanels: b, rightPanels: g, mainContent: y } = Ge(() => {
+  }), [n, m, h, p, x, v, s]), { leftPanels: b, rightPanels: g, mainContent: C } = Ge(() => {
     const w = [], N = [];
     let I = null;
     return S.Children.forEach(t, (M) => {
@@ -383,7 +383,7 @@ const Gr = S.memo(({
       }
     }), { leftPanels: w, rightPanels: N, mainContent: I };
   }, [t]), k = u !== null;
-  return /* @__PURE__ */ e(an.Provider, { value: C, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ e(an.Provider, { value: y, children: /* @__PURE__ */ o(
     "div",
     {
       ref: d,
@@ -397,7 +397,7 @@ const Gr = S.memo(({
       "data-resizing": k,
       children: [
         b,
-        y,
+        C,
         g
       ]
     }
@@ -432,7 +432,7 @@ const sn = ({
       L ${h - 4} ${d - 4}
       Q ${h} ${d - 4}, ${h} ${d}
       L ${h} ${t}
-    `, C = m ? (h + p) / 2 : (p + h) / 2, b = t / 2;
+    `, y = m ? (h + p) / 2 : (p + h) / 2, b = t / 2;
   return /* @__PURE__ */ o(
     "div",
     {
@@ -478,7 +478,7 @@ const sn = ({
           {
             className: "absolute flex flex-col gap-[2px] items-center",
             style: {
-              left: C,
+              left: y,
               top: b,
               transform: "translate(-50%, -50%)"
             },
@@ -500,7 +500,7 @@ const sn = ({
   panelBg: a = "var(--surface-1)",
   className: s
 }) => {
-  const { panels: l, onResizeStart: u, onResize: c, onResizeEnd: d, onCloseZoneChange: m, getPanelState: h, minCentralWidth: p, containerRef: x } = Zr(), v = h(t), C = B(!1), b = B(!1), g = B(null), y = B(!1), k = B(0), w = B(!1), N = B(null), [I, M] = H(500), T = B({
+  const { panels: l, onResizeStart: u, onResize: c, onResizeEnd: d, onCloseZoneChange: m, getPanelState: h, minCentralWidth: p, containerRef: x } = Zr(), v = h(t), y = B(!1), b = B(!1), g = B(null), C = B(!1), k = B(0), w = B(!1), N = B(null), [I, M] = H(500), T = B({
     side: n,
     oppositeSideWidth: 0,
     minCentralWidth: p,
@@ -519,7 +519,7 @@ const sn = ({
   const j = B(c), E = B(d), z = B(m);
   j.current = c, E.current = d, z.current = m;
   const O = J((_) => {
-    C.current && (b.current = !0, !g.current && (g.current = requestAnimationFrame(() => {
+    y.current && (b.current = !0, !g.current && (g.current = requestAnimationFrame(() => {
       g.current = null;
       const G = x.current;
       if (!G) return;
@@ -532,15 +532,15 @@ const sn = ({
         Yn,
         er
       ), et = Ye < k.current && Or(Ye);
-      et !== y.current && (y.current = et, z.current(t, et)), j.current(t, Ye);
+      et !== C.current && (C.current = et, z.current(t, et)), j.current(t, Ye);
     })));
   }, [t, x]), te = J(() => {
-    if (!C.current) return;
-    C.current = !1, document.body.style.userSelect = "", document.body.style.cursor = "";
-    const _ = b.current && y.current, { panelState: G } = T.current;
-    !_ && G && G.width < Pt(G.width) && j.current(t, Pt(G.width)), b.current = !1, y.current = !1, E.current(t, _), document.removeEventListener("mousemove", O), document.removeEventListener("mouseup", te);
+    if (!y.current) return;
+    y.current = !1, document.body.style.userSelect = "", document.body.style.cursor = "";
+    const _ = b.current && C.current, { panelState: G } = T.current;
+    !_ && G && G.width < Pt(G.width) && j.current(t, Pt(G.width)), b.current = !1, C.current = !1, E.current(t, _), document.removeEventListener("mousemove", O), document.removeEventListener("mouseup", te);
   }, [t, O]), oe = J(() => {
-    C.current = !0, document.body.style.userSelect = "none", document.body.style.cursor = "col-resize";
+    y.current = !0, document.body.style.userSelect = "none", document.body.style.cursor = "col-resize";
     const { panelState: _ } = T.current;
     k.current = _?.width ?? 0, u(t), document.addEventListener("mousemove", O), document.addEventListener("mouseup", te);
   }, [t, O, te, u]);
@@ -669,9 +669,9 @@ function Js(t) {
   }, [s, r, i, u]);
   const d = J((b) => {
     l((g) => {
-      const y = he(g, b);
-      if (!y) return g;
-      const { side: k, panel: w } = y;
+      const C = he(g, b);
+      if (!C) return g;
+      const { side: k, panel: w } = C;
       if (w.open)
         return {
           ...g,
@@ -711,14 +711,14 @@ function Js(t) {
       };
     });
   }, [a]), m = J((b, g) => {
-    l((y) => {
-      const k = he(y, b);
-      if (!k) return y;
-      const { side: w, panel: N } = k, M = y[w === "left" ? "right" : "left"].filter((L) => L.open).reduce((L, Z) => L + Z.width, 0), T = y[w].filter((L) => L.open && L.id !== b), V = T.reduce((L, Z) => L + Z.width, 0), D = 100 - M - X.minCentralPercent, P = g + V;
+    l((C) => {
+      const k = he(C, b);
+      if (!k) return C;
+      const { side: w, panel: N } = k, M = C[w === "left" ? "right" : "left"].filter((L) => L.open).reduce((L, Z) => L + Z.width, 0), T = C[w].filter((L) => L.open && L.id !== b), V = T.reduce((L, Z) => L + Z.width, 0), D = 100 - M - X.minCentralPercent, P = g + V;
       if (P <= D)
         return {
-          ...y,
-          [w]: y[w].map(
+          ...C,
+          [w]: C[w].map(
             (L) => L.id === b ? { ...L, width: g } : L
           )
         };
@@ -729,8 +729,8 @@ function Js(t) {
           V - L
         ), j = D - Z, E = Z / V;
         return {
-          ...y,
-          [w]: y[w].map((z) => {
+          ...C,
+          [w]: C[w].map((z) => {
             if (z.id === b)
               return { ...z, width: j };
             if (z.open) {
@@ -742,17 +742,17 @@ function Js(t) {
         };
       }
       return {
-        ...y,
-        [w]: y[w].map(
+        ...C,
+        [w]: C[w].map(
           (L) => L.id === b ? { ...L, width: Math.min(g, D - V) } : L
         )
       };
     });
   }, []), h = J((b) => {
     l((g) => {
-      const y = he(g, b);
-      if (!y || y.panel.open) return g;
-      const { side: k } = y, w = k === "left" ? "right" : "left", N = a.get(b), I = typeof window < "u" ? window.innerWidth : 1920, M = N ? at(N.defaultWidth, I) : 20, T = g[w].filter((E) => E.open).reduce((E, z) => E + z.width, 0), V = g[k].filter((E) => E.open && E.id !== b), D = V.reduce((E, z) => E + z.width, 0), P = 100 - T - X.minCentralPercent;
+      const C = he(g, b);
+      if (!C || C.panel.open) return g;
+      const { side: k } = C, w = k === "left" ? "right" : "left", N = a.get(b), I = typeof window < "u" ? window.innerWidth : 1920, M = N ? at(N.defaultWidth, I) : 20, T = g[w].filter((E) => E.open).reduce((E, z) => E + z.width, 0), V = g[k].filter((E) => E.open && E.id !== b), D = V.reduce((E, z) => E + z.width, 0), P = 100 - T - X.minCentralPercent;
       if (D + M <= P)
         return {
           ...g,
@@ -785,9 +785,9 @@ function Js(t) {
     });
   }, [a]), p = J((b) => {
     l((g) => {
-      const y = he(g, b);
-      if (!y || !y.panel.open) return g;
-      const { side: k } = y;
+      const C = he(g, b);
+      if (!C || !C.panel.open) return g;
+      const { side: k } = C;
       return {
         ...g,
         [k]: g[k].map(
@@ -796,22 +796,22 @@ function Js(t) {
       };
     });
   }, []), x = J((b, g) => {
-    l((y) => {
-      const k = he(y, b);
-      if (!k) return y;
+    l((C) => {
+      const k = he(C, b);
+      if (!k) return C;
       const { side: w } = k;
       return {
-        ...y,
-        [w]: y[w].map(
+        ...C,
+        [w]: C[w].map(
           (N) => N.id === b ? { ...N, inCloseZone: g } : N
         )
       };
     });
   }, []), v = J((b) => {
     l((g) => {
-      const y = he(g, b);
-      if (!y) return g;
-      const { side: k } = y;
+      const C = he(g, b);
+      if (!C) return g;
+      const { side: k } = C;
       return {
         ...g,
         [k]: g[k].map(
@@ -820,9 +820,9 @@ function Js(t) {
       };
     }), setTimeout(() => {
       l((g) => {
-        const y = he(g, b);
-        if (!y) return g;
-        const { side: k } = y;
+        const C = he(g, b);
+        if (!C) return g;
+        const { side: k } = C;
         return {
           ...g,
           [k]: g[k].map(
@@ -831,31 +831,31 @@ function Js(t) {
         };
       });
     }, X.exitAnimationDuration);
-  }, []), C = J(() => {
+  }, []), y = J(() => {
     const b = typeof window < "u" ? window.innerWidth : 1920;
     l(Tt(n, b));
   }, [n]);
   return q(() => {
     const b = [
-      ...s.left.filter((y) => y.exiting),
-      ...s.right.filter((y) => y.exiting)
+      ...s.left.filter((C) => C.exiting),
+      ...s.right.filter((C) => C.exiting)
     ];
     if (b.length === 0) return;
-    const g = b.map((y) => setTimeout(() => {
+    const g = b.map((C) => setTimeout(() => {
       l((k) => {
-        const w = he(k, y.id);
+        const w = he(k, C.id);
         if (!w) return k;
         const { side: N } = w;
         return {
           ...k,
           [N]: k[N].map(
-            (I) => I.id === y.id && I.exiting ? { ...I, open: !1, exiting: !1 } : I
+            (I) => I.id === C.id && I.exiting ? { ...I, open: !1, exiting: !1 } : I
           )
         };
       });
     }, X.exitAnimationDuration));
     return () => {
-      g.forEach((y) => clearTimeout(y));
+      g.forEach((C) => clearTimeout(C));
     };
   }, [s]), {
     panels: s,
@@ -863,7 +863,7 @@ function Js(t) {
     resizePanel: m,
     openPanel: h,
     closePanel: p,
-    resetPanels: C,
+    resetPanels: y,
     handleCloseZoneChange: x,
     handlePanelClose: v
   };
@@ -885,7 +885,7 @@ const Xr = S.memo(({
   handleFillColor: x = "var(--surface-1)",
   onResize: v
 }) => {
-  const [C, b] = H(!1), [g, y] = H(r), [k, w] = H(a), [N, I] = H(!1), M = B(!1), T = B({ clientX: 0, width: 0 }), V = B(null), [D, P] = H(0);
+  const [y, b] = H(!1), [g, C] = H(r), [k, w] = H(a), [N, I] = H(!1), M = B(!1), T = B({ clientX: 0, width: 0 }), V = B(null), [D, P] = H(0);
   q(() => {
     const Q = V.current;
     if (!Q) return;
@@ -898,11 +898,11 @@ const Xr = S.memo(({
     return _.observe(Q), () => _.disconnect();
   }, [g]), q(() => {
     if (r)
-      y(!0), b(!1);
+      C(!0), b(!1);
     else if (g) {
       b(!0);
       const Q = setTimeout(() => {
-        y(!1), b(!1), i?.();
+        C(!1), b(!1), i?.();
       }, l);
       return () => clearTimeout(Q);
     }
@@ -940,12 +940,12 @@ const Xr = S.memo(({
               className: f(
                 "h-full overflow-hidden",
                 d,
-                C ? z : E
+                y ? z : E
               ),
               children: n
             }
           ),
-          m && !C && /* @__PURE__ */ e(
+          m && !y && /* @__PURE__ */ e(
             "div",
             {
               className: f(
@@ -2049,9 +2049,9 @@ const fe = (t) => t !== void 0 && {
   borderRadius: p,
   color: x,
   loading: v = !1,
-  ...C
+  ...y
 }, b) => {
-  const g = "group inline-flex items-center justify-center font-semibold rounded-6 transition-all duration-200 focus:outline-none disabled:cursor-not-allowed", y = "disabled:bg-surface-3 disabled:!text-disabled", k = {
+  const g = "group inline-flex items-center justify-center font-semibold rounded-6 transition-all duration-200 focus:outline-none disabled:cursor-not-allowed", C = "disabled:bg-surface-3 disabled:!text-disabled", k = {
     brand: {
       primary: "bg-brand-primary-main text-white-uniform hover:bg-brand-primary-accent-3 active:bg-brand-primary-accent-3 focus:ring focus:ring-low-em",
       secondary: "bg-brand-primary-main-special text-white-uniform hover:bg-brand-primary-accent-special active:bg-brand-primary-accent-special focus:ring focus:ring-low-em"
@@ -2104,7 +2104,7 @@ const fe = (t) => t !== void 0 && {
     N[r],
     p && `rounded-[${p}]`,
     x,
-    y,
+    C,
     c
   )), j = /* @__PURE__ */ o(ee, { children: [
     (i === "leading" || i === "both") && P && /* @__PURE__ */ e("span", { className: `group-disabled:!text-disabled ${T[r].leading}`, children: P }),
@@ -2112,7 +2112,7 @@ const fe = (t) => t !== void 0 && {
     i === "only" && P && /* @__PURE__ */ e("span", { className: "group-disabled:!text-disabled", children: P }),
     (i === "trailing" || i === "both") && W && /* @__PURE__ */ e("span", { className: `group-disabled:!text-disabled ${T[r].trailing}`, children: W })
   ] });
-  return /* @__PURE__ */ e("button", { ref: b, className: Z, disabled: u || v, ...C, children: v ? /* @__PURE__ */ o(ee, { children: [
+  return /* @__PURE__ */ e("button", { ref: b, className: Z, disabled: u || v, ...y, children: v ? /* @__PURE__ */ o(ee, { children: [
     /* @__PURE__ */ e("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e(
       "span",
       {
@@ -2683,12 +2683,12 @@ const Cl = ({
     m((g) => !g);
   }, v = (g) => {
     g.disabled || (g.onClick(), m(!1));
-  }, C = () => {
+  }, y = () => {
     m(!1);
   };
   q(() => {
-    const g = (y) => {
-      h.current && !h.current.contains(y.target) && m(!1);
+    const g = (C) => {
+      h.current && !h.current.contains(C.target) && m(!1);
     };
     if (d)
       return document.addEventListener("mousedown", g), () => {
@@ -2740,15 +2740,15 @@ const Cl = ({
       "div",
       {
         className: "fixed inset-0 z-10",
-        onClick: C
+        onClick: y
       }
     ),
     d && /* @__PURE__ */ e("div", { className: f(
       "absolute z-20 w-[150px] bg-white border border-gray-100 rounded-[16px] shadow-lg overflow-hidden",
       b(),
       l
-    ), children: /* @__PURE__ */ e("div", { children: i.map((g, y) => /* @__PURE__ */ o(S.Fragment, { children: [
-      y > 0 && /* @__PURE__ */ e("div", { className: "border-t border-gray-100" }),
+    ), children: /* @__PURE__ */ e("div", { children: i.map((g, C) => /* @__PURE__ */ o(S.Fragment, { children: [
+      C > 0 && /* @__PURE__ */ e("div", { className: "border-t border-gray-100" }),
       /* @__PURE__ */ e(
         "button",
         {
@@ -2925,16 +2925,16 @@ const Cl = ({
     sm: { text: "text-[12px]", leadingGap: "mr-[2px]", trailingGap: "ml-[2px]" },
     md: { text: "text-[14px]", leadingGap: "mr-[4px]", trailingGap: "ml-[4px]" },
     lg: { text: "text-[16px]", leadingGap: "mr-[4px]", trailingGap: "ml-[4px]" }
-  }, C = {
+  }, y = {
     xs: 12,
     sm: 12,
     md: 16,
     lg: 20
   }, b = s && i && S.isValidElement(i) ? S.cloneElement(i, {
-    size: C[n],
+    size: y[n],
     color: "currentColor"
   }) : null, g = l && a && S.isValidElement(a) ? S.cloneElement(a, {
-    size: C[n],
+    size: y[n],
     color: "currentColor"
   }) : null;
   return /* @__PURE__ */ o(
@@ -3173,8 +3173,8 @@ const fn = ({
     defaultCollapsed: l = !1,
     className: u
   }, c) => {
-    const p = n.length > 3 ? 150 : void 0, x = n.filter((y) => y.checked).length, v = n.length, C = v > 0 ? Math.round(x / v * 100) : 0, b = (y, k) => {
-      r?.(y, k);
+    const p = n.length > 3 ? 150 : void 0, x = n.filter((C) => C.checked).length, v = n.length, y = v > 0 ? Math.round(x / v * 100) : 0, b = (C, k) => {
+      r?.(C, k);
     };
     return /* @__PURE__ */ e(
       xt,
@@ -3188,7 +3188,7 @@ const fn = ({
             "/",
             v
           ] }),
-          /* @__PURE__ */ e(fn, { progress: C, variant: "none", className: "h-2" })
+          /* @__PURE__ */ e(fn, { progress: y, variant: "none", className: "h-2" })
         ] }),
         isCollapsed: i,
         onToggle: a,
@@ -3200,27 +3200,27 @@ const fn = ({
           {
             className: "overflow-y-auto",
             style: p ? { maxHeight: `${p}px` } : void 0,
-            children: n.map((y, k) => /* @__PURE__ */ o(S.Fragment, { children: [
+            children: n.map((C, k) => /* @__PURE__ */ o(S.Fragment, { children: [
               /* @__PURE__ */ o("label", { className: "flex items-center px-8 h-[50px] gap-6 cursor-pointer", children: [
                 /* @__PURE__ */ e(
                   ke,
                   {
                     size: "medium",
-                    checked: y.checked,
-                    disabled: y.disabled,
-                    onChange: (w) => b(y.id, w.target.checked)
+                    checked: C.checked,
+                    disabled: C.disabled,
+                    onChange: (w) => b(C.id, w.target.checked)
                   }
                 ),
                 /* @__PURE__ */ e(
                   "span",
                   {
-                    className: f("text-xs font-semibold text-med-em flex-1", y.checked && "line-through"),
-                    children: y.label
+                    className: f("text-xs font-semibold text-med-em flex-1", C.checked && "line-through"),
+                    children: C.label
                   }
                 )
               ] }),
               k < n.length - 1 && /* @__PURE__ */ e("div", { className: "h-px bg-surface-3" })
-            ] }, y.id))
+            ] }, C.id))
           }
         )
       }
@@ -3311,12 +3311,12 @@ const Wa = {
     color: "currentColor"
   }) : null, v = (b) => {
     b.stopPropagation(), a && a(b);
-  }, C = () => {
+  }, y = () => {
     const b = {
       xs: { left: "pl-4", right: "pr-4", both: "px-4" },
       sm: { left: "pl-6", right: "pr-6", both: "px-6" }
-    }, g = !!h, y = !!x;
-    return !g && !y ? b[n].both : !g && y ? b[n].left : g && !y ? b[n].right : "";
+    }, g = !!h, C = !!x;
+    return !g && !C ? b[n].both : !g && C ? b[n].left : g && !C ? b[n].right : "";
   };
   return /* @__PURE__ */ o(
     "button",
@@ -3327,7 +3327,7 @@ const Wa = {
         "focus:outline-none",
         u ? Aa : Wa[t],
         d.container,
-        C(),
+        y(),
         l
       ),
       ...c,
@@ -3654,7 +3654,7 @@ const Wa = {
     h(b), d("items"), r?.(b.id);
   }, v = () => {
     d("categories"), h(null);
-  }, C = (b) => {
+  }, y = (b) => {
     m && i?.(m.id, b.id);
   };
   return /* @__PURE__ */ o(
@@ -3709,7 +3709,7 @@ const Wa = {
               title: b.title,
               tag: b.tag,
               description: b.description,
-              onClick: () => C(b)
+              onClick: () => y(b)
             },
             b.id
           ))
@@ -3966,13 +3966,13 @@ const Wa = {
   placeholderColor: p,
   multiline: x,
   customFontWeight: v,
-  fontSize: C,
+  fontSize: y,
   customFontSize: b,
   hintIconVariant: g,
-  onInputClick: y,
+  onInputClick: C,
   ...k
 }, w) => {
-  const N = qa[t], I = Qa[n], M = m === "password", [T, V] = H(!1), D = M && T ? "text" : m, P = b || C, W = {
+  const N = qa[t], I = Qa[n], M = m === "password", [T, V] = H(!1), D = M && T ? "text" : m, P = b || y, W = {
     xs: "text-xs",
     sm: "text-sm",
     md: "text-base",
@@ -3982,7 +3982,7 @@ const Wa = {
     const ne = Q.currentTarget;
     ne.style.height = "auto", ne.style.height = `${ne.scrollHeight}px`, k.onChange && k.onChange(Q);
   }, E = h, z = E ? /^[a-z]+-[a-z0-9-]+$/i.test(E) ? `var(--${E})` : E : void 0, O = v || void 0, te = (Q) => {
-    y && (Q.preventDefault(), y());
+    C && (Q.preventDefault(), C());
   }, oe = A(f(
     "w-full bg-transparent text-placeholder focus:outline-none",
     !x && "h-full",
@@ -3996,12 +3996,12 @@ const Wa = {
     L,
     a && I.inputPaddingLeftWithIcon,
     (s || M && !x) && I.inputPaddingRightWithIcon,
-    y && "cursor-pointer pointer-events-none"
+    C && "cursor-pointer pointer-events-none"
   ));
   return /* @__PURE__ */ o(
     "div",
     {
-      className: A(f("flex flex-col gap-1.5", y && "cursor-pointer", d)),
+      className: A(f("flex flex-col gap-1.5", C && "cursor-pointer", d)),
       onClick: te,
       children: [
         r && /* @__PURE__ */ e("label", { htmlFor: k.id, className: A(f("font-semibold text-med-em pl-[2px]", I.labelFontSize)), children: r }),
@@ -4173,10 +4173,10 @@ const Xa = {
   customBackgroundColor: p,
   customHoverColor: x,
   customLeadingIconColor: v,
-  checked: C = !1,
+  checked: y = !1,
   indeterminate: b = !1,
   onCheckboxChange: g,
-  leadingImageUrl: y,
+  leadingImageUrl: C,
   leadingImageAlt: k = "List item image",
   leadingIcon: w,
   trailingIcon: N,
@@ -4214,18 +4214,18 @@ const Xa = {
           ke,
           {
             size: L.checkbox,
-            checked: C,
+            checked: y,
             indeterminate: b,
             onChange: j,
             disabled: n
           }
         ) }),
         /* @__PURE__ */ o("div", { className: A(f("flex items-center", L.middleGap), D), children: [
-          i && y && /* @__PURE__ */ e("div", { className: f("shrink-0", n && "opacity-50"), children: /* @__PURE__ */ e(
+          i && C && /* @__PURE__ */ e("div", { className: f("shrink-0", n && "opacity-50"), children: /* @__PURE__ */ e(
             F,
             {
               size: L.leadingImage,
-              imageUrl: y,
+              imageUrl: C,
               alt: k
             }
           ) }),
@@ -4310,14 +4310,14 @@ const Xa = {
     if (!h) return;
     const b = () => {
       if (!u?.current || !p.current) return;
-      const g = u.current.getBoundingClientRect(), y = p.current.getBoundingClientRect(), k = g.bottom + y.height + 8 > window.innerHeight ? g.top - y.height - 8 : g.bottom + 8, w = g.left + y.width > window.innerWidth ? g.right - y.width : g.left;
+      const g = u.current.getBoundingClientRect(), C = p.current.getBoundingClientRect(), k = g.bottom + C.height + 8 > window.innerHeight ? g.top - C.height - 8 : g.bottom + 8, w = g.left + C.width > window.innerWidth ? g.right - C.width : g.left;
       v({ position: "fixed", top: k, left: w, visibility: "visible", zIndex: 50 });
     };
     return b(), window.addEventListener("scroll", b, !0), window.addEventListener("resize", b), () => {
       window.removeEventListener("scroll", b, !0), window.removeEventListener("resize", b);
     };
   }, [u, h]);
-  const C = /* @__PURE__ */ o(
+  const y = /* @__PURE__ */ o(
     "div",
     {
       ref: p,
@@ -4354,14 +4354,14 @@ const Xa = {
           /* @__PURE__ */ e("div", { className: "border-t border-surface-3" })
         ] }),
         t.map((b, g) => {
-          const { id: y, showDividerAfter: k, onClick: w, onSelect: N, customBackgroundColor: I, customHoverColor: M, ...T } = b, V = y ? a.includes(y) : !1, D = g === t.length - 1;
+          const { id: C, showDividerAfter: k, onClick: w, onSelect: N, customBackgroundColor: I, customHoverColor: M, ...T } = b, V = C ? a.includes(C) : !1, D = g === t.length - 1;
           return /* @__PURE__ */ o(S.Fragment, { children: [
             /* @__PURE__ */ e(
               ot,
               {
                 size: i,
                 onClick: (P) => {
-                  N?.(), y && s?.(y), w?.(P);
+                  N?.(), C && s?.(C), w?.(P);
                 },
                 customBackgroundColor: I || "bg-surface-bg",
                 customHoverColor: M || "hover:bg-surface-2",
@@ -4375,12 +4375,12 @@ const Xa = {
               }
             ),
             k && !D && /* @__PURE__ */ e("div", { className: "border-t border-surface-3" })
-          ] }, y || g);
+          ] }, C || g);
         })
       ]
     }
   );
-  return h && typeof document < "u" ? Yt(C, document.body) : C;
+  return h && typeof document < "u" ? Yt(y, document.body) : y;
 }, Ka = ({
   id: t,
   title: n,
@@ -4504,7 +4504,7 @@ const Xa = {
     u(x), a?.(x);
   }, m = (p, x) => x.length === 0 ? null : /* @__PURE__ */ o("div", { children: [
     /* @__PURE__ */ e("div", { className: "px-8 py-8", children: /* @__PURE__ */ e("h3", { className: "text-xs font-semibold text-low-em", children: p }) }),
-    x.map((v, C) => /* @__PURE__ */ o(S.Fragment, { children: [
+    x.map((v, y) => /* @__PURE__ */ o(S.Fragment, { children: [
       /* @__PURE__ */ e(
         Ka,
         {
@@ -4515,7 +4515,7 @@ const Xa = {
           onClick: () => n?.(v)
         }
       ),
-      C < x.length - 1 && /* @__PURE__ */ e("div", { className: "border-b border-surface-2" })
+      y < x.length - 1 && /* @__PURE__ */ e("div", { className: "border-b border-surface-2" })
     ] }, v.id))
   ] }, p), h = c.today.length === 0 && c.last7Days.length === 0 && c.last30Days.length === 0 && c.last90Days.length === 0;
   return /* @__PURE__ */ o("div", { className: f("flex flex-col", i), children: [
@@ -4556,14 +4556,14 @@ const Xa = {
 }) => {
   const [c, d] = H("conversation"), m = B(null), h = 20, p = l * h, x = u * h;
   q(() => {
-    const C = m.current?.querySelector("textarea");
-    if (!C) return;
-    C.style.height = "0px", C.style.overflow = "hidden";
-    const b = C.scrollHeight, g = Math.max(p, Math.min(b, x));
-    C.style.height = `${g}px`, C.style.overflow = b > x ? "auto" : "hidden";
+    const y = m.current?.querySelector("textarea");
+    if (!y) return;
+    y.style.height = "0px", y.style.overflow = "hidden";
+    const b = y.scrollHeight, g = Math.max(p, Math.min(b, x));
+    y.style.height = `${g}px`, y.style.overflow = b > x ? "auto" : "hidden";
   }, [t, p, x]);
-  const v = (C) => {
-    C.key === "Enter" && !C.shiftKey && (C.preventDefault(), r?.());
+  const v = (y) => {
+    y.key === "Enter" && !y.shiftKey && (y.preventDefault(), r?.());
   };
   return /* @__PURE__ */ o(
     "div",
@@ -4591,7 +4591,7 @@ const Xa = {
             variant: "default",
             placeholder: i,
             value: t,
-            onChange: (C) => n?.(C.target.value),
+            onChange: (y) => n?.(y.target.value),
             onKeyDown: v,
             resize: "none",
             className: "[&_textarea]:!min-h-0"
@@ -4785,10 +4785,10 @@ const Xa = {
   onCloseClick: p,
   containerWidth: x = 0,
   historialItems: v = [],
-  onHistorialItemClick: C,
+  onHistorialItemClick: y,
   historialSearchPlaceholder: b,
   onHistorialSearchChange: g,
-  historialEmptyState: y,
+  historialEmptyState: C,
   showChatInput: k = !0,
   chatInputValue: w,
   onChatInputChange: N,
@@ -4827,10 +4827,10 @@ const Xa = {
           ti,
           {
             items: v,
-            onItemClick: C,
+            onItemClick: y,
             searchPlaceholder: b,
             onSearchChange: g,
-            emptyState: y,
+            emptyState: C,
             className: "flex-1 overflow-y-auto"
           }
         ) : /* @__PURE__ */ o(ee, { children: [
@@ -4931,13 +4931,13 @@ const oi = {
       size: void 0
     };
     return S.cloneElement(V, P);
-  }, p = !!l && r !== "disabled", x = !!a && c, v = !!s && d, C = oi[t], b = ci[r], g = di(n, r), y = A(
+  }, p = !!l && r !== "disabled", x = !!a && c, v = !!s && d, y = oi[t], b = ci[r], g = di(n, r), C = A(
     // Base styles
     "inline-flex items-center border border-solid transition-all duration-150 rounded-full font-family-inter",
     // State styles
     b,
     // Size styles
-    C.container,
+    y.container,
     // State specific styles (Sobreescribe los estilos de theme y size)
     g,
     // Interactive styles
@@ -4946,7 +4946,7 @@ const oi = {
     r === "drag" && "cursor-grabbing",
     // Custom classes
     u
-  ), k = "flex-shrink-0 inline-flex items-center justify-center", w = C.iconSize, N = C.gapValue, I = /* @__PURE__ */ e(
+  ), k = "flex-shrink-0 inline-flex items-center justify-center", w = y.iconSize, N = y.gapValue, I = /* @__PURE__ */ e(
     "div",
     {
       className: k,
@@ -4972,7 +4972,7 @@ const oi = {
   return /* @__PURE__ */ o(
     "div",
     {
-      className: y,
+      className: C,
       role: p ? "button" : "status",
       onClick: p ? l : void 0,
       tabIndex: p ? 0 : void 0,
@@ -5127,10 +5127,10 @@ const oi = {
   onChange: p,
   placeholder: x,
   className: v,
-  placeholderColor: C,
+  placeholderColor: y,
   inputTextColor: b,
   backgroundColor: g,
-  chevronColor: y = "currentColor",
+  chevronColor: C = "currentColor",
   optionActiveColor: k = "bg-primary-500",
   optionActiveTextColor: w = "text-white",
   optionTextColor: N = "text-gray-900",
@@ -5142,7 +5142,7 @@ const oi = {
     f(
       "w-full flex-1 bg-transparent focus:outline-none",
       V.input,
-      C,
+      y,
       b
     )
   ), Z = A(
@@ -5170,7 +5170,7 @@ const oi = {
             displayValue: (j) => j?.label
           }
         ),
-        P.showTrailingChevron && !d && /* @__PURE__ */ e(He.Button, { className: f("flex items-center", { "w-full h-full justify-center": t === "only_icon" }), children: /* @__PURE__ */ e(je, { size: D.icon, color: y }) }),
+        P.showTrailingChevron && !d && /* @__PURE__ */ e(He.Button, { className: f("flex items-center", { "w-full h-full justify-center": t === "only_icon" }), children: /* @__PURE__ */ e(je, { size: D.icon, color: C }) }),
         P.showTrailingAddon && d && /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: d })
       ] }),
       /* @__PURE__ */ e(He.Options, { className: "absolute z-10 mt-1 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm", children: W.length === 0 && M !== "" ? /* @__PURE__ */ e("div", { className: "relative cursor-default select-none px-4 py-2 text-gray-700", children: "Nothing found." }) : W.map((j) => /* @__PURE__ */ e(
@@ -5279,7 +5279,7 @@ const oi = {
     base: "text-base",
     lg: "text-lg",
     xl: "text-xl"
-  }, C = {
+  }, y = {
     xs: 12,
     sm: 16,
     base: 18,
@@ -5290,7 +5290,7 @@ const oi = {
     medium: "font-medium",
     semibold: "font-semibold",
     bold: "font-bold"
-  }, g = v[d] || void 0, y = v[d] ? void 0 : d, k = l ?? C[d] ?? 20, w = !!p && x !== "disabled", N = A(
+  }, g = v[d] || void 0, C = v[d] ? void 0 : d, k = l ?? y[d] ?? 20, w = !!p && x !== "disabled", N = A(
     f(
       "flex border border-surface-3 w-full items-center px-6 h-14 text-left text-sm font-medium transition-colors rounded-xl",
       // State-specific styles
@@ -5324,7 +5324,7 @@ const oi = {
           "span",
           {
             className: I,
-            style: y ? { fontSize: y } : void 0,
+            style: C ? { fontSize: C } : void 0,
             children: t
           }
         ),
@@ -5425,10 +5425,10 @@ const xi = {
   customHeight: p,
   customRadius: x,
   customPlaceholderColor: v,
-  customBackgroundColor: C,
+  customBackgroundColor: y,
   leadingIcon: b,
   showLeadingIcon: g = !0,
-  hintIconVariant: y,
+  hintIconVariant: C,
   menuMinHeight: k
 }) => {
   const w = xi[t], N = bi[n], I = r || n, M = B(null), T = B(null), [V, D] = H(!1), [P, W] = H(null), [L, Z] = H(!1), j = s.find(($) => $.id === d);
@@ -5473,7 +5473,7 @@ const xi = {
   }, Q = () => {
     if (x)
       return { borderRadius: x };
-  }, ne = v?.startsWith("var(") ? { color: v } : void 0, _ = v && !v.startsWith("var(") ? v : void 0, G = C && !C.startsWith("#") && !C.startsWith("rgb") ? C : void 0, ce = C && (C.startsWith("#") || C.startsWith("rgb")) ? { backgroundColor: C } : void 0;
+  }, ne = v?.startsWith("var(") ? { color: v } : void 0, _ = v && !v.startsWith("var(") ? v : void 0, G = y && !y.startsWith("#") && !y.startsWith("rgb") ? y : void 0, ce = y && (y.startsWith("#") || y.startsWith("rgb")) ? { backgroundColor: y } : void 0;
   return /* @__PURE__ */ o("div", { className: f("w-full flex flex-col gap-1.5", c), children: [
     i && /* @__PURE__ */ e(
       "label",
@@ -5500,7 +5500,7 @@ const xi = {
             "relative w-full cursor-default border text-left transition-colors duration-200 focus:outline-none focus-visible:ring-2",
             "flex items-center",
             !p && N.wrapper,
-            !C && w.wrapper,
+            !y && w.wrapper,
             G,
             l && Le.wrapper,
             !x && "rounded-xl"
@@ -5581,7 +5581,7 @@ const xi = {
     a && /* @__PURE__ */ e(
       xe,
       {
-        icon: /* @__PURE__ */ e(Ae, { variant: y }),
+        icon: /* @__PURE__ */ e(Ae, { variant: C }),
         label: a,
         iconSize: N.hintIconSize,
         gap: 1,
@@ -5984,7 +5984,7 @@ const Tl = ({
     ...x
   } = t, v = S.Children.toArray(l).find(
     (g) => S.isValidElement(g) && g.type === xn
-  ), C = S.Children.toArray(l).find(
+  ), y = S.Children.toArray(l).find(
     (g) => S.isValidElement(g) && g.type === bn
   ), b = S.Children.toArray(l).find(
     (g) => S.isValidElement(g) && g.type === vn
@@ -6019,7 +6019,7 @@ const Tl = ({
             ]
           }
         ),
-        C && /* @__PURE__ */ e(
+        y && /* @__PURE__ */ e(
           "div",
           {
             className: K(
@@ -6028,7 +6028,7 @@ const Tl = ({
               d !== void 0 ? "" : "flex-1"
             ),
             style: d !== void 0 ? { width: `${d}%` } : void 0,
-            children: C
+            children: y
           }
         ),
         /* @__PURE__ */ e(
@@ -6216,7 +6216,7 @@ const Si = {
   disabled: l = !1,
   initialPreviewUrl: u
 }) => {
-  const c = B(null), d = B(0), [m, h] = H(!1), [p, x] = H(u || null), [v, C] = H(!1), [b, g] = H(null), y = Si[n], k = Li[r], w = (L) => {
+  const c = B(null), d = B(0), [m, h] = H(!1), [p, x] = H(u || null), [v, y] = H(!1), [b, g] = H(null), C = Si[n], k = Li[r], w = (L) => {
     if (s && L.size > s) {
       const Z = (s / 1048576).toFixed(1);
       g(`File size must be less than ${Z}MB`);
@@ -6240,15 +6240,15 @@ const Si = {
   }, D = (L) => {
     L.stopPropagation(), c.current?.click();
   }, P = () => {
-    l || C(!0);
+    l || y(!0);
   }, W = () => {
-    C(!1);
+    y(!1);
   };
   return /* @__PURE__ */ e("div", { className: f("flex flex-col", i), children: /* @__PURE__ */ e(
     "div",
     {
       className: f(
-        y.container,
+        C.container,
         k.container,
         l && Wt.container
       ),
@@ -6256,7 +6256,7 @@ const Si = {
         "div",
         {
           className: f(
-            y.dropZone,
+            C.dropZone,
             k.dropZone,
             "cursor-pointer relative",
             l && Wt.dropZone,
@@ -6465,10 +6465,10 @@ const Ii = Y(
     name: p,
     autoComplete: x,
     maxLength: v,
-    required: C,
+    required: y,
     onBlur: b,
     onFocus: g,
-    onInvalid: y,
+    onInvalid: C,
     "aria-label": k = "Search",
     className: w,
     size: N,
@@ -6542,7 +6542,7 @@ const Ii = Y(
           onKeyDown: te,
           onFocus: oe,
           onBlur: b,
-          onInvalid: y,
+          onInvalid: C,
           variant: _,
           hint: a,
           leadingIcon: /* @__PURE__ */ e(Fe, { color: "currentColor", size: 16 }),
@@ -6553,7 +6553,7 @@ const Ii = Y(
           name: p,
           autoComplete: x,
           maxLength: v,
-          required: C,
+          required: y,
           "aria-label": k,
           ...I
         }
@@ -6648,8 +6648,8 @@ const Dl = ({
 }) => {
   if (c)
     return t;
-  const v = d || m, C = {};
-  return h && (C.backgroundColor = h), p && (C.color = p), x && (C.fontSize = x), /* @__PURE__ */ o(ie.Root, { delayDuration: u, children: [
+  const v = d || m, y = {};
+  return h && (y.backgroundColor = h), p && (y.color = p), x && (y.fontSize = x), /* @__PURE__ */ o(ie.Root, { delayDuration: u, children: [
     /* @__PURE__ */ e(ie.Trigger, { asChild: !0, children: t }),
     /* @__PURE__ */ e(ie.Portal, { children: /* @__PURE__ */ o(
       ie.Content,
@@ -6670,7 +6670,7 @@ const Dl = ({
           "data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade",
           s
         ),
-        style: Object.keys(C).length > 0 ? C : void 0,
+        style: Object.keys(y).length > 0 ? y : void 0,
         children: [
           /* @__PURE__ */ o("div", { className: f(v && "flex flex-col gap-8"), children: [
             /* @__PURE__ */ e("div", { children: n }),
@@ -7215,12 +7215,12 @@ function Wi({
   recommendedIcon: p,
   loading: x = !1,
   ctaVariant: v = "neutral",
-  ctaHierarchy: C = "primary",
+  ctaHierarchy: y = "primary",
   sectionColor: b = "bg-white",
   sectionTextColor: g,
-  className: y
+  className: C
 }) {
-  return /* @__PURE__ */ o("div", { className: A(f("relative w-full flex flex-col", y)), children: [
+  return /* @__PURE__ */ o("div", { className: A(f("relative w-full flex flex-col", C)), children: [
     m && /* @__PURE__ */ e("div", { className: "absolute -top-9 left-1/2 -translate-x-1/2 z-10 whitespace-nowrap", children: /* @__PURE__ */ e(we, { size: "lg", theme: "surface", variant: "outlined", children: /* @__PURE__ */ e(
       xe,
       {
@@ -7249,7 +7249,7 @@ function Wi({
           R,
           {
             variant: v,
-            hierarchy: C,
+            hierarchy: y,
             size: "md",
             className: "w-full",
             onClick: l,
@@ -7358,16 +7358,16 @@ const St = ({
   link2Href: p,
   link2Status: x,
   onCardClick: v,
-  className: C,
+  className: y,
   ...b
 }, g) => {
-  const y = f(
+  const C = f(
     "flex flex-col overflow-hidden transition-all duration-200 w-full min-w-0 p-4 gap-3 border rounded-2xl border-surface-3",
     "bg-white",
     "p-6 md:p-8 gap-6 md:gap-8"
   ), k = A(f(
-    y,
-    C
+    C,
+    y
   ));
   return /* @__PURE__ */ o(
     "div",
@@ -7520,7 +7520,7 @@ const At = ({
   id: c,
   ...d
 }) => {
-  const m = Math.min(100, Math.max(0, t)), h = S.useId(), p = c || `progress-circle-${h}`, x = s ? `${p}-label` : void 0, v = tt[n], C = Ai[r], b = () => u || (s ? `Progreso: ${s}, ${m}% completado` : `Progreso: ${m}% completado`), g = v.size, y = (g - v.strokeWidth) / 2, k = 2 * Math.PI * y, w = k - m / 100 * k, N = () => i === "circle" ? tt[n].container : tt[n].halfCircle, I = () => /* @__PURE__ */ o(
+  const m = Math.min(100, Math.max(0, t)), h = S.useId(), p = c || `progress-circle-${h}`, x = s ? `${p}-label` : void 0, v = tt[n], y = Ai[r], b = () => u || (s ? `Progreso: ${s}, ${m}% completado` : `Progreso: ${m}% completado`), g = v.size, C = (g - v.strokeWidth) / 2, k = 2 * Math.PI * C, w = k - m / 100 * k, N = () => i === "circle" ? tt[n].container : tt[n].halfCircle, I = () => /* @__PURE__ */ o(
     "svg",
     {
       width: g,
@@ -7540,12 +7540,12 @@ const At = ({
           {
             cx: g / 2,
             cy: g / 2,
-            r: y,
+            r: C,
             stroke: "currentColor",
             strokeWidth: v.strokeWidth,
             fill: "none",
-            className: C.track,
-            opacity: C.opacity
+            className: y.track,
+            opacity: y.opacity
           }
         ),
         /* @__PURE__ */ e(
@@ -7553,11 +7553,11 @@ const At = ({
           {
             cx: g / 2,
             cy: g / 2,
-            r: y,
+            r: C,
             stroke: "currentColor",
             strokeWidth: v.strokeWidth,
             fill: "none",
-            className: C.fill,
+            className: y.fill,
             strokeDasharray: k,
             strokeDashoffset: w,
             strokeLinecap: "round",
@@ -7597,8 +7597,8 @@ const At = ({
               strokeLinejoin: "round",
               strokeWidth: v.strokeWidth,
               stroke: "currentColor",
-              className: C.track,
-              opacity: C.opacity
+              className: y.track,
+              opacity: y.opacity
             }
           ),
           /* @__PURE__ */ e(
@@ -7610,7 +7610,7 @@ const At = ({
               strokeLinejoin: "round",
               strokeWidth: v.strokeWidth,
               stroke: "currentColor",
-              className: C.fill,
+              className: y.fill,
               strokeDasharray: E,
               strokeDashoffset: z,
               style: {
@@ -7648,7 +7648,7 @@ const At = ({
                   id: x,
                   className: f(
                     v.labelFontSize,
-                    C.label
+                    y.label
                   ),
                   children: s
                 }
@@ -7659,7 +7659,7 @@ const At = ({
                   className: f(
                     v.fontSize,
                     v.lineHeight,
-                    C.progressLabel
+                    y.progressLabel
                   ),
                   style: { fontFamily: "var(--font-space-grotesk)" },
                   children: `${m}%`
@@ -7683,7 +7683,7 @@ const At = ({
                   id: x,
                   className: f(
                     v.labelFontSize,
-                    C.label
+                    y.label
                   ),
                   children: s
                 }
@@ -7694,7 +7694,7 @@ const At = ({
                   className: f(
                     v.fontSize,
                     v.lineHeight,
-                    C.progressLabel
+                    y.progressLabel
                   ),
                   style: { fontFamily: "var(--font-space-grotesk)" },
                   children: `${m}%`
@@ -7727,20 +7727,20 @@ const At = ({
     const b = !h;
     p(b), c && c(b);
   }, v = S.useMemo(() => Array.from({ length: n }, (b, g) => {
-    const y = g + 1;
+    const C = g + 1;
     let k;
-    return y < t ? k = 100 : k = 0, {
+    return C < t ? k = 100 : k = 0, {
       progress: k,
-      description: i[g] || `Step ${y}`
+      description: i[g] || `Step ${C}`
     };
-  }), [t, n, i]), C = n > 0 ? Math.round((t - 1) / n * 100 + r / n) : 0;
+  }), [t, n, i]), y = n > 0 ? Math.round((t - 1) / n * 100 + r / n) : 0;
   return m ? /* @__PURE__ */ e(
     Ft,
     {
-      progress: C,
+      progress: y,
       size: "xs",
       showLabel: !0,
-      ariaLabel: `Overall progress: ${C}%`,
+      ariaLabel: `Overall progress: ${y}%`,
       className: l
     }
   ) : /* @__PURE__ */ o(
@@ -7803,10 +7803,10 @@ const At = ({
             /* @__PURE__ */ e(
               Ft,
               {
-                progress: C,
+                progress: y,
                 size: "xs",
                 showLabel: !0,
-                ariaLabel: `Overall progress: ${C}%`
+                ariaLabel: `Overall progress: ${y}%`
               }
             ),
             /* @__PURE__ */ e(
@@ -8074,7 +8074,7 @@ const At = ({
   }), [m, h] = S.useState(a.searchValue || ""), [p, x] = S.useState(() => ({
     pageIndex: (a.currentPage || 1) - 1,
     pageSize: a.itemsPerPage || 10
-  })), [v, C] = S.useState({});
+  })), [v, y] = S.useState({});
   S.useEffect(() => {
     if (a.sortBy && a.sortDirection) {
       const w = [{ id: a.sortBy, desc: a.sortDirection === "desc" }];
@@ -8141,7 +8141,7 @@ const At = ({
     },
     enableColumnResizing: !0,
     columnResizeMode: "onChange",
-    onColumnSizingChange: C,
+    onColumnSizingChange: y,
     defaultColumn: {
       minSize: 20,
       maxSize: Number.MAX_SAFE_INTEGER,
@@ -8180,7 +8180,7 @@ const At = ({
     manualPagination: !1,
     manualSorting: !1,
     getRowId: (w, N) => String(a.getRowId?.(w, N) ?? N)
-  }), y = S.useMemo(() => ({
+  }), C = S.useMemo(() => ({
     dense: !1,
     cellBorder: !1,
     rowBorder: !0,
@@ -8198,7 +8198,7 @@ const At = ({
   };
   return /* @__PURE__ */ e(_i, { value: {
     table: g,
-    tableLayout: y,
+    tableLayout: C,
     parentRef: s,
     emptyStateTitle: a.emptyStateTitle,
     emptyStateDescription: a.emptyStateDescription,
@@ -8576,13 +8576,13 @@ const At = ({
     l.setPageIndex(w);
   }, p = (k) => {
     l.setPageSize(Number(k));
-  }, x = () => l.previousPage(), v = () => l.nextPage(), C = l.getFilteredRowModel().rows.length, { total: b } = Xi(
+  }, x = () => l.previousPage(), v = () => l.nextPage(), y = l.getFilteredRowModel().rows.length, { total: b } = Xi(
     u.pageIndex,
     u.pageSize,
     n,
-    C
-  ), g = Qi(i), y = u.pageSize;
-  return !t || C === 0 ? null : /* @__PURE__ */ o(
+    y
+  ), g = Qi(i), C = u.pageSize;
+  return !t || y === 0 ? null : /* @__PURE__ */ o(
     "div",
     {
       className: f(
@@ -8599,7 +8599,7 @@ const At = ({
               className: "!w-[68px]",
               size: "sm",
               variant: "outlined",
-              value: String(y),
+              value: String(C),
               items: g,
               onChange: p,
               showLeadingIcon: !1,
@@ -8860,8 +8860,8 @@ const At = ({
                         {
                           htmlFor: `column-${p.id}`,
                           className: "ml-2 text-sm text-gray-700 cursor-pointer",
-                          onClick: (C) => {
-                            C.stopPropagation(), p.toggleVisibility();
+                          onClick: (y) => {
+                            y.stopPropagation(), p.toggleVisibility();
                           },
                           children: v
                         }
@@ -8870,8 +8870,8 @@ const At = ({
                     /* @__PURE__ */ e(
                       "button",
                       {
-                        onClick: (C) => {
-                          C.stopPropagation(), p.toggleVisibility();
+                        onClick: (y) => {
+                          y.stopPropagation(), p.toggleVisibility();
                         },
                         className: "p-1 rounded hover:bg-gray-200",
                         children: x ? /* @__PURE__ */ e(Pe, { size: "16", className: "text-gray-600" }) : /* @__PURE__ */ e(Ve, { size: "16", className: "text-gray-400" })
@@ -9307,9 +9307,9 @@ const is = {
   tabPaddingX: p,
   tabListClassName: x
 }) => {
-  const v = t === "line-icons" || t === "only-icon" ? Gt.line : Gt[t], C = m ? v.list : v.list.replace(/border-b\s+border-surface-3/g, "").trim(), b = {};
+  const v = t === "line-icons" || t === "only-icon" ? Gt.line : Gt[t], y = m ? v.list : v.list.replace(/border-b\s+border-surface-3/g, "").trim(), b = {};
   h && (b.height = `${h}px`, b.alignItems = "flex-end");
-  const g = () => typeof l == "number" ? "" : l in nt ? nt[l] : nt.sm, y = typeof l == "number" ? { marginTop: `${l}px` } : {}, k = u ? {
+  const g = () => typeof l == "number" ? "" : l in nt ? nt[l] : nt.sm, C = typeof l == "number" ? { marginTop: `${l}px` } : {}, k = u ? {
     height: "100%",
     maxHeight: "100%",
     overflow: "hidden",
@@ -9328,7 +9328,7 @@ const is = {
         /* @__PURE__ */ e(
           ge.List,
           {
-            className: f(C, x),
+            className: f(y, x),
             style: b,
             children: n.map((N) => /* @__PURE__ */ e(
               ge,
@@ -9375,8 +9375,8 @@ const is = {
               flex: 1,
               minHeight: 0,
               overflow: "hidden",
-              ...y
-            } : y,
+              ...C
+            } : C,
             children: n.map((N) => /* @__PURE__ */ e(
               ge.Panel,
               {
@@ -9408,21 +9408,21 @@ const is = {
 }) => {
   const d = B(null), [m, h] = H(!1), [p, x] = H(!1), v = () => {
     if (!d.current) return;
-    const { scrollLeft: g, scrollWidth: y, clientWidth: k } = d.current;
-    h(g > 0), x(g < y - k - 1);
+    const { scrollLeft: g, scrollWidth: C, clientWidth: k } = d.current;
+    h(g > 0), x(g < C - k - 1);
   };
   q(() => {
     v();
     const g = d.current;
     if (g) {
       g.addEventListener("scroll", v);
-      const y = new ResizeObserver(v);
-      return y.observe(g), () => {
-        g.removeEventListener("scroll", v), y.disconnect();
+      const C = new ResizeObserver(v);
+      return C.observe(g), () => {
+        g.removeEventListener("scroll", v), C.disconnect();
       };
     }
   }, [t]);
-  const C = () => {
+  const y = () => {
     d.current && d.current.scrollBy({ left: -c, behavior: "smooth" });
   }, b = () => {
     d.current && d.current.scrollBy({ left: c, behavior: "smooth" });
@@ -9431,7 +9431,7 @@ const is = {
     m && /* @__PURE__ */ e(
       "button",
       {
-        onClick: C,
+        onClick: y,
         className: "h-full hover:bg-surface-bg cursor-pointer px-6 border-r border-surface-3 shrink-0",
         "aria-label": "Scroll left",
         children: /* @__PURE__ */ e(F, { className: "text-med-em", size: "xs", children: /* @__PURE__ */ e(qe, {}) })
@@ -9442,7 +9442,7 @@ const is = {
       {
         ref: d,
         className: "flex-1  h-full w-full  overflow-x-auto [&::-webkit-scrollbar]:!hidden [-ms-overflow-style:none!important] [scrollbar-width:none!important]",
-        children: /* @__PURE__ */ e(ge.List, { className: "flex min-w-full h-full ", children: t.map((g, y) => /* @__PURE__ */ e(
+        children: /* @__PURE__ */ e(ge.List, { className: "flex min-w-full h-full ", children: t.map((g, C) => /* @__PURE__ */ e(
           ge,
           {
             as: "div",
@@ -9453,14 +9453,14 @@ const is = {
               u ? "" : "flex-1",
               k ? "text-high-em bg-white after:absolute border-b-2 border-b-black" : "text-low-em bg-surface-bg hover:bg-surface-2"
             ),
-            style: u ? { width: `${u}px`, minWidth: `${u}px` } : void 0,
+            style: u ? r === C ? { minWidth: `${u}px` } : { width: `${u}px`, minWidth: `${u}px` } : void 0,
             children: ({ selected: k }) => /* @__PURE__ */ o("div", { className: "flex items-center justify-between gap-8 p-8 w-full", children: [
               /* @__PURE__ */ e("span", { className: `!truncate text-sm text-high-em font-medium ${k ? "text-high-em" : "text-low-em"}`, children: g.label }),
               g.closeable && k && l && /* @__PURE__ */ e(
                 R,
                 {
                   onClick: (w) => {
-                    w.stopPropagation(), l(y);
+                    w.stopPropagation(), l(C);
                   },
                   className: "cursor-pointer",
                   leadingIcon: /* @__PURE__ */ e(F, { size: "xs", className: "text-med-em", children: /* @__PURE__ */ e(be, {}) }),
@@ -9537,7 +9537,7 @@ const hs = {
   customBackground: d,
   ...m
 }) => {
-  const h = hs[t], p = us[n], x = c || void 0, v = d ? /^[a-z]+-[a-z0-9-]+$/i.test(d) ? `var(--${d})` : d : void 0, C = {
+  const h = hs[t], p = us[n], x = c || void 0, v = d ? /^[a-z]+-[a-z0-9-]+$/i.test(d) ? `var(--${d})` : d : void 0, y = {
     none: "resize-none",
     vertical: "resize-y",
     horizontal: "resize-x",
@@ -9565,7 +9565,7 @@ const hs = {
               !c && "font-medium",
               h.text,
               h.placeholder,
-              C[l],
+              y[l],
               s && Me.text,
               s && Me.placeholder
             ),
@@ -9955,7 +9955,7 @@ const eo = ({
   placeholder: u = "All",
   showLabel: c = !0
 }) => {
-  const [d, m] = H("basicos"), [h, p] = H("list"), x = n !== void 0 ? n : d, v = i !== void 0 ? i : h, C = (g) => {
+  const [d, m] = H("basicos"), [h, p] = H("list"), x = n !== void 0 ? n : d, v = i !== void 0 ? i : h, y = (g) => {
     r ? r(g) : m(g);
   }, b = (g) => {
     a ? a(g) : p(g);
@@ -9993,7 +9993,7 @@ const eo = ({
             className: "!h-[34px]"
           })),
           value: x,
-          onChange: C,
+          onChange: y,
           placeholder: u,
           size: "md",
           menuSize: "sm",
@@ -10029,7 +10029,7 @@ const eo = ({
       r ? r(g) : d(g);
     },
     [r]
-  ), C = (b) => {
+  ), y = (b) => {
     s ? s(b) : h(b);
   };
   return /* @__PURE__ */ o("div", { className: `flex flex-col ${t}`, children: [
@@ -10050,7 +10050,7 @@ const eo = ({
         {
           options: l,
           value: x,
-          onChange: C,
+          onChange: y,
           size: u
         }
       )
@@ -10068,8 +10068,10 @@ const eo = ({
     className: f(
       // Layout
       "flex items-center gap-2",
-      // Sizing - fixed height 56px
-      "h-14 px-4",
+      // Sizing — fixed height 56px. We use the arbitrary value because the
+      // DS spacing scale redefines `h-14` to 48px (--spacing-14), so a
+      // plain `h-14` would no longer be 56px in this theme.
+      "h-[56px] px-4",
       // Border
       "border-b border-surface-3",
       // Allow customization
@@ -10203,8 +10205,8 @@ const ao = ({
                     {
                       size: "small",
                       checked: v.switch.checked,
-                      onChange: (C) => h(v, C.target.checked),
-                      onClick: (C) => C.stopPropagation()
+                      onChange: (y) => h(v, y.target.checked),
+                      onClick: (y) => y.stopPropagation()
                     }
                   )
                 ]
@@ -10237,7 +10239,7 @@ const ao = ({
     h(g), n && n(g);
   }, v = () => {
     h(void 0), i && i();
-  }, C = () => {
+  }, y = () => {
     a && a(p);
   }, b = l === "range" ? {
     mode: "range",
@@ -10291,7 +10293,7 @@ const ao = ({
               variant: "brand",
               size: "sm",
               hierarchy: "primary",
-              onClick: C,
+              onClick: y,
               disabled: r,
               children: d
             }
@@ -10681,9 +10683,9 @@ const ao = ({
   classNameHeader: p,
   classNameBody: x,
   classNameFooter: v,
-  ...C
+  ...y
 }) => {
-  const b = n || r || u || i, g = d || m, y = {
+  const b = n || r || u || i, g = d || m, C = {
     default: "border-surface-3 ",
     danger: "bg-danger-accent-1  border-danger-accent-3",
     warning: "bg-warning-accent-1 border-warning-accent-3",
@@ -10695,9 +10697,9 @@ const ao = ({
       className: f(
         "flex flex-col bg-white border rounded-8 w-full",
         t,
-        y[h]
+        C[h]
       ),
-      ...C,
+      ...y,
       children: [
         b && /* @__PURE__ */ o(
           "div",
@@ -10730,7 +10732,7 @@ const ao = ({
                 "flex flex-row gap-10 p-8 items-center rounded-b-8",
                 d && m ? "justify-between" : m ? "justify-end" : "justify-start",
                 (b || c) && "border-t",
-                y[h]
+                C[h]
               ),
               v
             ),
@@ -10960,7 +10962,7 @@ const ao = ({
       value: "add",
       icon: /* @__PURE__ */ e(F, { size: 12, children: /* @__PURE__ */ e(We, {}) })
     }
-  ], C = [
+  ], y = [
     {
       value: "copy",
       icon: /* @__PURE__ */ e(F, { size: 12, children: /* @__PURE__ */ e(ft, {}) })
@@ -10999,7 +11001,7 @@ const ao = ({
       default:
         return "grid-cols-1";
     }
-  }, y = (w, N) => w === "2-1" ? N === 0 ? "col-span-2" : "col-span-1" : w === "1-2" ? N === 0 ? "col-span-1" : "col-span-2" : "col-span-1", k = (w) => w === "1" ? 1 : w === "2" || w === "2-1" || w === "1-2" || w === "1-1" ? 2 : w === "3" ? 3 : 1;
+  }, C = (w, N) => w === "2-1" ? N === 0 ? "col-span-2" : "col-span-1" : w === "1-2" ? N === 0 ? "col-span-1" : "col-span-2" : "col-span-1", k = (w) => w === "1" ? 1 : w === "2" || w === "2-1" || w === "1-2" || w === "1-1" ? 2 : w === "3" ? 3 : 1;
   return /* @__PURE__ */ o(
     "div",
     {
@@ -11023,7 +11025,7 @@ const ao = ({
           /* @__PURE__ */ e(
             Ce,
             {
-              options: C,
+              options: y,
               value: u,
               onChange: x,
               size: "xs",
@@ -11039,7 +11041,7 @@ const ao = ({
               children: w.columns.map((N, I) => /* @__PURE__ */ e(
                 "div",
                 {
-                  className: f(y(w.layout, I)),
+                  className: f(C(w.layout, I)),
                   children: /* @__PURE__ */ e(Ns, { className: "h-full", onAction: w.onAction, children: N.widgets.sort((M, T) => M.position - T.position).map((M) => /* @__PURE__ */ e(
                     ys,
                     {
@@ -11167,13 +11169,13 @@ const ao = ({
   onSettings: a,
   className: s
 }) => {
-  const [l, u] = H(""), [c, d] = H(""), [m, h] = H(""), [p, x] = H(""), [v, C] = H(!1), [b, g] = H(!1), y = t === "signup";
+  const [l, u] = H(""), [c, d] = H(""), [m, h] = H(""), [p, x] = H(""), [v, y] = H(!1), [b, g] = H(!1), C = t === "signup";
   return /* @__PURE__ */ e(
     Te,
     {
       size: "1",
       className: s,
-      title: n ?? (y ? "Regístrarse" : "Iniciar sesión"),
+      title: n ?? (C ? "Regístrarse" : "Iniciar sesión"),
       actions: r === null ? void 0 : r ?? /* @__PURE__ */ e(
         R,
         {
@@ -11193,17 +11195,17 @@ const ao = ({
             const N = {
               email: c,
               password: m,
-              ...y && { name: l, confirmPassword: p }
+              ...C && { name: l, confirmPassword: p }
             };
             i?.(N);
           },
           className: "flex flex-col gap-8 p-8 h-full mx-auto justify-center max-w-74",
           children: [
-            !y && /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: [
+            !C && /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: [
               /* @__PURE__ */ e("h2", { className: "text-high-em font-semibold text-2xl self-center", children: "¡Automatiza!" }),
               /* @__PURE__ */ e("span", { className: "text-high-em text-md self-center", children: "Vende y gestiona con inteligencia" })
             ] }),
-            y && /* @__PURE__ */ e(
+            C && /* @__PURE__ */ e(
               ae,
               {
                 type: "text",
@@ -11232,27 +11234,27 @@ const ao = ({
               {
                 type: v ? "text" : "password",
                 name: "password",
-                autoComplete: y ? "new-password" : "current-password",
+                autoComplete: C ? "new-password" : "current-password",
                 value: m,
                 onChange: (w) => h(w.target.value),
-                placeholder: y ? "Nueva contraseña" : "Contraseña",
+                placeholder: C ? "Nueva contraseña" : "Contraseña",
                 trailingIcon: /* @__PURE__ */ e(F, { children: v ? /* @__PURE__ */ e(
                   Pe,
                   {
-                    onClick: () => C(!1),
+                    onClick: () => y(!1),
                     className: "cursor-pointer"
                   }
                 ) : /* @__PURE__ */ e(
                   Ve,
                   {
-                    onClick: () => C(!0),
+                    onClick: () => y(!0),
                     className: "cursor-pointer"
                   }
                 ) }),
                 required: !0
               }
             ),
-            y && /* @__PURE__ */ e(
+            C && /* @__PURE__ */ e(
               ae,
               {
                 type: b ? "text" : "password",
@@ -11396,8 +11398,8 @@ const ao = ({
           onClick: a
         }
       ),
-      children: /* @__PURE__ */ o("form", { onSubmit: (C) => {
-        C.preventDefault(), r?.(l, c);
+      children: /* @__PURE__ */ o("form", { onSubmit: (y) => {
+        y.preventDefault(), r?.(l, c);
       }, className: "flex flex-col gap-8 p-8 h-full mx-auto justify-center max-w-74", children: [
         /* @__PURE__ */ e("h2", { className: "text-high-em font-semibold text-2xl self-center", children: "Cambiar contraseña" }),
         /* @__PURE__ */ e(
@@ -11405,7 +11407,7 @@ const ao = ({
           {
             type: m ? "text" : "password",
             value: l,
-            onChange: (C) => u(C.target.value),
+            onChange: (y) => u(y.target.value),
             placeholder: "Nueva contraseña",
             trailingIcon: /* @__PURE__ */ e(F, { children: m ? /* @__PURE__ */ e(Pe, { onClick: () => h(!1), className: "cursor-pointer" }) : /* @__PURE__ */ e(Ve, { onClick: () => h(!0), className: "cursor-pointer" }) }),
             required: !0
@@ -11416,7 +11418,7 @@ const ao = ({
           {
             type: p ? "text" : "password",
             value: c,
-            onChange: (C) => d(C.target.value),
+            onChange: (y) => d(y.target.value),
             placeholder: "Confirmar contraseña",
             trailingIcon: /* @__PURE__ */ e(F, { children: p ? /* @__PURE__ */ e(Pe, { onClick: () => x(!1), className: "cursor-pointer" }) : /* @__PURE__ */ e(Ve, { onClick: () => x(!0), className: "cursor-pointer" }) }),
             required: !0
@@ -11736,7 +11738,7 @@ const zs = S.forwardRef(
     innerRef: m,
     style: h
   }, p) => {
-    const [x, v] = S.useState(!1), C = x && u;
+    const [x, v] = S.useState(!1), y = x && u;
     return /* @__PURE__ */ o(
       "div",
       {
@@ -11761,8 +11763,8 @@ const zs = S.forwardRef(
                     {
                       className: "flex items-center overflow-hidden transition-all duration-200 ease-out",
                       style: {
-                        width: C ? "28px" : "0px",
-                        opacity: C ? 1 : 0
+                        width: y ? "28px" : "0px",
+                        opacity: y ? 1 : 0
                       },
                       children: /* @__PURE__ */ o(
                         "div",
@@ -11926,7 +11928,7 @@ const Is = ({
 }) => {
   const [m, h] = H(""), p = t.filter(
     (b) => b.title.toLowerCase().includes(m.toLowerCase()) || b.description?.toLowerCase().includes(m.toLowerCase())
-  ), x = t.length, v = t.filter((b) => b.isVisible).length, C = (b) => {
+  ), x = t.length, v = t.filter((b) => b.isVisible).length, y = (b) => {
     s?.(b);
   };
   return /* @__PURE__ */ e(ie.Provider, { delayDuration: 200, children: /* @__PURE__ */ o(
@@ -11979,7 +11981,7 @@ const Is = ({
               b.isVisible && "border border-surface-3",
               u
             ),
-            onClick: () => C(b)
+            onClick: () => y(b)
           },
           b.id
         )) : /* @__PURE__ */ o("div", { className: "flex flex-col items-center justify-center p-10 text-center gap-10", children: [