@flipdish/ui-library 0.32.0 → 0.33.0

package/dist/components/molecules/CodeSnippet/index.js

@@ -6,9 +6,12 @@ import { useClipboard } from '@flipdish/ui-library/hooks/useClipboard';
 import { cx } from '@flipdish/ui-library/utilities/cx';
 import { useResolvedTestId, TestIdProvider, joinTestId, useTestIdPrefix, slugifyTestId } from '@flipdish/ui-library/utilities/testIdUtils';
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
-import { createContext, useState, useRef, useContext, useLayoutEffect, useEffect, Fragment } from 'react';
+import { createContext, useContext, Fragment, useRef } from 'react';
 import { Tabs, TabList, Tab, TabPanel } from 'react-aria-components';
 import { codeToHast } from 'shiki/bundle/web';
+import { getActiveTabPanelText } from './codeSnippet.utils.js';
+import { useCodeSnippetCollapse } from './hooks/useCodeSnippetCollapse.js';
+import { useCodeSnippetHighlight } from './hooks/useCodeSnippetHighlight.js';
 
 const highlight = async (code, lang) => {
     const out = await codeToHast(code, {
@@ -54,31 +57,17 @@ const gradientStyles = {
     '--gradient-dark': 'rgba(12, 14, 18, 0) 0%, rgba(12, 14, 18, 0.02) 4.7%, rgba(12, 14, 18, 0.04) 8.9%, rgba(12, 14, 18, 0.07) 12.8%, rgba(12, 14, 18, 0.10) 16.56%, rgba(12, 14, 18, 0.14) 20.37%, rgba(12, 14, 18, 0.18) 24.4%, rgba(12, 14, 18, 0.23) 28.83%, rgba(12, 14, 18, 0.29) 33.84%, rgba(12, 14, 18, 0.35) 39.6%, rgba(12, 14, 18, 0.43) 46.3%, rgba(12, 14, 18, 0.52) 54.1%, rgba(12, 14, 18, 0.62) 63.2%, rgba(12, 14, 18, 0.73) 73.76%, rgba(12, 14, 18, 0.86) 85.97%, rgb(12, 14, 18) 100%',
 };
 const CodeSnippetComponent = ({ children, code, language, showLineNumbers = true, maxHeight, onExpand, className, modern = true, 'data-testid': dataTestId, ...otherProps }) => {
-    const [nodes, setNodes] = useState(children);
+    const nodes = useCodeSnippetHighlight({ code, language, fallback: children, highlightCode: highlight });
     const { copy, copied } = useClipboard();
-    const contentRef = useRef(null);
-    const [expanded, setExpanded] = useState(false);
-    const [exceedsMaxHeight, setExceedsMaxHeight] = useState(false);
+    const { contentRef, expanded, exceedsMaxHeight, toggleExpanded } = useCodeSnippetCollapse({ maxHeight, nodes, children });
     const isInsideTabs = useContext(TabsRefContext) !== null;
     const codeSnippetTestId = useResolvedTestId({ testId: dataTestId, segment: 'code-snippet', rootName: 'code-snippet' });
-    useLayoutEffect(() => {
-        if (!code)
-            return;
-        void highlight(code, language).then(setNodes);
-    }, [code, language]);
-    // Measure whether content exceeds maxHeight
-    // biome-ignore lint/correctness/useExhaustiveDependencies: We need to include maxHeight, nodes, and children in the dependency array to re-measure the content height
-    useEffect(() => {
-        if (!maxHeight || !contentRef.current)
-            return;
-        setExceedsMaxHeight(contentRef.current.scrollHeight > maxHeight - 10);
-    }, [maxHeight, nodes, children]);
     const codeText = code ?? '';
     const isCollapsible = maxHeight != null && exceedsMaxHeight;
     const isModern = isInsideTabs || modern;
     const codeBlock = (jsx(TestIdProvider, { value: codeSnippetTestId, children: jsxs("div", { ...otherProps, "data-testid": codeSnippetTestId, className: cx('group/code-snippet relative max-w-full overflow-clip rounded-xl bg-primary ring-1', isModern ? 'shadow-lg ring-secondary_alt' : 'ring-secondary', className), children: [jsx("div", { ref: contentRef, className: cx('[&>.shiki]:overflow-x-auto [&>code]:w-full', 'font-mono text-sm leading-[22px] whitespace-pre', showLineNumbers ? 'line-numbers' : 'p-4', !expanded && isCollapsible && 'overflow-y-hidden', isCollapsible && 'pb-12'), style: {
                         maxHeight: expanded || !maxHeight ? 'none' : maxHeight,
-                    }, children: nodes ?? code ?? jsx("p", { children: "Loading..." }) }), isCollapsible && (jsx("div", { style: gradientStyles, className: cx('inset-x-0 bottom-0 flex items-end justify-center bg-linear-(--gradient-light) pb-6 dark:bg-linear-(--gradient-dark)', expanded ? 'sticky h-17' : 'absolute h-47'), children: jsx(Button, { color: "secondary", size: "sm", onClick: () => setExpanded(!expanded), children: expanded ? 'Show less' : 'Show more' }) })), (codeText || onExpand) && (jsxs("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 transition duration-100 ease-linear group-hover/code-snippet:opacity-100 has-[:focus-visible]:opacity-100", children: [onExpand && (jsx(ButtonUtility, { size: "xs", color: "tertiary", icon: Expand06, tooltip: "Expand", onClick: onExpand, "data-testid": joinTestId(codeSnippetTestId, 'expand') })), codeText && (jsx(ButtonUtility, { size: "xs", color: "tertiary", icon: copied ? Check : Copy01, tooltip: "Copy", onClick: () => copy(codeText), "data-testid": joinTestId(codeSnippetTestId, 'copy') }))] }))] }) }));
+                    }, children: nodes ?? code ?? jsx("p", { children: "Loading..." }) }), isCollapsible && (jsx("div", { style: gradientStyles, className: cx('inset-x-0 bottom-0 flex items-end justify-center bg-linear-(--gradient-light) pb-6 dark:bg-linear-(--gradient-dark)', expanded ? 'sticky h-17' : 'absolute h-47'), children: jsx(Button, { color: "secondary", size: "sm", onClick: toggleExpanded, children: expanded ? 'Show less' : 'Show more' }) })), (codeText || onExpand) && (jsxs("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 transition duration-100 ease-linear group-hover/code-snippet:opacity-100 has-[:focus-visible]:opacity-100", children: [onExpand && (jsx(ButtonUtility, { size: "xs", color: "tertiary", icon: Expand06, tooltip: "Expand", onClick: onExpand, "data-testid": joinTestId(codeSnippetTestId, 'expand') })), codeText && (jsx(ButtonUtility, { size: "xs", color: "tertiary", icon: copied ? Check : Copy01, tooltip: "Copy", onClick: () => copy(codeText), "data-testid": joinTestId(codeSnippetTestId, 'copy') }))] }))] }) }));
     // Inside tabs: tabs component already provides the outer wrapper
     if (isInsideTabs)
         return codeBlock;
