@epam/ai-dial-ui-kit 0.3.0-rc.1 → 0.3.0-rc.3

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

@@ -1,226 +1,226 @@
-import { jsx as r, jsxs as m, Fragment as Z } from "react/jsx-runtime";
-import i from "classnames";
-import { IconCircleCheck as me, IconAlertTriangle as fe, IconAlertCircle as he, IconInfoCircle as xe, IconX as $, IconMinus as ge, IconCheck as Y, IconExclamationCircle as ye, IconClipboardX as Ce, IconChevronsLeft as be, IconChevronsRight as ve, IconEyeOff as we, IconEye as Ne, IconSearch as ke } from "@tabler/icons-react";
-import * as N from "react";
-import { createContext as De, useState as S, useRef as J, useMemo as Ie, useContext as Re, forwardRef as ee, isValidElement as Se, cloneElement as Ee, useCallback as E, useEffect as re } from "react";
-import { useFloating as te, offset as Le, flip as Te, shift as Fe, arrow as Ve, autoUpdate as Ae, useHover as je, useFocus as Me, useDismiss as ne, useRole as ae, useInteractions as se, useMergeRefs as oe, FloatingPortal as le, FloatingArrow as Pe, FloatingOverlay as Oe, FloatingFocusManager as We } from "@floating-ui/react";
-import { createPortal as ze } from "react-dom";
-const W = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "text-error dial-tiny mt-1", children: e }), z = ({
+import { jsx as r, jsxs as p, Fragment as Z } from "react/jsx-runtime";
+import l from "classnames";
+import { IconCircleCheck as Ae, IconAlertTriangle as Ve, IconAlertCircle as Oe, IconInfoCircle as je, IconX as J, IconMinus as We, IconCheck as ce, IconExclamationCircle as Be, IconClipboardX as ze, IconChevronsLeft as He, IconChevronsRight as _e, IconEyeOff as $e, IconEye as Ge, IconSearch as Ke } from "@tabler/icons-react";
+import * as L from "react";
+import { createContext as Ue, useState as F, useRef as de, useMemo as Ze, useContext as Xe, forwardRef as ue, isValidElement as qe, cloneElement as Qe, useCallback as R, useEffect as ee, useId as Ye } from "react";
+import { useFloating as re, offset as pe, flip as fe, shift as me, arrow as Je, autoUpdate as he, useHover as xe, useFocus as er, useDismiss as ne, useRole as te, useInteractions as se, useMergeRefs as ge, FloatingPortal as ae, FloatingArrow as rr, FloatingOverlay as nr, FloatingFocusManager as Ce, autoPlacement as tr, size as sr, useClick as ar } from "@floating-ui/react";
+import { createPortal as or } from "react-dom";
+const K = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "text-error dial-tiny mt-1", children: e }), $ = ({
   fieldTitle: e,
-  htmlFor: t,
-  optional: n,
-  optionalText: a,
-  cssClass: s
-}) => e ? /* @__PURE__ */ m(
+  htmlFor: n,
+  optional: t,
+  optionalText: s,
+  cssClass: a
+}) => e ? /* @__PURE__ */ p(
   "label",
   {
-    className: i(
+    className: l(
       "dial-tiny text-secondary",
-      s,
-      !s?.includes("mb") && "mb-2"
+      a,
+      !a?.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: a ?? "(Optional)" })
+      t && /* @__PURE__ */ r("span", { className: "ml-1", children: s ?? "(Optional)" })
     ]
   }
-) : null, R = ({ icon: e, className: t }) => e ? /* @__PURE__ */ r("span", { className: i("flex-shrink-0", t), children: e }) : null;
-var I = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e.Danger = "danger", e))(I || {});
-const Be = {
-  [I.Primary]: "dial-primary-button",
-  [I.Secondary]: "dial-secondary-button",
-  [I.Tertiary]: "dial-tertiary-button",
-  [I.Danger]: "dial-danger-button"
-}, j = ({
+) : null, M = ({ icon: e, className: n }) => e ? /* @__PURE__ */ r("span", { className: l("flex-shrink-0", n), children: e }) : null;
+var D = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e.Danger = "danger", e))(D || {});
+const lr = {
+  [D.Primary]: "dial-primary-button",
+  [D.Secondary]: "dial-secondary-button",
+  [D.Tertiary]: "dial-tertiary-button",
+  [D.Danger]: "dial-danger-button"
+}, V = ({
   title: e,
-  variant: t,
-  cssClass: n,
-  textCssClass: a,
-  ref: s,
+  variant: n,
+  cssClass: t,
+  textCssClass: s,
+  ref: a,
   onClick: o,
   disable: c,
   iconAfter: u,
   iconBefore: d,
-  hideTitleOnMobile: l,
-  ariaLabel: p
+  hideTitleOnMobile: i,
+  ariaLabel: f
 }) => {
-  const f = i(
+  const m = l(
     "dial-small-semi",
     u ? "mr-2" : "",
     d ? "ml-2" : "",
-    l ? "hidden sm:inline" : "inline",
-    a
-  ), x = i(
-    t && Be[t],
-    n,
+    i ? "hidden sm:inline" : "inline",
+    s
+  ), g = l(
+    n && lr[n],
+    t,
     "focus-visible:outline outline-offset-0"
   );
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ p(
     "button",
     {
-      ref: s,
+      ref: a,
       type: "button",
-      className: x,
-      onClick: (h) => o?.(h),
+      className: g,
+      onClick: (x) => o?.(x),
       disabled: c,
-      "aria-label": e || p,
+      "aria-label": e || f,
       children: [
-        /* @__PURE__ */ r(R, { icon: d }),
-        e && /* @__PURE__ */ r("span", { className: f, children: e }),
-        /* @__PURE__ */ r(R, { icon: u })
+        /* @__PURE__ */ r(M, { icon: d }),
+        e && /* @__PURE__ */ r("span", { className: m, children: e }),
+        /* @__PURE__ */ r(M, { icon: u })
       ]
     }
   );
 };
-var F = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(F || {});
-const He = {
-  info: /* @__PURE__ */ r(xe, { size: 24, stroke: 2 }),
-  error: /* @__PURE__ */ r(he, { size: 24, stroke: 2 }),
-  warning: /* @__PURE__ */ r(fe, { size: 24, stroke: 2 }),
-  success: /* @__PURE__ */ r(me, { size: 24, stroke: 2 })
-}, _e = {
-  [F.Info]: "bg-info border-info text-info",
-  [F.Success]: "bg-success border-success text-success",
-  [F.Warning]: "bg-warning border-warning text-warning",
-  [F.Error]: "bg-error border-error text-error"
-}, Ke = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", Mr = ({
-  variant: e = F.Info,
-  message: t,
-  cssClass: n,
-  closable: a = !1,
-  onClose: s
-}) => /* @__PURE__ */ m(
+var B = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(B || {});
+const ir = {
+  info: /* @__PURE__ */ r(je, { size: 24, stroke: 2 }),
+  error: /* @__PURE__ */ r(Oe, { size: 24, stroke: 2 }),
+  warning: /* @__PURE__ */ r(Ve, { size: 24, stroke: 2 }),
+  success: /* @__PURE__ */ r(Ae, { size: 24, stroke: 2 })
+}, cr = {
+  [B.Info]: "bg-info border-info text-info",
+  [B.Success]: "bg-success border-success text-success",
+  [B.Warning]: "bg-warning border-warning text-warning",
+  [B.Error]: "bg-error border-error text-error"
+}, dr = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", dn = ({
+  variant: e = B.Info,
+  message: n,
+  cssClass: t,
+  closable: s = !1,
+  onClose: a
+}) => /* @__PURE__ */ p(
   "div",
   {
     role: "alert",
-    className: i(
-      Ke,
-      _e[e],
-      n
+    className: l(
+      dr,
+      cr[e],
+      t
     ),
     children: [
-      /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ r(R, { icon: He[e] }),
-        /* @__PURE__ */ r("div", { className: "text-primary", children: t })
+      /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ r(M, { icon: ir[e] }),
+        /* @__PURE__ */ r("div", { className: "text-primary", children: n })
       ] }),
-      a && /* @__PURE__ */ r(
-        j,
+      s && /* @__PURE__ */ r(
+        V,
         {
           cssClass: "ml-2 text-secondary hover:text-primary",
           ariaLabel: "Close alert",
-          iconBefore: /* @__PURE__ */ r($, { size: 16 }),
-          onClick: (o) => s?.(o)
+          iconBefore: /* @__PURE__ */ r(J, { size: 16 }),
+          onClick: (o) => a?.(o)
         }
       )
     ]
   }
