@stackone/malachite 2.42.0 → 2.42.2

package/dist/components/SelectableCard.js

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