@@ -98,11 +87,7 @@ const CodeSnippetTabList = ({ children, className, ...otherProps }) => {
     const { copy, copied } = useClipboard();
     const tabsRef = useContext(TabsRefContext);
     const handleCopy = () => {
-        const root = tabsRef?.current;
-        if (!root)
-            return;
-        const activePanel = root.querySelector('[role="tabpanel"]:not([hidden])');
-        const text = activePanel?.textContent?.trim() ?? '';
+        const text = getActiveTabPanelText(tabsRef?.current ?? null);
         if (text)
             copy(text);
     };

package/dist/components/molecules/CodeSnippet/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/CodeSnippet/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/CodeSnippet/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}

package/dist/components/molecules/DetailList/detailList.types.d.ts

@@ -0,0 +1,15 @@
+import type { FC, ReactElement, ReactNode } from 'react';
+/** One row of a `DetailList`: an icon, the label and the value it describes. */
+export type DetailListItemType = {
+    /** Stable key and test-id segment; the slugified `label` is used when absent. */
+    id?: string;
+    /** Icon component, or a ready element such as a `Flag`, centred in the row's `FeaturedIcon`. */
+    icon: FC<{
+        className?: string;
+    }> | ReactElement;
+    /** What the value is, rendered as the term. */
+    label: string;
+    /** The value itself: text, or an element such as a `Badge`. */
+    value: ReactNode;
+};
+//# sourceMappingURL=detailList.types.d.ts.map

package/dist/components/molecules/DetailList/detailList.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detailList.types.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DetailList/detailList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD,gFAAgF;AAChF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,iFAAiF;IACjF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gGAAgG;IAChG,IAAI,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,YAAY,CAAC;IAChD,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC"}

package/dist/components/molecules/DetailList/index.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var FeaturedIcon = require('@flipdish/ui-library/components/atoms/FeaturedIcon');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+
+// Row padding equals the icon width plus the gap, so the term and value sit beside the centred icon.
+const sizes = {
+    sm: { list: 'gap-4', row: 'pl-11', icon: 'sm', text: 'text-sm' },
+    md: { list: 'gap-5', row: 'pl-14', icon: 'md', text: 'text-md' },
+};
+/**
+ * Read-only facts about one record, each row an icon, a label and its value, such as an
+ * organisation's type, contact email and country. Use it on summary panels and detail pages
+ * where the values are shown, not edited.
+ *
+ * @summary icon-led label and value rows for one record
+ */
+const DetailList = ({ items, size = 'sm', iconColor = 'brand', iconTheme = 'light', className, 'data-testid': dataTestId, }) => {
+    const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'detail-list', rootName: 'detail-list' });
+    const styles = sizes[size];
+    const renderItem = (item) => {
+        const key = item.id ?? testIdUtils.slugifyTestId(item.label);
+        // The icon lives inside the term and is positioned against the group, so the group holds only `dt` and `dd` as the `dl` content model requires.
+        return (jsxRuntime.jsxs("div", { "data-testid": testIdUtils.joinTestId(rootTestId, `item-${key}`), className: cx.cx('relative flex flex-col gap-1', styles.row), children: [jsxRuntime.jsxs("dt", { className: cx.cx('truncate text-primary', styles.text), children: [jsxRuntime.jsx("span", { "aria-hidden": "true", className: "contents", children: jsxRuntime.jsx(FeaturedIcon.FeaturedIcon, { icon: item.icon, size: styles.icon, color: iconColor, theme: iconTheme, className: "absolute top-1/2 left-0 -translate-y-1/2" }) }), item.label] }), jsxRuntime.jsx("dd", { className: cx.cx('truncate font-semibold text-primary', styles.text), children: item.value })] }, key));
+    };
+    return (jsxRuntime.jsx("dl", { "data-testid": rootTestId, className: cx.cx('flex flex-col', styles.list, className), children: items.map(renderItem) }));
+};
+
+exports.DetailList = DetailList;
+//# sourceMappingURL=index.cjs.map

package/dist/components/molecules/DetailList/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/DetailList/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","slugifyTestId","_jsxs","joinTestId","cx","_jsx","FeaturedIcon"],"mappings":";;;;;;;AASA;AACA,MAAM,KAAK,GAAG;AACZ,IAAA,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE;AAChE,IAAA,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE;CACxD;AAiBV;;;;;;AAMG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,OAAO,EACnB,SAAS,GAAG,OAAO,EACnB,SAAS,EACT,aAAa,EAAE,UAAU,GACT,KAAI;AACpB,IAAA,MAAM,UAAU,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;AAC7G,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC;AAE1B,IAAA,MAAM,UAAU,GAAG,CAAC,IAAwB,KAAI;AAC9C,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,IAAIC,yBAAa,CAAC,IAAI,CAAC,KAAK,CAAC;;QAGhD,QACEC,wCAA4BC,sBAAU,CAAC,UAAU,EAAE,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAAC,EAAE,SAAS,EAAEC,KAAE,CAAC,8BAA8B,EAAE,MAAM,CAAC,GAAG,CAAC,EAAA,QAAA,EAAA,CAC1HF,wBAAI,SAAS,EAAEE,KAAE,CAAC,uBAAuB,EAAE,MAAM,CAAC,IAAI,CAAC,EAAA,QAAA,EAAA,CAErDC,wCAAkB,MAAM,EAAC,SAAS,EAAC,UAAU,YAC3CA,cAAA,CAACC,yBAAY,EAAA,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,SAAS,EAChB,SAAS,EAAC,0CAA0C,EAAA,CACpD,EAAA,CACG,EACN,IAAI,CAAC,KAAK,CAAA,EAAA,CACR,EACLD,uBAAI,SAAS,EAAED,KAAE,CAAC,qCAAqC,EAAE,MAAM,CAAC,IAAI,CAAC,EAAA,QAAA,EAAG,IAAI,CAAC,KAAK,GAAM,CAAA,EAAA,EAdhF,GAAG,CAeP;AAEV,IAAA,CAAC;IAED,QACEC,cAAA,CAAA,IAAA,EAAA,EAAA,aAAA,EAAiB,UAAU,EAAE,SAAS,EAAED,KAAE,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EAAA,QAAA,EAChF,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,EAAA,CACnB;AAET;;"}

