asma-ui-core 3.80.2 → 3.81.0

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

@@ -95,7 +95,7 @@ var ye = oe((k, F) => {
             "aria-disabled": a
           }, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
             "aria-hidden": "true",
-            className: "pointer-events-none absolute inset-y-0 left-0 border-l border-solid border-focus-ring"
+            className: "pointer-events-none absolute inset-y-0 left-0 border-l-[4px] border-solid border-focus-ring"
           }), /* @__PURE__ */ l(L, {
             arrow: !0,
             title: c,
@@ -123,7 +123,7 @@ var ye = oe((k, F) => {
           "aria-disabled": a
         }, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
           "aria-hidden": "true",
-          className: "pointer-events-none absolute inset-y-0 left-0 border-l border-solid border-focus-ring"
+          className: "pointer-events-none absolute inset-y-0 left-0 border-l-[4px] border-solid border-focus-ring"
         }), /* @__PURE__ */ l(L, {
           arrow: !0,
           title: c,

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

@@ -0,0 +1,39 @@
+import { cn as i } from "../../../helpers/cn.js";
+import { StyledSelectItem as u } 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 }) => {
+  const a = N(null);
+  return x(() => {
+    a.current?.querySelector(`#${CSS.escape(r(s))}`)?.scrollIntoView({ block: "nearest" });
+  }), /* @__PURE__ */ l("ul", {
+    ref: a,
+    id: f,
+    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, {
+      id: r(t),
+      selected: e.iso2 === d,
+      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: "flex w-full items-center justify-between gap-2",
+        children: [/* @__PURE__ */ o("span", {
+          className: "flex min-w-0 items-center gap-2",
+          children: [b?.(e.iso2, "eager"), /* @__PURE__ */ l("span", {
+            className: "truncate",
+            children: e.name
+          })]
+        }), /* @__PURE__ */ l("span", {
+          className: "shrink-0 font-medium text-delta-800",
+          children: `+${e.dialCode}`
+        })]
+      })
+    }, e.iso2))
+  });
+};
+export {
+  j as CountryCodeOptions
+};

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

