@epam/ai-dial-ui-kit 0.2.0-rc.3 → 0.2.0-rc.31

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

@@ -1,182 +1,227 @@
-import { jsx as t, jsxs as p, Fragment as _ } from "react/jsx-runtime";
-import u from "classnames";
-import { IconCircleCheck as K, IconAlertTriangle as V, IconAlertCircle as B, IconInfoCircle as G, IconX as O } from "@tabler/icons-react";
-import { useFloating as $, offset as X, flip as Y, shift as Z, arrow as q, autoUpdate as J, useHover as Q, useFocus as ee, useDismiss as re, useRole as ne, useInteractions as te, useMergeRefs as E, FloatingPortal as se, FloatingArrow as oe } from "@floating-ui/react";
-import { createContext as le, useState as ae, useRef as ie, useMemo as ce, useContext as ue, forwardRef as P, isValidElement as de, cloneElement as pe, useCallback as me } from "react";
-const C = ({ icon: e, className: r }) => e ? /* @__PURE__ */ t("span", { className: u("flex-shrink-0", r), children: e }) : null, fe = ({
+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 we } from "@tabler/icons-react";
+import * as w from "react";
+import { createContext as ve, 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 Be } from "@floating-ui/react";
+import { createPortal as Oe } 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 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"
+}, V = ({
   title: e,
-  cssClass: r,
-  ref: n,
-  onClick: s,
-  disable: o,
-  iconAfter: l,
-  iconBefore: a,
+  variant: t,
+  cssClass: n,
+  textCssClass: a,
+  ref: s,
+  onClick: o,
+  disable: l,
+  iconAfter: u,
+  iconBefore: d,
   hideTitleOnMobile: c,
-  ariaLabel: i
+  ariaLabel: m
 }) => {
-  const m = u(
+  const f = i(
     "dial-small-semi",
-    l ? "mr-2" : "",
-    a ? "ml-2" : "",
-    c ? "hidden sm:inline" : "inline"
-  ), d = u(
-    r,
+    u ? "mr-2" : "",
+    d ? "ml-2" : "",
+    c ? "hidden sm:inline" : "inline",
+    a
+  ), x = i(
+    t && We[t],
+    n,
     "focus-visible:outline outline-offset-0"
   );
   return /* @__PURE__ */ p(
     "button",
     {
-      ref: n,
+      ref: s,
       type: "button",
-      className: d,
-      onClick: (f) => s?.(f),
-      disabled: o,
-      "aria-label": e || i,
+      className: x,
+      onClick: (h) => o?.(h),
+      disabled: l,
+      "aria-label": e || m,
       children: [
-        /* @__PURE__ */ t(C, { icon: a }),
-        e && /* @__PURE__ */ t("span", { className: m, children: e }),
-        /* @__PURE__ */ t(C, { icon: l })
+        /* @__PURE__ */ r(N, { icon: d }),
+        e && /* @__PURE__ */ r("span", { className: f, children: e }),
+        /* @__PURE__ */ r(N, { icon: u })
       ]
     }
   );
-}, S = ({ errorText: e }) => e && /* @__PURE__ */ t("span", { className: "text-error dial-tiny mt-1", children: e }), z = ({
-  fieldTitle: e,
-  htmlFor: r,
-  optional: n,
-  optionalText: s,
-  cssClass: o
-}) => e ? /* @__PURE__ */ p(
-  "label",
-  {
-    className: u(
-      "dial-tiny text-secondary",
-      o,
-      !o?.includes("mb") && "mb-2"
-    ),
-    htmlFor: r,
-    children: [
-      /* @__PURE__ */ t("span", { className: "min-h-4", children: e }),
-      n && /* @__PURE__ */ t("span", { className: "ml-1", children: s ?? "(Optional)" })
-    ]
-  }
-) : null;
-var x = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(x || {});
-const ge = {
-  info: /* @__PURE__ */ t(G, { size: 24 }),
-  error: /* @__PURE__ */ t(B, { size: 24 }),
-  warning: /* @__PURE__ */ t(V, { size: 24 }),
-  success: /* @__PURE__ */ t(K, { size: 24 })
-}, he = {
-  [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"
-}, be = "inline-flex items-center justify-between gap-2 px-3 py-2 border border-solid shadow text-sm w-auto rounded", Ae = ({
-  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: s = !0,
-  onClose: o
+  closable: a = !1,
+  onClose: s
 }) => /* @__PURE__ */ p(
   "div",
   {
     role: "alert",
-    className: u(
-      be,
-      he[e],
+    className: i(
+      _e,
+      He[e],
       n
     ),
     children: [
       /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ t(C, { icon: ge[e] }),
-        /* @__PURE__ */ t("div", { className: "text-primary", children: r })
+        /* @__PURE__ */ r(N, { icon: ze[e] }),
+        /* @__PURE__ */ r("div", { className: "text-primary", children: t })
       ] }),
-      s && /* @__PURE__ */ t(
-        fe,
+      a && /* @__PURE__ */ r(
+        V,
         {
-          cssClass: "ml-2 text-secondary hover:text-primary ml-2 text-secondary hover:text-primary ",
+          cssClass: "ml-2 text-secondary hover:text-primary",
           ariaLabel: "Close alert",
-          iconBefore: /* @__PURE__ */ t(O, { size: 16 }),
-          onClick: (l) => o?.(l)
+          iconBefore: /* @__PURE__ */ r($, { size: 16 }),
+          onClick: (o) => s?.(o)
         }
       )
     ]
   }
-), xe = 7, Ne = 2, A = le(null), W = () => {
-  const e = ue(A);
+), Ze = "flex items-center justify-center text-secondary", $e = "shrink-0 grow-0 basis-auto animate-spin-steps", Ke = (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" })), Ue = ({
+  size: e = 18,
+  cssClass: t,
+  iconClass: n,
+  fullWidth: a = !0,
+  ariaLabel: s = "Loading"
+}) => /* @__PURE__ */ r(
+  "div",
+  {
+    role: "status",
+    "aria-label": s,
+    name: "loader",
+    className: i({
+      [Ze]: !0,
+      "w-full h-full": a,
+      [t || ""]: !!t
+    }),
+    children: /* @__PURE__ */ r(
+      N,
+      {
+        icon: /* @__PURE__ */ r(
+          Ke,
+          {
+            width: e,
+            height: e,
+            className: i($e, n),
+            role: "img"
+          }
+        )
+      }
+    )
+  }
+), Ge = 7, Xe = 2, te = ve(null), ne = () => {
+  const e = De(te);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
   return e;
-}, ve = ({
+}, qe = ({
   initialOpen: e = !1,
-  placement: r = "bottom",
+  placement: t = "bottom",
   isTriggerClickable: n = !1,
-  open: s,
-  onOpenChange: o
+  open: a,
+  onOpenChange: s
 } = {}) => {
-  const [l, a] = ae(e), c = ie(null), i = s ?? l, m = o ?? a, d = $({
-    placement: r,
-    open: i,
-    onOpenChange: m,
-    whileElementsMounted: J,
+  const [o, l] = T(e), u = Ne(null), d = a ?? o, c = s ?? l, m = q({
+    placement: t,
+    open: d,
+    onOpenChange: c,
+    whileElementsMounted: Me,
     middleware: [
-      X(xe + Ne),
-      Y({
-        crossAxis: r.includes("-"),
+      Ee(Ge + Xe),
+      Re({
+        crossAxis: t.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5
       }),
-      Z({ padding: 5 }),
-      q({
-        element: c
+      Fe({ padding: 5 }),
+      Te({
+        element: u
       })
     ]
-  }), f = Q(d.context, {
+  }), f = je(m.context, {
     move: !1,
-    enabled: s == null,
+    enabled: a == null,
     mouseOnly: n,
     delay: { open: 500, close: 0 }
-  }), T = ee(d.context, {
-    enabled: s == null
-  }), k = re(d.context), h = ne(d.context, { role: "tooltip" }), g = te([f, T, k, h]);
-  return ce(
+  }), x = Ve(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: m,
-      arrowRef: c,
+      open: d,
+      setOpen: c,
+      arrowRef: u,
       ...g,
-      ...d
+      ...m
     }),
-    [i, m, g, d]
+    [d, c, g, m]
   );
-}, we = ({
+}, Qe = ({
   children: e,
-  ...r
+  ...t
 }) => {
-  const n = ve(r);
-  return /* @__PURE__ */ t(A.Provider, { value: n, children: e });
-}, Ce = P(function({ style: r, ...n }, s) {
-  const o = W(), l = E([o.refs.setFloating, s]);
-  return o.open ? /* @__PURE__ */ t(se, { id: "tooltip-portal", children: /* @__PURE__ */ p(
+  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: l,
+      ref: o,
       style: {
-        ...o.floatingStyles,
-        ...r
+        ...s.floatingStyles,
+        ...t
       },
-      ...o.getFloatingProps(n),
-      className: u(
-        "z-[55] whitespace-pre-wrap rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",
-        o.getFloatingProps(n).className
+      ...s.getFloatingProps(n),
+      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(
-          oe,
+        /* @__PURE__ */ r(
+          Pe,
           {
-            ref: o.arrowRef,
-            context: o.context,
+            ref: s.arrowRef,
+            context: s.context,
             fill: "currentColor",
             strokeWidth: 1,
             className: "stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"
@@ -185,71 +230,393 @@ const ge = {
       ]
     }
   ) }) : null;
-}), ye = P(function({ children: r, asChild: n = !1, ...s }, o) {
-  const l = W(), c = r && typeof r == "object" && "ref" in r && r.ref !== void 0 ? r.ref : void 0, i = E([l.refs.setReference, o, c]);
-  return n && de(r) ? pe(
-    r,
-    l.getReferenceProps({
-      ref: i,
-      ...s,
-      ...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,
-      ...l.getReferenceProps(s),
-      className: s.className ?? "dial-tooltip-trigger text-left",
-      children: r
+      ref: d,
+      ...o.getReferenceProps(a),
+      className: a.className ?? "dial-tooltip-trigger text-left",
+      children: t
     }
   );
-}), D = ({
+}), S = ({
   hideTooltip: e,
-  tooltip: r,
+  tooltip: t,
   children: n,
-  triggerClassName: s,
-  contentClassName: o,
-  ...l
-}) => e || !r ? /* @__PURE__ */ t("span", { className: s, children: n }) : /* @__PURE__ */ p(we, { ...l, children: [
-  /* @__PURE__ */ t(ye, { className: u(s, "truncate"), children: n }),
-  /* @__PURE__ */ t(
-    Ce,
+  triggerClassName: a,
+  contentClassName: s,
+  ...o
+}) => /* @__PURE__ */ p(Qe, { ...o, children: [
+  /* @__PURE__ */ r(Je, { className: i(a, "truncate"), children: n }),
+  /* @__PURE__ */ r(
+    Ye,
     {
-      className: u(
+      className: i(
         "text-primary",
-        o,
+        s,
         "max-w-[300px]",
-        (e || !r) && "hidden"
+        (e || !t) && "hidden"
       ),
-      children: r
+      children: t
     }
   )
-] }), De = ({
+] }), R = 18, M = {
+  size: R,
+  stroke: 2
+}, Vr = ({
+  label: e,
+  id: t,
+  checked: n,
+  indeterminate: a,
+  disabled: s,
+  ariaLabel: o,
+  onChange: l
+}) => {
+  const u = I(
+    (m) => {
+      m.stopPropagation(), l?.(m.target.checked, t);
+    },
+    [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" : ""
+  ), c = i(
+    "mr-2 border rounded",
+    s ? "bg-layer-4 border-icon-secondary" : ""
+  );
+  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",
+      {
+        type: "checkbox",
+        onChange: u,
+        id: t,
+        checked: n,
+        "aria-checked": a ? "mixed" : n,
+        "aria-disabled": s || void 0,
+        "aria-label": e ? void 0 : o,
+        className: "invisible w-0 h-0"
+      }
+    )
+  ] });
+};
+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"
+}, Ar = ({
+  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))
+    }
+  )
+] }), Br = ({
+  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(
+            V,
+            {
+              cssClass: "hover:text-icon-accent-primary",
+              onClick: h,
+              iconBefore: c ? /* @__PURE__ */ r(
+                ge,
+                {
+                  size: s,
+                  stroke: M.stroke
+                }
+              ) : /* @__PURE__ */ r(
+                Ce,
+                {
+                  size: s,
+                  stroke: M.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(
+  V,
+  {
+    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: s = "",
-  disabled: o,
-  invalid: l,
-  readonly: a,
-  onChange: c
-}) => /* @__PURE__ */ t(D, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ t(
+  cssClass: a = "",
+  disabled: s,
+  invalid: o,
+  readonly: l,
+  onChange: u
+}) => /* @__PURE__ */ r(S, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
   "textarea",
   {
-    id: r,
+    id: t,
     placeholder: n,
     value: e || "",
-    disabled: o,
-    className: u(
-      "dial-textarea dial-input",
-      l ? "dial-input-error" : "",
-      o && "dial-input-disable",
-      a && "dial-input-readonly",
-      s
+    disabled: s,
+    className: i(
+      "dial-textarea dial-input px-3 py-2",
+      o ? "dial-input-error" : "",
+      s && "dial-input-disable",
+      l && "dial-input-readonly",
+      a
     ),
-    onChange: (i) => !a && c?.(i.currentTarget.value)
+    onChange: (d) => !l && u?.(d.currentTarget.value)
   }
-) }), Te = [
+) }), ur = [
   "ArrowLeft",
   "ArrowRight",
   "ArrowUp",
@@ -261,271 +628,740 @@ const ge = {
   "Escape",
   "Home",
   "End"
-], ke = (e, r, n, s) => {
-  if ((r === "number" || n !== void 0 || s !== void 0) && !Te.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 || s !== void 0) {
-      const l = e.currentTarget.value, a = e.currentTarget.selectionStart || 0, c = l.slice(0, a) + e.key + l.slice(a), 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 (s !== void 0 && i > s) {
+        if (a !== void 0 && d > a) {
           e.preventDefault();
           return;
         }
       }
     }
   }
-}, F = ({
-  iconBeforeInput: e,
-  iconAfterInput: r,
+}, B = ({
+  iconBefore: e,
+  iconAfter: t,
   hideBorder: n,
-  value: s,
-  elementId: o,
-  placeholder: l = "",
-  cssClass: a = "",
-  containerCssClass: c,
-  tooltipTriggerClassName: i,
-  type: m = "text",
-  disabled: d,
+  value: a,
+  elementId: s,
+  placeholder: o = "",
+  cssClass: l = "",
+  containerCssClass: u,
+  tooltipTriggerClassName: d,
+  type: c = "text",
+  disabled: m,
   readonly: f,
-  invalid: T,
-  onChange: k,
-  min: h,
+  invalid: x,
+  onChange: h,
+  min: C,
   max: g,
-  prefix: I,
-  suffix: R,
-  textBeforeInput: N,
-  textAfterInput: v
+  prefix: k,
+  suffix: D,
+  textBeforeInput: y,
+  textAfterInput: P
 }) => {
-  const L = (b) => b.target.blur(), H = m === "number" || h !== void 0 || g !== void 0, M = (b) => {
-    ke(b, m, h, g);
-  }, U = (b) => {
-    const w = b.currentTarget.value;
-    if (H && w !== "") {
-      const y = parseFloat(w);
-      if (isNaN(y) && w !== "-" && w !== "." || !isNaN(y) && (h !== void 0 && y < h || g !== void 0 && y > g))
+  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 (le && j !== "") {
+      const A = parseFloat(j);
+      if (isNaN(A) && j !== "-" && j !== "." || !isNaN(A) && (C !== void 0 && A < C || g !== void 0 && A > g))
         return;
     }
-    k?.(w);
+    h?.(j);
   };
   return /* @__PURE__ */ p(
     "div",
     {
-      className: u(
-        "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",
-        T && "dial-input-error",
-        d && "dial-input-disable",
+        x && "dial-input-error",
+        m && "dial-input-disable",
         f && "dial-input-readonly",
-        !N && "pl-1",
-        !v && "pr-1",
-        c
+        !y && "pl-3",
+        !P && "pr-3",
+        u
       ),
       children: [
-        N && /* @__PURE__ */ t(D, { tooltip: N, children: /* @__PURE__ */ t(
-          F,
+        y && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+          B,
           {
             hideBorder: !0,
             containerCssClass: "rounded-r-none border-r-0",
-            cssClass: "px-2 overflow-hidden overflow-ellipsis dial-small",
-            value: N,
+            cssClass: "overflow-hidden overflow-ellipsis dial-small",
+            value: y,
             disabled: !0,
-            elementId: N + "textBefore"
+            elementId: y + "textBefore"
           }
         ) }),
-        I && /* @__PURE__ */ p("p", { className: "text-secondary dial-small pl-2", children: [
+        k && /* @__PURE__ */ p("p", { className: "text-secondary dial-small", children: [
           " ",
-          I
+          k
         ] }),
-        /* @__PURE__ */ t(C, { icon: e, className: "pl-2" }),
-        /* @__PURE__ */ t(D, { tooltip: s, triggerClassName: i, children: /* @__PURE__ */ t(
-          "input",
+        /* @__PURE__ */ r(N, { icon: e }),
+        /* @__PURE__ */ r(
+          S,
           {
-            type: m,
-            autoComplete: "off",
-            id: o,
-            placeholder: l,
-            value: s ?? "",
-            title: s ? String(s) : "",
-            disabled: d,
-            className: u("border-0 bg-transparent px-2", a),
-            onChange: (b) => !f && U?.(b),
-            onKeyDown: M,
-            onWheel: L,
-            min: h,
-            max: g
+            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(C, { icon: r, className: "pr-2" }),
-        R && /* @__PURE__ */ p("p", { className: "text-secondary dial-small pr-2", children: [
+        ),
+        /* @__PURE__ */ r(N, { icon: t }),
+        D && /* @__PURE__ */ p("p", { className: "text-secondary dial-small", children: [
           " ",
-          R
+          D
         ] }),
-        v && /* @__PURE__ */ t(D, { tooltip: v, children: /* @__PURE__ */ t(
-          F,
+        P && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+          B,
           {
             hideBorder: !0,
             containerCssClass: "rounded-l-none border-l-0",
-            cssClass: "px-2",
-            value: v,
+            value: P,
             disabled: !0,
-            elementId: v + "textAfter"
+            elementId: P + "textAfter"
           }
         ) })
       ]
     }
   );
-}, Fe = /^0+\.(\d+)?$/, Ie = /^0+/, j = ({
+}, mr = /^0+\.(\d+)?$/, fr = /^0+/, ae = ({
   fieldTitle: e,
-  errorText: r,
+  errorText: t,
   optional: n,
-  elementCssClass: s,
-  elementContainerCssClass: o,
-  elementId: l,
-  containerCssClass: a,
-  readonly: c,
-  defaultEmptyText: i,
-  min: m,
-  max: d,
+  elementCssClass: a,
+  elementContainerCssClass: s,
+  elementId: o,
+  containerCssClass: l,
+  readonly: u,
+  defaultEmptyText: d,
+  min: c,
+  max: m,
   ...f
-}) => /* @__PURE__ */ p("div", { className: u("flex flex-col", a), children: [
-  /* @__PURE__ */ t(
-    z,
+}) => /* @__PURE__ */ p("div", { className: i("flex flex-col", l), children: [
+  /* @__PURE__ */ r(
+    H,
     {
       fieldTitle: e,
       optional: n,
-      htmlFor: l
+      htmlFor: o
     }
   ),
-  c ? /* @__PURE__ */ t("span", { children: f.value || (i ?? "None") }) : /* @__PURE__ */ p(_, { children: [
-    /* @__PURE__ */ t(
-      F,
+  u ? /* @__PURE__ */ r("span", { children: f.value || (d ?? "None") }) : /* @__PURE__ */ p(_, { children: [
+    /* @__PURE__ */ r(
+      B,
       {
-        elementId: l,
-        cssClass: s,
-        containerCssClass: o,
-        invalid: r != null,
-        min: m,
-        max: d,
+        elementId: o,
+        cssClass: a,
+        containerCssClass: s,
+        invalid: t != null,
+        min: c,
+        max: m,
         ...f
       }
     ),
-    /* @__PURE__ */ t(S, { errorText: r })
+    /* @__PURE__ */ r(z, { errorText: t })
   ] })
-] }), We = ({
+] }), zr = ({
   onChange: e,
-  value: r,
+  value: t,
   min: n,
-  max: s,
-  ...o
+  max: a,
+  ...s
 }) => {
-  const l = (a) => String(a)?.match(Fe) ? String(a)?.replace(Ie, "0") : Number(a);
-  return /* @__PURE__ */ t(
-    j,
+  const o = (l) => String(l)?.match(mr) ? String(l)?.replace(fr, "0") : Number(l);
+  return /* @__PURE__ */ r(
+    ae,
     {
       type: "number",
-      onChange: (a) => e?.(l(a)),
-      value: r,
+      onChange: (l) => e?.(o(l)),
+      value: t,
       min: n,
-      max: s,
-      ...o
+      max: a,
+      ...s
     }
   );
-}, je = ({
+}, Hr = ({
   onChange: e,
-  ...r
-}) => /* @__PURE__ */ t(
-  j,
+  ...t
+}) => /* @__PURE__ */ r(
+  ae,
   {
     type: "text",
     onChange: (n) => e?.(n),
-    ...r
+    ...t
   }
-), Le = ({
+), _r = ({
   fieldTitle: e,
-  optional: r,
+  optional: t,
   elementId: n,
-  elementCssClass: s,
-  errorText: o,
-  ...l
+  elementCssClass: a,
+  errorText: s,
+  ...o
 }) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
-  /* @__PURE__ */ t(
-    z,
+  /* @__PURE__ */ r(
+    H,
     {
       fieldTitle: e,
-      optional: r,
+      optional: t,
       htmlFor: n
     }
   ),
-  /* @__PURE__ */ t(
-    De,
+  /* @__PURE__ */ r(
+    dr,
     {
       textareaId: n,
-      cssClass: s,
-      ...l
+      cssClass: a,
+      ...o
     }
   ),
-  /* @__PURE__ */ t(S, { errorText: o })
-] }), He = ({
+  /* @__PURE__ */ r(z, { errorText: s })
+] }), Zr = ({
   title: e,
-  switchId: r,
+  switchId: t,
   isOn: n = !1,
-  disabled: s,
-  onChange: o
+  disabled: a,
+  onChange: s
 }) => {
-  const l = u(
-    "flex w-[36px] h-[18px]  cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",
+  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",
-    s ? "pointer-events-none" : "",
-    s ? n ? "bg-controls-disable" : "bg-layer-4" : n ? "bg-accent-primary" : "bg-layer-4"
-  ), a = me(
-    (c) => {
-      c.stopPropagation(), o?.(!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);
     },
-    [o, n]
+    [s, n]
   );
   return /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ r(
       "input",
       {
         type: "checkbox",
-        onChange: a,
-        id: r,
-        disabled: s,
+        onChange: l,
+        id: t,
+        disabled: a,
         className: "invisible w-0 h-0",
         checked: n
       }
     ),
-    /* @__PURE__ */ t("label", { htmlFor: r, className: l, children: /* @__PURE__ */ t(
+    /* @__PURE__ */ r("label", { htmlFor: t, className: o, children: /* @__PURE__ */ r(
       "span",
       {
-        className: u(
+        className: i(
           "size-3 rounded-full",
-          s ? n ? "bg-controls-disable" : "bg-layer-4" : "bg-controls-enable-primary"
+          a ? n ? "bg-layer-4" : "bg-controls-disable" : "bg-controls-enable-primary"
         )
       }
     ) }),
-    e && /* @__PURE__ */ t("span", { className: "h-[14px] pl-2 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 = "relative max-h-full rounded bg-layer-3 flex flex-col shadow w-full h-full md:h-auto", gr = "divide-tertiary divide-y", Cr = "flex flex-row justify-between py-4 px-6 items-center", yr = {
+  [F.Sm]: "max-w-full md:max-w-[400px]",
+  [F.Md]: "max-w-full md:max-w-[800px]",
+  [F.Lg]: "max-w-full md:max-w-[1200px]"
+}, br = ({
+  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(Be, { context: x, children: /* @__PURE__ */ p(
+    "div",
+    {
+      ref: f.setFloating,
+      ...g(),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": k,
+      className: i(
+        xr,
+        yr[m],
+        l && gr,
+        a
+      ),
+      children: [
+        /* @__PURE__ */ p("div", { className: Cr, 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 O = /* @__PURE__ */ ((e) => (e.Info = "info", e.Danger = "danger", e))(O || {});
+const wr = "flex justify-end gap-2 px-6 py-4", vr = "text-secondary dial-small-150 px-6 py-4", Nr = "Cancel", K = {
+  [O.Info]: {
+    confirmVariant: v.Primary,
+    cancelVariant: v.Secondary
+  },
+  [O.Danger]: {
+    container: "border-t-4 border-error",
+    confirmVariant: v.Danger,
+    cancelVariant: v.Secondary
+  }
+}, $r = ({
+  title: e,
+  description: t,
+  descriptionCssClass: n,
+  open: a = !1,
+  confirmLabel: s,
+  cancelLabel: o = Nr,
+  isLoading: l = !1,
+  disableConfirmButton: u = !1,
+  cssClass: d,
+  confirmClassName: c,
+  onClose: m,
+  onConfirm: f,
+  onCancel: x,
+  children: h,
+  dividers: C = !1,
+  variant: g = O.Info,
+  size: k = F.Sm
+}) => {
+  const D = l ? null : /* @__PURE__ */ p("div", { className: wr, children: [
+    /* @__PURE__ */ r(
+      V,
+      {
+        variant: v.Secondary,
+        title: o,
+        onClick: () => x ? x() : m?.()
+      }
+    ),
+    /* @__PURE__ */ r(
+      V,
+      {
+        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(
+    br,
+    {
+      open: a,
+      title: e,
+      cssClass: i(K[g].container, d),
+      dividers: C,
+      onClose: () => m?.(),
+      footer: D,
+      size: k,
+      children: y()
+    }
+  );
+}, kr = ({ onClick: e }) => /* @__PURE__ */ r(
+  ye,
+  {
+    ...M,
+    className: "text-primary",
+    onClick: e
+  }
+), Dr = ({ onClick: e }) => /* @__PURE__ */ r(be, { ...M, className: "text-primary", onClick: e }), Ir = ({ ...e }) => {
+  const [t, n] = T(!1), a = I((s) => {
+    n(s);
+  }, []);
+  return /* @__PURE__ */ r(
+    B,
+    {
+      type: t ? "text" : "password",
+      ...e,
+      iconAfter: t ? /* @__PURE__ */ r(kr, { onClick: () => a(!1) }) : /* @__PURE__ */ r(Dr, { onClick: () => a(!0) })
+    }
+  );
+}, Kr = ({
+  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(
+    Ir,
+    {
+      cssClass: n,
+      elementId: a,
+      invalid: !!s,
+      ...o
+    }
+  ),
+  /* @__PURE__ */ r(z, { errorText: s })
+] });
+var W = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(W || {});
+const Lr = {
+  [W.Small]: {
+    textClass: "text-xs px-1",
+    containerClass: "px-[6px] py-1 h-[22px]",
+    iconSize: 10,
+    iconStroke: 1
+  },
+  [W.Base]: {
+    textClass: "text-sm px-2",
+    containerClass: "px-3 py-2 h-[38px]",
+    iconSize: 18,
+    iconStroke: 1.5
+  }
+}, Ur = ({
+  elementId: e,
+  value: t,
+  placeholder: n,
+  disabled: a,
+  readonly: s,
+  invalid: o,
+  cssClass: l,
+  containerCssClass: u,
+  onChange: d,
+  size: c = W.Base
+}) => {
+  const [m, f] = T(t || "");
+  Se(() => {
+    f(t || "");
+  }, [t]);
+  const x = I(
+    (g) => {
+      f(g), d?.(g);
+    },
+    [d]
+  ), h = Lr[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(
+              we,
+              {
+                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__ */ w.createElement("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ w.createElement("path", { d: "M2.25 13.5V12C2.25 11.5858 2.58579 11.25 3 11.25C3.41421 11.25 3.75 11.5858 3.75 12V13.5C3.75 13.6989 3.82907 13.8896 3.96973 14.0303C4.11038 14.1709 4.30109 14.25 4.5 14.25H6C6.41421 14.25 6.75 14.5858 6.75 15C6.75 15.4142 6.41421 15.75 6 15.75H4.5C3.90326 15.75 3.33114 15.5128 2.90918 15.0908C2.48722 14.6689 2.25 14.0967 2.25 13.5ZM14.25 6V4.5C14.25 4.30109 14.1709 4.11038 14.0303 3.96973C13.8896 3.82907 13.6989 3.75 13.5 3.75H12C11.5858 3.75 11.25 3.41421 11.25 3C11.25 2.58579 11.5858 2.25 12 2.25H13.5C14.0967 2.25 14.6689 2.48722 15.0908 2.90918C15.5128 3.33114 15.75 3.90326 15.75 4.5V6C15.75 6.41421 15.4142 6.75 15 6.75C14.5858 6.75 14.25 6.41421 14.25 6Z", fill: "currentColor" })), Gr = ({
+  children: e,
+  open: 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 && Oe(e, document.body)
+  ] });
+}, Xr = ({
+  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,
-  Ae as DialAlert,
-  fe as DialButton,
-  S as DialErrorText,
-  z as DialFieldLabel,
-  C as DialIcon,
-  F as DialInput,
-  We as DialNumberInputField,
-  He as DialSwitch,
-  Le as DialTextAreaField,
-  je as DialTextInputField,
-  De as DialTextarea,
-  D as DialTooltip
+  E as AlertVariant,
+  v as ButtonVariant,
+  O as ConfirmationPopupVariant,
+  jr as DialAlert,
+  Xr as DialAutocompleteInput,
+  se as DialAutocompleteInputValue,
+  V as DialButton,
+  Vr as DialCheckbox,
+  cr as DialCloseButton,
+  Or as DialCollapsibleSidebar,
+  $r as DialConfirmationPopup,
+  z as DialErrorText,
+  H as DialFieldLabel,
+  N as DialIcon,
+  B as DialInput,
+  Gr as DialInputModal,
+  Wr as DialLabelledText,
+  Ue as DialLoader,
+  Br as DialNoDataContent,
+  zr as DialNumberInputField,
+  Ir as DialPasswordInput,
+  Kr as DialPasswordInputField,
+  br as DialPopup,
+  nr as DialRadioButton,
+  Ar as DialRadioGroup,
+  Ur as DialSearch,
+  Pr as DialSteps,
+  Zr as DialSwitch,
+  _r as DialTextAreaField,
+  Hr as DialTextInputField,
+  dr as DialTextarea,
+  S as DialTooltip,
+  F as PopupSize,
+  Z as RadioGroupOrientation,
+  W as SearchSize,
+  b as StepStatus
 };