asma-ui-core 3.86.1 → 3.87.0

package/dist/components/feedback/snack-bar/StyledSnackbar.js

@@ -10,35 +10,37 @@ var z = {
   "bottom-left": "bottom-6 left-6",
   "bottom-center": "bottom-6 left-1/2 -translate-x-1/2",
   "bottom-right": "bottom-6 right-6"
-}, y = ({ open: e = !1, autoHideDuration: o = 3e3, onClose: f, anchorOrigin: i = {
+}, y = ({ open: e = !1, autoHideDuration: o = 3e3, onClose: i, anchorOrigin: f = {
   vertical: "bottom",
   horizontal: "left"
 }, message: c, action: u, children: p, className: d }) => {
-  const g = b(), [r, l] = n(!1), [s, a] = n(!1);
+  const g = b(), [r, l] = n(!1), [a, s] = n(!1);
   if (v(() => {
-    if (!e || o == null || r || s) return;
-    const t = setTimeout(() => f?.(null, "timeout"), o);
+    if (!e || o == null || r || a) return;
+    const t = setTimeout(() => i?.(null, "timeout"), o);
     return () => clearTimeout(t);
   }, [
     e,
     o,
-    f,
+    i,
     r,
-    s
+    a
   ]), !e)
-    return r && l(!1), s && a(!1), null;
-  const h = z[`${i.vertical}-${i.horizontal}`];
+    return r && l(!1), a && s(!1), null;
+  const h = z[`${f.vertical}-${f.horizontal}`];
   return /* @__PURE__ */ m(T, {
     root: g,
     children: /* @__PURE__ */ m("div", {
       className: x("fixed z-[1400] flex items-center gap-2", h, d),
       onMouseEnter: () => l(!0),
       onMouseLeave: () => l(!1),
-      onFocusCapture: () => a(!0),
+      onFocusCapture: () => s(!0),
       onBlurCapture: (t) => {
-        t.currentTarget.contains(t.relatedTarget) || a(!1);
+        t.currentTarget.contains(t.relatedTarget) || s(!1);
       },
       children: p ?? /* @__PURE__ */ S("div", {
+        role: "status",
+        "aria-atomic": "true",
         className: "flex items-center gap-2 rounded bg-delta-800 px-4 py-3 text-sm text-white shadow-lg",
         children: [c, u]
       })

package/dist/components/feedback/snack-bar/components/StyledInfoSnackbar.js

@@ -2,22 +2,22 @@ import { omit as m } from "../../../../helpers/omit.js";
 import { LoadingIcon as d } from "../../../icons/loading-icon/LoadingIcon.js";
 import { CloseIcon as p } from "../../../icons/close-icon/CloseIcon.js";
 import u from "clsx";
-import { forwardRef as f } from "react";
-import { jsx as r, jsxs as g } from "react/jsx-runtime";
-import { SnackbarContent as h, useSnackbar as b } from "notistack";
-var I = f((t, e) => {
-  const { id: i, message: o, closeButton: n, type: a, ...s } = m(t, [
+import { forwardRef as h } from "react";
+import { jsx as r, jsxs as f } from "react/jsx-runtime";
+import { SnackbarContent as g, useSnackbar as b } from "notistack";
+var I = h((t, e) => {
+  const { id: i, message: o, closeButton: a, type: n, ...s } = m(t, [
     "anchorOrigin",
     "autoHideDuration",
     "hideIconVariant",
     "iconVariant",
     "persist"
-  ]), { closeSnackbar: c } = b(), l = a === "loading";
-  return /* @__PURE__ */ r(h, {
+  ]), { closeSnackbar: c } = b(), l = n === "loading";
+  return /* @__PURE__ */ r(g, {
     ref: e,
     role: "alert",
     ...s,
-    children: /* @__PURE__ */ g("div", {
+    children: /* @__PURE__ */ f("div", {
       className: u("flex w-full items-center justify-center gap-1"),
       children: [
         l ? /* @__PURE__ */ r(d, {
@@ -28,9 +28,9 @@ var I = f((t, e) => {
           className: typeof o == "string" || typeof o == "number" ? "pl-1 pr-2" : void 0,
           children: o
         }),
-        n ? /* @__PURE__ */ r("button", {
+        a ? /* @__PURE__ */ r("button", {
           "aria-label": "Close",
-          className: "grid size-8 cursor-pointer place-items-center rounded border-0 bg-transparent text-white transition-colors duration-300 ease-in-out hover:bg-gama-500 active:bg-gama-500",
+          className: "asma-touch-ready grid size-8 cursor-pointer place-items-center rounded border-0 bg-transparent text-white transition-colors duration-300 ease-in-out hover:bg-gama-500 active:bg-gama-500",
           onClick: () => c(i),
           type: "button",
           children: /* @__PURE__ */ r(p, {

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

@@ -1,51 +1,51 @@
-import { cn as j } from "../../../../helpers/cn.js";
-import { LoadingIcon as Y } from "../../../icons/loading-icon/LoadingIcon.js";
-import { CheckIcon as Z } from "../../../icons/check-icon/CheckIcon.js";
-import { PlusIconCircle as ee } from "../../../icons/plus-icon-circle/PlusIconCircle.js";
-import { StyledChip as B } from "../../../data-display/chip/StyledChip.js";
-import { StyledCheckbox as te } from "../../checkbox/base-ui/StyledCheckbox.js";
-import { StyledTooltip as L } from "../../../data-display/tooltip/StyledTooltip.js";
-import { StyledInputField as le } from "../../input-field/StyledInputField.js";
-import { StyledSelectAutocomplete as ae } from "../../select-autocomplete/StyledSelectAutocomplete.js";
-import { DynamicInteractiveChipGroup as re } from "./DynamicInteractiveChipGroup.js";
-import { createElement as q, forwardRef as oe, useCallback as f, useState as ne } from "react";
-import { Fragment as E, jsx as l, jsxs as O } from "react/jsx-runtime";
-var ye = oe((k, F) => {
-  const [K, S] = ne(!1), { options: h, dataTest: g, value: x, readOnly: u, multiple: o, required: z, onChange: y, size: H, title: v, noOptionsText: _, placeholder: R, disabled: N, helperText: G, disableHelperText: I, error: A, valueKey: P = "value", labelKey: W = "label", renderLabel: i, getOptionTooltip: D, startAdornment: J, autocompleteProps: n, loading: m, maxTags: M, onFocus: Q, onBlur: U } = k, w = h.length < 11, s = (e) => typeof e == "object" ? e?.[W]?.toString() ?? "" : e?.toString() ?? "", p = f((e) => typeof e == "object" ? e?.[P] : e, [P]), V = f((e, t) => p(e) === p(t), [p]), C = (e) => {
+import { cn as $ } from "../../../../helpers/cn.js";
+import { LoadingIcon as X } from "../../../icons/loading-icon/LoadingIcon.js";
+import { CheckIcon as Y } from "../../../icons/check-icon/CheckIcon.js";
+import { PlusIconCircle as Z } from "../../../icons/plus-icon-circle/PlusIconCircle.js";
+import { StyledChip as j } from "../../../data-display/chip/StyledChip.js";
+import { StyledCheckbox as ee } from "../../checkbox/base-ui/StyledCheckbox.js";
+import { StyledTooltip as D } from "../../../data-display/tooltip/StyledTooltip.js";
+import { StyledInputField as te } from "../../input-field/StyledInputField.js";
+import { StyledSelectAutocomplete as le } from "../../select-autocomplete/StyledSelectAutocomplete.js";
+import { DynamicInteractiveChipGroup as ae } from "./DynamicInteractiveChipGroup.js";
+import { createElement as L, forwardRef as re, useCallback as f, useState as oe } from "react";
+import { Fragment as q, jsx as l, jsxs as C } from "react/jsx-runtime";
+var xe = re((T, E) => {
+  const [F, O] = oe(!1), { options: k, dataTest: h, value: g, readOnly: u, multiple: o, required: K, onChange: x, size: z, title: v, noOptionsText: H, placeholder: _, disabled: S, helperText: R, disableHelperText: I, error: N, valueKey: A = "value", labelKey: G = "label", renderLabel: i, getOptionTooltip: P, startAdornment: W, autocompleteProps: n, loading: m, maxTags: J, onFocus: M, onBlur: Q } = T, s = (e) => typeof e == "object" ? e?.[G]?.toString() ?? "" : e?.toString() ?? "", p = f((e) => typeof e == "object" ? e?.[A] : e, [A]), V = f((e, t) => p(e) === p(t), [p]), y = (e) => {
     const t = p(e);
     return t == null ? "" : typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? String(t) : e == null ? "" : s(e);
-  }, $ = f((e) => {
-    S(!0), n?.onOpen?.(e);
-  }, [n]), X = f((e, t) => {
-    S(!1), n?.onClose?.(e, t);
+  }, B = f((e) => {
+    O(!0), n?.onOpen?.(e);
+  }, [n]), U = f((e, t) => {
+    O(!1), n?.onClose?.(e, t);
   }, [n]);
-  if (o && u) return /* @__PURE__ */ l(re, { ...k });
-  const T = v ? `${g}-title` : void 0;
-  return /* @__PURE__ */ O("div", {
+  if (o && u) return /* @__PURE__ */ l(ae, { ...T });
+  const w = v ? `${h}-title` : void 0;
+  return /* @__PURE__ */ C("div", {
     className: "flex w-full flex-col gap-y-1",
     children: [v && /* @__PURE__ */ l("span", {
-      id: T,
+      id: w,
       className: "text-base font-semibold text-delta-800",
       children: v
-    }), /* @__PURE__ */ l(ae, {
-      open: K,
-      onOpen: $,
-      onClose: X,
+    }), /* @__PURE__ */ l(le, {
+      open: F,
+      onOpen: B,
+      onClose: U,
       disableCloseOnSelect: o,
-      dataTest: g,
-      disabled: !!N || !!m,
-      noOptionsText: _,
+      dataTest: h,
+      disabled: !!S || !!m,
+      noOptionsText: H,
       loading: m,
       readOnly: u,
-      value: x,
-      size: H,
-      disableClearable: z,
-      options: h,
+      value: g,
+      size: z,
+      disableClearable: K,
+      options: k,
       fullWidth: !0,
       classes: { listbox: "max-h-[300px]" },
       getOptionLabel: n?.getOptionLabel ?? s,
       onChange: (e, t) => {
-        y(t);
+        x(t);
       },
       filterSelectedOptions: !1,
       isOptionEqualToValue: n?.isOptionEqualToValue ?? V,
@@ -53,9 +53,9 @@ var ye = oe((k, F) => {
       multiple: o,
       renderValue: o ? (e) => {
         if (!Array.isArray(e)) return null;
-        const t = e, d = M ?? h.length, a = t.slice(0, d), c = t.length - d;
-        return [...a.map((r) => /* @__PURE__ */ l(B, {
-          dataTest: `${C(r)}-chip`,
+        const t = e, d = J ?? k.length, a = t.slice(0, d), c = t.length - d;
+        return [...a.map((r) => /* @__PURE__ */ l(j, {
+          dataTest: `${y(r)}-chip`,
           readOnly: u,
           variant: "outlined",
           label: i ? i(r) : s(r),
@@ -63,45 +63,47 @@ var ye = oe((k, F) => {
             root: "h-fit w-fit min-h-[32px]",
             label: "block whitespace-normal"
           },
-          disabled: !!N || !!m,
+          disabled: !!S || !!m,
+          deleteButtonTabIndex: -1,
           onDelete: () => {
-            Array.isArray(x) && y(x.filter((b) => !V(b, r)));
+            Array.isArray(g) && x(g.filter((b) => !V(b, r)));
           }
-        }, C(r))), c > 0 ? /* @__PURE__ */ l(B, {
+        }, y(r))), c > 0 ? /* @__PURE__ */ l(j, {
           dataTest: "remaining-count-tag-chip",
           label: `+${c}`,
           variant: "outlined",
-          onClick: $
+          tabIndex: -1,
+          onClick: B
         }, "remaining-count") : null];
       } : void 0,
-      popupIcon: m ? /* @__PURE__ */ l(Y, {
+      popupIcon: m ? /* @__PURE__ */ l(X, {
         height: 24,
         width: 24
-      }) : o ? /* @__PURE__ */ l(ee, {
+      }) : o ? /* @__PURE__ */ l(Z, {
         height: 24,
         width: 24
       }) : void 0,
       renderOption: (e, t, d) => {
-        const a = typeof t == "object" ? !!t?.disabled : !1, c = D ? D(t) : null;
+        const a = typeof t == "object" ? !!t?.disabled : !1, c = P ? P(t) : null;
         if (o) {
           const b = d.selected;
-          return /* @__PURE__ */ q("li", {
+          return /* @__PURE__ */ L("li", {
             ...e,
             role: "option",
             "aria-selected": b,
             key: e.id,
             onClick: a ? void 0 : e.onClick,
-            className: j("relative flex min-h-10 cursor-pointer items-center gap-x-1 bg-white px-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+            className: $("relative flex min-h-10 cursor-pointer items-center gap-x-1 bg-white px-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
             "aria-disabled": a
           }, 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(L, {
+          }), /* @__PURE__ */ l(D, {
             arrow: !0,
             title: c,
-            children: /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ l(te, {
+            children: /* @__PURE__ */ C(q, { children: [/* @__PURE__ */ l(ee, {
               disabled: a,
-              dataTest: `${C(t)}-checkbox`,
+              dataTest: `${y(t)}-checkbox`,
               size: "small",
               decorative: !0,
               className: "min-w-[36px]",
@@ -113,23 +115,23 @@ var ye = oe((k, F) => {
           }));
         }
         const r = d.selected;
-        return /* @__PURE__ */ q("li", {
+        return /* @__PURE__ */ L("li", {
           ...e,
           role: "option",
           "aria-selected": r,
           key: e.id,
-          className: j("relative flex min-h-10 cursor-pointer items-center gap-x-1 px-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+          className: $("relative flex min-h-10 cursor-pointer items-center gap-x-1 px-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", 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
         }, 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(L, {
+        }), /* @__PURE__ */ l(D, {
           arrow: !0,
           title: c,
-          children: /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ l("span", {
+          children: /* @__PURE__ */ C(q, { children: [/* @__PURE__ */ l("span", {
             className: "w-5 min-w-5",
-            children: r && /* @__PURE__ */ l(Z, {
+            children: r && /* @__PURE__ */ l(Y, {
               className: "size-5 min-h-5 min-w-5 text-gama-500",
               height: 20,
               width: 20
@@ -140,34 +142,30 @@ var ye = oe((k, F) => {
           })] })
         }));
       },
-      renderInput: (e) => /* @__PURE__ */ l(le, {
-        dataTest: `${g}-input-field`,
+      renderInput: (e) => /* @__PURE__ */ l(te, {
+        dataTest: `${h}-input-field`,
         ...e,
-        inputRef: F,
-        error: A,
-        helperText: I ? void 0 : G,
-        reserveHelperText: I ? !1 : A !== void 0,
+        inputRef: E,
+        error: N,
+        helperText: I ? void 0 : R,
+        reserveHelperText: I ? !1 : N !== void 0,
         variant: "outlined",
         label: "",
-        placeholder: R,
+        placeholder: _,
         readOnly: u,
-        onFocus: Q,
-        onBlur: U,
-        onKeyDown: (t) => {
-          e.onKeyDown(t), w && !t.defaultPrevented && t.key.length === 1 && t.preventDefault();
-        },
+        onFocus: M,
+        onBlur: Q,
+        onKeyDown: e.onKeyDown,
         autoComplete: "off",
         slotProps: {
           ...e.slotProps,
           input: {
             ...e.slotProps?.input ?? {},
-            startAdornment: J ?? e.slotProps?.input?.startAdornment,
-            style: w ? { caretColor: "transparent" } : {}
+            startAdornment: W ?? e.slotProps?.input?.startAdornment
           },
           htmlInput: {
             ...e.slotProps?.htmlInput ?? {},
-            ...T ? { "aria-labelledby": T } : {},
-            style: w ? { caretColor: "transparent" } : {}
+            ...w ? { "aria-labelledby": w } : {}
           }
         }
       }),
@@ -176,5 +174,5 @@ var ye = oe((k, F) => {
   });
 });
 export {
-  ye as DynamicSelectAutocomplete
+  xe as DynamicSelectAutocomplete
 };

package/dist/components/inputs/input-field/StyledInputField.js

@@ -9,8 +9,8 @@ import S from "./StyledInputField.module.js";
 import { Children as at, useCallback as st, useId as rt, useLayoutEffect as Z, useRef as q, useState as D } from "react";
 import { jsx as o, jsxs as y } from "react/jsx-runtime";
 import { useMergeRefs as O } from "@floating-ui/react";
-var Mt = ({ dataTest: u, label: l, value: h, defaultValue: b, onChange: ee, onBlur: te, onFocus: ne, error: c, helperText: E, reserveHelperText: oe, expandHelperText: ie = !0, disabled: s, readOnly: n, required: v, allowClear: le, onClear: ae, type: se = "text", placeholder: re, name: de, id: ce, autoComplete: pe, autoFocus: ue, multiline: r, rows: N, minRows: H, maxRows: C, size: he = "medium", fullWidth: me, className: ge, style: fe, sx: xe, inputRef: Se, slotProps: t, InputProps: P, onKeyDown: T, onClick: ye, variant: dt }) => {
-  const be = rt(), R = ce ?? be, $ = `${R}-helper-text`, j = q(null), z = q(null), [He, Le] = D(void 0), [L, K] = D(!1), [Ie, U] = D(b != null && b !== ""), A = h !== void 0, V = A ? h !== "" && h != null : Ie, ve = !!s || !!n, w = t?.input?.startAdornment ?? P?.startAdornment, m = at.count(w) > 0, d = m && Array.isArray(w), g = t?.input?.endAdornment ?? P?.endAdornment, _ = !!(le && V && !ve), { ref: Ne, ...i } = t?.htmlInput ?? {}, Ce = Se ?? Ne, { className: Re, style: B, ref: Ae } = t?.input ?? {}, we = O([Ae]), _e = t?.input?.onMouseDown, W = t?.input?.onClick, Be = W ? { onClick: W } : {}, Fe = pe ?? i.autoComplete, Me = de ?? i.name, I = L || V || m, ke = (e) => {
+var Mt = ({ dataTest: m, label: l, value: u, defaultValue: b, onChange: ee, onBlur: te, onFocus: ne, error: c, helperText: E, reserveHelperText: oe, expandHelperText: ie = !0, disabled: s, readOnly: n, required: v, allowClear: le, onClear: ae, type: se = "text", placeholder: re, name: de, id: ce, autoComplete: pe, autoFocus: me, multiline: r, rows: N, minRows: H, maxRows: C, size: ue = "medium", fullWidth: he, className: ge, style: fe, sx: xe, inputRef: Se, slotProps: t, InputProps: P, onKeyDown: T, onClick: ye, variant: dt }) => {
+  const be = rt(), R = ce ?? be, $ = `${R}-helper-text`, j = q(null), z = q(null), [He, Ie] = D(void 0), [I, K] = D(!1), [Le, U] = D(b != null && b !== ""), A = u !== void 0, V = A ? u !== "" && u != null : Le, ve = !!s || !!n, w = t?.input?.startAdornment ?? P?.startAdornment, h = at.count(w) > 0, d = h && Array.isArray(w), g = t?.input?.endAdornment ?? P?.endAdornment, _ = !!(le && V && !ve), { ref: Ne, ...i } = t?.htmlInput ?? {}, Ce = Se ?? Ne, { className: Re, style: B, ref: Ae } = t?.input ?? {}, we = O([Ae]), _e = t?.input?.onMouseDown, W = t?.input?.onClick, Be = W ? { onClick: W } : {}, Fe = pe ?? i.autoComplete, Me = de ?? i.name, L = I || V || h, ke = (e) => {
     n || (A || U(e.target.value !== ""), ee?.(e));
   }, De = (e) => {
     !s && !n && K(!0), ne?.(e);
@@ -29,11 +29,11 @@ var Mt = ({ dataTest: u, label: l, value: h, defaultValue: b, onChange: ee, onBl
     H,
     r,
     N,
-    h
+    u
   ]);
   const Y = O([Ce, st((e) => {
     j.current = e instanceof HTMLTextAreaElement ? e : null;
-  }, [])]), { style: F, ...Pe } = i, f = !r && !d, { height: ct, minHeight: pt, maxHeight: ut, paddingTop: ht, paddingBottom: mt, ...Te } = B ?? {}, $e = f ? {
+  }, [])]), { style: F, ...Pe } = i, f = !r && !d, { height: ct, minHeight: pt, maxHeight: mt, paddingTop: ut, paddingBottom: ht, ...Te } = B ?? {}, $e = f ? {
     ...Te,
     ...lt()
   } : d ? {
@@ -43,16 +43,16 @@ var Mt = ({ dataTest: u, label: l, value: h, defaultValue: b, onChange: ee, onBl
   } : B, { height: gt, minHeight: ft, maxHeight: xt, paddingTop: St, paddingBottom: yt, paddingLeft: bt, paddingRight: je, ...ze } = F ?? {}, Ke = f ? {
     ...ze,
     ...it({
-      paddingLeft: m ? 40 : 14,
+      paddingLeft: h ? 40 : 14,
       paddingRight: je ?? He ?? (_ || g ? 40 : 14)
     })
   } : F;
   Z(() => {
     if (!f) return;
     const e = z.current, p = e ? Math.ceil(e.getBoundingClientRect().width) + 20 : void 0;
-    Le((x) => x === p ? x : p);
+    Ie((x) => x === p ? x : p);
   });
-  const Ue = I || !l, { show: M, role: Ve } = et("StyledInputField", c, E, oe, n), { fieldRef: We, rowRef: Ye, rowStyle: Ge } = Oe(ie && M), G = {
+  const Ue = L || !l, { show: M, role: Ve } = et("StyledInputField", c, E, oe, n), { fieldRef: We, rowRef: Ye, rowStyle: Ge } = Oe(ie && M), G = {
     ...Pe,
     style: f ? Ke : F,
     id: i.id ?? R,
@@ -62,8 +62,8 @@ var Mt = ({ dataTest: u, label: l, value: h, defaultValue: b, onChange: ee, onBl
     readOnly: n,
     required: v,
     autoComplete: Fe,
-    autoFocus: ue,
-    value: h,
+    autoFocus: me,
+    value: u,
     defaultValue: b,
     "aria-invalid": c ? !0 : void 0,
     "aria-label": i["aria-label"] ?? (i["aria-labelledby"] ? void 0 : typeof l == "string" && l !== "" ? l : void 0),
@@ -75,7 +75,7 @@ var Mt = ({ dataTest: u, label: l, value: h, defaultValue: b, onChange: ee, onBl
       T?.(e), e.defaultPrevented || i.onKeyDown?.(e);
     } : void 0
   }, J = a(S.Input, "peer border-0 bg-transparent text-base tracking-[0.00938em] text-delta-800 outline-none placeholder:text-delta-500", d ? "box-border h-8 min-w-[60px] flex-1 py-0 pl-0 pr-0 leading-[23px]" : r ? "w-full resize-none overflow-hidden p-0 pl-0 pr-0 leading-[23px]" : a("w-full", S["Input--singleLine"]), "disabled:text-delta-300", n && "text-delta-800", Re), Je = !r && !d ? {
-    "data-start-adornment": m ? "true" : void 0,
+    "data-start-adornment": h ? "true" : void 0,
     "data-end-adornment": _ || g ? "true" : void 0
   } : {};
   return /* @__PURE__ */ y("div", {
@@ -83,7 +83,7 @@ var Mt = ({ dataTest: u, label: l, value: h, defaultValue: b, onChange: ee, onBl
     className: a("group relative inline-flex flex-col", ge),
     onClick: ye,
     style: {
-      width: me ? "100%" : 235,
+      width: he ? "100%" : 235,
       fontFamily: "Roboto, Helvetica, Arial, sans-serif",
       letterSpacing: "0.00938em",
       ...k(xe),
@@ -97,31 +97,32 @@ var Mt = ({ dataTest: u, label: l, value: h, defaultValue: b, onChange: ee, onBl
         onMouseDown: _e,
         ...Be,
         style: $e,
-        "data-testid": d ? `${u}-adornment-list` : `${u}-shell`,
+        "data-testid": d ? `${m}-adornment-list` : `${m}-shell`,
         children: [
-          m && /* @__PURE__ */ o("span", {
+          h && /* @__PURE__ */ o("span", {
             className: a("items-center text-delta-500", d ? "contents" : "absolute left-3 flex"),
             children: w
           }),
           r ? /* @__PURE__ */ o("textarea", {
             ...G,
             ref: Y,
-            "data-testid": u,
+            "data-testid": m,
             rows: N ?? H ?? 2,
             className: J
           }) : /* @__PURE__ */ o("input", {
             ...G,
             ...Je,
             ref: Y,
-            "data-testid": u,
+            "data-testid": m,
             type: se,
             className: J
           }),
           _ ? /* @__PURE__ */ o("button", {
             type: "button",
+            tabIndex: -1,
             "aria-label": "Clear",
-            "data-testid": `${u}-clear`,
-            className: "absolute right-4 z-40 flex items-center justify-center rounded-full border-0 bg-transparent p-[2px] duration-300 hover:bg-gama-100",
+            "data-testid": `${m}-clear`,
+            className: "asma-pressable absolute right-4 z-40 flex items-center justify-center rounded-full border-0 bg-transparent p-[2px] duration-300 hover:bg-gama-100",
             onClick: (e) => {
               e.stopPropagation(), e.preventDefault(), A || U(!1), ae?.();
             },
@@ -137,14 +138,14 @@ var Mt = ({ dataTest: u, label: l, value: h, defaultValue: b, onChange: ee, onBl
           l ? /* @__PURE__ */ o("fieldset", {
             "aria-hidden": !0,
             className: X({
-              focused: L,
+              focused: I,
               error: c,
               disabled: s,
               readOnly: n,
               notched: !0
             }),
             children: /* @__PURE__ */ o("legend", {
-              className: ot(I),
+              className: ot(L),
               children: /* @__PURE__ */ y("span", {
                 className: "inline-block px-[5px]",
                 children: [l, v && " *"]
@@ -153,7 +154,7 @@ var Mt = ({ dataTest: u, label: l, value: h, defaultValue: b, onChange: ee, onBl
           }) : /* @__PURE__ */ o("div", {
             "aria-hidden": !0,
             className: X({
-              focused: L,
+              focused: I,
               error: c,
               disabled: s,
               readOnly: n,
@@ -164,17 +165,17 @@ var Mt = ({ dataTest: u, label: l, value: h, defaultValue: b, onChange: ee, onBl
       }), l && /* @__PURE__ */ y("label", {
         htmlFor: R,
         className: a(tt({
-          shrink: I,
-          focused: L,
+          shrink: L,
+          focused: I,
           error: c,
           disabled: s,
           readOnly: n,
-          size: he
+          size: ue
         }), t?.inputLabel?.className),
         style: {
           ...k(t?.inputLabel?.sx),
           ...t?.inputLabel?.style,
-          ...nt(I)
+          ...nt(L)
         },
         children: [l, v && " *"]
       })]

package/dist/components/inputs/phone-field/CountryCodeOptions.js

@@ -1,28 +1,29 @@
-import { cn as i } from "../../../helpers/cn.js";
-import { StyledSelectItem as u } from "../select/StyledSelectItem.js";
+import { cn as u } from "../../../helpers/cn.js";
+import { StyledSelectItem as h } from "../select/StyledSelectItem.js";
 import { useEffect as x, useRef as N } from "react";
-import { jsx as l, jsxs as o } from "react/jsx-runtime";
-var j = ({ dataTest: m, visible: n, selectedIso2: d, activeIndex: s, optionId: r, onSelect: c, listId: f, label: p, renderFlag: b, className: h }) => {
+import { jsx as l, jsxs as i } from "react/jsx-runtime";
+var j = ({ dataTest: o, visible: m, selectedIso2: n, activeIndex: s, optionId: r, onSelect: c, listId: d, label: f, renderFlag: p, className: b }) => {
   const a = N(null);
   return x(() => {
-    a.current?.querySelector(`#${CSS.escape(r(s))}`)?.scrollIntoView({ block: "nearest" });
+    s !== null && a.current?.querySelector(`#${CSS.escape(r(s))}`)?.scrollIntoView({ block: "nearest" });
   }), /* @__PURE__ */ l("ul", {
     ref: a,
-    id: f,
+    id: d,
     role: "listbox",
-    "aria-label": p,
-    "data-testid": `${m}-listbox`,
-    className: i("m-0 min-h-0 flex-1 list-none overflow-y-auto p-0", h),
-    children: n.map((e, t) => /* @__PURE__ */ l(u, {
+    "aria-label": f,
+    "data-testid": `${o}-listbox`,
+    className: u("m-0 min-h-0 flex-1 list-none overflow-y-auto p-0", b),
+    children: m.map((e, t) => /* @__PURE__ */ l(h, {
       id: r(t),
-      selected: e.iso2 === d,
+      selected: e.iso2 === n,
+      active: t === s,
       onClick: () => c(e.iso2),
-      className: i("border-0 border-b border-solid border-delta-100", t === s && "bg-delta-50"),
-      children: /* @__PURE__ */ o("span", {
+      className: "border-0 border-b border-solid border-delta-100",
+      children: /* @__PURE__ */ i("span", {
         className: "flex w-full items-center justify-between gap-2",
-        children: [/* @__PURE__ */ o("span", {
+        children: [/* @__PURE__ */ i("span", {
           className: "flex min-w-0 items-center gap-2",
-          children: [b?.(e.iso2, "eager"), /* @__PURE__ */ l("span", {
+          children: [p?.(e.iso2, "eager"), /* @__PURE__ */ l("span", {
             className: "truncate",
             children: e.name
           })]