@helloimjolopez-pathway/pathway-components 0.7.0 → 0.7.2

package/components/badge/badge.jsx

@@ -15,17 +15,19 @@
  * STATIC, v1 to v2. Three v1 values did not match Figma and now do:
  *   Outline & Fill stroke   v1 Subtle, Figma Strong (Neutral Bold, accents plain).
  *   Neutral Naked text      v1 Neutral/Bold, Figma Neutral/Base.
- *   Stroke placement        v1 drew a 1px border INSIDE the box, which made every
- *                           Static badge 2px taller than the set (24 not 22).
- *                           Figma strokes outside; a box-shadow does the same.
+ *   Stroke placement        Inside the badge, which keeps its size in every style
+ *                           (Small 20, Medium and Large 22). An inset box-shadow
+ *                           draws it without changing the box.
  * Figma's default leading icon is the placeholder `error`; in code the icon is
  * passed explicitly, so existing call sites render exactly as before.
  *
  * DISMISSIBLE and INTERACTIVE, every size, with or without icons:
  *   outer frame    invisible, min width and height Accessibility/Touch Target/AA
  *                  (44). The pill keeps its size (20 / 22 / 22) inside it.
- *   Badge.Pill     fill, stroke (outside), CornerRadius/Large, focus ring.
- *   Container.Main Padding/XXXTight left and right, Padding/XXXXTight top and
+ *   Focus Ring     wraps Container.Main, padding FocusRing/Offset, ring outside
+ *                  when Focused.
+ *   Container.Main the badge: fill, stroke inside, CornerRadius/Large;
+ *                  Padding/XXXTight left and right, Padding/XXXXTight top and
  *                  bottom, NO gap.
  *   Container.Label Padding/XXXTight left and right; Field Label to value
  *                  Gap/XXTight.
@@ -98,7 +100,7 @@ const ACTION = (s) => {
 };
 
 export const BADGE_SIZE_SPEC = {
-  Small:  { fontSize: "font-size-xxs", lineHeight: "line-height-xxs-single", icon: 11, ico: 12, contentMax: 200 },
+  Small:  { fontSize: "font-size-xs",  lineHeight: "line-height-xs-single",  icon: 11, ico: 12, contentMax: 200, height: 20 },
   Medium: { fontSize: "font-size-xs",  lineHeight: "line-height-xs-single",  icon: 12, ico: 14, contentMax: 196 },
   Large:  { fontSize: "font-size-s",   lineHeight: "line-height-xs-single",  icon: 14, ico: 16, contentMax: 192 },
 };
