asma-ui-core 3.108.3 → 3.109.0

package/dist/components/data-display/interactive-chip/StyledInteractiveChip.js

@@ -1,43 +1,43 @@
 import { cn as o } from "../../../helpers/cn.js";
-import { StyledChip as f } from "../chip/StyledChip.js";
-import { StyledCheckbox as v } from "../../inputs/checkbox/base-ui/StyledCheckbox.js";
+import { StyledChip as v } from "../chip/StyledChip.js";
+import { StyledCheckbox as f } from "../../inputs/checkbox/base-ui/StyledCheckbox.js";
 import { StyledRadio as x } from "../../inputs/radio-button/base-ui/StyledRadio.js";
 import i from "./StyledInteractiveChip.module.js";
-import { forwardRef as y } from "react";
+import { forwardRef as _ } from "react";
 import { jsx as r } from "react/jsx-runtime";
-var S = "[&[data-testid][role]]:border-2 [&[data-testid][role]]:border-gama-400 [&[data-testid][role]]:bg-gama-25", C = { paddingLeft: "6px" }, h = y(({ type: l = "checkbox", checked: a, size: d = "small", ariaLabel: n, ...e }, c) => {
-  const t = l === "checkbox", m = n ?? (typeof e.label == "string" ? e.label : void 0), s = !e.readOnly && !t && !!a, b = t ? /* @__PURE__ */ r(v, {
-    dataTest: e.dataTest,
+var y = "[&[data-testid][role]]:border-gama-400 [&[data-testid][role]]:shadow-[inset_0_0_0_1px_var(--colors-gama-400)] [&[data-testid][role]]:bg-gama-25", S = { paddingLeft: "6px" }, R = _(({ type: l = "checkbox", checked: e, size: d = "small", ariaLabel: n, ...a }, c) => {
+  const t = l === "checkbox", m = n ?? (typeof a.label == "string" ? a.label : void 0), s = !a.readOnly && !t && !!e, b = t ? /* @__PURE__ */ r(f, {
+    dataTest: a.dataTest,
     disableRipple: !0,
-    checked: a,
+    checked: e,
     size: d,
-    readOnly: e.readOnly,
+    readOnly: a.readOnly,
     decorative: !0,
     className: o("pointer-events-none", i.control)
   }) : /* @__PURE__ */ r(x, {
-    dataTest: e.dataTest,
-    checked: a,
+    dataTest: a.dataTest,
+    checked: e,
     size: d,
     decorative: !0,
     className: o("pointer-events-none", i.control)
   });
-  return /* @__PURE__ */ r(f, {
+  return /* @__PURE__ */ r(v, {
     ref: c,
     "aria-label": m,
     role: l,
-    "aria-checked": !!a,
-    "aria-readonly": t ? e.readOnly : void 0,
+    "aria-checked": !!e,
+    "aria-readonly": t ? a.readOnly : void 0,
     avatar: b,
     clickable: !0,
     tabIndex: 0,
-    ...e,
-    className: o(s && S, e.className),
+    ...a,
+    className: o(s && y, a.className),
     sx: {
-      ...C,
-      ...e.sx
+      ...S,
+      ...a.sx
     }
   });
 });
 export {
-  h as StyledInteractiveChip
+  R as StyledInteractiveChip
 };

package/dist/components/inputs/dynamic-select/components/DynamicInteractiveChipGroup.js

@@ -1,28 +1,29 @@
 import { cn as v } from "../../../../helpers/cn.js";
-import { StyledTooltip as J } from "../../../data-display/tooltip/StyledTooltip.js";
-import { CloseIcon as j } from "../../../icons/close-icon/CloseIcon.js";
-import { ErrorOutlineIcon as P } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { StyledChip as Q } from "../../../data-display/chip/StyledChip.js";
-import { StyledInteractiveChip as O } from "../../../data-display/interactive-chip/StyledInteractiveChip.js";
-import { StyledButton as U } from "../../button/StyledButton.js";
-import { useHelperAlertRole as X } from "../../../../helpers/useHelperAlertRole.js";
-import { warnMissingErrorMessage as Y } from "../../../../helpers/warnMissingErrorMessage.js";
-import { useWrap as Z } from "../helpers/useWrap.js";
+import { StyledTooltip as P } from "../../../data-display/tooltip/StyledTooltip.js";
+import { CloseIcon as k } from "../../../icons/close-icon/CloseIcon.js";
+import { ErrorOutlineIcon as Q } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { StyledChip as U } from "../../../data-display/chip/StyledChip.js";
+import { StyledInteractiveChip as j } from "../../../data-display/interactive-chip/StyledInteractiveChip.js";
+import { StyledButton as X } from "../../button/StyledButton.js";
+import { useHelperAlertRole as Y } from "../../../../helpers/useHelperAlertRole.js";
+import { warnMissingErrorMessage as Z } from "../../../../helpers/warnMissingErrorMessage.js";
+import { useWrap as _ } from "../helpers/useWrap.js";
+import { DynamicSelectTitle as ee } from "./DynamicSelectTitle.js";
 import { Skeleton as N } from "../../../mui-compat/Skeleton.js";
-import { forwardRef as _, useEffect as ee, useId as te } from "react";
+import { forwardRef as te, useEffect as le, useId as re } from "react";
 import { jsx as t, jsxs as T } from "react/jsx-runtime";
-var he = _((V, A) => {
-  const { options: d, dataTest: R, value: r, readOnly: n, multiple: i, title: C, disabled: b, onChange: p, required: D, error: f, helperText: I, valueKey: E = "value", labelKey: L = "label", renderLabel: o, getOptionTooltip: k, loading: $, size: g, locale: z = "en", clearSelectionLabel: B } = V, q = te();
-  Y("DynamicInteractiveChipGroup", f, I);
-  const G = X(f), { containerRef: m, wrapDisabled: w } = Z({ dependencyList: [d, d.length] });
-  ee(() => {
+var ge = te((O, V) => {
+  const { options: d, dataTest: A, value: r, readOnly: i, multiple: n, title: D, titleSize: R, disabled: b, onChange: p, required: z, error: f, helperText: S, valueKey: E = "value", labelKey: L = "label", renderLabel: o, getOptionTooltip: C, loading: $, size: g, locale: B = "en", clearSelectionLabel: q } = O, G = re();
+  Z("DynamicInteractiveChipGroup", f, S);
+  const K = Y(f), { containerRef: m, wrapDisabled: y } = _({ dependencyList: [d, d.length] });
+  le(() => {
     m.current && (m.current.inert = !0);
   }, [m]);
-  const u = (e) => typeof e == "object" ? e?.[L]?.toString() ?? "" : e?.toString() ?? "", y = (e) => typeof e == "object" ? e?.[E] : e, c = (e) => {
-    const l = y(e);
+  const u = (e) => typeof e == "object" ? e?.[L]?.toString() ?? "" : e?.toString() ?? "", w = (e) => typeof e == "object" ? e?.[E] : e, c = (e) => {
+    const l = w(e);
     return l == null ? "" : typeof l == "string" || typeof l == "number" || typeof l == "boolean" ? String(l) : e == null ? "" : u(e);
-  }, s = (e, l) => y(e) === y(l), K = i ? Array.isArray(r) && r.length > 0 : r != null, M = (e) => {
-    if (!i) {
+  }, s = (e, l) => w(e) === w(l), M = n ? Array.isArray(r) && r.length > 0 : r != null, F = (e) => {
+    if (!n) {
       const a = s(e, r) ? null : e;
       if (a === null) return;
       p(a);
@@ -30,30 +31,30 @@ var he = _((V, A) => {
     }
     const l = r ?? [];
     p(l.find((a) => s(a, e)) ? l.filter((a) => !s(a, e)) : [...l, e]);
-  }, h = n ? d.filter((e) => !!(i ? r?.find((l) => s(l, e)) : s(r, e))) : d, F = h.findIndex((e) => !(typeof e == "object" && e?.disabled) && !n);
+  }, h = i ? d.filter((e) => !!(n ? r?.find((l) => s(l, e)) : s(r, e))) : d, H = h.findIndex((e) => !(typeof e == "object" && e?.disabled) && !i);
   return /* @__PURE__ */ T("div", {
-    "data-testid": `${R}-dynamic-radio-group`,
+    "data-testid": `${A}-dynamic-radio-group`,
     className: "relative flex flex-col gap-y-1",
     children: [
-      C && /* @__PURE__ */ t("span", {
-        className: "text-base font-semibold text-delta-800",
-        children: C
+      /* @__PURE__ */ t(ee, {
+        title: D,
+        titleSize: R
       }),
       /* @__PURE__ */ t("div", {
         "aria-hidden": !0,
         ref: m,
         className: "pointer-events-none absolute left-0 top-0 flex flex-wrap gap-2 opacity-0",
         style: { width: "100%" },
-        children: h.map((e) => /* @__PURE__ */ t(O, {
+        children: h.map((e) => /* @__PURE__ */ t(j, {
           className: "w-fit",
-          readOnly: n,
-          type: i ? "checkbox" : "radio",
+          readOnly: i,
+          type: n ? "checkbox" : "radio",
           dataTest: `ic-${c(e)}-hidden`,
           label: o ? o(e) : u(e)
         }, c(e)))
       }),
       /* @__PURE__ */ t("div", {
-        className: v("flex flex-wrap gap-2", w && "flex-col gap-1"),
+        className: v("flex flex-wrap gap-2", y && "flex-col gap-1"),
         children: $ ? /* @__PURE__ */ T("div", {
           className: "flex flex-wrap gap-2",
           children: [
@@ -62,74 +63,74 @@ var he = _((V, A) => {
             /* @__PURE__ */ t(N, { className: "h-[32px] w-[60px]" })
           ]
         }) : h?.length ? h.map((e, l) => {
-          const a = !!(i ? r?.find((W) => s(W, e)) : s(r, e)), H = k ? k(e) : null;
-          if (n && !a) return null;
-          const x = typeof e == "object" ? !!e?.disabled : !1, S = !x && !n && l === F ? A : void 0;
-          return /* @__PURE__ */ t(J, {
-            title: H,
+          const a = !!(n ? r?.find((J) => s(J, e)) : s(r, e)), W = C ? C(e) : null;
+          if (i && !a) return null;
+          const x = typeof e == "object" ? !!e?.disabled : !1, I = !x && !i && l === H ? V : void 0;
+          return /* @__PURE__ */ t(P, {
+            title: W,
             arrow: !0,
             children: /* @__PURE__ */ t("span", {
               className: v(x && "cursor-not-allowed"),
-              children: n && !w ? /* @__PURE__ */ t(Q, {
-                ref: S,
+              children: i && !y ? /* @__PURE__ */ t(U, {
+                ref: I,
                 disabled: !!b || x,
                 classes: { root: "min-h-[32px] h-full" },
                 className: "w-fit",
                 dataTest: `ic-${c(e)}`,
                 label: o ? o(e) : u(e)
-              }) : /* @__PURE__ */ t(O, {
-                ref: S,
+              }) : /* @__PURE__ */ t(j, {
+                ref: I,
                 disabled: !!b || x,
-                classes: w ? {
+                classes: y ? {
                   root: "border-none outline-none bg-transparent w-full flex justify-start h-full min-h-[40px] shadow-none",
                   label: "block whitespace-normal break-words overflow-visible"
                 } : { root: "min-h-[32px] h-full" },
                 className: "w-fit",
-                readOnly: n,
-                type: i ? "checkbox" : "radio",
+                readOnly: i,
+                type: n ? "checkbox" : "radio",
                 dataTest: `ic-${c(e)}`,
                 checked: a,
                 size: g,
-                onClick: () => M(e),
+                onClick: () => F(e),
                 label: o ? o(e) : u(e)
               })
             })
           }, c(e));
         }) : /* @__PURE__ */ t("span", { children: "-" })
       }),
-      !D && K && !n && !b && /* @__PURE__ */ t(U, {
+      !z && M && !i && !b && /* @__PURE__ */ t(X, {
         dataTest: "clear-selection-btn",
         variant: "text",
-        startIcon: g === "medium" ? /* @__PURE__ */ t(j, {
+        startIcon: g === "medium" ? /* @__PURE__ */ t(k, {
           height: 24,
           width: 24,
           className: "size-6"
-        }) : /* @__PURE__ */ t(j, {
+        }) : /* @__PURE__ */ t(k, {
           height: 20,
           width: 20,
           className: "size-5"
         }),
         className: "w-fit",
         size: g,
-        onClick: () => p(i ? [] : null),
-        children: B ?? (z === "en" ? "Clear selection" : "Fjern valget")
+        onClick: () => p(n ? [] : null),
+        children: q ?? (B === "en" ? "Clear selection" : "Fjern valget")
       }),
       /* @__PURE__ */ T("div", {
-        id: q,
-        role: G,
+        id: G,
+        role: K,
         className: v("flex min-h-[24px] items-center gap-1 pt-1 text-sm/5 text-delta-600", f && "text-error-500"),
-        children: [f && /* @__PURE__ */ t(P, {
+        children: [f && /* @__PURE__ */ t(Q, {
           width: 20,
           height: 20,
           className: "min-w-5"
         }), /* @__PURE__ */ t("span", {
           className: "line-clamp-1",
-          children: I
+          children: S
         })]
       })
     ]
   });
 });
 export {
-  he as DynamicInteractiveChipGroup
+  ge as DynamicInteractiveChipGroup
 };

package/dist/components/inputs/dynamic-select/components/DynamicSelectAutocomplete.js

@@ -1,47 +1,48 @@
-import { cn as q } from "../../../../helpers/cn.js";
-import { StyledTooltip as z } from "../../../data-display/tooltip/StyledTooltip.js";
-import { LoadingIcon as te } from "../../../icons/loading-icon/LoadingIcon.js";
-import { CheckIcon as le } from "../../../icons/check-icon/CheckIcon.js";
+import { cn as L } from "../../../../helpers/cn.js";
+import { StyledTooltip as q } from "../../../data-display/tooltip/StyledTooltip.js";
+import { LoadingIcon as le } from "../../../icons/loading-icon/LoadingIcon.js";
+import { CheckIcon as re } from "../../../icons/check-icon/CheckIcon.js";
 import { PlusIconCircle as ae } from "../../../icons/plus-icon-circle/PlusIconCircle.js";
 import { StyledChip as E } from "../../../data-display/chip/StyledChip.js";
-import { StyledCheckbox as re } from "../../checkbox/base-ui/StyledCheckbox.js";
-import { StyledInputField as oe } from "../../input-field/StyledInputField.js";
-import { StyledSelectAutocomplete as ie } from "../../select-autocomplete/StyledSelectAutocomplete.js";
-import { DynamicInteractiveChipGroup as ne } from "./DynamicInteractiveChipGroup.js";
-import { createElement as F, forwardRef as se, useCallback as h, useState as de } from "react";
+import { StyledCheckbox as oe } from "../../checkbox/base-ui/StyledCheckbox.js";
+import { StyledInputField as ie } from "../../input-field/StyledInputField.js";
+import { StyledSelectAutocomplete as ne } from "../../select-autocomplete/StyledSelectAutocomplete.js";
+import { DynamicSelectTitle as se } from "./DynamicSelectTitle.js";
+import { DynamicInteractiveChipGroup as de } from "./DynamicInteractiveChipGroup.js";
+import { createElement as F, forwardRef as ce, useCallback as h, useState as ue } from "react";
 import { Fragment as K, jsx as l, jsxs as T } from "react/jsx-runtime";
-var Ce = se((O, H) => {
-  const [_, S] = de(!1), { options: k, dataTest: f, value: g, readOnly: u, multiple: o, required: R, onChange: x, size: W, rowSize: y = "compact", title: v, noOptionsText: G, placeholder: J, disabled: I, helperText: M, disableHelperText: N, error: A, valueKey: P = "value", labelKey: Q = "label", renderLabel: s, getOptionTooltip: V, startAdornment: U, autocompleteProps: i, loading: m, maxTags: X, onFocus: Y, onBlur: Z } = O, d = (e) => typeof e == "object" ? e?.[Q]?.toString() ?? "" : e?.toString() ?? "", b = h((e) => typeof e == "object" ? e?.[P] : e, [P]), $ = h((e, t) => b(e) === b(t), [b]), w = (e) => {
-    const t = b(e);
+var Se = ce((C, H) => {
+  const [_, O] = ue(!1), { options: S, dataTest: f, value: g, readOnly: u, multiple: o, required: R, onChange: x, size: W, rowSize: y = "compact", title: k, titleSize: G, noOptionsText: J, placeholder: M, disabled: I, helperText: Q, disableHelperText: N, error: A, valueKey: P = "value", labelKey: U = "label", renderLabel: s, getOptionTooltip: V, startAdornment: X, autocompleteProps: i, loading: m, maxTags: Y, onFocus: Z, onBlur: ee } = C, d = (e) => typeof e == "object" ? e?.[U]?.toString() ?? "" : e?.toString() ?? "", p = h((e) => typeof e == "object" ? e?.[P] : e, [P]), $ = h((e, t) => p(e) === p(t), [p]), v = (e) => {
+    const t = p(e);
     return t == null ? "" : typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? String(t) : e == null ? "" : d(e);
   }, B = h((e) => {
-    S(!0), i?.onOpen?.(e);
-  }, [i]), ee = h((e, t) => {
-    S(!1), i?.onClose?.(e, t);
+    O(!0), i?.onOpen?.(e);
+  }, [i]), te = h((e, t) => {
+    O(!1), i?.onClose?.(e, t);
   }, [i]);
-  if (o && u) return /* @__PURE__ */ l(ne, { ...O });
-  const C = v ? `${f}-title` : void 0;
+  if (o && u) return /* @__PURE__ */ l(de, { ...C });
+  const w = k ? `${f}-title` : void 0;
   return /* @__PURE__ */ T("div", {
     className: "flex w-full flex-col gap-y-1",
-    children: [v && /* @__PURE__ */ l("span", {
-      id: C,
-      className: "text-base font-semibold text-delta-800",
-      children: v
-    }), /* @__PURE__ */ l(ie, {
+    children: [/* @__PURE__ */ l(se, {
+      id: w,
+      title: k,
+      titleSize: G
+    }), /* @__PURE__ */ l(ne, {
       open: _,
       onOpen: B,
-      onClose: ee,
+      onClose: te,
       disableCloseOnSelect: o,
       dataTest: f,
       disabled: !!I || !!m,
-      noOptionsText: G,
+      noOptionsText: J,
       loading: m,
       readOnly: u,
       value: g,
       size: W,
       rowSize: y,
       disableClearable: R,
-      options: k,
+      options: S,
       fullWidth: !0,
       classes: { listbox: "max-h-[300px]" },
       getOptionLabel: i?.getOptionLabel ?? d,
@@ -54,12 +55,12 @@ var Ce = se((O, H) => {
       multiple: o,
       renderValue: o ? (e) => {
         if (!Array.isArray(e)) return null;
-        const t = e, c = X ?? k.length, r = t.slice(0, c), n = t.length - c;
-        return [...r.map((a) => /* @__PURE__ */ l(E, {
-          dataTest: `${w(a)}-chip`,
+        const t = e, c = Y ?? S.length, a = t.slice(0, c), n = t.length - c;
+        return [...a.map((r) => /* @__PURE__ */ l(E, {
+          dataTest: `${v(r)}-chip`,
           readOnly: u,
           variant: "outlined",
-          label: s ? s(a) : d(a),
+          label: s ? s(r) : d(r),
           classes: {
             root: "h-fit w-fit min-h-[32px]",
             label: "block whitespace-normal"
@@ -67,9 +68,9 @@ var Ce = se((O, H) => {
           disabled: !!I || !!m,
           deleteButtonTabIndex: -1,
           onDelete: () => {
-            Array.isArray(g) && x(g.filter((p) => !$(p, a)));
+            Array.isArray(g) && x(g.filter((b) => !$(b, r)));
           }
-        }, w(a))), n > 0 ? /* @__PURE__ */ l(E, {
+        }, v(r))), n > 0 ? /* @__PURE__ */ l(E, {
           dataTest: "remaining-count-tag-chip",
           label: `+${n}`,
           variant: "outlined",
@@ -77,7 +78,7 @@ var Ce = se((O, H) => {
           onClick: B
         }, "remaining-count") : null];
       } : void 0,
-      popupIcon: m ? /* @__PURE__ */ l(te, {
+      popupIcon: m ? /* @__PURE__ */ l(le, {
         height: 24,
         width: 24
       }) : o ? /* @__PURE__ */ l(ae, {
@@ -85,64 +86,64 @@ var Ce = se((O, H) => {
         width: 24
       }) : void 0,
       renderOption: (e, t, c) => {
-        const r = typeof t == "object" ? !!t?.disabled : !1, n = V ? V(t) : null, a = r && n ? `${e.id}-reason` : void 0, p = a && e["data-active"] !== void 0 ? !0 : void 0, j = a && /* @__PURE__ */ l("span", {
-          id: a,
+        const a = typeof t == "object" ? !!t?.disabled : !1, n = V ? V(t) : null, r = a && n ? `${e.id}-reason` : void 0, b = r && e["data-active"] !== void 0 ? !0 : void 0, D = r && /* @__PURE__ */ l("span", {
+          id: r,
           className: "sr-only",
           "aria-hidden": "true",
           children: n
         });
         if (o) {
-          const L = c.selected;
+          const z = c.selected;
           return /* @__PURE__ */ F("li", {
             ...e,
             role: "option",
-            "aria-selected": L,
+            "aria-selected": z,
             key: e.id,
-            onClick: r ? void 0 : e.onClick,
-            className: q("relative box-border flex cursor-pointer items-center gap-x-1 bg-white px-2 py-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", y === "regular" ? "min-h-12" : "min-h-10", r && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
-            "aria-disabled": r,
-            "aria-describedby": a
-          }, j, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
+            onClick: a ? void 0 : e.onClick,
+            className: L("relative box-border flex cursor-pointer items-center gap-x-1 bg-white px-2 py-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", y === "regular" ? "min-h-12" : "min-h-10", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+            "aria-disabled": a,
+            "aria-describedby": r
+          }, D, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
             "aria-hidden": "true",
             className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
-          }), /* @__PURE__ */ l(z, {
+          }), /* @__PURE__ */ l(q, {
             arrow: !0,
             title: n,
-            open: p,
-            children: /* @__PURE__ */ T(K, { children: [/* @__PURE__ */ l(re, {
-              disabled: r,
-              dataTest: `${w(t)}-checkbox`,
+            open: b,
+            children: /* @__PURE__ */ T(K, { children: [/* @__PURE__ */ l(oe, {
+              disabled: a,
+              dataTest: `${v(t)}-checkbox`,
               size: "small",
               decorative: !0,
               hideWrapper: !0,
               className: "min-w-[36px]",
-              checked: L
+              checked: z
             }), s ? s(t) : /* @__PURE__ */ l("span", {
               className: "line-clamp-2 h-fit min-w-0 flex-1 break-words text-base text-delta-800",
               children: d(t)
             })] })
           }));
         }
-        const D = c.selected;
+        const j = c.selected;
         return /* @__PURE__ */ F("li", {
           ...e,
           role: "option",
-          "aria-selected": D,
+          "aria-selected": j,
           key: e.id,
-          className: q("relative box-border flex cursor-pointer items-center gap-x-1 px-2 py-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", y === "regular" ? "min-h-12" : "min-h-10", r && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
-          onClick: r ? void 0 : e.onClick,
-          "aria-disabled": r,
-          "aria-describedby": a
-        }, j, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
+          className: L("relative box-border flex cursor-pointer items-center gap-x-1 px-2 py-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", y === "regular" ? "min-h-12" : "min-h-10", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+          onClick: a ? void 0 : e.onClick,
+          "aria-disabled": a,
+          "aria-describedby": r
+        }, D, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
           "aria-hidden": "true",
           className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
-        }), /* @__PURE__ */ l(z, {
+        }), /* @__PURE__ */ l(q, {
           arrow: !0,
           title: n,
-          open: p,
+          open: b,
           children: /* @__PURE__ */ T(K, { children: [/* @__PURE__ */ l("span", {
             className: "w-5 min-w-5",
-            children: D && /* @__PURE__ */ l(le, {
+            children: j && /* @__PURE__ */ l(re, {
               className: "size-5 min-h-5 min-w-5 text-gama-500",
               height: 20,
               width: 20
@@ -153,30 +154,30 @@ var Ce = se((O, H) => {
           })] })
         }));
       },
-      renderInput: (e) => /* @__PURE__ */ l(oe, {
+      renderInput: (e) => /* @__PURE__ */ l(ie, {
         dataTest: `${f}-input-field`,
         ...e,
         inputRef: H,
         error: A,
-        helperText: N ? void 0 : M,
+        helperText: N ? void 0 : Q,
         reserveHelperText: N ? !1 : A !== void 0,
         variant: "outlined",
         label: "",
-        placeholder: J,
+        placeholder: M,
         readOnly: u,
-        onFocus: Y,
-        onBlur: Z,
+        onFocus: Z,
+        onBlur: ee,
         onKeyDown: e.onKeyDown,
         autoComplete: "off",
         slotProps: {
           ...e.slotProps,
           input: {
             ...e.slotProps?.input ?? {},
-            startAdornment: U ?? e.slotProps?.input?.startAdornment
+            startAdornment: X ?? e.slotProps?.input?.startAdornment
           },
           htmlInput: {
             ...e.slotProps?.htmlInput ?? {},
-            ...C ? { "aria-labelledby": C } : {}
+            ...w ? { "aria-labelledby": w } : {}
           }
         }
       }),
@@ -185,5 +186,5 @@ var Ce = se((O, H) => {
   });
 });
 export {
-  Ce as DynamicSelectAutocomplete
+  Se as DynamicSelectAutocomplete
 };

package/dist/components/inputs/dynamic-select/components/DynamicSelectReadOnlyValue.js

@@ -1,19 +1,20 @@
-import { jsx as d, jsxs as u } from "react/jsx-runtime";
-var m = ({ dataTest: a, options: c, value: t, title: n, valueKey: i = "value", labelKey: o = "label", renderLabel: r }) => {
-  const s = (e) => typeof e == "object" ? e?.[i] : e, f = (e) => typeof e == "object" ? e?.[o]?.toString() ?? "" : e?.toString() ?? "", l = t == null ? null : c.find((e) => s(e) === s(t)) ?? t;
-  return /* @__PURE__ */ u("div", {
-    "data-testid": `${a}-read-only`,
+import { DynamicSelectTitle as m } from "./DynamicSelectTitle.js";
+import { jsx as c, jsxs as y } from "react/jsx-runtime";
+var b = ({ dataTest: r, options: i, value: t, title: d, titleSize: s, valueKey: o = "value", labelKey: f = "label", renderLabel: n }) => {
+  const a = (e) => typeof e == "object" ? e?.[o] : e, u = (e) => typeof e == "object" ? e?.[f]?.toString() ?? "" : e?.toString() ?? "", l = t == null ? null : i.find((e) => a(e) === a(t)) ?? t;
+  return /* @__PURE__ */ y("div", {
+    "data-testid": `${r}-read-only`,
     className: "flex flex-col gap-y-1",
-    children: [n && /* @__PURE__ */ d("span", {
-      className: "text-base font-semibold text-delta-800",
-      children: n
-    }), /* @__PURE__ */ d("div", {
-      "data-testid": `${a}-read-only-value`,
+    children: [/* @__PURE__ */ c(m, {
+      title: d,
+      titleSize: s
+    }), /* @__PURE__ */ c("div", {
+      "data-testid": `${r}-read-only-value`,
       className: "text-base/6 text-delta-700",
-      children: l === null ? "-" : r ? r(l) : f(l)
+      children: l === null ? "-" : n ? n(l) : u(l)
     })]
   });
 };
 export {
-  m as DynamicSelectReadOnlyValue
+  b as DynamicSelectReadOnlyValue
 };

package/dist/components/inputs/dynamic-select/components/DynamicSelectTitle.js

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+var r = ({ title: e, titleSize: l = "base", id: a }) => e == null || e === !1 || e === "" ? null : /* @__PURE__ */ t("span", {
+  id: a,
+  className: l === "lg" ? "text-lg/7 font-semibold text-delta-800" : "text-base font-semibold text-delta-800",
+  children: e
+});
+export {
+  r as DynamicSelectTitle
+};