@pega/cosmos-react-core 9.0.0-build.9.8 → 9.0.0

package/lib/components/AppShell/ThemeSwitcher.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { menuHelpers } from '../Menu';
+import { useI18n, useTestIds } from '../../hooks';
+import Flex from '../Flex';
+import { ThemeOverride } from '../Configuration';
+import MenuButton from '../MenuButton';
+import { withTestIds } from '../../utils';
+import Icon from '../Icon';
+import { getThemeSwitcherTestIds } from './ThemeSwitcher.test-ids';
+const ThemeModeIconMap = {
+    light: 'sun',
+    dark: 'moon',
+    system: 'circle-mixed-left'
+};
+const ThemeSwitcher = withTestIds(function ThemeSwitcher({ testId, themeMode, onThemeModeChange }) {
+    const t = useI18n();
+    const testIds = useTestIds(testId, getThemeSwitcherTestIds);
+    const [items, setItems] = useState(() => [
+        {
+            id: 'light',
+            primary: 'Light',
+            visual: _jsx(Icon, { name: ThemeModeIconMap.light, set: 'budicon' }),
+            selected: themeMode === 'light'
+        },
+        {
+            id: 'dark',
+            primary: 'Dark',
+            visual: _jsx(Icon, { name: ThemeModeIconMap.dark, set: 'budicon' }),
+            selected: themeMode === 'dark'
+        },
+        {
+            id: 'system',
+            primary: 'System',
+            visual: _jsx(Icon, { name: ThemeModeIconMap.system, set: 'budicon' }),
+            selected: !themeMode || themeMode === 'system'
+        }
+    ]);
+    const handleMenuItemClick = (id) => {
+        setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));
+        onThemeModeChange?.(id);
+    };
+    const selectedThemeIcon = useMemo(() => {
+        const selected = menuHelpers.getSelected(items)[0];
+        return selected
+            ? ThemeModeIconMap[selected.id]
+            : ThemeModeIconMap.system;
+    }, [items]);
+    return (_jsx(Flex, { container: {
+            alignItems: 'center'
+        }, children: _jsx(ThemeOverride, { theme: { base: { 'icon-set': 'budicon' } }, children: _jsx(MenuButton, { text: t('theme_mode'), "data-testid": testIds.root, icon: selectedThemeIcon, iconOnly: true, variant: 'simple', menu: {
+                    mode: 'single-select',
+                    items,
+                    onItemClick: handleMenuItemClick
+                } }) }) }));
+}, getThemeSwitcherTestIds);
+export default ThemeSwitcher;
+//# sourceMappingURL=ThemeSwitcher.js.map

package/lib/components/AppShell/ThemeSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.js","sourceRoot":"","sources":["../../../src/components/AppShell/ThemeSwitcher.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useMemo } from 'react';\n\nimport { menuHelpers } from '../Menu';\nimport type { MenuItemProps } from '../Menu';\nimport type { MenuProps } from '../Menu/Menu.types';\nimport { useI18n, useTestIds } from '../../hooks';\nimport type { BaseProps, NoChildrenProp, TestIdProp } from '../../types';\nimport Flex from '../Flex';\nimport { ThemeOverride, type ConfigurationProps } from '../Configuration';\nimport MenuButton from '../MenuButton';\nimport { withTestIds } from '../../utils';\nimport Icon from '../Icon';\n\nimport { getThemeSwitcherTestIds } from './ThemeSwitcher.test-ids';\n\nconst ThemeModeIconMap = {\n  light: 'sun',\n  dark: 'moon',\n  system: 'circle-mixed-left'\n} as const;\n\nexport interface ThemeSwitcherProps extends BaseProps, NoChildrenProp, TestIdProp {\n  themeMode: NonNullable<ConfigurationProps['themeMode']>;\n  onThemeModeChange: (mode: ThemeSwitcherProps['themeMode']) => void;\n}\n\nconst ThemeSwitcher = withTestIds(function ThemeSwitcher({\n  testId,\n  themeMode,\n  onThemeModeChange\n}: ThemeSwitcherProps) {\n  const t = useI18n();\n  const testIds = useTestIds(testId, getThemeSwitcherTestIds);\n\n  const [items, setItems] = useState<MenuProps['items']>(() => [\n    {\n      id: 'light',\n      primary: 'Light',\n      visual: <Icon name={ThemeModeIconMap.light} set='budicon' />,\n      selected: themeMode === 'light'\n    },\n    {\n      id: 'dark',\n      primary: 'Dark',\n      visual: <Icon name={ThemeModeIconMap.dark} set='budicon' />,\n      selected: themeMode === 'dark'\n    },\n    {\n      id: 'system',\n      primary: 'System',\n      visual: <Icon name={ThemeModeIconMap.system} set='budicon' />,\n      selected: !themeMode || themeMode === 'system'\n    }\n  ]);\n\n  const handleMenuItemClick = (id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n    onThemeModeChange?.(id as ThemeSwitcherProps['themeMode']);\n  };\n\n  const selectedThemeIcon = useMemo(() => {\n    const selected = menuHelpers.getSelected(items)[0];\n    return selected\n      ? ThemeModeIconMap[selected.id as keyof typeof ThemeModeIconMap]\n      : ThemeModeIconMap.system;\n  }, [items]);\n\n  return (\n    <Flex\n      container={{\n        alignItems: 'center'\n      }}\n    >\n      <ThemeOverride theme={{ base: { 'icon-set': 'budicon' } }}>\n        <MenuButton\n          text={t('theme_mode')}\n          data-testid={testIds.root}\n          icon={selectedThemeIcon}\n          iconOnly\n          variant='simple'\n          menu={{\n            mode: 'single-select',\n            items,\n            onItemClick: handleMenuItemClick\n          }}\n        />\n      </ThemeOverride>\n    </Flex>\n  );\n}, getThemeSwitcherTestIds);\n\nexport default ThemeSwitcher;\n"]}

package/lib/components/AppShell/ThemeSwitcher.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getThemeSwitcherTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly []>;
+//# sourceMappingURL=ThemeSwitcher.test-ids.d.ts.map

package/lib/components/AppShell/ThemeSwitcher.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/ThemeSwitcher.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,mGAA+C,CAAC"}

package/lib/components/AppShell/ThemeSwitcher.test-ids.js

@@ -0,0 +1,3 @@
+import { createTestIds } from '../../utils';
+export const getThemeSwitcherTestIds = createTestIds('theme-switcher', []);
+//# sourceMappingURL=ThemeSwitcher.test-ids.js.map

package/lib/components/AppShell/ThemeSwitcher.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.test-ids.js","sourceRoot":"","sources":["../../../src/components/AppShell/ThemeSwitcher.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAC,gBAAgB,EAAE,EAAW,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getThemeSwitcherTestIds = createTestIds('theme-switcher', [] as const);\n"]}

