@flipdish/ui-library 0.29.0 → 0.31.0

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.cjs

@@ -0,0 +1,76 @@
+'use strict';
+
+var React = require('react');
+var focus_utils = require('../../../../utilities/__internal__/focusUtils/focus.utils.cjs');
+
+/** The element before the panel when it can take focus, such as `AppShell`'s scroll area. */
+const focusableSiblingBefore = (panel) => {
+    const sibling = panel.previousElementSibling;
+    return sibling instanceof HTMLElement && sibling.tabIndex >= 0 ? sibling : null;
+};
+/**
+ * Hands focus into the panel when it opens and back to the control that opened it when it closes,
+ * and makes a leaving panel inert. Managed by hand, not with a focus scope: a scope would also
+ * reroute Tab at the panel's edges, as a popover does.
+ *
+ * @returns a capture-phase focus handler to spread onto the panel element
+ */
+const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount }) => {
+    const openerRef = React.useRef(null);
+    const previousIsPresent = React.useRef(null);
+    const previousIsDesktop = React.useRef(isDesktop);
+    // Read while rendering, before the content mounts: an `autoFocus` input takes focus during commit, ahead of any effect.
+    const [focusedBeforeMount] = React.useState(focus_utils.getFocusedElement);
+    React.useEffect(() => {
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const previous = previousIsPresent.current;
+        previousIsPresent.current = isPresent;
+        // Entering covers a fresh open and a reopen that interrupts the close animation.
+        const isEntering = isPresent && (previous === false || (previous === null && shouldFocusOnMount));
+        const isLeaving = !isPresent && previous === true;
+        const focused = focus_utils.getFocusedElement();
+        const hasFocusInside = focused !== null && panel.contains(focused);
+        // A panel reopened mid-close is still inert from leaving, and an inert element cannot take focus.
+        if (isPresent)
+            panel.inert = false;
+        if (isEntering) {
+            // On mount the content may already hold focus, so the opener is what was focused before it. A reopen mid-close finds focus still outside.
+            openerRef.current = previous === null ? focusedBeforeMount : focused;
+            // Content that focused itself (an `autoFocus` input) keeps focus; otherwise the region takes it.
+            // preventScroll: below `lg` the panel starts off-screen, and scrolling it into view would shift the layout.
+            if (!hasFocusInside)
+                panel.focus({ preventScroll: true });
+        }
+        // Hand focus back only if it is still in the panel, so a user who has moved on is left alone.
+        if (isLeaving && hasFocusInside) {
+            const opener = openerRef.current;
+            // The opener may have unmounted meanwhile, such as a header button that only renders at one breakpoint.
+            (opener?.isConnected ? opener : focusableSiblingBefore(panel))?.focus();
+        }
+        // A leaving panel must not be reachable while another opens; set last, since inert drops any focus inside it.
+        if (!isPresent)
+            panel.inert = true;
+    }, [panelRef, isPresent, shouldFocusOnMount, focusedBeforeMount]);
+    React.useEffect(() => {
+        const hasStartedCoveringPage = previousIsDesktop.current && !isDesktop;
+        previousIsDesktop.current = isDesktop;
+        const panel = panelRef.current;
+        const focused = focus_utils.getFocusedElement();
+        // The page beside the panel is about to go out of reach, so focus must not be left in it.
+        if (hasStartedCoveringPage && panel && focused && !panel.contains(focused) && panel.parentElement?.contains(focused)) {
+            panel.focus({ preventScroll: true });
+        }
+    }, [panelRef, isDesktop]);
+    // A panel that was open on load has no opener, so closing hands focus back to wherever it first came in from.
+    const onFocusCapture = (event) => {
+        const from = event.relatedTarget;
+        if (openerRef.current === null && from instanceof HTMLElement && !event.currentTarget.contains(from))
+            openerRef.current = from;
+    };
+    return { onFocusCapture };
+};
+
+exports.usePanelFocus = usePanelFocus;
+//# sourceMappingURL=usePanelFocus.cjs.map

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelFocus.cjs","sources":["../../../../../src/components/organisms/SidePanel/hooks/usePanelFocus.ts"],"sourcesContent":[null],"names":["useRef","useState","getFocusedElement","useEffect"],"mappings":"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"}

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.d.ts

@@ -0,0 +1,22 @@
+import type { FocusEvent, RefObject } from 'react';
+interface UsePanelFocusOptions {
+    panelRef: RefObject<HTMLElement | null>;
+    /** From `useIsPresent`: false once the panel is animating out. */
+    isPresent: boolean;
+    /** Whether the panel is docked beside the page rather than covering it. */
+    isDesktop: boolean;
+    /** False for a panel that is open on the first render, which must not pull focus away from the page. */
+    shouldFocusOnMount: boolean;
+}
+/**
+ * Hands focus into the panel when it opens and back to the control that opened it when it closes,
+ * and makes a leaving panel inert. Managed by hand, not with a focus scope: a scope would also
+ * reroute Tab at the panel's edges, as a popover does.
+ *
+ * @returns a capture-phase focus handler to spread onto the panel element
+ */
+export declare const usePanelFocus: ({ panelRef, isPresent, isDesktop, shouldFocusOnMount }: UsePanelFocusOptions) => {
+    onFocusCapture: (event: FocusEvent<HTMLElement>) => void;
+};
+export {};
+//# sourceMappingURL=usePanelFocus.d.ts.map

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelFocus.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/hooks/usePanelFocus.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWnD,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACxC,kEAAkE;IAClE,SAAS,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,SAAS,EAAE,OAAO,CAAC;IACnB,wGAAwG;IACxG,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,GAAI,wDAAwD,oBAAoB;4BAmDzE,UAAU,CAAC,WAAW,CAAC;CAMvD,CAAC"}

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.js

