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

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

@@ -1,15 +1,15 @@
-import { jsx as r, jsxs as p, Fragment as ae } from "react/jsx-runtime";
+import { jsx as r, jsxs as f, Fragment as ae } from "react/jsx-runtime";
 import i from "classnames";
-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 = ({
+import { IconCircleCheck as le, IconAlertTriangle as oe, IconAlertCircle as ie, IconInfoCircle as ce, IconX as M, IconLoader as de, IconMinus as ue, IconCheck as U, IconExclamationCircle as me, IconClipboardX as fe, IconEyeOff as pe, IconEye as xe, IconSearch as he } from "@tabler/icons-react";
+import { createContext as ge, useState as _, useRef as be, useMemo as ye, useContext as Ce, forwardRef as $, isValidElement as ve, cloneElement as Ne, useCallback as S, useEffect as we } from "react";
+import { useFloating as G, offset as De, flip as Ie, shift as ke, arrow as Re, autoUpdate as Se, useHover as Fe, useFocus as Ee, useDismiss as K, useRole as Z, useInteractions as X, useMergeRefs as q, FloatingPortal as Q, FloatingArrow as Te, FloatingOverlay as Pe, FloatingFocusManager as Ae } from "@floating-ui/react";
+const W = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "text-error dial-tiny mt-1", children: e }), O = ({
   fieldTitle: e,
   htmlFor: n,
   optional: t,
   optionalText: s,
   cssClass: a
-}) => e ? /* @__PURE__ */ p(
+}) => e ? /* @__PURE__ */ f(
   "label",
   {
     className: i(
@@ -25,7 +25,7 @@ const W = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "tex
   }
 ) : 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 = {
+const Le = {
   [v.Primary]: "dial-primary-button",
   [v.Secondary]: "dial-secondary-button",
   [v.Tertiary]: "dial-tertiary-button",
@@ -36,68 +36,68 @@ const ze = {
   cssClass: t,
   ref: s,
   onClick: a,
-  disable: o,
-  iconAfter: l,
+  disable: l,
+  iconAfter: o,
   iconBefore: c,
   hideTitleOnMobile: d,
   ariaLabel: u
 }) => {
   const m = i(
     "dial-small-semi",
-    l ? "mr-2" : "",
+    o ? "mr-2" : "",
     c ? "ml-2" : "",
     d ? "hidden sm:inline" : "inline"
   ), x = i(
-    n && ze[n],
+    n && Le[n],
     t,
     "focus-visible:outline outline-offset-0"
   );
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ f(
     "button",
     {
       ref: s,
       type: "button",
       className: x,
       onClick: (h) => a?.(h),
-      disabled: o,
+      disabled: l,
       "aria-label": e || u,
       children: [
         /* @__PURE__ */ r(D, { icon: c }),
         e && /* @__PURE__ */ r("span", { className: m, children: e }),
-        /* @__PURE__ */ r(D, { icon: l })
+        /* @__PURE__ */ r(D, { icon: o })
       ]
     }
   );
 };
 var k = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(k || {});
-const Ae = {
+const ze = {
   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 = {
+  warning: /* @__PURE__ */ r(oe, { size: 24, stroke: 2 }),
+  success: /* @__PURE__ */ r(le, { size: 24, stroke: 2 })
+}, Be = {
   [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 = ({
+}, Oe = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", kr = ({
   variant: e = k.Info,
   message: n,
   cssClass: t,
   closable: s = !1,
   onClose: a
-}) => /* @__PURE__ */ p(
+}) => /* @__PURE__ */ f(
   "div",
   {
     role: "alert",
     className: i(
-      Be,
-      Le[e],
+      Oe,
+      Be[e],
       t
     ),
     children: [
-      /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ r(D, { icon: Ae[e] }),
+      /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ r(D, { icon: ze[e] }),
         /* @__PURE__ */ r("div", { className: "text-primary", children: n })
       ] }),
       s && /* @__PURE__ */ r(
@@ -105,13 +105,13 @@ const Ae = {
         {
           cssClass: "ml-2 text-secondary hover:text-primary",
           ariaLabel: "Close alert",
-          iconBefore: /* @__PURE__ */ r(V, { size: 16 }),
-          onClick: (o) => a?.(o)
+          iconBefore: /* @__PURE__ */ r(M, { size: 16 }),
+          onClick: (l) => a?.(l)
         }
       )
     ]
   }
-), Oe = "flex items-center justify-center text-secondary", Ve = "shrink-0 grow-0 basis-auto animate-spin-steps", Me = ({
+), Ve = "flex items-center justify-center text-secondary", je = "shrink-0 grow-0 basis-auto animate-spin-steps", Me = ({
   size: e = 18,
   cssClass: n,
   iconClass: t,
@@ -123,7 +123,7 @@ const Ae = {
     role: "status",
     "aria-label": a,
     className: i({
-      [Oe]: !0,
+      [Ve]: !0,
       "w-full h-full": s,
       [n || ""]: !!n
     }),
@@ -135,71 +135,71 @@ const Ae = {
           {
             width: e,
             height: e,
-            className: i(Ve, t)
+            className: i(je, t)
           }
         )
       }
     )
   }
-), je = 7, _e = 2, Y = he(null), J = () => {
-  const e = ye(Y);
+), _e = 7, We = 2, Y = ge(null), J = () => {
+  const e = Ce(Y);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
   return e;
-}, We = ({
+}, He = ({
   initialOpen: e = !1,
   placement: n = "bottom",
   isTriggerClickable: t = !1,
   open: s,
   onOpenChange: a
 } = {}) => {
-  const [o, l] = _(e), c = ge(null), d = s ?? o, u = a ?? l, m = G({
+  const [l, o] = _(e), c = be(null), d = s ?? l, u = a ?? o, m = G({
     placement: n,
     open: d,
     onOpenChange: u,
     whileElementsMounted: Se,
     middleware: [
-      we(je + _e),
-      De({
+      De(_e + We),
+      Ie({
         crossAxis: n.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5
       }),
-      Ie({ padding: 5 }),
-      ke({
+      ke({ padding: 5 }),
+      Re({
         element: c
       })
     ]
-  }), x = Re(m.context, {
+  }), x = Fe(m.context, {
     move: !1,
     enabled: s == null,
     mouseOnly: t,
     delay: { open: 500, close: 0 }
-  }), h = Fe(m.context, {
+  }), h = Ee(m.context, {
     enabled: s == null
-  }), g = K(m.context), y = Z(m.context, { role: "tooltip" }), f = q([x, h, g, y]);
-  return be(
+  }), g = K(m.context), y = Z(m.context, { role: "tooltip" }), p = X([x, h, g, y]);
+  return ye(
     () => ({
       open: d,
       setOpen: u,
       arrowRef: c,
-      ...f,
+      ...p,
       ...m
     }),
-    [d, u, f, m]
+    [d, u, p, m]
   );
-}, He = ({
+}, Ue = ({
   children: e,
   ...n
 }) => {
-  const t = We(n);
+  const t = He(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(
+}, $e = $(function({ style: n, ...t }, s) {
+  const a = J(), l = q([a.refs.setFloating, s]);
+  return a.open ? /* @__PURE__ */ r(Q, { id: "tooltip-portal", children: /* @__PURE__ */ f(
     "div",
     {
-      ref: o,
+      ref: l,
       style: {
         ...a.floatingStyles,
         ...n
@@ -212,7 +212,7 @@ const Ae = {
       children: [
         t.children,
         /* @__PURE__ */ r(
-          Ee,
+          Te,
           {
             ref: a.arrowRef,
             context: a.context,
@@ -224,11 +224,11 @@ const Ae = {
       ]
     }
   ) }) : null;
-}), $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(
+}), Ge = $(function({ children: n, asChild: t = !1, ...s }, a) {
+  const l = J(), c = n && typeof n == "object" && "ref" in n && n.ref !== void 0 ? n.ref : void 0, d = q([l.refs.setReference, a, c]);
+  return t && ve(n) ? Ne(
     n,
-    o.getReferenceProps({
+    l.getReferenceProps({
       ref: d,
       ...s,
       ...n.props
@@ -237,22 +237,22 @@ const Ae = {
     "span",
     {
       ref: d,
-      ...o.getReferenceProps(s),
+      ...l.getReferenceProps(s),
       className: s.className ?? "dial-tooltip-trigger text-left",
       children: n
     }
   );
-}), S = ({
+}), V = ({
   hideTooltip: e,
   tooltip: n,
   children: t,
   triggerClassName: s,
   contentClassName: a,
-  ...o
-}) => /* @__PURE__ */ p(He, { ...o, children: [
-  /* @__PURE__ */ r($e, { className: i(s, "truncate"), children: t }),
+  ...l
+}) => /* @__PURE__ */ f(Ue, { ...l, children: [
+  /* @__PURE__ */ r(Ge, { className: i(s, "truncate"), children: t }),
   /* @__PURE__ */ r(
-    Ue,
+    $e,
     {
       className: i(
         "text-primary",
@@ -263,23 +263,23 @@ const Ae = {
       children: n
     }
   )
-] }), Ge = 18, A = {
-  size: Ge,
+] }), Ke = 18, A = {
+  size: Ke,
   stroke: 2
-}, Ir = ({
+}, Rr = ({
   label: e,
   id: n,
   checked: t,
   indeterminate: s,
   disabled: a,
-  ariaLabel: o,
-  onChange: l
+  ariaLabel: l,
+  onChange: o
 }) => {
-  const c = F(
+  const c = S(
     (m) => {
-      m.stopPropagation(), l?.(m.target.checked, n);
+      m.stopPropagation(), o?.(m.target.checked, n);
     },
-    [l, n]
+    [o, n]
   ), d = i(
     "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'}`,
@@ -288,9 +288,9 @@ const Ae = {
     "mr-2 border rounded",
     a ? "bg-layer-4 border-icon-secondary" : ""
   );
-  return /* @__PURE__ */ p("label", { className: d, htmlFor: n, children: [
+  return /* @__PURE__ */ f("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 }) }),
+    e && /* @__PURE__ */ r(V, { tooltip: e, triggerClassName: "flex-1 min-w-0", children: /* @__PURE__ */ r("p", { className: "text-primary w-full truncate", children: e }) }),
     /* @__PURE__ */ r(
       "input",
       {
@@ -300,14 +300,14 @@ const Ae = {
         checked: t,
         "aria-checked": s ? "mixed" : t,
         "aria-disabled": a || void 0,
-        "aria-label": e ? void 0 : o,
+        "aria-label": e ? void 0 : l,
         className: "invisible w-0 h-0"
       }
     )
   ] });
 };
 var C = /* @__PURE__ */ ((e) => (e.VALID = "valid", e.ERROR = "error", e))(C || {});
-const Ke = (e, n) => {
+const Ze = (e, n) => {
   if (n === e.id)
     switch (e.status) {
       case C.VALID:
@@ -325,7 +325,7 @@ const Ke = (e, n) => {
     default:
       return "border-primary text-secondary";
   }
-}, Ze = (e, n) => {
+}, Xe = (e, n) => {
   if (n === e.id)
     switch (e.status) {
       case C.VALID:
@@ -349,40 +349,40 @@ const Ke = (e, 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 === 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(
+  const a = "h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer", l = "w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white", o = () => 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__ */ f(
     "button",
     {
-      className: i(a, Ke(e, t)),
+      className: i(a, Ze(e, t)),
       onClick: () => s(e.id),
       children: [
         /* @__PURE__ */ r(
           "span",
           {
-            className: i(o, Ze(e, t)),
-            children: l()
+            className: i(l, Xe(e, t)),
+            children: o()
           }
         ),
         /* @__PURE__ */ r("span", { children: e.name })
       ]
     }
   );
-}, kr = ({
+}, Sr = ({
   steps: e,
   currentStep: n,
   onChangeStep: t
 }) => {
   const s = (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);
+    const l = e.findIndex((c) => c.id === n), o = e.findIndex((c) => c.id === a);
+    (a !== n && e[l].status === C.VALID || o < l) && t(a);
   };
-  return /* @__PURE__ */ r("div", { id: "steps", className: "flex gap-x-3", children: e.map((a, o) => /* @__PURE__ */ r(
+  return /* @__PURE__ */ r("div", { id: "steps", className: "flex gap-x-3", children: e.map((a, l) => /* @__PURE__ */ r(
     qe,
     {
       currentStep: n,
       onChangeStep: s,
       step: a,
-      index: o
+      index: l
     },
     a.id
   )) });
@@ -392,32 +392,32 @@ const Ke = (e, n) => {
   title: t,
   description: s,
   checked: a = !1,
-  inputId: o,
-  cssClass: l,
+  inputId: l,
+  cssClass: o,
   labelCssClass: c,
   disabled: d,
   onChange: u,
   descriptionCssClass: m
 }) => {
-  const x = `${o}-desc`, h = i(
+  const x = `${l}-desc`, h = i(
     "dial-small cursor-pointer",
     d ? "text-secondary" : "text-primary",
     c
   ), g = i(
     "cursor-pointer dial-input-radio",
     t && "mr-2",
-    l
-  ), y = i("flex flex-col", !!s && "mb-2"), f = i(
+    o
+  ), y = i("flex flex-col", !!s && "mb-2"), p = i(
     "dial-tiny mt-2 ml-[26px] text-secondary",
     m
   );
-  return /* @__PURE__ */ p("div", { className: y, children: [
-    /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
+  return /* @__PURE__ */ f("div", { className: y, children: [
+    /* @__PURE__ */ f("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ r(
         "input",
         {
           type: "radio",
-          id: o,
+          id: l,
           name: e,
           value: n,
           checked: a,
@@ -429,27 +429,27 @@ const Ke = (e, n) => {
           }
         }
       ),
-      t ? /* @__PURE__ */ r("label", { className: h, htmlFor: o, children: t }) : null
+      t ? /* @__PURE__ */ r("label", { className: h, htmlFor: l, children: t }) : null
     ] }),
-    a && s && /* @__PURE__ */ r("div", { id: x, className: f, children: s })
+    a && s && /* @__PURE__ */ r("div", { id: x, className: p, children: s })
   ] });
 };
 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 = {
+const Ye = "flex flex-col gap-2", Je = "flex", er = "pb-1 mt-2", rr = {
   [j.Column]: "flex-col gap-y-3",
   [j.Row]: "flex-row gap-x-6"
-}, Sr = ({
+}, Fr = ({
   fieldTitle: e,
   radioCssClass: n,
   labelCssClass: t,
   disabled: s,
   elementId: a,
-  radioButtons: o,
-  activeRadioButton: l,
+  radioButtons: l,
+  activeRadioButton: o,
   orientation: c,
   onChange: d
-}) => /* @__PURE__ */ p("div", { className: Xe, children: [
-  e && /* @__PURE__ */ r(M, { fieldTitle: e, htmlFor: a }),
+}) => /* @__PURE__ */ f("div", { className: Ye, children: [
+  e && /* @__PURE__ */ r(O, { fieldTitle: e, htmlFor: a }),
   /* @__PURE__ */ r(
     "div",
     {
@@ -457,10 +457,10 @@ const Xe = "flex flex-col gap-2", Ye = "flex", Je = "pb-1 mt-2", er = {
       "aria-label": e,
       "aria-disabled": s || void 0,
       className: i(
-        Ye,
-        er[c]
+        Je,
+        rr[c]
       ),
-      children: o.map((u) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
+      children: l.map((u) => /* @__PURE__ */ f("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ r(
           Qe,
           {
@@ -471,15 +471,23 @@ const Xe = "flex flex-col gap-2", Ye = "flex", Je = "pb-1 mt-2", er = {
             cssClass: n,
             labelCssClass: t,
             title: u.name,
-            checked: u.id === l,
+            checked: u.id === o,
             onChange: () => d(u.id)
           }
         ),
-        u.id === l && u.content ? /* @__PURE__ */ r("div", { className: Je, children: u.content }) : null
+        u.id === o && u.content ? /* @__PURE__ */ r("div", { className: er, children: u.content }) : null
       ] }, u.id))
     }
   )
-] }), Rr = ({
+] }), Er = ({
+  icon: e,
+  title: n,
+  description: t
+}) => /* @__PURE__ */ f("div", { className: "h-full w-full flex flex-col items-center justify-center text-secondary", children: [
+  e || /* @__PURE__ */ r(fe, { width: 60, height: 60 }),
+  /* @__PURE__ */ r("span", { className: "small mt-2 text-primary", children: n }),
+  t && /* @__PURE__ */ r("span", { className: "mt-1 text-primary", children: t })
+] }), nr = ({
   ariaLabel: e,
   cssClass: n,
   size: t = 24,
@@ -490,18 +498,18 @@ const Xe = "flex flex-col gap-2", Ye = "flex", Je = "pb-1 mt-2", er = {
     ariaLabel: e,
     cssClass: i("text-secondary hover:text-accent-primary", n),
     onClick: s,
-    iconBefore: /* @__PURE__ */ r(V, { size: t })
+    iconBefore: /* @__PURE__ */ r(M, { size: t })
   }
-), rr = ({
+), tr = ({
   value: e,
   textareaId: n,
   placeholder: t,
   cssClass: s = "",
   disabled: a,
-  invalid: o,
-  readonly: l,
+  invalid: l,
+  readonly: o,
   onChange: c
-}) => /* @__PURE__ */ r(S, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
+}) => /* @__PURE__ */ r(V, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
   "textarea",
   {
     id: n,
@@ -510,14 +518,14 @@ const Xe = "flex flex-col gap-2", Ye = "flex", Je = "pb-1 mt-2", er = {
     disabled: a,
     className: i(
       "dial-textarea dial-input px-3 py-2",
-      o ? "dial-input-error" : "",
+      l ? "dial-input-error" : "",
       a && "dial-input-disable",
-      l && "dial-input-readonly",
+      o && "dial-input-readonly",
       s
     ),
-    onChange: (d) => !l && c?.(d.currentTarget.value)
+    onChange: (d) => !o && c?.(d.currentTarget.value)
   }
-) }), nr = [
+) }), sr = [
   "ArrowLeft",
   "ArrowRight",
   "ArrowUp",
@@ -529,14 +537,14 @@ const Xe = "flex flex-col gap-2", Ye = "flex", Je = "pb-1 mt-2", er = {
   "Escape",
   "Home",
   "End"
-], 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("."))) {
+], ar = (e, n, t, s) => {
+  if ((n === "number" || t !== void 0 || s !== void 0) && !sr.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, c = o.slice(0, l) + e.key + o.slice(l), d = parseFloat(c);
+      const l = e.currentTarget.value, o = e.currentTarget.selectionStart || 0, c = l.slice(0, o) + e.key + l.slice(o), d = parseFloat(c);
       if (!isNaN(d)) {
         if (t !== void 0 && d < t) {
           e.preventDefault();
@@ -550,13 +558,13 @@ const Xe = "flex flex-col gap-2", Ye = "flex", Je = "pb-1 mt-2", er = {
     }
   }
 }, L = ({
-  iconBeforeInput: e,
-  iconAfterInput: n,
+  iconBefore: e,
+  iconAfter: n,
   hideBorder: t,
   value: s,
   elementId: a,
-  placeholder: o = "",
-  cssClass: l = "",
+  placeholder: l = "",
+  cssClass: o = "",
   containerCssClass: c,
   tooltipTriggerClassName: d,
   type: u = "text",
@@ -565,38 +573,38 @@ const Xe = "flex flex-col gap-2", Ye = "flex", Je = "pb-1 mt-2", er = {
   invalid: h,
   onChange: g,
   min: y,
-  max: f,
+  max: p,
   prefix: N,
   suffix: w,
   textBeforeInput: b,
   textAfterInput: E
 }) => {
-  const re = (I) => I.target.blur(), ne = u === "number" || y !== void 0 || f !== void 0, te = (I) => {
-    tr(I, u, y, f);
+  const re = (I) => I.target.blur(), ne = u === "number" || y !== void 0 || p !== void 0, te = (I) => {
+    ar(I, u, y, p);
   }, 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))
+    const F = I.currentTarget.value;
+    if (ne && F !== "") {
+      const T = parseFloat(F);
+      if (isNaN(T) && F !== "-" && F !== "." || !isNaN(T) && (y !== void 0 && T < y || p !== void 0 && T > p))
         return;
     }
-    g?.(T);
+    g?.(F);
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ f(
     "div",
     {
       className: i(
-        "dial-input-field flex flex-row items-center justify-between px-3 py-2",
+        "dial-input-field flex flex-row items-center justify-between py-2",
         t ? "dial-input-no-border" : "dial-input",
         h && "dial-input-error",
         m && "dial-input-disable",
         x && "dial-input-readonly",
-        !b && "pl-1",
-        !E && "pr-1",
+        !b && "pl-3",
+        !E && "pr-3",
         c
       ),
       children: [
-        b && /* @__PURE__ */ r(S, { tooltip: b, children: /* @__PURE__ */ r(
+        b && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
           L,
           {
             hideBorder: !0,
@@ -607,35 +615,41 @@ const Xe = "flex flex-col gap-2", Ye = "flex", Je = "pb-1 mt-2", er = {
             elementId: b + "textBefore"
           }
         ) }),
-        N && /* @__PURE__ */ p("p", { className: "text-secondary dial-small pl-2", children: [
+        N && /* @__PURE__ */ f("p", { className: "text-secondary dial-small", children: [
           " ",
           N
         ] }),
         /* @__PURE__ */ r(D, { icon: e }),
-        /* @__PURE__ */ r(S, { tooltip: s, triggerClassName: d, children: /* @__PURE__ */ r(
-          "input",
+        /* @__PURE__ */ r(
+          V,
           {
-            type: u,
-            autoComplete: "off",
-            id: a,
-            placeholder: o,
-            value: s ?? "",
-            title: s ? String(s) : "",
-            disabled: m,
-            className: i("border-0 bg-transparent px-2", l),
-            onChange: (I) => !x && se?.(I),
-            onKeyDown: te,
-            onWheel: re,
-            min: y,
-            max: f
+            tooltip: s,
+            triggerClassName: i(d, "flex-1"),
+            children: /* @__PURE__ */ r(
+              "input",
+              {
+                type: u,
+                autoComplete: "off",
+                id: a,
+                placeholder: l,
+                value: s ?? "",
+                disabled: m,
+                className: i("border-0 bg-transparent px-2", o),
+                onChange: (I) => !x && se?.(I),
+                onKeyDown: te,
+                onWheel: re,
+                min: y,
+                max: p
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ r(D, { icon: n }),
-        w && /* @__PURE__ */ p("p", { className: "text-secondary dial-small pr-2", children: [
+        w && /* @__PURE__ */ f("p", { className: "text-secondary dial-small", children: [
           " ",
           w
         ] }),
-        E && /* @__PURE__ */ r(S, { tooltip: E, children: /* @__PURE__ */ r(
+        E && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
           L,
           {
             hideBorder: !0,
@@ -649,33 +663,33 @@ const Xe = "flex flex-col gap-2", Ye = "flex", Je = "pb-1 mt-2", er = {
       ]
     }
   );
-}, sr = /^0+\.(\d+)?$/, ar = /^0+/, ee = ({
+}, lr = /^0+\.(\d+)?$/, or = /^0+/, ee = ({
   fieldTitle: e,
   errorText: n,
   optional: t,
   elementCssClass: s,
   elementContainerCssClass: a,
-  elementId: o,
-  containerCssClass: l,
+  elementId: l,
+  containerCssClass: o,
   readonly: c,
   defaultEmptyText: d,
   min: u,
   max: m,
   ...x
-}) => /* @__PURE__ */ p("div", { className: i("flex flex-col", l), children: [
+}) => /* @__PURE__ */ f("div", { className: i("flex flex-col", o), children: [
   /* @__PURE__ */ r(
-    M,
+    O,
     {
       fieldTitle: e,
       optional: t,
-      htmlFor: o
+      htmlFor: l
     }
   ),
-  c ? /* @__PURE__ */ r("span", { children: x.value || (d ?? "None") }) : /* @__PURE__ */ p(ae, { children: [
+  c ? /* @__PURE__ */ r("span", { children: x.value || (d ?? "None") }) : /* @__PURE__ */ f(ae, { children: [
     /* @__PURE__ */ r(
       L,
       {
-        elementId: o,
+        elementId: l,
         cssClass: s,
         containerCssClass: a,
         invalid: n != null,
@@ -686,26 +700,26 @@ const Xe = "flex flex-col gap-2", Ye = "flex", Je = "pb-1 mt-2", er = {
     ),
     /* @__PURE__ */ r(W, { errorText: n })
   ] })
-] }), Fr = ({
+] }), Tr = ({
   onChange: e,
   value: n,
   min: t,
   max: s,
   ...a
 }) => {
-  const o = (l) => String(l)?.match(sr) ? String(l)?.replace(ar, "0") : Number(l);
+  const l = (o) => String(o)?.match(lr) ? String(o)?.replace(or, "0") : Number(o);
   return /* @__PURE__ */ r(
     ee,
     {
       type: "number",
-      onChange: (l) => e?.(o(l)),
+      onChange: (o) => e?.(l(o)),
       value: n,
       min: t,
       max: s,
       ...a
     }
   );
-}, Er = ({
+}, Pr = ({
   onChange: e,
   ...n
 }) => /* @__PURE__ */ r(
@@ -715,16 +729,16 @@ const Xe = "flex flex-col gap-2", Ye = "flex", Je = "pb-1 mt-2", er = {
     onChange: (t) => e?.(t),
     ...n
   }
-), Tr = ({
+), Ar = ({
   fieldTitle: e,
   optional: n,
   elementId: t,
   elementCssClass: s,
   errorText: a,
-  ...o
-}) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
+  ...l
+}) => /* @__PURE__ */ f("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ r(
-    M,
+    O,
     {
       fieldTitle: e,
       optional: n,
@@ -732,45 +746,45 @@ const Xe = "flex flex-col gap-2", Ye = "flex", Je = "pb-1 mt-2", er = {
     }
   ),
   /* @__PURE__ */ r(
-    rr,
+    tr,
     {
       textareaId: t,
       cssClass: s,
-      ...o
+      ...l
     }
   ),
   /* @__PURE__ */ r(W, { errorText: a })
-] }), Pr = ({
+] }), Lr = ({
   title: e,
   switchId: n,
   isOn: t = !1,
   disabled: s,
   onChange: a
 }) => {
-  const o = i(
+  const l = i(
     "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 = F(
+  ), o = S(
     (c) => {
       c.stopPropagation(), a?.(!t);
     },
     [a, t]
   );
-  return /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
+  return /* @__PURE__ */ f("div", { className: "flex flex-row items-center", children: [
     /* @__PURE__ */ r(
       "input",
       {
         type: "checkbox",
-        onChange: l,
+        onChange: o,
         id: n,
         disabled: s,
         className: "invisible w-0 h-0",
         checked: t
       }
     ),
-    /* @__PURE__ */ r("label", { htmlFor: n, className: o, children: /* @__PURE__ */ r(
+    /* @__PURE__ */ r("label", { htmlFor: n, className: l, children: /* @__PURE__ */ r(
       "span",
       {
         className: i(
@@ -783,18 +797,18 @@ const Xe = "flex flex-col gap-2", Ye = "flex", Je = "pb-1 mt-2", er = {
   ] });
 };
 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 = {
+const ir = "z-[52] flex items-center justify-center bg-blackout md:p-4", cr = "relative max-h-full rounded bg-layer-3 flex flex-col shadow w-full h-full md:h-auto", dr = "divide-tertiary divide-y", ur = "flex flex-row justify-between py-4 px-6 items-center", mr = {
   [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 = ({
+}, fr = ({
   open: e = !1,
   title: n,
   portalId: t,
   cssClass: s,
   overlayClass: a,
-  headingClass: o,
-  dividers: l = !0,
+  headingClass: l,
+  dividers: o = !0,
   children: c,
   footer: d,
   onClose: u,
@@ -805,7 +819,7 @@ const or = "z-[52] flex items-center justify-center bg-blackout md:p-4", lr = "r
     onOpenChange: (b) => {
       b || u?.(null);
     }
-  }), g = Z(h, { role: "dialog" }), y = K(h, { outsidePress: !0 }), { getFloatingProps: f } = q([g, y]);
+  }), g = Z(h, { role: "dialog" }), y = K(h, { outsidePress: !0 }), { getFloatingProps: p } = X([g, y]);
   if (!e) return null;
   const N = typeof n == "string" ? "dial-popup-heading" : void 0, w = (b) => b ? typeof b == "string" ? /* @__PURE__ */ r(
     "h3",
@@ -813,35 +827,33 @@ const or = "z-[52] flex items-center justify-center bg-blackout md:p-4", lr = "r
       id: N,
       className: i(
         "flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",
-        o
+        l
       ),
-      children: /* @__PURE__ */ r(S, { tooltip: b, children: b })
+      children: /* @__PURE__ */ r(V, { tooltip: b, children: b })
     }
   ) : 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(
+  return /* @__PURE__ */ r(Q, { id: t, children: /* @__PURE__ */ r(Pe, { className: i(ir, a), children: /* @__PURE__ */ r(Ae, { context: h, children: /* @__PURE__ */ f(
     "div",
     {
       ref: x.setFloating,
-      ...f(),
+      ...p(),
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": N,
       className: i(
-        lr,
-        dr[m],
-        l && ir,
+        cr,
+        mr[m],
+        o && dr,
         s
       ),
       children: [
-        /* @__PURE__ */ p("div", { className: cr, children: [
+        /* @__PURE__ */ f("div", { className: ur, children: [
           w(n),
           /* @__PURE__ */ r(
-            P,
+            nr,
             {
-              cssClass: "text-secondary hover:text-accent-primary",
               ariaLabel: "Close dialog",
-              iconBefore: /* @__PURE__ */ r(V, { size: 18 }),
-              onClick: (b) => u?.(b)
+              onClose: (b) => u?.(b)
             }
           )
         ] }),
@@ -851,13 +863,13 @@ const or = "z-[52] flex items-center justify-center bg-blackout md:p-4", lr = "r
     }
   ) }) }) });
 };
-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]: {
+var z = /* @__PURE__ */ ((e) => (e.Info = "info", e.Danger = "danger", e))(z || {});
+const pr = "flex justify-end gap-2 px-6 py-4", xr = "text-secondary dial-small-150 px-6 py-4", hr = "Cancel", H = {
+  [z.Info]: {
     confirmVariant: v.Primary,
     cancelVariant: v.Secondary
   },
-  [B.Danger]: {
+  [z.Danger]: {
     container: "border-t-4 border-error",
     confirmVariant: v.Danger,
     cancelVariant: v.Secondary
@@ -868,8 +880,8 @@ const mr = "flex justify-end gap-2 px-6 py-4", pr = "text-secondary dial-small-1
   descriptionCssClass: t,
   open: s = !1,
   confirmLabel: a,
-  cancelLabel: o = fr,
-  isLoading: l = !1,
+  cancelLabel: l = hr,
+  isLoading: o = !1,
   disableConfirmButton: c = !1,
   cssClass: d,
   confirmClassName: u,
@@ -878,41 +890,41 @@ const mr = "flex justify-end gap-2 px-6 py-4", pr = "text-secondary dial-small-1
   onCancel: h,
   children: g,
   dividers: y = !1,
-  variant: f = B.Info,
+  variant: p = z.Info,
   size: N = R.Sm
 }) => {
-  const w = l ? null : /* @__PURE__ */ p("div", { className: mr, children: [
+  const w = o ? null : /* @__PURE__ */ f("div", { className: pr, children: [
     /* @__PURE__ */ r(
       P,
       {
         variant: v.Secondary,
-        title: o,
+        title: l,
         onClick: () => h ? h() : m?.()
       }
     ),
     /* @__PURE__ */ r(
       P,
       {
-        variant: H[f].confirmVariant,
+        variant: H[p].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(
+  ] }), b = S(() => o ? /* @__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),
+      className: i(xr, t),
       children: n
     }
-  ) : null), [g, n, l, t]);
+  ) : null), [g, n, o, t]);
   return /* @__PURE__ */ r(
-    ur,
+    fr,
     {
       open: s,
       title: e,
-      cssClass: i(H[f].container, d),
+      cssClass: i(H[p].container, d),
       dividers: y,
       onClose: () => m?.(),
       footer: w,
@@ -920,15 +932,15 @@ const mr = "flex justify-end gap-2 px-6 py-4", pr = "text-secondary dial-small-1
       children: b()
     }
   );
-}, xr = ({ onClick: e }) => /* @__PURE__ */ r(
+}, gr = ({ onClick: e }) => /* @__PURE__ */ r(
   pe,
   {
     ...A,
     className: "text-primary",
     onClick: e
   }
-), hr = ({ onClick: e }) => /* @__PURE__ */ r(fe, { ...A, className: "text-primary", onClick: e }), gr = ({ ...e }) => {
-  const [n, t] = _(!1), s = F((a) => {
+), br = ({ onClick: e }) => /* @__PURE__ */ r(xe, { ...A, className: "text-primary", onClick: e }), yr = ({ ...e }) => {
+  const [n, t] = _(!1), s = S((a) => {
     t(a);
   }, []);
   return /* @__PURE__ */ r(
@@ -936,19 +948,19 @@ const mr = "flex justify-end gap-2 px-6 py-4", pr = "text-secondary dial-small-1
     {
       type: n ? "text" : "password",
       ...e,
-      iconAfterInput: n ? /* @__PURE__ */ r(xr, { onClick: () => s(!1) }) : /* @__PURE__ */ r(hr, { onClick: () => s(!0) })
+      iconAfter: n ? /* @__PURE__ */ r(gr, { onClick: () => s(!1) }) : /* @__PURE__ */ r(br, { onClick: () => s(!0) })
     }
   );
-}, Ar = ({
+}, Br = ({
   fieldTitle: e,
   optional: n,
   elementCssClass: t,
   elementId: s,
   errorText: a,
-  ...o
-}) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
+  ...l
+}) => /* @__PURE__ */ f("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ r(
-    M,
+    O,
     {
       fieldTitle: e,
       optional: n,
@@ -956,60 +968,60 @@ const mr = "flex justify-end gap-2 px-6 py-4", pr = "text-secondary dial-small-1
     }
   ),
   /* @__PURE__ */ r(
-    gr,
+    yr,
     {
       cssClass: t,
       elementId: s,
       invalid: !!a,
-      ...o
+      ...l
     }
   ),
   /* @__PURE__ */ r(W, { errorText: a })
 ] });
-var O = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(O || {});
-const br = {
-  [O.Small]: {
+var B = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(B || {});
+const Cr = {
+  [B.Small]: {
     textClass: "text-xs px-1",
     containerClass: "px-[6px] py-1 h-[22px]",
     iconSize: 10,
     iconStroke: 1
   },
-  [O.Base]: {
+  [B.Base]: {
     textClass: "text-sm px-2",
     containerClass: "px-3 py-2 h-[38px]",
     iconSize: 18,
     iconStroke: 1.5
   }
-}, Lr = ({
+}, Or = ({
   elementId: e,
   value: n,
   placeholder: t,
   disabled: s,
   readonly: a,
-  invalid: o,
-  cssClass: l,
+  invalid: l,
+  cssClass: o,
   containerCssClass: c,
   onChange: d,
-  size: u = O.Base
+  size: u = B.Base
 }) => {
   const [m, x] = _(n || "");
-  Ne(() => {
+  we(() => {
     x(n || "");
   }, [n]);
-  const h = F(
-    (f) => {
-      x(f), d?.(f);
+  const h = S(
+    (p) => {
+      x(p), d?.(p);
     },
     [d]
-  ), g = br[u], y = F(() => {
+  ), g = Cr[u], y = S(() => {
     h("");
   }, [h]);
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ f(
     "div",
     {
       className: i(
         "dial-input flex flex-row items-center justify-between",
-        o && "dial-input-error",
+        l && "dial-input-error",
         s && "dial-input-disable",
         a && "dial-input-readonly",
         g.containerClass,
@@ -1021,7 +1033,7 @@ const br = {
           {
             className: i(s ? "text-secondary" : "text-primary"),
             icon: /* @__PURE__ */ r(
-              xe,
+              he,
               {
                 size: g.iconSize,
                 stroke: g.iconStroke
@@ -1037,15 +1049,14 @@ const br = {
             autoComplete: "off",
             placeholder: t,
             value: m ?? "",
-            title: m ? String(m) : "",
             disabled: s,
             readOnly: a,
             className: i(
               "border-0 bg-transparent w-full",
-              l,
+              o,
               g.textClass
             ),
-            onChange: (f) => !a && h(f.currentTarget.value)
+            onChange: (p) => !a && h(p.currentTarget.value)
           }
         ),
         m && !a && !s && /* @__PURE__ */ r(
@@ -1053,7 +1064,7 @@ const br = {
           {
             className: "text-primary cursor-pointer",
             icon: /* @__PURE__ */ r(
-              V,
+              M,
               {
                 size: g.iconSize,
                 stroke: g.iconStroke,
@@ -1071,30 +1082,31 @@ const br = {
 export {
   k as AlertVariant,
   v as ButtonVariant,
-  B as ConfirmationPopupVariant,
-  Dr as DialAlert,
+  z as ConfirmationPopupVariant,
+  kr as DialAlert,
   P as DialButton,
-  Ir as DialCheckbox,
-  Rr as DialCloseButton,
+  Rr as DialCheckbox,
+  nr as DialCloseButton,
   zr as DialConfirmationPopup,
   W as DialErrorText,
-  M as DialFieldLabel,
+  O as DialFieldLabel,
   D as DialIcon,
   L as DialInput,
   Me as DialLoader,
-  Fr as DialNumberInputField,
-  gr as DialPasswordInput,
-  Ar as DialPasswordInputField,
-  ur as DialPopup,
+  Er as DialNoDataContent,
+  Tr as DialNumberInputField,
+  yr as DialPasswordInput,
+  Br as DialPasswordInputField,
+  fr 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,
+  Fr as DialRadioGroup,
+  Or as DialSearch,
+  Sr as DialSteps,
+  Lr as DialSwitch,
+  Ar as DialTextAreaField,
+  Pr as DialTextInputField,
+  tr as DialTextarea,
+  V as DialTooltip,
   R as PopupSize,
   j as RadioGroupOrientation,
   C as StepStatus