package/lib/components/AppShell/TopNavMoreMenu.d.ts

@@ -0,0 +1,9 @@
+import type { LinkProps } from './AppShell.types';
+export interface TopNavMoreMenuProps {
+    items: LinkProps[];
+    label?: string;
+    active?: boolean;
+}
+declare const TopNavMoreMenu: ({ items, label, active }: TopNavMoreMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default TopNavMoreMenu;
+//# sourceMappingURL=TopNavMoreMenu.d.ts.map

package/lib/components/AppShell/TopNavMoreMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNavMoreMenu.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/TopNavMoreMenu.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA+BlD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,QAAA,MAAM,cAAc,GAAI,0BAA0B,mBAAmB,4CA6EpE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/AppShell/TopNavMoreMenu.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useRef, useMemo, useState } from 'react';
+import Icon, { registerIcon } from '../Icon';
+import * as barsIcon from '../Icon/icons/bars.icon';
+import Popover from '../Popover';
+import Menu from '../Menu';
+import { useEscape, useFocusWithin, useI18n } from '../../hooks';
+import { createStringMatcher } from '../../utils';
+import { StyledTopNavItem } from './AppTopNav.styles';
+registerIcon(barsIcon);
+const FILTER_THRESHOLD = 5;
+const linkToMenuItem = (link) => {
+    const userOnClick = link.onClick;
+    const children = link.links?.map(linkToMenuItem);
+    const hasChildren = children && children.length > 0;
+    return {
+        id: link.id || link.name,
+        primary: link.name,
+        visual: link.icon ? _jsx(Icon, { name: link.icon }) : undefined,
+        href: hasChildren ? undefined : link.href,
+        // MenuItem uses `typeof selected !== 'boolean'` to decide expand vs click.
+        selected: hasChildren ? undefined : link.active || undefined,
+        onClick: userOnClick
+            ? (_id, e) => {
+                userOnClick(e);
+            }
+            : undefined,
+        items: hasChildren ? children : undefined
+    };
+};
+const TopNavMoreMenu = ({ items, label, active }) => {
+    const t = useI18n();
+    const triggerRef = useRef(null);
+    const popoverRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [filterValue, setFilterValue] = useState('');
+    const close = useCallback(() => setOpen(false), []);
+    useFocusWithin([triggerRef, popoverRef], useCallback((isFocused) => {
+        if (!isFocused)
+            setOpen(false);
+    }, []));
+    useEscape(useCallback((e) => {
+        if (open) {
+            setOpen(false);
+            e.stopPropagation();
+            triggerRef.current?.focus();
+        }
+    }, [open])
+    // No target: attach to document so Escape works when focus is inside the
+    // Popover portal (events from portal content don't bubble to the trigger element).
+    );
+    const allItems = useMemo(() => items.map(linkToMenuItem), [items]);
+    const showFilter = items.length >= FILTER_THRESHOLD;
+    const filterRegex = createStringMatcher(filterValue, 'contains');
+    const menuItems = showFilter
+        ? allItems.filter(it => filterRegex.test(String(it.primary ?? '')))
+        : allItems;
+    const handleTriggerClick = () => {
+        if (!open)
+            setFilterValue('');
+        setOpen(v => !v);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledTopNavItem, { ref: triggerRef, "$active": active || open, "aria-haspopup": 'menu', "aria-expanded": open, onClick: handleTriggerClick, children: [_jsx(Icon, { name: 'bars' }), _jsx("span", { children: label ?? t('app_shell_more') })] }), open && (_jsx(Popover, { ref: popoverRef, target: triggerRef.current, placement: 'bottom-end', children: _jsx(Menu, { mode: 'action', variant: 'flyout', "aria-label": label ?? t('app_shell_more'), items: menuItems, onItemClick: close, focusControlEl: triggerRef.current ?? undefined, ...(showFilter
+                        ? {
+                            filterInputProps: {
+                                value: filterValue,
+                                onChange: (e) => setFilterValue(e.target.value)
+                            }
+                        }
+                        : {}) }) }))] }));
+};
+export default TopNavMoreMenu;
+//# sourceMappingURL=TopNavMoreMenu.js.map