@@ -0,0 +1,74 @@
+import { useRef, useState, useEffect } from 'react';
+import { getFocusedElement } from '../../../../utilities/__internal__/focusUtils/focus.utils.js';
+
+/** The element before the panel when it can take focus, such as `AppShell`'s scroll area. */
+const focusableSiblingBefore = (panel) => {
+    const sibling = panel.previousElementSibling;
+    return sibling instanceof HTMLElement && sibling.tabIndex >= 0 ? sibling : null;
+};
+/**
+ * Hands focus into the panel when it opens and back to the control that opened it when it closes,
+ * and makes a leaving panel inert. Managed by hand, not with a focus scope: a scope would also
+ * reroute Tab at the panel's edges, as a popover does.
+ *
+ * @returns a capture-phase focus handler to spread onto the panel element
+ */
+const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount }) => {
+    const openerRef = useRef(null);
+    const previousIsPresent = useRef(null);
+    const previousIsDesktop = useRef(isDesktop);
+    // Read while rendering, before the content mounts: an `autoFocus` input takes focus during commit, ahead of any effect.
+    const [focusedBeforeMount] = useState(getFocusedElement);
+    useEffect(() => {
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const previous = previousIsPresent.current;
+        previousIsPresent.current = isPresent;
+        // Entering covers a fresh open and a reopen that interrupts the close animation.
+        const isEntering = isPresent && (previous === false || (previous === null && shouldFocusOnMount));
+        const isLeaving = !isPresent && previous === true;
+        const focused = getFocusedElement();
+        const hasFocusInside = focused !== null && panel.contains(focused);
+        // A panel reopened mid-close is still inert from leaving, and an inert element cannot take focus.
+        if (isPresent)
+            panel.inert = false;
+        if (isEntering) {
+            // On mount the content may already hold focus, so the opener is what was focused before it. A reopen mid-close finds focus still outside.
+            openerRef.current = previous === null ? focusedBeforeMount : focused;
+            // Content that focused itself (an `autoFocus` input) keeps focus; otherwise the region takes it.
+            // preventScroll: below `lg` the panel starts off-screen, and scrolling it into view would shift the layout.
+            if (!hasFocusInside)
+                panel.focus({ preventScroll: true });
+        }
+        // Hand focus back only if it is still in the panel, so a user who has moved on is left alone.
+        if (isLeaving && hasFocusInside) {
+            const opener = openerRef.current;
+            // The opener may have unmounted meanwhile, such as a header button that only renders at one breakpoint.
+            (opener?.isConnected ? opener : focusableSiblingBefore(panel))?.focus();
+        }
+        // A leaving panel must not be reachable while another opens; set last, since inert drops any focus inside it.
+        if (!isPresent)
+            panel.inert = true;
+    }, [panelRef, isPresent, shouldFocusOnMount, focusedBeforeMount]);
+    useEffect(() => {
+        const hasStartedCoveringPage = previousIsDesktop.current && !isDesktop;
+        previousIsDesktop.current = isDesktop;
+        const panel = panelRef.current;
+        const focused = getFocusedElement();
+        // The page beside the panel is about to go out of reach, so focus must not be left in it.
+        if (hasStartedCoveringPage && panel && focused && !panel.contains(focused) && panel.parentElement?.contains(focused)) {
+            panel.focus({ preventScroll: true });
+        }
+    }, [panelRef, isDesktop]);
+    // A panel that was open on load has no opener, so closing hands focus back to wherever it first came in from.
+    const onFocusCapture = (event) => {
+        const from = event.relatedTarget;
+        if (openerRef.current === null && from instanceof HTMLElement && !event.currentTarget.contains(from))
+            openerRef.current = from;
+    };
+    return { onFocusCapture };
+};
+
+export { usePanelFocus };
+//# sourceMappingURL=usePanelFocus.js.map

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelFocus.js","sources":["../../../../../src/components/organisms/SidePanel/hooks/usePanelFocus.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/components/organisms/SidePanel/index.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var useBreakpoints = require('@flipdish/ui-library/hooks/useBreakpoints');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+var react = require('motion/react');
+var React = require('react');
+var sidePanelContent = require('./components/side-panel-content.cjs');
+var sidePanelFooter = require('./components/side-panel-footer.cjs');
+var sidePanelHeader = require('./components/side-panel-header.cjs');
+var sidePanelRegion = require('./components/side-panel-region.cjs');
+var useOpenOnMount = require('./hooks/useOpenOnMount.cjs');
+var pageCoverContext = require('./providers/page-cover-context.cjs');
+var sidePanelContext = require('./providers/side-panel-context.cjs');
+
+/**
+ * A side panel the user can keep open while they work, such as an AI assistant or a notifications
+ * list. It is never a modal: no backdrop, no focus trap, no scroll lock. From `lg` it is docked
+ * beside the page, which narrows to make room. Below `lg` there is no room to push, so it covers
+ * the page area under the header, which stays in reach to close it. Place it in `AppShell`'s `panel`
+ * slot, or as the last child of your own content row, and render it always: `isOpen` decides
+ * whether it shows.
+ *
+ * @summary non-modal side panel that pushes the page on desktop and covers it under the header on mobile
+ */
+const SidePanelRoot = ({ isOpen, onOpenChange, 'aria-label': ariaLabel, children, className, 'data-testid': dataTestId, }) => {
+    const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'side-panel', rootName: 'side-panel' });
+    const isDesktop = useBreakpoints.useBreakpoints('lg');
+    const setPageCovered = React.useContext(pageCoverContext.PageCoverContext);
+    // Nothing renders until the viewport is known, so server and client markup agree.
+    const { canMeasureViewport, shouldFocusOnMount } = useOpenOnMount.useOpenOnMount(isOpen);
+    const coversPage = canMeasureViewport && isOpen && !isDesktop;
+    React.useEffect(() => {
+        if (!setPageCovered || !coversPage)
+            return;
+        setPageCovered(true);
+        return () => setPageCovered(false);
+    }, [setPageCovered, coversPage]);
+    if (!canMeasureViewport)
+        return null;
+    return (jsxRuntime.jsx(sidePanelContext.SidePanelContext.Provider, { value: { close: () => onOpenChange(false), label: ariaLabel }, children: jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: isOpen && (jsxRuntime.jsx(sidePanelRegion.SidePanelRegion, { "aria-label": ariaLabel, className: className, testId: rootTestId, isDesktop: isDesktop, shouldFocusOnMount: shouldFocusOnMount, children: children }, "side-panel")) }) }) }));
+};
+SidePanelRoot.displayName = 'SidePanel';
+const SidePanel = SidePanelRoot;
+SidePanel.Header = sidePanelHeader.SidePanelHeader;
+SidePanel.Content = sidePanelContent.SidePanelContent;
+SidePanel.Footer = sidePanelFooter.SidePanelFooter;
+
+exports.SIDE_PANEL_WIDTH = sidePanelRegion.SIDE_PANEL_WIDTH;
+exports.SidePanel = SidePanel;
+//# sourceMappingURL=index.cjs.map

package/dist/components/organisms/SidePanel/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","useBreakpoints","useContext","PageCoverContext","useOpenOnMount","useEffect","_jsx","SidePanelContext","TestIdProvider","AnimatePresence","SidePanelRegion","SidePanelHeader","SidePanelContent","SidePanelFooter"],"mappings":";;;;;;;;;;;;;;;AAwCA;;;;;;;;;AASG;AACH,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,aAAa,EAAE,UAAU,GACV,KAAe;AAC9B,IAAA,MAAM,UAAU,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAC3G,IAAA,MAAM,SAAS,GAAGC,6BAAc,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,cAAc,GAAGC,gBAAU,CAACC,iCAAgB,CAAC;;IAEnD,MAAM,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,GAAGC,6BAAc,CAAC,MAAM,CAAC;IAEzE,MAAM,UAAU,GAAG,kBAAkB,IAAI,MAAM,IAAI,CAAC,SAAS;IAC7DC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU;YAAE;QACpC,cAAc,CAAC,IAAI,CAAC;AACpB,QAAA,OAAO,MAAM,cAAc,CAAC,KAAK,CAAC;AACpC,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;AAEhC,IAAA,IAAI,CAAC,kBAAkB;AAAE,QAAA,OAAO,IAAI;AAEpC,IAAA,QACEC,cAAA,CAACC,iCAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,QAAA,EACtFD,cAAA,CAACE,0BAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BF,cAAA,CAACG,qBAAe,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAC5B,MAAM,KACLH,eAACI,+BAAe,EAAA,EAAA,YAAA,EAEF,SAAS,EACrB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EAAA,QAAA,EAErC,QAAQ,EAAA,EAPL,YAAY,CAQA,CACnB,EAAA,CACe,EAAA,CACH,EAAA,CACS;AAEhC,CAAC;AACD,aAAa,CAAC,WAAW,GAAG,WAAW;AAEvC,MAAM,SAAS,GAAG;AAMlB,SAAS,CAAC,MAAM,GAAGC,+BAAe;AAClC,SAAS,CAAC,OAAO,GAAGC,iCAAgB;AACpC,SAAS,CAAC,MAAM,GAAGC,+BAAe;;;;;"}

