@stackone/malachite 2.31.1 → 2.32.0

package/COMPONENTS.md

@@ -12,7 +12,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`SurfaceExpandableRow`** — A row that opens to reveal a body (used as `Surface.ExpandableRow`), for a line that carries its own controls. Not `Accordion`, which puts its header inside the toggle button, so a header holding a dropdown or a second button would be invalid: here the row surface takes the click and a cell opts out by wrapping its controls in `ExpandableRow.Controls`, while the arrow stays a real button so the keyboard reaches it. That opt-out is explicit rather than sniffing the event target for an interactive ancestor, because a control rendering into a shadow root retargets the event to its host. `sticky` pins the row while its body scrolls, offset by `stickyTopOffset` for whatever is already pinned above it; it only pins while open, since a closed row has nothing to scroll past. _Key props:_ `header`, `children`, `expanded`, `onToggle`, `sticky`, `stickyTopOffset`, `divider`, `tone`, `aria-label`, `className`, `style`.
 - **`DisclosureArrow`** — The expand/collapse triangle disclosure UI shares (`Accordion`, `Surface.ExpandableRow`). Owns its colour states so they never drift between usages: `text-primary` when expanded, `text-placeholder` otherwise, and dark on hover inside a `group` ancestor — put `group` on the clickable header or row so that hover state activates. _Key props:_ `expanded`, `size`, `className`.
 - **`Card`** — Generic content card.
