@the-portland-company/shell 0.70.0 → 0.71.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.
package/dist/chrome.css CHANGED
@@ -155,7 +155,7 @@
155
155
  --sidebar-border: #E2E8F0;
156
156
  --sidebar-brand-logo-height: 24px;
157
157
  --sidebar-org-logo-max-height: 34px;
158
- --sidebar-org-band-height: 48px;
158
+ --sidebar-org-band-height: 70px;
159
159
  --sidebar-item-radius: 8px;
160
160
  --sidebar-item-padding-x: 16px;
161
161
  --sidebar-item-padding-y: 10px;
@@ -447,7 +447,7 @@
447
447
  display: inline-flex !important;
448
448
  align-items: center !important;
449
449
  justify-content: center !important;
450
- border: 1px solid var(--line) !important;
450
+ border: 1px solid transparent !important;
451
451
  border-radius: var(--topbar-icon-button-radius, 5px) !important;
452
452
  background: transparent !important;
453
453
  color: var(--topbar-icon-color, var(--muted)) !important;
@@ -1,7 +1,7 @@
1
1
  import { warnDeprecated } from './chunk-LPSBSAF3.js';
2
2
  import { readThemeCookie, THEME_STORAGE_KEY, isThemePreference, applyThemePreference, readPendingThemeChoice, writeThemeCookie, clearPendingThemeChoice, markThemeChoicePending } from './chunk-NHBNM5P3.js';
3
3
  import { readRailPreference, writeRailPreference } from './chunk-7YVJ7HQG.js';
4
- import { createContext, useRef, useState, useEffect, useContext, useCallback, useMemo, useSyncExternalStore } from 'react';
4
+ import { createContext, useRef, useState, useEffect, useContext, useCallback, useMemo, Fragment as Fragment$1, useSyncExternalStore } from 'react';
5
5
  import clsx from 'clsx';
6
6
  import { FiUser, FiSettings, FiMessageSquare, FiMail, FiInfo, FiSun, FiMoon, FiHelpCircle, FiLifeBuoy, FiAlertCircle, FiAlertTriangle, FiBell, FiGrid, FiZap, FiBatteryCharging, FiBattery } from 'react-icons/fi';
7
7
  import { createPortal } from 'react-dom';
@@ -91,7 +91,7 @@ function topBarIconButtonClass(tone = "default") {
91
91
  const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--chrome-danger)] hover:text-[color:var(--chrome-danger)]" : "text-[color:var(--topbar-icon-color,var(--muted))] hover:text-[color:var(--topbar-icon-hover-color,var(--foreground))] hover:bg-[color:var(--topbar-icon-hover-bg,transparent)]";
92
92
  return [
93
93
  // `group/tbtip` powers the shared <TopBarTooltip> rendered inside the trigger.
94
- "group/tbtip relative flex items-center justify-center rounded-[var(--topbar-icon-button-radius,5px)] border border-[color:var(--line)] transition",
94
+ "group/tbtip relative flex items-center justify-center rounded-[var(--topbar-icon-button-radius,5px)] border border-transparent transition",
95
95
  "h-[var(--topbar-icon-button-size,34px)] w-[var(--topbar-icon-button-size,34px)]",
96
96
  toneClass
97
97
  ].join(" ");
@@ -2287,7 +2287,7 @@ function NavSidebar({
2287
2287
  }
2288
2288
  ),
