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

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

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