@pega/cosmos-react-core 2.0.0-dev.2.0 → 2.0.0-dev.21.1

package/lib/components/AppShell/AppShellList.js

@@ -1,39 +1,40 @@
-import React from 'react';
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Alert from '../Badges/Alert';
-import BareButton from '../Button/BareButton';
+import Button from '../Button';
 import Flex from '../Flex';
-import Grid from '../Grid';
-import Icon from '../Icon';
+import Icon, { registerIcon } from '../Icon';
+import * as pinIcon from '../Icon/icons/pin.icon';
+import * as pinSolidIcon from '../Icon/icons/pin-solid.icon';
 import MetaList from '../MetaList';
-import NoItems from '../NoItems';
+import EmptyState from '../EmptyState';
 import Progress from '../Progress';
 import SummaryItem from '../SummaryItem';
 import Text from '../Text';
 import { useI18n } from '../../hooks';
-import { StyledAppShellListWrapper, StyledAppShellList, StyledAppShellSummaryItem, StyledAppShellMetaList, StyledNotificationAlert, StyledAppShellPinButton, NoItemsColorContrast, StyledAppShellListSection, StyledAppShellListHeading, StyledLoading, StyledDrawerViewAll } from './AppShell.styles';
+import { StyledAppShellListWrapper, StyledAppShellList, StyledAppShellSummaryItem, StyledAppShellMetaList, StyledNotificationPrimary, StyledNotificationSecondary, StyledAppShellPinButton, EmptyStateColorContrast, StyledAppShellListSection, StyledAppShellListHeading, StyledLoading, StyledDrawerViewAll, StyledNotificationVisual } from './AppShell.styles';
+registerIcon(pinIcon, pinSolidIcon);
 const List = ({ headingText, emptyText, items, loading = false, displayPins = false, onItemClick, onItemPinToggle, viewAll: viewAllProps }) => {
     const t = useI18n();
-    const renderContent = items.length ? (React.createElement(Flex, { as: StyledAppShellList, item: { grow: 1 } }, items.map(({ id, primary, secondary, visual, unread, href, onClick, pinned, onPinToggle, ...restProps }) => {
-        return (React.createElement(Grid, { key: id, as: 'li', container: { cols: '1fr auto' } },
-            React.createElement(SummaryItem, { ...restProps, as: StyledAppShellSummaryItem, forwardedAs: href ? 'a' : 'button', overflowStrategy: 'ellipsis', primary: primary, secondary: (secondary === null || secondary === void 0 ? void 0 : secondary.length) ? (React.createElement(MetaList, { as: StyledAppShellMetaList, items: secondary })) : undefined, visual: visual, href: href, onClick: (event) => {
-                    onClick === null || onClick === void 0 ? void 0 : onClick(id, event);
-                    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(id, event);
-                }, actions: unread ? React.createElement(Alert, { as: StyledNotificationAlert, variant: 'urgent' }) : null }),
-            displayPins && (React.createElement(BareButton, { as: StyledAppShellPinButton, onClick: () => {
-                    onPinToggle === null || onPinToggle === void 0 ? void 0 : onPinToggle(id);
-                    onItemPinToggle === null || onItemPinToggle === void 0 ? void 0 : onItemPinToggle(id);
-                } },
-                React.createElement(Icon, { name: pinned ? 'pin-solid' : 'pin' })))));
-    }))) : (React.createElement(Flex, { as: NoItemsColorContrast, container: { justify: 'center', alignItems: 'center' }, item: { grow: 1 } },
-        React.createElement(NoItems, { message: emptyText })));
-    return (React.createElement(Flex, { as: StyledAppShellListSection, container: { direction: 'column' } },
-        headingText && (React.createElement(Text, { variant: 'h3', as: StyledAppShellListHeading }, headingText)),
-        loading ? (React.createElement(Flex, { container: { justify: 'center', alignItems: 'center' }, item: { grow: 1 } },
-            React.createElement(Progress, { as: StyledLoading, placement: 'inline' }))) : (renderContent),
-        ((viewAllProps === null || viewAllProps === void 0 ? void 0 : viewAllProps.href) || (viewAllProps === null || viewAllProps === void 0 ? void 0 : viewAllProps.onClick)) && !!items.length && !loading && (React.createElement(StyledDrawerViewAll, { ...viewAllProps, as: viewAllProps.href ? 'a' : 'button' }, t('view_all')))));
+    const renderContent = items.length ? (_jsx(Flex, { as: StyledAppShellList, item: { grow: 1 }, children: items.map(({ id, primary, secondary, visual, unread, href, onClick, pinned, onPinToggle, ...restProps }) => {
+            const onSummaryItemClick = (e) => {
+                onClick?.(id, e);
+                onItemClick?.(id, e);
+            };
+            return (_jsx("li", { children: _jsx(SummaryItem, { ...restProps, as: StyledAppShellSummaryItem, forwardedAs: href ? 'a' : 'button', primary: _jsx(StyledNotificationPrimary, { unread: unread, children: primary }, void 0), secondary: secondary?.length ? (_jsx(StyledNotificationSecondary, { unread: unread, children: _jsx(MetaList, { as: StyledAppShellMetaList, items: secondary }, void 0) }, void 0)) : undefined, visual: visual || unread ? (_jsxs(StyledNotificationVisual, { unread: unread, visualIncluded: !!visual, children: [visual, " ", _jsx(Alert, { variant: 'urgent' }, void 0)] }, void 0)) : undefined, href: href, onClick: onSummaryItemClick, actions: displayPins ? (_jsx(Button, { icon: true, as: StyledAppShellPinButton, forwardedAs: 'div', onClick: () => {
+                            onPinToggle?.(id);
+                            onItemPinToggle?.(id);
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'Enter') {
+                                onPinToggle?.(id);
+                                onItemPinToggle?.(id);
+                            }
+                        }, role: 'button', tabIndex: 0, children: _jsx(Icon, { name: pinned ? 'pin-solid' : 'pin' }, void 0) }, void 0)) : undefined, tabIndex: 0 }, void 0) }, id));
+        }) }, void 0)) : (_jsx(Flex, { as: EmptyStateColorContrast, container: { justify: 'center', alignItems: 'center' }, item: { grow: 1 }, children: _jsx(EmptyState, { message: emptyText }, void 0) }, void 0));
+    return (_jsxs(Flex, { as: StyledAppShellListSection, container: { direction: 'column' }, children: [headingText && (_jsx(Text, { variant: 'h3', as: StyledAppShellListHeading, children: headingText }, void 0)), loading ? (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, item: { grow: 1 }, children: _jsx(Progress, { as: StyledLoading, placement: 'inline' }, void 0) }, void 0)) : (renderContent), (viewAllProps?.href || viewAllProps?.onClick) && !!items.length && !loading && (_jsx(StyledDrawerViewAll, { ...viewAllProps, as: viewAllProps.href ? 'a' : 'button', children: t('view_all') }, void 0))] }, void 0));
 };
 const AppShellList = ({ listView }) => {
-    return (React.createElement(Flex, { as: StyledAppShellListWrapper, container: { direction: 'column' } }, listView.map(listItem => (React.createElement(List, { ...listItem, key: listItem.id })))));
+    return (_jsx(Flex, { as: StyledAppShellListWrapper, container: { direction: 'column' }, children: listView.map(listItem => (_createElement(List, { ...listItem, key: listItem.id }))) }, void 0));
 };
 export default AppShellList;
 //# sourceMappingURL=AppShellList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppShellList.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FunctionComponent, Ref, MouseEvent, ReactNode } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport Alert from '../Badges/Alert';\nimport BareButton from '../Button/BareButton';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport Icon from '../Icon';\nimport MetaList from '../MetaList';\nimport NoItems from '../NoItems';\nimport Progress from '../Progress';\nimport SummaryItem from '../SummaryItem';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\n\nimport {\n  StyledAppShellListWrapper,\n  StyledAppShellList,\n  StyledAppShellSummaryItem,\n  StyledAppShellMetaList,\n  StyledNotificationAlert,\n  StyledAppShellPinButton,\n  NoItemsColorContrast,\n  StyledAppShellListSection,\n  StyledAppShellListHeading,\n  StyledLoading,\n  StyledDrawerViewAll\n} from './AppShell.styles';\n\ninterface ListProps {\n  /** An id representing the item. */\n  id: string;\n  ref?: Ref<HTMLDivElement>;\n  items: (AppShellListItemProps & ForwardProps)[];\n  headingText?: string;\n  emptyText: string;\n  loading?: boolean;\n  viewAll?: {\n    onClick?(e: MouseEvent): void;\n    href?: string;\n  } & ForwardProps;\n  newNotifications?: number;\n  displayPins?: boolean;\n  onItemClick?(id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void;\n  onItemPinToggle?(id: string): void;\n}\nexport interface AppShellListProps {\n  listView: ListProps[];\n}\nexport interface AppShellListItemProps extends BaseProps {\n  /** An id representing the item. */\n  id: string;\n  /** The primary text for the item. */\n  primary: string;\n  /** Secondary text that will be rendered as a Meta List. */\n  secondary?: string[];\n  /** A visual associated with the item. */\n  visual?: ReactNode;\n  /** A flag indicating if the item has been read. */\n  unread?: boolean;\n  /** Icon for displaying at the end of items  */\n  pinned?: boolean;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** The onClick handler for the item. */\n  onClick?(id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void;\n  /** The handler hat is called when a pin icon is toggled on an item. */\n  onPinToggle?(id: string): void;\n}\n\nconst List = ({\n  headingText,\n  emptyText,\n  items,\n  loading = false,\n  displayPins = false,\n  onItemClick,\n  onItemPinToggle,\n  viewAll: viewAllProps\n}: ListProps) => {\n  const t = useI18n();\n\n  const renderContent = items.length ? (\n    <Flex as={StyledAppShellList} item={{ grow: 1 }}>\n      {items.map(\n        ({\n          id,\n          primary,\n          secondary,\n          visual,\n          unread,\n          href,\n          onClick,\n          pinned,\n          onPinToggle,\n          ...restProps\n        }: AppShellListItemProps) => {\n          return (\n            <Grid key={id} as='li' container={{ cols: '1fr auto' }}>\n              <SummaryItem\n                {...restProps}\n                as={StyledAppShellSummaryItem}\n                forwardedAs={href ? 'a' : 'button'}\n                overflowStrategy='ellipsis'\n                primary={primary}\n                secondary={\n                  secondary?.length ? (\n                    <MetaList as={StyledAppShellMetaList} items={secondary} />\n                  ) : undefined\n                }\n                visual={visual}\n                href={href}\n                onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n                  onClick?.(id, event);\n                  onItemClick?.(id, event);\n                }}\n                actions={unread ? <Alert as={StyledNotificationAlert} variant='urgent' /> : null}\n              />\n              {displayPins && (\n                <BareButton\n                  as={StyledAppShellPinButton}\n                  onClick={() => {\n                    onPinToggle?.(id);\n                    onItemPinToggle?.(id);\n                  }}\n                >\n                  <Icon name={pinned ? 'pin-solid' : 'pin'} />\n                </BareButton>\n              )}\n            </Grid>\n          );\n        }\n      )}\n    </Flex>\n  ) : (\n    <Flex\n      as={NoItemsColorContrast}\n      container={{ justify: 'center', alignItems: 'center' }}\n      item={{ grow: 1 }}\n    >\n      <NoItems message={emptyText} />\n    </Flex>\n  );\n\n  return (\n    <Flex as={StyledAppShellListSection} container={{ direction: 'column' }}>\n      {headingText && (\n        <Text variant='h3' as={StyledAppShellListHeading}>\n          {headingText}\n        </Text>\n      )}\n      {loading ? (\n        <Flex container={{ justify: 'center', alignItems: 'center' }} item={{ grow: 1 }}>\n          <Progress as={StyledLoading} placement='inline' />\n        </Flex>\n      ) : (\n        renderContent\n      )}\n      {(viewAllProps?.href || viewAllProps?.onClick) && !!items.length && !loading && (\n        <StyledDrawerViewAll {...viewAllProps} as={viewAllProps.href ? 'a' : 'button'}>\n          {t('view_all')}\n        </StyledDrawerViewAll>\n      )}\n    </Flex>\n  );\n};\nconst AppShellList: FunctionComponent<AppShellListProps> = ({ listView }) => {\n  return (\n    <Flex as={StyledAppShellListWrapper} container={{ direction: 'column' }}>\n      {listView.map(listItem => (\n        <List {...listItem} key={listItem.id} />\n      ))}\n    </Flex>\n  );\n};\n\nexport default AppShellList;\n"]}