package/dist/components/organisms/SidePanel/index.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+import { SidePanelContent } from './components/side-panel-content';
+import { SidePanelFooter } from './components/side-panel-footer';
+import { SidePanelHeader } from './components/side-panel-header';
+export type { SidePanelContentProps } from './components/side-panel-content';
+export type { SidePanelFooterProps } from './components/side-panel-footer';
+export type { SidePanelHeaderProps } from './components/side-panel-header';
+export { SIDE_PANEL_WIDTH } from './components/side-panel-region';
+export interface SidePanelProps {
+    /**
+     * Whether the panel is open. Share it with the control that opens the panel, e.g. `assistant.isOpen`
+     * on `ApplicationHeader`. Opening moves focus into the panel, except when it is already open on the
+     * first render. So restore a saved open state as the initial state, as `useSidePanel` does, not in a
+     * mount effect, which would pull focus away from the page.
+     */
+    isOpen: boolean;
+    /** Called with `false` when the panel's close button is pressed. */
+    onOpenChange: (isOpen: boolean) => void;
+    /** Names the side region for assistive technology. */
+    'aria-label': string;
+    /** Compose `SidePanel.Header`, `SidePanel.Content` and `SidePanel.Footer`. */
+    children: ReactNode;
+    /** Extra classes merged onto the panel. */
+    className?: string;
+    /** Overrides the root `data-testid` (defaults to `fd-side-panel`). Descendants derive their ids from this prefix. */
+    'data-testid'?: string;
+}
+/**
+ * A side panel the user can keep open while they work, such as an AI assistant or a notifications
+ * list. It is never a modal: no backdrop, no focus trap, no scroll lock. From `lg` it is docked
+ * beside the page, which narrows to make room. Below `lg` there is no room to push, so it covers
+ * the page area under the header, which stays in reach to close it. Place it in `AppShell`'s `panel`
+ * slot, or as the last child of your own content row, and render it always: `isOpen` decides
+ * whether it shows.
+ *
+ * @summary non-modal side panel that pushes the page on desktop and covers it under the header on mobile
+ */
+declare const SidePanelRoot: {
+    ({ isOpen, onOpenChange, "aria-label": ariaLabel, children, className, "data-testid": dataTestId, }: SidePanelProps): ReactNode;
+    displayName: string;
+};
+declare const SidePanel: typeof SidePanelRoot & {
+    Header: typeof SidePanelHeader;
+    Content: typeof SidePanelContent;
+    Footer: typeof SidePanelFooter;
+};
+export { SidePanel };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/SidePanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAMjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAC7E,YAAY,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAElE,MAAM,WAAW,cAAc;IAC7B;;;;;OAKG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB,oEAAoE;IACpE,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,sDAAsD;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qHAAqH;IACrH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa;yGAOhB,cAAc,GAAG,SAAS;;CAoC5B,CAAC;AAGF,QAAA,MAAM,SAAS,EAAoB,OAAO,aAAa,GAAG;IACxD,MAAM,EAAE,OAAO,eAAe,CAAC;IAC/B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,MAAM,EAAE,OAAO,eAAe,CAAC;CAChC,CAAC;AAMF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/organisms/SidePanel/index.js

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+import { useBreakpoints } from '@flipdish/ui-library/hooks/useBreakpoints';
+import { useResolvedTestId, TestIdProvider } from '@flipdish/ui-library/utilities/testIdUtils';
+import { AnimatePresence } from 'motion/react';
+import { useContext, useEffect } from 'react';
+import { SidePanelContent } from './components/side-panel-content.js';
+import { SidePanelFooter } from './components/side-panel-footer.js';
+import { SidePanelHeader } from './components/side-panel-header.js';
+import { SidePanelRegion } from './components/side-panel-region.js';
+export { SIDE_PANEL_WIDTH } from './components/side-panel-region.js';
+import { useOpenOnMount } from './hooks/useOpenOnMount.js';
+import { PageCoverContext } from './providers/page-cover-context.js';
+import { SidePanelContext } from './providers/side-panel-context.js';
+
+/**
+ * A side panel the user can keep open while they work, such as an AI assistant or a notifications
+ * list. It is never a modal: no backdrop, no focus trap, no scroll lock. From `lg` it is docked
+ * beside the page, which narrows to make room. Below `lg` there is no room to push, so it covers
+ * the page area under the header, which stays in reach to close it. Place it in `AppShell`'s `panel`
+ * slot, or as the last child of your own content row, and render it always: `isOpen` decides
+ * whether it shows.
+ *
+ * @summary non-modal side panel that pushes the page on desktop and covers it under the header on mobile
+ */
+const SidePanelRoot = ({ isOpen, onOpenChange, 'aria-label': ariaLabel, children, className, 'data-testid': dataTestId, }) => {
+    const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'side-panel', rootName: 'side-panel' });
+    const isDesktop = useBreakpoints('lg');
+    const setPageCovered = useContext(PageCoverContext);
+    // Nothing renders until the viewport is known, so server and client markup agree.
+    const { canMeasureViewport, shouldFocusOnMount } = useOpenOnMount(isOpen);
+    const coversPage = canMeasureViewport && isOpen && !isDesktop;
+    useEffect(() => {
+        if (!setPageCovered || !coversPage)
+            return;
+        setPageCovered(true);
+        return () => setPageCovered(false);
+    }, [setPageCovered, coversPage]);
+    if (!canMeasureViewport)
+        return null;
+    return (jsx(SidePanelContext.Provider, { value: { close: () => onOpenChange(false), label: ariaLabel }, children: jsx(TestIdProvider, { value: rootTestId, children: jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(SidePanelRegion, { "aria-label": ariaLabel, className: className, testId: rootTestId, isDesktop: isDesktop, shouldFocusOnMount: shouldFocusOnMount, children: children }, "side-panel")) }) }) }));
+};
+SidePanelRoot.displayName = 'SidePanel';
+const SidePanel = SidePanelRoot;
+SidePanel.Header = SidePanelHeader;
+SidePanel.Content = SidePanelContent;
+SidePanel.Footer = SidePanelFooter;
+
+export { SidePanel };
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/SidePanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;AAwCA;;;;;;;;;AASG;AACH,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,aAAa,EAAE,UAAU,GACV,KAAe;AAC9B,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAC3G,IAAA,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,cAAc,GAAG,UAAU,CAAC,gBAAgB,CAAC;;IAEnD,MAAM,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,GAAG,cAAc,CAAC,MAAM,CAAC;IAEzE,MAAM,UAAU,GAAG,kBAAkB,IAAI,MAAM,IAAI,CAAC,SAAS;IAC7D,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU;YAAE;QACpC,cAAc,CAAC,IAAI,CAAC;AACpB,QAAA,OAAO,MAAM,cAAc,CAAC,KAAK,CAAC;AACpC,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;AAEhC,IAAA,IAAI,CAAC,kBAAkB;AAAE,QAAA,OAAO,IAAI;AAEpC,IAAA,QACEA,GAAA,CAAC,gBAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,QAAA,EACtFA,GAAA,CAAC,cAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BA,GAAA,CAAC,eAAe,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAC5B,MAAM,KACLA,IAAC,eAAe,EAAA,EAAA,YAAA,EAEF,SAAS,EACrB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EAAA,QAAA,EAErC,QAAQ,EAAA,EAPL,YAAY,CAQA,CACnB,EAAA,CACe,EAAA,CACH,EAAA,CACS;AAEhC,CAAC;AACD,aAAa,CAAC,WAAW,GAAG,WAAW;AAEvC,MAAM,SAAS,GAAG;AAMlB,SAAS,CAAC,MAAM,GAAG,eAAe;AAClC,SAAS,CAAC,OAAO,GAAG,gBAAgB;AACpC,SAAS,CAAC,MAAM,GAAG,eAAe;;;;"}