@@ -0,0 +1,145 @@
+import { cn as m } from "../../../helpers/cn.js";
+import { ChevronDownIcon as E } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { useMobileMediaQuery as Q } from "../../../hooks/useMediaQuery.hook.js";
+import { StyledDialog as q } from "../../feedback/dialog/StyledDialog.js";
+import { StyledPopover as A } from "../../utils/popover/StyledPopover.js";
+import { notchedOutlineClass as F } from "../field-styles.js";
+import { StyledSearchField as W } from "../search-field/StyledSearchField.js";
+import { CountryCodeOptions as B } from "./CountryCodeOptions.js";
+import { useCountryPicker as G } from "./useCountryPicker.js";
+import { useEffect as K, useId as H, useRef as f, useState as x } from "react";
+import { Fragment as J, jsx as e, jsxs as s } from "react/jsx-runtime";
+var re = ({ dataTest: r, countries: b, value: n, onChange: O, disabled: i, selectCountryLabel: g, searchPlaceholder: P, renderFlag: u, labelledBy: v, className: M }) => {
+  const [t, w] = x(!1), [h, c] = x(""), [R, j] = x(null), y = f(null), C = f(null), I = f(!1), d = Q(), p = `${H()}-country-listbox`, N = b.find((a) => a.iso2 === n), k = N === void 0 ? "" : `+${N.dialCode}`, l = () => {
+    w(!1), c("");
+  }, D = (a) => {
+    O(a), l();
+  }, o = G({
+    countries: b,
+    selectedIso2: n,
+    query: h,
+    listId: p,
+    onSelect: D,
+    onDismiss: l
+  });
+  K(() => {
+    t && !d && y.current?.focus();
+  }, [t, d]), K(() => {
+    I.current && !t && C.current?.focus(), I.current = t;
+  }, [t]);
+  const S = /* @__PURE__ */ e(B, {
+    dataTest: r,
+    visible: o.visible,
+    selectedIso2: n,
+    activeIndex: o.activeIndex,
+    optionId: o.optionId,
+    onSelect: D,
+    listId: p,
+    label: g,
+    renderFlag: u
+  }), $ = {
+    role: "combobox",
+    "aria-activedescendant": o.visible.length > 0 ? o.optionId(o.activeIndex) : void 0,
+    "aria-autocomplete": "list",
+    "aria-controls": p,
+    "aria-expanded": !0
+  }, z = t && !d;
+  return /* @__PURE__ */ s(J, { children: [/* @__PURE__ */ s("div", {
+    ref: j,
+    "data-testid": `${r}-shell`,
+    style: { height: 40 },
+    className: m("group relative flex w-32 shrink-0 items-center gap-1.5 rounded px-3 text-base", i ? "cursor-not-allowed text-delta-300" : "text-delta-800"),
+    children: [/* @__PURE__ */ e("span", {
+      "aria-hidden": "true",
+      className: m(F({
+        disabled: i,
+        notched: !1
+      }), M)
+    }), z ? /* @__PURE__ */ s("span", {
+      className: "relative z-[1] flex w-full items-center gap-1.5",
+      children: [
+        u?.(n, "eager"),
+        /* @__PURE__ */ e("input", {
+          ref: y,
+          role: "combobox",
+          "data-testid": `${r}-search`,
+          className: "w-12 min-w-0 border-0 bg-transparent p-0 text-base outline-none",
+          value: h,
+          placeholder: k,
+          onChange: (a) => c(a.target.value),
+          onKeyDown: o.handleKeyDown,
+          "aria-controls": p,
+          "aria-expanded": !0,
+          "aria-activedescendant": $["aria-activedescendant"],
+          "aria-autocomplete": "list"
+        }),
+        /* @__PURE__ */ e("button", {
+          type: "button",
+          "data-testid": `${r}-collapse`,
+          "aria-labelledby": v,
+          "aria-expanded": !0,
+          onClick: l,
+          className: "ml-auto flex shrink-0 cursor-pointer border-0 bg-transparent p-0",
+          children: /* @__PURE__ */ e(E, {
+            width: 20,
+            height: 20,
+            className: "rotate-180"
+          })
+        })
+      ]
+    }) : /* @__PURE__ */ s("button", {
+      ref: C,
+      type: "button",
+      "data-testid": r,
+      disabled: i,
+      "aria-haspopup": "listbox",
+      "aria-expanded": t,
+      "aria-labelledby": v,
+      onClick: () => w(!0),
+      className: m("relative z-[1] flex w-full items-center gap-1.5 border-0 bg-transparent p-0 text-base", i ? "cursor-not-allowed text-delta-300" : "cursor-pointer text-delta-800"),
+      children: [
+        u?.(n, "eager"),
+        /* @__PURE__ */ e("span", {
+          className: "w-12 text-left",
+          children: k
+        }),
+        /* @__PURE__ */ e(E, {
+          width: 20,
+          height: 20,
+          className: m("ml-auto shrink-0 transition-transform", t && "rotate-180")
+        })
+      ]
+    })]
+  }), d ? /* @__PURE__ */ e(q, {
+    open: t,
+    onClose: l,
+    dataTest: `${r}-dialog`,
+    dialogTitle: g,
+    showCloseIcon: !0,
+    fullWidth: !0,
+    children: /* @__PURE__ */ s("div", {
+      className: "flex min-h-0 flex-1 flex-col",
+      children: [/* @__PURE__ */ e("div", {
+        className: "shrink-0 p-4",
+        children: /* @__PURE__ */ e(W, {
+          dataTest: `${r}-search`,
+          label: P,
+          value: h,
+          onChange: (a) => c(a.target.value),
+          onClear: () => c(""),
+          onKeyDown: o.handleKeyDown,
+          slotProps: { htmlInput: $ }
+        })
+      }), S]
+    })
+  }) : /* @__PURE__ */ e(A, {
+    open: t,
+    anchorEl: R,
+    onClose: l,
+    slotProps: { paper: { className: "flex max-h-80 w-80 flex-col overflow-hidden" } },
+    children: S
+  })] });
+};
+export {
+  re as CountryCodeSelect
+};

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

