@epam/ai-dial-ui-kit 0.3.0-rc.52 → 0.3.0-rc.54

package/dist/dial-ui-kit.es.js

@@ -1,11 +1,11 @@
-import { jsx as i, jsxs as w, Fragment as pe } from "react/jsx-runtime";
-import x from "classnames";
+import { jsx as i, jsxs as x, Fragment as pe } from "react/jsx-runtime";
+import w from "classnames";
 import { useFloating as Dt, offset as hr, flip as mr, shift as Cr, arrow as vn, autoUpdate as br, useHover as vr, useFocus as yn, useDismiss as St, useRole as Lt, useInteractions as It, useMergeRefs as yr, FloatingPortal as Tt, FloatingArrow as wn, autoPlacement as xn, size as Dn, useClick as Sn, FloatingFocusManager as wr, FloatingOverlay as Ln } from "@floating-ui/react";
 import * as E from "react";
 import { createContext as xr, useState as W, useRef as le, useMemo as $, useContext as Dr, forwardRef as Sr, isValidElement as Ot, cloneElement as qe, useCallback as A, useEffect as ne, memo as In, useLayoutEffect as Tn, useId as Lr, Children as On } from "react";
 import { IconInfoCircle as Ir, IconCircleCheck as En, IconAlertTriangle as Nn, IconAlertCircle as kn, IconX as _e, IconMinus as Rn, IconCheck as Tr, IconExclamationCircle as Et, IconClipboardX as Or, IconChevronsLeft as Pn, IconChevronsRight as Mn, IconGripVertical as Vn, IconFile as Hn, IconFileTypeZip as An, IconFileTypeXml as Fn, IconFileTypeXls as _n, IconFileTypeVue as zn, IconFileTypeTxt as jn, IconFileTypeTsx as Bn, IconFileTypeTs as Gn, IconFileTypeSvg as $n, IconFileTypeSql as Wn, IconFileTypeRs as Un, IconFileTypePpt as qn, IconFileTypePng as Zn, IconFileTypePhp as Xn, IconFileTypePdf as Yn, IconFileTypeJsx as Kn, IconFileTypeJs as Jn, IconFileTypeJpg as Qn, IconFileTypeHtml as eo, IconFileTypeDocx as to, IconFileTypeDoc as ro, IconFileTypeCsv as no, IconFileTypeCss as oo, IconFileTypeBmp as so, IconArrowUpRight as io, IconFolder as ao, IconChevronDown as Er, IconDotsVertical as lo, IconChevronRight as co, IconTrashX as Nr, IconEyeOff as uo, IconEye as fo, IconSearch as po, IconPlus as go } from "@tabler/icons-react";
 import { createPortal as ho } from "react-dom";
