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

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

@@ -1,31 +1,31 @@
-import { jsx as r, jsxs as f, Fragment as ae } from "react/jsx-runtime";
-import i from "classnames";
-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 = ({
+import { jsx as r, jsxs as f, Fragment as oe } from "react/jsx-runtime";
+import c from "classnames";
+import { IconCircleCheck as le, IconAlertTriangle as ie, IconAlertCircle as ce, IconInfoCircle as de, IconX as W, IconLoader as ue, IconMinus as me, IconCheck as $, IconExclamationCircle as fe, IconClipboardX as pe, IconChevronsLeft as xe, IconChevronsRight as he, IconEyeOff as ge, IconEye as be, IconSearch as ye } from "@tabler/icons-react";
+import { createContext as Ce, useState as T, useRef as ve, useMemo as Ne, useContext as we, forwardRef as U, isValidElement as De, cloneElement as Ie, useCallback as S, useEffect as ke } from "react";
+import { useFloating as G, offset as Re, flip as Se, shift as Fe, arrow as Ee, autoUpdate as Te, useHover as Pe, useFocus as Le, useDismiss as K, useRole as Z, useInteractions as X, useMergeRefs as q, FloatingPortal as Q, FloatingArrow as Ae, FloatingOverlay as Oe, FloatingFocusManager as ze } from "@floating-ui/react";
+const _ = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "text-error dial-tiny mt-1", children: e }), j = ({
   fieldTitle: e,
   htmlFor: n,
   optional: t,
-  optionalText: s,
-  cssClass: a
+  optionalText: a,
+  cssClass: s
 }) => e ? /* @__PURE__ */ f(
   "label",
   {
-    className: i(
+    className: c(
       "dial-tiny text-secondary",
-      a,
-      !a?.includes("mb") && "mb-2"
+      s,
+      !s?.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)" })
+      t && /* @__PURE__ */ r("span", { className: "ml-1", children: a ?? "(Optional)" })
     ]
   }
-) : null, D = ({ icon: e, className: n }) => e ? /* @__PURE__ */ r("span", { className: i("flex-shrink-0", n), children: e }) : null;
+) : null, D = ({ icon: e, className: n }) => e ? /* @__PURE__ */ r("span", { className: c("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 Le = {
+const Be = {
   [v.Primary]: "dial-primary-button",
   [v.Secondary]: "dial-secondary-button",
   [v.Tertiary]: "dial-tertiary-button",
@@ -34,188 +34,188 @@ const Le = {
   title: e,
   variant: n,
   cssClass: t,
-  ref: s,
-  onClick: a,
-  disable: l,
-  iconAfter: o,
-  iconBefore: c,
-  hideTitleOnMobile: d,
-  ariaLabel: u
+  ref: a,
+  onClick: s,
+  disable: o,
+  iconAfter: l,
+  iconBefore: d,
+  hideTitleOnMobile: u,
+  ariaLabel: i
 }) => {
-  const m = i(
+  const m = c(
     "dial-small-semi",
-    o ? "mr-2" : "",
-    c ? "ml-2" : "",
-    d ? "hidden sm:inline" : "inline"
-  ), x = i(
-    n && Le[n],
+    l ? "mr-2" : "",
+    d ? "ml-2" : "",
+    u ? "hidden sm:inline" : "inline"
+  ), p = c(
+    n && Be[n],
     t,
     "focus-visible:outline outline-offset-0"
   );
   return /* @__PURE__ */ f(
     "button",
     {
-      ref: s,
+      ref: a,
       type: "button",
-      className: x,
-      onClick: (h) => a?.(h),
-      disabled: l,
-      "aria-label": e || u,
+      className: p,
+      onClick: (x) => s?.(x),
+      disabled: o,
+      "aria-label": e || i,
       children: [
-        /* @__PURE__ */ r(D, { icon: c }),
+        /* @__PURE__ */ r(D, { icon: d }),
         e && /* @__PURE__ */ r("span", { className: m, children: e }),
-        /* @__PURE__ */ r(D, { icon: o })
+        /* @__PURE__ */ r(D, { icon: l })
       ]
     }
   );
 };
 var k = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(k || {});
-const ze = {
-  info: /* @__PURE__ */ r(ce, { size: 24, stroke: 2 }),
-  error: /* @__PURE__ */ r(ie, { size: 24, stroke: 2 }),
-  warning: /* @__PURE__ */ r(oe, { size: 24, stroke: 2 }),
+const je = {
+  info: /* @__PURE__ */ r(de, { size: 24, stroke: 2 }),
+  error: /* @__PURE__ */ r(ce, { size: 24, stroke: 2 }),
+  warning: /* @__PURE__ */ r(ie, { size: 24, stroke: 2 }),
   success: /* @__PURE__ */ r(le, { size: 24, stroke: 2 })
-}, Be = {
+}, Ve = {
   [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"
-}, Oe = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", kr = ({
+}, Me = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", Fr = ({
   variant: e = k.Info,
   message: n,
   cssClass: t,
-  closable: s = !1,
-  onClose: a
+  closable: a = !1,
+  onClose: s
 }) => /* @__PURE__ */ f(
   "div",
   {
     role: "alert",
-    className: i(
-      Oe,
-      Be[e],
+    className: c(
+      Me,
+      Ve[e],
       t
     ),
     children: [
       /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ r(D, { icon: ze[e] }),
+        /* @__PURE__ */ r(D, { icon: je[e] }),
         /* @__PURE__ */ r("div", { className: "text-primary", children: n })
       ] }),
-      s && /* @__PURE__ */ r(
+      a && /* @__PURE__ */ r(
         P,
         {
           cssClass: "ml-2 text-secondary hover:text-primary",
           ariaLabel: "Close alert",
-          iconBefore: /* @__PURE__ */ r(M, { size: 16 }),
-          onClick: (l) => a?.(l)
+          iconBefore: /* @__PURE__ */ r(W, { size: 16 }),
+          onClick: (o) => s?.(o)
         }
       )
     ]
   }
-), Ve = "flex items-center justify-center text-secondary", je = "shrink-0 grow-0 basis-auto animate-spin-steps", Me = ({
+), We = "flex items-center justify-center text-secondary", _e = "shrink-0 grow-0 basis-auto animate-spin-steps", He = ({
   size: e = 18,
   cssClass: n,
   iconClass: t,
-  fullWidth: s = !0,
-  ariaLabel: a = "Loading"
+  fullWidth: a = !0,
+  ariaLabel: s = "Loading"
 }) => /* @__PURE__ */ r(
   "div",
   {
     role: "status",
-    "aria-label": a,
-    className: i({
-      [Ve]: !0,
-      "w-full h-full": s,
+    "aria-label": s,
+    className: c({
+      [We]: !0,
+      "w-full h-full": a,
       [n || ""]: !!n
     }),
     children: /* @__PURE__ */ r(
       D,
       {
         icon: /* @__PURE__ */ r(
-          de,
+          ue,
           {
             width: e,
             height: e,
-            className: i(je, t)
+            className: c(_e, t)
           }
         )
       }
     )
   }
-), _e = 7, We = 2, Y = ge(null), J = () => {
-  const e = Ce(Y);
+), $e = 7, Ue = 2, Y = Ce(null), J = () => {
+  const e = we(Y);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
   return e;
-}, He = ({
+}, Ge = ({
   initialOpen: e = !1,
   placement: n = "bottom",
   isTriggerClickable: t = !1,
-  open: s,
-  onOpenChange: a
+  open: a,
+  onOpenChange: s
 } = {}) => {
-  const [l, o] = _(e), c = be(null), d = s ?? l, u = a ?? o, m = G({
+  const [o, l] = T(e), d = ve(null), u = a ?? o, i = s ?? l, m = G({
     placement: n,
-    open: d,
-    onOpenChange: u,
-    whileElementsMounted: Se,
+    open: u,
+    onOpenChange: i,
+    whileElementsMounted: Te,
     middleware: [
-      De(_e + We),
-      Ie({
+      Re($e + Ue),
+      Se({
         crossAxis: n.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5
       }),
-      ke({ padding: 5 }),
-      Re({
-        element: c
+      Fe({ padding: 5 }),
+      Ee({
+        element: d
       })
     ]
-  }), x = Fe(m.context, {
+  }), p = Pe(m.context, {
     move: !1,
-    enabled: s == null,
+    enabled: a == null,
     mouseOnly: t,
     delay: { open: 500, close: 0 }
-  }), h = Ee(m.context, {
-    enabled: s == null
-  }), g = K(m.context), y = Z(m.context, { role: "tooltip" }), p = X([x, h, g, y]);
-  return ye(
+  }), x = Le(m.context, {
+    enabled: a == null
+  }), h = K(m.context), y = Z(m.context, { role: "tooltip" }), g = X([p, x, h, y]);
+  return Ne(
     () => ({
-      open: d,
-      setOpen: u,
-      arrowRef: c,
-      ...p,
+      open: u,
+      setOpen: i,
+      arrowRef: d,
+      ...g,
       ...m
     }),
-    [d, u, p, m]
+    [u, i, g, m]
   );
-}, Ue = ({
+}, Ke = ({
   children: e,
   ...n
 }) => {
-  const t = He(n);
+  const t = Ge(n);
   return /* @__PURE__ */ r(Y.Provider, { value: t, children: e });
-}, $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(
+}, Ze = U(function({ style: n, ...t }, a) {
+  const s = J(), o = q([s.refs.setFloating, a]);
+  return s.open ? /* @__PURE__ */ r(Q, { id: "tooltip-portal", children: /* @__PURE__ */ f(
     "div",
     {
-      ref: l,
+      ref: o,
       style: {
-        ...a.floatingStyles,
+        ...s.floatingStyles,
         ...n
       },
-      ...a.getFloatingProps(t),
-      className: i(
+      ...s.getFloatingProps(t),
+      className: c(
         "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
+        s.getFloatingProps(t).className
       ),
       children: [
         t.children,
         /* @__PURE__ */ r(
-          Te,
+          Ae,
           {
-            ref: a.arrowRef,
-            context: a.context,
+            ref: s.arrowRef,
+            context: s.context,
             fill: "currentColor",
             strokeWidth: 1,
             className: "stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"
@@ -224,21 +224,21 @@ const ze = {
       ]
     }
   ) }) : null;
-}), 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(
+}), Xe = U(function({ children: n, asChild: t = !1, ...a }, s) {
+  const o = J(), d = n && typeof n == "object" && "ref" in n && n.ref !== void 0 ? n.ref : void 0, u = q([o.refs.setReference, s, d]);
+  return t && De(n) ? Ie(
     n,
-    l.getReferenceProps({
-      ref: d,
-      ...s,
+    o.getReferenceProps({
+      ref: u,
+      ...a,
       ...n.props
     })
   ) : /* @__PURE__ */ r(
     "span",
     {
-      ref: d,
-      ...l.getReferenceProps(s),
-      className: s.className ?? "dial-tooltip-trigger text-left",
+      ref: u,
+      ...o.getReferenceProps(a),
+      className: a.className ?? "dial-tooltip-trigger text-left",
       children: n
     }
   );
@@ -246,68 +246,68 @@ const ze = {
   hideTooltip: e,
   tooltip: n,
   children: t,
-  triggerClassName: s,
-  contentClassName: a,
-  ...l
-}) => /* @__PURE__ */ f(Ue, { ...l, children: [
-  /* @__PURE__ */ r(Ge, { className: i(s, "truncate"), children: t }),
+  triggerClassName: a,
+  contentClassName: s,
+  ...o
+}) => /* @__PURE__ */ f(Ke, { ...o, children: [
+  /* @__PURE__ */ r(Xe, { className: c(a, "truncate"), children: t }),
   /* @__PURE__ */ r(
-    $e,
+    Ze,
     {
-      className: i(
+      className: c(
         "text-primary",
-        a,
+        s,
         "max-w-[300px]",
         (e || !n) && "hidden"
       ),
       children: n
     }
   )
-] }), Ke = 18, A = {
-  size: Ke,
+] }), ee = 18, F = {
+  size: ee,
   stroke: 2
-}, Rr = ({
+}, Er = ({
   label: e,
   id: n,
   checked: t,
-  indeterminate: s,
-  disabled: a,
-  ariaLabel: l,
-  onChange: o
+  indeterminate: a,
+  disabled: s,
+  ariaLabel: o,
+  onChange: l
 }) => {
-  const c = S(
+  const d = S(
     (m) => {
-      m.stopPropagation(), o?.(m.target.checked, n);
+      m.stopPropagation(), l?.(m.target.checked, n);
     },
-    [o, n]
-  ), d = i(
+    [l, n]
+  ), u = c(
     "flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",
     `${t ? "" : 'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,
-    a ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : ""
-  ), u = i(
+    s ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : ""
+  ), i = c(
     "mr-2 border rounded",
-    a ? "bg-layer-4 border-icon-secondary" : ""
+    s ? "bg-layer-4 border-icon-secondary" : ""
   );
-  return /* @__PURE__ */ f("label", { className: d, htmlFor: n, children: [
-    t && (s ? /* @__PURE__ */ r(ue, { className: u, ...A }) : /* @__PURE__ */ r(U, { className: u, ...A })),
+  return /* @__PURE__ */ f("label", { className: u, htmlFor: n, children: [
+    t && (a ? /* @__PURE__ */ r(me, { className: i, ...F }) : /* @__PURE__ */ r($, { className: i, ...F })),
     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",
       {
         type: "checkbox",
-        onChange: c,
+        onChange: d,
         id: n,
         checked: t,
-        "aria-checked": s ? "mixed" : t,
-        "aria-disabled": a || void 0,
-        "aria-label": e ? void 0 : l,
+        "aria-checked": a ? "mixed" : t,
+        "aria-disabled": s || void 0,
+        "aria-label": e ? void 0 : o,
         className: "invisible w-0 h-0"
       }
     )
   ] });
 };
 var C = /* @__PURE__ */ ((e) => (e.VALID = "valid", e.ERROR = "error", e))(C || {});
-const Ze = (e, n) => {
+const qe = (e, n) => {
   if (n === e.id)
     switch (e.status) {
       case C.VALID:
@@ -325,7 +325,7 @@ const Ze = (e, n) => {
     default:
       return "border-primary text-secondary";
   }
-}, Xe = (e, n) => {
+}, Qe = (e, n) => {
   if (n === e.id)
     switch (e.status) {
       case C.VALID:
@@ -343,71 +343,71 @@ const Ze = (e, n) => {
     default:
       return "bg-layer-4";
   }
-}, qe = ({
+}, Ye = ({
   step: e,
   index: n,
   currentStep: t,
-  onChangeStep: s
+  onChangeStep: a
 }) => {
-  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;
+  const s = "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(fe, { stroke: 2, size: 16 }) : t !== e.id && e.status === C.VALID ? /* @__PURE__ */ r($, { stroke: 2, size: 16 }) : n + 1;
   return /* @__PURE__ */ f(
     "button",
     {
-      className: i(a, Ze(e, t)),
-      onClick: () => s(e.id),
+      className: c(s, qe(e, t)),
+      onClick: () => a(e.id),
       children: [
         /* @__PURE__ */ r(
           "span",
           {
-            className: i(l, Xe(e, t)),
-            children: o()
+            className: c(o, Qe(e, t)),
+            children: l()
           }
         ),
         /* @__PURE__ */ r("span", { children: e.name })
       ]
     }
   );
-}, Sr = ({
+}, Tr = ({
   steps: e,
   currentStep: n,
   onChangeStep: t
 }) => {
-  const s = (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);
+  const a = (s) => {
+    const o = e.findIndex((d) => d.id === n), l = e.findIndex((d) => d.id === s);
+    (s !== n && e[o].status === C.VALID || l < o) && t(s);
   };
-  return /* @__PURE__ */ r("div", { id: "steps", className: "flex gap-x-3", children: e.map((a, l) => /* @__PURE__ */ r(
-    qe,
+  return /* @__PURE__ */ r("div", { id: "steps", className: "flex gap-x-3", children: e.map((s, o) => /* @__PURE__ */ r(
+    Ye,
     {
       currentStep: n,
-      onChangeStep: s,
-      step: a,
-      index: l
+      onChangeStep: a,
+      step: s,
+      index: o
     },
-    a.id
+    s.id
   )) });
-}, Qe = ({
+}, Je = ({
   name: e,
   value: n,
   title: t,
-  description: s,
-  checked: a = !1,
-  inputId: l,
-  cssClass: o,
-  labelCssClass: c,
-  disabled: d,
-  onChange: u,
+  description: a,
+  checked: s = !1,
+  inputId: o,
+  cssClass: l,
+  labelCssClass: d,
+  disabled: u,
+  onChange: i,
   descriptionCssClass: m
 }) => {
-  const x = `${l}-desc`, h = i(
+  const p = `${o}-desc`, x = c(
     "dial-small cursor-pointer",
-    d ? "text-secondary" : "text-primary",
-    c
-  ), g = i(
+    u ? "text-secondary" : "text-primary",
+    d
+  ), h = c(
     "cursor-pointer dial-input-radio",
     t && "mr-2",
-    o
-  ), y = i("flex flex-col", !!s && "mb-2"), p = i(
+    l
+  ), y = c("flex flex-col", !!a && "mb-2"), g = c(
     "dial-tiny mt-2 ml-[26px] text-secondary",
     m
   );
@@ -417,115 +417,180 @@ const Ze = (e, n) => {
         "input",
         {
           type: "radio",
-          id: l,
+          id: o,
           name: e,
           value: n,
-          checked: a,
-          disabled: d,
-          "aria-describedby": a && s ? x : void 0,
-          className: g,
+          checked: s,
+          disabled: u,
+          "aria-describedby": s && a ? p : void 0,
+          className: h,
           onChange: (w) => {
-            d || w.target.checked && u?.(n);
+            u || w.target.checked && i?.(n);
           }
         }
       ),
-      t ? /* @__PURE__ */ r("label", { className: h, htmlFor: l, children: t }) : null
+      t ? /* @__PURE__ */ r("label", { className: x, htmlFor: o, children: t }) : null
     ] }),
-    a && s && /* @__PURE__ */ r("div", { id: x, className: p, children: s })
+    s && a && /* @__PURE__ */ r("div", { id: p, className: g, children: a })
   ] });
 };
-var j = /* @__PURE__ */ ((e) => (e.Row = "Row", e.Column = "Column", e))(j || {});
-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"
-}, Fr = ({
+var M = /* @__PURE__ */ ((e) => (e.Row = "Row", e.Column = "Column", e))(M || {});
+const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
+  [M.Column]: "flex-col gap-y-3",
+  [M.Row]: "flex-row gap-x-6"
+}, Pr = ({
   fieldTitle: e,
   radioCssClass: n,
   labelCssClass: t,
-  disabled: s,
-  elementId: a,
-  radioButtons: l,
-  activeRadioButton: o,
-  orientation: c,
-  onChange: d
-}) => /* @__PURE__ */ f("div", { className: Ye, children: [
-  e && /* @__PURE__ */ r(O, { fieldTitle: e, htmlFor: a }),
+  disabled: a,
+  elementId: s,
+  radioButtons: o,
+  activeRadioButton: l,
+  orientation: d,
+  onChange: u
+}) => /* @__PURE__ */ f("div", { className: er, children: [
+  e && /* @__PURE__ */ r(j, { fieldTitle: e, htmlFor: s }),
   /* @__PURE__ */ r(
     "div",
     {
       role: "radiogroup",
       "aria-label": e,
-      "aria-disabled": s || void 0,
-      className: i(
-        Je,
-        rr[c]
+      "aria-disabled": a || void 0,
+      className: c(
+        rr,
+        tr[d]
       ),
-      children: l.map((u) => /* @__PURE__ */ f("div", { className: "flex flex-col", children: [
+      children: o.map((i) => /* @__PURE__ */ f("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ r(
-          Qe,
+          Je,
           {
-            name: a,
-            value: u.id,
-            inputId: u.id,
-            disabled: s,
+            name: s,
+            value: i.id,
+            inputId: i.id,
+            disabled: a,
             cssClass: n,
             labelCssClass: t,
-            title: u.name,
-            checked: u.id === o,
-            onChange: () => d(u.id)
+            title: i.name,
+            checked: i.id === l,
+            onChange: () => u(i.id)
           }
         ),
-        u.id === o && u.content ? /* @__PURE__ */ r("div", { className: er, children: u.content }) : null
-      ] }, u.id))
+        i.id === l && i.content ? /* @__PURE__ */ r("div", { className: nr, children: i.content }) : null
+      ] }, i.id))
     }
   )
-] }), Er = ({
+] }), Lr = ({
   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 }),
+  e || /* @__PURE__ */ r(pe, { 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 = ({
+] }), sr = 60, Ar = ({
+  containerCssClass: e,
+  children: n,
+  width: t,
+  title: a,
+  iconSize: s = ee,
+  titleCssClass: o,
+  additionalButtons: l
+}) => {
+  const [d, u] = T(t), [i, m] = T(!0), p = c([
+    "transform rotate-180 [writing-mode:tb-rl]",
+    i && "hidden",
+    o
+  ]), x = c([
+    "flex flex-row gap-2 cursor-pointer text-secondary",
+    i ? "justify-end" : "justify-center"
+  ]), h = () => {
+    u(i ? sr : t), m(!i);
+  };
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: c([
+        "rounded p-4 flex flex-col justify-between overflow-y-auto flex-shrink-0",
+        e
+      ]),
+      style: { width: `${d}px` },
+      children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: c([
+              "flex-1 min-h-0 overflow-auto",
+              !i && "hidden"
+            ]),
+            children: n
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: p, children: a }),
+        /* @__PURE__ */ f("div", { className: x, children: [
+          i && l,
+          /* @__PURE__ */ r(
+            P,
+            {
+              cssClass: "hover:text-icon-accent-primary",
+              onClick: h,
+              iconBefore: i ? /* @__PURE__ */ r(
+                xe,
+                {
+                  size: s,
+                  stroke: F.stroke
+                }
+              ) : /* @__PURE__ */ r(
+                he,
+                {
+                  size: s,
+                  stroke: F.stroke
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, ar = ({
   ariaLabel: e,
   cssClass: n,
   size: t = 24,
-  onClose: s
+  onClose: a
 }) => /* @__PURE__ */ r(
   P,
   {
     ariaLabel: e,
-    cssClass: i("text-secondary hover:text-accent-primary", n),
-    onClick: s,
-    iconBefore: /* @__PURE__ */ r(M, { size: t })
+    cssClass: c("text-secondary hover:text-accent-primary", n),
+    onClick: a,
+    iconBefore: /* @__PURE__ */ r(W, { size: t })
   }
-), tr = ({
+), or = ({
   value: e,
   textareaId: n,
   placeholder: t,
-  cssClass: s = "",
-  disabled: a,
-  invalid: l,
-  readonly: o,
-  onChange: c
+  cssClass: a = "",
+  disabled: s,
+  invalid: o,
+  readonly: l,
+  onChange: d
 }) => /* @__PURE__ */ r(V, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
   "textarea",
   {
     id: n,
     placeholder: t,
     value: e || "",
-    disabled: a,
-    className: i(
+    disabled: s,
+    className: c(
       "dial-textarea dial-input px-3 py-2",
-      l ? "dial-input-error" : "",
-      a && "dial-input-disable",
-      o && "dial-input-readonly",
-      s
+      o ? "dial-input-error" : "",
+      s && "dial-input-disable",
+      l && "dial-input-readonly",
+      a
     ),
-    onChange: (d) => !o && c?.(d.currentTarget.value)
+    onChange: (u) => !l && d?.(u.currentTarget.value)
   }
-) }), sr = [
+) }), lr = [
   "ArrowLeft",
   "ArrowRight",
   "ArrowUp",
@@ -537,75 +602,75 @@ const Ye = "flex flex-col gap-2", Je = "flex", er = "pb-1 mt-2", rr = {
   "Escape",
   "Home",
   "End"
-], 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("."))) {
+], ir = (e, n, t, a) => {
+  if ((n === "number" || t !== void 0 || a !== void 0) && !lr.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 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) {
+    if (t !== void 0 || a !== void 0) {
+      const o = e.currentTarget.value, l = e.currentTarget.selectionStart || 0, d = o.slice(0, l) + e.key + o.slice(l), u = parseFloat(d);
+      if (!isNaN(u)) {
+        if (t !== void 0 && u < t) {
           e.preventDefault();
           return;
         }
-        if (s !== void 0 && d > s) {
+        if (a !== void 0 && u > a) {
           e.preventDefault();
           return;
         }
       }
     }
   }
-}, L = ({
+}, O = ({
   iconBefore: e,
   iconAfter: n,
   hideBorder: t,
-  value: s,
-  elementId: a,
-  placeholder: l = "",
-  cssClass: o = "",
-  containerCssClass: c,
-  tooltipTriggerClassName: d,
-  type: u = "text",
+  value: a,
+  elementId: s,
+  placeholder: o = "",
+  cssClass: l = "",
+  containerCssClass: d,
+  tooltipTriggerClassName: u,
+  type: i = "text",
   disabled: m,
-  readonly: x,
-  invalid: h,
-  onChange: g,
+  readonly: p,
+  invalid: x,
+  onChange: h,
   min: y,
-  max: p,
+  max: g,
   prefix: N,
   suffix: w,
   textBeforeInput: b,
-  textAfterInput: E
+  textAfterInput: L
 }) => {
-  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 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))
+  const ne = (I) => I.target.blur(), te = i === "number" || y !== void 0 || g !== void 0, se = (I) => {
+    ir(I, i, y, g);
+  }, ae = (I) => {
+    const E = I.currentTarget.value;
+    if (te && E !== "") {
+      const A = parseFloat(E);
+      if (isNaN(A) && E !== "-" && E !== "." || !isNaN(A) && (y !== void 0 && A < y || g !== void 0 && A > g))
         return;
     }
-    g?.(F);
+    h?.(E);
   };
   return /* @__PURE__ */ f(
     "div",
     {
-      className: i(
+      className: c(
         "dial-input-field flex flex-row items-center justify-between py-2",
         t ? "dial-input-no-border" : "dial-input",
-        h && "dial-input-error",
+        x && "dial-input-error",
         m && "dial-input-disable",
-        x && "dial-input-readonly",
+        p && "dial-input-readonly",
         !b && "pl-3",
-        !E && "pr-3",
-        c
+        !L && "pr-3",
+        d
       ),
       children: [
         b && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-          L,
+          O,
           {
             hideBorder: !0,
             containerCssClass: "rounded-r-none border-r-0",
@@ -623,23 +688,23 @@ const Ye = "flex flex-col gap-2", Je = "flex", er = "pb-1 mt-2", rr = {
         /* @__PURE__ */ r(
           V,
           {
-            tooltip: s,
-            triggerClassName: i(d, "flex-1"),
+            tooltip: a,
+            triggerClassName: c(u, "flex-1"),
             children: /* @__PURE__ */ r(
               "input",
               {
-                type: u,
+                type: i,
                 autoComplete: "off",
-                id: a,
-                placeholder: l,
-                value: s ?? "",
+                id: s,
+                placeholder: o,
+                value: a ?? "",
                 disabled: m,
-                className: i("border-0 bg-transparent px-2", o),
-                onChange: (I) => !x && se?.(I),
-                onKeyDown: te,
-                onWheel: re,
+                className: c("border-0 bg-transparent px-2", l),
+                onChange: (I) => !p && ae?.(I),
+                onKeyDown: se,
+                onWheel: ne,
                 min: y,
-                max: p
+                max: g
               }
             )
           }
@@ -649,96 +714,96 @@ const Ye = "flex flex-col gap-2", Je = "flex", er = "pb-1 mt-2", rr = {
           " ",
           w
         ] }),
-        E && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-          L,
+        L && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+          O,
           {
             hideBorder: !0,
             containerCssClass: "rounded-l-none border-l-0",
             cssClass: "px-2",
-            value: E,
+            value: L,
             disabled: !0,
-            elementId: E + "textAfter"
+            elementId: L + "textAfter"
           }
         ) })
       ]
     }
   );
-}, lr = /^0+\.(\d+)?$/, or = /^0+/, ee = ({
+}, cr = /^0+\.(\d+)?$/, dr = /^0+/, re = ({
   fieldTitle: e,
   errorText: n,
   optional: t,
-  elementCssClass: s,
-  elementContainerCssClass: a,
-  elementId: l,
-  containerCssClass: o,
-  readonly: c,
-  defaultEmptyText: d,
-  min: u,
+  elementCssClass: a,
+  elementContainerCssClass: s,
+  elementId: o,
+  containerCssClass: l,
+  readonly: d,
+  defaultEmptyText: u,
+  min: i,
   max: m,
-  ...x
-}) => /* @__PURE__ */ f("div", { className: i("flex flex-col", o), children: [
+  ...p
+}) => /* @__PURE__ */ f("div", { className: c("flex flex-col", l), children: [
   /* @__PURE__ */ r(
-    O,
+    j,
     {
       fieldTitle: e,
       optional: t,
-      htmlFor: l
+      htmlFor: o
     }
   ),
-  c ? /* @__PURE__ */ r("span", { children: x.value || (d ?? "None") }) : /* @__PURE__ */ f(ae, { children: [
+  d ? /* @__PURE__ */ r("span", { children: p.value || (u ?? "None") }) : /* @__PURE__ */ f(oe, { children: [
     /* @__PURE__ */ r(
-      L,
+      O,
       {
-        elementId: l,
-        cssClass: s,
-        containerCssClass: a,
+        elementId: o,
+        cssClass: a,
+        containerCssClass: s,
         invalid: n != null,
-        min: u,
+        min: i,
         max: m,
-        ...x
+        ...p
       }
     ),
-    /* @__PURE__ */ r(W, { errorText: n })
+    /* @__PURE__ */ r(_, { errorText: n })
   ] })
-] }), Tr = ({
+] }), Or = ({
   onChange: e,
   value: n,
   min: t,
-  max: s,
-  ...a
+  max: a,
+  ...s
 }) => {
-  const l = (o) => String(o)?.match(lr) ? String(o)?.replace(or, "0") : Number(o);
+  const o = (l) => String(l)?.match(cr) ? String(l)?.replace(dr, "0") : Number(l);
   return /* @__PURE__ */ r(
-    ee,
+    re,
     {
       type: "number",
-      onChange: (o) => e?.(l(o)),
+      onChange: (l) => e?.(o(l)),
       value: n,
       min: t,
-      max: s,
-      ...a
+      max: a,
+      ...s
     }
   );
-}, Pr = ({
+}, zr = ({
   onChange: e,
   ...n
 }) => /* @__PURE__ */ r(
-  ee,
+  re,
   {
     type: "text",
     onChange: (t) => e?.(t),
     ...n
   }
-), Ar = ({
+), Br = ({
   fieldTitle: e,
   optional: n,
   elementId: t,
-  elementCssClass: s,
-  errorText: a,
-  ...l
+  elementCssClass: a,
+  errorText: s,
+  ...o
 }) => /* @__PURE__ */ f("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ r(
-    O,
+    j,
     {
       fieldTitle: e,
       optional: n,
@@ -746,50 +811,50 @@ const Ye = "flex flex-col gap-2", Je = "flex", er = "pb-1 mt-2", rr = {
     }
   ),
   /* @__PURE__ */ r(
-    tr,
+    or,
     {
       textareaId: t,
-      cssClass: s,
-      ...l
+      cssClass: a,
+      ...o
     }
   ),
-  /* @__PURE__ */ r(W, { errorText: a })
-] }), Lr = ({
+  /* @__PURE__ */ r(_, { errorText: s })
+] }), jr = ({
   title: e,
   switchId: n,
   isOn: t = !1,
-  disabled: s,
-  onChange: a
+  disabled: a,
+  onChange: s
 }) => {
-  const l = i(
+  const o = c(
     "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"
-  ), o = S(
-    (c) => {
-      c.stopPropagation(), a?.(!t);
+    a ? "pointer-events-none" : "",
+    a ? t ? "bg-controls-disable" : "bg-layer-4" : t ? "bg-accent-primary" : "bg-layer-4"
+  ), l = S(
+    (d) => {
+      d.stopPropagation(), s?.(!t);
     },
-    [a, t]
+    [s, t]
   );
   return /* @__PURE__ */ f("div", { className: "flex flex-row items-center", children: [
     /* @__PURE__ */ r(
       "input",
       {
         type: "checkbox",
-        onChange: o,
+        onChange: l,
         id: n,
-        disabled: s,
+        disabled: a,
         className: "invisible w-0 h-0",
         checked: t
       }
     ),
-    /* @__PURE__ */ r("label", { htmlFor: n, className: l, children: /* @__PURE__ */ r(
+    /* @__PURE__ */ r("label", { htmlFor: n, className: o, children: /* @__PURE__ */ r(
       "span",
       {
-        className: i(
+        className: c(
           "size-3 rounded-full",
-          s ? t ? "bg-layer-4" : "bg-controls-disable" : "bg-controls-enable-primary"
+          a ? t ? "bg-layer-4" : "bg-controls-disable" : "bg-controls-enable-primary"
         )
       }
     ) }),
@@ -797,74 +862,74 @@ const Ye = "flex flex-col gap-2", Je = "flex", er = "pb-1 mt-2", rr = {
   ] });
 };
 var R = /* @__PURE__ */ ((e) => (e.Sm = "sm", e.Md = "md", e.Lg = "lg", e))(R || {});
-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 = {
+const ur = "z-[52] flex items-center justify-center bg-blackout md:p-4", mr = "relative max-h-full rounded bg-layer-3 flex flex-col shadow w-full h-full md:h-auto", fr = "divide-tertiary divide-y", pr = "flex flex-row justify-between py-4 px-6 items-center", xr = {
   [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]"
-}, fr = ({
+}, hr = ({
   open: e = !1,
   title: n,
   portalId: t,
-  cssClass: s,
-  overlayClass: a,
-  headingClass: l,
-  dividers: o = !0,
-  children: c,
-  footer: d,
-  onClose: u,
+  cssClass: a,
+  overlayClass: s,
+  headingClass: o,
+  dividers: l = !0,
+  children: d,
+  footer: u,
+  onClose: i,
   size: m = R.Md
 }) => {
-  const { refs: x, context: h } = G({
+  const { refs: p, context: x } = G({
     open: e,
     onOpenChange: (b) => {
-      b || u?.(null);
+      b || i?.(null);
     }
-  }), g = Z(h, { role: "dialog" }), y = K(h, { outsidePress: !0 }), { getFloatingProps: p } = X([g, y]);
+  }), h = Z(x, { role: "dialog" }), y = K(x, { outsidePress: !0 }), { getFloatingProps: g } = X([h, y]);
   if (!e) return null;
   const N = typeof n == "string" ? "dial-popup-heading" : void 0, w = (b) => b ? typeof b == "string" ? /* @__PURE__ */ r(
     "h3",
     {
       id: N,
-      className: i(
+      className: c(
         "flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",
-        l
+        o
       ),
       children: /* @__PURE__ */ r(V, { tooltip: b, children: b })
     }
   ) : b : /* @__PURE__ */ r("span", {});
-  return /* @__PURE__ */ r(Q, { id: t, children: /* @__PURE__ */ r(Pe, { className: i(ir, a), children: /* @__PURE__ */ r(Ae, { context: h, children: /* @__PURE__ */ f(
+  return /* @__PURE__ */ r(Q, { id: t, children: /* @__PURE__ */ r(Oe, { className: c(ur, s), children: /* @__PURE__ */ r(ze, { context: x, children: /* @__PURE__ */ f(
     "div",
     {
-      ref: x.setFloating,
-      ...p(),
+      ref: p.setFloating,
+      ...g(),
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": N,
-      className: i(
-        cr,
-        mr[m],
-        o && dr,
-        s
+      className: c(
+        mr,
+        xr[m],
+        l && fr,
+        a
       ),
       children: [
-        /* @__PURE__ */ f("div", { className: ur, children: [
+        /* @__PURE__ */ f("div", { className: pr, children: [
           w(n),
           /* @__PURE__ */ r(
-            nr,
+            ar,
             {
               ariaLabel: "Close dialog",
-              onClose: (b) => u?.(b)
+              onClose: (b) => i?.(b)
             }
           )
         ] }),
-        /* @__PURE__ */ r("div", { className: "flex-grow overflow-auto", children: c }),
-        d
+        /* @__PURE__ */ r("div", { className: "flex-grow overflow-auto", children: d }),
+        u
       ]
     }
   ) }) }) });
 };
 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 = {
+const gr = "flex justify-end gap-2 px-6 py-4", br = "text-secondary dial-small-150 px-6 py-4", yr = "Cancel", H = {
   [z.Info]: {
     confirmVariant: v.Primary,
     cancelVariant: v.Secondary
@@ -874,57 +939,57 @@ const pr = "flex justify-end gap-2 px-6 py-4", xr = "text-secondary dial-small-1
     confirmVariant: v.Danger,
     cancelVariant: v.Secondary
   }
-}, zr = ({
+}, Vr = ({
   title: e,
   description: n,
   descriptionCssClass: t,
-  open: s = !1,
-  confirmLabel: a,
-  cancelLabel: l = hr,
-  isLoading: o = !1,
-  disableConfirmButton: c = !1,
-  cssClass: d,
-  confirmClassName: u,
+  open: a = !1,
+  confirmLabel: s,
+  cancelLabel: o = yr,
+  isLoading: l = !1,
+  disableConfirmButton: d = !1,
+  cssClass: u,
+  confirmClassName: i,
   onClose: m,
-  onConfirm: x,
-  onCancel: h,
-  children: g,
+  onConfirm: p,
+  onCancel: x,
+  children: h,
   dividers: y = !1,
-  variant: p = z.Info,
+  variant: g = z.Info,
   size: N = R.Sm
 }) => {
-  const w = o ? null : /* @__PURE__ */ f("div", { className: pr, children: [
+  const w = l ? null : /* @__PURE__ */ f("div", { className: gr, children: [
     /* @__PURE__ */ r(
       P,
       {
         variant: v.Secondary,
-        title: l,
-        onClick: () => h ? h() : m?.()
+        title: o,
+        onClick: () => x ? x() : m?.()
       }
     ),
     /* @__PURE__ */ r(
       P,
       {
-        variant: H[p].confirmVariant,
-        cssClass: u,
-        title: a,
-        disable: c,
-        onClick: () => x()
+        variant: H[g].confirmVariant,
+        cssClass: i,
+        title: s,
+        disable: d,
+        onClick: () => p()
       }
     )
-  ] }), b = S(() => o ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r(Me, { size: 50 }) }) : g ?? (n ? /* @__PURE__ */ r(
+  ] }), b = S(() => l ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r(He, { size: 50 }) }) : h ?? (n ? /* @__PURE__ */ r(
     "div",
     {
-      className: i(xr, t),
+      className: c(br, t),
       children: n
     }
-  ) : null), [g, n, o, t]);
+  ) : null), [h, n, l, t]);
   return /* @__PURE__ */ r(
-    fr,
+    hr,
     {
-      open: s,
+      open: a,
       title: e,
-      cssClass: i(H[p].container, d),
+      cssClass: c(H[g].container, u),
       dividers: y,
       onClose: () => m?.(),
       footer: w,
@@ -932,54 +997,54 @@ const pr = "flex justify-end gap-2 px-6 py-4", xr = "text-secondary dial-small-1
       children: b()
     }
   );
-}, gr = ({ onClick: e }) => /* @__PURE__ */ r(
-  pe,
+}, Cr = ({ onClick: e }) => /* @__PURE__ */ r(
+  ge,
   {
-    ...A,
+    ...F,
     className: "text-primary",
     onClick: e
   }
-), br = ({ onClick: e }) => /* @__PURE__ */ r(xe, { ...A, className: "text-primary", onClick: e }), yr = ({ ...e }) => {
-  const [n, t] = _(!1), s = S((a) => {
-    t(a);
+), vr = ({ onClick: e }) => /* @__PURE__ */ r(be, { ...F, className: "text-primary", onClick: e }), Nr = ({ ...e }) => {
+  const [n, t] = T(!1), a = S((s) => {
+    t(s);
   }, []);
   return /* @__PURE__ */ r(
-    L,
+    O,
     {
       type: n ? "text" : "password",
       ...e,
-      iconAfter: n ? /* @__PURE__ */ r(gr, { onClick: () => s(!1) }) : /* @__PURE__ */ r(br, { onClick: () => s(!0) })
+      iconAfter: n ? /* @__PURE__ */ r(Cr, { onClick: () => a(!1) }) : /* @__PURE__ */ r(vr, { onClick: () => a(!0) })
     }
   );
-}, Br = ({
+}, Mr = ({
   fieldTitle: e,
   optional: n,
   elementCssClass: t,
-  elementId: s,
-  errorText: a,
-  ...l
+  elementId: a,
+  errorText: s,
+  ...o
 }) => /* @__PURE__ */ f("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ r(
-    O,
+    j,
     {
       fieldTitle: e,
       optional: n,
-      htmlFor: s
+      htmlFor: a
     }
   ),
   /* @__PURE__ */ r(
-    yr,
+    Nr,
     {
       cssClass: t,
-      elementId: s,
-      invalid: !!a,
-      ...l
+      elementId: a,
+      invalid: !!s,
+      ...o
     }
   ),
-  /* @__PURE__ */ r(W, { errorText: a })
+  /* @__PURE__ */ r(_, { errorText: s })
 ] });
 var B = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(B || {});
-const Cr = {
+const wr = {
   [B.Small]: {
     textClass: "text-xs px-1",
     containerClass: "px-[6px] py-1 h-[22px]",
@@ -992,51 +1057,51 @@ const Cr = {
     iconSize: 18,
     iconStroke: 1.5
   }
-}, Or = ({
+}, Wr = ({
   elementId: e,
   value: n,
   placeholder: t,
-  disabled: s,
-  readonly: a,
-  invalid: l,
-  cssClass: o,
-  containerCssClass: c,
-  onChange: d,
-  size: u = B.Base
+  disabled: a,
+  readonly: s,
+  invalid: o,
+  cssClass: l,
+  containerCssClass: d,
+  onChange: u,
+  size: i = B.Base
 }) => {
-  const [m, x] = _(n || "");
-  we(() => {
-    x(n || "");
+  const [m, p] = T(n || "");
+  ke(() => {
+    p(n || "");
   }, [n]);
-  const h = S(
-    (p) => {
-      x(p), d?.(p);
+  const x = S(
+    (g) => {
+      p(g), u?.(g);
     },
-    [d]
-  ), g = Cr[u], y = S(() => {
-    h("");
-  }, [h]);
+    [u]
+  ), h = wr[i], y = S(() => {
+    x("");
+  }, [x]);
   return /* @__PURE__ */ f(
     "div",
     {
-      className: i(
+      className: c(
         "dial-input flex flex-row items-center justify-between",
-        l && "dial-input-error",
-        s && "dial-input-disable",
-        a && "dial-input-readonly",
-        g.containerClass,
-        c
+        o && "dial-input-error",
+        a && "dial-input-disable",
+        s && "dial-input-readonly",
+        h.containerClass,
+        d
       ),
       children: [
         /* @__PURE__ */ r(
           D,
           {
-            className: i(s ? "text-secondary" : "text-primary"),
+            className: c(a ? "text-secondary" : "text-primary"),
             icon: /* @__PURE__ */ r(
-              he,
+              ye,
               {
-                size: g.iconSize,
-                stroke: g.iconStroke
+                size: h.iconSize,
+                stroke: h.iconStroke
               }
             )
           }
@@ -1049,25 +1114,25 @@ const Cr = {
             autoComplete: "off",
             placeholder: t,
             value: m ?? "",
-            disabled: s,
-            readOnly: a,
-            className: i(
+            disabled: a,
+            readOnly: s,
+            className: c(
               "border-0 bg-transparent w-full",
-              o,
-              g.textClass
+              l,
+              h.textClass
             ),
-            onChange: (p) => !a && h(p.currentTarget.value)
+            onChange: (g) => !s && x(g.currentTarget.value)
           }
         ),
-        m && !a && !s && /* @__PURE__ */ r(
+        m && !s && !a && /* @__PURE__ */ r(
           D,
           {
             className: "text-primary cursor-pointer",
             icon: /* @__PURE__ */ r(
-              M,
+              W,
               {
-                size: g.iconSize,
-                stroke: g.iconStroke,
+                size: h.iconSize,
+                stroke: h.iconStroke,
                 onClick: y,
                 "aria-label": "Clear search",
                 role: "button"
@@ -1083,31 +1148,33 @@ export {
   k as AlertVariant,
   v as ButtonVariant,
   z as ConfirmationPopupVariant,
-  kr as DialAlert,
+  Fr as DialAlert,
   P as DialButton,
-  Rr as DialCheckbox,
-  nr as DialCloseButton,
-  zr as DialConfirmationPopup,
-  W as DialErrorText,
-  O as DialFieldLabel,
+  Er as DialCheckbox,
+  ar as DialCloseButton,
+  Ar as DialCollapsibleSidebar,
+  Vr as DialConfirmationPopup,
+  _ as DialErrorText,
+  j as DialFieldLabel,
   D as DialIcon,
-  L as DialInput,
-  Me as DialLoader,
-  Er as DialNoDataContent,
-  Tr as DialNumberInputField,
-  yr as DialPasswordInput,
-  Br as DialPasswordInputField,
-  fr as DialPopup,
-  Qe as DialRadioButton,
-  Fr as DialRadioGroup,
-  Or as DialSearch,
-  Sr as DialSteps,
-  Lr as DialSwitch,
-  Ar as DialTextAreaField,
-  Pr as DialTextInputField,
-  tr as DialTextarea,
+  O as DialInput,
+  He as DialLoader,
+  Lr as DialNoDataContent,
+  Or as DialNumberInputField,
+  Nr as DialPasswordInput,
+  Mr as DialPasswordInputField,
+  hr as DialPopup,
+  Je as DialRadioButton,
+  Pr as DialRadioGroup,
+  Wr as DialSearch,
+  Tr as DialSteps,
+  jr as DialSwitch,
+  Br as DialTextAreaField,
+  zr as DialTextInputField,
+  or as DialTextarea,
   V as DialTooltip,
   R as PopupSize,
-  j as RadioGroupOrientation,
+  M as RadioGroupOrientation,
+  B as SearchSize,
   C as StepStatus
 };