package/lib/components/AppShell/TopNavMoreMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNavMoreMenu.js","sourceRoot":"","sources":["../../../src/components/AppShell/TopNavMoreMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAM3B,MAAM,cAAc,GAAG,CAAC,IAAe,EAAkB,EAAE;IACzD,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;IACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACjD,MAAM,WAAW,GAAG,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IACpD,OAAO;QACL,EAAE,EAAE,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI;QACxB,OAAO,EAAE,IAAI,CAAC,IAAI;QAClB,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC,CAAC,CAAC,SAAS;QACzD,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;QACzC,2EAA2E;QAC3E,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,SAAS;QAC5D,OAAO,EAAE,WAAW;YAClB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;gBACT,WAAW,CAAC,CAAC,CAAC,CAAC;YACjB,CAAC;YACH,CAAC,CAAC,SAAS;QACb,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;KAC1C,CAAC;AACJ,CAAC,CAAC;AAQF,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAuB,EAAE,EAAE;IACvE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACnD,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;IAEpD,cAAc,CACZ,CAAC,UAAU,EAAE,UAAU,CAAC,EACxB,WAAW,CAAC,CAAC,SAAkB,EAAE,EAAE;QACjC,IAAI,CAAC,SAAS;YAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CACP,CAAC;IAEF,SAAS,CACP,WAAW,CACT,CAAC,CAAgB,EAAE,EAAE;QACnB,IAAI,IAAI,EAAE,CAAC;YACT,OAAO,CAAC,KAAK,CAAC,CAAC;YACf,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC,EACD,CAAC,IAAI,CAAC,CACP;IACD,yEAAyE;IACzE,mFAAmF;KACpF,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACnE,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,IAAI,gBAAgB,CAAC;IACpD,MAAM,WAAW,GAAG,mBAAmB,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;IACjE,MAAM,SAAS,GAAG,UAAU;QAC1B,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC;QACnE,CAAC,CAAC,QAAQ,CAAC;IAEb,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,IAAI;YAAE,cAAc,CAAC,EAAE,CAAC,CAAC;QAC9B,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,MAAC,gBAAgB,IACf,GAAG,EAAE,UAAU,aACN,MAAM,IAAI,IAAI,mBACT,MAAM,mBACL,IAAI,EACnB,OAAO,EAAE,kBAAkB,aAE3B,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACpB,yBAAO,KAAK,IAAI,CAAC,CAAC,gBAAgB,CAAC,GAAQ,IAC1B,EAClB,IAAI,IAAI,CACP,KAAC,OAAO,IAAC,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,CAAC,OAAO,EAAE,SAAS,EAAC,YAAY,YAC1E,KAAC,IAAI,IACH,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,QAAQ,gBACJ,KAAK,IAAI,CAAC,CAAC,gBAAgB,CAAC,EACxC,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,KAAK,EAClB,cAAc,EAAE,UAAU,CAAC,OAAO,IAAI,SAAS,KAC3C,CAAC,UAAU;wBACb,CAAC,CAAC;4BACE,gBAAgB,EAAE;gCAChB,KAAK,EAAE,WAAW;gCAClB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;6BAC/E;yBACF;wBACH,CAAC,CAAC,EAAE,CAAC,GACP,GACM,CACX,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { useCallback, useRef, useMemo, useState } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as barsIcon from '../Icon/icons/bars.icon';\nimport Popover from '../Popover';\nimport Menu from '../Menu';\nimport type { MenuItemProps } from '../Menu';\nimport { useEscape, useFocusWithin, useI18n } from '../../hooks';\nimport { createStringMatcher } from '../../utils';\n\nimport type { LinkProps } from './AppShell.types';\nimport { StyledTopNavItem } from './AppTopNav.styles';\n\nregisterIcon(barsIcon);\n\nconst FILTER_THRESHOLD = 5;\n\ninterface TopNavMenuItem extends MenuItemProps {\n  items?: TopNavMenuItem[];\n}\n\nconst linkToMenuItem = (link: LinkProps): TopNavMenuItem => {\n  const userOnClick = link.onClick;\n  const children = link.links?.map(linkToMenuItem);\n  const hasChildren = children && children.length > 0;\n  return {\n    id: link.id || link.name,\n    primary: link.name,\n    visual: link.icon ? <Icon name={link.icon} /> : undefined,\n    href: hasChildren ? undefined : link.href,\n    // MenuItem uses `typeof selected !== 'boolean'` to decide expand vs click.\n    selected: hasChildren ? undefined : link.active || undefined,\n    onClick: userOnClick\n      ? (_id, e) => {\n          userOnClick(e);\n        }\n      : undefined,\n    items: hasChildren ? children : undefined\n  };\n};\n\nexport interface TopNavMoreMenuProps {\n  items: LinkProps[];\n  label?: string;\n  active?: boolean;\n}\n\nconst TopNavMoreMenu = ({ items, label, active }: TopNavMoreMenuProps) => {\n  const t = useI18n();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(false);\n  const [filterValue, setFilterValue] = useState('');\n\n  const close = useCallback(() => setOpen(false), []);\n\n  useFocusWithin<HTMLElement>(\n    [triggerRef, popoverRef],\n    useCallback((isFocused: boolean) => {\n      if (!isFocused) setOpen(false);\n    }, [])\n  );\n\n  useEscape(\n    useCallback(\n      (e: KeyboardEvent) => {\n        if (open) {\n          setOpen(false);\n          e.stopPropagation();\n          triggerRef.current?.focus();\n        }\n      },\n      [open]\n    )\n    // No target: attach to document so Escape works when focus is inside the\n    // Popover portal (events from portal content don't bubble to the trigger element).\n  );\n\n  const allItems = useMemo(() => items.map(linkToMenuItem), [items]);\n  const showFilter = items.length >= FILTER_THRESHOLD;\n  const filterRegex = createStringMatcher(filterValue, 'contains');\n  const menuItems = showFilter\n    ? allItems.filter(it => filterRegex.test(String(it.primary ?? '')))\n    : allItems;\n\n  const handleTriggerClick = () => {\n    if (!open) setFilterValue('');\n    setOpen(v => !v);\n  };\n\n  return (\n    <>\n      <StyledTopNavItem\n        ref={triggerRef}\n        $active={active || open}\n        aria-haspopup='menu'\n        aria-expanded={open}\n        onClick={handleTriggerClick}\n      >\n        <Icon name='bars' />\n        <span>{label ?? t('app_shell_more')}</span>\n      </StyledTopNavItem>\n      {open && (\n        <Popover ref={popoverRef} target={triggerRef.current} placement='bottom-end'>\n          <Menu\n            mode='action'\n            variant='flyout'\n            aria-label={label ?? t('app_shell_more')}\n            items={menuItems}\n            onItemClick={close}\n            focusControlEl={triggerRef.current ?? undefined}\n            {...(showFilter\n              ? {\n                  filterInputProps: {\n                    value: filterValue,\n                    onChange: (e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value)\n                  }\n                }\n              : {})}\n          />\n        </Popover>\n      )}\n    </>\n  );\n};\n\nexport default TopNavMoreMenu;\n"]}

package/lib/components/AppShell/index.d.ts

@@ -1,7 +1,8 @@
 export { default } from './AppShell';
 export { default as AppShellList } from './AppShellList';
 export type { AppShellListProps } from './AppShellList';
-export type { AppHeaderProps, AppShellProps, ContextSwitcherProps, DrawerItemProps, DrawerListProps } from './AppShell.types';
+export type { AppHeaderProps, AppShellProps, ContextSwitcherProps, DrawerItemProps, DrawerListProps, NavOrientation, ShareAppConfig } from './AppShell.types';
 export { default as AppShellContext, AppShellDrawerContext } from './AppShellContext';
 export { default as ContextSwitcher } from './ContextSwitcher';
+export { default as ThemeSwitcher } from './ThemeSwitcher';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/AppShell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,aAAa,EACb,oBAAoB,EACpB,eAAe,EACf,eAAe,EAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,aAAa,EACb,oBAAoB,EACpB,eAAe,EACf,eAAe,EACf,cAAc,EACd,cAAc,EACf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/components/AppShell/index.js

@@ -2,4 +2,5 @@ export { default } from './AppShell';
 export { default as AppShellList } from './AppShellList';
 export { default as AppShellContext, AppShellDrawerContext } from './AppShellContext';
 export { default as ContextSwitcher } from './ContextSwitcher';
+export { default as ThemeSwitcher } from './ThemeSwitcher';
 //# sourceMappingURL=index.js.map

package/lib/components/AppShell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AASzD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { default } from './AppShell';\nexport { default as AppShellList } from './AppShellList';\nexport type { AppShellListProps } from './AppShellList';\nexport type {\n  AppHeaderProps,\n  AppShellProps,\n  ContextSwitcherProps,\n  DrawerItemProps,\n  DrawerListProps\n} from './AppShell.types';\nexport { default as AppShellContext, AppShellDrawerContext } from './AppShellContext';\nexport { default as ContextSwitcher } from './ContextSwitcher';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAWzD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './AppShell';\nexport { default as AppShellList } from './AppShellList';\nexport type { AppShellListProps } from './AppShellList';\nexport type {\n  AppHeaderProps,\n  AppShellProps,\n  ContextSwitcherProps,\n  DrawerItemProps,\n  DrawerListProps,\n  NavOrientation,\n  ShareAppConfig\n} from './AppShell.types';\nexport { default as AppShellContext, AppShellDrawerContext } from './AppShellContext';\nexport { default as ContextSwitcher } from './ContextSwitcher';\nexport { default as ThemeSwitcher } from './ThemeSwitcher';\n"]}

package/lib/components/AppShell/style-utils.d.ts

@@ -11,5 +11,4 @@ export declare const navContrastColors: (theme: DefaultTheme) => {
     nestedListHeader: string;
 };
 export declare const getHeaderTheme: (theme: DefaultTheme) => DefaultSettableTheme;
-export declare const pxToRem: (n: number) => string;
 //# sourceMappingURL=style-utils.d.ts.map

package/lib/components/AppShell/style-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style-utils.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/style-utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAQtD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,eAAO,MAAM,iBAAiB,GAC5B,OAAO,YAAY,KAClB;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;CA+C1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,oBAgDrD,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,GAAG,MAAM,KAAG,MAA4B,CAAC"}
+{"version":3,"file":"style-utils.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/style-utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAQtD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,eAAO,MAAM,iBAAiB,GAC5B,OAAO,YAAY,KAClB;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;CA+C1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,oBAgDrD,CAAC"}

package/lib/components/AppShell/style-utils.js

@@ -72,5 +72,4 @@ export const getHeaderTheme = ({ base: { palette: { interactive } }, components:
         }
     };
 };
-export const pxToRem = (n) => `${n * 0.0625}rem`;
 //# sourceMappingURL=style-utils.js.map

package/lib/components/AppShell/style-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"style-utils.js","sourceRoot":"","sources":["../../../src/components/AppShell/style-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAGxE,OAAO,EACL,mCAAmC,EACnC,wBAAwB,EACxB,YAAY,EACZ,WAAW,EACZ,MAAM,cAAc,CAAC;AAGtB,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAmB,EAUnB,EAAE;IACF,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,EACjC,EACD,UAAU,EAAE,EACV,WAAW,EAAE,EACX,GAAG,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,EAC3D,EACF,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IACpE,MAAM,oBAAoB,GAAG,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,GAAG,mCAAmC,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAElG,IAAI,YAAY,GAAG,MAAM,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;IAClD,IAAI,WAAW,CAAC,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC;QACrD,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;IAC5C,CAAC;IACD,IAAI,oBAAoB,EAAE,CAAC;QACzB,YAAY,GAAG,cAAc,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;IACtD,CAAC;IAED,IAAI,gBAAgB,GAAG,YAAY,CAAC;IACpC,IAAI,oBAAoB,EAAE,CAAC;QACzB,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;QACjD,IAAI,WAAW,CAAC,eAAe,EAAE,gBAAgB,CAAC,KAAK,CAAC,EAAE,CAAC;YACzD,gBAAgB,GAAG,MAAM,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;QAClD,CAAC;IACH,CAAC;IAED,MAAM,WAAW,GAAG,cAAc,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;IACzD,MAAM,gBAAgB,GAAG,WAAW,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IACnE,MAAM,WAAW,GAAG,WAAW,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAEzD,OAAO;QACL,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,eAAe;QAC3B,MAAM,EAAE,WAAW;QACnB,WAAW,EAAE,gBAAgB;QAC7B,MAAM,EAAE,WAAW;QACnB,UAAU,EAAE,YAAY;QACxB,eAAe;QACf,gBAAgB;KACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAkD,CAAC,EAC5E,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,WAAW,EAAE,EACzB,EACD,UAAU,EAAE,EACV,WAAW,EAAE,EACX,MAAM,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,kBAAkB,EAAE,QAAQ,EAAE,EAC/D,EACF,EACF,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,wBAAwB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACrE,MAAM,EAAE,eAAe,EAAE,GAAG,mCAAmC,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACpF,MAAM,eAAe,GAAG,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE7E,MAAM,gBAAgB,GAAG,cAAc,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;IAC9D,MAAM,eAAe,GAAG,cAAc,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;IAC7D,MAAM,gBAAgB,GAAG,WAAW,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IACnE,MAAM,sBAAsB,GAAG,cAAc,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;IACpE,OAAO;QACL,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,oBAAoB,EAAE,eAAe;gBACrC,kBAAkB,EAAE,eAAe;gBACnC,aAAa,EAAE,eAAe;gBAC9B,WAAW,EAAE,gBAAgB;aAC9B;SACF;QACD,UAAU,EAAE;YACV,cAAc,EAAE;gBACd,cAAc,EAAE,sBAAsB;gBACtC,QAAQ,EAAE;oBACR,cAAc,EAAE,gBAAgB;iBACjC;gBACD,kBAAkB,EAAE,eAAe;aACpC;YACD,KAAK,EAAE;gBACL,cAAc,EAAE,sBAAsB;aACvC;YACD,aAAa,EAAE;gBACb,UAAU,EAAE;oBACV,kBAAkB,EAAE,gBAAgB;iBACrC;aACF;YACD,IAAI,EAAE;gBACJ,UAAU,EAAE,eAAe;aAC5B;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAS,EAAU,EAAE,CAAC,GAAG,CAAC,GAAG,MAAM,KAAK,CAAC","sourcesContent":["import { darken, getContrast, lighten, transparentize } from 'polished';\nimport type { DefaultTheme } from 'styled-components';\n\nimport {\n  calculateBackgroundAndContrastColor,\n  calculateForegroundColor,\n  isSolidColor,\n  readableHue\n} from '../../styles';\nimport type { DefaultSettableTheme } from '../../theme';\n\nexport const navContrastColors = (\n  theme: DefaultTheme\n): {\n  hoverBg: string;\n  foreground: string;\n  border: string;\n  interactive: string;\n  urgent: string;\n  nestedList: string;\n  backgroundColor: string;\n  nestedListHeader: string;\n} => {\n  const {\n    base: {\n      palette: { interactive, urgent }\n    },\n    components: {\n      'app-shell': {\n        nav: { background: navBg, 'foreground-color': navFgColor }\n      }\n    }\n  } = theme;\n\n  const computedFgColor = calculateForegroundColor(navBg, navFgColor);\n  const isGradientBackground = !isSolidColor(navBg);\n  const { backgroundColor, contrastColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n\n  let nestedListBg = darken(0.075, backgroundColor);\n  if (getContrast(backgroundColor, nestedListBg) === 1) {\n    nestedListBg = lighten(0.2, nestedListBg);\n  }\n  if (isGradientBackground) {\n    nestedListBg = transparentize(0.9, computedFgColor);\n  }\n\n  let nestedListHeader = nestedListBg;\n  if (isGradientBackground) {\n    nestedListHeader = lighten(0.9, computedFgColor);\n    if (getContrast(computedFgColor, nestedListHeader) === 1) {\n      nestedListHeader = darken(0.9, computedFgColor);\n    }\n  }\n\n  const borderColor = transparentize(0.8, computedFgColor);\n  const interactiveColor = readableHue(interactive, backgroundColor);\n  const urgentColor = readableHue(urgent, backgroundColor);\n\n  return {\n    hoverBg: contrastColor,\n    foreground: computedFgColor,\n    border: borderColor,\n    interactive: interactiveColor,\n    urgent: urgentColor,\n    nestedList: nestedListBg,\n    backgroundColor,\n    nestedListHeader\n  };\n};\n\nexport const getHeaderTheme: (theme: DefaultTheme) => DefaultSettableTheme = ({\n  base: {\n    palette: { interactive }\n  },\n  components: {\n    'app-shell': {\n      header: { background: headerBg, 'foreground-color': headerFg }\n    }\n  }\n}) => {\n  const foregroundColor = calculateForegroundColor(headerBg, headerFg);\n  const { backgroundColor } = calculateBackgroundAndContrastColor(headerBg, headerFg);\n  const computedBgColor = !isSolidColor(headerBg) ? backgroundColor : headerBg;\n\n  const hoverBorderColor = transparentize(0.3, foregroundColor);\n  const borderLineColor = transparentize(0.8, foregroundColor);\n  const interactiveColor = readableHue(interactive, computedBgColor);\n  const formControlBorderColor = transparentize(0.5, foregroundColor);\n  return {\n    base: {\n      palette: {\n        'primary-background': computedBgColor,\n        'foreground-color': foregroundColor,\n        'border-line': borderLineColor,\n        interactive: interactiveColor\n      }\n    },\n    components: {\n      'form-control': {\n        'border-color': formControlBorderColor,\n        ':hover': {\n          'border-color': hoverBorderColor\n        },\n        'background-color': computedBgColor\n      },\n      input: {\n        'border-color': formControlBorderColor\n      },\n      'radio-check': {\n        ':checked': {\n          'background-color': interactiveColor\n        }\n      },\n      card: {\n        background: computedBgColor\n      }\n    }\n  };\n};\n\nexport const pxToRem = (n: number): string => `${n * 0.0625}rem`;\n"]}
+{"version":3,"file":"style-utils.js","sourceRoot":"","sources":["../../../src/components/AppShell/style-utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { darken, getContrast, lighten, transparentize } from 'polished';\nimport type { DefaultTheme } from 'styled-components';\n\nimport {\n  calculateBackgroundAndContrastColor,\n  calculateForegroundColor,\n  isSolidColor,\n  readableHue\n} from '../../styles';\nimport type { DefaultSettableTheme } from '../../theme';\n\nexport const navContrastColors = (\n  theme: DefaultTheme\n): {\n  hoverBg: string;\n  foreground: string;\n  border: string;\n  interactive: string;\n  urgent: string;\n  nestedList: string;\n  backgroundColor: string;\n  nestedListHeader: string;\n} => {\n  const {\n    base: {\n      palette: { interactive, urgent }\n    },\n    components: {\n      'app-shell': {\n        nav: { background: navBg, 'foreground-color': navFgColor }\n      }\n    }\n  } = theme;\n\n  const computedFgColor = calculateForegroundColor(navBg, navFgColor);\n  const isGradientBackground = !isSolidColor(navBg);\n  const { backgroundColor, contrastColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n\n  let nestedListBg = darken(0.075, backgroundColor);\n  if (getContrast(backgroundColor, nestedListBg) === 1) {\n    nestedListBg = lighten(0.2, nestedListBg);\n  }\n  if (isGradientBackground) {\n    nestedListBg = transparentize(0.9, computedFgColor);\n  }\n\n  let nestedListHeader = nestedListBg;\n  if (isGradientBackground) {\n    nestedListHeader = lighten(0.9, computedFgColor);\n    if (getContrast(computedFgColor, nestedListHeader) === 1) {\n      nestedListHeader = darken(0.9, computedFgColor);\n    }\n  }\n\n  const borderColor = transparentize(0.8, computedFgColor);\n  const interactiveColor = readableHue(interactive, backgroundColor);\n  const urgentColor = readableHue(urgent, backgroundColor);\n\n  return {\n    hoverBg: contrastColor,\n    foreground: computedFgColor,\n    border: borderColor,\n    interactive: interactiveColor,\n    urgent: urgentColor,\n    nestedList: nestedListBg,\n    backgroundColor,\n    nestedListHeader\n  };\n};\n\nexport const getHeaderTheme: (theme: DefaultTheme) => DefaultSettableTheme = ({\n  base: {\n    palette: { interactive }\n  },\n  components: {\n    'app-shell': {\n      header: { background: headerBg, 'foreground-color': headerFg }\n    }\n  }\n}) => {\n  const foregroundColor = calculateForegroundColor(headerBg, headerFg);\n  const { backgroundColor } = calculateBackgroundAndContrastColor(headerBg, headerFg);\n  const computedBgColor = !isSolidColor(headerBg) ? backgroundColor : headerBg;\n\n  const hoverBorderColor = transparentize(0.3, foregroundColor);\n  const borderLineColor = transparentize(0.8, foregroundColor);\n  const interactiveColor = readableHue(interactive, computedBgColor);\n  const formControlBorderColor = transparentize(0.5, foregroundColor);\n  return {\n    base: {\n      palette: {\n        'primary-background': computedBgColor,\n        'foreground-color': foregroundColor,\n        'border-line': borderLineColor,\n        interactive: interactiveColor\n      }\n    },\n    components: {\n      'form-control': {\n        'border-color': formControlBorderColor,\n        ':hover': {\n          'border-color': hoverBorderColor\n        },\n        'background-color': computedBgColor\n      },\n      input: {\n        'border-color': formControlBorderColor\n      },\n      'radio-check': {\n        ':checked': {\n          'background-color': interactiveColor\n        }\n      },\n      card: {\n        background: computedBgColor\n      }\n    }\n  };\n};\n"]}

package/lib/components/AppShell/useTopNavOverflow.d.ts

@@ -0,0 +1,17 @@
+import type { RefObject } from 'react';
+import type { LinkProps } from './AppShell.types';
+export interface OverflowResult {
+    visibleCount: number;
+}
+interface UseTopNavOverflowOptions {
+    moreButtonRef?: RefObject<HTMLElement | null>;
+    epsilon?: number;
+}
+interface UseTopNavOverflowReturn {
+    containerRef: RefObject<HTMLDivElement>;
+    measureRef: RefObject<HTMLDivElement>;
+    result: OverflowResult;
+}
+export declare function useTopNavOverflow(items: LinkProps[], opts: UseTopNavOverflowOptions): UseTopNavOverflowReturn;
+export {};
+//# sourceMappingURL=useTopNavOverflow.d.ts.map

package/lib/components/AppShell/useTopNavOverflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTopNavOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/useTopNavOverflow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,wBAAwB;IAChC,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,uBAAuB;IAC/B,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,UAAU,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACtC,MAAM,EAAE,cAAc,CAAC;CACxB;AAcD,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,SAAS,EAAE,EAClB,IAAI,EAAE,wBAAwB,GAC7B,uBAAuB,CAsEzB"}

package/lib/components/AppShell/useTopNavOverflow.js

@@ -0,0 +1,73 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+const getChildWidths = (el) => {
+    if (!el)
+        return [];
+    return Array.from(el.childNodes)
+        .filter((n) => n instanceof HTMLElement)
+        .map(n => n.getBoundingClientRect().width);
+};
+const getComputedGapPx = (el) => {
+    const raw = getComputedStyle(el).columnGap ?? getComputedStyle(el).gap ?? '0';
+    return parseFloat(raw) || 0;
+};
+export function useTopNavOverflow(items, opts) {
+    const { moreButtonRef, epsilon = 16 } = opts;
+    const containerRef = useRef(null);
+    const measureRef = useRef(null);
+    const [result, setResult] = useState({
+        visibleCount: items.length
+    });
+    const resultRef = useRef(result);
+    resultRef.current = result;
+    useLayoutEffect(() => {
+        const containerEl = containerRef.current;
+        const measureEl = measureRef.current;
+        if (!containerEl || !measureEl)
+            return undefined;
+        const recompute = () => {
+            const containerWidth = containerEl.getBoundingClientRect().width;
+            if (containerWidth === 0)
+                return;
+            const widths = getChildWidths(measureEl);
+            if (widths.length === 0)
+                return;
+            const gap = getComputedGapPx(containerEl);
+            const totalWidth = widths.reduce((sum, w) => sum + w, 0) + Math.max(0, widths.length - 1) * gap;
+            const prev = resultRef.current;
+            const isOverflowing = prev.visibleCount < items.length;
+            const expandThreshold = isOverflowing ? totalWidth + epsilon : totalWidth;
+            if (expandThreshold <= containerWidth) {
+                if (prev.visibleCount !== items.length) {
+                    setResult({ visibleCount: items.length });
+                }
+                return;
+            }
+            const moreButtonWidth = moreButtonRef?.current?.getBoundingClientRect().width ?? 0;
+            const available = moreButtonWidth > 0 ? containerWidth - moreButtonWidth - gap : containerWidth;
+            let used = 0;
+            let visible = 0;
+            for (let i = 0; i < widths.length; i += 1) {
+                const itemWidth = widths[i] + (i > 0 ? gap : 0);
+                if (used + itemWidth <= available) {
+                    used += itemWidth;
+                    visible += 1;
+                }
+                else {
+                    break;
+                }
+            }
+            if (prev.visibleCount !== visible) {
+                setResult({ visibleCount: visible });
+            }
+        };
+        recompute();
+        const ro = new ResizeObserver(recompute);
+        ro.observe(containerEl);
+        ro.observe(measureEl);
+        return () => {
+            ro.disconnect();
+        };
+    }, [items.length, moreButtonRef, epsilon]);
+    return { containerRef, measureRef, result };
+}
+//# sourceMappingURL=useTopNavOverflow.js.map

package/lib/components/AppShell/useTopNavOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTopNavOverflow.js","sourceRoot":"","sources":["../../../src/components/AppShell/useTopNavOverflow.ts"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport type { RefObject } from 'react';\n\nimport type { LinkProps } from './AppShell.types';\n\nexport interface OverflowResult {\n  visibleCount: number;\n}\n\ninterface UseTopNavOverflowOptions {\n  moreButtonRef?: RefObject<HTMLElement | null>;\n  epsilon?: number;\n}\n\ninterface UseTopNavOverflowReturn {\n  containerRef: RefObject<HTMLDivElement>;\n  measureRef: RefObject<HTMLDivElement>;\n  result: OverflowResult;\n}\n\nconst getChildWidths = (el: HTMLElement | null): number[] => {\n  if (!el) return [];\n  return Array.from(el.childNodes)\n    .filter((n): n is HTMLElement => n instanceof HTMLElement)\n    .map(n => n.getBoundingClientRect().width);\n};\n\nconst getComputedGapPx = (el: HTMLElement): number => {\n  const raw = getComputedStyle(el).columnGap ?? getComputedStyle(el).gap ?? '0';\n  return parseFloat(raw) || 0;\n};\n\nexport function useTopNavOverflow(\n  items: LinkProps[],\n  opts: UseTopNavOverflowOptions\n): UseTopNavOverflowReturn {\n  const { moreButtonRef, epsilon = 16 } = opts;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const measureRef = useRef<HTMLDivElement>(null);\n  const [result, setResult] = useState<OverflowResult>({\n    visibleCount: items.length\n  });\n\n  const resultRef = useRef(result);\n  resultRef.current = result;\n\n  useLayoutEffect(() => {\n    const containerEl = containerRef.current;\n    const measureEl = measureRef.current;\n    if (!containerEl || !measureEl) return undefined;\n\n    const recompute = () => {\n      const containerWidth = containerEl.getBoundingClientRect().width;\n      if (containerWidth === 0) return;\n\n      const widths = getChildWidths(measureEl);\n      if (widths.length === 0) return;\n\n      const gap = getComputedGapPx(containerEl);\n      const totalWidth =\n        widths.reduce((sum, w) => sum + w, 0) + Math.max(0, widths.length - 1) * gap;\n\n      const prev = resultRef.current;\n      const isOverflowing = prev.visibleCount < items.length;\n\n      const expandThreshold = isOverflowing ? totalWidth + epsilon : totalWidth;\n      if (expandThreshold <= containerWidth) {\n        if (prev.visibleCount !== items.length) {\n          setResult({ visibleCount: items.length });\n        }\n        return;\n      }\n\n      const moreButtonWidth = moreButtonRef?.current?.getBoundingClientRect().width ?? 0;\n      const available =\n        moreButtonWidth > 0 ? containerWidth - moreButtonWidth - gap : containerWidth;\n      let used = 0;\n      let visible = 0;\n      for (let i = 0; i < widths.length; i += 1) {\n        const itemWidth = widths[i] + (i > 0 ? gap : 0);\n        if (used + itemWidth <= available) {\n          used += itemWidth;\n          visible += 1;\n        } else {\n          break;\n        }\n      }\n\n      if (prev.visibleCount !== visible) {\n        setResult({ visibleCount: visible });\n      }\n    };\n\n    recompute();\n\n    const ro = new ResizeObserver(recompute);\n    ro.observe(containerEl);\n    ro.observe(measureEl);\n\n    return () => {\n      ro.disconnect();\n    };\n  }, [items.length, moreButtonRef, epsilon]);\n\n  return { containerRef, measureRef, result };\n}\n"]}

