@stackone/malachite 2.42.2 → 2.43.0

package/dist/components/SelectableCard.js

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