@stackone/malachite 2.49.1 → 2.50.0

package/dist/components/SelectableCard.js

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