package/dist/components/organisms/SidePanel/providers/page-cover-context.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Lets the panel tell the layout around it that it is covering the page below `lg`, so the layout
+ * can take the page out of reach. `AppShell` provides it; without a provider the panel calls nothing.
+ */
+const PageCoverContext = React.createContext(undefined);
+
+exports.PageCoverContext = PageCoverContext;
+//# sourceMappingURL=page-cover-context.cjs.map

package/dist/components/organisms/SidePanel/providers/page-cover-context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-cover-context.cjs","sources":["../../../../../src/components/organisms/SidePanel/providers/page-cover-context.ts"],"sourcesContent":[null],"names":["createContext"],"mappings":";;;;AAIA;;;AAGG;MACU,gBAAgB,GAAGA,mBAAa,CAA6C,SAAS;;;;"}

package/dist/components/organisms/SidePanel/providers/page-cover-context.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Lets the panel tell the layout around it that it is covering the page below `lg`, so the layout
+ * can take the page out of reach. `AppShell` provides it; without a provider the panel calls nothing.
+ */
+export declare const PageCoverContext: import("react").Context<((isCovered: boolean) => void) | undefined>;
+//# sourceMappingURL=page-cover-context.d.ts.map

package/dist/components/organisms/SidePanel/providers/page-cover-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-cover-context.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/providers/page-cover-context.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,gBAAgB,uCAA8B,OAAO,KAAK,IAAI,cAAyB,CAAC"}

package/dist/components/organisms/SidePanel/providers/page-cover-context.js

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+/**
+ * Lets the panel tell the layout around it that it is covering the page below `lg`, so the layout
+ * can take the page out of reach. `AppShell` provides it; without a provider the panel calls nothing.
+ */
+const PageCoverContext = createContext(undefined);
+
+export { PageCoverContext };
+//# sourceMappingURL=page-cover-context.js.map

package/dist/components/organisms/SidePanel/providers/page-cover-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-cover-context.js","sources":["../../../../../src/components/organisms/SidePanel/providers/page-cover-context.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;;;AAGG;MACU,gBAAgB,GAAG,aAAa,CAA6C,SAAS;;;;"}

package/dist/components/organisms/SidePanel/providers/side-panel-context.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var React = require('react');
+
+/** Provided by the panel root, read by its header, so the sections never import `../index`. */
+const SidePanelContext = React.createContext(undefined);
+
+exports.SidePanelContext = SidePanelContext;
+//# sourceMappingURL=side-panel-context.cjs.map

package/dist/components/organisms/SidePanel/providers/side-panel-context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-context.cjs","sources":["../../../../../src/components/organisms/SidePanel/providers/side-panel-context.ts"],"sourcesContent":[null],"names":["createContext"],"mappings":";;;;AAUA;MACa,gBAAgB,GAAGA,mBAAa,CAAoC,SAAS;;;;"}

package/dist/components/organisms/SidePanel/providers/side-panel-context.d.ts

@@ -0,0 +1,8 @@
+export interface SidePanelContextValue {
+    close: () => void;
+    /** The panel's `aria-label`, so the close button can say which panel it closes. */
+    label: string;
+}
+/** Provided by the panel root, read by its header, so the sections never import `../index`. */
+export declare const SidePanelContext: import("react").Context<SidePanelContextValue | undefined>;
+//# sourceMappingURL=side-panel-context.d.ts.map

package/dist/components/organisms/SidePanel/providers/side-panel-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-context.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/providers/side-panel-context.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,mFAAmF;IACnF,KAAK,EAAE,MAAM,CAAC;CACf;AAED,+FAA+F;AAC/F,eAAO,MAAM,gBAAgB,4DAA8D,CAAC"}

package/dist/components/organisms/SidePanel/providers/side-panel-context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+/** Provided by the panel root, read by its header, so the sections never import `../index`. */
+const SidePanelContext = createContext(undefined);
+
+export { SidePanelContext };
+//# sourceMappingURL=side-panel-context.js.map

package/dist/components/organisms/SidePanel/providers/side-panel-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-context.js","sources":["../../../../../src/components/organisms/SidePanel/providers/side-panel-context.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAUA;MACa,gBAAgB,GAAG,aAAa,CAAoC,SAAS;;;;"}

package/dist/components/organisms/SidebarNavigation/components/mobile-header.cjs

@@ -13,7 +13,7 @@ var sidebarMenuButton = require('./sidebar-menu-button.cjs');
  * Consumers who supply their own header instead should set `showMobileHeader={false}`
  * and embed a {@link SidebarMenuButton}.
  */
