asma-ui-core 3.115.0 → 3.116.0

package/dist/components/data-display/chip/StyledChip.js

@@ -24,6 +24,7 @@ var Y = ({ readOnly: m, disabled: a, interactive: e, focusableDisabled: o, tabIn
   }, U = S(u, "width"), q = S(u, "max-width"), A = /* @__PURE__ */ X("div", {
     ref: W,
     "data-testid": m,
+    "data-chip": "",
     "aria-label": N,
     "data-hovered": K,
     "data-focus": P,

package/dist/components/inputs/full-screen-picker/FullScreenPicker.js

@@ -1,31 +1,31 @@
 import { CloseIcon as w } from "../../icons/close-icon/CloseIcon.js";
 import { StyledButton as y } from "../button/StyledButton.js";
-import { useShortViewportMediaQuery as g } from "../../../hooks/useMediaQuery.hook.js";
+import { usePickerOneRowHeaderMediaQuery as g } from "../../../hooks/useMediaQuery.hook.js";
 import { StyledDialog as k } from "../../feedback/dialog/StyledDialog.js";
 import { PickerLiveRegion as N } from "./PickerLiveRegion.js";
 import { isKeyboardModality as S, trackInputModality as I } from "./inputModality.js";
 import { useVisualViewportHeight as R } from "./useVisualViewportHeight.js";
-import { useEffect as x, useRef as p } from "react";
+import { useEffect as p, useRef as x } from "react";
 import { jsx as e, jsxs as m } from "react/jsx-runtime";
-var B = ({ open: o, onClose: t, dataTest: i, title: r, fallbackName: a, ...n }) => {
+var B = ({ open: o, onClose: i, dataTest: t, title: r, fallbackName: a, ...n }) => {
   const l = r != null && r !== !1 && r !== "";
-  return x(I, []), /* @__PURE__ */ e(k, {
+  return p(I, []), /* @__PURE__ */ e(k, {
     open: o,
-    onClose: (f, s) => t(s),
-    dataTest: i,
+    onClose: (f, s) => i(s),
+    dataTest: t,
     fullScreen: !0,
     showCloseIcon: !1,
     ariaLabel: l ? void 0 : a,
-    children: /* @__PURE__ */ e($, {
+    children: /* @__PURE__ */ e(P, {
       ...n,
-      dataTest: i,
+      dataTest: t,
       title: l ? r : void 0,
-      onClose: t
+      onClose: i
     })
   });
-}, $ = ({ dataTest: o, title: t, closeLabel: i, search: r, headerRow: a, children: n, announcement: l, onClose: f }) => {
-  const s = g(), v = R(), c = p(null), u = p(null);
-  return x(() => {
+}, P = ({ dataTest: o, title: i, closeLabel: t, search: r, headerRow: a, children: n, announcement: l, onClose: f }) => {
+  const s = g(), v = R(), c = x(null), u = x(null);
+  return p(() => {
     const b = requestAnimationFrame(() => {
       const h = c.current?.closest("dialog");
       if (!h || document.activeElement !== h || !S()) return;
@@ -44,9 +44,9 @@ var B = ({ open: o, onClose: t, dataTest: i, title: r, fallbackName: a, ...n })
           /* @__PURE__ */ m("div", {
             className: "flex items-start gap-2",
             children: [
-              t !== void 0 && /* @__PURE__ */ e("h2", {
+              i !== void 0 && /* @__PURE__ */ e("h2", {
                 className: "m-0 min-w-0 flex-1 break-words pl-4 pt-2 text-[20px] font-semibold leading-7 text-delta-800",
-                children: t
+                children: i
               }),
               s && /* @__PURE__ */ e("div", {
                 className: "min-w-0 max-w-[240px] flex-1 pt-2",
@@ -55,7 +55,7 @@ var B = ({ open: o, onClose: t, dataTest: i, title: r, fallbackName: a, ...n })
               /* @__PURE__ */ e(y, {
                 dataTest: `${o}-close`,
                 refLink: c,
-                "aria-label": i,
+                "aria-label": t,
                 variant: "textGray",
                 startIcon: /* @__PURE__ */ e(w, {
                   width: 24,

package/dist/components/inputs/full-screen-picker/pickerCopy.js

@@ -9,8 +9,7 @@ var a = {
     noMatches: "Ingen treff",
     matchCount: (e) => `${e} treff`,
     cleared: "Valget er fjernet",
-    clearedAll: "Alle valg er fjernet",
-    truncated: (e, l) => `Viser ${e} av ${l}. Søk for å finne flere.`
+    clearedAll: "Alle valg er fjernet"
   },
   en: {
     close: "Close",
@@ -22,13 +21,12 @@ var a = {
     noMatches: "No matches",
     matchCount: (e) => e === 1 ? "1 match" : `${e} matches`,
     cleared: "Selection cleared",
-    clearedAll: "All selections cleared",
-    truncated: (e, l) => `Showing ${e} of ${l}. Search to find more.`
+    clearedAll: "All selections cleared"
   }
-}, r = (e, l) => ({
+}, c = (e, l) => ({
   ...a[e],
   ...l
 });
 export {
-  r as getPickerText
+  c as getPickerText
 };

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

@@ -1,32 +1,39 @@
 import { cn as g } from "../../../helpers/cn.js";
-import { StyledSelectItem as w } from "../select/StyledSelectItem.js";
-import { useEffect as C, useRef as N } from "react";
-import { jsx as s, jsxs as m } from "react/jsx-runtime";
-var v = ({ dataTest: c, visible: i, selectedIso2: d, activeIndex: l, optionId: t, onSelect: f, listId: p, label: u, renderFlag: h, className: b, onKeyDown: r, onFocus: x }) => {
-  const a = r !== void 0, o = N(null);
-  return C(() => {
-    l !== null && o.current?.querySelector(`#${CSS.escape(t(l))}`)?.scrollIntoView({ block: "nearest" });
+import { StyledSelectItem as N } from "../select/StyledSelectItem.js";
+import { useEffect as d, useRef as k } from "react";
+import { jsx as s, jsxs as f } from "react/jsx-runtime";
+var v = ({ dataTest: u, visible: a, selectedIso2: o, activeIndex: r, optionId: t, onSelect: p, listId: h, label: x, renderFlag: S, className: b, onKeyDown: c, onFocus: w, open: m }) => {
+  const i = c !== void 0, n = k(null);
+  return d(() => {
+    if (!m) return;
+    const e = requestAnimationFrame(() => {
+      const l = a.findIndex((C) => C.iso2 === o);
+      l < 0 || n.current?.querySelector(`#${CSS.escape(t(l))}`)?.scrollIntoView({ block: "center" });
+    });
+    return () => cancelAnimationFrame(e);
+  }, [m]), d(() => {
+    r !== null && n.current?.querySelector(`#${CSS.escape(t(r))}`)?.scrollIntoView({ block: "nearest" });
   }), /* @__PURE__ */ s("ul", {
-    ref: o,
-    id: p,
+    ref: n,
+    id: h,
     role: "listbox",
-    "aria-label": u,
-    "data-testid": `${c}-listbox`,
-    tabIndex: a ? 0 : void 0,
-    "aria-activedescendant": a && l !== null ? t(l) : void 0,
-    onKeyDown: r,
-    onFocus: x,
-    className: g("m-0 min-h-0 flex-1 list-none overflow-y-auto p-0", a && i.length > 0 && "outline-none", "[&>li:not(:last-child)]:shadow-[inset_0_-1px_0_var(--colors-delta-200)]", b),
-    children: i.map((e, n) => /* @__PURE__ */ s(w, {
-      id: t(n),
-      selected: e.iso2 === d,
-      active: n === l,
-      onClick: () => f(e.iso2),
-      children: /* @__PURE__ */ m("span", {
+    "aria-label": x,
+    "data-testid": `${u}-listbox`,
+    tabIndex: i ? 0 : void 0,
+    "aria-activedescendant": i && r !== null ? t(r) : void 0,
+    onKeyDown: c,
+    onFocus: w,
+    className: g("m-0 min-h-0 flex-1 list-none overflow-y-auto p-0", i && a.length > 0 && "outline-none", "[&>li:not(:last-child)]:shadow-[inset_0_-1px_0_var(--colors-delta-200)]", b),
+    children: a.map((e, l) => /* @__PURE__ */ s(N, {
+      id: t(l),
+      selected: e.iso2 === o,
+      active: l === r,
+      onClick: () => p(e.iso2),
+      children: /* @__PURE__ */ f("span", {
         className: "flex w-full items-center justify-between gap-2",
-        children: [/* @__PURE__ */ m("span", {
+        children: [/* @__PURE__ */ f("span", {
           className: "flex min-w-0 items-center gap-2",
-          children: [h?.(e.iso2, "eager"), /* @__PURE__ */ s("span", {
+          children: [S?.(e.iso2, "eager"), /* @__PURE__ */ s("span", {
             className: "truncate",
             children: e.name
           })]

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

@@ -48,7 +48,8 @@ var ae = ({ dataTest: r, countries: y, value: s, onChange: O, disabled: c, selec
     label: g,
     renderFlag: x,
     onKeyDown: e ? z : void 0,
-    onFocus: e && o.activeIndex === null ? () => o.openWithKeyboard(1) : void 0
+    onFocus: e && o.activeIndex === null ? () => o.openWithKeyboard(1) : void 0,
+    open: t
   }), S = {
     role: "combobox",
     "aria-activedescendant": o.activeIndex === null ? void 0 : o.optionId(o.activeIndex),

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

@@ -1,217 +1,219 @@
-import { cn as re } from "../../../helpers/cn.js";
+import { cn as le } from "../../../helpers/cn.js";
 import { StyledCheckbox as Ne } from "../checkbox/base-ui/StyledCheckbox.js";
-import { StyledButton as K } from "../button/StyledButton.js";
+import { StyledButton as B } from "../button/StyledButton.js";
 import { StyledSearchField as De } from "../search-field/StyledSearchField.js";
-import { useAnnouncer as $e } from "../full-screen-picker/PickerLiveRegion.js";
-import { nextActiveIndex as Se } from "./listboxCursor.js";
+import { useAnnouncer as Se } from "../full-screen-picker/PickerLiveRegion.js";
+import { nextActiveIndex as $e } from "./listboxCursor.js";
 import { FullScreenPicker as Ie } from "../full-screen-picker/FullScreenPicker.js";
-import { useEffect as ee, useMemo as _e, useRef as Me, useState as v } from "react";
-import { jsx as o, jsxs as b } from "react/jsx-runtime";
-var F = 50, Re = 500, le = "px-3 py-2 text-sm text-delta-600", te = "[&>div]:px-0";
-function Oe({ open: r, dataTest: t, listboxId: u, title: D, name: g, text: a, options: f, multiple: i, value: h, clearable: j, isEqual: x, isOptionDisabled: B, getLabel: E, getOptionKey: H, filterOptions: $, renderOptionRow: ne, optionRowClassName: W, loading: U, loadingText: oe, noOptionsText: ae, allowSelectAll: se, selectAllLabel: ce, onSelect: ie, onClear: de, onApply: ue, onCancel: fe }) {
-  const [s, S] = v(""), [n, p] = v(null), [c, z] = v([]), [me, he] = v(!1), [pe, we] = v(!1), [ke, I, ye] = $e();
-  r !== pe && (we(r), r && (S(""), p(null), z(Array.isArray(h) ? [...h] : []), he(!i && j && h !== null && !Array.isArray(h)), ye()));
-  const _ = Me([]), O = i ? null : h, Q = (e) => i ? c.some((l) => x(e, l)) : O !== null && x(e, O), m = _e(() => {
+import { useEffect as T, useMemo as _e, useRef as ee, useState as y } from "react";
+import { jsx as n, jsxs as A } from "react/jsx-runtime";
+var Me = 500, re = "px-3 py-2 text-sm text-delta-600", te = "[&>div]:px-0";
+function ze({ open: l, dataTest: o, listboxId: u, title: N, name: v, text: a, options: f, multiple: d, value: m, clearable: H, isEqual: b, isOptionDisabled: K, getLabel: j, getOptionKey: E, filterOptions: D, renderOptionRow: ne, optionRowClassName: U, loading: S, loadingText: oe, noOptionsText: ae, allowSelectAll: ce, selectAllLabel: se, onSelect: ie, onClear: de, onApply: ue, onCancel: fe }) {
+  const [s, $] = y(""), [t, h] = y(null), [i, W] = y([]), [me, he] = y(!1), [pe, we] = y(!1), [ke, I, Ce] = Se();
+  l !== pe && (we(l), l && ($(""), h(null), W(Array.isArray(m) ? [...m] : []), he(!d && H && m !== null && !Array.isArray(m)), Ce()));
+  const _ = ee([]), z = d ? null : m, Q = (e) => d ? i.some((r) => b(e, r)) : z !== null && b(e, z), c = _e(() => {
     const e = [...f];
-    if ($) return $(e, { inputValue: s });
-    const l = s.trim().toLowerCase();
-    return l ? e.filter((y) => E(y).toLowerCase().includes(l)) : e;
+    if (D) return D(e, { inputValue: s });
+    const r = s.trim().toLowerCase();
+    return r ? e.filter((k) => j(k).toLowerCase().includes(r)) : e;
   }, [
     f,
     s,
-    $
-  ]), d = m.slice(0, F), M = !!(se && i), w = M ? [-1, ...d.map((e, l) => l)] : d.map((e, l) => l), k = d.findIndex(Q), { noMatches: Y, matchCount: G } = a;
-  ee(() => {
+    D
+  ]), M = !!(ce && d), p = M ? [-1, ...c.map((e, r) => r)] : c.map((e, r) => r), w = c.findIndex(Q), { noMatches: Y, matchCount: G } = a;
+  T(() => {
     if (s === "") return;
-    const e = window.setTimeout(() => I(m.length === 0 ? Y : G(m.length)), Re);
+    const e = window.setTimeout(() => I(c.length === 0 ? Y : G(c.length)), Me);
     return () => window.clearTimeout(e);
   }, [
     I,
-    m.length,
+    c.length,
     s,
     Y,
     G
-  ]), ee(() => {
-    r && k >= 0 && _.current[k]?.scrollIntoView({ block: "nearest" });
-  }, [r]);
-  const R = (e) => {
-    p(e), e !== null && e >= 0 && _.current[e]?.scrollIntoView({ block: "nearest" });
-  }, L = (e, l = a.selectedCount(e.length)) => {
-    z(e), I(l);
-  }, Ce = (e) => {
-    L(c.some((l) => x(e, l)) ? c.filter((l) => !x(e, l)) : [...c, e]);
-  }, A = f.length > 0 && c.length === f.length, J = () => L(A ? [] : [...f]), X = (e, l, y = !0) => {
-    B(l) || (i ? Ce(l) : ie(e, l, y));
-  }, P = (e, l) => {
-    n === -1 ? J() : n !== null && d[n] !== void 0 && X(e, d[n], l);
-  }, Z = (e) => {
-    e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), R(Se(w, n, k, e.key === "ArrowDown" ? 1 : -1))) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), R(w[e.key === "Home" ? 0 : w.length - 1] ?? null)) : e.key === "Enter" ? (e.preventDefault(), P(e, !0)) : e.key === " " && s === "" && n !== null && (e.preventDefault(), P(e, !1));
+  ]);
+  const R = ee(!1);
+  T(() => {
+    if (!l) {
+      R.current = !1;
+      return;
+    }
+    R.current || S || (R.current = !0, w >= 0 && _.current[w]?.scrollIntoView({ block: "center" }));
+  }, [l, S]);
+  const L = (e) => {
+    h(e), e !== null && e >= 0 && _.current[e]?.scrollIntoView({ block: "nearest" });
+  }, V = (e, r = a.selectedCount(e.length)) => {
+    W(e), I(r);
+  }, ye = (e) => {
+    V(i.some((r) => b(e, r)) ? i.filter((r) => !b(e, r)) : [...i, e]);
+  }, g = f.length > 0 && i.length === f.length, J = () => V(g ? [] : [...f]), O = (e, r, k = !0) => {
+    K(r) || (d ? ye(r) : ie(e, r, k));
+  }, F = (e, r) => {
+    t === -1 ? J() : t !== null && c[t] !== void 0 && O(e, c[t], r);
+  }, X = (e) => {
+    e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), L($e(p, t, w, e.key === "ArrowDown" ? 1 : -1))) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), L(p[e.key === "Home" ? 0 : p.length - 1] ?? null)) : e.key === "Enter" ? (e.preventDefault(), F(e, !0)) : e.key === " " && s === "" && t !== null && (e.preventDefault(), F(e, !1));
   }, ve = (e) => {
     if (e.key !== " ") {
-      Z(e);
+      X(e);
       return;
     }
-    e.preventDefault(), P(e, !1);
+    e.preventDefault(), F(e, !1);
   }, be = () => {
-    n === null && R(k >= 0 ? k : w[0] ?? null);
-  }, q = (e) => `${t}-option-${e}`;
-  let N;
-  n === -1 && M ? N = `${t}-select-all` : n !== null && d[n] !== void 0 && (N = q(n));
-  const ge = (e, l) => {
-    const y = B(e), T = Q(e);
+    t === null && L(w >= 0 ? w : p[0] ?? null);
+  }, Z = (e) => `${o}-option-${e}`;
+  let x;
+  t === -1 && M ? x = `${o}-select-all` : t !== null && c[t] !== void 0 && (x = Z(t));
+  const ge = (e, r) => {
+    const k = K(e), q = Q(e);
     return ne({
-      key: H ? String(H(e)) : `${E(e)}-${l}`,
+      key: E ? String(E(e)) : `${j(e)}-${r}`,
       ref: (C) => {
-        _.current[l] = C;
+        _.current[r] = C;
       },
       role: "option",
-      id: q(l),
-      "aria-selected": T,
-      "aria-disabled": y || void 0,
-      "data-active": n === l ? "" : void 0,
-      className: W,
+      id: Z(r),
+      "aria-selected": q,
+      "aria-disabled": k || void 0,
+      "data-active": t === r ? "" : void 0,
+      className: U,
       onMouseDown: (C) => C.preventDefault(),
-      onClick: (C) => X(C, e),
-      onMouseMove: () => p(null)
+      onClick: (C) => O(C, e),
+      onMouseMove: () => h(null)
     }, e, {
-      selected: T,
-      index: l,
+      selected: q,
+      index: r,
       inputValue: s,
       inPicker: !0
     });
-  }, xe = r ? U ? /* @__PURE__ */ o("li", {
+  }, xe = l ? S ? /* @__PURE__ */ n("li", {
     role: "presentation",
-    className: le,
+    className: re,
     children: oe
-  }) : d.length === 0 ? /* @__PURE__ */ o("li", {
+  }) : c.length === 0 ? /* @__PURE__ */ n("li", {
     role: "presentation",
-    className: le,
-    "data-testid": `${t}-picker-empty`,
+    className: re,
+    "data-testid": `${o}-picker-empty`,
     children: s === "" ? ae : a.noMatches
-  }) : d.map(ge) : null, Ae = /* @__PURE__ */ o(De, {
-    dataTest: `${t}-picker-search`,
+  }) : c.map(ge) : null, Ae = /* @__PURE__ */ n(De, {
+    dataTest: `${o}-picker-search`,
     label: a.search,
     value: s,
     fullWidth: !0,
     onChange: (e) => {
-      S(e.target.value), p(null);
+      $(e.target.value), h(null);
     },
     onClear: () => {
-      S(""), p(null);
+      $(""), h(null);
     },
-    onKeyDown: Z,
+    onKeyDown: X,
     autoComplete: "off",
     slotProps: { htmlInput: {
       role: "combobox",
       "aria-controls": u,
       "aria-expanded": !0,
-      "aria-activedescendant": N,
+      "aria-activedescendant": x,
       "aria-autocomplete": "list"
     } }
   });
-  let V;
-  return i ? V = /* @__PURE__ */ o(Le, {
-    dataTest: t,
-    count: a.selectedCount(c.length),
-    clearAllLabel: j ? a.clearAll : void 0,
-    clearAllShown: c.length > 0,
+  let P;
+  return d ? P = /* @__PURE__ */ n(Re, {
+    dataTest: o,
+    count: a.selectedCount(i.length),
+    clearAllLabel: H ? a.clearAll : void 0,
+    clearAllShown: i.length > 0,
     doneLabel: a.done,
-    onClearAll: () => L([], a.clearedAll),
-    onDone: (e) => ue(e, c)
-  }) : me && (V = /* @__PURE__ */ o(Pe, {
-    dataTest: t,
+    onClearAll: () => V([], a.clearedAll),
+    onDone: (e) => ue(e, i)
+  }) : me && (P = /* @__PURE__ */ n(Le, {
+    dataTest: o,
     label: a.clearOne,
     onClear: de
-  })), /* @__PURE__ */ b(Ie, {
-    open: r,
+  })), /* @__PURE__ */ n(Ie, {
+    open: l,
     onClose: fe,
-    dataTest: `${t}-picker`,
-    title: D,
-    fallbackName: g,
+    dataTest: `${o}-picker`,
+    title: N,
+    fallbackName: v,
     closeLabel: a.close,
     search: Ae,
-    headerRow: V,
+    headerRow: P,
     announcement: ke,
-    children: [/* @__PURE__ */ b("ul", {
+    children: /* @__PURE__ */ A("ul", {
       id: u,
       role: "listbox",
-      "aria-label": g,
-      "aria-multiselectable": i || void 0,
+      "aria-label": v,
+      "aria-multiselectable": d || void 0,
       tabIndex: 0,
-      "aria-activedescendant": N,
+      "aria-activedescendant": x,
       onKeyDown: ve,
       onFocus: be,
-      className: re("m-0 list-none p-0 [&>li:not(:last-child)]:shadow-[inset_0_-1px_0_var(--colors-delta-200)]", w.length > 0 && "outline-none", "[&>li[role=option]]:pr-4 [&>li[role=option]]:text-delta-700", i ? "[&>li[aria-selected=true]:not(:hover)]:bg-white" : "[&>li[aria-selected=true]:not([aria-disabled=true])]:bg-gama-25 [&>li[role=option]]:gap-x-1 [&>li[role=option]]:pl-2"),
-      children: [M && /* @__PURE__ */ b("li", {
-        id: `${t}-select-all`,
+      className: le("m-0 list-none p-0 [&>li:not(:last-child)]:shadow-[inset_0_-1px_0_var(--colors-delta-200)]", p.length > 0 && "outline-none", "[&>li[role=option]]:pr-4 [&>li[role=option]]:text-delta-700", d ? "[&>li[aria-selected=true]:not(:hover)]:bg-white" : "[&>li[aria-selected=true]:not([aria-disabled=true])]:bg-gama-25 [&>li[role=option]]:gap-x-1 [&>li[role=option]]:pl-2"),
+      children: [M && /* @__PURE__ */ A("li", {
+        id: `${o}-select-all`,
         role: "option",
-        "aria-selected": A,
-        "data-active": n === -1 ? "" : void 0,
+        "aria-selected": g,
+        "data-active": t === -1 ? "" : void 0,
         tabIndex: -1,
         onMouseDown: (e) => e.preventDefault(),
         onClick: J,
-        className: W,
+        className: U,
         children: [
-          n === -1 && /* @__PURE__ */ o("span", {
+          t === -1 && /* @__PURE__ */ n("span", {
             "aria-hidden": "true",
             className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
           }),
-          /* @__PURE__ */ o(Ne, {
-            dataTest: `${t}-picker-select-all`,
-            checked: A,
-            indeterminate: c.length > 0 && !A,
+          /* @__PURE__ */ n(Ne, {
+            dataTest: `${o}-picker-select-all`,
+            checked: g,
+            indeterminate: i.length > 0 && !g,
             size: "medium",
             checkboxClassName: "!h-4 !w-4",
             hideWrapper: !0,
             decorative: !0
           }),
-          /* @__PURE__ */ o("span", {
+          /* @__PURE__ */ n("span", {
             className: "min-w-0 flex-1 break-words",
-            children: ce
+            children: se
           })
         ]
       }), xe]
-    }), !U && m.length > F && /* @__PURE__ */ o("p", {
-      className: "m-0 px-3 py-2 text-sm text-delta-600",
-      "data-testid": `${t}-picker-truncated`,
-      children: a.truncated(F, m.length)
-    })]
+    })
   });
 }
-var Le = ({ dataTest: r, count: t, clearAllLabel: u, clearAllShown: D, doneLabel: g, onClearAll: a, onDone: f }) => /* @__PURE__ */ b("div", {
-  className: "flex items-center justify-between gap-6 px-4 py-2",
-  "data-testid": `${r}-picker-selection-row`,
-  children: [/* @__PURE__ */ b("div", {
-    className: "flex min-w-0 flex-wrap items-center gap-x-1",
-    children: [/* @__PURE__ */ o("span", {
+var Re = ({ dataTest: l, count: o, clearAllLabel: u, clearAllShown: N, doneLabel: v, onClearAll: a, onDone: f }) => /* @__PURE__ */ A("div", {
+  className: "flex flex-wrap items-center gap-x-6 gap-y-2 px-4 py-2",
+  "data-testid": `${l}-picker-selection-row`,
+  children: [/* @__PURE__ */ A("div", {
+    className: "flex min-w-min flex-[1_1_0%] flex-wrap items-center gap-x-1",
+    children: [/* @__PURE__ */ n("span", {
       className: "text-base text-delta-600",
-      "data-testid": `${r}-picker-count`,
-      children: t
-    }), u !== void 0 && /* @__PURE__ */ o(K, {
-      dataTest: `${r}-picker-clear-all`,
+      "data-testid": `${l}-picker-count`,
+      children: o
+    }), u !== void 0 && /* @__PURE__ */ n(B, {
+      dataTest: `${l}-picker-clear-all`,
       variant: "text",
-      className: re(te, !D && "invisible"),
+      className: le(te, !N && "invisible"),
       onClick: a,
       children: u
     })]
-  }), /* @__PURE__ */ o(K, {
-    dataTest: `${r}-picker-done`,
+  }), /* @__PURE__ */ n(B, {
+    dataTest: `${l}-picker-done`,
     variant: "contained",
-    className: "shrink-0 whitespace-nowrap",
+    className: "ml-auto shrink-0 whitespace-nowrap",
     onClick: f,
-    children: g
+    children: v
   })]
-}), Pe = ({ dataTest: r, label: t, onClear: u }) => /* @__PURE__ */ o("div", {
+}), Le = ({ dataTest: l, label: o, onClear: u }) => /* @__PURE__ */ n("div", {
   className: "flex px-4 py-2",
-  "data-testid": `${r}-picker-clear-row`,
-  children: /* @__PURE__ */ o(K, {
-    dataTest: `${r}-picker-clear`,
+  "data-testid": `${l}-picker-clear-row`,
+  children: /* @__PURE__ */ n(B, {
+    dataTest: `${l}-picker-clear`,
     variant: "text",
     className: te,
     onClick: u,
-    children: t
+    children: o
   })
 });
 export {
-  Oe as SelectAutocompletePicker
+  ze as SelectAutocompletePicker
 };