2289
2289
  org ? /* @__PURE__ */ jsxs("div", { className: rc("max-md:flex max-md:justify-center"), children: [
2290
- /* @__PURE__ */ jsx("div", { className: `mb-[7px] flex items-center justify-between ${rc("max-md:hidden")}`, children: /* @__PURE__ */ jsx("p", { className: NAV_EYEBROW_CLASS, children: "Organization" }) }),
2290
+ /* @__PURE__ */ jsx("div", { className: `mb-[7px] mt-[7px] flex items-center justify-between ${rc("max-md:hidden")}`, children: /* @__PURE__ */ jsx("p", { className: NAV_EYEBROW_CLASS, children: "Organization" }) }),
2291
2291
  org.loading ? /* @__PURE__ */ jsxs("div", { className: `flex w-full items-center gap-2.5 rounded-md border border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-2.5 py-2 shadow-sm ${rc("max-md:w-auto max-md:border-0 max-md:bg-transparent max-md:p-0 max-md:shadow-none")}`, children: [
2292
2292
  /* @__PURE__ */ jsx(
2293
2293
  "span",
@@ -2313,7 +2313,7 @@ function NavSidebar({
2313
2313
  className: `flex w-full cursor-pointer list-none flex-col overflow-hidden rounded-[5px] border border-[color:var(--sidebar-card-border,var(--sidebar-line,var(--line)))] bg-[color:var(--sidebar-card-bg,var(--panel-elevated))] text-left text-[color:var(--sidebar-text,var(--foreground))] transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))] [&::-webkit-details-marker]:hidden ${rc("max-md:w-auto max-md:items-center max-md:overflow-visible max-md:border-0 max-md:bg-transparent")}`,
2314
2314
  children: [
2315
2315
  /* @__PURE__ */ jsx(OrgIconMark, { org, logoSrc: orgLogoSrc }),
2316
- /* @__PURE__ */ jsxs("span", { className: `relative flex h-[var(--sidebar-org-band-height,48px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px] ${rc("max-md:hidden")}`, children: [
2316
+ /* @__PURE__ */ jsxs("span", { className: `relative flex h-[var(--sidebar-org-band-height,70px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px] ${rc("max-md:hidden")}`, children: [
2317
2317
  orgLogoSrc ? /* @__PURE__ */ jsx("img", { src: orgLogoSrc, alt: "", className: "max-h-full max-w-[132px] object-contain" }) : org.canUploadLogo ? /* @__PURE__ */ jsx(
2318
2318
  "a",
2319
2319
  {
@@ -2325,7 +2325,7 @@ function NavSidebar({
2325
2325
  ) : /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-neutral-800", children: org.name ?? "Organization" }),
2326
2326
  /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-0 h-[3px]", style: { backgroundImage: orgGradient } })
2327
2327
  ] }),
2328
- /* @__PURE__ */ jsxs("span", { className: `flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-2 ${rc("max-md:hidden")}`, children: [
2328
+ /* @__PURE__ */ jsxs("span", { className: `flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-[10px] ${rc("max-md:hidden")}`, children: [
2329
2329
  /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
2330
2330
  /* @__PURE__ */ jsx(
2331
2331
  "span",
@@ -2415,7 +2415,7 @@ function NavSidebar({
2415
2415
  className: `flex w-full flex-col overflow-hidden rounded-[5px] border border-[color:var(--sidebar-card-border,var(--sidebar-line,var(--line)))] bg-[color:var(--sidebar-card-bg,var(--panel-elevated))] text-left text-[color:var(--sidebar-text,var(--foreground))] transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))] ${rc("max-md:w-auto max-md:items-center max-md:overflow-visible max-md:border-0 max-md:bg-transparent")}`,
2416
2416
  children: [
2417
2417
  /* @__PURE__ */ jsx(OrgIconMark, { org, logoSrc: orgLogoSrc }),
2418
- /* @__PURE__ */ jsxs("span", { className: `relative flex h-[var(--sidebar-org-band-height,48px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px] ${rc("max-md:hidden")}`, children: [
2418
+ /* @__PURE__ */ jsxs("span", { className: `relative flex h-[var(--sidebar-org-band-height,70px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px] ${rc("max-md:hidden")}`, children: [
2419
2419
  orgLogoSrc ? /* @__PURE__ */ jsx("img", { src: orgLogoSrc, alt: "", className: "max-h-full max-w-[132px] object-contain" }) : org.canUploadLogo ? /* @__PURE__ */ jsx(
2420
2420
  "a",
2421
2421
  {
@@ -2427,7 +2427,7 @@ function NavSidebar({
2427
2427
  ) : /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-neutral-800", children: org.name ?? "Organization" }),
2428
2428
  /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-0 h-[3px]", style: { backgroundImage: orgGradient } })
2429
2429
  ] }),
2430
- /* @__PURE__ */ jsxs("span", { className: `flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-2 ${rc("max-md:hidden")}`, children: [
2430
+ /* @__PURE__ */ jsxs("span", { className: `flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-[10px] ${rc("max-md:hidden")}`, children: [
2431
2431
  /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
2432
2432
  /* @__PURE__ */ jsx(
2433
2433
  "span",
@@ -2472,7 +2472,7 @@ function NavSidebar({
2472
2472
  },
2473
2473
  disabled: !available,
2474
2474
  className: [
2475
- "flex flex-1 items-center justify-center rounded-[5px] px-[9px] py-[6px] transition",
2475
+ `flex flex-none items-center justify-center rounded-[5px] px-[9px] py-[6px] transition ${rc("max-md:flex-1")}`,
2476
2476
  !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))]"
2477
2477
  ].join(" "),
2478
2478
  children: OptIcon ? /* @__PURE__ */ jsx(OptIcon, { size: 15, className: "shrink-0" }) : null
@@ -2562,15 +2562,17 @@ function NavSidebar({
2562
2562
  onSignOut: footer.onSignOut
2563
2563
  }
2564
2564
  ) : null,
2565
- footer.links && footer.links.length > 0 ? /* @__PURE__ */ jsx("div", { className: `flex flex-wrap items-center gap-[10px] text-[11px] leading-[1.2] ${footer.user ? "mt-3" : ""} ${rc("max-md:hidden")}`, children: footer.links.map((l) => /* @__PURE__ */ jsx(
2566
- "a",
2567
- {
2568
- href: safeHref(l.href),
2569
- className: "text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] hover:text-[color:var(--sidebar-text,var(--foreground))] hover:underline",
2570
- children: l.label
2571
- },
2572
- l.label
2573
- )) }) : null,
2565
+ footer.links && footer.links.length > 0 ? /* @__PURE__ */ jsx("div", { className: `flex flex-wrap items-center justify-center gap-[6px] text-[11px] leading-[1.2] ${footer.user ? "mt-3" : ""} ${rc("max-md:hidden")}`, children: footer.links.map((l, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
2566
+ i > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))]", children: "\xB7" }) : null,
2567
+ /* @__PURE__ */ jsx(
2568
+ "a",
2569
+ {
2570
+ href: safeHref(l.href),
2571
+ className: "text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] hover:text-[color:var(--sidebar-text,var(--foreground))] hover:underline",
2572
+ children: l.label
2573
+ }
2574
+ )
2575
+ ] }, l.label)) }) : null,
2574
2576
  footer.envLabel && footer.envLabel.trim().toLowerCase() !== "production" ? /* @__PURE__ */ jsxs(
2575
2577
  "div",
2576
2578
  {
@@ -3723,5 +3725,5 @@ function NavAppShell({
3723
3725
  }
3724
3726
 
3725
3727
  export { BETA_BANNER_DISMISS_KEY, CAMPAIGN_FEATURE_AVAILABILITY, CORE_APP_ORIGIN, CORE_BILLING_PATH, FuelAction, NavAppShell, NavBetaBanner, NavChromeProvider, NavDisplayAction, NavSidebar, NavTabStrip, NavThemeControl, NavTopBar, NotificationsAction, SPECS_ORIGIN, SpecOverlayAction, SupportAction, TopBarCountBadge, TopBarPanelArrow, TopBarPopover, TopBarTooltip, TopBarWidgetSlot, clearBetaBannerDismissal, envChipClasses, isNavItemActive, resolveOrgLogoUrl, standardPolitogyNav, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeFetcher, useThemePreference };
3726
- //# sourceMappingURL=chunk-CZI66JVG.js.map
3727
- //# sourceMappingURL=chunk-CZI66JVG.js.map
3728
+ //# sourceMappingURL=chunk-B2AQL37X.js.map
3729
+ //# sourceMappingURL=chunk-B2AQL37X.js.map