@epam/ai-dial-ui-kit 0.3.0-rc.0 → 0.3.0-rc.1

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

@@ -1,17 +1,17 @@
-import { jsx as r, jsxs as p, Fragment as _ } from "react/jsx-runtime";
+import { jsx as r, jsxs as m, Fragment as Z } from "react/jsx-runtime";
 import i from "classnames";
-import { IconCircleCheck as de, IconAlertTriangle as ue, IconAlertCircle as pe, IconInfoCircle as me, IconX as $, IconMinus as fe, IconCheck as G, IconExclamationCircle as he, IconClipboardX as xe, IconChevronsLeft as ge, IconChevronsRight as Ce, IconEyeOff as ye, IconEye as be, IconSearch as ve } from "@tabler/icons-react";
-import * as v from "react";
-import { createContext as we, useState as T, useRef as Ne, useMemo as ke, useContext as De, forwardRef as X, isValidElement as Ie, cloneElement as Le, useCallback as I, useEffect as Se } from "react";
-import { useFloating as q, offset as Ee, flip as Re, shift as Fe, arrow as Te, autoUpdate as je, useHover as Me, useFocus as Pe, useDismiss as Q, useRole as Y, useInteractions as J, useMergeRefs as ee, FloatingPortal as re, FloatingArrow as Ve, FloatingOverlay as Ae, FloatingFocusManager as Oe } from "@floating-ui/react";
-import { createPortal as We } from "react-dom";
-const z = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "text-error dial-tiny mt-1", children: e }), H = ({
+import { IconCircleCheck as me, IconAlertTriangle as fe, IconAlertCircle as he, IconInfoCircle as xe, IconX as $, IconMinus as ge, IconCheck as Y, IconExclamationCircle as ye, IconClipboardX as Ce, IconChevronsLeft as be, IconChevronsRight as ve, IconEyeOff as we, IconEye as Ne, IconSearch as ke } from "@tabler/icons-react";
+import * as N from "react";
+import { createContext as De, useState as S, useRef as J, useMemo as Ie, useContext as Re, forwardRef as ee, isValidElement as Se, cloneElement as Ee, useCallback as E, useEffect as re } from "react";
+import { useFloating as te, offset as Le, flip as Te, shift as Fe, arrow as Ve, autoUpdate as Ae, useHover as je, useFocus as Me, useDismiss as ne, useRole as ae, useInteractions as se, useMergeRefs as oe, FloatingPortal as le, FloatingArrow as Pe, FloatingOverlay as Oe, FloatingFocusManager as We } from "@floating-ui/react";
+import { createPortal as ze } from "react-dom";
+const W = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "text-error dial-tiny mt-1", children: e }), z = ({
   fieldTitle: e,
   htmlFor: t,
   optional: n,
   optionalText: a,
   cssClass: s
-}) => e ? /* @__PURE__ */ p(
+}) => e ? /* @__PURE__ */ m(
   "label",
   {
     className: i(
@@ -25,87 +25,87 @@ const z = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "tex
       n && /* @__PURE__ */ r("span", { className: "ml-1", children: a ?? "(Optional)" })
     ]
   }
-) : null, N = ({ icon: e, className: t }) => e ? /* @__PURE__ */ r("span", { className: i("flex-shrink-0", t), children: e }) : null;
-var w = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e.Danger = "danger", e))(w || {});
+) : null, R = ({ icon: e, className: t }) => e ? /* @__PURE__ */ r("span", { className: i("flex-shrink-0", t), children: e }) : null;
+var I = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e.Danger = "danger", e))(I || {});
 const Be = {
-  [w.Primary]: "dial-primary-button",
-  [w.Secondary]: "dial-secondary-button",
-  [w.Tertiary]: "dial-tertiary-button",
-  [w.Danger]: "dial-danger-button"
-}, P = ({
+  [I.Primary]: "dial-primary-button",
+  [I.Secondary]: "dial-secondary-button",
+  [I.Tertiary]: "dial-tertiary-button",
+  [I.Danger]: "dial-danger-button"
+}, j = ({
   title: e,
   variant: t,
   cssClass: n,
   textCssClass: a,
   ref: s,
   onClick: o,
-  disable: l,
+  disable: c,
   iconAfter: u,
   iconBefore: d,
-  hideTitleOnMobile: c,
-  ariaLabel: m
+  hideTitleOnMobile: l,
+  ariaLabel: p
 }) => {
   const f = i(
     "dial-small-semi",
     u ? "mr-2" : "",
     d ? "ml-2" : "",
-    c ? "hidden sm:inline" : "inline",
+    l ? "hidden sm:inline" : "inline",
     a
   ), x = i(
     t && Be[t],
     n,
     "focus-visible:outline outline-offset-0"
   );
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ m(
     "button",
     {
       ref: s,
       type: "button",
       className: x,
       onClick: (h) => o?.(h),
-      disabled: l,
-      "aria-label": e || m,
+      disabled: c,
+      "aria-label": e || p,
       children: [
-        /* @__PURE__ */ r(N, { icon: d }),
+        /* @__PURE__ */ r(R, { icon: d }),
         e && /* @__PURE__ */ r("span", { className: f, children: e }),
-        /* @__PURE__ */ r(N, { icon: u })
+        /* @__PURE__ */ r(R, { icon: u })
       ]
     }
   );
 };
-var E = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(E || {});
-const ze = {
-  info: /* @__PURE__ */ r(me, { size: 24, stroke: 2 }),
-  error: /* @__PURE__ */ r(pe, { size: 24, stroke: 2 }),
-  warning: /* @__PURE__ */ r(ue, { size: 24, stroke: 2 }),
-  success: /* @__PURE__ */ r(de, { size: 24, stroke: 2 })
-}, He = {
-  [E.Info]: "bg-info border-info text-info",
-  [E.Success]: "bg-success border-success text-success",
-  [E.Warning]: "bg-warning border-warning text-warning",
-  [E.Error]: "bg-error border-error text-error"
-}, _e = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", jr = ({
-  variant: e = E.Info,
+var F = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(F || {});
+const He = {
+  info: /* @__PURE__ */ r(xe, { size: 24, stroke: 2 }),
+  error: /* @__PURE__ */ r(he, { size: 24, stroke: 2 }),
+  warning: /* @__PURE__ */ r(fe, { size: 24, stroke: 2 }),
+  success: /* @__PURE__ */ r(me, { size: 24, stroke: 2 })
+}, _e = {
+  [F.Info]: "bg-info border-info text-info",
+  [F.Success]: "bg-success border-success text-success",
+  [F.Warning]: "bg-warning border-warning text-warning",
+  [F.Error]: "bg-error border-error text-error"
+}, Ke = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", Mr = ({
+  variant: e = F.Info,
   message: t,
   cssClass: n,
   closable: a = !1,
   onClose: s
-}) => /* @__PURE__ */ p(
+}) => /* @__PURE__ */ m(
   "div",
   {
     role: "alert",
     className: i(
-      _e,
-      He[e],
+      Ke,
+      _e[e],
       n
     ),
     children: [
-      /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ r(N, { icon: ze[e] }),
+      /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ r(R, { icon: He[e] }),
         /* @__PURE__ */ r("div", { className: "text-primary", children: t })
       ] }),
       a && /* @__PURE__ */ r(
-        P,
+        j,
         {
           cssClass: "ml-2 text-secondary hover:text-primary",
           ariaLabel: "Close alert",
@@ -115,7 +115,7 @@ const ze = {
       )
     ]
   }
