asma-ui-core 3.86.2 → 3.87.1

package/dist/components/inputs/select-autocomplete/StyledSelectAutocomplete.js

@@ -3,21 +3,21 @@ import { ChevronDownIcon as et } from "../../icons/chevron-down-icon/ChevronDown
 import { CloseIcon as tt } from "../../icons/close-icon/CloseIcon.js";
 import { CheckIcon as lt } from "../../icons/check-icon/CheckIcon.js";
 import { PlusIconCircle as rt } from "../../icons/plus-icon-circle/PlusIconCircle.js";
-import { StyledChip as ot } from "../../data-display/chip/StyledChip.js";
+import { StyledChip as st } from "../../data-display/chip/StyledChip.js";
 import { StyledCheckbox as ae } from "../checkbox/base-ui/StyledCheckbox.js";
-import { TOP_LAYER_PROPS as st, TOP_LAYER_RESET_STYLE as nt, getOpenModalDialogAncestor as at, shouldUsePopoverTopLayer as it, useTopLayerRef as ct } from "../../../hooks/useTopLayer.hook.js";
+import { TOP_LAYER_PROPS as ot, TOP_LAYER_RESET_STYLE as nt, getOpenModalDialogAncestor as at, shouldUsePopoverTopLayer as it, useTopLayerRef as ct } from "../../../hooks/useTopLayer.hook.js";
 import { LoadingIcon as dt } from "../../../table/shared-components/LoadingIcon.js";
 import z from "./StyledSelectAutocomplete.module.js";
 import { useEffect as ie, useMemo as W, useRef as ce, useState as D } from "react";
-import { jsx as s, jsxs as I } from "react/jsx-runtime";
-import { FloatingPortal as ut, autoUpdate as ft, flip as pt, offset as mt, shift as ht, size as bt, useDismiss as gt, useFloating as xt, useInteractions as wt, useMergeRefs as de, useRole as yt } from "@floating-ui/react";
+import { jsx as o, jsxs as I } from "react/jsx-runtime";
+import { FloatingPortal as ut, autoUpdate as pt, flip as ft, offset as mt, shift as ht, size as bt, useDismiss as gt, useFloating as xt, useInteractions as wt, useMergeRefs as de, useRole as yt } from "@floating-ui/react";
 var kt = (l) => typeof l == "object" && l !== null && "label" in l ? String(l.label) : String(l), vt = (l) => typeof l == "object" && l !== null && "disabled" in l && !!l.disabled;