@@ -138,12 +140,15 @@ const cut = { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSp
 const outer = { display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
   minWidth: T.touchW, minHeight: T.touchH, boxSizing: "border-box", padding: 0, margin: 0, border: 0,
   background: "transparent", font: "inherit", color: "inherit", textDecoration: "none", outline: "none" };
-const strokeShadow = (stroke) => (stroke ? `0 0 0 ${L.border} ${stroke}` : "none");
-/* Focus ring: FocusRing/Width of Stroke/FocusRing/Base, FocusRing/Offset outside the pill,
- * as an outline so the gap shows whatever surface the badge sits on. No white halo. */
+const strokeShadow = (stroke) => (stroke ? `inset 0 0 0 ${L.border} ${stroke}` : "none");
+/* Focus ring: FocusRing/Width of Stroke/FocusRing/Base, FocusRing/Offset outside the pill
+ * (its border is inside it), as an outline so the gap shows whatever surface the badge sits
+ * on. No white halo. */
 const focusRing = (focused) => (focused
   ? { outline: `${T.ringWidth} solid ${T.ring}`, outlineOffset: T.ringOffset }
   : { outline: "none" });
+/* Small has a fixed height (20) with its 12 text centred, so it needs no top and bottom padding. */
+const fixedHeight = (spec) => (spec.height ? { height: spec.height, paddingTop: 0, paddingBottom: 0 } : {});
 const transition = `background ${T.duration} ${T.easing}, color ${T.duration} ${T.easing}, box-shadow ${T.duration} ${T.easing}`;
 
 /**
@@ -212,9 +217,10 @@ export function Badge({
         style={{
           display: "inline-flex", alignItems: "center", boxSizing: "border-box", gap: L.gap,
           paddingTop: L.padTop, paddingRight: L.padRight, paddingBottom: L.padBottom, paddingLeft: L.padLeft,
+          ...fixedHeight(spec),
           borderRadius: L.radius,
           background: painted.fill ? C(fam.fill) : "transparent",
-          boxShadow: stroke ? `0 0 0 ${L.border} ${stroke}` : "none",
+          boxShadow: stroke ? `inset 0 0 0 ${L.border} ${stroke}` : "none",
           color: C(badgeStyle === "Naked" && fam.textNaked ? fam.textNaked : fam.text),
           ...font(spec), ...style,
         }}
@@ -230,7 +236,7 @@ export function Badge({
     display: "inline-flex", alignItems: "center", boxSizing: "border-box", gap: 0,
     paddingTop: L.padTop, paddingBottom: L.padBottom, paddingLeft: T.pill, paddingRight: T.pill,
     borderRadius: L.radius, maxWidth: showFieldLabel ? "none" : T.badgeMax, minWidth: 0,
-    transition, ...font(spec),
+    transition, ...font(spec), ...fixedHeight(spec),
   };
   const textSlot = { display: "inline-flex", minWidth: 0, paddingLeft: T.text, paddingRight: T.text };
   const ico = (name, fill = 0) => <Icon name={name} size={spec.ico} fill={fill} style={{ flexShrink: 0 }} />;
@@ -255,7 +261,7 @@ export function Badge({
           {leadingIcon && ico(leadingIcon, 1)}
           <span className="pw-badge__label" style={{ ...textSlot, gap: T.fieldGap }}>
             {showFieldLabel && fieldLabel && <span style={{ ...cut, maxWidth: T.fieldMax }}>{fieldLabel}</span>}
-            <span style={{ ...cut, maxWidth: spec.contentMax, fontWeight: Y("weight-semibold") }}>{label}</span>
+            <span style={{ ...cut, maxWidth: spec.contentMax }}>{label}</span>
           </span>
           <button type="button" className="pw-badge__remove" aria-label={`Remove ${name}`}
             aria-disabled={xOff || undefined}

package/components/bottom-sheet/bottom-sheet.jsx

@@ -64,10 +64,8 @@ export const T = {
   handle:  C("fill-static-neutral-strong"),
   title:   C("foreground-static-neutral-strong"),
   footerBorder: C("stroke-static-neutral-faint"),
-  /* Figma's effect style `BottomSheet` is a drop shadow of x -6, y 0, blur 36
-     on Cool Neutral/900 at 16%. It binds a PRIMITIVE colour and has no CSS
-     token. --elevation-sheet is the nearest token that exists, the same
-     choice Dropdown made for PopoverMenu's shadow. Kept by Jo, 2026-11-10. */
+  /* Elevation/Sheet, the shadow Figma's BottomSheet component now uses. The
+     old one-off BottomSheet effect style was retired on 2026-11-11. */
   shadow:  "var(--elevation-sheet)",
 };
 

package/components/button/button.jsx

@@ -147,7 +147,7 @@ export const T = {
   // the canvas but only 1.69:1 against the Primary fill, so a ring drawn on the
   // fill would fail WCAG 2.4.11. The offset puts it on the surface instead.
   focusOutline: `${CL("focusring-width")} solid ${SC("stroke-focusring-base")}`,
-  focusOffset: CL("focusring-offset"),
+  focusOffset: "0",
 };
 
 // Type is a scale now, not 111 composites, so each size composes its own five

package/components/checkbox/checkbox.jsx

