@epam/ai-dial-ui-kit 0.2.0-rc.29 → 0.2.0-rc.30

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

@@ -1,15 +1,16 @@
-import { jsx as r, jsxs as p, Fragment as le } from "react/jsx-runtime";
+import { jsx as r, jsxs as m, Fragment as le } from "react/jsx-runtime";
 import i from "classnames";
-import { IconCircleCheck as oe, IconAlertTriangle as ie, IconAlertCircle as ce, IconInfoCircle as de, IconX as W, IconLoader as ue, IconMinus as me, IconCheck as $, IconExclamationCircle as pe, IconClipboardX as fe, IconChevronsLeft as xe, IconChevronsRight as he, IconEyeOff as ge, IconEye as be, IconSearch as ye } from "@tabler/icons-react";
-import { createContext as Ce, useState as T, useRef as ve, useMemo as Ne, useContext as we, forwardRef as K, isValidElement as De, cloneElement as ke, useCallback as D, useEffect as Ie } from "react";
-import { useFloating as U, offset as Re, flip as Se, shift as Te, arrow as Ee, autoUpdate as Fe, useHover as Pe, useFocus as Ae, useDismiss as G, useRole as Z, useInteractions as X, useMergeRefs as q, FloatingPortal as Q, FloatingArrow as Le, FloatingOverlay as Oe, FloatingFocusManager as ze } from "@floating-ui/react";
-const _ = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "text-error dial-tiny mt-1", children: e }), j = ({
+import { IconCircleCheck as ie, IconAlertTriangle as ce, IconAlertCircle as de, IconInfoCircle as ue, IconX as _, IconMinus as pe, IconCheck as K, IconExclamationCircle as me, IconClipboardX as fe, IconChevronsLeft as he, IconChevronsRight as xe, IconEyeOff as ge, IconEye as ye, IconSearch as be } from "@tabler/icons-react";
+import * as w from "react";
+import { createContext as Ce, useState as S, useRef as ve, useMemo as we, useContext as Ne, forwardRef as U, isValidElement as ke, cloneElement as De, useCallback as D, useEffect as Ie } from "react";
+import { useFloating as G, offset as Le, flip as Re, shift as Ee, arrow as Se, autoUpdate as Te, useHover as Fe, useFocus as je, useDismiss as Z, useRole as X, useInteractions as q, useMergeRefs as Q, FloatingPortal as Y, FloatingArrow as Pe, FloatingOverlay as Ae, FloatingFocusManager as Me } from "@floating-ui/react";
+const H = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "text-error dial-tiny mt-1", children: e }), V = ({
   fieldTitle: e,
-  htmlFor: n,
-  optional: t,
+  htmlFor: t,
+  optional: n,
   optionalText: a,
   cssClass: s
-}) => e ? /* @__PURE__ */ p(
+}) => e ? /* @__PURE__ */ m(
   "label",
   {
     className: i(
@@ -17,31 +18,31 @@ const _ = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "tex
       s,
       !s?.includes("mb") && "mb-2"
     ),
-    htmlFor: n,
+    htmlFor: t,
     children: [
       /* @__PURE__ */ r("span", { className: "min-h-4", children: e }),
-      t && /* @__PURE__ */ r("span", { className: "ml-1", children: a ?? "(Optional)" })
+      n && /* @__PURE__ */ r("span", { className: "ml-1", children: a ?? "(Optional)" })
     ]
   }
-) : null, k = ({ icon: e, className: n }) => e ? /* @__PURE__ */ r("span", { className: i("flex-shrink-0", n), children: e }) : null;
+) : null, I = ({ icon: e, className: t }) => e ? /* @__PURE__ */ r("span", { className: i("flex-shrink-0", t), children: e }) : null;
 var v = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e.Danger = "danger", e))(v || {});
-const Be = {
+const We = {
   [v.Primary]: "dial-primary-button",
   [v.Secondary]: "dial-secondary-button",
   [v.Tertiary]: "dial-tertiary-button",
   [v.Danger]: "dial-danger-button"
-}, A = ({
+}, P = ({
   title: e,
-  variant: n,
-  cssClass: t,
+  variant: t,
+  cssClass: n,
   textCssClass: a,
   ref: s,
-  onClick: l,
-  disable: o,
+  onClick: o,
+  disable: l,
   iconAfter: u,
   iconBefore: d,
   hideTitleOnMobile: c,
-  ariaLabel: m
+  ariaLabel: p
 }) => {
   const f = i(
     "dial-small-semi",
@@ -49,74 +50,74 @@ const Be = {
     d ? "ml-2" : "",
     c ? "hidden sm:inline" : "inline",
     a
-  ), h = i(
-    n && Be[n],
-    t,
+  ), x = i(
+    t && We[t],
+    n,
     "focus-visible:outline outline-offset-0"
   );
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ m(
     "button",
     {
       ref: s,
       type: "button",
-      className: h,
-      onClick: (x) => l?.(x),
-      disabled: o,
-      "aria-label": e || m,
+      className: x,
+      onClick: (h) => o?.(h),
+      disabled: l,
+      "aria-label": e || p,
       children: [
-        /* @__PURE__ */ r(k, { icon: d }),
+        /* @__PURE__ */ r(I, { icon: d }),
         e && /* @__PURE__ */ r("span", { className: f, children: e }),
-        /* @__PURE__ */ r(k, { icon: u })
+        /* @__PURE__ */ r(I, { icon: u })
       ]
     }
   );
 };
 var R = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(R || {});
-const Ve = {
-  info: /* @__PURE__ */ r(de, { size: 24, stroke: 2 }),
-  error: /* @__PURE__ */ r(ce, { size: 24, stroke: 2 }),
-  warning: /* @__PURE__ */ r(ie, { size: 24, stroke: 2 }),
-  success: /* @__PURE__ */ r(oe, { size: 24, stroke: 2 })
-}, je = {
+const Be = {
+  info: /* @__PURE__ */ r(ue, { size: 24, stroke: 2 }),
+  error: /* @__PURE__ */ r(de, { size: 24, stroke: 2 }),
+  warning: /* @__PURE__ */ r(ce, { size: 24, stroke: 2 }),
+  success: /* @__PURE__ */ r(ie, { size: 24, stroke: 2 })
+}, Oe = {
   [R.Info]: "bg-info border-info text-info",
   [R.Success]: "bg-success border-success text-success",
   [R.Warning]: "bg-warning border-warning text-warning",
   [R.Error]: "bg-error border-error text-error"
-}, Me = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", Er = ({
+}, Ve = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", Tr = ({
   variant: e = R.Info,
-  message: n,
-  cssClass: t,
+  message: t,
+  cssClass: n,
   closable: a = !1,
   onClose: s
-}) => /* @__PURE__ */ p(
+}) => /* @__PURE__ */ m(
   "div",
   {
     role: "alert",
     className: i(
-      Me,
-      je[e],
-      t
+      Ve,
+      Oe[e],
+      n
     ),
     children: [
-      /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ r(k, { icon: Ve[e] }),
-        /* @__PURE__ */ r("div", { className: "text-primary", children: n })
+      /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ r(I, { icon: Be[e] }),
+        /* @__PURE__ */ r("div", { className: "text-primary", children: t })
       ] }),
       a && /* @__PURE__ */ r(
-        A,
+        P,
         {
           cssClass: "ml-2 text-secondary hover:text-primary",
           ariaLabel: "Close alert",
-          iconBefore: /* @__PURE__ */ r(W, { size: 16 }),
-          onClick: (l) => s?.(l)
+          iconBefore: /* @__PURE__ */ r(_, { size: 16 }),
+          onClick: (o) => s?.(o)
         }
       )
     ]
   }
