@epam/ai-dial-ui-kit 0.2.0-rc.16 → 0.2.0-rc.18

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

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