@the-portland-company/shell 0.8.0 → 0.10.0

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.
Files changed (13) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/chrome.css +20 -20
  3. package/dist/index.cjs +198 -163
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.d.cts +6 -8
  6. package/dist/index.d.ts +6 -8
  7. package/dist/index.js +198 -163
  8. package/dist/index.js.map +1 -1
  9. package/dist/native.cjs +1 -1
  10. package/dist/native.cjs.map +1 -1
  11. package/dist/native.js +1 -1
  12. package/dist/native.js.map +1 -1
  13. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
+ ## 0.10.0 — 2026-07-12
2
+
3
+ ### Fixed (Specs brand colors)
4
+
5
+ - **Brand ramp is Specs race-red (`#E63946`)**, not legacy burnt-orange (`#E86A3A`).
6
+ `gen:tokens` now emits `--app-color-brand-*` and Chakra `brand` from `colors.raceRed`.
7
+ - Mode defaults, focus ring, and field focus use relationship primary / race-red.
8
+ - Sidebar footer Privacy/Terms/Subscriptions links use race-red (not theme orange).
9
+ - OrgPill fallbacks, nav badges, support button: race-red / `red` scheme.
10
+
11
+
1
12
  # Changelog
2
13
 
14
+ ## 0.9.0 — 2026-07-12
15
+
16
+ ### Fixed (Chakra chrome — reconciled with main app)
17
+
18
+ - **`NavItem` re-synced to main-app `AuthenticatedLayout`**: removed the orange→red gradient hover sweep that had diverged from production chrome; restored gray hover, parent active when any child route matches (including Tabs Only), and the effectiveHref vs href-less accordion header split. `brandIcon` + `safeHref` shell additions retained.
19
+
20
+ ### Note for hosts
21
+
22
+ - Main VRM app now renders chrome exclusively via `ShellChrome` + `AppLayout` (no dual `AuthenticatedLayoutFrame` chrome path). Contacts already used this path — both apps should pin `^0.9.0`.
23
+
3
24
  ## 0.8.0 — 2026-07-02
4
25
 
5
26
  ### Added (backward-compatible)
package/dist/chrome.css CHANGED
@@ -112,8 +112,8 @@
112
112
  --surface-2: #ECEEEF;
113
113
  --surface-3: #FFFFFF;
114
114
 
115
- /* Focus ring */
116
- --focus-ring-color: #E86A3A;
115
+ /* Focus ring — Specs race-red (ignore stale orange focus.ringColor) */
116
+ --focus-ring-color: #E63946;
117
117
  --focus-ring-width: 3px;
118
118
  --focus-ring-offset: 0px;
119
119
 
@@ -172,17 +172,17 @@
172
172
  --topbar-icon-button-size: 32px;
173
173
  --topbar-icon-size: 20px;
174
174
 
175
- /* Shell chrome: brand color ramps */
176
- --app-color-brand-50: #FFF5F0;
177
- --app-color-brand-100: #FFE8DC;
178
- --app-color-brand-200: #FFD0B8;
179
- --app-color-brand-300: #FFB088;
180
- --app-color-brand-400: #FF8C5A;
181
- --app-color-brand-500: #E86A3A;
182
- --app-color-brand-600: #CC5429;
183
- --app-color-brand-700: #A6421F;
184
- --app-color-brand-800: #803317;
185
- --app-color-brand-900: #5C2410;
175
+ /* Shell chrome: brand color ramps (= Specs race-red) */
176
+ --app-color-brand-50: #FDECEE;
177
+ --app-color-brand-100: #FCE0E3;
178
+ --app-color-brand-200: #F8B6BD;
179
+ --app-color-brand-300: #EF6671;
180
+ --app-color-brand-400: #EA4751;
181
+ --app-color-brand-500: #E63946;
182
+ --app-color-brand-600: #C42E3A;
183
+ --app-color-brand-700: #9F252E;
184
+ --app-color-brand-800: #660F17;
185
+ --app-color-brand-900: #39080D;
186
186
 