package/dist/components/molecules/DetailList/index.d.ts

@@ -0,0 +1,26 @@
+import { type FeaturedIconProps } from '@flipdish/ui-library/components/atoms/FeaturedIcon';
+import type { DetailListItemType } from './detailList.types';
+export type { DetailListItemType } from './detailList.types';
+export interface DetailListProps {
+    /** Rows to show, in order; each `id` (or slugified `label`) must be unique. */
+    items: DetailListItemType[];
+    /** Icon size and text scale of every row. */
+    size?: 'sm' | 'md';
+    /** Semantic colour of every row's `FeaturedIcon`. */
+    iconColor?: FeaturedIconProps['color'];
+    /** Container style of every row's `FeaturedIcon`. */
+    iconTheme?: FeaturedIconProps['theme'];
+    /** Extra classes merged onto the `<dl>`. */
+    className?: string;
+    /** Overrides the root `data-testid` (defaults to `fd-detail-list`). Rows derive `<root>--item-<id>` from it. */
+    'data-testid'?: string;
+}
+/**
+ * Read-only facts about one record, each row an icon, a label and its value, such as an
+ * organisation's type, contact email and country. Use it on summary panels and detail pages
+ * where the values are shown, not edited.
+ *
+ * @summary icon-led label and value rows for one record
+ */
+export declare const DetailList: ({ items, size, iconColor, iconTheme, className, "data-testid": dataTestId, }: DetailListProps) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/DetailList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DetailList/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAG1G,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAQ7D,MAAM,WAAW,eAAe;IAC9B,+EAA+E;IAC/E,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,6CAA6C;IAC7C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACvC,qDAAqD;IACrD,SAAS,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACvC,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gHAAgH;IAChH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GAAI,8EAOxB,eAAe,gCAiCjB,CAAC"}

package/dist/components/molecules/DetailList/index.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { FeaturedIcon } from '@flipdish/ui-library/components/atoms/FeaturedIcon';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useResolvedTestId, slugifyTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+
+// Row padding equals the icon width plus the gap, so the term and value sit beside the centred icon.
+const sizes = {
+    sm: { list: 'gap-4', row: 'pl-11', icon: 'sm', text: 'text-sm' },
+    md: { list: 'gap-5', row: 'pl-14', icon: 'md', text: 'text-md' },
+};
+/**
+ * Read-only facts about one record, each row an icon, a label and its value, such as an
+ * organisation's type, contact email and country. Use it on summary panels and detail pages
+ * where the values are shown, not edited.
+ *
+ * @summary icon-led label and value rows for one record
+ */
+const DetailList = ({ items, size = 'sm', iconColor = 'brand', iconTheme = 'light', className, 'data-testid': dataTestId, }) => {
+    const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'detail-list', rootName: 'detail-list' });
+    const styles = sizes[size];
+    const renderItem = (item) => {
+        const key = item.id ?? slugifyTestId(item.label);
+        // The icon lives inside the term and is positioned against the group, so the group holds only `dt` and `dd` as the `dl` content model requires.
+        return (jsxs("div", { "data-testid": joinTestId(rootTestId, `item-${key}`), className: cx('relative flex flex-col gap-1', styles.row), children: [jsxs("dt", { className: cx('truncate text-primary', styles.text), children: [jsx("span", { "aria-hidden": "true", className: "contents", children: jsx(FeaturedIcon, { icon: item.icon, size: styles.icon, color: iconColor, theme: iconTheme, className: "absolute top-1/2 left-0 -translate-y-1/2" }) }), item.label] }), jsx("dd", { className: cx('truncate font-semibold text-primary', styles.text), children: item.value })] }, key));
+    };
+    return (jsx("dl", { "data-testid": rootTestId, className: cx('flex flex-col', styles.list, className), children: items.map(renderItem) }));
+};
+
+export { DetailList };
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/DetailList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/DetailList/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AASA;AACA,MAAM,KAAK,GAAG;AACZ,IAAA,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE;AAChE,IAAA,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE;CACxD;AAiBV;;;;;;AAMG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,OAAO,EACnB,SAAS,GAAG,OAAO,EACnB,SAAS,EACT,aAAa,EAAE,UAAU,GACT,KAAI;AACpB,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;AAC7G,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC;AAE1B,IAAA,MAAM,UAAU,GAAG,CAAC,IAAwB,KAAI;AAC9C,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,IAAI,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;;QAGhD,QACEA,6BAA4B,UAAU,CAAC,UAAU,EAAE,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,MAAM,CAAC,GAAG,CAAC,EAAA,QAAA,EAAA,CAC1HA,aAAI,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,MAAM,CAAC,IAAI,CAAC,EAAA,QAAA,EAAA,CAErDC,6BAAkB,MAAM,EAAC,SAAS,EAAC,UAAU,YAC3CA,GAAA,CAAC,YAAY,EAAA,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,SAAS,EAChB,SAAS,EAAC,0CAA0C,EAAA,CACpD,EAAA,CACG,EACN,IAAI,CAAC,KAAK,CAAA,EAAA,CACR,EACLA,YAAI,SAAS,EAAE,EAAE,CAAC,qCAAqC,EAAE,MAAM,CAAC,IAAI,CAAC,EAAA,QAAA,EAAG,IAAI,CAAC,KAAK,GAAM,CAAA,EAAA,EAdhF,GAAG,CAeP;AAEV,IAAA,CAAC;IAED,QACEA,GAAA,CAAA,IAAA,EAAA,EAAA,aAAA,EAAiB,UAAU,EAAE,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EAAA,QAAA,EAChF,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,EAAA,CACnB;AAET;;"}