-- **`SelectableCard`** — A card that is one option in a radio group — eyebrow, optional status tag, title, description, a count label and a top-right action slot. Use inside a `CardStrip`. Selection is controlled by the consumer: pass `selected`, which drives both the visual treatment and `aria-checked`. A selected card meets the sheet below the way a browser tab meets its toolbar — its bottom corners flare outward onto the strip’s rule — so its outline is one SVG path rather than borders, which would split into two lines at the tangent. `variant` picks the palette: `profile` (green), `library` (neutral) or `editing` (amber, for a profile with unsaved changes). `actions` stands in the card’s top-right corner, on the eyebrow row, and renders outside the control so a menu or icon button inside it stays clickable and keeps its own tab stop. Nothing else marks that corner: the flared outline, the tint and the green eyebrow already say which card is selected, so a radio there would only repeat them. `isDefault` marks the card as the account default with a pin beside the title, named for assistive tech and tooltipped for everyone else — it belongs with the name it qualifies rather than among the actions, which read as things to press. For a row-shaped selectable use `Surface.Row` instead. _Key props:_ `value`, `title`, `titleIcon`, `isDefault`, `variant` (`profile` | `library` | `editing`), `eyebrow`, `status` (`label`, `type`), `description`, `countLabel`, `actions`, `selected`, `loading` (`loadingLabel`, `loadingHint`), `disabled`, `dimmed`, `onSelect`, `tabIndex`, `aria-label`, `className`, `style`.
+- **`SelectableCard`** — A card that is one option in a radio group — eyebrow, optional status tag, title, description, a count label and a top-right action slot. Use inside a `CardStrip`. Selection is controlled by the consumer: pass `selected`, which drives both the visual treatment and `aria-checked`. A selected card meets the sheet below the way a browser tab meets its toolbar — its bottom corners flare outward onto the strip’s rule — so its outline is one SVG path rather than borders, which would split into two lines at the tangent. `variant` picks the palette: `profile` (green), `library` (neutral) or `editing` (amber, for a profile with unsaved changes). `actions` stands in the card’s top-right corner, on the eyebrow row, and renders outside the control so a menu or icon button inside it stays clickable and keeps its own tab stop. Nothing else marks that corner: the flared outline, the tint and the green eyebrow already say which card is selected, so a radio there would only repeat them. `onDismiss` adds an x after `actions`, tinted like the eyebrow so it reads as part of the card — for discarding a draft card; `dismissDisabledReason` disables it and explains why in its tooltip. `isDefault` marks the card as the account default with a pin beside the title, named for assistive tech and tooltipped for everyone else — it belongs with the name it qualifies rather than among the actions, which read as things to press. For a row-shaped selectable use `Surface.Row` instead. _Key props:_ `value`, `title`, `titleIcon`, `isDefault`, `variant` (`profile` | `library` | `editing`), `eyebrow`, `status` (`label`, `type`), `description`, `countLabel`, `actions`, `onDismiss` (`dismissLabel`, `dismissDisabledReason`), `selected`, `loading` (`loadingLabel`, `loadingHint`), `disabled`, `dimmed`, `onSelect`, `tabIndex`, `aria-label`, `className`, `style`.
 - **`CardStrip`** — Horizontally scrolling radio group of cards, with edge arrows that appear only when the content overflows, an edge fade, scroll-snap and arrow-key navigation matching `SegmentedControl`. Owns interaction only: it finds its options by looking for `role="radio"` descendants carrying `data-value`, so any such child works (`SelectableCard` emits both). Pass a non-selectable terminal tile as `CardStrip.AddTile` — it sits inside the group but outside the radio set, and must be a direct child or it scrolls with the cards. Use `leading` to pin a card that should not scroll away; the strip tells the cards which slot they are in, so a pinned `SelectableCard` drops the left rule the scrolling ones draw. Set `bleed` when the strip sits in a `PageLayout`: the strip stretches past the horizontal padding of the layout so its bottom rule runs the full width of the page card, while the cards stay aligned to the gutter. With no cards at all the strip degenerates to its pinned slots alone — no trough, no scroller and no arrows — with the add tile standing beside `leading` and taking `primary` emphasis automatically, since adding the first card is the only thing on offer. _Key props:_ `value`, `tone` (`profile` | `library` | `editing` — read off the selected card unless set), `onChange`, `children`, `leading`, `arrows`, `fadeEdges`, `snap`, `bleed`, `scrollSelectedIntoView`, `aria-label`, `aria-labelledby`, `className`, `style`. `CardStrip.AddTile`: `label`, `icon`, `onClick`, `disabled`, `emphasis` (`primary` | `secondary` — left to the strip unless set: `primary` while there are no cards, `secondary` once there are), `className`.
 - **`SplitScreenLayout`** — Two-pane full-screen layout (content + preview/aside) with an optional dismiss button.
 - **`PageLayout`** — Standard page chrome: a bordered card holding a breadcrumb bar, an optional alert strip, and a header block (subtitle, title + suffix, description) above the page body. Used as `PageLayout.Regular`; `PageLayout.Empty` is the chrome-only variant for pre-auth and error screens, with `headerActions` and `background` slots. Actions are declared as data (`buttons`) rather than children, and any that do not fit collapse into an overflow `ActionMenu` via `OverflowRow`. A client-side-routed app must pass `renderLink` so crumbs and the back button go through its router instead of reloading the document. Both layouts render a `main` landmark, demoted via `role` when the app owns its own. Deliberately not a `Surface` — the page card is 16px and carries no shadow. _Key props:_ `PageLayout.Regular`: `breadcrumbLinks`, `breadcrumbActions`, `renderLink`, `title`, `titleSuffix`, `subtitle`, `description`, `buttons`, `loading`, `centered`, `noPadding`, `contentGap` (`small` | `medium` | `large` | `xlarge`, default `small`), `alert`, `role`, `aria-label`, `aria-labelledby`, `className`, `style`. `PageLayout.Empty`: `title`, `centered`, `uniformPadding`, `headerActions`, `background`, `role`, `aria-label`, `aria-labelledby`, `className`, `style`.

package/dist/components/SelectableCard.js

@@ -1,70 +1,72 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { useRef as Re, useId as $e } from "react";
-import Te from "./CustomIcons/PinIcon.js";
-import { Tag as xe } from "./Tag.js";
-import ue from "./Tooltip.js";
-import M from "./TruncatedTooltip.js";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useRef as Ie, useId as ve } from "react";
+import { Button as ye } from "./Button.js";
+import Se from "./CustomIcons/DismissIcon.js";
+import Ne from "./CustomIcons/PinIcon.js";
+import { Tag as Ae } from "./Tag.js";
+import Ce from "./Tooltip.js";
+import Q from "./TruncatedTooltip.js";
 import p from "./Typography/Text.js";