@@ -0,0 +1,25 @@
+import { cn as t } from "../../../helpers/cn.js";
+import { useState as c } from "react";
+import { jsx as a } from "react/jsx-runtime";
+var h = ({ iso2: r, src: o, loading: n = "lazy", className: d }) => {
+  const [s, i] = c(!1), e = t("h-4 w-6 shrink-0 rounded-sm bg-delta-100", d);
+  return s ? /* @__PURE__ */ a("span", {
+    "aria-hidden": "true",
+    "data-country": r.toLowerCase(),
+    className: e
+  }) : /* @__PURE__ */ a("img", {
+    src: o,
+    "data-country": r.toLowerCase(),
+    alt: "",
+    "aria-hidden": "true",
+    loading: n,
+    decoding: "async",
+    width: 24,
+    height: 16,
+    onError: () => i(!0),
+    className: t(e, "object-cover")
+  });
+};
+export {
+  h as StyledCountryFlag
+};

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

@@ -0,0 +1,74 @@
+import { cn as L } from "../../../helpers/cn.js";
+import { StyledInputField as M } from "../input-field/StyledInputField.js";
+import { StyledLink as V } from "../../navigation/link/StyledLink.js";
+import { CountryCodeSelect as W } from "./CountryCodeSelect.js";
+import { useId as z } from "react";
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+var E = (e) => e.replace(/\D/g, ""), U = ({ dataTest: e, label: l, countries: h, country: n, onCountryChange: x, value: s, onChange: f, onBlur: N, error: v, helperText: y, reserveHelperText: g = !0, disabled: d, readOnly: $, readOnlyText: i, readOnlyHref: m, required: c, placeholder: b, formatNationalNumber: I, renderFlag: C, selectCountryLabel: S, searchPlaceholder: F, id: j, name: P, size: k = "medium", fieldClassName: p, helperTextClassName: w, className: A }) => {
+  const B = z(), a = j ?? `${B}-phone`, u = `${a}-label`, o = I?.(s, n) ?? s;
+  return /* @__PURE__ */ r("div", {
+    className: L("flex flex-col", A),
+    "data-testid": `${e}-root`,
+    children: [l != null && /* @__PURE__ */ r("label", {
+      id: u,
+      htmlFor: a,
+      className: "pb-1 text-base font-semibold text-delta-800",
+      children: [l, c === !0 && /* @__PURE__ */ t("span", {
+        "aria-hidden": "true",
+        children: " *"
+      })]
+    }), $ === !0 ? /* @__PURE__ */ t("span", {
+      className: "py-2 text-base text-delta-800",
+      children: m === void 0 ? /* @__PURE__ */ t("span", {
+        "data-testid": `${e}-readonly`,
+        children: i ?? o
+      }) : /* @__PURE__ */ t(V, {
+        dataTest: `${e}-readonly`,
+        href: m,
+        className: "-ml-1",
+        contentNode: i ?? o
+      })
+    }) : /* @__PURE__ */ r("div", {
+      className: "flex items-start gap-2.5",
+      children: [/* @__PURE__ */ t(W, {
+        dataTest: `${e}-country`,
+        countries: h,
+        value: n,
+        onChange: x,
+        disabled: d,
+        selectCountryLabel: S,
+        searchPlaceholder: F,
+        renderFlag: C,
+        labelledBy: l == null ? void 0 : u,
+        className: p
+      }), /* @__PURE__ */ t(M, {
+        dataTest: `${e}-number`,
+        className: "max-w-[200px]",
+        id: a,
+        name: P,
+        value: o,
+        onChange: (D) => f(E(D.target.value)),
+        onBlur: N,
+        placeholder: b,
+        error: v,
+        disabled: d,
+        required: c,
+        fullWidth: !0,
+        helperText: y,
+        reserveHelperText: g,
+        size: k,
+        slotProps: {
+          htmlInput: {
+            inputMode: "tel",
+            autoComplete: "tel"
+          },
+          input: { className: p },
+          formHelperText: { className: w }
+        }
+      })]
+    })]
+  });
+};
+export {
+  U as StyledPhoneField
+};

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

