@the-portland-company/shell 0.76.12 → 0.76.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -616,7 +616,7 @@ function NavThemeControl({
616
616
  onClick: () => onChange(opt.value),
617
617
  className: [
618
618
  "flex-1 px-3 py-1.5 text-xs font-semibold transition",
619
- value === opt.value ? "bg-[color:var(--color-accent)] text-[#FFFFFF]" : "text-[color:var(--muted)] hover:bg-[color:var(--panel)] hover:text-[color:var(--foreground)]"
619
+ value === opt.value ? "bg-[color:var(--color-accent-bg-safe,var(--color-accent))] text-[#FFFFFF]" : "text-[color:var(--muted)] hover:bg-[color:var(--panel)] hover:text-[color:var(--foreground)]"
620
620
  ].join(" "),
621
621
  children: opt.label
622
622
  },
@@ -1404,7 +1404,7 @@ function NotificationsAction({ orgId }) {
1404
1404
  {
1405
1405
  type: "button",
1406
1406
  onClick: () => setMuted(false),
1407
- className: "text-[11px] font-semibold text-[color:var(--color-accent)] hover:underline",
1407
+ className: "text-[11px] font-semibold text-[color:var(--color-accent-fg,var(--color-accent))] hover:underline",
1408
1408
  children: "Unsilence"
1409
1409
  }
1410
1410
  ) : null
@@ -1468,7 +1468,7 @@ function NotificationsAction({ orgId }) {
1468
1468
  "a",
1469
1469
  {
1470
1470
  href: withOrgParam(QUARANTINED_CONTACTS_URL, orgId),
1471
- className: "text-[11px] font-semibold text-[color:var(--color-accent)] hover:underline",
1471
+ className: "text-[11px] font-semibold text-[color:var(--color-accent-fg,var(--color-accent))] hover:underline",
1472
1472
  children: "View all"
1473
1473
  }
1474
1474
  )
@@ -1625,7 +1625,7 @@ function SupportAction({
1625
1625
  {
1626
1626
  type: "button",
1627
1627
  onClick: close,
1628
- className: "rounded-full bg-[color:var(--color-accent)] px-4 py-2 text-sm font-semibold text-[#FFFFFF] hover:opacity-90",
1628
+ className: "rounded-full bg-[color:var(--color-accent-bg-safe,var(--color-accent))] px-4 py-2 text-sm font-semibold text-[#FFFFFF] hover:opacity-90",
1629
1629
  children: "Done"
1630
1630
  }
1631
1631
  ) })
@@ -1685,7 +1685,7 @@ function SupportAction({
1685
1685
  type: "button",
1686
1686
  onClick: submit,
1687
1687
  disabled: !message.trim() || state === "sending",
1688
- className: "rounded-full bg-[color:var(--color-accent)] px-4 py-2 text-sm font-semibold text-[#FFFFFF] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
1688
+ className: "rounded-full bg-[color:var(--color-accent-bg-safe,var(--color-accent))] px-4 py-2 text-sm font-semibold text-[#FFFFFF] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
1689
1689
  children: state === "sending" ? "Sending\u2026" : "Send request"
1690
1690
  }
1691
1691
  )
@@ -1981,7 +1981,7 @@ function SpecOverlayAction({ orgId, orgName } = {}) {
1981
1981
  href: status.spec_url,
1982
1982
  target: "_blank",
1983
1983
  rel: "noreferrer",
1984
- className: "text-[color:var(--color-accent)] hover:underline",
1984
+ className: "text-[color:var(--color-accent-fg,var(--color-accent))] hover:underline",
1985
1985
  children: "Open spec \u2197"
1986
1986
  }
1987
1987
  ),
@@ -1991,7 +1991,7 @@ function SpecOverlayAction({ orgId, orgName } = {}) {
1991
1991
  href: status.compare_url,
1992
1992
  target: "_blank",
1993
1993
  rel: "noreferrer",
1994
- className: "text-[color:var(--color-accent)] hover:underline",
1994
+ className: "text-[color:var(--color-accent-fg,var(--color-accent))] hover:underline",
1995
1995
  children: "Compare tab \u2197"
1996
1996
  }
1997
1997
  ),