+{"version":3,"file":"AppShellList.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, Ref, MouseEvent, ReactNode, KeyboardEvent } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport Alert from '../Badges/Alert';\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as pinIcon from '../Icon/icons/pin.icon';\nimport * as pinSolidIcon from '../Icon/icons/pin-solid.icon';\nimport MetaList from '../MetaList';\nimport EmptyState from '../EmptyState';\nimport Progress from '../Progress';\nimport SummaryItem from '../SummaryItem';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\n\nimport {\n  StyledAppShellListWrapper,\n  StyledAppShellList,\n  StyledAppShellSummaryItem,\n  StyledAppShellMetaList,\n  StyledNotificationPrimary,\n  StyledNotificationSecondary,\n  StyledAppShellPinButton,\n  EmptyStateColorContrast,\n  StyledAppShellListSection,\n  StyledAppShellListHeading,\n  StyledLoading,\n  StyledDrawerViewAll,\n  StyledNotificationVisual\n} from './AppShell.styles';\n\nregisterIcon(pinIcon, pinSolidIcon);\n\ntype ListInteractionEvent = MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>;\ninterface ListProps {\n  /** An id representing the item. */\n  id: string;\n  ref?: Ref<HTMLDivElement>;\n  items: (AppShellListItemProps & ForwardProps)[];\n  headingText?: string;\n  emptyText: string;\n  loading?: boolean;\n  viewAll?: {\n    onClick?: (e: MouseEvent) => void;\n    href?: string;\n  } & ForwardProps;\n  newNotifications?: number;\n  displayPins?: boolean;\n  onItemClick?: (id: string, event: ListInteractionEvent) => void;\n  onItemPinToggle?: (id: string) => void;\n}\nexport interface AppShellListProps {\n  listView: ListProps[];\n}\nexport interface AppShellListItemProps extends BaseProps {\n  /** An id representing the item. */\n  id: string;\n  /** The primary text for the item. */\n  primary: string;\n  /** Secondary text that will be rendered as a Meta List. */\n  secondary?: string[];\n  /** A visual associated with the item. */\n  visual?: ReactNode;\n  /** A flag indicating if the item has been read. */\n  unread?: boolean;\n  /** Icon for displaying at the end of items  */\n  pinned?: boolean;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** The onClick handler for the item. */\n  onClick?: (id: string, event: ListInteractionEvent) => void;\n  /** The handler hat is called when a pin icon is toggled on an item. */\n  onPinToggle?: (id: string) => void;\n}\n\nconst List = ({\n  headingText,\n  emptyText,\n  items,\n  loading = false,\n  displayPins = false,\n  onItemClick,\n  onItemPinToggle,\n  viewAll: viewAllProps\n}: ListProps) => {\n  const t = useI18n();\n\n  const renderContent = items.length ? (\n    <Flex as={StyledAppShellList} item={{ grow: 1 }}>\n      {items.map(\n        ({\n          id,\n          primary,\n          secondary,\n          visual,\n          unread,\n          href,\n          onClick,\n          pinned,\n          onPinToggle,\n          ...restProps\n        }: AppShellListItemProps) => {\n          const onSummaryItemClick = (e: ListInteractionEvent) => {\n            onClick?.(id, e);\n            onItemClick?.(id, e);\n          };\n          return (\n            <li key={id}>\n              <SummaryItem\n                {...restProps}\n                as={StyledAppShellSummaryItem}\n                forwardedAs={href ? 'a' : 'button'}\n                primary={\n                  <StyledNotificationPrimary unread={unread}>{primary}</StyledNotificationPrimary>\n                }\n                secondary={\n                  secondary?.length ? (\n                    <StyledNotificationSecondary unread={unread}>\n                      <MetaList as={StyledAppShellMetaList} items={secondary} />\n                    </StyledNotificationSecondary>\n                  ) : undefined\n                }\n                visual={\n                  visual || unread ? (\n                    <StyledNotificationVisual unread={unread} visualIncluded={!!visual}>\n                      {visual} <Alert variant='urgent' />\n                    </StyledNotificationVisual>\n                  ) : undefined\n                }\n                href={href}\n                onClick={onSummaryItemClick}\n                actions={\n                  displayPins ? (\n                    <Button\n                      icon\n                      as={StyledAppShellPinButton}\n                      forwardedAs='div'\n                      onClick={() => {\n                        onPinToggle?.(id);\n                        onItemPinToggle?.(id);\n                      }}\n                      onKeyDown={(e: KeyboardEvent<HTMLElement>) => {\n                        if (e.key === 'Enter') {\n                          onPinToggle?.(id);\n                          onItemPinToggle?.(id);\n                        }\n                      }}\n                      role='button'\n                      tabIndex={0}\n                    >\n                      <Icon name={pinned ? 'pin-solid' : 'pin'} />\n                    </Button>\n                  ) : undefined\n                }\n                tabIndex={0}\n              />\n            </li>\n          );\n        }\n      )}\n    </Flex>\n  ) : (\n    <Flex\n      as={EmptyStateColorContrast}\n      container={{ justify: 'center', alignItems: 'center' }}\n      item={{ grow: 1 }}\n    >\n      <EmptyState message={emptyText} />\n    </Flex>\n  );\n\n  return (\n    <Flex as={StyledAppShellListSection} container={{ direction: 'column' }}>\n      {headingText && (\n        <Text variant='h3' as={StyledAppShellListHeading}>\n          {headingText}\n        </Text>\n      )}\n      {loading ? (\n        <Flex container={{ justify: 'center', alignItems: 'center' }} item={{ grow: 1 }}>\n          <Progress as={StyledLoading} placement='inline' />\n        </Flex>\n      ) : (\n        renderContent\n      )}\n      {(viewAllProps?.href || viewAllProps?.onClick) && !!items.length && !loading && (\n        <StyledDrawerViewAll {...viewAllProps} as={viewAllProps.href ? 'a' : 'button'}>\n          {t('view_all')}\n        </StyledDrawerViewAll>\n      )}\n    </Flex>\n  );\n};\nconst AppShellList: FunctionComponent<AppShellListProps> = ({ listView }) => {\n  return (\n    <Flex as={StyledAppShellListWrapper} container={{ direction: 'column' }}>\n      {listView.map(listItem => (\n        <List {...listItem} key={listItem.id} />\n      ))}\n    </Flex>\n  );\n};\n\nexport default AppShellList;\n"]}

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

