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

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

@@ -1,223 +1,223 @@
-import { jsx as r, jsxs as m, Fragment as le } from "react/jsx-runtime";
-import c 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 fe, IconClipboardX as pe, 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 E, useRef as ve, useMemo as Ne, useContext as we, forwardRef as U, isValidElement as De, cloneElement as Ie, useCallback as S, useEffect as ke } from "react";
-import { useFloating as G, offset as Re, flip as Se, shift as Fe, arrow as Te, autoUpdate as Ee, useHover as Pe, useFocus as Le, useDismiss as K, useRole as Z, useInteractions as X, useMergeRefs as q, FloatingPortal as Q, FloatingArrow as Ae, 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 }), V = ({
+import { jsx as r, jsxs as p, 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 = ({
   fieldTitle: e,
-  htmlFor: t,
-  optional: n,
-  optionalText: s,
-  cssClass: a
-}) => e ? /* @__PURE__ */ m(
+  htmlFor: n,
+  optional: t,
+  optionalText: a,
+  cssClass: s
+}) => e ? /* @__PURE__ */ p(
   "label",
   {
-    className: c(
+    className: i(
       "dial-tiny text-secondary",
-      a,
-      !a?.includes("mb") && "mb-2"
+      s,
+      !s?.includes("mb") && "mb-2"
     ),
-    htmlFor: t,
+    htmlFor: n,
     children: [
       /* @__PURE__ */ r("span", { className: "min-h-4", children: e }),
-      n && /* @__PURE__ */ r("span", { className: "ml-1", children: s ?? "(Optional)" })
+      t && /* @__PURE__ */ r("span", { className: "ml-1", children: a ?? "(Optional)" })
     ]
   }
-) : null, D = ({ icon: e, className: t }) => e ? /* @__PURE__ */ r("span", { className: c("flex-shrink-0", t), children: e }) : null;
+) : null, k = ({ icon: e, className: n }) => e ? /* @__PURE__ */ r("span", { className: i("flex-shrink-0", n), children: e }) : null;
 var v = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e.Danger = "danger", e))(v || {});
 const Be = {
   [v.Primary]: "dial-primary-button",
   [v.Secondary]: "dial-secondary-button",
   [v.Tertiary]: "dial-tertiary-button",
   [v.Danger]: "dial-danger-button"
-}, P = ({
+}, A = ({
   title: e,
-  variant: t,
-  cssClass: n,
-  textCssClass: s,
-  ref: a,
+  variant: n,
+  cssClass: t,
+  textCssClass: a,
+  ref: s,
   onClick: l,
   disable: o,
   iconAfter: u,
   iconBefore: d,
-  hideTitleOnMobile: i,
-  ariaLabel: f
+  hideTitleOnMobile: c,
+  ariaLabel: m
 }) => {
-  const x = c(
+  const f = i(
     "dial-small-semi",
     u ? "mr-2" : "",
     d ? "ml-2" : "",
-    i ? "hidden sm:inline" : "inline",
-    s
-  ), h = c(
-    t && Be[t],
-    n,
+    c ? "hidden sm:inline" : "inline",
+    a
+  ), h = i(
+    n && Be[n],
+    t,
     "focus-visible:outline outline-offset-0"
   );
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ p(
     "button",
     {
-      ref: a,
+      ref: s,
       type: "button",
       className: h,
-      onClick: (p) => l?.(p),
+      onClick: (x) => l?.(x),
       disabled: o,
-      "aria-label": e || f,
+      "aria-label": e || m,
       children: [
-        /* @__PURE__ */ r(D, { icon: d }),
-        e && /* @__PURE__ */ r("span", { className: x, children: e }),
-        /* @__PURE__ */ r(D, { icon: u })
+        /* @__PURE__ */ r(k, { icon: d }),
+        e && /* @__PURE__ */ r("span", { className: f, children: e }),
+        /* @__PURE__ */ r(k, { icon: u })
       ]
     }
   );
 };
-var k = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(k || {});
-const je = {
+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 })
-}, Ve = {
-  [k.Info]: "bg-info border-info text-info",
-  [k.Success]: "bg-success border-success text-success",
-  [k.Warning]: "bg-warning border-warning text-warning",
-  [k.Error]: "bg-error border-error text-error"
-}, Me = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", Fr = ({
-  variant: e = k.Info,
-  message: t,
-  cssClass: n,
-  closable: s = !1,
-  onClose: a
-}) => /* @__PURE__ */ m(
+}, je = {
+  [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 = ({
+  variant: e = R.Info,
+  message: n,
+  cssClass: t,
+  closable: a = !1,
+  onClose: s
+}) => /* @__PURE__ */ p(
   "div",
   {
     role: "alert",
-    className: c(
+    className: i(
       Me,
-      Ve[e],
-      n
+      je[e],
+      t
     ),
     children: [
-      /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ r(D, { icon: je[e] }),
-        /* @__PURE__ */ r("div", { className: "text-primary", children: t })
+      /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ r(k, { icon: Ve[e] }),
+        /* @__PURE__ */ r("div", { className: "text-primary", children: n })
       ] }),
-      s && /* @__PURE__ */ r(
-        P,
+      a && /* @__PURE__ */ r(
+        A,
         {
           cssClass: "ml-2 text-secondary hover:text-primary",
           ariaLabel: "Close alert",
           iconBefore: /* @__PURE__ */ r(W, { size: 16 }),
-          onClick: (l) => a?.(l)
+          onClick: (l) => s?.(l)
         }
       )
     ]
   }
 ), We = "flex items-center justify-center text-secondary", _e = "shrink-0 grow-0 basis-auto animate-spin-steps", He = ({
   size: e = 18,
-  cssClass: t,
-  iconClass: n,
-  fullWidth: s = !0,
-  ariaLabel: a = "Loading"
+  cssClass: n,
+  iconClass: t,
+  fullWidth: a = !0,
+  ariaLabel: s = "Loading"
 }) => /* @__PURE__ */ r(
   "div",
   {
     role: "status",
-    "aria-label": a,
-    className: c({
+    "aria-label": s,
+    className: i({
       [We]: !0,
-      "w-full h-full": s,
-      [t || ""]: !!t
+      "w-full h-full": a,
+      [n || ""]: !!n
     }),
     children: /* @__PURE__ */ r(
-      D,
+      k,
       {
         icon: /* @__PURE__ */ r(
           ue,
           {
             width: e,
             height: e,
-            className: c(_e, n)
+            className: i(_e, t)
           }
         )
       }
     )
   }
-), $e = 7, Ue = 2, Y = Ce(null), J = () => {
+), $e = 7, Ke = 2, Y = Ce(null), J = () => {
   const e = we(Y);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
   return e;
-}, Ge = ({
+}, Ue = ({
   initialOpen: e = !1,
-  placement: t = "bottom",
-  isTriggerClickable: n = !1,
-  open: s,
-  onOpenChange: a
+  placement: n = "bottom",
+  isTriggerClickable: t = !1,
+  open: a,
+  onOpenChange: s
 } = {}) => {
-  const [l, o] = E(e), u = ve(null), d = s ?? l, i = a ?? o, f = G({
-    placement: t,
+  const [l, o] = T(e), u = ve(null), d = a ?? l, c = s ?? o, m = U({
+    placement: n,
     open: d,
-    onOpenChange: i,
-    whileElementsMounted: Ee,
+    onOpenChange: c,
+    whileElementsMounted: Fe,
     middleware: [
-      Re($e + Ue),
+      Re($e + Ke),
       Se({
-        crossAxis: t.includes("-"),
+        crossAxis: n.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5
       }),
-      Fe({ padding: 5 }),
-      Te({
+      Te({ padding: 5 }),
+      Ee({
         element: u
       })
     ]
-  }), x = Pe(f.context, {
+  }), f = Pe(m.context, {
     move: !1,
-    enabled: s == null,
-    mouseOnly: n,
+    enabled: a == null,
+    mouseOnly: t,
     delay: { open: 500, close: 0 }
-  }), h = Le(f.context, {
-    enabled: s == null
-  }), p = K(f.context), y = Z(f.context, { role: "tooltip" }), g = X([x, h, p, y]);
+  }), h = Ae(m.context, {
+    enabled: a == null
+  }), x = G(m.context), y = Z(m.context, { role: "tooltip" }), g = X([f, h, x, y]);
   return Ne(
     () => ({
       open: d,
-      setOpen: i,
+      setOpen: c,
       arrowRef: u,
       ...g,
-      ...f
+      ...m
     }),
-    [d, i, g, f]
+    [d, c, g, m]
   );
-}, Ke = ({
+}, Ge = ({
   children: e,
-  ...t
+  ...n
 }) => {
-  const n = Ge(t);
-  return /* @__PURE__ */ r(Y.Provider, { value: n, children: e });
-}, Ze = U(function({ style: t, ...n }, s) {
-  const a = J(), l = q([a.refs.setFloating, s]);
-  return a.open ? /* @__PURE__ */ r(Q, { id: "tooltip-portal", children: /* @__PURE__ */ m(
+  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(
     "div",
     {
       ref: l,
       style: {
-        ...a.floatingStyles,
-        ...t
+        ...s.floatingStyles,
+        ...n
       },
-      ...a.getFloatingProps(n),
-      className: c(
+      ...s.getFloatingProps(t),
+      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]",
-        a.getFloatingProps(n).className
+        s.getFloatingProps(t).className
       ),
       children: [
-        n.children,
+        t.children,
         /* @__PURE__ */ r(
-          Ae,
+          Le,
           {
-            ref: a.arrowRef,
-            context: a.context,
+            ref: s.arrowRef,
+            context: s.context,
             fill: "currentColor",
             strokeWidth: 1,
             className: "stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"
@@ -226,82 +226,82 @@ const je = {
       ]
     }
   ) }) : null;
-}), Xe = U(function({ children: t, asChild: n = !1, ...s }, a) {
-  const l = J(), u = t && typeof t == "object" && "ref" in t && t.ref !== void 0 ? t.ref : void 0, d = q([l.refs.setReference, a, u]);
-  return n && De(t) ? Ie(
-    t,
+}), 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({
       ref: d,
-      ...s,
-      ...t.props
+      ...a,
+      ...n.props
     })
   ) : /* @__PURE__ */ r(
     "span",
     {
       ref: d,
-      ...l.getReferenceProps(s),
-      className: s.className ?? "dial-tooltip-trigger text-left",
-      children: t
+      ...l.getReferenceProps(a),
+      className: a.className ?? "dial-tooltip-trigger text-left",
+      children: n
     }
   );
-}), L = ({
+}), F = ({
   hideTooltip: e,
-  tooltip: t,
-  children: n,
-  triggerClassName: s,
-  contentClassName: a,
+  tooltip: n,
+  children: t,
+  triggerClassName: a,
+  contentClassName: s,
   ...l
-}) => /* @__PURE__ */ m(Ke, { ...l, children: [
-  /* @__PURE__ */ r(Xe, { className: c(s, "truncate"), children: n }),
+}) => /* @__PURE__ */ p(Ge, { ...l, children: [
+  /* @__PURE__ */ r(Xe, { className: i(a, "truncate"), children: t }),
   /* @__PURE__ */ r(
     Ze,
     {
-      className: c(
+      className: i(
         "text-primary",
-        a,
+        s,
         "max-w-[300px]",
-        (e || !t) && "hidden"
+        (e || !n) && "hidden"
       ),
-      children: t
+      children: n
     }
   )
-] }), ee = 18, F = {
+] }), ee = 18, E = {
   size: ee,
   stroke: 2
-}, Tr = ({
+}, Fr = ({
   label: e,
-  id: t,
-  checked: n,
-  indeterminate: s,
-  disabled: a,
+  id: n,
+  checked: t,
+  indeterminate: a,
+  disabled: s,
   ariaLabel: l,
   onChange: o
 }) => {
-  const u = S(
-    (f) => {
-      f.stopPropagation(), o?.(f.target.checked, t);
+  const u = D(
+    (m) => {
+      m.stopPropagation(), o?.(m.target.checked, n);
     },
-    [o, t]
-  ), d = c(
+    [o, n]
+  ), d = i(
     "flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",
-    `${n ? "" : 'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,
-    a ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : ""
-  ), i = c(
+    `${t ? "" : '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",
-    a ? "bg-layer-4 border-icon-secondary" : ""
+    s ? "bg-layer-4 border-icon-secondary" : ""
   );
-  return /* @__PURE__ */ m("label", { className: d, htmlFor: t, children: [
-    n && (s ? /* @__PURE__ */ r(me, { className: i, ...F }) : /* @__PURE__ */ r($, { className: i, ...F })),
-    e && /* @__PURE__ */ r(L, { tooltip: e, triggerClassName: "flex-1 min-w-0", children: /* @__PURE__ */ r("p", { className: "text-primary w-full truncate", children: e }) }),
+  return /* @__PURE__ */ p("label", { className: d, htmlFor: n, children: [
+    t && (a ? /* @__PURE__ */ r(me, { className: c, ...E }) : /* @__PURE__ */ r($, { className: c, ...E })),
+    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: t,
-        checked: n,
-        "aria-checked": s ? "mixed" : n,
-        "aria-disabled": a || void 0,
+        id: n,
+        checked: t,
+        "aria-checked": a ? "mixed" : t,
+        "aria-disabled": s || void 0,
         "aria-label": e ? void 0 : l,
         className: "invisible w-0 h-0"
       }
@@ -309,8 +309,8 @@ const je = {
   ] });
 };
 var C = /* @__PURE__ */ ((e) => (e.VALID = "valid", e.ERROR = "error", e))(C || {});
-const qe = (e, t) => {
-  if (t === e.id)
+const qe = (e, n) => {
+  if (n === e.id)
     switch (e.status) {
       case C.VALID:
         return "border-accent-secondary text-primary";
@@ -327,8 +327,8 @@ const qe = (e, t) => {
     default:
       return "border-primary text-secondary";
   }
-}, Qe = (e, t) => {
-  if (t === e.id)
+}, Qe = (e, n) => {
+  if (n === e.id)
     switch (e.status) {
       case C.VALID:
         return "bg-accent-secondary";
@@ -347,21 +347,21 @@ const qe = (e, t) => {
   }
 }, Ye = ({
   step: e,
-  index: t,
-  currentStep: n,
-  onChangeStep: s
+  index: n,
+  currentStep: t,
+  onChangeStep: a
 }) => {
-  const a = "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 = () => n === e.id && e.status === C.ERROR ? /* @__PURE__ */ r(fe, { stroke: 2, size: 16 }) : n !== e.id && e.status === C.VALID ? /* @__PURE__ */ r($, { stroke: 2, size: 16 }) : t + 1;
-  return /* @__PURE__ */ m(
+  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(
     "button",
     {
-      className: c(a, qe(e, n)),
-      onClick: () => s(e.id),
+      className: i(s, qe(e, t)),
+      onClick: () => a(e.id),
       children: [
         /* @__PURE__ */ r(
           "span",
           {
-            className: c(l, Qe(e, n)),
+            className: i(l, Qe(e, t)),
             children: o()
           }
         ),
@@ -369,149 +369,149 @@ const qe = (e, t) => {
       ]
     }
   );
-}, Er = ({
+}, Pr = ({
   steps: e,
-  currentStep: t,
-  onChangeStep: n
+  currentStep: n,
+  onChangeStep: t
 }) => {
-  const s = (a) => {
-    const l = e.findIndex((u) => u.id === t), o = e.findIndex((u) => u.id === a);
-    (a !== t && e[l].status === C.VALID || o < l) && n(a);
+  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);
   };
-  return /* @__PURE__ */ r("div", { id: "steps", className: "flex gap-x-3", children: e.map((a, l) => /* @__PURE__ */ r(
+  return /* @__PURE__ */ r("div", { id: "steps", className: "flex gap-x-3", children: e.map((s, l) => /* @__PURE__ */ r(
     Ye,
     {
-      currentStep: t,
-      onChangeStep: s,
-      step: a,
+      currentStep: n,
+      onChangeStep: a,
+      step: s,
       index: l
     },
-    a.id
+    s.id
   )) });
 }, Je = ({
   name: e,
-  value: t,
-  title: n,
-  description: s,
-  checked: a = !1,
+  value: n,
+  title: t,
+  description: a,
+  checked: s = !1,
   inputId: l,
   cssClass: o,
   labelCssClass: u,
   disabled: d,
-  onChange: i,
-  descriptionCssClass: f
+  onChange: c,
+  descriptionCssClass: m
 }) => {
-  const x = `${l}-desc`, h = c(
+  const f = `${l}-desc`, h = i(
     "dial-small cursor-pointer",
     d ? "text-secondary" : "text-primary",
     u
-  ), p = c(
+  ), x = i(
     "cursor-pointer dial-input-radio",
-    n && "mr-2",
+    t && "mr-2",
     o
-  ), y = c("flex flex-col", !!s && "mb-2"), g = c(
+  ), y = i("flex flex-col", !!a && "mb-2"), g = i(
     "dial-tiny mt-2 ml-[26px] text-secondary",
-    f
+    m
   );
-  return /* @__PURE__ */ m("div", { className: y, children: [
-    /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
+  return /* @__PURE__ */ p("div", { className: y, children: [
+    /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ r(
         "input",
         {
           type: "radio",
           id: l,
           name: e,
-          value: t,
-          checked: a,
+          value: n,
+          checked: s,
           disabled: d,
-          "aria-describedby": a && s ? x : void 0,
-          className: p,
+          "aria-describedby": s && a ? f : void 0,
+          className: x,
           onChange: (w) => {
-            d || w.target.checked && i?.(t);
+            d || w.target.checked && c?.(n);
           }
         }
       ),
-      n ? /* @__PURE__ */ r("label", { className: h, htmlFor: l, children: n }) : null
+      t ? /* @__PURE__ */ r("label", { className: h, htmlFor: l, children: t }) : null
     ] }),
-    a && s && /* @__PURE__ */ r("div", { id: x, className: g, children: s })
+    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", tr = "pb-1 mt-2", nr = {
+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"
-}, Pr = ({
+}, Ar = ({
   fieldTitle: e,
-  radioCssClass: t,
-  labelCssClass: n,
-  disabled: s,
-  elementId: a,
+  radioCssClass: n,
+  labelCssClass: t,
+  disabled: a,
+  elementId: s,
   radioButtons: l,
   activeRadioButton: o,
   orientation: u,
   onChange: d
-}) => /* @__PURE__ */ m("div", { className: er, children: [
-  e && /* @__PURE__ */ r(V, { fieldTitle: e, htmlFor: a }),
+}) => /* @__PURE__ */ p("div", { className: er, children: [
+  e && /* @__PURE__ */ r(j, { fieldTitle: e, htmlFor: s }),
   /* @__PURE__ */ r(
     "div",
     {
       role: "radiogroup",
       "aria-label": e,
-      "aria-disabled": s || void 0,
-      className: c(
+      "aria-disabled": a || void 0,
+      className: i(
         rr,
-        nr[u]
+        tr[u]
       ),
-      children: l.map((i) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
+      children: l.map((c) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ r(
           Je,
           {
-            name: a,
-            value: i.id,
-            inputId: i.id,
-            disabled: s,
-            cssClass: t,
-            labelCssClass: n,
-            title: i.name,
-            checked: i.id === o,
-            onChange: () => d(i.id)
+            name: s,
+            value: c.id,
+            inputId: c.id,
+            disabled: a,
+            cssClass: n,
+            labelCssClass: t,
+            title: c.name,
+            checked: c.id === o,
+            onChange: () => d(c.id)
           }
         ),
-        i.id === o && i.content ? /* @__PURE__ */ r("div", { className: tr, children: i.content }) : null
-      ] }, i.id))
+        c.id === o && c.content ? /* @__PURE__ */ r("div", { className: nr, children: c.content }) : null
+      ] }, c.id))
     }
   )
 ] }), Lr = ({
   icon: e,
-  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(pe, { width: 60, height: 60 }),
-  /* @__PURE__ */ r("span", { className: "small mt-2 text-primary", children: t }),
-  n && /* @__PURE__ */ r("span", { className: "mt-1 text-primary", children: n })
-] }), sr = 60, Ar = ({
+  title: n,
+  description: t
+}) => /* @__PURE__ */ p("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 = ({
   containerCssClass: e,
-  children: t,
-  width: n,
-  title: s,
-  iconSize: a = ee,
+  children: n,
+  width: t,
+  title: a,
+  iconSize: s = ee,
   titleCssClass: l,
   additionalButtons: o
 }) => {
-  const [u, d] = E(n), [i, f] = E(!0), x = c([
+  const [u, d] = T(t), [c, m] = T(!0), f = i([
     "transform rotate-180 [writing-mode:tb-rl]",
-    i && "hidden",
+    c && "hidden",
     l
-  ]), h = c([
+  ]), h = i([
     "flex flex-row gap-2 cursor-pointer text-secondary",
-    i ? "justify-end" : "justify-center"
-  ]), p = () => {
-    d(i ? sr : n), f(!i);
+    c ? "justify-end" : "justify-center"
+  ]), x = () => {
+    d(c ? ar : t), m(!c);
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: c([
+      className: i([
         "rounded p-4 flex flex-col justify-between overflow-y-auto flex-shrink-0",
         e
       ]),
@@ -520,32 +520,32 @@ const er = "flex flex-col gap-2", rr = "flex", tr = "pb-1 mt-2", nr = {
         /* @__PURE__ */ r(
           "div",
           {
-            className: c([
+            className: i([
               "flex-1 min-h-0 overflow-auto",
-              !i && "hidden"
+              !c && "hidden"
             ]),
-            children: t
+            children: n
           }
         ),
-        /* @__PURE__ */ r("div", { className: x, children: s }),
-        /* @__PURE__ */ m("div", { className: h, children: [
-          i && o,
+        /* @__PURE__ */ r("div", { className: f, children: a }),
+        /* @__PURE__ */ p("div", { className: h, children: [
+          c && o,
           /* @__PURE__ */ r(
-            P,
+            A,
             {
               cssClass: "hover:text-icon-accent-primary",
-              onClick: p,
-              iconBefore: i ? /* @__PURE__ */ r(
+              onClick: x,
+              iconBefore: c ? /* @__PURE__ */ r(
                 xe,
                 {
-                  size: a,
-                  stroke: F.stroke
+                  size: s,
+                  stroke: E.stroke
                 }
               ) : /* @__PURE__ */ r(
                 he,
                 {
-                  size: a,
-                  stroke: F.stroke
+                  size: s,
+                  stroke: E.stroke
                 }
               )
             }
@@ -554,61 +554,61 @@ const er = "flex flex-col gap-2", rr = "flex", tr = "pb-1 mt-2", nr = {
       ]
     }
   );
-}, Or = ({
+}, zr = ({
   label: e,
-  text: t,
-  children: n,
-  postfix: s
-}) => /* @__PURE__ */ m(
+  text: n,
+  children: t,
+  postfix: a
+}) => /* @__PURE__ */ p(
   "div",
   {
-    className: c(
+    className: i(
       "flex flex-col text-secondary",
-      n ? "" : "max-w-[200px]"
+      t ? "" : "max-w-[200px]"
     ),
     children: [
       /* @__PURE__ */ r("label", { className: "dial-tiny mb-2", children: e }),
-      n || /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
-        /* @__PURE__ */ r(L, { triggerClassName: "text-primary", tooltip: t, children: t }),
-        s || null
+      t || /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
+        /* @__PURE__ */ r(F, { triggerClassName: "text-primary", tooltip: n, children: n }),
+        a || null
       ] })
     ]
   }
-), ar = ({
+), sr = ({
   ariaLabel: e,
-  cssClass: t,
-  size: n = 24,
-  onClose: s
+  cssClass: n,
+  size: t = 24,
+  onClose: a
 }) => /* @__PURE__ */ r(
-  P,
+  A,
   {
     ariaLabel: e,
-    cssClass: c("text-secondary hover:text-accent-primary", t),
-    onClick: s,
-    iconBefore: /* @__PURE__ */ r(W, { size: n })
+    cssClass: i("text-secondary hover:text-accent-primary", n),
+    onClick: a,
+    iconBefore: /* @__PURE__ */ r(W, { size: t })
   }
 ), lr = ({
   value: e,
-  textareaId: t,
-  placeholder: n,
-  cssClass: s = "",
-  disabled: a,
+  textareaId: n,
+  placeholder: t,
+  cssClass: a = "",
+  disabled: s,
   invalid: l,
   readonly: o,
   onChange: u
-}) => /* @__PURE__ */ r(L, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
+}) => /* @__PURE__ */ r(F, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
   "textarea",
   {
-    id: t,
-    placeholder: n,
+    id: n,
+    placeholder: t,
     value: e || "",
-    disabled: a,
-    className: c(
+    disabled: s,
+    className: i(
       "dial-textarea dial-input px-3 py-2",
       l ? "dial-input-error" : "",
-      a && "dial-input-disable",
+      s && "dial-input-disable",
       o && "dial-input-readonly",
-      s
+      a
     ),
     onChange: (d) => !o && u?.(d.currentTarget.value)
   }
@@ -624,20 +624,20 @@ const er = "flex flex-col gap-2", rr = "flex", tr = "pb-1 mt-2", nr = {
   "Escape",
   "Home",
   "End"
-], ir = (e, t, n, s) => {
-  if ((t === "number" || n !== void 0 || s !== void 0) && !or.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (n === void 0 || n < 0)) && !(e.key === "." && t === "number" && !e.currentTarget.value.includes("."))) {
+], 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("."))) {
     if (!/^[0-9]$/.test(e.key)) {
       e.preventDefault();
       return;
     }
-    if (n !== void 0 || s !== void 0) {
+    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 (!isNaN(d)) {
-        if (n !== void 0 && d < n) {
+        if (t !== void 0 && d < t) {
           e.preventDefault();
           return;
         }
-        if (s !== void 0 && d > s) {
+        if (a !== void 0 && d > a) {
           e.preventDefault();
           return;
         }
@@ -646,48 +646,48 @@ const er = "flex flex-col gap-2", rr = "flex", tr = "pb-1 mt-2", nr = {
   }
 }, z = ({
   iconBefore: e,
-  iconAfter: t,
-  hideBorder: n,
-  value: s,
-  elementId: a,
+  iconAfter: n,
+  hideBorder: t,
+  value: a,
+  elementId: s,
   placeholder: l = "",
   cssClass: o = "",
   containerCssClass: u,
   tooltipTriggerClassName: d,
-  type: i = "text",
-  disabled: f,
-  readonly: x,
+  type: c = "text",
+  disabled: m,
+  readonly: f,
   invalid: h,
-  onChange: p,
+  onChange: x,
   min: y,
   max: g,
   prefix: N,
   suffix: w,
   textBeforeInput: b,
-  textAfterInput: A
+  textAfterInput: L
 }) => {
-  const te = (I) => I.target.blur(), ne = i === "number" || y !== void 0 || g !== void 0, se = (I) => {
-    ir(I, i, y, g);
-  }, ae = (I) => {
-    const T = I.currentTarget.value;
-    if (ne && T !== "") {
-      const O = parseFloat(T);
-      if (isNaN(O) && T !== "-" && T !== "." || !isNaN(O) && (y !== void 0 && O < y || g !== void 0 && O > g))
+  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))
         return;
     }
-    p?.(T);
+    x?.(P);
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: c(
+      className: i(
         "dial-input-field flex flex-row items-center justify-between py-2",
-        n ? "dial-input-no-border" : "dial-input",
+        t ? "dial-input-no-border" : "dial-input",
         h && "dial-input-error",
-        f && "dial-input-disable",
-        x && "dial-input-readonly",
+        m && "dial-input-disable",
+        f && "dial-input-readonly",
         !b && "pl-3",
-        !A && "pr-3",
+        !L && "pr-3",
         u
       ),
       children: [
@@ -702,48 +702,48 @@ const er = "flex flex-col gap-2", rr = "flex", tr = "pb-1 mt-2", nr = {
             elementId: b + "textBefore"
           }
         ) }),
-        N && /* @__PURE__ */ m("p", { className: "text-secondary dial-small", children: [
+        N && /* @__PURE__ */ p("p", { className: "text-secondary dial-small", children: [
           " ",
           N
         ] }),
-        /* @__PURE__ */ r(D, { icon: e }),
+        /* @__PURE__ */ r(k, { icon: e }),
         /* @__PURE__ */ r(
-          L,
+          F,
           {
-            tooltip: s,
-            triggerClassName: c(d, "flex-1"),
+            tooltip: a,
+            triggerClassName: i(d, "flex-1"),
             children: /* @__PURE__ */ r(
               "input",
               {
-                type: i,
+                type: c,
                 autoComplete: "off",
-                id: a,
+                id: s,
                 placeholder: l,
-                value: s ?? "",
-                disabled: f,
-                className: c("border-0 bg-transparent", o),
-                onChange: (I) => !x && ae?.(I),
-                onKeyDown: se,
-                onWheel: te,
+                value: a ?? "",
+                disabled: m,
+                className: i("border-0 bg-transparent", o),
+                onChange: (I) => !f && se?.(I),
+                onKeyDown: ae,
+                onWheel: ne,
                 min: y,
                 max: g
               }
             )
           }
         ),
-        /* @__PURE__ */ r(D, { icon: t }),
-        w && /* @__PURE__ */ m("p", { className: "text-secondary dial-small", children: [
+        /* @__PURE__ */ r(k, { icon: n }),
+        w && /* @__PURE__ */ p("p", { className: "text-secondary dial-small", children: [
           " ",
           w
         ] }),
-        A && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+        L && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
           z,
           {
             hideBorder: !0,
             containerCssClass: "rounded-l-none border-l-0",
-            value: A,
+            value: L,
             disabled: !0,
-            elementId: A + "textAfter"
+            elementId: L + "textAfter"
           }
         ) })
       ]
@@ -751,47 +751,47 @@ const er = "flex flex-col gap-2", rr = "flex", tr = "pb-1 mt-2", nr = {
   );
 }, cr = /^0+\.(\d+)?$/, dr = /^0+/, re = ({
   fieldTitle: e,
-  errorText: t,
-  optional: n,
-  elementCssClass: s,
-  elementContainerCssClass: a,
+  errorText: n,
+  optional: t,
+  elementCssClass: a,
+  elementContainerCssClass: s,
   elementId: l,
   containerCssClass: o,
   readonly: u,
   defaultEmptyText: d,
-  min: i,
-  max: f,
-  ...x
-}) => /* @__PURE__ */ m("div", { className: c("flex flex-col", o), children: [
+  min: c,
+  max: m,
+  ...f
+}) => /* @__PURE__ */ p("div", { className: i("flex flex-col", o), children: [
   /* @__PURE__ */ r(
-    V,
+    j,
     {
       fieldTitle: e,
-      optional: n,
+      optional: t,
       htmlFor: l
     }
   ),
-  u ? /* @__PURE__ */ r("span", { children: x.value || (d ?? "None") }) : /* @__PURE__ */ m(le, { children: [
+  u ? /* @__PURE__ */ r("span", { children: f.value || (d ?? "None") }) : /* @__PURE__ */ p(le, { children: [
     /* @__PURE__ */ r(
       z,
       {
         elementId: l,
-        cssClass: s,
-        containerCssClass: a,
-        invalid: t != null,
-        min: i,
-        max: f,
-        ...x
+        cssClass: a,
+        containerCssClass: s,
+        invalid: n != null,
+        min: c,
+        max: m,
+        ...f
       }
     ),
-    /* @__PURE__ */ r(_, { errorText: t })
+    /* @__PURE__ */ r(_, { errorText: n })
   ] })
-] }), zr = ({
+] }), Br = ({
   onChange: e,
-  value: t,
-  min: n,
-  max: s,
-  ...a
+  value: n,
+  min: t,
+  max: a,
+  ...s
 }) => {
   const l = (o) => String(o)?.match(cr) ? String(o)?.replace(dr, "0") : Number(o);
   return /* @__PURE__ */ r(
@@ -799,147 +799,147 @@ const er = "flex flex-col gap-2", rr = "flex", tr = "pb-1 mt-2", nr = {
     {
       type: "number",
       onChange: (o) => e?.(l(o)),
-      value: t,
-      min: n,
-      max: s,
-      ...a
+      value: n,
+      min: t,
+      max: a,
+      ...s
     }
   );
-}, Br = ({
+}, Vr = ({
   onChange: e,
-  ...t
+  ...n
 }) => /* @__PURE__ */ r(
   re,
   {
     type: "text",
-    onChange: (n) => e?.(n),
-    ...t
+    onChange: (t) => e?.(t),
+    ...n
   }
 ), jr = ({
   fieldTitle: e,
-  optional: t,
-  elementId: n,
-  elementCssClass: s,
-  errorText: a,
+  optional: n,
+  elementId: t,
+  elementCssClass: a,
+  errorText: s,
   ...l
-}) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
+}) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ r(
-    V,
+    j,
     {
       fieldTitle: e,
-      optional: t,
-      htmlFor: n
+      optional: n,
+      htmlFor: t
     }
   ),
   /* @__PURE__ */ r(
     lr,
     {
-      textareaId: n,
-      cssClass: s,
+      textareaId: t,
+      cssClass: a,
       ...l
     }
   ),
-  /* @__PURE__ */ r(_, { errorText: a })
-] }), Vr = ({
+  /* @__PURE__ */ r(_, { errorText: s })
+] }), Mr = ({
   title: e,
-  switchId: t,
-  isOn: n = !1,
-  disabled: s,
-  onChange: a
+  switchId: n,
+  isOn: t = !1,
+  disabled: a,
+  onChange: s
 }) => {
-  const l = c(
+  const l = i(
     "flex w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",
-    n ? "flex-row-reverse" : "flex-row",
-    s ? "pointer-events-none" : "",
-    s ? n ? "bg-controls-disable" : "bg-layer-4" : n ? "bg-accent-primary" : "bg-layer-4"
-  ), o = S(
+    t ? "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(
     (u) => {
-      u.stopPropagation(), a?.(!n);
+      u.stopPropagation(), s?.(!t);
     },
-    [a, n]
+    [s, t]
   );
-  return /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
+  return /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
     /* @__PURE__ */ r(
       "input",
       {
         type: "checkbox",
         onChange: o,
-        id: t,
-        disabled: s,
+        id: n,
+        disabled: a,
         className: "invisible w-0 h-0",
-        checked: n
+        checked: t
       }
     ),
-    /* @__PURE__ */ r("label", { htmlFor: t, className: l, children: /* @__PURE__ */ r(
+    /* @__PURE__ */ r("label", { htmlFor: n, className: l, children: /* @__PURE__ */ r(
       "span",
       {
-        className: c(
+        className: i(
           "size-3 rounded-full",
-          s ? n ? "bg-layer-4" : "bg-controls-disable" : "bg-controls-enable-primary"
+          a ? t ? "bg-layer-4" : "bg-controls-disable" : "bg-controls-enable-primary"
         )
       }
     ) }),
     e && /* @__PURE__ */ r("span", { className: "pl-2 dial-small text-primary", children: e })
   ] });
 };
-var R = /* @__PURE__ */ ((e) => (e.Sm = "sm", e.Md = "md", e.Lg = "lg", e))(R || {});
-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", fr = "divide-tertiary divide-y", pr = "flex flex-row justify-between py-4 px-6 items-center", xr = {
-  [R.Sm]: "max-w-full md:max-w-[400px]",
-  [R.Md]: "max-w-full md:max-w-[800px]",
-  [R.Lg]: "max-w-full md:max-w-[1200px]"
+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 = ({
   open: e = !1,
-  title: t,
-  portalId: n,
-  cssClass: s,
-  overlayClass: a,
+  title: n,
+  portalId: t,
+  cssClass: a,
+  overlayClass: s,
   headingClass: l,
   dividers: o = !0,
   children: u,
   footer: d,
-  onClose: i,
-  size: f = R.Md
+  onClose: c,
+  size: m = S.Md
 }) => {
-  const { refs: x, context: h } = G({
+  const { refs: f, context: h } = U({
     open: e,
     onOpenChange: (b) => {
-      b || i?.(null);
+      b || c?.(null);
     }
-  }), p = Z(h, { role: "dialog" }), y = K(h, { outsidePress: !0 }), { getFloatingProps: g } = X([p, y]);
+  }), x = Z(h, { role: "dialog" }), y = G(h, { outsidePress: !0 }), { getFloatingProps: g } = X([x, y]);
   if (!e) return null;
-  const N = typeof t == "string" ? "dial-popup-heading" : void 0, w = (b) => b ? typeof b == "string" ? /* @__PURE__ */ r(
+  const N = typeof n == "string" ? "dial-popup-heading" : void 0, w = (b) => b ? typeof b == "string" ? /* @__PURE__ */ r(
     "h3",
     {
       id: N,
-      className: c(
+      className: i(
         "flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",
         l
       ),
-      children: /* @__PURE__ */ r(L, { tooltip: b, children: b })
+      children: /* @__PURE__ */ r(F, { tooltip: b, children: b })
     }
   ) : b : /* @__PURE__ */ r("span", {});
-  return /* @__PURE__ */ r(Q, { id: n, children: /* @__PURE__ */ r(Oe, { className: c(ur, a), children: /* @__PURE__ */ r(ze, { context: h, children: /* @__PURE__ */ m(
+  return /* @__PURE__ */ r(Q, { id: t, children: /* @__PURE__ */ r(Oe, { className: i(ur, s), children: /* @__PURE__ */ r(ze, { context: h, children: /* @__PURE__ */ p(
     "div",
     {
-      ref: x.setFloating,
+      ref: f.setFloating,
       ...g(),
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": N,
-      className: c(
+      className: i(
         mr,
-        xr[f],
-        o && fr,
-        s
+        xr[m],
+        o && pr,
+        a
       ),
       children: [
-        /* @__PURE__ */ m("div", { className: pr, children: [
-          w(t),
+        /* @__PURE__ */ p("div", { className: fr, children: [
+          w(n),
           /* @__PURE__ */ r(
-            ar,
+            sr,
             {
               ariaLabel: "Close dialog",
-              onClose: (b) => i?.(b)
+              onClose: (b) => c?.(b)
             }
           )
         ] }),
@@ -960,59 +960,59 @@ const gr = "flex justify-end gap-2 px-6 py-4", br = "text-secondary dial-small-1
     confirmVariant: v.Danger,
     cancelVariant: v.Secondary
   }
-}, Mr = ({
+}, Wr = ({
   title: e,
-  description: t,
-  descriptionCssClass: n,
-  open: s = !1,
-  confirmLabel: a,
+  description: n,
+  descriptionCssClass: t,
+  open: a = !1,
+  confirmLabel: s,
   cancelLabel: l = yr,
   isLoading: o = !1,
   disableConfirmButton: u = !1,
   cssClass: d,
-  confirmClassName: i,
-  onClose: f,
-  onConfirm: x,
+  confirmClassName: c,
+  onClose: m,
+  onConfirm: f,
   onCancel: h,
-  children: p,
+  children: x,
   dividers: y = !1,
   variant: g = B.Info,
-  size: N = R.Sm
+  size: N = S.Sm
 }) => {
-  const w = o ? null : /* @__PURE__ */ m("div", { className: gr, children: [
+  const w = o ? null : /* @__PURE__ */ p("div", { className: gr, children: [
     /* @__PURE__ */ r(
-      P,
+      A,
       {
         variant: v.Secondary,
         title: l,
-        onClick: () => h ? h() : f?.()
+        onClick: () => h ? h() : m?.()
       }
     ),
     /* @__PURE__ */ r(
-      P,
+      A,
       {
         variant: H[g].confirmVariant,
-        cssClass: i,
-        title: a,
+        cssClass: c,
+        title: s,
         disable: u,
-        onClick: () => x()
+        onClick: () => f()
       }
     )
-  ] }), b = S(() => o ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r(He, { size: 50 }) }) : p ?? (t ? /* @__PURE__ */ r(
+  ] }), b = D(() => o ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r(He, { size: 50 }) }) : x ?? (n ? /* @__PURE__ */ r(
     "div",
     {
-      className: c(br, n),
-      children: t
+      className: i(br, t),
+      children: n
     }
-  ) : null), [p, t, o, n]);
+  ) : null), [x, n, o, t]);
   return /* @__PURE__ */ r(
     hr,
     {
-      open: s,
+      open: a,
       title: e,
-      cssClass: c(H[g].container, d),
+      cssClass: i(H[g].container, d),
       dividers: y,
-      onClose: () => f?.(),
+      onClose: () => m?.(),
       footer: w,
       size: N,
       children: b()
@@ -1021,108 +1021,108 @@ const gr = "flex justify-end gap-2 px-6 py-4", br = "text-secondary dial-small-1
 }, Cr = ({ onClick: e }) => /* @__PURE__ */ r(
   ge,
   {
-    ...F,
+    ...E,
     className: "text-primary",
     onClick: e
   }
-), vr = ({ onClick: e }) => /* @__PURE__ */ r(be, { ...F, className: "text-primary", onClick: e }), Nr = ({ ...e }) => {
-  const [t, n] = E(!1), s = S((a) => {
-    n(a);
+), vr = ({ onClick: e }) => /* @__PURE__ */ r(be, { ...E, className: "text-primary", onClick: e }), Nr = ({ ...e }) => {
+  const [n, t] = T(!1), a = D((s) => {
+    t(s);
   }, []);
   return /* @__PURE__ */ r(
     z,
     {
-      type: t ? "text" : "password",
+      type: n ? "text" : "password",
       ...e,
-      iconAfter: t ? /* @__PURE__ */ r(Cr, { onClick: () => s(!1) }) : /* @__PURE__ */ r(vr, { onClick: () => s(!0) })
+      iconAfter: n ? /* @__PURE__ */ r(Cr, { onClick: () => a(!1) }) : /* @__PURE__ */ r(vr, { onClick: () => a(!0) })
     }
   );
-}, Wr = ({
+}, _r = ({
   fieldTitle: e,
-  optional: t,
-  elementCssClass: n,
-  elementId: s,
-  errorText: a,
+  optional: n,
+  elementCssClass: t,
+  elementId: a,
+  errorText: s,
   ...l
-}) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
+}) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ r(
-    V,
+    j,
     {
       fieldTitle: e,
-      optional: t,
-      htmlFor: s
+      optional: n,
+      htmlFor: a
     }
   ),
   /* @__PURE__ */ r(
     Nr,
     {
-      cssClass: n,
-      elementId: s,
-      invalid: !!a,
+      cssClass: t,
+      elementId: a,
+      invalid: !!s,
       ...l
     }
   ),
-  /* @__PURE__ */ r(_, { errorText: a })
+  /* @__PURE__ */ r(_, { errorText: s })
 ] });
-var j = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(j || {});
+var V = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(V || {});
 const wr = {
-  [j.Small]: {
+  [V.Small]: {
     textClass: "text-xs px-1",
     containerClass: "px-[6px] py-1 h-[22px]",
     iconSize: 10,
     iconStroke: 1
   },
-  [j.Base]: {
+  [V.Base]: {
     textClass: "text-sm px-2",
     containerClass: "px-3 py-2 h-[38px]",
     iconSize: 18,
     iconStroke: 1.5
   }
-}, _r = ({
+}, Hr = ({
   elementId: e,
-  value: t,
-  placeholder: n,
-  disabled: s,
-  readonly: a,
+  value: n,
+  placeholder: t,
+  disabled: a,
+  readonly: s,
   invalid: l,
   cssClass: o,
   containerCssClass: u,
   onChange: d,
-  size: i = j.Base
+  size: c = V.Base
 }) => {
-  const [f, x] = E(t || "");
-  ke(() => {
-    x(t || "");
-  }, [t]);
-  const h = S(
+  const [m, f] = T(n || "");
+  Ie(() => {
+    f(n || "");
+  }, [n]);
+  const h = D(
     (g) => {
-      x(g), d?.(g);
+      f(g), d?.(g);
     },
     [d]
-  ), p = wr[i], y = S(() => {
+  ), x = wr[c], y = D(() => {
     h("");
   }, [h]);
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: c(
+      className: i(
         "dial-input flex flex-row items-center justify-between",
         l && "dial-input-error",
-        s && "dial-input-disable",
-        a && "dial-input-readonly",
-        p.containerClass,
+        a && "dial-input-disable",
+        s && "dial-input-readonly",
+        x.containerClass,
         u
       ),
       children: [
         /* @__PURE__ */ r(
-          D,
+          k,
           {
-            className: c(s ? "text-secondary" : "text-primary"),
+            className: i(a ? "text-secondary" : "text-primary"),
             icon: /* @__PURE__ */ r(
               ye,
               {
-                size: p.iconSize,
-                stroke: p.iconStroke
+                size: x.iconSize,
+                stroke: x.iconStroke
               }
             )
           }
@@ -1133,27 +1133,27 @@ const wr = {
             id: e,
             type: "text",
             autoComplete: "off",
-            placeholder: n,
-            value: f ?? "",
-            disabled: s,
-            readOnly: a,
-            className: c(
+            placeholder: t,
+            value: m ?? "",
+            disabled: a,
+            readOnly: s,
+            className: i(
               "border-0 bg-transparent w-full",
               o,
-              p.textClass
+              x.textClass
             ),
-            onChange: (g) => !a && h(g.currentTarget.value)
+            onChange: (g) => !s && h(g.currentTarget.value)
           }
         ),
-        f && !a && !s && /* @__PURE__ */ r(
-          D,
+        m && !s && !a && /* @__PURE__ */ r(
+          k,
           {
             className: "text-primary cursor-pointer",
             icon: /* @__PURE__ */ r(
               W,
               {
-                size: p.iconSize,
-                stroke: p.iconStroke,
+                size: x.iconSize,
+                stroke: x.iconStroke,
                 onClick: y,
                 "aria-label": "Clear search",
                 role: "button"
@@ -1164,39 +1164,119 @@ const wr = {
       ]
     }
   );
+}, Dr = ({ selectedItems: e, listCssClass: n, listElementCssClass: t }) => !!e?.length && /* @__PURE__ */ r(
+  "ul",
+  {
+    className: i(
+      "flex-row items-center truncate flex-wrap",
+      "flex gap-x-2 gap-y-1",
+      n
+    ),
+    children: e?.map((a) => /* @__PURE__ */ r(
+      "li",
+      {
+        className: i([
+          "tiny bg-layer-3 rounded p-1 border border-primary max-w-[200px] truncate",
+          t
+        ]),
+        children: /* @__PURE__ */ r(F, { tooltip: a, children: /* @__PURE__ */ r(
+          "button",
+          {
+            "aria-label": "autocomplete-action",
+            type: "button",
+            className: "truncate w-full",
+            children: a
+          }
+        ) })
+      },
+      a
+    ))
+  }
+), $r = ({
+  placeholder: e = "",
+  selectedItems: n = [],
+  updateSelected: t,
+  listCssClass: a,
+  listElementCssClass: s,
+  containerCssClass: l,
+  inputCssClass: o
+}) => {
+  const [u, d] = T(""), 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));
+    },
+    [n, t, u]
+  ), m = D(
+    (f) => {
+      d(f.target.value);
+    },
+    [d]
+  );
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: i([
+        "dial-input px-3 py-2 flex flex-row items-center flex-wrap w-fit gap-2",
+        l
+      ]),
+      children: [
+        /* @__PURE__ */ r(
+          Dr,
+          {
+            selectedItems: n,
+            listCssClass: a,
+            listElementCssClass: s
+          }
+        ),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            type: "text",
+            value: u,
+            className: i(["border-0 bg-transparent p-0", o]),
+            placeholder: n?.length ? "" : e,
+            onKeyDown: c,
+            onChange: m
+          }
+        )
+      ]
+    }
+  );
 };
 export {
-  k as AlertVariant,
+  R as AlertVariant,
   v as ButtonVariant,
   B as ConfirmationPopupVariant,
-  Fr as DialAlert,
-  P as DialButton,
-  Tr as DialCheckbox,
-  ar as DialCloseButton,
-  Ar as DialCollapsibleSidebar,
-  Mr as DialConfirmationPopup,
+  Er as DialAlert,
+  $r as DialAutocompleteInput,
+  Dr as DialAutocompleteInputValue,
+  A as DialButton,
+  Fr as DialCheckbox,
+  sr as DialCloseButton,
+  Or as DialCollapsibleSidebar,
+  Wr as DialConfirmationPopup,
   _ as DialErrorText,
-  V as DialFieldLabel,
-  D as DialIcon,
+  j as DialFieldLabel,
+  k as DialIcon,
   z as DialInput,
-  Or as DialLabelledText,
+  zr as DialLabelledText,
   He as DialLoader,
   Lr as DialNoDataContent,
-  zr as DialNumberInputField,
+  Br as DialNumberInputField,
   Nr as DialPasswordInput,
-  Wr as DialPasswordInputField,
+  _r as DialPasswordInputField,
   hr as DialPopup,
   Je as DialRadioButton,
-  Pr as DialRadioGroup,
-  _r as DialSearch,
-  Er as DialSteps,
-  Vr as DialSwitch,
+  Ar as DialRadioGroup,
+  Hr as DialSearch,
+  Pr as DialSteps,
+  Mr as DialSwitch,
   jr as DialTextAreaField,
-  Br as DialTextInputField,
+  Vr as DialTextInputField,
   lr as DialTextarea,
-  L as DialTooltip,
-  R as PopupSize,
+  F as DialTooltip,
+  S as PopupSize,
   M as RadioGroupOrientation,
-  j as SearchSize,
+  V as SearchSize,
   C as StepStatus
 };