@@ -19,6 +19,10 @@ import { useReducedMotion } from "../_shared/use-reduced-motion.jsx";
 // Note: some tokens in §5.3 of the spec are missing from the token file.
 // Fallbacks are used where noted and will be updated once Figma is re-synced.
 const V = {
+  // Keyboard focus ring
+  focusOutline: "var(--contextual-layout-units-focusring-width) solid var(--semantic-color-stroke-focusring-base)",
+  focusOffset:  "0",
+
   // Box fill, standard checked / indeterminate
   fillCheckedBase:     "var(--semantic-color-fill-action-primary-strong-rest)",
   fillCheckedHover:    "var(--semantic-color-fill-action-primary-strong-hover)",
@@ -198,6 +202,7 @@ export function Checkbox({
   const inputRef = useRef(null);
   const [hovered,  setHovered]  = useState(false);
   const [focused,  setFocused]  = useState(false);
+  const [focusVisible, setFocusVisible] = useState(false);
   const [pressed,  setPressed]  = useState(false);
 
   // The indeterminate state can only be set on the DOM element: not via HTML.
@@ -331,8 +336,8 @@ export function Checkbox({
           disabled={disabled}
           aria-describedby={describedBy}
           onChange={e => onChange && onChange(e.target.checked)}
-          onFocus={() => setFocused(true)}
-          onBlur={()  => setFocused(false)}
+          onFocus={e => { setFocused(true); setFocusVisible(e.target.matches(":focus-visible")); }}
+          onBlur={()  => { setFocused(false); setFocusVisible(false); }}
           style={{
             position:  "absolute",
             width:     boxSize,
@@ -355,9 +360,14 @@ export function Checkbox({
             width:           boxSize,
             height:          boxSize,
             borderRadius:    V.radius,
-            border:          `${BORDER_WIDTH}px solid ${borderColor}`,
+            // In Figma the Focused ring takes the border's place.
+            border:          `${BORDER_WIDTH}px solid ${focusVisible && !disabled ? "transparent" : borderColor}`,
             backgroundColor: boxFill,
             boxSizing:       "border-box",
+            // Keyboard focus ring, the same stroke ring every Pathway control uses:
+            // FocusRing/Width of Stroke/FocusRing/Base, FocusRing/Offset outside the box.
+            outline:         focusVisible && !disabled ? V.focusOutline : "none",
+            outlineOffset:   V.focusOffset,
             transition: noMotion ? "none" : "background-color var(--motion-duration-2) var(--motion-easing-decelerate), border-color var(--motion-duration-2) var(--motion-easing-decelerate)",
             flexShrink:      0,
           }}

package/components/icon/action-icon.jsx

@@ -46,6 +46,8 @@
 import React, { useState } from "react";
 import { Icon } from "./icon.jsx";
 import { useReducedMotion } from "../_shared/use-reduced-motion.jsx";
+import { FOCUS_RING_LAYER, injectFocusRing } from "../_shared/focus-ring.js";
+injectFocusRing();
 
 const C = (n) => `var(--semantic-color-${n})`;
 const U = (n) => `var(--semantic-layout-units-${n})`;
@@ -130,7 +132,7 @@ export function ActionIcon({
       onMouseDown={() => setPress(true)}
       onMouseUp={() => setPress(false)}
       onBlur={() => setPress(false)}
-      className={`pw-action-icon ${className}`}
+      className={`pw-action-icon ${FOCUS_RING_LAYER} ${className}`}
       data-size={size}
       style={{
         display: "inline-flex", alignItems: "center", justifyContent: "center",
@@ -147,7 +149,7 @@ export function ActionIcon({
           The fill belongs on this box, not on the button: painting the target
           gives a hover area visibly larger than the one in the design, which
           is the bug the Widget header shipped with once. */}
-      <span style={{
+      <span data-pw-ring-target="" style={{
         display: "inline-flex", alignItems: "center", justifyContent: "center",
         width: s.layer, height: s.layer, borderRadius: U("cornerradius-base"),
         background: press ? st.layerPress : hov ? st.layerHover : "transparent",

package/components/module-icon/module-icon.jsx

@@ -384,4 +384,29 @@ export function ModuleIcon({
   );
 }
 
+/**
+ * Module.Mark, Size=Large, Style=Emphasis (Figma): the module's mark in a 28
+ * tinted box beside its name. Used in the SideNav header of a module shell.
+ *   box    28, CornerRadius/Small, Fill/Static/Brand/Faint
+ *   glyph  ModuleIcon at 20, mono, Fill/Static/Brand/Strongest
+ *   label  16 / 600, Fill/Static/Brand/Strongest, gap Gap/XXTight
+ */
+export function ModuleMark({ module, label }) {
+  const ink = "var(--semantic-color-fill-static-brand-strongest)";
+  return (
+    <span style={{ display: "inline-flex", alignItems: "center", minWidth: 0,
+      gap: "var(--semantic-layout-units-gap-xxtight)", paddingRight: "var(--semantic-layout-units-padding-xxxtight)" }}>
+      <span aria-hidden="true" style={{ width: 28, height: 28, flexShrink: 0, display: "inline-flex",
+        alignItems: "center", justifyContent: "center",
+        borderRadius: "var(--semantic-layout-units-cornerradius-small)",
+        background: "var(--semantic-color-fill-static-brand-faint)", color: ink }}>
+        <ModuleIcon module={module} size={20} color="mono" />
+      </span>
+      <span style={{ fontFamily: "var(--semantic-type-family-brand)", fontWeight: "var(--semantic-type-weight-semibold)",
+        fontSize: "var(--semantic-type-font-size-r)", lineHeight: "var(--semantic-type-line-height-r-single)",
+        color: ink, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{label}</span>
+    </span>
+  );
+}
+
 export default ModuleIcon;

package/components/nav-shell/nav-shell.jsx

@@ -13,6 +13,7 @@
 import React, { useState, useEffect, useCallback } from "react";
 import TopNav, { DEFAULT_MODULES } from "../top-nav/top-nav.jsx";
 import { SideNav } from "../sidenav/sidenav.jsx";
+import { ModuleMark } from "../module-icon/module-icon.jsx";
 
 // ─── CONSTANTS ────────────────────────────────────────────────────────────────
 const TOPNAV_H = 60; // px — spec §9.3 rule 1
@@ -75,33 +76,9 @@ function useBreakpoint() {
  *   defaultCollapsed boolean — initial desktop collapse state (default false)
  *   children         ReactNode — page content (renders inside Shell.Main)
  */
-// The Accounting module's apps, as Figma's Accounting.AppSwitcher lists them,
-// each with its own side nav. The web component falls back to this when
-// `app-switcher` is on and no `appSwitcher` property has been set.
-//
-// Financials Home's nav is Figma's SideNav.Local.Accounting (40016737:141666),
-// icons included. Figma draws no other app's nav, so Accounts Payable,
-// Accounts Receivable and Bank Reconciliation use the item lists the widget
-// demo read from production (Bank Reconciliation takes Bank Account
-// Management's), on the same Figma icons.
-const accountingNav = (app, labels) => labels.map((l) => ({ id: `${app}-${l.toLowerCase().replace(/\s+/g, "-")}`, label: l, icon: ACCOUNTING_ICONS[l] }));
-const ACCOUNTING_ICONS = {
-  Dashboard: "space_dashboard", Enter: "input", Manage: "bookmark_manager", View: "visibility",
-  Reports: "insert_chart", Modify: "edit_square", Help: "help", Utilities: "tools_wrench",
-  "Security Setup": "security",
-};
-const APP_NAV_STANDARD = ["Dashboard", "Enter", "Manage", "View", "Reports", "Modify", "Utilities", "Help"];
-export const ACCOUNTING_APP_SWITCHER = {
-  label: "Financials Home",
-  icon: "apps",
-  home: { id: "financials-home", label: "Financials Home",
-    navItems: accountingNav("fh", ["Dashboard", "Enter", "Manage", "View", "Reports", "Modify", "Help", "Utilities", "Security Setup"]) },
-  apps: [
-    { id: "accounts-payable",    label: "Accounts Payable",    navItems: accountingNav("ap", APP_NAV_STANDARD) },
-    { id: "accounts-receivable", label: "Accounts Receivable", navItems: accountingNav("ar", APP_NAV_STANDARD) },
-    { id: "bank-reconciliation", label: "Bank Reconciliation", navItems: accountingNav("br", APP_NAV_STANDARD) },
-  ],
-};
+// The Accounting module's apps and their navs live with the Accounting side
+// nav, which also ships on its own as <pathway-accounting-sidenav>.
+export { ACCOUNTING_APP_SWITCHER } from "../sidenav/accounting-side-nav.jsx";
 
 export function NavShell({
   // TopNav
@@ -309,7 +286,10 @@ export function NavShell({
           hideCollapseButton={isTablet || isMobile}
           headerEnd={navHeaderEnd}
           footer={navFooter}
-          appSwitcher={appSwitcher ? { ...appSwitcher, activeId: appActive, onSelect: handleAppSelect } : null}
+          headerStart={appSwitcher && appSwitcher.moduleMark ? <ModuleMark {...appSwitcher.moduleMark} /> : null}
+          appSwitcher={appSwitcher ? { ...appSwitcher, activeId: appActive, onSelect: handleAppSelect,
+            // Mobile opens the menu as a BottomSheet (Figma 40016737:141824).
+            presentation: isMobile ? "sheet" : "popover" } : null}
         >
           {navChildren}
         </SideNav>

package/components/org-switcher/org-switcher.jsx

@@ -310,8 +310,8 @@ export function OrgSwitcher({
         onFocus={e => {
           // Only show focus ring on keyboard navigation, not on mouse click
           if (e.target.matches?.(':focus-visible')) {
-            e.currentTarget.style.outline = `2px solid ${T.iconHover}`;
-            e.currentTarget.style.outlineOffset = "2px";
+            e.currentTarget.style.outline = "var(--contextual-layout-units-focusring-width) solid var(--semantic-color-stroke-focusring-base)";
+            e.currentTarget.style.outlineOffset = "0";
           }
         }}
         onBlur={e => (e.currentTarget.style.outline = "none")}

package/components/radio/radio.jsx

@@ -171,8 +171,8 @@ const CSS = `
 .pw-radio[data-disabled] .pw-radio__dot{background:${T.dotDisabled}}
 .pw-radio[data-disabled] .pw-radio__label{color:${T.labelDisabled}}
 
-.pw-radio:is([data-focus-visible],[data-force=Focused]) .pw-radio__mark{background:${T.focusFill};
-  outline:${CL("focusring-width")} solid ${T.focusRing};outline-offset:${CL("focusring-offset")}}
+.pw-radio:is([data-focus-visible],[data-force=Focused]) .pw-radio__mark{background:${T.focusFill};border-color:transparent;
+  outline:${CL("focusring-width")} solid ${T.focusRing};outline-offset:0}
 
 .pw-radio-mark{display:inline-grid;place-items:center;width:${L.target};height:${L.targetH};flex:none}
 

package/components/scroll-to-enable/scroll-to-enable.jsx

@@ -80,7 +80,7 @@ export const T = {
   messageRadius:  SL("cornerradius-small"),
   sheetRadius:    RL("sheet-corner-radius-cornerradius"),
   focusWidth:     CL("focusring-width"),
-  focusOffset:    CL("focusring-offset"),
+  focusOffset:    "0",
   // Spacing
   sectionGap:     SL("gap-medium"),
   progressGap:    SL("gap-xtight"),

package/components/search/search.jsx

@@ -28,6 +28,9 @@
 
 import React, { useState, useEffect, useRef } from "react";
 import { Icon } from "../icon/icon.jsx";
+import { FOCUS_RING, injectFocusRing } from "../_shared/focus-ring.js";
+
+injectFocusRing();
 
 // ─── DESIGN TOKENS ─────────────────────────────────────────────────────────────
 // Every value is a semantic CSS variable. Fallbacks are the resolved values from
@@ -575,6 +578,7 @@ export function TopNavSearch({
           (Figma node 40006967:20917, Container.Icon h32 w32 rounded-full). */}
       <button
         ref={collapsedBtnRef}
+        className={FOCUS_RING}
         type="button"
         aria-label="Open search"
         aria-expanded={expanded}

package/components/sidenav/accounting-side-nav.jsx

@@ -0,0 +1,113 @@
+/**
+ * AccountingSideNav: the Accounting module's side nav as one component.
+ *
+ * Figma: SideNav.Local.Accounting (40016737:141666) with Accounting.AppSwitcher
+ * (40018575:65691) as the first entry of its menu, and the Financials
+ * Module.Mark in the header.
+ *
+ * It is the same SideNav that NavShell renders for Accounting, packaged so a
+ * host that owns its own top bar and page frame can use the Accounting nav on
+ * its own (as <pathway-accounting-sidenav>, see pathway-accounting-sidenav.js).
+ * NavShell keeps composing TopNav + SideNav itself; this does not replace it.
+ *
+ * Behaviour, as in NavShell:
+ *   - the switcher names the current application;
+ *   - choosing one swaps the nav to that application's items and lands on its
+ *     first item (its Dashboard);
+ *   - below 768 the switcher opens the Financial Applications BottomSheet,
+ *     from 768 up the popover beside the nav.
+ *
+ * Props:
+ *   activeAppId / defaultAppId   controlled / initial application id
+ *   onAppSelect(id)              an application was chosen
+ *   activeId / onNavigate(id)    the active nav item, as on SideNav
+ *   presentation                 "auto" (default), "popover" or "sheet"
+ *   appSwitcher                  override the module data (same shape as
+ *                                ACCOUNTING_APP_SWITCHER)
+ *   ...rest                      passed to SideNav (collapsed, onCollapseChange,
+ *                                hideCollapseButton, footer, headerEnd, ...)
+ */
+import React, { useEffect, useState } from "react";
+import { SideNav } from "./sidenav.jsx";
+import { ModuleMark } from "../module-icon/module-icon.jsx";
+
+// The Accounting module's applications, each with its own side nav. NavShell's
+// `app-switcher` and <pathway-accounting-sidenav> fall back to this when no
+// switcher data has been set.
+//
+// Financials Home's nav is Figma's SideNav.Local.Accounting (40016737:141666),
+// icons included, with Dashboard first. Figma draws no other application's
+// nav, so the others use the item lists read from production, on the same
+// Figma icons.
+const accountingNav = (app, labels) => labels.map((l) => ({ id: `${app}-${l.toLowerCase().replace(/\s+/g, "-")}`, label: l, icon: ACCOUNTING_ICONS[l] }));
+const ACCOUNTING_ICONS = {
+  Dashboard: "space_dashboard", Enter: "input", Manage: "bookmark_manager", View: "visibility",
+  Reports: "insert_chart", Modify: "edit_square", Help: "help", Utilities: "tools_wrench",
+  "Security Setup": "security",
+};
+const APP_NAV_STANDARD = ["Dashboard", "Enter", "Manage", "View", "Reports", "Modify", "Utilities", "Help"];
+export const ACCOUNTING_APP_SWITCHER = {
+  label: "Financials Home",
+  icon: "apps",
+  // The module's mark in the SideNav header (Figma Module.Mark, Accounting).
+  moduleMark: { module: "accounting", label: "Financials" },
+  // Title of the mobile BottomSheet (Figma "Financial Applications").
+  sheetTitle: "Financial Applications",
+  home: { id: "financials-home", label: "Financials Home",
+    navItems: accountingNav("fh", ["Dashboard", "Enter", "Manage", "View", "Reports", "Modify", "Help", "Utilities", "Security Setup"]) },
+  apps: [
+    { id: "accounts-payable",      label: "Accounts Payable",      navItems: accountingNav("ap", APP_NAV_STANDARD) },
+    { id: "accounts-receivable",   label: "Accounts Receivable",   navItems: accountingNav("ar", APP_NAV_STANDARD) },
+    { id: "general-ledger",        label: "General Ledger",        navItems: accountingNav("gl", APP_NAV_STANDARD) },
+    { id: "fixed-assets",          label: "Fixed Assets",          navItems: accountingNav("fa", ["Dashboard", "Manage", "Reports", "Modify", "Help"]) },
+    { id: "purchasing-management", label: "Purchasing Management", navItems: accountingNav("pm", ["Dashboard", "Enter", "Manage", "Reports", "Modify", "Help"]) },
+  ],
+};
+const MOBILE_MAX = 767; // below 768, as NavShell's breakpoint
+
+function useIsMobile() {
+  const get = () => typeof window !== "undefined" && window.innerWidth <= MOBILE_MAX;
+  const [m, setM] = useState(get);
+  useEffect(() => {
+    const on = () => setM(get());
+    window.addEventListener("resize", on);
+    return () => window.removeEventListener("resize", on);
+  }, []);
+  return m;
+}
+
+export function AccountingSideNav({
+  appSwitcher = ACCOUNTING_APP_SWITCHER,
+  activeAppId, defaultAppId, onAppSelect,
+  activeId, onNavigate,
+  presentation = "auto",
+  ...rest
+}) {
+  const apps = [appSwitcher.home, ...(appSwitcher.apps || [])].filter(Boolean);
+  const [ownApp, setOwnApp] = useState(defaultAppId ?? (appSwitcher.home && appSwitcher.home.id));
+  const appId = activeAppId ?? ownApp;
+  const current = apps.find((a) => a.id === appId) || apps[0];
+  const items = (current && current.navItems) || [];
+  const [ownActive, setOwnActive] = useState(items[0] && items[0].id);
+  const active = activeId ?? ownActive;
+  const isMobile = useIsMobile();
+  const mode = presentation === "auto" ? (isMobile ? "sheet" : "popover") : presentation;
+
+  const navigate = (id) => { setOwnActive(id); onNavigate && onNavigate(id); };
+  const selectApp = (id) => {
+    setOwnApp(id);
+    onAppSelect && onAppSelect(id);
+    const next = apps.find((a) => a.id === id);
+    const first = next && next.navItems && next.navItems[0];
+    if (first) navigate(first.id);
+  };
+
+  return (
+    <SideNav key={current && current.id} items={items} activeId={active} onNavigate={navigate}
+      headerStart={appSwitcher.moduleMark ? <ModuleMark {...appSwitcher.moduleMark} /> : null}
+      appSwitcher={{ ...appSwitcher, activeId: current && current.id, onSelect: selectApp, presentation: mode }}
+      {...rest} />
+  );
+}
+
+export default AccountingSideNav;