package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Avatar = require('@flipdish/ui-library/components/atoms/Avatar');
+var Checkbox = require('@flipdish/ui-library/components/atoms/Checkbox');
+var RadioButton = require('@flipdish/ui-library/components/atoms/RadioButton');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+
+/**
+ * Radio group where each option is a card with a square logo, title, ID-style subtitle and
+ * an optional footer for a link or action. Use to pick a brand, store or other entity by its
+ * logo; the footer sits outside the radio, so a link in it never nests inside the control.
+ *
+ * @summary pick one entity from logo-led cards
+ */
+const RadioGroupAvatarCard = ({ items, size = 'sm', indicator = 'radio', onOptionPress, className, 'data-testid': dataTestId, ...props }) => {
+    const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'radio-group', rootName: 'radio-group' });
+    const Indicator = indicator === 'checkbox' ? Checkbox.CheckboxBase : RadioButton.RadioButtonBase;
+    // Ids, not test ids: two groups with the same values on one page must not describe each other's options.
+    const groupId = React.useId();
+    return (jsxRuntime.jsx(reactAriaComponents.RadioGroup, { ...props, "data-testid": rootTestId, className: (state) => cx.cx('flex flex-col gap-3', typeof className === 'function' ? className(state) : className), children: ({ state, isDisabled: isGroupDisabled }) => items.map((item) => {
+            const isSelected = state.selectedValue === item.value;
+            const isDisabled = isGroupDisabled || Boolean(item.disabled);
+            const optionTestId = testIdUtils.joinTestId(rootTestId, `option-${item.value}`);
+            // Slugged: a value with spaces would split `aria-describedby` into several ids.
+            const subtitleId = item.subtitle ? `${groupId}-${testIdUtils.slugifyTestId(item.value)}-subtitle` : undefined;
+            // The radio is the card's `<label>`; a press in the footer is the footer's own and not an option press. Capture phase,
+            // because react-aria stops the radio's click from bubbling. Space on the focused radio fires a native click, so keyboard is covered.
+            const handleClickCapture = (event) => {
+                if (!isDisabled && event.target instanceof Element && event.target.closest('label'))
+                    onOptionPress?.(item.value);
+            };
+            return (
+            // The card, not the radio, carries the selected ring so the footer sits inside the same outline.
+            jsxRuntime.jsxs("div", { onClickCapture: handleClickCapture, className: cx.cx('flex flex-col rounded-xl bg-primary ring-inset', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'bg-disabled_subtle ring-disabled_subtle'), children: [jsxRuntime.jsx(reactAriaComponents.Radio, { isDisabled: item.disabled, value: item.value, "aria-label": item.title, "aria-describedby": subtitleId, "data-testid": optionTestId, className: ({ isDisabled, isFocusVisible }) => cx.cx('flex cursor-pointer items-center outline-focus-ring', size === 'md' ? 'gap-4 p-5' : 'gap-3 px-4 py-5', item.footer ? 'rounded-t-xl' : 'rounded-xl', isDisabled && 'cursor-not-allowed', isFocusVisible && 'outline-2 outline-offset-2'), children: ({ isDisabled, isSelected, isFocusVisible }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Avatar.Avatar, { size: size === 'md' ? 'xl' : 'lg', rounded: false, border: true, src: item.src, alt: "", initials: item.initials, placeholderIcon: item.placeholderIcon }), jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [jsxRuntime.jsx("span", { className: cx.cx('truncate font-semibold text-primary', size === 'md' ? 'text-lg' : 'text-md'), children: item.title }), item.subtitle && (jsxRuntime.jsx("span", { id: subtitleId, className: cx.cx('truncate text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: item.subtitle }))] }), jsxRuntime.jsx(Indicator, { size: size, isDisabled: isDisabled, isSelected: isSelected, isFocusVisible: isFocusVisible })] })) }), item.footer && jsxRuntime.jsx("div", { className: "flex justify-end border-t border-secondary px-4 py-3", children: item.footer })] }, item.value));
+        }) }));
+};
+
+exports.RadioGroupAvatarCard = RadioGroupAvatarCard;
+//# sourceMappingURL=RadioGroupAvatarCard.cjs.map

package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupAvatarCard.cjs","sources":["../../../../../src/components/molecules/RadioGroup/components/RadioGroupAvatarCard.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","CheckboxBase","RadioButtonBase","useId","_jsx","AriaRadioGroup","cx","joinTestId","slugifyTestId","_jsxs","AriaRadio","_Fragment","Avatar"],"mappings":"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"}

package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.d.ts

@@ -0,0 +1,24 @@
+import type { RadioGroupProps } from 'react-aria-components';
+import type { AvatarCardItemType } from '../radioGroup.types';
+interface RadioGroupAvatarCardProps extends RadioGroupProps {
+    /** Avatar, text and indicator size of every option. */
+    size?: 'sm' | 'md';
+    /** Entities to choose from; each `value` is the option value. */
+    items: AvatarCardItemType[];
+    /** The selection mark: a radio dot, or the check tile the other flavours use. */
+    indicator?: 'radio' | 'checkbox';
+    /** Called with the option's value on every press of it, selected or not; `onChange` stays silent for the one already selected. */
+    onOptionPress?: (value: string) => void;
+    /** Overrides the root `data-testid`. Options derive from it (e.g. `<root>--option-<value>`). */
+    'data-testid'?: string;
+}
+/**
+ * Radio group where each option is a card with a square logo, title, ID-style subtitle and
+ * an optional footer for a link or action. Use to pick a brand, store or other entity by its
+ * logo; the footer sits outside the radio, so a link in it never nests inside the control.
+ *
+ * @summary pick one entity from logo-led cards
+ */
+export declare const RadioGroupAvatarCard: ({ items, size, indicator, onOptionPress, className, "data-testid": dataTestId, ...props }: RadioGroupAvatarCardProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=RadioGroupAvatarCard.d.ts.map

package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupAvatarCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/RadioGroup/components/RadioGroupAvatarCard.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,UAAU,yBAA0B,SAAQ,eAAe;IACzD,uDAAuD;IACvD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,iEAAiE;IACjE,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACjC,kIAAkI;IAClI,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,2FAQlC,yBAAyB,gCAoF3B,CAAC"}

package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Avatar } from '@flipdish/ui-library/components/atoms/Avatar';
+import { CheckboxBase } from '@flipdish/ui-library/components/atoms/Checkbox';
+import { RadioButtonBase } from '@flipdish/ui-library/components/atoms/RadioButton';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useResolvedTestId, joinTestId, slugifyTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+import { useId } from 'react';
+import { RadioGroup, Radio } from 'react-aria-components';
+
+/**
+ * Radio group where each option is a card with a square logo, title, ID-style subtitle and
+ * an optional footer for a link or action. Use to pick a brand, store or other entity by its
+ * logo; the footer sits outside the radio, so a link in it never nests inside the control.
+ *
+ * @summary pick one entity from logo-led cards
+ */
+const RadioGroupAvatarCard = ({ items, size = 'sm', indicator = 'radio', onOptionPress, className, 'data-testid': dataTestId, ...props }) => {
+    const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'radio-group', rootName: 'radio-group' });
+    const Indicator = indicator === 'checkbox' ? CheckboxBase : RadioButtonBase;
+    // Ids, not test ids: two groups with the same values on one page must not describe each other's options.
+    const groupId = useId();
+    return (jsx(RadioGroup, { ...props, "data-testid": rootTestId, className: (state) => cx('flex flex-col gap-3', typeof className === 'function' ? className(state) : className), children: ({ state, isDisabled: isGroupDisabled }) => items.map((item) => {
+            const isSelected = state.selectedValue === item.value;
+            const isDisabled = isGroupDisabled || Boolean(item.disabled);
+            const optionTestId = joinTestId(rootTestId, `option-${item.value}`);
+            // Slugged: a value with spaces would split `aria-describedby` into several ids.
+            const subtitleId = item.subtitle ? `${groupId}-${slugifyTestId(item.value)}-subtitle` : undefined;
+            // The radio is the card's `<label>`; a press in the footer is the footer's own and not an option press. Capture phase,
+            // because react-aria stops the radio's click from bubbling. Space on the focused radio fires a native click, so keyboard is covered.
+            const handleClickCapture = (event) => {
+                if (!isDisabled && event.target instanceof Element && event.target.closest('label'))
+                    onOptionPress?.(item.value);
+            };
+            return (
+            // The card, not the radio, carries the selected ring so the footer sits inside the same outline.
+            jsxs("div", { onClickCapture: handleClickCapture, className: cx('flex flex-col rounded-xl bg-primary ring-inset', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'bg-disabled_subtle ring-disabled_subtle'), children: [jsx(Radio, { isDisabled: item.disabled, value: item.value, "aria-label": item.title, "aria-describedby": subtitleId, "data-testid": optionTestId, className: ({ isDisabled, isFocusVisible }) => cx('flex cursor-pointer items-center outline-focus-ring', size === 'md' ? 'gap-4 p-5' : 'gap-3 px-4 py-5', item.footer ? 'rounded-t-xl' : 'rounded-xl', isDisabled && 'cursor-not-allowed', isFocusVisible && 'outline-2 outline-offset-2'), children: ({ isDisabled, isSelected, isFocusVisible }) => (jsxs(Fragment, { children: [jsx(Avatar, { size: size === 'md' ? 'xl' : 'lg', rounded: false, border: true, src: item.src, alt: "", initials: item.initials, placeholderIcon: item.placeholderIcon }), jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [jsx("span", { className: cx('truncate font-semibold text-primary', size === 'md' ? 'text-lg' : 'text-md'), children: item.title }), item.subtitle && (jsx("span", { id: subtitleId, className: cx('truncate text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: item.subtitle }))] }), jsx(Indicator, { size: size, isDisabled: isDisabled, isSelected: isSelected, isFocusVisible: isFocusVisible })] })) }), item.footer && jsx("div", { className: "flex justify-end border-t border-secondary px-4 py-3", children: item.footer })] }, item.value));
+        }) }));
+};
+
+export { RadioGroupAvatarCard };
+//# sourceMappingURL=RadioGroupAvatarCard.js.map

package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupAvatarCard.js","sources":["../../../../../src/components/molecules/RadioGroup/components/RadioGroupAvatarCard.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadioGroup","_jsxs","AriaRadio","_Fragment"],"mappings":"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"}

package/dist/components/molecules/RadioGroup/index.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var RadioGroupAvatar = require('./components/RadioGroupAvatar.cjs');
+var RadioGroupAvatarCard = require('./components/RadioGroupAvatarCard.cjs');
 var RadioGroupCheckbox = require('./components/RadioGroupCheckbox.cjs');
 var RadioGroupIconCard = require('./components/RadioGroupIconCard.cjs');
 var RadioGroupIconSimple = require('./components/RadioGroupIconSimple.cjs');
@@ -10,6 +11,7 @@ var RadioGroupRadioButton = require('./components/RadioGroupRadioButton.cjs');
 
 
 exports.Avatar = RadioGroupAvatar.RadioGroupAvatar;
+exports.AvatarCard = RadioGroupAvatarCard.RadioGroupAvatarCard;
 exports.Checkbox = RadioGroupCheckbox.RadioGroupCheckbox;
 exports.IconCard = RadioGroupIconCard.RadioGroupIconCard;
 exports.IconSimple = RadioGroupIconSimple.RadioGroupIconSimple;

package/dist/components/molecules/RadioGroup/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/components/molecules/RadioGroup/index.d.ts

@@ -1,7 +1,9 @@
 export { RadioGroupAvatar as Avatar } from './components/RadioGroupAvatar';
+export { RadioGroupAvatarCard as AvatarCard } from './components/RadioGroupAvatarCard';
 export { RadioGroupCheckbox as Checkbox } from './components/RadioGroupCheckbox';
 export { RadioGroupIconCard as IconCard } from './components/RadioGroupIconCard';
 export { RadioGroupIconSimple as IconSimple } from './components/RadioGroupIconSimple';
 export { RadioGroupPaymentIcon as PaymentIcon } from './components/RadioGroupPaymentIcon';
 export { RadioGroupRadioButton as RadioButton } from './components/RadioGroupRadioButton';
+export type { AvatarCardItemType } from './radioGroup.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/RadioGroup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,kBAAkB,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACjF,OAAO,EAAE,kBAAkB,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACjF,OAAO,EAAE,oBAAoB,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,EAAE,qBAAqB,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAC1F,OAAO,EAAE,qBAAqB,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,oBAAoB,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,EAAE,kBAAkB,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACjF,OAAO,EAAE,kBAAkB,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACjF,OAAO,EAAE,oBAAoB,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,EAAE,qBAAqB,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAC1F,OAAO,EAAE,qBAAqB,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAC1F,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/molecules/RadioGroup/index.js

@@ -1,4 +1,5 @@
 export { RadioGroupAvatar as Avatar } from './components/RadioGroupAvatar.js';
+export { RadioGroupAvatarCard as AvatarCard } from './components/RadioGroupAvatarCard.js';
 export { RadioGroupCheckbox as Checkbox } from './components/RadioGroupCheckbox.js';
 export { RadioGroupIconCard as IconCard } from './components/RadioGroupIconCard.js';
 export { RadioGroupIconSimple as IconSimple } from './components/RadioGroupIconSimple.js';

package/dist/components/molecules/RadioGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/molecules/RadioGroup/radioGroup.types.d.ts

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 export type RadioGroupItemType = {
     value: string;
     title: string;
@@ -9,4 +9,20 @@ export type RadioGroupItemType = {
         className?: string;
     }>;
 };
+/** One option of `RadioGroup.AvatarCard`: an entity shown by its logo, with an optional footer outside the radio. */
+export type AvatarCardItemType = {
+    value: string;
+    title: string;
+    /** Secondary line under the title, such as the entity's ID. */
+    subtitle?: string;
+    /** Logo URL; `initials`, then `placeholderIcon`, stand in when it is unset or fails to load. */
+    src?: string;
+    initials?: string;
+    placeholderIcon?: FC<{
+        className?: string;
+    }>;
+    /** Rendered under the option, outside the radio, so it may hold a link or button. */
+    footer?: ReactNode;
+    disabled?: boolean;
+};
 //# sourceMappingURL=radioGroup.types.d.ts.map

package/dist/components/molecules/RadioGroup/radioGroup.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radioGroup.types.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/RadioGroup/radioGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAClC,CAAC"}
+{"version":3,"file":"radioGroup.types.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/RadioGroup/radioGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAClC,CAAC;AAEF,qHAAqH;AACrH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gGAAgG;IAChG,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7C,qFAAqF;IACrF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}

package/dist/components/organisms/ApplicationHeader/applicationHeader.types.d.ts

@@ -43,8 +43,9 @@ export interface ApplicationHeaderAssistant extends ApplicationHeaderElement {
     onPress: () => void;
 }
 /**
- * The header actions that can show an open state (`notifications.isOpen`, `assistant.isOpen`). Use it to
- * type the app's "which one is open" state: `useState<ApplicationHeaderPanel | null>(null)`.
+ * The header's own panels (`notifications.isOpen`, `assistant.isOpen`). Use it to type the app's "which one
+ * is open" state: `useState<ApplicationHeaderPanel | null>(null)`. When the avatar opens a panel too, extend
+ * it: `type PortalPanel = ApplicationHeaderPanel | 'organisation'`.
  */
 export type ApplicationHeaderPanel = 'notifications' | 'assistant';
 export interface ApplicationHeaderAvatar extends Omit<ApplicationHeaderElement, 'label'> {
@@ -56,6 +57,11 @@ export interface ApplicationHeaderAvatar extends Omit<ApplicationHeaderElement,
     initials?: string;
     /** Accessible name for the button. Defaults to `name`. */
     label?: string;
+    /**
+     * Whether the panel or menu this button opens is open. Highlights the button and sets `aria-expanded`.
+     * Leave `undefined` when the button navigates instead of opening something.
+     */
+    isOpen?: boolean;
     /** Called when the avatar button is pressed. */
     onPress: () => void;
 }

package/dist/components/organisms/ApplicationHeader/applicationHeader.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"applicationHeader.types.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/ApplicationHeader/applicationHeader.types.ts"],"names":[],"mappings":"AAAA,UAAU,wBAAwB;IAChC,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,uBAAwB,SAAQ,wBAAwB;IACvE,qGAAqG;IACrG,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,8BAA+B,SAAQ,wBAAwB;IAC9E,sFAAsF;IACtF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,0BAA2B,SAAQ,wBAAwB;IAC1E;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,eAAe,GAAG,WAAW,CAAC;AAEnE,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,wBAAwB,EAAE,OAAO,CAAC;IACtF,8GAA8G;IAC9G,IAAI,EAAE,MAAM,CAAC;IACb,wFAAwF;IACxF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,qBAAsB,SAAQ,wBAAwB;IACrE,kEAAkE;IAClE,MAAM,EAAE,OAAO,CAAC;IAChB,kEAAkE;IAClE,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"applicationHeader.types.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/ApplicationHeader/applicationHeader.types.ts"],"names":[],"mappings":"AAAA,UAAU,wBAAwB;IAChC,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,uBAAwB,SAAQ,wBAAwB;IACvE,qGAAqG;IACrG,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,8BAA+B,SAAQ,wBAAwB;IAC9E,sFAAsF;IACtF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,0BAA2B,SAAQ,wBAAwB;IAC1E;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,eAAe,GAAG,WAAW,CAAC;AAEnE,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,wBAAwB,EAAE,OAAO,CAAC;IACtF,8GAA8G;IAC9G,IAAI,EAAE,MAAM,CAAC;IACb,wFAAwF;IACxF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gDAAgD;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,qBAAsB,SAAQ,wBAAwB;IACrE,kEAAkE;IAClE,MAAM,EAAE,OAAO,CAAC;IAChB,kEAAkE;IAClE,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/dist/components/organisms/ApplicationHeader/components/AvatarButton.cjs

@@ -3,10 +3,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 var Avatar = require('@flipdish/ui-library/components/atoms/Avatar');
 var Tooltip = require('@flipdish/ui-library/components/atoms/Tooltip');
+var cx = require('@flipdish/ui-library/utilities/cx');
 var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 var reactAriaComponents = require('react-aria-components');
 
-const AvatarButton = ({ name, src, initials, label, onPress, 'data-testid': dataTestId }) => (jsxRuntime.jsx(Tooltip.Tooltip, { title: label, placement: "bottom", "data-testid": testIdUtils.joinTestId(dataTestId, 'tooltip'), children: jsxRuntime.jsx(reactAriaComponents.Button, { "aria-label": label, "data-testid": dataTestId, onPress: onPress, className: "group flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-md outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2", children: jsxRuntime.jsx(Avatar.Avatar, { size: "sm", rounded: false, src: src, initials: initials ?? Avatar.getInitials(name).toUpperCase(), 
+const AvatarButton = ({ name, src, initials, label, isOpen, onPress, 'data-testid': dataTestId }) => (jsxRuntime.jsx(Tooltip.Tooltip, { title: label, placement: "bottom", "data-testid": testIdUtils.joinTestId(dataTestId, 'tooltip'), children: jsxRuntime.jsx(reactAriaComponents.Button, { "aria-label": label, "aria-expanded": isOpen, "data-testid": dataTestId, onPress: onPress, className: cx.cx('group flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-md outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2', 
+        // Only a button that opens something shows the hover and open treatment the other actions have.
+        isOpen !== undefined && 'transition duration-100 ease-linear hover:bg-primary_hover', isOpen && 'bg-brand-primary hover:bg-brand-primary'), children: jsxRuntime.jsx(Avatar.Avatar, { size: "sm", rounded: false, src: src, initials: initials ?? Avatar.getInitials(name).toUpperCase(), 
             // The design's square avatar uses a 4px radius, tighter than Avatar's unrounded default.
             className: "rounded-sm", contentClassName: "rounded-sm", "data-testid": testIdUtils.joinTestId(dataTestId, 'image') }) }) }));
 

package/dist/components/organisms/ApplicationHeader/components/AvatarButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarButton.cjs","sources":["../../../../../src/components/organisms/ApplicationHeader/components/AvatarButton.tsx"],"sourcesContent":[null],"names":["_jsx","Tooltip","joinTestId","AriaButton","Avatar","getInitials"],"mappings":";;;;;;;;AAgBO,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAqB,MAChHA,eAACC,eAAO,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,QAAQ,EAAA,aAAA,EAAcC,sBAAU,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,QAAA,EACtFF,cAAA,CAACG,0BAAU,EAAA,EAAA,YAAA,EACG,KAAK,EAAA,aAAA,EACJ,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,4JAA4J,YAEtKH,cAAA,CAACI,aAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,KAAK,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,IAAIC,kBAAW,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE;;AAErD,YAAA,SAAS,EAAC,YAAY,EACtB,gBAAgB,EAAC,YAAY,EAAA,aAAA,EAChBH,sBAAU,CAAC,UAAU,EAAE,OAAO,CAAC,GAC5C,EAAA,CACS,EAAA,CACL;;"}
+{"version":3,"file":"AvatarButton.cjs","sources":["../../../../../src/components/organisms/ApplicationHeader/components/AvatarButton.tsx"],"sourcesContent":[null],"names":["_jsx","Tooltip","joinTestId","AriaButton","cx","Avatar","getInitials"],"mappings":";;;;;;;;;AAkBO,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAqB,MACxHA,cAAA,CAACC,eAAO,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,QAAQ,EAAA,aAAA,EAAcC,sBAAU,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,QAAA,EACtFF,cAAA,CAACG,0BAAU,EAAA,EAAA,YAAA,EACG,KAAK,EAAA,eAAA,EACF,MAAM,EAAA,aAAA,EACR,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAEC,KAAE,CACX,4JAA4J;;AAE5J,QAAA,MAAM,KAAK,SAAS,IAAI,4DAA4D,EACpF,MAAM,IAAI,yCAAyC,CACpD,YAEDJ,cAAA,CAACK,aAAM,EAAA,EACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,KAAK,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,IAAIC,kBAAW,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE;;AAErD,YAAA,SAAS,EAAC,YAAY,EACtB,gBAAgB,EAAC,YAAY,EAAA,aAAA,EAChBJ,sBAAU,CAAC,UAAU,EAAE,OAAO,CAAC,GAC5C,EAAA,CACS,EAAA,CACL;;"}

package/dist/components/organisms/ApplicationHeader/components/AvatarButton.d.ts

@@ -3,9 +3,10 @@ interface AvatarButtonProps {
     src?: string;
     initials?: string;
     label: string;
+    isOpen?: boolean;
     onPress: () => void;
     'data-testid': string;
 }
-export declare const AvatarButton: ({ name, src, initials, label, onPress, "data-testid": dataTestId }: AvatarButtonProps) => import("react").JSX.Element;
+export declare const AvatarButton: ({ name, src, initials, label, isOpen, onPress, "data-testid": dataTestId }: AvatarButtonProps) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=AvatarButton.d.ts.map

package/dist/components/organisms/ApplicationHeader/components/AvatarButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/ApplicationHeader/components/AvatarButton.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,GAAI,oEAAoE,iBAAiB,gCAoBjH,CAAC"}
+{"version":3,"file":"AvatarButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/ApplicationHeader/components/AvatarButton.tsx"],"names":[],"mappings":"AAQA,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,GAAI,4EAA4E,iBAAiB,gCA0BzH,CAAC"}

package/dist/components/organisms/ApplicationHeader/components/AvatarButton.js

@@ -1,10 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { Avatar, getInitials } from '@flipdish/ui-library/components/atoms/Avatar';
 import { Tooltip } from '@flipdish/ui-library/components/atoms/Tooltip';
+import { cx } from '@flipdish/ui-library/utilities/cx';
 import { joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
 import { Button } from 'react-aria-components';
 
-const AvatarButton = ({ name, src, initials, label, onPress, 'data-testid': dataTestId }) => (jsx(Tooltip, { title: label, placement: "bottom", "data-testid": joinTestId(dataTestId, 'tooltip'), children: jsx(Button, { "aria-label": label, "data-testid": dataTestId, onPress: onPress, className: "group flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-md outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2", children: jsx(Avatar, { size: "sm", rounded: false, src: src, initials: initials ?? getInitials(name).toUpperCase(), 
+const AvatarButton = ({ name, src, initials, label, isOpen, onPress, 'data-testid': dataTestId }) => (jsx(Tooltip, { title: label, placement: "bottom", "data-testid": joinTestId(dataTestId, 'tooltip'), children: jsx(Button, { "aria-label": label, "aria-expanded": isOpen, "data-testid": dataTestId, onPress: onPress, className: cx('group flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-md outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2', 
+        // Only a button that opens something shows the hover and open treatment the other actions have.
+        isOpen !== undefined && 'transition duration-100 ease-linear hover:bg-primary_hover', isOpen && 'bg-brand-primary hover:bg-brand-primary'), children: jsx(Avatar, { size: "sm", rounded: false, src: src, initials: initials ?? getInitials(name).toUpperCase(), 
             // The design's square avatar uses a 4px radius, tighter than Avatar's unrounded default.
             className: "rounded-sm", contentClassName: "rounded-sm", "data-testid": joinTestId(dataTestId, 'image') }) }) }));
 

package/dist/components/organisms/ApplicationHeader/components/AvatarButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarButton.js","sources":["../../../../../src/components/organisms/ApplicationHeader/components/AvatarButton.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton"],"mappings":";;;;;;AAgBO,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAqB,MAChHA,IAAC,OAAO,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,QAAQ,EAAA,aAAA,EAAc,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,QAAA,EACtFA,GAAA,CAACC,MAAU,EAAA,EAAA,YAAA,EACG,KAAK,EAAA,aAAA,EACJ,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,4JAA4J,YAEtKD,GAAA,CAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,KAAK,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,IAAI,WAAW,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE;;AAErD,YAAA,SAAS,EAAC,YAAY,EACtB,gBAAgB,EAAC,YAAY,EAAA,aAAA,EAChB,UAAU,CAAC,UAAU,EAAE,OAAO,CAAC,GAC5C,EAAA,CACS,EAAA,CACL;;"}
+{"version":3,"file":"AvatarButton.js","sources":["../../../../../src/components/organisms/ApplicationHeader/components/AvatarButton.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton"],"mappings":";;;;;;;AAkBO,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAqB,MACxHA,GAAA,CAAC,OAAO,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,QAAQ,EAAA,aAAA,EAAc,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,QAAA,EACtFA,GAAA,CAACC,MAAU,EAAA,EAAA,YAAA,EACG,KAAK,EAAA,eAAA,EACF,MAAM,EAAA,aAAA,EACR,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CACX,4JAA4J;;AAE5J,QAAA,MAAM,KAAK,SAAS,IAAI,4DAA4D,EACpF,MAAM,IAAI,yCAAyC,CACpD,YAEDD,GAAA,CAAC,MAAM,EAAA,EACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,KAAK,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,IAAI,WAAW,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE;;AAErD,YAAA,SAAS,EAAC,YAAY,EACtB,gBAAgB,EAAC,YAAY,EAAA,aAAA,EAChB,UAAU,CAAC,UAAU,EAAE,OAAO,CAAC,GAC5C,EAAA,CACS,EAAA,CACL;;"}

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

@@ -38,7 +38,7 @@ const ApplicationHeader = ({ search, notifications, assistant, avatar, menu, hom
     const safeHomeHref = hrefUtils.safeHref(homeHref);
     return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsxs("header", { "data-testid": rootTestId, className: cx.cx('sticky top-0 z-30 flex h-14 w-full items-center gap-2 border-b border-secondary bg-primary pr-3 pl-4 lg:h-16 lg:px-6', className), children: [menu && (jsxRuntime.jsx(MenuButton.MenuButton, { isOpen: menu.isOpen, onPress: () => menu.onOpenChange(!menu.isOpen), label: menuLabel, controls: menu.controls, className: "lg:hidden", "data-testid": menu['data-testid'] ?? testIdUtils.joinTestId(rootTestId, 'menu') })), jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center lg:hidden", children: safeHomeHref === undefined ? (
                     // A rejected `homeHref` leaves a plain logo: no link role, nothing to activate.
-                    jsxRuntime.jsx(FlipdishLogo.FlipdishLogo, { size: "sm", "data-testid": testIdUtils.joinTestId(rootTestId, 'logo') })) : (jsxRuntime.jsx(reactAriaComponents.Link, { href: safeHomeHref, "aria-label": "Go to homepage", "data-testid": testIdUtils.joinTestId(rootTestId, 'logo'), className: "rounded-xs outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2", children: jsxRuntime.jsx(FlipdishLogo.FlipdishLogo, { size: "sm", "aria-hidden": "true" }) })) }), search && (jsxRuntime.jsx(SearchTrigger.SearchTrigger, { size: "sm", placeholder: search.placeholder ?? 'Search', label: search.label ?? 'Search', onPress: search.onPress, shortcutHint: shortcutHint, className: "w-80 max-lg:hidden", "data-testid": search['data-testid'] ?? testIdUtils.joinTestId(rootTestId, 'search') })), hasActions && (jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2 lg:ml-auto", children: [notifications && (jsxRuntime.jsx(HeaderAction.HeaderAction, { icon: uiIcons.Bell01, label: applicationHeader_utils.getNotificationsLabel(notificationsLabel, notifications.count), tooltip: notificationsLabel, badge: applicationHeader_utils.formatBadgeCount(notifications.count), isOpen: notifications.isOpen, onPress: notifications.onPress, "data-testid": notifications['data-testid'] ?? testIdUtils.joinTestId(rootTestId, 'notifications') })), assistant && (jsxRuntime.jsx(HeaderAction.HeaderAction, { icon: uiIcons.Stars01, label: assistantLabel, tooltip: assistantLabel, isOpen: assistant.isOpen, onPress: assistant.onPress, "data-testid": assistant['data-testid'] ?? testIdUtils.joinTestId(rootTestId, 'assistant') })), avatar && (jsxRuntime.jsx(AvatarButton.AvatarButton, { name: avatar.name, src: avatar.src, initials: avatar.initials, label: avatar.label ?? avatar.name, onPress: avatar.onPress, "data-testid": avatar['data-testid'] ?? testIdUtils.joinTestId(rootTestId, 'avatar') }))] }))] }) }));
+                    jsxRuntime.jsx(FlipdishLogo.FlipdishLogo, { size: "sm", "data-testid": testIdUtils.joinTestId(rootTestId, 'logo') })) : (jsxRuntime.jsx(reactAriaComponents.Link, { href: safeHomeHref, "aria-label": "Go to homepage", "data-testid": testIdUtils.joinTestId(rootTestId, 'logo'), className: "rounded-xs outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2", children: jsxRuntime.jsx(FlipdishLogo.FlipdishLogo, { size: "sm", "aria-hidden": "true" }) })) }), search && (jsxRuntime.jsx(SearchTrigger.SearchTrigger, { size: "sm", placeholder: search.placeholder ?? 'Search', label: search.label ?? 'Search', onPress: search.onPress, shortcutHint: shortcutHint, className: "w-80 max-lg:hidden", "data-testid": search['data-testid'] ?? testIdUtils.joinTestId(rootTestId, 'search') })), hasActions && (jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2 lg:ml-auto", children: [notifications && (jsxRuntime.jsx(HeaderAction.HeaderAction, { icon: uiIcons.Bell01, label: applicationHeader_utils.getNotificationsLabel(notificationsLabel, notifications.count), tooltip: notificationsLabel, badge: applicationHeader_utils.formatBadgeCount(notifications.count), isOpen: notifications.isOpen, onPress: notifications.onPress, "data-testid": notifications['data-testid'] ?? testIdUtils.joinTestId(rootTestId, 'notifications') })), assistant && (jsxRuntime.jsx(HeaderAction.HeaderAction, { icon: uiIcons.Stars01, label: assistantLabel, tooltip: assistantLabel, isOpen: assistant.isOpen, onPress: assistant.onPress, "data-testid": assistant['data-testid'] ?? testIdUtils.joinTestId(rootTestId, 'assistant') })), avatar && (jsxRuntime.jsx(AvatarButton.AvatarButton, { name: avatar.name, src: avatar.src, initials: avatar.initials, label: avatar.label ?? avatar.name, isOpen: avatar.isOpen, onPress: avatar.onPress, "data-testid": avatar['data-testid'] ?? testIdUtils.joinTestId(rootTestId, 'avatar') }))] }))] }) }));
 };
 
 exports.ApplicationHeader = ApplicationHeader;