@stackone/malachite 2.22.0 → 2.23.1

package/dist/components/CardStrip.js

@@ -1,22 +1,22 @@
-import { jsxs as X, jsx as u } from "react/jsx-runtime";
-import $, { useRef as Z, useState as bt, useCallback as L, useLayoutEffect as F } from "react";
-import Ft from "./CustomIcons/ArrowLeftIcon.js";
-import Ht from "./CustomIcons/ForwardArrowIcon.js";
-import Xt from "./CustomIcons/PlusIcon.js";
-import { CONTENT_INSET as mt } from "./PageLayout/constants.js";
-import { CARD_FLARE_PX as m, STRIP_RULE_PX as Wt, CARD_FLARE_TIP_PX as tt, CARD_WIDTH_PX as Mt, FLARE_CLASS as Yt } from "./SelectableCard.js";
-import { CardStripSlotContext as Rt, PINNED_SLOT as Vt, SCROLLED_SLOT as zt } from "./cardStripSlot.js";
-import { FOCUS_RING as Kt } from "./focusRing.js";
-import { useAdoptedStyleSheet as jt } from "./useAdoptedStyleSheet.js";
-const qt = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]), I = '[role="radio"]', Zt = "data-card-strip-scroller", Jt = "data-card-strip-trough", W = "malachite-card-strip", R = "malachite-card-strip-scroller", Dt = "malachite-card-strip-fade", x = "malachite-card-strip-add-tile", Ot = "[data-selectable-card-actions]", Qt = 'a[href], area[href], button, input, select, textarea, iframe, [contenteditable="true"], [tabindex]', w = "data-card-strip-prev-tabindex", J = 1, te = 0.8, ee = (t) => {
+import { jsxs as M, jsx as u } from "react/jsx-runtime";
+import $, { useRef as H, useState as mt, useCallback as L, useLayoutEffect as X } from "react";
+import Xt from "./CustomIcons/ArrowLeftIcon.js";
+import Wt from "./CustomIcons/ForwardArrowIcon.js";
+import Mt from "./CustomIcons/PlusIcon.js";
+import { CONTENT_INSET as Rt } from "./PageLayout/constants.js";
+import { CARD_FLARE_PX as m, STRIP_RULE_PX as Yt, CARD_FLARE_TIP_PX as et, CARD_WIDTH_PX as Vt, FLARE_CLASS as zt } from "./SelectableCard.js";
+import { CardStripSlotContext as gt, PINNED_SLOT as Kt, SCROLLED_SLOT as jt } from "./cardStripSlot.js";
+import { FOCUS_RING as qt } from "./focusRing.js";
+import { useAdoptedStyleSheet as Zt } from "./useAdoptedStyleSheet.js";
+const Jt = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]), I = '[role="radio"]', Qt = "data-card-strip-scroller", te = "data-card-strip-trough", Y = "malachite-card-strip", R = "malachite-card-strip-scroller", wt = "malachite-card-strip-fade", x = "malachite-card-strip-add-tile", Ct = "[data-selectable-card-actions]", ee = 'a[href], area[href], button, input, select, textarea, iframe, [contenteditable="true"], [tabindex]', C = "data-card-strip-prev-tabindex", Q = 1, re = 0.8, ne = (t) => {
   const [r, c] = Array.from(t.children), s = r && c ? c.getBoundingClientRect().left - r.getBoundingClientRect().left : (r == null ? void 0 : r.getBoundingClientRect().width) ?? 0, i = t.clientWidth - m * 2;
-  return s <= 0 ? i * te : Math.max(1, Math.floor(i / s)) * s;
-}, re = 80, ne = 20, gt = 11, T = 12, P = 52, oe = (P + ne) / 2, Ct = "var(--malachite-shadow-default)", ae = "var(--malachite-card-strip-arrow-background, var(--malachite-card-background, #ffffff))", ce = "var(--malachite-card-strip-arrow-border, #e8e8e8)", et = "var(--malachite-card-strip-background, #f1f1f1)", _t = "var(--malachite-radius-xxl, 14px)", se = `${_t} ${_t} 0 0`, At = "var(--malachite-radius-xxxl, 16px)", ie = `${At} ${At} 0 0`, M = 4, xt = re + (m - M), le = Mt, de = "var(--malachite-card-strip-divider, #dddddd)", St = "var(--malachite-card-strip-fade, transparent)", ue = "var(--malachite-selectable-card-hover-background, #e8e8e8)", fe = "var(--malachite-card-strip-arrow-border, #e8e8e8)", Et = "var(--malachite-selectable-card-hover-rule, #bbbbbb)", Lt = "0px 1px 0px 0px rgba(0, 0, 0, 0.4)", pe = "var(--malachite-card-background, #ffffff)", he = "var(--malachite-text-primary, #0a0a0a)", be = "var(--malachite-card-strip-add-primary-background, var(--malachite-text-primary, #0a0a0a))", me = "var(--malachite-card-strip-add-primary-foreground, var(--malachite-card-background, #ffffff))", Re = "0px 1px 0px 0px rgba(10, 10, 10, 0.7)", nt = Wt, $t = 16, H = 9999, ge = 4, _e = `
-.${W} {
-    clip-path: inset(-${H}px -${H}px 0);
+  return s <= 0 ? i * re : Math.max(1, Math.floor(i / s)) * s;
+}, oe = 80, ae = 20, _t = 11, T = 12, P = 52, ce = (P + ae) / 2, It = "var(--malachite-shadow-default)", se = "var(--malachite-card-strip-arrow-background, var(--malachite-card-background, #ffffff))", ie = "var(--malachite-card-strip-arrow-border, #e8e8e8)", rt = "var(--malachite-card-strip-background, #f1f1f1)", At = "var(--malachite-radius-xxl, 14px)", le = `${At} ${At} 0 0`, xt = "var(--malachite-radius-xxxl, 16px)", de = `${xt} ${xt} 0 0`, V = 4, St = oe + (m - V), ue = Vt, fe = "var(--malachite-card-strip-divider, #dddddd)", Et = "var(--malachite-card-strip-fade, transparent)", pe = "var(--malachite-selectable-card-hover-background, #e8e8e8)", he = "var(--malachite-card-strip-arrow-border, #e8e8e8)", Lt = "var(--malachite-selectable-card-hover-rule, #bbbbbb)", $t = "0px 1px 0px 0px rgba(0, 0, 0, 0.4)", be = "var(--malachite-card-background, #ffffff)", me = "var(--malachite-text-primary, #0a0a0a)", Re = "var(--malachite-card-strip-add-primary-background, var(--malachite-text-primary, #0a0a0a))", ge = "var(--malachite-card-strip-add-primary-foreground, var(--malachite-card-background, #ffffff))", _e = "0px 1px 0px 0px rgba(10, 10, 10, 0.7)", ot = Yt, Tt = 16, W = 9999, Ae = 4, xe = `
+.${Y} {
+    clip-path: inset(-${W}px -${W}px 0);
 }