-function Ft({ dataTest: l, options: f, renderInput: ue, value: A, onChange: N, getOptionLabel: fe, getOptionKey: C, isOptionEqualToValue: H, renderOption: U, renderValue: V, filterOptions: _, loading: B, loadingText: pe = "Loading…", noOptionsText: me = "No options", disabled: M, readOnly: g, error: he, helperText: be, size: ge = "small", disableClearable: xe, disableCloseOnSelect: we, popupIcon: ye, autoHeight: ke, multiple: ve, allowSelectAll: T, selectAllLabel: De = "Select all", fullWidth: Ie, classes: Ae, inputValue: R, onInputChange: Ne, open: Y, onOpen: Ce, onClose: Me, className: Re, wrapperClassName: Se, getOptionDisabled: $e, slotProps: q }) {
-  const r = ve === !0, d = fe ?? kt, S = (e, t) => H ? H(e, t) : e === t, [Pe, Le] = D(!1), a = Y ?? Pe, u = (e) => {
+function Ft({ dataTest: l, options: p, renderInput: ue, value: A, onChange: N, getOptionLabel: pe, getOptionKey: C, isOptionEqualToValue: H, renderOption: U, renderValue: V, filterOptions: _, loading: B, loadingText: fe = "Loading…", noOptionsText: me = "No options", disabled: M, readOnly: g, error: he, helperText: be, size: ge = "small", disableClearable: xe, disableCloseOnSelect: we, popupIcon: ye, autoHeight: ke, multiple: ve, allowSelectAll: T, selectAllLabel: De = "Select all", fullWidth: Ie, classes: Ae, inputValue: R, onInputChange: Ne, open: Y, onOpen: Ce, onClose: Me, className: Re, wrapperClassName: Se, getOptionDisabled: $e, slotProps: q }) {
+  const r = ve === !0, d = pe ?? kt, S = (e, t) => H ? H(e, t) : e === t, [Pe, Le] = D(!1), a = Y ?? Pe, u = (e) => {
     e && (g || M) || (Y === void 0 && Le(e), e ? Ce?.() : (x(null), Me?.()));
   }, [Ee, G] = D(""), b = R ?? Ee, $ = (e, t, n) => {
     R === void 0 && G(t), Ne?.(e, t, n);
-  }, [o, x] = D(null), J = `${l}-listbox`, Q = ce([]), X = ce(null), [_e, Fe] = D(null), [Z, Oe] = D(null), i = r ? Array.isArray(A) ? A : [] : [], w = r ? null : A ?? null, K = !r && w !== null ? d(w) : "";
+  }, [s, x] = D(null), J = `${l}-listbox`, Q = ce([]), X = ce(null), [_e, Fe] = D(null), [Z, Oe] = D(null), i = r ? Array.isArray(A) ? A : [] : [], w = r ? null : A ?? null, K = !r && w !== null ? d(w) : "";
   ie(() => {
     R !== void 0 || r || G(K);
   }, [
@@ -26,26 +26,26 @@ function Ft({ dataTest: l, options: f, renderInput: ue, value: A, onChange: N, g
     K
   ]);
   const F = (e) => r ? i.some((t) => S(e, t)) : w !== null && S(e, w), P = (e) => $e?.(e) ?? vt(e), ee = W(() => {
-    const e = [...f];
+    const e = [...p];
     if (_) return _(e, { inputValue: b });
     const t = !r && w !== null ? d(w).toLowerCase() : null;
     if (!b || b.toLowerCase() === t) return e;
     const n = b.toLowerCase();
     return e.filter((m) => d(m).toLowerCase().includes(n));
   }, [
-    f,
+    p,
     b,
     _,
     A
-  ]), p = W(() => ee.slice(0, 100), [ee]), te = p.flatMap((e, t) => P(e) ? [] : [t]), c = T && r ? [-1, ...te] : te, k = p.findIndex(F);
+  ]), f = W(() => ee.slice(0, 100), [ee]), te = f.flatMap((e, t) => P(e) ? [] : [t]), c = T && r ? [-1, ...te] : te, k = f.findIndex(F);
   ie(() => {
     if (!a) return;
-    const e = o ?? k;
+    const e = s ?? k;
     if (e < 0) return;
     const t = requestAnimationFrame(() => Q.current[e]?.scrollIntoView({ block: "nearest" }));
     return () => cancelAnimationFrame(t);
   }, [
-    o,
+    s,
     a,
     Z,
     k
@@ -55,10 +55,10 @@ function Ft({ dataTest: l, options: f, renderInput: ue, value: A, onChange: N, g
     onOpenChange: u,
     placement: "bottom-start",
     strategy: "fixed",
-    whileElementsMounted: ft,
+    whileElementsMounted: pt,
     middleware: [
       mt(0),
-      pt({ padding: 8 }),
+      ft({ padding: 8 }),
       ht({ padding: 8 }),
       bt({ apply({ rects: e, availableHeight: t }) {
         Fe(e.reference.width), Oe(ke ? t - 8 : Math.min(t - 8, 320));
@@ -75,22 +75,22 @@ function Ft({ dataTest: l, options: f, renderInput: ue, value: A, onChange: N, g
       N?.(e, y, m ? "removeOption" : "selectOption", { option: t }), $(e, "", "reset"), n && u(!1);
     } else
       N?.(e, t, "selectOption", { option: t }), $(e, d(t), "reset"), n && u(!1);
-  }, oe = (e) => {
+  }, se = (e) => {
     N?.(e, r ? [] : null, "clear", void 0), $(e, "", "clear");
   }, j = (e) => {
-    const t = f.length > 0 && i.length === f.length;
-    N?.(e, t ? [] : f, t ? "clear" : "selectOption", void 0);
+    const t = p.length > 0 && i.length === p.length;
+    N?.(e, t ? [] : p, t ? "clear" : "selectOption", void 0);
   }, Ye = (e) => {
-    if (e.key === "Backspace" && b === "" && se) {
+    if (e.key === "Backspace" && b === "" && oe) {
       const t = i[i.length - 1];
-      r ? t !== void 0 && v(e, t, !1) : oe(e);
+      r ? t !== void 0 && v(e, t, !1) : se(e);
     } else if (e.key === "Enter" && !a)
       e.preventDefault(), u(!0);
-    else if (e.key === "Enter" && o === -1)
+    else if (e.key === "Enter" && s === -1)
       e.preventDefault(), j(e);
-    else if (e.key === "Enter" && o != null && p[o] != null) {
+    else if (e.key === "Enter" && s != null && f[s] != null) {
       e.preventDefault();
-      const t = p[o];
+      const t = f[s];
       P(t) || v(e, t, !0);
     } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       if (e.preventDefault(), !a) {
@@ -100,19 +100,19 @@ function Ft({ dataTest: l, options: f, renderInput: ue, value: A, onChange: N, g
       Te(e.key === "ArrowDown" ? 1 : -1);
     } else if (e.key === "Home" || e.key === "End")
       e.preventDefault(), x(c[e.key === "Home" ? 0 : c.length - 1] ?? null);
-    else if (e.key === " " && o === -1)
+    else if (e.key === " " && s === -1)
       e.preventDefault(), j(e);
-    else if (e.key === " " && o != null && p[o] != null) {
+    else if (e.key === " " && s != null && f[s] != null) {
       e.preventDefault();
-      const t = p[o];
+      const t = f[s];
       P(t) || v(e, t, !1);
     } else e.key === "Escape" ? (e.preventDefault(), u(!1)) : e.key === "Tab" && u(!1);
-  }, se = !xe && !g && !M && (r ? i.length > 0 : w !== null);
+  }, oe = !xe && !g && !M && (r ? i.length > 0 : w !== null);
   let ne;
-  a && o != null && (o === -1 || p[o] !== void 0) && (ne = o === -1 ? `${l}-select-all` : `${l}-option-${o}`);
+  a && s != null && (s === -1 || f[s] !== void 0) && (ne = s === -1 ? `${l}-select-all` : `${l}-option-${s}`);
   const qe = (e) => {
     e.preventDefault(), !(M || g) && (X.current?.focus(), u(!a));
-  }, Ge = r ? V ? V(i, ({ index: e }) => ({ "data-index": e })) : i.map((e, t) => /* @__PURE__ */ s(ot, {
+  }, Ge = r ? V ? V(i, ({ index: e }) => ({ "data-index": e })) : i.map((e, t) => /* @__PURE__ */ o(st, {
     dataTest: `selected-chip-${d(e)}`,
     label: d(e),
     readOnly: g,
@@ -121,26 +121,26 @@ function Ft({ dataTest: l, options: f, renderInput: ue, value: A, onChange: N, g
   }, C ? C(e) : `${d(e)}-${t}`)) : void 0, Je = /* @__PURE__ */ I("span", {
     className: "flex items-center gap-1",
     children: [
-      B && /* @__PURE__ */ s(dt, {
+      B && /* @__PURE__ */ o(dt, {
         width: 20,
         height: 20,
         className: "animate-spin"
       }),
-      se && /* @__PURE__ */ s("button", {
+      oe && /* @__PURE__ */ o("button", {
         type: "button",
         tabIndex: -1,
         "aria-label": "Clear",
         "data-testid": `${l}-clear`,
         className: "invisible flex min-h-6 min-w-6 cursor-pointer items-center justify-center rounded-full border-0 bg-delta-50 group-focus-within:visible",
         onMouseDown: (e) => e.preventDefault(),
-        onClick: oe,
-        children: /* @__PURE__ */ s(tt, {
+        onClick: se,
+        children: /* @__PURE__ */ o(tt, {
           width: 20,
           height: 20,
           className: "text-delta-700"
         })
       }),
-      g ? null : /* @__PURE__ */ s("button", {
+      g ? null : /* @__PURE__ */ o("button", {
         type: "button",
         tabIndex: -1,
         "aria-label": "Toggle options",
@@ -149,11 +149,11 @@ function Ft({ dataTest: l, options: f, renderInput: ue, value: A, onChange: N, g
         className: "flex cursor-pointer items-center border-0 bg-transparent",
         onMouseDown: (e) => e.preventDefault(),
         onClick: qe,
-        children: ye ?? (r ? /* @__PURE__ */ s(rt, {
+        children: ye ?? (r ? /* @__PURE__ */ o(rt, {
           width: 24,
           height: 24,
           className: "text-delta-700"
-        }) : /* @__PURE__ */ s(et, {
+        }) : /* @__PURE__ */ o(et, {
           width: 24,
           height: 24,
           className: E(z["select-custom-icon"], a && z["select-custom-icon-open"], "text-delta-700")
@@ -190,30 +190,30 @@ function Ft({ dataTest: l, options: f, renderInput: ue, value: A, onChange: N, g
         endAdornment: Je
       }
     }
-  }, Xe = E("relative box-border flex min-h-10 cursor-pointer items-center gap-x-3 px-3 py-1.5 text-base text-delta-800", "aria-selected:bg-gama-50 hover:bg-delta-50", "aria-disabled:cursor-default aria-disabled:!bg-transparent aria-disabled:text-delta-300"), Ze = (e, t, n) => {
+  }, Xe = E("asma-pressable", "relative box-border flex min-h-10 cursor-pointer items-center gap-x-3 px-3 py-1.5 text-base text-delta-800", "aria-selected:bg-gama-50 hover:bg-delta-50", "aria-disabled:cursor-default aria-disabled:!bg-transparent aria-disabled:text-delta-300"), Ze = (e, t, n) => {
     const { key: m, ...y } = e;
     return /* @__PURE__ */ I("li", {
       ...y,
       children: [
-        e["data-active"] !== void 0 && /* @__PURE__ */ s("span", {
+        e["data-active"] !== void 0 && /* @__PURE__ */ o("span", {
           "aria-hidden": "true",
           className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
         }),
-        r ? /* @__PURE__ */ s(ae, {
+        r ? /* @__PURE__ */ o(ae, {
           dataTest: `${l}-${d(t)}-checkbox`,
           checked: n.selected,
           size: "small",
           hideWrapper: !0,
           decorative: !0
-        }) : /* @__PURE__ */ s("span", {
+        }) : /* @__PURE__ */ o("span", {
           className: "w-5",
-          children: n.selected && /* @__PURE__ */ s(lt, {
+          children: n.selected && /* @__PURE__ */ o(lt, {
             width: 20,
             height: 20,
             className: "text-gama-500"
           })
         }),
-        /* @__PURE__ */ s("span", {
+        /* @__PURE__ */ o("span", {
           className: "line-clamp-2 min-w-0 flex-1 break-words",
           children: d(t)
         })
@@ -236,7 +236,7 @@ function Ft({ dataTest: l, options: f, renderInput: ue, value: A, onChange: N, g
       id: `${l}-option-${t}`,
       "aria-selected": F(e),
       "aria-disabled": n || void 0,
-      "data-active": o === t ? "" : void 0,
+      "data-active": s === t ? "" : void 0,
       className: Xe
     }, y = {
       selected: F(e),
@@ -247,11 +247,11 @@ function Ft({ dataTest: l, options: f, renderInput: ue, value: A, onChange: N, g
   };
   return /* @__PURE__ */ I("div", {
     className: E(z.styledSelectAutocompleteWrapper, !Ie && "w-auto", Se, Re),
-    children: [ue(Qe), a && /* @__PURE__ */ s(ut, {
+    children: [ue(Qe), a && /* @__PURE__ */ o(ut, {
       root: re,
       children: /* @__PURE__ */ I("ul", {
         ref: Ve,
-        ...O ? st : {},
+        ...O ? ot : {},
         style: {
           ...O ? nt : {},
           ...je,
@@ -268,39 +268,39 @@ function Ft({ dataTest: l, options: f, renderInput: ue, value: A, onChange: N, g
         children: [T && r && /* @__PURE__ */ I("li", {
           id: `${l}-select-all`,
           role: "option",
-          "aria-selected": f.length > 0 && i.length === f.length,
-          "data-active": o === -1 ? "" : void 0,
+          "aria-selected": p.length > 0 && i.length === p.length,
+          "data-active": s === -1 ? "" : void 0,
           tabIndex: -1,
           onMouseDown: (e) => e.preventDefault(),
           onClick: j,
           onMouseMove: () => x(null),
           className: "relative flex min-h-12 cursor-pointer items-center gap-x-1 border-0 border-b border-solid border-delta-200 px-4 text-sm text-delta-700 aria-selected:bg-gama-50 hover:bg-delta-50",
           children: [
-            o === -1 && /* @__PURE__ */ s("span", {
+            s === -1 && /* @__PURE__ */ o("span", {
               "aria-hidden": "true",
               className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
             }),
-            /* @__PURE__ */ s(ae, {
+            /* @__PURE__ */ o(ae, {
               dataTest: `${l}-select-all`,
-              checked: f.length > 0 && i.length === f.length,
+              checked: p.length > 0 && i.length === p.length,
               size: "small",
               hideWrapper: !0,
               decorative: !0
             }),
-            /* @__PURE__ */ s("span", {
+            /* @__PURE__ */ o("span", {
               className: "flex-1 truncate py-2",
               children: De
             })
           ]
-        }), B ? /* @__PURE__ */ s("li", {
+        }), B ? /* @__PURE__ */ o("li", {
           role: "presentation",
           className: "px-3 py-2 text-sm text-delta-600",
-          children: pe
-        }) : p.length === 0 ? /* @__PURE__ */ s("li", {
+          children: fe
+        }) : f.length === 0 ? /* @__PURE__ */ o("li", {
           role: "presentation",
           className: "px-3 py-2 text-sm text-delta-600",
           children: me
-        }) : p.map(Ke)]
+        }) : f.map(Ke)]
       })
     })]
   });

package/dist/components/inputs/switch/base-ui/StyledSwitch.js

@@ -15,53 +15,53 @@ var B = ({ className: t }) => /* @__PURE__ */ e("svg", {
     fill: "currentColor",
     rx: "0.75"
   })
-}), L = ({ width: t = 11, height: n = 11, className: i = "", onClick: c, color: o }) => /* @__PURE__ */ e("svg", {
+}), L = ({ width: t = 11, height: n = 11, className: i = "", onClick: a, color: c }) => /* @__PURE__ */ e("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: t,
   height: n,
   viewBox: "0 0 448 512",
   className: i,
-  onClick: c,
-  style: N(o),
+  onClick: a,
+  style: N(c),
   "aria-hidden": "true",
   focusable: "false",
   children: /* @__PURE__ */ e("path", {
     fill: "currentColor",
     d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7L393.4 105.4c12.5-12.5 32.8-12.5 45.2 0"
   })
-}), z = I(({ checked: t, defaultChecked: n = !1, onChange: i, disabled: c, readOnly: o, required: m, error: f, id: l, dataTest: u, className: v, onClick: w, ...p }, g) => {
-  const [k, x] = b(n), d = t !== void 0, a = d ? t : k, C = (S) => {
-    if (o || c) return;
-    const s = !a;
-    d || x(s), i?.({ target: {
-      checked: s,
-      name: l
-    } }, s), w?.(S);
+}), z = I(({ checked: t, defaultChecked: n = !1, onChange: i, disabled: a, readOnly: c, required: m, error: f, id: s, dataTest: u, className: v, onClick: w, ...p }, g) => {
+  const [k, x] = b(n), d = t !== void 0, o = d ? t : k, C = (S) => {
+    if (c || a) return;
+    const l = !o;
+    d || x(l), i?.({ target: {
+      checked: l,
+      name: s
+    } }, l), w?.(S);
   }, h = r.iconContent;
   return /* @__PURE__ */ e("button", {
     ...p,
     ref: g,
     type: "button",
     role: "switch",
-    "aria-checked": a,
-    "aria-readonly": o,
+    "aria-checked": o,
+    "aria-readonly": c,
     "aria-required": m,
-    className: y(r.switch, v),
+    className: y(r.switch, "asma-touch-ready asma-hit-area", v),
     onClick: C,
-    disabled: c,
-    id: l,
-    name: l,
+    disabled: a,
+    id: s,
+    name: s,
     "data-testid": u,
-    "data-checked": a ? "" : void 0,
-    "data-unchecked": a ? void 0 : "",
-    "data-disabled": c ? "" : void 0,
-    "data-readonly": o ? "" : void 0,
+    "data-checked": o ? "" : void 0,
+    "data-unchecked": o ? void 0 : "",
+    "data-disabled": a ? "" : void 0,
+    "data-readonly": c ? "" : void 0,
     "data-error": f ? "" : void 0,
     children: /* @__PURE__ */ e("span", {
       className: r.thumb,
       children: /* @__PURE__ */ e("span", {
         className: r.icon,
-        children: a ? /* @__PURE__ */ e(L, { className: h }) : /* @__PURE__ */ e(B, { className: h })
+        children: o ? /* @__PURE__ */ e(L, { className: h }) : /* @__PURE__ */ e(B, { className: h })
       })
     })
   });

package/dist/components/navigation/link/StyledLink.js

@@ -2,9 +2,9 @@ import e from "./StyledLink.module.js";
 import t from "clsx";
 import "react";
 import { jsxs as i } from "react/jsx-runtime";
-var g = ({ href: d, disabled: k, size: m = "large", dataTest: n, reflink: y, className: r, content: a, contentNode: s, ...c }) => {
+var u = ({ href: d, disabled: m, size: k = "large", dataTest: n, reflink: y, className: a, content: r, contentNode: s, ...c }) => {
   let l = e["styled-link-large"];
-  switch (m) {
+  switch (k) {
     case "large":
       l = e["styled-link-large"];
       break;
@@ -15,19 +15,19 @@ var g = ({ href: d, disabled: k, size: m = "large", dataTest: n, reflink: y, cla
       l = e["styled-link-xs"];
       break;
   }
-  return k ? /* @__PURE__ */ i("span", {
-    className: t(e["styled-link"], e["styled-link-disabled"], l, r),
-    children: [a, s]
+  return m ? /* @__PURE__ */ i("span", {
+    className: t(e["styled-link"], e["styled-link-disabled"], l, a),
+    children: [r, s]
   }) : /* @__PURE__ */ i("a", {
     ...c,
     "data-testid": n,
     ref: y,
     href: d,
     tabIndex: 0,
-    className: t(e["styled-link"], l, r),
-    children: [a, s]
+    className: t(e["styled-link"], "asma-touch-ready", l, a),
+    children: [r, s]
   });
 };
 export {
-  g as StyledLink
+  u as StyledLink
 };

package/dist/components/navigation/listbox/Listbox.js

@@ -1,31 +1,32 @@
-import { tabbableWithin as L } from "../../../helpers/focusable.js";
-import { ClickAwayListener as $ } from "../../mui-compat/ClickAwayListener.js";
-import { Children as C, cloneElement as D, createContext as O, isValidElement as g, useCallback as B, useContext as S, useEffect as w, useId as M, useMemo as T, useRef as q, useState as k } from "react";
-import { jsx as x } from "react/jsx-runtime";
-var I = O(null), b = () => {
-  const t = S(I);
+import { cn as w } from "../../../helpers/cn.js";
+import { tabbableWithin as $ } from "../../../helpers/focusable.js";
+import { ClickAwayListener as C } from "../../mui-compat/ClickAwayListener.js";
+import { Children as O, cloneElement as g, createContext as D, isValidElement as B, useCallback as N, useContext as S, useEffect as I, useId as M, useMemo as T, useRef as q, useState as k } from "react";
+import { jsx as m } from "react/jsx-runtime";
+var A = D(null), y = () => {
+  const t = S(A);
   if (!t) throw new Error("Listbox.Button/Options/Option must be rendered inside <Listbox>");
   return t;
-}, h = (t, l) => typeof t == "function" ? t(l) : t;
-function K({ value: t, onChange: l, children: d }) {
-  const [s, u] = k(!1), [n, o] = k(null), r = `listbox-${M()}`, p = q(null), a = B(() => {
-    u(!1), o(null);
+}, h = (t, a) => typeof t == "function" ? t(a) : t;
+function P({ value: t, onChange: a, children: u }) {
+  const [s, d] = k(!1), [n, o] = k(null), r = `listbox-${M()}`, p = q(null), l = N(() => {
+    d(!1), o(null);
   }, []);
-  w(() => {
+  I(() => {
     if (!s) return;
-    const i = (y) => {
-      if (y.key !== "Escape") return;
+    const i = (b) => {
+      if (b.key !== "Escape") return;
       const e = p.current;
-      e?.contains(document.activeElement) && e.querySelector('[role="combobox"]')?.focus(), a();
+      e?.contains(document.activeElement) && e.querySelector('[role="combobox"]')?.focus(), l();
     };
     return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
-  }, [s, a]);
+  }, [s, l]);
   const f = T(() => ({
     open: s,
     select: (i) => {
-      l(i), a();
+      a(i), l();
     },
-    setOpen: u,
+    setOpen: d,
     setActiveIndex: o,
     activeIndex: n,
     listboxId: r,
@@ -33,52 +34,52 @@ function K({ value: t, onChange: l, children: d }) {
   }), [
     s,
     t,
-    l,
+    a,
     n,
     r,
-    a
+    l
   ]);
-  return /* @__PURE__ */ x(I.Provider, {
+  return /* @__PURE__ */ m(A.Provider, {
     value: f,
-    children: /* @__PURE__ */ x($, {
-      onClickAway: a,
-      children: /* @__PURE__ */ x("div", {
+    children: /* @__PURE__ */ m(C, {
+      onClickAway: l,
+      children: /* @__PURE__ */ m("div", {
         ref: (i) => {
           p.current = i;
         },
         onBlur: (i) => {
-          i.relatedTarget && !i.currentTarget.contains(i.relatedTarget) && a();
+          i.relatedTarget && !i.currentTarget.contains(i.relatedTarget) && l();
         },
         className: "relative w-full",
-        children: d
+        children: u
       })
     })
   });
 }
-var N = ({ children: t, className: l, onClick: d, onKeyDown: s, ...u }) => {
-  const { activeIndex: n, listboxId: o, open: r, setActiveIndex: p, setOpen: a } = b(), f = () => Array.from(document.querySelectorAll(`#${CSS.escape(o)} [role="option"]:not([aria-disabled="true"])`)), i = (e) => {
+var R = ({ children: t, className: a, onClick: u, onKeyDown: s, ...d }) => {
+  const { activeIndex: n, listboxId: o, open: r, setActiveIndex: p, setOpen: l } = y(), f = () => Array.from(document.querySelectorAll(`#${CSS.escape(o)} [role="option"]:not([aria-disabled="true"])`)), i = (e) => {
     const c = f();
     if (c.length === 0) return;
-    const m = c.findIndex((E) => E.id === `${o}-option-${n}`), v = m === -1 ? e === 1 ? 0 : c.length - 1 : Math.min(Math.max(m + e, 0), c.length - 1);
-    p(Number(c[v].dataset.index));
+    const x = c.findIndex((L) => L.id === `${o}-option-${n}`), E = x === -1 ? e === 1 ? 0 : c.length - 1 : Math.min(Math.max(x + e, 0), c.length - 1);
+    p(Number(c[E].dataset.index));
+  }, b = (e) => {
+    if (s?.(e), !e.defaultPrevented)
+      if (e.key === "ArrowDown" || e.key === "ArrowUp")
+        e.preventDefault(), r ? i(e.key === "ArrowDown" ? 1 : -1) : (l(!0), requestAnimationFrame(() => i(e.key === "ArrowDown" ? 1 : -1)));
+      else if (r && (e.key === "Home" || e.key === "End")) {
+        e.preventDefault();
+        const c = f(), x = c[e.key === "Home" ? 0 : c.length - 1];
+        x && p(Number(x.dataset.index));
+      } else r && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), f().find((c) => c.id === `${o}-option-${n}`)?.click());
   };
-  return /* @__PURE__ */ x("button", {
-    ...u,
+  return /* @__PURE__ */ m("button", {
+    ...d,
     type: "button",
-    className: l,
+    className: w("asma-pressable", a),
     onClick: (e) => {
-      d?.(e), e.defaultPrevented || a(!r);
-    },
-    onKeyDown: (e) => {
-      if (s?.(e), !e.defaultPrevented)
-        if (e.key === "ArrowDown" || e.key === "ArrowUp")
-          e.preventDefault(), r ? i(e.key === "ArrowDown" ? 1 : -1) : (a(!0), requestAnimationFrame(() => i(e.key === "ArrowDown" ? 1 : -1)));
-        else if (r && (e.key === "Home" || e.key === "End")) {
-          e.preventDefault();
-          const c = f(), m = c[e.key === "Home" ? 0 : c.length - 1];
-          m && p(Number(m.dataset.index));
-        } else r && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), f().find((c) => c.id === `${o}-option-${n}`)?.click());
+      u?.(e), e.defaultPrevented || l(!r);
     },
+    onKeyDown: b,
     role: "combobox",
     "aria-haspopup": "listbox",
     "aria-expanded": r,
@@ -86,45 +87,45 @@ var N = ({ children: t, className: l, onClick: d, onKeyDown: s, ...u }) => {
     "aria-activedescendant": r && n !== null ? `${o}-option-${n}` : void 0,
     children: h(t, { open: r })
   });
-}, P = ({ children: t, className: l }) => {
-  const { activeIndex: d, listboxId: s, open: u } = b();
-  return w(() => {
-    d !== null && document.getElementById(`${s}-option-${d}`)?.scrollIntoView({ block: "nearest" });
-  }, [d, s]), u ? /* @__PURE__ */ x("div", {
+}, V = ({ children: t, className: a }) => {
+  const { activeIndex: u, listboxId: s, open: d } = y();
+  return I(() => {
+    u !== null && document.getElementById(`${s}-option-${u}`)?.scrollIntoView({ block: "nearest" });
+  }, [u, s]), d ? /* @__PURE__ */ m("div", {
     id: s,
     role: "listbox",
-    className: l,
+    className: a,
     children: (() => {
       let n = 0;
-      return C.toArray(t).map((o) => g(o) && o.type === A ? D(o, { optionIndex: n++ }) : o);
+      return O.toArray(t).map((o) => B(o) && o.type === v ? g(o, { optionIndex: n++ }) : o);
     })()
   }) : null;
 };
-function A({ value: t, disabled: l, children: d, className: s, optionIndex: u = 0 }) {
-  const n = b(), o = n.value === t, r = () => {
-    l || n.select(t);
+function v({ value: t, disabled: a, children: u, className: s, optionIndex: d = 0 }) {
+  const n = y(), o = n.value === t, r = () => {
+    a || n.select(t);
   };
-  return /* @__PURE__ */ x("div", {
-    id: `${n.listboxId}-option-${u}`,
+  return /* @__PURE__ */ m("div", {
+    id: `${n.listboxId}-option-${d}`,
     role: "option",
     "aria-selected": o,
-    "aria-disabled": l,
-    "data-index": u,
+    "aria-disabled": a,
+    "data-index": d,
     tabIndex: -1,
-    className: s,
+    className: w("asma-pressable", s),
     onMouseDown: (p) => {
-      const a = p.target;
-      L(p.currentTarget).some((f) => f.contains(a)) || p.preventDefault();
+      const l = p.target;
+      $(p.currentTarget).some((f) => f.contains(l)) || p.preventDefault();
     },
     onClick: r,
-    children: h(d, { selected: o })
+    children: h(u, { selected: o })
   });
 }
-var H = Object.assign(K, {
-  Button: N,
-  Option: A,
-  Options: P
+var W = Object.assign(P, {
+  Button: R,
+  Option: v,
+  Options: V
 });
 export {
-  H as Listbox
+  W as Listbox
 };

package/dist/components/navigation/title-chevron/StyledTitleChevron.js

@@ -5,22 +5,22 @@ var m = {
   base: "text-sm",
   medium: "text-base",
   subtitle: "text-xl"
-}, i = {
+}, o = {
   base: 20,
   medium: 24,
   subtitle: 28
-}, f = ({ dataTest: e, children: o, onClick: r, size: t = "base", className: s }) => /* @__PURE__ */ u("button", {
+}, f = ({ dataTest: e, children: r, onClick: i, size: t = "base", className: s }) => /* @__PURE__ */ u("button", {
   type: "button",
   "data-test": e,
   "data-testid": e,
-  onClick: r,
-  className: n("group flex min-h-11 w-full cursor-pointer items-center rounded border-0 bg-transparent p-0 text-left", "font-semibold text-delta-800 transition-colors duration-300", m[t], "hover:text-gama-500 focus-visible:text-gama-500 active:text-gama-600", "outline-gama-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2", s),
+  onClick: i,
+  className: n("group flex min-h-11 w-full cursor-pointer items-center rounded border-0 bg-transparent p-0 text-left", "font-semibold text-delta-800 transition-colors duration-300", m[t], "hover:text-gama-500 focus-visible:text-gama-500 active:text-gama-600", "asma-touch-ready", "outline-gama-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2", s),
   children: [/* @__PURE__ */ a("span", {
     className: "min-w-0 truncate",
-    children: o
+    children: r
   }), /* @__PURE__ */ a(l, {
-    width: i[t],
-    height: i[t],
+    width: o[t],
+    height: o[t],
     "aria-hidden": !0,
     className: "shrink-0 transition-transform duration-300 group-hover:translate-x-1 group-focus-visible:translate-x-1"
   })]