187
187
  /* Shell chrome: gray ramps */
188
188
  --app-color-gray-50: #F7FAFC;
@@ -200,7 +200,7 @@
200
200
  --app-field-bg: #FFFFFF;
201
201
  --app-field-border: #E2E8F0;
202
202
  --app-field-border-hover: #A0AEC0;
203
- --app-field-focus: #E86A3A;
203
+ --app-field-focus: #E63946;
204
204
  --app-field-radius: 10px;
205
205
  --form-placeholder-font-size: 14px;
206
206
  --form-select-icon: #64748B;
@@ -215,8 +215,8 @@
215
215
  --app-btn-size: 44px;
216
216
  --app-btn-radius: 10px;
217
217
  --app-btn-font-size: 14px;
218
- --app-btn-primary-bg: #E86A3A;
219
- --app-btn-primary-bg-hover: #D95F30;
218
+ --app-btn-primary-bg: #E63946;
219
+ --app-btn-primary-bg-hover: #C42E3A;
220
220
  --app-btn-primary-fg: #FFFFFF;
221
221
  --app-btn-secondary-bg: #FFFFFF;
222
222
  --app-btn-secondary-bg-hover: #F8FAFC;
@@ -236,10 +236,10 @@
236
236
  --app-tab-radius: 12px;
237
237
 
238
238
  /* Mode-active colors (overwritten by app at mode-switch time) */
239
- --mode-primary-color: #E86A3A;
240
- --mode-input-border-color: #E86A3A;
241
- --mode-input-hover-border-color: #CC5429;
242
- --mode-input-focus-shadow-color: #E86A3A;
239
+ --mode-primary-color: #E63946;
240
+ --mode-input-border-color: #E63946;
241
+ --mode-input-hover-border-color: #C42E3A;
242
+ --mode-input-focus-shadow-color: #E63946;
243
243
  }
