@epam/ai-dial-ui-kit 0.2.0-rc.2 → 0.2.0-rc.21

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

@@ -1,182 +1,221 @@
-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 ae } from "react/jsx-runtime";
+import i from "classnames";
+import { IconCircleCheck as le, IconAlertTriangle as oe, IconAlertCircle as ie, IconInfoCircle as ce, IconX as V, IconLoader as de, IconMinus as ue, IconCheck as U, IconExclamationCircle as me, IconClipboardX as pe, IconEyeOff as fe, IconEye as xe, IconSearch as he } from "@tabler/icons-react";
+import { createContext as ge, useState as _, useRef as be, useMemo as ye, useContext as Ce, forwardRef as $, isValidElement as Ne, cloneElement as ve, useCallback as F, useEffect as we } from "react";
+import { useFloating as G, offset as De, flip as Ie, shift as ke, arrow as Se, autoUpdate as Re, useHover as Fe, useFocus as Ee, useDismiss as K, useRole as Z, useInteractions as X, useMergeRefs as q, FloatingPortal as Q, FloatingArrow as Te, FloatingOverlay as Pe, FloatingFocusManager as ze } from "@floating-ui/react";
+const W = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "text-error dial-tiny mt-1", children: e }), j = ({
+  fieldTitle: e,
+  htmlFor: n,
+  optional: t,
+  optionalText: s,
+  cssClass: a
+}) => e ? /* @__PURE__ */ p(
+  "label",
+  {
+    className: i(
+      "dial-tiny text-secondary",
+      a,
+      !a?.includes("mb") && "mb-2"
+    ),
+    htmlFor: n,
+    children: [
+      /* @__PURE__ */ r("span", { className: "min-h-4", children: e }),
+      t && /* @__PURE__ */ r("span", { className: "ml-1", children: s ?? "(Optional)" })
+    ]
+  }
+) : null, D = ({ icon: e, className: n }) => e ? /* @__PURE__ */ r("span", { className: i("flex-shrink-0", n), children: e }) : null;
+var N = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e.Danger = "danger", e))(N || {});
+const Ae = {
+  [N.Primary]: "dial-primary-button",
+  [N.Secondary]: "dial-secondary-button",
+  [N.Tertiary]: "dial-tertiary-button",
+  [N.Danger]: "dial-danger-button"
+}, P = ({
   title: e,
-  cssClass: r,
-  ref: n,
-  onClick: s,
-  disable: o,
-  iconAfter: l,
-  iconBefore: a,
-  hideTitleOnMobile: c,
-  ariaLabel: i
+  variant: n,
+  cssClass: t,
+  ref: s,
+  onClick: a,
+  disable: l,
+  iconAfter: o,
+  iconBefore: c,
+  hideTitleOnMobile: d,
+  ariaLabel: u
 }) => {
-  const m = u(
+  const m = i(
     "dial-small-semi",
-    l ? "mr-2" : "",
-    a ? "ml-2" : "",
-    c ? "hidden sm:inline" : "inline"
-  ), d = u(
-    r,
+    o ? "mr-2" : "",
+    c ? "ml-2" : "",
+    d ? "hidden sm:inline" : "inline"
+  ), x = i(
+    n && Ae[n],
+    t,
     "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) => a?.(h),
+      disabled: l,
+      "aria-label": e || u,
       children: [
-        /* @__PURE__ */ t(C, { icon: a }),
-        e && /* @__PURE__ */ t("span", { className: m, children: e }),
-        /* @__PURE__ */ t(C, { icon: l })
+        /* @__PURE__ */ r(D, { icon: c }),
+        e && /* @__PURE__ */ r("span", { className: m, children: e }),
+        /* @__PURE__ */ r(D, { icon: o })
       ]
     }
   );
-}, 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,
-  cssClass: n,
-  closable: s = !0,
-  onClose: o
+};
+var k = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(k || {});
+const Le = {
+  info: /* @__PURE__ */ r(ce, { size: 24, stroke: 2 }),
+  error: /* @__PURE__ */ r(ie, { size: 24, stroke: 2 }),
+  warning: /* @__PURE__ */ r(oe, { size: 24, stroke: 2 }),
+  success: /* @__PURE__ */ r(le, { size: 24, stroke: 2 })
+}, Be = {
+  [k.Info]: "bg-info border-info text-info",
+  [k.Success]: "bg-success border-success text-success",
+  [k.Warning]: "bg-warning border-warning text-warning",
+  [k.Error]: "bg-error border-error text-error"
+}, Oe = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", Ir = ({
+  variant: e = k.Info,
+  message: n,
+  cssClass: t,
+  closable: s = !1,
+  onClose: a
 }) => /* @__PURE__ */ p(
   "div",
   {
     role: "alert",
-    className: u(
-      be,
-      he[e],
-      n
+    className: i(
+      Oe,
+      Be[e],
+      t
     ),
     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(D, { icon: Le[e] }),
+        /* @__PURE__ */ r("div", { className: "text-primary", children: n })
       ] }),
