@pega/cosmos-react-core 3.0.0-dev.16.0 → 3.0.0-dev.18.0

package/lib/components/AppShell/NavigationList.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useTheme, useArrows, useConsolidatedRef, useDirection, useUID, useI18n, useElement } from '../../hooks';
+import ExpandCollapse from '../ExpandCollapse';
+import BareButton from '../Button/BareButton';
+import Flex from '../Flex';
+import Icon from '../Icon';
+import Text from '../Text';
+import Button from '../Button';
+import Link from '../Link';
+import NavigationListItemWrapper from './NavigationListItemWrapper';
+import { StyledNavList, StyledNestedNavList, StyledAppShellNavIcon, StyledNavListItem, StyledCaseClose } from './AppShell.styles';
+import AppShellContext from './AppShellContext';
+const NavigationMenu = props => {
+    const { navOpen } = useContext(AppShellContext);
+    const { visual, primary, secondary, href, onClick, items, onDismiss, active, actions, forwardedRef, ...restProps } = props;
+    const uid = useUID();
+    const [collapsed, setCollapsed] = useState(true);
+    const toggleCollapsed = useCallback((e) => {
+        e.stopPropagation();
+        setCollapsed(state => !state);
+    }, [setCollapsed]);
+    const itemRef = useConsolidatedRef(forwardedRef);
+    const onKeyDown = useCallback(({ key }) => {
+        if (key === 'Escape') {
+            setCollapsed(true);
+            itemRef.current?.focus();
+        }
+    }, []);
+    const menuRef = useRef(null);
+    useArrows(menuRef, { selector: '[role="menuitem"]', cycle: true });
+    const { end } = useDirection();
+    return (_createElement(StyledNavListItem, { ...restProps, key: primary, nestedListCollapsed: collapsed, onKeyDown: onKeyDown, ref: menuRef },
+        _jsxs(BareButton, { id: uid, ref: itemRef, tabIndex: collapsed ? 0 : -1, "aria-expanded": !collapsed, "aria-controls": `${uid}-menu`, "aria-label": primary, onClick: toggleCollapsed, children: [visual, secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, children: [_jsx("span", { children: primary }), _jsx(Text, { variant: 'secondary', children: secondary })] })) : (_jsx("span", { children: primary })), _jsx(Icon, { name: `caret-${end}`, as: StyledAppShellNavIcon })] }),
+        _jsx(NavigationList, { id: `${uid}-menu`, nestedList: true, items: items, collapsed: !navOpen || collapsed })));
+};
+const NavigationListItem = props => {
+    const { navOpen } = useContext(AppShellContext);
+    const { visual, primary, secondary, href, onClick, items, collapseItems = false, dismissible = false, onDismiss, active, actions, forwardedRef, isMenuItem, ...restProps } = props;
+    const t = useI18n();
+    const [listItemChildren, setListItemChildren] = useElement(null);
+    const listItemRef = useConsolidatedRef(forwardedRef, setListItemChildren);
+    const hasItems = (Array.isArray(items) && items.length > 0) || (Array.isArray(actions) && actions.length > 0);
+    const compProps = {
+        onClick: (e) => {
+            e.stopPropagation();
+            onClick?.(e);
+        },
+        href,
+        'aria-label': primary
+    };
+    let caseItems;
+    if (onDismiss) {
+        caseItems = [
+            {
+                primary: t('go_to_noun', [primary]),
+                onClick
+            },
+            {
+                primary: t('dismiss_case'),
+                onClick: onDismiss
+            }
+        ];
+    }
+    let Component;
+    if (href) {
+        Component = Link;
+    }
+    else {
+        Component = BareButton;
+    }
+    useEffect(() => {
+        if (!navOpen && actions) {
+            const node = document.getElementsByTagName('body')[0];
+            const clickEvent = document.createEvent('MouseEvent');
+            clickEvent.initEvent('mousedown', true, true);
+            node.dispatchEvent(clickEvent);
+        }
+        if (navOpen && isMenuItem && listItemRef.current?.parentElement?.matches(':first-child'))
+            listItemRef.current?.focus();
+    }, [navOpen]);
+    const { end } = useDirection();
+    return (_createElement(StyledNavListItem, { ...restProps, key: primary, nestedListCollapsed: true },
+        _jsx(NavigationListItemWrapper, { tooltipLabel: secondary ? `${primary} ${secondary}` : primary, label: primary, childrenElement: listItemChildren, items: actions || items || caseItems, navOpen: navOpen, children: _jsxs(Component, { ...compProps, ref: listItemRef, ...(navOpen && isMenuItem
+                    ? { tabIndex: -1, role: 'menuitem', 'aria-label': primary }
+                    : {}), children: [visual, secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, children: [_jsx("span", { children: primary }), _jsx(Text, { variant: 'secondary', children: secondary })] })) : (_jsx("span", { children: primary })), (hasItems || actions) && _jsx(Icon, { name: `caret-${end}`, as: StyledAppShellNavIcon })] }) }),
+        dismissible && (_jsx(Button, { icon: true, variant: 'simple', as: StyledCaseClose, onClick: onDismiss, "aria-label": t('dismiss_case'), children: _jsx(Icon, { name: 'times' }) })),
+        hasItems && (
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        _jsx(NavigationList, { nestedList: true, items: actions || items, collapsed: !navOpen || collapseItems }))));
+};
+const NavigationList = props => {
+    const { items = [], nestedList, id, collapsed } = props;
+    let Component = StyledNavList;
+    let ItemComponent;
+    const { navOpen } = useContext(AppShellContext);
+    let fwdProps = {
+        collapsed: !!collapsed
+    };
+    const { base: { animation } } = useTheme();
+    if (nestedList) {
+        fwdProps = {
+            as: ExpandCollapse,
+            forwardedAs: 'ul',
+            nullWhenCollapsed: true,
+            transitionSpeed: items.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed,
+            ...fwdProps
+        };
+        Component = StyledNestedNavList;
+    }
+    return (_jsx(Component, { ...(nestedList ? { role: 'menu', id } : {}), ...fwdProps, children: items?.map(item => {
+            if (item.items && item.items.length > 0 && navOpen) {
+                ItemComponent = NavigationMenu;
+            }
+            else {
+                ItemComponent = NavigationListItem;
+            }
+            return _jsx(ItemComponent, { isMenuItem: nestedList, ...item }, item.id || item.primary);
+        }) }));
+};
+export default NavigationList;
+//# sourceMappingURL=NavigationList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ElementType,\n  FC,\n  MouseEvent,\n  MouseEventHandler,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  useTheme,\n  useArrows,\n  useConsolidatedRef,\n  useDirection,\n  useUID,\n  useI18n,\n  useElement\n} from '../../hooks';\nimport ExpandCollapse from '../ExpandCollapse';\nimport BareButton from '../Button/BareButton';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport Button from '../Button';\nimport { OmitStrict } from '../../types';\nimport { PopoverProps } from '../Popover';\nimport Link from '../Link';\n\nimport NavigationListItemWrapper from './NavigationListItemWrapper';\nimport {\n  NavListItemProps,\n  NavListItemWrapperProps,\n  NavListProps,\n  NavMenuProps\n} from './AppShell.types';\nimport {\n  StyledNavList,\n  StyledNestedNavList,\n  StyledAppShellNavIcon,\n  StyledNavListItem,\n  StyledCaseClose\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nconst NavigationMenu: FC<NavMenuProps> = props => {\n  const { navOpen } = useContext(AppShellContext);\n  const {\n    visual,\n    primary,\n    secondary,\n    href,\n    onClick,\n    items,\n    onDismiss,\n    active,\n    actions,\n    forwardedRef,\n    ...restProps\n  } = props;\n\n  const uid = useUID();\n\n  const [collapsed, setCollapsed] = useState(true);\n\n  const toggleCollapsed = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      setCollapsed(state => !state);\n    },\n    [setCollapsed]\n  );\n\n  const itemRef = useConsolidatedRef(forwardedRef);\n\n  const onKeyDown = useCallback(({ key }: KeyboardEvent) => {\n    if (key === 'Escape') {\n      setCollapsed(true);\n      itemRef.current?.focus();\n    }\n  }, []);\n\n  const menuRef = useRef<HTMLLIElement>(null);\n\n  useArrows(menuRef, { selector: '[role=\"menuitem\"]', cycle: true });\n\n  const { end } = useDirection();\n\n  return (\n    <StyledNavListItem\n      {...restProps}\n      key={primary}\n      nestedListCollapsed={collapsed}\n      onKeyDown={onKeyDown}\n      ref={menuRef}\n    >\n      <BareButton\n        id={uid}\n        ref={itemRef}\n        tabIndex={collapsed ? 0 : -1}\n        aria-expanded={!collapsed}\n        aria-controls={`${uid}-menu`}\n        aria-label={primary}\n        onClick={toggleCollapsed}\n      >\n        {visual}\n        {secondary ? (\n          <Flex container={{ direction: 'column', alignItems: 'start' }}>\n            <span>{primary}</span>\n            <Text variant='secondary'>{secondary}</Text>\n          </Flex>\n        ) : (\n          <span>{primary}</span>\n        )}\n        <Icon name={`caret-${end}`} as={StyledAppShellNavIcon} />\n      </BareButton>\n      {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}\n      <NavigationList\n        id={`${uid}-menu`}\n        nestedList\n        items={items}\n        collapsed={!navOpen || collapsed}\n      />\n    </StyledNavListItem>\n  );\n};\n\nconst NavigationListItem: FC<NavListItemProps> = props => {\n  const { navOpen } = useContext(AppShellContext);\n  const {\n    visual,\n    primary,\n    secondary,\n    href,\n    onClick,\n    items,\n    collapseItems = false,\n    dismissible = false,\n    onDismiss,\n    active,\n    actions,\n    forwardedRef,\n    isMenuItem,\n    ...restProps\n  } = props;\n\n  const t = useI18n();\n  const [listItemChildren, setListItemChildren] = useElement<HTMLElement>(null);\n  const listItemRef = useConsolidatedRef(forwardedRef, setListItemChildren);\n\n  const hasItems =\n    (Array.isArray(items) && items.length > 0) || (Array.isArray(actions) && actions.length > 0);\n  const compProps: {\n    href?: string;\n    onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;\n    actions?: NavListItemProps['actions'];\n    popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n    'aria-label'?: string;\n  } = {\n    onClick: (e: MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>) => {\n      e.stopPropagation();\n      onClick?.(e);\n    },\n    href,\n    'aria-label': primary\n  };\n\n  let caseItems: NavListItemWrapperProps['items'] | undefined;\n  if (onDismiss) {\n    caseItems = [\n      {\n        primary: t('go_to_noun', [primary]),\n        onClick\n      },\n      {\n        primary: t('dismiss_case'),\n        onClick: onDismiss\n      }\n    ];\n  }\n\n  let Component: ElementType;\n\n  if (href) {\n    Component = Link;\n  } else {\n    Component = BareButton;\n  }\n\n  useEffect(() => {\n    if (!navOpen && actions) {\n      const node = document.getElementsByTagName('body')[0];\n      const clickEvent = document.createEvent('MouseEvent');\n      clickEvent.initEvent('mousedown', true, true);\n      node.dispatchEvent(clickEvent);\n    }\n    if (navOpen && isMenuItem && listItemRef.current?.parentElement?.matches(':first-child'))\n      listItemRef.current?.focus();\n  }, [navOpen]);\n\n  const { end } = useDirection();\n\n  return (\n    <StyledNavListItem {...restProps} key={primary} nestedListCollapsed>\n      {/* forwardedRef typed as 'any' due to ambiguity of Component element type */}\n      <NavigationListItemWrapper\n        tooltipLabel={secondary ? `${primary} ${secondary}` : primary}\n        label={primary}\n        childrenElement={listItemChildren}\n        items={actions || items || caseItems}\n        navOpen={navOpen}\n      >\n        <Component\n          {...compProps}\n          ref={listItemRef as any}\n          {...(navOpen && isMenuItem\n            ? { tabIndex: -1, role: 'menuitem', 'aria-label': primary }\n            : {})}\n        >\n          {visual}\n          {secondary ? (\n            <Flex container={{ direction: 'column', alignItems: 'start' }}>\n              <span>{primary}</span>\n              <Text variant='secondary'>{secondary}</Text>\n            </Flex>\n          ) : (\n            <span>{primary}</span>\n          )}\n          {(hasItems || actions) && <Icon name={`caret-${end}`} as={StyledAppShellNavIcon} />}\n        </Component>\n      </NavigationListItemWrapper>\n      {dismissible && (\n        <Button\n          icon\n          variant='simple'\n          as={StyledCaseClose}\n          onClick={onDismiss}\n          aria-label={t('dismiss_case')}\n        >\n          <Icon name='times' />\n        </Button>\n      )}\n      {hasItems && (\n        // eslint-disable-next-line @typescript-eslint/no-use-before-define\n        <NavigationList nestedList items={actions || items} collapsed={!navOpen || collapseItems} />\n      )}\n    </StyledNavListItem>\n  );\n};\n\nconst NavigationList: FC<NavListProps> = props => {\n  const { items = [], nestedList, id, collapsed } = props;\n  let Component: ElementType = StyledNavList;\n  let ItemComponent: ElementType;\n  const { navOpen } = useContext(AppShellContext);\n\n  let fwdProps: {\n    as?: ElementType;\n    forwardedAs?: ElementType;\n    nullWhenCollapsed?: boolean;\n    transitionSpeed?: string;\n    collapsed: boolean;\n  } = {\n    collapsed: !!collapsed\n  };\n\n  const {\n    base: { animation }\n  } = useTheme();\n\n  if (nestedList) {\n    fwdProps = {\n      as: ExpandCollapse,\n      forwardedAs: 'ul',\n      nullWhenCollapsed: true,\n      transitionSpeed: items.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed,\n      ...fwdProps\n    };\n\n    Component = StyledNestedNavList;\n  }\n\n  return (\n    <Component {...(nestedList ? { role: 'menu', id } : {})} {...fwdProps}>\n      {items?.map(item => {\n        if (item.items && item.items.length > 0 && navOpen) {\n          ItemComponent = NavigationMenu;\n        } else {\n          ItemComponent = NavigationListItem;\n        }\n        return <ItemComponent key={item.id || item.primary} isMenuItem={nestedList} {...item} />;\n      })}\n    </Component>\n  );\n};\n\nexport default NavigationList;\n"]}

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { NavListItemWrapperProps } from './AppShell.types';
+declare const ListItemWrapper: FC<NavListItemWrapperProps>;
+export default ListItemWrapper;
+//# sourceMappingURL=NavigationListItemWrapper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationListItemWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA2C,MAAM,OAAO,CAAC;AAWpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AA+B3D,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,uBAAuB,CAuIhD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/AppShell/NavigationListItemWrapper.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { useDirection, useEscape, useFocusWithin, useOuterEvent, usePrevious } from '../../hooks';
+import Text from '../Text';
+import Tooltip from '../Tooltip';
+import Popover from '../Popover';
+import Menu from '../Menu';
+import { StyledMenuListContainer } from '../Menu/Menu.styles';
+import { defaultThemeProp } from '../../theme';
+import AppShellContext from './AppShellContext';
+const StyledNavigationPopover = styled.div(({ theme }) => {
+    return css `
+    background-color: ${theme.components['app-shell'].nav['background-color']};
+    &,
+    ${StyledMenuListContainer} {
+      background-color: ${theme.components['app-shell'].nav['background-color']};
+
+      header {
+        color: ${theme.base.palette.light};
+        border-bottom: none;
+      }
+    }
+
+    ${StyledMenuListContainer} li {
+      color: rgba(255, 255, 255, 0.7);
+      background-color: transparent;
+
+      &:hover,
+      &[data-current='true'] {
+        color: #ffffff;
+        background-color: rgba(255, 255, 255, 0.05);
+      }
+    }
+  `;
+});
+StyledNavigationPopover.defaultProps = defaultThemeProp;
+const ListItemWrapper = props => {
+    const { children, childrenElement, label, tooltipLabel, items = [], content, navOpen, onMenuToggle } = props;
+    const popoverRef = useRef(null);
+    const menuRef = useRef(null);
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const direction = useDirection();
+    const { menuOpen, setMenuOpen } = useContext(AppShellContext);
+    const focusWithin = useFocusWithin([popoverRef, childrenElement]);
+    const prevFocusWithin = usePrevious(focusWithin);
+    const closePopoverAndMenu = () => {
+        if (popoverOpen) {
+            setPopoverOpen(false);
+            setMenuOpen(false);
+            childrenElement?.focus();
+        }
+    };
+    useOuterEvent('click', [popoverRef?.current, menuRef?.current], () => {
+        closePopoverAndMenu();
+    });
+    const onClick = (e) => {
+        if ((items?.length || content) && !navOpen) {
+            e.stopPropagation();
+            e.preventDefault();
+            setPopoverOpen(true);
+            setMenuOpen(true);
+        }
+    };
+    const onKeyDown = (e) => {
+        if (e.key === 'Tab' && !content) {
+            setPopoverOpen(false);
+        }
+        if (e.key === 'Enter' && items.length) {
+            setPopoverOpen(true);
+        }
+    };
+    useEffect(() => {
+        childrenElement?.addEventListener('click', onClick);
+        childrenElement?.addEventListener('keydown', onKeyDown);
+        return () => {
+            childrenElement?.removeEventListener('click', onClick);
+            childrenElement?.removeEventListener('keydown', onKeyDown);
+        };
+    }, [childrenElement, navOpen, items]);
+    useEffect(() => {
+        onMenuToggle?.(popoverOpen ? 'open' : 'close');
+    }, [popoverOpen]);
+    useEffect(() => {
+        if (!focusWithin && prevFocusWithin) {
+            setPopoverOpen(false);
+        }
+    }, [focusWithin]);
+    useEscape(() => {
+        closePopoverAndMenu();
+    }, childrenElement, [childrenElement]);
+    useEscape(() => {
+        closePopoverAndMenu();
+    }, popoverRef, [popoverRef]);
+    return (_jsxs(_Fragment, { children: [children, !navOpen && (_jsxs(_Fragment, { children: [!popoverOpen && !menuOpen && (_jsx(Tooltip, { target: childrenElement, placement: direction.ltr ? 'right' : 'left', showDelay: 'none', hideDelay: 'none', children: tooltipLabel })), popoverOpen && (items.length || content) && (_jsx(Popover, { target: childrenElement, placement: direction.ltr ? 'right-start' : 'left-start', ref: popoverRef, as: StyledNavigationPopover, arrow: true, children: content || (_jsx(Menu, { mode: 'action', variant: 'flyout', focusControlEl: childrenElement, ref: menuRef, items: items.map(item => {
+                                return {
+                                    id: (item.primary || item.text),
+                                    primary: (item.primary || item.text),
+                                    href: item.href,
+                                    onClick: (id, e) => {
+                                        e.stopPropagation();
+                                        item.onClick?.(e);
+                                        setPopoverOpen(false);
+                                    }
+                                };
+                            }), header: _jsx(Text, { variant: 'h2', children: label }) })) }))] }))] }));
+};
+export default ListItemWrapper;
+//# sourceMappingURL=NavigationListItemWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationListItemWrapper.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useContext, useEffect, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useDirection, useEscape, useFocusWithin, useOuterEvent, usePrevious } from '../../hooks';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Popover from '../Popover';\nimport Menu from '../Menu';\nimport { StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { defaultThemeProp } from '../../theme';\n\nimport { NavListItemWrapperProps } from './AppShell.types';\nimport AppShellContext from './AppShellContext';\n\nconst StyledNavigationPopover = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.components['app-shell'].nav['background-color']};\n    &,\n    ${StyledMenuListContainer} {\n      background-color: ${theme.components['app-shell'].nav['background-color']};\n\n      header {\n        color: ${theme.base.palette.light};\n        border-bottom: none;\n      }\n    }\n\n    ${StyledMenuListContainer} li {\n      color: rgba(255, 255, 255, 0.7);\n      background-color: transparent;\n\n      &:hover,\n      &[data-current='true'] {\n        color: #ffffff;\n        background-color: rgba(255, 255, 255, 0.05);\n      }\n    }\n  `;\n});\n\nStyledNavigationPopover.defaultProps = defaultThemeProp;\n\nconst ListItemWrapper: FC<NavListItemWrapperProps> = props => {\n  const {\n    children,\n    childrenElement,\n    label,\n    tooltipLabel,\n    items = [],\n    content,\n    navOpen,\n    onMenuToggle\n  } = props;\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const direction = useDirection();\n  const { menuOpen, setMenuOpen } = useContext(AppShellContext);\n\n  const focusWithin = useFocusWithin([popoverRef, childrenElement]);\n  const prevFocusWithin = usePrevious(focusWithin);\n\n  const closePopoverAndMenu = () => {\n    if (popoverOpen) {\n      setPopoverOpen(false);\n      setMenuOpen(false);\n      childrenElement?.focus();\n    }\n  };\n\n  useOuterEvent('click', [popoverRef?.current, menuRef?.current], () => {\n    closePopoverAndMenu();\n  });\n\n  const onClick = (e: Event) => {\n    if ((items?.length || content) && !navOpen) {\n      e.stopPropagation();\n      e.preventDefault();\n      setPopoverOpen(true);\n      setMenuOpen(true);\n    }\n  };\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Tab' && !content) {\n      setPopoverOpen(false);\n    }\n    if (e.key === 'Enter' && items.length) {\n      setPopoverOpen(true);\n    }\n  };\n\n  useEffect(() => {\n    childrenElement?.addEventListener('click', onClick);\n    childrenElement?.addEventListener('keydown', onKeyDown);\n    return () => {\n      childrenElement?.removeEventListener('click', onClick);\n      childrenElement?.removeEventListener('keydown', onKeyDown);\n    };\n  }, [childrenElement, navOpen, items]);\n\n  useEffect(() => {\n    onMenuToggle?.(popoverOpen ? 'open' : 'close');\n  }, [popoverOpen]);\n\n  useEffect(() => {\n    if (!focusWithin && prevFocusWithin) {\n      setPopoverOpen(false);\n    }\n  }, [focusWithin]);\n\n  useEscape(\n    () => {\n      closePopoverAndMenu();\n    },\n    childrenElement,\n    [childrenElement]\n  );\n\n  useEscape(\n    () => {\n      closePopoverAndMenu();\n    },\n    popoverRef,\n    [popoverRef]\n  );\n\n  return (\n    <>\n      {children}\n      {!navOpen && (\n        <>\n          {!popoverOpen && !menuOpen && (\n            <Tooltip\n              target={childrenElement}\n              placement={direction.ltr ? 'right' : 'left'}\n              showDelay='none'\n              hideDelay='none'\n            >\n              {tooltipLabel}\n            </Tooltip>\n          )}\n          {popoverOpen && (items.length || content) && (\n            <Popover\n              target={childrenElement}\n              placement={direction.ltr ? 'right-start' : 'left-start'}\n              ref={popoverRef}\n              as={StyledNavigationPopover}\n              arrow\n            >\n              {content || (\n                <Menu\n                  mode='action'\n                  variant='flyout'\n                  focusControlEl={childrenElement as HTMLElement}\n                  ref={menuRef}\n                  items={items.map(item => {\n                    return {\n                      id: (item.primary || item.text) as string,\n                      primary: (item.primary || item.text) as string,\n                      href: item.href as string,\n                      onClick: (id, e) => {\n                        e.stopPropagation();\n                        item.onClick?.(e);\n                        setPopoverOpen(false);\n                      }\n                    };\n                  })}\n                  header={<Text variant='h2'>{label}</Text>}\n                />\n              )}\n            </Popover>\n          )}\n        </>\n      )}\n    </>\n  );\n};\n\nexport default ListItemWrapper;\n"]}