@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 interface DrawerViewProps {
     content: ReactNode;
     header: string;
-    onDrawerOpen?(): void;
-    onDrawerClose?(): void;
+    onDrawerOpen?: () => void;
+    onDrawerClose?: () => void;
 }
 declare const _default: (props: DrawerViewProps) => JSX.Element;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAsB,SAAS,EAAE,MAAM,OAAO,CAAC;AAoB7D,UAAU,eAAe;IACvB,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,IAAI,IAAI,CAAC;IACtB,aAAa,CAAC,IAAI,IAAI,CAAC;CACxB;gCAEsB,eAAe;AAAtC,wBA6EE"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,SAAS,EAAE,MAAM,OAAO,CAAC;AAuBtD,UAAU,eAAe;IACvB,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;gCAEsB,eAAe;AAAtC,wBAkEE"}

package/lib/components/AppShell/Drawer.js

@@ -1,15 +1,18 @@
-import React, { useContext, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useRef } from 'react';
 import { lighten } from 'polished';
 import BareButton from '../Button/BareButton';
 import Drawer from '../Drawer';
 import Flex from '../Flex';
-import Icon from '../Icon';
+import Icon, { registerIcon } from '../Icon';
+import * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';
 import Text from '../Text';
-import { useTheme } from '../../hooks';
+import { useDirection, useI18n, useTheme } from '../../hooks';
 import Configuration from '../Configuration';
 import { tryCatch } from '../../utils';
 import AppShellContext from './AppShellContext';
 import { StyledDrawerWrapper, StyledDrawerBackButton, StyledDrawerHeading, StyledDrawerListContainer } from './AppShell.styles';
