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

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

@@ -1,16 +1,17 @@
-import { jsx as r, jsxs as m, Fragment as le } from "react/jsx-runtime";
+import { jsx as r, jsxs as p, Fragment as _ } from "react/jsx-runtime";
 import i from "classnames";
-import { IconCircleCheck as ie, IconAlertTriangle as ce, IconAlertCircle as de, IconInfoCircle as ue, IconX as _, IconMinus as pe, IconCheck as K, IconExclamationCircle as me, IconClipboardX as fe, IconChevronsLeft as he, IconChevronsRight as xe, IconEyeOff as ge, IconEye as ye, IconSearch as be } from "@tabler/icons-react";
-import * as w from "react";
-import { createContext as Ce, useState as S, useRef as ve, useMemo as we, useContext as Ne, forwardRef as U, isValidElement as ke, cloneElement as De, useCallback as D, useEffect as Ie } from "react";
-import { useFloating as G, offset as Le, flip as Re, shift as Ee, arrow as Se, autoUpdate as Te, useHover as Fe, useFocus as je, useDismiss as Z, useRole as X, useInteractions as q, useMergeRefs as Q, FloatingPortal as Y, FloatingArrow as Pe, FloatingOverlay as Ae, FloatingFocusManager as Me } from "@floating-ui/react";
-const H = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "text-error dial-tiny mt-1", children: e }), V = ({
+import { IconCircleCheck as de, IconAlertTriangle as ue, IconAlertCircle as pe, IconInfoCircle as me, IconX as $, IconMinus as fe, IconCheck as G, IconExclamationCircle as he, IconClipboardX as xe, IconChevronsLeft as ge, IconChevronsRight as Ce, IconEyeOff as ye, IconEye as be, IconSearch as ve } from "@tabler/icons-react";
+import * as v from "react";
+import { createContext as we, useState as T, useRef as Ne, useMemo as ke, useContext as De, forwardRef as X, isValidElement as Ie, cloneElement as Le, useCallback as I, useEffect as Se } from "react";
+import { useFloating as q, offset as Ee, flip as Re, shift as Fe, arrow as Te, autoUpdate as Me, useHover as je, useFocus as Ve, useDismiss as Q, useRole as Y, useInteractions as J, useMergeRefs as ee, FloatingPortal as re, FloatingArrow as Pe, FloatingOverlay as Ae, FloatingFocusManager as Oe } from "@floating-ui/react";
+import { createPortal as We } from "react-dom";
+const z = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "text-error dial-tiny mt-1", children: e }), H = ({
   fieldTitle: e,
   htmlFor: t,
   optional: n,
   optionalText: a,
   cssClass: s
-}) => e ? /* @__PURE__ */ m(
+}) => e ? /* @__PURE__ */ p(
   "label",
   {
     className: i(
@@ -24,14 +25,14 @@ const H = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "tex
       n && /* @__PURE__ */ r("span", { className: "ml-1", children: a ?? "(Optional)" })
     ]
   }
-) : null, I = ({ icon: e, className: t }) => e ? /* @__PURE__ */ r("span", { className: i("flex-shrink-0", t), children: e }) : null;
-var v = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e.Danger = "danger", e))(v || {});
-const We = {
-  [v.Primary]: "dial-primary-button",
-  [v.Secondary]: "dial-secondary-button",
-  [v.Tertiary]: "dial-tertiary-button",
-  [v.Danger]: "dial-danger-button"
-}, P = ({
+) : null, N = ({ icon: e, className: t }) => e ? /* @__PURE__ */ r("span", { className: i("flex-shrink-0", t), children: e }) : null;
+var w = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e.Danger = "danger", e))(w || {});
+const Be = {
+  [w.Primary]: "dial-primary-button",
+  [w.Secondary]: "dial-secondary-button",
+  [w.Tertiary]: "dial-tertiary-button",
+  [w.Danger]: "dial-danger-button"
+}, V = ({
   title: e,
   variant: t,
   cssClass: n,
@@ -42,7 +43,7 @@ const We = {
   iconAfter: u,
   iconBefore: d,
   hideTitleOnMobile: c,
-  ariaLabel: p
+  ariaLabel: m
 }) => {
   const f = i(
     "dial-small-semi",
@@ -51,11 +52,11 @@ const We = {
     c ? "hidden sm:inline" : "inline",
     a
   ), x = i(
-    t && We[t],
+    t && Be[t],
     n,
     "focus-visible:outline outline-offset-0"
   );
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ p(
     "button",
     {
       ref: s,
@@ -63,58 +64,58 @@ const We = {
       className: x,
       onClick: (h) => o?.(h),
       disabled: l,
-      "aria-label": e || p,
+      "aria-label": e || m,
       children: [
-        /* @__PURE__ */ r(I, { icon: d }),
+        /* @__PURE__ */ r(N, { icon: d }),
         e && /* @__PURE__ */ r("span", { className: f, children: e }),
-        /* @__PURE__ */ r(I, { icon: u })
+        /* @__PURE__ */ r(N, { icon: u })
       ]
     }
   );
 };
-var R = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(R || {});
-const Be = {
-  info: /* @__PURE__ */ r(ue, { size: 24, stroke: 2 }),
-  error: /* @__PURE__ */ r(de, { size: 24, stroke: 2 }),
-  warning: /* @__PURE__ */ r(ce, { size: 24, stroke: 2 }),
-  success: /* @__PURE__ */ r(ie, { size: 24, stroke: 2 })
-}, Oe = {
-  [R.Info]: "bg-info border-info text-info",
-  [R.Success]: "bg-success border-success text-success",
-  [R.Warning]: "bg-warning border-warning text-warning",
-  [R.Error]: "bg-error border-error text-error"
-}, Ve = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", Tr = ({
-  variant: e = R.Info,
+var E = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(E || {});
+const ze = {
+  info: /* @__PURE__ */ r(me, { size: 24, stroke: 2 }),
+  error: /* @__PURE__ */ r(pe, { size: 24, stroke: 2 }),
+  warning: /* @__PURE__ */ r(ue, { size: 24, stroke: 2 }),
+  success: /* @__PURE__ */ r(de, { size: 24, stroke: 2 })
+}, He = {
+  [E.Info]: "bg-info border-info text-info",
+  [E.Success]: "bg-success border-success text-success",
+  [E.Warning]: "bg-warning border-warning text-warning",
+  [E.Error]: "bg-error border-error text-error"
+}, _e = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", Mr = ({
+  variant: e = E.Info,
   message: t,
   cssClass: n,
   closable: a = !1,
   onClose: s
-}) => /* @__PURE__ */ m(
+}) => /* @__PURE__ */ p(
   "div",
   {
     role: "alert",
     className: i(
-      Ve,
-      Oe[e],
+      _e,
+      He[e],
       n
     ),
     children: [
-      /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ r(I, { icon: Be[e] }),
+      /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ r(N, { icon: ze[e] }),
         /* @__PURE__ */ r("div", { className: "text-primary", children: t })
       ] }),
       a && /* @__PURE__ */ r(
-        P,
+        V,
         {
           cssClass: "ml-2 text-secondary hover:text-primary",
           ariaLabel: "Close alert",
-          iconBefore: /* @__PURE__ */ r(_, { size: 16 }),
+          iconBefore: /* @__PURE__ */ r($, { size: 16 }),
           onClick: (o) => s?.(o)
         }
       )
     ]
   }
