asma-ui-core 3.94.1 → 3.95.1

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

@@ -10,14 +10,14 @@ import { LoadingIcon as ft } from "../../../table/shared-components/LoadingIcon.
 import W from "./StyledSelectAutocomplete.module.js";
 import { useEffect as ce, useMemo as U, useRef as de, useState as D } from "react";
 import { jsx as s, jsxs as I } from "react/jsx-runtime";
-import { FloatingPortal as mt, autoUpdate as ht, flip as bt, offset as gt, shift as xt, size as yt, useDismiss as wt, useFloating as kt, useInteractions as vt, useMergeRefs as ue, useRole as Dt } from "@floating-ui/react";
-var It = (l) => typeof l == "object" && l !== null && "label" in l ? String(l.label) : String(l), At = (l) => typeof l == "object" && l !== null && "disabled" in l && !!l.disabled;
-function zt({ dataTest: l, options: b, renderInput: pe, value: A, onChange: N, getOptionLabel: fe, getOptionKey: S, isOptionEqualToValue: V, renderOption: B, renderValue: T, filterOptions: _, loading: Y, loadingText: me = "Loading…", noOptionsText: he = "No options", disabled: C, readOnly: g, error: be, helperText: ge, size: xe = "small", disableClearable: ye, disableCloseOnSelect: we, popupIcon: ke, autoHeight: ve, multiple: De, allowSelectAll: F, selectAllLabel: Ie = "Select all", fullWidth: Ae, classes: Ne, inputValue: M, onInputChange: Se, open: q, onOpen: Ce, onClose: Me, className: Re, wrapperClassName: Pe, getOptionDisabled: $e, slotProps: G }) {
+import { FloatingPortal as mt, autoUpdate as ht, flip as bt, offset as gt, shift as xt, size as wt, useDismiss as yt, useFloating as kt, useInteractions as vt, useMergeRefs as ue, useRole as Dt } from "@floating-ui/react";
+var It = (l) => typeof l == "object" && l !== null && "label" in l ? String(l.label) : String(l), Nt = (l) => typeof l == "object" && l !== null && "disabled" in l && !!l.disabled;
+function zt({ dataTest: l, options: b, renderInput: pe, value: N, onChange: A, getOptionLabel: fe, getOptionKey: C, isOptionEqualToValue: V, renderOption: B, renderValue: T, filterOptions: _, loading: Y, loadingText: me = "Loading…", noOptionsText: he = "No options", disabled: S, readOnly: g, error: be, helperText: ge, size: xe = "small", disableClearable: we, disableCloseOnSelect: ye, popupIcon: ke, autoHeight: ve, multiple: De, allowSelectAll: F, selectAllLabel: Ie = "Select all", fullWidth: Ne, classes: Ae, inputValue: M, onInputChange: Ce, open: q, onOpen: Se, onClose: Me, className: Re, wrapperClassName: Pe, getOptionDisabled: $e, slotProps: G }) {
   const r = De === !0, d = fe ?? It, R = (e, t) => V ? V(e, t) : e === t, [Le, Ee] = D(!1), a = q ?? Le, u = (e) => {
-    e && (g || C) || (q === void 0 && Ee(e), e ? Ce?.() : (x(null), Me?.()));
+    e && (g || S) || (q === void 0 && Ee(e), e ? Se?.() : (x(null), Me?.()));
   }, [_e, J] = D(""), h = M ?? _e, P = (e, t, n) => {
-    M === void 0 && J(t), Se?.(e, t, n);
-  }, [o, x] = D(null), Q = `${l}-listbox`, X = de([]), Z = de(null), [Fe, Oe] = D(null), [K, je] = D(null), i = r ? Array.isArray(A) ? A : [] : [], y = r ? null : A ?? null, ee = !r && y !== null ? d(y) : "";
+    M === void 0 && J(t), Ce?.(e, t, n);
+  }, [o, x] = D(null), Q = `${l}-listbox`, X = de([]), Z = de(null), [Fe, Oe] = D(null), [K, je] = D(null), i = r ? Array.isArray(N) ? N : [] : [], w = r ? null : N ?? null, ee = !r && w !== null ? d(w) : "";
   ce(() => {
     M !== void 0 || r || J(ee);
   }, [
@@ -25,10 +25,10 @@ function zt({ dataTest: l, options: b, renderInput: pe, value: A, onChange: N, g
     r,
     ee
   ]);
-  const O = (e) => r ? i.some((t) => R(e, t)) : y !== null && R(e, y), $ = (e) => $e?.(e) ?? At(e), te = U(() => {
+  const O = (e) => r ? i.some((t) => R(e, t)) : w !== null && R(e, w), $ = (e) => $e?.(e) ?? Nt(e), te = U(() => {
     const e = [...b];
     if (_) return _(e, { inputValue: h });
-    const t = !r && y !== null ? d(y).toLowerCase() : null;
+    const t = !r && w !== null ? d(w).toLowerCase() : null;
     if (!h || h.toLowerCase() === t) return e;
     const n = h.toLowerCase();
     return e.filter((f) => d(f).toLowerCase().includes(n));
@@ -36,7 +36,7 @@ function zt({ dataTest: l, options: b, renderInput: pe, value: A, onChange: N, g
     b,
     h,
     _,
-    A
+    N
   ]), p = U(() => te.slice(0, 100), [te]), le = p.flatMap((e, t) => $(e) ? [] : [t]), c = F && r ? [-1, ...le] : le, k = p.findIndex(O);
   ce(() => {
     if (!a) return;
@@ -60,26 +60,26 @@ function zt({ dataTest: l, options: b, renderInput: pe, value: A, onChange: N, g
       gt(0),
       bt({ padding: 8 }),
       xt({ padding: 8 }),
-      yt({ apply({ rects: e, availableHeight: t }) {
+      wt({ apply({ rects: e, availableHeight: t }) {
         Oe(e.reference.width), je(ve ? t - 8 : Math.min(t - 8, 320));
       } })
     ]
-  }), { getReferenceProps: He, getFloatingProps: We, getItemProps: Ue } = vt([wt(re), Dt(re, { role: "listbox" })]), Ve = ue([L.setReference]), oe = U(() => a ? dt(L.reference.current) : void 0, [a, L]), j = ut(oe), Be = ue([pt(L.setFloating, j)]), Te = (e) => c.includes(k) ? k : c[e === 1 ? 0 : c.length - 1] ?? null, Ye = (e) => {
+  }), { getReferenceProps: He, getFloatingProps: We, getItemProps: Ue } = vt([yt(re), Dt(re, { role: "listbox" })]), Ve = ue([L.setReference]), oe = U(() => a ? dt(L.reference.current) : void 0, [a, L]), j = ut(oe), Be = ue([pt(L.setFloating, j)]), Te = (e) => c.includes(k) ? k : c[e === 1 ? 0 : c.length - 1] ?? null, Ye = (e) => {
     c.length !== 0 && x((t) => {
       const n = c.indexOf(t ?? k);
       return n === -1 ? c[e === 1 ? 0 : c.length - 1] ?? null : c[Math.min(Math.max(n + e, 0), c.length - 1)] ?? null;
     });
-  }, v = (e, t, n = !r || !we) => {
+  }, v = (e, t, n = !r || !ye) => {
     if (r) {
-      const f = i.some((m) => R(t, m)), w = f ? i.filter((m) => !R(t, m)) : [...i, t];
-      N?.(e, w, f ? "removeOption" : "selectOption", { option: t }), P(e, "", "reset"), n && u(!1);
+      const f = i.some((m) => R(t, m)), y = f ? i.filter((m) => !R(t, m)) : [...i, t];
+      A?.(e, y, f ? "removeOption" : "selectOption", { option: t }), P(e, "", "reset"), n && u(!1);
     } else
-      N?.(e, t, "selectOption", { option: t }), P(e, d(t), "reset"), n && u(!1);
+      A?.(e, t, "selectOption", { option: t }), P(e, d(t), "reset"), n && u(!1);
   }, se = (e) => {
-    N?.(e, r ? [] : null, "clear", void 0), P(e, "", "clear");
+    A?.(e, r ? [] : null, "clear", void 0), P(e, "", "clear");
   }, z = (e) => {
     const t = b.length > 0 && i.length === b.length;
-    N?.(e, t ? [] : b, t ? "clear" : "selectOption", void 0);
+    A?.(e, t ? [] : b, t ? "clear" : "selectOption", void 0);
   }, qe = (e) => {
     if (e.key === "Backspace" && h === "" && ne) {
       const t = i[i.length - 1];
@@ -107,18 +107,18 @@ function zt({ dataTest: l, options: b, renderInput: pe, value: A, onChange: N, g
       const t = p[o];
       $(t) || v(e, t, !1);
     } else e.key === "Escape" && a ? (e.preventDefault(), e.stopPropagation(), u(!1)) : e.key === "Tab" && u(!1);
-  }, ne = !ye && !g && !C && (r ? i.length > 0 : y !== null);
+  }, ne = !we && !g && !S && (r ? i.length > 0 : w !== null);
   let ae;
   a && o != null && (o === -1 || p[o] !== void 0) && (ae = o === -1 ? `${l}-select-all` : `${l}-option-${o}`);
   const Ge = (e) => {
-    e.preventDefault(), !(C || g) && (Z.current?.focus(), u(!a));
+    e.preventDefault(), !(S || g) && (Z.current?.focus(), u(!a));
   }, Je = r ? T ? T(i, ({ index: e }) => ({ "data-index": e })) : i.map((e, t) => /* @__PURE__ */ s(at, {
     dataTest: `selected-chip-${d(e)}`,
     label: d(e),
     readOnly: g,
     deleteButtonTabIndex: -1,
     onDelete: g ? void 0 : (n) => v(n, e)
-  }, S ? S(e) : `${d(e)}-${t}`)) : void 0, Qe = /* @__PURE__ */ I("span", {
+  }, C ? C(e) : `${d(e)}-${t}`)) : void 0, Qe = /* @__PURE__ */ I("span", {
     className: "flex items-center gap-1",
     children: [
       Y && /* @__PURE__ */ s(ft, {
@@ -161,7 +161,7 @@ function zt({ dataTest: l, options: b, renderInput: pe, value: A, onChange: N, g
       })
     ]
   }), Xe = {
-    disabled: C,
+    disabled: S,
     size: xe,
     fullWidth: !0,
     error: be,
@@ -191,9 +191,9 @@ function zt({ dataTest: l, options: b, renderInput: pe, value: A, onChange: N, g
       }
     }
   }, Ze = 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"), Ke = (e, t, n) => {
-    const { key: f, ...w } = e;
+    const { key: f, ...y } = e;
     return /* @__PURE__ */ I("li", {
-      ...w,
+      ...y,
       children: [
         e["data-active"] !== void 0 && /* @__PURE__ */ s("span", {
           "aria-hidden": "true",
@@ -203,6 +203,7 @@ function zt({ dataTest: l, options: b, renderInput: pe, value: A, onChange: N, g
           dataTest: `${l}-${d(t)}-checkbox`,
           checked: n.selected,
           size: "medium",
+          checkboxClassName: "!h-4 !w-4",
           hideWrapper: !0,
           decorative: !0
         }) : /* @__PURE__ */ s("span", {
@@ -228,7 +229,7 @@ function zt({ dataTest: l, options: b, renderInput: pe, value: A, onChange: N, g
         },
         onMouseMove: () => x(null)
       }),
-      key: S ? String(S(e)) : `${d(e)}-${t}`,
+      key: C ? String(C(e)) : `${d(e)}-${t}`,
       ref: (m) => {
         X.current[t] = m;
       },
@@ -238,15 +239,15 @@ function zt({ dataTest: l, options: b, renderInput: pe, value: A, onChange: N, g
       "aria-disabled": n || void 0,
       "data-active": o === t ? "" : void 0,
       className: Ze
-    }, w = {
+    }, y = {
       selected: O(e),
       index: t,
       inputValue: h
     };
-    return B ? B(f, e, w) : Ke(f, e, w);
+    return B ? B(f, e, y) : Ke(f, e, y);
   }, tt = !!(F && r), H = b.length > 0 && i.length === b.length, lt = i.length > 0 && !H;
   return /* @__PURE__ */ I("div", {
-    className: E(W.styledSelectAutocompleteWrapper, !Ae && "w-auto", Pe, Re),
+    className: E(W.styledSelectAutocompleteWrapper, !Ne && "w-auto", Pe, Re),
     children: [pe(Xe), a && /* @__PURE__ */ s(mt, {
       root: oe,
       children: /* @__PURE__ */ I("ul", {
@@ -264,7 +265,7 @@ function zt({ dataTest: l, options: b, renderInput: pe, value: A, onChange: N, g
         id: Q,
         role: "listbox",
         "aria-multiselectable": r ? !0 : void 0,
-        className: E("z-[1300] m-0 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)]", tt && "py-0", "[&>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", Ne?.listbox, G?.popper?.className),
+        className: E("z-[1300] m-0 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)]", tt && "py-0", "[&>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", Ae?.listbox, G?.popper?.className),
         children: [F && r && /* @__PURE__ */ I("li", {
           id: `${l}-select-all`,
           role: "option",
@@ -285,6 +286,7 @@ function zt({ dataTest: l, options: b, renderInput: pe, value: A, onChange: N, g
               checked: H,
               indeterminate: lt,
               size: "medium",
+              checkboxClassName: "!h-4 !w-4",
               hideWrapper: !0,
               decorative: !0
             }),

package/dist/components/utils/popover/PopoverAnatomy.js

@@ -1,15 +1,15 @@
 import { cn as p } from "../../../helpers/cn.js";
 import { CloseIcon as m } from "../../icons/close-icon/CloseIcon.js";
-import { StyledButton as f } from "../../inputs/button/StyledButton.js";
-import { Fragment as c, jsx as e, jsxs as r } from "react/jsx-runtime";
-var y = "box-border flex flex-col overflow-hidden rounded-lg border border-solid border-delta-300 bg-white text-delta-700 outline-none shadow-[0px_4px_40px_0px_#22213366]", u = ({ dataTest: d, title: t, titleId: i, children: n, viewResultsAction: l, resetAction: a, footerActions: o, closeLabel: s, onClose: x }) => /* @__PURE__ */ r(c, { children: [
-  /* @__PURE__ */ r("div", {
+import { StyledButton as c } from "../../inputs/button/StyledButton.js";
+import { Fragment as f, jsx as e, jsxs as t } from "react/jsx-runtime";
+var g = "box-border flex flex-col overflow-hidden rounded-lg bg-white text-delta-700 outline-none shadow-[inset_0_0_0_1px_var(--colors-delta-300),0px_4px_40px_0px_#22213366]", y = ({ dataTest: i, title: a, titleId: d, children: n, viewResultsAction: l, resetAction: r, footerActions: o, closeLabel: s, onClose: x }) => /* @__PURE__ */ t(f, { children: [
+  /* @__PURE__ */ t("div", {
     className: "relative flex min-h-0 flex-1 flex-col",
     children: [
-      t && /* @__PURE__ */ e("div", {
-        id: i,
+      a && /* @__PURE__ */ e("div", {
+        id: d,
         className: "shrink-0 truncate pb-1 pl-4 pr-10 pt-2 text-lg font-semibold leading-7 text-delta-800",
-        children: t
+        children: a
       }),
       /* @__PURE__ */ e("div", {
         className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto py-2 pl-4 pr-10",
@@ -17,8 +17,8 @@ var y = "box-border flex flex-col overflow-hidden rounded-lg border border-solid
       }),
       /* @__PURE__ */ e("div", {
         className: "absolute right-0 top-0",
-        children: /* @__PURE__ */ e(f, {
-          dataTest: `${d}-close`,
+        children: /* @__PURE__ */ e(c, {
+          dataTest: `${i}-close`,
           variant: "textGray",
           type: "button",
           "aria-label": s,
@@ -31,9 +31,9 @@ var y = "box-border flex flex-col overflow-hidden rounded-lg border border-solid
       })
     ]
   }),
-  (l ?? a) && /* @__PURE__ */ r("div", {
+  (l ?? r) && /* @__PURE__ */ t("div", {
     className: p("flex shrink-0 items-start p-1", l ? "justify-between" : "justify-end"),
-    children: [l, a]
+    children: [l, r]
   }),
   o && /* @__PURE__ */ e("div", {
     className: "flex shrink-0 flex-col items-end p-3",
@@ -41,6 +41,6 @@ var y = "box-border flex flex-col overflow-hidden rounded-lg border border-solid
   })
 ] });
 export {
-  y as POPOVER_SURFACE_CLASSNAME,
-  u as PopoverAnatomy
+  g as POPOVER_SURFACE_CLASSNAME,
+  y as PopoverAnatomy
 };

package/dist/components/utils/popover/PopoverSheet.js

@@ -2,53 +2,53 @@ import { cn as oe } from "../../../helpers/cn.js";
 import { firstTabbable as re } from "../../../helpers/focusable.js";
 import { TOP_LAYER_PROPS as ne, TOP_LAYER_RESET_STYLE as ie, getOpenModalDialogAncestor as se, shouldUsePopoverTopLayer as ae, useTopLayerRef as ce } from "../../../hooks/useTopLayer.hook.js";
 import { StyledButton as le } from "../../inputs/button/StyledButton.js";
-import { useMobileMediaQuery as de } from "../../../hooks/useMediaQuery.hook.js";
-import { useDebouncedValue as ue } from "../../../hooks/useDebouncedValue.hook.js";
+import { useMobileMediaQuery as ue } from "../../../hooks/useMediaQuery.hook.js";
+import { useDebouncedValue as de } from "../../../hooks/useDebouncedValue.hook.js";
 import { useFocusTrap as fe } from "../../../hooks/useFocusTrap.hook.js";
 import { formatResultsLabel as pe } from "../bottom-sheet/formatResultsLabel.js";
 import { StyledBottomSheet as me } from "../bottom-sheet/StyledBottomSheet.js";
 import { PopoverAnatomy as ge } from "./PopoverAnatomy.js";
-import { useCallback as m, useEffect as y, useId as ve, useRef as R, useState as g } from "react";
+import { useCallback as m, useEffect as b, useId as ve, useRef as y, useState as g } from "react";
 import { Fragment as N, jsx as c, jsxs as W } from "react/jsx-runtime";
-import { FloatingPortal as he, autoUpdate as xe, flip as be, offset as Pe, shift as ye, size as Re, useDismiss as _e, useFloating as Ee, useInteractions as Se, useMergeRefs as Te } from "@floating-ui/react";
+import { FloatingPortal as he, autoUpdate as xe, flip as _e, offset as Pe, shift as be, size as ye, useDismiss as Re, useFloating as Ee, useInteractions as Se, useMergeRefs as Te } from "@floating-ui/react";
 var Ae = 240, Me = {
   info: 472,
   action: 472
-}, we = 0.6, B = "calc(100vw - 32px)", je = ({ dataTest: s, renderTrigger: _, variant: E = "info", title: l, children: S, viewResultsAction: T, resetAction: A, footerActions: M, resultCount: v, closeLabel: w = "Lukk", ariaLabel: F, onOpenChange: I, className: O }) => {
-  const a = ve(), L = `${a}-title`, [o, X] = g(!1), [H, U] = g(), [Y, $] = g(), d = de(), t = E === "action", j = d && !t, k = d && t, u = m((e) => {
+}, we = 0.6, B = "calc(100vw - 32px)", je = ({ dataTest: s, renderTrigger: R, variant: E = "info", title: l, children: S, viewResultsAction: T, resetAction: A, footerActions: M, resultCount: v, closeLabel: w = "Lukk", ariaLabel: F, onOpenChange: I, className: O }) => {
+  const a = ve(), L = `${a}-title`, [o, X] = g(!1), [H, U] = g(), [Y, $] = g(), u = ue(), t = E === "action", j = u && !t, k = u && t, d = m((e) => {
     X(e), I?.(e);
   }, [I]), { refs: h, floatingStyles: q, context: z } = Ee({
     open: o,
-    onOpenChange: u,
+    onOpenChange: d,
     placement: "bottom-start",
     strategy: "fixed",
     whileElementsMounted: xe,
     middleware: [
       Pe(8),
-      ...j ? [] : [be({ padding: 8 })],
-      ye({ padding: 8 }),
-      Re({
+      ...j ? [] : [_e({ padding: 8 })],
+      be({ padding: 8 }),
+      ye({
         padding: 8,
         apply({ availableHeight: e }) {
           $(Math.min(e, Math.round(window.innerHeight * we)));
         }
       })
     ]
-  }), { getFloatingProps: V } = Se([_e(z, {
+  }), { getFloatingProps: V } = Se([Re(z, {
     enabled: !k,
     escapeKey: !0,
     outsidePress: (e) => {
       const i = f.current;
       return !(i && e.target instanceof Node && i.contains(e.target));
     }
-  })]), x = ae(H), C = R(null), [r, G] = g(null), K = m((e) => {
+  })]), x = ae(H), C = y(null), [r, G] = g(null), K = m((e) => {
     C.current = e, G(e);
-  }, []), Q = Te([ce(h.setFloating, x), K]), f = R(null), J = m((e) => {
+  }, []), Q = Te([ce(h.setFloating, x), K]), f = y(null), J = m((e) => {
     f.current = e, h.setReference(e);
   }, [h]), n = m(() => {
-    u(!1);
-  }, [u]);
-  fe(o && t && r !== null, C), y(() => {
+    d(!1);
+  }, [d]);
+  fe(o && t && r !== null, C), b(() => {
     if (!r) return;
     const e = requestAnimationFrame(() => {
       (t ? re(r) : r)?.focus({ preventScroll: !0 });
@@ -56,7 +56,7 @@ var Ae = 240, Me = {
     return () => {
       cancelAnimationFrame(e);
     };
-  }, [r, t]), y(() => {
+  }, [r, t]), b(() => {
     if (!r || t) return;
     const e = (i) => {
       const P = i.relatedTarget;
@@ -70,14 +70,14 @@ var Ae = 240, Me = {
     t,
     n
   ]);
-  const b = R(!1);
-  y(() => {
+  const _ = y(!1);
+  b(() => {
     if (o) {
-      b.current = !0;
+      _.current = !0;
       return;
     }
-    if (!b.current) return;
-    b.current = !1;
+    if (!_.current) return;
+    _.current = !1;
     const e = f.current;
     if (!e) return;
     const i = requestAnimationFrame(() => {
@@ -96,21 +96,21 @@ var Ae = 240, Me = {
           n();
           return;
         }
-        U(se(e.currentTarget)), u(!0);
+        U(se(e.currentTarget)), d(!0);
       },
       "aria-expanded": o,
       "aria-controls": o ? a : void 0,
       "aria-haspopup": t ? "dialog" : void 0,
       "aria-describedby": !t && o ? a : void 0
     }
-  }, p = (e) => typeof e == "function" ? e({ close: n }) : e, Z = ue(v, 500), ee = T ?? (v === void 0 ? void 0 : /* @__PURE__ */ c(le, {
+  }, p = (e) => typeof e == "function" ? e({ close: n }) : e, Z = de(v, 500), ee = T ?? (v === void 0 ? void 0 : /* @__PURE__ */ c(le, {
     dataTest: `${s}-view-results`,
     type: "button",
     variant: "text",
     onClick: n,
     children: pe(Z)
-  })), te = d ? B : Me[E];
-  return k ? /* @__PURE__ */ W(N, { children: [_(D), /* @__PURE__ */ c(me, {
+  })), te = u ? B : Me[E];
+  return k ? /* @__PURE__ */ W(N, { children: [R(D), /* @__PURE__ */ c(me, {
     id: a,
     dataTest: s,
     open: o,
@@ -124,7 +124,7 @@ var Ae = 240, Me = {
     closeLabel: w,
     className: O,
     children: S
-  })] }) : /* @__PURE__ */ W(N, { children: [_(D), o && /* @__PURE__ */ c(he, {
+  })] }) : /* @__PURE__ */ W(N, { children: [R(D), o && /* @__PURE__ */ c(he, {
     root: H,
     children: /* @__PURE__ */ c("div", {
       ...V(),
@@ -141,11 +141,11 @@ var Ae = 240, Me = {
         ...x ? ie : {},
         ...q,
         minWidth: Ae,
-        width: d ? B : void 0,
+        width: u ? B : void 0,
         maxWidth: te,
         maxHeight: Y
       },
-      className: oe("z-[1300]", "box-border flex flex-col overflow-hidden rounded-lg border border-solid border-delta-300 bg-white text-delta-700 outline-none shadow-[0px_4px_40px_0px_#22213366]", O),
+      className: oe("z-[1300]", "box-border flex flex-col overflow-hidden rounded-lg bg-white text-delta-700 outline-none shadow-[inset_0_0_0_1px_var(--colors-delta-300),0px_4px_40px_0px_#22213366]", O),
       children: /* @__PURE__ */ c(ge, {
         dataTest: s,
         title: l,

package/dist/src/components/utils/popover/PopoverAnatomy.d.ts

@@ -1,16 +1,21 @@
 import { ReactNode } from 'react';
 /**
- * The Figma "_Popover" surface chrome (node `44531:233781`): white, 1px `border/outline`, radius 8
- * (`dialog` token) and the Dialogue-popup elevation — the same surface `StyledDialog` paints.
+ * The Figma "_Popover" surface chrome (node `44531:233781`): white, 1px `border/outline` (delta-300),
+ * radius 8 (`dialog` token) and the Dialogue-popup elevation — the same surface `StyledDialog` paints.
  *
- * `border-solid` and `box-border` are load-bearing, not noise: this package builds Tailwind with
- * `preflight: false`, so without them `border` computes to `border-style: none` (no border paints at
- * all) and `box-sizing` falls back to `content-box` (a 400px max-width renders 402).
+ * The 1px edge is an **inset box-shadow ring**, the package's own idiom for non-layout lines
+ * (`StyledTab`/`StyledMenuItem` draw their DS focus rings the same way): a border consumes layout
+ * width, and at the 472px Action max-width a date-picker pair (200 + 16 + 200 = 416px, with 16px +
+ * 40px body padding) needs the full 472px of the frame — with a border only 470px remain and the
+ * pair wraps. Figma's stroke takes no width from autolayout, and the inset shadow matches that.
+ *
+ * `box-border` is load-bearing, not noise: this package builds Tailwind with `preflight: false`, so
+ * without it `box-sizing` falls back to `content-box` and a 472px max-width renders 474.
  *
  * Positioning (`z-index`, the floating transform, the top-layer props) deliberately stays with the
  * caller, so the Gallery story can render the same surface statically in a grid.
  */
-export declare const POPOVER_SURFACE_CLASSNAME = "box-border flex flex-col overflow-hidden rounded-lg border border-solid border-delta-300 bg-white text-delta-700 outline-none shadow-[0px_4px_40px_0px_#22213366]";
+export declare const POPOVER_SURFACE_CLASSNAME = "box-border flex flex-col overflow-hidden rounded-lg bg-white text-delta-700 outline-none shadow-[inset_0_0_0_1px_var(--colors-delta-300),0px_4px_40px_0px_#22213366]";
 export interface PopoverAnatomyProps {
     dataTest: string;
     title?: ReactNode;

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.94.1",
+    "version": "3.95.1",
     "type": "module",
     "sideEffects": [
         "**/*.css",