package/lib/components/AppShell/utils.d.ts

@@ -1,2 +1,11 @@
 export declare const followingNodes: <T extends Node>(source: NodeIterator, startingNode: Node) => T[];
+/**
+ * Focuses the provided region element.
+ * If the region has an aria-label, it focuses the region directly.
+ * Otherwise, it attempts to focus the highest level heading within the region,
+ * or the region itself if no headings are found.
+ * @param region - The region HTMLElement to focus.
+ * @returns boolean indicating whether the focus was successful.
+ */
+export declare const focusRegion: (region: HTMLElement) => boolean;
 //# sourceMappingURL=utils.d.ts.map

package/lib/components/AppShell/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/utils.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,IAAI,EAAE,QAAQ,YAAY,EAAE,cAAc,IAAI,KAAG,CAAC,EAc1F,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,IAAI,EAAE,QAAQ,YAAY,EAAE,cAAc,IAAI,KAAG,CAAC,EAc1F,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GAAI,QAAQ,WAAW,YAQ9C,CAAC"}

package/lib/components/AppShell/utils.js

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/prefer-default-export
+import { focusHeadingOrContainer, focusNonInteractiveElement } from '../../utils';
 export const followingNodes = (source, startingNode) => {
     const prevNodes = [];
     source.nextNode();
@@ -12,4 +12,19 @@ export const followingNodes = (source, startingNode) => {
     }
     return nodes.concat(prevNodes);
 };
