@pega/cosmos-react-core 2.0.0-dev.9.2 → 2.0.0-rc.2

package/lib/components/AppShell/Drawer.js

@@ -4,13 +4,15 @@ 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 { 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;
@@ -31,21 +33,18 @@ export default (props) => {
     };
     const { ltr, rtl } = useDirection();
     const t = useI18n();
-    return (_jsx(Configuration, Object.assign({ theme: appShellTheme }, { children: _jsxs(Drawer, Object.assign({ as: StyledDrawerWrapper, position: 'absolute', placement: 'right', open: drawerOpen, nullWhenClosed: true, onAfterOpen: () => {
+    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();
-            } }, { children: [_jsxs(Flex, Object.assign({ as: StyledDrawerHeading, container: { alignItems: 'center' } }, { children: [rtl && _jsx(Text, { children: header }, void 0),
-                        _jsx(BareButton, Object.assign({ as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), title: 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, Object.assign({ as: StyledDrawerListContainer, container: { direction: 'column' } }, { children: content }), void 0)] }), void 0) }), void 0));
+                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 { 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 { 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\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            title={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"]}
+{"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.js

@@ -6,7 +6,6 @@ import Menu from '../Menu';
 import { useConsolidatedRef } from '../../hooks';
 import AppShellContext from './AppShellContext';
 const Operator = forwardRef(({ children, actions, popover, as }, ref) => {
-    var _a;
     const { navOpen } = useContext(AppShellContext);
     const buttonRef = useConsolidatedRef(ref);
     const operatorMenuItems = useMemo(() => {
@@ -22,15 +21,14 @@ const Operator = forwardRef(({ children, actions, popover, as }, ref) => {
         if (!navOpen)
             setShowMenu(false);
     }, [navOpen]);
-    return (_jsxs(_Fragment, { children: [_jsx(BareButton, Object.assign({ as: as, ref: buttonRef, onClick: () => {
+    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, Object.assign({}, popover, { show: showMenu, target: buttonRef.current }, { children: _jsx(Menu, { focusControlEl: (_a = buttonRef.current) !== null && _a !== void 0 ? _a : undefined, mode: 'action', items: operatorMenuItems, 
+                }, 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.
                      */
@@ -39,7 +37,7 @@ const Operator = forwardRef(({ children, actions, popover, as }, ref) => {
                             .detail > 0) {
                             setShowMenu(false);
                         }
-                    } }, void 0) }), void 0)] }, void 0));
+                    } }, void 0) }, void 0)] }, void 0));
 });
 export default Operator;
 //# sourceMappingURL=Operator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Operator.js","sourceRoot":"","sources":["../../../src/components/AppShell/Operator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAGhD,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,EAAE,EAKM,EACV,GAAuC,EACvC,EAAE;;IACF,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,OAAO,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACpE,EAAE;YACF,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,KAAK;YACd,GAAG,IAAI;SACR,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,8BACE,KAAC,UAAU,kBACT,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,gBAEA,QAAQ,YACE;YACb,KAAC,OAAO,oBAAK,OAAO,IAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,OAAO,gBAC7D,KAAC,IAAI,IACH,cAAc,EAAE,MAAA,SAAS,CAAC,OAAO,mCAAI,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,YACM,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"]}
+{"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.map

@@ -1 +1 @@
-{"version":3,"file":"SkipNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/SkipNavigation.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB,8TAiB/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,18 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, memo } from 'react';
+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()}
@@ -20,42 +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 (_jsx(StyledSkipNavigation, Object.assign({ show: true, placement: 'bottom-end', target: {
-            getBoundingClientRect() {
-                return {
-                    height: 0,
-                    width: 0,
-                    x: 20,
-                    y: 20,
-                    top: 20,
-                    bottom: 20,
-                    left: 20,
-                    right: 20
-                };
-            }
-        } }, { children: _jsx(Menu, { items: [
-                {
-                    id: useUID(),
-                    primary: useI18n()('go_to_main_content'),
-                    onClick
-                }
-            ] }, void 0) }), void 0));
+    }
+    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":";AAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC1C,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,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,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,EAC9B,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;;;QAGR,YAAY,EAAE;;GAEnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,eAAe,IAAI,CAAC,GAAG,EAAE;IACvB,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,MAAM,IAAI,GAAG,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAC1E,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,MAAM,OAAO,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,MAAM,CACzD,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,IAAI,CAAC,aAAa,CAAqB,GAAG,CAAC,EAC9D,IAAI,CACL,CAAC;QAEF,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACpC,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW;YAAE,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAC/E,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;QAEb,IAAI,CAAC,gBAAgB,CACnB,UAAU,EACV,GAAG,EAAE;YACH,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;YACjC,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;YACnC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;QAC1B,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,oBAAoB,kBACnB,IAAI,QACJ,SAAS,EAAC,YAAY,EACtB,MAAM,EAAE;YACN,qBAAqB;gBACnB,OAAO;oBACL,MAAM,EAAE,CAAC;oBACT,KAAK,EAAE,CAAC;oBACR,CAAC,EAAE,EAAE;oBACL,CAAC,EAAE,EAAE;oBACL,GAAG,EAAE,EAAE;oBACP,MAAM,EAAE,EAAE;oBACV,IAAI,EAAE,EAAE;oBACR,KAAK,EAAE,EAAE;iBACV,CAAC;YACJ,CAAC;SACF,gBAED,KAAC,IAAI,IACH,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,MAAM,EAAE;oBACZ,OAAO,EAAE,OAAO,EAAE,CAAC,oBAAoB,CAAC;oBACxC,OAAO;iBACR;aACF,WACD,YACmB,CACxB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { 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/Avatar/Avatar.d.ts.map

@@ -1 +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,mKAK7B,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,CA0DzD,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

@@ -11,7 +11,7 @@ import { tryCatch } from '../../utils';
 const sizeToRem = {
     s: 1,
     m: 2,
-    l: 2.75
+    l: 2.5
 };
 const fontSizeToRem = {
     s: 0.5625,
@@ -26,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;
 `;
@@ -47,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;
@@ -133,15 +135,14 @@ const Avatar = forwardRef((props, ref) => {
         if (imageSrc && !hasBrokenImage) {
             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 (_jsxs(StyledAvatar, Object.assign({ role: 'img', hasSrc: !!imageSrc, hasBrokenImage: hasBrokenImage, shape: shape, size: size, title: name, 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));
+    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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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","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.75\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  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      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        title={name}\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"]}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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","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/Backdrop/Backdrop.d.ts

@@ -56,7 +56,7 @@ export interface BackdropProps extends BaseProps {
     /** Ref for a Backdrop's root div element. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledBackdrop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<BackdropProps, "alpha" | "open" | "position" | "transitionSpeed"> & Required<Pick<BackdropProps, "alpha" | "open" | "position" | "transitionSpeed">> & {
+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>;

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

@@ -1 +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;SAoCnF,CAAC;AAMH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAmE7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"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

@@ -21,6 +21,7 @@ export const StyledBackdrop = styled.div(props => {
     left: 0;
     height: 100%;
     width: 100%;
+    border-radius: inherit;
     opacity: ${opacity};
     transition-property: opacity;
     transition-timing-function: ${props.theme.base.animation.timing.ease};
@@ -44,7 +45,7 @@ export const StyledBackdrop = styled.div(props => {
 });
 StyledBackdrop.defaultProps = defaultThemeProp;
 const Backdrop = forwardRef((props, ref) => {
-    const { children, container, open = false, variant = 'dark', transitionSpeed = 'medium', alpha = 0.4, position = 'fixed', onBeforeTransitionIn, onAfterTransitionIn, onBeforeTransitionOut, onAfterTransitionOut, ...restProps } = props;
+    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)
@@ -52,28 +53,28 @@ const Backdrop = forwardRef((props, ref) => {
         let nextState;
         if (state === 'closing') {
             nextState = 'closed';
-            onAfterTransitionOut === null || onAfterTransitionOut === void 0 ? void 0 : onAfterTransitionOut();
+            onAfterTransitionOut?.();
         }
         else {
             nextState = 'open';
-            onAfterTransitionIn === null || onAfterTransitionIn === void 0 ? void 0 : onAfterTransitionIn();
+            onAfterTransitionIn?.();
         }
         setState(nextState);
     }, [state, onAfterTransitionOut, onAfterTransitionIn]);
     useEffect(() => {
         if (open) {
             if (state === 'closed' || state === 'closing') {
-                onBeforeTransitionIn === null || onBeforeTransitionIn === void 0 ? void 0 : onBeforeTransitionIn();
+                onBeforeTransitionIn?.();
                 reflow();
                 setState('opening');
             }
         }
         else if (state === 'open' || state === 'opening') {
-            onBeforeTransitionOut === null || onBeforeTransitionOut === void 0 ? void 0 : onBeforeTransitionOut();
+            onBeforeTransitionOut?.();
             setState('closing');
         }
     }, [open, onBeforeTransitionIn, onBeforeTransitionOut]);
-    return !open && state === 'closed' ? null : (_jsx(Flex, Object.assign({ 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));
+    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

package/lib/components/Backdrop/Backdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  ReactNode,\n  useEffect,\n  useState,\n  useCallback,\n  forwardRef,\n  Ref,\n  MouseEvent,\n  PropsWithoutRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { reflow } from '../../utils';\nimport { BaseProps, PropsWithDefaults, ForwardProps } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\n\nexport interface BackdropProps extends BaseProps {\n  /**\n   * Opacity of the Backdrop.\n   * @default 0.4\n   */\n  alpha?: number;\n  /**\n   * Any React Node to be rendered on top of the Backdrop component.\n   */\n  children?: ReactNode;\n  /** Props passed to Flex container. */\n  container?: Exclude<FlexProps['container'], boolean>;\n  /**\n   * Toggles visibility of Backdrop.\n   * @default false\n   */\n  open?: boolean;\n  /**\n   * Determines the color of the Backdrop.\n   * @default \"dark\"\n   */\n  variant?: 'dark' | 'light';\n  /**\n   * Transition speed of Backdrop animation.\n   * @default \"medium\"\n   */\n  transitionSpeed?: 'slow' | 'medium' | 'fast' | 'none';\n  /**\n   * The position of the Backdrop.\n   * @default \"fixed\"\n   */\n  position?: 'absolute' | 'fixed';\n  /**\n   * Accepts a callback function for click event on Backdrop.\n   */\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n  /**\n   * Accepts a callback that gets invoked before opening Backdrop.\n   */\n  onBeforeTransitionIn?: () => void;\n  /**\n   * Accepts a callback that gets invoked after opening Backdrop.\n   */\n  onAfterTransitionIn?: () => void;\n  /**\n   * Accepts a callback that gets invoked before closing Backdrop.\n   */\n  onBeforeTransitionOut?: () => void;\n  /**\n   * Accepts a callback that gets invoked after closing Backdrop\n   */\n  onAfterTransitionOut?: () => void;\n  /** Ref for a Backdrop's root div element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype BackdropPropsWithDefaults = PropsWithDefaults<\n  BackdropProps,\n  'open' | 'transitionSpeed' | 'alpha' | 'position'\n>;\n\nconst transitionSpeedToTheme = {\n  slow: 2,\n  medium: 1,\n  fast: 0.5,\n  none: 0\n} as const;\n\nexport const StyledBackdrop = styled.div<BackdropPropsWithDefaults & { opacity: 0 | 1 }>(props => {\n  const {\n    theme: { base }\n  } = props;\n  const { opacity, alpha, variant, position } = props;\n  const transitionDuration = `max(calc(${transitionSpeedToTheme[props.transitionSpeed]} * ${\n    base.animation.speed\n  }), 1ms)`;\n\n  return css`\n    position: ${position};\n    z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    opacity: ${opacity};\n    transition-property: opacity;\n    transition-timing-function: ${props.theme.base.animation.timing.ease};\n\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    transition-duration: 1ms;\n    transition-duration: ${transitionDuration};\n\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n\n    ${variant === 'dark' &&\n    css`\n      background: rgba(0, 0, 0, ${alpha});\n    `}\n\n    ${variant === 'light' &&\n    css`\n      background: rgba(255, 255, 255, ${alpha});\n    `}\n  `;\n});\n\nStyledBackdrop.defaultProps = defaultThemeProp;\n\ntype State = 'closed' | 'opening' | 'open' | 'closing';\n\nconst Backdrop: FunctionComponent<BackdropProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<BackdropProps>, ref: BackdropProps['ref']) => {\n    const {\n      children,\n      container,\n      open = false,\n      variant = 'dark',\n      transitionSpeed = 'medium',\n      alpha = 0.4,\n      position = 'fixed',\n      onBeforeTransitionIn,\n      onAfterTransitionIn,\n      onBeforeTransitionOut,\n      onAfterTransitionOut,\n      ...restProps\n    } = props;\n\n    const [state, setState] = useState<State>('closed');\n\n    const onTransitionEnd = useCallback(\n      (e: TransitionEvent) => {\n        if (e.propertyName !== 'opacity' || e.target !== e.currentTarget) return;\n        let nextState: State;\n\n        if (state === 'closing') {\n          nextState = 'closed';\n          onAfterTransitionOut?.();\n        } else {\n          nextState = 'open';\n          onAfterTransitionIn?.();\n        }\n\n        setState(nextState);\n      },\n      [state, onAfterTransitionOut, onAfterTransitionIn]\n    );\n\n    useEffect(() => {\n      if (open) {\n        if (state === 'closed' || state === 'closing') {\n          onBeforeTransitionIn?.();\n          reflow();\n          setState('opening');\n        }\n      } else if (state === 'open' || state === 'opening') {\n        onBeforeTransitionOut?.();\n        setState('closing');\n      }\n    }, [open, onBeforeTransitionIn, onBeforeTransitionOut]);\n\n    return !open && state === 'closed' ? null : (\n      <Flex\n        container={{ justify: 'center', alignItems: 'center', ...container }}\n        as={StyledBackdrop}\n        transitionSpeed={transitionSpeed}\n        opacity={state === 'opening' || state === 'open' ? 1 : 0}\n        alpha={alpha}\n        variant={variant}\n        position={position}\n        onTransitionEnd={onTransitionEnd}\n        ref={ref}\n        {...restProps}\n      >\n        {children}\n      </Flex>\n    );\n  }\n);\n\nexport default Backdrop;\n"]}
+{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  ReactNode,\n  useEffect,\n  useState,\n  useCallback,\n  forwardRef,\n  Ref,\n  MouseEvent,\n  PropsWithoutRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { reflow } from '../../utils';\nimport { BaseProps, PropsWithDefaults, ForwardProps } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\n\nexport interface BackdropProps extends BaseProps {\n  /**\n   * Opacity of the Backdrop.\n   * @default 0.4\n   */\n  alpha?: number;\n  /**\n   * Any React Node to be rendered on top of the Backdrop component.\n   */\n  children?: ReactNode;\n  /** Props passed to Flex container. */\n  container?: Exclude<FlexProps['container'], boolean>;\n  /**\n   * Toggles visibility of Backdrop.\n   * @default false\n   */\n  open?: boolean;\n  /**\n   * Determines the color of the Backdrop.\n   * @default \"dark\"\n   */\n  variant?: 'dark' | 'light';\n  /**\n   * Transition speed of Backdrop animation.\n   * @default \"medium\"\n   */\n  transitionSpeed?: 'slow' | 'medium' | 'fast' | 'none';\n  /**\n   * The position of the Backdrop.\n   * @default \"fixed\"\n   */\n  position?: 'absolute' | 'fixed';\n  /**\n   * Accepts a callback function for click event on Backdrop.\n   */\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n  /**\n   * Accepts a callback that gets invoked before opening Backdrop.\n   */\n  onBeforeTransitionIn?: () => void;\n  /**\n   * Accepts a callback that gets invoked after opening Backdrop.\n   */\n  onAfterTransitionIn?: () => void;\n  /**\n   * Accepts a callback that gets invoked before closing Backdrop.\n   */\n  onBeforeTransitionOut?: () => void;\n  /**\n   * Accepts a callback that gets invoked after closing Backdrop\n   */\n  onAfterTransitionOut?: () => void;\n  /** Ref for a Backdrop's root div element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype BackdropPropsWithDefaults = PropsWithDefaults<\n  BackdropProps,\n  'open' | 'transitionSpeed' | 'alpha' | 'position'\n>;\n\nconst transitionSpeedToTheme = {\n  slow: 2,\n  medium: 1,\n  fast: 0.5,\n  none: 0\n} as const;\n\nexport const StyledBackdrop = styled.div<BackdropPropsWithDefaults & { opacity: 0 | 1 }>(props => {\n  const {\n    theme: { base }\n  } = props;\n  const { opacity, alpha, variant, position } = props;\n  const transitionDuration = `max(calc(${transitionSpeedToTheme[props.transitionSpeed]} * ${\n    base.animation.speed\n  }), 1ms)`;\n\n  return css`\n    position: ${position};\n    z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    border-radius: inherit;\n    opacity: ${opacity};\n    transition-property: opacity;\n    transition-timing-function: ${props.theme.base.animation.timing.ease};\n\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    transition-duration: 1ms;\n    transition-duration: ${transitionDuration};\n\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n\n    ${variant === 'dark' &&\n    css`\n      background: rgba(0, 0, 0, ${alpha});\n    `}\n\n    ${variant === 'light' &&\n    css`\n      background: rgba(255, 255, 255, ${alpha});\n    `}\n  `;\n});\n\nStyledBackdrop.defaultProps = defaultThemeProp;\n\ntype State = 'closed' | 'opening' | 'open' | 'closing';\n\nconst Backdrop: FunctionComponent<BackdropProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<BackdropProps>, ref: BackdropProps['ref']) => {\n    const {\n      children,\n      container,\n      open = false,\n      variant = 'dark',\n      transitionSpeed = 'medium',\n      alpha = 0.6,\n      position = 'fixed',\n      onBeforeTransitionIn,\n      onAfterTransitionIn,\n      onBeforeTransitionOut,\n      onAfterTransitionOut,\n      ...restProps\n    } = props;\n\n    const [state, setState] = useState<State>('closed');\n\n    const onTransitionEnd = useCallback(\n      (e: TransitionEvent) => {\n        if (e.propertyName !== 'opacity' || e.target !== e.currentTarget) return;\n        let nextState: State;\n\n        if (state === 'closing') {\n          nextState = 'closed';\n          onAfterTransitionOut?.();\n        } else {\n          nextState = 'open';\n          onAfterTransitionIn?.();\n        }\n\n        setState(nextState);\n      },\n      [state, onAfterTransitionOut, onAfterTransitionIn]\n    );\n\n    useEffect(() => {\n      if (open) {\n        if (state === 'closed' || state === 'closing') {\n          onBeforeTransitionIn?.();\n          reflow();\n          setState('opening');\n        }\n      } else if (state === 'open' || state === 'opening') {\n        onBeforeTransitionOut?.();\n        setState('closing');\n      }\n    }, [open, onBeforeTransitionIn, onBeforeTransitionOut]);\n\n    return !open && state === 'closed' ? null : (\n      <Flex\n        container={{ justify: 'center', alignItems: 'center', ...container }}\n        as={StyledBackdrop}\n        transitionSpeed={transitionSpeed}\n        opacity={state === 'opening' || state === 'open' ? 1 : 0}\n        alpha={alpha}\n        variant={variant}\n        position={position}\n        onTransitionEnd={onTransitionEnd}\n        ref={ref}\n        {...restProps}\n      >\n        {children}\n      </Flex>\n    );\n  }\n);\n\nexport default Backdrop;\n"]}

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

@@ -1,6 +1,6 @@
 import { FC } from 'react';
-import { ForwardProps } from '../../types';
-export interface AlertProps {
+import { ForwardProps, NoChildrenProp } from '../../types';
+export interface AlertProps extends NoChildrenProp {
     /** Determines the color to render the Badge as. This color is derived from the Theme. */
     variant: 'urgent' | 'success';
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAG7D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,MAAM,WAAW,UAAU;IACzB,yFAAyF;IACzF,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,iHAYtB,CAAC;AAIH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CAKxC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAG7D,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG3D,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,yFAAyF;IACzF,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,iHAYtB,CAAC;AAIH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CAKxC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/Badges/Alert.js

@@ -18,7 +18,7 @@ export const StyledAlert = styled.div(props => {
 StyledAlert.defaultProps = defaultThemeProp;
 const Alert = forwardRef((props, ref) => {
     const { variant, ...restProps } = props;
-    return _jsx(StyledAlert, Object.assign({}, restProps, { variant: variant, ref: ref }), void 0);
+    return _jsx(StyledAlert, { ...restProps, variant: variant, ref: ref }, void 0);
 });
 export default Alert;
 //# sourceMappingURL=Alert.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Badges/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAO/C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAa,KAAK,CAAC,EAAE;IACxD,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC;IACnD,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC7C,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IACpD,OAAO,GAAG,CAAA;kBACM,UAAU;8BACE,WAAW;;;;;GAKtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,KAAK,GAAkC,UAAU,CACrD,CAAC,KAAkC,EAAE,GAAwB,EAAE,EAAE;IAC/D,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,KAAC,WAAW,oBAAK,SAAS,IAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,YAAI,CAAC;AACpE,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { FC, PropsWithoutRef, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface AlertProps {\n  /** Determines the color to render the Badge as. This color is derived from the Theme. */\n  variant: 'urgent' | 'success';\n}\n\nexport const StyledAlert = styled.div<AlertProps>(props => {\n  const alerts = props.theme.components.badges.alert;\n  const { background } = alerts[props.variant];\n  const { 'border-color': borderColor } = alerts.base;\n  return css`\n    background: ${background};\n    border: 0.0625rem solid ${borderColor};\n    border-radius: 100%;\n    display: inline-block;\n    height: 0.625rem;\n    width: 0.625rem;\n  `;\n});\n\nStyledAlert.defaultProps = defaultThemeProp;\n\nconst Alert: FC<ForwardProps & AlertProps> = forwardRef(\n  (props: PropsWithoutRef<AlertProps>, ref: Ref<HTMLDivElement>) => {\n    const { variant, ...restProps } = props;\n    return <StyledAlert {...restProps} variant={variant} ref={ref} />;\n  }\n);\n\nexport default Alert;\n"]}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Badges/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAO/C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAa,KAAK,CAAC,EAAE;IACxD,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC;IACnD,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC7C,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IACpD,OAAO,GAAG,CAAA;kBACM,UAAU;8BACE,WAAW;;;;;GAKtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,KAAK,GAAkC,UAAU,CACrD,CAAC,KAAkC,EAAE,GAAwB,EAAE,EAAE;IAC/D,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,KAAC,WAAW,OAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,WAAI,CAAC;AACpE,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { FC, PropsWithoutRef, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface AlertProps extends NoChildrenProp {\n  /** Determines the color to render the Badge as. This color is derived from the Theme. */\n  variant: 'urgent' | 'success';\n}\n\nexport const StyledAlert = styled.div<AlertProps>(props => {\n  const alerts = props.theme.components.badges.alert;\n  const { background } = alerts[props.variant];\n  const { 'border-color': borderColor } = alerts.base;\n  return css`\n    background: ${background};\n    border: 0.0625rem solid ${borderColor};\n    border-radius: 100%;\n    display: inline-block;\n    height: 0.625rem;\n    width: 0.625rem;\n  `;\n});\n\nStyledAlert.defaultProps = defaultThemeProp;\n\nconst Alert: FC<ForwardProps & AlertProps> = forwardRef(\n  (props: PropsWithoutRef<AlertProps>, ref: Ref<HTMLDivElement>) => {\n    const { variant, ...restProps } = props;\n    return <StyledAlert {...restProps} variant={variant} ref={ref} />;\n  }\n);\n\nexport default Alert;\n"]}

package/lib/components/Badges/Count.js

@@ -36,7 +36,7 @@ export const StyledCount = styled.span(props => {
 StyledCount.defaultProps = defaultThemeProp;
 const Count = forwardRef((props, ref) => {
     const { variant = 'default', children, ...restProps } = props;
-    return Number.isInteger(children) ? (_jsx(StyledCount, Object.assign({ variant: variant }, restProps, { ref: ref }, { children: children > 99 ? '99+' : `${children}` }), void 0)) : null;
+    return Number.isInteger(children) ? (_jsx(StyledCount, { variant: variant, ...restProps, ref: ref, children: children > 99 ? '99+' : `${children}` }, void 0)) : null;
 });
 export default Count;
 //# sourceMappingURL=Count.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Count.js","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAajD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAEpC,KAAK,CAAC,EAAE;IACR,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAC9B,KAAK,CAAC,OAAO,KAAK,SAAS;QACzB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;QAC1C,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEzD,MAAM,kBAAkB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAEhG,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,CAAC;IAEzF,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IAErC,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAElG,OAAO,GAAG,CAAA;kBACM,iBAAiB;kCACD,YAAY;aACjC,UAAU;;iBAEN,QAAQ,CAAC,GAAG;;;;MAIvB,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;QAC3B,GAAG,CAAA;mBACY,OAAO;KACrB;MACC,KAAK,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;QAC7B,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,KAAK,GAAkC,UAAU,CACrD,CAAC,KAAkC,EAAE,GAAyB,EAAE,EAAE;IAChE,MAAM,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC9D,OAAO,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAClC,KAAC,WAAW,kBAAC,OAAO,EAAE,OAAO,IAAM,SAAS,IAAE,GAAG,EAAE,GAAG,gBAClD,QAAmB,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,YACtC,CACf,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { FC, PropsWithoutRef, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/utils';\nimport { ForwardProps, PropsWithDefaults } from '../../types';\nimport { calculateFontSize } from '../../styles';\n\nexport interface CountProps {\n  /** Determines the color to render the Badge as. This color is derived from the Theme.\n   * @default \"default\"\n   */\n  variant?: 'default' | 'interactive' | 'inverted' | 'urgent';\n  /** The count to be displayed within the Badge. */\n  children: number | null;\n}\n\ntype CountPropsWithDefaults = PropsWithDefaults<CountProps, 'variant'>;\n\nexport const StyledCount = styled.span<\n  Pick<CountPropsWithDefaults, 'variant'> & { children: string }\n>(props => {\n  const { foreground, background } =\n    props.variant === 'default'\n      ? props.theme.components.badges.count.base\n      : props.theme.components.badges.count[props.variant];\n\n  const invertedBackground = tryCatch(() => transparentize(0.5, mix(0.2, background, '#ffffff')));\n\n  const displayBackground = props.variant === 'inverted' ? invertedBackground : background;\n\n  const borderRadius = props.theme.base['border-radius'];\n  const { spacing } = props.theme.base;\n\n  const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);\n\n  return css`\n    background: ${displayBackground};\n    border-radius: calc(1.125 * ${borderRadius});\n    color: ${foreground};\n    display: inline-block;\n    font-size: ${fontSize.xxs};\n    font-weight: bold;\n    line-height: normal;\n    text-align: center;\n    ${props.children.length > 1 &&\n    css`\n      padding: 0 ${spacing};\n    `}\n    ${props.children.length === 1 &&\n    css`\n      width: 1.125rem;\n    `}\n  `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\nconst Count: FC<ForwardProps & CountProps> = forwardRef(\n  (props: PropsWithoutRef<CountProps>, ref: Ref<HTMLSpanElement>) => {\n    const { variant = 'default', children, ...restProps } = props;\n    return Number.isInteger(children) ? (\n      <StyledCount variant={variant} {...restProps} ref={ref}>\n        {(children as number) > 99 ? '99+' : `${children}`}\n      </StyledCount>\n    ) : null;\n  }\n);\n\nexport default Count;\n"]}
+{"version":3,"file":"Count.js","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAajD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAEpC,KAAK,CAAC,EAAE;IACR,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAC9B,KAAK,CAAC,OAAO,KAAK,SAAS;QACzB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;QAC1C,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEzD,MAAM,kBAAkB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAEhG,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,CAAC;IAEzF,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IAErC,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAElG,OAAO,GAAG,CAAA;kBACM,iBAAiB;kCACD,YAAY;aACjC,UAAU;;iBAEN,QAAQ,CAAC,GAAG;;;;MAIvB,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;QAC3B,GAAG,CAAA;mBACY,OAAO;KACrB;MACC,KAAK,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;QAC7B,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,KAAK,GAAkC,UAAU,CACrD,CAAC,KAAkC,EAAE,GAAyB,EAAE,EAAE;IAChE,MAAM,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC9D,OAAO,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAClC,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,KAAM,SAAS,EAAE,GAAG,EAAE,GAAG,YAClD,QAAmB,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,WACtC,CACf,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { FC, PropsWithoutRef, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/utils';\nimport { ForwardProps, PropsWithDefaults } from '../../types';\nimport { calculateFontSize } from '../../styles';\n\nexport interface CountProps {\n  /** Determines the color to render the Badge as. This color is derived from the Theme.\n   * @default \"default\"\n   */\n  variant?: 'default' | 'interactive' | 'inverted' | 'urgent';\n  /** The count to be displayed within the Badge. */\n  children: number | null;\n}\n\ntype CountPropsWithDefaults = PropsWithDefaults<CountProps, 'variant'>;\n\nexport const StyledCount = styled.span<\n  Pick<CountPropsWithDefaults, 'variant'> & { children: string }\n>(props => {\n  const { foreground, background } =\n    props.variant === 'default'\n      ? props.theme.components.badges.count.base\n      : props.theme.components.badges.count[props.variant];\n\n  const invertedBackground = tryCatch(() => transparentize(0.5, mix(0.2, background, '#ffffff')));\n\n  const displayBackground = props.variant === 'inverted' ? invertedBackground : background;\n\n  const borderRadius = props.theme.base['border-radius'];\n  const { spacing } = props.theme.base;\n\n  const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);\n\n  return css`\n    background: ${displayBackground};\n    border-radius: calc(1.125 * ${borderRadius});\n    color: ${foreground};\n    display: inline-block;\n    font-size: ${fontSize.xxs};\n    font-weight: bold;\n    line-height: normal;\n    text-align: center;\n    ${props.children.length > 1 &&\n    css`\n      padding: 0 ${spacing};\n    `}\n    ${props.children.length === 1 &&\n    css`\n      width: 1.125rem;\n    `}\n  `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\nconst Count: FC<ForwardProps & CountProps> = forwardRef(\n  (props: PropsWithoutRef<CountProps>, ref: Ref<HTMLSpanElement>) => {\n    const { variant = 'default', children, ...restProps } = props;\n    return Number.isInteger(children) ? (\n      <StyledCount variant={variant} {...restProps} ref={ref}>\n        {(children as number) > 99 ? '99+' : `${children}`}\n      </StyledCount>\n    ) : null;\n  }\n);\n\nexport default Count;\n"]}

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

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