-), ze = "flex items-center justify-center text-secondary", _e = "shrink-0 grow-0 basis-auto animate-spin-steps", He = (e) => /* @__PURE__ */ w.createElement("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ w.createElement("path", { d: "M24 39V46.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.4, d: "M9 24H1.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.5, d: "M8.0918 8.0918L13.3994 13.3994", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.6, d: "M24 1.5V9", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.7, d: "M39.9121 8.08594L37.2607 10.7373L34.6094 13.3887", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.8, d: "M46.5 24H39", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.9, d: "M34.6055 34.6055L39.9082 39.9082", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.3, d: "M13.3936 34.6055L8.08594 39.9131", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" })), $e = ({
+), Ze = "flex items-center justify-center text-secondary", $e = "shrink-0 grow-0 basis-auto animate-spin-steps", Ke = (e) => /* @__PURE__ */ v.createElement("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ v.createElement("path", { d: "M24 39V46.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.4, d: "M9 24H1.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.5, d: "M8.0918 8.0918L13.3994 13.3994", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.6, d: "M24 1.5V9", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.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__ */ v.createElement("path", { opacity: 0.8, d: "M46.5 24H39", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.9, d: "M34.6055 34.6055L39.9082 39.9082", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.3, d: "M13.3936 34.6055L8.08594 39.9131", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" })), Ue = ({
   size: e = 18,
   cssClass: t,
   iconClass: n,
@@ -127,81 +128,81 @@ const Be = {
     "aria-label": s,
     name: "loader",
     className: i({
-      [ze]: !0,
+      [Ze]: !0,
       "w-full h-full": a,
       [t || ""]: !!t
     }),
     children: /* @__PURE__ */ r(
-      I,
+      N,
       {
         icon: /* @__PURE__ */ r(
-          He,
+          Ke,
           {
             width: e,
             height: e,
-            className: i(_e, n),
+            className: i($e, n),
             role: "img"
           }
         )
       }
     )
   }
-), Ke = 7, Ue = 2, J = Ce(null), ee = () => {
-  const e = Ne(J);
+), Ge = 7, Xe = 2, te = we(null), ne = () => {
+  const e = De(te);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
   return e;
-}, Ge = ({
+}, qe = ({
   initialOpen: e = !1,
   placement: t = "bottom",
   isTriggerClickable: n = !1,
   open: a,
   onOpenChange: s
 } = {}) => {
-  const [o, l] = S(e), u = ve(null), d = a ?? o, c = s ?? l, p = G({
+  const [o, l] = T(e), u = Ne(null), d = a ?? o, c = s ?? l, m = q({
     placement: t,
     open: d,
     onOpenChange: c,
-    whileElementsMounted: Te,
+    whileElementsMounted: Me,
     middleware: [
-      Le(Ke + Ue),
+      Ee(Ge + Xe),
       Re({
         crossAxis: t.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5
       }),
-      Ee({ padding: 5 }),
-      Se({
+      Fe({ padding: 5 }),
+      Te({
         element: u
       })
     ]
-  }), f = Fe(p.context, {
+  }), f = je(m.context, {
     move: !1,
     enabled: a == null,
     mouseOnly: n,
     delay: { open: 500, close: 0 }
-  }), x = je(p.context, {
+  }), x = Ve(m.context, {
     enabled: a == null
-  }), h = Z(p.context), b = X(p.context, { role: "tooltip" }), g = q([f, x, h, b]);
-  return we(
+  }), h = Q(m.context), C = Y(m.context, { role: "tooltip" }), g = J([f, x, h, C]);
+  return ke(
     () => ({
       open: d,
       setOpen: c,
       arrowRef: u,
       ...g,
-      ...p
+      ...m
     }),
-    [d, c, g, p]
+    [d, c, g, m]
   );
-}, Ze = ({
+}, Qe = ({
   children: e,
   ...t
 }) => {
-  const n = Ge(t);
-  return /* @__PURE__ */ r(J.Provider, { value: n, children: e });
-}, Xe = U(function({ style: t, ...n }, a) {
-  const s = ee(), o = Q([s.refs.setFloating, a]);
-  return s.open ? /* @__PURE__ */ r(Y, { id: "tooltip-portal", children: /* @__PURE__ */ m(
+  const n = qe(t);
+  return /* @__PURE__ */ r(te.Provider, { value: n, children: e });
+}, Ye = X(function({ style: t, ...n }, a) {
+  const s = ne(), o = ee([s.refs.setFloating, a]);
+  return s.open ? /* @__PURE__ */ r(re, { id: "tooltip-portal", children: /* @__PURE__ */ p(
     "div",
     {
       ref: o,
@@ -229,9 +230,9 @@ const Be = {
       ]
     }
   ) }) : null;
-}), qe = U(function({ children: t, asChild: n = !1, ...a }, s) {
-  const o = ee(), u = t && typeof t == "object" && "ref" in t && t.ref !== void 0 ? t.ref : void 0, d = Q([o.refs.setReference, s, u]);
-  return n && ke(t) ? De(
+}), Je = X(function({ children: t, asChild: n = !1, ...a }, s) {
+  const o = ne(), u = t && typeof t == "object" && "ref" in t && t.ref !== void 0 ? t.ref : void 0, d = ee([o.refs.setReference, s, u]);
+  return n && Ie(t) ? Le(
     t,
     o.getReferenceProps({
       ref: d,
@@ -247,17 +248,17 @@ const Be = {
       children: t
     }
   );
-}), F = ({
+}), S = ({
   hideTooltip: e,
   tooltip: t,
   children: n,
   triggerClassName: a,
   contentClassName: s,
   ...o
-}) => /* @__PURE__ */ m(Ze, { ...o, children: [
-  /* @__PURE__ */ r(qe, { className: i(a, "truncate"), children: n }),
+}) => /* @__PURE__ */ p(Qe, { ...o, children: [
+  /* @__PURE__ */ r(Je, { className: i(a, "truncate"), children: n }),
   /* @__PURE__ */ r(
-    Xe,
+    Ye,
     {
       className: i(
         "text-primary",
@@ -268,10 +269,10 @@ const Be = {
       children: t
     }
   )
-] }), re = 18, T = {
-  size: re,
+] }), R = 18, M = {
+  size: R,
   stroke: 2
-}, Fr = ({
+}, jr = ({
   label: e,
   id: t,
   checked: n,
@@ -280,9 +281,9 @@ const Be = {
   ariaLabel: o,
   onChange: l
 }) => {
-  const u = D(
-    (p) => {
-      p.stopPropagation(), l?.(p.target.checked, t);
+  const u = I(
+    (m) => {
+      m.stopPropagation(), l?.(m.target.checked, t);
     },
     [l, t]
   ), d = i(
@@ -293,9 +294,9 @@ const Be = {
     "mr-2 border rounded",
     s ? "bg-layer-4 border-icon-secondary" : ""
   );
-  return /* @__PURE__ */ m("label", { className: d, htmlFor: t, children: [
-    n && (a ? /* @__PURE__ */ r(pe, { className: c, ...T }) : /* @__PURE__ */ r(K, { className: c, ...T })),
-    e && /* @__PURE__ */ r(F, { tooltip: e, triggerClassName: "flex-1 min-w-0", children: /* @__PURE__ */ r("p", { className: "text-primary w-full truncate", children: e }) }),
+  return /* @__PURE__ */ p("label", { className: d, htmlFor: t, children: [
+    n && (a ? /* @__PURE__ */ r(fe, { className: c, ...M }) : /* @__PURE__ */ r(G, { className: c, ...M })),
+    e && /* @__PURE__ */ r(S, { tooltip: e, triggerClassName: "flex-1 min-w-0", children: /* @__PURE__ */ r("p", { className: "text-primary w-full truncate", children: e }) }),
     /* @__PURE__ */ r(
       "input",
       {
@@ -311,60 +312,60 @@ const Be = {
     )
   ] });
 };
-var C = /* @__PURE__ */ ((e) => (e.VALID = "valid", e.ERROR = "error", e))(C || {});
-const Qe = (e, t) => {
+var b = /* @__PURE__ */ ((e) => (e.VALID = "valid", e.ERROR = "error", e))(b || {});
+const er = (e, t) => {
   if (t === e.id)
     switch (e.status) {
-      case C.VALID:
+      case b.VALID:
         return "border-accent-secondary text-primary";
-      case C.ERROR:
+      case b.ERROR:
         return "border-red-900 text-primary";
       default:
         return "border-accent-primary text-primary";
     }
   switch (e.status) {
-    case C.VALID:
+    case b.VALID:
       return "border-primary text-white";
-    case C.ERROR:
+    case b.ERROR:
       return "border-red-900 text-error";
     default:
       return "border-primary text-secondary";
   }
-}, Ye = (e, t) => {
+}, rr = (e, t) => {
   if (t === e.id)
     switch (e.status) {
-      case C.VALID:
+      case b.VALID:
         return "bg-accent-secondary";
-      case C.ERROR:
+      case b.ERROR:
         return "bg-red-400";
       default:
         return "bg-accent-primary";
     }
   switch (e.status) {
-    case C.VALID:
+    case b.VALID:
       return "bg-accent-secondary";
-    case C.ERROR:
+    case b.ERROR:
       return "bg-red-400";
     default:
       return "bg-layer-4";
   }
-}, Je = ({
+}, tr = ({
   step: e,
   index: t,
   currentStep: n,
   onChangeStep: a
 }) => {
-  const s = "h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer", o = "w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white", l = () => n === e.id && e.status === C.ERROR ? /* @__PURE__ */ r(me, { stroke: 2, size: 16 }) : n !== e.id && e.status === C.VALID ? /* @__PURE__ */ r(K, { stroke: 2, size: 16 }) : t + 1;
-  return /* @__PURE__ */ m(
+  const s = "h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer", o = "w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white", l = () => n === e.id && e.status === b.ERROR ? /* @__PURE__ */ r(he, { stroke: 2, size: 16 }) : n !== e.id && e.status === b.VALID ? /* @__PURE__ */ r(G, { stroke: 2, size: 16 }) : t + 1;
+  return /* @__PURE__ */ p(
     "button",
     {
-      className: i(s, Qe(e, n)),
+      className: i(s, er(e, n)),
       onClick: () => a(e.id),
       children: [
         /* @__PURE__ */ r(
           "span",
           {
-            className: i(o, Ye(e, n)),
+            className: i(o, rr(e, n)),
             children: l()
           }
         ),
@@ -372,17 +373,17 @@ const Qe = (e, t) => {
       ]
     }
   );
-}, jr = ({
+}, Vr = ({
   steps: e,
   currentStep: t,
   onChangeStep: n
 }) => {
   const a = (s) => {
     const o = e.findIndex((u) => u.id === t), l = e.findIndex((u) => u.id === s);
-    (s !== t && e[o].status === C.VALID || l < o) && n(s);
+    (s !== t && e[o].status === b.VALID || l < o) && n(s);
   };
   return /* @__PURE__ */ r("div", { id: "steps", className: "flex gap-x-3", children: e.map((s, o) => /* @__PURE__ */ r(
-    Je,
+    tr,
     {
       currentStep: t,
       onChangeStep: a,
@@ -391,7 +392,7 @@ const Qe = (e, t) => {
     },
     s.id
   )) });
-}, er = ({
+}, nr = ({
   name: e,
   value: t,
   title: n,
@@ -402,7 +403,7 @@ const Qe = (e, t) => {
   labelCssClass: u,
   disabled: d,
   onChange: c,
-  descriptionCssClass: p
+  descriptionCssClass: m
 }) => {
   const f = `${o}-desc`, x = i(
     "dial-small cursor-pointer",
@@ -412,12 +413,12 @@ const Qe = (e, t) => {
     "cursor-pointer dial-input-radio",
     n && "mr-2",
     l
-  ), b = i("flex flex-col", !!a && "mb-2"), g = i(
+  ), C = i("flex flex-col", !!a && "mb-2"), g = i(
     "dial-tiny mt-2 ml-[26px] text-secondary",
-    p
+    m
   );
-  return /* @__PURE__ */ m("div", { className: b, children: [
-    /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
+  return /* @__PURE__ */ p("div", { className: C, children: [
+    /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ r(
         "input",
         {
@@ -429,8 +430,8 @@ const Qe = (e, t) => {
           disabled: d,
           "aria-describedby": s && a ? f : void 0,
           className: h,
-          onChange: (k) => {
-            d || k.target.checked && c?.(t);
+          onChange: (D) => {
+            d || D.target.checked && c?.(t);
           }
         }
       ),
@@ -439,10 +440,10 @@ const Qe = (e, t) => {
     s && a && /* @__PURE__ */ r("div", { id: f, className: g, children: a })
   ] });
 };
-var z = /* @__PURE__ */ ((e) => (e.Row = "Row", e.Column = "Column", e))(z || {});
-const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
-  [z.Column]: "flex-col gap-y-3",
-  [z.Row]: "flex-row gap-x-6"
+var Z = /* @__PURE__ */ ((e) => (e.Row = "Row", e.Column = "Column", e))(Z || {});
+const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
+  [Z.Column]: "flex-col gap-y-3",
+  [Z.Row]: "flex-row gap-x-6"
 }, Pr = ({
   fieldTitle: e,
   radioCssClass: t,
@@ -453,8 +454,8 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
   activeRadioButton: l,
   orientation: u,
   onChange: d
-}) => /* @__PURE__ */ m("div", { className: rr, children: [
-  e && /* @__PURE__ */ r(V, { fieldTitle: e, htmlFor: s }),
+}) => /* @__PURE__ */ p("div", { className: ar, children: [
+  e && /* @__PURE__ */ r(H, { fieldTitle: e, htmlFor: s }),
   /* @__PURE__ */ r(
     "div",
     {
@@ -462,12 +463,12 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
       "aria-label": e,
       "aria-disabled": a || void 0,
       className: i(
-        tr,
-        ar[u]
+        sr,
+        lr[u]
       ),
-      children: o.map((c) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
+      children: o.map((c) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ r(
-          er,
+          nr,
           {
             name: s,
             value: c.id,
@@ -480,7 +481,7 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
             onChange: () => d(c.id)
           }
         ),
-        c.id === l && c.content ? /* @__PURE__ */ r("div", { className: nr, children: c.content }) : null
+        c.id === l && c.content ? /* @__PURE__ */ r("div", { className: or, children: c.content }) : null
       ] }, c.id))
     }
   )
@@ -488,20 +489,20 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
   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(fe, { width: 60, height: 60 }),
+}) => /* @__PURE__ */ p("div", { className: "h-full w-full flex flex-col items-center justify-center text-secondary", children: [
+  e || /* @__PURE__ */ r(xe, { width: 60, height: 60 }),
   /* @__PURE__ */ r("span", { className: "small mt-2 text-primary", children: t }),
   n && /* @__PURE__ */ r("span", { className: "mt-1 text-primary", children: n })
-] }), sr = 60, Mr = ({
+] }), ir = 60, Or = ({
   containerCssClass: e,
   children: t,
   width: n,
   title: a,
-  iconSize: s = re,
+  iconSize: s = R,
   titleCssClass: o,
   additionalButtons: l
 }) => {
-  const [u, d] = S(n), [c, p] = S(!0), f = i([
+  const [u, d] = T(n), [c, m] = T(!0), f = i([
     "transform rotate-180 [writing-mode:tb-rl]",
     c && "hidden",
     o
@@ -509,9 +510,9 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
     "flex flex-row gap-2 cursor-pointer text-secondary",
     c ? "justify-end" : "justify-center"
   ]), h = () => {
-    d(c ? sr : n), p(!c);
+    d(c ? ir : n), m(!c);
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ p(
     "div",
     {
       className: i([
@@ -531,24 +532,24 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
           }
         ),
         /* @__PURE__ */ r("div", { className: f, children: a }),
-        /* @__PURE__ */ m("div", { className: x, children: [
+        /* @__PURE__ */ p("div", { className: x, children: [
           c && l,
           /* @__PURE__ */ r(
-            P,
+            V,
             {
               cssClass: "hover:text-icon-accent-primary",
               onClick: h,
               iconBefore: c ? /* @__PURE__ */ r(
-                he,
+                ge,
                 {
                   size: s,
-                  stroke: T.stroke
+                  stroke: M.stroke
                 }
               ) : /* @__PURE__ */ r(
-                xe,
+                Ce,
                 {
                   size: s,
-                  stroke: T.stroke
+                  stroke: M.stroke
                 }
               )
             }
@@ -562,7 +563,7 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
   text: t,
   children: n,
   postfix: a
-}) => /* @__PURE__ */ m(
+}) => /* @__PURE__ */ p(
   "div",
   {
     className: i(
@@ -571,26 +572,26 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
     ),
     children: [
       /* @__PURE__ */ r("label", { className: "dial-tiny mb-2", children: e }),
-      n || /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
-        /* @__PURE__ */ r(F, { triggerClassName: "text-primary", tooltip: t, children: t }),
+      n || /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
+        /* @__PURE__ */ r(S, { triggerClassName: "text-primary", tooltip: t, children: t }),
         a || null
       ] })
     ]
   }
-), or = ({
+), cr = ({
   ariaLabel: e,
   cssClass: t,
   size: n = 24,
   onClose: a
 }) => /* @__PURE__ */ r(
-  P,
+  V,
   {
     ariaLabel: e,
     cssClass: i("text-secondary hover:text-accent-primary", t),
     onClick: a,
-    iconBefore: /* @__PURE__ */ r(_, { size: n })
+    iconBefore: /* @__PURE__ */ r($, { size: n })
   }
-), lr = ({
+), dr = ({
   value: e,
   textareaId: t,
   placeholder: n,
@@ -599,7 +600,7 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
   invalid: o,
   readonly: l,
   onChange: u
-}) => /* @__PURE__ */ r(F, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
+}) => /* @__PURE__ */ r(S, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
   "textarea",
   {
     id: t,
@@ -615,7 +616,7 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
     ),
     onChange: (d) => !l && u?.(d.currentTarget.value)
   }
-) }), ir = [
+) }), ur = [
   "ArrowLeft",
   "ArrowRight",
   "ArrowUp",
@@ -627,8 +628,8 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
   "Escape",
   "Home",
   "End"
-], cr = (e, t, n, a) => {
-  if ((t === "number" || n !== void 0 || a !== void 0) && !ir.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (n === void 0 || n < 0)) && !(e.key === "." && t === "number" && !e.currentTarget.value.includes("."))) {
+], pr = (e, t, n, a) => {
+  if ((t === "number" || n !== void 0 || a !== void 0) && !ur.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (n === void 0 || n < 0)) && !(e.key === "." && t === "number" && !e.currentTarget.value.includes("."))) {
     if (!/^[0-9]$/.test(e.key)) {
       e.preventDefault();
       return;
@@ -647,7 +648,7 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
       }
     }
   }
-}, W = ({
+}, O = ({
   iconBefore: e,
   iconAfter: t,
   hideBorder: n,
@@ -658,44 +659,44 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
   containerCssClass: u,
   tooltipTriggerClassName: d,
   type: c = "text",
-  disabled: p,
+  disabled: m,
   readonly: f,
   invalid: x,
   onChange: h,
-  min: b,
+  min: C,
   max: g,
-  prefix: N,
-  suffix: k,
+  prefix: k,
+  suffix: D,
   textBeforeInput: y,
-  textAfterInput: A
+  textAfterInput: P
 }) => {
-  const ne = (L) => L.target.blur(), ae = c === "number" || b !== void 0 || g !== void 0, se = (L) => {
-    cr(L, c, b, g);
-  }, oe = (L) => {
+  const oe = (L) => L.target.blur(), le = c === "number" || C !== void 0 || g !== void 0, ie = (L) => {
+    pr(L, c, C, g);
+  }, ce = (L) => {
     const j = L.currentTarget.value;
-    if (ae && j !== "") {
-      const M = parseFloat(j);
-      if (isNaN(M) && j !== "-" && j !== "." || !isNaN(M) && (b !== void 0 && M < b || g !== void 0 && M > g))
+    if (le && j !== "") {
+      const A = parseFloat(j);
+      if (isNaN(A) && j !== "-" && j !== "." || !isNaN(A) && (C !== void 0 && A < C || g !== void 0 && A > g))
         return;
     }
     h?.(j);
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ p(
     "div",
     {
       className: i(
         "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",
+        m && "dial-input-disable",
         f && "dial-input-readonly",
         !y && "pl-3",
-        !A && "pr-3",
+        !P && "pr-3",
         u
       ),
       children: [
         y && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-          W,
+          O,
           {
             hideBorder: !0,
             containerCssClass: "rounded-r-none border-r-0",
@@ -705,13 +706,13 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
             elementId: y + "textBefore"
           }
         ) }),
-        N && /* @__PURE__ */ m("p", { className: "text-secondary dial-small", children: [
+        k && /* @__PURE__ */ p("p", { className: "text-secondary dial-small", children: [
           " ",
-          N
+          k
         ] }),
-        /* @__PURE__ */ r(I, { icon: e }),
+        /* @__PURE__ */ r(N, { icon: e }),
         /* @__PURE__ */ r(
-          F,
+          S,
           {
             tooltip: a,
             triggerClassName: i(d, "flex-1"),
@@ -723,36 +724,36 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
                 id: s,
                 placeholder: o,
                 value: a ?? "",
-                disabled: p,
+                disabled: m,
                 className: i("border-0 bg-transparent", l),
-                onChange: (L) => !f && oe?.(L),
-                onKeyDown: se,
-                onWheel: ne,
-                min: b,
+                onChange: (L) => !f && ce?.(L),
+                onKeyDown: ie,
+                onWheel: oe,
+                min: C,
                 max: g
               }
             )
           }
         ),
-        /* @__PURE__ */ r(I, { icon: t }),
-        k && /* @__PURE__ */ m("p", { className: "text-secondary dial-small", children: [
+        /* @__PURE__ */ r(N, { icon: t }),
+        D && /* @__PURE__ */ p("p", { className: "text-secondary dial-small", children: [
           " ",
-          k
+          D
         ] }),
-        A && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-          W,
+        P && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+          O,
           {
             hideBorder: !0,
             containerCssClass: "rounded-l-none border-l-0",
-            value: A,
+            value: P,
             disabled: !0,
-            elementId: A + "textAfter"
+            elementId: P + "textAfter"
           }
         ) })
       ]
     }
   );
-}, dr = /^0+\.(\d+)?$/, ur = /^0+/, te = ({
+}, mr = /^0+\.(\d+)?$/, fr = /^0+/, ae = ({
   fieldTitle: e,
   errorText: t,
   optional: n,
@@ -763,31 +764,31 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
   readonly: u,
   defaultEmptyText: d,
   min: c,
-  max: p,
+  max: m,
   ...f
-}) => /* @__PURE__ */ m("div", { className: i("flex flex-col", l), children: [
+}) => /* @__PURE__ */ p("div", { className: i("flex flex-col", l), children: [
   /* @__PURE__ */ r(
-    V,
+    H,
     {
       fieldTitle: e,
       optional: n,
       htmlFor: o
     }
   ),
-  u ? /* @__PURE__ */ r("span", { children: f.value || (d ?? "None") }) : /* @__PURE__ */ m(le, { children: [
+  u ? /* @__PURE__ */ r("span", { children: f.value || (d ?? "None") }) : /* @__PURE__ */ p(_, { children: [
     /* @__PURE__ */ r(
-      W,
+      O,
       {
         elementId: o,
         cssClass: a,
         containerCssClass: s,
         invalid: t != null,
         min: c,
-        max: p,
+        max: m,
         ...f
       }
     ),
-    /* @__PURE__ */ r(H, { errorText: t })
+    /* @__PURE__ */ r(z, { errorText: t })
   ] })
 ] }), Br = ({
   onChange: e,
@@ -796,9 +797,9 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
   max: a,
   ...s
 }) => {
-  const o = (l) => String(l)?.match(dr) ? String(l)?.replace(ur, "0") : Number(l);
+  const o = (l) => String(l)?.match(mr) ? String(l)?.replace(fr, "0") : Number(l);
   return /* @__PURE__ */ r(
-    te,
+    ae,
     {
       type: "number",
       onChange: (l) => e?.(o(l)),
@@ -808,26 +809,26 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
       ...s
     }
   );
-}, Or = ({
+}, zr = ({
   onChange: e,
   ...t
 }) => /* @__PURE__ */ r(
-  te,
+  ae,
   {
     type: "text",
     onChange: (n) => e?.(n),
     ...t
   }
-), Vr = ({
+), Hr = ({
   fieldTitle: e,
   optional: t,
   elementId: n,
   elementCssClass: a,
   errorText: s,
   ...o
-}) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
+}) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ r(
-    V,
+    H,
     {
       fieldTitle: e,
       optional: t,
@@ -835,15 +836,15 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
     }
   ),
   /* @__PURE__ */ r(
-    lr,
+    dr,
     {
       textareaId: n,
       cssClass: a,
       ...o
     }
   ),
-  /* @__PURE__ */ r(H, { errorText: s })
-] }), zr = ({
+  /* @__PURE__ */ r(z, { errorText: s })
+] }), _r = ({
   title: e,
   switchId: t,
   isOn: n = !1,
@@ -855,13 +856,13 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
     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"
-  ), l = D(
+  ), l = I(
     (u) => {
       u.stopPropagation(), s?.(!n);
     },
     [s, n]
   );
-  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",
       {
@@ -885,12 +886,12 @@ const rr = "flex flex-col gap-2", tr = "flex", nr = "pb-1 mt-2", ar = {
     e && /* @__PURE__ */ r("span", { className: "pl-2 dial-small text-primary", children: e })
   ] });
 };
-var E = /* @__PURE__ */ ((e) => (e.Sm = "sm", e.Md = "md", e.Lg = "lg", e))(E || {});
-const pr = "z-[52] flex items-center justify-center bg-blackout md:p-4", mr = "relative max-h-full rounded bg-layer-3 flex flex-col shadow w-full h-full md:h-auto", fr = "divide-tertiary divide-y", hr = "flex flex-row justify-between py-4 px-6 items-center", xr = {
-  [E.Sm]: "max-w-full md:max-w-[400px]",
-  [E.Md]: "max-w-full md:max-w-[800px]",
-  [E.Lg]: "max-w-full md:max-w-[1200px]"
-}, gr = ({
+var F = /* @__PURE__ */ ((e) => (e.Sm = "sm", e.Md = "md", e.Lg = "lg", e))(F || {});
+const hr = "z-[52] flex items-center justify-center bg-blackout md:p-4", xr = "divide-tertiary divide-y", gr = "flex flex-row justify-between py-4 px-6 items-center", Cr = {
+  [F.Sm]: "dial-sm-popup",
+  [F.Md]: "dial-md-popup",
+  [F.Lg]: "dial-lg-popup"
+}, yr = ({
   open: e = !1,
   title: t,
   portalId: n,
@@ -901,45 +902,45 @@ const pr = "z-[52] flex items-center justify-center bg-blackout md:p-4", mr = "r
   children: u,
   footer: d,
   onClose: c,
-  size: p = E.Md
+  size: m = F.Md
 }) => {
-  const { refs: f, context: x } = G({
+  const { refs: f, context: x } = q({
     open: e,
     onOpenChange: (y) => {
       y || c?.(null);
     }
-  }), h = X(x, { role: "dialog" }), b = Z(x, { outsidePress: !0 }), { getFloatingProps: g } = q([h, b]);
+  }), h = Y(x, { role: "dialog" }), C = Q(x, { outsidePress: !0 }), { getFloatingProps: g } = J([h, C]);
   if (!e) return null;
-  const N = typeof t == "string" ? "dial-popup-heading" : void 0, k = (y) => y ? typeof y == "string" ? /* @__PURE__ */ r(
+  const k = typeof t == "string" ? "dial-popup-heading" : void 0, D = (y) => y ? typeof y == "string" ? /* @__PURE__ */ r(
     "h3",
     {
-      id: N,
+      id: k,
       className: i(
         "flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",
         o
       ),
-      children: /* @__PURE__ */ r(F, { tooltip: y, children: y })
+      children: /* @__PURE__ */ r(S, { tooltip: y, children: y })
     }
   ) : y : /* @__PURE__ */ r("span", {});
-  return /* @__PURE__ */ r(Y, { id: n, children: /* @__PURE__ */ r(Ae, { className: i(pr, s), children: /* @__PURE__ */ r(Me, { context: x, children: /* @__PURE__ */ m(
+  return /* @__PURE__ */ r(re, { id: n, children: /* @__PURE__ */ r(Ae, { className: i(hr, s), children: /* @__PURE__ */ r(Oe, { context: x, children: /* @__PURE__ */ p(
     "div",
     {
       ref: f.setFloating,
       ...g(),
       role: "dialog",
       "aria-modal": "true",
-      "aria-labelledby": N,
+      "aria-labelledby": k,
       className: i(
-        mr,
-        xr[p],
-        l && fr,
+        "dial-popup",
+        Cr[m],
+        l && xr,
         a
       ),
       children: [
-        /* @__PURE__ */ m("div", { className: hr, children: [
-          k(t),
+        /* @__PURE__ */ p("div", { className: gr, children: [
+          D(t),
           /* @__PURE__ */ r(
-            or,
+            cr,
             {
               ariaLabel: "Close dialog",
               onClose: (y) => c?.(y)
@@ -952,104 +953,104 @@ const pr = "z-[52] flex items-center justify-center bg-blackout md:p-4", mr = "r
     }
   ) }) }) });
 };
-var B = /* @__PURE__ */ ((e) => (e.Info = "info", e.Danger = "danger", e))(B || {});
-const yr = "flex justify-end gap-2 px-6 py-4", br = "text-secondary dial-small-150 px-6 py-4", Cr = "Cancel", $ = {
-  [B.Info]: {
-    confirmVariant: v.Primary,
-    cancelVariant: v.Secondary
+var W = /* @__PURE__ */ ((e) => (e.Info = "info", e.Danger = "danger", e))(W || {});
+const br = "flex justify-end gap-2 px-6 py-4", vr = "text-secondary dial-small-150 px-6 py-4", wr = "Cancel", K = {
+  [W.Info]: {
+    confirmVariant: w.Primary,
+    cancelVariant: w.Secondary
   },
-  [B.Danger]: {
+  [W.Danger]: {
     container: "border-t-4 border-error",
-    confirmVariant: v.Danger,
-    cancelVariant: v.Secondary
+    confirmVariant: w.Danger,
+    cancelVariant: w.Secondary
   }
-}, _r = ({
+}, Zr = ({
   title: e,
   description: t,
   descriptionCssClass: n,
   open: a = !1,
   confirmLabel: s,
-  cancelLabel: o = Cr,
+  cancelLabel: o = wr,
   isLoading: l = !1,
   disableConfirmButton: u = !1,
   cssClass: d,
   confirmClassName: c,
-  onClose: p,
+  onClose: m,
   onConfirm: f,
   onCancel: x,
   children: h,
-  dividers: b = !1,
-  variant: g = B.Info,
-  size: N = E.Sm
+  dividers: C = !1,
+  variant: g = W.Info,
+  size: k = F.Sm
 }) => {
-  const k = l ? null : /* @__PURE__ */ m("div", { className: yr, children: [
+  const D = l ? null : /* @__PURE__ */ p("div", { className: br, children: [
     /* @__PURE__ */ r(
-      P,
+      V,
       {
-        variant: v.Secondary,
+        variant: w.Secondary,
         title: o,
-        onClick: () => x ? x() : p?.()
+        onClick: () => x ? x() : m?.()
       }
     ),
     /* @__PURE__ */ r(
-      P,
+      V,
       {
-        variant: $[g].confirmVariant,
+        variant: K[g].confirmVariant,
         cssClass: c,
         title: s,
         disable: u,
         onClick: () => f()
       }
     )
-  ] }), y = D(() => l ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r($e, { size: 50 }) }) : h ?? (t ? /* @__PURE__ */ r(
+  ] }), y = I(() => l ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r(Ue, { size: 50 }) }) : h ?? (t ? /* @__PURE__ */ r(
     "div",
     {
-      className: i(br, n),
+      className: i(vr, n),
       children: t
     }
   ) : null), [h, t, l, n]);
   return /* @__PURE__ */ r(
-    gr,
+    yr,
     {
       open: a,
       title: e,
-      cssClass: i($[g].container, d),
-      dividers: b,
-      onClose: () => p?.(),
-      footer: k,
-      size: N,
+      cssClass: i(K[g].container, d),
+      dividers: C,
+      onClose: () => m?.(),
+      footer: D,
+      size: k,
       children: y()
     }
   );
-}, vr = ({ onClick: e }) => /* @__PURE__ */ r(
-  ge,
+}, Nr = ({ onClick: e }) => /* @__PURE__ */ r(
+  ye,
   {
-    ...T,
+    ...M,
     className: "text-primary",
     onClick: e
   }
-), wr = ({ onClick: e }) => /* @__PURE__ */ r(ye, { ...T, className: "text-primary", onClick: e }), Nr = ({ ...e }) => {
-  const [t, n] = S(!1), a = D((s) => {
+), kr = ({ onClick: e }) => /* @__PURE__ */ r(be, { ...M, className: "text-primary", onClick: e }), Dr = ({ ...e }) => {
+  const [t, n] = T(!1), a = I((s) => {
     n(s);
   }, []);
   return /* @__PURE__ */ r(
-    W,
+    O,
     {
       type: t ? "text" : "password",
       ...e,
-      iconAfter: t ? /* @__PURE__ */ r(vr, { onClick: () => a(!1) }) : /* @__PURE__ */ r(wr, { onClick: () => a(!0) })
+      iconAfter: t ? /* @__PURE__ */ r(Nr, { onClick: () => a(!1) }) : /* @__PURE__ */ r(kr, { onClick: () => a(!0) })
     }
   );
-}, Hr = ({
+}, $r = ({
   fieldTitle: e,
   optional: t,
   elementCssClass: n,
   elementId: a,
   errorText: s,
   ...o
-}) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
+}) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ r(
-    V,
+    H,
     {
       fieldTitle: e,
       optional: t,
@@ -1057,7 +1058,7 @@ const yr = "flex justify-end gap-2 px-6 py-4", br = "text-secondary dial-small-1
     }
   ),
   /* @__PURE__ */ r(
-    Nr,
+    Dr,
     {
       cssClass: n,
       elementId: a,
@@ -1065,23 +1066,23 @@ const yr = "flex justify-end gap-2 px-6 py-4", br = "text-secondary dial-small-1
       ...o
     }
   ),
-  /* @__PURE__ */ r(H, { errorText: s })
+  /* @__PURE__ */ r(z, { errorText: s })
 ] });
-var O = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(O || {});
-const kr = {
-  [O.Small]: {
+var B = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(B || {});
+const Ir = {
+  [B.Small]: {
     textClass: "text-xs px-1",
     containerClass: "px-[6px] py-1 h-[22px]",
     iconSize: 10,
     iconStroke: 1
   },
-  [O.Base]: {
+  [B.Base]: {
     textClass: "text-sm px-2",
     containerClass: "px-3 py-2 h-[38px]",
     iconSize: 18,
     iconStroke: 1.5
   }
-}, $r = ({
+}, Kr = ({
   elementId: e,
   value: t,
   placeholder: n,
@@ -1091,21 +1092,21 @@ const kr = {
   cssClass: l,
   containerCssClass: u,
   onChange: d,
-  size: c = O.Base
+  size: c = B.Base
 }) => {
-  const [p, f] = S(t || "");
-  Ie(() => {
+  const [m, f] = T(t || "");
+  Se(() => {
     f(t || "");
   }, [t]);
-  const x = D(
+  const x = I(
     (g) => {
       f(g), d?.(g);
     },
     [d]
-  ), h = kr[c], b = D(() => {
+  ), h = Ir[c], C = I(() => {
     x("");
   }, [x]);
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ p(
     "div",
     {
       className: i(
@@ -1118,11 +1119,11 @@ const kr = {
       ),
       children: [
         /* @__PURE__ */ r(
-          I,
+          N,
           {
             className: i(a ? "text-secondary" : "text-primary"),
             icon: /* @__PURE__ */ r(
-              be,
+              ve,
               {
                 size: h.iconSize,
                 stroke: h.iconStroke
@@ -1137,7 +1138,7 @@ const kr = {
             type: "text",
             autoComplete: "off",
             placeholder: n,
-            value: p ?? "",
+            value: m ?? "",
             disabled: a,
             readOnly: s,
             className: i(
@@ -1148,16 +1149,16 @@ const kr = {
             onChange: (g) => !s && x(g.currentTarget.value)
           }
         ),
-        p && !s && !a && /* @__PURE__ */ r(
-          I,
+        m && !s && !a && /* @__PURE__ */ r(
+          N,
           {
             className: "text-primary cursor-pointer",
             icon: /* @__PURE__ */ r(
-              _,
+              $,
               {
                 size: h.iconSize,
                 stroke: h.iconStroke,
-                onClick: b,
+                onClick: C,
                 "aria-label": "Clear search",
                 role: "button"
               }
@@ -1167,7 +1168,7 @@ const kr = {
       ]
     }
   );
-}, Dr = ({ selectedItems: e, listCssClass: t, listElementCssClass: n }) => !!e?.length && /* @__PURE__ */ r(
+}, se = ({ selectedItems: e, listCssClass: t, listElementCssClass: n }) => !!e?.length && /* @__PURE__ */ r(
   "ul",
   {
     className: i(
@@ -1182,7 +1183,7 @@ const kr = {
           "tiny bg-layer-3 rounded p-1 border border-primary max-w-[200px] truncate",
           n
         ]),
-        children: /* @__PURE__ */ r(F, { tooltip: a, children: /* @__PURE__ */ r(
+        children: /* @__PURE__ */ r(S, { tooltip: a, children: /* @__PURE__ */ r(
           "button",
           {
             "aria-label": "autocomplete-action",
@@ -1195,7 +1196,87 @@ const kr = {
       a
     ))
   }
-), Kr = ({
+), U = (e) => /* @__PURE__ */ v.createElement("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ v.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" })), Ur = ({
+  children: e,
+  open: t,
+  readonly: n,
+  selectedValue: a,
+  valueCssClasses: s,
+  inputCssClasses: o,
+  onOpen: l,
+  elementId: u,
+  errorText: d,
+  emptyValueText: c
+}) => {
+  const m = Array.isArray(a) && a.length > 0, f = typeof a == "string" && !!a.trim(), x = m || f ? a : c, h = n ? void 0 : l;
+  return /* @__PURE__ */ p(_, { children: [
+    m ? /* @__PURE__ */ r("div", { className: "w-full", onClick: h, children: /* @__PURE__ */ p(
+      "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(se, { selectedItems: x }),
+          !n && /* @__PURE__ */ r("div", { className: "ml-1", children: /* @__PURE__ */ r(
+            N,
+            {
+              icon: /* @__PURE__ */ r(
+                U,
+                {
+                  role: "img",
+                  width: R,
+                  height: R
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    ) }) : /* @__PURE__ */ p(_, { children: [
+      /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          className: "w-full",
+          onClick: h,
+          "aria-label": "open-popup",
+          id: u,
+          children: /* @__PURE__ */ p(
+            "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(S, { tooltip: String(x), children: /* @__PURE__ */ r("span", { className: s, children: x }) }),
+                !n && /* @__PURE__ */ r("div", { className: "flex-shrink-0", children: /* @__PURE__ */ r(
+                  N,
+                  {
+                    icon: /* @__PURE__ */ r(
+                      U,
+                      {
+                        role: "img",
+                        width: R,
+                        height: R
+                      }
+                    )
+                  }
+                ) })
+              ]
+            }
+          )
+        }
+      ),
+      d && /* @__PURE__ */ r(z, { errorText: d })
+    ] }),
+    t && We(e, document.body)
+  ] });
+}, Gr = ({
   placeholder: e = "",
   selectedItems: t = [],
   updateSelected: n,
@@ -1204,18 +1285,18 @@ const kr = {
   containerCssClass: o,
   inputCssClass: l
 }) => {
-  const [u, d] = S(""), c = D(
+  const [u, d] = T(""), c = I(
     (f) => {
       f.key === "Enter" && (n([...t, f.currentTarget.value]), d("")), (f.key === "Backspace" || f.key === "Delete") && t.length && !u && n(t.slice(0, -1));
     },
     [t, n, u]
-  ), p = D(
+  ), m = I(
     (f) => {
       d(f.target.value);
     },
     [d]
   );
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ p(
     "div",
     {
       className: i([
@@ -1224,7 +1305,7 @@ const kr = {
       ]),
       children: [
         /* @__PURE__ */ r(
-          Dr,
+          se,
           {
             selectedItems: t,
             listCssClass: a,
@@ -1239,7 +1320,7 @@ const kr = {
             className: i(["border-0 bg-transparent p-0", l]),
             placeholder: t?.length ? "" : e,
             onKeyDown: c,
-            onChange: p
+            onChange: m
           }
         )
       ]
@@ -1247,39 +1328,40 @@ const kr = {
   );
 };
 export {
-  R as AlertVariant,
-  v as ButtonVariant,
-  B as ConfirmationPopupVariant,
-  Tr as DialAlert,
-  Kr as DialAutocompleteInput,
-  Dr as DialAutocompleteInputValue,
-  P as DialButton,
-  Fr as DialCheckbox,
-  or as DialCloseButton,
-  Mr as DialCollapsibleSidebar,
-  _r as DialConfirmationPopup,
-  H as DialErrorText,
-  V as DialFieldLabel,
-  I as DialIcon,
-  W as DialInput,
+  E as AlertVariant,
+  w as ButtonVariant,
+  W as ConfirmationPopupVariant,
+  Mr as DialAlert,
+  Gr as DialAutocompleteInput,
+  se as DialAutocompleteInputValue,
+  V as DialButton,
+  jr as DialCheckbox,
+  cr as DialCloseButton,
+  Or as DialCollapsibleSidebar,
+  Zr as DialConfirmationPopup,
+  z as DialErrorText,
+  H as DialFieldLabel,
+  N as DialIcon,
+  O as DialInput,
+  Ur as DialInputModal,
   Wr as DialLabelledText,
-  $e as DialLoader,
+  Ue as DialLoader,
   Ar as DialNoDataContent,
   Br as DialNumberInputField,
-  Nr as DialPasswordInput,
-  Hr as DialPasswordInputField,
-  gr as DialPopup,
-  er as DialRadioButton,
+  Dr as DialPasswordInput,
+  $r as DialPasswordInputField,
+  yr as DialPopup,
+  nr as DialRadioButton,
   Pr as DialRadioGroup,
-  $r as DialSearch,
-  jr as DialSteps,
-  zr as DialSwitch,
-  Vr as DialTextAreaField,
-  Or as DialTextInputField,
-  lr as DialTextarea,
-  F as DialTooltip,
-  E as PopupSize,
-  z as RadioGroupOrientation,
-  O as SearchSize,
-  C as StepStatus
+  Kr as DialSearch,
+  Vr as DialSteps,
+  _r as DialSwitch,
+  Hr as DialTextAreaField,
+  zr as DialTextInputField,
+  dr as DialTextarea,
+  S as DialTooltip,
+  F as PopupSize,
+  Z as RadioGroupOrientation,
+  B as SearchSize,
+  b as StepStatus
 };