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

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

@@ -1,138 +1,220 @@
-import { jsx as l, jsxs as m, Fragment as _ } from "react/jsx-runtime";
+import { jsx as n, jsxs as m, Fragment as $ } from "react/jsx-runtime";
 import d from "classnames";
-import { useFloating as K, offset as M, flip as z, shift as G, arrow as O, autoUpdate as $, useHover as Y, useFocus as Z, useDismiss as q, useRole as B, useInteractions as J, useMergeRefs as P, FloatingPortal as Q, FloatingArrow as X } from "@floating-ui/react";
-import { createContext as ee, useState as te, useRef as ne, useMemo as re, useContext as le, forwardRef as E, isValidElement as se, cloneElement as oe, useCallback as ae } from "react";
-const y = ({ icon: e, className: t }) => e ? /* @__PURE__ */ l("span", { className: d("flex-shrink-0", t), children: e }) : null, ye = ({
+import { IconCircleCheck as G, IconAlertTriangle as Z, IconAlertCircle as X, IconInfoCircle as Y, IconX as q, IconLoader as J, IconMinus as Q, IconCheck as A, IconExclamationCircle as ee } from "@tabler/icons-react";
+import { createContext as re, useState as te, useRef as ne, useMemo as se, useContext as oe, forwardRef as L, isValidElement as ae, cloneElement as le, useCallback as O } from "react";
+import { useFloating as ie, offset as ce, flip as de, shift as ue, arrow as me, autoUpdate as fe, useHover as pe, useFocus as be, useDismiss as he, useRole as ge, useInteractions as xe, useMergeRefs as z, FloatingPortal as ye, FloatingArrow as Ne } from "@floating-ui/react";
+const N = ({ icon: e, className: r }) => e ? /* @__PURE__ */ n("span", { className: d("flex-shrink-0", r), children: e }) : null;
+var k = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e))(k || {});
+const Ce = {
+  [k.Primary]: "dial-primary-button",
+  [k.Secondary]: "dial-secondary-button",
+  [k.Tertiary]: "dial-tertiary-button"
+}, we = ({
   title: e,
+  variant: r,
   cssClass: t,
-  ref: n,
-  onClick: r,
-  disable: s,
-  iconAfter: o,
-  iconBefore: a,
+  ref: s,
+  onClick: o,
+  disable: a,
+  iconAfter: l,
+  iconBefore: i,
   hideTitleOnMobile: c,
-  ariaLabel: i
+  ariaLabel: f
 }) => {
-  const p = d(
+  const u = d(
     "dial-small-semi",
-    o ? "mr-2" : "",
-    a ? "ml-2" : "",
+    l ? "mr-2" : "",
+    i ? "ml-2" : "",
     c ? "hidden sm:inline" : "inline"
-  ), u = d(
+  ), b = d(
+    r && Ce[r],
     t,
     "focus-visible:outline outline-offset-0"
   );
   return /* @__PURE__ */ m(
     "button",
     {
-      ref: n,
+      ref: s,
       type: "button",
-      className: u,
-      onClick: (f) => r?.(f),
-      disabled: s,
-      "aria-label": e || i,
+      className: b,
+      onClick: (C) => o?.(C),
+      disabled: a,
+      "aria-label": e || f,
       children: [
-        /* @__PURE__ */ l(y, { icon: a }),
-        e && /* @__PURE__ */ l("span", { className: p, children: e }),
-        /* @__PURE__ */ l(y, { icon: o })
+        /* @__PURE__ */ n(N, { icon: i }),
+        e && /* @__PURE__ */ n("span", { className: u, children: e }),
+        /* @__PURE__ */ n(N, { icon: l })
       ]
     }
   );
-}, S = ({ errorText: e }) => e && /* @__PURE__ */ l("span", { className: "text-error dial-tiny mt-1", children: e }), A = ({
+}, V = ({ errorText: e }) => e && /* @__PURE__ */ n("span", { className: "text-error dial-tiny mt-1", children: e }), _ = ({
   fieldTitle: e,
-  htmlFor: t,
-  optional: n,
-  optionalText: r,
-  cssClass: s
+  htmlFor: r,
+  optional: t,
+  optionalText: s,
+  cssClass: o
 }) => e ? /* @__PURE__ */ m(
   "label",
   {
     className: d(
       "dial-tiny text-secondary",
-      s,
-      !s?.includes("mb") && "mb-2"
+      o,
+      !o?.includes("mb") && "mb-2"
     ),
-    htmlFor: t,
+    htmlFor: r,
     children: [
-      /* @__PURE__ */ l("span", { className: "min-h-4", children: e }),
-      n && /* @__PURE__ */ l("span", { className: "ml-1", children: r ?? "(Optional)" })
+      /* @__PURE__ */ n("span", { className: "min-h-4", children: e }),
+      t && /* @__PURE__ */ n("span", { className: "ml-1", children: s ?? "(Optional)" })
     ]
   }
-) : null, ie = 7, ce = 2, I = ee(null), V = () => {
-  const e = le(I);
+) : null;
+var y = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(y || {});
+const ve = {
+  info: /* @__PURE__ */ n(Y, { size: 24, stroke: 2 }),
+  error: /* @__PURE__ */ n(X, { size: 24, stroke: 2 }),
+  warning: /* @__PURE__ */ n(Z, { size: 24, stroke: 2 }),
+  success: /* @__PURE__ */ n(G, { size: 24, stroke: 2 })
+}, De = {
+  [y.Info]: "bg-info border-info text-info",
+  [y.Success]: "bg-success border-success text-success",
+  [y.Warning]: "bg-warning border-warning text-warning",
+  [y.Error]: "bg-error border-error text-error"
+}, Ie = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", Ze = ({
+  variant: e = y.Info,
+  message: r,
+  cssClass: t,
+  closable: s = !1,
+  onClose: o
+}) => /* @__PURE__ */ m(
+  "div",
+  {
+    role: "alert",
+    className: d(
+      Ie,
+      De[e],
+      t
+    ),
+    children: [
+      /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ n(N, { icon: ve[e] }),
+        /* @__PURE__ */ n("div", { className: "text-primary", children: r })
+      ] }),
+      s && /* @__PURE__ */ n(
+        we,
+        {
+          cssClass: "ml-2 text-secondary hover:text-primary",
+          ariaLabel: "Close alert",
+          iconBefore: /* @__PURE__ */ n(q, { size: 16 }),
+          onClick: (a) => o?.(a)
+        }
+      )
+    ]
+  }
+), Re = "flex items-center justify-center text-secondary", ke = "shrink-0 grow-0 basis-auto animate-spin-steps", Xe = ({
+  size: e = 18,
+  cssClass: r,
+  iconClass: t,
+  fullWidth: s = !0,
+  ariaLabel: o = "Loading"
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    role: "status",
+    "aria-label": o,
+    className: d({
+      [Re]: !0,
+      "w-full h-full": s,
+      [r || ""]: !!r
+    }),
+    children: /* @__PURE__ */ n(
+      N,
+      {
+        icon: /* @__PURE__ */ n(
+          J,
+          {
+            width: e,
+            height: e,
+            className: d(ke, t)
+          }
+        )
+      }
+    )
+  }
+), Te = 7, Ee = 2, j = re(null), W = () => {
+  const e = oe(j);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
   return e;
-}, ue = ({
+}, Fe = ({
   initialOpen: e = !1,
-  placement: t = "bottom",
-  isTriggerClickable: n = !1,
-  open: r,
-  onOpenChange: s
+  placement: r = "bottom",
+  isTriggerClickable: t = !1,
+  open: s,
+  onOpenChange: o
 } = {}) => {
-  const [o, a] = te(e), c = ne(null), i = r ?? o, p = s ?? a, u = K({
-    placement: t,
-    open: i,
-    onOpenChange: p,
-    whileElementsMounted: $,
+  const [a, l] = te(e), i = ne(null), c = s ?? a, f = o ?? l, u = ie({
+    placement: r,
+    open: c,
+    onOpenChange: f,
+    whileElementsMounted: fe,
     middleware: [
-      M(ie + ce),
-      z({
-        crossAxis: t.includes("-"),
+      ce(Te + Ee),
+      de({
+        crossAxis: r.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5
       }),
-      G({ padding: 5 }),
-      O({
-        element: c
+      ue({ padding: 5 }),
+      me({
+        element: i
       })
     ]
-  }), f = Y(u.context, {
+  }), b = pe(u.context, {
     move: !1,
-    enabled: r == null,
-    mouseOnly: n,
+    enabled: s == null,
+    mouseOnly: t,
     delay: { open: 500, close: 0 }
-  }), D = Z(u.context, {
-    enabled: r == null
-  }), T = q(u.context), g = B(u.context, { role: "tooltip" }), h = J([f, D, T, g]);
-  return re(
+  }), C = be(u.context, {
+    enabled: s == null
+  }), T = he(u.context), g = ge(u.context, { role: "tooltip" }), h = xe([b, C, T, g]);
+  return se(
     () => ({
-      open: i,
-      setOpen: p,
-      arrowRef: c,
+      open: c,
+      setOpen: f,
+      arrowRef: i,
       ...h,
       ...u
     }),
-    [i, p, h, u]
+    [c, f, h, u]
   );
-}, de = ({
+}, Pe = ({
   children: e,
-  ...t
+  ...r
 }) => {
-  const n = ue(t);
-  return /* @__PURE__ */ l(I.Provider, { value: n, children: e });
-}, pe = E(function({ style: t, ...n }, r) {
-  const s = V(), o = P([s.refs.setFloating, r]);
-  return s.open ? /* @__PURE__ */ l(Q, { id: "tooltip-portal", children: /* @__PURE__ */ m(
+  const t = Fe(r);
+  return /* @__PURE__ */ n(j.Provider, { value: t, children: e });
+}, Se = L(function({ style: r, ...t }, s) {
+  const o = W(), a = z([o.refs.setFloating, s]);
+  return o.open ? /* @__PURE__ */ n(ye, { id: "tooltip-portal", children: /* @__PURE__ */ m(
     "div",
     {
-      ref: o,
+      ref: a,
       style: {
-        ...s.floatingStyles,
-        ...t
+        ...o.floatingStyles,
+        ...r
       },
-      ...s.getFloatingProps(n),
+      ...o.getFloatingProps(t),
       className: d(
         "z-[55] whitespace-pre-wrap rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",
-        s.getFloatingProps(n).className
+        o.getFloatingProps(t).className
       ),
       children: [
-        n.children,
-        /* @__PURE__ */ l(
-          X,
+        t.children,
+        /* @__PURE__ */ n(
+          Ne,
           {
-            ref: s.arrowRef,
-            context: s.context,
+            ref: o.arrowRef,
+            context: o.context,
             fill: "currentColor",
             strokeWidth: 1,
             className: "stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"
@@ -141,71 +223,194 @@ const y = ({ icon: e, className: t }) => e ? /* @__PURE__ */ l("span", { classNa
       ]
     }
   ) }) : null;
-}), me = E(function({ children: t, asChild: n = !1, ...r }, s) {
-  const o = V(), c = t && typeof t == "object" && "ref" in t && t.ref !== void 0 ? t.ref : void 0, i = P([o.refs.setReference, s, c]);
-  return n && se(t) ? oe(
-    t,
-    o.getReferenceProps({
-      ref: i,
-      ...r,
-      ...t.props
+}), Ae = L(function({ children: r, asChild: t = !1, ...s }, o) {
+  const a = W(), i = r && typeof r == "object" && "ref" in r && r.ref !== void 0 ? r.ref : void 0, c = z([a.refs.setReference, o, i]);
+  return t && ae(r) ? le(
+    r,
+    a.getReferenceProps({
+      ref: c,
+      ...s,
+      ...r.props
     })
-  ) : /* @__PURE__ */ l(
+  ) : /* @__PURE__ */ n(
     "span",
     {
-      ref: i,
-      ...o.getReferenceProps(r),
-      className: r.className ?? "dial-tooltip-trigger text-left",
-      children: t
+      ref: c,
+      ...a.getReferenceProps(s),
+      className: s.className ?? "dial-tooltip-trigger text-left",
+      children: r
     }
   );
-}), C = ({
+}), I = ({
   hideTooltip: e,
-  tooltip: t,
-  children: n,
-  triggerClassName: r,
-  contentClassName: s,
-  ...o
-}) => e || !t ? /* @__PURE__ */ l("span", { className: r, children: n }) : /* @__PURE__ */ m(de, { ...o, children: [
-  /* @__PURE__ */ l(me, { className: d(r, "truncate"), children: n }),
-  /* @__PURE__ */ l(
-    pe,
+  tooltip: r,
+  children: t,
+  triggerClassName: s,
+  contentClassName: o,
+  ...a
+}) => e || !r ? /* @__PURE__ */ n("span", { className: s, children: t }) : /* @__PURE__ */ m(Pe, { ...a, children: [
+  /* @__PURE__ */ n(Ae, { className: d(s, "truncate"), children: t }),
+  /* @__PURE__ */ n(
+    Se,
     {
       className: d(
         "text-primary",
-        s,
+        o,
         "max-w-[300px]",
-        (e || !t) && "hidden"
+        (e || !r) && "hidden"
       ),
-      children: t
+      children: r
     }
   )
-] }), fe = ({
+] }), Le = 18, S = {
+  size: Le,
+  stroke: 2
+}, Ye = ({
+  label: e,
+  id: r,
+  checked: t,
+  indeterminate: s,
+  disabled: o,
+  ariaLabel: a,
+  onChange: l
+}) => {
+  const i = O(
+    (u) => {
+      u.stopPropagation(), l?.(u.target.checked, r);
+    },
+    [l, r]
+  ), c = d(
+    "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'}`,
+    o ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : ""
+  ), f = d(
+    "mr-2 border rounded",
+    o ? "bg-layer-4 border-icon-secondary" : ""
+  );
+  return /* @__PURE__ */ m("label", { className: c, htmlFor: r, children: [
+    t && (s ? /* @__PURE__ */ n(Q, { className: f, ...S }) : /* @__PURE__ */ n(A, { className: f, ...S })),
+    e && /* @__PURE__ */ n(I, { tooltip: e, triggerClassName: "flex-1 min-w-0", children: /* @__PURE__ */ n("p", { className: "text-primary w-full truncate", children: e }) }),
+    /* @__PURE__ */ n(
+      "input",
+      {
+        type: "checkbox",
+        onChange: i,
+        id: r,
+        checked: t,
+        "aria-checked": s ? "mixed" : t,
+        "aria-disabled": o || void 0,
+        "aria-label": e ? void 0 : a,
+        className: "invisible w-0 h-0"
+      }
+    )
+  ] });
+};
+var p = /* @__PURE__ */ ((e) => (e.VALID = "valid", e.ERROR = "error", e))(p || {});
+const Oe = (e, r) => {
+  if (r === e.id)
+    switch (e.status) {
+      case p.VALID:
+        return "border-accent-secondary text-primary";
+      case p.ERROR:
+        return "border-red-900 text-primary";
+      default:
+        return "border-accent-primary text-primary";
+    }
+  switch (e.status) {
+    case p.VALID:
+      return "border-primary text-white";
+    case p.ERROR:
+      return "border-red-900 text-error";
+    default:
+      return "border-primary text-secondary";
+  }
+}, ze = (e, r) => {
+  if (r === e.id)
+    switch (e.status) {
+      case p.VALID:
+        return "bg-accent-secondary";
+      case p.ERROR:
+        return "bg-red-400";
+      default:
+        return "bg-accent-primary";
+    }
+  switch (e.status) {
+    case p.VALID:
+      return "bg-accent-secondary";
+    case p.ERROR:
+      return "bg-red-400";
+    default:
+      return "bg-layer-4";
+  }
+}, Ve = ({
+  step: e,
+  index: r,
+  currentStep: t,
+  handleStepChange: s
+}) => {
+  const o = "h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer", a = "w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white", l = () => t === e.id && e.status === p.ERROR ? /* @__PURE__ */ n(ee, { stroke: 2, size: 16 }) : t !== e.id && e.status === p.VALID ? /* @__PURE__ */ n(A, { stroke: 2, size: 16 }) : r + 1;
+  return /* @__PURE__ */ m(
+    "button",
+    {
+      className: d(o, Oe(e, t)),
+      onClick: () => s(e.id),
+      children: [
+        /* @__PURE__ */ n(
+          "span",
+          {
+            className: d(a, ze(e, t)),
+            children: l()
+          }
+        ),
+        /* @__PURE__ */ n("span", { children: e.name })
+      ]
+    }
+  );
+}, qe = ({
+  steps: e,
+  currentStep: r,
+  setCurrentStep: t
+}) => {
+  const s = (o) => {
+    const a = e.findIndex((i) => i.id === r), l = e.findIndex((i) => i.id === o);
+    (o !== r && e[a].status === p.VALID || l < a) && t(o);
+  };
+  return /* @__PURE__ */ n("div", { id: "steps", className: "flex gap-x-3", children: e.map((o, a) => /* @__PURE__ */ n(
+    Ve,
+    {
+      currentStep: r,
+      handleStepChange: s,
+      step: o,
+      index: a
+    },
+    o.id
+  )) });
+}, _e = ({
   value: e,
-  textareaId: t,
-  placeholder: n,
-  cssClass: r = "",
-  disabled: s,
-  invalid: o,
-  readonly: a,
-  onChange: c
-}) => /* @__PURE__ */ l(C, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ l(
+  textareaId: r,
+  placeholder: t,
+  cssClass: s = "",
+  disabled: o,
+  invalid: a,
+  readonly: l,
+  onChange: i
+}) => /* @__PURE__ */ n(I, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ n(
   "textarea",
   {
-    id: t,
-    placeholder: n,
+    id: r,
+    placeholder: t,
     value: e || "",
-    disabled: s,
+    disabled: o,
     className: d(
       "dial-textarea dial-input",
-      o ? "dial-input-error" : "",
-      s && "dial-input-disable",
-      a && "dial-input-readonly",
-      r
+      a ? "dial-input-error" : "",
+      o && "dial-input-disable",
+      l && "dial-input-readonly",
+      s
     ),
-    onChange: (i) => !a && c?.(i.currentTarget.value)
+    onChange: (c) => !l && i?.(c.currentTarget.value)
   }
-) }), he = [
+) }), je = [
   "ArrowLeft",
   "ArrowRight",
   "ArrowUp",
@@ -217,269 +422,276 @@ const y = ({ icon: e, className: t }) => e ? /* @__PURE__ */ l("span", { classNa
   "Escape",
   "Home",
   "End"
-], ge = (e, t, n, r) => {
-  if ((t === "number" || n !== void 0 || r !== void 0) && !he.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (n === void 0 || n < 0)) && !(e.key === "." && t === "number" && !e.currentTarget.value.includes("."))) {
+], We = (e, r, t, s) => {
+  if ((r === "number" || t !== void 0 || s !== void 0) && !je.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (t === void 0 || t < 0)) && !(e.key === "." && r === "number" && !e.currentTarget.value.includes("."))) {
     if (!/^[0-9]$/.test(e.key)) {
       e.preventDefault();
       return;
     }
-    if (n !== void 0 || r !== void 0) {
-      const o = e.currentTarget.value, a = e.currentTarget.selectionStart || 0, c = o.slice(0, a) + e.key + o.slice(a), i = parseFloat(c);
-      if (!isNaN(i)) {
-        if (n !== void 0 && i < n) {
+    if (t !== void 0 || s !== void 0) {
+      const a = e.currentTarget.value, l = e.currentTarget.selectionStart || 0, i = a.slice(0, l) + e.key + a.slice(l), c = parseFloat(i);
+      if (!isNaN(c)) {
+        if (t !== void 0 && c < t) {
           e.preventDefault();
           return;
         }
-        if (r !== void 0 && i > r) {
+        if (s !== void 0 && c > s) {
           e.preventDefault();
           return;
         }
       }
     }
   }
-}, F = ({
+}, E = ({
   iconBeforeInput: e,
-  iconAfterInput: t,
-  hideBorder: n,
-  value: r,
-  elementId: s,
-  placeholder: o = "",
-  cssClass: a = "",
-  containerCssClass: c,
-  tooltipTriggerClassName: i,
-  type: p = "text",
+  iconAfterInput: r,
+  hideBorder: t,
+  value: s,
+  elementId: o,
+  placeholder: a = "",
+  cssClass: l = "",
+  containerCssClass: i,
+  tooltipTriggerClassName: c,
+  type: f = "text",
   disabled: u,
-  readonly: f,
-  invalid: D,
+  readonly: b,
+  invalid: C,
   onChange: T,
   min: g,
   max: h,
-  prefix: k,
-  suffix: R,
-  textBeforeInput: N,
-  textAfterInput: x
+  prefix: F,
+  suffix: P,
+  textBeforeInput: w,
+  textAfterInput: v
 }) => {
-  const j = (b) => b.target.blur(), H = p === "number" || g !== void 0 || h !== void 0, L = (b) => {
-    ge(b, p, g, h);
-  }, U = (b) => {
-    const v = b.currentTarget.value;
-    if (H && v !== "") {
-      const w = parseFloat(v);
-      if (isNaN(w) && v !== "-" && v !== "." || !isNaN(w) && (g !== void 0 && w < g || h !== void 0 && w > h))
+  const B = (x) => x.target.blur(), H = f === "number" || g !== void 0 || h !== void 0, U = (x) => {
+    We(x, f, g, h);
+  }, K = (x) => {
+    const D = x.currentTarget.value;
+    if (H && D !== "") {
+      const R = parseFloat(D);
+      if (isNaN(R) && D !== "-" && D !== "." || !isNaN(R) && (g !== void 0 && R < g || h !== void 0 && R > h))
         return;
     }
-    T?.(v);
+    T?.(D);
   };
   return /* @__PURE__ */ m(
     "div",
     {
       className: d(
         "dial-input-field flex flex-row items-center justify-between",
-        n ? "dial-input-no-border" : "dial-input",
-        D && "dial-input-error",
+        t ? "dial-input-no-border" : "dial-input",
+        C && "dial-input-error",
         u && "dial-input-disable",
-        f && "dial-input-readonly",
-        !N && "pl-1",
-        !x && "pr-1",
-        c
+        b && "dial-input-readonly",
+        !w && "pl-1",
+        !v && "pr-1",
+        i
       ),
       children: [
-        N && /* @__PURE__ */ l(C, { tooltip: N, children: /* @__PURE__ */ l(
-          F,
+        w && /* @__PURE__ */ n(I, { tooltip: w, children: /* @__PURE__ */ n(
+          E,
           {
             hideBorder: !0,
             containerCssClass: "rounded-r-none border-r-0",
             cssClass: "px-2 overflow-hidden overflow-ellipsis dial-small",
-            value: N,
+            value: w,
             disabled: !0,
-            elementId: N + "textBefore"
+            elementId: w + "textBefore"
           }
         ) }),
-        k && /* @__PURE__ */ m("p", { className: "text-secondary dial-small pl-2", children: [
+        F && /* @__PURE__ */ m("p", { className: "text-secondary dial-small pl-2", children: [
           " ",
-          k
+          F
         ] }),
-        /* @__PURE__ */ l(y, { icon: e, className: "pl-2" }),
-        /* @__PURE__ */ l(C, { tooltip: r, triggerClassName: i, children: /* @__PURE__ */ l(
+        /* @__PURE__ */ n(N, { icon: e, className: "pl-2" }),
+        /* @__PURE__ */ n(I, { tooltip: s, triggerClassName: c, children: /* @__PURE__ */ n(
           "input",
           {
-            type: p,
+            type: f,
             autoComplete: "off",
-            id: s,
-            placeholder: o,
-            value: r ?? "",
-            title: r ? String(r) : "",
+            id: o,
+            placeholder: a,
+            value: s ?? "",
+            title: s ? String(s) : "",
             disabled: u,
-            className: d("border-0 bg-transparent px-2", a),
-            onChange: (b) => !f && U?.(b),
-            onKeyDown: L,
-            onWheel: j,
+            className: d("border-0 bg-transparent px-2", l),
+            onChange: (x) => !b && K?.(x),
+            onKeyDown: U,
+            onWheel: B,
             min: g,
             max: h
           }
         ) }),
-        /* @__PURE__ */ l(y, { icon: t, className: "pr-2" }),
-        R && /* @__PURE__ */ m("p", { className: "text-secondary dial-small pr-2", children: [
+        /* @__PURE__ */ n(N, { icon: r, className: "pr-2" }),
+        P && /* @__PURE__ */ m("p", { className: "text-secondary dial-small pr-2", children: [
           " ",
-          R
+          P
         ] }),
-        x && /* @__PURE__ */ l(C, { tooltip: x, children: /* @__PURE__ */ l(
-          F,
+        v && /* @__PURE__ */ n(I, { tooltip: v, children: /* @__PURE__ */ n(
+          E,
           {
             hideBorder: !0,
             containerCssClass: "rounded-l-none border-l-0",
             cssClass: "px-2",
-            value: x,
+            value: v,
             disabled: !0,
-            elementId: x + "textAfter"
+            elementId: v + "textAfter"
           }
         ) })
       ]
     }
   );
-}, be = /^0+\.(\d+)?$/, Ne = /^0+/, W = ({
+}, Me = /^0+\.(\d+)?$/, Be = /^0+/, M = ({
   fieldTitle: e,
-  errorText: t,
-  optional: n,
-  elementCssClass: r,
-  elementContainerCssClass: s,
-  elementId: o,
-  containerCssClass: a,
-  readonly: c,
-  defaultEmptyText: i,
-  min: p,
+  errorText: r,
+  optional: t,
+  elementCssClass: s,
+  elementContainerCssClass: o,
+  elementId: a,
+  containerCssClass: l,
+  readonly: i,
+  defaultEmptyText: c,
+  min: f,
   max: u,
-  ...f
-}) => /* @__PURE__ */ m("div", { className: d("flex flex-col", a), children: [
-  /* @__PURE__ */ l(
-    A,
+  ...b
+}) => /* @__PURE__ */ m("div", { className: d("flex flex-col", l), children: [
+  /* @__PURE__ */ n(
+    _,
     {
       fieldTitle: e,
-      optional: n,
-      htmlFor: o
+      optional: t,
+      htmlFor: a
     }
   ),
-  c ? /* @__PURE__ */ l("span", { children: f.value || (i ?? "None") }) : /* @__PURE__ */ m(_, { children: [
-    /* @__PURE__ */ l(
-      F,
+  i ? /* @__PURE__ */ n("span", { children: b.value || (c ?? "None") }) : /* @__PURE__ */ m($, { children: [
+    /* @__PURE__ */ n(
+      E,
       {
-        elementId: o,
-        cssClass: r,
-        containerCssClass: s,
-        invalid: t != null,
-        min: p,
+        elementId: a,
+        cssClass: s,
+        containerCssClass: o,
+        invalid: r != null,
+        min: f,
         max: u,
-        ...f
+        ...b
       }
     ),
-    /* @__PURE__ */ l(S, { errorText: t })
+    /* @__PURE__ */ n(V, { errorText: r })
   ] })
-] }), De = ({
+] }), Je = ({
   onChange: e,
-  value: t,
-  min: n,
-  max: r,
-  ...s
+  value: r,
+  min: t,
+  max: s,
+  ...o
 }) => {
-  const o = (a) => String(a)?.match(be) ? String(a)?.replace(Ne, "0") : Number(a);
-  return /* @__PURE__ */ l(
-    W,
+  const a = (l) => String(l)?.match(Me) ? String(l)?.replace(Be, "0") : Number(l);
+  return /* @__PURE__ */ n(
+    M,
     {
       type: "number",
-      onChange: (a) => e?.(o(a)),
-      value: t,
-      min: n,
-      max: r,
-      ...s
+      onChange: (l) => e?.(a(l)),
+      value: r,
+      min: t,
+      max: s,
+      ...o
     }
   );
-}, Te = ({
+}, Qe = ({
   onChange: e,
-  ...t
-}) => /* @__PURE__ */ l(
-  W,
+  ...r
+}) => /* @__PURE__ */ n(
+  M,
   {
     type: "text",
-    onChange: (n) => e?.(n),
-    ...t
+    onChange: (t) => e?.(t),
+    ...r
   }
-), Fe = ({
+), er = ({
   fieldTitle: e,
-  optional: t,
-  elementId: n,
-  elementCssClass: r,
-  errorText: s,
-  ...o
+  optional: r,
+  elementId: t,
+  elementCssClass: s,
+  errorText: o,
+  ...a
 }) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
-  /* @__PURE__ */ l(
-    A,
+  /* @__PURE__ */ n(
+    _,
     {
       fieldTitle: e,
-      optional: t,
-      htmlFor: n
+      optional: r,
+      htmlFor: t
     }
   ),
-  /* @__PURE__ */ l(
-    fe,
+  /* @__PURE__ */ n(
+    _e,
     {
-      textareaId: n,
-      cssClass: r,
-      ...o
+      textareaId: t,
+      cssClass: s,
+      ...a
     }
   ),
-  /* @__PURE__ */ l(S, { errorText: s })
-] }), ke = ({
+  /* @__PURE__ */ n(V, { errorText: o })
+] }), rr = ({
   title: e,
-  switchId: t,
-  isOn: n = !1,
-  disabled: r,
-  onChange: s
+  switchId: r,
+  isOn: t = !1,
+  disabled: s,
+  onChange: o
 }) => {
-  const o = d(
-    "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",
-    r ? "pointer-events-none" : "",
-    r ? n ? "bg-controls-disable" : "bg-layer-4" : n ? "bg-accent-primary" : "bg-layer-4"
-  ), a = ae(
-    (c) => {
-      c.stopPropagation(), s?.(!n);
+  const a = d(
+    "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 ? t ? "bg-controls-disable" : "bg-layer-4" : t ? "bg-accent-primary" : "bg-layer-4"
+  ), l = O(
+    (i) => {
+      i.stopPropagation(), o?.(!t);
     },
-    [s, n]
+    [o, t]
   );
   return /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ n(
       "input",
       {
         type: "checkbox",
-        onChange: a,
-        id: t,
-        disabled: r,
+        onChange: l,
+        id: r,
+        disabled: s,
         className: "invisible w-0 h-0",
-        checked: n
+        checked: t
       }
     ),
-    /* @__PURE__ */ l("label", { htmlFor: t, className: o, children: /* @__PURE__ */ l(
+    /* @__PURE__ */ n("label", { htmlFor: r, className: a, children: /* @__PURE__ */ n(
       "span",
       {
         className: d(
           "size-3 rounded-full",
-          r ? 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__ */ l("span", { className: "h-[14px] pl-2 small text-primary", children: e })
+    e && /* @__PURE__ */ n("span", { className: "pl-2 dial-small text-primary", children: e })
   ] });
 };
 export {
-  ye as DialButton,
-  S as DialErrorText,
-  A as DialFieldLabel,
-  y as DialIcon,
-  F as DialInput,
-  De as DialNumberInputField,
-  ke as DialSwitch,
-  Fe as DialTextAreaField,
-  Te as DialTextInputField,
-  fe as DialTextarea,
-  C as DialTooltip
+  y as AlertVariant,
+  k as ButtonVariant,
+  Ze as DialAlert,
+  we as DialButton,
+  Ye as DialCheckbox,
+  V as DialErrorText,
+  _ as DialFieldLabel,
+  N as DialIcon,
+  E as DialInput,
+  Xe as DialLoader,
+  Je as DialNumberInputField,
+  qe as DialSteps,
+  rr as DialSwitch,
+  er as DialTextAreaField,
+  Qe as DialTextInputField,
+  _e as DialTextarea,
+  I as DialTooltip,
+  p as StepStatus
 };