@epam/ai-dial-ui-kit 0.3.0-rc.2 → 0.3.0-rc.4

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

@@ -1,11 +1,11 @@
 import { jsx as r, jsxs as p, Fragment as Z } from "react/jsx-runtime";
 import l from "classnames";
-import { IconCircleCheck as Ae, IconAlertTriangle as Pe, IconAlertCircle as Ve, IconInfoCircle as je, IconX as Y, IconMinus as We, IconCheck as ce, IconExclamationCircle as Oe, IconClipboardX as Be, IconChevronsLeft as ze, IconChevronsRight as He, IconEyeOff as _e, IconEye as $e, IconSearch as Ge } from "@tabler/icons-react";
-import * as R from "react";
-import { createContext as Ke, useState as F, useRef as de, useMemo as Ue, useContext as Ze, forwardRef as ue, isValidElement as Xe, cloneElement as qe, useCallback as T, useEffect as ee, useId as Qe } from "react";
-import { useFloating as re, offset as pe, flip as me, shift as fe, arrow as Ye, autoUpdate as he, useHover as xe, useFocus as Je, useDismiss as ne, useRole as te, useInteractions as se, useMergeRefs as ge, FloatingPortal as ae, FloatingArrow as er, FloatingOverlay as rr, FloatingFocusManager as ye, autoPlacement as nr, size as tr, useClick as sr } from "@floating-ui/react";
-import { createPortal as ar } from "react-dom";
-const $ = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "text-error dial-tiny mt-1", children: e }), G = ({
+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: n,
   optional: t,
@@ -25,14 +25,14 @@ const $ = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "tex
       t && /* @__PURE__ */ r("span", { className: "ml-1", children: s ?? "(Optional)" })
     ]
   }
-) : null, E = ({ icon: e, className: n }) => e ? /* @__PURE__ */ r("span", { className: l("flex-shrink-0", n), children: e }) : null;
-var S = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e.Danger = "danger", e))(S || {});
-const or = {
-  [S.Primary]: "dial-primary-button",
-  [S.Secondary]: "dial-secondary-button",
-  [S.Tertiary]: "dial-tertiary-button",
-  [S.Danger]: "dial-danger-button"
-}, B = ({
+) : 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: n,
   cssClass: t,
@@ -43,16 +43,16 @@ const or = {
   iconAfter: u,
   iconBefore: d,
   hideTitleOnMobile: i,
-  ariaLabel: m
+  ariaLabel: f
 }) => {
-  const f = l(
+  const m = l(
     "dial-small-semi",
     u ? "mr-2" : "",
     d ? "ml-2" : "",
     i ? "hidden sm:inline" : "inline",
     s
   ), g = l(
-    n && or[n],
+    n && lr[n],
     t,
     "focus-visible:outline outline-offset-0"
   );
@@ -64,28 +64,28 @@ const or = {
       className: g,
       onClick: (x) => o?.(x),
       disabled: c,
-      "aria-label": e || m,
+      "aria-label": e || f,
       children: [
-        /* @__PURE__ */ r(E, { icon: d }),
-        e && /* @__PURE__ */ r("span", { className: f, children: e }),
-        /* @__PURE__ */ r(E, { icon: u })
+        /* @__PURE__ */ r(M, { icon: d }),
+        e && /* @__PURE__ */ r("span", { className: m, children: e }),
+        /* @__PURE__ */ r(M, { icon: u })
       ]
     }
   );
 };
-var j = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(j || {});
-const lr = {
+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(Ve, { size: 24, stroke: 2 }),
-  warning: /* @__PURE__ */ r(Pe, { 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 })
-}, ir = {
-  [j.Info]: "bg-info border-info text-info",
-  [j.Success]: "bg-success border-success text-success",
-  [j.Warning]: "bg-warning border-warning text-warning",
-  [j.Error]: "bg-error border-error text-error"
-}, cr = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", ln = ({
-  variant: e = j.Info,
+}, 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,
@@ -95,27 +95,27 @@ const lr = {
   {
     role: "alert",
     className: l(
-      cr,
-      ir[e],
+      dr,
+      cr[e],
       t
     ),
     children: [
       /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ r(E, { icon: lr[e] }),
+        /* @__PURE__ */ r(M, { icon: ir[e] }),
         /* @__PURE__ */ r("div", { className: "text-primary", children: n })
       ] }),
       s && /* @__PURE__ */ r(
-        B,
+        V,
         {
           cssClass: "ml-2 text-secondary hover:text-primary",
           ariaLabel: "Close alert",
-          iconBefore: /* @__PURE__ */ r(Y, { size: 16 }),
+          iconBefore: /* @__PURE__ */ r(J, { size: 16 }),
           onClick: (o) => a?.(o)
         }
       )
     ]
   }