@@ -2062,7 +2062,7 @@ function SpecOverlayAction({ orgId, orgName } = {}) {
2062
2062
  href: status.search_url,
2063
2063
  target: "_blank",
2064
2064
  rel: "noreferrer",
2065
- className: "mt-2 inline-block font-semibold text-[color:var(--color-accent)] hover:underline",
2065
+ className: "mt-2 inline-block font-semibold text-[color:var(--color-accent-fg,var(--color-accent))] hover:underline",
2066
2066
  children: "Search specs \u2197"
2067
2067
  }
2068
2068
  )
@@ -2593,7 +2593,7 @@ function shortEnvLabel(label) {
2593
2593
  if (l === "development") return "dev";
2594
2594
  return l;
2595
2595
  }
2596
- var ORG_PILL_DEFAULT = "var(--color-accent)";
2596
+ var ORG_PILL_DEFAULT = "var(--color-accent-bg-safe,var(--color-accent))";
2597
2597
  var RailCollapsibleContext = react.createContext(false);
2598
2598
  function useRailCollapse() {
2599
2599
  const collapsible = react.useContext(RailCollapsibleContext);
@@ -2748,7 +2748,7 @@ function NavSidebar({
2748
2748
  "aria-expanded": open ?? false,
2749
2749
  "data-rail-toggle": "expand",
2750
2750
  className: `hidden h-8 w-8 items-center justify-center rounded-lg ${rc("max-md:flex")}`,
2751
- children: brand.logoSquareSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: brand.logoSquareSrc, alt: "", draggable: false, className: "h-8 w-8 object-contain" }) : brand.logoPending ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "block h-8 w-8" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-8 w-8 items-center justify-center rounded-xl bg-[color:var(--color-accent)] text-sm font-black text-[#FFFFFF]", children: brand.badgeLabel })
2751
+ children: brand.logoSquareSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: brand.logoSquareSrc, alt: "", draggable: false, className: "h-8 w-8 object-contain" }) : brand.logoPending ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "block h-8 w-8" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-8 w-8 items-center justify-center rounded-xl bg-[color:var(--color-accent-bg-safe,var(--color-accent))] text-sm font-black text-[#FFFFFF]", children: brand.badgeLabel })
2752
2752
  }
2753
2753
  ) : null,
2754
2754
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2787,12 +2787,12 @@ function NavSidebar({
2787
2787
  /* @__PURE__ */ jsxRuntime.jsx(
2788
2788
  "span",
2789
2789
  {
2790
- className: `flex h-9 w-9 items-center justify-center rounded-xl bg-[color:var(--color-accent)] text-base font-black text-[#FFFFFF] shadow-sm ${brand.logoSquareSrc ? rc("max-md:hidden") : ""}`,
2790
+ className: `flex h-9 w-9 items-center justify-center rounded-xl bg-[color:var(--color-accent-bg-safe,var(--color-accent))] text-base font-black text-[#FFFFFF] shadow-sm ${brand.logoSquareSrc ? rc("max-md:hidden") : ""}`,
2791
2791
  children: brand.badgeLabel
2792
2792
  }
2793
2793
  ),
2794
2794
  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `flex flex-col leading-tight ${rc("max-md:hidden")}`, children: [
2795
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-extrabold tracking-[-0.01em] text-[color:var(--color-accent)]", children: brand.title }),
2795
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-extrabold tracking-[-0.01em] text-[color:var(--color-accent-fg,var(--color-accent))]", children: brand.title }),
2796
2796
  brand.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-[color:var(--muted)]", children: brand.subtitle }) : null
2797
2797
  ] })
2798
2798
  ] })