-.${W}:has(:focus-visible) {
-    clip-path: inset(-${H}px -${H}px -${ge}px);
+.${Y}:has(:focus-visible) {
+    clip-path: inset(-${W}px -${W}px -${Ae}px);
 }
 .${R} {
     display: flex;
@@ -26,8 +26,8 @@ const qt = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
     scroll-behavior: smooth;
     scrollbar-width: none;
     -ms-overflow-style: none;
-    padding-block: ${$t}px;
-    margin-block: -${$t}px;
+    padding-block: ${Tt}px;
+    margin-block: -${Tt}px;
     /* overflow-x clips both axes, so the end cards would lose a flare; the negative margin trades
        the padding back out and scroll-padding keeps the rest position at zero. */
     padding-inline: ${m}px;
@@ -35,7 +35,7 @@ const qt = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
     scroll-padding-inline: ${m}px;
 }
 /* A card focused at a faded edge has to stay readable, so the fade lifts entirely. */
-.${W}:has(:focus-visible) .${Dt} {
+.${Y}:has(:focus-visible) .${wt} {
     display: none;
 }
 .${R}::-webkit-scrollbar {
@@ -43,40 +43,40 @@ const qt = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
 }
 /* No bottom edge: the strip's rule is the baseline for the add tile as much as for a card. */
 .${x} > * {
-    background: ${et};
-    border-radius: ${se};
+    background: ${rt};
+    border-radius: ${le};
 }
 .${x}:hover:not(:has(button:disabled)) > * {
-    background: ${ue};
+    background: ${pe};
 }
 .${x} button:active:not(:disabled) {
     opacity: 0.8;
 }
 .${x}:has(button:active) > * {
-    background: ${et};
+    background: ${rt};
 }
 .${x}[data-emphasis='secondary'] button {
-    border-color: ${fe};
-    box-shadow: ${Ct};
+    border-color: ${he};
+    box-shadow: ${It};
 }
 .${x}[data-emphasis='secondary']:hover:not(:has(button:disabled)) button {
-    border-color: ${Et};
-    box-shadow: ${Lt};
+    border-color: ${Lt};
+    box-shadow: ${$t};
 }
 .${x}[data-emphasis='secondary'] button:active:not(:disabled) {
-    border-color: ${Et};
-    box-shadow: ${Lt};
+    border-color: ${Lt};
+    box-shadow: ${$t};
 }
 .${x}[data-emphasis='primary'] button {
     border-color: transparent;
-    box-shadow: ${Re};
+    box-shadow: ${_e};
 }
 .${R} > * {
     flex: 0 0 auto;
     min-width: 0;
 }
 .${R} > * + * {
-    border-left: 1px solid ${de};
+    border-left: 1px solid ${fe};
 }
 .${R}[data-snap='true'] {
     scroll-snap-type: x proximity;
@@ -94,14 +94,14 @@ const qt = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
     .${R}[data-snap='true'] > * {
         scroll-snap-align: none;
     }
-}`, Ae = "malachite-card-strip-style", xe = () => typeof window > "u" || typeof window.matchMedia != "function" ? !0 : window.matchMedia("(prefers-reduced-motion: reduce)").matches, A = (t) => t.dataset.value ?? t.getAttribute("value"), Q = (t) => t.hasAttribute("disabled") || t.getAttribute("aria-disabled") === "true", Se = (t) => {
+}`, Se = "malachite-card-strip-style", vt = () => typeof window > "u" || typeof window.matchMedia != "function" ? !0 : window.matchMedia("(prefers-reduced-motion: reduce)").matches, A = (t) => t.dataset.value ?? t.getAttribute("value"), tt = (t) => t.hasAttribute("disabled") || t.getAttribute("aria-disabled") === "true", Ee = (t) => {
   const r = t.parentElement;
-  return !r || r.querySelectorAll(I).length !== 1 ? null : r.querySelector(Ot);
-}, Ee = (t, r) => {
+  return !r || r.querySelectorAll(I).length !== 1 ? null : r.querySelector(Ct);
+}, Le = (t, r) => {
   const c = t.closest(I);
   if (c)
     return c;
-  if (t.closest(Ot))
+  if (t.closest(Ct))
     return null;
   let s = t;
   for (; s && r.contains(s); ) {
@@ -111,63 +111,63 @@ const qt = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
     s = s.parentElement;
   }
   return null;
-}, Le = (t) => {
-  const r = Se(t);
-  return r ? Array.from(r.querySelectorAll(Qt)) : [];
 }, $e = (t) => {
-  t.hasAttribute(w) || t.setAttribute(w, t.getAttribute("tabindex") ?? ""), t.setAttribute("tabindex", "-1");
+  const r = Ee(t);
+  return r ? Array.from(r.querySelectorAll(ee)) : [];
 }, Te = (t) => {
-  if (!t.hasAttribute(w))
+  t.hasAttribute(C) || t.setAttribute(C, t.getAttribute("tabindex") ?? ""), t.setAttribute("tabindex", "-1");
+}, ve = (t) => {
+  if (!t.hasAttribute(C))
     return;
-  const r = t.getAttribute(w);
-  t.removeAttribute(w), r ? t.setAttribute("tabindex", r) : t.removeAttribute("tabindex");
-}, ve = {
+  const r = t.getAttribute(C);
+  t.removeAttribute(C), r ? t.setAttribute("tabindex", r) : t.removeAttribute("tabindex");
+}, ye = {
   profile: "var(--malachite-selectable-card-selected-border, #047b43)",
   library: "var(--malachite-selectable-card-library-selected-border, #bbbbbb)",
   editing: "var(--malachite-selectable-card-pending-foreground, #96580a)"
-}, ye = {
+}, De = {
   backgroundRepeat: "no-repeat",
   backgroundPosition: "left bottom",
-  backgroundSize: `100% ${nt}px`
-}, Tt = 0.5, vt = m - tt, De = (t) => {
-  const r = t.querySelector(`:scope > .${Yt}`);
+  backgroundSize: `100% ${ot}px`
+}, yt = 0.5, Dt = m - et, Oe = (t) => {
+  const r = t.querySelector(`:scope > .${zt}`);
   if (!r)
     return null;
   const { left: c, right: s } = r.getBoundingClientRect();
-  return { left: c + vt, right: s - vt };
-}, Oe = (t, r, c, s) => {
+  return { left: c + Dt, right: s - Dt };
+}, we = (t, r, c, s) => {
   if (!t)
     return;
-  const i = ve[s], S = t.getBoundingClientRect(), v = S.left, k = c && (r != null && r.contains(c)) ? r.getBoundingClientRect() : S, E = c == null ? void 0 : c.getBoundingClientRect(), g = c ? De(c) : null, V = (g == null ? void 0 : g.left) ?? (E ? E.left - tt : 0), z = (g == null ? void 0 : g.right) ?? (E ? E.right + tt : 0), y = E ? Math.max(V, k.left) + Tt - v : 0, b = E ? Math.min(z, k.right) - Tt - v : 0;
+  const i = ye[s], S = t.getBoundingClientRect(), v = S.left, k = c && (r != null && r.contains(c)) ? r.getBoundingClientRect() : S, E = c == null ? void 0 : c.getBoundingClientRect(), g = c ? Oe(c) : null, K = (g == null ? void 0 : g.left) ?? (E ? E.left - et : 0), j = (g == null ? void 0 : g.right) ?? (E ? E.right + et : 0), y = E ? Math.max(K, k.left) + yt - v : 0, b = E ? Math.min(j, k.right) - yt - v : 0;
   t.style.backgroundImage = b > y ? `linear-gradient(to right, ${i} 0 ${y}px, transparent ${y}px ${b}px, ${i} ${b}px 100%)` : `linear-gradient(to right, ${i} 0 100%)`;
 }, Ce = {
-  marginInline: `calc(${mt} * -1)`,
-  paddingInline: mt
-}, Y = {
-  background: et,
-  borderRadius: ie,
-  paddingTop: `${M}px`,
-  paddingInline: `${M}px`,
-  marginBottom: `${nt}px`
-}, we = {
-  ...Y,
+  marginInline: `calc(${Rt} * -1)`,
+  paddingInline: Rt
+}, z = {
+  background: rt,
+  borderRadius: de,
+  paddingTop: `${V}px`,
+  paddingInline: `${V}px`,
+  marginBottom: `${ot}px`
+}, Ie = {
+  ...z,
   marginInline: `${T}px`
-}, Ie = Object.fromEntries(
+}, Pe = Object.fromEntries(
   [T, P].flatMap(
     (t) => [T, P].map((r) => [
       `${t}:${r}`,
-      { ...Y, marginInline: `${t}px ${r}px` }
+      { ...z, marginInline: `${t}px ${r}px` }
     ])
   )
-), Pe = Y, ke = Y, Ne = {
+), ke = z, Ne = z, Ue = {
   marginInlineStart: `${T}px`
-}, Ue = {
+}, Be = {
   primary: {
-    backgroundColor: be,
-    color: me
+    backgroundColor: Re,
+    color: ge
   },
-  secondary: { backgroundColor: pe, color: he }
-}, wt = ({
+  secondary: { backgroundColor: be, color: me }
+}, Pt = ({
   label: t,
   icon: r,
   onClick: c,
@@ -180,26 +180,26 @@ const qt = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
     className: x,
     "data-emphasis": i,
     style: {
-      ...Pe,
-      width: `${le}px`,
-      height: `calc(100% - ${nt}px)`
+      ...ke,
+      width: `${ue}px`,
+      height: `calc(100% - ${ot}px)`
     },
-    children: /* @__PURE__ */ u("div", { className: "flex h-full items-center justify-center px-4", children: /* @__PURE__ */ X(
+    children: /* @__PURE__ */ u("div", { className: "flex h-full items-center justify-center px-4", children: /* @__PURE__ */ M(
       "button",
       {
         type: "button",
         onClick: c,
         disabled: s,
-        style: Ue[i],
-        className: `${Kt} inline-flex items-center justify-center gap-1.5 h-[var(--malachite-control-height-medium,32px)] w-[108px] px-2.5 rounded-xl border border-solid text-[length:var(--malachite-font-size-small,13px)] font-medium whitespace-nowrap ${s ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${S}`,
+        style: Be[i],
+        className: `${qt} inline-flex items-center justify-center gap-1.5 h-[var(--malachite-control-height-medium,32px)] w-[108px] px-2.5 rounded-xl border border-solid text-[length:var(--malachite-font-size-small,13px)] font-medium whitespace-nowrap ${s ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${S}`,
         children: [
-          /* @__PURE__ */ u("span", { className: "inline-flex h-[13px] w-[13px] shrink-0 items-center justify-center", children: r ?? /* @__PURE__ */ u(Xt, { size: 13 }) }),
+          /* @__PURE__ */ u("span", { className: "inline-flex h-[13px] w-[13px] shrink-0 items-center justify-center", children: r ?? /* @__PURE__ */ u(Mt, { size: 13 }) }),
           t
         ]
       }
     ) })
   }
-), rt = (t) => $.isValidElement(t) && t.type === wt, Be = (t) => $.isValidElement(t) && t.type === $.Fragment && $.Children.toArray(t.props.children).some(rt), yt = ({ side: t, onClick: r }) => /* @__PURE__ */ u(
+), nt = (t) => $.isValidElement(t) && t.type === Pt, Ge = (t) => $.isValidElement(t) && t.type === $.Fragment && $.Children.toArray(t.props.children).some(nt), Ot = ({ side: t, onClick: r }) => /* @__PURE__ */ u(
   "button",
   {
     type: "button",
@@ -209,14 +209,14 @@ const qt = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
     onClick: r,
     className: "absolute top-1/2 -translate-y-1/2 z-10 inline-flex items-center justify-center w-5 h-5 rounded-lg cursor-pointer text-[var(--malachite-text-secondary)]",
     style: {
-      [t]: `-${oe}px`,
-      background: ae,
-      border: `1px solid ${ce}`,
-      boxShadow: Ct
+      [t]: `-${ce}px`,
+      background: se,
+      border: `1px solid ${ie}`,
+      boxShadow: It
     },
-    children: t === "left" ? /* @__PURE__ */ u(Ft, { size: gt }) : /* @__PURE__ */ u(Ht, { size: gt })
+    children: t === "left" ? /* @__PURE__ */ u(Xt, { size: _t }) : /* @__PURE__ */ u(Wt, { size: _t })
   }
-), Ge = ({
+), Fe = ({
   value: t,
   tone: r,
   onChange: c,
@@ -227,95 +227,95 @@ const qt = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
   snap: k = !0,
   bleed: E = !1,
   scrollSelectedIntoView: g = !0,
-  "aria-label": V,
-  "aria-labelledby": z,
+  "aria-label": K,
+  "aria-labelledby": j,
   className: y = "",
   style: b
 }) => {
-  const D = Z(null), O = Z(null), [N, It] = bt({ canScrollLeft: !1, canScrollRight: !1 });
-  jt(D, _e, Ae);
-  const K = $.Children.toArray(s), j = K.filter((e) => !rt(e)), Pt = j.some(Be), U = j.length > 0, ot = K.filter(rt).map(
+  const D = H(null), O = H(null), at = H(!1), [N, kt] = mt({ canScrollLeft: !1, canScrollRight: !1 });
+  Zt(D, xe, Se);
+  const q = $.Children.toArray(s), Z = q.filter((e) => !nt(e)), Nt = Z.some(Ge), U = Z.length > 0, ct = q.filter(nt).map(
     (e) => e.props.emphasis === void 0 ? $.cloneElement(e, { emphasis: U ? "secondary" : "primary" }) : e
-  ), at = K.length, _ = L(() => {
+  ), st = q.length, _ = L(() => {
     const e = D.current;
     return e ? Array.from(e.querySelectorAll(I)) : [];
-  }, []), q = L(
+  }, []), J = L(
     () => _().filter((e) => A(e) !== null),
     [_]
-  ), ct = Z(/* @__PURE__ */ new Set()), C = L((e, n) => {
-    ct.current.has(e) || (ct.current.add(e), console.warn(n));
-  }, []), [kt, Nt] = bt("profile");
-  F(() => {
+  ), it = H(/* @__PURE__ */ new Set()), w = L((e, n) => {
+    it.current.has(e) || (it.current.add(e), console.warn(n));
+  }, []), [Ut, Bt] = mt("profile");
+  X(() => {
     var n, a;
     const e = (a = (n = _().find((d) => A(d) === t)) == null ? void 0 : n.parentElement) == null ? void 0 : a.getAttribute("data-variant");
-    (e === "profile" || e === "library" || e === "editing") && Nt(e);
-  }, [_, t]), F(() => {
-    const e = _(), n = q(), d = n.find((o) => A(o) === t) ?? n.find((o) => !Q(o)) ?? null;
+    (e === "profile" || e === "library" || e === "editing") && Bt(e);
+  }, [_, t]), X(() => {
+    const e = _(), n = J(), d = n.find((o) => A(o) === t) ?? n.find((o) => !tt(o)) ?? null;
     if (e.forEach((o) => {
       const h = o === d, G = h ? 0 : -1;
       o.tabIndex !== G && (o.tabIndex = G);
-      for (const ht of Le(o))
-        h ? Te(ht) : $e(ht);
+      for (const F of $e(o))
+        h ? ve(F) : Te(F);
     }), process.env.NODE_ENV === "production")
       return;
-    n.length !== e.length && C(
+    n.length !== e.length && w(
       "missing-value",
       'CardStrip: a child with role="radio" has no `data-value`. It cannot be selected or reached by arrow keys, so it is excluded from the radio set. Give every card a `data-value`.'
     );
     const l = /* @__PURE__ */ new Set();
     for (const o of n) {
       const h = A(o);
-      h !== null && (l.has(h) && C(
+      h !== null && (l.has(h) && w(
         `duplicate:${h}`,
         `CardStrip: two cards share the data-value "${h}". Both will read as checked and only the first is selectable — data-value must be unique.`
       ), l.add(h));
     }
     const p = t !== "";
-    e.length > 0 && p && !l.has(t) && C(
+    e.length > 0 && p && !l.has(t) && w(
       `unmatched:${t}`,
       `CardStrip: value "${t}" matches no card's data-value, so the group reports no selection.`
     );
     const f = e.filter(
       (o) => o.getAttribute("aria-checked") === "true"
     ).length;
-    e.length > 0 && p && f !== 1 && C(
+    e.length > 0 && p && f !== 1 && w(
       `checked:${f}`,
       `CardStrip: ${f} cards are aria-checked, but a radiogroup has exactly one. Drive each card's checked state from the strip's \`value\`.`
-    ), Pt && C(
+    ), Nt && w(
       "wrapped-add-tile",
       "CardStrip: a CardStrip.AddTile inside a fragment is treated as a card and scrolls with them. The add tile must be a direct child of CardStrip."
     );
-  }), F(() => {
+  }), X(() => {
     if (!g)
       return;
-    const e = O.current, n = _().find((G) => A(G) === t);
+    const e = O.current, n = _().find((F) => A(F) === t);
     if (!e || !n || typeof e.scrollTo != "function")
       return;
-    const d = (n.closest('[role="radio"]') ?? n).getBoundingClientRect(), l = e.getBoundingClientRect(), p = e.scrollLeft + (d.left - l.left), f = p + d.width, o = e.scrollLeft + m, h = e.scrollLeft + e.clientWidth - m;
-    p >= o && f <= h || e.scrollTo({
+    const d = (n.closest('[role="radio"]') ?? n).getBoundingClientRect(), l = e.getBoundingClientRect(), p = e.scrollLeft + (d.left - l.left), f = p + d.width, o = e.scrollLeft + m, h = e.scrollLeft + e.clientWidth - m, G = at.current;
+    at.current = !0, !(p >= o && f <= h) && e.scrollTo({
       left: f > h ? f - e.clientWidth + m : p - m,
-      behavior: "instant"
+      behavior: G && !vt() ? "smooth" : "instant"
     });
-  }, [_, g, t, at]);
-  const st = r ?? kt, it = (b == null ? void 0 : b.background) !== void 0 || (b == null ? void 0 : b.backgroundImage) !== void 0, B = L(() => {
+  }, [_, g, t, st]);
+  const lt = r ?? Ut, dt = (b == null ? void 0 : b.background) !== void 0 || (b == null ? void 0 : b.backgroundImage) !== void 0, B = L(() => {
     var f;
     const e = O.current;
-    if (it || Oe(
+    if (dt || we(
       D.current,
       e,
       (f = _().find((o) => A(o) === t)) == null ? void 0 : f.parentElement,
-      st
+      lt
     ), !e)
       return;
-    const { scrollWidth: n, clientWidth: a, scrollLeft: d } = e, l = n > a + J, p = {
-      canScrollLeft: l && d > J,
-      canScrollRight: l && d + a < n - J
+    const { scrollWidth: n, clientWidth: a, scrollLeft: d } = e, l = n > a + Q, p = {
+      canScrollLeft: l && d > Q,
+      canScrollRight: l && d + a < n - Q
     };
-    It(
+    kt(
       (o) => o.canScrollLeft === p.canScrollLeft && o.canScrollRight === p.canScrollRight ? o : p
     );
-  }, [it, _, st, t]);
-  F(() => {
+  }, [dt, _, lt, t]);
+  X(() => {
     B();
     const e = O.current;
     if (!e)
@@ -326,21 +326,21 @@ const qt = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
     return a == null || a.observe(e), () => {
       e.removeEventListener("scroll", n), a == null || a.disconnect();
     };
-  }, [B, at]);
-  const lt = L((e) => {
+  }, [B, st]);
+  const ut = L((e) => {
     const n = O.current;
     !n || typeof n.scrollBy != "function" || n.scrollBy({
-      left: e * ee(n),
-      behavior: xe() ? "auto" : "smooth"
+      left: e * ne(n),
+      behavior: vt() ? "auto" : "smooth"
     });
-  }, []), Ut = L(
+  }, []), Gt = L(
     (e) => {
-      if (!qt.has(e.key))
+      if (!Jt.has(e.key))
         return;
       const n = e.target;
       if (!(n instanceof Element) || !n.closest(I))
         return;
-      const a = q().filter((o) => !Q(o));
+      const a = J().filter((o) => !tt(o));
       if (a.length === 0)
         return;
       e.preventDefault();
@@ -357,8 +357,8 @@ const qt = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
       const p = a[l], f = A(p);
       f !== null && f !== t && c(f), p.focus();
     },
-    [q, c, t]
-  ), Bt = L(
+    [J, c, t]
+  ), Ft = L(
     (e) => {
       const n = e.target;
       if (!(n instanceof Element))
@@ -366,65 +366,65 @@ const qt = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
       const a = D.current;
       if (!a)
         return;
-      const d = Ee(n, a);
-      if (!d || Q(d))
+      const d = Le(n, a);
+      if (!d || tt(d))
         return;
       const l = A(d);
       l !== null && l !== t && c(l);
     },
     [c, t]
-  ), dt = S && N.canScrollLeft, ut = S && N.canScrollRight, ft = v && N.canScrollLeft, pt = v && N.canScrollRight, Gt = S ? Ie[`${dt ? P : T}:${ut ? P : T}`] : we;
-  return /* @__PURE__ */ X(
+  ), ft = S && N.canScrollLeft, pt = S && N.canScrollRight, ht = v && N.canScrollLeft, bt = v && N.canScrollRight, Ht = S ? Pe[`${ft ? P : T}:${pt ? P : T}`] : Ie;
+  return /* @__PURE__ */ M(
     "div",
     {
       ref: D,
-      onKeyDown: Ut,
-      onClick: Bt,
-      className: `${W} flex items-stretch ${y}`,
+      onKeyDown: Gt,
+      onClick: Ft,
+      className: `${Y} flex items-stretch ${y}`,
       style: {
-        ...ye,
+        ...De,
         ...E ? Ce : null,
         ...b
       },
       children: [
-        /* @__PURE__ */ X(
+        /* @__PURE__ */ M(
           "div",
           {
             role: "radiogroup",
-            "aria-label": V,
-            "aria-labelledby": z,
+            "aria-label": K,
+            "aria-labelledby": j,
             className: U ? "flex items-stretch min-w-0" : "flex items-stretch",
             children: [
-              i ? /* @__PURE__ */ u(Rt.Provider, { value: Vt, children: /* @__PURE__ */ u("div", { className: "shrink-0", style: ke, children: i }) }) : null,
-              U ? /* @__PURE__ */ X(
+              i ? /* @__PURE__ */ u(gt.Provider, { value: Kt, children: /* @__PURE__ */ u("div", { className: "shrink-0", style: Ne, children: i }) }) : null,
+              U ? /* @__PURE__ */ M(
                 "div",
                 {
-                  [Jt]: "",
+                  [te]: "",
                   className: "relative min-w-0 shrink basis-auto",
-                  style: Gt,
+                  style: Ht,
                   children: [
                     /* @__PURE__ */ u(
                       "div",
                       {
                         ref: O,
                         tabIndex: -1,
-                        [Zt]: "",
+                        [Qt]: "",
                         "data-snap": k ? "true" : "false",
                         className: R,
-                        children: /* @__PURE__ */ u(Rt.Provider, { value: zt, children: j })
+                        children: /* @__PURE__ */ u(gt.Provider, { value: jt, children: Z })
                       }
                     ),
-                    dt ? /* @__PURE__ */ u(yt, { side: "left", onClick: () => lt(-1) }) : null,
-                    ut ? /* @__PURE__ */ u(yt, { side: "right", onClick: () => lt(1) }) : null,
-                    ft || pt ? /* @__PURE__ */ u(
+                    ft ? /* @__PURE__ */ u(Ot, { side: "left", onClick: () => ut(-1) }) : null,
+                    pt ? /* @__PURE__ */ u(Ot, { side: "right", onClick: () => ut(1) }) : null,
+                    ht || bt ? /* @__PURE__ */ u(
                       "div",
                       {
                         "aria-hidden": !0,
                         "data-card-strip-fade": "",
-                        className: `${Dt} absolute pointer-events-none`,
+                        className: `${wt} absolute pointer-events-none`,
                         style: {
-                          inset: `-${M}px -${m}px 0`,
-                          background: `linear-gradient(to right, ${ft ? St : "transparent"} 0, transparent ${xt}px, transparent calc(100% - ${xt}px), ${pt ? St : "transparent"} 100%)`
+                          inset: `-${V}px -${m}px 0`,
+                          background: `linear-gradient(to right, ${ht ? Et : "transparent"} 0, transparent ${St}px, transparent calc(100% - ${St}px), ${bt ? Et : "transparent"} 100%)`
                         }
                       }
                     ) : null
@@ -434,21 +434,21 @@ const qt = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
             ]
           }
         ),
-        ot.length > 0 ? /* @__PURE__ */ u(
+        ct.length > 0 ? /* @__PURE__ */ u(
           "div",
           {
             className: "shrink-0",
-            style: !U && i ? Ne : void 0,
-            children: ot
+            style: !U && i ? Ue : void 0,
+            children: ct
           }
         ) : null
       ]
     }
   );
 };
-Ge.AddTile = wt;
+Fe.AddTile = Pt;
 export {
-  Ge as CardStrip,
-  Ge as default
+  Fe as CardStrip,
+  Fe as default
 };
 //# sourceMappingURL=CardStrip.js.map