+/**
+ * Focuses the provided region element.
+ * If the region has an aria-label, it focuses the region directly.
+ * Otherwise, it attempts to focus the highest level heading within the region,
+ * or the region itself if no headings are found.
+ * @param region - The region HTMLElement to focus.
+ * @returns boolean indicating whether the focus was successful.
+ */
+export const focusRegion = (region) => {
+    const ariaLabel = region.getAttribute('aria-label');
+    if (ariaLabel) {
+        return focusNonInteractiveElement(region);
+    }
+    return focusHeadingOrContainer(region);
+};
 //# sourceMappingURL=utils.js.map

package/lib/components/AppShell/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/AppShell/utils.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAiB,MAAoB,EAAE,YAAkB,EAAO,EAAE;IAC9F,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,MAAM,CAAC,QAAQ,EAAE,CAAC;IAClB,OAAO,MAAM,CAAC,aAAa,KAAK,IAAI,IAAI,MAAM,CAAC,aAAa,KAAK,YAAY,EAAE,CAAC;QAC9E,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;QACrC,MAAM,CAAC,QAAQ,EAAE,CAAC;IACpB,CAAC;IAED,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,OAAO,MAAM,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE,CAAC;QAClC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;IACnC,CAAC;IAED,OAAO,KAAK,CAAC,MAAM,CAAC,SAAS,CAAQ,CAAC;AACxC,CAAC,CAAC","sourcesContent":["// eslint-disable-next-line import/prefer-default-export\nexport const followingNodes = <T extends Node>(source: NodeIterator, startingNode: Node): T[] => {\n  const prevNodes = [];\n  source.nextNode();\n  while (source.referenceNode !== null && source.referenceNode !== startingNode) {\n    prevNodes.push(source.referenceNode);\n    source.nextNode();\n  }\n\n  const nodes = [];\n  while (source.nextNode() !== null) {\n    nodes.push(source.referenceNode);\n  }\n\n  return nodes.concat(prevNodes) as T[];\n};\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/AppShell/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAElF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAiB,MAAoB,EAAE,YAAkB,EAAO,EAAE;IAC9F,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,MAAM,CAAC,QAAQ,EAAE,CAAC;IAClB,OAAO,MAAM,CAAC,aAAa,KAAK,IAAI,IAAI,MAAM,CAAC,aAAa,KAAK,YAAY,EAAE,CAAC;QAC9E,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;QACrC,MAAM,CAAC,QAAQ,EAAE,CAAC;IACpB,CAAC;IAED,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,OAAO,MAAM,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE,CAAC;QAClC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;IACnC,CAAC;IAED,OAAO,KAAK,CAAC,MAAM,CAAC,SAAS,CAAQ,CAAC;AACxC,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAmB,EAAE,EAAE;IACjD,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAEpD,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,0BAA0B,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC;IAED,OAAO,uBAAuB,CAAC,MAAM,CAAC,CAAC;AACzC,CAAC,CAAC","sourcesContent":["import { focusHeadingOrContainer, focusNonInteractiveElement } from '../../utils';\n\nexport const followingNodes = <T extends Node>(source: NodeIterator, startingNode: Node): T[] => {\n  const prevNodes = [];\n  source.nextNode();\n  while (source.referenceNode !== null && source.referenceNode !== startingNode) {\n    prevNodes.push(source.referenceNode);\n    source.nextNode();\n  }\n\n  const nodes = [];\n  while (source.nextNode() !== null) {\n    nodes.push(source.referenceNode);\n  }\n\n  return nodes.concat(prevNodes) as T[];\n};\n\n/**\n * Focuses the provided region element.\n * If the region has an aria-label, it focuses the region directly.\n * Otherwise, it attempts to focus the highest level heading within the region,\n * or the region itself if no headings are found.\n * @param region - The region HTMLElement to focus.\n * @returns boolean indicating whether the focus was successful.\n */\nexport const focusRegion = (region: HTMLElement) => {\n  const ariaLabel = region.getAttribute('aria-label');\n\n  if (ariaLabel) {\n    return focusNonInteractiveElement(region);\n  }\n\n  return focusHeadingOrContainer(region);\n};\n"]}

