@stackone/malachite 2.31.1 → 2.33.0

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