@epam/ai-dial-ui-kit 0.2.0-rc.11 → 0.2.0-rc.13

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

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