package/lib/components/Avatar/Avatar.d.ts

@@ -29,14 +29,18 @@ export interface AvatarProps extends BaseProps, NoChildrenProp, TestIdProp {
     ref?: Ref<HTMLDivElement | HTMLImageElement>;
 }
 type AvatarPropsWithDefaults = PropsWithDefaults<AvatarProps, 'shape' | 'size'>;
-export declare const StyledAvatarImage: import("styled-components").StyledComponent<ForwardRefForwardPropsComponent<import("../Image").ImageProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAvatar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<AvatarPropsWithDefaults, "color" | "size" | "icon" | "backgroundColor" | "ref" | "className" | "shape" | "status" | "testId" | "imageSrc" | "onImageError"> & {
+export declare const StyledAvatarImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../Image").ImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement> & import("../../types").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
+}, never>> & string & Omit<ForwardRefForwardPropsComponent<import("../Image").ImageProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledAvatar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<AvatarPropsWithDefaults, "color" | "size" | "icon" | "backgroundColor" | "ref" | "className" | "shape" | "status" | "testId" | "imageSrc" | "onImageError"> & {
     hasSrc?: boolean;
     hasBrokenImage?: boolean;
-}, never>;
-export declare const StyledStatus: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../Badges").AlertProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+}>> & string;
+export declare const StyledStatus: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Badges").AlertProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, Pick<AvatarPropsWithDefaults, "size">>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Badges").AlertProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
-}, import("styled-components").DefaultTheme, Pick<AvatarPropsWithDefaults, "size">, never>;
+}, keyof import("react").Component<any, {}, any>>;
 declare const _default: ForwardRefForwardPropsComponent<AvatarProps> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
 };

