@epam/ai-dial-ui-kit 0.2.0-rc.9 → 0.3.0-rc.0

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

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