-const MobileNavigationHeader = ({ isOpen, onOpenChange, controls, homeHref, onHomePress, logoTestId, 'data-testid': dataTestId, }) => (jsxRuntime.jsxs("header", { className: "flex h-14 items-center justify-between border-b border-secondary bg-secondary p-3 pl-4 lg:hidden", children: [jsxRuntime.jsx(logoLink.LogoLink, { href: homeHref, size: "sm", onClick: onHomePress, "data-testid": logoTestId }), jsxRuntime.jsx(sidebarMenuButton.SidebarMenuButton, { isOpen: isOpen, onPress: () => onOpenChange(!isOpen), controls: controls, "data-testid": dataTestId })] }));
+const MobileNavigationHeader = ({ isOpen, onOpenChange, controls, homeHref, onHomePress, logoTestId, 'data-testid': dataTestId, }) => (jsxRuntime.jsxs("header", { className: "flex h-14 items-center justify-between border-b border-secondary bg-primary p-3 pl-4 lg:hidden", children: [jsxRuntime.jsx(logoLink.LogoLink, { href: homeHref, size: "sm", onClick: onHomePress, "data-testid": logoTestId }), jsxRuntime.jsx(sidebarMenuButton.SidebarMenuButton, { isOpen: isOpen, onPress: () => onOpenChange(!isOpen), controls: controls, "data-testid": dataTestId })] }));
 /**
  * The controlled slide-over drawer that holds the mobile navigation. Its open
  * state is owned by `SidebarNavigation`, so it can be driven by either the

package/dist/components/organisms/SidebarNavigation/components/mobile-header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-header.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/mobile-header.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","LogoLink","SidebarMenuButton","AriaModalOverlay","cx","_Fragment","AriaButton","CloseIcon","AriaModal","AriaDialog"],"mappings":";;;;;;;;;AA0BA;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAU,EACV,aAAa,EAAE,UAAU,GACG,MAC5BA,eAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,kGAAkG,EAAA,QAAA,EAAA,CAClHC,cAAA,CAACC,iBAAQ,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,WAAW,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,EACrFD,eAACE,mCAAiB,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,CAAA,EAAA,CACjH;AAgBX;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,GAAG,iBAAiB,EAC3C,aAAa,EAAE,UAAU,GACG,MAC5BF,eAACG,gCAAgB,EAAA,EACf,aAAa,EAAA,IAAA,EACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KACnCC,KAAE,CACA,kFAAkF,EAClF,UAAU,IAAI,6CAA6C,EAC3D,SAAS,IAAI,+CAA+C,CAC7D,EAAA,QAAA,EAGF,CAAC,EAAE,KAAK,EAAE,MACTL,eAAA,CAAAM,mBAAA,EAAA,EAAA,QAAA,EAAA,CACEL,cAAA,CAACM,0BAAU,EAAA,EAAA,YAAA,EACE,uBAAuB,EAAA,aAAA,EACrB,UAAU,EACvB,OAAO,EAAE,MAAM,KAAK,CAAC,KAAK,EAAE,EAC5B,SAAS,EAAC,uNAAuN,EAAA,QAAA,EAEjON,cAAA,CAACO,SAAS,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA,CAAG,EAAA,CACrB,EAEbP,cAAA,CAACQ,yBAAS,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EACtER,cAAA,CAACS,0BAAU,IAAC,EAAE,EAAE,EAAE,EAAA,YAAA,EAAc,SAAS,EAAE,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAC7F,QAAQ,EAAA,CACE,EAAA,CACH,CAAA,EAAA,CACX,CACJ,EAAA,CACgB;;;;;"}
+{"version":3,"file":"mobile-header.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/mobile-header.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","LogoLink","SidebarMenuButton","AriaModalOverlay","cx","_Fragment","AriaButton","CloseIcon","AriaModal","AriaDialog"],"mappings":";;;;;;;;;AA0BA;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAU,EACV,aAAa,EAAE,UAAU,GACG,MAC5BA,eAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,gGAAgG,EAAA,QAAA,EAAA,CAChHC,cAAA,CAACC,iBAAQ,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,WAAW,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,EACrFD,eAACE,mCAAiB,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,CAAA,EAAA,CACjH;AAgBX;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,GAAG,iBAAiB,EAC3C,aAAa,EAAE,UAAU,GACG,MAC5BF,eAACG,gCAAgB,EAAA,EACf,aAAa,EAAA,IAAA,EACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KACnCC,KAAE,CACA,kFAAkF,EAClF,UAAU,IAAI,6CAA6C,EAC3D,SAAS,IAAI,+CAA+C,CAC7D,EAAA,QAAA,EAGF,CAAC,EAAE,KAAK,EAAE,MACTL,eAAA,CAAAM,mBAAA,EAAA,EAAA,QAAA,EAAA,CACEL,cAAA,CAACM,0BAAU,EAAA,EAAA,YAAA,EACE,uBAAuB,EAAA,aAAA,EACrB,UAAU,EACvB,OAAO,EAAE,MAAM,KAAK,CAAC,KAAK,EAAE,EAC5B,SAAS,EAAC,uNAAuN,EAAA,QAAA,EAEjON,cAAA,CAACO,SAAS,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA,CAAG,EAAA,CACrB,EAEbP,cAAA,CAACQ,yBAAS,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EACtER,cAAA,CAACS,0BAAU,IAAC,EAAE,EAAE,EAAE,EAAA,YAAA,EAAc,SAAS,EAAE,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAC7F,QAAQ,EAAA,CACE,EAAA,CACH,CAAA,EAAA,CACX,CACJ,EAAA,CACgB;;;;;"}

package/dist/components/organisms/SidebarNavigation/components/mobile-header.js

@@ -11,7 +11,7 @@ import { SidebarMenuButton } from './sidebar-menu-button.js';
  * Consumers who supply their own header instead should set `showMobileHeader={false}`
  * and embed a {@link SidebarMenuButton}.
  */