@@ -0,0 +1,55 @@
+import { useMemo as m, useState as v } from "react";
+function D(r, i) {
+  const n = i.trim();
+  if (n.length === 0) return !0;
+  const s = n.replace(/^\+/, "").replace(/\D/g, "");
+  return s.length === 0 && !new RegExp("\\p{L}", "u").test(n) || r.name.toLocaleLowerCase().includes(n.toLocaleLowerCase()) ? !0 : s.length > 0 && r.dialCode.startsWith(s);
+}
+function b({ countries: r, selectedIso2: i, query: n, listId: s, onSelect: f, onDismiss: d }) {
+  const [p, a] = v(i), o = m(() => r.filter((e) => D(e, n)), [r, n]), l = o.findIndex((e) => e.iso2 === p), c = l >= 0 ? l : 0, h = (e) => `${s}-option-${e}`, u = (e) => {
+    if (o.length === 0) return;
+    const t = o[(c + e + o.length) % o.length];
+    t !== void 0 && a(t.iso2);
+  };
+  return {
+    visible: o,
+    activeIndex: c,
+    optionId: h,
+    handleKeyDown: (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), u(1);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), u(-1);
+          break;
+        case "Home": {
+          e.preventDefault();
+          const t = o[0];
+          t !== void 0 && a(t.iso2);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          const t = o[o.length - 1];
+          t !== void 0 && a(t.iso2);
+          break;
+        }
+        case "Enter": {
+          e.preventDefault();
+          const t = o[c];
+          t !== void 0 && f(t.iso2);
+          break;
+        }
+        case "Escape":
+          e.preventDefault(), d();
+          break;
+        default:
+          break;
+      }
+    }
+  };
+}
+export {
+  b as useCountryPicker
+};

package/dist/components/inputs/search-field/StyledSearchField.js

@@ -1,49 +1,52 @@
 import { cn as p } from "../../../helpers/cn.js";
-import { SearchIcon as m } from "../../icons/search-icon/SearchIcon.js";
+import { SearchIcon as u } from "../../icons/search-icon/SearchIcon.js";
 import { CloseIcon as f } from "../../icons/close-icon/CloseIcon.js";
-import { StyledInputField as u } from "../input-field/StyledInputField.js";
-import { useState as v } from "react";
+import { StyledInputField as v } from "../input-field/StyledInputField.js";
+import { useState as y } from "react";
 import { jsx as t } from "react/jsx-runtime";
