@capillarytech/blaze-ui 6.1.5 → 6.1.6-beta.3

package/CapNavigationSPA/CapNavigationSPASidebar/styles.scss

@@ -0,0 +1,422 @@
+@import '../../styles/_variables.scss';
+
+// BEM: Block = cap-navigation-spa-sidebar | Elements = __wrapper, __logo, __nav, __item, ... | Modifiers = --collapsed, __item--expanded, ...
+// Wrapper for sidebar + L2 flyout (position relative for flyout)
+.cap-navigation-spa-sidebar__wrapper {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+}
+
+// Figma 646-56222: Navigation 240px, bg #FAFBFC (Neutral/1), border-right #dfe2e7, items 40px height, 20px pl, 14px text #091e42
+.cap-navigation-spa-sidebar {
+  width: 17.143rem; // 240px
+  min-width: 17.143rem;
+  height: 100%;
+  background-color: $CAP_G10; // #FAFBFC – same as L2 dropdown (Figma 646-56222)
+  border-right: 1px solid $CAP_G07; // #dfe2e7
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  transition:
+    width 0.2s ease,
+    min-width 0.2s ease;
+}
+
+// Collapsed state: 80px width, icons only (per Figma collapsed sidebar design)
+.cap-navigation-spa-sidebar--collapsed {
+  width: 5.714rem; // 80px
+  min-width: 5.714rem;
+  background-color: $CAP_G10; // #fafbfc
+}
+
+// Figma 583:6904 – logo left-aligned with module icons (same 20px left as nav items)
+.cap-navigation-spa-sidebar__logo {
+  height: 5rem; // 80px – increased for clearer branding area
+  padding: 1rem 0.857rem 1rem 1.429rem; // 16px 12px 16px 20px – left 20px to align with nav
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__logo {
+  padding: 1rem 0.571rem; // center logo when collapsed
+  justify-content: center;
+}
+
+.cap-navigation-spa-sidebar__logo-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cap-navigation-spa-sidebar__logo-text {
+  font-family: $FONT_FAMILY;
+  font-size: $FONT_SIZE_L;
+  font-weight: $FONT_WEIGHT_MEDIUM;
+  color: $CAP_G01; // #091e42
+}
+
+// Scrollable nav: reserve space for scrollbar so item width stays standard (Figma 240px content) and doesn’t shrink when scroll appears
+.cap-navigation-spa-sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0; // allow flex shrink in column layout; width comes from sidebar
+  padding: 0;
+  overflow-y: auto;
+  overflow-x: hidden; // collapsed flyout renders in portal outside nav
+  scrollbar-gutter: stable; // reserve scrollbar space so content width doesn’t change when scroll appears
+}
+
+// Figma 597-9820: nav items 240×40px, 20px pl, 14px text #091e42; full width so overflow uses scroll, not shrink
+.cap-navigation-spa-sidebar__item {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0; // keep standard height and width; do not shrink when many items
+  height: 2.857rem; // 40px – Figma
+  padding: 0 1.429rem 0 1.429rem; // 20px – Figma
+  gap: 1rem; // 16px – Figma left 36px for text after 20px pl + 16px icon
+  width: 100%;
+  min-width: 0; // allow text truncation inside; row keeps full width
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: $FONT_FAMILY;
+  font-size: $FONT_SIZE_M; // 14px
+  font-weight: $FONT_WEIGHT_REGULAR;
+  color: $CAP_G01; // #091e42 – same for all items (no blue active in Figma)
+  text-align: left;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: $CAP_G08; // #ebecf0
+  }
+}
+
+.cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__item {
+  padding: 0 0.571rem; // center icon when collapsed
+  justify-content: center;
+}
+
+.cap-navigation-spa-sidebar__item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem; // 16px – Figma icon size
+  height: 1rem;
+  flex-shrink: 0;
+  color: $CAP_G01; // #091e42 – same as label per Figma
+}
+
+.cap-navigation-spa-sidebar__item-dot {
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+
+.cap-navigation-spa-sidebar__item-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+// Figma: parent with children when flyout is open – bg #EBECF0 (Loyalty); Engage uses #E9F0FE
+.cap-navigation-spa-sidebar__item--expanded {
+  background-color: $CAP_G08; // #ebecf0
+}
+
+.cap-navigation-spa-sidebar__item--expanded-loyalty,
+.cap-navigation-spa-sidebar__item--expanded-engage,
+.cap-navigation-spa-sidebar__item--expanded-insights,
+.cap-navigation-spa-sidebar__item--expanded-members,
+.cap-navigation-spa-sidebar__item--expanded-rewards,
+.cap-navigation-spa-sidebar__item--expanded-audiences,
+.cap-navigation-spa-sidebar__item--expanded-data-management,
+.cap-navigation-spa-sidebar__item--expanded-extensions,
+.cap-navigation-spa-sidebar__item--expanded-settings {
+  background-color: $CAP_PALE_GREY; // #E9F0FE – Figma Loyalty/Engage/Insights/Member profiles/Rewards/Audience/Data management/Extensions/Settings expanded
+}
+
+.cap-navigation-spa-sidebar__item-chevron {
+  flex-shrink: 0;
+  margin-left: auto;
+  color: $CAP_G01;
+}
+
+// L2 wrapper: holds horizontal divider + L2 block (image: thin line beneath header)
+.cap-navigation-spa-sidebar__l2-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+// Horizontal separator between parent row and L2 items – image: 1px light grey spanning content width
+.cap-navigation-spa-sidebar__l2-divider {
+  height: 1px;
+  background-color: $CAP_G07; // #DFE2E7
+  width: 100%;
+  flex-shrink: 0;
+}
+
+// L2 inline – same background as sidebar (Figma 646-56222)
+.cap-navigation-spa-sidebar__l2-inline {
+  display: flex;
+  flex-direction: column;
+  margin-left: 2.286rem; // 32px – indent so bar aligns
+  padding: 0;
+  border-left: 2px solid $CAP_G07; // ~2px vertical bar per image (slightly darker light grey)
+  background-color: $CAP_G10; // #FAFBFC – same as sidebar
+}
+
+// Parent text starts at 20+16+16 = 52px; L2 content starts at 32+2 = 34px → padding-left 18px for alignment; bg same as sidebar (Figma 646-56222)
+.cap-navigation-spa-sidebar__l2-inline-item {
+  display: flex;
+  align-items: center;
+  height: 2.857rem; // 40px
+  padding: 0 1.714rem 0 1.286rem; // 4px 24px right, 18px left – align "P" with "L" of Loyalty
+  width: 100%;
+  border: none;
+  background-color: $CAP_G10; // #FAFBFC – same as sidebar
+  cursor: pointer;
+  font-family: $FONT_FAMILY;
+  font-size: $FONT_SIZE_M;
+  font-weight: $FONT_WEIGHT_REGULAR;
+  color: $CAP_G01; // #091E42
+  text-align: left;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: $CAP_G08; // #EBECF0
+  }
+}
+
+.cap-navigation-spa-sidebar__l2-inline-item--selected {
+  background-color: #e9f0fe; // Figma – selected L2 item (Loyalty)
+}
+
+// Loyalty / Engage / Insights / Member profiles / Rewards / Audience / Data management / Extensions / Settings L2 selected – Figma: bg #EBECF0, blue left edge #2466EA
+// Pull selected item 2px left so blue bar overlays container grey bar (only blue shows for selected row)
+.cap-navigation-spa-sidebar__l2-inline-item--selected-loyalty,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-engage,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-insights,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-members,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-rewards,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-audiences,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-data-management,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-extensions,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-settings {
+  margin-left: -2px; // overlay container’s 2px grey border so blue draws on top
+  background-color: $CAP_G08; // #EBECF0
+  box-shadow: inset 2px 0 0 map-get($CAP_SECONDARY, base); // #2466EA – blue vertical bar
+}
+
+// Figma 672-86680: 16px gap above and below horizontal dividers (same as section gap)
+.cap-navigation-spa-sidebar__divider {
+  height: 1px;
+  background-color: $CAP_G07; // #dfe2e7
+  margin: 1rem 0.857rem; // 16px top/bottom, 12px left/right
+  flex-shrink: 0;
+}
+
+.cap-navigation-spa-sidebar__footer {
+  padding: 0.571rem 0 1rem;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem; // 16px between settings row and collapse button (same in both states)
+  background-color: $CAP_G10; // match sidebar so scrolled nav content does not show behind sticky footer
+}
+
+// Figma collapsed: same 16px gap, tighter horizontal padding
+.cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__footer {
+  padding: 0.571rem 0.571rem 1rem;
+}
+
+// Collapse/expand toggle – background matches navigation bar (no white block); icon #091E42 (Figma 640-46050)
+.cap-navigation-spa-sidebar__collapse-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 5.714rem; // 80px – same as collapsed sidebar width
+  height: 2.857rem; // 40px
+  padding: 0;
+  margin-top: 0;
+  border: none;
+  background-color: transparent; // same as navigation bar (Figma – no separate white block)
+  cursor: pointer;
+  color: $CAP_G01; // #091e42
+  border-radius: 0;
+  transition: background-color 0.15s ease;
+  flex-shrink: 0;
+
+  &:hover {
+    background-color: $CAP_G08; // #EBECF0 – subtle hover
+  }
+}
+
+// Figma 640-46050: expand/collapse icon exactly 16×16px (override CapIcon size)
+.cap-navigation-spa-sidebar__collapse-btn-icon {
+  font-size: 16px;
+}
+
+// Wrapper for collapse button – collapsed state: centered (Figma 638-43461)
+.cap-navigation-spa-sidebar__collapse-wrap {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+// Expanded state: row with "Collapse panel" + icon right-aligned (Figma 1184-369113)
+.cap-navigation-spa-sidebar__collapse-row {
+  width: 100%;
+  height: 2.857rem; // 40px
+  padding: 0 1.143rem; // 16px
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.571rem; // 8px
+  background-color: $CAP_G10; // #FAFBFC – same as sidebar background (Figma 1175-366323)
+}
+
+.cap-navigation-spa-sidebar__collapse-panel-group {
+  display: flex;
+  align-items: center;
+  gap: 0.571rem; // 8px
+  flex-shrink: 0;
+
+  .cap-navigation-spa-sidebar__collapse-btn {
+    width: auto;
+    min-width: 2.857rem; // 40px tap target
+    padding: 0 0.571rem; // 8px
+  }
+}
+
+.cap-navigation-spa-sidebar__collapse-panel-label {
+  font-family: $FONT_FAMILY;
+  font-size: 0.857rem; // 12px – Figma Inductive/Regular
+  font-weight: $FONT_WEIGHT_REGULAR;
+  line-height: 1.333; // 16px
+  color: $CAP_G04; // #5E6C84 – Figma Character/Inactive
+}
+
+// Collapsed L2 flyout – wrapper so flyout is positioned to the right of the hovered item (Figma 640-45225)
+.cap-navigation-spa-sidebar__item-flyout-wrap {
+  position: relative;
+}
+
+// Flyout container – absolute to the right of the sidebar icon; vertically centered so arrow points at parent (Figma 640-47376)
+.cap-navigation-spa-sidebar__l2-flyout {
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center; // arrow aligns to center of flyout = center of parent row
+  padding-left: 4px; // small gap so arrow sits between icon and card
+  z-index: 10;
+  pointer-events: auto;
+}
+
+// Left-pointing arrow (white triangle) connecting flyout to sidebar (Figma: 7.07×7.071 rotated 135° = diamond)
+.cap-navigation-spa-sidebar__l2-flyout-arrow {
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-right: 5px solid $CAP_WHITE;
+  align-self: center;
+  margin-left: -3px; // overlap card border so arrow touches card
+  filter: drop-shadow(0 0 1px rgba(9, 30, 66, 0.15));
+}
+
+// Card: white bg, rounded corners, border, shadow (Figma 640-45225)
+.cap-navigation-spa-sidebar__l2-flyout-card {
+  background-color: $CAP_WHITE;
+  border: 1px solid $CAP_G07; // #DFE2E7
+  border-radius: 6px;
+  box-shadow:
+    0 4px 4px rgba(9, 30, 66, 0.15),
+    0 0 1px rgba(9, 30, 66, 0.15);
+  min-width: 200px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+// Parent title row (e.g. "Loyalty") – header style, border below
+.cap-navigation-spa-sidebar__l2-flyout-parent {
+  padding: 8px 16px 10px;
+  font-family: $FONT_FAMILY;
+  font-size: $FONT_SIZE_M;
+  font-weight: $FONT_WEIGHT_MEDIUM;
+  color: $CAP_G01; // #091E42
+  border-bottom: 1px solid $CAP_G07; // #DFE2E7
+  flex-shrink: 0;
+}
+
+// L2 flyout item row – default #FAFBFC, selected #E9F0FE (Figma 640-45225)
+.cap-navigation-spa-sidebar__l2-flyout-item {
+  display: flex;
+  align-items: center;
+  height: 2.857rem; // 40px
+  padding: 0 1rem; // 16px
+  width: 100%;
+  border: none;
+  background-color: #fafbfc; // Figma default row – variable absent
+  cursor: pointer;
+  font-family: $FONT_FAMILY;
+  font-size: $FONT_SIZE_M;
+  font-weight: $FONT_WEIGHT_REGULAR;
+  color: $CAP_G01; // #091E42
+  text-align: left;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: $CAP_G08; // #EBECF0
+  }
+}
+
+.cap-navigation-spa-sidebar__l2-flyout-item--selected {
+  background-color: $CAP_PALE_GREY; // #E9F0FE – Figma selected L2 row
+}
+
+// L1 tooltip flyout – collapsed state, modules without L2: show module name on hover (Figma 642-48287)
+.cap-navigation-spa-sidebar__l1-tooltip-flyout {
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  padding-left: 4px;
+  z-index: 10;
+  pointer-events: auto;
+}
+
+.cap-navigation-spa-sidebar__l1-tooltip-card {
+  background-color: $CAP_WHITE;
+  border: 1px solid $CAP_G07; // #DFE2E7
+  border-radius: 6px;
+  box-shadow:
+    0 4px 4px rgba(9, 30, 66, 0.15),
+    0 0 1px rgba(9, 30, 66, 0.15);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.cap-navigation-spa-sidebar__l1-tooltip-label {
+  padding: 8px 16px 10px;
+  font-family: $FONT_FAMILY;
+  font-size: $FONT_SIZE_M;
+  font-weight: $FONT_WEIGHT_REGULAR;
+  color: $CAP_G01; // #091E42 – Figma 642-48287
+  white-space: nowrap;
+}

package/CapNavigationSPA/CapNavigationSPASidebar/types.d.ts

@@ -0,0 +1,31 @@
+import type React from 'react';
+export interface CapNavigationSPASidebarItem {
+    key: string;
+    title: string;
+    link?: string;
+    target?: string;
+    iconType?: string;
+    /** Child items shown in L2 flyout (e.g. Programs, Promotions under Loyalty) */
+    children?: CapNavigationSPASidebarItem[];
+}
+export interface CapNavigationSPASidebarProps {
+    /** Sidebar nav items (icon + label) */
+    items: CapNavigationSPASidebarItem[];
+    /** Key of the currently selected item */
+    selectedKey?: string;
+    /** Callback when a nav item is clicked */
+    onItemClick?: (item: CapNavigationSPASidebarItem) => void;
+    /** Settings label; rendered at bottom */
+    settingsLabel?: string;
+    /** Optional logo node (e.g. Capillary logo) */
+    logo?: React.ReactNode;
+    /** Optional className */
+    className?: string;
+    /** When true, sidebar is collapsed (icons only, 80px width) */
+    collapsed?: boolean;
+    /** Callback when user clicks collapse/expand toggle at bottom */
+    onCollapseExpand?: () => void;
+    /** When false, do not set window.location on item click (e.g. for Storybook). Default true */
+    navigateToLink?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/CapNavigationSPA/CapNavigationSPASidebar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../components/CapNavigationSPA/CapNavigationSPASidebar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,2BAA2B;IAC1C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,2BAA2B,EAAE,CAAC;CAC1C;AAED,MAAM,WAAW,4BAA4B;IAC3C,uCAAuC;IACvC,KAAK,EAAE,2BAA2B,EAAE,CAAC;IACrC,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,2BAA2B,KAAK,IAAI,CAAC;IAC1D,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,8FAA8F;IAC9F,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B"}

package/CapNavigationSPA/CapNavigationSPASidebar/types.js

@@ -0,0 +1 @@
+

package/CapNavigationSPA/CapNavigationSPATopBar/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * CapNavigationSPATopBar – Top bar matching New navigation Figma 1175-368593.
+ * Left: org name + environment pill + chevron.
+ * Right: Aira icon, notification bell, help (?), divider, user avatar.
+ */
+import React from 'react';
+import type { CapNavigationSPATopBarProps } from './types';
+declare const CapNavigationSPATopBar: React.FC<CapNavigationSPATopBarProps>;
+export default CapNavigationSPATopBar;
+export type { CapNavigationSPATopBarProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/CapNavigationSPA/CapNavigationSPATopBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/CapNavigationSPA/CapNavigationSPATopBar/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAE3D,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAwFjE,CAAC;AAEF,eAAe,sBAAsB,CAAC;AACtC,YAAY,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC"}

package/CapNavigationSPA/CapNavigationSPATopBar/index.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import CapIcon from "../../CapIcon/index.js";
+import styles from "./styles.module.scss.js";
+const CapNavigationSPATopBar = ({
+  orgName,
+  environmentLabel = "Production",
+  onOrgEnvClick,
+  onAiraClick,
+  onNotificationClick,
+  showNotificationBadge = false,
+  onHelpClick,
+  onUserClick,
+  userDisplay,
+  className
+}) => /* @__PURE__ */ jsx(
+  "header",
+  {
+    className: classNames(styles["cap-navigation-spa-topbar"], className),
+    "data-testid": "cap-navigation-spa-topbar",
+    children: /* @__PURE__ */ jsxs("div", { className: styles["cap-navigation-spa-topbar__inner"], children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: styles["cap-navigation-spa-topbar__org-button"],
+          onClick: onOrgEnvClick,
+          "aria-label": "Organization and environment",
+          "data-testid": "cap-navigation-spa-topbar-org",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-topbar__org-name"], children: orgName ?? "Organization" }),
+            /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-topbar__env-pill"], children: environmentLabel }),
+            /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-topbar__org-chevron"], children: /* @__PURE__ */ jsx(CapIcon, { type: "down", size: "xs" }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: styles["cap-navigation-spa-topbar__right"], children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: styles["cap-navigation-spa-topbar__aira-btn"],
+            onClick: onAiraClick,
+            "aria-label": "Aira",
+            "data-testid": "cap-navigation-spa-topbar-aira",
+            children: /* @__PURE__ */ jsx(CapIcon, { type: "aira-nav", size: "s" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: classNames(
+              styles["cap-navigation-spa-topbar__icon-btn"],
+              showNotificationBadge && styles["cap-navigation-spa-topbar__icon-btn--has-badge"]
+            ),
+            onClick: onNotificationClick,
+            "aria-label": "Notifications",
+            "data-testid": "cap-navigation-spa-topbar-notifications",
+            children: [
+              /* @__PURE__ */ jsx(CapIcon, { type: "bell", size: "s" }),
+              showNotificationBadge && /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-topbar__notification-badge"] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: styles["cap-navigation-spa-topbar__icon-btn"],
+            onClick: onHelpClick,
+            "aria-label": "Help",
+            "data-testid": "cap-navigation-spa-topbar-help",
+            children: /* @__PURE__ */ jsx(CapIcon, { type: "question-circle", size: "s" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-topbar__divider"] }),
+        userDisplay !== void 0 ? /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-topbar__user-wrap"], children: userDisplay }) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: styles["cap-navigation-spa-topbar__user-btn"],
+            onClick: onUserClick,
+            "aria-label": "User menu",
+            "data-testid": "cap-navigation-spa-topbar-user",
+            children: /* @__PURE__ */ jsx(CapIcon, { type: "user", size: "s" })
+          }
+        )
+      ] })
+    ] })
+  }
+);
+export {
+  CapNavigationSPATopBar as default
+};