-const MobileNavigationHeader = ({ isOpen, onOpenChange, controls, homeHref, onHomePress, logoTestId, 'data-testid': dataTestId, }) => (jsxs("header", { className: "flex h-14 items-center justify-between border-b border-secondary bg-secondary p-3 pl-4 lg:hidden", children: [jsx(LogoLink, { href: homeHref, size: "sm", onClick: onHomePress, "data-testid": logoTestId }), jsx(SidebarMenuButton, { isOpen: isOpen, onPress: () => onOpenChange(!isOpen), controls: controls, "data-testid": dataTestId })] }));
+const MobileNavigationHeader = ({ isOpen, onOpenChange, controls, homeHref, onHomePress, logoTestId, 'data-testid': dataTestId, }) => (jsxs("header", { className: "flex h-14 items-center justify-between border-b border-secondary bg-primary p-3 pl-4 lg:hidden", children: [jsx(LogoLink, { href: homeHref, size: "sm", onClick: onHomePress, "data-testid": logoTestId }), jsx(SidebarMenuButton, { isOpen: isOpen, onPress: () => onOpenChange(!isOpen), controls: controls, "data-testid": dataTestId })] }));
 /**
  * The controlled slide-over drawer that holds the mobile navigation. Its open
  * state is owned by `SidebarNavigation`, so it can be driven by either the

package/dist/components/organisms/SidebarNavigation/components/mobile-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-header.js","sources":["../../../../../src/components/organisms/SidebarNavigation/components/mobile-header.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","AriaModalOverlay","_Fragment","AriaButton","CloseIcon","AriaModal","AriaDialog"],"mappings":";;;;;;;AA0BA;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAU,EACV,aAAa,EAAE,UAAU,GACG,MAC5BA,IAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,kGAAkG,EAAA,QAAA,EAAA,CAClHC,GAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,WAAW,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,EACrFA,IAAC,iBAAiB,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,CAAA,EAAA,CACjH;AAgBX;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,GAAG,iBAAiB,EAC3C,aAAa,EAAE,UAAU,GACG,MAC5BA,IAACC,YAAgB,EAAA,EACf,aAAa,EAAA,IAAA,EACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KACnC,EAAE,CACA,kFAAkF,EAClF,UAAU,IAAI,6CAA6C,EAC3D,SAAS,IAAI,+CAA+C,CAC7D,EAAA,QAAA,EAGF,CAAC,EAAE,KAAK,EAAE,MACTF,IAAA,CAAAG,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAACG,MAAU,EAAA,EAAA,YAAA,EACE,uBAAuB,EAAA,aAAA,EACrB,UAAU,EACvB,OAAO,EAAE,MAAM,KAAK,CAAC,KAAK,EAAE,EAC5B,SAAS,EAAC,uNAAuN,EAAA,QAAA,EAEjOH,GAAA,CAACI,CAAS,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA,CAAG,EAAA,CACrB,EAEbJ,GAAA,CAACK,KAAS,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EACtEL,GAAA,CAACM,MAAU,IAAC,EAAE,EAAE,EAAE,EAAA,YAAA,EAAc,SAAS,EAAE,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAC7F,QAAQ,EAAA,CACE,EAAA,CACH,CAAA,EAAA,CACX,CACJ,EAAA,CACgB;;;;"}
+{"version":3,"file":"mobile-header.js","sources":["../../../../../src/components/organisms/SidebarNavigation/components/mobile-header.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","AriaModalOverlay","_Fragment","AriaButton","CloseIcon","AriaModal","AriaDialog"],"mappings":";;;;;;;AA0BA;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAU,EACV,aAAa,EAAE,UAAU,GACG,MAC5BA,IAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,gGAAgG,EAAA,QAAA,EAAA,CAChHC,GAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,WAAW,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,EACrFA,IAAC,iBAAiB,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,CAAA,EAAA,CACjH;AAgBX;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,GAAG,iBAAiB,EAC3C,aAAa,EAAE,UAAU,GACG,MAC5BA,IAACC,YAAgB,EAAA,EACf,aAAa,EAAA,IAAA,EACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KACnC,EAAE,CACA,kFAAkF,EAClF,UAAU,IAAI,6CAA6C,EAC3D,SAAS,IAAI,+CAA+C,CAC7D,EAAA,QAAA,EAGF,CAAC,EAAE,KAAK,EAAE,MACTF,IAAA,CAAAG,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAACG,MAAU,EAAA,EAAA,YAAA,EACE,uBAAuB,EAAA,aAAA,EACrB,UAAU,EACvB,OAAO,EAAE,MAAM,KAAK,CAAC,KAAK,EAAE,EAC5B,SAAS,EAAC,uNAAuN,EAAA,QAAA,EAEjOH,GAAA,CAACI,CAAS,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA,CAAG,EAAA,CACrB,EAEbJ,GAAA,CAACK,KAAS,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EACtEL,GAAA,CAACM,MAAU,IAAC,EAAE,EAAE,EAAE,EAAA,YAAA,EAAc,SAAS,EAAE,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAC7F,QAAQ,EAAA,CACE,EAAA,CACH,CAAA,EAAA,CACX,CACJ,EAAA,CACgB;;;;"}

package/dist/components/organisms/SidebarNavigation/components/nav-account-card.cjs

@@ -9,6 +9,7 @@ var hrefUtils = require('@flipdish/ui-library/utilities/hrefUtils');
 var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
+var useHotkeyHint = require('../../../../hooks/__internal__/useHotkeyHint/useHotkeyHint.cjs');
 
 /** Derive a menu item's testid: explicit override wins, else `<prefix>--menu-item-<id|slug(label)>`. */
 const menuItemTestId = (prefix, item) => item['data-testid'] ?? testIdUtils.joinTestId(prefix, `menu-item-${item.id ?? testIdUtils.slugifyTestId(item.label)}`);
