@epam/ai-dial-ui-kit 0.2.0-rc.12 → 0.2.0-rc.14

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

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