-var I = ({ value: o, onClear: s, label: i, onFocus: d, onBlur: c, ...r }) => {
-  const [h, l] = v(!1), a = h || o, n = typeof i == "string" ? i : void 0;
+var F = ({ value: r, onClear: d, label: a, onFocus: c, onBlur: h, slotProps: o, ...n }) => {
+  const [m, l] = y(!1), i = m || r, s = typeof a == "string" ? a : void 0;
   return /* @__PURE__ */ t("div", {
     className: "relative w-full",
-    children: /* @__PURE__ */ t(u, {
+    children: /* @__PURE__ */ t(v, {
       size: "small",
       variant: "outlined",
-      value: o,
+      value: r,
       reserveHelperText: !1,
-      label: a ? i : void 0,
-      placeholder: a ? void 0 : n,
+      label: i ? a : void 0,
+      placeholder: i ? void 0 : s,
       onFocus: (e) => {
-        l(!0), d?.(e);
+        l(!0), c?.(e);
       },
       onBlur: (e) => {
-        l(!1), c?.(e);
+        l(!1), h?.(e);
       },
       slotProps: {
+        ...o,
         htmlInput: {
+          "aria-label": i ? void 0 : s,
+          ...o?.htmlInput,
           style: {
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
-            ...o ? { paddingRight: 40 } : {}
-          },
-          "aria-label": a ? void 0 : n
+            ...r ? { paddingRight: 40 } : {},
+            ...o?.htmlInput?.style
+          }
         },
         input: {
-          endAdornment: o ? /* @__PURE__ */ t("button", {
+          endAdornment: r ? /* @__PURE__ */ t("button", {
             type: "button",
             "aria-label": "Clear",
             "data-testid": "styled-search-clear-icon",
-            className: p("cursor-pointer rounded-full border-0 bg-delta-50", "flex items-center justify-center", "transform-gpu transition-all duration-300 ease-in-out", o ? "scale-100 opacity-100" : "pointer-events-none scale-75 opacity-0", r.readOnly && "-translate-x-[6.5px]"),
+            className: p("cursor-pointer rounded-full border-0 bg-delta-50", "flex items-center justify-center", "transform-gpu transition-all duration-300 ease-in-out", r ? "scale-100 opacity-100" : "pointer-events-none scale-75 opacity-0", n.readOnly && "-translate-x-[6.5px]"),
             style: {
               width: 24,
               height: 24,
               flexShrink: 0
             },
             onClick: (e) => {
-              e.preventDefault(), e.stopPropagation(), s?.();
+              e.preventDefault(), e.stopPropagation(), d?.();
             },
             children: /* @__PURE__ */ t(f, {
               width: 20,
@@ -52,26 +55,27 @@ var I = ({ value: o, onClear: s, label: i, onFocus: d, onBlur: c, ...r }) => {
               className: "pointer-events-none"
             })
           }) : null,
-          startAdornment: a ? void 0 : /* @__PURE__ */ t("span", {
+          startAdornment: i ? void 0 : /* @__PURE__ */ t("span", {
             "data-testid": "styled-search-icon",
             className: "flex items-center",
-            children: /* @__PURE__ */ t(m, {
+            children: /* @__PURE__ */ t(u, {
               width: 24,
               height: 24,
               color: "var(--colors-delta-700)",
               className: "pointer-events-none"
             })
-          })
+          }),
+          ...o?.input
         }
       },
-      ...r,
+      ...n,
       sx: {
-        width: r.fullWidth ? "100%" : "var(--dynamic-toolbar-search-width, 160px)",
-        ...r.sx
+        width: n.fullWidth ? "100%" : "var(--dynamic-toolbar-search-width, 160px)",
+        ...n.sx
       }
     })
   });
 };
 export {
-  I as StyledSearchField
+  F as StyledSearchField
 };

package/dist/components/inputs/select/StyledSelect.js

@@ -1,4 +1,4 @@
-import { cn as h } from "../../../helpers/cn.js";
+import { cn as y } from "../../../helpers/cn.js";
 import { resolveSx as je } from "../../../helpers/sx.js";
 import { ChevronDownIcon as Ue } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
 import { CloseIcon as Ve } from "../../icons/close-icon/CloseIcon.js";
@@ -11,12 +11,12 @@ import { useFormControlContext as Xe } from "../../miscellaneous/FormControlCont
 import { Children as se, cloneElement as Ze, isValidElement as u, useEffect as B, useId as et, useRef as tt, useState as x } from "react";
 import { jsx as l, jsxs as L } from "react/jsx-runtime";
 import { FloatingPortal as ot, autoUpdate as rt, flip as st, offset as nt, shift as lt, size as it, useClick as at, useDismiss as ct, useFloating as dt, useInteractions as ut, useMergeRefs as ft, useRole as pt } from "@floating-ui/react";
-var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, errorText: ie, helperText: j, reserveHelperText: ae, expandHelperText: ce = !0, allowClear: U, disabled: de, readOnly: c, name: w, placeholder: S, displayEmpty: C, multiple: f, renderValue: V, fullWidth: ue, className: fe, style: pe, sx: me, variant: be, children: q, MenuProps: ge, onFocus: ye, onBlur: he, labelId: A }) => {
-  const d = Xe(), v = `${T}-listbox`, R = be === "standard", p = le ?? d?.error ?? !1, n = de ?? d?.disabled ?? !1, Y = p ? ie ?? j : j, { show: F, role: xe } = Je("StyledSelect", p, Y, ae, c), z = et(), { fieldRef: we, rowRef: Ae, rowStyle: ve } = Ge(ce && F), [r, K] = x(!1), [k, I] = x(!1), [m, b] = x(null), [Re, W] = x(ne), O = M !== void 0, o = O ? M : Re, i = Array.isArray(o) ? o.length > 0 : o !== void 0 && o !== "" && o !== null, g = se.toArray(q), G = (e) => f ? Array.isArray(o) && o.includes(e) : e === o, s = g.flatMap((e, t) => u(e) && !e.props.disabled ? [t] : []), E = g.findIndex((e) => u(e) && G(e.props.value)), ke = (e = 1) => s.includes(E) ? E : s[e === 1 ? 0 : s.length - 1] ?? null, D = m === null ? void 0 : `${v}-option-${m}`, P = tt(null), y = (e) => {
+var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, errorText: ie, helperText: j, reserveHelperText: ae, expandHelperText: ce = !0, allowClear: U, disabled: de, readOnly: c, name: w, placeholder: S, displayEmpty: C, multiple: f, renderValue: V, fullWidth: ue, className: fe, style: pe, sx: me, variant: be, children: q, MenuProps: ge, onFocus: he, onBlur: ye, labelId: v }) => {
+  const d = Xe(), A = `${T}-listbox`, R = be === "standard", p = le ?? d?.error ?? !1, n = de ?? d?.disabled ?? !1, Y = p ? ie ?? j : j, { show: F, role: xe } = Je("StyledSelect", p, Y, ae, c), z = et(), { fieldRef: we, rowRef: ve, rowStyle: Ae } = Ge(ce && F), [r, K] = x(!1), [k, I] = x(!1), [m, b] = x(null), [Re, W] = x(ne), O = M !== void 0, o = O ? M : Re, i = Array.isArray(o) ? o.length > 0 : o !== void 0 && o !== "" && o !== null, g = se.toArray(q), G = (e) => f ? Array.isArray(o) && o.includes(e) : e === o, s = g.flatMap((e, t) => u(e) && !e.props.disabled ? [t] : []), E = g.findIndex((e) => u(e) && G(e.props.value)), ke = (e = 1) => s.includes(E) ? E : s[e === 1 ? 0 : s.length - 1] ?? null, D = m === null ? void 0 : `${A}-option-${m}`, P = tt(null), h = (e) => {
     K(e), e || b(null);
   }, { refs: { domReference: De, reference: J, setFloating: Se, setReference: Ce }, floatingStyles: Fe, context: N } = dt({
     open: r,
-    onOpenChange: y,
+    onOpenChange: h,
     placement: "bottom-start",
     strategy: "fixed",
     whileElementsMounted: rt,
@@ -55,18 +55,18 @@ var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, err
     O || W(oe), $?.({ target: {
       value: oe,
       name: w
-    } }, t), a && (y(!1), requestAnimationFrame(() => De.current?.focus()));
+    } }, t), a && (h(!1), requestAnimationFrame(() => De.current?.focus()));
   }, ee = () => {
     const e = f ? [] : "";
     O || W(e), $?.({ target: {
       value: e,
       name: w
-    } }, null), y(!1), I(!1);
+    } }, null), h(!1), I(!1);
   }, Pe = se.map(q, (e, t) => {
     if (!u(e)) return e;
     const a = e.props.value;
     return Ze(e, {
-      id: `${v}-option-${t}`,
+      id: `${A}-option-${t}`,
       active: t === m,
       selected: G(a),
       onClick: () => {
@@ -96,12 +96,12 @@ var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, err
         e.preventDefault(), Be(e.key === "ArrowDown" ? 1 : -1);
         return;
       }
-      r && (e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), He(e.key === "ArrowDown" ? 1 : -1)) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), b(s[e.key === "Home" ? 0 : s.length - 1] ?? null)) : e.key === " " ? (e.preventDefault(), te(!1)) : e.key === "Enter" ? (e.preventDefault(), te(!0)) : e.key === "Escape" ? (e.preventDefault(), y(!1)) : e.key === "Tab" && y(!1));
+      r && (e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), He(e.key === "ArrowDown" ? 1 : -1)) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), b(s[e.key === "Home" ? 0 : s.length - 1] ?? null)) : e.key === " " ? (e.preventDefault(), te(!1)) : e.key === "Enter" ? (e.preventDefault(), te(!0)) : e.key === "Escape" ? (e.preventDefault(), h(!1)) : e.key === "Tab" && h(!1));
     }
   }, H = R && (r || k), Te = n ? "text-delta-300" : H ? "text-gama-500" : "text-delta-800", Me = n ? "text-delta-300" : "text-delta-700";
   return /* @__PURE__ */ L("div", {
     ref: we,
-    className: h("group relative inline-flex flex-col", ue && "w-full", fe),
+    className: y("group relative inline-flex flex-col", ue && "w-full", fe),
     style: {
       fontFamily: "Roboto, Helvetica, Arial, sans-serif",
       ...je(me),
@@ -119,25 +119,25 @@ var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, err
         role: "combobox",
         "aria-haspopup": "listbox",
         "aria-expanded": r,
-        "aria-controls": v,
+        "aria-controls": A,
         "aria-activedescendant": r ? D : void 0,
-        "aria-labelledby": A,
-        "aria-label": A ? void 0 : w,
+        "aria-labelledby": v,
+        "aria-label": v ? void 0 : w,
         "aria-invalid": p ? !0 : void 0,
         "aria-describedby": F ? z : void 0,
         "aria-disabled": n ? !0 : void 0,
         disabled: n,
         onFocus: (e) => {
-          I(!0), ye?.(e);
+          I(!0), he?.(e);
         },
         onBlur: (e) => {
-          I(!1), he?.(e);
+          I(!1), ye?.(e);
         },
         style: { minWidth: i && !R ? 105 : void 0 },
-        className: h("relative flex w-full items-center justify-between text-left outline-none", "h-10 rounded-lg border-0 px-3 text-base transition-colors", H ? "bg-gama-50" : "bg-transparent", Te, R && "min-w-0", n && "cursor-not-allowed", c && "pointer-events-none"),
+        className: y("relative flex w-full items-center justify-between text-left outline-none", "h-10 rounded-lg border-0 px-3 text-base transition-colors", H ? "bg-gama-50" : "bg-transparent", Te, R && "min-w-0", n && "cursor-not-allowed", c && "pointer-events-none"),
         children: [
           /* @__PURE__ */ l("span", {
-            className: h("min-w-0 flex-1 truncate", !i && "text-delta-500"),
+            className: y("min-w-0 flex-1 truncate", !i && "text-delta-500"),
             children: i || C ? _e : S
           }),
           /* @__PURE__ */ L("span", {
@@ -145,7 +145,7 @@ var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, err
             children: [U && i && !n && /* @__PURE__ */ l("span", {
               "aria-hidden": "true",
               "data-testid": "select-clear-button",
-              className: "flex items-center justify-center rounded-full p-[2px] hover:bg-gama-100",
+              className: "invisible flex items-center justify-center rounded-full p-[2px] group-focus-within:visible hover:bg-gama-100",
               onClick: (e) => {
                 e.stopPropagation(), ee();
               },
@@ -156,7 +156,7 @@ var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, err
             }), /* @__PURE__ */ l(Ue, {
               width: 24,
               height: 24,
-              className: h("shrink-0 transition-transform", H ? "text-gama-500" : Me, r && "rotate-180")
+              className: y("shrink-0 transition-transform", H ? "text-gama-500" : Me, r && "rotate-180")
             })]
           }),
           /* @__PURE__ */ l("div", { className: Qe({
@@ -173,28 +173,28 @@ var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, err
         children: /* @__PURE__ */ l("ul", {
           ref: Ee,
           ...Oe(),
-          id: v,
+          id: A,
           role: "listbox",
-          "aria-labelledby": A,
-          "aria-label": A ? void 0 : w,
+          "aria-labelledby": v,
+          "aria-label": v ? void 0 : w,
           ..._ ? qe : {},
           style: {
             ..._ ? Ye : {},
             ...Fe,
             fontFamily: "Roboto, Helvetica, Arial, sans-serif"
           },
-          className: h("z-[1300] m-0 max-h-72 list-none overflow-auto rounded border border-solid border-delta-300 bg-white px-0 py-2 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", "[&>li:not(:last-child)]:border-0 [&>li:not(:last-child)]:border-b", "[&>li:not(:last-child)]:border-solid [&>li:not(:last-child)]:border-delta-200", ge?.className),
+          className: y("z-[1300] m-0 max-h-72 list-none overflow-auto rounded border border-solid border-delta-300 bg-white px-0 py-2 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", "[&>li:not(:last-child)]:border-0 [&>li:not(:last-child)]:border-b", "[&>li:not(:last-child)]:border-solid [&>li:not(:last-child)]:border-delta-200", ge?.className),
           children: Pe
         })
       }),
       F && /* @__PURE__ */ l(We, {
-        ref: Ae,
+        ref: ve,
         id: z,
         role: xe,
         error: p,
         message: Y,
         className: "m-0 mr-[14px] box-border items-center",
-        style: ve
+        style: Ae
       })
     ]
   });