@@ -17,7 +18,8 @@ const POPOVER_ANIMATION = ({ isEntering, isExiting }) => cx.cx('origin-(--trigge
     'duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5');
 const MENU_ITEM_CLASSNAME = 'group/item flex w-full cursor-pointer px-1.5 focus:outline-hidden';
 const NavAccountCardMenuItem = ({ icon: Icon, label, shortcut, href, onClick, 'data-testid': dataTestId, }) => {
-    const content = (jsxRuntime.jsxs("div", { className: cx.cx('flex w-full items-center justify-between gap-3 rounded-md p-2 group-hover/item:bg-primary_hover', 'outline-focus-ring group-focus-visible/item:outline-2 group-focus-visible/item:outline-offset-2'), children: [jsxRuntime.jsxs("div", { className: "flex gap-2 text-sm font-semibold text-secondary group-hover/item:text-secondary_hover", children: [Icon && jsxRuntime.jsx(Icon, { className: "size-5 text-fg-quaternary group-hover/item:text-fg-quaternary_hover" }), " ", label] }), shortcut && (jsxRuntime.jsx("kbd", { className: "flex rounded px-1 py-px font-body text-xs font-medium text-tertiary ring-1 ring-secondary ring-inset", children: shortcut }))] }));
+    const shortcutLabel = useHotkeyHint.useHotkeyHint(shortcut);
+    const content = (jsxRuntime.jsxs("div", { className: cx.cx('flex w-full items-center justify-between gap-3 rounded-md p-2 group-hover/item:bg-primary_hover', 'outline-focus-ring group-focus-visible/item:outline-2 group-focus-visible/item:outline-offset-2'), children: [jsxRuntime.jsxs("div", { className: "flex gap-2 text-sm font-semibold text-secondary group-hover/item:text-secondary_hover", children: [Icon && jsxRuntime.jsx(Icon, { className: "size-5 text-fg-quaternary group-hover/item:text-fg-quaternary_hover" }), " ", label] }), shortcutLabel && (jsxRuntime.jsx("kbd", { className: "flex rounded px-1 py-px font-body text-xs font-medium text-tertiary ring-1 ring-secondary ring-inset", children: shortcutLabel }))] }));
     // A destination renders as a real anchor so it routes through `RouteProvider` and supports middle-click / new tab.
     if (href !== undefined) {
         const isExternal = hrefUtils.isExternalHref(href);

package/dist/components/organisms/SidebarNavigation/components/nav-account-card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"nav-account-card.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-account-card.tsx"],"sourcesContent":[null],"names":["joinTestId","slugifyTestId","cx","_jsxs","_jsx","isExternalHref","AriaLink","safeHref","rootTestId","AriaDialog","_Fragment","useRef","useBreakpoints","useResolvedTestId","AriaDialogTrigger","AriaButton","testIdProps","Avatar","AriaPopover","AvatarLabelGroup","ChevronSelectorVertical"],"mappings":";;;;;;;;;;;;AAmEA;AACA,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,IAA4B,KAClE,IAAI,CAAC,aAAa,CAAC,IAAIA,sBAAU,CAAC,MAAM,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,EAAE,IAAIC,yBAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA,CAAE,CAAC;AAEhG,MAAM,iBAAiB,GAAG,CAAC,EAAE,UAAU,EAAE,SAAS,EAA+C,KAC/FC,KAAE,CACA,uDAAuD,EACvD,UAAU;AACR,IAAA,+JAA+J,EACjK,SAAS;AACP,IAAA,6JAA6J,CAChK;AAEH,MAAM,mBAAmB,GAAG,mEAAmE;AAE/F,MAAM,sBAAsB,GAAG,CAAC,EAC9B,IAAI,EAAE,IAAI,EACV,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,aAAa,EAAE,UAAU,GACwE,KAAI;IACrG,MAAM,OAAO,IACXC,eAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAED,KAAE,CACX,iGAAiG,EACjG,iGAAiG,CAClG,EAAA,QAAA,EAAA,CAEDC,yBAAK,SAAS,EAAC,uFAAuF,EAAA,QAAA,EAAA,CACnG,IAAI,IAAIC,cAAA,CAAC,IAAI,IAAC,SAAS,EAAC,qEAAqE,EAAA,CAAG,EAAA,GAAA,EAAG,KAAK,CAAA,EAAA,CACrG,EACL,QAAQ,KACPA,wBAAK,SAAS,EAAC,sGAAsG,EAAA,QAAA,EAAE,QAAQ,GAAO,CACvI,CAAA,EAAA,CACG,CACP;;AAGD,IAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACtB,QAAA,MAAM,UAAU,GAAGC,wBAAc,CAAC,IAAI,CAAC;AACvC,QAAA,QACED,cAAA,CAACE,wBAAQ,IACP,IAAI,EAAEC,kBAAQ,CAAC,IAAI,CAAC,EACpB,MAAM,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,EACvC,GAAG,EAAC,qBAAqB,EAAA,aAAA,EACZ,UAAU,EACvB,SAAS,EAAE,mBAAmB,EAC9B,OAAO,EAAE,OAAO,YAEf,OAAO,EAAA,CACC;IAEf;AAEA,IAAA,QACEH,cAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAA,aAAA,EAAc,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,OAAO,EAAE,OAAO,YAC5F,OAAO,EAAA,CACD;AAEb,CAAC;MAEY,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,SAAS,GAAG,EAAE,EACd,eAAe,GAAG,EAAE,EACpB,YAAY,EACZ,GAAG,WAAW,EAOf,KAAI;IACH,MAAM,MAAM,GAAG,YAAY,IAAII,sBAAU,CAAC,kBAAkB,CAAC;;AAG7D,IAAA,MAAM,UAAU,GAAG,CAAC,IAA4B,EAAE,KAAiB,MACjEJ,cAAA,CAAC,sBAAsB,EAAA,EAErB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,MAAK;AACZ,YAAA,KAAK,EAAE;AACP,YAAA,IAAI,CAAC,OAAO,IAAI;AAClB,QAAA,CAAC,EAAA,aAAA,EACY,cAAc,CAAC,MAAM,EAAE,IAAI,CAAC,EAAA,EATpC,IAAI,CAAC,KAAK,CAUf,CACH;IAED,QACEA,eAACK,0BAAU,EAAA,EAAA,GAAK,WAAW,EAAE,SAAS,EAAEP,KAAE,CAAC,mFAAmF,EAAE,SAAS,CAAC,EAAA,QAAA,EACvI,CAAC,EAAE,KAAK,EAAE,MACTC,eAAA,CAAAO,mBAAA,EAAA,EAAA,QAAA,EAAA,CACG,SAAS,CAAC,MAAM,GAAG,CAAC,KACnBN,wBAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAC1DA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8BAA8B,YAAE,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EAAA,CAAO,GAClG,CACP,EAEA,eAAe,CAAC,MAAM,GAAG,CAAC,IAAIA,wBAAK,SAAS,EAAC,aAAa,EAAA,QAAA,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,GAAO,CAAA,EAAA,CACzH,CACJ,EAAA,CACU;AAEjB;AAEO,MAAM,cAAc,GAAG,CAAC,EAC7B,gBAAgB,EAChB,OAAO,EACP,aAAa,EACb,SAAS,EACT,eAAe,EACf,OAAO,GAAG,MAAM,EAChB,YAAY,EACZ,aAAa,EAAE,UAAU,GAqB1B,KAAI;AACH,IAAA,MAAM,UAAU,GAAGO,YAAM,CAAiB,IAAI,CAAC;AAC/C,IAAA,MAAM,SAAS,GAAGC,6BAAc,CAAC,IAAI,CAAC;;;AAItC,IAAA,MAAM,aAAa,GAAGC,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,kBAAkB,EAAE,CAAC;AACjH,IAAA,MAAM,YAAY,GAAG,CAAA,EAAG,OAAO,CAAC,IAAI,eAAe;AAEnD,IAAA,MAAM,IAAI,GAAGT,cAAA,CAAC,cAAc,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,GAAI;AAEpH,IAAA,IAAI,OAAO,KAAK,QAAQ,EAAE;QACxB,QACED,gBAACW,iCAAiB,EAAA,EAAC,YAAY,EAAE,YAAY,EAAA,QAAA,EAAA,CAC3CV,cAAA,CAACW,0BAAU,EAAA,EAAA,YAAA,EACG,YAAY,EAAA,GACpBC,uBAAW,CAAC,aAAa,CAAC,EAC9B,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAqB,KACrDd,KAAE,CAAC,wDAAwD,EAAE,CAAC,SAAS,IAAI,SAAS,KAAK,+CAA+C,CAAC,EAAA,QAAA,EAG3IE,cAAA,CAACa,aAAM,EAAA,EAAC,MAAM,EAAA,IAAA,EAAC,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,MAAM,EAAE,IAAI,EAAC,IAAI,EAAC,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,aAAa,EAAA,CAAI,EAAA,CACxG,EACbb,cAAA,CAACc,2BAAW,EAAA,EAAC,SAAS,EAAE,gBAAgB,IAAI,cAAc,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,SAAS,EAAE,iBAAiB,YAChH,IAAI,EAAA,CACO,CAAA,EAAA,CACI;IAExB;IAEA,QACEf,eAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,6FAA6F,EAAA,QAAA,EAAA,CAC3HC,cAAA,CAACe,uBAAgB,IACf,IAAI,EAAC,IAAI,EACT,GAAG,EAAE,OAAO,CAAC,MAAM,EACnB,KAAK,EAAE,OAAO,CAAC,IAAI,EACnB,QAAQ,EAAE,OAAO,CAAC,KAAK,EACvB,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,OAAO,EAAE,aAAa,EAAA,CACtB,EAEFhB,eAAA,CAACW,iCAAiB,EAAA,EAAC,YAAY,EAAE,YAAY,EAAA,QAAA,EAAA,CAC3CV,cAAA,CAACW,0BAAU,EAAA,EAAA,YAAA,EACG,YAAY,EAAA,GACpBC,uBAAW,CAAC,aAAa,CAAC,EAC9B,SAAS,EAAC,0UAA0U,EAAA,QAAA,EAEpVZ,cAAA,CAACgB,+BAAuB,EAAA,EAAC,SAAS,EAAC,iCAAiC,EAAA,CAAG,EAAA,CAC5D,EACbhB,cAAA,CAACc,2BAAW,EAAA,EACV,SAAS,EAAE,gBAAgB,KAAK,SAAS,GAAG,cAAc,GAAG,WAAW,CAAC,EACzE,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,iBAAiB,EAAA,QAAA,EAE3B,IAAI,EAAA,CACO,CAAA,EAAA,CACI,CAAA,EAAA,CAChB;AAEV;;;;;"}
+{"version":3,"file":"nav-account-card.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-account-card.tsx"],"sourcesContent":[null],"names":["joinTestId","slugifyTestId","cx","useHotkeyHint","_jsxs","_jsx","isExternalHref","AriaLink","safeHref","rootTestId","AriaDialog","_Fragment","useRef","useBreakpoints","useResolvedTestId","AriaDialogTrigger","AriaButton","testIdProps","Avatar","AriaPopover","AvatarLabelGroup","ChevronSelectorVertical"],"mappings":"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"}