-import { useCardStripSlot as ge } from "./cardStripSlot.js";
-import { FOCUS_RING_WITHIN as ve } from "./focusRing.js";
-import { useAdoptedStyleSheet as Ie } from "./useAdoptedStyleSheet.js";
-const k = 240, K = `${k}px`, Z = "116px", V = "var(--malachite-radius-xxl, 14px)", L = `${V} ${V} 0 0`, u = "var(--malachite-selectable-card-muted-foreground, #7b7b7b)", ye = "var(--malachite-text-secondary, #7b7b7b)", se = "var(--malachite-selectable-card-accent, #047b43)", Ae = "var(--malachite-selectable-card-selected-tint, #e7f8f1)", Ne = "var(--malachite-selectable-card-selected-border, #047b43)", q = 0.7, Se = "var(--malachite-selectable-card-library-selected-tint, #f1f1f1)", Ce = "var(--malachite-selectable-card-library-selected-border, #bbbbbb)", re = "var(--malachite-selectable-card-pending-foreground, #96580a)", ne = "var(--malachite-selectable-card-editing-tint, #f9f2e9)", J = "var(--malachite-selectable-card-selected-surface-end, #ffffff)", Le = "var(--malachite-selectable-card-background, #f1f1f1)", Oe = "1px solid var(--malachite-selectable-card-border, #dddddd)", De = "var(--malachite-selectable-card-hover-background, #e8e8e8)", Pe = 14, s = Pe, b = 2, oe = 116, Fe = 14, ie = 2, dt = s - b / 2, $ = k + s * 2, T = oe + ie + b, ke = (a) => {
-  const t = b / 2, l = s + t, c = s + k - t, i = t, r = Fe - t;
+import { useCardStripSlot as Le } from "./cardStripSlot.js";
+import { FOCUS_RING_WITHIN as Oe } from "./focusRing.js";
+import { useAdoptedStyleSheet as De } from "./useAdoptedStyleSheet.js";
+const F = 240, ee = `${F}px`, te = "116px", le = "var(--malachite-radius-xxl, 14px)", O = `${le} ${le} 0 0`, b = "var(--malachite-selectable-card-muted-foreground, #7b7b7b)", Pe = "var(--malachite-text-secondary, #7b7b7b)", de = "var(--malachite-selectable-card-accent, #047b43)", ke = "var(--malachite-selectable-card-selected-tint, #e7f8f1)", Be = "var(--malachite-selectable-card-selected-border, #047b43)", ae = 0.7, Fe = "var(--malachite-selectable-card-library-selected-tint, #f1f1f1)", we = "var(--malachite-selectable-card-library-selected-border, #bbbbbb)", pe = "var(--malachite-selectable-card-pending-foreground, #96580a)", he = "var(--malachite-selectable-card-editing-tint, #f9f2e9)", se = "var(--malachite-selectable-card-selected-surface-end, #ffffff)", Ue = "var(--malachite-selectable-card-background, #f1f1f1)", Ye = "1px solid var(--malachite-selectable-card-border, #dddddd)", ze = "var(--malachite-selectable-card-hover-background, #e8e8e8)", Ge = 14, s = Ge, E = 2, fe = 116, We = 14, me = 2, Tt = s - E / 2, x = F + s * 2, T = fe + me + E, He = (l) => {
+  const t = E / 2, a = s + t, c = s + F - t, i = t, r = We - t;
   return [
-    `M${l - s} ${a}`,
-    `A${s} ${s} 0 0 0 ${l} ${a - s}`,
-    `L${l} ${i + r}`,
-    `A${r} ${r} 0 0 1 ${l + r} ${i}`,
+    `M${a - s} ${l}`,
+    `A${s} ${s} 0 0 0 ${a} ${l - s}`,
+    `L${a} ${i + r}`,
+    `A${r} ${r} 0 0 1 ${a + r} ${i}`,
     `L${c - r} ${i}`,
     `A${r} ${r} 0 0 1 ${c} ${i + r}`,
-    `L${c} ${a - s}`,
-    `A${s} ${s} 0 0 0 ${c + s} ${a}`
+    `L${c} ${l - s}`,
+    `A${s} ${s} 0 0 0 ${c + s} ${l}`
   ].join(" ");
-}, F = ke(oe + ie / 2), Q = `${F} Z`, g = "malachite-selectable-card-outline", o = "malachite-selectable-card", we = "malachite-selectable-card-style", f = "--malachite-selectable-card-state-outline", m = "--malachite-selectable-card-state-tint", O = {
-  "background-color": De,
+}, B = He(fe + me / 2), re = `${B} Z`, I = "malachite-selectable-card-outline", n = "malachite-selectable-card", je = "malachite-selectable-card-style", f = "--malachite-selectable-card-state-outline", m = "--malachite-selectable-card-state-tint", D = {
+  "background-color": ze,
   "border-left-color": "transparent"
-}, D = {
-  "background-color": Le
 }, P = {
+  "background-color": Ue
+}, k = {
   profile: {
-    resting: D,
-    hover: O,
+    resting: P,
+    hover: D,
     selected: {
-      [f]: Ne,
-      [m]: Ae
+      [f]: Be,
+      [m]: ke
     }
   },
   library: {
-    resting: D,
-    hover: O,
+    resting: P,
+    hover: D,
     selected: {
-      [f]: Ce,
-      [m]: Se
+      [f]: we,
+      [m]: Fe
     }
   },
   editing: {
-    resting: D,
-    hover: O,
+    resting: P,
+    hover: D,
     selected: {
-      [f]: re,
-      [m]: ne
+      [f]: pe,
+      [m]: he
     }
   }
-}, x = { color: ye }, Be = {
+}, g = { color: Pe }, Xe = {
   profile: {
-    resting: x,
-    selected: { color: se, opacity: q }
+    resting: g,
+    selected: { color: de, opacity: ae }
   },
-  library: { resting: x, selected: x },
+  library: { resting: g, selected: g },
   editing: {
-    resting: x,
-    selected: { color: re, opacity: q }
+    resting: g,
+    selected: { color: pe, opacity: ae }
   }
-}, Ue = { "border-left": Oe }, Ge = `
-.${o}[data-state='selected'] {
+}, Me = { "border-left": Ye }, Ke = `
+.${n}[data-state='selected'] {
     z-index: 5;
 }
-.${o} > .${g} {
+.${n} > .${I} {
     position: absolute;
     left: -${s}px;
     top: 0;
@@ -72,280 +74,301 @@ const k = 240, K = `${k}px`, Z = "116px", V = "var(--malachite-radius-xxl, 14px)
     overflow: visible;
     pointer-events: none;
 }
-.${o} > *:not(.${g}):not([data-selectable-card-actions]) {
+.${n} > *:not(.${I}):not([data-selectable-card-actions]) {
     position: relative;
     z-index: 1;
 }
-.${o} > [data-selectable-card-actions] {
+.${n} > [data-selectable-card-actions] {
     z-index: 2;
-}`, ce = (a) => Object.entries(a).map(([t, l]) => `    ${t}: ${l};`).join(`
-`), We = (a, t) => t === "hover" ? `.${o}[data-variant='${a}'][data-state='resting'][data-hoverable]:hover` : `.${o}[data-variant='${a}'][data-state='${t}']`, Ye = (a, t, l) => `${We(a, t)} {
-${ce(l)}
-}`, ze = Object.keys(P).flatMap(
-  (a) => Object.keys(P[a]).map(
-    (t) => Ye(a, t, P[a][t])
+}`, be = (l) => Object.entries(l).map(([t, a]) => `    ${t}: ${a};`).join(`
+`), Ze = (l, t) => t === "hover" ? `.${n}[data-variant='${l}'][data-state='resting'][data-hoverable]:hover` : `.${n}[data-variant='${l}'][data-state='${t}']`, Ve = (l, t, a) => `${Ze(l, t)} {
+${be(a)}
+}`, qe = Object.keys(k).flatMap(
+  (l) => Object.keys(k[l]).map(
+    (t) => Ve(l, t, k[l][t])
   )
 ).join(`
-`), He = `.${o}[data-pinned='false'][data-state='resting'] {
-${ce(
-  Ue
+`), Je = `.${n}[data-pinned='false'][data-state='resting'] {
+${be(
+  Me
 )}
-}`, je = `${He}
-${ze}
-${Ge}`, Xe = {
+}`, Qe = `${Je}
+${qe}
+${Ke}`, et = {
   display: "-webkit-box",
   WebkitLineClamp: 2,
   WebkitBoxOrient: "vertical",
   overflow: "hidden",
-  color: u,
+  color: b,
   lineHeight: 1.6
-}, Me = { color: u, letterSpacing: "0.11px" }, w = "var(--malachite-selectable-card-pending-foreground, #96580a)", Ke = { color: w }, Ze = { color: w, opacity: 0.7 }, Ve = 36, qe = 38, ee = {
+}, tt = { color: b, letterSpacing: "0.11px" }, w = "var(--malachite-selectable-card-pending-foreground, #96580a)", lt = { color: w }, at = { color: w, opacity: 0.7 }, st = 36, rt = 38, oe = {
   color: "var(--malachite-text-primary)"
-}, te = "Default profile", Je = 16, Qe = {
-  color: se,
+}, ot = "inline-flex items-center justify-center [&_svg]:size-[10px]!", nt = { color: b }, ne = "Default profile", it = 16, ct = {
+  color: de,
   display: "inline-flex"
-}, ae = () => /* @__PURE__ */ e(ue, { text: te, triggerAs: "span", describesTrigger: !1, children: /* @__PURE__ */ e("span", { role: "img", "aria-label": te, style: Qe, children: /* @__PURE__ */ e(Te, { size: Je }) }) }), le = (a) => {
-  const t = a.filter((l) => l !== void 0);
+}, ie = () => /* @__PURE__ */ e(Ce, { text: ne, triggerAs: "span", describesTrigger: !1, children: /* @__PURE__ */ e("span", { role: "img", "aria-label": ne, style: ct, children: /* @__PURE__ */ e(Ne, { size: it }) }) }), ce = (l) => {
+  const t = l.filter((a) => a !== void 0);
   return t.length > 0 ? t.join(" ") : void 0;
-}, pt = ({
-  value: a,
+}, gt = ({
+  value: l,
   title: t,
-  titleIcon: l,
+  titleIcon: a,
   isDefault: c = !1,
   variant: i = "profile",
   eyebrow: r,
-  status: E,
+  status: _,
   description: v,
-  countLabel: I,
-  actions: y,
+  countLabel: y,
+  actions: S,
+  onDismiss: R,
+  dismissLabel: U = "Dismiss",
+  dismissDisabledReason: Y,
   selected: d = !1,
-  loading: de = !1,
-  loadingLabel: pe = "Loading…",
-  loadingHint: B,
-  disabled: _ = !1,
-  dimmed: U = !1,
-  onSelect: A,
-  tabIndex: he,
-  "aria-label": G,
-  className: W = "",
-  style: Y
+  loading: Ee = !1,
+  loadingLabel: _e = "Loading…",
+  loadingHint: z,
+  disabled: $ = !1,
+  dimmed: G = !1,
+  onSelect: N,
+  tabIndex: Re,
+  "aria-label": W,
+  className: H = "",
+  style: j
 }) => {
-  const { pinned: fe } = ge(), me = !d && !_, N = Re(null);
-  Ie(N, je, we);
-  const h = `mal-selectable-card-${$e().replace(/[^a-zA-Z0-9_-]/g, "")}`, R = `${h}-outline`, z = `${h}-eyebrow`, H = `${h}-status`, S = `${h}-title`, j = `${h}-description`, X = `${h}-count`, be = G ? void 0 : le([r ? z : void 0, S, E ? H : void 0]), Ee = le([
-    v ? j : void 0,
-    I ? X : void 0
+  const { pinned: $e } = Le(), ue = !d && !$, A = Ie(null);
+  De(A, Qe, je);
+  const h = `mal-selectable-card-${ve().replace(/[^a-zA-Z0-9_-]/g, "")}`, u = `${h}-outline`, X = `${h}-eyebrow`, M = `${h}-status`, C = `${h}-title`, K = `${h}-description`, Z = `${h}-count`, xe = W ? void 0 : ce([r ? X : void 0, C, _ ? M : void 0]), Te = ce([
+    v ? K : void 0,
+    y ? Z : void 0
   ]);
-  if (de)
-    return /* @__PURE__ */ n(
+  if (Ee)
+    return /* @__PURE__ */ o(
       "div",
       {
-        ref: N,
+        ref: A,
         role: "status",
         "aria-busy": "true",
         "aria-live": "polite",
         "data-variant": "editing",
         "data-state": "selected",
-        className: `${o} relative flex shrink-0 flex-col items-center gap-2 px-5 text-center ${W}`.trim(),
+        className: `${n} relative flex shrink-0 flex-col items-center gap-2 px-5 text-center ${H}`.trim(),
         style: {
-          width: K,
-          height: Z,
-          borderRadius: L,
+          width: ee,
+          height: te,
+          borderRadius: O,
           boxSizing: "border-box",
-          paddingTop: `${Ve}px`,
-          paddingBottom: `${qe}px`,
+          paddingTop: `${st}px`,
+          paddingBottom: `${rt}px`,
           justifyContent: "center",
           [f]: w,
-          [m]: ne,
-          ...Y
+          [m]: he,
+          ...j
         },
         children: [
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ o(
             "svg",
             {
-              className: g,
-              width: $,
+              className: I,
+              width: x,
               height: T,
-              viewBox: `0 0 ${$} ${T}`,
+              viewBox: `0 0 ${x} ${T}`,
               fill: "none",
               "aria-hidden": "true",
               children: [
-                /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ n("linearGradient", { id: R, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ o("linearGradient", { id: u, x1: "0", y1: "0", x2: "0", y2: "1", children: [
                   /* @__PURE__ */ e("stop", { offset: "0", style: { stopColor: `var(${m})` } }),
-                  /* @__PURE__ */ e("stop", { offset: "1", style: { stopColor: J } })
+                  /* @__PURE__ */ e("stop", { offset: "1", style: { stopColor: se } })
                 ] }) }),
                 /* @__PURE__ */ e(
                   "path",
                   {
-                    d: Q,
+                    d: re,
                     "data-malachite-shape": "",
-                    style: { fill: `url(#${R})` }
+                    style: { fill: `url(#${u})` }
                   }
                 ),
                 /* @__PURE__ */ e(
                   "path",
                   {
-                    d: F,
+                    d: B,
                     "data-malachite-shape": "",
-                    strokeWidth: b,
+                    strokeWidth: E,
                     style: { fill: "none", stroke: `var(${f})` }
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ e(p, { size: "small", fontWeight: "semi-bold", style: Ke, children: pe }),
-          B ? /* @__PURE__ */ e(p, { size: "xsmall", fontWeight: "semi-bold", style: Ze, children: B }) : null
+          /* @__PURE__ */ e(p, { size: "small", fontWeight: "semi-bold", style: lt, children: _e }),
+          z ? /* @__PURE__ */ e(p, { size: "xsmall", fontWeight: "semi-bold", style: at, children: z }) : null
         ]
       }
     );
-  const C = i === "library", _e = Be[i][d ? "selected" : "resting"];
-  return /* @__PURE__ */ n(
+  const L = i === "library", V = Xe[i][d ? "selected" : "resting"], q = !!S || !!R, J = Y !== void 0, ge = S && R ? "pr-[56px]" : q ? "pr-[26px]" : "pr-1";
+  return /* @__PURE__ */ o(
     "div",
     {
-      ref: N,
+      ref: A,
       "data-variant": i,
-      "data-pinned": fe ? "true" : "false",
+      "data-pinned": $e ? "true" : "false",
       "data-state": d ? "selected" : "resting",
-      "data-hoverable": me ? "" : void 0,
-      className: `${o} group relative grid shrink-0 grid-rows-[1fr_auto] ${ve} ${W}`.trim(),
+      "data-hoverable": ue ? "" : void 0,
+      className: `${n} group relative grid shrink-0 grid-rows-[1fr_auto] ${Oe} ${H}`.trim(),
       style: {
-        width: K,
-        height: Z,
-        borderRadius: L,
+        width: ee,
+        height: te,
+        borderRadius: O,
         boxSizing: "border-box",
-        ...Y
+        ...j
       },
       children: [
-        d ? /* @__PURE__ */ n(
+        d ? /* @__PURE__ */ o(
           "svg",
           {
-            className: g,
-            width: $,
+            className: I,
+            width: x,
             height: T,
-            viewBox: `0 0 ${$} ${T}`,
+            viewBox: `0 0 ${x} ${T}`,
             fill: "none",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ n("linearGradient", { id: R, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ o("linearGradient", { id: u, x1: "0", y1: "0", x2: "0", y2: "1", children: [
                 /* @__PURE__ */ e("stop", { offset: "0", style: { stopColor: `var(${m})` } }),
-                /* @__PURE__ */ e("stop", { offset: "1", style: { stopColor: J } })
+                /* @__PURE__ */ e("stop", { offset: "1", style: { stopColor: se } })
               ] }) }),
               /* @__PURE__ */ e(
                 "path",
                 {
-                  d: Q,
+                  d: re,
                   "data-malachite-shape": "",
-                  style: { fill: `url(#${R})` }
+                  style: { fill: `url(#${u})` }
                 }
               ),
               /* @__PURE__ */ e(
                 "path",
                 {
-                  d: F,
+                  d: B,
                   "data-malachite-shape": "",
-                  strokeWidth: b,
+                  strokeWidth: E,
                   style: { fill: "none", stroke: `var(${f})` }
                 }
               )
             ]
           }
         ) : null,
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ o(
           "button",
           {
             type: "button",
             role: "radio",
-            "data-value": a,
+            "data-value": l,
             "aria-checked": d,
-            "aria-label": G,
-            "aria-labelledby": be,
-            "aria-describedby": Ee,
-            "aria-disabled": _ || void 0,
-            tabIndex: he ?? (d ? 0 : -1),
+            "aria-label": W,
+            "aria-labelledby": xe,
+            "aria-describedby": Te,
+            "aria-disabled": $ || void 0,
+            tabIndex: Re ?? (d ? 0 : -1),
             onClick: () => {
-              _ || d || A == null || A(a);
+              $ || d || N == null || N(l);
             },
-            className: `flex min-w-0 appearance-none flex-col border-0 bg-transparent py-0 pt-3 pr-4 pl-4 text-left outline-none ${_ ? "cursor-not-allowed" : "cursor-pointer"}`,
-            style: { borderRadius: L },
+            className: `flex min-w-0 appearance-none flex-col border-0 bg-transparent py-0 pt-3 pr-4 pl-4 text-left outline-none ${$ ? "cursor-not-allowed" : "cursor-pointer"}`,
+            style: { borderRadius: O },
             children: [
-              /* @__PURE__ */ e(
-                "div",
-                {
-                  className: `flex h-[13px] shrink-0 items-center gap-2 ${y ? "pr-[26px]" : "pr-1"}`,
-                  children: /* @__PURE__ */ n("div", { className: "flex min-w-0 items-center gap-1.5", children: [
-                    C ? /* @__PURE__ */ n("span", { id: S, className: "flex min-w-0 items-center gap-1.5", children: [
-                      l ? /* @__PURE__ */ e(
-                        "span",
-                        {
-                          className: "flex shrink-0 items-center",
-                          style: ee,
-                          children: l
-                        }
-                      ) : null,
-                      c ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ e(ae, {}) }) : null,
-                      /* @__PURE__ */ e(M, { text: t, children: /* @__PURE__ */ e(
-                        p,
-                        {
-                          size: "small",
-                          fontWeight: "semi-bold",
-                          style: U ? { color: u } : void 0,
-                          children: t
-                        }
-                      ) })
-                    ] }) : null,
-                    r ? /* @__PURE__ */ e("span", { id: z, className: "flex min-w-0", children: /* @__PURE__ */ e(p, { size: "xsmall", fontWeight: "semi-bold", style: _e, children: r }) }) : null,
-                    E ? /* @__PURE__ */ e("span", { id: H, className: "flex min-w-0", children: /* @__PURE__ */ e(
-                      xe,
-                      {
-                        value: E.label,
-                        type: E.type ?? "default",
-                        textTransform: "none",
-                        paddingSize: "compact"
-                      }
-                    ) }) : null
-                  ] })
-                }
-              ),
-              /* @__PURE__ */ n(
+              /* @__PURE__ */ e("div", { className: `flex h-[13px] shrink-0 items-center gap-2 ${ge}`, children: /* @__PURE__ */ o("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+                L ? /* @__PURE__ */ o("span", { id: C, className: "flex min-w-0 items-center gap-1.5", children: [
+                  a ? /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: "flex shrink-0 items-center",
+                      style: oe,
+                      children: a
+                    }
+                  ) : null,
+                  c ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ e(ie, {}) }) : null,
+                  /* @__PURE__ */ e(Q, { text: t, children: /* @__PURE__ */ e(
+                    p,
+                    {
+                      size: "small",
+                      fontWeight: "semi-bold",
+                      style: G ? { color: b } : void 0,
+                      children: t
+                    }
+                  ) })
+                ] }) : null,
+                r ? /* @__PURE__ */ e("span", { id: X, className: "flex min-w-0", children: /* @__PURE__ */ e(p, { size: "xsmall", fontWeight: "semi-bold", style: V, children: r }) }) : null,
+                _ ? /* @__PURE__ */ e("span", { id: M, className: "flex min-w-0", children: /* @__PURE__ */ e(
+                  Ae,
+                  {
+                    value: _.label,
+                    type: _.type ?? "default",
+                    textTransform: "none",
+                    paddingSize: "compact"
+                  }
+                ) }) : null
+              ] }) }),
+              /* @__PURE__ */ o(
                 "div",
                 {
-                  className: `mt-[11px] flex min-w-0 flex-1 flex-col gap-1 pt-3 ${C ? "justify-end" : "justify-between"}`,
+                  className: `mt-[11px] flex min-w-0 flex-1 flex-col gap-1 pt-3 ${L ? "justify-end" : "justify-between"}`,
                   children: [
-                    C ? null : /* @__PURE__ */ n("div", { id: S, className: "flex min-w-0 items-center gap-1.5", children: [
-                      l ? /* @__PURE__ */ e(
+                    L ? null : /* @__PURE__ */ o("div", { id: C, className: "flex min-w-0 items-center gap-1.5", children: [
+                      a ? /* @__PURE__ */ e(
                         "span",
                         {
                           className: "flex shrink-0 items-center",
-                          style: ee,
-                          children: l
+                          style: oe,
+                          children: a
                         }
                       ) : null,
-                      c ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ e(ae, {}) }) : null,
-                      /* @__PURE__ */ e(M, { text: t, children: /* @__PURE__ */ e(
+                      c ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ e(ie, {}) }) : null,
+                      /* @__PURE__ */ e(Q, { text: t, children: /* @__PURE__ */ e(
                         p,
                         {
                           size: "small",
                           fontWeight: "semi-bold",
-                          style: U ? { color: u } : void 0,
+                          style: G ? { color: b } : void 0,
                           children: t
                         }
                       ) })
                     ] }),
-                    v ? /* @__PURE__ */ e("span", { id: j, className: "block min-w-0", children: /* @__PURE__ */ e(p, { size: "xsmall", style: Xe, children: v }) }) : null
+                    v ? /* @__PURE__ */ e("span", { id: K, className: "block min-w-0", children: /* @__PURE__ */ e(p, { size: "xsmall", style: et, children: v }) }) : null
                   ]
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ e("span", { id: X, className: "min-w-0 self-end truncate pr-4 pb-3 pl-4", children: I ? /* @__PURE__ */ e(p, { size: "xsmall", fontWeight: "semi-bold", style: Me, children: I }) : null }),
-        y ? /* @__PURE__ */ e(
+        /* @__PURE__ */ e("span", { id: Z, className: "min-w-0 self-end truncate pr-4 pb-3 pl-4", children: y ? /* @__PURE__ */ e(p, { size: "xsmall", fontWeight: "semi-bold", style: tt, children: y }) : null }),
+        q ? /* @__PURE__ */ o(
           "div",
           {
             "data-selectable-card-actions": "",
             className: "absolute top-3 right-4 flex h-[13px] shrink-0 items-center gap-2.5",
-            children: y
+            children: [
+              S,
+              R ? /* @__PURE__ */ e(
+                ye,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "xsmall",
+                  iconOnly: !0,
+                  "aria-label": U,
+                  tooltip: Y ?? U,
+                  disabled: J,
+                  className: "shrink-0",
+                  onClick: R,
+                  children: /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: ot,
+                      style: J ? nt : V,
+                      children: /* @__PURE__ */ e(Se, {})
+                    }
+                  )
+                }
+              ) : null
+            ]
           }
         ) : null
       ]
@@ -353,12 +376,12 @@ ${Ge}`, Xe = {
   );
 };
 export {
-  Pe as CARD_FLARE_PX,
-  dt as CARD_FLARE_TIP_PX,
-  k as CARD_WIDTH_PX,
-  g as FLARE_CLASS,
-  ie as STRIP_RULE_PX,
-  pt as SelectableCard,
-  pt as default
+  Ge as CARD_FLARE_PX,
+  Tt as CARD_FLARE_TIP_PX,
+  F as CARD_WIDTH_PX,
+  I as FLARE_CLASS,
+  me as STRIP_RULE_PX,
+  gt as SelectableCard,
+  gt as default
 };
 //# sourceMappingURL=SelectableCard.js.map