-), dr = "flex items-center justify-center text-secondary", ur = "shrink-0 grow-0 basis-auto animate-spin-steps", pr = (e) => /* @__PURE__ */ R.createElement("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ R.createElement("path", { d: "M24 39V46.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ R.createElement("path", { opacity: 0.4, d: "M9 24H1.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ R.createElement("path", { opacity: 0.5, d: "M8.0918 8.0918L13.3994 13.3994", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ R.createElement("path", { opacity: 0.6, d: "M24 1.5V9", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ R.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__ */ R.createElement("path", { opacity: 0.8, d: "M46.5 24H39", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ R.createElement("path", { opacity: 0.9, d: "M34.6055 34.6055L39.9082 39.9082", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ R.createElement("path", { opacity: 0.3, d: "M13.3936 34.6055L8.08594 39.9131", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" })), mr = ({
+), 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: n,
   iconClass: t,
@@ -127,78 +127,78 @@ const lr = {
     role: "status",
     "aria-label": a,
     className: l({
-      [dr]: !0,
+      [ur]: !0,
       "w-full h-full": s,
       [n || ""]: !!n
     }),
     children: /* @__PURE__ */ r(
-      E,
+      M,
       {
         icon: /* @__PURE__ */ r(
-          pr,
+          fr,
           {
             width: e,
             height: e,
-            className: l(ur, t),
+            className: l(pr, t),
             role: "img"
           }
         )
       }
     )
   }
-), fr = 7, hr = 2, Ce = Ke(null), be = () => {
-  const e = Ze(Ce);
+), 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;
-}, xr = ({
+}, gr = ({
   initialOpen: e = !1,
   placement: n = "bottom",
   isTriggerClickable: t = !1,
   open: s,
   onOpenChange: a
 } = {}) => {
-  const [o, c] = F(e), u = de(null), d = s ?? o, i = a ?? c, m = re({
+  const [o, c] = F(e), u = de(null), d = s ?? o, i = a ?? c, f = re({
     placement: n,
     open: d,
     onOpenChange: i,
     whileElementsMounted: he,
     middleware: [
-      pe(fr + hr),
-      me({
+      pe(hr + xr),
+      fe({
         crossAxis: n.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5
       }),
-      fe({ padding: 5 }),
-      Ye({
+      me({ padding: 5 }),
+      Je({
         element: u
       })
     ]
-  }), f = xe(m.context, {
+  }), m = xe(f.context, {
     move: !1,
     enabled: s == null,
     mouseOnly: t,
     delay: { open: 500, close: 0 }
-  }), g = Je(m.context, {
+  }), g = er(f.context, {
     enabled: s == null
-  }), x = ne(m.context), v = te(m.context, { role: "tooltip" }), C = se([f, g, x, v]);
-  return Ue(
+  }), x = ne(f.context), v = te(f.context, { role: "tooltip" }), y = se([m, g, x, v]);
+  return Ze(
     () => ({
       open: d,
       setOpen: i,
       arrowRef: u,
-      ...C,
-      ...m
+      ...y,
+      ...f
     }),
-    [d, i, C, m]
+    [d, i, y, f]
   );
-}, gr = ({
+}, Cr = ({
   children: e,
   ...n
 }) => {
-  const t = xr(n);
-  return /* @__PURE__ */ r(Ce.Provider, { value: t, children: e });
+  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(
@@ -217,7 +217,7 @@ const lr = {
       children: [
         t.children,
         /* @__PURE__ */ r(
-          er,
+          rr,
           {
             ref: a.arrowRef,
             context: a.context,
@@ -229,9 +229,9 @@ const lr = {
       ]
     }
   ) }) : null;
-}), Cr = ue(function({ children: n, asChild: t = !1, ...s }, a) {
+}), 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 && Xe(n) ? qe(
+  return t && qe(n) ? Qe(
     n,
     o.getReferenceProps({
       ref: d,
@@ -247,15 +247,15 @@ const lr = {
       children: n
     }
   );
-}), P = ({
+}), O = ({
   hideTooltip: e,
   tooltip: n,
   children: t,
   triggerClassName: s,
   contentClassName: a,
   ...o
-}) => /* @__PURE__ */ p(gr, { ...o, children: [
-  /* @__PURE__ */ r(Cr, { className: l(s, "truncate"), children: t }),
+}) => /* @__PURE__ */ p(Cr, { ...o, children: [
+  /* @__PURE__ */ r(br, { className: l(s, "truncate"), children: t }),
   /* @__PURE__ */ r(
     yr,
     {
@@ -268,10 +268,10 @@ const lr = {
       children: n
     }
   )
-] }), W = 18, z = {
-  size: W,
+] }), z = 18, _ = {
+  size: z,
   stroke: 2
-}, cn = ({
+}, un = ({
   label: e,
   id: n,
   checked: t,
@@ -280,9 +280,9 @@ const lr = {
   ariaLabel: o,
   onChange: c
 }) => {
-  const u = T(
-    (f) => {
-      c?.(f.target.checked, n);
+  const u = R(
+    (m) => {
+      c?.(m.target.checked, n);
     },
     [c, n]
   ), d = l(
@@ -294,8 +294,8 @@ const lr = {
     a ? "bg-layer-4 border-icon-secondary" : ""
   );
   return /* @__PURE__ */ p("label", { className: d, htmlFor: n, children: [
-    s ? /* @__PURE__ */ r(We, { className: i, ...z }) : t ? /* @__PURE__ */ r(ce, { className: i, ...z }) : null,
-    e && /* @__PURE__ */ r(P, { tooltip: e, triggerClassName: "flex-1 min-w-0", children: /* @__PURE__ */ r("p", { className: "text-primary w-full truncate", children: e }) }),
+    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",
       {
@@ -313,60 +313,60 @@ const lr = {
     )
   ] });
 };
-var D = /* @__PURE__ */ ((e) => (e.VALID = "valid", e.ERROR = "error", e))(D || {});
-const br = (e, n) => {
+var I = /* @__PURE__ */ ((e) => (e.VALID = "valid", e.ERROR = "error", e))(I || {});
+const vr = (e, n) => {
   if (n === e.id)
     switch (e.status) {
-      case D.VALID:
+      case I.VALID:
         return "border-accent-secondary text-primary";
-      case D.ERROR:
+      case I.ERROR:
         return "border-red-900 text-primary";
       default:
         return "border-accent-primary text-primary";
     }
   switch (e.status) {
-    case D.VALID:
+    case I.VALID:
       return "border-primary text-white";
-    case D.ERROR:
+    case I.ERROR:
       return "border-red-900 text-error";
     default:
       return "border-primary text-secondary";
   }
-}, vr = (e, n) => {
+}, wr = (e, n) => {
   if (n === e.id)
     switch (e.status) {
-      case D.VALID:
+      case I.VALID:
         return "bg-accent-secondary";
-      case D.ERROR:
+      case I.ERROR:
         return "bg-red-400";
       default:
         return "bg-accent-primary";
     }
   switch (e.status) {
-    case D.VALID:
+    case I.VALID:
       return "bg-accent-secondary";
-    case D.ERROR:
+    case I.ERROR:
       return "bg-red-400";
     default:
       return "bg-layer-4";
   }
-}, wr = ({
+}, Nr = ({
   step: e,
   index: n,
   currentStep: t,
   onChangeStep: s
 }) => {
-  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 === D.ERROR ? /* @__PURE__ */ r(Oe, { stroke: 2, size: 16 }) : t !== e.id && e.status === D.VALID ? /* @__PURE__ */ r(ce, { stroke: 2, size: 16 }) : n + 1;
+  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: l(a, br(e, t)),
+      className: l(a, vr(e, t)),
       onClick: () => s(e.id),
       children: [
         /* @__PURE__ */ r(
           "span",
           {
-            className: l(o, vr(e, t)),
+            className: l(o, wr(e, t)),
             children: c()
           }
         ),
@@ -374,17 +374,17 @@ const br = (e, n) => {
       ]
     }
   );
-}, dn = ({
+}, pn = ({
   steps: e,
   currentStep: n,
   onChangeStep: t
 }) => {
   const s = (a) => {
     const o = e.findIndex((u) => u.id === n), c = e.findIndex((u) => u.id === a);
-    (a !== n && e[o].status === D.VALID || c < o) && t(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((a, o) => /* @__PURE__ */ r(
-    wr,
+    Nr,
     {
       currentStep: n,
       onChangeStep: s,
@@ -393,7 +393,7 @@ const br = (e, n) => {
     },
     a.id
   )) });
-}, Nr = ({
+}, kr = ({
   name: e,
   value: n,
   title: t,
@@ -404,9 +404,9 @@ const br = (e, n) => {
   labelCssClass: u,
   disabled: d,
   onChange: i,
-  descriptionCssClass: m
+  descriptionCssClass: f
 }) => {
-  const f = `${o}-desc`, g = l(
+  const m = `${o}-desc`, g = l(
     "dial-small cursor-pointer",
     d ? "text-secondary" : "text-primary",
     u
@@ -414,9 +414,9 @@ const br = (e, n) => {
     "cursor-pointer dial-input-radio",
     t && "mr-2",
     c
-  ), v = l("flex flex-col", !!s && "mb-2"), C = l(
+  ), v = l("flex flex-col", !!s && "mb-2"), y = l(
     "dial-tiny mt-2 ml-[26px] text-secondary",
-    m
+    f
   );
   return /* @__PURE__ */ p("div", { className: v, children: [
     /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
@@ -429,7 +429,7 @@ const br = (e, n) => {
           value: n,
           checked: a,
           disabled: d,
-          "aria-describedby": a && s ? f : void 0,
+          "aria-describedby": a && s ? m : void 0,
           className: x,
           onChange: (N) => {
             d || N.target.checked && i?.(n);
@@ -438,14 +438,14 @@ const br = (e, n) => {
       ),
       t ? /* @__PURE__ */ r("label", { className: g, htmlFor: o, children: t }) : null
     ] }),
-    a && s && /* @__PURE__ */ r("div", { id: f, className: C, children: s })
+    a && s && /* @__PURE__ */ r("div", { id: m, className: y, children: s })
   ] });
 };
-var J = /* @__PURE__ */ ((e) => (e.Row = "Row", e.Column = "Column", e))(J || {});
-const kr = "flex flex-col gap-2", Dr = "flex", Ir = "pb-1 mt-2", Rr = {
-  [J.Column]: "flex-col gap-y-3",
-  [J.Row]: "flex-row gap-x-6"
-}, un = ({
+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: n,
   labelCssClass: t,
@@ -455,8 +455,8 @@ const kr = "flex flex-col gap-2", Dr = "flex", Ir = "pb-1 mt-2", Rr = {
   activeRadioButton: c,
   orientation: u,
   onChange: d
-}) => /* @__PURE__ */ p("div", { className: kr, children: [
-  e && /* @__PURE__ */ r(G, { fieldTitle: e, htmlFor: a }),
+}) => /* @__PURE__ */ p("div", { className: Dr, children: [
+  e && /* @__PURE__ */ r($, { fieldTitle: e, htmlFor: a }),
   /* @__PURE__ */ r(
     "div",
     {
@@ -464,12 +464,12 @@ const kr = "flex flex-col gap-2", Dr = "flex", Ir = "pb-1 mt-2", Rr = {
       "aria-label": e,
       "aria-disabled": s || void 0,
       className: l(
-        Dr,
-        Rr[u]
+        Ir,
+        Er[u]
       ),
       children: o.map((i) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ r(
-          Nr,
+          kr,
           {
             name: a,
             value: i.id,
@@ -482,28 +482,28 @@ const kr = "flex flex-col gap-2", Dr = "flex", Ir = "pb-1 mt-2", Rr = {
             onChange: () => d(i.id)
           }
         ),
-        i.id === c && i.content ? /* @__PURE__ */ r("div", { className: Ir, children: i.content }) : null
+        i.id === c && i.content ? /* @__PURE__ */ r("div", { className: Rr, children: i.content }) : null
       ] }, i.id))
     }
   )
-] }), pn = ({
+] }), fn = ({
   icon: e,
   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(Be, { width: 60, height: 60 }),
+  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 })
-] }), Er = 60, mn = ({
+] }), Lr = 60, mn = ({
   containerCssClass: e,
   children: n,
   width: t,
   title: s,
-  iconSize: a = W,
+  iconSize: a = z,
   titleCssClass: o,
   additionalButtons: c
 }) => {
-  const [u, d] = F(t), [i, m] = F(!0), f = l([
+  const [u, d] = F(t), [i, f] = F(!0), m = l([
     "transform rotate-180 [writing-mode:tb-rl]",
     i && "hidden",
     o
@@ -511,7 +511,7 @@ const kr = "flex flex-col gap-2", Dr = "flex", Ir = "pb-1 mt-2", Rr = {
     "flex flex-row gap-2 cursor-pointer text-secondary",
     i ? "justify-end" : "justify-center"
   ]), x = () => {
-    d(i ? Er : t), m(!i);
+    d(i ? Lr : t), f(!i);
   };
   return /* @__PURE__ */ p(
     "div",
@@ -532,25 +532,25 @@ const kr = "flex flex-col gap-2", Dr = "flex", Ir = "pb-1 mt-2", Rr = {
             children: n
           }
         ),
-        /* @__PURE__ */ r("div", { className: f, children: s }),
+        /* @__PURE__ */ r("div", { className: m, children: s }),
         /* @__PURE__ */ p("div", { className: g, children: [
           i && c,
           /* @__PURE__ */ r(
-            B,
+            V,
             {
               cssClass: "hover:text-icon-accent-primary",
               onClick: x,
               iconBefore: i ? /* @__PURE__ */ r(
-                ze,
+                He,
                 {
                   size: a,
-                  stroke: z.stroke
+                  stroke: _.stroke
                 }
               ) : /* @__PURE__ */ r(
-                He,
+                _e,
                 {
                   size: a,
-                  stroke: z.stroke
+                  stroke: _.stroke
                 }
               )
             }
@@ -559,7 +559,7 @@ const kr = "flex flex-col gap-2", Dr = "flex", Ir = "pb-1 mt-2", Rr = {
       ]
     }
   );
-}, fn = ({
+}, hn = ({
   label: e,
   text: n,
   children: t,
@@ -567,37 +567,34 @@ const kr = "flex flex-col gap-2", Dr = "flex", Ir = "pb-1 mt-2", Rr = {
 }) => /* @__PURE__ */ p(
   "div",
   {
-    className: l(
-      "flex flex-col text-secondary",
-      t ? "" : "max-w-[200px]"
-    ),
+    className: l("flex flex-col", t ? "" : "max-w-[200px]"),
     children: [
-      /* @__PURE__ */ r("label", { className: "dial-tiny mb-2", children: e }),
+      /* @__PURE__ */ r("label", { className: "dial-tiny mb-2 text-secondary", children: e }),
       t || /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
-        /* @__PURE__ */ r(P, { triggerClassName: "text-primary", tooltip: n, children: n }),
+        /* @__PURE__ */ r(O, { triggerClassName: "text-primary", tooltip: n, children: n }),
         s || null
       ] })
     ]
   }
 );
 var oe = /* @__PURE__ */ ((e) => (e.Default = "default", e))(oe || {});
-const Lr = {
+const Fr = {
   [oe.Default]: "border-icon-secondary bg-layer-3"
   // TODO: Add other variants here once they are finalized with the UI/UX team
-}, Sr = ({
+}, Mr = ({
   tag: e,
   cssClass: n,
   remove: t,
   variant: s = oe.Default
 }) => {
-  const a = Lr[s], o = l(
+  const a = Fr[s], o = l(
     "flex items-center gap-1 tiny border rounded p-1 h-[22px] text-primary",
     n,
     a
   );
   return /* @__PURE__ */ p("div", { className: o, children: [
     /* @__PURE__ */ r("span", { children: e }),
-    t && /* @__PURE__ */ r(B, { iconAfter: /* @__PURE__ */ r(Y, { size: 16 }), onClick: t })
+    t && /* @__PURE__ */ r(V, { iconAfter: /* @__PURE__ */ r(J, { size: 16 }), onClick: t })
   ] }, e);
 }, ve = ({
   ariaLabel: e,
@@ -605,14 +602,14 @@ const Lr = {
   size: t = 24,
   onClose: s
 }) => /* @__PURE__ */ r(
-  B,
+  V,
   {
     ariaLabel: e,
     cssClass: l("text-secondary hover:text-accent-primary", n),
     onClick: s,
-    iconBefore: /* @__PURE__ */ r(Y, { size: t })
+    iconBefore: /* @__PURE__ */ r(J, { size: t })
   }
-), Fr = ({
+), Pr = ({
   value: e,
   textareaId: n,
   placeholder: t,
@@ -621,7 +618,7 @@ const Lr = {
   invalid: o,
   readonly: c,
   onChange: u
-}) => /* @__PURE__ */ r(P, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
+}) => /* @__PURE__ */ r(O, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
   "textarea",
   {
     id: n,
@@ -637,7 +634,7 @@ const Lr = {
     ),
     onChange: (d) => !c && u?.(d.currentTarget.value)
   }
-) }), Mr = [
+) }), Tr = [
   "ArrowLeft",
   "ArrowRight",
   "ArrowUp",
@@ -649,8 +646,8 @@ const Lr = {
   "Escape",
   "Home",
   "End"
-], Tr = (e, n, t, s) => {
-  if ((n === "number" || t !== void 0 || s !== void 0) && !Mr.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (t === void 0 || t < 0)) && !(e.key === "." && n === "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;
@@ -669,7 +666,7 @@ const Lr = {
       }
     }
   }
-}, X = ({
+}, q = ({
   iconBefore: e,
   iconAfter: n,
   hideBorder: t,
@@ -680,27 +677,27 @@ const Lr = {
   containerCssClass: u,
   tooltipTriggerClassName: d,
   type: i = "text",
-  disabled: m,
-  readonly: f,
+  disabled: f,
+  readonly: m,
   invalid: g,
   onChange: x,
   min: v,
-  max: C,
+  max: y,
   prefix: k,
   suffix: N,
   textBeforeInput: b,
-  textAfterInput: y
+  textAfterInput: C
 }) => {
-  const w = (M) => M.target.blur(), A = i === "number" || v !== void 0 || C !== void 0, H = (M) => {
-    Tr(M, i, v, C);
-  }, K = (M) => {
-    const I = M.currentTarget.value;
-    if (A && I !== "") {
-      const V = parseFloat(I);
-      if (isNaN(V) && I !== "-" && I !== "." || !isNaN(V) && (v !== void 0 && V < v || C !== void 0 && V > C))
+  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;
     }
-    x?.(I);
+    x?.(S);
   };
   return /* @__PURE__ */ p(
     "div",
@@ -709,15 +706,15 @@ const Lr = {
         "dial-input-field flex flex-row items-center justify-between py-2",
         t ? "dial-input-no-border" : "dial-input",
         g && "dial-input-error",
-        m && "dial-input-disable",
-        f && "dial-input-readonly",
+        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(
-          X,
+          q,
           {
             hideBorder: !0,
             containerCssClass: "rounded-r-none border-r-0",
@@ -731,9 +728,9 @@ const Lr = {
           " ",
           k
         ] }),
-        /* @__PURE__ */ r(E, { icon: e }),
+        /* @__PURE__ */ r(M, { icon: e }),
         /* @__PURE__ */ r(
-          P,
+          O,
           {
             tooltip: s,
             triggerClassName: l(d, "flex-1"),
@@ -745,36 +742,36 @@ const Lr = {
                 id: a,
                 placeholder: o,
                 value: s ?? "",
-                disabled: m,
+                disabled: f,
                 className: l("border-0 bg-transparent", c),
-                onChange: (M) => !f && K?.(M),
-                onKeyDown: H,
+                onChange: (E) => !m && j?.(E),
+                onKeyDown: P,
                 onWheel: w,
                 min: v,
-                max: C
+                max: y
               }
             )
           }
         ),
-        /* @__PURE__ */ r(E, { icon: n }),
+        /* @__PURE__ */ r(M, { icon: n }),
         N && /* @__PURE__ */ p("p", { className: "text-secondary dial-small", children: [
           " ",
           N
         ] }),
-        y && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-          X,
+        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"
           }
         ) })
       ]
     }
   );
-}, Ar = /^0+\.(\d+)?$/, Pr = /^0+/, we = ({
+}, Vr = /^0+\.(\d+)?$/, Or = /^0+/, we = ({
   fieldTitle: e,
   errorText: n,
   optional: t,
@@ -785,40 +782,40 @@ const Lr = {
   readonly: u,
   defaultEmptyText: d,
   min: i,
-  max: m,
-  ...f
+  max: f,
+  ...m
 }) => /* @__PURE__ */ p("div", { className: l("flex flex-col", c), children: [
   /* @__PURE__ */ r(
-    G,
+    $,
     {
       fieldTitle: e,
       optional: t,
       htmlFor: o
     }
   ),
-  u ? /* @__PURE__ */ r("span", { children: f.value || (d ?? "None") }) : /* @__PURE__ */ p(Z, { children: [
+  u ? /* @__PURE__ */ r("span", { children: m.value || (d ?? "None") }) : /* @__PURE__ */ p(Z, { children: [
     /* @__PURE__ */ r(
-      X,
+      q,
       {
         elementId: o,
         cssClass: s,
         containerCssClass: a,
         invalid: n != null,
         min: i,
-        max: m,
-        ...f
+        max: f,
+        ...m
       }
     ),
-    /* @__PURE__ */ r($, { errorText: n })
+    /* @__PURE__ */ r(K, { errorText: n })
   ] })
-] }), hn = ({
+] }), xn = ({
   onChange: e,
   value: n,
   min: t,
   max: s,
   ...a
 }) => {
-  const o = (c) => String(c)?.match(Ar) ? String(c)?.replace(Pr, "0") : Number(c);
+  const o = (c) => String(c)?.match(Vr) ? String(c)?.replace(Or, "0") : Number(c);
   return /* @__PURE__ */ r(
     we,
     {
@@ -830,7 +827,7 @@ const Lr = {
       ...a
     }
   );
-}, xn = ({
+}, gn = ({
   onChange: e,
   ...n
 }) => /* @__PURE__ */ r(
@@ -840,7 +837,7 @@ const Lr = {
     onChange: (t) => e?.(t),
     ...n
   }
-), gn = ({
+), Cn = ({
   fieldTitle: e,
   optional: n,
   elementId: t,
@@ -849,7 +846,7 @@ const Lr = {
   ...o
 }) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ r(
-    G,
+    $,
     {
       fieldTitle: e,
       optional: n,
@@ -857,14 +854,14 @@ const Lr = {
     }
   ),
   /* @__PURE__ */ r(
-    Fr,
+    Pr,
     {
       textareaId: t,
       cssClass: s,
       ...o
     }
   ),
-  /* @__PURE__ */ r($, { errorText: a })
+  /* @__PURE__ */ r(K, { errorText: a })
 ] }), yn = ({
   title: e,
   switchId: n,
@@ -877,7 +874,7 @@ const Lr = {
     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 = T(
+  ), c = R(
     (u) => {
       u.stopPropagation(), a?.(!t);
     },
@@ -907,12 +904,12 @@ const Lr = {
     e && /* @__PURE__ */ r("span", { className: "pl-2 dial-small text-primary", children: e })
   ] });
 };
-var O = /* @__PURE__ */ ((e) => (e.Sm = "sm", e.Md = "md", e.Lg = "lg", e))(O || {});
-const Vr = "z-[52] flex items-center justify-center bg-blackout md:p-4", jr = "divide-tertiary divide-y", Wr = "flex flex-row justify-between py-4 px-6 items-center", Or = {
-  [O.Sm]: "dial-sm-popup",
-  [O.Md]: "dial-md-popup",
-  [O.Lg]: "dial-lg-popup"
-}, Br = ({
+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: n,
   portalId: t,
@@ -923,14 +920,14 @@ const Vr = "z-[52] flex items-center justify-center bg-blackout md:p-4", jr = "d
   children: u,
   footer: d,
   onClose: i,
-  size: m = O.Md
+  size: f = H.Md
 }) => {
-  const { refs: f, context: g } = re({
+  const { refs: m, context: g } = re({
     open: e,
     onOpenChange: (b) => {
       b || i?.(null);
     }
-  }), x = te(g, { role: "dialog" }), v = ne(g, { outsidePress: !0 }), { getFloatingProps: C } = se([x, v]);
+  }), x = te(g, { role: "dialog" }), v = ne(g, { outsidePress: !0 }), { getFloatingProps: y } = se([x, v]);
   if (!e) return null;
   const k = typeof n == "string" ? "dial-popup-heading" : void 0, N = (b) => b ? typeof b == "string" ? /* @__PURE__ */ r(
     "h3",
@@ -940,25 +937,25 @@ const Vr = "z-[52] flex items-center justify-center bg-blackout md:p-4", jr = "d
         "flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",
         o
       ),
-      children: /* @__PURE__ */ r(P, { tooltip: b, children: b })
+      children: /* @__PURE__ */ r(O, { tooltip: b, children: b })
     }
   ) : b : /* @__PURE__ */ r("span", {});
-  return /* @__PURE__ */ r(ae, { id: t, children: /* @__PURE__ */ r(rr, { className: l(Vr, a), children: /* @__PURE__ */ r(ye, { context: g, children: /* @__PURE__ */ p(
+  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,
-      ...C(),
+      ref: m.setFloating,
+      ...y(),
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": k,
       className: l(
         "dial-popup",
-        Or[m],
-        c && jr,
+        zr[f],
+        c && Wr,
         s
       ),
       children: [
-        /* @__PURE__ */ p("div", { className: Wr, children: [
+        /* @__PURE__ */ p("div", { className: Br, children: [
           N(n),
           /* @__PURE__ */ r(
             ve,
@@ -974,95 +971,285 @@ const Vr = "z-[52] flex items-center justify-center bg-blackout md:p-4", jr = "d
     }
   ) }) }) });
 };
-var q = /* @__PURE__ */ ((e) => (e.Info = "info", e.Danger = "danger", e))(q || {});
-const zr = "flex justify-end gap-2 px-6 py-4", Hr = "text-secondary dial-small-150 px-6 py-4", _r = "Cancel", le = {
-  [q.Info]: {
-    confirmVariant: S.Primary,
-    cancelVariant: S.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
   },
-  [q.Danger]: {
+  [Q.Danger]: {
     container: "border-t-4 border-error",
-    confirmVariant: S.Danger,
-    cancelVariant: S.Secondary
+    confirmVariant: D.Danger,
+    cancelVariant: D.Secondary
   }
-}, Cn = ({
+}, bn = ({
   title: e,
   description: n,
   descriptionCssClass: t,
   open: s = !1,
   confirmLabel: a,
-  cancelLabel: o = _r,
+  cancelLabel: o = $r,
   isLoading: c = !1,
   disableConfirmButton: u = !1,
   cssClass: d,
   confirmClassName: i,
-  onClose: m,
-  onConfirm: f,
+  onClose: f,
+  onConfirm: m,
   onCancel: g,
   children: x,
   dividers: v = !1,
-  variant: C = q.Info,
-  size: k = O.Sm
+  variant: y = Q.Info,
+  size: k = H.Sm
 }) => {
-  const N = c ? null : /* @__PURE__ */ p("div", { className: zr, children: [
+  const N = c ? null : /* @__PURE__ */ p("div", { className: Hr, children: [
     /* @__PURE__ */ r(
-      B,
+      V,
       {
-        variant: S.Secondary,
+        variant: D.Secondary,
         title: o,
-        onClick: () => g ? g() : m?.()
+        onClick: () => g ? g() : f?.()
       }
     ),
     /* @__PURE__ */ r(
-      B,
+      V,
       {
-        variant: le[C].confirmVariant,
+        variant: le[y].confirmVariant,
         cssClass: i,
         title: a,
         disable: u,
-        onClick: () => f()
+        onClick: () => m()
       }
     )
-  ] }), b = T(() => c ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r(mr, { size: 50 }) }) : x ?? (n ? /* @__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: l(Hr, t),
+      className: l(_r, t),
       children: n
     }
   ) : null), [x, n, c, t]);
   return /* @__PURE__ */ r(
-    Br,
+    Ne,
     {
       open: s,
       title: e,
-      cssClass: l(le[C].container, d),
+      cssClass: l(le[y].container, d),
       dividers: v,
-      onClose: () => m?.(),
+      onClose: () => f?.(),
       footer: N,
       size: k,
       children: b()
     }
   );
-}, $r = ({ onClick: e }) => /* @__PURE__ */ r(
-  _e,
+}, ke = ({ selectedItems: e, listCssClass: n, listElementCssClass: t }) => !!e?.length && /* @__PURE__ */ r(
+  "ul",
+  {
+    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,
   {
-    ...z,
+    ..._,
     className: "text-primary",
     onClick: e
   }
-), Gr = ({ onClick: e }) => /* @__PURE__ */ r($e, { ...z, className: "text-primary", onClick: e }), Kr = ({ ...e }) => {
-  const [n, t] = F(!1), s = T((a) => {
+), 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(
-    X,
+    q,
     {
       type: n ? "text" : "password",
       ...e,
-      iconAfter: n ? /* @__PURE__ */ r($r, { onClick: () => s(!1) }) : /* @__PURE__ */ r(Gr, { onClick: () => s(!0) })
+      iconAfter: n ? /* @__PURE__ */ r(Kr, { onClick: () => s(!1) }) : /* @__PURE__ */ r(Ur, { onClick: () => s(!0) })
     }
   );
-}, bn = ({
+}, wn = ({
   fieldTitle: e,
   optional: n,
   elementCssClass: t,
@@ -1071,7 +1258,7 @@ const zr = "flex justify-end gap-2 px-6 py-4", Hr = "text-secondary dial-small-1
   ...o
 }) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ r(
-    G,
+    $,
     {
       fieldTitle: e,
       optional: n,
@@ -1079,7 +1266,7 @@ const zr = "flex justify-end gap-2 px-6 py-4", Hr = "text-secondary dial-small-1
     }
   ),
   /* @__PURE__ */ r(
-    Kr,
+    Zr,
     {
       cssClass: t,
       elementId: s,
@@ -1087,23 +1274,23 @@ const zr = "flex justify-end gap-2 px-6 py-4", Hr = "text-secondary dial-small-1
       ...o
     }
   ),
-  /* @__PURE__ */ r($, { errorText: a })
+  /* @__PURE__ */ r(K, { errorText: a })
 ] });
-var Q = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(Q || {});
-const Ur = {
-  [Q.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
   },
-  [Q.Base]: {
+  [Y.Base]: {
     textClass: "text-sm px-2",
     containerClass: "px-3 py-2 h-[38px]",
     iconSize: 18,
     iconStroke: 1.5
   }
-}, vn = ({
+}, Nn = ({
   elementId: e,
   value: n,
   placeholder: t,
@@ -1113,18 +1300,18 @@ const Ur = {
   cssClass: c,
   containerCssClass: u,
   onChange: d,
-  size: i = Q.Base
+  size: i = Y.Base
 }) => {
-  const [m, f] = F(n || "");
+  const [f, m] = F(n || "");
   ee(() => {
-    f(n || "");
+    m(n || "");
   }, [n]);
-  const g = T(
-    (C) => {
-      f(C), d?.(C);
+  const g = R(
+    (y) => {
+      m(y), d?.(y);
     },
     [d]
-  ), x = Ur[i], v = T(() => {
+  ), x = Xr[i], v = R(() => {
     g("");
   }, [g]);
   return /* @__PURE__ */ p(
@@ -1140,11 +1327,11 @@ const Ur = {
       ),
       children: [
         /* @__PURE__ */ r(
-          E,
+          M,
           {
             className: l(s ? "text-secondary" : "text-primary"),
             icon: /* @__PURE__ */ r(
-              Ge,
+              Ke,
               {
                 size: x.iconSize,
                 stroke: x.iconStroke
@@ -1159,7 +1346,7 @@ const Ur = {
             type: "text",
             autoComplete: "off",
             placeholder: t,
-            value: m ?? "",
+            value: f ?? "",
             disabled: s,
             readOnly: a,
             className: l(
@@ -1167,15 +1354,15 @@ const Ur = {
               c,
               x.textClass
             ),
-            onChange: (C) => !a && g(C.currentTarget.value)
+            onChange: (y) => !a && g(y.currentTarget.value)
           }
         ),
-        m && !a && !s && /* @__PURE__ */ r(
-          E,
+        f && !a && !s && /* @__PURE__ */ r(
+          M,
           {
             className: "text-primary cursor-pointer",
             icon: /* @__PURE__ */ r(
-              Y,
+              J,
               {
                 size: x.iconSize,
                 stroke: x.iconStroke,
@@ -1189,115 +1376,7 @@ const Ur = {
       ]
     }
   );
-}, Ne = ({ selectedItems: e, listCssClass: n, listElementCssClass: t }) => !!e?.length && /* @__PURE__ */ r(
-  "ul",
-  {
-    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(P, { tooltip: s, children: /* @__PURE__ */ r(
-          "button",
-          {
-            "aria-label": "autocomplete-action",
-            type: "button",
-            className: "truncate w-full",
-            children: s
-          }
-        ) })
-      },
-      s
-    ))
-  }
-), ie = (e) => /* @__PURE__ */ R.createElement("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ R.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" })), wn = ({
-  children: e,
-  open: n,
-  readonly: t,
-  selectedValue: s,
-  valueCssClasses: a,
-  inputCssClasses: o,
-  onOpen: c,
-  elementId: u,
-  errorText: d,
-  emptyValueText: i
-}) => {
-  const m = Array.isArray(s) && s.length > 0, f = typeof s == "string" && !!s.trim(), g = m || f ? s : i, x = t ? void 0 : c;
-  return /* @__PURE__ */ p(Z, { children: [
-    m ? /* @__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(Ne, { selectedItems: g }),
-          !t && /* @__PURE__ */ r("div", { className: "ml-1", children: /* @__PURE__ */ r(
-            E,
-            {
-              icon: /* @__PURE__ */ r(
-                ie,
-                {
-                  role: "img",
-                  width: W,
-                  height: W
-                }
-              )
-            }
-          ) })
-        ]
-      }
-    ) }) : /* @__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(P, { tooltip: String(g), children: /* @__PURE__ */ r("span", { className: a, children: g }) }),
-                !t && /* @__PURE__ */ r("div", { className: "flex-shrink-0", children: /* @__PURE__ */ r(
-                  E,
-                  {
-                    icon: /* @__PURE__ */ r(
-                      ie,
-                      {
-                        role: "img",
-                        width: W,
-                        height: W
-                      }
-                    )
-                  }
-                ) })
-              ]
-            }
-          )
-        }
-      ),
-      d && /* @__PURE__ */ r($, { errorText: d })
-    ] }),
-    n && ar(e, document.body)
-  ] });
-}, Nn = ({
+}, kn = ({
   placeholder: e = "",
   selectedItems: n = [],
   updateSelected: t,
@@ -1306,14 +1385,14 @@ const Ur = {
   containerCssClass: o,
   inputCssClass: c
 }) => {
-  const [u, d] = F(""), i = T(
-    (f) => {
-      f.key === "Enter" && (t([...n, f.currentTarget.value]), d("")), (f.key === "Backspace" || f.key === "Delete") && n.length && !u && t(n.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));
     },
     [n, t, u]
-  ), m = T(
-    (f) => {
-      d(f.target.value);
+  ), f = R(
+    (m) => {
+      d(m.target.value);
     },
     [d]
   );
@@ -1326,7 +1405,7 @@ const Ur = {
       ]),
       children: [
         /* @__PURE__ */ r(
-          Ne,
+          ke,
           {
             selectedItems: n,
             listCssClass: s,
@@ -1341,13 +1420,13 @@ const Ur = {
             className: l(["border-0 bg-transparent p-0", c]),
             placeholder: n?.length ? "" : e,
             onKeyDown: i,
-            onChange: m
+            onChange: f
           }
         )
       ]
     }
   );
-}, kn = ({
+}, Dn = ({
   initialTags: e = [],
   fieldTitle: n,
   optional: t,
@@ -1358,29 +1437,29 @@ const Ur = {
   disabled: u,
   onChange: d
 }) => {
-  const i = de(null), [m, f] = F(e), [g, x] = F(""), [v, C] = F(!1), k = (y) => {
-    const w = y.trim().replace(/,$/, "");
-    if (w && !m.includes(w)) {
-      const A = [w, ...m];
-      f(A), d?.(A);
+  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);
     }
-  }, N = (y) => {
-    (y.key === "," || y.key === "Enter") && (y.preventDefault(), k(g), x(""));
-  }, b = (y) => {
-    const w = m.filter((A, H) => H !== y);
-    f(w), d?.(w);
+  }, 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 ee(() => {
-    const y = new ResizeObserver(() => {
+    const C = new ResizeObserver(() => {
       if (i.current) {
         const w = i.current.scrollHeight > i.current.clientHeight + 10;
-        C(w);
+        y(w);
       }
     });
-    return i.current && y.observe(i.current), () => y.disconnect();
-  }, [m]), /* @__PURE__ */ p("div", { className: l("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(
-      G,
+      $,
       {
         fieldTitle: n,
         optional: t,
@@ -1404,20 +1483,20 @@ const Ur = {
               v ? "flex-col-reverse" : "flex-row"
             ),
             children: [
-              m.map((y, w) => /* @__PURE__ */ r(
-                Sr,
+              f.map((C, w) => /* @__PURE__ */ r(
+                Mr,
                 {
-                  tag: y,
+                  tag: C,
                   remove: u ? void 0 : () => b(w)
                 },
-                y + w
+                C + w
               )),
               /* @__PURE__ */ r(
                 "input",
                 {
                   type: "text",
                   value: g,
-                  onChange: (y) => x(y.target.value),
+                  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"
@@ -1431,99 +1510,99 @@ const Ur = {
         )
       }
     ),
-    /* @__PURE__ */ r($, { errorText: o })
+    /* @__PURE__ */ r(K, { errorText: o })
   ] });
 };
-var Zr = /* @__PURE__ */ ((e) => (e.Dropdown = "dropdown", e.Menu = "menu", e))(Zr || {}), _ = /* @__PURE__ */ ((e) => (e.Click = "click", e.Hover = "hover", e.ContextMenu = "contextMenu", e))(_ || {}), ke = /* @__PURE__ */ ((e) => (e.Item = "item", e.Divider = "divider", e))(ke || {});
-const Xr = l(
+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"
-), qr = l(
+), Yr = l(
   "z-[53] overflow-auto rounded bg-layer-0 text-primary shadow focus-visible:outline-none",
   "w-max"
-), Qr = l(
+), 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"
-), Yr = "opacity-75 !cursor-not-allowed", Jr = "text-error", en = "my-1 border-t border-hover", U = 8, Dn = ({
+), 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 = [_.Click],
+  trigger: s = [G.Click],
   placement: a,
   disabled: o = !1,
   open: c,
   defaultOpen: u = !1,
   onOpenChange: d,
   closable: i = !1,
-  onClose: m,
-  cssClass: f,
+  onClose: f,
+  cssClass: m,
   listClassName: g,
   outsidePressIgnoreRef: x,
   outsideClosable: v = !0
 }) => {
-  const [C, k] = F(u), N = c !== void 0, b = N ? !!c : C, y = T(
+  const [y, k] = F(u), N = c !== void 0, b = N ? !!c : y, C = R(
     (h) => {
       N || k(h), d?.(h);
     },
     [N, d]
-  ), w = Qe(), A = (h) => h ? "clientWidth" in h ? h.clientWidth : h.getBoundingClientRect?.()?.width ?? 0 : 0, H = a === void 0, { refs: K, floatingStyles: M, context: I } = re({
+  ), 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: y,
+    onOpenChange: C,
     whileElementsMounted: he,
     middleware: [
       pe({ mainAxis: U, crossAxis: 0 }),
-      H ? nr({
+      P ? tr({
         alignment: "start",
         crossAxis: !0,
         padding: U
-      }) : me({ padding: U }),
-      fe({ padding: U }),
-      tr({
-        apply({ availableWidth: h, elements: L }) {
-          const Te = A(L.reference);
-          L.floating.style.setProperty(
+      }) : 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`
-          ), L.floating.style.maxWidth = `${h}px`;
+          ), T.floating.style.maxWidth = `${h}px`;
         }
       })
     ]
-  }), V = sr(I, {
-    enabled: s.includes(_.Click) && !o
-  }), De = xe(I, {
-    enabled: s.includes(_.Hover) && !o,
+  }), 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 }
-  }), Ie = ne(I, {
+  }), Re = ne(S, {
     bubbles: !0,
     referencePress: !1,
     outsidePress: (h) => {
       if (!v) return !1;
-      const L = h.target;
-      return !(x?.current && L instanceof Node && x.current.contains(L));
+      const T = h.target;
+      return !(x?.current && T instanceof Node && x.current.contains(T));
     }
-  }), Re = te(I, { role: "menu" }), { getReferenceProps: Ee, getFloatingProps: Le } = se([
-    V,
-    De,
+  }), Ee = te(S, { role: "menu" }), { getReferenceProps: Se, getFloatingProps: Le } = se([
+    W,
     Ie,
-    Re
-  ]), Se = (h) => {
-    !s.includes(_.ContextMenu) || o || (h.preventDefault(), y(!0));
+    Re,
+    Ee
+  ]), Fe = (h) => {
+    !s.includes(G.ContextMenu) || o || (h.preventDefault(), C(!0));
   };
   ee(() => {
-    o && b && y(!1);
-  }, [o, b, y]);
-  const Fe = (h) => (L) => {
-    h.disabled || (h.onClick?.({ key: h.key, domEvent: L }), n?.onClick?.({ key: h.key, domEvent: L }), y(!1));
-  }, Me = t ? t() : n && /* @__PURE__ */ r("div", { role: "none", className: "py-1", children: n.items.map((h) => h.type === ke.Divider ? /* @__PURE__ */ r(
+    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: en
+      className: nn
     },
     h.key
   ) : /* @__PURE__ */ p(
@@ -1533,12 +1612,12 @@ const Xr = l(
       type: "button",
       "aria-disabled": !!h.disabled,
       className: l(
-        Qr,
-        h.disabled && Yr,
-        h.danger && Jr
+        Jr,
+        h.disabled && en,
+        h.danger && rn
       ),
       disabled: h.disabled,
-      onClick: Fe(h),
+      onClick: Me(h),
       children: [
         h.icon && /* @__PURE__ */ r(
           "span",
@@ -1547,7 +1626,7 @@ const Xr = l(
               h.danger && "text-error",
               h.disabled && "text-secondary"
             ),
-            children: /* @__PURE__ */ r(E, { icon: h.icon })
+            children: /* @__PURE__ */ r(M, { icon: h.icon })
           }
         ),
         /* @__PURE__ */ r(
@@ -1569,24 +1648,24 @@ const Xr = l(
     /* @__PURE__ */ r(
       "span",
       {
-        ref: K.setReference,
+        ref: j.setReference,
         className: l(
-          Xr,
+          Qr,
           o && "!cursor-not-allowed opacity-75",
-          f
+          m
         ),
         "aria-haspopup": "menu",
         "aria-expanded": b,
         "aria-controls": w,
-        onContextMenu: Se,
-        ...Ee(),
+        onContextMenu: Fe,
+        ...Se(),
         children: e
       }
     ),
     b && /* @__PURE__ */ r(ae, { children: /* @__PURE__ */ r(
-      ye,
+      Ce,
       {
-        context: I,
+        context: S,
         modal: !1,
         initialFocus: -1,
         returnFocus: !0,
@@ -1594,9 +1673,9 @@ const Xr = l(
           "div",
           {
             id: w,
-            ref: K.setFloating,
-            style: M,
-            className: l(qr, g),
+            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(
@@ -1604,11 +1683,11 @@ const Xr = l(
                 {
                   ariaLabel: "Close dropdown",
                   onClose: (h) => {
-                    m?.(h), y(!1);
+                    f?.(h), C(!1);
                   }
                 }
               ) }),
-              Me
+              Pe
             ]
           }
         )
@@ -1617,45 +1696,46 @@ const Xr = l(
   ] });
 };
 export {
-  j as AlertVariant,
-  S as ButtonVariant,
-  q as ConfirmationPopupVariant,
-  ln as DialAlert,
-  Nn as DialAutocompleteInput,
-  Ne as DialAutocompleteInputValue,
-  B as DialButton,
-  cn as DialCheckbox,
+  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,
-  Cn as DialConfirmationPopup,
-  Dn as DialDropdown,
-  $ as DialErrorText,
-  G as DialFieldLabel,
-  E as DialIcon,
-  X as DialInput,
-  wn as DialInputPopup,
-  fn as DialLabelledText,
+  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,
-  pn as DialNoDataContent,
-  hn as DialNumberInputField,
-  Kr as DialPasswordInput,
-  bn as DialPasswordInputField,
-  Br as DialPopup,
-  Nr as DialRadioButton,
-  un as DialRadioGroup,
-  vn as DialSearch,
-  dn as DialSteps,
+  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,
-  Sr as DialTag,
-  kn as DialTagInput,
-  gn as DialTextAreaField,
-  xn as DialTextInputField,
-  Fr as DialTextarea,
-  P as DialTooltip,
-  Zr as DropdownType,
-  O as PopupSize,
-  J as RadioGroupOrientation,
-  Q as SearchSize,
-  D as StepStatus,
+  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
 };