+registerIcon(arrowLeftIcon);
 export default (props) => {
     const { setDrawerOpen, drawerOpen, refocusEl, focusedImperatively } = useContext(AppShellContext);
     const { content, header, onDrawerOpen, onDrawerClose } = props;
@@ -28,27 +31,20 @@ export default (props) => {
             }
         }
     };
-    return (React.createElement(Configuration, { theme: appShellTheme },
-        React.createElement(Drawer, { as: StyledDrawerWrapper, position: 'absolute', placement: 'right', open: drawerOpen, nullWhenClosed: true, onAfterOpen: () => {
+    const { ltr, rtl } = useDirection();
+    const t = useI18n();
+    return (_jsx(Configuration, { theme: appShellTheme, children: _jsxs(Drawer, { as: StyledDrawerWrapper, position: 'absolute', placement: 'right', open: drawerOpen, nullWhenClosed: true, onAfterOpen: () => {
                 if (backButtonRef.current && document.activeElement !== backButtonRef.current) {
                     focusedImperatively.current = true;
                     backButtonRef.current.focus();
                 }
-                onDrawerOpen === null || onDrawerOpen === void 0 ? void 0 : onDrawerOpen();
+                onDrawerOpen?.();
             }, onAfterClose: () => {
                 if (refocusEl && document.activeElement !== refocusEl) {
                     focusedImperatively.current = true;
                     refocusEl.focus();
                 }
-                onDrawerClose === null || onDrawerClose === void 0 ? void 0 : onDrawerClose();
-            } },
-            React.createElement(Flex, { as: StyledDrawerHeading, container: { alignItems: 'center' } }, theme.base.rtl ? (React.createElement(React.Fragment, null,
-                React.createElement(Text, null, header),
-                React.createElement(BareButton, { as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), title: `close ${header}` },
-                    React.createElement(Icon, { name: 'arrow-left' })))) : (React.createElement(React.Fragment, null,
-                React.createElement(BareButton, { as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), title: `close ${header}` },
-                    React.createElement(Icon, { name: 'arrow-left' })),
-                React.createElement(Text, null, header)))),
-            React.createElement(Flex, { as: StyledDrawerListContainer, container: { direction: 'column' } }, content))));
+                onDrawerClose?.();
+            }, children: [_jsxs(Flex, { as: StyledDrawerHeading, container: { alignItems: 'center' }, children: [rtl && _jsx(Text, { children: header }, void 0), _jsx(BareButton, { as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), "aria-label": t('close_noun', [header]), children: _jsx(Icon, { name: 'arrow-left' }, void 0) }, void 0), ltr && _jsx(Text, { children: header }, void 0)] }, void 0), _jsx(Flex, { as: StyledDrawerListContainer, container: { direction: 'column' }, children: content }, void 0)] }, void 0) }, void 0));
 };
 //# sourceMappingURL=Drawer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useRef, ReactNode } from 'react';\nimport { lighten } from 'polished';\n\nimport BareButton from '../Button/BareButton';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport { useTheme } from '../../hooks';\nimport Configuration from '../Configuration';\nimport { tryCatch } from '../../utils';\n\nimport AppShellContext from './AppShellContext';\nimport {\n  StyledDrawerWrapper,\n  StyledDrawerBackButton,\n  StyledDrawerHeading,\n  StyledDrawerListContainer\n} from './AppShell.styles';\n\ninterface DrawerViewProps {\n  content: ReactNode;\n  header: string;\n  onDrawerOpen?(): void;\n  onDrawerClose?(): void;\n}\n\nexport default (props: DrawerViewProps) => {\n  const { setDrawerOpen, drawerOpen, refocusEl, focusedImperatively } = useContext(AppShellContext);\n  const { content, header, onDrawerOpen, onDrawerClose } = props;\n  const theme = useTheme();\n\n  const backButtonRef = useRef<HTMLButtonElement>(null);\n  const appShellBg = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n  const appShellTheme = {\n    base: {\n      palette: {\n        'primary-background': appShellBg,\n        'foreground-color': 'rgba(255, 255, 255, 0.7)',\n        interactive: theme.base.colors.blue.light\n      },\n      shadow: {\n        focus: theme.base.shadow['focus-inverted']\n      }\n    }\n  };\n  return (\n    <Configuration theme={appShellTheme}>\n      <Drawer\n        as={StyledDrawerWrapper}\n        position='absolute'\n        placement='right'\n        open={drawerOpen}\n        nullWhenClosed\n        onAfterOpen={() => {\n          if (backButtonRef.current && document.activeElement !== backButtonRef.current) {\n            focusedImperatively.current = true;\n            backButtonRef.current.focus();\n          }\n          onDrawerOpen?.();\n        }}\n        onAfterClose={() => {\n          if (refocusEl && document.activeElement !== refocusEl) {\n            focusedImperatively.current = true;\n            refocusEl.focus();\n          }\n          onDrawerClose?.();\n        }}\n      >\n        <Flex as={StyledDrawerHeading} container={{ alignItems: 'center' }}>\n          {theme.base.rtl ? (\n            <>\n              <Text>{header}</Text>\n              <BareButton\n                as={StyledDrawerBackButton}\n                ref={backButtonRef}\n                onClick={() => setDrawerOpen(false)}\n                title={`close ${header}`}\n              >\n                <Icon name='arrow-left' />\n              </BareButton>\n            </>\n          ) : (\n            <>\n              <BareButton\n                as={StyledDrawerBackButton}\n                ref={backButtonRef}\n                onClick={() => setDrawerOpen(false)}\n                title={`close ${header}`}\n              >\n                <Icon name='arrow-left' />\n              </BareButton>\n              <Text>{header}</Text>\n            </>\n          )}\n        </Flex>\n        <Flex as={StyledDrawerListContainer} container={{ direction: 'column' }}>\n          {content}\n        </Flex>\n      </Drawer>\n    </Configuration>\n  );\n};\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useRef, ReactNode } from 'react';\nimport { lighten } from 'polished';\n\nimport BareButton from '../Button/BareButton';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';\nimport Text from '../Text';\nimport { useDirection, useI18n, useTheme } from '../../hooks';\nimport Configuration from '../Configuration';\nimport { tryCatch } from '../../utils';\n\nimport AppShellContext from './AppShellContext';\nimport {\n  StyledDrawerWrapper,\n  StyledDrawerBackButton,\n  StyledDrawerHeading,\n  StyledDrawerListContainer\n} from './AppShell.styles';\n\nregisterIcon(arrowLeftIcon);\n\ninterface DrawerViewProps {\n  content: ReactNode;\n  header: string;\n  onDrawerOpen?: () => void;\n  onDrawerClose?: () => void;\n}\n\nexport default (props: DrawerViewProps) => {\n  const { setDrawerOpen, drawerOpen, refocusEl, focusedImperatively } = useContext(AppShellContext);\n  const { content, header, onDrawerOpen, onDrawerClose } = props;\n  const theme = useTheme();\n\n  const backButtonRef = useRef<HTMLButtonElement>(null);\n  const appShellBg = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n  const appShellTheme = {\n    base: {\n      palette: {\n        'primary-background': appShellBg,\n        'foreground-color': 'rgba(255, 255, 255, 0.7)',\n        interactive: theme.base.colors.blue.light\n      },\n      shadow: {\n        focus: theme.base.shadow['focus-inverted']\n      }\n    }\n  };\n\n  const { ltr, rtl } = useDirection();\n  const t = useI18n();\n\n  return (\n    <Configuration theme={appShellTheme}>\n      <Drawer\n        as={StyledDrawerWrapper}\n        position='absolute'\n        placement='right'\n        open={drawerOpen}\n        nullWhenClosed\n        onAfterOpen={() => {\n          if (backButtonRef.current && document.activeElement !== backButtonRef.current) {\n            focusedImperatively.current = true;\n            backButtonRef.current.focus();\n          }\n          onDrawerOpen?.();\n        }}\n        onAfterClose={() => {\n          if (refocusEl && document.activeElement !== refocusEl) {\n            focusedImperatively.current = true;\n            refocusEl.focus();\n          }\n          onDrawerClose?.();\n        }}\n      >\n        <Flex as={StyledDrawerHeading} container={{ alignItems: 'center' }}>\n          {rtl && <Text>{header}</Text>}\n          <BareButton\n            as={StyledDrawerBackButton}\n            ref={backButtonRef}\n            onClick={() => setDrawerOpen(false)}\n            aria-label={t('close_noun', [header])}\n          >\n            <Icon name='arrow-left' />\n          </BareButton>\n          {ltr && <Text>{header}</Text>}\n        </Flex>\n        <Flex as={StyledDrawerListContainer} container={{ direction: 'column' }}>\n          {content}\n        </Flex>\n      </Drawer>\n    </Configuration>\n  );\n};\n"]}

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { PopoverProps } from '../Popover';
+import type { AsProp, OmitStrict } from '../../types';
+import { OperatorProps } from './AppShell.types';
+declare const Operator: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+    actions: OperatorProps['actions'];
+    popover?: OmitStrict<PopoverProps<string>, "show" | "children" | "target"> | undefined;
+} & AsProp & import("react").RefAttributes<HTMLButtonElement>>;
+export default Operator;
+//# sourceMappingURL=Operator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Operator.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Operator.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAO,SAAS,EAAuB,MAAM,OAAO,CAAC;AAIjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI/C,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,QAAA,MAAM,QAAQ;cAQE,SAAS;aACV,aAAa,CAAC,SAAS,CAAC;;8DA6DtC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/AppShell/Operator.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect, useContext, useMemo } from 'react';
+import BareButton from '../Button/BareButton';
+import Popover from '../Popover';
+import Menu from '../Menu';
+import { useConsolidatedRef } from '../../hooks';
+import AppShellContext from './AppShellContext';
+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,
+            ...rest
+        }));
+    }, [actions]);
+    const [showMenu, setShowMenu] = useState(false);
+    useEffect(() => {
+        if (!navOpen)
+            setShowMenu(false);
+    }, [navOpen]);
+    return (_jsxs(_Fragment, { children: [_jsx(BareButton, { as: as, ref: buttonRef, onClick: () => {
+                    setShowMenu(cur => !cur);
+                }, onKeyDown: (e) => {
+                    if (e.key === 'Escape')
+                        setShowMenu(false);
+                }, onBlur: () => {
+                    setShowMenu(false);
+                }, children: children }, void 0), _jsx(Popover, { ...popover, show: showMenu, target: buttonRef.current, children: _jsx(Menu, { focusControlEl: buttonRef.current ?? undefined, mode: 'action', items: operatorMenuItems, 
+                    /**
+                     * @see {@link MenuButton} implementation for explanation of conditions. This is in essence duplicated.
+                     */
+                    onItemClick: (_, e) => {
+                        if (e
+                            .detail > 0) {
+                            setShowMenu(false);
+                        }
+                    } }, void 0) }, void 0)] }, void 0));
+});
+export default Operator;
+//# sourceMappingURL=Operator.js.map

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