package/dist/components/organisms/SidebarNavigation/components/nav-account-card.d.ts

@@ -19,7 +19,7 @@ export type NavAccountMenuItemType = {
     icon?: FC<{
         className?: string;
     }>;
-    /** Keyboard shortcut hint to display. */
+    /** Keyboard shortcut hint to display. A shortcut (`⌘S`, `mod+s`) is drawn for the user's platform; text that is not a shortcut is shown as written. */
     shortcut?: string;
     /**
      * Destination URL. When set the item renders as a real link (router integration, middle-click,

package/dist/components/organisms/SidebarNavigation/components/nav-account-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nav-account-card.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-account-card.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAqB,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAS1G,MAAM,MAAM,cAAc,GAAG;IAC3B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,MAAM,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6FAA6F;IAC7F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uGAAuG;IACvG,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,0CAA0C;IAC1C,OAAO,EAAE,cAAc,CAAC;IACxB,uEAAuE;IACvE,SAAS,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACrC,gDAAgD;IAChD,eAAe,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC3C,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAiEF,eAAO,MAAM,cAAc,GAAI,yEAM5B,eAAe,GAAG;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACrC,eAAe,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC3C,2FAA2F;IAC3F,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,gCAkCA,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,6HAS5B;IACD,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,8BAA8B;IAC9B,OAAO,EAAE,cAAc,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uEAAuE;IACvE,SAAS,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACrC,gDAAgD;IAChD,eAAe,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC3C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,gEAAgE;IAChE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,uEAAuE;IACvE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,gCA4DA,CAAC"}
+{"version":3,"file":"nav-account-card.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-account-card.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAqB,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAU1G,MAAM,MAAM,cAAc,GAAG;IAC3B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,MAAM,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC,uJAAuJ;IACvJ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6FAA6F;IAC7F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uGAAuG;IACvG,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,0CAA0C;IAC1C,OAAO,EAAE,cAAc,CAAC;IACxB,uEAAuE;IACvE,SAAS,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACrC,gDAAgD;IAChD,eAAe,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC3C,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAkEF,eAAO,MAAM,cAAc,GAAI,yEAM5B,eAAe,GAAG;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACrC,eAAe,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC3C,2FAA2F;IAC3F,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,gCAkCA,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,6HAS5B;IACD,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,8BAA8B;IAC9B,OAAO,EAAE,cAAc,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uEAAuE;IACvE,SAAS,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACrC,gDAAgD;IAChD,eAAe,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC3C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,gEAAgE;IAChE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,uEAAuE;IACvE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,gCA4DA,CAAC"}

package/dist/components/organisms/SidebarNavigation/components/nav-account-card.js

@@ -7,6 +7,7 @@ import { isExternalHref, safeHref } from '@flipdish/ui-library/utilities/hrefUti
 import { useResolvedTestId, testIdProps, rootTestId, joinTestId, slugifyTestId } from '@flipdish/ui-library/utilities/testIdUtils';
 import { useRef } from 'react';
 import { DialogTrigger, Button, Popover, Dialog, Link } from 'react-aria-components';
+import { useHotkeyHint } from '../../../../hooks/__internal__/useHotkeyHint/useHotkeyHint.js';
 
 /** Derive a menu item's testid: explicit override wins, else `<prefix>--menu-item-<id|slug(label)>`. */
 const menuItemTestId = (prefix, item) => item['data-testid'] ?? joinTestId(prefix, `menu-item-${item.id ?? slugifyTestId(item.label)}`);
@@ -15,7 +16,8 @@ const POPOVER_ANIMATION = ({ isEntering, isExiting }) => cx('origin-(--trigger-a
     'duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5');
 const MENU_ITEM_CLASSNAME = 'group/item flex w-full cursor-pointer px-1.5 focus:outline-hidden';
 const NavAccountCardMenuItem = ({ icon: Icon, label, shortcut, href, onClick, 'data-testid': dataTestId, }) => {
-    const content = (jsxs("div", { className: cx('flex w-full items-center justify-between gap-3 rounded-md p-2 group-hover/item:bg-primary_hover', 'outline-focus-ring group-focus-visible/item:outline-2 group-focus-visible/item:outline-offset-2'), children: [jsxs("div", { className: "flex gap-2 text-sm font-semibold text-secondary group-hover/item:text-secondary_hover", children: [Icon && jsx(Icon, { className: "size-5 text-fg-quaternary group-hover/item:text-fg-quaternary_hover" }), " ", label] }), shortcut && (jsx("kbd", { className: "flex rounded px-1 py-px font-body text-xs font-medium text-tertiary ring-1 ring-secondary ring-inset", children: shortcut }))] }));
+    const shortcutLabel = useHotkeyHint(shortcut);
+    const content = (jsxs("div", { className: cx('flex w-full items-center justify-between gap-3 rounded-md p-2 group-hover/item:bg-primary_hover', 'outline-focus-ring group-focus-visible/item:outline-2 group-focus-visible/item:outline-offset-2'), children: [jsxs("div", { className: "flex gap-2 text-sm font-semibold text-secondary group-hover/item:text-secondary_hover", children: [Icon && jsx(Icon, { className: "size-5 text-fg-quaternary group-hover/item:text-fg-quaternary_hover" }), " ", label] }), shortcutLabel && (jsx("kbd", { className: "flex rounded px-1 py-px font-body text-xs font-medium text-tertiary ring-1 ring-secondary ring-inset", children: shortcutLabel }))] }));
     // A destination renders as a real anchor so it routes through `RouteProvider` and supports middle-click / new tab.
     if (href !== undefined) {
         const isExternal = isExternalHref(href);