@pega/cosmos-react-core 2.2.1 → 2.2.4

package/lib/components/AppShell/Drawer.js

@@ -0,0 +1,50 @@
+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, { registerIcon } from '../Icon';
+import * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';
+import Text from '../Text';
+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;
+    const theme = useTheme();
+    const backButtonRef = useRef(null);
+    const appShellBg = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
+    const appShellTheme = {
+        base: {
+            palette: {
+                'primary-background': appShellBg,
+                'foreground-color': 'rgba(255, 255, 255, 0.7)',
+                interactive: theme.base.colors.blue.light
+            },
+            shadow: {
+                focus: theme.base.shadow['focus-inverted']
+            }
+        }
+    };
+    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?.();
+            }, onAfterClose: () => {
+                if (refocusEl && document.activeElement !== refocusEl) {
+                    focusedImperatively.current = true;
+                    refocusEl.focus();
+                }
+                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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,52 @@
+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 } from '../../hooks';
+import Button from '../Button';
+import Popover from '../Popover';
+export const StyledSkipNavigation = styled(Popover)(props => {
+    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()}
+    }
+  `;
+});
+StyledSkipNavigation.defaultProps = defaultThemeProp;
+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('aria-label');
+        }, { once: true });
+    }
+    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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,6 @@
+export { default } from './AppShell';
+export { default as AppShellList, AppShellListProps } from './AppShellList';
+export { AppHeaderProps, AppShellProps, AppShellDrawerProps, DrawerItemProps, DrawerListProps } from './AppShell.types';
+export { default as SkipNavigation } from './SkipNavigation';
+export { default as AppShellContext } from './AppShellContext';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,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;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/components/AppShell/index.js

@@ -0,0 +1,5 @@
+export { default } from './AppShell';
+export { default as AppShellList } from './AppShellList';
+export { default as SkipNavigation } from './SkipNavigation';
+export { default as AppShellContext } from './AppShellContext';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAqB,MAAM,gBAAgB,CAAC;AAQ5E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,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';\nexport { default as AppShellContext } from './AppShellContext';\n"]}

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

@@ -0,0 +1,41 @@
+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. */
+    name: string;
+    /** Content of the Avatar as an image source url. */
+    imageSrc?: string;
+    /** An icon to render as the content of the avatar. imageSrc will take precedence if passed. */
+    icon?: string;
+    /**
+     * Shape of the Avatar.
+     * @default "circle"
+     */
+    shape?: 'circle' | 'squircle';
+    /**
+     * Avatar size.
+     * @default "m"
+     */
+    size?: 's' | 'm' | 'l';
+    /** If defined, will render status icon on the avatar. */
+    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<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;
+}, never>;
+export declare const StyledStatus: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<AvatarPropsWithDefaults, "size">, never>;
+/**
+ * Generally, avatars are used to distinguish between different operators and
+ * objects when they are shown in a list or in a small space. Users of applications
+ * can upload a custom avatar of their choice.
+ */
+declare const Avatar: FunctionComponent<AvatarProps & ForwardProps>;
+export default Avatar;
+//# sourceMappingURL=Avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,148 @@
+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';
+import { defaultThemeProp } from '../../theme';
+import Icon, { StyledIcon } from '../Icon';
+import { Alert } from '../Badges';
+import { useI18n } from '../../hooks';
+import { tryCatch } from '../../utils';
+const sizeToRem = {
+    s: 1,
+    m: 2,
+    l: 2.5
+};
+const fontSizeToRem = {
+    s: 0.5625,
+    m: 0.8125,
+    l: 1
+};
+const sizeToBorderRadius = {
+    s: 0.25,
+    m: 0.5,
+    l: 1
+};
+export const StyledAvatarImage = styled(Image) `
+  min-height: 100%;
+  min-width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  border-radius: inherit;
+`;
+export const StyledAvatar = styled.div(({ hasBrokenImage, hasSrc, size, shape, theme: { base: { palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground } }, components: { avatar } } }) => {
+    const sizeRem = sizeToRem[size];
+    const fontSize = fontSizeToRem[size];
+    const backgroundColor = hasSrc && !hasBrokenImage ? primaryBackground : avatar['background-color'];
+    const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));
+    const color = tryCatch(() => readableColor(avatar['background-color']));
+    return css `
+      position: relative;
+      background-color: ${backgroundColor};
+      color: ${color};
+      width: ${sizeRem}rem;
+      height: ${sizeRem}rem;
+      min-width: ${sizeRem}rem;
+      min-height: ${sizeRem}rem;
+      font-size: ${fontSize}rem;
+      text-transform: uppercase;
+      line-height: ${sizeRem}rem;
+      text-align: center;
+      vertical-align: top;
+      display: inline-block;
+      border-radius: 100%;
+      user-select: none;
+      -webkit-user-select: none;
+
+      ${shape === 'squircle' &&
+        css `
+        border-radius: calc(${sizeToBorderRadius[size]} * ${avatar['border-radius']});
+      `}
+
+      ${StyledIcon} {
+        width: 50%;
+        height: 100%;
+        vertical-align: initial;
+      }
+
+      ::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        pointer-events: none;
+        box-shadow: inset 0 0 0 0.0625rem ${shadowColor};
+      }
+    `;
+});
+StyledAvatar.defaultProps = defaultThemeProp;
+export const StyledStatus = styled.div(({ size, theme }) => {
+    /** Scales alert badge dimensions based on size of avatar */
+    const sizeDimensions = (0.625 * sizeToRem[size]) / sizeToRem.m;
+    return css `
+    position: absolute;
+    height: ${sizeDimensions}rem;
+    width: ${sizeDimensions}rem;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    z-index: 1;
+    animation: pop calc(${theme.base.animation.speed} * 2) cubic-bezier(1, 1.65, 0.3, 1.24);
+
+    @keyframes pop {
+      0% {
+        opacity: 0;
+        transform: scale(0);
+      }
+      50% {
+        opacity: 1;
+      }
+      100% {
+        transform: scale(1);
+      }
+    }
+  `;
+});
+StyledStatus.defaultProps = defaultThemeProp;
+/**
+ * Helper function to construct a two or one letter initial from the title prop.
+ * This text will be displayed if no valid image source is provided.
+ * @param name
+ * @param size
+ */
+const getInitials = (name, size) => {
+    const words = name.split(' ');
+    const firstInitial = words[0].slice(0, 1);
+    return words.length === 1 || size === 's'
+        ? firstInitial
+        : `${firstInitial}${words[1].slice(0, 1)}`;
+};
+/**
+ * Generally, avatars are used to distinguish between different operators and
+ * objects when they are shown in a list or in a small space. Users of applications
+ * can upload a custom avatar of their choice.
+ */
+const Avatar = forwardRef((props, ref) => {
+    const { shape = 'circle', size = 'm', imageSrc, icon, name, status, onImageError, ...restProps } = props;
+    const [hasBrokenImage, setHasBrokenImage] = useState();
+    const t = useI18n();
+    useEffect(() => {
+        setHasBrokenImage(undefined);
+    }, [imageSrc]);
+    const content = useMemo(() => {
+        if (icon) {
+            return _jsx(Icon, { name: icon }, void 0);
+        }
+        if (imageSrc && !hasBrokenImage) {
+            return (_jsx(StyledAvatarImage, { src: imageSrc, alt: name, onError: (e) => {
+                    setHasBrokenImage(true);
+                    onImageError?.(e);
+                }, onLoad: () => {
+                    setHasBrokenImage(false);
+                } }, void 0));
+        }
+        return getInitials(name, size);
+    }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);
+    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

package/lib/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,QAAQ,EACR,SAAS,EACT,OAAO,EACR,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,KAAK,MAAM,UAAU,CAAC;AAQ7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AA6BvC,MAAM,SAAS,GAAG;IAChB,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,GAAG;CACP,CAAC;AAEF,MAAM,aAAa,GAAG;IACpB,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,CAAC;CACL,CAAC;AAEF,MAAM,kBAAkB,GAAG;IACzB,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,CAAC;CACL,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;CAM7C,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAMpC,CAAC,EACC,cAAc,EACd,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,EAC1F,EACD,UAAU,EAAE,EAAE,MAAM,EAAE,EACvB,EACF,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,eAAe,GACnB,MAAM,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;IAC7E,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAExE,OAAO,GAAG,CAAA;;0BAEY,eAAe;eAC1B,KAAK;eACL,OAAO;gBACN,OAAO;mBACJ,OAAO;oBACN,OAAO;mBACR,QAAQ;;qBAEN,OAAO;;;;;;;;QAQpB,KAAK,KAAK,UAAU;QACtB,GAAG,CAAA;8BACqB,kBAAkB,CAAC,IAAI,CAAC,MAAM,MAAM,CAAC,eAAe,CAAC;OAC5E;;QAEC,UAAU;;;;;;;;;;;;4CAY0B,WAAW;;KAElD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAwC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;IAChG,4DAA4D;IAC5D,MAAM,cAAc,GAAG,CAAC,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC;IAE/D,OAAO,GAAG,CAAA;;cAEE,cAAc;aACf,cAAc;;;;0BAID,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;;;;;;;;;;;;;;GAcjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C;;;;;GAKG;AACH,MAAM,WAAW,GAAG,CAAC,IAAyB,EAAE,IAAyB,EAAE,EAAE;IAC3E,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC9B,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAE1C,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,KAAK,GAAG;QACvC,CAAC,CAAC,YAAY;QACd,CAAC,CAAC,GAAG,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;AAC/C,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,GAAkD,UAAU,CACtE,CAAC,KAAmC,EAAE,GAA2C,EAAE,EAAE;IACnF,MAAM,EACJ,KAAK,GAAG,QAAQ,EAChB,IAAI,GAAG,GAAG,EACV,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,YAAY,EACZ,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,EAAuB,CAAC;IAC5E,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,iBAAiB,CAAC,SAAS,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,IAAI,EAAE;YACR,OAAO,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,WAAI,CAAC;SAC7B;QACD,IAAI,QAAQ,IAAI,CAAC,cAAc,EAAE;YAC/B,OAAO,CACL,KAAC,iBAAiB,IAChB,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,IAAI,EACT,OAAO,EAAE,CAAC,CAAmC,EAAE,EAAE;oBAC/C,iBAAiB,CAAC,IAAI,CAAC,CAAC;oBACxB,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;gBACpB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;oBACX,iBAAiB,CAAC,KAAK,CAAC,CAAC;gBAC3B,CAAC,WACD,CACH,CAAC;SACH;QACD,OAAO,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,YAAY,CAAC,CAAC,CAAC;IAE/D,OAAO,CACL,MAAC,YAAY,IACX,IAAI,EAAC,KAAK,EACV,MAAM,EAAE,CAAC,CAAC,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,gBACI,GAAG,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,KAC7D,SAAS,aAEZ,OAAO,EACP,MAAM,KAAK,QAAQ,IAAI,KAAC,KAAK,IAAC,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAC,SAAS,WAAG,YACpE,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  Ref,\n  PropsWithoutRef,\n  SyntheticEvent,\n  useState,\n  useEffect,\n  useMemo\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport Image from '../Image';\nimport {\n  BaseProps,\n  ForwardProps,\n  PropsWithDefaults,\n  NoChildrenProp,\n  OmitStrict\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { StyledIcon } from '../Icon';\nimport { Alert } from '../Badges';\nimport { useI18n } from '../../hooks';\nimport { tryCatch } from '../../utils';\n\nexport interface AvatarProps extends BaseProps, NoChildrenProp {\n  /** The name of the identity the Avatar represents. */\n  name: string;\n  /** Content of the Avatar as an image source url. */\n  imageSrc?: string;\n  /** An icon to render as the content of the avatar. imageSrc will take precedence if passed. */\n  icon?: string;\n  /**\n   * Shape of the Avatar.\n   * @default \"circle\"\n   */\n  shape?: 'circle' | 'squircle';\n  /**\n   * Avatar size.\n   * @default \"m\"\n   */\n  size?: 's' | 'm' | 'l';\n  /** If defined, will render status icon on the avatar. */\n  status?: 'active';\n  /** Optional error handler in the event an image fails to load. */\n  onImageError?: (err: SyntheticEvent<HTMLImageElement>) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement | HTMLImageElement>;\n}\n\ntype AvatarPropsWithDefaults = PropsWithDefaults<AvatarProps, 'shape' | 'size'>;\n\nconst sizeToRem = {\n  s: 1,\n  m: 2,\n  l: 2.5\n};\n\nconst fontSizeToRem = {\n  s: 0.5625,\n  m: 0.8125,\n  l: 1\n};\n\nconst sizeToBorderRadius = {\n  s: 0.25,\n  m: 0.5,\n  l: 1\n};\n\nexport const StyledAvatarImage = styled(Image)`\n  min-height: 100%;\n  min-width: 100%;\n  aspect-ratio: 1 / 1;\n  object-fit: cover;\n  border-radius: inherit;\n`;\n\nexport const StyledAvatar = styled.div<\n  OmitStrict<AvatarPropsWithDefaults, 'name' | 'children'> & {\n    hasSrc?: boolean;\n    hasBrokenImage?: boolean;\n  }\n>(\n  ({\n    hasBrokenImage,\n    hasSrc,\n    size,\n    shape,\n    theme: {\n      base: {\n        palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground }\n      },\n      components: { avatar }\n    }\n  }) => {\n    const sizeRem = sizeToRem[size];\n    const fontSize = fontSizeToRem[size];\n    const backgroundColor =\n      hasSrc && !hasBrokenImage ? primaryBackground : avatar['background-color'];\n    const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));\n    const color = tryCatch(() => readableColor(avatar['background-color']));\n\n    return css`\n      position: relative;\n      background-color: ${backgroundColor};\n      color: ${color};\n      width: ${sizeRem}rem;\n      height: ${sizeRem}rem;\n      min-width: ${sizeRem}rem;\n      min-height: ${sizeRem}rem;\n      font-size: ${fontSize}rem;\n      text-transform: uppercase;\n      line-height: ${sizeRem}rem;\n      text-align: center;\n      vertical-align: top;\n      display: inline-block;\n      border-radius: 100%;\n      user-select: none;\n      -webkit-user-select: none;\n\n      ${shape === 'squircle' &&\n      css`\n        border-radius: calc(${sizeToBorderRadius[size]} * ${avatar['border-radius']});\n      `}\n\n      ${StyledIcon} {\n        width: 50%;\n        height: 100%;\n        vertical-align: initial;\n      }\n\n      ::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        pointer-events: none;\n        box-shadow: inset 0 0 0 0.0625rem ${shadowColor};\n      }\n    `;\n  }\n);\n\nStyledAvatar.defaultProps = defaultThemeProp;\n\nexport const StyledStatus = styled.div<Pick<AvatarPropsWithDefaults, 'size'>>(({ size, theme }) => {\n  /** Scales alert badge dimensions based on size of avatar */\n  const sizeDimensions = (0.625 * sizeToRem[size]) / sizeToRem.m;\n\n  return css`\n    position: absolute;\n    height: ${sizeDimensions}rem;\n    width: ${sizeDimensions}rem;\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    z-index: 1;\n    animation: pop calc(${theme.base.animation.speed} * 2) cubic-bezier(1, 1.65, 0.3, 1.24);\n\n    @keyframes pop {\n      0% {\n        opacity: 0;\n        transform: scale(0);\n      }\n      50% {\n        opacity: 1;\n      }\n      100% {\n        transform: scale(1);\n      }\n    }\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\n/**\n * Helper function to construct a two or one letter initial from the title prop.\n * This text will be displayed if no valid image source is provided.\n * @param name\n * @param size\n */\nconst getInitials = (name: AvatarProps['name'], size: AvatarProps['size']) => {\n  const words = name.split(' ');\n  const firstInitial = words[0].slice(0, 1);\n\n  return words.length === 1 || size === 's'\n    ? firstInitial\n    : `${firstInitial}${words[1].slice(0, 1)}`;\n};\n\n/**\n * Generally, avatars are used to distinguish between different operators and\n * objects when they are shown in a list or in a small space. Users of applications\n * can upload a custom avatar of their choice.\n */\nconst Avatar: FunctionComponent<AvatarProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<AvatarProps>, ref: Ref<HTMLDivElement | HTMLImageElement>) => {\n    const {\n      shape = 'circle',\n      size = 'm',\n      imageSrc,\n      icon,\n      name,\n      status,\n      onImageError,\n      ...restProps\n    } = props;\n    const [hasBrokenImage, setHasBrokenImage] = useState<undefined | boolean>();\n    const t = useI18n();\n\n    useEffect(() => {\n      setHasBrokenImage(undefined);\n    }, [imageSrc]);\n\n    const content = useMemo(() => {\n      if (icon) {\n        return <Icon name={icon} />;\n      }\n      if (imageSrc && !hasBrokenImage) {\n        return (\n          <StyledAvatarImage\n            src={imageSrc}\n            alt={name}\n            onError={(e: SyntheticEvent<HTMLImageElement>) => {\n              setHasBrokenImage(true);\n              onImageError?.(e);\n            }}\n            onLoad={() => {\n              setHasBrokenImage(false);\n            }}\n          />\n        );\n      }\n      return getInitials(name, size);\n    }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);\n\n    return (\n      <StyledAvatar\n        role='img'\n        hasSrc={!!imageSrc}\n        hasBrokenImage={hasBrokenImage}\n        shape={shape}\n        size={size}\n        ref={ref}\n        aria-label={`${name}${status ? ` ${t('status')} ${status}` : ''}`}\n        {...restProps}\n      >\n        {content}\n        {status === 'active' && <Alert as={StyledStatus} size={size} variant='success' />}\n      </StyledAvatar>\n    );\n  }\n);\n\nexport default Avatar;\n"]}

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