@@ -0,0 +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,EACd,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,WACE,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,WACD,WACM,YACT,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          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/AppShell/SkipNavigation.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-export declare const StyledSkipNavigation: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: import("../Popover").PopoverProps<Modifiers> & import("../..").ForwardProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null), import("styled-components").DefaultTheme, {}, never>;
-declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+export declare const StyledSkipNavigation: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: import("../Popover").PopoverProps<Modifiers> & import("../..").ForwardProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null), import("styled-components").DefaultTheme, {}, never>;
+declare const _default: import("react").MemoExoticComponent<() => JSX.Element>;
 export default _default;
 //# sourceMappingURL=SkipNavigation.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SkipNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/SkipNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAUjD,eAAO,MAAM,oBAAoB,0SAiB/B,CAAC;;AAIH,wBAwDG"}
+{"version":3,"file":"SkipNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/SkipNavigation.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB,8TAkB/B,CAAC;;AA2BH,wBAyBG"}

package/lib/components/AppShell/SkipNavigation.js

@@ -1,17 +1,19 @@
-import React, { useCallback, memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
 import styled, { css } from 'styled-components';
 import { hideVisually } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import { documentIsAvailable } from '../../utils';
-import { useI18n, useUID } from '../../hooks';
-import Menu from '../Menu';
+import { useI18n } from '../../hooks';
+import Button from '../Button';
 import Popover from '../Popover';
 export const StyledSkipNavigation = styled(Popover)(props => {
-    const { theme: { base: { 'z-index': zIndexes } } } = props;
-    const z = Math.max(...Object.values(zIndexes)) + 1;
+    const { theme: { base: { 'z-index': zIndices, spacing } } } = props;
+    const z = Math.max(...Object.values(zIndices)) + 1;
     return css `
     position: fixed;
     z-index: ${z};
+    padding: ${spacing};
 
     &:not(:focus-within) {
       ${hideVisually()}
@@ -19,43 +21,32 @@ export const StyledSkipNavigation = styled(Popover)(props => {
   `;
 });
 StyledSkipNavigation.defaultProps = defaultThemeProp;
-export default memo(() => {
-    const onClick = useCallback(() => {
-        const main = documentIsAvailable ? document.querySelector('main') : false;
-        if (!main)
-            return;
-        const heading = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce((el, tag) => el !== null && el !== void 0 ? el : main.querySelector(tag), null);
-        main.setAttribute('tabindex', '-1');
-        if (heading === null || heading === void 0 ? void 0 : heading.textContent)
-            main.setAttribute('aria-label', heading.textContent);
-        main.style.outline = 'none';
-        main.focus();
+const onClick = () => {
+    const main = documentIsAvailable ? document.querySelector('main') : null;
+    if (!main)
+        return;
+    const heading = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce((el, tag) => el ?? main.querySelector(tag), null);
+    if (heading?.textContent && main.getAttribute('aria-label') === null) {
+        main.setAttribute('aria-label', heading.textContent);
         main.addEventListener('focusout', () => {
-            main.removeAttribute('tabindex');
             main.removeAttribute('aria-label');
-            main.style.outline = '';
         }, { once: true });
-    }, []);
-    return (React.createElement(StyledSkipNavigation, { show: true, placement: 'bottom-end', target: {
-            getBoundingClientRect() {
-                return {
-                    height: 0,
-                    width: 0,
-                    x: 20,
-                    y: 20,
-                    top: 20,
-                    bottom: 20,
-                    left: 20,
-                    right: 20
-                };
-            }
-        } },
-        React.createElement(Menu, { items: [
-                {
-                    id: useUID(),
-                    primary: useI18n()('go_to_main_content'),
-                    onClick
-                }
-            ] })));
+    }
+    main.focus();
+};
+export default memo(() => {
+    const t = useI18n();
+    return (_jsx(StyledSkipNavigation, { show: true, placement: 'bottom-end', target: {
+            getBoundingClientRect: () => ({
+                height: 0,
+                width: 0,
+                x: 24,
+                y: 24,
+                top: 24,
+                bottom: 24,
+                left: 24,
+                right: 24
+            })
+        }, children: _jsx(Button, { variant: 'link', onClick: onClick, children: t('go_to_main_content') }, void 0) }, void 0));
 });
 //# sourceMappingURL=SkipNavigation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SkipNavigation.js","sourceRoot":"","sources":["../../../src/components/AppShell/SkipNavigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, memo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { documentIsAvailable } from '../../utils';\nimport { useI18n, useUID } from '../../hooks';\nimport Menu from '../Menu';\nimport Popover from '../Popover';\n\nexport const StyledSkipNavigation = styled(Popover)(props => {\n  const {\n    theme: {\n      base: { 'z-index': zIndexes }\n    }\n  } = props;\n\n  const z = Math.max(...Object.values(zIndexes)) + 1;\n\n  return css`\n    position: fixed;\n    z-index: ${z};\n\n    &:not(:focus-within) {\n      ${hideVisually()}\n    }\n  `;\n});\n\nStyledSkipNavigation.defaultProps = defaultThemeProp;\n\nexport default memo(() => {\n  const onClick = useCallback(() => {\n    const main = documentIsAvailable ? document.querySelector('main') : false;\n    if (!main) return;\n\n    const heading = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce<HTMLHeadingElement | null>(\n      (el, tag) => el ?? main.querySelector<HTMLHeadingElement>(tag),\n      null\n    );\n\n    main.setAttribute('tabindex', '-1');\n    if (heading?.textContent) main.setAttribute('aria-label', heading.textContent);\n    main.style.outline = 'none';\n    main.focus();\n\n    main.addEventListener(\n      'focusout',\n      () => {\n        main.removeAttribute('tabindex');\n        main.removeAttribute('aria-label');\n        main.style.outline = '';\n      },\n      { once: true }\n    );\n  }, []);\n\n  return (\n    <StyledSkipNavigation\n      show\n      placement='bottom-end'\n      target={{\n        getBoundingClientRect() {\n          return {\n            height: 0,\n            width: 0,\n            x: 20,\n            y: 20,\n            top: 20,\n            bottom: 20,\n            left: 20,\n            right: 20\n          };\n        }\n      }}\n    >\n      <Menu\n        items={[\n          {\n            id: useUID(),\n            primary: useI18n()('go_to_main_content'),\n            onClick\n          }\n        ]}\n      />\n    </StyledSkipNavigation>\n  );\n});\n"]}
+{"version":3,"file":"SkipNavigation.js","sourceRoot":"","sources":["../../../src/components/AppShell/SkipNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,EAAE;IAC1D,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,EACvC,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC;IAEnD,OAAO,GAAG,CAAA;;eAEG,CAAC;eACD,OAAO;;;QAGd,YAAY,EAAE;;GAEnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,OAAO,GAAG,GAAG,EAAE;IACnB,MAAM,IAAI,GAAG,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACzE,IAAI,CAAC,IAAI;QAAE,OAAO;IAElB,MAAM,OAAO,GAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAW,CAAC,MAAM,CACpE,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,IAAI,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAC1C,IAAI,CACL,CAAC;IAEF,IAAI,OAAO,EAAE,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,IAAI,EAAE;QACpE,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QACrD,IAAI,CAAC,gBAAgB,CACnB,UAAU,EACV,GAAG,EAAE;YACH,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QACrC,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;KACH;IAED,IAAI,CAAC,KAAK,EAAE,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC,GAAG,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,oBAAoB,IACnB,IAAI,QACJ,SAAS,EAAC,YAAY,EACtB,MAAM,EAAE;YACN,qBAAqB,EAAE,GAAG,EAAE,CAAC,CAAC;gBAC5B,MAAM,EAAE,CAAC;gBACT,KAAK,EAAE,CAAC;gBACR,CAAC,EAAE,EAAE;gBACL,CAAC,EAAE,EAAE;gBACL,GAAG,EAAE,EAAE;gBACP,MAAM,EAAE,EAAE;gBACV,IAAI,EAAE,EAAE;gBACR,KAAK,EAAE,EAAE;aACV,CAAC;SACH,YAED,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,YACpC,CAAC,CAAC,oBAAoB,CAAC,WACjB,WACY,CACxB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { memo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { documentIsAvailable } from '../../utils';\nimport { useI18n } from '../../hooks';\nimport Button from '../Button';\nimport Popover from '../Popover';\n\nexport const StyledSkipNavigation = styled(Popover)(props => {\n  const {\n    theme: {\n      base: { 'z-index': zIndices, spacing }\n    }\n  } = props;\n\n  const z = Math.max(...Object.values(zIndices)) + 1;\n\n  return css`\n    position: fixed;\n    z-index: ${z};\n    padding: ${spacing};\n\n    &:not(:focus-within) {\n      ${hideVisually()}\n    }\n  `;\n});\n\nStyledSkipNavigation.defaultProps = defaultThemeProp;\n\nconst onClick = () => {\n  const main = documentIsAvailable ? document.querySelector('main') : null;\n  if (!main) return;\n\n  const heading = (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const).reduce<HTMLHeadingElement | null>(\n    (el, tag) => el ?? main.querySelector(tag),\n    null\n  );\n\n  if (heading?.textContent && main.getAttribute('aria-label') === null) {\n    main.setAttribute('aria-label', heading.textContent);\n    main.addEventListener(\n      'focusout',\n      () => {\n        main.removeAttribute('aria-label');\n      },\n      { once: true }\n    );\n  }\n\n  main.focus();\n};\n\nexport default memo(() => {\n  const t = useI18n();\n\n  return (\n    <StyledSkipNavigation\n      show\n      placement='bottom-end'\n      target={{\n        getBoundingClientRect: () => ({\n          height: 0,\n          width: 0,\n          x: 24,\n          y: 24,\n          top: 24,\n          bottom: 24,\n          left: 24,\n          right: 24\n        })\n      }}\n    >\n      <Button variant='link' onClick={onClick}>\n        {t('go_to_main_content')}\n      </Button>\n    </StyledSkipNavigation>\n  );\n});\n"]}

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

@@ -1,6 +1,5 @@
 export { default } from './AppShell';
-export { AppShellProps } from './AppShell';
-export { default as AppShellList } from './AppShellList';
-export { AppShellListProps } from './AppShellList';
+export { default as AppShellList, AppShellListProps } from './AppShellList';
+export { AppHeaderProps, AppShellProps, AppShellDrawerProps, DrawerItemProps, DrawerListProps } from './AppShell.types';
 export { default as SkipNavigation } from './SkipNavigation';
 //# 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,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,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,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EACL,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,eAAe,EACf,eAAe,EAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

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;AAErC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default } from './AppShell';\nexport { AppShellProps } from './AppShell';\nexport { default as AppShellList } from './AppShellList';\nexport { AppShellListProps } from './AppShellList';\nexport { default as SkipNavigation } from './SkipNavigation';\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,EAAqB,MAAM,gBAAgB,CAAC;AAQ5E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default } from './AppShell';\nexport { default as AppShellList, AppShellListProps } from './AppShellList';\nexport {\n  AppHeaderProps,\n  AppShellProps,\n  AppShellDrawerProps,\n  DrawerItemProps,\n  DrawerListProps\n} from './AppShell.types';\nexport { default as SkipNavigation } from './SkipNavigation';\n"]}

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

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, Ref, SyntheticEvent } from 'react';
+import { FunctionComponent, Ref, SyntheticEvent } from 'react';
 import { BaseProps, ForwardProps, PropsWithDefaults, NoChildrenProp, OmitStrict } from '../../types';
 export interface AvatarProps extends BaseProps, NoChildrenProp {
     /** The name of the identity the Avatar represents. */
@@ -18,14 +18,14 @@ export interface AvatarProps extends BaseProps, NoChildrenProp {
      */
     size?: 's' | 'm' | 'l';
     /** If defined, will render status icon on the avatar. */
-    status?: 'inactive' | 'active';
+    status?: 'active';
     /** Optional error handler in the event an image fails to load. */
     onImageError?: (err: SyntheticEvent<HTMLImageElement>) => void;
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLDivElement | HTMLImageElement>;
 }
 declare type AvatarPropsWithDefaults = PropsWithDefaults<AvatarProps, 'shape' | 'size'>;
-export declare const StyledAvatarImage: import("styled-components").StyledComponent<React.FunctionComponent<import("../Image").ImageProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAvatarImage: import("styled-components").StyledComponent<FunctionComponent<import("../Image").ImageProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledAvatar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, OmitStrict<AvatarPropsWithDefaults, "children" | "name"> & {
     hasSrc?: boolean | undefined;
     hasBrokenImage?: boolean | undefined;

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":"AAAA,OAAO,KAAK,EAAE,EACZ,iBAAiB,EAEjB,GAAG,EAEH,cAAc,EAIf,MAAM,OAAO,CAAC;AAKf,OAAO,EACL,SAAS,EACT,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,UAAU,EACX,MAAM,aAAa,CAAC;AAOrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D,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;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,yDAAyD;IACzD,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC/B,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,aAAK,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAoBhF,eAAO,MAAM,iBAAiB,yKAK7B,CAAC;AAEF,eAAO,MAAM,YAAY;;;SA+DxB,CAAC;AAIF,eAAO,MAAM,YAAY,4IA0BvB,CAAC;AAmBH;;;;GAIG;AACH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAgEzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAEjB,GAAG,EAEH,cAAc,EAIf,MAAM,OAAO,CAAC;AAKf,OAAO,EACL,SAAS,EACT,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,UAAU,EACX,MAAM,aAAa,CAAC;AAOrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D,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;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,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,aAAK,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAoBhF,eAAO,MAAM,iBAAiB,mKAM7B,CAAC;AAEF,eAAO,MAAM,YAAY;;;SAgExB,CAAC;AAIF,eAAO,MAAM,YAAY,4IA0BvB,CAAC;AAmBH;;;;GAIG;AACH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAyDzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Avatar/Avatar.js

@@ -1,4 +1,5 @@
-import React, { forwardRef, useState, useEffect, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { readableColor, rgba } from 'polished';
 import Image from '../Image';
@@ -10,7 +11,7 @@ import { tryCatch } from '../../utils';
 const sizeToRem = {
     s: 1,
     m: 2,
-    l: 2.75
+    l: 2.5
 };
 const fontSizeToRem = {
     s: 0.5625,
@@ -25,6 +26,7 @@ const sizeToBorderRadius = {
 export const StyledAvatarImage = styled(Image) `
   min-height: 100%;
   min-width: 100%;
+  aspect-ratio: 1 / 1;
   object-fit: cover;
   border-radius: inherit;
 `;
@@ -46,6 +48,7 @@ export const StyledAvatar = styled.div(({ hasBrokenImage, hasSrc, size, shape, t
       text-transform: uppercase;
       line-height: ${sizeRem}rem;
       text-align: center;
+      vertical-align: top;
       display: inline-block;
       border-radius: 100%;
       user-select: none;
@@ -127,21 +130,19 @@ const Avatar = forwardRef((props, ref) => {
     }, [imageSrc]);
     const content = useMemo(() => {
         if (icon) {
-            return React.createElement(Icon, { name: icon });
+            return _jsx(Icon, { name: icon }, void 0);
         }
         if (imageSrc && !hasBrokenImage) {
-            return (React.createElement(StyledAvatarImage, { src: imageSrc, alt: name, onError: (e) => {
+            return (_jsx(StyledAvatarImage, { src: imageSrc, alt: name, onError: (e) => {
                     setHasBrokenImage(true);
-                    onImageError === null || onImageError === void 0 ? void 0 : onImageError(e);
+                    onImageError?.(e);
                 }, onLoad: () => {
                     setHasBrokenImage(false);
-                } }));
+                } }, void 0));
         }
         return getInitials(name, size);
     }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);
-    return (React.createElement(StyledAvatar, { role: 'img', hasSrc: !!imageSrc, hasBrokenImage: hasBrokenImage, shape: shape, size: size, title: name, ref: ref, "aria-label": `${name}${status ? ` ${t('status')} ${status}` : ''}`, ...restProps },
-        content,
-        status ? (React.createElement(Alert, { as: StyledStatus, size: size, variant: status === 'active' ? 'success' : 'urgent' })) : null));
+    return (_jsxs(StyledAvatar, { 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(Alert, { as: StyledStatus, size: size, variant: 'success' }, void 0)] }, void 0));
 });
 export default Avatar;
 //# sourceMappingURL=Avatar.js.map