package/lib/components/AppShell/Operator.js

@@ -9,10 +9,10 @@ const Operator = forwardRef(({ children, actions, popover, as }, ref) => {
     const { navOpen } = useContext(AppShellContext);
     const buttonRef = useConsolidatedRef(ref);
     const operatorMenuItems = useMemo(() => {
-        return actions.flat().map(({ id, text, onClick: click, ...rest }) => ({
-            id,
-            primary: text,
-            onClick: click,
+        return actions.flat().map(({ id, primary, onClick: click, ...rest }) => ({
+            id: id || primary,
+            primary,
+            onClick: (menuId, e) => click?.(e),
             ...rest
         }));
     }, [actions]);

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

@@ -1 +1 @@
-{"version":3,"file":"Operator.js","sourceRoot":"","sources":["../../../src/components/AppShell/Operator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAGhD,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,EAAE,EAKM,EACV,GAAuC,EACvC,EAAE;IACF,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,OAAO,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACpE,EAAE;YACF,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,KAAK;YACd,GAAG,IAAI;SACR,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,8BACE,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,mBACC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC5B,MAAM,EACpB,OAAO,EAAE,GAAG,EAAE;oBACZ,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;gBAC3B,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;wBAAE,WAAW,CAAC,KAAK,CAAC,CAAC;gBAC7C,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;oBACX,WAAW,CAAC,KAAK,CAAC,CAAC;gBACrB,CAAC,YAEA,QAAQ,GACE,EACb,KAAC,OAAO,OAAK,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,OAAO,YAC7D,KAAC,IAAI,IACH,cAAc,EAAE,SAAS,CAAC,OAAO,IAAI,SAAS,EAC9C,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,iBAAiB;oBACxB;;uBAEG;oBACH,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;wBACpB,IACG,CAAgF;6BAC9E,MAAM,GAAG,CAAC,EACb;4BACA,WAAW,CAAC,KAAK,CAAC,CAAC;yBACpB;oBACH,CAAC,GACD,GACM,IACT,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, useState, useEffect, useContext, useMemo } from 'react';\nimport type { Ref, ReactNode, MouseEvent, UIEvent } from 'react';\n\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport type { PopoverProps } from '../Popover';\nimport Menu from '../Menu';\nimport type { AcceptedMouseEventElement } from '../Menu/Menu.types';\nimport { useConsolidatedRef } from '../../hooks';\nimport type { AsProp, OmitStrict } from '../../types';\n\nimport AppShellContext from './AppShellContext';\nimport { OperatorProps } from './AppShell.types';\n\nconst Operator = forwardRef(\n  (\n    {\n      children,\n      actions,\n      popover,\n      as\n    }: {\n      children: ReactNode;\n      actions: OperatorProps['actions'];\n      popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n    } & AsProp,\n    ref: Ref<HTMLButtonElement> | undefined\n  ) => {\n    const { navOpen } = useContext(AppShellContext);\n    const buttonRef = useConsolidatedRef(ref);\n\n    const operatorMenuItems = useMemo(() => {\n      return actions.flat().map(({ id, text, onClick: click, ...rest }) => ({\n        id,\n        primary: text,\n        onClick: click,\n        ...rest\n      }));\n    }, [actions]);\n\n    const [showMenu, setShowMenu] = useState(false);\n\n    useEffect(() => {\n      if (!navOpen) setShowMenu(false);\n    }, [navOpen]);\n\n    return (\n      <>\n        <BareButton\n          as={as}\n          ref={buttonRef}\n          aria-expanded={showMenu ? 'true' : 'false'}\n          aria-haspopup='menu'\n          onClick={() => {\n            setShowMenu(cur => !cur);\n          }}\n          onKeyDown={(e: KeyboardEvent) => {\n            if (e.key === 'Escape') setShowMenu(false);\n          }}\n          onBlur={() => {\n            setShowMenu(false);\n          }}\n        >\n          {children}\n        </BareButton>\n        <Popover {...popover} show={showMenu} target={buttonRef.current}>\n          <Menu\n            focusControlEl={buttonRef.current ?? undefined}\n            mode='action'\n            items={operatorMenuItems}\n            /**\n             * @see {@link MenuButton} implementation for explanation of conditions. This is in essence duplicated.\n             */\n            onItemClick={(_, e) => {\n              if (\n                (e as MouseEvent<AcceptedMouseEventElement> & UIEvent<AcceptedMouseEventElement>)\n                  .detail > 0\n              ) {\n                setShowMenu(false);\n              }\n            }}\n          />\n        </Popover>\n      </>\n    );\n  }\n);\n\nexport default Operator;\n"]}
+{"version":3,"file":"Operator.js","sourceRoot":"","sources":["../../../src/components/AppShell/Operator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,IAAuB,MAAM,SAAS,CAAC;AAE9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAGhD,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,EAAE,EAKM,EACV,GAAuC,EACvC,EAAE;IACF,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,OAAO,CAAC,IAAI,EAAE,CAAC,GAAG,CAAgB,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACtF,EAAE,EAAE,EAAE,IAAI,OAAO;YACjB,OAAO;YACP,OAAO,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YAClC,GAAG,IAAI;SACR,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,8BACE,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,mBACC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC5B,MAAM,EACpB,OAAO,EAAE,GAAG,EAAE;oBACZ,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;gBAC3B,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;wBAAE,WAAW,CAAC,KAAK,CAAC,CAAC;gBAC7C,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;oBACX,WAAW,CAAC,KAAK,CAAC,CAAC;gBACrB,CAAC,YAEA,QAAQ,GACE,EACb,KAAC,OAAO,OAAK,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,OAAO,YAC7D,KAAC,IAAI,IACH,cAAc,EAAE,SAAS,CAAC,OAAO,IAAI,SAAS,EAC9C,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,iBAAiB;oBACxB;;uBAEG;oBACH,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;wBACpB,IACG,CAAgF;6BAC9E,MAAM,GAAG,CAAC,EACb;4BACA,WAAW,CAAC,KAAK,CAAC,CAAC;yBACpB;oBACH,CAAC,GACD,GACM,IACT,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, useState, useEffect, useContext, useMemo } from 'react';\nimport type { Ref, ReactNode, MouseEvent, UIEvent } from 'react';\n\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport type { PopoverProps } from '../Popover';\nimport Menu, { MenuItemProps } from '../Menu';\nimport type { AcceptedMouseEventElement } from '../Menu/Menu.types';\nimport { useConsolidatedRef } from '../../hooks';\nimport type { AsProp, OmitStrict } from '../../types';\n\nimport AppShellContext from './AppShellContext';\nimport { OperatorProps } from './AppShell.types';\n\nconst Operator = forwardRef(\n  (\n    {\n      children,\n      actions,\n      popover,\n      as\n    }: {\n      children: ReactNode;\n      actions: OperatorProps['actions'];\n      popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n    } & AsProp,\n    ref: Ref<HTMLButtonElement> | undefined\n  ) => {\n    const { navOpen } = useContext(AppShellContext);\n    const buttonRef = useConsolidatedRef(ref);\n\n    const operatorMenuItems = useMemo(() => {\n      return actions.flat().map<MenuItemProps>(({ id, primary, onClick: click, ...rest }) => ({\n        id: id || primary,\n        primary,\n        onClick: (menuId, e) => click?.(e),\n        ...rest\n      }));\n    }, [actions]);\n\n    const [showMenu, setShowMenu] = useState(false);\n\n    useEffect(() => {\n      if (!navOpen) setShowMenu(false);\n    }, [navOpen]);\n\n    return (\n      <>\n        <BareButton\n          as={as}\n          ref={buttonRef}\n          aria-expanded={showMenu ? 'true' : 'false'}\n          aria-haspopup='menu'\n          onClick={() => {\n            setShowMenu(cur => !cur);\n          }}\n          onKeyDown={(e: KeyboardEvent) => {\n            if (e.key === 'Escape') setShowMenu(false);\n          }}\n          onBlur={() => {\n            setShowMenu(false);\n          }}\n        >\n          {children}\n        </BareButton>\n        <Popover {...popover} show={showMenu} target={buttonRef.current}>\n          <Menu\n            focusControlEl={buttonRef.current ?? undefined}\n            mode='action'\n            items={operatorMenuItems}\n            /**\n             * @see {@link MenuButton} implementation for explanation of conditions. This is in essence duplicated.\n             */\n            onItemClick={(_, e) => {\n              if (\n                (e as MouseEvent<AcceptedMouseEventElement> & UIEvent<AcceptedMouseEventElement>)\n                  .detail > 0\n              ) {\n                setShowMenu(false);\n              }\n            }}\n          />\n        </Popover>\n      </>\n    );\n  }\n);\n\nexport default Operator;\n"]}

package/lib/components/Badges/Keyboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Keyboard.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Keyboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAsB3C,eAAO,MAAM,cAAc,yGA+B1B,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAU7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Keyboard.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Keyboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAsB3C,eAAO,MAAM,cAAc,yGA+B1B,CAAC;AAGF,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAU7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/Badges/Keyboard.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '../../theme';
 import useOS from '../../hooks/useOS';
 const osxKeyMapper = {
     Command: '⌘',
@@ -40,6 +41,7 @@ export const StyledKeyboard = styled.kbd(({ theme: { base, components: { text: {
       inset-block-start: calc(1.25rem / 4 - 0.125rem);
     `;
 });
+StyledKeyboard.defaultProps = defaultThemeProp;
 const Keyboard = ({ keyName, ...restProps }) => {
     const { windows: isWindows } = useOS();
     return (_jsx(StyledKeyboard, { ...restProps, "aria-label": keyName, children: (isWindows && windowsKeyMapper[keyName]) ||

package/lib/components/Badges/Keyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"Keyboard.js","sourceRoot":"","sources":["../../../src/components/Badges/Keyboard.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,KAAK,MAAM,mBAAmB,CAAC;AAGtC,MAAM,YAAY,GAA8B;IAC9C,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,KAAK;CACd,CAAC;AAEF,MAAM,gBAAgB,GAA8B;IAClD,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,GAAG;IACZ,SAAS,EAAE,WAAW;CACvB,CAAC;AAEF,MAAM,gBAAgB,GAA8B;IAClD,SAAS,EAAE,OAAO;IAClB,WAAW,EAAE,OAAO;IACpB,GAAG,EAAE,QAAQ;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CACtC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EACJ,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,MAAM,EAAE,EAAE,QAAQ,EAAE,EACrB,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;0BACY,QAAQ,CAAC,kBAAkB,CAAC;eACvC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;qBAG1B,IAAI,CAAC,aAAa,CAAC;qBACnB,OAAO,CAAC,aAAa,CAAC;;;;gCAIX,QAAQ,CAAC,cAAc,CAAC;4BAC5B,IAAI,CAAC,eAAe,CAAC;;;;;;;;KAQ5C,CAAC;AACJ,CAAC,CACF,CAAC;AAMF,MAAM,QAAQ,GAAoD,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;IAC9F,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAC;IACvC,OAAO,CACL,KAAC,cAAc,OAAK,SAAS,gBAAc,OAAO,YAC/C,CAAC,SAAS,IAAI,gBAAgB,CAAC,OAAO,CAAC,CAAC;YACvC,YAAY,CAAC,OAAO,CAAC;YACrB,gBAAgB,CAAC,OAAO,CAAC;YACzB,OAAO,GACM,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport useOS from '../../hooks/useOS';\nimport { ForwardProps } from '../../types';\n\nconst osxKeyMapper: { [key: string]: string } = {\n  Command: '⌘',\n  Option: '⌥',\n  Control: '⌃',\n  Return: '↵',\n  Delete: 'Del'\n};\n\nconst windowsKeyMapper: { [key: string]: string } = {\n  Control: 'Ctrl',\n  Windows: '⊞',\n  Backspace: 'Backspace'\n};\n\nconst generalKeyMapper: { [key: string]: string } = {\n  'Page up': 'Pg up',\n  'Page down': 'Pg dn',\n  Ins: 'Insert'\n};\n\nexport const StyledKeyboard = styled.kbd(\n  ({\n    theme: {\n      base,\n      components: {\n        text: { primary },\n        badges: { keyboard }\n      }\n    }\n  }) => {\n    return css`\n      background-color: ${keyboard['background-color']};\n      color: ${base.palette['foreground-color']};\n      display: inline-block;\n      position: relative;\n      font-family: ${base['font-family']};\n      font-weight: ${primary['font-weight']};\n      overflow: hidden;\n      white-space: nowrap;\n      padding: 0.125rem;\n      border: 0.0125rem solid ${keyboard['border-color']};\n      border-radius: calc(${base['border-radius']} / 4);\n      text-transform: capitalize;\n      text-align: center;\n      min-width: 1.25rem;\n      height: 1.25rem;\n      text-overflow: ellipsis;\n      line-height: 1rem;\n      inset-block-start: calc(1.25rem / 4 - 0.125rem);\n    `;\n  }\n);\n\nexport interface KeyboardProps {\n  keyName: string;\n}\n\nconst Keyboard: FunctionComponent<KeyboardProps & ForwardProps> = ({ keyName, ...restProps }) => {\n  const { windows: isWindows } = useOS();\n  return (\n    <StyledKeyboard {...restProps} aria-label={keyName}>\n      {(isWindows && windowsKeyMapper[keyName]) ||\n        osxKeyMapper[keyName] ||\n        generalKeyMapper[keyName] ||\n        keyName}\n    </StyledKeyboard>\n  );\n};\n\nexport default Keyboard;\n"]}
+{"version":3,"file":"Keyboard.js","sourceRoot":"","sources":["../../../src/components/Badges/Keyboard.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,MAAM,mBAAmB,CAAC;AAGtC,MAAM,YAAY,GAA8B;IAC9C,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,KAAK;CACd,CAAC;AAEF,MAAM,gBAAgB,GAA8B;IAClD,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,GAAG;IACZ,SAAS,EAAE,WAAW;CACvB,CAAC;AAEF,MAAM,gBAAgB,GAA8B;IAClD,SAAS,EAAE,OAAO;IAClB,WAAW,EAAE,OAAO;IACpB,GAAG,EAAE,QAAQ;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CACtC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EACJ,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,MAAM,EAAE,EAAE,QAAQ,EAAE,EACrB,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;0BACY,QAAQ,CAAC,kBAAkB,CAAC;eACvC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;qBAG1B,IAAI,CAAC,aAAa,CAAC;qBACnB,OAAO,CAAC,aAAa,CAAC;;;;gCAIX,QAAQ,CAAC,cAAc,CAAC;4BAC5B,IAAI,CAAC,eAAe,CAAC;;;;;;;;KAQ5C,CAAC;AACJ,CAAC,CACF,CAAC;AACF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAM/C,MAAM,QAAQ,GAAoD,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;IAC9F,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAC;IACvC,OAAO,CACL,KAAC,cAAc,OAAK,SAAS,gBAAc,OAAO,YAC/C,CAAC,SAAS,IAAI,gBAAgB,CAAC,OAAO,CAAC,CAAC;YACvC,YAAY,CAAC,OAAO,CAAC;YACrB,gBAAgB,CAAC,OAAO,CAAC;YACzB,OAAO,GACM,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport useOS from '../../hooks/useOS';\nimport { ForwardProps } from '../../types';\n\nconst osxKeyMapper: { [key: string]: string } = {\n  Command: '⌘',\n  Option: '⌥',\n  Control: '⌃',\n  Return: '↵',\n  Delete: 'Del'\n};\n\nconst windowsKeyMapper: { [key: string]: string } = {\n  Control: 'Ctrl',\n  Windows: '⊞',\n  Backspace: 'Backspace'\n};\n\nconst generalKeyMapper: { [key: string]: string } = {\n  'Page up': 'Pg up',\n  'Page down': 'Pg dn',\n  Ins: 'Insert'\n};\n\nexport const StyledKeyboard = styled.kbd(\n  ({\n    theme: {\n      base,\n      components: {\n        text: { primary },\n        badges: { keyboard }\n      }\n    }\n  }) => {\n    return css`\n      background-color: ${keyboard['background-color']};\n      color: ${base.palette['foreground-color']};\n      display: inline-block;\n      position: relative;\n      font-family: ${base['font-family']};\n      font-weight: ${primary['font-weight']};\n      overflow: hidden;\n      white-space: nowrap;\n      padding: 0.125rem;\n      border: 0.0125rem solid ${keyboard['border-color']};\n      border-radius: calc(${base['border-radius']} / 4);\n      text-transform: capitalize;\n      text-align: center;\n      min-width: 1.25rem;\n      height: 1.25rem;\n      text-overflow: ellipsis;\n      line-height: 1rem;\n      inset-block-start: calc(1.25rem / 4 - 0.125rem);\n    `;\n  }\n);\nStyledKeyboard.defaultProps = defaultThemeProp;\n\nexport interface KeyboardProps {\n  keyName: string;\n}\n\nconst Keyboard: FunctionComponent<KeyboardProps & ForwardProps> = ({ keyName, ...restProps }) => {\n  const { windows: isWindows } = useOS();\n  return (\n    <StyledKeyboard {...restProps} aria-label={keyName}>\n      {(isWindows && windowsKeyMapper[keyName]) ||\n        osxKeyMapper[keyName] ||\n        generalKeyMapper[keyName] ||\n        keyName}\n    </StyledKeyboard>\n  );\n};\n\nexport default Keyboard;\n"]}

package/lib/components/Badges/Selection.d.ts

@@ -14,7 +14,7 @@ export interface SelectableProps {
     /** Event handler fired on every keyup event. */
     onKeyUp?: (event: KeyboardEvent) => void;
 }
-export declare const StyledSelectable: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSelectable: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 declare const Selectable: FC<SelectableProps & ForwardProps>;
 export default Selectable;
 //# sourceMappingURL=Selection.d.ts.map

package/lib/components/Badges/Selection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAoC,aAAa,EAAE,MAAM,OAAO,CAAC;AAIxF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAS3C,MAAM,WAAW,eAAe;IAC9B,sFAAsF;IACtF,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,iHAAiH;IACjH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,gBAAgB,yGAsD3B,CAAC;AAEH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CAyDlD,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Selection.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAoC,aAAa,EAAE,MAAM,OAAO,CAAC;AAIxF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAU3C,MAAM,WAAW,eAAe;IAC9B,sFAAsF;IACtF,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,iHAAiH;IACjH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,gBAAgB,4GAsD3B,CAAC;AAGH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CAsDlD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Badges/Selection.js

@@ -7,8 +7,9 @@ import BareButton, { StyledBareButton } from '../Button/BareButton';
 import Icon, { registerIcon, StyledIcon } from '../Icon';
 import * as timesIcon from '../Icon/icons/times.icon';
 import { useConsolidatedRef, useI18n } from '../../hooks';
+import { defaultThemeProp } from '../../theme';
 registerIcon(timesIcon);
-export const StyledSelectable = styled.div(props => {
+export const StyledSelectable = styled.button(props => {
     const { foreground, background } = props.theme.components.badges.selectable.base;
     const { dark } = props.theme.base.palette;
     const borderRadius = props.theme.base['border-radius'];
@@ -61,6 +62,7 @@ export const StyledSelectable = styled.div(props => {
     }
   `;
 });
+StyledSelectable.defaultProps = defaultThemeProp;
 const Selectable = forwardRef(({ id, children, onSelect, onRemove, onClick, onKeyUp, ...restProps }, ref) => {
     const consolidatedRef = useConsolidatedRef(ref);
     const t = useI18n();
@@ -82,7 +84,7 @@ const Selectable = forwardRef(({ id, children, onSelect, onRemove, onClick, onKe
             onRemove?.(id);
         }
     };
-    return (_jsxs(BareButton, { role: 'button', tabIndex: '0', as: StyledSelectable, ref: consolidatedRef, onClick: handleClick, onKeyUp: handleKeyUp, ...restProps, children: [children, onRemove && (_jsx(BareButton, { tabIndex: '-1', onClick: handleCloseClick, "aria-label": `${t('remove')}`, children: _jsx(Icon, { name: 'times' }) }))] }));
+    return (_jsxs(StyledSelectable, { ref: consolidatedRef, onClick: handleClick, onKeyUp: handleKeyUp, ...restProps, children: [children, onRemove && (_jsx(BareButton, { tabIndex: '-1', onClick: handleCloseClick, "aria-label": `${t('remove')}`, children: _jsx(Icon, { name: 'times' }) }))] }));
 });
 export default Selectable;
 //# sourceMappingURL=Selection.js.map

package/lib/components/Badges/Selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, MouseEvent, forwardRef, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils/utils';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { useConsolidatedRef, useI18n } from '../../hooks';\n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps {\n  /** An id that is used by the onSelect and onRemove functions if they are provided. */\n  id: string;\n  /** The content of the Badge. */\n  children: string;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is clicked. */\n  onSelect?: (id: string) => void;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */\n  onRemove?: (id: string) => void;\n  /** Event handler called when the Badge is clicked. */\n  onClick?: (event: MouseEvent) => void;\n  /** Event handler fired on every keyup event. */\n  onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.div(props => {\n  const { foreground, background } = props.theme.components.badges.selectable.base;\n  const { dark } = props.theme.base.palette;\n  const borderRadius = props.theme.base['border-radius'];\n  const { spacing } = props.theme.base;\n\n  const displayBackground = tryCatch(() => mix(0.15, background, '#ffffff'));\n  const hoverBorder = tryCatch(() => mix(0.3, background, '#ffffff'));\n  const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n  const height = 1.125;\n  return css`\n    background: ${displayBackground};\n    border: 0 solid transparent;\n    border-radius: calc(${height} * ${borderRadius});\n    color: ${foreground};\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    font-size: 0.75rem;\n    height: ${height}rem;\n    padding: 0 ${spacing};\n    min-width: max-content;\n    line-height: 1;\n\n    &:hover {\n      color: ${props.theme.base.palette.interactive};\n      box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n\n      ${StyledBareButton} {\n        color: ${props.theme.base.palette.interactive};\n      }\n    }\n\n    &:active {\n      box-shadow: inset 0 0 0 0.0625rem ${background};\n    }\n\n    &:focus {\n      color: ${props.theme.base.palette.interactive};\n      box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n      outline: none;\n\n      ${StyledBareButton} {\n        color: ${props.theme.base.palette.interactive};\n      }\n    }\n\n    ${StyledIcon} {\n      margin-inline-start: ${spacing};\n      height: 1em;\n      width: 1em;\n    }\n  `;\n});\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(\n  (\n    {\n      id,\n      children,\n      onSelect,\n      onRemove,\n      onClick,\n      onKeyUp,\n      ...restProps\n    }: PropsWithoutRef<SelectableProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const consolidatedRef = useConsolidatedRef(ref);\n    const t = useI18n();\n\n    const handleClick = (e: MouseEvent<HTMLDivElement>) => {\n      onClick?.(e);\n      onSelect?.(id);\n    };\n\n    const handleCloseClick = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      onRemove?.(id);\n    };\n\n    const handleKeyUp = (e: KeyboardEvent) => {\n      onKeyUp?.(e);\n      if (e.key === 'Enter') {\n        onSelect?.(id);\n      }\n\n      if (e.key === 'Backspace' || e.key === 'Delete') {\n        onRemove?.(id);\n      }\n    };\n\n    return (\n      <BareButton\n        role='button'\n        tabIndex='0'\n        as={StyledSelectable}\n        ref={consolidatedRef}\n        onClick={handleClick}\n        onKeyUp={handleKeyUp}\n        {...restProps}\n      >\n        {children}\n        {onRemove && (\n          <BareButton tabIndex='-1' onClick={handleCloseClick} aria-label={`${t('remove')}`}>\n            <Icon name='times' />\n          </BareButton>\n        )}\n      </BareButton>\n    );\n  }\n);\n\nexport default Selectable;\n"]}
+{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, MouseEvent, forwardRef, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils/utils';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { useConsolidatedRef, useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps {\n  /** An id that is used by the onSelect and onRemove functions if they are provided. */\n  id: string;\n  /** The content of the Badge. */\n  children: string;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is clicked. */\n  onSelect?: (id: string) => void;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */\n  onRemove?: (id: string) => void;\n  /** Event handler called when the Badge is clicked. */\n  onClick?: (event: MouseEvent) => void;\n  /** Event handler fired on every keyup event. */\n  onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.button(props => {\n  const { foreground, background } = props.theme.components.badges.selectable.base;\n  const { dark } = props.theme.base.palette;\n  const borderRadius = props.theme.base['border-radius'];\n  const { spacing } = props.theme.base;\n\n  const displayBackground = tryCatch(() => mix(0.15, background, '#ffffff'));\n  const hoverBorder = tryCatch(() => mix(0.3, background, '#ffffff'));\n  const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n  const height = 1.125;\n  return css`\n    background: ${displayBackground};\n    border: 0 solid transparent;\n    border-radius: calc(${height} * ${borderRadius});\n    color: ${foreground};\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    font-size: 0.75rem;\n    height: ${height}rem;\n    padding: 0 ${spacing};\n    min-width: max-content;\n    line-height: 1;\n\n    &:hover {\n      color: ${props.theme.base.palette.interactive};\n      box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n\n      ${StyledBareButton} {\n        color: ${props.theme.base.palette.interactive};\n      }\n    }\n\n    &:active {\n      box-shadow: inset 0 0 0 0.0625rem ${background};\n    }\n\n    &:focus {\n      color: ${props.theme.base.palette.interactive};\n      box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n      outline: none;\n\n      ${StyledBareButton} {\n        color: ${props.theme.base.palette.interactive};\n      }\n    }\n\n    ${StyledIcon} {\n      margin-inline-start: ${spacing};\n      height: 1em;\n      width: 1em;\n    }\n  `;\n});\nStyledSelectable.defaultProps = defaultThemeProp;\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(\n  (\n    {\n      id,\n      children,\n      onSelect,\n      onRemove,\n      onClick,\n      onKeyUp,\n      ...restProps\n    }: PropsWithoutRef<SelectableProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const consolidatedRef = useConsolidatedRef(ref);\n    const t = useI18n();\n\n    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(e);\n      onSelect?.(id);\n    };\n\n    const handleCloseClick = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      onRemove?.(id);\n    };\n\n    const handleKeyUp = (e: KeyboardEvent) => {\n      onKeyUp?.(e);\n      if (e.key === 'Enter') {\n        onSelect?.(id);\n      }\n\n      if (e.key === 'Backspace' || e.key === 'Delete') {\n        onRemove?.(id);\n      }\n    };\n\n    return (\n      <StyledSelectable\n        ref={consolidatedRef}\n        onClick={handleClick}\n        onKeyUp={handleKeyUp}\n        {...restProps}\n      >\n        {children}\n        {onRemove && (\n          <BareButton tabIndex='-1' onClick={handleCloseClick} aria-label={`${t('remove')}`}>\n            <Icon name='times' />\n          </BareButton>\n        )}\n      </StyledSelectable>\n    );\n  }\n);\n\nexport default Selectable;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAgBtE,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D,0CAA0C;IAC1C,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IACnD,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACrD,gEAAgE;IAChE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,yEAAyE;IACzE,EAAE,EAAE,MAAM,CAAC;IACX,iIAAiI;IACjI,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB;YAAuB,OAAO;SAS7D,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;SAmBjE,CAAC;AAIH,eAAO,MAAM,mBAAmB;YAAuB,OAAO;SAS5D,CAAC;AAIH,eAAO,MAAM,yBAAyB,yGAQpC,CAAC;AAIH,eAAO,MAAM,yBAAyB,qKAAmB,CAAC;AAE1D,eAAO,MAAM,kBAAkB,mIAkB7B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAKvB,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAqGzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAgBtE,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D,0CAA0C;IAC1C,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IACnD,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACrD,gEAAgE;IAChE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,yEAAyE;IACzE,EAAE,EAAE,MAAM,CAAC;IACX,iIAAiI;IACjI,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB;YAAuB,OAAO;SAS7D,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;SAmBjE,CAAC;AAIH,eAAO,MAAM,mBAAmB;YAAuB,OAAO;SAW5D,CAAC;AAIH,eAAO,MAAM,yBAAyB,yGAQpC,CAAC;AAIH,eAAO,MAAM,yBAAyB,qKAAmB,CAAC;AAE1D,eAAO,MAAM,kBAAkB,mIAkB7B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAKvB,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAqGzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Banner/Banner.js

@@ -48,6 +48,8 @@ StyledBannerContent.defaultProps = defaultThemeProp;
 export const StyledBannerMessage = styled.li(({ inline, theme }) => {
     return css `
     color: ${theme.base.palette['foreground-color']};
+    word-break: break-word;
+
     ${inline &&
         css `
       display: inline-block;

package/lib/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as bulbIcon from '../Icon/icons/bulb.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport Button from '../Button';\nimport { tryCatch } from '../../utils';\nimport { useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\n\nregisterIcon(timesIcon, checkIcon, bulbIcon, warnSolidIcon, flagWaveSolidIcon);\n\nexport interface BannerProps extends BaseProps, NoChildrenProp {\n  /** Controls the styling of the Banner. */\n  variant: 'urgent' | 'success' | 'warning' | 'info';\n  /**  Heading text for the Banner. */\n  heading?: string;\n  /**\n   * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n   * @default \"h2\"\n   */\n  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Pass one or more descriptive messages to inform the user. */\n  messages: string[];\n  /** ID for the Banner. Used both as onDismiss callback arg and DOM id. */\n  id: string;\n  /** Link or Button provided to the user for next steps. Link should use regular href and Button should use an onClick handler. */\n  action?: ReactNode;\n  /** Callback when user explicitly dismisses the Banner. */\n  onDismiss?: (id: string) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBannerMessages = styled.ul<{ inline: boolean }>(({ theme, inline }) => {\n  return css`\n    list-style-position: inside;\n    ${inline &&\n    css`\n      display: inline-block;\n      margin-inline-end: ${theme.base.spacing};\n    `}\n  `;\n});\n\nStyledBannerMessages.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div<{ hasDismiss: boolean }>(({ theme, hasDismiss }) => {\n  const { end } = useDirection();\n  return css`\n    position: relative;\n    padding: calc(1.5 * ${theme.base.spacing});\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n    border-top-${end}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${end}-radius: ${theme.components.card['border-radius']};\n\n    ${\n      hasDismiss &&\n      css`\n        border-inline-end: none;\n        padding-inline-end: calc(0.75 * ${theme.base.spacing});\n        border-radius: 0;\n      `\n    }\n  `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.li<{ inline: boolean }>(({ inline, theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    ${inline &&\n    css`\n      display: inline-block;\n      margin-inline-end: ${theme.base.spacing};\n    `}\n  `;\n});\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nexport const StyledBannerDismissColumn = styled.div(({ theme }) => {\n  const { end } = useDirection();\n  return css`\n    border-top-${end}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${end}-radius: ${theme.components.card['border-radius']};\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n  `;\n});\n\nStyledBannerDismissColumn.defaultProps = defaultThemeProp;\n\nexport const StyledBannerDismissButton = styled(Button)``;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n  const { background: bg } = theme.components.banner[variant];\n  const color = tryCatch(() =>\n    getContrast(bg, theme.base.palette['primary-background']) >= 3\n      ? theme.base.palette['primary-background']\n      : readableColor(bg)\n  );\n\n  const { start } = useDirection();\n\n  return css`\n    background-color: ${bg};\n    width: 3.125rem;\n    color: ${color};\n    border-top-${start}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${start}-radius: ${theme.components.card['border-radius']};\n    font-size: 1.25rem;\n  `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div(({ theme }) => {\n  return css`\n    background: ${theme.components.card.background};\n    border-radius: ${theme.components.card['border-radius']};\n  `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nconst Banner: FunctionComponent<BannerProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant,\n      heading,\n      headingTag = 'h2',\n      messages,\n      onDismiss,\n      action,\n      id,\n      ...restProps\n    }: PropsWithoutRef<BannerProps>,\n    ref: BannerProps['ref']\n  ) => {\n    const inline = messages.length === 1;\n    const singleLine = inline && !heading;\n    const hasDismiss = !!onDismiss;\n\n    let bannerIcon = 'warn-solid';\n    let role: string | undefined = 'alert';\n    let ariaLive = 'assertive';\n\n    if (variant === 'info') {\n      bannerIcon = 'bulb-solid';\n      ariaLive = 'polite';\n      role = undefined;\n    } else if (variant === 'success') {\n      bannerIcon = 'check';\n      ariaLive = 'polite';\n      role = undefined;\n    } else if (variant === 'warning') {\n      bannerIcon = 'flag-wave-solid';\n    }\n\n    const t = useI18n();\n\n    return (\n      <Flex\n        {...restProps}\n        container\n        as={StyledBanner}\n        role={role}\n        aria-live={ariaLive}\n        id={id}\n        ref={ref}\n      >\n        <Flex\n          container={{ justify: 'center', alignItems: 'center' }}\n          item={{ shrink: 0 }}\n          as={StyledBannerStatus}\n          variant={variant}\n        >\n          <Icon name={bannerIcon} />\n        </Flex>\n\n        <Flex\n          container={singleLine ? { alignItems: 'center' } : { direction: 'column', gap: 1 }}\n          item={{ grow: 1 }}\n          as={StyledBannerContent}\n          hasDismiss={hasDismiss}\n        >\n          {heading && (\n            <Text variant='h4' as={headingTag}>\n              {heading}\n            </Text>\n          )}\n\n          <StyledBannerMessages inline={inline}>\n            {messages.map((msg, index) => (\n              // eslint-disable-next-line react/no-array-index-key\n              <StyledBannerMessage key={`${msg}+${index}`} inline={inline}>\n                {msg}\n              </StyledBannerMessage>\n            ))}\n          </StyledBannerMessages>\n\n          {action}\n        </Flex>\n\n        {onDismiss && (\n          <Flex\n            container={{\n              direction: 'column',\n              justify: singleLine ? 'center' : undefined,\n              pad: [singleLine ? 0.5 : 1, 0.5, 0.5, 0]\n            }}\n            as={StyledBannerDismissColumn}\n          >\n            <StyledBannerDismissButton\n              variant='simple'\n              icon\n              onClick={() => onDismiss(id)}\n              aria-label={t('banner_dismiss_button_label_a11y')}\n            >\n              <Icon name='times' />\n            </StyledBannerDismissButton>\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default Banner;\n"]}
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as bulbIcon from '../Icon/icons/bulb.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport Button from '../Button';\nimport { tryCatch } from '../../utils';\nimport { useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\n\nregisterIcon(timesIcon, checkIcon, bulbIcon, warnSolidIcon, flagWaveSolidIcon);\n\nexport interface BannerProps extends BaseProps, NoChildrenProp {\n  /** Controls the styling of the Banner. */\n  variant: 'urgent' | 'success' | 'warning' | 'info';\n  /**  Heading text for the Banner. */\n  heading?: string;\n  /**\n   * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n   * @default \"h2\"\n   */\n  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Pass one or more descriptive messages to inform the user. */\n  messages: string[];\n  /** ID for the Banner. Used both as onDismiss callback arg and DOM id. */\n  id: string;\n  /** Link or Button provided to the user for next steps. Link should use regular href and Button should use an onClick handler. */\n  action?: ReactNode;\n  /** Callback when user explicitly dismisses the Banner. */\n  onDismiss?: (id: string) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBannerMessages = styled.ul<{ inline: boolean }>(({ theme, inline }) => {\n  return css`\n    list-style-position: inside;\n    ${inline &&\n    css`\n      display: inline-block;\n      margin-inline-end: ${theme.base.spacing};\n    `}\n  `;\n});\n\nStyledBannerMessages.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div<{ hasDismiss: boolean }>(({ theme, hasDismiss }) => {\n  const { end } = useDirection();\n  return css`\n    position: relative;\n    padding: calc(1.5 * ${theme.base.spacing});\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n    border-top-${end}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${end}-radius: ${theme.components.card['border-radius']};\n\n    ${\n      hasDismiss &&\n      css`\n        border-inline-end: none;\n        padding-inline-end: calc(0.75 * ${theme.base.spacing});\n        border-radius: 0;\n      `\n    }\n  `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.li<{ inline: boolean }>(({ inline, theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    word-break: break-word;\n\n    ${inline &&\n    css`\n      display: inline-block;\n      margin-inline-end: ${theme.base.spacing};\n    `}\n  `;\n});\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nexport const StyledBannerDismissColumn = styled.div(({ theme }) => {\n  const { end } = useDirection();\n  return css`\n    border-top-${end}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${end}-radius: ${theme.components.card['border-radius']};\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n  `;\n});\n\nStyledBannerDismissColumn.defaultProps = defaultThemeProp;\n\nexport const StyledBannerDismissButton = styled(Button)``;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n  const { background: bg } = theme.components.banner[variant];\n  const color = tryCatch(() =>\n    getContrast(bg, theme.base.palette['primary-background']) >= 3\n      ? theme.base.palette['primary-background']\n      : readableColor(bg)\n  );\n\n  const { start } = useDirection();\n\n  return css`\n    background-color: ${bg};\n    width: 3.125rem;\n    color: ${color};\n    border-top-${start}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${start}-radius: ${theme.components.card['border-radius']};\n    font-size: 1.25rem;\n  `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div(({ theme }) => {\n  return css`\n    background: ${theme.components.card.background};\n    border-radius: ${theme.components.card['border-radius']};\n  `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nconst Banner: FunctionComponent<BannerProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant,\n      heading,\n      headingTag = 'h2',\n      messages,\n      onDismiss,\n      action,\n      id,\n      ...restProps\n    }: PropsWithoutRef<BannerProps>,\n    ref: BannerProps['ref']\n  ) => {\n    const inline = messages.length === 1;\n    const singleLine = inline && !heading;\n    const hasDismiss = !!onDismiss;\n\n    let bannerIcon = 'warn-solid';\n    let role: string | undefined = 'alert';\n    let ariaLive = 'assertive';\n\n    if (variant === 'info') {\n      bannerIcon = 'bulb-solid';\n      ariaLive = 'polite';\n      role = undefined;\n    } else if (variant === 'success') {\n      bannerIcon = 'check';\n      ariaLive = 'polite';\n      role = undefined;\n    } else if (variant === 'warning') {\n      bannerIcon = 'flag-wave-solid';\n    }\n\n    const t = useI18n();\n\n    return (\n      <Flex\n        {...restProps}\n        container\n        as={StyledBanner}\n        role={role}\n        aria-live={ariaLive}\n        id={id}\n        ref={ref}\n      >\n        <Flex\n          container={{ justify: 'center', alignItems: 'center' }}\n          item={{ shrink: 0 }}\n          as={StyledBannerStatus}\n          variant={variant}\n        >\n          <Icon name={bannerIcon} />\n        </Flex>\n\n        <Flex\n          container={singleLine ? { alignItems: 'center' } : { direction: 'column', gap: 1 }}\n          item={{ grow: 1 }}\n          as={StyledBannerContent}\n          hasDismiss={hasDismiss}\n        >\n          {heading && (\n            <Text variant='h4' as={headingTag}>\n              {heading}\n            </Text>\n          )}\n\n          <StyledBannerMessages inline={inline}>\n            {messages.map((msg, index) => (\n              // eslint-disable-next-line react/no-array-index-key\n              <StyledBannerMessage key={`${msg}+${index}`} inline={inline}>\n                {msg}\n              </StyledBannerMessage>\n            ))}\n          </StyledBannerMessages>\n\n          {action}\n        </Flex>\n\n        {onDismiss && (\n          <Flex\n            container={{\n              direction: 'column',\n              justify: singleLine ? 'center' : undefined,\n              pad: [singleLine ? 0.5 : 1, 0.5, 0.5, 0]\n            }}\n            as={StyledBannerDismissColumn}\n          >\n            <StyledBannerDismissButton\n              variant='simple'\n              icon\n              onClick={() => onDismiss(id)}\n              aria-label={t('banner_dismiss_button_label_a11y')}\n            >\n              <Icon name='times' />\n            </StyledBannerDismissButton>\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default Banner;\n"]}

package/lib/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,4 +1,5 @@
 import { FunctionComponent, Ref } from 'react';
+import { DefaultTheme } from 'styled-components';
 import { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
 import { MenuItemProps } from '../Menu';
 export interface BreadcrumbsProps extends BaseProps, NoChildrenProp {
@@ -7,7 +8,7 @@ export interface BreadcrumbsProps extends BaseProps, NoChildrenProp {
     /** Ref forwarded to the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledBreadcrumbs: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledBreadcrumbs: import("styled-components").StyledComponent<"div", DefaultTheme, {
     oneItemRemaining: boolean;
 }, never>;
 declare const Breadcrumbs: FunctionComponent<BreadcrumbsProps & ForwardProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAUtE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,mHAAmH;IACnH,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB;sBAAkC,OAAO;SAoBtE,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAkHnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AACf,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAK9D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAUtE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,mHAAmH;IACnH,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAYD,eAAO,MAAM,iBAAiB;sBAAkC,OAAO;SA0BtE,CAAC;AAyBF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAwHnE,CAAC;AAEF,eAAe,WAAW,CAAC"}