package/lib/components/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAmB,cAAc,EAAE,MAAM,OAAO,CAAC;AAKlE,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,iBAAiB,EACjB,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAUrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACxE,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IAC9B,yDAAyD;IACzD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,gBAAgB,CAAC,CAAC;CAC9C;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAgBhF,eAAO,MAAM,iBAAiB,kKAQ7B,CAAC;AAEF,eAAO,MAAM,YAAY;aAEZ,OAAO;qBACC,OAAO;SAyE3B,CAAC;AAIF,eAAO,MAAM,YAAY;;0FA6BvB,CAAC;;;;AA+FH,wBAAqD"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAmB,cAAc,EAAE,MAAM,OAAO,CAAC;AAKlE,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,iBAAiB,EACjB,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAWrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACxE,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IAC9B,yDAAyD;IACzD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,gBAAgB,CAAC,CAAC;CAC9C;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAgBhF,eAAO,MAAM,iBAAiB;;yIAQ7B,CAAC;AAEF,eAAO,MAAM,YAAY;aAEZ,OAAO;qBACC,OAAO;YAmF3B,CAAC;AAIF,eAAO,MAAM,YAAY;;;;iDA6BvB,CAAC;;;;AA+FH,wBAAqD"}

package/lib/components/Avatar/Avatar.js