-), Ze = "flex items-center justify-center text-secondary", $e = "shrink-0 grow-0 basis-auto animate-spin-steps", Ke = (e) => /* @__PURE__ */ v.createElement("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ v.createElement("path", { d: "M24 39V46.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.4, d: "M9 24H1.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.5, d: "M8.0918 8.0918L13.3994 13.3994", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.6, d: "M24 1.5V9", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.7, d: "M39.9121 8.08594L37.2607 10.7373L34.6094 13.3887", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.8, d: "M46.5 24H39", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.9, d: "M34.6055 34.6055L39.9082 39.9082", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.3, d: "M13.3936 34.6055L8.08594 39.9131", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" })), Ue = ({
+), $e = "flex items-center justify-center text-secondary", Ge = "shrink-0 grow-0 basis-auto animate-spin-steps", Ze = (e) => /* @__PURE__ */ N.createElement("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ N.createElement("path", { d: "M24 39V46.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { opacity: 0.4, d: "M9 24H1.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { opacity: 0.5, d: "M8.0918 8.0918L13.3994 13.3994", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { opacity: 0.6, d: "M24 1.5V9", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { opacity: 0.7, d: "M39.9121 8.08594L37.2607 10.7373L34.6094 13.3887", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { opacity: 0.8, d: "M46.5 24H39", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { opacity: 0.9, d: "M34.6055 34.6055L39.9082 39.9082", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { opacity: 0.3, d: "M13.3936 34.6055L8.08594 39.9131", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" })), Ue = ({
   size: e = 18,
   cssClass: t,
   iconClass: n,
@@ -127,81 +127,81 @@ const ze = {
     role: "status",
     "aria-label": s,
     className: i({
-      [Ze]: !0,
+      [$e]: !0,
       "w-full h-full": a,
       [t || ""]: !!t
     }),
     children: /* @__PURE__ */ r(
-      N,
+      R,
       {
         icon: /* @__PURE__ */ r(
-          Ke,
+          Ze,
           {
             width: e,
             height: e,
-            className: i($e, n),
+            className: i(Ge, n),
             role: "img"
           }
         )
       }
     )
   }
-), Ge = 7, Xe = 2, te = we(null), ne = () => {
-  const e = De(te);
+), Xe = 7, qe = 2, ie = De(null), ce = () => {
+  const e = Re(ie);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
   return e;
-}, qe = ({
+}, Qe = ({
   initialOpen: e = !1,
   placement: t = "bottom",
   isTriggerClickable: n = !1,
   open: a,
   onOpenChange: s
 } = {}) => {
-  const [o, l] = T(e), u = Ne(null), d = a ?? o, c = s ?? l, m = q({
+  const [o, c] = S(e), u = J(null), d = a ?? o, l = s ?? c, p = te({
     placement: t,
     open: d,
-    onOpenChange: c,
-    whileElementsMounted: je,
+    onOpenChange: l,
+    whileElementsMounted: Ae,
     middleware: [
-      Ee(Ge + Xe),
-      Re({
+      Le(Xe + qe),
+      Te({
         crossAxis: t.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5
       }),
       Fe({ padding: 5 }),
-      Te({
+      Ve({
         element: u
       })
     ]
-  }), f = Me(m.context, {
+  }), f = je(p.context, {
     move: !1,
     enabled: a == null,
     mouseOnly: n,
     delay: { open: 500, close: 0 }
-  }), x = Pe(m.context, {
+  }), x = Me(p.context, {
     enabled: a == null
-  }), h = Q(m.context), C = Y(m.context, { role: "tooltip" }), g = J([f, x, h, C]);
-  return ke(
+  }), h = ne(p.context), C = ae(p.context, { role: "tooltip" }), g = se([f, x, h, C]);
+  return Ie(
     () => ({
       open: d,
-      setOpen: c,
+      setOpen: l,
       arrowRef: u,
       ...g,
-      ...m
+      ...p
     }),
-    [d, c, g, m]
+    [d, l, g, p]
   );
-}, Qe = ({
+}, Ye = ({
   children: e,
   ...t
 }) => {
-  const n = qe(t);
-  return /* @__PURE__ */ r(te.Provider, { value: n, children: e });
-}, Ye = X(function({ style: t, ...n }, a) {
-  const s = ne(), o = ee([s.refs.setFloating, a]);
-  return s.open ? /* @__PURE__ */ r(re, { id: "tooltip-portal", children: /* @__PURE__ */ p(
+  const n = Qe(t);
+  return /* @__PURE__ */ r(ie.Provider, { value: n, children: e });
+}, Je = ee(function({ style: t, ...n }, a) {
+  const s = ce(), o = oe([s.refs.setFloating, a]);
+  return s.open ? /* @__PURE__ */ r(le, { id: "tooltip-portal", children: /* @__PURE__ */ m(
     "div",
     {
       ref: o,
@@ -217,7 +217,7 @@ const ze = {
       children: [
         n.children,
         /* @__PURE__ */ r(
-          Ve,
+          Pe,
           {
             ref: s.arrowRef,
             context: s.context,
@@ -229,9 +229,9 @@ const ze = {
       ]
     }
   ) }) : null;
-}), Je = X(function({ children: t, asChild: n = !1, ...a }, s) {
-  const o = ne(), u = t && typeof t == "object" && "ref" in t && t.ref !== void 0 ? t.ref : void 0, d = ee([o.refs.setReference, s, u]);
-  return n && Ie(t) ? Le(
+}), er = ee(function({ children: t, asChild: n = !1, ...a }, s) {
+  const o = ce(), u = t && typeof t == "object" && "ref" in t && t.ref !== void 0 ? t.ref : void 0, d = oe([o.refs.setReference, s, u]);
+  return n && Se(t) ? Ee(
     t,
     o.getReferenceProps({
       ref: d,
@@ -247,17 +247,17 @@ const ze = {
       children: t
     }
   );
-}), S = ({
+}), T = ({
   hideTooltip: e,
   tooltip: t,
   children: n,
   triggerClassName: a,
   contentClassName: s,
   ...o
-}) => /* @__PURE__ */ p(Qe, { ...o, children: [
-  /* @__PURE__ */ r(Je, { className: i(a, "truncate"), children: n }),
+}) => /* @__PURE__ */ m(Ye, { ...o, children: [
+  /* @__PURE__ */ r(er, { className: i(a, "truncate"), children: n }),
   /* @__PURE__ */ r(
-    Ye,
+    Je,
     {
       className: i(
         "text-primary",
@@ -268,34 +268,34 @@ const ze = {
       children: t
     }
   )
-] }), R = 18, j = {
-  size: R,
+] }), V = 18, M = {
+  size: V,
   stroke: 2
-}, Mr = ({
+}, Pr = ({
   label: e,
   id: t,
   checked: n,
   indeterminate: a,
   disabled: s,
   ariaLabel: o,
-  onChange: l
+  onChange: c
 }) => {
-  const u = I(
-    (m) => {
-      m.stopPropagation(), l?.(m.target.checked, t);
+  const u = E(
+    (p) => {
+      p.stopPropagation(), c?.(p.target.checked, t);
     },
-    [l, t]
+    [c, t]
   ), d = i(
     "flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",
     `${n ? "" : 'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,
     s ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : ""
-  ), c = i(
+  ), l = i(
     "mr-2 border rounded",
     s ? "bg-layer-4 border-icon-secondary" : ""
   );
-  return /* @__PURE__ */ p("label", { className: d, htmlFor: t, children: [
-    n && (a ? /* @__PURE__ */ r(fe, { className: c, ...j }) : /* @__PURE__ */ r(G, { className: c, ...j })),
-    e && /* @__PURE__ */ r(S, { tooltip: e, triggerClassName: "flex-1 min-w-0", children: /* @__PURE__ */ r("p", { className: "text-primary w-full truncate", children: e }) }),
+  return /* @__PURE__ */ m("label", { className: d, htmlFor: t, children: [
+    n && (a ? /* @__PURE__ */ r(ge, { className: l, ...M }) : /* @__PURE__ */ r(Y, { className: l, ...M })),
+    e && /* @__PURE__ */ r(T, { tooltip: e, triggerClassName: "flex-1 min-w-0", children: /* @__PURE__ */ r("p", { className: "text-primary w-full truncate", children: e }) }),
     /* @__PURE__ */ r(
       "input",
       {
@@ -311,78 +311,78 @@ const ze = {
     )
   ] });
 };
-var b = /* @__PURE__ */ ((e) => (e.VALID = "valid", e.ERROR = "error", e))(b || {});
-const er = (e, t) => {
+var w = /* @__PURE__ */ ((e) => (e.VALID = "valid", e.ERROR = "error", e))(w || {});
+const rr = (e, t) => {
   if (t === e.id)
     switch (e.status) {
-      case b.VALID:
+      case w.VALID:
         return "border-accent-secondary text-primary";
-      case b.ERROR:
+      case w.ERROR:
         return "border-red-900 text-primary";
       default:
         return "border-accent-primary text-primary";
     }
   switch (e.status) {
-    case b.VALID:
+    case w.VALID:
       return "border-primary text-white";
-    case b.ERROR:
+    case w.ERROR:
       return "border-red-900 text-error";
     default:
       return "border-primary text-secondary";
   }
-}, rr = (e, t) => {
+}, tr = (e, t) => {
   if (t === e.id)
     switch (e.status) {
-      case b.VALID:
+      case w.VALID:
         return "bg-accent-secondary";
-      case b.ERROR:
+      case w.ERROR:
         return "bg-red-400";
       default:
         return "bg-accent-primary";
     }
   switch (e.status) {
-    case b.VALID:
+    case w.VALID:
       return "bg-accent-secondary";
-    case b.ERROR:
+    case w.ERROR:
       return "bg-red-400";
     default:
       return "bg-layer-4";
   }
-}, tr = ({
+}, nr = ({
   step: e,
   index: t,
   currentStep: n,
   onChangeStep: a
 }) => {
-  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 = () => n === e.id && e.status === b.ERROR ? /* @__PURE__ */ r(he, { stroke: 2, size: 16 }) : n !== e.id && e.status === b.VALID ? /* @__PURE__ */ r(G, { stroke: 2, size: 16 }) : t + 1;
-  return /* @__PURE__ */ p(
+  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", c = () => n === e.id && e.status === w.ERROR ? /* @__PURE__ */ r(ye, { stroke: 2, size: 16 }) : n !== e.id && e.status === w.VALID ? /* @__PURE__ */ r(Y, { stroke: 2, size: 16 }) : t + 1;
+  return /* @__PURE__ */ m(
     "button",
     {
-      className: i(s, er(e, n)),
+      className: i(s, rr(e, n)),
       onClick: () => a(e.id),
       children: [
         /* @__PURE__ */ r(
           "span",
           {
-            className: i(o, rr(e, n)),
-            children: l()
+            className: i(o, tr(e, n)),
+            children: c()
           }
         ),
         /* @__PURE__ */ r("span", { children: e.name })
       ]
     }
   );
-}, Pr = ({
+}, Or = ({
   steps: e,
   currentStep: t,
   onChangeStep: n
 }) => {
   const a = (s) => {
-    const o = e.findIndex((u) => u.id === t), l = e.findIndex((u) => u.id === s);
-    (s !== t && e[o].status === b.VALID || l < o) && n(s);
+    const o = e.findIndex((u) => u.id === t), c = e.findIndex((u) => u.id === s);
+    (s !== t && e[o].status === w.VALID || c < o) && n(s);
   };
   return /* @__PURE__ */ r("div", { id: "steps", className: "flex gap-x-3", children: e.map((s, o) => /* @__PURE__ */ r(
-    tr,
+    nr,
     {
       currentStep: t,
       onChangeStep: a,
@@ -391,18 +391,18 @@ const er = (e, t) => {
     },
     s.id
   )) });
-}, nr = ({
+}, ar = ({
   name: e,
   value: t,
   title: n,
   description: a,
   checked: s = !1,
   inputId: o,
-  cssClass: l,
+  cssClass: c,
   labelCssClass: u,
   disabled: d,
-  onChange: c,
-  descriptionCssClass: m
+  onChange: l,
+  descriptionCssClass: p
 }) => {
   const f = `${o}-desc`, x = i(
     "dial-small cursor-pointer",
@@ -411,13 +411,13 @@ const er = (e, t) => {
   ), h = i(
     "cursor-pointer dial-input-radio",
     n && "mr-2",
-    l
+    c
   ), C = i("flex flex-col", !!a && "mb-2"), g = i(
     "dial-tiny mt-2 ml-[26px] text-secondary",
-    m
+    p
   );
-  return /* @__PURE__ */ p("div", { className: C, children: [
-    /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
+  return /* @__PURE__ */ m("div", { className: C, children: [
+    /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ r(
         "input",
         {
@@ -430,7 +430,7 @@ const er = (e, t) => {
           "aria-describedby": s && a ? f : void 0,
           className: h,
           onChange: (D) => {
-            d || D.target.checked && c?.(t);
+            d || D.target.checked && l?.(t);
           }
         }
       ),
@@ -439,22 +439,22 @@ const er = (e, t) => {
     s && a && /* @__PURE__ */ r("div", { id: f, className: g, children: a })
   ] });
 };
-var Z = /* @__PURE__ */ ((e) => (e.Row = "Row", e.Column = "Column", e))(Z || {});
-const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
-  [Z.Column]: "flex-col gap-y-3",
-  [Z.Row]: "flex-row gap-x-6"
-}, Vr = ({
+var U = /* @__PURE__ */ ((e) => (e.Row = "Row", e.Column = "Column", e))(U || {});
+const sr = "flex flex-col gap-2", or = "flex", lr = "pb-1 mt-2", ir = {
+  [U.Column]: "flex-col gap-y-3",
+  [U.Row]: "flex-row gap-x-6"
+}, Wr = ({
   fieldTitle: e,
   radioCssClass: t,
   labelCssClass: n,
   disabled: a,
   elementId: s,
   radioButtons: o,
-  activeRadioButton: l,
+  activeRadioButton: c,
   orientation: u,
   onChange: d
-}) => /* @__PURE__ */ p("div", { className: ar, children: [
-  e && /* @__PURE__ */ r(H, { fieldTitle: e, htmlFor: s }),
+}) => /* @__PURE__ */ m("div", { className: sr, children: [
+  e && /* @__PURE__ */ r(z, { fieldTitle: e, htmlFor: s }),
   /* @__PURE__ */ r(
     "div",
     {
@@ -462,56 +462,56 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
       "aria-label": e,
       "aria-disabled": a || void 0,
       className: i(
-        sr,
-        lr[u]
+        or,
+        ir[u]
       ),
-      children: o.map((c) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
+      children: o.map((l) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ r(
-          nr,
+          ar,
           {
             name: s,
-            value: c.id,
-            inputId: c.id,
+            value: l.id,
+            inputId: l.id,
             disabled: a,
             cssClass: t,
             labelCssClass: n,
-            title: c.name,
-            checked: c.id === l,
-            onChange: () => d(c.id)
+            title: l.name,
+            checked: l.id === c,
+            onChange: () => d(l.id)
           }
         ),
-        c.id === l && c.content ? /* @__PURE__ */ r("div", { className: or, children: c.content }) : null
-      ] }, c.id))
+        l.id === c && l.content ? /* @__PURE__ */ r("div", { className: lr, children: l.content }) : null
+      ] }, l.id))
     }
   )
-] }), Ar = ({
+] }), zr = ({
   icon: e,
   title: t,
   description: n
-}) => /* @__PURE__ */ p("div", { className: "h-full w-full flex flex-col items-center justify-center text-secondary", children: [
-  e || /* @__PURE__ */ r(xe, { width: 60, height: 60 }),
+}) => /* @__PURE__ */ m("div", { className: "h-full w-full flex flex-col items-center justify-center text-secondary", children: [
+  e || /* @__PURE__ */ r(Ce, { width: 60, height: 60 }),
   /* @__PURE__ */ r("span", { className: "small mt-2 text-primary", children: t }),
   n && /* @__PURE__ */ r("span", { className: "mt-1 text-primary", children: n })
-] }), ir = 60, Or = ({
+] }), cr = 60, Br = ({
   containerCssClass: e,
   children: t,
   width: n,
   title: a,
-  iconSize: s = R,
+  iconSize: s = V,
   titleCssClass: o,
-  additionalButtons: l
+  additionalButtons: c
 }) => {
-  const [u, d] = T(n), [c, m] = T(!0), f = i([
+  const [u, d] = S(n), [l, p] = S(!0), f = i([
     "transform rotate-180 [writing-mode:tb-rl]",
-    c && "hidden",
+    l && "hidden",
     o
   ]), x = i([
     "flex flex-row gap-2 cursor-pointer text-secondary",
-    c ? "justify-end" : "justify-center"
+    l ? "justify-end" : "justify-center"
   ]), h = () => {
-    d(c ? ir : n), m(!c);
+    d(l ? cr : n), p(!l);
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ m(
     "div",
     {
       className: i([
@@ -525,30 +525,30 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
           {
             className: i([
               "flex-1 min-h-0 overflow-auto",
-              !c && "hidden"
+              !l && "hidden"
             ]),
             children: t
           }
         ),
         /* @__PURE__ */ r("div", { className: f, children: a }),
-        /* @__PURE__ */ p("div", { className: x, children: [
-          c && l,
+        /* @__PURE__ */ m("div", { className: x, children: [
+          l && c,
           /* @__PURE__ */ r(
-            P,
+            j,
             {
               cssClass: "hover:text-icon-accent-primary",
               onClick: h,
-              iconBefore: c ? /* @__PURE__ */ r(
-                ge,
+              iconBefore: l ? /* @__PURE__ */ r(
+                be,
                 {
                   size: s,
-                  stroke: j.stroke
+                  stroke: M.stroke
                 }
               ) : /* @__PURE__ */ r(
-                Ce,
+                ve,
                 {
                   size: s,
-                  stroke: j.stroke
+                  stroke: M.stroke
                 }
               )
             }
@@ -557,12 +557,12 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
       ]
     }
   );
-}, Wr = ({
+}, Hr = ({
   label: e,
   text: t,
   children: n,
   postfix: a
-}) => /* @__PURE__ */ p(
+}) => /* @__PURE__ */ m(
   "div",
   {
     className: i(
@@ -571,35 +571,55 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
     ),
     children: [
       /* @__PURE__ */ r("label", { className: "dial-tiny mb-2", children: e }),
-      n || /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
-        /* @__PURE__ */ r(S, { triggerClassName: "text-primary", tooltip: t, children: t }),
+      n || /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
+        /* @__PURE__ */ r(T, { triggerClassName: "text-primary", tooltip: t, children: t }),
         a || null
       ] })
     ]
   }
-), cr = ({
+);
+var X = /* @__PURE__ */ ((e) => (e.Default = "default", e))(X || {});
+const dr = {
+  [X.Default]: "border-icon-secondary bg-layer-3"
+  // TODO: Add other variants here once they are finalized with the UI/UX team
+}, ur = ({
+  tag: e,
+  cssClass: t,
+  remove: n,
+  variant: a = X.Default
+}) => {
+  const s = dr[a], o = i(
+    "flex items-center gap-1 tiny border rounded p-1 h-[22px] text-primary",
+    t,
+    s
+  );
+  return /* @__PURE__ */ m("div", { className: o, children: [
+    /* @__PURE__ */ r("span", { children: e }),
+    n && /* @__PURE__ */ r(j, { iconAfter: /* @__PURE__ */ r($, { size: 16 }), onClick: n })
+  ] }, e);
+}, pr = ({
   ariaLabel: e,
   cssClass: t,
   size: n = 24,
   onClose: a
 }) => /* @__PURE__ */ r(
-  P,
+  j,
   {
     ariaLabel: e,
     cssClass: i("text-secondary hover:text-accent-primary", t),
     onClick: a,
     iconBefore: /* @__PURE__ */ r($, { size: n })
   }
-), dr = ({
+), mr = ({
   value: e,
   textareaId: t,
   placeholder: n,
   cssClass: a = "",
   disabled: s,
   invalid: o,
-  readonly: l,
+  readonly: c,
   onChange: u
-}) => /* @__PURE__ */ r(S, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
+}) => /* @__PURE__ */ r(T, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
   "textarea",
   {
     id: t,
@@ -610,12 +630,12 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
       "dial-textarea dial-input px-3 py-2",
       o ? "dial-input-error" : "",
       s && "dial-input-disable",
-      l && "dial-input-readonly",
+      c && "dial-input-readonly",
       a
     ),
-    onChange: (d) => !l && u?.(d.currentTarget.value)
+    onChange: (d) => !c && u?.(d.currentTarget.value)
   }
-) }), ur = [
+) }), fr = [
   "ArrowLeft",
   "ArrowRight",
   "ArrowUp",
@@ -627,14 +647,14 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
   "Escape",
   "Home",
   "End"
-], pr = (e, t, n, a) => {
-  if ((t === "number" || n !== void 0 || a !== void 0) && !ur.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (n === void 0 || n < 0)) && !(e.key === "." && t === "number" && !e.currentTarget.value.includes("."))) {
+], hr = (e, t, n, a) => {
+  if ((t === "number" || n !== void 0 || a !== void 0) && !fr.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 (n !== void 0 || a !== void 0) {
-      const o = e.currentTarget.value, l = e.currentTarget.selectionStart || 0, u = o.slice(0, l) + e.key + o.slice(l), d = parseFloat(u);
+      const o = e.currentTarget.value, c = e.currentTarget.selectionStart || 0, u = o.slice(0, c) + e.key + o.slice(c), d = parseFloat(u);
       if (!isNaN(d)) {
         if (n !== void 0 && d < n) {
           e.preventDefault();
@@ -647,18 +667,18 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
       }
     }
   }
-}, O = ({
+}, H = ({
   iconBefore: e,
   iconAfter: t,
   hideBorder: n,
   value: a,
   elementId: s,
   placeholder: o = "",
-  cssClass: l = "",
+  cssClass: c = "",
   containerCssClass: u,
   tooltipTriggerClassName: d,
-  type: c = "text",
-  disabled: m,
+  type: l = "text",
+  disabled: p,
   readonly: f,
   invalid: x,
   onChange: h,
@@ -666,168 +686,168 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
   max: g,
   prefix: k,
   suffix: D,
-  textBeforeInput: y,
-  textAfterInput: V
+  textBeforeInput: b,
+  textAfterInput: y
 }) => {
-  const oe = (L) => L.target.blur(), le = c === "number" || C !== void 0 || g !== void 0, ie = (L) => {
-    pr(L, c, C, g);
-  }, ce = (L) => {
-    const M = L.currentTarget.value;
-    if (le && M !== "") {
-      const A = parseFloat(M);
-      if (isNaN(A) && M !== "-" && M !== "." || !isNaN(A) && (C !== void 0 && A < C || g !== void 0 && A > g))
+  const v = (L) => L.target.blur(), P = l === "number" || C !== void 0 || g !== void 0, G = (L) => {
+    hr(L, l, C, g);
+  }, pe = (L) => {
+    const O = L.currentTarget.value;
+    if (P && O !== "") {
+      const B = parseFloat(O);
+      if (isNaN(B) && O !== "-" && O !== "." || !isNaN(B) && (C !== void 0 && B < C || g !== void 0 && B > g))
         return;
     }
-    h?.(M);
+    h?.(O);
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ m(
     "div",
     {
       className: i(
         "dial-input-field flex flex-row items-center justify-between py-2",
         n ? "dial-input-no-border" : "dial-input",
         x && "dial-input-error",
-        m && "dial-input-disable",
+        p && "dial-input-disable",
         f && "dial-input-readonly",
-        !y && "pl-3",
-        !V && "pr-3",
+        !b && "pl-3",
+        !y && "pr-3",
         u
       ),
       children: [
-        y && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-          O,
+        b && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+          H,
           {
             hideBorder: !0,
             containerCssClass: "rounded-r-none border-r-0",
             cssClass: "overflow-hidden overflow-ellipsis dial-small",
-            value: y,
+            value: b,
             disabled: !0,
-            elementId: y + "textBefore"
+            elementId: b + "textBefore"
           }
         ) }),
-        k && /* @__PURE__ */ p("p", { className: "text-secondary dial-small", children: [
+        k && /* @__PURE__ */ m("p", { className: "text-secondary dial-small", children: [
           " ",
           k
         ] }),
-        /* @__PURE__ */ r(N, { icon: e }),
+        /* @__PURE__ */ r(R, { icon: e }),
         /* @__PURE__ */ r(
-          S,
+          T,
           {
             tooltip: a,
             triggerClassName: i(d, "flex-1"),
             children: /* @__PURE__ */ r(
               "input",
               {
-                type: c,
+                type: l,
                 autoComplete: "off",
                 id: s,
                 placeholder: o,
                 value: a ?? "",
-                disabled: m,
-                className: i("border-0 bg-transparent", l),
-                onChange: (L) => !f && ce?.(L),
-                onKeyDown: ie,
-                onWheel: oe,
+                disabled: p,
+                className: i("border-0 bg-transparent", c),
+                onChange: (L) => !f && pe?.(L),
+                onKeyDown: G,
+                onWheel: v,
                 min: C,
                 max: g
               }
             )
           }
         ),
-        /* @__PURE__ */ r(N, { icon: t }),
-        D && /* @__PURE__ */ p("p", { className: "text-secondary dial-small", children: [
+        /* @__PURE__ */ r(R, { icon: t }),
+        D && /* @__PURE__ */ m("p", { className: "text-secondary dial-small", children: [
           " ",
           D
         ] }),
-        V && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-          O,
+        y && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+          H,
           {
             hideBorder: !0,
             containerCssClass: "rounded-l-none border-l-0",
-            value: V,
+            value: y,
             disabled: !0,
-            elementId: V + "textAfter"
+            elementId: y + "textAfter"
           }
         ) })
       ]
     }
   );
-}, mr = /^0+\.(\d+)?$/, fr = /^0+/, ae = ({
+}, xr = /^0+\.(\d+)?$/, gr = /^0+/, de = ({
   fieldTitle: e,
   errorText: t,
   optional: n,
   elementCssClass: a,
   elementContainerCssClass: s,
   elementId: o,
-  containerCssClass: l,
+  containerCssClass: c,
   readonly: u,
   defaultEmptyText: d,
-  min: c,
-  max: m,
+  min: l,
+  max: p,
   ...f
-}) => /* @__PURE__ */ p("div", { className: i("flex flex-col", l), children: [
+}) => /* @__PURE__ */ m("div", { className: i("flex flex-col", c), children: [
   /* @__PURE__ */ r(
-    H,
+    z,
     {
       fieldTitle: e,
       optional: n,
       htmlFor: o
     }
   ),
-  u ? /* @__PURE__ */ r("span", { children: f.value || (d ?? "None") }) : /* @__PURE__ */ p(_, { children: [
+  u ? /* @__PURE__ */ r("span", { children: f.value || (d ?? "None") }) : /* @__PURE__ */ m(Z, { children: [
     /* @__PURE__ */ r(
-      O,
+      H,
       {
         elementId: o,
         cssClass: a,
         containerCssClass: s,
         invalid: t != null,
-        min: c,
-        max: m,
+        min: l,
+        max: p,
         ...f
       }
     ),
-    /* @__PURE__ */ r(z, { errorText: t })
+    /* @__PURE__ */ r(W, { errorText: t })
   ] })
-] }), Br = ({
+] }), _r = ({
   onChange: e,
   value: t,
   min: n,
   max: a,
   ...s
 }) => {
-  const o = (l) => String(l)?.match(mr) ? String(l)?.replace(fr, "0") : Number(l);
+  const o = (c) => String(c)?.match(xr) ? String(c)?.replace(gr, "0") : Number(c);
   return /* @__PURE__ */ r(
-    ae,
+    de,
     {
       type: "number",
-      onChange: (l) => e?.(o(l)),
+      onChange: (c) => e?.(o(c)),
       value: t,
       min: n,
       max: a,
       ...s
     }
   );
-}, zr = ({
+}, Kr = ({
   onChange: e,
   ...t
 }) => /* @__PURE__ */ r(
-  ae,
+  de,
   {
     type: "text",
     onChange: (n) => e?.(n),
     ...t
   }
-), Hr = ({
+), $r = ({
   fieldTitle: e,
   optional: t,
   elementId: n,
   elementCssClass: a,
   errorText: s,
   ...o
-}) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
+}) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ r(
-    H,
+    z,
     {
       fieldTitle: e,
       optional: t,
@@ -835,15 +855,15 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
     }
   ),
   /* @__PURE__ */ r(
-    dr,
+    mr,
     {
       textareaId: n,
       cssClass: a,
       ...o
     }
   ),
-  /* @__PURE__ */ r(z, { errorText: s })
-] }), _r = ({
+  /* @__PURE__ */ r(W, { errorText: s })
+] }), Gr = ({
   title: e,
   switchId: t,
   isOn: n = !1,
@@ -855,18 +875,18 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
     n ? "flex-row-reverse" : "flex-row",
     a ? "pointer-events-none" : "",
     a ? n ? "bg-controls-disable" : "bg-layer-4" : n ? "bg-accent-primary" : "bg-layer-4"
-  ), l = I(
+  ), c = E(
     (u) => {
       u.stopPropagation(), s?.(!n);
     },
     [s, n]
   );
-  return /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
+  return /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
     /* @__PURE__ */ r(
       "input",
       {
         type: "checkbox",
-        onChange: l,
+        onChange: c,
         id: t,
         disabled: a,
         className: "invisible w-0 h-0",
@@ -885,32 +905,32 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
     e && /* @__PURE__ */ r("span", { className: "pl-2 dial-small text-primary", children: e })
   ] });
 };
-var F = /* @__PURE__ */ ((e) => (e.Sm = "sm", e.Md = "md", e.Lg = "lg", e))(F || {});
-const hr = "z-[52] flex items-center justify-center bg-blackout md:p-4", xr = "divide-tertiary divide-y", gr = "flex flex-row justify-between py-4 px-6 items-center", Cr = {
-  [F.Sm]: "dial-sm-popup",
-  [F.Md]: "dial-md-popup",
-  [F.Lg]: "dial-lg-popup"
-}, yr = ({
+var A = /* @__PURE__ */ ((e) => (e.Sm = "sm", e.Md = "md", e.Lg = "lg", e))(A || {});
+const yr = "z-[52] flex items-center justify-center bg-blackout md:p-4", Cr = "divide-tertiary divide-y", br = "flex flex-row justify-between py-4 px-6 items-center", vr = {
+  [A.Sm]: "dial-sm-popup",
+  [A.Md]: "dial-md-popup",
+  [A.Lg]: "dial-lg-popup"
+}, wr = ({
   open: e = !1,
   title: t,
   portalId: n,
   cssClass: a,
   overlayClass: s,
   headingClass: o,
-  dividers: l = !0,
+  dividers: c = !0,
   children: u,
   footer: d,
-  onClose: c,
-  size: m = F.Md
+  onClose: l,
+  size: p = A.Md
 }) => {
-  const { refs: f, context: x } = q({
+  const { refs: f, context: x } = te({
     open: e,
-    onOpenChange: (y) => {
-      y || c?.(null);
+    onOpenChange: (b) => {
+      b || l?.(null);
     }
-  }), h = Y(x, { role: "dialog" }), C = Q(x, { outsidePress: !0 }), { getFloatingProps: g } = J([h, C]);
+  }), h = ae(x, { role: "dialog" }), C = ne(x, { outsidePress: !0 }), { getFloatingProps: g } = se([h, C]);
   if (!e) return null;
-  const k = typeof t == "string" ? "dial-popup-heading" : void 0, D = (y) => y ? typeof y == "string" ? /* @__PURE__ */ r(
+  const k = typeof t == "string" ? "dial-popup-heading" : void 0, D = (b) => b ? typeof b == "string" ? /* @__PURE__ */ r(
     "h3",
     {
       id: k,
@@ -918,10 +938,10 @@ const hr = "z-[52] flex items-center justify-center bg-blackout md:p-4", xr = "d
         "flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",
         o
       ),
-      children: /* @__PURE__ */ r(S, { tooltip: y, children: y })
+      children: /* @__PURE__ */ r(T, { tooltip: b, children: b })
     }
-  ) : y : /* @__PURE__ */ r("span", {});
-  return /* @__PURE__ */ r(re, { id: n, children: /* @__PURE__ */ r(Ae, { className: i(hr, s), children: /* @__PURE__ */ r(Oe, { context: x, children: /* @__PURE__ */ p(
+  ) : b : /* @__PURE__ */ r("span", {});
+  return /* @__PURE__ */ r(le, { id: n, children: /* @__PURE__ */ r(Oe, { className: i(yr, s), children: /* @__PURE__ */ r(We, { context: x, children: /* @__PURE__ */ m(
     "div",
     {
       ref: f.setFloating,
@@ -931,18 +951,18 @@ const hr = "z-[52] flex items-center justify-center bg-blackout md:p-4", xr = "d
       "aria-labelledby": k,
       className: i(
         "dial-popup",
-        Cr[m],
-        l && xr,
+        vr[p],
+        c && Cr,
         a
       ),
       children: [
-        /* @__PURE__ */ p("div", { className: gr, children: [
+        /* @__PURE__ */ m("div", { className: br, children: [
           D(t),
           /* @__PURE__ */ r(
-            cr,
+            pr,
             {
               ariaLabel: "Close dialog",
-              onClose: (y) => c?.(y)
+              onClose: (b) => l?.(b)
             }
           )
         ] }),
@@ -952,16 +972,16 @@ const hr = "z-[52] flex items-center justify-center bg-blackout md:p-4", xr = "d
     }
   ) }) }) });
 };
-var W = /* @__PURE__ */ ((e) => (e.Info = "info", e.Danger = "danger", e))(W || {});
-const br = "flex justify-end gap-2 px-6 py-4", vr = "text-secondary dial-small-150 px-6 py-4", wr = "Cancel", K = {
-  [W.Info]: {
-    confirmVariant: w.Primary,
-    cancelVariant: w.Secondary
+var _ = /* @__PURE__ */ ((e) => (e.Info = "info", e.Danger = "danger", e))(_ || {});
+const Nr = "flex justify-end gap-2 px-6 py-4", kr = "text-secondary dial-small-150 px-6 py-4", Dr = "Cancel", q = {
+  [_.Info]: {
+    confirmVariant: I.Primary,
+    cancelVariant: I.Secondary
   },
-  [W.Danger]: {
+  [_.Danger]: {
     container: "border-t-4 border-error",
-    confirmVariant: w.Danger,
-    cancelVariant: w.Secondary
+    confirmVariant: I.Danger,
+    cancelVariant: I.Secondary
   }
 }, Zr = ({
   title: e,
@@ -969,87 +989,87 @@ const br = "flex justify-end gap-2 px-6 py-4", vr = "text-secondary dial-small-1
   descriptionCssClass: n,
   open: a = !1,
   confirmLabel: s,
-  cancelLabel: o = wr,
-  isLoading: l = !1,
+  cancelLabel: o = Dr,
+  isLoading: c = !1,
   disableConfirmButton: u = !1,
   cssClass: d,
-  confirmClassName: c,
-  onClose: m,
+  confirmClassName: l,
+  onClose: p,
   onConfirm: f,
   onCancel: x,
   children: h,
   dividers: C = !1,
-  variant: g = W.Info,
-  size: k = F.Sm
+  variant: g = _.Info,
+  size: k = A.Sm
 }) => {
-  const D = l ? null : /* @__PURE__ */ p("div", { className: br, children: [
+  const D = c ? null : /* @__PURE__ */ m("div", { className: Nr, children: [
     /* @__PURE__ */ r(
-      P,
+      j,
       {
-        variant: w.Secondary,
+        variant: I.Secondary,
         title: o,
-        onClick: () => x ? x() : m?.()
+        onClick: () => x ? x() : p?.()
       }
     ),
     /* @__PURE__ */ r(
-      P,
+      j,
       {
-        variant: K[g].confirmVariant,
-        cssClass: c,
+        variant: q[g].confirmVariant,
+        cssClass: l,
         title: s,
         disable: u,
         onClick: () => f()
       }
     )
-  ] }), y = I(() => l ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r(Ue, { size: 50 }) }) : h ?? (t ? /* @__PURE__ */ r(
+  ] }), b = E(() => c ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r(Ue, { size: 50 }) }) : h ?? (t ? /* @__PURE__ */ r(
     "div",
     {
-      className: i(vr, n),
+      className: i(kr, n),
       children: t
     }
-  ) : null), [h, t, l, n]);
+  ) : null), [h, t, c, n]);
   return /* @__PURE__ */ r(
-    yr,
+    wr,
     {
       open: a,
       title: e,
-      cssClass: i(K[g].container, d),
+      cssClass: i(q[g].container, d),
       dividers: C,
-      onClose: () => m?.(),
+      onClose: () => p?.(),
       footer: D,
       size: k,
-      children: y()
+      children: b()
     }
   );
-}, Nr = ({ onClick: e }) => /* @__PURE__ */ r(
-  ye,
+}, Ir = ({ onClick: e }) => /* @__PURE__ */ r(
+  we,
   {
-    ...j,
+    ...M,
     className: "text-primary",
     onClick: e
   }
-), kr = ({ onClick: e }) => /* @__PURE__ */ r(be, { ...j, className: "text-primary", onClick: e }), Dr = ({ ...e }) => {
-  const [t, n] = T(!1), a = I((s) => {
+), Rr = ({ onClick: e }) => /* @__PURE__ */ r(Ne, { ...M, className: "text-primary", onClick: e }), Sr = ({ ...e }) => {
+  const [t, n] = S(!1), a = E((s) => {
     n(s);
   }, []);
   return /* @__PURE__ */ r(
-    O,
+    H,
     {
       type: t ? "text" : "password",
       ...e,
-      iconAfter: t ? /* @__PURE__ */ r(Nr, { onClick: () => a(!1) }) : /* @__PURE__ */ r(kr, { onClick: () => a(!0) })
+      iconAfter: t ? /* @__PURE__ */ r(Ir, { onClick: () => a(!1) }) : /* @__PURE__ */ r(Rr, { onClick: () => a(!0) })
     }
   );
-}, $r = ({
+}, Ur = ({
   fieldTitle: e,
   optional: t,
   elementCssClass: n,
   elementId: a,
   errorText: s,
   ...o
-}) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
+}) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ r(
-    H,
+    z,
     {
       fieldTitle: e,
       optional: t,
@@ -1057,7 +1077,7 @@ const br = "flex justify-end gap-2 px-6 py-4", vr = "text-secondary dial-small-1
     }
   ),
   /* @__PURE__ */ r(
-    Dr,
+    Sr,
     {
       cssClass: n,
       elementId: a,
@@ -1065,47 +1085,47 @@ const br = "flex justify-end gap-2 px-6 py-4", vr = "text-secondary dial-small-1
       ...o
     }
   ),
-  /* @__PURE__ */ r(z, { errorText: s })
+  /* @__PURE__ */ r(W, { errorText: s })
 ] });
-var B = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(B || {});
-const Ir = {
-  [B.Small]: {
+var K = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(K || {});
+const Er = {
+  [K.Small]: {
     textClass: "text-xs px-1",
     containerClass: "px-[6px] py-1 h-[22px]",
     iconSize: 10,
     iconStroke: 1
   },
-  [B.Base]: {
+  [K.Base]: {
     textClass: "text-sm px-2",
     containerClass: "px-3 py-2 h-[38px]",
     iconSize: 18,
     iconStroke: 1.5
   }
-}, Kr = ({
+}, Xr = ({
   elementId: e,
   value: t,
   placeholder: n,
   disabled: a,
   readonly: s,
   invalid: o,
-  cssClass: l,
+  cssClass: c,
   containerCssClass: u,
   onChange: d,
-  size: c = B.Base
+  size: l = K.Base
 }) => {
-  const [m, f] = T(t || "");
-  Se(() => {
+  const [p, f] = S(t || "");
+  re(() => {
     f(t || "");
   }, [t]);
-  const x = I(
+  const x = E(
     (g) => {
       f(g), d?.(g);
     },
     [d]
-  ), h = Ir[c], C = I(() => {
+  ), h = Er[l], C = E(() => {
     x("");
   }, [x]);
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ m(
     "div",
     {
       className: i(
@@ -1118,11 +1138,11 @@ const Ir = {
       ),
       children: [
         /* @__PURE__ */ r(
-          N,
+          R,
           {
             className: i(a ? "text-secondary" : "text-primary"),
             icon: /* @__PURE__ */ r(
-              ve,
+              ke,
               {
                 size: h.iconSize,
                 stroke: h.iconStroke
@@ -1137,19 +1157,19 @@ const Ir = {
             type: "text",
             autoComplete: "off",
             placeholder: n,
-            value: m ?? "",
+            value: p ?? "",
             disabled: a,
             readOnly: s,
             className: i(
               "border-0 bg-transparent w-full",
-              l,
+              c,
               h.textClass
             ),
             onChange: (g) => !s && x(g.currentTarget.value)
           }
         ),
-        m && !s && !a && /* @__PURE__ */ r(
-          N,
+        p && !s && !a && /* @__PURE__ */ r(
+          R,
           {
             className: "text-primary cursor-pointer",
             icon: /* @__PURE__ */ r(
@@ -1167,7 +1187,7 @@ const Ir = {
       ]
     }
   );
-}, se = ({ selectedItems: e, listCssClass: t, listElementCssClass: n }) => !!e?.length && /* @__PURE__ */ r(
+}, ue = ({ selectedItems: e, listCssClass: t, listElementCssClass: n }) => !!e?.length && /* @__PURE__ */ r(
   "ul",
   {
     className: i(
@@ -1182,7 +1202,7 @@ const Ir = {
           "tiny bg-layer-3 rounded p-1 border border-primary max-w-[200px] truncate",
           n
         ]),
-        children: /* @__PURE__ */ r(S, { tooltip: a, children: /* @__PURE__ */ r(
+        children: /* @__PURE__ */ r(T, { tooltip: a, children: /* @__PURE__ */ r(
           "button",
           {
             "aria-label": "autocomplete-action",
@@ -1195,21 +1215,21 @@ const Ir = {
       a
     ))
   }
-), U = (e) => /* @__PURE__ */ v.createElement("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ v.createElement("path", { d: "M2.25 13.5V12C2.25 11.5858 2.58579 11.25 3 11.25C3.41421 11.25 3.75 11.5858 3.75 12V13.5C3.75 13.6989 3.82907 13.8896 3.96973 14.0303C4.11038 14.1709 4.30109 14.25 4.5 14.25H6C6.41421 14.25 6.75 14.5858 6.75 15C6.75 15.4142 6.41421 15.75 6 15.75H4.5C3.90326 15.75 3.33114 15.5128 2.90918 15.0908C2.48722 14.6689 2.25 14.0967 2.25 13.5ZM14.25 6V4.5C14.25 4.30109 14.1709 4.11038 14.0303 3.96973C13.8896 3.82907 13.6989 3.75 13.5 3.75H12C11.5858 3.75 11.25 3.41421 11.25 3C11.25 2.58579 11.5858 2.25 12 2.25H13.5C14.0967 2.25 14.6689 2.48722 15.0908 2.90918C15.5128 3.33114 15.75 3.90326 15.75 4.5V6C15.75 6.41421 15.4142 6.75 15 6.75C14.5858 6.75 14.25 6.41421 14.25 6Z", fill: "currentColor" })), Ur = ({
+), Q = (e) => /* @__PURE__ */ N.createElement("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ N.createElement("path", { d: "M2.25 13.5V12C2.25 11.5858 2.58579 11.25 3 11.25C3.41421 11.25 3.75 11.5858 3.75 12V13.5C3.75 13.6989 3.82907 13.8896 3.96973 14.0303C4.11038 14.1709 4.30109 14.25 4.5 14.25H6C6.41421 14.25 6.75 14.5858 6.75 15C6.75 15.4142 6.41421 15.75 6 15.75H4.5C3.90326 15.75 3.33114 15.5128 2.90918 15.0908C2.48722 14.6689 2.25 14.0967 2.25 13.5ZM14.25 6V4.5C14.25 4.30109 14.1709 4.11038 14.0303 3.96973C13.8896 3.82907 13.6989 3.75 13.5 3.75H12C11.5858 3.75 11.25 3.41421 11.25 3C11.25 2.58579 11.5858 2.25 12 2.25H13.5C14.0967 2.25 14.6689 2.48722 15.0908 2.90918C15.5128 3.33114 15.75 3.90326 15.75 4.5V6C15.75 6.41421 15.4142 6.75 15 6.75C14.5858 6.75 14.25 6.41421 14.25 6Z", fill: "currentColor" })), qr = ({
   children: e,
   open: t,
   readonly: n,
   selectedValue: a,
   valueCssClasses: s,
   inputCssClasses: o,
-  onOpen: l,
+  onOpen: c,
   elementId: u,
   errorText: d,
-  emptyValueText: c
+  emptyValueText: l
 }) => {
-  const m = Array.isArray(a) && a.length > 0, f = typeof a == "string" && !!a.trim(), x = m || f ? a : c, h = n ? void 0 : l;
-  return /* @__PURE__ */ p(_, { children: [
-    m ? /* @__PURE__ */ r("div", { className: "w-full", onClick: h, children: /* @__PURE__ */ p(
+  const p = Array.isArray(a) && a.length > 0, f = typeof a == "string" && !!a.trim(), x = p || f ? a : l, h = n ? void 0 : c;
+  return /* @__PURE__ */ m(Z, { children: [
+    p ? /* @__PURE__ */ r("div", { className: "w-full", onClick: h, children: /* @__PURE__ */ m(
       "div",
       {
         className: i(
@@ -1217,23 +1237,23 @@ const Ir = {
           n && "dial-input-disable"
         ),
         children: [
-          /* @__PURE__ */ r(se, { selectedItems: x }),
+          /* @__PURE__ */ r(ue, { selectedItems: x }),
           !n && /* @__PURE__ */ r("div", { className: "ml-1", children: /* @__PURE__ */ r(
-            N,
+            R,
             {
               icon: /* @__PURE__ */ r(
-                U,
+                Q,
                 {
                   role: "img",
-                  width: R,
-                  height: R
+                  width: V,
+                  height: V
                 }
               )
             }
           ) })
         ]
       }
-    ) }) : /* @__PURE__ */ p(_, { children: [
+    ) }) : /* @__PURE__ */ m(Z, { children: [
       /* @__PURE__ */ r(
         "button",
         {
@@ -1242,7 +1262,7 @@ const Ir = {
           onClick: h,
           "aria-label": "open-popup",
           id: u,
-          children: /* @__PURE__ */ p(
+          children: /* @__PURE__ */ m(
             "div",
             {
               className: i(
@@ -1252,16 +1272,16 @@ const Ir = {
                 d && "dial-input-error"
               ),
               children: [
-                /* @__PURE__ */ r(S, { tooltip: String(x), children: /* @__PURE__ */ r("span", { className: s, children: x }) }),
+                /* @__PURE__ */ r(T, { tooltip: String(x), children: /* @__PURE__ */ r("span", { className: s, children: x }) }),
                 !n && /* @__PURE__ */ r("div", { className: "flex-shrink-0", children: /* @__PURE__ */ r(
-                  N,
+                  R,
                   {
                     icon: /* @__PURE__ */ r(
-                      U,
+                      Q,
                       {
                         role: "img",
-                        width: R,
-                        height: R
+                        width: V,
+                        height: V
                       }
                     )
                   }
@@ -1271,31 +1291,31 @@ const Ir = {
           )
         }
       ),
-      d && /* @__PURE__ */ r(z, { errorText: d })
+      d && /* @__PURE__ */ r(W, { errorText: d })
     ] }),
-    t && We(e, document.body)
+    t && ze(e, document.body)
   ] });
-}, Gr = ({
+}, Qr = ({
   placeholder: e = "",
   selectedItems: t = [],
   updateSelected: n,
   listCssClass: a,
   listElementCssClass: s,
   containerCssClass: o,
-  inputCssClass: l
+  inputCssClass: c
 }) => {
-  const [u, d] = T(""), c = I(
+  const [u, d] = S(""), l = E(
     (f) => {
       f.key === "Enter" && (n([...t, f.currentTarget.value]), d("")), (f.key === "Backspace" || f.key === "Delete") && t.length && !u && n(t.slice(0, -1));
     },
     [t, n, u]
-  ), m = I(
+  ), p = E(
     (f) => {
       d(f.target.value);
     },
     [d]
   );
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ m(
     "div",
     {
       className: i([
@@ -1304,7 +1324,7 @@ const Ir = {
       ]),
       children: [
         /* @__PURE__ */ r(
-          se,
+          ue,
           {
             selectedItems: t,
             listCssClass: a,
@@ -1316,51 +1336,140 @@ const Ir = {
           {
             type: "text",
             value: u,
-            className: i(["border-0 bg-transparent p-0", l]),
+            className: i(["border-0 bg-transparent p-0", c]),
             placeholder: t?.length ? "" : e,
-            onKeyDown: c,
-            onChange: m
+            onKeyDown: l,
+            onChange: p
           }
         )
       ]
     }
   );
+}, Yr = ({
+  initialTags: e = [],
+  fieldTitle: t,
+  optional: n,
+  elementId: a,
+  placeholder: s,
+  errorText: o,
+  invalid: c,
+  disabled: u,
+  onChange: d
+}) => {
+  const l = J(null), [p, f] = S(e), [x, h] = S(""), [C, g] = S(!1), k = (y) => {
+    const v = y.trim().replace(/,$/, "");
+    if (v && !p.includes(v)) {
+      const P = [v, ...p];
+      f(P), d?.(P);
+    }
+  }, D = (y) => {
+    (y.key === "," || y.key === "Enter") && (y.preventDefault(), k(x), h(""));
+  }, b = (y) => {
+    const v = p.filter((P, G) => G !== y);
+    f(v), d?.(v);
+  };
+  return re(() => {
+    const y = new ResizeObserver(() => {
+      if (l.current) {
+        const v = l.current.scrollHeight > l.current.clientHeight + 10;
+        g(v);
+      }
+    });
+    return l.current && y.observe(l.current), () => y.disconnect();
+  }, [p]), /* @__PURE__ */ m("div", { className: i("flex flex-col w-full"), children: [
+    /* @__PURE__ */ r(
+      z,
+      {
+        fieldTitle: t,
+        optional: n,
+        htmlFor: a
+      }
+    ),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: i(
+          "dial-input min-h-[38px] p-[6px]",
+          c && "dial-input-error",
+          u && "dial-input-disable"
+        ),
+        children: /* @__PURE__ */ m(
+          "div",
+          {
+            ref: l,
+            className: i(
+              "flex flex-wrap gap-2 items-center",
+              C ? "flex-col-reverse" : "flex-row"
+            ),
+            children: [
+              p.map((y, v) => /* @__PURE__ */ r(
+                ur,
+                {
+                  tag: y,
+                  remove: u ? void 0 : () => b(v)
+                },
+                y + v
+              )),
+              /* @__PURE__ */ r(
+                "input",
+                {
+                  type: "text",
+                  value: x,
+                  onChange: (y) => h(y.target.value),
+                  onKeyDown: D,
+                  className: i(
+                    "dial-input-no-border outline-none border-none w-full min-w-[100px] flex-1 p-1"
+                  ),
+                  placeholder: s,
+                  disabled: u
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ r(W, { errorText: o })
+  ] });
 };
 export {
-  E as AlertVariant,
-  w as ButtonVariant,
-  W as ConfirmationPopupVariant,
-  jr as DialAlert,
-  Gr as DialAutocompleteInput,
-  se as DialAutocompleteInputValue,
-  P as DialButton,
-  Mr as DialCheckbox,
-  cr as DialCloseButton,
-  Or as DialCollapsibleSidebar,
+  F as AlertVariant,
+  I as ButtonVariant,
+  _ as ConfirmationPopupVariant,
+  Mr as DialAlert,
+  Qr as DialAutocompleteInput,
+  ue as DialAutocompleteInputValue,
+  j as DialButton,
+  Pr as DialCheckbox,
+  pr as DialCloseButton,
+  Br as DialCollapsibleSidebar,
   Zr as DialConfirmationPopup,
-  z as DialErrorText,
-  H as DialFieldLabel,
-  N as DialIcon,
-  O as DialInput,
-  Ur as DialInputPopup,
-  Wr as DialLabelledText,
+  W as DialErrorText,
+  z as DialFieldLabel,
+  R as DialIcon,
+  H as DialInput,
+  qr as DialInputPopup,
+  Hr as DialLabelledText,
   Ue as DialLoader,
-  Ar as DialNoDataContent,
-  Br as DialNumberInputField,
-  Dr as DialPasswordInput,
-  $r as DialPasswordInputField,
-  yr as DialPopup,
-  nr as DialRadioButton,
-  Vr as DialRadioGroup,
-  Kr as DialSearch,
-  Pr as DialSteps,
-  _r as DialSwitch,
-  Hr as DialTextAreaField,
-  zr as DialTextInputField,
-  dr as DialTextarea,
-  S as DialTooltip,
-  F as PopupSize,
-  Z as RadioGroupOrientation,
-  B as SearchSize,
-  b as StepStatus
+  zr as DialNoDataContent,
+  _r as DialNumberInputField,
+  Sr as DialPasswordInput,
+  Ur as DialPasswordInputField,
+  wr as DialPopup,
+  ar as DialRadioButton,
+  Wr as DialRadioGroup,
+  Xr as DialSearch,
+  Or as DialSteps,
+  Gr as DialSwitch,
+  ur as DialTag,
+  Yr as DialTagInput,
+  $r as DialTextAreaField,
+  Kr as DialTextInputField,
+  mr as DialTextarea,
+  T as DialTooltip,
+  A as PopupSize,
+  U as RadioGroupOrientation,
+  K as SearchSize,
+  w as StepStatus,
+  X as TagVariant
 };