@@ -0,0 +1,4 @@
+export { default } from './Avatar';
+export { StyledAvatar } from './Avatar';
+export { AvatarProps } from './Avatar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/lib/components/Avatar/index.js

@@ -0,0 +1,3 @@
+export { default } from './Avatar';
+export { StyledAvatar } from './Avatar';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default } from './Avatar';\nexport { StyledAvatar } from './Avatar';\nexport { AvatarProps } from './Avatar';\n"]}

package/lib/components/Backdrop/Backdrop.d.ts

@@ -0,0 +1,64 @@
+import { FunctionComponent, ReactNode, Ref, MouseEvent } from 'react';
+import { BaseProps, ForwardProps } from '../../types';
+import { FlexProps } from '../Flex';
+export interface BackdropProps extends BaseProps {
+    /**
+     * Opacity of the Backdrop.
+     * @default 0.4
+     */
+    alpha?: number;
+    /**
+     * Any React Node to be rendered on top of the Backdrop component.
+     */
+    children?: ReactNode;
+    /** Props passed to Flex container. */
+    container?: Exclude<FlexProps['container'], boolean>;
+    /**
+     * Toggles visibility of Backdrop.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Determines the color of the Backdrop.
+     * @default "dark"
+     */
+    variant?: 'dark' | 'light';
+    /**
+     * Transition speed of Backdrop animation.
+     * @default "medium"
+     */
+    transitionSpeed?: 'slow' | 'medium' | 'fast' | 'none';
+    /**
+     * The position of the Backdrop.
+     * @default "fixed"
+     */
+    position?: 'absolute' | 'fixed';
+    /**
+     * Accepts a callback function for click event on Backdrop.
+     */
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Accepts a callback that gets invoked before opening Backdrop.
+     */
+    onBeforeTransitionIn?: () => void;
+    /**
+     * Accepts a callback that gets invoked after opening Backdrop.
+     */
+    onAfterTransitionIn?: () => void;
+    /**
+     * Accepts a callback that gets invoked before closing Backdrop.
+     */
+    onBeforeTransitionOut?: () => void;
+    /**
+     * Accepts a callback that gets invoked after closing Backdrop
+     */
+    onAfterTransitionOut?: () => void;
+    /** Ref for a Backdrop's root div element. */
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const StyledBackdrop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../types").OmitStrict<BackdropProps, "alpha" | "open" | "position" | "transitionSpeed"> & Required<Pick<BackdropProps, "alpha" | "open" | "position" | "transitionSpeed">> & {
+    opacity: 0 | 1;
+}, never>;
+declare const Backdrop: FunctionComponent<BackdropProps & ForwardProps>;
+export default Backdrop;
+//# sourceMappingURL=Backdrop.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EAKT,GAAG,EACH,UAAU,EAEX,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAqB,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;IACrD;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAcD,eAAO,MAAM,cAAc;aAAqD,CAAC,GAAG,CAAC;SAqCnF,CAAC;AAMH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAmE7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/Backdrop/Backdrop.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState, useCallback, forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '../../theme';
+import { reflow } from '../../utils';
+import Flex from '../Flex';
+const transitionSpeedToTheme = {
+    slow: 2,
+    medium: 1,
+    fast: 0.5,
+    none: 0
+};
+export const StyledBackdrop = styled.div(props => {
+    const { theme: { base } } = props;
+    const { opacity, alpha, variant, position } = props;
+    const transitionDuration = `max(calc(${transitionSpeedToTheme[props.transitionSpeed]} * ${base.animation.speed}), 1ms)`;
+    return css `
+    position: ${position};
+    z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    opacity: ${opacity};
+    transition-property: opacity;
+    transition-timing-function: ${props.theme.base.animation.timing.ease};
+
+    /* stylelint-disable declaration-block-no-duplicate-properties */
+    transition-duration: 1ms;
+    transition-duration: ${transitionDuration};
+
+    /* stylelint-enable declaration-block-no-duplicate-properties */
+
+    ${variant === 'dark' &&
+        css `
+      background: rgba(0, 0, 0, ${alpha});
+    `}
+
+    ${variant === 'light' &&
+        css `
+      background: rgba(255, 255, 255, ${alpha});
+    `}
+  `;
+});
+StyledBackdrop.defaultProps = defaultThemeProp;
+const Backdrop = forwardRef((props, ref) => {
+    const { children, container, open = false, variant = 'dark', transitionSpeed = 'medium', alpha = 0.6, position = 'fixed', onBeforeTransitionIn, onAfterTransitionIn, onBeforeTransitionOut, onAfterTransitionOut, ...restProps } = props;
+    const [state, setState] = useState('closed');
+    const onTransitionEnd = useCallback((e) => {
+        if (e.propertyName !== 'opacity' || e.target !== e.currentTarget)
+            return;
+        let nextState;
+        if (state === 'closing') {
+            nextState = 'closed';
+            onAfterTransitionOut?.();
+        }
+        else {
+            nextState = 'open';
+            onAfterTransitionIn?.();
+        }
+        setState(nextState);
+    }, [state, onAfterTransitionOut, onAfterTransitionIn]);
+    useEffect(() => {
+        if (open) {
+            if (state === 'closed' || state === 'closing') {
+                onBeforeTransitionIn?.();
+                reflow();
+                setState('opening');
+            }
+        }
+        else if (state === 'open' || state === 'opening') {
+            onBeforeTransitionOut?.();
+            setState('closing');
+        }
+    }, [open, onBeforeTransitionIn, onBeforeTransitionOut]);
+    return !open && state === 'closed' ? null : (_jsx(Flex, { container: { justify: 'center', alignItems: 'center', ...container }, as: StyledBackdrop, transitionSpeed: transitionSpeed, opacity: state === 'opening' || state === 'open' ? 1 : 0, alpha: alpha, variant: variant, position: position, onTransitionEnd: onTransitionEnd, ref: ref, ...restProps, children: children }, void 0));
+});
+export default Backdrop;
+//# sourceMappingURL=Backdrop.js.map