-      s && /* @__PURE__ */ t(
-        fe,
+      s && /* @__PURE__ */ r(
+        P,
         {
-          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(V, { size: 16 }),
+          onClick: (l) => a?.(l)
         }
       )
     ]
   }
-), xe = 7, Ne = 2, A = le(null), W = () => {
-  const e = ue(A);
+), Ve = "flex items-center justify-center text-secondary", je = "shrink-0 grow-0 basis-auto animate-spin-steps", Me = ({
+  size: e = 18,
+  cssClass: n,
+  iconClass: t,
+  fullWidth: s = !0,
+  ariaLabel: a = "Loading"
+}) => /* @__PURE__ */ r(
+  "div",
+  {
+    role: "status",
+    "aria-label": a,
+    className: i({
+      [Ve]: !0,
+      "w-full h-full": s,
+      [n || ""]: !!n
+    }),
+    children: /* @__PURE__ */ r(
+      D,
+      {
+        icon: /* @__PURE__ */ r(
+          de,
+          {
+            width: e,
+            height: e,
+            className: i(je, t)
+          }
+        )
+      }
+    )
+  }
+), _e = 7, We = 2, Y = ge(null), J = () => {
+  const e = Ce(Y);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
   return e;
-}, ve = ({
+}, He = ({
   initialOpen: e = !1,
-  placement: r = "bottom",
-  isTriggerClickable: n = !1,
+  placement: n = "bottom",
+  isTriggerClickable: t = !1,
   open: s,
-  onOpenChange: o
+  onOpenChange: a
 } = {}) => {
-  const [l, a] = ae(e), c = ie(null), i = s ?? l, m = o ?? a, d = $({
-    placement: r,
-    open: i,
-    onOpenChange: m,
-    whileElementsMounted: J,
+  const [l, o] = _(e), c = be(null), d = s ?? l, u = a ?? o, m = G({
+    placement: n,
+    open: d,
+    onOpenChange: u,
+    whileElementsMounted: Re,
     middleware: [
-      X(xe + Ne),
-      Y({
-        crossAxis: r.includes("-"),
+      De(_e + We),
+      Ie({
+        crossAxis: n.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5
       }),
-      Z({ padding: 5 }),
-      q({
+      ke({ padding: 5 }),
+      Se({
         element: c
       })
     ]
-  }), f = Q(d.context, {
+  }), x = Fe(m.context, {
     move: !1,
     enabled: s == null,
-    mouseOnly: n,
+    mouseOnly: t,
     delay: { open: 500, close: 0 }
-  }), T = ee(d.context, {
+  }), h = Ee(m.context, {
     enabled: s == null
-  }), k = re(d.context), h = ne(d.context, { role: "tooltip" }), g = te([f, T, k, h]);
-  return ce(
+  }), g = K(m.context), y = Z(m.context, { role: "tooltip" }), f = X([x, h, g, y]);
+  return ye(
     () => ({
-      open: i,
-      setOpen: m,
+      open: d,
+      setOpen: u,
       arrowRef: c,
-      ...g,
-      ...d
+      ...f,
+      ...m
     }),
-    [i, m, g, d]
+    [d, u, f, m]
   );
-}, we = ({
+}, Ue = ({
   children: e,
-  ...r
+  ...n
 }) => {
-  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 t = He(n);
+  return /* @__PURE__ */ r(Y.Provider, { value: t, children: e });
+}, $e = $(function({ style: n, ...t }, s) {
+  const a = J(), l = q([a.refs.setFloating, s]);
+  return a.open ? /* @__PURE__ */ r(Q, { id: "tooltip-portal", children: /* @__PURE__ */ p(
     "div",
     {
       ref: l,
       style: {
-        ...o.floatingStyles,
-        ...r
+        ...a.floatingStyles,
+        ...n
       },
-      ...o.getFloatingProps(n),
-      className: u(
+      ...a.getFloatingProps(t),
+      className: i(
         "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
+        a.getFloatingProps(t).className
       ),
       children: [
-        n.children,
-        /* @__PURE__ */ t(
-          oe,
+        t.children,
+        /* @__PURE__ */ r(
+          Te,
           {
-            ref: o.arrowRef,
-            context: o.context,
+            ref: a.arrowRef,
+            context: a.context,
             fill: "currentColor",
             strokeWidth: 1,
             className: "stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"
@@ -185,71 +224,308 @@ 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,
+}), Ge = $(function({ children: n, asChild: t = !1, ...s }, a) {
+  const l = J(), c = n && typeof n == "object" && "ref" in n && n.ref !== void 0 ? n.ref : void 0, d = q([l.refs.setReference, a, c]);
+  return t && Ne(n) ? ve(
+    n,
     l.getReferenceProps({
-      ref: i,
+      ref: d,
       ...s,
-      ...r.props
+      ...n.props
     })
-  ) : /* @__PURE__ */ t(
+  ) : /* @__PURE__ */ r(
     "span",
     {
-      ref: i,
+      ref: d,
       ...l.getReferenceProps(s),
       className: s.className ?? "dial-tooltip-trigger text-left",
-      children: r
+      children: n
     }
   );
-}), D = ({
+}), S = ({
   hideTooltip: e,
-  tooltip: r,
-  children: n,
+  tooltip: n,
+  children: t,
   triggerClassName: s,
-  contentClassName: o,
+  contentClassName: a,
   ...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,
+}) => /* @__PURE__ */ p(Ue, { ...l, children: [
+  /* @__PURE__ */ r(Ge, { className: i(s, "truncate"), children: t }),
+  /* @__PURE__ */ r(
+    $e,
     {
-      className: u(
+      className: i(
         "text-primary",
-        o,
+        a,
         "max-w-[300px]",
-        (e || !r) && "hidden"
+        (e || !n) && "hidden"
       ),
-      children: r
+      children: n
     }
   )
-] }), De = ({
+] }), Ke = 18, A = {
+  size: Ke,
+  stroke: 2
+}, kr = ({
+  label: e,
+  id: n,
+  checked: t,
+  indeterminate: s,
+  disabled: a,
+  ariaLabel: l,
+  onChange: o
+}) => {
+  const c = F(
+    (m) => {
+      m.stopPropagation(), o?.(m.target.checked, n);
+    },
+    [o, n]
+  ), d = i(
+    "flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",
+    `${t ? "" : 'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,
+    a ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : ""
+  ), u = i(
+    "mr-2 border rounded",
+    a ? "bg-layer-4 border-icon-secondary" : ""
+  );
+  return /* @__PURE__ */ p("label", { className: d, htmlFor: n, children: [
+    t && (s ? /* @__PURE__ */ r(ue, { className: u, ...A }) : /* @__PURE__ */ r(U, { className: u, ...A })),
+    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: n,
+        checked: t,
+        "aria-checked": s ? "mixed" : t,
+        "aria-disabled": a || void 0,
+        "aria-label": e ? void 0 : l,
+        className: "invisible w-0 h-0"
+      }
+    )
+  ] });
+};
+var C = /* @__PURE__ */ ((e) => (e.VALID = "valid", e.ERROR = "error", e))(C || {});
+const Ze = (e, n) => {
+  if (n === e.id)
+    switch (e.status) {
+      case C.VALID:
+        return "border-accent-secondary text-primary";
+      case C.ERROR:
+        return "border-red-900 text-primary";
+      default:
+        return "border-accent-primary text-primary";
+    }
+  switch (e.status) {
+    case C.VALID:
+      return "border-primary text-white";
+    case C.ERROR:
+      return "border-red-900 text-error";
+    default:
+      return "border-primary text-secondary";
+  }
+}, Xe = (e, n) => {
+  if (n === e.id)
+    switch (e.status) {
+      case C.VALID:
+        return "bg-accent-secondary";
+      case C.ERROR:
+        return "bg-red-400";
+      default:
+        return "bg-accent-primary";
+    }
+  switch (e.status) {
+    case C.VALID:
+      return "bg-accent-secondary";
+    case C.ERROR:
+      return "bg-red-400";
+    default:
+      return "bg-layer-4";
+  }
+}, qe = ({
+  step: e,
+  index: n,
+  currentStep: t,
+  onChangeStep: s
+}) => {
+  const a = "h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer", l = "w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white", o = () => t === e.id && e.status === C.ERROR ? /* @__PURE__ */ r(me, { stroke: 2, size: 16 }) : t !== e.id && e.status === C.VALID ? /* @__PURE__ */ r(U, { stroke: 2, size: 16 }) : n + 1;
+  return /* @__PURE__ */ p(
+    "button",
+    {
+      className: i(a, Ze(e, t)),
+      onClick: () => s(e.id),
+      children: [
+        /* @__PURE__ */ r(
+          "span",
+          {
+            className: i(l, Xe(e, t)),
+            children: o()
+          }
+        ),
+        /* @__PURE__ */ r("span", { children: e.name })
+      ]
+    }
+  );
+}, Sr = ({
+  steps: e,
+  currentStep: n,
+  onChangeStep: t
+}) => {
+  const s = (a) => {
+    const l = e.findIndex((c) => c.id === n), o = e.findIndex((c) => c.id === a);
+    (a !== n && e[l].status === C.VALID || o < l) && t(a);
+  };
+  return /* @__PURE__ */ r("div", { id: "steps", className: "flex gap-x-3", children: e.map((a, l) => /* @__PURE__ */ r(
+    qe,
+    {
+      currentStep: n,
+      onChangeStep: s,
+      step: a,
+      index: l
+    },
+    a.id
+  )) });
+}, Qe = ({
+  name: e,
+  value: n,
+  title: t,
+  description: s,
+  checked: a = !1,
+  inputId: l,
+  cssClass: o,
+  labelCssClass: c,
+  disabled: d,
+  onChange: u,
+  descriptionCssClass: m
+}) => {
+  const x = `${l}-desc`, h = i(
+    "dial-small cursor-pointer",
+    d ? "text-secondary" : "text-primary",
+    c
+  ), g = i(
+    "cursor-pointer dial-input-radio",
+    t && "mr-2",
+    o
+  ), y = i("flex flex-col", !!s && "mb-2"), f = i(
+    "dial-tiny mt-2 ml-[26px] text-secondary",
+    m
+  );
+  return /* @__PURE__ */ p("div", { className: y, children: [
+    /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
+      /* @__PURE__ */ r(
+        "input",
+        {
+          type: "radio",
+          id: l,
+          name: e,
+          value: n,
+          checked: a,
+          disabled: d,
+          "aria-describedby": a && s ? x : void 0,
+          className: g,
+          onChange: (w) => {
+            d || w.target.checked && u?.(n);
+          }
+        }
+      ),
+      t ? /* @__PURE__ */ r("label", { className: h, htmlFor: l, children: t }) : null
+    ] }),
+    a && s && /* @__PURE__ */ r("div", { id: x, className: f, children: s })
+  ] });
+};
+var M = /* @__PURE__ */ ((e) => (e.Row = "Row", e.Column = "Column", e))(M || {});
+const Ye = "flex flex-col gap-2", Je = "flex", er = "pb-1 mt-2", rr = {
+  [M.Column]: "flex-col gap-y-3",
+  [M.Row]: "flex-row gap-x-6"
+}, Rr = ({
+  fieldTitle: e,
+  radioCssClass: n,
+  labelCssClass: t,
+  disabled: s,
+  elementId: a,
+  radioButtons: l,
+  activeRadioButton: o,
+  orientation: c,
+  onChange: d
+}) => /* @__PURE__ */ p("div", { className: Ye, children: [
+  e && /* @__PURE__ */ r(j, { fieldTitle: e, htmlFor: a }),
+  /* @__PURE__ */ r(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": e,
+      "aria-disabled": s || void 0,
+      className: i(
+        Je,
+        rr[c]
+      ),
+      children: l.map((u) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ r(
+          Qe,
+          {
+            name: a,
+            value: u.id,
+            inputId: u.id,
+            disabled: s,
+            cssClass: n,
+            labelCssClass: t,
+            title: u.name,
+            checked: u.id === o,
+            onChange: () => d(u.id)
+          }
+        ),
+        u.id === o && u.content ? /* @__PURE__ */ r("div", { className: er, children: u.content }) : null
+      ] }, u.id))
+    }
+  )
+] }), Fr = ({
+  icon: e,
+  title: n,
+  description: t
+}) => /* @__PURE__ */ p("div", { className: "h-full w-full flex flex-col items-center justify-center text-secondary", children: [
+  e || /* @__PURE__ */ r(pe, { width: 60, height: 60 }),
+  /* @__PURE__ */ r("span", { className: "small mt-2 text-primary", children: n }),
+  t && /* @__PURE__ */ r("span", { className: "mt-1 text-primary", children: t })
+] }), Er = ({
+  ariaLabel: e,
+  cssClass: n,
+  size: t = 24,
+  onClose: s
+}) => /* @__PURE__ */ r(
+  P,
+  {
+    ariaLabel: e,
+    cssClass: i("text-secondary hover:text-accent-primary", n),
+    onClick: s,
+    iconBefore: /* @__PURE__ */ r(V, { size: t })
+  }
+), nr = ({
   value: e,
-  textareaId: r,
-  placeholder: n,
+  textareaId: n,
+  placeholder: t,
   cssClass: s = "",
-  disabled: o,
+  disabled: a,
   invalid: l,
-  readonly: a,
+  readonly: o,
   onChange: c
-}) => /* @__PURE__ */ t(D, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ t(
+}) => /* @__PURE__ */ r(S, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
   "textarea",
   {
-    id: r,
-    placeholder: n,
+    id: n,
+    placeholder: t,
     value: e || "",
-    disabled: o,
-    className: u(
-      "dial-textarea dial-input",
+    disabled: a,
+    className: i(
+      "dial-textarea dial-input px-3 py-2",
       l ? "dial-input-error" : "",
-      o && "dial-input-disable",
-      a && "dial-input-readonly",
+      a && "dial-input-disable",
+      o && "dial-input-readonly",
       s
     ),
-    onChange: (i) => !a && c?.(i.currentTarget.value)
+    onChange: (d) => !o && c?.(d.currentTarget.value)
   }
-) }), Te = [
+) }), tr = [
   "ArrowLeft",
   "ArrowRight",
   "ArrowUp",
@@ -261,271 +537,581 @@ 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("."))) {
+], sr = (e, n, t, s) => {
+  if ((n === "number" || t !== void 0 || s !== void 0) && !tr.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (t === void 0 || t < 0)) && !(e.key === "." && n === "number" && !e.currentTarget.value.includes("."))) {
     if (!/^[0-9]$/.test(e.key)) {
       e.preventDefault();
       return;
     }
-    if (n !== void 0 || 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 (t !== void 0 || s !== void 0) {
+      const l = e.currentTarget.value, o = e.currentTarget.selectionStart || 0, c = l.slice(0, o) + e.key + l.slice(o), d = parseFloat(c);
+      if (!isNaN(d)) {
+        if (t !== void 0 && d < t) {
           e.preventDefault();
           return;
         }
-        if (s !== void 0 && i > s) {
+        if (s !== void 0 && d > s) {
           e.preventDefault();
           return;
         }
       }
     }
   }
-}, F = ({
-  iconBeforeInput: e,
-  iconAfterInput: r,
-  hideBorder: n,
+}, L = ({
+  iconBefore: e,
+  iconAfter: n,
+  hideBorder: t,
   value: s,
-  elementId: o,
+  elementId: a,
   placeholder: l = "",
-  cssClass: a = "",
+  cssClass: o = "",
   containerCssClass: c,
-  tooltipTriggerClassName: i,
-  type: m = "text",
-  disabled: d,
-  readonly: f,
-  invalid: T,
-  onChange: k,
-  min: h,
-  max: g,
-  prefix: I,
-  suffix: R,
-  textBeforeInput: N,
-  textAfterInput: v
+  tooltipTriggerClassName: d,
+  type: u = "text",
+  disabled: m,
+  readonly: x,
+  invalid: h,
+  onChange: g,
+  min: y,
+  max: f,
+  prefix: v,
+  suffix: w,
+  textBeforeInput: b,
+  textAfterInput: E
 }) => {
-  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 re = (I) => I.target.blur(), ne = u === "number" || y !== void 0 || f !== void 0, te = (I) => {
+    sr(I, u, y, f);
+  }, se = (I) => {
+    const T = I.currentTarget.value;
+    if (ne && T !== "") {
+      const z = parseFloat(T);
+      if (isNaN(z) && T !== "-" && T !== "." || !isNaN(z) && (y !== void 0 && z < y || f !== void 0 && z > f))
         return;
     }
-    k?.(w);
+    g?.(T);
   };
   return /* @__PURE__ */ p(
     "div",
     {
-      className: u(
-        "dial-input-field flex flex-row items-center justify-between",
-        n ? "dial-input-no-border" : "dial-input",
-        T && "dial-input-error",
-        d && "dial-input-disable",
-        f && "dial-input-readonly",
-        !N && "pl-1",
-        !v && "pr-1",
+      className: i(
+        "dial-input-field flex flex-row items-center justify-between px-3 py-2",
+        t ? "dial-input-no-border" : "dial-input",
+        h && "dial-input-error",
+        m && "dial-input-disable",
+        x && "dial-input-readonly",
+        !b && "pl-1",
+        !E && "pr-1",
         c
       ),
       children: [
-        N && /* @__PURE__ */ t(D, { tooltip: N, children: /* @__PURE__ */ t(
-          F,
+        b && /* @__PURE__ */ r(S, { tooltip: b, children: /* @__PURE__ */ r(
+          L,
           {
             hideBorder: !0,
             containerCssClass: "rounded-r-none border-r-0",
             cssClass: "px-2 overflow-hidden overflow-ellipsis dial-small",
-            value: N,
+            value: b,
             disabled: !0,
-            elementId: N + "textBefore"
+            elementId: b + "textBefore"
           }
         ) }),
-        I && /* @__PURE__ */ p("p", { className: "text-secondary dial-small pl-2", children: [
+        v && /* @__PURE__ */ p("p", { className: "text-secondary dial-small pl-2", children: [
           " ",
-          I
+          v
         ] }),
-        /* @__PURE__ */ t(C, { icon: e, className: "pl-2" }),
-        /* @__PURE__ */ t(D, { tooltip: s, triggerClassName: i, children: /* @__PURE__ */ t(
-          "input",
+        /* @__PURE__ */ r(D, { 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: s,
+            triggerClassName: i(d, "flex-1"),
+            children: /* @__PURE__ */ r(
+              "input",
+              {
+                type: u,
+                autoComplete: "off",
+                id: a,
+                placeholder: l,
+                value: s ?? "",
+                title: s ? String(s) : "",
+                disabled: m,
+                className: i("border-0 bg-transparent px-2", o),
+                onChange: (I) => !x && se?.(I),
+                onKeyDown: te,
+                onWheel: re,
+                min: y,
+                max: f
+              }
+            )
           }
-        ) }),
-        /* @__PURE__ */ t(C, { icon: r, className: "pr-2" }),
-        R && /* @__PURE__ */ p("p", { className: "text-secondary dial-small pr-2", children: [
+        ),
+        /* @__PURE__ */ r(D, { icon: n }),
+        w && /* @__PURE__ */ p("p", { className: "text-secondary dial-small pr-2", children: [
           " ",
-          R
+          w
         ] }),
-        v && /* @__PURE__ */ t(D, { tooltip: v, children: /* @__PURE__ */ t(
-          F,
+        E && /* @__PURE__ */ r(S, { tooltip: E, children: /* @__PURE__ */ r(
+          L,
           {
             hideBorder: !0,
             containerCssClass: "rounded-l-none border-l-0",
             cssClass: "px-2",
-            value: v,
+            value: E,
             disabled: !0,
-            elementId: v + "textAfter"
+            elementId: E + "textAfter"
           }
         ) })
       ]
     }
   );
-}, Fe = /^0+\.(\d+)?$/, Ie = /^0+/, j = ({
+}, ar = /^0+\.(\d+)?$/, lr = /^0+/, ee = ({
   fieldTitle: e,
-  errorText: r,
-  optional: n,
+  errorText: n,
+  optional: t,
   elementCssClass: s,
-  elementContainerCssClass: o,
+  elementContainerCssClass: a,
   elementId: l,
-  containerCssClass: a,
+  containerCssClass: o,
   readonly: c,
-  defaultEmptyText: i,
-  min: m,
-  max: d,
-  ...f
-}) => /* @__PURE__ */ p("div", { className: u("flex flex-col", a), children: [
-  /* @__PURE__ */ t(
-    z,
+  defaultEmptyText: d,
+  min: u,
+  max: m,
+  ...x
+}) => /* @__PURE__ */ p("div", { className: i("flex flex-col", o), children: [
+  /* @__PURE__ */ r(
+    j,
     {
       fieldTitle: e,
-      optional: n,
+      optional: t,
       htmlFor: l
     }
   ),
-  c ? /* @__PURE__ */ t("span", { children: f.value || (i ?? "None") }) : /* @__PURE__ */ p(_, { children: [
-    /* @__PURE__ */ t(
-      F,
+  c ? /* @__PURE__ */ r("span", { children: x.value || (d ?? "None") }) : /* @__PURE__ */ p(ae, { children: [
+    /* @__PURE__ */ r(
+      L,
       {
         elementId: l,
         cssClass: s,
-        containerCssClass: o,
-        invalid: r != null,
-        min: m,
-        max: d,
-        ...f
+        containerCssClass: a,
+        invalid: n != null,
+        min: u,
+        max: m,
+        ...x
       }
     ),
-    /* @__PURE__ */ t(S, { errorText: r })
+    /* @__PURE__ */ r(W, { errorText: n })
   ] })
-] }), We = ({
+] }), Tr = ({
   onChange: e,
-  value: r,
-  min: n,
+  value: n,
+  min: t,
   max: s,
-  ...o
+  ...a
 }) => {
-  const l = (a) => String(a)?.match(Fe) ? String(a)?.replace(Ie, "0") : Number(a);
-  return /* @__PURE__ */ t(
-    j,
+  const l = (o) => String(o)?.match(ar) ? String(o)?.replace(lr, "0") : Number(o);
+  return /* @__PURE__ */ r(
+    ee,
     {
       type: "number",
-      onChange: (a) => e?.(l(a)),
-      value: r,
-      min: n,
+      onChange: (o) => e?.(l(o)),
+      value: n,
+      min: t,
       max: s,
-      ...o
+      ...a
     }
   );
-}, je = ({
+}, Pr = ({
   onChange: e,
-  ...r
-}) => /* @__PURE__ */ t(
-  j,
+  ...n
+}) => /* @__PURE__ */ r(
+  ee,
   {
     type: "text",
-    onChange: (n) => e?.(n),
-    ...r
+    onChange: (t) => e?.(t),
+    ...n
   }
-), Le = ({
+), zr = ({
   fieldTitle: e,
-  optional: r,
-  elementId: n,
+  optional: n,
+  elementId: t,
   elementCssClass: s,
-  errorText: o,
+  errorText: a,
   ...l
 }) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
-  /* @__PURE__ */ t(
-    z,
+  /* @__PURE__ */ r(
+    j,
     {
       fieldTitle: e,
-      optional: r,
-      htmlFor: n
+      optional: n,
+      htmlFor: t
     }
   ),
-  /* @__PURE__ */ t(
-    De,
+  /* @__PURE__ */ r(
+    nr,
     {
-      textareaId: n,
+      textareaId: t,
       cssClass: s,
       ...l
     }
   ),
-  /* @__PURE__ */ t(S, { errorText: o })
-] }), He = ({
+  /* @__PURE__ */ r(W, { errorText: a })
+] }), Ar = ({
   title: e,
-  switchId: r,
-  isOn: n = !1,
+  switchId: n,
+  isOn: t = !1,
   disabled: s,
-  onChange: o
+  onChange: a
 }) => {
-  const l = u(
-    "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",
+  const l = i(
+    "flex w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",
+    t ? "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(
+    s ? t ? "bg-controls-disable" : "bg-layer-4" : t ? "bg-accent-primary" : "bg-layer-4"
+  ), o = F(
     (c) => {
-      c.stopPropagation(), o?.(!n);
+      c.stopPropagation(), a?.(!t);
     },
-    [o, n]
+    [a, t]
   );
   return /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ r(
       "input",
       {
         type: "checkbox",
-        onChange: a,
-        id: r,
+        onChange: o,
+        id: n,
         disabled: s,
         className: "invisible w-0 h-0",
-        checked: n
+        checked: t
       }
     ),
-    /* @__PURE__ */ t("label", { htmlFor: r, className: l, children: /* @__PURE__ */ t(
+    /* @__PURE__ */ r("label", { htmlFor: n, className: l, children: /* @__PURE__ */ r(
       "span",
       {
-        className: u(
+        className: i(
           "size-3 rounded-full",
-          s ? n ? "bg-controls-disable" : "bg-layer-4" : "bg-controls-enable-primary"
+          s ? t ? "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 R = /* @__PURE__ */ ((e) => (e.Sm = "sm", e.Md = "md", e.Lg = "lg", e))(R || {});
+const or = "z-[52] flex items-center justify-center bg-blackout md:p-4", ir = "relative max-h-full rounded bg-layer-3 flex flex-col shadow w-full h-full md:h-auto", cr = "divide-tertiary divide-y", dr = "flex flex-row justify-between py-4 px-6 items-center", ur = {
+  [R.Sm]: "max-w-full md:max-w-[400px]",
+  [R.Md]: "max-w-full md:max-w-[800px]",
+  [R.Lg]: "max-w-full md:max-w-[1200px]"
+}, mr = ({
+  open: e = !1,
+  title: n,
+  portalId: t,
+  cssClass: s,
+  overlayClass: a,
+  headingClass: l,
+  dividers: o = !0,
+  children: c,
+  footer: d,
+  onClose: u,
+  size: m = R.Md
+}) => {
+  const { refs: x, context: h } = G({
+    open: e,
+    onOpenChange: (b) => {
+      b || u?.(null);
+    }
+  }), g = Z(h, { role: "dialog" }), y = K(h, { outsidePress: !0 }), { getFloatingProps: f } = X([g, y]);
+  if (!e) return null;
+  const v = typeof n == "string" ? "dial-popup-heading" : void 0, w = (b) => b ? typeof b == "string" ? /* @__PURE__ */ r(
+    "h3",
+    {
+      id: v,
+      className: i(
+        "flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",
+        l
+      ),
+      children: /* @__PURE__ */ r(S, { tooltip: b, children: b })
+    }
+  ) : b : /* @__PURE__ */ r("span", {});
+  return /* @__PURE__ */ r(Q, { id: t, children: /* @__PURE__ */ r(Pe, { className: i(or, a), children: /* @__PURE__ */ r(ze, { context: h, children: /* @__PURE__ */ p(
+    "div",
+    {
+      ref: x.setFloating,
+      ...f(),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": v,
+      className: i(
+        ir,
+        ur[m],
+        o && cr,
+        s
+      ),
+      children: [
+        /* @__PURE__ */ p("div", { className: dr, children: [
+          w(n),
+          /* @__PURE__ */ r(
+            P,
+            {
+              cssClass: "text-secondary hover:text-accent-primary",
+              ariaLabel: "Close dialog",
+              iconBefore: /* @__PURE__ */ r(V, { size: 18 }),
+              onClick: (b) => u?.(b)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex-grow overflow-auto", children: c }),
+        d
+      ]
+    }
+  ) }) }) });
+};
+var B = /* @__PURE__ */ ((e) => (e.Info = "info", e.Danger = "danger", e))(B || {});
+const pr = "flex justify-end gap-2 px-6 py-4", fr = "text-secondary dial-small-150 px-6 py-4", xr = "Cancel", H = {
+  [B.Info]: {
+    confirmVariant: N.Primary,
+    cancelVariant: N.Secondary
+  },
+  [B.Danger]: {
+    container: "border-t-4 border-error",
+    confirmVariant: N.Danger,
+    cancelVariant: N.Secondary
+  }
+}, Lr = ({
+  title: e,
+  description: n,
+  descriptionCssClass: t,
+  open: s = !1,
+  confirmLabel: a,
+  cancelLabel: l = xr,
+  isLoading: o = !1,
+  disableConfirmButton: c = !1,
+  cssClass: d,
+  confirmClassName: u,
+  onClose: m,
+  onConfirm: x,
+  onCancel: h,
+  children: g,
+  dividers: y = !1,
+  variant: f = B.Info,
+  size: v = R.Sm
+}) => {
+  const w = o ? null : /* @__PURE__ */ p("div", { className: pr, children: [
+    /* @__PURE__ */ r(
+      P,
+      {
+        variant: N.Secondary,
+        title: l,
+        onClick: () => h ? h() : m?.()
+      }
+    ),
+    /* @__PURE__ */ r(
+      P,
+      {
+        variant: H[f].confirmVariant,
+        cssClass: u,
+        title: a,
+        disable: c,
+        onClick: () => x()
+      }
+    )
+  ] }), b = F(() => o ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r(Me, { size: 50 }) }) : g ?? (n ? /* @__PURE__ */ r(
+    "div",
+    {
+      className: i(fr, t),
+      children: n
+    }
+  ) : null), [g, n, o, t]);
+  return /* @__PURE__ */ r(
+    mr,
+    {
+      open: s,
+      title: e,
+      cssClass: i(H[f].container, d),
+      dividers: y,
+      onClose: () => m?.(),
+      footer: w,
+      size: v,
+      children: b()
+    }
+  );
+}, hr = ({ onClick: e }) => /* @__PURE__ */ r(
+  fe,
+  {
+    ...A,
+    className: "text-primary",
+    onClick: e
+  }
+), gr = ({ onClick: e }) => /* @__PURE__ */ r(xe, { ...A, className: "text-primary", onClick: e }), br = ({ ...e }) => {
+  const [n, t] = _(!1), s = F((a) => {
+    t(a);
+  }, []);
+  return /* @__PURE__ */ r(
+    L,
+    {
+      type: n ? "text" : "password",
+      ...e,
+      iconAfter: n ? /* @__PURE__ */ r(hr, { onClick: () => s(!1) }) : /* @__PURE__ */ r(gr, { onClick: () => s(!0) })
+    }
+  );
+}, Br = ({
+  fieldTitle: e,
+  optional: n,
+  elementCssClass: t,
+  elementId: s,
+  errorText: a,
+  ...l
+}) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
+  /* @__PURE__ */ r(
+    j,
+    {
+      fieldTitle: e,
+      optional: n,
+      htmlFor: s
+    }
+  ),
+  /* @__PURE__ */ r(
+    br,
+    {
+      cssClass: t,
+      elementId: s,
+      invalid: !!a,
+      ...l
+    }
+  ),
+  /* @__PURE__ */ r(W, { errorText: a })
+] });
+var O = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(O || {});
+const yr = {
+  [O.Small]: {
+    textClass: "text-xs px-1",
+    containerClass: "px-[6px] py-1 h-[22px]",
+    iconSize: 10,
+    iconStroke: 1
+  },
+  [O.Base]: {
+    textClass: "text-sm px-2",
+    containerClass: "px-3 py-2 h-[38px]",
+    iconSize: 18,
+    iconStroke: 1.5
+  }
+}, Or = ({
+  elementId: e,
+  value: n,
+  placeholder: t,
+  disabled: s,
+  readonly: a,
+  invalid: l,
+  cssClass: o,
+  containerCssClass: c,
+  onChange: d,
+  size: u = O.Base
+}) => {
+  const [m, x] = _(n || "");
+  we(() => {
+    x(n || "");
+  }, [n]);
+  const h = F(
+    (f) => {
+      x(f), d?.(f);
+    },
+    [d]
+  ), g = yr[u], y = F(() => {
+    h("");
+  }, [h]);
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: i(
+        "dial-input flex flex-row items-center justify-between",
+        l && "dial-input-error",
+        s && "dial-input-disable",
+        a && "dial-input-readonly",
+        g.containerClass,
+        c
+      ),
+      children: [
+        /* @__PURE__ */ r(
+          D,
+          {
+            className: i(s ? "text-secondary" : "text-primary"),
+            icon: /* @__PURE__ */ r(
+              he,
+              {
+                size: g.iconSize,
+                stroke: g.iconStroke
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            id: e,
+            type: "text",
+            autoComplete: "off",
+            placeholder: t,
+            value: m ?? "",
+            title: m ? String(m) : "",
+            disabled: s,
+            readOnly: a,
+            className: i(
+              "border-0 bg-transparent w-full",
+              o,
+              g.textClass
+            ),
+            onChange: (f) => !a && h(f.currentTarget.value)
+          }
+        ),
+        m && !a && !s && /* @__PURE__ */ r(
+          D,
+          {
+            className: "text-primary cursor-pointer",
+            icon: /* @__PURE__ */ r(
+              V,
+              {
+                size: g.iconSize,
+                stroke: g.iconStroke,
+                onClick: y,
+                "aria-label": "Clear search",
+                role: "button"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
 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
+  k as AlertVariant,
+  N as ButtonVariant,
+  B as ConfirmationPopupVariant,
+  Ir as DialAlert,
+  P as DialButton,
+  kr as DialCheckbox,
+  Er as DialCloseButton,
+  Lr as DialConfirmationPopup,
+  W as DialErrorText,
+  j as DialFieldLabel,
+  D as DialIcon,
+  L as DialInput,
+  Me as DialLoader,
+  Fr as DialNoDataContent,
+  Tr as DialNumberInputField,
+  br as DialPasswordInput,
+  Br as DialPasswordInputField,
+  mr as DialPopup,
+  Qe as DialRadioButton,
+  Rr as DialRadioGroup,
+  Or as DialSearch,
+  Sr as DialSteps,
+  Ar as DialSwitch,
+  zr as DialTextAreaField,
+  Pr as DialTextInputField,
+  nr as DialTextarea,
+  S as DialTooltip,
+  R as PopupSize,
+  M as RadioGroupOrientation,
+  C as StepStatus
 };