-), We = "flex items-center justify-center text-secondary", _e = "shrink-0 grow-0 basis-auto animate-spin-steps", He = ({
+), ze = "flex items-center justify-center text-secondary", _e = "shrink-0 grow-0 basis-auto animate-spin-steps", He = (e) => /* @__PURE__ */ w.createElement("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ w.createElement("path", { d: "M24 39V46.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.4, d: "M9 24H1.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.5, d: "M8.0918 8.0918L13.3994 13.3994", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.6, d: "M24 1.5V9", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.7, d: "M39.9121 8.08594L37.2607 10.7373L34.6094 13.3887", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.8, d: "M46.5 24H39", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.9, d: "M34.6055 34.6055L39.9082 39.9082", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.3, d: "M13.3936 34.6055L8.08594 39.9131", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" })), $e = ({
   size: e = 18,
-  cssClass: n,
-  iconClass: t,
+  cssClass: t,
+  iconClass: n,
   fullWidth: a = !0,
   ariaLabel: s = "Loading"
 }) => /* @__PURE__ */ r(
@@ -124,97 +125,99 @@ const Ve = {
   {
     role: "status",
     "aria-label": s,
+    name: "loader",
     className: i({
-      [We]: !0,
+      [ze]: !0,
       "w-full h-full": a,
-      [n || ""]: !!n
+      [t || ""]: !!t
     }),
     children: /* @__PURE__ */ r(
-      k,
+      I,
       {
         icon: /* @__PURE__ */ r(
-          ue,
+          He,
           {
             width: e,
             height: e,
-            className: i(_e, t)
+            className: i(_e, n),
+            role: "img"
           }
         )
       }
     )
   }
-), $e = 7, Ke = 2, Y = Ce(null), J = () => {
-  const e = we(Y);
+), Ke = 7, Ue = 2, J = Ce(null), ee = () => {
+  const e = Ne(J);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
   return e;
-}, Ue = ({
+}, Ge = ({
   initialOpen: e = !1,
-  placement: n = "bottom",
-  isTriggerClickable: t = !1,
+  placement: t = "bottom",
+  isTriggerClickable: n = !1,
   open: a,
   onOpenChange: s
 } = {}) => {
-  const [l, o] = T(e), u = ve(null), d = a ?? l, c = s ?? o, m = U({
-    placement: n,
+  const [o, l] = S(e), u = ve(null), d = a ?? o, c = s ?? l, p = G({
+    placement: t,
     open: d,
     onOpenChange: c,
-    whileElementsMounted: Fe,
+    whileElementsMounted: Te,
     middleware: [
-      Re($e + Ke),
-      Se({
-        crossAxis: n.includes("-"),
+      Le(Ke + Ue),
+      Re({
+        crossAxis: t.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5
       }),
-      Te({ padding: 5 }),
-      Ee({
+      Ee({ padding: 5 }),
+      Se({
         element: u
       })
     ]
-  }), f = Pe(m.context, {
+  }), f = Fe(p.context, {
     move: !1,
     enabled: a == null,
-    mouseOnly: t,
+    mouseOnly: n,
     delay: { open: 500, close: 0 }
-  }), h = Ae(m.context, {
+  }), x = je(p.context, {
     enabled: a == null
-  }), x = G(m.context), y = Z(m.context, { role: "tooltip" }), g = X([f, h, x, y]);
-  return Ne(
+  }), h = Z(p.context), b = X(p.context, { role: "tooltip" }), g = q([f, x, h, b]);
+  return we(
     () => ({
       open: d,
       setOpen: c,
       arrowRef: u,
       ...g,
-      ...m
+      ...p
     }),
-    [d, c, g, m]
+    [d, c, g, p]
   );
-}, Ge = ({
+}, Ze = ({
   children: e,
-  ...n
+  ...t
 }) => {
-  const t = Ue(n);
-  return /* @__PURE__ */ r(Y.Provider, { value: t, children: e });
-}, Ze = K(function({ style: n, ...t }, a) {
-  const s = J(), l = q([s.refs.setFloating, a]);
-  return s.open ? /* @__PURE__ */ r(Q, { id: "tooltip-portal", children: /* @__PURE__ */ p(
+  const n = Ge(t);
+  return /* @__PURE__ */ r(J.Provider, { value: n, children: e });
+}, Xe = U(function({ style: t, ...n }, a) {
+  const s = ee(), o = Q([s.refs.setFloating, a]);
+  return s.open ? /* @__PURE__ */ r(Y, { id: "tooltip-portal", children: /* @__PURE__ */ m(
     "div",
     {
-      ref: l,
+      ref: o,
       style: {
         ...s.floatingStyles,
-        ...n
+        ...t
       },
-      ...s.getFloatingProps(t),
+      ...s.getFloatingProps(n),
       className: i(
         "z-[55] whitespace-pre-wrap break-words rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",
-        s.getFloatingProps(t).className
+        s.getFloatingProps(n).className
       ),
       children: [
-        t.children,
+        n.children,
         /* @__PURE__ */ r(
-          Le,
+          Pe,
           {
             ref: s.arrowRef,
             context: s.context,
@@ -226,91 +229,91 @@ const Ve = {
       ]
     }
   ) }) : null;
-}), Xe = K(function({ children: n, asChild: t = !1, ...a }, s) {
-  const l = J(), u = n && typeof n == "object" && "ref" in n && n.ref !== void 0 ? n.ref : void 0, d = q([l.refs.setReference, s, u]);
-  return t && De(n) ? ke(
-    n,
-    l.getReferenceProps({
+}), qe = U(function({ children: t, asChild: n = !1, ...a }, s) {
+  const o = ee(), u = t && typeof t == "object" && "ref" in t && t.ref !== void 0 ? t.ref : void 0, d = Q([o.refs.setReference, s, u]);
+  return n && ke(t) ? De(
+    t,
+    o.getReferenceProps({
       ref: d,
       ...a,
-      ...n.props
+      ...t.props
     })
   ) : /* @__PURE__ */ r(
     "span",
     {
       ref: d,
-      ...l.getReferenceProps(a),
+      ...o.getReferenceProps(a),
       className: a.className ?? "dial-tooltip-trigger text-left",
-      children: n
+      children: t
     }
   );
 }), F = ({
   hideTooltip: e,
-  tooltip: n,
-  children: t,
+  tooltip: t,
+  children: n,
   triggerClassName: a,
   contentClassName: s,
-  ...l
-}) => /* @__PURE__ */ p(Ge, { ...l, children: [
-  /* @__PURE__ */ r(Xe, { className: i(a, "truncate"), children: t }),
+  ...o
+}) => /* @__PURE__ */ m(Ze, { ...o, children: [
+  /* @__PURE__ */ r(qe, { className: i(a, "truncate"), children: n }),
   /* @__PURE__ */ r(
-    Ze,
+    Xe,
     {
       className: i(
         "text-primary",
         s,
         "max-w-[300px]",
-        (e || !n) && "hidden"
+        (e || !t) && "hidden"
       ),
-      children: n
+      children: t
     }
   )
-] }), ee = 18, E = {
-  size: ee,
+] }), re = 18, T = {
+  size: re,
   stroke: 2
 }, Fr = ({
   label: e,
-  id: n,
-  checked: t,
+  id: t,
+  checked: n,
   indeterminate: a,
   disabled: s,
-  ariaLabel: l,
-  onChange: o
+  ariaLabel: o,
+  onChange: l
 }) => {
   const u = D(
-    (m) => {
-      m.stopPropagation(), o?.(m.target.checked, n);
+    (p) => {
+      p.stopPropagation(), l?.(p.target.checked, t);
     },
-    [o, n]
+    [l, t]
   ), d = i(
     "flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",
-    `${t ? "" : 'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,
+    `${n ? "" : 'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,
     s ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : ""
   ), c = i(
     "mr-2 border rounded",
     s ? "bg-layer-4 border-icon-secondary" : ""
   );
-  return /* @__PURE__ */ p("label", { className: d, htmlFor: n, children: [
-    t && (a ? /* @__PURE__ */ r(me, { className: c, ...E }) : /* @__PURE__ */ r($, { className: c, ...E })),
+  return /* @__PURE__ */ m("label", { className: d, htmlFor: t, children: [
+    n && (a ? /* @__PURE__ */ r(pe, { className: c, ...T }) : /* @__PURE__ */ r(K, { className: c, ...T })),
     e && /* @__PURE__ */ r(F, { tooltip: e, triggerClassName: "flex-1 min-w-0", children: /* @__PURE__ */ r("p", { className: "text-primary w-full truncate", children: e }) }),
     /* @__PURE__ */ r(
       "input",
       {
         type: "checkbox",
         onChange: u,
-        id: n,
-        checked: t,
-        "aria-checked": a ? "mixed" : t,
+        id: t,
+        checked: n,
+        "aria-checked": a ? "mixed" : n,
         "aria-disabled": s || void 0,
-        "aria-label": e ? void 0 : l,
+        "aria-label": e ? void 0 : o,
         className: "invisible w-0 h-0"
       }
     )
   ] });
 };
 var C = /* @__PURE__ */ ((e) => (e.VALID = "valid", e.ERROR = "error", e))(C || {});
-const qe = (e, n) => {
-  if (n === e.id)
+const Qe = (e, t) => {
+  if (t === e.id)
     switch (e.status) {
       case C.VALID:
         return "border-accent-secondary text-primary";
@@ -327,8 +330,8 @@ const qe = (e, n) => {
     default:
       return "border-primary text-secondary";
   }
-}, Qe = (e, n) => {
-  if (n === e.id)
+}, Ye = (e, t) => {
+  if (t === e.id)
     switch (e.status) {
       case C.VALID:
         return "bg-accent-secondary";
@@ -345,113 +348,113 @@ const qe = (e, n) => {
     default:
       return "bg-layer-4";
   }
-}, Ye = ({
+}, Je = ({
   step: e,
-  index: n,
-  currentStep: t,
+  index: t,
+  currentStep: n,
   onChangeStep: a
 }) => {
-  const s = "h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer", l = "w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white", o = () => t === e.id && e.status === C.ERROR ? /* @__PURE__ */ r(pe, { stroke: 2, size: 16 }) : t !== e.id && e.status === C.VALID ? /* @__PURE__ */ r($, { stroke: 2, size: 16 }) : n + 1;
-  return /* @__PURE__ */ p(
+  const s = "h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer", o = "w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white", l = () => n === e.id && e.status === C.ERROR ? /* @__PURE__ */ r(me, { stroke: 2, size: 16 }) : n !== e.id && e.status === C.VALID ? /* @__PURE__ */ r(K, { stroke: 2, size: 16 }) : t + 1;
+  return /* @__PURE__ */ m(
     "button",
     {
-      className: i(s, qe(e, t)),
+      className: i(s, Qe(e, n)),
       onClick: () => a(e.id),
       children: [
         /* @__PURE__ */ r(
           "span",
           {
-            className: i(l, Qe(e, t)),
-            children: o()
+            className: i(o, Ye(e, n)),
+            children: l()
           }
         ),
         /* @__PURE__ */ r("span", { children: e.name })
       ]
     }
   );
-}, Pr = ({
+}, jr = ({
   steps: e,
-  currentStep: n,
-  onChangeStep: t
+  currentStep: t,
+  onChangeStep: n
 }) => {
   const a = (s) => {
-    const l = e.findIndex((u) => u.id === n), o = e.findIndex((u) => u.id === s);
-    (s !== n && e[l].status === C.VALID || o < l) && t(s);
+    const o = e.findIndex((u) => u.id === t), l = e.findIndex((u) => u.id === s);
+    (s !== t && e[o].status === C.VALID || l < o) && n(s);
   };
-  return /* @__PURE__ */ r("div", { id: "steps", className: "flex gap-x-3", children: e.map((s, l) => /* @__PURE__ */ r(
-    Ye,
+  return /* @__PURE__ */ r("div", { id: "steps", className: "flex gap-x-3", children: e.map((s, o) => /* @__PURE__ */ r(
+    Je,
     {
-      currentStep: n,
+      currentStep: t,
       onChangeStep: a,
       step: s,
-      index: l
+      index: o
     },
     s.id
   )) });
-}, Je = ({
+}, er = ({
   name: e,
-  value: n,
-  title: t,
+  value: t,
+  title: n,
   description: a,
   checked: s = !1,
-  inputId: l,
-  cssClass: o,
+  inputId: o,
+  cssClass: l,
   labelCssClass: u,
   disabled: d,
   onChange: c,
-  descriptionCssClass: m
+  descriptionCssClass: p
 }) => {
-  const f = `${l}-desc`, h = i(
+  const f = `${o}-desc`, x = i(
     "dial-small cursor-pointer",
     d ? "text-secondary" : "text-primary",
     u
-  ), x = i(
+  ), h = i(
     "cursor-pointer dial-input-radio",
-    t && "mr-2",
-    o
-  ), y = i("flex flex-col", !!a && "mb-2"), g = i(
+    n && "mr-2",
+    l
+  ), b = i("flex flex-col", !!a && "mb-2"), g = i(
     "dial-tiny mt-2 ml-[26px] text-secondary",
-    m
+    p
   );
-  return /* @__PURE__ */ p("div", { className: y, children: [
-    /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
+  return /* @__PURE__ */ m("div", { className: b, children: [
+    /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ r(
         "input",
         {
           type: "radio",
-          id: l,
+          id: o,
           name: e,
-          value: n,
+          value: t,
           checked: s,
           disabled: d,
           "aria-describedby": s && a ? f : void 0,
-          className: x,
-          onChange: (w) => {
-            d || w.target.checked && c?.(n);
+          className: h,
+          onChange: (k) => {
+            d || k.target.checked && c?.(t);
           }
         }
       ),
-      t ? /* @__PURE__ */ r("label", { className: h, htmlFor: l, children: t }) : null
+      n ? /* @__PURE__ */ r("label", { className: x, htmlFor: o, children: n }) : null
     ] }),
     s && a && /* @__PURE__ */ r("div", { id: f, className: g, children: a })
   ] });
 };
-var M = /* @__PURE__ */ ((e) => (e.Row = "Row", e.Column = "Column", e))(M || {});
-const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
-  [M.Column]: "flex-col gap-y-3",
-  [M.Row]: "flex-row gap-x-6"
-}, Ar = ({
+var z = /* @__PURE__ */ ((e) => (e.Row = "Row", e.Column = "Column", e))(z || {});
+const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
+  [z.Column]: "flex-col gap-y-3",
+  [z.Row]: "flex-row gap-x-6"
+}, Pr = ({
   fieldTitle: e,
-  radioCssClass: n,
-  labelCssClass: t,
+  radioCssClass: t,
+  labelCssClass: n,
   disabled: a,
   elementId: s,
-  radioButtons: l,
-  activeRadioButton: o,
+  radioButtons: o,
+  activeRadioButton: l,
   orientation: u,
   onChange: d
-}) => /* @__PURE__ */ p("div", { className: er, children: [
-  e && /* @__PURE__ */ r(j, { fieldTitle: e, htmlFor: s }),
+}) => /* @__PURE__ */ m("div", { className: rr, children: [
+  e && /* @__PURE__ */ r(V, { fieldTitle: e, htmlFor: s }),
   /* @__PURE__ */ r(
     "div",
     {
@@ -459,56 +462,56 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
       "aria-label": e,
       "aria-disabled": a || void 0,
       className: i(
-        rr,
-        tr[u]
+        tr,
+        ar[u]
       ),
-      children: l.map((c) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
+      children: o.map((c) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ r(
-          Je,
+          er,
           {
             name: s,
             value: c.id,
             inputId: c.id,
             disabled: a,
-            cssClass: n,
-            labelCssClass: t,
+            cssClass: t,
+            labelCssClass: n,
             title: c.name,
-            checked: c.id === o,
+            checked: c.id === l,
             onChange: () => d(c.id)
           }
         ),
-        c.id === o && c.content ? /* @__PURE__ */ r("div", { className: nr, children: c.content }) : null
+        c.id === l && c.content ? /* @__PURE__ */ r("div", { className: nr, children: c.content }) : null
       ] }, c.id))
     }
   )
-] }), Lr = ({
+] }), Ar = ({
   icon: e,
-  title: n,
-  description: t
-}) => /* @__PURE__ */ p("div", { className: "h-full w-full flex flex-col items-center justify-center text-secondary", children: [
+  title: t,
+  description: n
+}) => /* @__PURE__ */ m("div", { className: "h-full w-full flex flex-col items-center justify-center text-secondary", children: [
   e || /* @__PURE__ */ r(fe, { width: 60, height: 60 }),
-  /* @__PURE__ */ r("span", { className: "small mt-2 text-primary", children: n }),
-  t && /* @__PURE__ */ r("span", { className: "mt-1 text-primary", children: t })
-] }), ar = 60, Or = ({
+  /* @__PURE__ */ r("span", { className: "small mt-2 text-primary", children: t }),
+  n && /* @__PURE__ */ r("span", { className: "mt-1 text-primary", children: n })
+] }), sr = 60, Mr = ({
   containerCssClass: e,
-  children: n,
-  width: t,
+  children: t,
+  width: n,
   title: a,
-  iconSize: s = ee,
-  titleCssClass: l,
-  additionalButtons: o
+  iconSize: s = re,
+  titleCssClass: o,
+  additionalButtons: l
 }) => {
-  const [u, d] = T(t), [c, m] = T(!0), f = i([
+  const [u, d] = S(n), [c, p] = S(!0), f = i([
     "transform rotate-180 [writing-mode:tb-rl]",
     c && "hidden",
-    l
-  ]), h = i([
+    o
+  ]), x = i([
     "flex flex-row gap-2 cursor-pointer text-secondary",
     c ? "justify-end" : "justify-center"
-  ]), x = () => {
-    d(c ? ar : t), m(!c);
+  ]), h = () => {
+    d(c ? sr : n), p(!c);
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ m(
     "div",
     {
       className: i([
@@ -524,28 +527,28 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
               "flex-1 min-h-0 overflow-auto",
               !c && "hidden"
             ]),
-            children: n
+            children: t
           }
         ),
         /* @__PURE__ */ r("div", { className: f, children: a }),
-        /* @__PURE__ */ p("div", { className: h, children: [
-          c && o,
+        /* @__PURE__ */ m("div", { className: x, children: [
+          c && l,
           /* @__PURE__ */ r(
-            A,
+            P,
             {
               cssClass: "hover:text-icon-accent-primary",
-              onClick: x,
+              onClick: h,
               iconBefore: c ? /* @__PURE__ */ r(
-                xe,
+                he,
                 {
                   size: s,
-                  stroke: E.stroke
+                  stroke: T.stroke
                 }
               ) : /* @__PURE__ */ r(
-                he,
+                xe,
                 {
                   size: s,
-                  stroke: E.stroke
+                  stroke: T.stroke
                 }
               )
             }
@@ -554,65 +557,65 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
       ]
     }
   );
-}, zr = ({
+}, Wr = ({
   label: e,
-  text: n,
-  children: t,
+  text: t,
+  children: n,
   postfix: a
-}) => /* @__PURE__ */ p(
+}) => /* @__PURE__ */ m(
   "div",
   {
     className: i(
       "flex flex-col text-secondary",
-      t ? "" : "max-w-[200px]"
+      n ? "" : "max-w-[200px]"
     ),
     children: [
       /* @__PURE__ */ r("label", { className: "dial-tiny mb-2", children: e }),
-      t || /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
-        /* @__PURE__ */ r(F, { triggerClassName: "text-primary", tooltip: n, children: n }),
+      n || /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
+        /* @__PURE__ */ r(F, { triggerClassName: "text-primary", tooltip: t, children: t }),
         a || null
       ] })
     ]
   }
-), sr = ({
+), or = ({
   ariaLabel: e,
-  cssClass: n,
-  size: t = 24,
+  cssClass: t,
+  size: n = 24,
   onClose: a
 }) => /* @__PURE__ */ r(
-  A,
+  P,
   {
     ariaLabel: e,
-    cssClass: i("text-secondary hover:text-accent-primary", n),
+    cssClass: i("text-secondary hover:text-accent-primary", t),
     onClick: a,
-    iconBefore: /* @__PURE__ */ r(W, { size: t })
+    iconBefore: /* @__PURE__ */ r(_, { size: n })
   }
 ), lr = ({
   value: e,
-  textareaId: n,
-  placeholder: t,
+  textareaId: t,
+  placeholder: n,
   cssClass: a = "",
   disabled: s,
-  invalid: l,
-  readonly: o,
+  invalid: o,
+  readonly: l,
   onChange: u
 }) => /* @__PURE__ */ r(F, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
   "textarea",
   {
-    id: n,
-    placeholder: t,
+    id: t,
+    placeholder: n,
     value: e || "",
     disabled: s,
     className: i(
       "dial-textarea dial-input px-3 py-2",
-      l ? "dial-input-error" : "",
+      o ? "dial-input-error" : "",
       s && "dial-input-disable",
-      o && "dial-input-readonly",
+      l && "dial-input-readonly",
       a
     ),
-    onChange: (d) => !o && u?.(d.currentTarget.value)
+    onChange: (d) => !l && u?.(d.currentTarget.value)
   }
-) }), or = [
+) }), ir = [
   "ArrowLeft",
   "ArrowRight",
   "ArrowUp",
@@ -624,16 +627,16 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
   "Escape",
   "Home",
   "End"
-], ir = (e, n, t, a) => {
-  if ((n === "number" || t !== void 0 || a !== void 0) && !or.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (t === void 0 || t < 0)) && !(e.key === "." && n === "number" && !e.currentTarget.value.includes("."))) {
+], cr = (e, t, n, a) => {
+  if ((t === "number" || n !== void 0 || a !== void 0) && !ir.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (n === void 0 || n < 0)) && !(e.key === "." && t === "number" && !e.currentTarget.value.includes("."))) {
     if (!/^[0-9]$/.test(e.key)) {
       e.preventDefault();
       return;
     }
-    if (t !== void 0 || a !== void 0) {
-      const l = e.currentTarget.value, o = e.currentTarget.selectionStart || 0, u = l.slice(0, o) + e.key + l.slice(o), d = parseFloat(u);
+    if (n !== void 0 || a !== void 0) {
+      const o = e.currentTarget.value, l = e.currentTarget.selectionStart || 0, u = o.slice(0, l) + e.key + o.slice(l), d = parseFloat(u);
       if (!isNaN(d)) {
-        if (t !== void 0 && d < t) {
+        if (n !== void 0 && d < n) {
           e.preventDefault();
           return;
         }
@@ -644,69 +647,69 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
       }
     }
   }
-}, z = ({
+}, W = ({
   iconBefore: e,
-  iconAfter: n,
-  hideBorder: t,
+  iconAfter: t,
+  hideBorder: n,
   value: a,
   elementId: s,
-  placeholder: l = "",
-  cssClass: o = "",
+  placeholder: o = "",
+  cssClass: l = "",
   containerCssClass: u,
   tooltipTriggerClassName: d,
   type: c = "text",
-  disabled: m,
+  disabled: p,
   readonly: f,
-  invalid: h,
-  onChange: x,
-  min: y,
+  invalid: x,
+  onChange: h,
+  min: b,
   max: g,
   prefix: N,
-  suffix: w,
-  textBeforeInput: b,
-  textAfterInput: L
+  suffix: k,
+  textBeforeInput: y,
+  textAfterInput: A
 }) => {
-  const ne = (I) => I.target.blur(), te = c === "number" || y !== void 0 || g !== void 0, ae = (I) => {
-    ir(I, c, y, g);
-  }, se = (I) => {
-    const P = I.currentTarget.value;
-    if (te && P !== "") {
-      const O = parseFloat(P);
-      if (isNaN(O) && P !== "-" && P !== "." || !isNaN(O) && (y !== void 0 && O < y || g !== void 0 && O > g))
+  const ne = (L) => L.target.blur(), ae = c === "number" || b !== void 0 || g !== void 0, se = (L) => {
+    cr(L, c, b, g);
+  }, oe = (L) => {
+    const j = L.currentTarget.value;
+    if (ae && j !== "") {
+      const M = parseFloat(j);
+      if (isNaN(M) && j !== "-" && j !== "." || !isNaN(M) && (b !== void 0 && M < b || g !== void 0 && M > g))
         return;
     }
-    x?.(P);
+    h?.(j);
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ m(
     "div",
     {
       className: i(
         "dial-input-field flex flex-row items-center justify-between py-2",
-        t ? "dial-input-no-border" : "dial-input",
-        h && "dial-input-error",
-        m && "dial-input-disable",
+        n ? "dial-input-no-border" : "dial-input",
+        x && "dial-input-error",
+        p && "dial-input-disable",
         f && "dial-input-readonly",
-        !b && "pl-3",
-        !L && "pr-3",
+        !y && "pl-3",
+        !A && "pr-3",
         u
       ),
       children: [
-        b && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-          z,
+        y && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+          W,
           {
             hideBorder: !0,
             containerCssClass: "rounded-r-none border-r-0",
             cssClass: "overflow-hidden overflow-ellipsis dial-small",
-            value: b,
+            value: y,
             disabled: !0,
-            elementId: b + "textBefore"
+            elementId: y + "textBefore"
           }
         ) }),
-        N && /* @__PURE__ */ p("p", { className: "text-secondary dial-small", children: [
+        N && /* @__PURE__ */ m("p", { className: "text-secondary dial-small", children: [
           " ",
           N
         ] }),
-        /* @__PURE__ */ r(k, { icon: e }),
+        /* @__PURE__ */ r(I, { icon: e }),
         /* @__PURE__ */ r(
           F,
           {
@@ -718,207 +721,207 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
                 type: c,
                 autoComplete: "off",
                 id: s,
-                placeholder: l,
+                placeholder: o,
                 value: a ?? "",
-                disabled: m,
-                className: i("border-0 bg-transparent", o),
-                onChange: (I) => !f && se?.(I),
-                onKeyDown: ae,
+                disabled: p,
+                className: i("border-0 bg-transparent", l),
+                onChange: (L) => !f && oe?.(L),
+                onKeyDown: se,
                 onWheel: ne,
-                min: y,
+                min: b,
                 max: g
               }
             )
           }
         ),
-        /* @__PURE__ */ r(k, { icon: n }),
-        w && /* @__PURE__ */ p("p", { className: "text-secondary dial-small", children: [
+        /* @__PURE__ */ r(I, { icon: t }),
+        k && /* @__PURE__ */ m("p", { className: "text-secondary dial-small", children: [
           " ",
-          w
+          k
         ] }),
-        L && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-          z,
+        A && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+          W,
           {
             hideBorder: !0,
             containerCssClass: "rounded-l-none border-l-0",
-            value: L,
+            value: A,
             disabled: !0,
-            elementId: L + "textAfter"
+            elementId: A + "textAfter"
           }
         ) })
       ]
     }
   );
-}, cr = /^0+\.(\d+)?$/, dr = /^0+/, re = ({
+}, dr = /^0+\.(\d+)?$/, ur = /^0+/, te = ({
   fieldTitle: e,
-  errorText: n,
-  optional: t,
+  errorText: t,
+  optional: n,
   elementCssClass: a,
   elementContainerCssClass: s,
-  elementId: l,
-  containerCssClass: o,
+  elementId: o,
+  containerCssClass: l,
   readonly: u,
   defaultEmptyText: d,
   min: c,
-  max: m,
+  max: p,
   ...f
-}) => /* @__PURE__ */ p("div", { className: i("flex flex-col", o), children: [
+}) => /* @__PURE__ */ m("div", { className: i("flex flex-col", l), children: [
   /* @__PURE__ */ r(
-    j,
+    V,
     {
       fieldTitle: e,
-      optional: t,
-      htmlFor: l
+      optional: n,
+      htmlFor: o
     }
   ),
-  u ? /* @__PURE__ */ r("span", { children: f.value || (d ?? "None") }) : /* @__PURE__ */ p(le, { children: [
+  u ? /* @__PURE__ */ r("span", { children: f.value || (d ?? "None") }) : /* @__PURE__ */ m(le, { children: [
     /* @__PURE__ */ r(
-      z,
+      W,
       {
-        elementId: l,
+        elementId: o,
         cssClass: a,
         containerCssClass: s,
-        invalid: n != null,
+        invalid: t != null,
         min: c,
-        max: m,
+        max: p,
         ...f
       }
     ),
-    /* @__PURE__ */ r(_, { errorText: n })
+    /* @__PURE__ */ r(H, { errorText: t })
   ] })
 ] }), Br = ({
   onChange: e,
-  value: n,
-  min: t,
+  value: t,
+  min: n,
   max: a,
   ...s
 }) => {
-  const l = (o) => String(o)?.match(cr) ? String(o)?.replace(dr, "0") : Number(o);
+  const o = (l) => String(l)?.match(dr) ? String(l)?.replace(ur, "0") : Number(l);
   return /* @__PURE__ */ r(
-    re,
+    te,
     {
       type: "number",
-      onChange: (o) => e?.(l(o)),
-      value: n,
-      min: t,
+      onChange: (l) => e?.(o(l)),
+      value: t,
+      min: n,
       max: a,
       ...s
     }
   );
-}, Vr = ({
+}, Or = ({
   onChange: e,
-  ...n
+  ...t
 }) => /* @__PURE__ */ r(
-  re,
+  te,
   {
     type: "text",
-    onChange: (t) => e?.(t),
-    ...n
+    onChange: (n) => e?.(n),
+    ...t
   }
-), jr = ({
+), Vr = ({
   fieldTitle: e,
-  optional: n,
-  elementId: t,
+  optional: t,
+  elementId: n,
   elementCssClass: a,
   errorText: s,
-  ...l
-}) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
+  ...o
+}) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ r(
-    j,
+    V,
     {
       fieldTitle: e,
-      optional: n,
-      htmlFor: t
+      optional: t,
+      htmlFor: n
     }
   ),
   /* @__PURE__ */ r(
     lr,
     {
-      textareaId: t,
+      textareaId: n,
       cssClass: a,
-      ...l
+      ...o
     }
   ),
-  /* @__PURE__ */ r(_, { errorText: s })
-] }), Mr = ({
+  /* @__PURE__ */ r(H, { errorText: s })
+] }), zr = ({
   title: e,
-  switchId: n,
-  isOn: t = !1,
+  switchId: t,
+  isOn: n = !1,
   disabled: a,
   onChange: s
 }) => {
-  const l = i(
+  const o = i(
     "flex w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",
-    t ? "flex-row-reverse" : "flex-row",
+    n ? "flex-row-reverse" : "flex-row",
     a ? "pointer-events-none" : "",
-    a ? t ? "bg-controls-disable" : "bg-layer-4" : t ? "bg-accent-primary" : "bg-layer-4"
-  ), o = D(
+    a ? n ? "bg-controls-disable" : "bg-layer-4" : n ? "bg-accent-primary" : "bg-layer-4"
+  ), l = D(
     (u) => {
-      u.stopPropagation(), s?.(!t);
+      u.stopPropagation(), s?.(!n);
     },
-    [s, t]
+    [s, n]
   );
-  return /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
+  return /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
     /* @__PURE__ */ r(
       "input",
       {
         type: "checkbox",
-        onChange: o,
-        id: n,
+        onChange: l,
+        id: t,
         disabled: a,
         className: "invisible w-0 h-0",
-        checked: t
+        checked: n
       }
     ),
-    /* @__PURE__ */ r("label", { htmlFor: n, className: l, children: /* @__PURE__ */ r(
+    /* @__PURE__ */ r("label", { htmlFor: t, className: o, children: /* @__PURE__ */ r(
       "span",
       {
         className: i(
           "size-3 rounded-full",
-          a ? t ? "bg-layer-4" : "bg-controls-disable" : "bg-controls-enable-primary"
+          a ? n ? "bg-layer-4" : "bg-controls-disable" : "bg-controls-enable-primary"
         )
       }
     ) }),
     e && /* @__PURE__ */ r("span", { className: "pl-2 dial-small text-primary", children: e })
   ] });
 };
-var S = /* @__PURE__ */ ((e) => (e.Sm = "sm", e.Md = "md", e.Lg = "lg", e))(S || {});
-const ur = "z-[52] flex items-center justify-center bg-blackout md:p-4", mr = "relative max-h-full rounded bg-layer-3 flex flex-col shadow w-full h-full md:h-auto", pr = "divide-tertiary divide-y", fr = "flex flex-row justify-between py-4 px-6 items-center", xr = {
-  [S.Sm]: "max-w-full md:max-w-[400px]",
-  [S.Md]: "max-w-full md:max-w-[800px]",
-  [S.Lg]: "max-w-full md:max-w-[1200px]"
-}, hr = ({
+var E = /* @__PURE__ */ ((e) => (e.Sm = "sm", e.Md = "md", e.Lg = "lg", e))(E || {});
+const pr = "z-[52] flex items-center justify-center bg-blackout md:p-4", mr = "relative max-h-full rounded bg-layer-3 flex flex-col shadow w-full h-full md:h-auto", fr = "divide-tertiary divide-y", hr = "flex flex-row justify-between py-4 px-6 items-center", xr = {
+  [E.Sm]: "max-w-full md:max-w-[400px]",
+  [E.Md]: "max-w-full md:max-w-[800px]",
+  [E.Lg]: "max-w-full md:max-w-[1200px]"
+}, gr = ({
   open: e = !1,
-  title: n,
-  portalId: t,
+  title: t,
+  portalId: n,
   cssClass: a,
   overlayClass: s,
-  headingClass: l,
-  dividers: o = !0,
+  headingClass: o,
+  dividers: l = !0,
   children: u,
   footer: d,
   onClose: c,
-  size: m = S.Md
+  size: p = E.Md
 }) => {
-  const { refs: f, context: h } = U({
+  const { refs: f, context: x } = G({
     open: e,
-    onOpenChange: (b) => {
-      b || c?.(null);
+    onOpenChange: (y) => {
+      y || c?.(null);
     }
-  }), x = Z(h, { role: "dialog" }), y = G(h, { outsidePress: !0 }), { getFloatingProps: g } = X([x, y]);
+  }), h = X(x, { role: "dialog" }), b = Z(x, { outsidePress: !0 }), { getFloatingProps: g } = q([h, b]);
   if (!e) return null;
-  const N = typeof n == "string" ? "dial-popup-heading" : void 0, w = (b) => b ? typeof b == "string" ? /* @__PURE__ */ r(
+  const N = typeof t == "string" ? "dial-popup-heading" : void 0, k = (y) => y ? typeof y == "string" ? /* @__PURE__ */ r(
     "h3",
     {
       id: N,
       className: i(
         "flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",
-        l
+        o
       ),
-      children: /* @__PURE__ */ r(F, { tooltip: b, children: b })
+      children: /* @__PURE__ */ r(F, { tooltip: y, children: y })
     }
-  ) : b : /* @__PURE__ */ r("span", {});
-  return /* @__PURE__ */ r(Q, { id: t, children: /* @__PURE__ */ r(Oe, { className: i(ur, s), children: /* @__PURE__ */ r(ze, { context: h, children: /* @__PURE__ */ p(
+  ) : y : /* @__PURE__ */ r("span", {});
+  return /* @__PURE__ */ r(Y, { id: n, children: /* @__PURE__ */ r(Ae, { className: i(pr, s), children: /* @__PURE__ */ r(Me, { context: x, children: /* @__PURE__ */ m(
     "div",
     {
       ref: f.setFloating,
@@ -928,18 +931,18 @@ const ur = "z-[52] flex items-center justify-center bg-blackout md:p-4", mr = "r
       "aria-labelledby": N,
       className: i(
         mr,
-        xr[m],
-        o && pr,
+        xr[p],
+        l && fr,
         a
       ),
       children: [
-        /* @__PURE__ */ p("div", { className: fr, children: [
-          w(n),
+        /* @__PURE__ */ m("div", { className: hr, children: [
+          k(t),
           /* @__PURE__ */ r(
-            sr,
+            or,
             {
               ariaLabel: "Close dialog",
-              onClose: (b) => c?.(b)
+              onClose: (y) => c?.(y)
             }
           )
         ] }),
@@ -950,7 +953,7 @@ const ur = "z-[52] flex items-center justify-center bg-blackout md:p-4", mr = "r
   ) }) }) });
 };
 var B = /* @__PURE__ */ ((e) => (e.Info = "info", e.Danger = "danger", e))(B || {});
-const gr = "flex justify-end gap-2 px-6 py-4", br = "text-secondary dial-small-150 px-6 py-4", yr = "Cancel", H = {
+const yr = "flex justify-end gap-2 px-6 py-4", br = "text-secondary dial-small-150 px-6 py-4", Cr = "Cancel", $ = {
   [B.Info]: {
     confirmVariant: v.Primary,
     cancelVariant: v.Secondary
@@ -960,169 +963,169 @@ const gr = "flex justify-end gap-2 px-6 py-4", br = "text-secondary dial-small-1
     confirmVariant: v.Danger,
     cancelVariant: v.Secondary
   }
-}, Wr = ({
+}, _r = ({
   title: e,
-  description: n,
-  descriptionCssClass: t,
+  description: t,
+  descriptionCssClass: n,
   open: a = !1,
   confirmLabel: s,
-  cancelLabel: l = yr,
-  isLoading: o = !1,
+  cancelLabel: o = Cr,
+  isLoading: l = !1,
   disableConfirmButton: u = !1,
   cssClass: d,
   confirmClassName: c,
-  onClose: m,
+  onClose: p,
   onConfirm: f,
-  onCancel: h,
-  children: x,
-  dividers: y = !1,
+  onCancel: x,
+  children: h,
+  dividers: b = !1,
   variant: g = B.Info,
-  size: N = S.Sm
+  size: N = E.Sm
 }) => {
-  const w = o ? null : /* @__PURE__ */ p("div", { className: gr, children: [
+  const k = l ? null : /* @__PURE__ */ m("div", { className: yr, children: [
     /* @__PURE__ */ r(
-      A,
+      P,
       {
         variant: v.Secondary,
-        title: l,
-        onClick: () => h ? h() : m?.()
+        title: o,
+        onClick: () => x ? x() : p?.()
       }
     ),
     /* @__PURE__ */ r(
-      A,
+      P,
       {
-        variant: H[g].confirmVariant,
+        variant: $[g].confirmVariant,
         cssClass: c,
         title: s,
         disable: u,
         onClick: () => f()
       }
     )
-  ] }), b = D(() => o ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r(He, { size: 50 }) }) : x ?? (n ? /* @__PURE__ */ r(
+  ] }), y = D(() => l ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r($e, { size: 50 }) }) : h ?? (t ? /* @__PURE__ */ r(
     "div",
     {
-      className: i(br, t),
-      children: n
+      className: i(br, n),
+      children: t
     }
-  ) : null), [x, n, o, t]);
+  ) : null), [h, t, l, n]);
   return /* @__PURE__ */ r(
-    hr,
+    gr,
     {
       open: a,
       title: e,
-      cssClass: i(H[g].container, d),
-      dividers: y,
-      onClose: () => m?.(),
-      footer: w,
+      cssClass: i($[g].container, d),
+      dividers: b,
+      onClose: () => p?.(),
+      footer: k,
       size: N,
-      children: b()
+      children: y()
     }
   );
-}, Cr = ({ onClick: e }) => /* @__PURE__ */ r(
+}, vr = ({ onClick: e }) => /* @__PURE__ */ r(
   ge,
   {
-    ...E,
+    ...T,
     className: "text-primary",
     onClick: e
   }
-), vr = ({ onClick: e }) => /* @__PURE__ */ r(be, { ...E, className: "text-primary", onClick: e }), Nr = ({ ...e }) => {
-  const [n, t] = T(!1), a = D((s) => {
-    t(s);
+), wr = ({ onClick: e }) => /* @__PURE__ */ r(ye, { ...T, className: "text-primary", onClick: e }), Nr = ({ ...e }) => {
+  const [t, n] = S(!1), a = D((s) => {
+    n(s);
   }, []);
   return /* @__PURE__ */ r(
-    z,
+    W,
     {
-      type: n ? "text" : "password",
+      type: t ? "text" : "password",
       ...e,
-      iconAfter: n ? /* @__PURE__ */ r(Cr, { onClick: () => a(!1) }) : /* @__PURE__ */ r(vr, { onClick: () => a(!0) })
+      iconAfter: t ? /* @__PURE__ */ r(vr, { onClick: () => a(!1) }) : /* @__PURE__ */ r(wr, { onClick: () => a(!0) })
     }
   );
-}, _r = ({
+}, Hr = ({
   fieldTitle: e,
-  optional: n,
-  elementCssClass: t,
+  optional: t,
+  elementCssClass: n,
   elementId: a,
   errorText: s,
-  ...l
-}) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
+  ...o
+}) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ r(
-    j,
+    V,
     {
       fieldTitle: e,
-      optional: n,
+      optional: t,
       htmlFor: a
     }
   ),
   /* @__PURE__ */ r(
     Nr,
     {
-      cssClass: t,
+      cssClass: n,
       elementId: a,
       invalid: !!s,
-      ...l
+      ...o
     }
   ),
-  /* @__PURE__ */ r(_, { errorText: s })
+  /* @__PURE__ */ r(H, { errorText: s })
 ] });
-var V = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(V || {});
-const wr = {
-  [V.Small]: {
+var O = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(O || {});
+const kr = {
+  [O.Small]: {
     textClass: "text-xs px-1",
     containerClass: "px-[6px] py-1 h-[22px]",
     iconSize: 10,
     iconStroke: 1
   },
-  [V.Base]: {
+  [O.Base]: {
     textClass: "text-sm px-2",
     containerClass: "px-3 py-2 h-[38px]",
     iconSize: 18,
     iconStroke: 1.5
   }
-}, Hr = ({
+}, $r = ({
   elementId: e,
-  value: n,
-  placeholder: t,
+  value: t,
+  placeholder: n,
   disabled: a,
   readonly: s,
-  invalid: l,
-  cssClass: o,
+  invalid: o,
+  cssClass: l,
   containerCssClass: u,
   onChange: d,
-  size: c = V.Base
+  size: c = O.Base
 }) => {
-  const [m, f] = T(n || "");
+  const [p, f] = S(t || "");
   Ie(() => {
-    f(n || "");
-  }, [n]);
-  const h = D(
+    f(t || "");
+  }, [t]);
+  const x = D(
     (g) => {
       f(g), d?.(g);
     },
     [d]
-  ), x = wr[c], y = D(() => {
-    h("");
-  }, [h]);
-  return /* @__PURE__ */ p(
+  ), h = kr[c], b = D(() => {
+    x("");
+  }, [x]);
+  return /* @__PURE__ */ m(
     "div",
     {
       className: i(
         "dial-input flex flex-row items-center justify-between",
-        l && "dial-input-error",
+        o && "dial-input-error",
         a && "dial-input-disable",
         s && "dial-input-readonly",
-        x.containerClass,
+        h.containerClass,
         u
       ),
       children: [
         /* @__PURE__ */ r(
-          k,
+          I,
           {
             className: i(a ? "text-secondary" : "text-primary"),
             icon: /* @__PURE__ */ r(
-              ye,
+              be,
               {
-                size: x.iconSize,
-                stroke: x.iconStroke
+                size: h.iconSize,
+                stroke: h.iconStroke
               }
             )
           }
@@ -1133,28 +1136,28 @@ const wr = {
             id: e,
             type: "text",
             autoComplete: "off",
-            placeholder: t,
-            value: m ?? "",
+            placeholder: n,
+            value: p ?? "",
             disabled: a,
             readOnly: s,
             className: i(
               "border-0 bg-transparent w-full",
-              o,
-              x.textClass
+              l,
+              h.textClass
             ),
-            onChange: (g) => !s && h(g.currentTarget.value)
+            onChange: (g) => !s && x(g.currentTarget.value)
           }
         ),
-        m && !s && !a && /* @__PURE__ */ r(
-          k,
+        p && !s && !a && /* @__PURE__ */ r(
+          I,
           {
             className: "text-primary cursor-pointer",
             icon: /* @__PURE__ */ r(
-              W,
+              _,
               {
-                size: x.iconSize,
-                stroke: x.iconStroke,
-                onClick: y,
+                size: h.iconSize,
+                stroke: h.iconStroke,
+                onClick: b,
                 "aria-label": "Clear search",
                 role: "button"
               }
@@ -1164,20 +1167,20 @@ const wr = {
       ]
     }
   );
-}, Dr = ({ selectedItems: e, listCssClass: n, listElementCssClass: t }) => !!e?.length && /* @__PURE__ */ r(
+}, Dr = ({ selectedItems: e, listCssClass: t, listElementCssClass: n }) => !!e?.length && /* @__PURE__ */ r(
   "ul",
   {
     className: i(
       "flex-row items-center truncate flex-wrap",
       "flex gap-x-2 gap-y-1",
-      n
+      t
     ),
     children: e?.map((a) => /* @__PURE__ */ r(
       "li",
       {
         className: i([
           "tiny bg-layer-3 rounded p-1 border border-primary max-w-[200px] truncate",
-          t
+          n
         ]),
         children: /* @__PURE__ */ r(F, { tooltip: a, children: /* @__PURE__ */ r(
           "button",
@@ -1192,38 +1195,38 @@ const wr = {
       a
     ))
   }
-), $r = ({
+), Kr = ({
   placeholder: e = "",
-  selectedItems: n = [],
-  updateSelected: t,
+  selectedItems: t = [],
+  updateSelected: n,
   listCssClass: a,
   listElementCssClass: s,
-  containerCssClass: l,
-  inputCssClass: o
+  containerCssClass: o,
+  inputCssClass: l
 }) => {
-  const [u, d] = T(""), c = D(
+  const [u, d] = S(""), c = D(
     (f) => {
-      f.key === "Enter" && (t([...n, f.currentTarget.value]), d("")), (f.key === "Backspace" || f.key === "Delete") && n.length && !u && t(n.slice(0, -1));
+      f.key === "Enter" && (n([...t, f.currentTarget.value]), d("")), (f.key === "Backspace" || f.key === "Delete") && t.length && !u && n(t.slice(0, -1));
     },
-    [n, t, u]
-  ), m = D(
+    [t, n, u]
+  ), p = D(
     (f) => {
       d(f.target.value);
     },
     [d]
   );
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ m(
     "div",
     {
       className: i([
         "dial-input px-3 py-2 flex flex-row items-center flex-wrap w-fit gap-2",
-        l
+        o
       ]),
       children: [
         /* @__PURE__ */ r(
           Dr,
           {
-            selectedItems: n,
+            selectedItems: t,
             listCssClass: a,
             listElementCssClass: s
           }
@@ -1233,10 +1236,10 @@ const wr = {
           {
             type: "text",
             value: u,
-            className: i(["border-0 bg-transparent p-0", o]),
-            placeholder: n?.length ? "" : e,
+            className: i(["border-0 bg-transparent p-0", l]),
+            placeholder: t?.length ? "" : e,
             onKeyDown: c,
-            onChange: m
+            onChange: p
           }
         )
       ]
@@ -1247,36 +1250,36 @@ export {
   R as AlertVariant,
   v as ButtonVariant,
   B as ConfirmationPopupVariant,
-  Er as DialAlert,
-  $r as DialAutocompleteInput,
+  Tr as DialAlert,
+  Kr as DialAutocompleteInput,
   Dr as DialAutocompleteInputValue,
-  A as DialButton,
+  P as DialButton,
   Fr as DialCheckbox,
-  sr as DialCloseButton,
-  Or as DialCollapsibleSidebar,
-  Wr as DialConfirmationPopup,
-  _ as DialErrorText,
-  j as DialFieldLabel,
-  k as DialIcon,
-  z as DialInput,
-  zr as DialLabelledText,
-  He as DialLoader,
-  Lr as DialNoDataContent,
+  or as DialCloseButton,
+  Mr as DialCollapsibleSidebar,
+  _r as DialConfirmationPopup,
+  H as DialErrorText,
+  V as DialFieldLabel,
+  I as DialIcon,
+  W as DialInput,
+  Wr as DialLabelledText,
+  $e as DialLoader,
+  Ar as DialNoDataContent,
   Br as DialNumberInputField,
   Nr as DialPasswordInput,
-  _r as DialPasswordInputField,
-  hr as DialPopup,
-  Je as DialRadioButton,
-  Ar as DialRadioGroup,
-  Hr as DialSearch,
-  Pr as DialSteps,
-  Mr as DialSwitch,
-  jr as DialTextAreaField,
-  Vr as DialTextInputField,
+  Hr as DialPasswordInputField,
+  gr as DialPopup,
+  er as DialRadioButton,
+  Pr as DialRadioGroup,
+  $r as DialSearch,
+  jr as DialSteps,
+  zr as DialSwitch,
+  Vr as DialTextAreaField,
+  Or as DialTextInputField,
   lr as DialTextarea,
   F as DialTooltip,
-  S as PopupSize,
-  M as RadioGroupOrientation,
-  V as SearchSize,
+  E as PopupSize,
+  z as RadioGroupOrientation,
+  O as SearchSize,
   C as StepStatus
 };