@@ -6,9 +6,10 @@ import Image from '../Image';
 import { defaultThemeProp } from '../../theme';
 import Icon, { StyledIcon } from '../Icon';
 import { Alert } from '../Badges';
+import { StyledBareButton } from '../Button/BareButton';
 import { useI18n, useTestIds } from '../../hooks';
 import { tryCatch, withTestIds } from '../../utils';
-import { readableColor } from '../../styles';
+import { readableColor, calculateForegroundColor } from '../../styles';
 import { getAvatarTestIds } from './Avatar.test-ids';
 const sizeToRem = {
     s: 1,
@@ -31,18 +32,18 @@ export const StyledAvatarImage = styled(Image) `
   height: fit-content;
   width: fit-content;
 `;
-export const StyledAvatar = styled.div(({ hasBrokenImage, hasSrc, size, shape, color, backgroundColor, theme: { base: { palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground }, 'border-radius': baseBorderRadius }, components: { avatar: { 'background-color': avatarBackground }, icon: { 'border-radius-multiplier': borderRadiusMultiplier } } } }) => {
+export const StyledAvatar = styled.div(({ hasBrokenImage, hasSrc, size, shape, color, backgroundColor, theme: { base: { palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground }, 'border-radius': baseBorderRadius }, components: { avatar: { background: avatarBackground, 'background-color': avatarBackgroundColor, 'foreground-color': avatarForegroundColor }, icon: { 'border-radius-multiplier': borderRadiusMultiplier }, button: { 'focus-shadow': focusShadow } } } }) => {
     const sizeRem = sizeToRem[size];
     const fontSize = fontSizeToRem[size];
-    let bgColor = hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor || avatarBackground;
+    let bgColor = hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor || avatarBackgroundColor;
     if (color && !backgroundColor && !(hasSrc && !hasBrokenImage))
-        bgColor = tryCatch(() => readableColor(color), () => avatarBackground);
+        bgColor = tryCatch(() => readableColor(color), () => avatarBackgroundColor);
     const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));
-    const iconColor = color || tryCatch(() => readableColor(bgColor));
+    const iconColor = color || calculateForegroundColor(bgColor, avatarForegroundColor);
     return css `
       position: relative;
       flex-shrink: 0;
-      background-color: ${bgColor};
+      background: ${avatarBackground};
       color: ${iconColor};
       width: ${sizeRem}rem;
       height: ${sizeRem}rem;
@@ -69,7 +70,7 @@ export const StyledAvatar = styled.div(({ hasBrokenImage, hasSrc, size, shape, c
         vertical-align: initial;
       }
 
-      ::after {
+      &::after {
         content: '';
         position: absolute;
         inset: 0;
@@ -77,6 +78,10 @@ export const StyledAvatar = styled.div(({ hasBrokenImage, hasSrc, size, shape, c
         pointer-events: none;
         box-shadow: inset 0 0 0 0.0625rem ${shadowColor};
       }
+
+      ${StyledBareButton}:focus > & {
+        box-shadow: ${focusShadow};
+      }
     `;
 });
 StyledAvatar.defaultProps = defaultThemeProp;
@@ -151,7 +156,7 @@ const Avatar = forwardRef(function Avatar(props, ref) {
         }
         return getInitials(name, size);
     }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);
-    return (_jsxs(StyledAvatar, { "data-testid": testIds.root, role: 'img', hasSrc: !!imageSrc, hasBrokenImage: hasBrokenImage, shape: shape, size: size, ref: ref, "aria-label": `${name}${status ? ` ${t('status')} ${status}` : ''}`, ...restProps, children: [content, status === 'active' && _jsx(StyledStatus, { size: size, variant: 'success' })] }));
+    return (_jsxs(StyledAvatar, { "data-testid": testIds.root, role: 'img', hasSrc: !!imageSrc, hasBrokenImage: hasBrokenImage, shape: shape, size: size, ref: ref, "aria-label": `${name}${status ? ` ${t('status')} ${t(status)}` : ''}`, ...restProps, children: [content, status === 'active' && _jsx(StyledStatus, { size: size, variant: 'success' })] }));
 });
 export default withTestIds(Avatar, getAvatarTestIds);
 //# sourceMappingURL=Avatar.js.map