@skalar-saas/design-system 0.1.147 → 0.1.148

package/dist/index.mjs

@@ -5,8 +5,8 @@ import L, { createContext as ze, useContext as Ie, useState as D, useRef as F, u
 import { Transition as Se, Dialog as Ne, Combobox as rt, Menu as Ra, Tab as Pe } from "@headlessui/react";
 import { motion as ge, AnimatePresence as bn } from "framer-motion";
 import oe, { clsx as p } from "clsx";
-import { ArrowRight as _n, Add as ue, ArrowDown2 as je, ArrowRight2 as wt, ArrowLeft2 as ct, InfoCircle as Ye, Element3 as Ea, More as dt, SearchNormal as Ha, Hashtag as Zn, AddCircle as Va, Copy as Bn, Like1 as vn, Dislike as wn, Refresh as $a, Category as Un, ArrowUp2 as yt, SearchNormal1 as We, Danger as Aa, Box2 as Gn, Warning2 as ja, ArrowRotateRight as Wa, CloseCircle as Oa, TickCircle as Kn, Eye as Ee, EyeSlash as it, HambergerMenu as Ct, Task as Fa, Clock as _a, Trash as Ut, RowVertical as Za, RowHorizontal as Ba, Setting as Oe, Google as Ua, Apple as Ga, Grid5 as qn, ExportSquare as Ka, Component as qa, Calendar as Qa, Edit2 as Xa, Link as Ya, Timer as Ja, Record as es, I3Dcube as ts } from "iconsax-react";
 import { twMerge as j } from "tailwind-merge";
+import { ArrowRight as _n, Add as ue, ArrowDown2 as je, ArrowRight2 as wt, ArrowLeft2 as ct, InfoCircle as Ye, Element3 as Ea, More as dt, SearchNormal as Ha, Hashtag as Zn, AddCircle as Va, Copy as Bn, Like1 as vn, Dislike as wn, Refresh as $a, Category as Un, ArrowUp2 as yt, SearchNormal1 as We, Danger as Aa, Box2 as Gn, Warning2 as ja, ArrowRotateRight as Wa, CloseCircle as Oa, TickCircle as Kn, Eye as Ee, EyeSlash as it, HambergerMenu as Ct, Task as Fa, Clock as _a, Trash as Ut, RowVertical as Za, RowHorizontal as Ba, Setting as Oe, Google as Ua, Apple as Ga, Grid5 as qn, ExportSquare as Ka, Component as qa, Calendar as Qa, Edit2 as Xa, Link as Ya, Timer as Ja, Record as es, I3Dcube as ts } from "iconsax-react";
 import * as fe from "@radix-ui/react-tooltip";
 import { TooltipProvider as ns } from "@radix-ui/react-tooltip";
 import { createPortal as Je } from "react-dom";
@@ -520,8 +520,8 @@ const rr = ({
     internalPanelsWidth: $,
     panelState: b
   };
-  const O = F(o), E = F(u), T = F(h);
-  O.current = o, E.current = u, T.current = h;
+  const W = F(o), E = F(u), T = F(h);
+  W.current = o, E.current = u, T.current = h;
   const _ = Q((U) => {
     w.current && (v.current = !0, !x.current && (x.current = requestAnimationFrame(() => {
       x.current = null;
@@ -536,13 +536,13 @@ const rr = ({
         Y,
         be
       ), Ge = Ue < C.current && Ps(Ue);
-      Ge !== y.current && (y.current = Ge, T.current(t, Ge)), O.current(t, Ue);
+      Ge !== y.current && (y.current = Ge, T.current(t, Ge)), W.current(t, Ue);
     })));
   }, [t, g]), se = Q(() => {
     if (!w.current) return;
     w.current = !1, document.body.style.userSelect = "", document.body.style.cursor = "";
     const U = v.current && y.current, { panelState: K } = R.current;
-    !U && K && K.width < yn(K.width) && O.current(t, yn(K.width)), v.current = !1, y.current = !1, E.current(t, U), document.removeEventListener("mousemove", _), document.removeEventListener("mouseup", se);
+    !U && K && K.width < yn(K.width) && W.current(t, yn(K.width)), v.current = !1, y.current = !1, E.current(t, U), document.removeEventListener("mousemove", _), document.removeEventListener("mouseup", se);
   }, [t, _]), le = Q(() => {
     w.current = !0, document.body.style.userSelect = "none", document.body.style.cursor = "col-resize";
     const { panelState: U } = R.current;
@@ -694,14 +694,14 @@ function vd(t) {
             (T) => T.id === v ? { ...T, open: !0, width: R } : T
           )
         };
-      const z = A.length * re.snapMinWidth, $ = V - z, O = Math.min(R, Math.max(re.snapMinWidth, $)), E = V - O;
+      const z = A.length * re.snapMinWidth, $ = V - z, W = Math.min(R, Math.max(re.snapMinWidth, $)), E = V - W;
       if (I > 0 && E < I) {
         const T = E / I;
         return {
           ...x,
           [C]: x[C].map((_) => {
             if (_.id === v)
-              return { ..._, open: !0, width: O };
+              return { ..._, open: !0, width: W };
             if (_.open) {
               const se = Math.max(re.snapMinWidth, _.width * T);
               return { ..._, width: se };
@@ -713,7 +713,7 @@ function vd(t) {
       return {
         ...x,
         [C]: x[C].map(
-          (T) => T.id === v ? { ...T, open: !0, width: O } : T
+          (T) => T.id === v ? { ...T, open: !0, width: W } : T
         )
       };
     });
@@ -734,12 +734,12 @@ function vd(t) {
           R.length * re.snapMinWidth,
           // Minimum for all other panels
           H - z
-        ), O = A - $, E = $ / H;
+        ), W = A - $, E = $ / H;
         return {
           ...y,
           [S]: y[S].map((T) => {
             if (T.id === v)
-              return { ...T, width: O };
+              return { ...T, width: W };
             if (T.open) {
               const _ = Math.max(re.snapMinWidth, T.width * E);
               return { ...T, width: _ };
@@ -767,9 +767,9 @@ function vd(t) {
             (E) => E.id === v ? { ...E, open: !0, width: P } : E
           )
         };
-      const V = H.length * re.snapMinWidth, z = I - V, $ = Math.min(P, Math.max(re.snapMinWidth, z)), O = I - $;
-      if (A > 0 && O < A) {
-        const E = O / A;
+      const V = H.length * re.snapMinWidth, z = I - V, $ = Math.min(P, Math.max(re.snapMinWidth, z)), W = I - $;
+      if (A > 0 && W < A) {
+        const E = W / A;
         return {
           ...x,
           [C]: x[C].map((T) => {
@@ -926,7 +926,7 @@ const As = L.memo(({
   Z(() => () => {
     document.removeEventListener("mousemove", V), document.removeEventListener("mouseup", z);
   }, [V, z]);
-  const O = r ? `calc(100% - ${C}px)` : "100%", E = a === "right" ? "animate-slideInRight" : "animate-slideInLeft", T = a === "right" ? "animate-slideOutRight" : "animate-slideOutLeft", _ = a === "right" ? "left" : "right", se = k ? "0ms" : `${l}ms`, le = () => (
+  const W = r ? `calc(100% - ${C}px)` : "100%", E = a === "right" ? "animate-slideInRight" : "animate-slideInLeft", T = a === "right" ? "animate-slideOutRight" : "animate-slideOutLeft", _ = a === "right" ? "left" : "right", se = k ? "0ms" : `${l}ms`, le = () => (
     // Wrapper is `relative` (not overflow-hidden) so the handle that sticks
     // out with translate-x-full is not clipped. The inner div applies
     // overflow + animation classes to the content itself.
@@ -989,7 +989,7 @@ const As = L.memo(({
               o
             ),
             style: {
-              width: O,
+              width: W,
               transition: "width",
               transitionDuration: se
             },
@@ -2113,7 +2113,7 @@ const Me = (t) => t !== void 0 && {
     g,
     y,
     o
-  )), O = /* @__PURE__ */ c(G, { children: [
+  )), W = /* @__PURE__ */ c(G, { children: [
     (s === "leading" || s === "both") && I && /* @__PURE__ */ e("span", { className: `group-disabled:!text-disabled ${R[r].leading}`, children: I }),
     s !== "only" && l,
     s === "only" && I && /* @__PURE__ */ e("span", { className: "group-disabled:!text-disabled", children: I }),
@@ -2127,8 +2127,8 @@ const Me = (t) => t !== void 0 && {
         style: { width: N[r], height: N[r] }
       }
     ) }),
-    /* @__PURE__ */ e("span", { className: "invisible inline-flex items-center", children: O })
-  ] }) : O });
+    /* @__PURE__ */ e("span", { className: "invisible inline-flex items-center", children: W })
+  ] }) : W });
 });
 M.displayName = "Button";
 const cr = ze(void 0), St = () => {
@@ -3831,7 +3831,7 @@ const Si = {
   lg: 32,
   xl: 36,
   "2xl": 40
-}, W = ({
+}, O = ({
   size: t = "md",
   children: n,
   color: r = "currentColor",
@@ -3903,7 +3903,7 @@ const Si = {
       ),
       ...h,
       children: [
-        t && /* @__PURE__ */ e("span", { className: l, children: /* @__PURE__ */ e(W, { size: i, children: t }) }),
+        t && /* @__PURE__ */ e("span", { className: l, children: /* @__PURE__ */ e(O, { size: i, children: t }) }),
         n && /* @__PURE__ */ e(
           "span",
           {
@@ -4047,7 +4047,7 @@ const Si = {
     md: "text-base",
     lg: "text-lg",
     xl: "text-xl"
-  }, z = I && V[I] || void 0, $ = I && !V[I] ? { fontSize: I } : void 0, O = (X) => {
+  }, z = I && V[I] || void 0, $ = I && !V[I] ? { fontSize: I } : void 0, W = (X) => {
     const he = X.currentTarget;
     he.style.height = "auto", he.style.height = `${he.scrollHeight}px`, C.onChange && C.onChange(X);
   }, E = m, T = E ? /^[a-z]+-[a-z0-9-]+$/i.test(E) ? `var(--${E})` : E : void 0, _ = b || void 0, se = (X) => {
@@ -4087,7 +4087,7 @@ const Si = {
             style: { backgroundColor: T },
             children: [
               i && /* @__PURE__ */ e(
-                W,
+                O,
                 {
                   size: N.iconSize,
                   className: j(p(
@@ -4105,7 +4105,7 @@ const Si = {
                   disabled: o,
                   className: j(le, "resize-none overflow-hidden"),
                   style: { fontWeight: _, ...$ },
-                  onInput: O,
+                  onInput: W,
                   rows: 1,
                   ...C
                 }
@@ -4131,7 +4131,7 @@ const Si = {
                   children: R ? /* @__PURE__ */ e(ei, { size: N.iconSize }) : /* @__PURE__ */ e(Js, { size: N.iconSize })
                 }
               ) : a ? /* @__PURE__ */ e(
-                W,
+                O,
                 {
                   size: N.iconSize,
                   className: j(p(
@@ -4258,7 +4258,7 @@ const $i = {
   onClick: V,
   ...z
 }) => {
-  const $ = $i[t], O = (se) => {
+  const $ = $i[t], W = (se) => {
     se.stopPropagation();
   }, E = (se) => {
     x?.(se.target.checked);
@@ -4271,7 +4271,7 @@ const $i = {
     f && (n ? "cursor-not-allowed" : "cursor-pointer"),
     g && !n && g
   ), H), _ = /* @__PURE__ */ c(G, { children: [
-    r && /* @__PURE__ */ e("div", { onClick: O, className: p("flex items-center", $.checkboxMargin), children: /* @__PURE__ */ e(
+    r && /* @__PURE__ */ e("div", { onClick: W, className: p("flex items-center", $.checkboxMargin), children: /* @__PURE__ */ e(
       Fe,
       {
         size: $.checkbox,
@@ -4283,14 +4283,14 @@ const $i = {
     ) }),
     /* @__PURE__ */ c("div", { className: j(p("flex items-center", $.middleGap), A), children: [
       s && y && /* @__PURE__ */ e("div", { className: p("shrink-0", n && "opacity-50"), children: /* @__PURE__ */ e(
-        W,
+        O,
         {
           size: $.leadingImage,
           imageUrl: y,
           alt: C
         }
       ) }),
-      i && /* @__PURE__ */ e("div", { className: "shrink-0", children: /* @__PURE__ */ e(W, { size: $.leadingIcon, color: n ? "var(--text-disabled)" : b || "var(--med-em)", children: S || /* @__PURE__ */ e(Ea, {}) }) }),
+      i && /* @__PURE__ */ e("div", { className: "shrink-0", children: /* @__PURE__ */ e(O, { size: $.leadingIcon, color: n ? "var(--text-disabled)" : b || "var(--med-em)", children: S || /* @__PURE__ */ e(Ea, {}) }) }),
       /* @__PURE__ */ c("div", { className: "flex flex-col gap-0 justify-start items-start min-w-0 shrink mr-8", children: [
         /* @__PURE__ */ e(
           "span",
@@ -4317,7 +4317,7 @@ const $i = {
       ] })
     ] }),
     /* @__PURE__ */ c("div", { className: p("flex items-center ml-auto", $.rightGap), children: [
-      l && /* @__PURE__ */ e(W, { size: $.trailingIcon, color: n ? "var(--text-disabled)" : "var(--high-em)", children: k || /* @__PURE__ */ e(wt, {}) }),
+      l && /* @__PURE__ */ e(O, { size: $.trailingIcon, color: n ? "var(--text-disabled)" : "var(--high-em)", children: k || /* @__PURE__ */ e(wt, {}) }),
       d && N && /* @__PURE__ */ e(
         $e,
         {
@@ -4840,7 +4840,7 @@ const Fi = {
         onClick: n,
         className: "p-1 rounded hover:bg-surface-2 transition-colors cursor-pointer text-high-em",
         "aria-label": "Copy message",
-        children: /* @__PURE__ */ e(W, { size: "sm", children: /* @__PURE__ */ e(Bn, {}) })
+        children: /* @__PURE__ */ e(O, { size: "sm", children: /* @__PURE__ */ e(Bn, {}) })
       }
     ),
     /* @__PURE__ */ e(
@@ -4849,7 +4849,7 @@ const Fi = {
         onClick: u,
         className: "p-1 rounded hover:bg-surface-2 transition-colors cursor-pointer text-high-em",
         "aria-label": "Like message",
-        children: /* @__PURE__ */ e(W, { size: "sm", children: a ? /* @__PURE__ */ e(vn, { variant: "Bold" }) : /* @__PURE__ */ e(vn, { variant: "Outline" }) })
+        children: /* @__PURE__ */ e(O, { size: "sm", children: a ? /* @__PURE__ */ e(vn, { variant: "Bold" }) : /* @__PURE__ */ e(vn, { variant: "Outline" }) })
       }
     ),
     /* @__PURE__ */ e(
@@ -4858,7 +4858,7 @@ const Fi = {
         onClick: h,
         className: "p-1 rounded hover:bg-surface-2 transition-colors cursor-pointer text-high-em",
         "aria-label": "Dislike message",
-        children: /* @__PURE__ */ e(W, { size: "sm", children: d ? /* @__PURE__ */ e(wn, { variant: "Bold" }) : /* @__PURE__ */ e(wn, { variant: "Outline" }) })
+        children: /* @__PURE__ */ e(O, { size: "sm", children: d ? /* @__PURE__ */ e(wn, { variant: "Bold" }) : /* @__PURE__ */ e(wn, { variant: "Outline" }) })
       }
     ),
     /* @__PURE__ */ e(
@@ -4867,7 +4867,7 @@ const Fi = {
         onClick: i,
         className: "p-1 rounded hover:bg-surface-2 transition-colors cursor-pointer text-high-em",
         "aria-label": "Refresh response",
-        children: /* @__PURE__ */ e(W, { size: "sm", children: /* @__PURE__ */ e($a, {}) })
+        children: /* @__PURE__ */ e(O, { size: "sm", children: /* @__PURE__ */ e($a, {}) })
       }
     )
   ] });
@@ -4961,11 +4961,11 @@ const Fi = {
   onMessageDislikeClick: z,
   onMessageRefreshClick: $
 }) => {
-  const O = L.useMemo(() => i === "none" ? "" : `${i === "left" ? "border-l" : "border-r"} ${a === "surface-3" ? "border-surface-3" : "border-surface-4"}`, [i, a]);
+  const W = L.useMemo(() => i === "none" ? "" : `${i === "left" ? "border-l" : "border-r"} ${a === "surface-3" ? "border-surface-3" : "border-surface-4"}`, [i, a]);
   return /* @__PURE__ */ c(
     "div",
     {
-      className: `h-full w-full flex flex-col bg-white ${O} ${s || ""}`,
+      className: `h-full w-full flex flex-col bg-white ${W} ${s || ""}`,
       children: [
         l && /* @__PURE__ */ c(G, { children: [
           /* @__PURE__ */ e("div", { style: { height: `${d}px` }, children: /* @__PURE__ */ e(
@@ -5349,7 +5349,7 @@ const Ji = {
   borderRadius: N = "rounded-lg"
 }) => {
   const [P, R] = D(""), H = sl[r][n], A = ll[s], I = al[t], V = P === "" ? h : h.filter(
-    (O) => O.label.toLowerCase().includes(P.toLowerCase())
+    (W) => W.label.toLowerCase().includes(P.toLowerCase())
   ), z = j(
     p(
       "w-full flex-1 bg-transparent focus:outline-none",
@@ -5378,26 +5378,26 @@ const Ji = {
           {
             className: z,
             placeholder: g,
-            onChange: (O) => R(O.target.value),
-            displayValue: (O) => O?.label
+            onChange: (W) => R(W.target.value),
+            displayValue: (W) => W?.label
           }
         ),
         I.showTrailingChevron && !u && /* @__PURE__ */ e(rt.Button, { className: p("flex items-center", { "w-full h-full justify-center": t === "only_icon" }), children: /* @__PURE__ */ e(je, { size: A.icon, color: y }) }),
         I.showTrailingAddon && u && /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: u })
       ] }),
-      /* @__PURE__ */ e(rt.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: V.length === 0 && P !== "" ? /* @__PURE__ */ e("div", { className: "relative cursor-default select-none px-4 py-2 text-gray-700", children: "Nothing found." }) : V.map((O) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e(rt.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: V.length === 0 && P !== "" ? /* @__PURE__ */ e("div", { className: "relative cursor-default select-none px-4 py-2 text-gray-700", children: "Nothing found." }) : V.map((W) => /* @__PURE__ */ e(
         rt.Option,
         {
-          value: O,
+          value: W,
           className: ({ active: E }) => j(
             p(
               "relative cursor-default select-none py-2 pl-4 pr-4",
               E ? `${C} ${S}` : k
             )
           ),
-          children: O.label
+          children: W.label
         },
-        O.id
+        W.id
       )) })
     ] }) }),
     a && /* @__PURE__ */ c("div", { className: p("flex items-center gap-1.5 text-sm", H.hint), children: [
@@ -5531,7 +5531,7 @@ const Ji = {
       onClick: S ? f : void 0,
       suppressHydrationWarning: !0,
       children: [
-        i && /* @__PURE__ */ e("div", { className: "flex items-center shrink-0", children: /* @__PURE__ */ e(W, { size: C, className: a, children: i }) }),
+        i && /* @__PURE__ */ e("div", { className: "flex items-center shrink-0", children: /* @__PURE__ */ e(O, { size: C, className: a, children: i }) }),
         /* @__PURE__ */ e(
           "span",
           {
@@ -5549,7 +5549,7 @@ const Ji = {
                 s
               ),
               onClick: (P) => P.stopPropagation(),
-              children: /* @__PURE__ */ e(W, { size: C, className: s, children: r })
+              children: /* @__PURE__ */ e(O, { size: C, className: s, children: r })
             }
           ) }),
           /* @__PURE__ */ e(fe.Portal, { children: /* @__PURE__ */ c(
@@ -5567,7 +5567,7 @@ const Ji = {
               ]
             }
           ) })
-        ] }) : r ? /* @__PURE__ */ e("div", { className: p("flex items-center shrink-0", s), children: /* @__PURE__ */ e(W, { size: C, className: s, children: r }) }) : null
+        ] }) : r ? /* @__PURE__ */ e("div", { className: p("flex items-center shrink-0", s), children: /* @__PURE__ */ e(O, { size: C, className: s, children: r }) }) : null
       ]
     }
   );
@@ -5639,7 +5639,7 @@ const ol = {
   Z(() => {
     I || $("");
   }, [I]);
-  const O = S && z.trim() ? a.filter(
+  const W = S && z.trim() ? a.filter(
     (Y) => String(Y.title ?? "").toLowerCase().includes(z.trim().toLowerCase())
   ) : a, [E, T] = D(null), [_, se] = D(!1), le = a.find((Y) => Y.id === u);
   Z(() => {
@@ -5785,10 +5785,10 @@ const ol = {
                       }
                     )
                   ] }),
-                  O.length === 0 ? /* @__PURE__ */ e("div", { className: "px-4 py-3 text-sm text-low-em", children: "Sin resultados" }) : /* @__PURE__ */ e(
+                  W.length === 0 ? /* @__PURE__ */ e("div", { className: "px-4 py-3 text-sm text-low-em", children: "Sin resultados" }) : /* @__PURE__ */ e(
                     Le,
                     {
-                      items: O.map(({ id: Y, ...be }) => ({ id: Y, ...be })),
+                      items: W.map(({ id: Y, ...be }) => ({ id: Y, ...be })),
                       size: R,
                       floating: !1,
                       onSelect: U,
@@ -5941,7 +5941,7 @@ class Xd extends Da {
   }
 }
 const hl = L.memo(({
-  icon: t = /* @__PURE__ */ e(W, { className: "text-danger-main", size: "2xl", children: /* @__PURE__ */ e(Aa, {}) }),
+  icon: t = /* @__PURE__ */ e(O, { className: "text-danger-main", size: "2xl", children: /* @__PURE__ */ e(Aa, {}) }),
   title: n = "Something went wrong",
   message: r,
   error: s,
@@ -5990,7 +5990,7 @@ ${s.stack}`
 });
 hl.displayName = "ErrorState";
 const et = L.memo(({
-  icon: t = /* @__PURE__ */ e(W, { size: 56, children: /* @__PURE__ */ e(Gn, {}) }),
+  icon: t = /* @__PURE__ */ e(O, { size: 56, children: /* @__PURE__ */ e(Gn, {}) }),
   description: n,
   actionLabel: r,
   onAction: s,
@@ -6141,7 +6141,7 @@ const Yd = ({
       ),
       onClick: i,
       children: [
-        t && /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(W, { size: 20, color: "var(--low-em)", children: t }) }),
+        t && /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(O, { size: 20, color: "var(--low-em)", children: t }) }),
         n && /* @__PURE__ */ e("span", { className: "font-inter font-semibold text-[10px] text-low-em mt-1", children: n })
       ]
     }
@@ -6725,7 +6725,7 @@ const xl = {
     size: k,
     ...N
   }, P) => {
-    const [R, H] = D(""), [A, I] = D(!1), [V, z] = D(-1), $ = F(null), O = o !== void 0, E = O ? o : R, T = Ai(E, n);
+    const [R, H] = D(""), [A, I] = D(!1), [V, z] = D(-1), $ = F(null), W = o !== void 0, E = W ? o : R, T = Ai(E, n);
     Z(() => {
       T && t && t(T);
     }, [T, t]), Z(() => {
@@ -6738,7 +6738,7 @@ const xl = {
     }, []);
     const _ = (B) => {
       const ie = B.target.value;
-      O || H(ie), u && u(B), ie && a.length > 0 ? (I(!0), z(-1)) : I(!1);
+      W || H(ie), u && u(B), ie && a.length > 0 ? (I(!0), z(-1)) : I(!1);
     }, se = (B) => {
       if (B.key === "Enter") {
         if (B.preventDefault(), A && V >= 0 && V < a.length) {
@@ -6757,12 +6757,12 @@ const xl = {
       const B = {
         target: { value: "" }
       };
-      O || H(""), u && u(B), I(!1), z(-1);
+      W || H(""), u && u(B), I(!1), z(-1);
     }, he = (B) => {
       const ie = {
         target: { value: B }
       };
-      O || H(B), u && u(ie), l && l(B), I(!1), z(-1);
+      W || H(B), u && u(ie), l && l(B), I(!1), z(-1);
     }, U = i ? "danger" : "default", K = r ? /* @__PURE__ */ e(
       Wa,
       {
@@ -7813,8 +7813,8 @@ const dn = ({
       ...v,
       children: [
         /* @__PURE__ */ c("div", { className: "flex-row flex justify-between", children: [
-          /* @__PURE__ */ e("div", { className: "flex", children: /* @__PURE__ */ e(W, { className: "!rounded-4", size: "2xl", imageUrl: n }) }),
-          /* @__PURE__ */ e("div", { className: "flex w-fit", children: /* @__PURE__ */ e(M, { ref: a, size: "sm", leadingIcon: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(si, {}) }), icons: "only", hierarchy: "secondary", variant: "neutral", onClick: i }) })
+          /* @__PURE__ */ e("div", { className: "flex", children: /* @__PURE__ */ e(O, { className: "!rounded-4", size: "2xl", imageUrl: n }) }),
+          /* @__PURE__ */ e("div", { className: "flex w-fit", children: /* @__PURE__ */ e(M, { ref: a, size: "sm", leadingIcon: /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(si, {}) }), icons: "only", hierarchy: "secondary", variant: "neutral", onClick: i }) })
         ] }),
         /* @__PURE__ */ c("div", { className: "flex-col flex justify-between gap-4", children: [
           /* @__PURE__ */ c("div", { className: "flex gap-5 items-center", children: [
@@ -8005,7 +8005,7 @@ const Pn = ({
       ]
     }
   ), P = () => {
-    const R = b.strokeWidth, H = x, A = x / 2 + R, I = (x - b.strokeWidth) / 2, V = R / 2, z = A - R / 2, $ = x - R / 2, O = A - R / 2, E = Math.PI * I * 2, T = E - h / 100 * E;
+    const R = b.strokeWidth, H = x, A = x / 2 + R, I = (x - b.strokeWidth) / 2, V = R / 2, z = A - R / 2, $ = x - R / 2, W = A - R / 2, E = Math.PI * I * 2, T = E - h / 100 * E;
     return /* @__PURE__ */ c(
       "svg",
       {
@@ -8027,7 +8027,7 @@ const Pn = ({
           /* @__PURE__ */ e(
             "path",
             {
-              d: `M${V},${z} A${I},${I} 0 1,1 ${$},${O}`,
+              d: `M${V},${z} A${I},${I} 0 1,1 ${$},${W}`,
               fill: "none",
               strokeLinecap: "round",
               strokeLinejoin: "round",
@@ -8040,7 +8040,7 @@ const Pn = ({
           /* @__PURE__ */ e(
             "path",
             {
-              d: `M${V},${z} A${I},${I} 0 1,1 ${$},${O}`,
+              d: `M${V},${z} A${I},${I} 0 1,1 ${$},${W}`,
               fill: "none",
               strokeLinecap: "round",
               strokeLinejoin: "round",
@@ -9829,41 +9829,53 @@ const co = {
   showBorder: h = !0,
   headerHeight: m,
   tabPaddingX: f,
-  tabListClassName: g
+  tabListClassName: g,
+  collapseToIconsBelow: b
 }) => {
-  const b = t === "line-icons" || t === "only-icon" ? Vn.line : Vn[t], w = h ? b.list : b.list.replace(/border-b\s+border-surface-3/g, "").trim(), v = {};
-  m && (v.height = `${m}px`, v.alignItems = "flex-end");
-  const x = () => typeof l == "number" ? "" : l in Et ? Et[l] : Et.sm, y = typeof l == "number" ? { marginTop: `${l}px` } : {}, C = d ? {
+  const w = L.useRef(null), [v, x] = L.useState(!1);
+  L.useEffect(() => {
+    if (!b) return;
+    const z = w.current;
+    if (!z) return;
+    const $ = () => x(z.getBoundingClientRect().width < b);
+    $();
+    const W = new ResizeObserver($);
+    return W.observe(z), () => W.disconnect();
+  }, [b]);
+  const y = !!b && v && t === "line-icons", C = t === "line-icons" || t === "only-icon", S = t !== "only-icon" && !y, k = t === "only-icon" || y, N = t === "line-icons" || t === "only-icon" ? Vn.line : Vn[t], P = h ? N.list : N.list.replace(/border-b\s+border-surface-3/g, "").trim(), R = {};
+  m && (R.height = `${m}px`, R.alignItems = "flex-end");
+  const H = () => typeof l == "number" ? "" : l in Et ? Et[l] : Et.sm, A = typeof l == "number" ? { marginTop: `${l}px` } : {}, I = d ? {
     height: "100%",
     maxHeight: "100%",
     overflow: "hidden",
     display: "flex",
     flexDirection: "column"
-  } : {}, S = d ? { height: "100%", maxHeight: "100%", flex: 1 } : {};
-  return /* @__PURE__ */ e("div", { className: p("w-full", r), style: C, children: /* @__PURE__ */ c(
+  } : {}, V = d ? { height: "100%", maxHeight: "100%", flex: 1 } : {};
+  return /* @__PURE__ */ e("div", { ref: w, className: p("w-full", r), style: I, children: /* @__PURE__ */ c(
     Pe.Group,
     {
       selectedIndex: s,
       onChange: i,
       as: "div",
       className: d ? "flex flex-col overflow-hidden" : void 0,
-      style: S,
+      style: V,
       children: [
         /* @__PURE__ */ e(
           Pe.List,
           {
-            className: p(w, g),
-            style: v,
-            children: n.map((k) => /* @__PURE__ */ e(
+            className: p(P, g),
+            style: R,
+            children: n.map((z) => /* @__PURE__ */ e(
               Pe,
               {
-                className: ({ selected: N }) => p(b.tab, N ? b.selected : b.unselected),
+                title: k ? z.label : void 0,
+                className: ({ selected: $ }) => p(N.tab, $ ? N.selected : N.unselected),
                 style: {
                   ...a ? { paddingBottom: a } : {},
                   ...f !== void 0 ? { paddingLeft: `${f}px`, paddingRight: `${f}px` } : {}
                 },
-                children: ({ selected: N }) => {
-                  const P = N && k.selectedIcon ? k.selectedIcon : k.icon;
+                children: ({ selected: $ }) => {
+                  const W = $ && z.selectedIcon ? z.selectedIcon : z.icon;
                   return /* @__PURE__ */ c(
                     "div",
                     {
@@ -9872,36 +9884,36 @@ const co = {
                         Me(o)
                       ),
                       children: [
-                        (t === "line-icons" || t === "only-icon") && P && L.isValidElement(P) && L.cloneElement(
-                          P,
+                        C && W && L.isValidElement(W) && L.cloneElement(
+                          W,
                           {
                             size: u,
                             color: "currentColor"
                           }
                         ),
-                        t !== "only-icon" && k.label
+                        S && /* @__PURE__ */ e("span", { className: "whitespace-nowrap", children: z.label })
                       ]
                     }
                   );
                 }
               },
-              k.id
+              z.id
             ))
           }
         ),
         /* @__PURE__ */ e(
           Pe.Panels,
           {
-            className: x(),
+            className: H(),
             style: d ? {
               display: "flex",
               flexDirection: "column",
               flex: 1,
               minHeight: 0,
               overflow: "hidden",
-              ...y
-            } : y,
-            children: n.map((k) => /* @__PURE__ */ e(
+              ...A
+            } : A,
+            children: n.map((z) => /* @__PURE__ */ e(
               Pe.Panel,
               {
                 style: d ? {
@@ -9910,9 +9922,9 @@ const co = {
                   overflowY: "auto",
                   maxHeight: "100%"
                 } : void 0,
-                children: k.content
+                children: z.content
               },
-              k.id
+              z.id
             ))
           }
         )
@@ -9958,7 +9970,7 @@ const co = {
         onClick: w,
         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(W, { className: "text-med-em", size: "xs", children: /* @__PURE__ */ e(ct, {}) })
+        children: /* @__PURE__ */ e(O, { className: "text-med-em", size: "xs", children: /* @__PURE__ */ e(ct, {}) })
       }
     ),
     /* @__PURE__ */ e(
@@ -9987,7 +9999,7 @@ const co = {
                     S.stopPropagation(), l(y);
                   },
                   className: "cursor-pointer",
-                  leadingIcon: /* @__PURE__ */ e(W, { size: "xs", className: "text-med-em", children: /* @__PURE__ */ e(me, {}) }),
+                  leadingIcon: /* @__PURE__ */ e(O, { size: "xs", className: "text-med-em", children: /* @__PURE__ */ e(me, {}) }),
                   "aria-label": "Close tab",
                   icons: "only",
                   variant: "neutral",
@@ -10007,7 +10019,7 @@ const co = {
           onClick: a || v,
           className: "h-full hover:bg-surface-bg cursor-pointer  px-6 border-x border-surface-3",
           "aria-label": "Scroll right",
-          children: /* @__PURE__ */ e(W, { className: "text-low-em", size: "xs", children: /* @__PURE__ */ e(wt, {}) })
+          children: /* @__PURE__ */ e(O, { className: "text-low-em", size: "xs", children: /* @__PURE__ */ e(wt, {}) })
         }
       ),
       i && /* @__PURE__ */ e(
@@ -10016,7 +10028,7 @@ const co = {
           onClick: i,
           className: `h-full hover:bg-surface-bg cursor-pointer px-6 ${f ? "" : "border-l border-surface-3"}`,
           "aria-label": "Add new tab",
-          children: /* @__PURE__ */ e(W, { className: "text-low-em", size: 12, children: /* @__PURE__ */ e(ue, {}) })
+          children: /* @__PURE__ */ e(O, { className: "text-low-em", size: 12, children: /* @__PURE__ */ e(ue, {}) })
         }
       )
     ] })
@@ -11054,7 +11066,7 @@ const zu = ({
     children: [
       /* @__PURE__ */ c("div", { className: "flex flex-col gap-6 px-10 py-8 border-b border-b-surface-3", children: [
         /* @__PURE__ */ c("div", { className: "flex items-center gap-5", children: [
-          /* @__PURE__ */ e("span", { className: "flex size-12 shrink-0 items-center justify-center rounded-5 bg-surface-2 text-high-em", children: /* @__PURE__ */ e(W, { size: "sm-md", children: n }) }),
+          /* @__PURE__ */ e("span", { className: "flex size-12 shrink-0 items-center justify-center rounded-5 bg-surface-2 text-high-em", children: /* @__PURE__ */ e(O, { size: "sm-md", children: n }) }),
           /* @__PURE__ */ c("div", { className: "flex flex-col min-w-0", children: [
             /* @__PURE__ */ e("span", { className: "text-high-em font-semibold truncate", children: r }),
             /* @__PURE__ */ e("span", { className: "text-med-em text-sm", children: s })
@@ -11127,7 +11139,7 @@ const Ht = {
       children: [
         /* @__PURE__ */ c("div", { className: "flex items-center justify-between gap-3", children: [
           /* @__PURE__ */ c("div", { className: "flex min-w-0 items-center gap-3", children: [
-            /* @__PURE__ */ e("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-4 bg-surface-2 text-high-em", children: /* @__PURE__ */ e(W, { size: "sm", children: n }) }),
+            /* @__PURE__ */ e("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-4 bg-surface-2 text-high-em", children: /* @__PURE__ */ e(O, { size: "sm", children: n }) }),
             /* @__PURE__ */ e("span", { className: "truncate font-semibold text-high-em", children: r })
           ] }),
           /* @__PURE__ */ c("div", { className: "relative shrink-0", children: [
@@ -11189,11 +11201,11 @@ const mn = ne(({
         break;
     }
   }, w = [
-    ...a ? [{ value: "maximize", icon: /* @__PURE__ */ e(W, { size: 12, children: /* @__PURE__ */ e(Xt, {}) }) }] : [],
+    ...a ? [{ value: "maximize", icon: /* @__PURE__ */ e(O, { size: 12, children: /* @__PURE__ */ e(Xt, {}) }) }] : [],
     ...l ? [{ value: "text-block", label: n }] : [],
-    ...d ? [{ value: "edit", icon: /* @__PURE__ */ e(W, { size: 12, children: /* @__PURE__ */ e(ci, {}) }) }] : [],
-    ...o ? [{ value: "copy", icon: /* @__PURE__ */ e(W, { size: 12, children: /* @__PURE__ */ e(Yt, {}) }) }] : [],
-    ...u ? [{ value: "trash", icon: /* @__PURE__ */ e(W, { size: 12, children: /* @__PURE__ */ e(Jt, {}) }) }] : []
+    ...d ? [{ value: "edit", icon: /* @__PURE__ */ e(O, { size: 12, children: /* @__PURE__ */ e(ci, {}) }) }] : [],
+    ...o ? [{ value: "copy", icon: /* @__PURE__ */ e(O, { size: 12, children: /* @__PURE__ */ e(Yt, {}) }) }] : [],
+    ...u ? [{ value: "trash", icon: /* @__PURE__ */ e(O, { size: 12, children: /* @__PURE__ */ e(Jt, {}) }) }] : []
   ];
   return /* @__PURE__ */ c(
     "div",
@@ -11784,7 +11796,7 @@ const zt = ({
           ref: m,
           title: t.title,
           description: t.description,
-          icon: l?.(t) ?? /* @__PURE__ */ e(W, {}),
+          icon: l?.(t) ?? /* @__PURE__ */ e(O, {}),
           onMaximize: f("maximize"),
           onTextBlock: f("text-block"),
           onEdit: f("edit"),
@@ -12098,7 +12110,7 @@ const zt = ({
                     {
                       title: k.title,
                       description: k.description,
-                      icon: l?.(k) ?? /* @__PURE__ */ e(W, {}),
+                      icon: l?.(k) ?? /* @__PURE__ */ e(O, {}),
                       onMaximize: N("maximize"),
                       onTextBlock: N("text-block"),
                       onEdit: N("edit"),
@@ -12332,7 +12344,7 @@ const oa = ({
             size: "xs",
             icons: "only",
             className: p("cursor-pointer", !s && "invisible"),
-            leadingIcon: s && /* @__PURE__ */ e(W, { size: "sm", children: s }),
+            leadingIcon: s && /* @__PURE__ */ e(O, { size: "sm", children: s }),
             onClick: i,
             disabled: n || !i
           }
@@ -12347,7 +12359,7 @@ const oa = ({
             size: "xs",
             icons: "only",
             className: "cursor-pointer",
-            leadingIcon: /* @__PURE__ */ e(W, { size: "sm", children: l ?? /* @__PURE__ */ e(me, { className: "text-high-em" }) }),
+            leadingIcon: /* @__PURE__ */ e(O, { size: "sm", children: l ?? /* @__PURE__ */ e(me, { className: "text-high-em" }) }),
             onClick: d ?? (() => u(!1)),
             disabled: n
           }
@@ -12664,7 +12676,7 @@ const Zo = {
           hierarchy: "primary",
           size: "sm",
           icons: "only",
-          leadingIcon: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(Oe, {}) }),
+          leadingIcon: /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(Oe, {}) }),
           onClick: i
         }
       ),
@@ -12719,7 +12731,7 @@ const Zo = {
                 value: m,
                 onChange: (V) => f(V.target.value),
                 placeholder: R,
-                trailingIcon: /* @__PURE__ */ e(W, { children: w ? /* @__PURE__ */ e(
+                trailingIcon: /* @__PURE__ */ e(O, { children: w ? /* @__PURE__ */ e(
                   Ee,
                   {
                     onClick: () => v(!1),
@@ -12744,7 +12756,7 @@ const Zo = {
                 value: g,
                 onChange: (V) => b(V.target.value),
                 placeholder: H,
-                trailingIcon: /* @__PURE__ */ e(W, { children: x ? /* @__PURE__ */ e(
+                trailingIcon: /* @__PURE__ */ e(O, { children: x ? /* @__PURE__ */ e(
                   Ee,
                   {
                     onClick: () => y(!1),
@@ -12803,7 +12815,7 @@ const Zo = {
           hierarchy: "primary",
           size: "sm",
           icons: "only",
-          leadingIcon: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(Oe, {}) }),
+          leadingIcon: /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(Oe, {}) }),
           onClick: l
         }
       ),
@@ -12877,7 +12889,7 @@ const Zo = {
           hierarchy: "primary",
           size: "sm",
           icons: "only",
-          leadingIcon: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(Oe, {}) }),
+          leadingIcon: /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(Oe, {}) }),
           onClick: i
         }
       ),
@@ -12892,7 +12904,7 @@ const Zo = {
             value: d,
             onChange: (N) => o(N.target.value),
             placeholder: v,
-            trailingIcon: /* @__PURE__ */ e(W, { children: m ? /* @__PURE__ */ e(Ee, { onClick: () => f(!1), className: "cursor-pointer" }) : /* @__PURE__ */ e(it, { onClick: () => f(!0), className: "cursor-pointer" }) }),
+            trailingIcon: /* @__PURE__ */ e(O, { children: m ? /* @__PURE__ */ e(Ee, { onClick: () => f(!1), className: "cursor-pointer" }) : /* @__PURE__ */ e(it, { onClick: () => f(!0), className: "cursor-pointer" }) }),
             required: !0
           }
         ),
@@ -12903,7 +12915,7 @@ const Zo = {
             value: u,
             onChange: (N) => h(N.target.value),
             placeholder: x,
-            trailingIcon: /* @__PURE__ */ e(W, { children: g ? /* @__PURE__ */ e(Ee, { onClick: () => b(!1), className: "cursor-pointer" }) : /* @__PURE__ */ e(it, { onClick: () => b(!0), className: "cursor-pointer" }) }),
+            trailingIcon: /* @__PURE__ */ e(O, { children: g ? /* @__PURE__ */ e(Ee, { onClick: () => b(!1), className: "cursor-pointer" }) : /* @__PURE__ */ e(it, { onClick: () => b(!0), className: "cursor-pointer" }) }),
             required: !0
           }
         ),
@@ -12956,7 +12968,7 @@ const Zo = {
           hierarchy: "primary",
           size: "sm",
           icons: "only",
-          leadingIcon: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(Oe, {}) }),
+          leadingIcon: /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(Oe, {}) }),
           onClick: s
         }
       ),
@@ -13002,7 +13014,7 @@ const Zo = {
           hierarchy: "primary",
           size: "sm",
           icons: "only",
-          leadingIcon: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(Oe, {}) }),
+          leadingIcon: /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(Oe, {}) }),
           onClick: a
         }
       ),
@@ -13014,7 +13026,7 @@ const Zo = {
             hierarchy: "primary",
             size: "lg",
             icons: "leading",
-            leadingIcon: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(Ua, {}) }),
+            leadingIcon: /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(Ua, {}) }),
             onClick: r,
             className: "w-full",
             children: h
@@ -13027,7 +13039,7 @@ const Zo = {
             hierarchy: "primary",
             size: "lg",
             icons: "leading",
-            leadingIcon: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(Ga, {}) }),
+            leadingIcon: /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(Ga, {}) }),
             onClick: s,
             children: m
           }
@@ -13113,7 +13125,7 @@ const Zo = {
           hierarchy: "primary",
           size: "sm",
           icons: "only",
-          leadingIcon: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(Oe, {}) }),
+          leadingIcon: /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(Oe, {}) }),
           onClick: o
         }
       ),
@@ -13466,7 +13478,7 @@ const qo = ({
           {
             title: v.title,
             description: v.description,
-            leadingIcon: /* @__PURE__ */ e(W, { className: `${v.isDisabled ? "text-disabled" : ""}`, children: v.icon }),
+            leadingIcon: /* @__PURE__ */ e(O, { className: `${v.isDisabled ? "text-disabled" : ""}`, children: v.icon }),
             showCheckbox: !1,
             showLeadingImage: !1,
             showDescription: !!v.description,
@@ -13487,7 +13499,7 @@ const qo = ({
           },
           v.id
         )) : /* @__PURE__ */ c("div", { className: "flex flex-col items-center justify-center p-10 text-center gap-10", children: [
-          /* @__PURE__ */ e(W, { size: "lg", children: /* @__PURE__ */ e(Gn, {}) }),
+          /* @__PURE__ */ e(O, { size: "lg", children: /* @__PURE__ */ e(Gn, {}) }),
           /* @__PURE__ */ e("p", { className: "text-sm font-medium text-low-em", children: t.length === 0 ? "You don't have any Widgets created yet" : "No widgets found" })
         ] }) })
       ]
@@ -13591,7 +13603,7 @@ const qo = ({
             hierarchy: "secondary",
             size: "sm",
             icons: "only",
-            leadingIcon: /* @__PURE__ */ e(W, { size: "md", children: /* @__PURE__ */ e(Ct, {}) }),
+            leadingIcon: /* @__PURE__ */ e(O, { size: "md", children: /* @__PURE__ */ e(Ct, {}) }),
             className: "cursor-grab active:cursor-grabbing shrink-0 text-disabled",
             "aria-label": "Drag to reorder"
           }
@@ -14474,7 +14486,7 @@ const yc = ({ field: t, onChange: n, onAction: r }) => {
         className: "flex items-center justify-between w-full h-[38px] px-4 cursor-pointer",
         children: [
           /* @__PURE__ */ e("span", { className: "text-xs font-semibold text-med-em", children: t }),
-          /* @__PURE__ */ e(W, { size: "sm", children: i ? /* @__PURE__ */ e(yt, {}) : /* @__PURE__ */ e(je, {}) })
+          /* @__PURE__ */ e(O, { size: "sm", children: i ? /* @__PURE__ */ e(yt, {}) : /* @__PURE__ */ e(je, {}) })
         ]
       }
     ),
@@ -14672,7 +14684,7 @@ function Tc({
         ),
         children: [
           /* @__PURE__ */ e("span", { className: p("flex-1 min-w-0 truncate text-left", S.text, R), children: N || s }),
-          /* @__PURE__ */ e("span", { className: p("shrink-0 flex items-center", a === "sm" ? "pl-1.5" : "pl-2"), children: /* @__PURE__ */ e(W, { size: S.iconSize, color: f, children: m ?? /* @__PURE__ */ e(Qa, {}) }) })
+          /* @__PURE__ */ e("span", { className: p("shrink-0 flex items-center", a === "sm" ? "pl-1.5" : "pl-2"), children: /* @__PURE__ */ e(O, { size: S.iconSize, color: f, children: m ?? /* @__PURE__ */ e(Qa, {}) }) })
         ]
       }
     ),
@@ -14828,7 +14840,7 @@ function Rc({ operatorConfig: t, values: n, valueOptions: r, fieldItems: s, onVa
             hierarchy: "secondary",
             size: "xs",
             icons: "only",
-            leadingIcon: /* @__PURE__ */ e("span", { className: "contents", children: /* @__PURE__ */ e(W, { size: "xs", children: /* @__PURE__ */ e(me, {}) }) }),
+            leadingIcon: /* @__PURE__ */ e("span", { className: "contents", children: /* @__PURE__ */ e(O, { size: "xs", children: /* @__PURE__ */ e(me, {}) }) }),
             onClick: () => i(n.filter((m, f) => f !== h)),
             "aria-label": "Remove value"
           }
@@ -14842,7 +14854,7 @@ function Rc({ operatorConfig: t, values: n, valueOptions: r, fieldItems: s, onVa
         hierarchy: "primary",
         size: "sm",
         icons: "only",
-        leadingIcon: /* @__PURE__ */ e(W, { size: 14, children: /* @__PURE__ */ e(ue, {}) }),
+        leadingIcon: /* @__PURE__ */ e(O, { size: 14, children: /* @__PURE__ */ e(ue, {}) }),
         onClick: () => i([...n, ""]),
         "aria-label": "Add value"
       }
@@ -14914,7 +14926,7 @@ function Ec({
           onChange: o
         }
       ) }),
-      i?.connector === "arrow" && /* @__PURE__ */ e("span", { className: "shrink-0", children: /* @__PURE__ */ e(W, { size: "sm", color: "var(--med-em)", children: /* @__PURE__ */ e(_n, {}) }) }),
+      i?.connector === "arrow" && /* @__PURE__ */ e("span", { className: "shrink-0", children: /* @__PURE__ */ e(O, { size: "sm", color: "var(--med-em)", children: /* @__PURE__ */ e(_n, {}) }) }),
       /* @__PURE__ */ e(
         Rc,
         {
@@ -14934,7 +14946,7 @@ function Ec({
         hierarchy: "secondary",
         size: "sm",
         icons: "only",
-        leadingIcon: /* @__PURE__ */ e("span", { className: "contents", children: /* @__PURE__ */ e(W, { size: "xs", children: /* @__PURE__ */ e(me, {}) }) }),
+        leadingIcon: /* @__PURE__ */ e("span", { className: "contents", children: /* @__PURE__ */ e(O, { size: "xs", children: /* @__PURE__ */ e(me, {}) }) }),
         onClick: () => s(t.id),
         "aria-label": "Delete condition"
       }
@@ -14980,7 +14992,7 @@ function Vc({
   dropdownIndex: u = 0,
   className: h
 }) {
-  const m = /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(ue, {}) }), f = [
+  const m = /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(ue, {}) }), f = [
     ...d ? [{ value: "and", icon: m, label: "And" }] : [],
     ...o ? [{ value: "or", icon: m, label: "Or" }] : []
   ], g = f.length > 0 ? /* @__PURE__ */ e(
@@ -15080,7 +15092,7 @@ function Uu({
                 hierarchy: "secondary",
                 size: "sm",
                 icons: "only",
-                leadingIcon: /* @__PURE__ */ e("span", { className: "contents", children: /* @__PURE__ */ e(W, { size: "xs", children: /* @__PURE__ */ e(me, {}) }) }),
+                leadingIcon: /* @__PURE__ */ e("span", { className: "contents", children: /* @__PURE__ */ e(O, { size: "xs", children: /* @__PURE__ */ e(me, {}) }) }),
                 onClick: () => l(o.id),
                 "aria-label": "Remove branch"
               }
@@ -15096,7 +15108,7 @@ function Uu({
         variant: "neutral",
         hierarchy: "secondary",
         size: "sm",
-        leadingIcon: /* @__PURE__ */ e(W, { size: 14, children: /* @__PURE__ */ e(ue, {}) }),
+        leadingIcon: /* @__PURE__ */ e(O, { size: 14, children: /* @__PURE__ */ e(ue, {}) }),
         onClick: a,
         children: "Add Else If"
       }
@@ -15175,7 +15187,7 @@ function Gu({
           hierarchy: "primary",
           size: "xs",
           icons: "leading",
-          leadingIcon: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(ue, {}) }),
+          leadingIcon: /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(ue, {}) }),
           onClick: s,
           children: "Add expression"
         }
@@ -15190,7 +15202,7 @@ function Gu({
           hierarchy: "secondary",
           size: "xs",
           icons: "only",
-          leadingIcon: /* @__PURE__ */ e(W, { size: "xs", children: /* @__PURE__ */ e(me, {}) }),
+          leadingIcon: /* @__PURE__ */ e(O, { size: "xs", children: /* @__PURE__ */ e(me, {}) }),
           onClick: a,
           "aria-label": "Close"
         }
@@ -15208,7 +15220,7 @@ function Gu({
                 hierarchy: "secondary",
                 size: "sm",
                 icons: "only",
-                leadingIcon: /* @__PURE__ */ e("span", { className: "contents", children: /* @__PURE__ */ e(W, { size: "xs", children: /* @__PURE__ */ e(me, {}) }) }),
+                leadingIcon: /* @__PURE__ */ e("span", { className: "contents", children: /* @__PURE__ */ e(O, { size: "xs", children: /* @__PURE__ */ e(me, {}) }) }),
                 onClick: () => i(h),
                 "aria-label": "Remove expression"
               }
@@ -15592,9 +15604,9 @@ const Uc = {
         v(null), y(null);
         const { active: V, over: z } = I;
         if (!z || V.id === z.id) return;
-        const $ = String(V.id), O = String(z.id), E = k.find((le) => le.id === O), T = E ? z.data.current?.columnName ?? t.find((le) => S(le.name).some((X) => X.id === O))?.name : z.data.current?.columnName;
+        const $ = String(V.id), W = String(z.id), E = k.find((le) => le.id === W), T = E ? z.data.current?.columnName ?? t.find((le) => S(le.name).some((X) => X.id === W))?.name : z.data.current?.columnName;
         if (!T) return;
-        const _ = S(T).filter((le) => le.id !== $), se = E ? Math.max(0, _.findIndex((le) => le.id === O)) : _.length;
+        const _ = S(T).filter((le) => le.id !== $), se = E ? Math.max(0, _.findIndex((le) => le.id === W)) : _.length;
         m?.($, T, se);
       },
       onDragCancel: () => {
@@ -15659,7 +15671,7 @@ const Be = ({ children: t, className: n }) => /* @__PURE__ */ e(
 }) => /* @__PURE__ */ c("div", { className: p("flex flex-col", s), children: [
   /* @__PURE__ */ c("div", { className: "flex items-center justify-between gap-10", children: [
     /* @__PURE__ */ e("span", { className: "text-lg font-medium text-med-em leading-snug", children: t }),
-    n && /* @__PURE__ */ e(W, { size: "md", color: "currentColor", children: n })
+    n && /* @__PURE__ */ e(O, { size: "md", color: "currentColor", children: n })
   ] }),
   /* @__PURE__ */ e("span", { className: "text-2xl font-semibold text-high-em font-space-grotesk", children: r })
 ] }), Ku = ({ className: t, ...n }) => /* @__PURE__ */ e(Be, { className: t, children: /* @__PURE__ */ e(It, { ...n }) }), qu = ({
@@ -15730,7 +15742,7 @@ const Be = ({ children: t, className: n }) => /* @__PURE__ */ e(
         n
       ] })
     ] }),
-    /* @__PURE__ */ e(W, { size: "md", color: "currentColor", children: r ?? /* @__PURE__ */ e(Ja, {}) })
+    /* @__PURE__ */ e(O, { size: "md", color: "currentColor", children: r ?? /* @__PURE__ */ e(Ja, {}) })
   ] }),
   /* @__PURE__ */ e(Ma, { items: s, size: "xs" })
 ] }), Xu = ({
@@ -15851,10 +15863,10 @@ const Be = ({ children: t, className: n }) => /* @__PURE__ */ e(
   const h = s !== void 0, [m, f] = D(r), [g, b] = D(s ?? n), [w, v] = D(!1), [x, y] = D(!1), C = F(null), S = (m - t) / (n - t) * 100, k = h ? (g - t) / (n - t) * 100 : 100, N = Q(
     (z) => {
       if (!C.current) return t;
-      const $ = C.current.getBoundingClientRect(), O = Math.max(
+      const $ = C.current.getBoundingClientRect(), W = Math.max(
         0,
         Math.min(100, (z - $.left) / $.width * 100)
-      ), E = t + O / 100 * (n - t), T = Math.round(E / i) * i;
+      ), E = t + W / 100 * (n - t), T = Math.round(E / i) * i;
       return Math.max(t, Math.min(n, T));
     },
     [t, n, i]
@@ -15901,8 +15913,8 @@ const Be = ({ children: t, className: n }) => /* @__PURE__ */ e(
       if (!h)
         f($), d && d($);
       else {
-        const O = Math.abs($ - m), E = Math.abs($ - g);
-        if (O < E) {
+        const W = Math.abs($ - m), E = Math.abs($ - g);
+        if (W < E) {
           const T = Math.min($, g);
           f(T), d && d([T, g]);
         } else {
@@ -15939,7 +15951,7 @@ const Be = ({ children: t, className: n }) => /* @__PURE__ */ e(
         }
       );
     if (a === "labelTop" && l.length > 0) {
-      const O = Math.round(z / n * (l.length - 1)), E = l[O] || "";
+      const W = Math.round(z / n * (l.length - 1)), E = l[W] || "";
       return /* @__PURE__ */ e(
         "div",
         {
@@ -15955,7 +15967,7 @@ const Be = ({ children: t, className: n }) => /* @__PURE__ */ e(
       );
     }
     if (a === "labelBottom" && l.length > 0) {
-      const O = Math.round(z / n * (l.length - 1)), E = l[O] || "";
+      const W = Math.round(z / n * (l.length - 1)), E = l[W] || "";
       return /* @__PURE__ */ e(
         "div",
         {
@@ -16216,7 +16228,7 @@ export {
   ml as GridDraggableItem,
   an as Header,
   fo as HeaderTabs,
-  W as Icon,
+  O as Icon,
   eu as ImageUploader,
   ar as InfoIcon,
   tu as InfoLabel,