244
244
  .dark {
245
245
  --background: 222.2 84% 4.9%;
package/dist/index.cjs CHANGED
@@ -15,11 +15,11 @@ var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
15
15
  // src/theme/index.ts
16
16
 
17
17
  // src/theme/tokens.generated.ts
18
- var brandRamp = { 50: "#FFF5F0", 100: "#FFE8DC", 200: "#FFD0B8", 300: "#FFB088", 400: "#FF8C5A", 500: "#E86A3A", 600: "#CC5429", 700: "#A6421F", 800: "#803317", 900: "#5C2410" };
18
+ var brandRamp = { 50: "#FDECEE", 100: "#FCE0E3", 200: "#F8B6BD", 300: "#EF6671", 400: "#EA4751", 500: "#E63946", 600: "#C42E3A", 700: "#9F252E", 800: "#660F17", 900: "#39080D" };
19
19
 
20
20
  // src/theme/colors.ts
21
21
  var colors = {
22
- // Primary brand color - Politogy burnt-orange (Energy & Action). From Specs.
22
+ // Primary brand = Specs race-red (#E63946 ramp). Generated via gen:tokens.
23
23
  brand: { ...brandRamp },
24
24
  // Politogy Brand Colors
25
25
  politogy: {
@@ -36,7 +36,7 @@ var colors = {
36
36
  800: "#2a4365",
37
37
  900: "#1a365d"
38
38
  },
39
- // Primary Red/Orange - Energy & Action (main brand color). From Specs.
39
+ // Race-red (Specs primary brand). Same ramp as `brand`.
40
40
  red: { ...brandRamp },
41
41
  // Navy - Professional & Authoritative
42
42
  navy: {
@@ -1573,8 +1573,7 @@ function BrandIcon({
1573
1573
  );
1574
1574
  }
1575
1575
  var BrandIcon_default = BrandIcon;
1576
- var MODE_CAMPAIGN = "campaign";
1577
- var MODE_PETITION = "petition";
1576
+ var safeHref = (h) => h && /^(https?:|mailto:|tel:|\/|#|\.)/i.test(h.trim()) ? h : "#";
1578
1577
  function NavItem({
1579
1578
  icon,
1580
1579
  brandIcon,
@@ -1595,23 +1594,9 @@ function NavItem({
1595
1594
  const location = reactRouterDom.useLocation();
1596
1595
  const navigate = reactRouterDom.useNavigate();
1597
1596
  const mode = useShellMode();
1598
- const currentMode = mode?.currentMode ?? null;
1599
1597
  const modeConfig = resolveModeConfig(mode);
1600
1598
  const navPref = useShellNavigationPreference();
1601
1599
  const showSubMenu = navPref?.showSubMenu ?? true;
1602
- const navHoverGradient = currentMode === MODE_CAMPAIGN ? "linear-gradient(90deg, #F2C94C 0%, #E63946 100%)" : currentMode === MODE_PETITION ? "linear-gradient(90deg, #F2C94C 0%, #007BFF 100%)" : "linear-gradient(90deg, #ea6a3a 0%, #E63946 100%)";
1603
- const gradientSweepBefore = {
1604
- content: '""',
1605
- position: "absolute",
1606
- top: 0,
1607
- left: 0,
1608
- bottom: 0,
1609
- width: "0%",
1610
- background: navHoverGradient,
1611
- transition: "width 300ms ease",
1612
- pointerEvents: "none",
1613
- zIndex: 0
1614
- };
1615
1600
  const isDisabled = Boolean(navIsDisabled || disabled);
1616
1601
  const effectiveHref = href || (Array.isArray(subItems) && subItems.length > 0 ? subItems[0].href : void 0);
1617
1602
  const effectivePathname = effectiveHref?.split("?")[0];
@@ -1621,6 +1606,7 @@ function NavItem({
1621
1606
  [location.search]
1622
1607
  );
1623
1608
  const matchesSubItem = (itemHref) => {
1609
+ if (!itemHref) return false;
1624
1610
  if (itemHref === currentFullPath) return true;
1625
1611
  const itemPath = itemHref.split("?")[0];
1626
1612
  const itemSearch = itemHref.includes("?") ? itemHref.split("?")[1] : "";
@@ -1664,83 +1650,130 @@ function NavItem({
1664
1650
  return effectivePathname !== `/${location.pathname.split("/")[1]}/dashboard` && location.pathname.startsWith(effectivePathname + "/");
1665
1651
  })();
1666
1652
  const hasSubItems = showSubMenu && Array.isArray(subItems) && subItems.length > 0;
1667
- const hasActiveChild = hasSubItems && subItems.some((item) => matchesSubItem(item.href || ""));
1653
+ const hasActiveChild = Array.isArray(subItems) && subItems.some((item) => matchesSubItem(item.href || ""));
1668
1654
  const isParentActive = isActive || hasActiveChild;
1669
1655
  const isSubMenuOpen = isExpanded !== void 0 ? isExpanded : hasSubItems && subItems.some((item) => matchesSubItem(item.href || ""));
1670
1656
  const expandedRowBg = isParentActive ? modeConfig?.primaryColor || "brand.500" : isSubMenuOpen ? "gray.100" : "transparent";
1671
1657
  const expandedRowTextColor = isParentActive ? "white" : isSubMenuOpen ? "gray.900" : "gray.600";
1672
1658
  const disabledRowBg = isSubItem ? "gray.50" : "transparent";
1673
1659
  const disabledRowTextColor = "gray.400";
1660
+ const renderIcon = (activeForHover) => {
1661
+ if (brandIcon) {
1662
+ return /* @__PURE__ */ jsxRuntime.jsx(
1663
+ react.Box,
1664
+ {
1665
+ mr: "4",
1666
+ display: "inline-flex",
1667
+ alignItems: "center",
1668
+ filter: isParentActive || isActive ? "brightness(0) invert(1)" : void 0,
1669
+ _groupHover: isDisabled ? void 0 : {
1670
+ filter: activeForHover ? "brightness(0) invert(1)" : void 0
1671
+ },
1672
+ children: /* @__PURE__ */ jsxRuntime.jsx(BrandIcon_default, { name: brandIcon, size: 18 })
1673
+ }
1674
+ );
1675
+ }
1676
+ if (icon) {
1677
+ return /* @__PURE__ */ jsxRuntime.jsx(
1678
+ react.Box,
1679
+ {
1680
+ mr: "4",
1681
+ fontSize: "16",
1682
+ _groupHover: {
1683
+ color: isDisabled ? disabledRowTextColor : activeForHover ? "white" : "gray.900"
1684
+ },
1685
+ as: icon
1686
+ }
1687
+ );
1688
+ }
1689
+ return null;
1690
+ };
1674
1691
  if (hasSubItems) {
1675
- const headerProps = {
1676
- align: "center",
1677
- px: "4",
1678
- py: "2.5",
1679
- mx: "4",
1680
- w: "auto",
1681
- borderTopRadius: "lg",
1682
- borderBottomRadius: isSubMenuOpen ? 0 : "lg",
1683
- role: "group",
1684
- cursor: isDisabled ? "not-allowed" : "pointer",
1685
- opacity: 1,
1686
- pointerEvents: isDisabled ? "none" : "auto",
1687
- "data-nav-item-active": String(isParentActive),
1688
- position: "relative",
1689
- overflow: "hidden",
1690
- bg: isDisabled ? disabledRowBg : expandedRowBg,
1691
- color: isDisabled ? disabledRowTextColor : expandedRowTextColor,
1692
- _before: isDisabled ? void 0 : gradientSweepBefore,
1693
- _hover: {
1694
- color: isDisabled ? disabledRowTextColor : "white",
1695
- _before: isDisabled ? void 0 : { width: "100%" }
1696
- },
1697
- "aria-disabled": isDisabled ? "true" : "false",
1698
- onClick: (e) => {
1699
- if (isDisabled) return;
1700
- if (effectiveHref) e.preventDefault();
1701
- e.stopPropagation();
1702
- onToggle?.(menuKey || null);
1703
- }
1704
- };
1705
1692
  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
1706
- /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { ...headerProps, ...rest, children: [
1707
- brandIcon ? /* @__PURE__ */ jsxRuntime.jsx(
1708
- react.Box,
1709
- {
1710
- mr: "4",
1711
- display: "inline-flex",
1712
- alignItems: "center",
1713
- position: "relative",
1714
- zIndex: 1,
1715
- filter: isParentActive ? "brightness(0) invert(1)" : void 0,
1716
- _groupHover: isDisabled ? void 0 : { filter: "brightness(0) invert(1)" },
1717
- children: /* @__PURE__ */ jsxRuntime.jsx(BrandIcon_default, { name: brandIcon, size: 18 })
1718
- }
1719
- ) : icon ? /* @__PURE__ */ jsxRuntime.jsx(
1720
- react.Box,
1721
- {
1722
- mr: "4",
1723
- fontSize: "16",
1724
- position: "relative",
1725
- zIndex: 1,
1726
- _groupHover: {
1727
- color: isDisabled ? disabledRowTextColor : "white"
1728
- },
1729
- as: icon
1730
- }
1731
- ) : null,
1732
- /* @__PURE__ */ jsxRuntime.jsx(react.Box, { flex: "1", position: "relative", zIndex: 1, children }),
1733
- /* @__PURE__ */ jsxRuntime.jsx(
1734
- react.Box,
1735
- {
1736
- as: fi.FiChevronDown,
1737
- position: "relative",
1738
- zIndex: 1,
1739
- transform: isSubMenuOpen ? "rotate(180deg)" : void 0,
1740
- transition: "transform 0.2s"
1741
- }
1742
- )
1743
- ] }),
1693
+ effectiveHref ? /* @__PURE__ */ jsxRuntime.jsxs(
1694
+ react.Flex,
1695
+ {
1696
+ align: "center",
1697
+ px: "4",
1698
+ py: "2.5",
1699
+ mx: "4",
1700
+ w: "auto",
1701
+ borderTopRadius: "lg",
1702
+ borderBottomRadius: isSubMenuOpen ? 0 : "lg",
1703
+ role: "group",
1704
+ cursor: isDisabled ? "not-allowed" : "pointer",
1705
+ opacity: 1,
1706
+ pointerEvents: isDisabled ? "none" : "auto",
1707
+ "data-nav-item-active": String(isParentActive),
1708
+ bg: isDisabled ? disabledRowBg : expandedRowBg,
1709
+ color: isDisabled ? disabledRowTextColor : expandedRowTextColor,
1710
+ _hover: {
1711
+ bg: isDisabled ? disabledRowBg : isParentActive ? modeConfig?.accentColor || "brand.600" : "gray.200",
1712
+ color: isDisabled ? disabledRowTextColor : isParentActive ? "white" : "gray.900"
1713
+ },
1714
+ "aria-disabled": isDisabled ? "true" : "false",
1715
+ onClick: (e) => {
1716
+ if (isDisabled) return;
1717
+ e.preventDefault();
1718
+ e.stopPropagation();
1719
+ onToggle?.(menuKey || null);
1720
+ },
1721
+ ...rest,
1722
+ children: [
1723
+ renderIcon(isParentActive),
1724
+ /* @__PURE__ */ jsxRuntime.jsx(react.Box, { flex: "1", children }),
1725
+ /* @__PURE__ */ jsxRuntime.jsx(
1726
+ react.Box,
1727
+ {
1728
+ as: fi.FiChevronDown,
1729
+ transform: isSubMenuOpen ? "rotate(180deg)" : void 0,
1730
+ transition: "transform 0.2s"
1731
+ }
1732
+ )
1733
+ ]
1734
+ }
1735
+ ) : /* @__PURE__ */ jsxRuntime.jsxs(
1736
+ react.Flex,
1737
+ {
1738
+ align: "center",
1739
+ px: "4",
1740
+ py: "2.5",
1741
+ mx: "4",
1742
+ w: "auto",
1743
+ borderTopRadius: "lg",
1744
+ borderBottomRadius: isSubMenuOpen ? 0 : "lg",
1745
+ role: "group",
1746
+ cursor: isDisabled ? "not-allowed" : "pointer",
1747
+ opacity: 1,
1748
+ pointerEvents: isDisabled ? "none" : "auto",
1749
+ "data-nav-item-active": String(isParentActive),
1750
+ bg: isDisabled ? disabledRowBg : expandedRowBg,
1751
+ color: isDisabled ? disabledRowTextColor : expandedRowTextColor,
1752
+ _hover: {
1753
+ bg: isDisabled ? disabledRowBg : hasActiveChild ? modeConfig?.accentColor || "brand.600" : "gray.200",
1754
+ color: isDisabled ? disabledRowTextColor : hasActiveChild ? "white" : "gray.900"
1755
+ },
1756
+ "aria-disabled": isDisabled ? "true" : "false",
1757
+ onClick: (e) => {
1758
+ if (isDisabled) return;
1759
+ e.stopPropagation();
1760
+ onToggle?.(menuKey || null);
1761
+ },
1762
+ ...rest,
1763
+ children: [
1764
+ renderIcon(hasActiveChild),
1765
+ /* @__PURE__ */ jsxRuntime.jsx(react.Box, { flex: "1", children }),
1766
+ /* @__PURE__ */ jsxRuntime.jsx(
1767
+ react.Box,
1768
+ {
1769
+ as: fi.FiChevronDown,
1770
+ transform: isSubMenuOpen ? "rotate(180deg)" : void 0,
1771
+ transition: "transform 0.2s"
1772
+ }
1773
+ )
1774
+ ]
1775
+ }
1776
+ ),
1744
1777
  /* @__PURE__ */ jsxRuntime.jsx(react.Collapse, { in: isSubMenuOpen, animateOpacity: true, children: /* @__PURE__ */ jsxRuntime.jsx(
1745
1778
  react.Box,
1746
1779
  {
@@ -1784,74 +1817,68 @@ function NavItem({
1784
1817
  navigate(effectiveHref);
1785
1818
  }
1786
1819
  };
1787
- return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "a", href: effectiveHref || "#", onClick: handleClick, style: { textDecoration: "none" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
1788
- react.Flex,
1820
+ const rowActive = isSubItem ? isActive : isParentActive;
1821
+ return /* @__PURE__ */ jsxRuntime.jsx(
1822
+ react.Box,
1789
1823
  {
1790
- align: "center",
1791
- px: "4",
1792
- py: "2.5",
1793
- mx: isSubItem ? "0" : "4",
1794
- w: isSubItem ? "full" : "auto",
1795
- borderRadius: isSubItem ? "0" : "lg",
1796
- role: "group",
1797
- cursor: isDisabled ? "not-allowed" : "pointer",
1798
- opacity: 1,
1799
- pointerEvents: isDisabled ? "none" : "auto",
1800
- "data-nav-item-active": String(isActive),
1801
- position: "relative",
1802
- overflow: "hidden",
1803
- bg: isDisabled ? disabledRowBg : isActive ? isSubItem ? "gray.100" : modeConfig?.primaryColor || "brand.500" : "transparent",
1804
- color: isDisabled ? disabledRowTextColor : isActive ? isSubItem ? modeConfig?.primaryColor || "brand.500" : "white" : "gray.600",
1805
- _before: isDisabled ? void 0 : gradientSweepBefore,
1806
- _hover: {
1807
- color: isDisabled ? disabledRowTextColor : "white",
1808
- _before: isDisabled ? void 0 : { width: "100%" }
1809
- },
1810
- "aria-disabled": isDisabled ? "true" : "false",
1824
+ as: "a",
1825
+ href: safeHref(effectiveHref),
1811
1826
  onClick: handleClick,
1812
- children: [
1813
- brandIcon ? /* @__PURE__ */ jsxRuntime.jsx(
1814
- react.Box,
1815
- {
1816
- mr: "4",
1817
- display: "inline-flex",
1818
- alignItems: "center",
1819
- position: "relative",
1820
- zIndex: 1,
1821
- filter: isActive && !isSubItem ? "brightness(0) invert(1)" : void 0,
1822
- _groupHover: isDisabled ? void 0 : { filter: "brightness(0) invert(1)" },
1823
- children: /* @__PURE__ */ jsxRuntime.jsx(BrandIcon_default, { name: brandIcon, size: 18 })
1824
- }
1825
- ) : icon ? /* @__PURE__ */ jsxRuntime.jsx(
1826
- react.Box,
1827
- {
1828
- mr: "4",
1829
- fontSize: "16",
1830
- position: "relative",
1831
- zIndex: 1,
1832
- _groupHover: {
1833
- color: isDisabled ? disabledRowTextColor : "white"
1834
- },
1835
- as: icon
1836
- }
1837
- ) : null,
1838
- /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { flex: "1", position: "relative", zIndex: 1, children: [
1839
- /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children }),
1840
- subLabel ? /* @__PURE__ */ jsxRuntime.jsx(
1841
- react.Text,
1842
- {
1843
- mt: 0.5,
1844
- fontSize: "10px",
1845
- lineHeight: "1.3",
1846
- color: isDisabled ? "gray.400" : "gray.400",
1847
- children: subLabel
1848
- }
1849
- ) : null,
1850
- badge && /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { colorScheme: "orange", size: "xs", mt: 1, fontSize: "xs", display: "block", children: badge })
1851
- ] })
1852
- ]
1827
+ style: { textDecoration: "none" },
1828
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1829
+ react.Flex,
1830
+ {
1831
+ align: "center",
1832
+ px: "4",
1833
+ py: "2.5",
1834
+ mx: isSubItem ? "0" : "4",
1835
+ w: isSubItem ? "full" : "auto",
1836
+ borderRadius: isSubItem ? "0" : "lg",
1837
+ role: "group",
1838
+ cursor: isDisabled ? "not-allowed" : "pointer",
1839
+ opacity: 1,
1840
+ pointerEvents: isDisabled ? "none" : "auto",
1841
+ "data-nav-item-active": String(rowActive),
1842
+ bg: isDisabled ? disabledRowBg : rowActive ? isSubItem ? "gray.100" : modeConfig?.primaryColor || "brand.500" : "transparent",
1843
+ color: isDisabled ? disabledRowTextColor : rowActive ? isSubItem ? modeConfig?.primaryColor || "brand.500" : "white" : "gray.600",
1844
+ _hover: {
1845
+ bg: isDisabled ? disabledRowBg : rowActive ? isSubItem ? "gray.200" : modeConfig?.accentColor || "brand.600" : "gray.100",
1846
+ color: isDisabled ? disabledRowTextColor : rowActive ? isSubItem ? modeConfig?.primaryColor || "brand.500" : "white" : "gray.900"
1847
+ },
1848
+ "aria-disabled": isDisabled ? "true" : "false",
1849
+ onClick: handleClick,
1850
+ ...rest,
1851
+ children: [
1852
+ brandIcon ? /* @__PURE__ */ jsxRuntime.jsx(
1853
+ react.Box,
1854
+ {
1855
+ mr: "4",
1856
+ display: "inline-flex",
1857
+ alignItems: "center",
1858
+ filter: rowActive && !isSubItem ? "brightness(0) invert(1)" : void 0,
1859
+ children: /* @__PURE__ */ jsxRuntime.jsx(BrandIcon_default, { name: brandIcon, size: 18 })
1860
+ }
1861
+ ) : icon ? /* @__PURE__ */ jsxRuntime.jsx(
1862
+ react.Box,
1863
+ {
1864
+ mr: "4",
1865
+ fontSize: "16",
1866
+ _groupHover: {
1867
+ color: isDisabled ? disabledRowTextColor : rowActive ? isSubItem ? modeConfig?.primaryColor || "brand.500" : "white" : "gray.900"
1868
+ },
1869
+ as: icon
1870
+ }
1871
+ ) : null,
1872
+ /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { flex: "1", children: [
1873
+ /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children }),
1874
+ subLabel ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { mt: 0.5, fontSize: "10px", lineHeight: "1.3", color: "gray.400", children: subLabel }) : null,
1875
+ badge && /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { colorScheme: "red", size: "xs", mt: 1, fontSize: "xs", display: "block", children: badge })
1876
+ ] })
1877
+ ]
1878
+ }
1879
+ )
1853
1880
  }
1854
- ) });
1881
+ );
1855
1882
  }
1856
1883
  var NavItem_default = NavItem;
1857
1884
 
@@ -1986,7 +2013,7 @@ function OrgPill() {
1986
2013
  () => currentOrg ? getOrganizationBrandColor(currentOrg) : null,
1987
2014
  [currentOrg]
1988
2015
  );
1989
- const selectedOrgColor = selectedOrgBrandColor || "var(--mode-primary-color, #ea6a3a)";
2016
+ const selectedOrgColor = selectedOrgBrandColor || "var(--mode-primary-color, var(--color-race-red-500, #E63946))";
1990
2017
  const selectedOrgMenuBg = selectedOrgBrandColor && lightenHexColor(selectedOrgBrandColor, 0.12) || "#4a4a4a";
1991
2018
  if (!org) return null;
1992
2019
  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { mx: "4", mb: "3", children: [
@@ -2060,15 +2087,15 @@ function OrgPill() {
2060
2087
  bg: "transparent",
2061
2088
  color: currentOrg?.id ? "white" : "inherit",
2062
2089
  _hover: {
2063
- bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.2) || "#555555" : "gray.100",
2090
+ bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#E63946", 0.2) || "#555555" : "gray.100",
2064
2091
  color: currentOrg?.id ? "white" : "gray.900"
2065
2092
  },
2066
2093
  _focus: {
2067
- bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.2) || "#555555" : "gray.100",
2094
+ bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#E63946", 0.2) || "#555555" : "gray.100",
2068
2095
  color: currentOrg?.id ? "white" : "gray.900"
2069
2096
  },
2070
2097
  _active: {
2071
- bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.24) || "#5d5d5d" : "gray.200",
2098
+ bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#E63946", 0.24) || "#5d5d5d" : "gray.200",
2072
2099
  color: currentOrg?.id ? "white" : "gray.900"
2073
2100
  },
2074
2101
  children: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { justify: "space-between", align: "center", width: "100%", overflow: "hidden", children: [
@@ -2118,15 +2145,15 @@ function OrgPill() {
2118
2145
  color: currentOrg?.id ? "white" : "inherit",
2119
2146
  my: 0,
2120
2147
  _hover: {
2121
- bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.2) || "#555555" : "gray.100",
2148
+ bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#E63946", 0.2) || "#555555" : "gray.100",
2122
2149
  color: currentOrg?.id ? "white" : "gray.900"
2123
2150
  },
2124
2151
  _focus: {
2125
- bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.2) || "#555555" : "gray.100",
2152
+ bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#E63946", 0.2) || "#555555" : "gray.100",
2126
2153
  color: currentOrg?.id ? "white" : "gray.900"
2127
2154
  },
2128
2155
  _active: {
2129
- bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.24) || "#5d5d5d" : "gray.200",
2156
+ bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#E63946", 0.24) || "#5d5d5d" : "gray.200",
2130
2157
  color: currentOrg?.id ? "white" : "gray.900"
2131
2158
  },
2132
2159
  fontSize: "sm",
@@ -2544,7 +2571,11 @@ function Sidebar({ onClose, id }) {
2544
2571
  {
2545
2572
  href: l.href,
2546
2573
  isExternal: true,
2547
- _hover: { textDecoration: "underline", opacity: 1 },
2574
+ color: "var(--color-race-red-500, #E63946)",
2575
+ _hover: {
2576
+ color: "var(--color-race-red-600, #C42E3A)",
2577
+ textDecoration: "underline"
2578
+ },
2548
2579
  children: l.label
2549
2580
  }
2550
2581
  ) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -2552,7 +2583,11 @@ function Sidebar({ onClose, id }) {
2552
2583
  {
2553
2584
  as: reactRouterDom.NavLink,
2554
2585
  to: l.href,
2555
- _hover: { textDecoration: "underline", opacity: 1 },
2586
+ color: "var(--color-race-red-500, #E63946)",
2587
+ _hover: {
2588
+ color: "var(--color-race-red-600, #C42E3A)",
2589
+ textDecoration: "underline"
2590
+ },
2556
2591
  children: l.label
2557
2592
  }
2558
2593
  )
@@ -2867,7 +2902,7 @@ ${formatted}` : formatted,
2867
2902
  /* @__PURE__ */ jsxRuntime.jsx(
2868
2903
  react.Button,
2869
2904
  {
2870
- colorScheme: "orange",
2905
+ colorScheme: "red",
2871
2906
  onClick: () => void handleSubmit(),
2872
2907
  isLoading: isSubmitting,
2873
2908
  loadingText: "Sending",