-), $e = "flex items-center justify-center text-secondary", Ge = "shrink-0 grow-0 basis-auto animate-spin-steps", Ze = (e) => /* @__PURE__ */ N.createElement("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ N.createElement("path", { d: "M24 39V46.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { opacity: 0.4, d: "M9 24H1.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { opacity: 0.5, d: "M8.0918 8.0918L13.3994 13.3994", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { opacity: 0.6, d: "M24 1.5V9", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.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__ */ N.createElement("path", { opacity: 0.8, d: "M46.5 24H39", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { opacity: 0.9, d: "M34.6055 34.6055L39.9082 39.9082", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { opacity: 0.3, d: "M13.3936 34.6055L8.08594 39.9131", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" })), Ue = ({
+), ur = "flex items-center justify-center text-secondary", pr = "shrink-0 grow-0 basis-auto animate-spin-steps", fr = (e) => /* @__PURE__ */ L.createElement("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ L.createElement("path", { d: "M24 39V46.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ L.createElement("path", { opacity: 0.4, d: "M9 24H1.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ L.createElement("path", { opacity: 0.5, d: "M8.0918 8.0918L13.3994 13.3994", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ L.createElement("path", { opacity: 0.6, d: "M24 1.5V9", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ L.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__ */ L.createElement("path", { opacity: 0.8, d: "M46.5 24H39", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ L.createElement("path", { opacity: 0.9, d: "M34.6055 34.6055L39.9082 39.9082", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ L.createElement("path", { opacity: 0.3, d: "M13.3936 34.6055L8.08594 39.9131", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" })), mr = ({
   size: e = 18,
-  cssClass: t,
-  iconClass: n,
-  fullWidth: a = !0,
-  ariaLabel: s = "Loading"
+  cssClass: n,
+  iconClass: t,
+  fullWidth: s = !0,
+  ariaLabel: a = "Loading"
 }) => /* @__PURE__ */ r(
   "div",
   {
     role: "status",
-    "aria-label": s,
-    className: i({
-      [$e]: !0,
-      "w-full h-full": a,
-      [t || ""]: !!t
+    "aria-label": a,
+    className: l({
+      [ur]: !0,
+      "w-full h-full": s,
+      [n || ""]: !!n
     }),
     children: /* @__PURE__ */ r(
-      R,
+      M,
       {
         icon: /* @__PURE__ */ r(
-          Ze,
+          fr,
           {
             width: e,
             height: e,
-            className: i(Ge, n),
+            className: l(pr, t),
             role: "img"
           }
         )
       }
     )
   }
-), Xe = 7, qe = 2, ie = De(null), ce = () => {
-  const e = Re(ie);
+), hr = 7, xr = 2, ye = Ue(null), be = () => {
+  const e = Xe(ye);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
   return e;
-}, Qe = ({
+}, gr = ({
   initialOpen: e = !1,
-  placement: t = "bottom",
-  isTriggerClickable: n = !1,
-  open: a,
-  onOpenChange: s
+  placement: n = "bottom",
+  isTriggerClickable: t = !1,
+  open: s,
+  onOpenChange: a
 } = {}) => {
-  const [o, c] = S(e), u = J(null), d = a ?? o, l = s ?? c, p = te({
-    placement: t,
+  const [o, c] = F(e), u = de(null), d = s ?? o, i = a ?? c, f = re({
+    placement: n,
     open: d,
-    onOpenChange: l,
-    whileElementsMounted: Ae,
+    onOpenChange: i,
+    whileElementsMounted: he,
     middleware: [
-      Le(Xe + qe),
-      Te({
-        crossAxis: t.includes("-"),
+      pe(hr + xr),
+      fe({
+        crossAxis: n.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5
       }),
-      Fe({ padding: 5 }),
-      Ve({
+      me({ padding: 5 }),
+      Je({
         element: u
       })
     ]
-  }), f = je(p.context, {
+  }), m = xe(f.context, {
     move: !1,
-    enabled: a == null,
-    mouseOnly: n,
+    enabled: s == null,
+    mouseOnly: t,
     delay: { open: 500, close: 0 }
-  }), x = Me(p.context, {
-    enabled: a == null
-  }), h = ne(p.context), C = ae(p.context, { role: "tooltip" }), g = se([f, x, h, C]);
-  return Ie(
+  }), g = er(f.context, {
+    enabled: s == null
+  }), x = ne(f.context), v = te(f.context, { role: "tooltip" }), y = se([m, g, x, v]);
+  return Ze(
     () => ({
       open: d,
-      setOpen: l,
+      setOpen: i,
       arrowRef: u,
-      ...g,
-      ...p
+      ...y,
+      ...f
     }),
-    [d, l, g, p]
+    [d, i, y, f]
   );
-}, Ye = ({
+}, Cr = ({
   children: e,
-  ...t
+  ...n
 }) => {
-  const n = Qe(t);
-  return /* @__PURE__ */ r(ie.Provider, { value: n, children: e });
-}, Je = ee(function({ style: t, ...n }, a) {
-  const s = ce(), o = oe([s.refs.setFloating, a]);
-  return s.open ? /* @__PURE__ */ r(le, { id: "tooltip-portal", children: /* @__PURE__ */ m(
+  const t = gr(n);
+  return /* @__PURE__ */ r(ye.Provider, { value: t, children: e });
+}, yr = ue(function({ style: n, ...t }, s) {
+  const a = be(), o = ge([a.refs.setFloating, s]);
+  return a.open ? /* @__PURE__ */ r(ae, { id: "tooltip-portal", children: /* @__PURE__ */ p(
     "div",
     {
       ref: o,
       style: {
-        ...s.floatingStyles,
-        ...t
+        ...a.floatingStyles,
+        ...n
       },
-      ...s.getFloatingProps(n),
-      className: i(
+      ...a.getFloatingProps(t),
+      className: l(
         "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(n).className
+        a.getFloatingProps(t).className
       ),
       children: [
-        n.children,
+        t.children,
         /* @__PURE__ */ r(
-          Pe,
+          rr,
           {
-            ref: s.arrowRef,
-            context: s.context,
+            ref: a.arrowRef,
+            context: a.context,
             fill: "currentColor",
             strokeWidth: 1,
             className: "stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"
@@ -229,142 +229,144 @@ const He = {
       ]
     }
   ) }) : null;
-}), er = ee(function({ children: t, asChild: n = !1, ...a }, s) {
-  const o = ce(), u = t && typeof t == "object" && "ref" in t && t.ref !== void 0 ? t.ref : void 0, d = oe([o.refs.setReference, s, u]);
-  return n && Se(t) ? Ee(
-    t,
+}), br = ue(function({ children: n, asChild: t = !1, ...s }, a) {
+  const o = be(), u = n && typeof n == "object" && "ref" in n && n.ref !== void 0 ? n.ref : void 0, d = ge([o.refs.setReference, a, u]);
+  return t && qe(n) ? Qe(
+    n,
     o.getReferenceProps({
       ref: d,
-      ...a,
-      ...t.props
+      ...s,
+      ...n.props
     })
   ) : /* @__PURE__ */ r(
     "span",
     {
       ref: d,
-      ...o.getReferenceProps(a),
-      className: a.className ?? "dial-tooltip-trigger text-left",
-      children: t
+      ...o.getReferenceProps(s),
+      className: s.className ?? "dial-tooltip-trigger text-left",
+      children: n
     }
   );
-}), T = ({
+}), O = ({
   hideTooltip: e,
-  tooltip: t,
-  children: n,
-  triggerClassName: a,
-  contentClassName: s,
+  tooltip: n,
+  children: t,
+  triggerClassName: s,
+  contentClassName: a,
   ...o
-}) => /* @__PURE__ */ m(Ye, { ...o, children: [
-  /* @__PURE__ */ r(er, { className: i(a, "truncate"), children: n }),
+}) => /* @__PURE__ */ p(Cr, { ...o, children: [
+  /* @__PURE__ */ r(br, { className: l(s, "truncate"), children: t }),
   /* @__PURE__ */ r(
-    Je,
+    yr,
     {
-      className: i(
+      className: l(
         "text-primary",
-        s,
+        a,
         "max-w-[300px]",
-        (e || !t) && "hidden"
+        (e || !n) && "hidden"
       ),
-      children: t
+      children: n
     }
   )
-] }), V = 18, M = {
-  size: V,
+] }), z = 18, _ = {
+  size: z,
   stroke: 2
-}, Pr = ({
+}, un = ({
   label: e,
-  id: t,
-  checked: n,
-  indeterminate: a,
-  disabled: s,
+  id: n,
+  checked: t,
+  indeterminate: s,
+  disabled: a,
   ariaLabel: o,
   onChange: c
 }) => {
-  const u = E(
-    (p) => {
-      p.stopPropagation(), c?.(p.target.checked, t);
+  const u = R(
+    (m) => {
+      c?.(m.target.checked, n);
     },
-    [c, t]
-  ), d = i(
+    [c, n]
+  ), d = l(
     "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'}`,
-    s ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : ""
-  ), l = i(
+    `${t || s ? "" : '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 = l(
     "mr-2 border rounded",
-    s ? "bg-layer-4 border-icon-secondary" : ""
+    a ? "bg-layer-4 border-icon-secondary" : ""
   );
-  return /* @__PURE__ */ m("label", { className: d, htmlFor: t, children: [
-    n && (a ? /* @__PURE__ */ r(ge, { className: l, ...M }) : /* @__PURE__ */ r(Y, { className: l, ...M })),
-    e && /* @__PURE__ */ r(T, { 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: [
+    s ? /* @__PURE__ */ r(We, { className: i, ..._ }) : t ? /* @__PURE__ */ r(ce, { className: i, ..._ }) : null,
+    e && /* @__PURE__ */ r(O, { 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",
+        role: "checkbox",
+        name: n,
         onChange: u,
-        id: t,
-        checked: n,
-        "aria-checked": a ? "mixed" : n,
-        "aria-disabled": s || void 0,
+        id: n,
+        checked: t,
+        "aria-checked": s ? "mixed" : t,
+        "aria-disabled": a || void 0,
         "aria-label": e ? void 0 : o,
         className: "invisible w-0 h-0"
       }
     )
   ] });
 };
-var w = /* @__PURE__ */ ((e) => (e.VALID = "valid", e.ERROR = "error", e))(w || {});
-const rr = (e, t) => {
-  if (t === e.id)
+var I = /* @__PURE__ */ ((e) => (e.VALID = "valid", e.ERROR = "error", e))(I || {});
+const vr = (e, n) => {
+  if (n === e.id)
     switch (e.status) {
-      case w.VALID:
+      case I.VALID:
         return "border-accent-secondary text-primary";
-      case w.ERROR:
+      case I.ERROR:
         return "border-red-900 text-primary";
       default:
         return "border-accent-primary text-primary";
     }
   switch (e.status) {
-    case w.VALID:
+    case I.VALID:
       return "border-primary text-white";
-    case w.ERROR:
+    case I.ERROR:
       return "border-red-900 text-error";
     default:
       return "border-primary text-secondary";
   }
-}, tr = (e, t) => {
-  if (t === e.id)
+}, wr = (e, n) => {
+  if (n === e.id)
     switch (e.status) {
-      case w.VALID:
+      case I.VALID:
         return "bg-accent-secondary";
-      case w.ERROR:
+      case I.ERROR:
         return "bg-red-400";
       default:
         return "bg-accent-primary";
     }
   switch (e.status) {
-    case w.VALID:
+    case I.VALID:
       return "bg-accent-secondary";
-    case w.ERROR:
+    case I.ERROR:
       return "bg-red-400";
     default:
       return "bg-layer-4";
   }
-}, nr = ({
+}, Nr = ({
   step: e,
-  index: t,
-  currentStep: n,
-  onChangeStep: a
+  index: n,
+  currentStep: t,
+  onChangeStep: s
 }) => {
-  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", c = () => n === e.id && e.status === w.ERROR ? /* @__PURE__ */ r(ye, { stroke: 2, size: 16 }) : n !== e.id && e.status === w.VALID ? /* @__PURE__ */ r(Y, { stroke: 2, size: 16 }) : t + 1;
-  return /* @__PURE__ */ m(
+  const a = "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", c = () => t === e.id && e.status === I.ERROR ? /* @__PURE__ */ r(Be, { stroke: 2, size: 16 }) : t !== e.id && e.status === I.VALID ? /* @__PURE__ */ r(ce, { stroke: 2, size: 16 }) : n + 1;
+  return /* @__PURE__ */ p(
     "button",
     {
-      className: i(s, rr(e, n)),
-      onClick: () => a(e.id),
+      className: l(a, vr(e, t)),
+      onClick: () => s(e.id),
       children: [
         /* @__PURE__ */ r(
           "span",
           {
-            className: i(o, tr(e, n)),
+            className: l(o, wr(e, t)),
             children: c()
           }
         ),
@@ -372,149 +374,149 @@ const rr = (e, t) => {
       ]
     }
   );
-}, Or = ({
+}, pn = ({
   steps: e,
-  currentStep: t,
-  onChangeStep: n
+  currentStep: n,
+  onChangeStep: t
 }) => {
-  const a = (s) => {
-    const o = e.findIndex((u) => u.id === t), c = e.findIndex((u) => u.id === s);
-    (s !== t && e[o].status === w.VALID || c < o) && n(s);
+  const s = (a) => {
+    const o = e.findIndex((u) => u.id === n), c = e.findIndex((u) => u.id === a);
+    (a !== n && e[o].status === I.VALID || c < o) && t(a);
   };
-  return /* @__PURE__ */ r("div", { id: "steps", className: "flex gap-x-3", children: e.map((s, o) => /* @__PURE__ */ r(
-    nr,
+  return /* @__PURE__ */ r("div", { id: "steps", className: "flex gap-x-3", children: e.map((a, o) => /* @__PURE__ */ r(
+    Nr,
     {
-      currentStep: t,
-      onChangeStep: a,
-      step: s,
+      currentStep: n,
+      onChangeStep: s,
+      step: a,
       index: o
     },
-    s.id
+    a.id
   )) });
-}, ar = ({
+}, kr = ({
   name: e,
-  value: t,
-  title: n,
-  description: a,
-  checked: s = !1,
+  value: n,
+  title: t,
+  description: s,
+  checked: a = !1,
   inputId: o,
   cssClass: c,
   labelCssClass: u,
   disabled: d,
-  onChange: l,
-  descriptionCssClass: p
+  onChange: i,
+  descriptionCssClass: f
 }) => {
-  const f = `${o}-desc`, x = i(
+  const m = `${o}-desc`, g = l(
     "dial-small cursor-pointer",
     d ? "text-secondary" : "text-primary",
     u
-  ), h = i(
+  ), x = l(
     "cursor-pointer dial-input-radio",
-    n && "mr-2",
+    t && "mr-2",
     c
-  ), C = i("flex flex-col", !!a && "mb-2"), g = i(
+  ), v = l("flex flex-col", !!s && "mb-2"), y = l(
     "dial-tiny mt-2 ml-[26px] text-secondary",
-    p
+    f
   );
-  return /* @__PURE__ */ m("div", { className: C, children: [
-    /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
+  return /* @__PURE__ */ p("div", { className: v, children: [
+    /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ r(
         "input",
         {
           type: "radio",
           id: o,
           name: e,
-          value: t,
-          checked: s,
+          value: n,
+          checked: a,
           disabled: d,
-          "aria-describedby": s && a ? f : void 0,
-          className: h,
-          onChange: (D) => {
-            d || D.target.checked && l?.(t);
+          "aria-describedby": a && s ? m : void 0,
+          className: x,
+          onChange: (N) => {
+            d || N.target.checked && i?.(n);
           }
         }
       ),
-      n ? /* @__PURE__ */ r("label", { className: x, htmlFor: o, children: n }) : null
+      t ? /* @__PURE__ */ r("label", { className: g, htmlFor: o, children: t }) : null
     ] }),
-    s && a && /* @__PURE__ */ r("div", { id: f, className: g, children: a })
+    a && s && /* @__PURE__ */ r("div", { id: m, className: y, children: s })
   ] });
 };
-var U = /* @__PURE__ */ ((e) => (e.Row = "Row", e.Column = "Column", e))(U || {});
-const sr = "flex flex-col gap-2", or = "flex", lr = "pb-1 mt-2", ir = {
-  [U.Column]: "flex-col gap-y-3",
-  [U.Row]: "flex-row gap-x-6"
-}, Wr = ({
+var X = /* @__PURE__ */ ((e) => (e.Row = "Row", e.Column = "Column", e))(X || {});
+const Dr = "flex flex-col gap-2", Ir = "flex", Rr = "pb-1 mt-2", Er = {
+  [X.Column]: "flex-col gap-y-3",
+  [X.Row]: "flex-row gap-x-6"
+}, Sr = ({
   fieldTitle: e,
-  radioCssClass: t,
-  labelCssClass: n,
-  disabled: a,
-  elementId: s,
+  radioCssClass: n,
+  labelCssClass: t,
+  disabled: s,
+  elementId: a,
   radioButtons: o,
   activeRadioButton: c,
   orientation: u,
   onChange: d
-}) => /* @__PURE__ */ m("div", { className: sr, children: [
-  e && /* @__PURE__ */ r(z, { fieldTitle: e, htmlFor: s }),
+}) => /* @__PURE__ */ p("div", { className: Dr, children: [
+  e && /* @__PURE__ */ r($, { fieldTitle: e, htmlFor: a }),
   /* @__PURE__ */ r(
     "div",
     {
       role: "radiogroup",
       "aria-label": e,
-      "aria-disabled": a || void 0,
-      className: i(
-        or,
-        ir[u]
+      "aria-disabled": s || void 0,
+      className: l(
+        Ir,
+        Er[u]
       ),
-      children: o.map((l) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
+      children: o.map((i) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ r(
-          ar,
+          kr,
           {
-            name: s,
-            value: l.id,
-            inputId: l.id,
-            disabled: a,
-            cssClass: t,
-            labelCssClass: n,
-            title: l.name,
-            checked: l.id === c,
-            onChange: () => d(l.id)
+            name: a,
+            value: i.id,
+            inputId: i.id,
+            disabled: s,
+            cssClass: n,
+            labelCssClass: t,
+            title: i.name,
+            checked: i.id === c,
+            onChange: () => d(i.id)
           }
         ),
-        l.id === c && l.content ? /* @__PURE__ */ r("div", { className: lr, children: l.content }) : null
-      ] }, l.id))
+        i.id === c && i.content ? /* @__PURE__ */ r("div", { className: Rr, children: i.content }) : null
+      ] }, i.id))
     }
   )
-] }), zr = ({
+] }), fn = ({
   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(Ce, { 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 })
-] }), cr = 60, Br = ({
+  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(ze, { 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 })
+] }), Lr = 60, mn = ({
   containerCssClass: e,
-  children: t,
-  width: n,
-  title: a,
-  iconSize: s = V,
+  children: n,
+  width: t,
+  title: s,
+  iconSize: a = z,
   titleCssClass: o,
   additionalButtons: c
 }) => {
-  const [u, d] = S(n), [l, p] = S(!0), f = i([
+  const [u, d] = F(t), [i, f] = F(!0), m = l([
     "transform rotate-180 [writing-mode:tb-rl]",
-    l && "hidden",
+    i && "hidden",
     o
-  ]), x = i([
+  ]), g = l([
     "flex flex-row gap-2 cursor-pointer text-secondary",
-    l ? "justify-end" : "justify-center"
-  ]), h = () => {
-    d(l ? cr : n), p(!l);
+    i ? "justify-end" : "justify-center"
+  ]), x = () => {
+    d(i ? Lr : t), f(!i);
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: i([
+      className: l([
         "rounded p-4 flex flex-col justify-between overflow-y-auto flex-shrink-0",
         e
       ]),
@@ -523,32 +525,32 @@ const sr = "flex flex-col gap-2", or = "flex", lr = "pb-1 mt-2", ir = {
         /* @__PURE__ */ r(
           "div",
           {
-            className: i([
+            className: l([
               "flex-1 min-h-0 overflow-auto",
-              !l && "hidden"
+              !i && "hidden"
             ]),
-            children: t
+            children: n
           }
         ),
-        /* @__PURE__ */ r("div", { className: f, children: a }),
-        /* @__PURE__ */ m("div", { className: x, children: [
-          l && c,
+        /* @__PURE__ */ r("div", { className: m, children: s }),
+        /* @__PURE__ */ p("div", { className: g, children: [
+          i && c,
           /* @__PURE__ */ r(
-            j,
+            V,
             {
               cssClass: "hover:text-icon-accent-primary",
-              onClick: h,
-              iconBefore: l ? /* @__PURE__ */ r(
-                be,
+              onClick: x,
+              iconBefore: i ? /* @__PURE__ */ r(
+                He,
                 {
-                  size: s,
-                  stroke: M.stroke
+                  size: a,
+                  stroke: _.stroke
                 }
               ) : /* @__PURE__ */ r(
-                ve,
+                _e,
                 {
-                  size: s,
-                  stroke: M.stroke
+                  size: a,
+                  stroke: _.stroke
                 }
               )
             }
@@ -557,85 +559,85 @@ const sr = "flex flex-col gap-2", or = "flex", lr = "pb-1 mt-2", ir = {
       ]
     }
   );
-}, Hr = ({
+}, hn = ({
   label: e,
-  text: t,
-  children: n,
-  postfix: a
-}) => /* @__PURE__ */ m(
+  text: n,
+  children: t,
+  postfix: s
+}) => /* @__PURE__ */ p(
   "div",
   {
-    className: i(
+    className: l(
       "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(T, { triggerClassName: "text-primary", tooltip: t, children: t }),
-        a || null
+      t || /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
+        /* @__PURE__ */ r(O, { triggerClassName: "text-primary", tooltip: n, children: n }),
+        s || null
       ] })
     ]
   }
 );
-var X = /* @__PURE__ */ ((e) => (e.Default = "default", e))(X || {});
-const dr = {
-  [X.Default]: "border-icon-secondary bg-layer-3"
+var oe = /* @__PURE__ */ ((e) => (e.Default = "default", e))(oe || {});
+const Fr = {
+  [oe.Default]: "border-icon-secondary bg-layer-3"
   // TODO: Add other variants here once they are finalized with the UI/UX team
-}, ur = ({
+}, Mr = ({
   tag: e,
-  cssClass: t,
-  remove: n,
-  variant: a = X.Default
+  cssClass: n,
+  remove: t,
+  variant: s = oe.Default
 }) => {
-  const s = dr[a], o = i(
+  const a = Fr[s], o = l(
     "flex items-center gap-1 tiny border rounded p-1 h-[22px] text-primary",
-    t,
-    s
+    n,
+    a
   );
-  return /* @__PURE__ */ m("div", { className: o, children: [
+  return /* @__PURE__ */ p("div", { className: o, children: [
     /* @__PURE__ */ r("span", { children: e }),
-    n && /* @__PURE__ */ r(j, { iconAfter: /* @__PURE__ */ r($, { size: 16 }), onClick: n })
+    t && /* @__PURE__ */ r(V, { iconAfter: /* @__PURE__ */ r(J, { size: 16 }), onClick: t })
   ] }, e);
-}, pr = ({
+}, ve = ({
   ariaLabel: e,
-  cssClass: t,
-  size: n = 24,
-  onClose: a
+  cssClass: n,
+  size: t = 24,
+  onClose: s
 }) => /* @__PURE__ */ r(
-  j,
+  V,
   {
     ariaLabel: e,
-    cssClass: i("text-secondary hover:text-accent-primary", t),
-    onClick: a,
-    iconBefore: /* @__PURE__ */ r($, { size: n })
+    cssClass: l("text-secondary hover:text-accent-primary", n),
+    onClick: s,
+    iconBefore: /* @__PURE__ */ r(J, { size: t })
   }
-), mr = ({
+), Pr = ({
   value: e,
-  textareaId: t,
-  placeholder: n,
-  cssClass: a = "",
-  disabled: s,
+  textareaId: n,
+  placeholder: t,
+  cssClass: s = "",
+  disabled: a,
   invalid: o,
   readonly: c,
   onChange: u
-}) => /* @__PURE__ */ r(T, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
+}) => /* @__PURE__ */ r(O, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
   "textarea",
   {
-    id: t,
-    placeholder: n,
+    id: n,
+    placeholder: t,
     value: e || "",
-    disabled: s,
-    className: i(
+    disabled: a,
+    className: l(
       "dial-textarea dial-input px-3 py-2",
       o ? "dial-input-error" : "",
-      s && "dial-input-disable",
+      a && "dial-input-disable",
       c && "dial-input-readonly",
-      a
+      s
     ),
     onChange: (d) => !c && u?.(d.currentTarget.value)
   }
-) }), fr = [
+) }), Tr = [
   "ArrowLeft",
   "ArrowRight",
   "ArrowUp",
@@ -647,75 +649,75 @@ const dr = {
   "Escape",
   "Home",
   "End"
-], hr = (e, t, n, a) => {
-  if ((t === "number" || n !== void 0 || a !== void 0) && !fr.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (n === void 0 || n < 0)) && !(e.key === "." && t === "number" && !e.currentTarget.value.includes("."))) {
+], Ar = (e, n, t, s) => {
+  if ((n === "number" || t !== void 0 || s !== void 0) && !Tr.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 || a !== void 0) {
+    if (t !== void 0 || s !== void 0) {
       const o = e.currentTarget.value, c = e.currentTarget.selectionStart || 0, u = o.slice(0, c) + e.key + o.slice(c), d = parseFloat(u);
       if (!isNaN(d)) {
-        if (n !== void 0 && d < n) {
+        if (t !== void 0 && d < t) {
           e.preventDefault();
           return;
         }
-        if (a !== void 0 && d > a) {
+        if (s !== void 0 && d > s) {
           e.preventDefault();
           return;
         }
       }
     }
   }
-}, H = ({
+}, q = ({
   iconBefore: e,
-  iconAfter: t,
-  hideBorder: n,
-  value: a,
-  elementId: s,
+  iconAfter: n,
+  hideBorder: t,
+  value: s,
+  elementId: a,
   placeholder: o = "",
   cssClass: c = "",
   containerCssClass: u,
   tooltipTriggerClassName: d,
-  type: l = "text",
-  disabled: p,
-  readonly: f,
-  invalid: x,
-  onChange: h,
-  min: C,
-  max: g,
+  type: i = "text",
+  disabled: f,
+  readonly: m,
+  invalid: g,
+  onChange: x,
+  min: v,
+  max: y,
   prefix: k,
-  suffix: D,
+  suffix: N,
   textBeforeInput: b,
-  textAfterInput: y
+  textAfterInput: C
 }) => {
-  const v = (L) => L.target.blur(), P = l === "number" || C !== void 0 || g !== void 0, G = (L) => {
-    hr(L, l, C, g);
-  }, pe = (L) => {
-    const O = L.currentTarget.value;
-    if (P && O !== "") {
-      const B = parseFloat(O);
-      if (isNaN(B) && O !== "-" && O !== "." || !isNaN(B) && (C !== void 0 && B < C || g !== void 0 && B > g))
+  const w = (E) => E.target.blur(), A = i === "number" || v !== void 0 || y !== void 0, P = (E) => {
+    Ar(E, i, v, y);
+  }, j = (E) => {
+    const S = E.currentTarget.value;
+    if (A && S !== "") {
+      const W = parseFloat(S);
+      if (isNaN(W) && S !== "-" && S !== "." || !isNaN(W) && (v !== void 0 && W < v || y !== void 0 && W > y))
         return;
     }
-    h?.(O);
+    x?.(S);
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: i(
+      className: l(
         "dial-input-field flex flex-row items-center justify-between py-2",
-        n ? "dial-input-no-border" : "dial-input",
-        x && "dial-input-error",
-        p && "dial-input-disable",
-        f && "dial-input-readonly",
+        t ? "dial-input-no-border" : "dial-input",
+        g && "dial-input-error",
+        f && "dial-input-disable",
+        m && "dial-input-readonly",
         !b && "pl-3",
-        !y && "pr-3",
+        !C && "pr-3",
         u
       ),
       children: [
         b && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-          H,
+          q,
           {
             hideBorder: !0,
             containerCssClass: "rounded-r-none border-r-0",
@@ -725,244 +727,244 @@ const dr = {
             elementId: b + "textBefore"
           }
         ) }),
-        k && /* @__PURE__ */ m("p", { className: "text-secondary dial-small", children: [
+        k && /* @__PURE__ */ p("p", { className: "text-secondary dial-small", children: [
           " ",
           k
         ] }),
-        /* @__PURE__ */ r(R, { icon: e }),
+        /* @__PURE__ */ r(M, { icon: e }),
         /* @__PURE__ */ r(
-          T,
+          O,
           {
-            tooltip: a,
-            triggerClassName: i(d, "flex-1"),
+            tooltip: s,
+            triggerClassName: l(d, "flex-1"),
             children: /* @__PURE__ */ r(
               "input",
               {
-                type: l,
+                type: i,
                 autoComplete: "off",
-                id: s,
+                id: a,
                 placeholder: o,
-                value: a ?? "",
-                disabled: p,
-                className: i("border-0 bg-transparent", c),
-                onChange: (L) => !f && pe?.(L),
-                onKeyDown: G,
-                onWheel: v,
-                min: C,
-                max: g
+                value: s ?? "",
+                disabled: f,
+                className: l("border-0 bg-transparent", c),
+                onChange: (E) => !m && j?.(E),
+                onKeyDown: P,
+                onWheel: w,
+                min: v,
+                max: y
               }
             )
           }
         ),
-        /* @__PURE__ */ r(R, { icon: t }),
-        D && /* @__PURE__ */ m("p", { className: "text-secondary dial-small", children: [
+        /* @__PURE__ */ r(M, { icon: n }),
+        N && /* @__PURE__ */ p("p", { className: "text-secondary dial-small", children: [
           " ",
-          D
+          N
         ] }),
-        y && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-          H,
+        C && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+          q,
           {
             hideBorder: !0,
             containerCssClass: "rounded-l-none border-l-0",
-            value: y,
+            value: C,
             disabled: !0,
-            elementId: y + "textAfter"
+            elementId: C + "textAfter"
           }
         ) })
       ]
     }
   );
-}, xr = /^0+\.(\d+)?$/, gr = /^0+/, de = ({
+}, Vr = /^0+\.(\d+)?$/, Or = /^0+/, we = ({
   fieldTitle: e,
-  errorText: t,
-  optional: n,
-  elementCssClass: a,
-  elementContainerCssClass: s,
+  errorText: n,
+  optional: t,
+  elementCssClass: s,
+  elementContainerCssClass: a,
   elementId: o,
   containerCssClass: c,
   readonly: u,
   defaultEmptyText: d,
-  min: l,
-  max: p,
-  ...f
-}) => /* @__PURE__ */ m("div", { className: i("flex flex-col", c), children: [
+  min: i,
+  max: f,
+  ...m
+}) => /* @__PURE__ */ p("div", { className: l("flex flex-col", c), children: [
   /* @__PURE__ */ r(
-    z,
+    $,
     {
       fieldTitle: e,
-      optional: n,
+      optional: t,
       htmlFor: o
     }
   ),
-  u ? /* @__PURE__ */ r("span", { children: f.value || (d ?? "None") }) : /* @__PURE__ */ m(Z, { children: [
+  u ? /* @__PURE__ */ r("span", { children: m.value || (d ?? "None") }) : /* @__PURE__ */ p(Z, { children: [
     /* @__PURE__ */ r(
-      H,
+      q,
       {
         elementId: o,
-        cssClass: a,
-        containerCssClass: s,
-        invalid: t != null,
-        min: l,
-        max: p,
-        ...f
+        cssClass: s,
+        containerCssClass: a,
+        invalid: n != null,
+        min: i,
+        max: f,
+        ...m
       }
     ),
-    /* @__PURE__ */ r(W, { errorText: t })
+    /* @__PURE__ */ r(K, { errorText: n })
   ] })
-] }), _r = ({
+] }), xn = ({
   onChange: e,
-  value: t,
-  min: n,
-  max: a,
-  ...s
+  value: n,
+  min: t,
+  max: s,
+  ...a
 }) => {
-  const o = (c) => String(c)?.match(xr) ? String(c)?.replace(gr, "0") : Number(c);
+  const o = (c) => String(c)?.match(Vr) ? String(c)?.replace(Or, "0") : Number(c);
   return /* @__PURE__ */ r(
-    de,
+    we,
     {
       type: "number",
       onChange: (c) => e?.(o(c)),
-      value: t,
-      min: n,
-      max: a,
-      ...s
+      value: n,
+      min: t,
+      max: s,
+      ...a
     }
   );
-}, Kr = ({
+}, gn = ({
   onChange: e,
-  ...t
+  ...n
 }) => /* @__PURE__ */ r(
-  de,
+  we,
   {
     type: "text",
-    onChange: (n) => e?.(n),
-    ...t
+    onChange: (t) => e?.(t),
+    ...n
   }
-), $r = ({
+), Cn = ({
   fieldTitle: e,
-  optional: t,
-  elementId: n,
-  elementCssClass: a,
-  errorText: s,
+  optional: n,
+  elementId: t,
+  elementCssClass: s,
+  errorText: a,
   ...o
-}) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
+}) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ r(
-    z,
+    $,
     {
       fieldTitle: e,
-      optional: t,
-      htmlFor: n
+      optional: n,
+      htmlFor: t
     }
   ),
   /* @__PURE__ */ r(
-    mr,
+    Pr,
     {
-      textareaId: n,
-      cssClass: a,
+      textareaId: t,
+      cssClass: s,
       ...o
     }
   ),
-  /* @__PURE__ */ r(W, { errorText: s })
-] }), Gr = ({
+  /* @__PURE__ */ r(K, { errorText: a })
+] }), yn = ({
   title: e,
-  switchId: t,
-  isOn: n = !1,
-  disabled: a,
-  onChange: s
+  switchId: n,
+  isOn: t = !1,
+  disabled: s,
+  onChange: a
 }) => {
-  const o = i(
+  const o = l(
     "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",
-    a ? "pointer-events-none" : "",
-    a ? n ? "bg-controls-disable" : "bg-layer-4" : n ? "bg-accent-primary" : "bg-layer-4"
-  ), c = E(
+    t ? "flex-row-reverse" : "flex-row",
+    s ? "pointer-events-none" : "",
+    s ? t ? "bg-controls-disable" : "bg-layer-4" : t ? "bg-accent-primary" : "bg-layer-4"
+  ), c = R(
     (u) => {
-      u.stopPropagation(), s?.(!n);
+      u.stopPropagation(), a?.(!t);
     },
-    [s, n]
+    [a, 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: c,
-        id: t,
-        disabled: a,
+        id: n,
+        disabled: s,
         className: "invisible w-0 h-0",
-        checked: n
+        checked: t
       }
     ),
-    /* @__PURE__ */ r("label", { htmlFor: t, className: o, children: /* @__PURE__ */ r(
+    /* @__PURE__ */ r("label", { htmlFor: n, className: o, children: /* @__PURE__ */ r(
       "span",
       {
-        className: i(
+        className: l(
           "size-3 rounded-full",
-          a ? n ? "bg-layer-4" : "bg-controls-disable" : "bg-controls-enable-primary"
+          s ? 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 A = /* @__PURE__ */ ((e) => (e.Sm = "sm", e.Md = "md", e.Lg = "lg", e))(A || {});
-const yr = "z-[52] flex items-center justify-center bg-blackout md:p-4", Cr = "divide-tertiary divide-y", br = "flex flex-row justify-between py-4 px-6 items-center", vr = {
-  [A.Sm]: "dial-sm-popup",
-  [A.Md]: "dial-md-popup",
-  [A.Lg]: "dial-lg-popup"
-}, wr = ({
+var H = /* @__PURE__ */ ((e) => (e.Sm = "sm", e.Md = "md", e.Lg = "lg", e))(H || {});
+const jr = "z-[52] flex items-center justify-center bg-blackout md:p-4", Wr = "divide-tertiary divide-y", Br = "flex flex-row justify-between py-4 px-6 items-center", zr = {
+  [H.Sm]: "dial-sm-popup",
+  [H.Md]: "dial-md-popup",
+  [H.Lg]: "dial-lg-popup"
+}, Ne = ({
   open: e = !1,
-  title: t,
-  portalId: n,
-  cssClass: a,
-  overlayClass: s,
+  title: n,
+  portalId: t,
+  cssClass: s,
+  overlayClass: a,
   headingClass: o,
   dividers: c = !0,
   children: u,
   footer: d,
-  onClose: l,
-  size: p = A.Md
+  onClose: i,
+  size: f = H.Md
 }) => {
-  const { refs: f, context: x } = te({
+  const { refs: m, context: g } = re({
     open: e,
     onOpenChange: (b) => {
-      b || l?.(null);
+      b || i?.(null);
     }
-  }), h = ae(x, { role: "dialog" }), C = ne(x, { outsidePress: !0 }), { getFloatingProps: g } = se([h, C]);
+  }), x = te(g, { role: "dialog" }), v = ne(g, { outsidePress: !0 }), { getFloatingProps: y } = se([x, v]);
   if (!e) return null;
-  const k = typeof t == "string" ? "dial-popup-heading" : void 0, D = (b) => b ? typeof b == "string" ? /* @__PURE__ */ r(
+  const k = typeof n == "string" ? "dial-popup-heading" : void 0, N = (b) => b ? typeof b == "string" ? /* @__PURE__ */ r(
     "h3",
     {
       id: k,
-      className: i(
+      className: l(
         "flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",
         o
       ),
-      children: /* @__PURE__ */ r(T, { tooltip: b, children: b })
+      children: /* @__PURE__ */ r(O, { tooltip: b, children: b })
     }
   ) : b : /* @__PURE__ */ r("span", {});
-  return /* @__PURE__ */ r(le, { id: n, children: /* @__PURE__ */ r(Oe, { className: i(yr, s), children: /* @__PURE__ */ r(We, { context: x, children: /* @__PURE__ */ m(
+  return /* @__PURE__ */ r(ae, { id: t, children: /* @__PURE__ */ r(nr, { className: l(jr, a), children: /* @__PURE__ */ r(Ce, { context: g, children: /* @__PURE__ */ p(
     "div",
     {
-      ref: f.setFloating,
-      ...g(),
+      ref: m.setFloating,
+      ...y(),
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": k,
-      className: i(
+      className: l(
         "dial-popup",
-        vr[p],
-        c && Cr,
-        a
+        zr[f],
+        c && Wr,
+        s
       ),
       children: [
-        /* @__PURE__ */ m("div", { className: br, children: [
-          D(t),
+        /* @__PURE__ */ p("div", { className: Br, children: [
+          N(n),
           /* @__PURE__ */ r(
-            pr,
+            ve,
             {
               ariaLabel: "Close dialog",
-              onClose: (b) => l?.(b)
+              onClose: (b) => i?.(b)
             }
           )
         ] }),
@@ -972,180 +974,370 @@ const yr = "z-[52] flex items-center justify-center bg-blackout md:p-4", Cr = "d
     }
   ) }) }) });
 };
-var _ = /* @__PURE__ */ ((e) => (e.Info = "info", e.Danger = "danger", e))(_ || {});
-const Nr = "flex justify-end gap-2 px-6 py-4", kr = "text-secondary dial-small-150 px-6 py-4", Dr = "Cancel", q = {
-  [_.Info]: {
-    confirmVariant: I.Primary,
-    cancelVariant: I.Secondary
+var Q = /* @__PURE__ */ ((e) => (e.Info = "info", e.Danger = "danger", e))(Q || {});
+const Hr = "flex justify-end gap-2 px-6 py-4", _r = "text-secondary dial-small-150 px-6 py-4", $r = "Cancel", le = {
+  [Q.Info]: {
+    confirmVariant: D.Primary,
+    cancelVariant: D.Secondary
   },
-  [_.Danger]: {
+  [Q.Danger]: {
     container: "border-t-4 border-error",
-    confirmVariant: I.Danger,
-    cancelVariant: I.Secondary
+    confirmVariant: D.Danger,
+    cancelVariant: D.Secondary
   }
-}, Zr = ({
+}, bn = ({
   title: e,
-  description: t,
-  descriptionCssClass: n,
-  open: a = !1,
-  confirmLabel: s,
-  cancelLabel: o = Dr,
+  description: n,
+  descriptionCssClass: t,
+  open: s = !1,
+  confirmLabel: a,
+  cancelLabel: o = $r,
   isLoading: c = !1,
   disableConfirmButton: u = !1,
   cssClass: d,
-  confirmClassName: l,
-  onClose: p,
-  onConfirm: f,
-  onCancel: x,
-  children: h,
-  dividers: C = !1,
-  variant: g = _.Info,
-  size: k = A.Sm
+  confirmClassName: i,
+  onClose: f,
+  onConfirm: m,
+  onCancel: g,
+  children: x,
+  dividers: v = !1,
+  variant: y = Q.Info,
+  size: k = H.Sm
 }) => {
-  const D = c ? null : /* @__PURE__ */ m("div", { className: Nr, children: [
+  const N = c ? null : /* @__PURE__ */ p("div", { className: Hr, children: [
     /* @__PURE__ */ r(
-      j,
+      V,
       {
-        variant: I.Secondary,
+        variant: D.Secondary,
         title: o,
-        onClick: () => x ? x() : p?.()
+        onClick: () => g ? g() : f?.()
       }
     ),
     /* @__PURE__ */ r(
-      j,
+      V,
       {
-        variant: q[g].confirmVariant,
-        cssClass: l,
-        title: s,
+        variant: le[y].confirmVariant,
+        cssClass: i,
+        title: a,
         disable: u,
-        onClick: () => f()
+        onClick: () => m()
       }
     )
-  ] }), b = E(() => c ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r(Ue, { size: 50 }) }) : h ?? (t ? /* @__PURE__ */ r(
+  ] }), b = R(() => c ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r(mr, { size: 50 }) }) : x ?? (n ? /* @__PURE__ */ r(
     "div",
     {
-      className: i(kr, n),
-      children: t
+      className: l(_r, t),
+      children: n
     }
-  ) : null), [h, t, c, n]);
+  ) : null), [x, n, c, t]);
   return /* @__PURE__ */ r(
-    wr,
+    Ne,
     {
-      open: a,
+      open: s,
       title: e,
-      cssClass: i(q[g].container, d),
-      dividers: C,
-      onClose: () => p?.(),
-      footer: D,
+      cssClass: l(le[y].container, d),
+      dividers: v,
+      onClose: () => f?.(),
+      footer: N,
       size: k,
       children: b()
     }
   );
-}, Ir = ({ onClick: e }) => /* @__PURE__ */ r(
-  we,
+}, ke = ({ selectedItems: e, listCssClass: n, listElementCssClass: t }) => !!e?.length && /* @__PURE__ */ r(
+  "ul",
   {
-    ...M,
+    className: l(
+      "flex-row items-center truncate flex-wrap",
+      "flex gap-x-2 gap-y-1",
+      n
+    ),
+    children: e?.map((s) => /* @__PURE__ */ r(
+      "li",
+      {
+        className: l([
+          "tiny bg-layer-3 rounded p-1 border border-primary max-w-[200px] truncate",
+          t
+        ]),
+        children: /* @__PURE__ */ r(O, { tooltip: s, children: /* @__PURE__ */ r(
+          "button",
+          {
+            "aria-label": "autocomplete-action",
+            type: "button",
+            className: "truncate w-full",
+            children: s
+          }
+        ) })
+      },
+      s
+    ))
+  }
+), ie = (e) => /* @__PURE__ */ L.createElement("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ L.createElement("path", { d: "M2.25 13.5V12C2.25 11.5858 2.58579 11.25 3 11.25C3.41421 11.25 3.75 11.5858 3.75 12V13.5C3.75 13.6989 3.82907 13.8896 3.96973 14.0303C4.11038 14.1709 4.30109 14.25 4.5 14.25H6C6.41421 14.25 6.75 14.5858 6.75 15C6.75 15.4142 6.41421 15.75 6 15.75H4.5C3.90326 15.75 3.33114 15.5128 2.90918 15.0908C2.48722 14.6689 2.25 14.0967 2.25 13.5ZM14.25 6V4.5C14.25 4.30109 14.1709 4.11038 14.0303 3.96973C13.8896 3.82907 13.6989 3.75 13.5 3.75H12C11.5858 3.75 11.25 3.41421 11.25 3C11.25 2.58579 11.5858 2.25 12 2.25H13.5C14.0967 2.25 14.6689 2.48722 15.0908 2.90918C15.5128 3.33114 15.75 3.90326 15.75 4.5V6C15.75 6.41421 15.4142 6.75 15 6.75C14.5858 6.75 14.25 6.41421 14.25 6Z", fill: "currentColor" })), Gr = ({
+  children: e,
+  open: n,
+  readonly: t,
+  selectedValue: s,
+  valueCssClasses: a,
+  inputCssClasses: o,
+  onOpen: c,
+  elementId: u,
+  errorText: d,
+  emptyValueText: i
+}) => {
+  const f = Array.isArray(s) && s.length > 0, m = typeof s == "string" && !!s.trim(), g = f || m ? s : i, x = t ? void 0 : c;
+  return /* @__PURE__ */ p(Z, { children: [
+    f ? /* @__PURE__ */ r("div", { className: "w-full", onClick: x, children: /* @__PURE__ */ p(
+      "div",
+      {
+        className: l(
+          "dial-input px-3 py-2 flex flex-row items-center w-full justify-between",
+          t && "dial-input-disable"
+        ),
+        children: [
+          /* @__PURE__ */ r(ke, { selectedItems: g }),
+          !t && /* @__PURE__ */ r("div", { className: "ml-1", children: /* @__PURE__ */ r(
+            M,
+            {
+              icon: /* @__PURE__ */ r(
+                ie,
+                {
+                  role: "img",
+                  width: z,
+                  height: z
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    ) }) : /* @__PURE__ */ p(Z, { children: [
+      /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          className: "w-full",
+          onClick: x,
+          "aria-label": "open-popup",
+          id: u,
+          children: /* @__PURE__ */ p(
+            "div",
+            {
+              className: l(
+                "dial-input px-3 py-2 dial-input-field flex flex-row items-center w-full justify-between",
+                o,
+                t && "dial-input-disable",
+                d && "dial-input-error"
+              ),
+              children: [
+                /* @__PURE__ */ r(O, { tooltip: String(g), children: /* @__PURE__ */ r("span", { className: a, children: g }) }),
+                !t && /* @__PURE__ */ r("div", { className: "flex-shrink-0", children: /* @__PURE__ */ r(
+                  M,
+                  {
+                    icon: /* @__PURE__ */ r(
+                      ie,
+                      {
+                        role: "img",
+                        width: z,
+                        height: z
+                      }
+                    )
+                  }
+                ) })
+              ]
+            }
+          )
+        }
+      ),
+      d && /* @__PURE__ */ r(K, { errorText: d })
+    ] }),
+    n && or(e, document.body)
+  ] });
+}, vn = ({
+  fieldTitle: e,
+  htmlFor: n,
+  readonly: t,
+  selectedValue: s,
+  radioButtons: a,
+  customInputValue: o,
+  valueCssClasses: c,
+  inputCssClasses: u,
+  emptyValueText: d,
+  onClose: i,
+  title: f,
+  portalId: m,
+  onApply: g,
+  cancelButtonTitle: x = "Cancel",
+  applyButtonTitle: v = "Apply",
+  isValid: y,
+  selectedRadioValue: k,
+  onChangeRadioField: N,
+  id: b
+}) => {
+  const [C, w] = F(!1), A = R(() => {
+    t || w(!0);
+  }, [t]), P = R(() => {
+    w(!1), i?.();
+  }, [i]), j = R(() => {
+    g(), P();
+  }, [g, P]);
+  return /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ r($, { fieldTitle: e, htmlFor: n }),
+    /* @__PURE__ */ r(
+      Gr,
+      {
+        readonly: t,
+        open: C,
+        selectedValue: o ?? a.find((E) => E.id === s)?.name,
+        valueCssClasses: c,
+        inputCssClasses: l(u, "py-2", "px-3"),
+        emptyValueText: d,
+        onOpen: A,
+        children: /* @__PURE__ */ r(
+          Ne,
+          {
+            open: C,
+            onClose: P,
+            title: f,
+            portalId: m,
+            footer: /* @__PURE__ */ p("div", { className: "flex flex-row items-center justify-end gap-2 px-6 py-4", children: [
+              /* @__PURE__ */ r(
+                V,
+                {
+                  variant: D.Secondary,
+                  title: x,
+                  onClick: P
+                }
+              ),
+              /* @__PURE__ */ r(
+                V,
+                {
+                  variant: D.Primary,
+                  title: v,
+                  onClick: j,
+                  disable: !y
+                }
+              )
+            ] }),
+            children: /* @__PURE__ */ r("div", { className: "px-6 py-4", children: /* @__PURE__ */ r(
+              Sr,
+              {
+                radioButtons: a,
+                labelCssClass: "dial-small",
+                activeRadioButton: k,
+                onChange: N,
+                elementId: b,
+                orientation: X.Column
+              }
+            ) })
+          }
+        )
+      }
+    )
+  ] });
+}, Kr = ({ onClick: e }) => /* @__PURE__ */ r(
+  $e,
+  {
+    ..._,
     className: "text-primary",
     onClick: e
   }
-), Rr = ({ onClick: e }) => /* @__PURE__ */ r(Ne, { ...M, className: "text-primary", onClick: e }), Sr = ({ ...e }) => {
-  const [t, n] = S(!1), a = E((s) => {
-    n(s);
+), Ur = ({ onClick: e }) => /* @__PURE__ */ r(Ge, { ..._, className: "text-primary", onClick: e }), Zr = ({ ...e }) => {
+  const [n, t] = F(!1), s = R((a) => {
+    t(a);
   }, []);
   return /* @__PURE__ */ r(
-    H,
+    q,
     {
-      type: t ? "text" : "password",
+      type: n ? "text" : "password",
       ...e,
-      iconAfter: t ? /* @__PURE__ */ r(Ir, { onClick: () => a(!1) }) : /* @__PURE__ */ r(Rr, { onClick: () => a(!0) })
+      iconAfter: n ? /* @__PURE__ */ r(Kr, { onClick: () => s(!1) }) : /* @__PURE__ */ r(Ur, { onClick: () => s(!0) })
     }
   );
-}, Ur = ({
+}, wn = ({
   fieldTitle: e,
-  optional: t,
-  elementCssClass: n,
-  elementId: a,
-  errorText: s,
+  optional: n,
+  elementCssClass: t,
+  elementId: s,
+  errorText: a,
   ...o
-}) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
+}) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ r(
-    z,
+    $,
     {
       fieldTitle: e,
-      optional: t,
-      htmlFor: a
+      optional: n,
+      htmlFor: s
     }
   ),
   /* @__PURE__ */ r(
-    Sr,
+    Zr,
     {
-      cssClass: n,
-      elementId: a,
-      invalid: !!s,
+      cssClass: t,
+      elementId: s,
+      invalid: !!a,
       ...o
     }
   ),
-  /* @__PURE__ */ r(W, { errorText: s })
+  /* @__PURE__ */ r(K, { errorText: a })
 ] });
-var K = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(K || {});
-const Er = {
-  [K.Small]: {
+var Y = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(Y || {});
+const Xr = {
+  [Y.Small]: {
     textClass: "text-xs px-1",
     containerClass: "px-[6px] py-1 h-[22px]",
     iconSize: 10,
     iconStroke: 1
   },
-  [K.Base]: {
+  [Y.Base]: {
     textClass: "text-sm px-2",
     containerClass: "px-3 py-2 h-[38px]",
     iconSize: 18,
     iconStroke: 1.5
   }
-}, Xr = ({
+}, Nn = ({
   elementId: e,
-  value: t,
-  placeholder: n,
-  disabled: a,
-  readonly: s,
+  value: n,
+  placeholder: t,
+  disabled: s,
+  readonly: a,
   invalid: o,
   cssClass: c,
   containerCssClass: u,
   onChange: d,
-  size: l = K.Base
+  size: i = Y.Base
 }) => {
-  const [p, f] = S(t || "");
-  re(() => {
-    f(t || "");
-  }, [t]);
-  const x = E(
-    (g) => {
-      f(g), d?.(g);
+  const [f, m] = F(n || "");
+  ee(() => {
+    m(n || "");
+  }, [n]);
+  const g = R(
+    (y) => {
+      m(y), d?.(y);
     },
     [d]
-  ), h = Er[l], C = E(() => {
-    x("");
-  }, [x]);
-  return /* @__PURE__ */ m(
+  ), x = Xr[i], v = R(() => {
+    g("");
+  }, [g]);
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: i(
+      className: l(
         "dial-input flex flex-row items-center justify-between",
         o && "dial-input-error",
-        a && "dial-input-disable",
-        s && "dial-input-readonly",
-        h.containerClass,
+        s && "dial-input-disable",
+        a && "dial-input-readonly",
+        x.containerClass,
         u
       ),
       children: [
         /* @__PURE__ */ r(
-          R,
+          M,
           {
-            className: i(a ? "text-secondary" : "text-primary"),
+            className: l(s ? "text-secondary" : "text-primary"),
             icon: /* @__PURE__ */ r(
-              ke,
+              Ke,
               {
-                size: h.iconSize,
-                stroke: h.iconStroke
+                size: x.iconSize,
+                stroke: x.iconStroke
               }
             )
           }
@@ -1156,28 +1348,28 @@ const Er = {
             id: e,
             type: "text",
             autoComplete: "off",
-            placeholder: n,
-            value: p ?? "",
-            disabled: a,
-            readOnly: s,
-            className: i(
+            placeholder: t,
+            value: f ?? "",
+            disabled: s,
+            readOnly: a,
+            className: l(
               "border-0 bg-transparent w-full",
               c,
-              h.textClass
+              x.textClass
             ),
-            onChange: (g) => !s && x(g.currentTarget.value)
+            onChange: (y) => !a && g(y.currentTarget.value)
           }
         ),
-        p && !s && !a && /* @__PURE__ */ r(
-          R,
+        f && !a && !s && /* @__PURE__ */ r(
+          M,
           {
             className: "text-primary cursor-pointer",
             icon: /* @__PURE__ */ r(
-              $,
+              J,
               {
-                size: h.iconSize,
-                stroke: h.iconStroke,
-                onClick: C,
+                size: x.iconSize,
+                stroke: x.iconStroke,
+                onClick: v,
                 "aria-label": "Clear search",
                 role: "button"
               }
@@ -1187,148 +1379,40 @@ const Er = {
       ]
     }
   );
-}, ue = ({ 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",
-      t
-    ),
-    children: e?.map((a) => /* @__PURE__ */ r(
-      "li",
-      {
-        className: i([
-          "tiny bg-layer-3 rounded p-1 border border-primary max-w-[200px] truncate",
-          n
-        ]),
-        children: /* @__PURE__ */ r(T, { tooltip: a, children: /* @__PURE__ */ r(
-          "button",
-          {
-            "aria-label": "autocomplete-action",
-            type: "button",
-            className: "truncate w-full",
-            children: a
-          }
-        ) })
-      },
-      a
-    ))
-  }
-), Q = (e) => /* @__PURE__ */ N.createElement("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ N.createElement("path", { d: "M2.25 13.5V12C2.25 11.5858 2.58579 11.25 3 11.25C3.41421 11.25 3.75 11.5858 3.75 12V13.5C3.75 13.6989 3.82907 13.8896 3.96973 14.0303C4.11038 14.1709 4.30109 14.25 4.5 14.25H6C6.41421 14.25 6.75 14.5858 6.75 15C6.75 15.4142 6.41421 15.75 6 15.75H4.5C3.90326 15.75 3.33114 15.5128 2.90918 15.0908C2.48722 14.6689 2.25 14.0967 2.25 13.5ZM14.25 6V4.5C14.25 4.30109 14.1709 4.11038 14.0303 3.96973C13.8896 3.82907 13.6989 3.75 13.5 3.75H12C11.5858 3.75 11.25 3.41421 11.25 3C11.25 2.58579 11.5858 2.25 12 2.25H13.5C14.0967 2.25 14.6689 2.48722 15.0908 2.90918C15.5128 3.33114 15.75 3.90326 15.75 4.5V6C15.75 6.41421 15.4142 6.75 15 6.75C14.5858 6.75 14.25 6.41421 14.25 6Z", fill: "currentColor" })), qr = ({
-  children: e,
-  open: t,
-  readonly: n,
-  selectedValue: a,
-  valueCssClasses: s,
-  inputCssClasses: o,
-  onOpen: c,
-  elementId: u,
-  errorText: d,
-  emptyValueText: l
-}) => {
-  const p = Array.isArray(a) && a.length > 0, f = typeof a == "string" && !!a.trim(), x = p || f ? a : l, h = n ? void 0 : c;
-  return /* @__PURE__ */ m(Z, { children: [
-    p ? /* @__PURE__ */ r("div", { className: "w-full", onClick: h, children: /* @__PURE__ */ m(
-      "div",
-      {
-        className: i(
-          "dial-input px-3 py-2 flex flex-row items-center w-full justify-between",
-          n && "dial-input-disable"
-        ),
-        children: [
-          /* @__PURE__ */ r(ue, { selectedItems: x }),
-          !n && /* @__PURE__ */ r("div", { className: "ml-1", children: /* @__PURE__ */ r(
-            R,
-            {
-              icon: /* @__PURE__ */ r(
-                Q,
-                {
-                  role: "img",
-                  width: V,
-                  height: V
-                }
-              )
-            }
-          ) })
-        ]
-      }
-    ) }) : /* @__PURE__ */ m(Z, { children: [
-      /* @__PURE__ */ r(
-        "button",
-        {
-          type: "button",
-          className: "w-full",
-          onClick: h,
-          "aria-label": "open-popup",
-          id: u,
-          children: /* @__PURE__ */ m(
-            "div",
-            {
-              className: i(
-                "dial-input px-3 py-2 dial-input-field flex flex-row items-center w-full justify-between",
-                o,
-                n && "dial-input-disable",
-                d && "dial-input-error"
-              ),
-              children: [
-                /* @__PURE__ */ r(T, { tooltip: String(x), children: /* @__PURE__ */ r("span", { className: s, children: x }) }),
-                !n && /* @__PURE__ */ r("div", { className: "flex-shrink-0", children: /* @__PURE__ */ r(
-                  R,
-                  {
-                    icon: /* @__PURE__ */ r(
-                      Q,
-                      {
-                        role: "img",
-                        width: V,
-                        height: V
-                      }
-                    )
-                  }
-                ) })
-              ]
-            }
-          )
-        }
-      ),
-      d && /* @__PURE__ */ r(W, { errorText: d })
-    ] }),
-    t && ze(e, document.body)
-  ] });
-}, Qr = ({
+}, kn = ({
   placeholder: e = "",
-  selectedItems: t = [],
-  updateSelected: n,
-  listCssClass: a,
-  listElementCssClass: s,
+  selectedItems: n = [],
+  updateSelected: t,
+  listCssClass: s,
+  listElementCssClass: a,
   containerCssClass: o,
   inputCssClass: c
 }) => {
-  const [u, d] = S(""), l = E(
-    (f) => {
-      f.key === "Enter" && (n([...t, f.currentTarget.value]), d("")), (f.key === "Backspace" || f.key === "Delete") && t.length && !u && n(t.slice(0, -1));
+  const [u, d] = F(""), i = R(
+    (m) => {
+      m.key === "Enter" && (t([...n, m.currentTarget.value]), d("")), (m.key === "Backspace" || m.key === "Delete") && n.length && !u && t(n.slice(0, -1));
     },
-    [t, n, u]
-  ), p = E(
-    (f) => {
-      d(f.target.value);
+    [n, t, u]
+  ), f = R(
+    (m) => {
+      d(m.target.value);
     },
     [d]
   );
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: i([
+      className: l([
         "dial-input px-3 py-2 flex flex-row items-center flex-wrap w-fit gap-2",
         o
       ]),
       children: [
         /* @__PURE__ */ r(
-          ue,
+          ke,
           {
-            selectedItems: t,
-            listCssClass: a,
-            listElementCssClass: s
+            selectedItems: n,
+            listCssClass: s,
+            listElementCssClass: a
           }
         ),
         /* @__PURE__ */ r(
@@ -1336,91 +1420,91 @@ const Er = {
           {
             type: "text",
             value: u,
-            className: i(["border-0 bg-transparent p-0", c]),
-            placeholder: t?.length ? "" : e,
-            onKeyDown: l,
-            onChange: p
+            className: l(["border-0 bg-transparent p-0", c]),
+            placeholder: n?.length ? "" : e,
+            onKeyDown: i,
+            onChange: f
           }
         )
       ]
     }
   );
-}, Yr = ({
+}, Dn = ({
   initialTags: e = [],
-  fieldTitle: t,
-  optional: n,
-  elementId: a,
-  placeholder: s,
+  fieldTitle: n,
+  optional: t,
+  elementId: s,
+  placeholder: a,
   errorText: o,
   invalid: c,
   disabled: u,
   onChange: d
 }) => {
-  const l = J(null), [p, f] = S(e), [x, h] = S(""), [C, g] = S(!1), k = (y) => {
-    const v = y.trim().replace(/,$/, "");
-    if (v && !p.includes(v)) {
-      const P = [v, ...p];
-      f(P), d?.(P);
+  const i = de(null), [f, m] = F(e), [g, x] = F(""), [v, y] = F(!1), k = (C) => {
+    const w = C.trim().replace(/,$/, "");
+    if (w && !f.includes(w)) {
+      const A = [w, ...f];
+      m(A), d?.(A);
     }
-  }, D = (y) => {
-    (y.key === "," || y.key === "Enter") && (y.preventDefault(), k(x), h(""));
-  }, b = (y) => {
-    const v = p.filter((P, G) => G !== y);
-    f(v), d?.(v);
+  }, N = (C) => {
+    (C.key === "," || C.key === "Enter") && (C.preventDefault(), k(g), x(""));
+  }, b = (C) => {
+    const w = f.filter((A, P) => P !== C);
+    m(w), d?.(w);
   };
-  return re(() => {
-    const y = new ResizeObserver(() => {
-      if (l.current) {
-        const v = l.current.scrollHeight > l.current.clientHeight + 10;
-        g(v);
+  return ee(() => {
+    const C = new ResizeObserver(() => {
+      if (i.current) {
+        const w = i.current.scrollHeight > i.current.clientHeight + 10;
+        y(w);
       }
     });
-    return l.current && y.observe(l.current), () => y.disconnect();
-  }, [p]), /* @__PURE__ */ m("div", { className: i("flex flex-col w-full"), children: [
+    return i.current && C.observe(i.current), () => C.disconnect();
+  }, [f]), /* @__PURE__ */ p("div", { className: l("flex flex-col w-full"), children: [
     /* @__PURE__ */ r(
-      z,
+      $,
       {
-        fieldTitle: t,
-        optional: n,
-        htmlFor: a
+        fieldTitle: n,
+        optional: t,
+        htmlFor: s
       }
     ),
     /* @__PURE__ */ r(
       "div",
       {
-        className: i(
+        className: l(
           "dial-input min-h-[38px] p-[6px]",
           c && "dial-input-error",
           u && "dial-input-disable"
         ),
-        children: /* @__PURE__ */ m(
+        children: /* @__PURE__ */ p(
           "div",
           {
-            ref: l,
-            className: i(
+            ref: i,
+            className: l(
               "flex flex-wrap gap-2 items-center",
-              C ? "flex-col-reverse" : "flex-row"
+              v ? "flex-col-reverse" : "flex-row"
             ),
             children: [
-              p.map((y, v) => /* @__PURE__ */ r(
-                ur,
+              f.map((C, w) => /* @__PURE__ */ r(
+                Mr,
                 {
-                  tag: y,
-                  remove: u ? void 0 : () => b(v)
+                  tag: C,
+                  remove: u ? void 0 : () => b(w)
                 },
-                y + v
+                C + w
               )),
               /* @__PURE__ */ r(
                 "input",
                 {
                   type: "text",
-                  value: x,
-                  onChange: (y) => h(y.target.value),
-                  onKeyDown: D,
-                  className: i(
+                  value: g,
+                  onChange: (C) => x(C.target.value),
+                  onKeyDown: N,
+                  className: l(
                     "dial-input-no-border outline-none border-none w-full min-w-[100px] flex-1 p-1"
                   ),
-                  placeholder: s,
+                  placeholder: a,
                   disabled: u
                 }
               )
@@ -1429,47 +1513,232 @@ const Er = {
         )
       }
     ),
-    /* @__PURE__ */ r(W, { errorText: o })
+    /* @__PURE__ */ r(K, { errorText: o })
+  ] });
+};
+var qr = /* @__PURE__ */ ((e) => (e.Dropdown = "dropdown", e.Menu = "menu", e))(qr || {}), G = /* @__PURE__ */ ((e) => (e.Click = "click", e.Hover = "hover", e.ContextMenu = "contextMenu", e))(G || {}), De = /* @__PURE__ */ ((e) => (e.Item = "item", e.Divider = "divider", e))(De || {});
+const Qr = l(
+  "inline-flex items-center gap-2 align-middle",
+  "h-auto px-0 bg-transparent border-0"
+), Yr = l(
+  "z-[53] overflow-auto rounded bg-layer-0 text-primary shadow focus-visible:outline-none",
+  "w-max"
+), Jr = l(
+  "flex w-full cursor-pointer items-center gap-3",
+  "focus-visible:border-none focus-visible:outline-none",
+  "hover:bg-accent-primary-alpha px-3",
+  "dial-small h-[34px] rounded text-primary"
+), en = "opacity-75 !cursor-not-allowed", rn = "text-error", nn = "my-1 border-t border-hover", U = 8, In = ({
+  children: e,
+  menu: n,
+  renderOverlay: t,
+  trigger: s = [G.Click],
+  placement: a,
+  disabled: o = !1,
+  open: c,
+  defaultOpen: u = !1,
+  onOpenChange: d,
+  closable: i = !1,
+  onClose: f,
+  cssClass: m,
+  listClassName: g,
+  outsidePressIgnoreRef: x,
+  outsideClosable: v = !0
+}) => {
+  const [y, k] = F(u), N = c !== void 0, b = N ? !!c : y, C = R(
+    (h) => {
+      N || k(h), d?.(h);
+    },
+    [N, d]
+  ), w = Ye(), A = (h) => h ? "clientWidth" in h ? h.clientWidth : h.getBoundingClientRect?.()?.width ?? 0 : 0, P = a === void 0, { refs: j, floatingStyles: E, context: S } = re({
+    placement: a,
+    open: b,
+    onOpenChange: C,
+    whileElementsMounted: he,
+    middleware: [
+      pe({ mainAxis: U, crossAxis: 0 }),
+      P ? tr({
+        alignment: "start",
+        crossAxis: !0,
+        padding: U
+      }) : fe({ padding: U }),
+      me({ padding: U }),
+      sr({
+        apply({ availableWidth: h, elements: T }) {
+          const Te = A(T.reference);
+          T.floating.style.setProperty(
+            "--reference-width",
+            `${Te}px`
+          ), T.floating.style.maxWidth = `${h}px`;
+        }
+      })
+    ]
+  }), W = ar(S, {
+    enabled: s.includes(G.Click) && !o
+  }), Ie = xe(S, {
+    enabled: s.includes(G.Hover) && !o,
+    move: !1,
+    restMs: 40,
+    delay: { open: 80, close: 80 }
+  }), Re = ne(S, {
+    bubbles: !0,
+    referencePress: !1,
+    outsidePress: (h) => {
+      if (!v) return !1;
+      const T = h.target;
+      return !(x?.current && T instanceof Node && x.current.contains(T));
+    }
+  }), Ee = te(S, { role: "menu" }), { getReferenceProps: Se, getFloatingProps: Le } = se([
+    W,
+    Ie,
+    Re,
+    Ee
+  ]), Fe = (h) => {
+    !s.includes(G.ContextMenu) || o || (h.preventDefault(), C(!0));
+  };
+  ee(() => {
+    o && b && C(!1);
+  }, [o, b, C]);
+  const Me = (h) => (T) => {
+    h.disabled || (h.onClick?.({ key: h.key, domEvent: T }), n?.onClick?.({ key: h.key, domEvent: T }), C(!1));
+  }, Pe = t ? t() : n && /* @__PURE__ */ r("div", { role: "none", className: "py-1", children: n.items.map((h) => h.type === De.Divider ? /* @__PURE__ */ r(
+    "div",
+    {
+      role: "separator",
+      className: nn
+    },
+    h.key
+  ) : /* @__PURE__ */ p(
+    "button",
+    {
+      role: "menuitem",
+      type: "button",
+      "aria-disabled": !!h.disabled,
+      className: l(
+        Jr,
+        h.disabled && en,
+        h.danger && rn
+      ),
+      disabled: h.disabled,
+      onClick: Me(h),
+      children: [
+        h.icon && /* @__PURE__ */ r(
+          "span",
+          {
+            className: l(
+              h.danger && "text-error",
+              h.disabled && "text-secondary"
+            ),
+            children: /* @__PURE__ */ r(M, { icon: h.icon })
+          }
+        ),
+        /* @__PURE__ */ r(
+          "span",
+          {
+            className: l(
+              "flex-1 truncate text-left",
+              h.danger && "text-error",
+              h.disabled && "text-secondary"
+            ),
+            children: h.label
+          }
+        )
+      ]
+    },
+    h.key
+  )) });
+  return /* @__PURE__ */ p(Z, { children: [
+    /* @__PURE__ */ r(
+      "span",
+      {
+        ref: j.setReference,
+        className: l(
+          Qr,
+          o && "!cursor-not-allowed opacity-75",
+          m
+        ),
+        "aria-haspopup": "menu",
+        "aria-expanded": b,
+        "aria-controls": w,
+        onContextMenu: Fe,
+        ...Se(),
+        children: e
+      }
+    ),
+    b && /* @__PURE__ */ r(ae, { children: /* @__PURE__ */ r(
+      Ce,
+      {
+        context: S,
+        modal: !1,
+        initialFocus: -1,
+        returnFocus: !0,
+        children: /* @__PURE__ */ p(
+          "div",
+          {
+            id: w,
+            ref: j.setFloating,
+            style: E,
+            className: l(Yr, g),
+            ...Le(),
+            children: [
+              i && /* @__PURE__ */ r("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ r(
+                ve,
+                {
+                  ariaLabel: "Close dropdown",
+                  onClose: (h) => {
+                    f?.(h), C(!1);
+                  }
+                }
+              ) }),
+              Pe
+            ]
+          }
+        )
+      }
+    ) })
   ] });
 };
 export {
-  F as AlertVariant,
-  I as ButtonVariant,
-  _ as ConfirmationPopupVariant,
-  Mr as DialAlert,
-  Qr as DialAutocompleteInput,
-  ue as DialAutocompleteInputValue,
-  j as DialButton,
-  Pr as DialCheckbox,
-  pr as DialCloseButton,
-  Br as DialCollapsibleSidebar,
-  Zr as DialConfirmationPopup,
-  W as DialErrorText,
-  z as DialFieldLabel,
-  R as DialIcon,
-  H as DialInput,
-  qr as DialInputPopup,
-  Hr as DialLabelledText,
-  Ue as DialLoader,
-  zr as DialNoDataContent,
-  _r as DialNumberInputField,
-  Sr as DialPasswordInput,
-  Ur as DialPasswordInputField,
-  wr as DialPopup,
-  ar as DialRadioButton,
-  Wr as DialRadioGroup,
-  Xr as DialSearch,
-  Or as DialSteps,
-  Gr as DialSwitch,
-  ur as DialTag,
-  Yr as DialTagInput,
-  $r as DialTextAreaField,
-  Kr as DialTextInputField,
-  mr as DialTextarea,
-  T as DialTooltip,
-  A as PopupSize,
-  U as RadioGroupOrientation,
-  K as SearchSize,
-  w as StepStatus,
-  X as TagVariant
+  B as AlertVariant,
+  D as ButtonVariant,
+  Q as ConfirmationPopupVariant,
+  dn as DialAlert,
+  kn as DialAutocompleteInput,
+  ke as DialAutocompleteInputValue,
+  V as DialButton,
+  un as DialCheckbox,
+  ve as DialCloseButton,
+  mn as DialCollapsibleSidebar,
+  bn as DialConfirmationPopup,
+  In as DialDropdown,
+  K as DialErrorText,
+  $ as DialFieldLabel,
+  M as DialIcon,
+  q as DialInput,
+  Gr as DialInputPopup,
+  hn as DialLabelledText,
+  mr as DialLoader,
+  fn as DialNoDataContent,
+  xn as DialNumberInputField,
+  Zr as DialPasswordInput,
+  wn as DialPasswordInputField,
+  Ne as DialPopup,
+  kr as DialRadioButton,
+  Sr as DialRadioGroup,
+  vn as DialRadioGroupPopupField,
+  Nn as DialSearch,
+  pn as DialSteps,
+  yn as DialSwitch,
+  Mr as DialTag,
+  Dn as DialTagInput,
+  Cn as DialTextAreaField,
+  gn as DialTextInputField,
+  Pr as DialTextarea,
+  O as DialTooltip,
+  qr as DropdownType,
+  H as PopupSize,
+  X as RadioGroupOrientation,
+  Y as SearchSize,
+  I as StepStatus,
+  oe as TagVariant
 };