@@ -2832,7 +2832,7 @@ function NavSidebar({
2832
2832
  {
2833
2833
  href: org.uploadLogoHref ?? "#",
2834
2834
  onClick: (e) => e.stopPropagation(),
2835
- className: "text-xs font-semibold text-[color:var(--color-accent)] underline",
2835
+ className: "text-xs font-semibold text-[color:var(--color-accent-fg,var(--color-accent))] underline",
2836
2836
  children: "Upload logo"
2837
2837
  }
2838
2838
  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-semibold text-neutral-800", children: org.name ?? "Organization" }),
@@ -2893,7 +2893,7 @@ function NavSidebar({
2893
2893
  "aria-current": selected ? "true" : void 0,
2894
2894
  className: [
2895
2895
  "flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm",
2896
- selected ? "font-semibold text-[color:var(--color-accent)]" : "font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)]"
2896
+ selected ? "font-semibold text-[color:var(--color-accent-fg,var(--color-accent))]" : "font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)]"
2897
2897
  ].join(" "),
2898
2898
  children: [
2899
2899
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2934,7 +2934,7 @@ function NavSidebar({
2934
2934
  {
2935
2935
  href: org.uploadLogoHref ?? "#",
2936
2936
  onClick: (e) => e.stopPropagation(),
2937
- className: "text-xs font-semibold text-[color:var(--color-accent)] underline",
2937
+ className: "text-xs font-semibold text-[color:var(--color-accent-fg,var(--color-accent))] underline",
2938
2938
  children: "Upload logo"
2939
2939
  }
2940
2940
  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-semibold text-neutral-800", children: org.name ?? "Organization" }),
@@ -2986,7 +2986,7 @@ function NavSidebar({
2986
2986
  disabled: !available,
2987
2987
  className: [
2988
2988
  `flex flex-none items-center justify-center rounded-[5px] px-[9px] py-[6px] transition ${rc("max-md:flex-1")}`,
2989
- !available ? "cursor-not-allowed text-[color:var(--sidebar-text-muted,var(--muted))] opacity-35" : selected ? "bg-[color:var(--sidebar-mode-selected-bg,var(--mode-accent,var(--color-accent)))] text-[color:var(--mode-on-accent,white)]" : "text-[color:var(--sidebar-text-muted,var(--muted))] hover:bg-[#FFFFFF]/5 hover:text-[color:var(--sidebar-text,var(--foreground))]"
2989
+ !available ? "cursor-not-allowed text-[color:var(--sidebar-text-muted,var(--muted))] opacity-35" : selected ? "bg-[color:var(--sidebar-mode-selected-bg,var(--mode-accent,var(--color-accent)))] text-[color:var(--mode-on-accent,var(--color-accent-bg-safe,white))]" : "text-[color:var(--sidebar-text-muted,var(--muted))] hover:bg-[#FFFFFF]/5 hover:text-[color:var(--sidebar-text,var(--foreground))]"
2990
2990
  ].join(" "),
2991
2991
  children: OptIcon ? /* @__PURE__ */ jsxRuntime.jsx(OptIcon, { size: 15, className: "shrink-0" }) : null
2992
2992
  },
@@ -3217,7 +3217,7 @@ var NAV_HOVER_GRADIENT = "var(--nav-hover-gradient)";
3217
3217
  var NAV_EYEBROW_CLASS = "text-[11px] font-bold uppercase leading-[1.2] tracking-[0.09em] text-[color:var(--sidebar-eyebrow,var(--sidebar-text-muted,var(--muted)))]";
3218
3218
  var NAV_TOP_ICON_SIZE = 17;
3219
3219
  var NAV_TOP_ROW_CLASS = (active) => `gap-[11px] px-[10px] py-[9px] text-[13px] leading-none ${active ? "font-semibold" : "font-normal"}`;
3220
- var NAV_TOP_ACTIVE_CLASS = "bg-[color:var(--sidebar-active-bg,var(--color-accent))] text-[color:var(--sidebar-active-text,white)]";
3220
+ var NAV_TOP_ACTIVE_CLASS = "bg-[color:var(--sidebar-active-bg,var(--color-accent-bg-safe,var(--color-accent)))] text-[color:var(--sidebar-active-text,white)]";
3221
3221
  var NAV_TOP_INACTIVE_CLASS = "text-[color:var(--sidebar-row-text,var(--sidebar-text,var(--muted)))] hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel-elevated))] hover:text-[color:var(--sidebar-text,var(--foreground))]";
3222
3222
  function modeCaption(label) {
3223
3223
  return label.replace(/\s+Mode$/i, " mode");
@@ -3276,7 +3276,7 @@ function NavRow({
3276
3276
  const Icon = item.icon;
3277
3277
  const isSub = variant === "sub";
3278
3278
  const washActive = variant !== "top";
3279
- const activeClasses = washActive ? "bg-[color:var(--mode-accent-surface,var(--panel-elevated))] text-[color:var(--color-accent)] shadow-sm" : NAV_TOP_ACTIVE_CLASS;
3279
+ const activeClasses = washActive ? "bg-[color:var(--mode-accent-surface,var(--panel-elevated))] text-[color:var(--color-accent-fg,var(--color-accent))] shadow-sm" : NAV_TOP_ACTIVE_CLASS;
3280
3280
  const wrapperClasses = [
3281
3281
  "group relative block overflow-hidden transition",
3282
3282
  isSub ? "rounded-md" : "rounded-[5px]",
@@ -3439,7 +3439,7 @@ function NavTopBar({
3439
3439
  themeToggle,
3440
3440
  accountMenu === "topbar" ? /* @__PURE__ */ jsxRuntime.jsxs("details", { "data-nav-details": true, className: "group/acct relative", children: [
3441
3441
  /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "group/tbtip relative flex cursor-pointer list-none items-center gap-2.5 rounded-full py-1 pl-1 pr-2 transition hover:bg-[color:var(--panel-elevated)] [&::-webkit-details-marker]:hidden", children: [
3442
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-[var(--topbar-icon-button-size,32px)] w-[var(--topbar-icon-button-size,32px)] items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-accent)] text-xs font-bold text-[#FFFFFF]", children: user?.avatarUrl || user?.memojiUrl ? /* @__PURE__ */ jsxRuntime.jsx(
3442
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-[var(--topbar-icon-button-size,32px)] w-[var(--topbar-icon-button-size,32px)] items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-accent-bg-safe,var(--color-accent))] text-xs font-bold text-[#FFFFFF]", children: user?.avatarUrl || user?.memojiUrl ? /* @__PURE__ */ jsxRuntime.jsx(
3443
3443
  "img",
3444
3444
  {
3445
3445
  src: user.avatarUrl || user.memojiUrl,
@@ -3539,14 +3539,14 @@ function NavAccountMenuPanel({
3539
3539
  },
3540
3540
  className: "flex min-w-0 flex-1 items-center gap-2.5 rounded-lg px-1 py-1 text-left hover:bg-[color:var(--panel)]",
3541
3541
  children: [
3542
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-accent)] text-[11px] font-bold text-[#FFFFFF]", children: a.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: a.avatarUrl, alt: "", className: "h-full w-full object-cover" }) : (a.name ?? a.email ?? "?").slice(0, 2).toUpperCase() }),
3542
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-accent-bg-safe,var(--color-accent))] text-[11px] font-bold text-[#FFFFFF]", children: a.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: a.avatarUrl, alt: "", className: "h-full w-full object-cover" }) : (a.name ?? a.email ?? "?").slice(0, 2).toUpperCase() }),
3543
3543
  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col leading-tight", children: [
3544
3544
  /* @__PURE__ */ jsxRuntime.jsx(
3545
3545
  "span",
3546
3546
  {
3547
3547
  className: [
3548
3548
  "truncate text-sm font-semibold",
3549
- a.active ? "text-[color:var(--color-accent)]" : "text-[color:var(--foreground)]"
3549
+ a.active ? "text-[color:var(--color-accent-fg,var(--color-accent))]" : "text-[color:var(--foreground)]"
3550
3550
  ].join(" "),
3551
3551
  children: a.name ?? a.email ?? a.id.slice(0, 8)
3552
3552
  }
@@ -3562,7 +3562,7 @@ function NavAccountMenuPanel({
3562
3562
  type: "button",
3563
3563
  "aria-label": `Remove ${a.name ?? a.email ?? "account"}`,
3564
3564
  onClick: () => userMenu.onRemoveAccount?.(a.id),
3565
- className: "shrink-0 rounded p-1 text-[color:var(--color-accent)] hover:bg-[color:var(--panel)]",
3565
+ className: "shrink-0 rounded p-1 text-[color:var(--color-accent-fg,var(--color-accent))] hover:bg-[color:var(--panel)]",
3566
3566
  children: /* @__PURE__ */ jsxRuntime.jsx(TrashIcon, {})
3567
3567
  }
3568
3568
  ) : null
@@ -3571,7 +3571,7 @@ function NavAccountMenuPanel({
3571
3571
  "a",
3572
3572
  {
3573
3573
  href: safeHref(userMenu.addAccountHref),
3574
- className: "mt-1.5 flex items-center gap-2.5 rounded-lg px-1 py-1.5 text-sm font-semibold text-[color:var(--color-accent)] hover:bg-[color:var(--panel)]",
3574
+ className: "mt-1.5 flex items-center gap-2.5 rounded-lg px-1 py-1.5 text-sm font-semibold text-[color:var(--color-accent-fg,var(--color-accent))] hover:bg-[color:var(--panel)]",
3575
3575
  children: [
3576
3576
  /* @__PURE__ */ jsxRuntime.jsx(AddUserIcon, {}),
3577
3577
  "Add Account"
@@ -3582,7 +3582,7 @@ function NavAccountMenuPanel({
3582
3582
  {
3583
3583
  type: "button",
3584
3584
  onClick: userMenu.onAddAccount,
3585
- className: "mt-1.5 flex w-full items-center gap-2.5 rounded-lg px-1 py-1.5 text-left text-sm font-semibold text-[color:var(--color-accent)] hover:bg-[color:var(--panel)]",
3585
+ className: "mt-1.5 flex w-full items-center gap-2.5 rounded-lg px-1 py-1.5 text-left text-sm font-semibold text-[color:var(--color-accent-fg,var(--color-accent))] hover:bg-[color:var(--panel)]",
3586
3586
  children: [
3587
3587
  /* @__PURE__ */ jsxRuntime.jsx(AddUserIcon, {}),
3588
3588
  "Add Account"
@@ -3608,7 +3608,7 @@ function NavAccountMenuPanel({
3608
3608
  onClick: () => userMenu.navDisplay?.onChange(opt.value),
3609
3609
  className: [
3610
3610
  "flex w-full items-center justify-between rounded-md px-2 py-1.5 text-left text-sm font-medium",
3611
- userMenu.navDisplay?.value === opt.value ? "text-[color:var(--color-accent)]" : "text-[color:var(--foreground)] hover:bg-[color:var(--panel)]"
3611
+ userMenu.navDisplay?.value === opt.value ? "text-[color:var(--color-accent-fg,var(--color-accent))]" : "text-[color:var(--foreground)] hover:bg-[color:var(--panel)]"
3612
3612
  ].join(" "),
3613
3613
  children: [
3614
3614
  opt.label,
@@ -3624,7 +3624,7 @@ function NavAccountMenuPanel({
3624
3624
  {
3625
3625
  type: "button",
3626
3626
  onClick: onSignOut,
3627
- className: "flex w-full shrink-0 items-center gap-2.5 border-t border-[color:var(--line)] px-4 py-2.5 text-left text-sm font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)] hover:text-[color:var(--color-accent)]",
3627
+ className: "flex w-full shrink-0 items-center gap-2.5 border-t border-[color:var(--line)] px-4 py-2.5 text-left text-sm font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)] hover:text-[color:var(--color-accent-fg,var(--color-accent))]",
3628
3628
  children: [
3629
3629
  /* @__PURE__ */ jsxRuntime.jsx(SignOutIcon, {}),
3630
3630
  "Sign out"
@@ -3651,7 +3651,7 @@ function NavSidebarUserCard({
3651
3651
  "aria-label": "My Account",
3652
3652
  className: `flex w-full cursor-pointer list-none items-center gap-[9px] rounded-[5px] px-1 py-1 text-left transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel-elevated))] [&::-webkit-details-marker]:hidden ${rc("max-md:justify-center max-md:px-0")}`,
3653
3653
  children: [
3654
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[color:var(--sidebar-avatar-bg,var(--color-accent))] text-[11px] font-bold text-[#FFFFFF]", children: user.avatarUrl || user.memojiUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: user.avatarUrl || user.memojiUrl, alt: "", className: "h-full w-full object-cover" }) : initials }),
3654
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[color:var(--sidebar-avatar-bg,var(--color-accent-bg-safe,var(--color-accent)))] text-[11px] font-bold text-[#FFFFFF]", children: user.avatarUrl || user.memojiUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: user.avatarUrl || user.memojiUrl, alt: "", className: "h-full w-full object-cover" }) : initials }),
3655
3655
  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `flex min-w-0 flex-1 flex-col ${rc("max-md:hidden")}`, children: [
3656
3656
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[12px] font-semibold leading-[1.2] text-[color:var(--sidebar-text,var(--foreground))]", children: displayName }),
3657
3657
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[11px] leading-[1.3] text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))]", children: secondary })
@@ -3701,7 +3701,7 @@ function NamePromptBubble({ profileHref, placement = "below" }) {
3701
3701
  "a",
3702
3702
  {
3703
3703
  href: safeHref(profileHref),
3704
- className: "rounded-full bg-[color:var(--color-accent)] px-3 py-1 text-xs font-semibold text-[#FFFFFF] hover:opacity-90",
3704
+ className: "rounded-full bg-[color:var(--color-accent-bg-safe,var(--color-accent))] px-3 py-1 text-xs font-semibold text-[#FFFFFF] hover:opacity-90",
3705
3705
  children: "Set name"
3706
3706
  }
3707
3707
  ) : null,