@epam/ai-dial-ui-kit 0.2.0-rc.19 → 0.2.0-rc.20

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

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