-const De = ({ errorText: e }) => e && /* @__PURE__ */ i("span", { className: "text-error dial-tiny mt-1", children: e }), U = ({ icon: e, className: t }) => e ? /* @__PURE__ */ i("span", { className: x("flex-shrink-0", t), children: e }) : null, mo = 7, Co = 2, kr = xr(null), Rr = () => {
+const De = ({ errorText: e }) => e && /* @__PURE__ */ i("span", { className: "text-error dial-tiny mt-1", children: e }), U = ({ icon: e, className: t }) => e ? /* @__PURE__ */ i("span", { className: w("flex-shrink-0", t), children: e }) : null, mo = 7, Co = 2, kr = xr(null), Rr = () => {
   const e = Dr(kr);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
@@ -34,14 +34,14 @@ const De = ({ errorText: e }) => e && /* @__PURE__ */ i("span", { className: "te
         element: l
       })
     ]
-  }), f = vr(u.context, {
+  }), p = vr(u.context, {
     move: !1,
     enabled: n == null,
     mouseOnly: r,
     delay: { open: 500, close: 0 }
   }), g = yn(u.context, {
     enabled: n == null
-  }), p = St(u.context), C = Lt(u.context, { role: "tooltip" }), h = It([f, g, p, C]);
+  }), f = St(u.context), C = Lt(u.context, { role: "tooltip" }), h = It([p, g, f, C]);
   return $(
     () => ({
       open: c,
@@ -60,7 +60,7 @@ const De = ({ errorText: e }) => e && /* @__PURE__ */ i("span", { className: "te
   return /* @__PURE__ */ i(kr.Provider, { value: r, children: e });
 }, Mr = Sr(function({ style: t, ...r }, n) {
   const o = Rr(), s = yr([o.refs.setFloating, n]);
-  return o.open ? /* @__PURE__ */ i(Tt, { id: "tooltip-portal", children: /* @__PURE__ */ w(
+  return o.open ? /* @__PURE__ */ i(Tt, { id: "tooltip-portal", children: /* @__PURE__ */ x(
     "div",
     {
       ref: s,
@@ -69,7 +69,7 @@ const De = ({ errorText: e }) => e && /* @__PURE__ */ i("span", { className: "te
         ...t
       },
       ...o.getFloatingProps(r),
-      className: x(
+      className: w(
         "z-[55] whitespace-pre-wrap break-words rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",
         o.getFloatingProps(r).className
       ),
@@ -113,12 +113,12 @@ const De = ({ errorText: e }) => e && /* @__PURE__ */ i("span", { className: "te
   triggerClassName: n,
   contentClassName: o,
   ...s
-}) => /* @__PURE__ */ w(Pr, { ...s, children: [
-  /* @__PURE__ */ i(Vr, { className: x(n, "truncate"), children: r }),
+}) => /* @__PURE__ */ x(Pr, { ...s, children: [
+  /* @__PURE__ */ i(Vr, { className: w(n, "truncate"), children: r }),
   /* @__PURE__ */ i(
     Mr,
     {
-      className: x(
+      className: w(
         "text-primary",
         o,
         "max-w-[300px]",
@@ -247,12 +247,12 @@ const De = ({ errorText: e }) => e && /* @__PURE__ */ i("span", { className: "te
       }
       h === "[" ? a++ : h === "]" ? a-- : h === "(" ? l++ : h === ")" && l--;
     }
-    const u = s.length === 0 ? o : o.substring(c), f = Io(u), g = f !== u, p = d && d > c ? d - c : void 0;
+    const u = s.length === 0 ? o : o.substring(c), p = Io(u), g = p !== u, f = d && d > c ? d - c : void 0;
     return {
       modifiers: s,
       hasImportantModifier: g,
-      baseClassName: f,
-      maybePostfixModifierPosition: p
+      baseClassName: p,
+      maybePostfixModifierPosition: f
     };
   };
   if (t) {
@@ -299,13 +299,13 @@ const De = ({ errorText: e }) => e && /* @__PURE__ */ i("span", { className: "te
   let c = "";
   for (let d = l.length - 1; d >= 0; d -= 1) {
     const u = l[d], {
-      isExternal: f,
+      isExternal: p,
       modifiers: g,
-      hasImportantModifier: p,
+      hasImportantModifier: f,
       baseClassName: C,
       maybePostfixModifierPosition: h
     } = r(u);
-    if (f) {
+    if (p) {
       c = u + (c.length > 0 ? " " + c : c);
       continue;
     }
@@ -321,7 +321,7 @@ const De = ({ errorText: e }) => e && /* @__PURE__ */ i("span", { className: "te
       }
       D = !1;
     }
-    const b = s(g).join(":"), y = p ? b + gt : b, O = y + v;
+    const b = s(g).join(":"), y = f ? b + gt : b, O = y + v;
     if (a.includes(O))
       continue;
     a.push(O);
@@ -351,7 +351,7 @@ const Ar = (e) => {
 function Ro(e, ...t) {
   let r, n, o, s = a;
   function a(c) {
-    const d = t.reduce((u, f) => f(u), e());
+    const d = t.reduce((u, p) => p(u), e());
     return r = Oo(d), n = r.cache.get, o = r.cache.set, s = l, l(c);
   }
   function l(c) {
@@ -380,7 +380,7 @@ const Z = (e) => {
   const n = _r.exec(e);
   return n ? n[1] ? t(n[1]) : r : !1;
 }, jr = (e) => e === "position" || e === "percentage", Br = (e) => e === "image" || e === "url", Gr = (e) => e === "length" || e === "size" || e === "bg-size", $r = (e) => e === "length", Xo = (e) => e === "number", Yo = (e) => e === "family-name", Wr = (e) => e === "shadow", Ko = () => {
-  const e = Z("color"), t = Z("font"), r = Z("text"), n = Z("font-weight"), o = Z("tracking"), s = Z("leading"), a = Z("breakpoint"), l = Z("container"), c = Z("spacing"), d = Z("radius"), u = Z("shadow"), f = Z("inset-shadow"), g = Z("text-shadow"), p = Z("drop-shadow"), C = Z("blur"), h = Z("perspective"), D = Z("aspect"), v = Z("ease"), b = Z("animate"), y = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], O = () => [
+  const e = Z("color"), t = Z("font"), r = Z("text"), n = Z("font-weight"), o = Z("tracking"), s = Z("leading"), a = Z("breakpoint"), l = Z("container"), c = Z("spacing"), d = Z("radius"), u = Z("shadow"), p = Z("inset-shadow"), g = Z("text-shadow"), f = Z("drop-shadow"), C = Z("blur"), h = Z("perspective"), D = Z("aspect"), v = Z("ease"), b = Z("animate"), y = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], O = () => [
     "center",
     "top",
     "bottom",
@@ -1787,7 +1787,7 @@ const Z = (e) => {
        * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
        */
       "inset-shadow": [{
-        "inset-shadow": ["none", f, Ge, Be]
+        "inset-shadow": ["none", p, Ge, Be]
       }],
       /**
        * Inset Box Shadow Color
@@ -2126,7 +2126,7 @@ const Z = (e) => {
           // Deprecated since Tailwind CSS v4.0.0
           "",
           "none",
-          p,
+          f,
           Ge,
           Be
         ]
@@ -2851,7 +2851,7 @@ const Z = (e) => {
   };
 }, Jo = /* @__PURE__ */ Ro(Ko);
 function _(...e) {
-  return Jo(x(e));
+  return Jo(w(e));
 }
 const Pe = ({
   fieldTitle: e,
@@ -2860,7 +2860,7 @@ const Pe = ({
   optionalText: n,
   cssClass: o,
   description: s
-}) => e ? /* @__PURE__ */ w(
+}) => e ? /* @__PURE__ */ x(
   "label",
   {
     className: _(
@@ -2900,29 +2900,29 @@ const Qo = {
   hideTitleOnMobile: d,
   ariaLabel: u
 }) => {
-  const f = x(
+  const p = w(
     "dial-small-semi",
     l ? "mr-2" : "",
     c ? "ml-2" : "",
     d ? "hidden sm:inline" : "inline",
     n
-  ), g = x(
+  ), g = w(
     t && Qo[t],
     r,
     "focus-visible:outline outline-offset-0"
   );
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ x(
     "button",
     {
       ref: o,
       type: "button",
       className: g,
-      onClick: (p) => s?.(p),
+      onClick: (f) => s?.(f),
       disabled: a,
       "aria-label": e || u,
       children: [
         /* @__PURE__ */ i(U, { icon: c }),
-        e && /* @__PURE__ */ i("span", { className: f, children: e }),
+        e && /* @__PURE__ */ i("span", { className: p, children: e }),
         /* @__PURE__ */ i(U, { icon: l })
       ]
     }
@@ -2945,17 +2945,17 @@ const es = {
   cssClass: r,
   closable: n = !1,
   onClose: o
-}) => /* @__PURE__ */ w(
+}) => /* @__PURE__ */ x(
   "div",
   {
     role: "alert",
-    className: x(
+    className: w(
       rs,
       ts[e],
       r
     ),
     children: [
-      /* @__PURE__ */ w("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ x("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ i(U, { icon: es[e] }),
         /* @__PURE__ */ i("div", { className: "text-primary", children: t })
       ] }),
@@ -2980,7 +2980,7 @@ const es = {
   "div",
   {
     role: "status",
-    className: x({
+    className: w({
       [ns]: !0,
       "w-full h-full": n,
       [t || ""]: !!t
@@ -2993,7 +2993,7 @@ const es = {
           {
             width: e,
             height: e,
-            className: x(os, r),
+            className: w(os, r),
             role: "img",
             "aria-label": o
           }
@@ -3011,14 +3011,14 @@ const es = {
   hideTooltip: n,
   ...o
 }) => {
-  const s = le(null), [a, l] = W(!1), [c, d] = W(""), u = le(null), f = () => {
+  const s = le(null), [a, l] = W(!1), [c, d] = W(""), u = le(null), p = () => {
     const h = s.current;
     if (!h) return;
     d(h.textContent ?? "");
     const D = h.clientWidth, v = h.scrollWidth, b = Math.ceil(h.getBoundingClientRect().width);
     l(v > D || v > b);
   }, g = A(() => {
-    u.current && cancelAnimationFrame(u.current), u.current = requestAnimationFrame(f);
+    u.current && cancelAnimationFrame(u.current), u.current = requestAnimationFrame(p);
   }, []);
   ne(() => {
     g();
@@ -3029,11 +3029,11 @@ const es = {
       window.removeEventListener("resize", h), D && D.disconnect(), u.current && cancelAnimationFrame(u.current);
     };
   }, [e, g]);
-  const p = $(
+  const f = $(
     () => typeof e == "string" ? e : c,
     [c, e]
-  ), C = $(() => n ? "" : a ? p : "", [p, n, a]);
-  return /* @__PURE__ */ w(Pr, { ...o, children: [
+  ), C = $(() => n ? "" : a ? f : "", [f, n, a]);
+  return /* @__PURE__ */ x(Pr, { ...o, children: [
     /* @__PURE__ */ i(
       Vr,
       {
@@ -3048,7 +3048,7 @@ const es = {
               "block truncate flex-1 min-w-0 max-w-full",
               t
             ),
-            "aria-label": a ? p : void 0,
+            "aria-label": a ? f : void 0,
             onMouseEnter: g,
             onFocus: g,
             children: e
@@ -3083,16 +3083,16 @@ const es = {
       a?.(g.target.checked, t);
     },
     [a, t]
-  ), d = x(
+  ), d = w(
     "flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",
     `${r || n ? "" : 'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,
     o ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : "",
     l
-  ), u = x(
+  ), u = w(
     "mr-2 border rounded",
     o ? "bg-layer-4 border-icon-secondary" : ""
   );
-  return /* @__PURE__ */ w("label", { className: d, htmlFor: t, children: [
+  return /* @__PURE__ */ x("label", { className: d, htmlFor: t, children: [
     n ? /* @__PURE__ */ i(Rn, { className: u, ...X }) : r ? /* @__PURE__ */ i(Tr, { className: u, ...X }) : null,
     e && (typeof e == "string" ? /* @__PURE__ */ i(be, { text: e, cssClass: "text-primary" }) : e),
     /* @__PURE__ */ i(
@@ -3156,16 +3156,16 @@ const as = (e, t) => {
   onChangeStep: n
 }) => {
   const o = "h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer", s = "w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white", a = () => r === e.id && e.status === ae.ERROR ? /* @__PURE__ */ i(Et, { stroke: 2, size: 16 }) : r !== e.id && e.status === ae.VALID ? /* @__PURE__ */ i(Tr, { stroke: 2, size: 16 }) : t + 1;
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ x(
     "button",
     {
-      className: x(o, as(e, r)),
+      className: w(o, as(e, r)),
       onClick: () => n(e.id),
       children: [
         /* @__PURE__ */ i(
           "span",
           {
-            className: x(s, ls(e, r)),
+            className: w(s, ls(e, r)),
             children: a()
           }
         ),
@@ -3205,20 +3205,20 @@ const as = (e, t) => {
   onChange: d,
   descriptionCssClass: u
 }) => {
-  const f = `${s}-desc`, g = x(
+  const p = `${s}-desc`, g = w(
     "dial-small cursor-pointer",
     c ? "text-secondary" : "text-primary",
     l
-  ), p = x(
+  ), f = w(
     "cursor-pointer dial-input-radio",
     r && "mr-2",
     a
-  ), C = x("flex flex-col", !!n && "mb-2"), h = x(
+  ), C = w("flex flex-col", !!n && "mb-2"), h = w(
     "dial-tiny mt-2 ml-[26px] text-secondary",
     u
   );
-  return /* @__PURE__ */ w("div", { className: C, children: [
-    /* @__PURE__ */ w("div", { className: "flex flex-row items-center", children: [
+  return /* @__PURE__ */ x("div", { className: C, children: [
+    /* @__PURE__ */ x("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ i(
         "input",
         {
@@ -3228,8 +3228,8 @@ const as = (e, t) => {
           value: t,
           checked: o,
           disabled: c,
-          "aria-describedby": o && n ? f : void 0,
-          className: p,
+          "aria-describedby": o && n ? p : void 0,
+          className: f,
           onChange: (v) => {
             c || v.target.checked && d?.(t);
           }
@@ -3237,7 +3237,7 @@ const as = (e, t) => {
       ),
       r ? /* @__PURE__ */ i("label", { className: g, htmlFor: s, children: r }) : null
     ] }),
-    o && n && /* @__PURE__ */ i("div", { id: f, className: h, children: n })
+    o && n && /* @__PURE__ */ i("div", { id: p, className: h, children: n })
   ] });
 };
 var Ze = /* @__PURE__ */ ((e) => (e.Vertical = "vertical", e.Horizontal = "horizontal", e))(Ze || {});
@@ -3256,9 +3256,9 @@ const us = "w-full flex", fs = {
   cssClass: c,
   labelCssClass: d,
   errorCssClass: u,
-  childrenCssClass: f,
+  childrenCssClass: p,
   captionDescription: g,
-  readonly: p,
+  readonly: f,
   value: C,
   defaultEmptyText: h,
   children: D
@@ -3282,7 +3282,7 @@ const us = "w-full flex", fs = {
       children: s
     }
   ), [s, u, y]), B = A(() => C ? typeof C == "string" || typeof C == "number" ? /* @__PURE__ */ i("span", { "aria-readonly": "true", children: C }) : C : /* @__PURE__ */ i("span", { "aria-readonly": "true", children: h ?? "None" }), [C, h]);
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ x(
     "div",
     {
       role: "group",
@@ -3315,8 +3315,8 @@ const us = "w-full flex", fs = {
             )
           }
         ),
-        /* @__PURE__ */ w("div", { className: _("min-w-0 w-full", f), children: [
-          p ? /* @__PURE__ */ i("div", { className: "dial-input px-3 py-2", children: B() }) : D,
+        /* @__PURE__ */ x("div", { className: _("min-w-0 w-full", p), children: [
+          f ? /* @__PURE__ */ i("div", { className: "dial-input px-3 py-2", children: B() }) : D,
           g && /* @__PURE__ */ i(
             "div",
             {
@@ -3350,9 +3350,9 @@ const ps = "flex", gs = "pb-1 mt-2", hs = {
   groupLabelCssClass: c,
   formItemChildrenCssClass: d,
   labelCssClass: u,
-  disabled: f,
+  disabled: p,
   elementId: g,
-  radioButtons: p,
+  radioButtons: f,
   activeRadioButton: C,
   orientation: h,
   onChange: D
@@ -3369,13 +3369,13 @@ const ps = "flex", gs = "pb-1 mt-2", hs = {
       {
         role: "radiogroup",
         "aria-label": e,
-        "aria-disabled": f || void 0,
+        "aria-disabled": p || void 0,
         className: _(
           ps,
           hs[h],
           s
         ),
-        children: p.map((v) => /* @__PURE__ */ w(
+        children: f.map((v) => /* @__PURE__ */ x(
           "div",
           {
             className: _(
@@ -3390,7 +3390,7 @@ const ps = "flex", gs = "pb-1 mt-2", hs = {
                   name: g,
                   value: v.id,
                   inputId: v.id,
-                  disabled: f,
+                  disabled: p,
                   cssClass: t,
                   labelCssClass: _(
                     u,
@@ -3422,7 +3422,7 @@ const ps = "flex", gs = "pb-1 mt-2", hs = {
   icon: e,
   title: t,
   description: r
-}) => /* @__PURE__ */ w("div", { className: "h-full w-full flex flex-col items-center justify-center text-secondary", children: [
+}) => /* @__PURE__ */ x("div", { className: "h-full w-full flex flex-col items-center justify-center text-secondary", children: [
   e || /* @__PURE__ */ i(Or, { width: 60, height: 60 }),
   /* @__PURE__ */ i("span", { className: "dial-small mt-2 text-primary", children: t }),
   r && /* @__PURE__ */ i("span", { className: "mt-1 text-primary", children: r })
@@ -3435,20 +3435,20 @@ const ps = "flex", gs = "pb-1 mt-2", hs = {
   titleCssClass: s,
   additionalButtons: a
 }) => {
-  const [l, c] = W(r), [d, u] = W(!0), f = x([
+  const [l, c] = W(r), [d, u] = W(!0), p = w([
     "transform rotate-180 [writing-mode:tb-rl]",
     d && "hidden",
     s
-  ]), g = x([
+  ]), g = w([
     "flex flex-row gap-2 cursor-pointer text-secondary",
     d ? "justify-end" : "justify-center"
-  ]), p = () => {
+  ]), f = () => {
     c(d ? bs : r), u(!d);
   };
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ x(
     "div",
     {
-      className: x([
+      className: w([
         "rounded p-4 flex flex-col justify-between overflow-y-auto flex-shrink-0",
         e
       ]),
@@ -3457,21 +3457,21 @@ const ps = "flex", gs = "pb-1 mt-2", hs = {
         /* @__PURE__ */ i(
           "div",
           {
-            className: x([
+            className: w([
               "flex-1 min-h-0 overflow-auto",
               !d && "hidden"
             ]),
             children: t
           }
         ),
-        /* @__PURE__ */ i("div", { className: f, children: n }),
-        /* @__PURE__ */ w("div", { className: g, children: [
+        /* @__PURE__ */ i("div", { className: p, children: n }),
+        /* @__PURE__ */ x("div", { className: g, children: [
           d && a,
           /* @__PURE__ */ i(
             Q,
             {
               cssClass: "hover:text-icon-accent-primary",
-              onClick: p,
+              onClick: f,
               iconBefore: d ? /* @__PURE__ */ i(
                 Pn,
                 {
@@ -3496,13 +3496,13 @@ const ps = "flex", gs = "pb-1 mt-2", hs = {
   text: t,
   children: r,
   postfix: n
-}) => /* @__PURE__ */ w(
+}) => /* @__PURE__ */ x(
   "div",
   {
-    className: x("flex flex-col", r ? "" : "max-w-[200px]"),
+    className: w("flex flex-col", r ? "" : "max-w-[200px]"),
     children: [
       /* @__PURE__ */ i("label", { className: "dial-tiny mb-2 text-secondary", children: e }),
-      r || /* @__PURE__ */ w("div", { className: "flex flex-row items-center", children: [
+      r || /* @__PURE__ */ x("div", { className: "flex flex-row items-center", children: [
         /* @__PURE__ */ i(Le, { triggerClassName: "text-primary", tooltip: t, children: t }),
         n || null
       ] })
@@ -3527,7 +3527,7 @@ const vs = {
     s ? "border" : "border-transparent",
     t
   );
-  return /* @__PURE__ */ w("div", { className: l, children: [
+  return /* @__PURE__ */ x("div", { className: l, children: [
     /* @__PURE__ */ i(U, { icon: o }),
     /* @__PURE__ */ i(be, { text: e }),
     r && /* @__PURE__ */ i(
@@ -3618,7 +3618,7 @@ function Zr(e, t, r) {
       throw new Error(process.env.NODE_ENV === "production" ? se(3) : "You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of reading it from the store.");
     return s;
   }
-  function f(h) {
+  function p(h) {
     if (typeof h != "function")
       throw new Error(process.env.NODE_ENV === "production" ? se(4) : "Expected the listener to be a function. Instead, received: '" + Te(h) + "'");
     if (c)
@@ -3652,7 +3652,7 @@ function Zr(e, t, r) {
     }
     return h;
   }
-  function p(h) {
+  function f(h) {
     if (typeof h != "function")
       throw new Error(process.env.NODE_ENV === "production" ? se(10) : "Expected the nextReducer to be a function. Instead, received: '" + Te(h));
     o = h, g({
@@ -3660,7 +3660,7 @@ function Zr(e, t, r) {
     });
   }
   function C() {
-    var h, D = f;
+    var h, D = p;
     return h = {
       /**
        * The minimal observable subscription method.
@@ -3690,9 +3690,9 @@ function Zr(e, t, r) {
     type: Xt.INIT
   }), n = {
     dispatch: g,
-    subscribe: f,
+    subscribe: p,
     getState: u,
-    replaceReducer: p
+    replaceReducer: f
   }, n[qt] = C, n;
 }
 function N(e, t, ...r) {
@@ -3782,11 +3782,11 @@ function ks(e) {
     if (g == null)
       return;
     Ms(g), c.pinSource(d);
-    const p = c.getSourceType(d);
+    const f = c.getSourceType(d);
     return {
       type: Je,
       payload: {
-        itemType: p,
+        itemType: f,
         item: g,
         sourceId: d,
         clientOffset: s || null,
@@ -4902,8 +4902,8 @@ function bt(e, t, r, n) {
     const d = s[c];
     if (!l(d))
       return !1;
-    const u = e[d], f = t[d];
-    if (o = void 0, o === !1 || o === void 0 && u !== f)
+    const u = e[d], p = t[d];
+    if (o = void 0, o === !1 || o === void 0 && u !== p)
       return !1;
   }
   return !0;
@@ -5281,35 +5281,35 @@ const or = "column", y1 = "flex items-center", w1 = "mr-3 cursor-move text-secon
   moveItem: o,
   handleAriaLabel: s = "Drag item"
 }) => {
-  const a = le(null), l = le(null), c = typeof n == "function" ? n(e) : -1, [{ isDragging: d }, u, f] = f1(
+  const a = le(null), l = le(null), c = typeof n == "function" ? n(e) : -1, [{ isDragging: d }, u, p] = f1(
     () => ({
       type: or,
       item: { id: e, originalIndex: c },
-      collect: (p) => {
-        const C = p.getItem();
+      collect: (f) => {
+        const C = f.getItem();
         return {
-          isDragging: p.isDragging() && C?.id === e
+          isDragging: f.isDragging() && C?.id === e
         };
       },
-      end: (p, C) => {
-        if (!p) return;
-        !C.didDrop() && typeof o == "function" && p.originalIndex > -1 && o(p.id, p.originalIndex);
+      end: (f, C) => {
+        if (!f) return;
+        !C.didDrop() && typeof o == "function" && f.originalIndex > -1 && o(f.id, f.originalIndex);
       }
     }),
     [e, c, o]
   ), [, g] = on(
     () => ({
       accept: or,
-      hover: (p) => {
-        if (!(!p || p.id === e) && typeof n == "function" && typeof o == "function") {
+      hover: (f) => {
+        if (!(!f || f.id === e) && typeof n == "function" && typeof o == "function") {
           const C = n(e);
-          o(p.id, C);
+          o(f.id, C);
         }
       }
     }),
     [n, o, e]
   );
-  return f(g(l)), u(a), /* @__PURE__ */ w(
+  return p(g(l)), u(a), /* @__PURE__ */ x(
     "div",
     {
       ref: l,
@@ -5386,16 +5386,16 @@ const or = "column", y1 = "flex items-center", w1 = "mr-3 cursor-move text-secon
   indicator: a
 }) => {
   const l = (() => {
-    const f = e.trim().toLowerCase();
-    return f.startsWith(".") ? f : `.${f}`;
+    const p = e.trim().toLowerCase();
+    return p.startsWith(".") ? p : `.${p}`;
   })(), d = (sr[l] ?? sr.default)({
     size: t,
     stroke: r
   }), u = s ?? `${l.slice(1).toUpperCase()} file icon`;
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ x(
     "span",
     {
-      className: x("inline-flex relative", n),
+      className: w("inline-flex relative", n),
       ...o ? { "aria-hidden": !0 } : { role: "img", "aria-label": u },
       children: [
         /* @__PURE__ */ i(U, { icon: d, className: "inline-block align-middle" }),
@@ -5430,7 +5430,7 @@ const or = "column", y1 = "flex items-center", w1 = "mr-3 cursor-move text-secon
   shared: r = !1
 }) => {
   const n = e.includes(".") ? e.split(".").pop() : null;
-  return /* @__PURE__ */ w("div", { className: _("flex items-center gap-2 w-full", t), children: [
+  return /* @__PURE__ */ x("div", { className: _("flex items-center gap-2 w-full", t), children: [
     n && /* @__PURE__ */ i(
       E1,
       {
@@ -5452,8 +5452,8 @@ const or = "column", y1 = "flex items-center", w1 = "mr-3 cursor-move text-secon
   name: e,
   cssClass: t,
   shared: r = !1
-}) => /* @__PURE__ */ w("div", { className: _("flex items-center gap-2 w-full", t), children: [
-  /* @__PURE__ */ w("span", { className: "inline-flex relative text-secondary", role: "img", children: [
+}) => /* @__PURE__ */ x("div", { className: _("flex items-center gap-2 w-full", t), children: [
+  /* @__PURE__ */ x("span", { className: "inline-flex relative text-secondary", role: "img", children: [
     /* @__PURE__ */ i(
       U,
       {
@@ -5480,13 +5480,13 @@ const ir = () => typeof window < "u" && window.innerWidth < 1024, N1 = () => {
   }, []), e;
 };
 var k1 = /* @__PURE__ */ ((e) => (e.Dropdown = "dropdown", e.Menu = "menu", e))(k1 || {}), xe = /* @__PURE__ */ ((e) => (e.Click = "click", e.Hover = "hover", e.ContextMenu = "contextMenu", e))(xe || {}), an = /* @__PURE__ */ ((e) => (e.Item = "item", e.Divider = "divider", e))(an || {});
-const R1 = x(
+const R1 = w(
   "flex items-center gap-2 align-middle",
   "h-auto px-0 bg-transparent border-0"
-), P1 = x(
+), P1 = w(
   "z-[53] overflow-auto rounded bg-layer-0 text-primary shadow focus-visible:outline-none",
   "w-max"
-), M1 = x(
+), M1 = w(
   "flex w-full cursor-pointer items-center gap-3",
   "focus-visible:border-none focus-visible:outline-none",
   "hover:bg-accent-primary-alpha px-3",
@@ -5516,9 +5516,9 @@ const R1 = x(
   onOpenChange: c,
   closable: d = !1,
   onClose: u,
-  cssClass: f,
+  cssClass: p,
   listClassName: g,
-  outsidePressIgnoreRef: p,
+  outsidePressIgnoreRef: f,
   outsideClosable: C = !0,
   allowedPlacements: h,
   anchorToMouse: D = !1,
@@ -5570,7 +5570,7 @@ const R1 = x(
     outsidePress: (m) => {
       if (!C) return !1;
       const H = m.target;
-      return !(p?.current && H instanceof Node && p.current.contains(H));
+      return !(f?.current && H instanceof Node && f.current.contains(H));
     }
   }), te = Lt(V, { role: "menu" }), { getReferenceProps: re, getFloatingProps: T } = It([
     ee,
@@ -5612,7 +5612,7 @@ const R1 = x(
       m.disabled || (m.onClick?.({ key: m.key, domEvent: H }), t?.onClick?.({ key: m.key, domEvent: H }), P(!1));
     },
     [t, P]
-  ), q = $(() => r ? r() : t ? /* @__PURE__ */ w(pe, { children: [
+  ), q = $(() => r ? r() : t ? /* @__PURE__ */ x(pe, { children: [
     t.header && /* @__PURE__ */ i(pe, { children: typeof t.header == "function" ? t.header() : t.header }),
     /* @__PURE__ */ i("div", { role: "none", className: "py-1", children: t.items.map((m) => m.type === an.Divider ? /* @__PURE__ */ i(
       "div",
@@ -5621,13 +5621,13 @@ const R1 = x(
         className: A1
       },
       m.key
-    ) : /* @__PURE__ */ w(
+    ) : /* @__PURE__ */ x(
       "button",
       {
         role: "menuitem",
         type: "button",
         "aria-disabled": !!m.disabled,
-        className: x(
+        className: w(
           M1,
           m.disabled && V1,
           m.danger && H1
@@ -5638,7 +5638,7 @@ const R1 = x(
           m.icon && /* @__PURE__ */ i(
             "span",
             {
-              className: x(
+              className: w(
                 m.danger && "text-error",
                 m.disabled && "text-secondary"
               ),
@@ -5648,7 +5648,7 @@ const R1 = x(
           /* @__PURE__ */ i(
             "span",
             {
-              className: x(
+              className: w(
                 "flex-1 truncate text-left",
                 m.danger && "text-error",
                 m.disabled && "text-secondary"
@@ -5665,15 +5665,15 @@ const R1 = x(
     onContextMenu: ge,
     onMouseDown: he
   });
-  return /* @__PURE__ */ w(pe, { children: [
+  return /* @__PURE__ */ x(pe, { children: [
     /* @__PURE__ */ i(
       "span",
       {
         ref: z.setReference,
-        className: x(
+        className: w(
           R1,
           s && "!cursor-not-allowed opacity-75",
-          f
+          p
         ),
         "aria-haspopup": "menu",
         "aria-expanded": R,
@@ -5689,13 +5689,13 @@ const R1 = x(
         modal: !1,
         initialFocus: -1,
         returnFocus: !0,
-        children: /* @__PURE__ */ w(
+        children: /* @__PURE__ */ x(
           "div",
           {
             id: B,
             ref: z.setFloating,
             style: M,
-            className: x(
+            className: w(
               P1,
               !v && "w-max",
               g
@@ -5739,7 +5739,7 @@ const R1 = x(
     },
     o
   );
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ x(
     "button",
     {
       role: "tab",
@@ -5765,22 +5765,22 @@ const R1 = x(
   onClick: r,
   orientation: n = yt.Horizontal
 }) => {
-  const [o, s] = W(!1), [a, l] = W(!1), [c, d] = W(!1), u = N1(), f = n === yt.Horizontal, g = le(null), p = le(null), C = le(null), h = e.find((b) => b.id === t), D = $(
-    () => x(
+  const [o, s] = W(!1), [a, l] = W(!1), [c, d] = W(!1), u = N1(), p = n === yt.Horizontal, g = le(null), f = le(null), C = le(null), h = e.find((b) => b.id === t), D = $(
+    () => w(
       "flex gap-3",
-      f ? "flex-row flex-nowrap overflow-x-auto" : "flex-col flex-wrap w-full"
+      p ? "flex-row flex-nowrap overflow-x-auto" : "flex-col flex-wrap w-full"
     ),
-    [f]
+    [p]
   ), v = A(() => {
-    const b = p.current;
+    const b = f.current;
     b && d(b.scrollWidth > b.clientWidth);
   }, []);
   return ne(() => {
     v();
-    const b = new ResizeObserver(v), y = p.current;
+    const b = new ResizeObserver(v), y = f.current;
     return y && b.observe(y), () => b.disconnect();
   }, [e, v]), ne(() => {
-    const b = C.current, y = p.current;
+    const b = C.current, y = f.current;
     if (!b || !y) return;
     const O = b.offsetLeft, R = O + b.offsetWidth, P = y.scrollLeft, B = P + y.clientWidth;
     O < P ? y.scrollTo({
@@ -5810,7 +5810,7 @@ const R1 = x(
         },
         b.id
       )),
-      children: /* @__PURE__ */ w("div", { className: "flex gap-2 items-center h-11 cursor-pointer", children: [
+      children: /* @__PURE__ */ x("div", { className: "flex gap-2 items-center h-11 cursor-pointer", children: [
         /* @__PURE__ */ i(
           $e,
           {
@@ -5825,7 +5825,7 @@ const R1 = x(
           U,
           {
             icon: /* @__PURE__ */ i(Er, { size: 16 }),
-            className: x(
+            className: w(
               "text-primary transition-transform",
               o && "rotate-180"
             )
@@ -5835,8 +5835,8 @@ const R1 = x(
     }
   ) }) : (
     // Desktop
-    /* @__PURE__ */ w("div", { ref: g, className: "flex w-full items-start", children: [
-      /* @__PURE__ */ i("div", { ref: p, className: D, children: e.map((b) => /* @__PURE__ */ i(
+    /* @__PURE__ */ x("div", { ref: g, className: "flex w-full items-start", children: [
+      /* @__PURE__ */ i("div", { ref: f, className: D, children: e.map((b) => /* @__PURE__ */ i(
         "div",
         {
           ref: t === b.id ? C : void 0,
@@ -5847,7 +5847,7 @@ const R1 = x(
               tab: b,
               active: t === b.id,
               onClick: r,
-              horizontal: f,
+              horizontal: p,
               cssClass: "w-full"
             }
           )
@@ -5877,7 +5877,7 @@ const R1 = x(
             Q,
             {
               iconBefore: /* @__PURE__ */ i(lo, { size: 18 }),
-              cssClass: x(
+              cssClass: w(
                 "w-8 h-8 flex items-center justify-center rounded border",
                 a ? "bg-layer-4 border-transparent" : "border-primary"
               )
@@ -5898,9 +5898,9 @@ const R1 = x(
   iconBefore: l,
   titleCssClass: c
 }) => {
-  const d = _(z1, a), u = !!t && !o && !n, f = typeof e == "string" ? /* @__PURE__ */ i(be, { text: e }) : e;
-  return /* @__PURE__ */ w("li", { className: d, children: [
-    u ? /* @__PURE__ */ w(
+  const d = _(z1, a), u = !!t && !o && !n, p = typeof e == "string" ? /* @__PURE__ */ i(be, { text: e }) : e;
+  return /* @__PURE__ */ x("li", { className: d, children: [
+    u ? /* @__PURE__ */ x(
       "a",
       {
         className: _(
@@ -5912,10 +5912,10 @@ const R1 = x(
         onClick: r,
         children: [
           l,
-          f
+          p
         ]
       }
-    ) : /* @__PURE__ */ w(
+    ) : /* @__PURE__ */ x(
       "span",
       {
         className: _(
@@ -5928,7 +5928,7 @@ const R1 = x(
         "aria-disabled": n ? "true" : void 0,
         children: [
           l,
-          f
+          p
         ]
       }
     ),
@@ -5999,7 +5999,7 @@ const R1 = x(
         placeholder: r,
         value: e || "",
         disabled: s,
-        className: x(
+        className: w(
           "dial-textarea dial-input px-3 py-2",
           a ? "dial-input-error" : "",
           s && "dial-input-disable",
@@ -6021,9 +6021,10 @@ const R1 = x(
   "Enter",
   "Escape",
   "Home",
-  "End"
+  "End",
+  "Insert"
 ], Z1 = (e, t, r, n) => {
-  if ((t === "number" || r !== void 0 || n !== void 0) && !q1.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (r === void 0 || r < 0)) && !(e.key === "." && t === "number" && !e.currentTarget.value.includes("."))) {
+  if ((t === "number" || r !== void 0 || n !== void 0) && !q1.includes(e.key) && !(e.ctrlKey || e.metaKey) && !(e.key === "-" && (e.currentTarget.selectionStart ?? 0) === 0 && !e.currentTarget.value.includes("-")) && !(e.key === "." && t === "number" && !e.currentTarget.value.includes("."))) {
     if (!/^[0-9]$/.test(e.key)) {
       e.preventDefault();
       return;
@@ -6054,9 +6055,9 @@ const R1 = x(
   tooltipTriggerClassName: c,
   type: d = "text",
   disabled: u,
-  readonly: f,
+  readonly: p,
   invalid: g,
-  onChange: p,
+  onChange: f,
   min: C,
   max: h,
   prefix: D,
@@ -6076,17 +6077,17 @@ const R1 = x(
       if (isNaN(ee) && V !== "-" && V !== "." || !isNaN(ee) && (C !== void 0 && ee < C || h !== void 0 && ee > h))
         return;
     }
-    p?.(V || void 0);
+    f?.(V || void 0);
   };
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ x(
     "div",
     {
-      className: x(
+      className: w(
         "dial-input-field flex flex-row items-center justify-between py-2",
         r ? "dial-input-no-border" : "dial-input",
         g && "dial-input-error",
         u && "dial-input-disable",
-        f && "dial-input-readonly",
+        p && "dial-input-readonly",
         !b && "pl-3",
         !y && "pr-3",
         l
@@ -6103,16 +6104,22 @@ const R1 = x(
             elementId: b + "textBefore"
           }
         ) }),
-        D && /* @__PURE__ */ w("p", { className: "text-secondary dial-small mr-2", children: [
+        D && /* @__PURE__ */ x("p", { className: "text-secondary dial-small mr-2", children: [
           " ",
           D
         ] }),
-        /* @__PURE__ */ i(U, { icon: e }),
+        /* @__PURE__ */ i(
+          U,
+          {
+            icon: e,
+            className: w(!!e && "mr-2")
+          }
+        ),
         /* @__PURE__ */ i(
           Le,
           {
             tooltip: P || n,
-            triggerClassName: x(c, "flex-1"),
+            triggerClassName: w(c, "flex-1"),
             children: /* @__PURE__ */ i(
               "input",
               {
@@ -6122,11 +6129,11 @@ const R1 = x(
                 placeholder: s,
                 value: R ? void 0 : n ?? "",
                 disabled: u,
-                className: x(
+                className: w(
                   "border-0 bg-transparent w-full truncate",
                   a
                 ),
-                onChange: (M) => !f && z?.(M),
+                onChange: (M) => !p && z?.(M),
                 onKeyDown: G,
                 onWheel: B,
                 onBlur: O,
@@ -6137,8 +6144,14 @@ const R1 = x(
             )
           }
         ),
-        /* @__PURE__ */ i(U, { icon: t }),
-        v && /* @__PURE__ */ w("p", { className: "text-secondary dial-small ml-2", children: [
+        /* @__PURE__ */ i(
+          U,
+          {
+            icon: t,
+            className: w(!!t && "ml-2")
+          }
+        ),
+        v && /* @__PURE__ */ x("p", { className: "text-secondary dial-small ml-2", children: [
           " ",
           v
         ] }),
@@ -6156,56 +6169,61 @@ const R1 = x(
     }
   );
 }, X1 = /^0+\.(\d+)?$/, Y1 = /^0+/, dn = ({
-  fieldTitle: e,
-  errorText: t,
-  optional: r,
-  elementCssClass: n,
-  elementContainerCssClass: o,
-  elementId: s,
-  containerCssClass: a,
-  readonly: l,
-  defaultEmptyText: c,
-  min: d,
-  max: u,
-  ...f
+  // form item props
+  label: e,
+  optional: t,
+  optionalText: r,
+  description: n,
+  error: o,
+  captionDescription: s,
+  readonly: a,
+  orientation: l,
+  // other props
+  elementId: c,
+  fieldTitle: d,
+  errorText: u,
+  elementCssClass: p,
+  elementContainerCssClass: g,
+  containerCssClass: f,
+  defaultEmptyText: C,
+  ...h
 }) => /* @__PURE__ */ i(
   kt,
   {
-    error: t,
-    elementId: s,
-    label: e,
-    optional: r,
-    cssClass: a,
-    children: l ? /* @__PURE__ */ i("span", { children: f.value || (c ?? "None") }) : /* @__PURE__ */ i(
+    label: e ?? d,
+    error: o ?? u,
+    optionalText: r,
+    optional: t,
+    description: n,
+    captionDescription: s,
+    readonly: a,
+    orientation: l,
+    elementId: c,
+    cssClass: f,
+    defaultEmptyText: C,
+    value: h.value,
+    children: /* @__PURE__ */ i(
       Fe,
       {
-        elementId: s,
-        cssClass: n,
-        containerCssClass: o,
-        invalid: t != null,
-        min: d,
-        max: u,
-        ...f
+        elementId: c,
+        cssClass: p,
+        containerCssClass: g,
+        invalid: u != null,
+        ...h
       }
     )
   }
 ), Ja = ({
   onChange: e,
-  value: t,
-  min: r,
-  max: n,
-  ...o
+  ...t
 }) => {
-  const s = (a) => String(a)?.match(X1) ? String(a)?.replace(Y1, "0") : Number(a);
+  const r = (n) => n === "-" ? n : String(n)?.match(X1) ? String(n)?.replace(Y1, "0") : Number(n);
   return /* @__PURE__ */ i(
     dn,
     {
       type: "number",
-      onChange: (a) => e?.(s(a)),
-      value: t,
-      min: r,
-      max: n,
-      ...o
+      onChange: (n) => e?.(r(n)),
+      ...t
     }
   );
 }, Qa = ({
@@ -6227,7 +6245,7 @@ const R1 = x(
   elementContainerCssClass: s,
   errorText: a,
   ...l
-}) => /* @__PURE__ */ w("div", { className: _("flex flex-col", o), children: [
+}) => /* @__PURE__ */ x("div", { className: _("flex flex-col", o), children: [
   /* @__PURE__ */ i(
     Pe,
     {
@@ -6253,7 +6271,7 @@ const R1 = x(
   disabled: n,
   onChange: o
 }) => {
-  const s = x(
+  const s = w(
     "flex w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",
     r ? "flex-row-reverse" : "flex-row",
     n ? "pointer-events-none" : "",
@@ -6264,7 +6282,7 @@ const R1 = x(
     },
     [o, r]
   );
-  return /* @__PURE__ */ w("div", { className: "flex flex-row items-center", children: [
+  return /* @__PURE__ */ x("div", { className: "flex flex-row items-center", children: [
     /* @__PURE__ */ i(
       "input",
       {
@@ -6279,7 +6297,7 @@ const R1 = x(
     /* @__PURE__ */ i("label", { htmlFor: t, className: s, children: /* @__PURE__ */ i(
       "span",
       {
-        className: x(
+        className: w(
           "size-3 rounded-full",
           n ? r ? "bg-layer-4" : "bg-controls-disable" : "bg-controls-enable-primary"
         )
@@ -6306,40 +6324,40 @@ const K1 = "z-[52] flex items-center justify-center bg-blackout md:p-4", J1 = "d
   onClose: d,
   size: u = Ce.Md
 }) => {
-  const { refs: f, context: g } = Dt({
+  const { refs: p, context: g } = Dt({
     open: e,
     onOpenChange: (b) => {
       b || d?.(null);
     }
-  }), p = Lt(g, { role: "dialog" }), C = St(g, { outsidePress: !0 }), { getFloatingProps: h } = It([p, C]);
+  }), f = Lt(g, { role: "dialog" }), C = St(g, { outsidePress: !0 }), { getFloatingProps: h } = It([f, C]);
   if (!e) return null;
   const D = typeof t == "string" ? "dial-popup-heading" : void 0, v = (b) => b ? typeof b == "string" ? /* @__PURE__ */ i(
     "h3",
     {
       id: D,
-      className: x(
+      className: w(
         "flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",
         s
       ),
       children: /* @__PURE__ */ i(Le, { tooltip: b, children: b })
     }
   ) : b : /* @__PURE__ */ i("span", {});
-  return /* @__PURE__ */ i(Tt, { id: r, children: /* @__PURE__ */ i(Ln, { className: x(K1, o), children: /* @__PURE__ */ i(wr, { context: g, children: /* @__PURE__ */ w(
+  return /* @__PURE__ */ i(Tt, { id: r, children: /* @__PURE__ */ i(Ln, { className: w(K1, o), children: /* @__PURE__ */ i(wr, { context: g, children: /* @__PURE__ */ x(
     "div",
     {
-      ref: f.setFloating,
+      ref: p.setFloating,
       ...h(),
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": D,
-      className: x(
+      className: w(
         "dial-popup",
         ea[u],
         a && J1,
         n
       ),
       children: [
-        /* @__PURE__ */ w("div", { className: Q1, children: [
+        /* @__PURE__ */ x("div", { className: Q1, children: [
           v(t),
           /* @__PURE__ */ i(
             ln,
@@ -6378,15 +6396,15 @@ const ta = "flex justify-end gap-2 px-6 py-4", ra = "text-secondary dial-small-1
   cssClass: c,
   confirmClassName: d,
   onClose: u,
-  onConfirm: f,
+  onConfirm: p,
   onCancel: g,
-  children: p,
+  children: f,
   dividers: C = !1,
   variant: h = Ye.Info,
   size: D = Ce.Sm,
   footer: v
 }) => {
-  const b = a ? null : /* @__PURE__ */ w("div", { className: ta, children: [
+  const b = a ? null : /* @__PURE__ */ x("div", { className: ta, children: [
     /* @__PURE__ */ i(
       Q,
       {
@@ -6402,22 +6420,22 @@ const ta = "flex justify-end gap-2 px-6 py-4", ra = "text-secondary dial-small-1
         cssClass: d,
         title: o,
         disable: l,
-        onClick: () => f()
+        onClick: () => p()
       }
     )
-  ] }), y = A(() => a ? /* @__PURE__ */ i("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ i(Ur, { size: 50 }) }) : p ?? (t ? /* @__PURE__ */ i(
+  ] }), y = A(() => a ? /* @__PURE__ */ i("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ i(Ur, { size: 50 }) }) : f ?? (t ? /* @__PURE__ */ i(
     "div",
     {
-      className: x(ra, r),
+      className: w(ra, r),
       children: t
     }
-  ) : null), [p, t, a, r]);
+  ) : null), [f, t, a, r]);
   return /* @__PURE__ */ i(
     zt,
     {
       open: n,
       title: e,
-      cssClass: x(cr[h].container, c),
+      cssClass: w(cr[h].container, c),
       dividers: C,
       onClose: () => u?.(),
       footer: v ?? b,
@@ -6428,7 +6446,7 @@ const ta = "flex justify-end gap-2 px-6 py-4", ra = "text-secondary dial-small-1
 }, un = ({ selectedItems: e, listCssClass: t, listElementCssClass: r }) => !!e?.length && /* @__PURE__ */ i(
   "ul",
   {
-    className: x(
+    className: w(
       "flex-row items-center truncate flex-wrap",
       "flex gap-x-2 gap-y-1",
       t
@@ -6437,7 +6455,7 @@ const ta = "flex justify-end gap-2 px-6 py-4", ra = "text-secondary dial-small-1
       Pt,
       {
         tag: n,
-        cssClass: x([r])
+        cssClass: w([r])
       }
     ) }) }, n))
   }
@@ -6453,12 +6471,12 @@ const ta = "flex justify-end gap-2 px-6 py-4", ra = "text-secondary dial-small-1
   errorText: c,
   emptyValueText: d
 }) => {
-  const u = Array.isArray(n) && n.length > 0, f = typeof n == "string" && !!n.trim(), g = u || f ? n : d, p = r ? void 0 : a;
-  return /* @__PURE__ */ w(pe, { children: [
-    u ? /* @__PURE__ */ i("div", { className: "w-full", onClick: p, children: /* @__PURE__ */ w(
+  const u = Array.isArray(n) && n.length > 0, p = typeof n == "string" && !!n.trim(), g = u || p ? n : d, f = r ? void 0 : a;
+  return /* @__PURE__ */ x(pe, { children: [
+    u ? /* @__PURE__ */ i("div", { className: "w-full", onClick: f, children: /* @__PURE__ */ x(
       "div",
       {
-        className: x(
+        className: w(
           "dial-input px-3 py-2 flex flex-row items-center w-full justify-between",
           r && "dial-input-disable"
         ),
@@ -6479,19 +6497,19 @@ const ta = "flex justify-end gap-2 px-6 py-4", ra = "text-secondary dial-small-1
           ) })
         ]
       }
-    ) }) : /* @__PURE__ */ w(pe, { children: [
+    ) }) : /* @__PURE__ */ x(pe, { children: [
       /* @__PURE__ */ i(
         "button",
         {
           type: "button",
           className: "w-full",
-          onClick: p,
+          onClick: f,
           "aria-label": "open-popup",
           id: l,
-          children: /* @__PURE__ */ w(
+          children: /* @__PURE__ */ x(
             "div",
             {
-              className: x(
+              className: w(
                 "dial-input px-3 py-2 dial-input-field flex flex-row items-center w-full justify-between",
                 s,
                 r && "dial-input-disable",
@@ -6533,9 +6551,9 @@ const ta = "flex justify-end gap-2 px-6 py-4", ra = "text-secondary dial-small-1
   emptyValueText: c,
   onClose: d,
   title: u,
-  portalId: f,
+  portalId: p,
   onApply: g,
-  cancelButtonTitle: p = "Cancel",
+  cancelButtonTitle: f = "Cancel",
   applyButtonTitle: C = "Apply",
   isValid: h,
   selectedRadioValue: D,
@@ -6550,7 +6568,7 @@ const ta = "flex justify-end gap-2 px-6 py-4", ra = "text-secondary dial-small-1
   }, [d]), I = A(() => {
     g(), B();
   }, [g, B]);
-  return /* @__PURE__ */ w("div", { className: "flex flex-col", children: [
+  return /* @__PURE__ */ x("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ i(Pe, { fieldTitle: e, htmlFor: t }),
     /* @__PURE__ */ i(
       sa,
@@ -6559,7 +6577,7 @@ const ta = "flex justify-end gap-2 px-6 py-4", ra = "text-secondary dial-small-1
         open: O,
         selectedValue: s ?? o.find((G) => G.id === n)?.name,
         valueCssClasses: a,
-        inputCssClasses: x(l, "py-2", "px-3"),
+        inputCssClasses: w(l, "py-2", "px-3"),
         emptyValueText: c,
         onOpen: P,
         children: /* @__PURE__ */ i(
@@ -6568,14 +6586,14 @@ const ta = "flex justify-end gap-2 px-6 py-4", ra = "text-secondary dial-small-1
             open: O,
             onClose: B,
             title: u,
-            portalId: f,
+            portalId: p,
             size: y,
-            footer: /* @__PURE__ */ w("div", { className: "flex flex-row items-center justify-end gap-2 px-6 py-4", children: [
+            footer: /* @__PURE__ */ x("div", { className: "flex flex-row items-center justify-end gap-2 px-6 py-4", children: [
               /* @__PURE__ */ i(
                 Q,
                 {
                   variant: J.Secondary,
-                  title: p,
+                  title: f,
                   onClick: B
                 }
               ),
@@ -6617,12 +6635,12 @@ const ta = "flex justify-end gap-2 px-6 py-4", ra = "text-secondary dial-small-1
   onClose: c,
   onSubmit: d,
   onCancel: u,
-  children: f,
+  children: p,
   dividers: g = !0,
-  size: p = Ce.Md,
+  size: f = Ce.Md,
   footer: C
 }) => {
-  const h = o ? null : /* @__PURE__ */ w("div", { className: la, children: [
+  const h = o ? null : /* @__PURE__ */ x("div", { className: la, children: [
     /* @__PURE__ */ i(
       Q,
       {
@@ -6641,7 +6659,7 @@ const ta = "flex justify-end gap-2 px-6 py-4", ra = "text-secondary dial-small-1
         onClick: () => d()
       }
     )
-  ] }), D = A(() => o ? /* @__PURE__ */ i("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ i(Ur, { size: 50 }) }) : f ?? null, [f, o]);
+  ] }), D = A(() => o ? /* @__PURE__ */ i("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ i(Ur, { size: 50 }) }) : p ?? null, [p, o]);
   return /* @__PURE__ */ i(
     zt,
     {
@@ -6651,7 +6669,7 @@ const ta = "flex justify-end gap-2 px-6 py-4", ra = "text-secondary dial-small-1
       dividers: g,
       onClose: () => c?.(),
       footer: C ?? h,
-      size: p,
+      size: f,
       children: D()
     }
   );
@@ -6692,7 +6710,7 @@ const ta = "flex justify-end gap-2 px-6 py-4", ra = "text-secondary dial-small-1
   elementId: n,
   errorText: o,
   ...s
-}) => /* @__PURE__ */ w("div", { className: "flex flex-col", children: [
+}) => /* @__PURE__ */ x("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ i(
     Pe,
     {
@@ -6738,39 +6756,39 @@ const fa = {
   onChange: c,
   size: d = Ke.Base
 }) => {
-  const [u, f] = W(t || "");
+  const [u, p] = W(t || "");
   ne(() => {
-    f(t || "");
+    p(t || "");
   }, [t]);
   const g = A(
     (h) => {
-      f(h), c?.(h);
+      p(h), c?.(h);
     },
     [c]
-  ), p = fa[d], C = A(() => {
+  ), f = fa[d], C = A(() => {
     g("");
   }, [g]);
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ x(
     "div",
     {
-      className: x(
+      className: w(
         "dial-input flex flex-row items-center justify-between",
         s && "dial-input-error",
         n && "dial-input-disable",
         o && "dial-input-readonly",
-        p.containerClass,
+        f.containerClass,
         l
       ),
       children: [
         /* @__PURE__ */ i(
           U,
           {
-            className: x(n ? "text-secondary" : "text-primary"),
+            className: w(n ? "text-secondary" : "text-primary"),
             icon: /* @__PURE__ */ i(
               po,
               {
-                size: p.iconSize,
-                stroke: p.iconStroke
+                size: f.iconSize,
+                stroke: f.iconStroke
               }
             )
           }
@@ -6785,10 +6803,10 @@ const fa = {
             value: u ?? "",
             disabled: n,
             readOnly: o,
-            className: x(
+            className: w(
               "border-0 bg-transparent w-full",
               a,
-              p.textClass
+              f.textClass
             ),
             onChange: (h) => !o && g(h.currentTarget.value)
           }
@@ -6800,8 +6818,8 @@ const fa = {
             icon: /* @__PURE__ */ i(
               _e,
               {
-                size: p.iconSize,
-                stroke: p.iconStroke,
+                size: f.iconSize,
+                stroke: f.iconStroke,
                 onClick: C,
                 "aria-label": "Clear search",
                 role: "button"
@@ -6822,20 +6840,20 @@ const fa = {
   inputCssClass: a
 }) => {
   const [l, c] = W(""), d = A(
-    (f) => {
-      f.key === "Enter" && (r([...t, f.currentTarget.value]), c("")), (f.key === "Backspace" || f.key === "Delete") && t.length && !l && r(t.slice(0, -1));
+    (p) => {
+      p.key === "Enter" && (r([...t, p.currentTarget.value]), c("")), (p.key === "Backspace" || p.key === "Delete") && t.length && !l && r(t.slice(0, -1));
     },
     [t, r, l]
   ), u = A(
-    (f) => {
-      c(f.target.value);
+    (p) => {
+      c(p.target.value);
     },
     [c]
   );
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ x(
     "div",
     {
-      className: x([
+      className: w([
         "dial-input px-3 py-2 flex flex-row items-center flex-wrap w-fit gap-2",
         s
       ]),
@@ -6853,7 +6871,7 @@ const fa = {
           {
             type: "text",
             value: l,
-            className: x(["border-0 bg-transparent p-0", a]),
+            className: w(["border-0 bg-transparent p-0", a]),
             placeholder: t?.length ? "" : e,
             onKeyDown: d,
             onChange: u
@@ -6873,17 +6891,17 @@ const fa = {
   disabled: l,
   onChange: c
 }) => {
-  const d = le(null), [u, f] = W(e), [g, p] = W(""), [C, h] = W(!1), D = (y) => {
+  const d = le(null), [u, p] = W(e), [g, f] = W(""), [C, h] = W(!1), D = (y) => {
     const O = y.trim().replace(/,$/, "");
     if (O && !u.includes(O)) {
       const R = [O, ...u];
-      f(R), c?.(R);
+      p(R), c?.(R);
     }
   }, v = (y) => {
-    (y.key === "," || y.key === "Enter") && (y.preventDefault(), D(g), p(""));
+    (y.key === "," || y.key === "Enter") && (y.preventDefault(), D(g), f(""));
   }, b = (y) => {
     const O = u.filter((R, P) => P !== y);
-    f(O), c?.(O);
+    p(O), c?.(O);
   };
   return ne(() => {
     const y = new ResizeObserver(() => {
@@ -6893,7 +6911,7 @@ const fa = {
       }
     });
     return d.current && y.observe(d.current), () => y.disconnect();
-  }, [u]), /* @__PURE__ */ w("div", { className: x("flex flex-col w-full"), children: [
+  }, [u]), /* @__PURE__ */ x("div", { className: w("flex flex-col w-full"), children: [
     /* @__PURE__ */ i(
       Pe,
       {
@@ -6905,16 +6923,16 @@ const fa = {
     /* @__PURE__ */ i(
       "div",
       {
-        className: x(
+        className: w(
           "dial-input min-h-[38px] p-[6px]",
           a && "dial-input-error",
           l && "dial-input-disable"
         ),
-        children: /* @__PURE__ */ w(
+        children: /* @__PURE__ */ x(
           "div",
           {
             ref: d,
-            className: x(
+            className: w(
               "flex flex-wrap gap-2 items-center",
               C ? "flex-col-reverse" : "flex-row"
             ),
@@ -6932,9 +6950,9 @@ const fa = {
                 {
                   type: "text",
                   value: g,
-                  onChange: (y) => p(y.target.value),
+                  onChange: (y) => f(y.target.value),
                   onKeyDown: v,
-                  className: x(
+                  className: w(
                     "dial-input-no-border outline-none border-none w-full min-w-[100px] flex-1 p-1"
                   ),
                   placeholder: o,
@@ -6976,9 +6994,9 @@ const fa = {
   selectAllLabel: c = "Select all",
   emptyStateTitle: d = "No options available",
   emptyStateDescription: u,
-  emptyStateIcon: f,
+  emptyStateIcon: p,
   disabled: g = !1,
-  cssClass: p,
+  cssClass: f,
   closable: C = !1,
   onClose: h,
   onChange: D
@@ -7036,7 +7054,7 @@ const fa = {
       selectedValues: z,
       handleRemoveTag: de
     }
-  ), [t, e, z, de]), K = A(() => t ? ge ? q() : /* @__PURE__ */ i("span", { className: "text-secondary truncate", children: o }) : oe ? /* @__PURE__ */ w(pe, { children: [
+  ), [t, e, z, de]), K = A(() => t ? ge ? q() : /* @__PURE__ */ i("span", { className: "text-secondary truncate", children: o }) : oe ? /* @__PURE__ */ x(pe, { children: [
     oe.icon && /* @__PURE__ */ i(U, { icon: oe.icon }),
     /* @__PURE__ */ i(be, { text: oe.label })
   ] }) : /* @__PURE__ */ i("span", { className: "text-secondary truncate", children: o }), [ge, t, o, q, oe]);
@@ -7050,7 +7068,7 @@ const fa = {
       onClose: h,
       placement: "bottom-start",
       allowedPlacements: ["bottom-start", "top-start"],
-      renderOverlay: () => /* @__PURE__ */ w(
+      renderOverlay: () => /* @__PURE__ */ x(
         "div",
         {
           id: R,
@@ -7058,7 +7076,7 @@ const fa = {
           "aria-multiselectable": t || void 0,
           className: ha,
           children: [
-            (s || C) && /* @__PURE__ */ w("div", { className: "flex items-center gap-2 px-2 pt-2", children: [
+            (s || C) && /* @__PURE__ */ x("div", { className: "flex items-center gap-2 px-2 pt-2", children: [
               s && /* @__PURE__ */ i(
                 pa,
                 {
@@ -7080,7 +7098,7 @@ const fa = {
                 }
               )
             ] }),
-            t && l && Y.length > 0 && /* @__PURE__ */ i("div", { className: x(dt, "mt-2"), children: /* @__PURE__ */ i(
+            t && l && Y.length > 0 && /* @__PURE__ */ i("div", { className: w(dt, "mt-2"), children: /* @__PURE__ */ i(
               Ut,
               {
                 id: `${R}-selectAll`,
@@ -7094,7 +7112,7 @@ const fa = {
             /* @__PURE__ */ i("div", { className: "overflow-y-auto py-1", children: M.length === 0 ? /* @__PURE__ */ i("div", { className: "px-2 py-3", children: /* @__PURE__ */ i(
               Cs,
               {
-                icon: f ?? /* @__PURE__ */ i(Or, { size: 24 }),
+                icon: p ?? /* @__PURE__ */ i(Or, { size: 24 }),
                 title: d,
                 description: u
               }
@@ -7103,7 +7121,7 @@ const fa = {
               return t ? /* @__PURE__ */ i(
                 "div",
                 {
-                  className: x(
+                  className: w(
                     dt,
                     H && ma,
                     m.disabled && ur,
@@ -7113,7 +7131,7 @@ const fa = {
                     Ut,
                     {
                       id: `${R}-${m.value}`,
-                      label: /* @__PURE__ */ w("span", { className: "flex w-full flex-1 min-w-0 items-center gap-2 text-primary", children: [
+                      label: /* @__PURE__ */ x("span", { className: "flex w-full flex-1 min-w-0 items-center gap-2 text-primary", children: [
                         m.icon && /* @__PURE__ */ i(U, { icon: m.icon }),
                         /* @__PURE__ */ i("span", { className: "truncate", children: m.label })
                       ] }),
@@ -7133,13 +7151,13 @@ const fa = {
                   "aria-selected": H,
                   "aria-disabled": !!m.disabled,
                   disabled: m.disabled,
-                  className: x(
+                  className: w(
                     dt,
                     H && Ca,
                     m.disabled && ur
                   ),
                   onClick: () => !m.disabled && ee(m.value),
-                  children: /* @__PURE__ */ w("div", { className: "flex items-center gap-2 w-full", children: [
+                  children: /* @__PURE__ */ x("div", { className: "flex items-center gap-2 w-full", children: [
                     m.icon && /* @__PURE__ */ i(U, { icon: m.icon }),
                     /* @__PURE__ */ i(be, { text: m.label })
                   ] })
@@ -7150,7 +7168,7 @@ const fa = {
           ]
         }
       ),
-      children: /* @__PURE__ */ w(
+      children: /* @__PURE__ */ x(
         "button",
         {
           type: "button",
@@ -7160,7 +7178,7 @@ const fa = {
           className: _(
             ga,
             g && "opacity-75 !cursor-not-allowed",
-            p
+            f
           ),
           onClick: () => !g && b((m) => !m),
           children: [
@@ -7169,7 +7187,7 @@ const fa = {
               U,
               {
                 icon: ba,
-                className: x("text-primary", v && "rotate-180")
+                className: w("text-primary", v && "rotate-180")
               }
             )
           ]
@@ -7189,7 +7207,7 @@ const fa = {
   readonly: c,
   value: d,
   defaultEmptyText: u,
-  ...f
+  ...p
 }) => {
   const g = A(() => {
     if (!d || Array.isArray(d) && d.length === 0)
@@ -7198,17 +7216,17 @@ const fa = {
       return /* @__PURE__ */ i(
         fn,
         {
-          options: f.options,
+          options: p.options,
           selectedValues: d
         }
       );
     {
-      const p = f.options?.find(
+      const f = p.options?.find(
         (C) => C.value === d
       );
-      return /* @__PURE__ */ i("span", { "aria-readonly": !0, className: "text-primary", children: p?.label || d });
+      return /* @__PURE__ */ i("span", { "aria-readonly": !0, className: "text-primary", children: f?.label || d });
     }
-  }, [d, f.options, u]);
+  }, [d, p.options, u]);
   return /* @__PURE__ */ i(
     kt,
     {
@@ -7227,7 +7245,7 @@ const fa = {
         {
           cssClass: o,
           value: d,
-          ...f
+          ...p
         }
       )
     }
@@ -7397,51 +7415,51 @@ class pr {
     let c = 0, d = a.length - 1, u;
     for (; c <= d; ) {
       u = Math.floor(0.5 * (c + d));
-      const p = r[u];
-      if (p < t)
+      const f = r[u];
+      if (f < t)
         c = u + 1;
-      else if (p > t)
+      else if (f > t)
         d = u - 1;
       else
         return n[u];
     }
     l = Math.max(0, d);
-    const f = t - r[l], g = f * f;
-    return n[l] + o[l] * f + s[l] * g + a[l] * f * g;
+    const p = t - r[l], g = p * p;
+    return n[l] + o[l] * p + s[l] * g + a[l] * p * g;
   }
   constructor(t, r) {
     const { length: n } = t, o = [];
-    for (let p = 0; p < n; p++)
-      o.push(p);
+    for (let f = 0; f < n; f++)
+      o.push(f);
     o.sort(
-      (p, C) => t[p] < t[C] ? -1 : 1
+      (f, C) => t[f] < t[C] ? -1 : 1
     );
     const s = [], a = [];
     let l, c;
-    for (let p = 0; p < n - 1; p++)
-      l = t[p + 1] - t[p], c = r[p + 1] - r[p], s.push(l), a.push(c / l);
+    for (let f = 0; f < n - 1; f++)
+      l = t[f + 1] - t[f], c = r[f + 1] - r[f], s.push(l), a.push(c / l);
     const d = [
       a[0]
     ];
-    for (let p = 0; p < s.length - 1; p++) {
-      const C = a[p], h = a[p + 1];
+    for (let f = 0; f < s.length - 1; f++) {
+      const C = a[f], h = a[f + 1];
       if (C * h <= 0)
         d.push(0);
       else {
-        l = s[p];
-        const D = s[p + 1], v = l + D;
+        l = s[f];
+        const D = s[f + 1], v = l + D;
         d.push(3 * v / ((v + D) / C + (v + l) / h));
       }
     }
     d.push(a[a.length - 1]);
-    const u = [], f = [];
+    const u = [], p = [];
     let g;
-    for (let p = 0; p < d.length - 1; p++) {
-      g = a[p];
-      const C = d[p], h = 1 / s[p], D = C + d[p + 1] - g - g;
-      u.push((g - C - D) * h), f.push(D * h * h);
+    for (let f = 0; f < d.length - 1; f++) {
+      g = a[f];
+      const C = d[f], h = 1 / s[f], D = C + d[f + 1] - g - g;
+      u.push((g - C - D) * h), p.push(D * h * h);
     }
-    this.xs = t, this.ys = r, this.c1s = d, this.c2s = u, this.c3s = f;
+    this.xs = t, this.ys = r, this.c1s = d, this.c2s = u, this.c3s = p;
   }
 }
 const Ia = 1;
@@ -7476,7 +7494,7 @@ function Ea(e, t, r, n, o) {
   const s = Ta(t), l = bn(s ? e : t), c = {
     x: r.x - l.x,
     y: r.y - l.y
-  }, { offsetWidth: d, offsetHeight: u } = e, { anchorX: f, anchorY: g } = n, { dragPreviewWidth: p, dragPreviewHeight: C } = Oa(s, t, d, u), h = () => {
+  }, { offsetWidth: d, offsetHeight: u } = e, { anchorX: p, anchorY: g } = n, { dragPreviewWidth: f, dragPreviewHeight: C } = Oa(s, t, d, u), h = () => {
     let P = new pr([
       0,
       0.5,
@@ -7498,10 +7516,10 @@ function Ea(e, t, r, n, o) {
     // Dock to the left
     c.x,
     // Align at the center
-    c.x / d * p,
+    c.x / d * f,
     // Dock to the right
-    c.x + p - d
-  ]).interpolate(f), { offsetX: v, offsetY: b } = o, y = v === 0 || v, O = b === 0 || b;
+    c.x + f - d
+  ]).interpolate(p), { offsetX: v, offsetY: b } = o, y = v === 0 || v, O = b === 0 || b;
   return {
     x: y ? v : D(),
     y: O ? b : h()
@@ -7705,10 +7723,10 @@ class Ra {
       const { dataTransfer: l } = o, c = ft(l);
       if (this.monitor.isDragging()) {
         if (l && typeof l.setDragImage == "function") {
-          const u = this.monitor.getSourceId(), f = this.sourceNodes.get(u), g = this.sourcePreviewNodes.get(u) || f;
+          const u = this.monitor.getSourceId(), p = this.sourceNodes.get(u), g = this.sourcePreviewNodes.get(u) || p;
           if (g) {
-            const { anchorX: p, anchorY: C, offsetX: h, offsetY: D } = this.getCurrentSourcePreviewNodeOptions(), y = Ea(f, g, a, {
-              anchorX: p,
+            const { anchorX: f, anchorY: C, offsetX: h, offsetY: D } = this.getCurrentSourcePreviewNodeOptions(), y = Ea(p, g, a, {
+              anchorX: f,
               anchorY: C
             }, {
               offsetX: h,
@@ -7806,7 +7824,7 @@ const Pa = function(t, r, n) {
   fileCountError: c,
   getIsFileFormatError: d
 }) => {
-  const u = le(null), f = le(null), [g, p] = W([]), [C, h] = W(!1), D = A(
+  const u = le(null), p = le(null), [g, f] = W([]), [C, h] = W(!1), D = A(
     (M) => {
       const V = M.target.files;
       if (V && V.length > 0) {
@@ -7819,7 +7837,7 @@ const Pa = function(t, r, n) {
     (M) => s && M?.length > s,
     [s]
   ), b = $(() => C || v(g), [C, g, v]), y = () => {
-    p([]), h(!1);
+    f([]), h(!1);
   };
   ne(() => {
     y();
@@ -7838,21 +7856,21 @@ const Pa = function(t, r, n) {
     }),
     [D]
   ), B = (M) => {
-    (M.key === "Enter" || M.key === "Space") && (M.preventDefault(), f.current?.click());
+    (M.key === "Enter" || M.key === "Space") && (M.preventDefault(), p.current?.click());
   }, I = (M) => {
     M?.preventDefault();
     const V = Array.from(M.dataTransfer?.items ?? []);
-    h(!!d?.(V)), p(V);
+    h(!!d?.(V)), f(V);
   }, G = (M) => {
     M.target === M.currentTarget && y();
-  }, z = x(
+  }, z = w(
     "border border-dashed rounded w-full cursor-pointer relative h-full hover:border-hover",
     !R && !b && "border-primary",
     R && (O ? "border-accent-primary" : "border-hover"),
     b && "border-error"
   );
-  return P(u), /* @__PURE__ */ w(pe, { children: [
-    /* @__PURE__ */ w(
+  return P(u), /* @__PURE__ */ x(pe, { children: [
+    /* @__PURE__ */ x(
       "div",
       {
         className: z,
@@ -7860,7 +7878,7 @@ const Pa = function(t, r, n) {
         onDragOver: I,
         onDragLeave: G,
         children: [
-          /* @__PURE__ */ w(
+          /* @__PURE__ */ x(
             "label",
             {
               htmlFor: "file",
@@ -7875,7 +7893,7 @@ const Pa = function(t, r, n) {
                   {
                     variant: J.Tertiary,
                     title: n,
-                    onClick: () => f.current?.click()
+                    onClick: () => p.current?.click()
                   }
                 )
               ]
@@ -7887,7 +7905,7 @@ const Pa = function(t, r, n) {
               multiple: a,
               id: "file",
               type: "file",
-              ref: f,
+              ref: p,
               hidden: !0,
               accept: o,
               onChange: D
@@ -7911,7 +7929,7 @@ const Pa = function(t, r, n) {
       ...n,
       iconBefore: /* @__PURE__ */ i("div", { className: "mr-2", children: o ? /* @__PURE__ */ i(Et, { ...X, className: "text-error" }) : e }),
       tooltipTriggerClassName: "flex-1 min-w-0",
-      cssClass: x(o ? "text-error" : "", t),
+      cssClass: w(o ? "text-error" : "", t),
       tooltipText: o && r ? r : void 0,
       hideBorder: !0
     }
@@ -7925,28 +7943,28 @@ const Pa = function(t, r, n) {
     isInvalid: s,
     errorText: a,
     removeButtonAriaLabel: l
-  } = e, c = (f, g) => {
-    f.stopPropagation(), o(t?.filter((p) => p.name !== g) || []);
-  }, d = (f) => /* @__PURE__ */ i(
+  } = e, c = (p, g) => {
+    p.stopPropagation(), o(t?.filter((f) => f.name !== g) || []);
+  }, d = (p) => /* @__PURE__ */ i(
     W1,
     {
       ariaLabel: l,
-      onClick: (g) => c(g, f)
+      onClick: (g) => c(g, p)
     }
-  ), u = (f) => {
-    o(f);
+  ), u = (p) => {
+    o(p);
   };
-  return !t || t.length === 0 ? /* @__PURE__ */ i(zi, { backend: Pa, children: /* @__PURE__ */ i(Ma, { ...e, onChange: u }) }) : /* @__PURE__ */ i("div", { className: "flex-1 min-h-0 border border-solid border-primary rounded", children: t && t.length > 0 && /* @__PURE__ */ i("div", { className: "max-h-full overflow-y-auto", children: t.map((f, g) => /* @__PURE__ */ i(
+  return !t || t.length === 0 ? /* @__PURE__ */ i(zi, { backend: Pa, children: /* @__PURE__ */ i(Ma, { ...e, onChange: u }) }) : /* @__PURE__ */ i("div", { className: "flex-1 min-h-0 border border-solid border-primary rounded", children: t && t.length > 0 && /* @__PURE__ */ i("div", { className: "max-h-full overflow-y-auto", children: t.map((p, g) => /* @__PURE__ */ i(
     Va,
     {
-      elementId: f.name,
-      value: f.name,
-      iconAfter: d(f.name),
-      iconBefore: r || n?.(f.name),
-      invalid: s?.(f),
+      elementId: p.name,
+      value: p.name,
+      iconAfter: d(p.name),
+      iconBefore: r || n?.(p.name),
+      invalid: s?.(p),
       errorText: a
     },
-    f.name + g
+    p.name + g
   )) }) });
 }, cl = ({
   onChange: e,
@@ -7960,9 +7978,9 @@ const Pa = function(t, r, n) {
   acceptTypes: c,
   deleteAllButtonLabel: d,
   addButtonLabel: u,
-  ...f
+  ...p
 }) => {
-  const g = le(null), p = () => g.current?.click(), C = () => {
+  const g = le(null), f = () => g.current?.click(), C = () => {
     e([]);
   }, h = A(
     (v) => v?.some(
@@ -7979,8 +7997,8 @@ const Pa = function(t, r, n) {
     },
     [e, n, h]
   );
-  return /* @__PURE__ */ w("div", { className: "h-full flex flex-col", children: [
-    /* @__PURE__ */ w("div", { className: "flex justify-between items-center pb-1 min-h-[42px]", children: [
+  return /* @__PURE__ */ x("div", { className: "h-full flex flex-col", children: [
+    /* @__PURE__ */ x("div", { className: "flex justify-between items-center pb-1 min-h-[42px]", children: [
       /* @__PURE__ */ i(
         Pe,
         {
@@ -7988,7 +8006,7 @@ const Pa = function(t, r, n) {
           htmlFor: r
         }
       ),
-      l && !!n?.length && /* @__PURE__ */ w("div", { className: "flex flex-row items-center gap-x-2", children: [
+      l && !!n?.length && /* @__PURE__ */ x("div", { className: "flex flex-row items-center gap-x-2", children: [
         /* @__PURE__ */ i(
           Q,
           {
@@ -8005,7 +8023,7 @@ const Pa = function(t, r, n) {
             variant: J.Tertiary,
             iconBefore: /* @__PURE__ */ i(go, { ...X }),
             title: u,
-            onClick: p
+            onClick: f
           }
         )
       ] })
@@ -8033,7 +8051,7 @@ const Pa = function(t, r, n) {
         fileFormatError: s,
         fileCountError: a,
         getIsFileFormatError: h,
-        ...f
+        ...p
       }
     )
   ] });