@pega/cosmos-react-core 3.0.0-dev.18.2 → 3.0.0-dev.19.0

package/lib/components/AppShell/NavigationListItemWrapper.js

@@ -36,48 +36,43 @@ const StyledNavigationPopover = styled.div(({ theme }) => {
 });
 StyledNavigationPopover.defaultProps = defaultThemeProp;
 const ListItemWrapper = props => {
-    const { children, childrenElement, label, tooltipLabel, items = [], content, navOpen, onMenuToggle } = props;
+    const { children, childElementRef, label, tooltipLabel, items = [], content, onMenuToggle } = props;
+    const { navOpen } = useContext(AppShellContext);
     const popoverRef = useRef(null);
-    const menuRef = useRef(null);
     const [popoverOpen, setPopoverOpen] = useState(false);
-    const direction = useDirection();
-    const { menuOpen, setMenuOpen } = useContext(AppShellContext);
-    const focusWithin = useFocusWithin([popoverRef, childrenElement]);
+    const { end } = useDirection();
+    const focusWithin = useFocusWithin([popoverRef, childElementRef]);
     const prevFocusWithin = usePrevious(focusWithin);
-    const closePopoverAndMenu = () => {
+    const closePopover = () => {
         if (popoverOpen) {
             setPopoverOpen(false);
-            setMenuOpen(false);
-            childrenElement?.focus();
-        }
-    };
-    useOuterEvent('click', [popoverRef?.current, menuRef?.current], () => {
-        closePopoverAndMenu();
-    });
-    const onClick = (e) => {
-        if ((items?.length || content) && !navOpen) {
-            e.stopPropagation();
-            e.preventDefault();
-            setPopoverOpen(true);
-            setMenuOpen(true);
-        }
-    };
-    const onKeyDown = (e) => {
-        if (e.key === 'Tab' && !content) {
-            setPopoverOpen(false);
-        }
-        if (e.key === 'Enter' && items.length) {
-            setPopoverOpen(true);
+            childElementRef.current?.focus();
         }
     };
+    useOuterEvent('click', [popoverRef], closePopover);
     useEffect(() => {
-        childrenElement?.addEventListener('click', onClick);
-        childrenElement?.addEventListener('keydown', onKeyDown);
+        const onClick = (e) => {
+            if ((items.length || content) && !navOpen) {
+                e.stopPropagation();
+                e.preventDefault();
+                setPopoverOpen(true);
+            }
+        };
+        const onKeyDown = (e) => {
+            if (e.key === 'Tab' && !content) {
+                setPopoverOpen(false);
+            }
+            if (e.key === 'Enter' && items.length) {
+                setPopoverOpen(true);
+            }
+        };
+        childElementRef.current?.addEventListener('click', onClick);
+        childElementRef.current?.addEventListener('keydown', onKeyDown);
         return () => {
-            childrenElement?.removeEventListener('click', onClick);
-            childrenElement?.removeEventListener('keydown', onKeyDown);
+            childElementRef.current?.removeEventListener('click', onClick);
+            childElementRef.current?.removeEventListener('keydown', onKeyDown);
         };
-    }, [childrenElement, navOpen, items]);
+    }, [items, content, navOpen]);
     useEffect(() => {
         onMenuToggle?.(popoverOpen ? 'open' : 'close');
     }, [popoverOpen]);
@@ -85,19 +80,15 @@ const ListItemWrapper = props => {
         if (!focusWithin && prevFocusWithin) {
             setPopoverOpen(false);
         }
-    }, [focusWithin]);
-    useEscape(() => {
-        closePopoverAndMenu();
-    }, childrenElement, [childrenElement]);
-    useEscape(() => {
-        closePopoverAndMenu();
-    }, popoverRef, [popoverRef]);
-    return (_jsxs(_Fragment, { children: [children, !navOpen && (_jsxs(_Fragment, { children: [!popoverOpen && !menuOpen && (_jsx(Tooltip, { target: childrenElement, placement: direction.ltr ? 'right' : 'left', showDelay: 'none', hideDelay: 'none', children: tooltipLabel })), popoverOpen && (items.length || content) && (_jsx(Popover, { target: childrenElement, placement: direction.ltr ? 'right-start' : 'left-start', ref: popoverRef, as: StyledNavigationPopover, arrow: true, children: content || (_jsx(Menu, { mode: 'action', variant: 'flyout', focusControlEl: childrenElement, ref: menuRef, items: items.map(item => {
+    }, [focusWithin, prevFocusWithin]);
+    useEscape(closePopover, childElementRef, [childElementRef]);
+    useEscape(closePopover, popoverRef, [popoverRef]);
+    return (_jsxs(_Fragment, { children: [children, !navOpen && (_jsxs(_Fragment, { children: [!popoverOpen && (_jsx(Tooltip, { target: childElementRef.current, placement: end, showDelay: 'none', hideDelay: 'none', children: tooltipLabel })), popoverOpen && (items.length || content) && (_jsx(Popover, { target: childElementRef.current, placement: `${end}-start`, ref: popoverRef, as: StyledNavigationPopover, arrow: true, children: content || (_jsx(Menu, { mode: 'action', variant: 'flyout', focusControlEl: childElementRef.current ?? undefined, items: items.map(item => {
                                 return {
                                     id: (item.primary || item.text),
                                     primary: (item.primary || item.text),
                                     href: item.href,
-                                    onClick: (id, e) => {
+                                    onClick: (_, e) => {
                                         e.stopPropagation();
                                         item.onClick?.(e);
                                         setPopoverOpen(false);

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SkipNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/SkipNavigation.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,oBAAoB,8TAkB/B,CAAC;;AAIH,wBAyDG"}
+{"version":3,"file":"SkipNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/SkipNavigation.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,oBAAoB,8TAkB/B,CAAC;;AAIH,wBA+DG"}

package/lib/components/AppShell/SkipNavigation.js

@@ -15,7 +15,7 @@ export const StyledSkipNavigation = styled(Popover)(props => {
     padding: ${spacing};
 
     &:not(:focus-within) {
-      ${hideVisually()}
+      ${hideVisually}
     }
   `;
 });
@@ -30,7 +30,7 @@ export default memo(() => {
         const target = heading ?? main;
         if (!target)
             return;
-        if (target === main && main.hasAttribute('aria-label')) {
+        if (target === main && !main.hasAttribute('aria-label')) {
             main.setAttribute('aria-label', mainContent);
             main.addEventListener('focusout', () => {
                 main.removeAttribute('aria-label');
@@ -42,7 +42,9 @@ export default memo(() => {
         else {
             target.setAttribute('tabindex', '-1');
             target.focus();
-            target.removeAttribute('tabindex');
+            target.addEventListener('focusout', () => {
+                target.removeAttribute('tabindex');
+            }, { once: true });
         }
     }, [mainContent]);
     return (_jsx(StyledSkipNavigation, { show: true, placement: 'bottom-end', target: {

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

@@ -1 +1 @@
-{"version":3,"file":"SkipNavigation.js","sourceRoot":"","sources":["../../../src/components/AppShell/SkipNavigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { memo, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\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\nexport default memo(() => {\n  const t = useI18n();\n  const mainContent = t('main_content');\n\n  const onClick = useCallback(() => {\n    const main = document.querySelector('main');\n    const container = main ?? document;\n\n    const heading = (\n      ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const\n    ).reduce<HTMLHeadingElement | null>((el, tag) => el ?? container.querySelector(tag), null);\n\n    const target = heading ?? main;\n    if (!target) return;\n\n    if (target === main && main.hasAttribute('aria-label')) {\n      main.setAttribute('aria-label', mainContent);\n      main.addEventListener(\n        'focusout',\n        () => {\n          main.removeAttribute('aria-label');\n        },\n        { once: true }\n      );\n    }\n\n    if (target.hasAttribute('tabindex')) {\n      target.focus();\n    } else {\n      target.setAttribute('tabindex', '-1');\n      target.focus();\n      target.removeAttribute('tabindex');\n    }\n  }, [mainContent]);\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"]}
+{"version":3,"file":"SkipNavigation.js","sourceRoot":"","sources":["../../../src/components/AppShell/SkipNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,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,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;;GAEjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,eAAe,IAAI,CAAC,GAAG,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,WAAW,GAAG,CAAC,CAAC,cAAc,CAAC,CAAC;IAEtC,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC5C,MAAM,SAAS,GAAG,IAAI,IAAI,QAAQ,CAAC;QAEnC,MAAM,OAAO,GACX,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CACpC,CAAC,MAAM,CAA4B,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,IAAI,SAAS,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC;QAE3F,MAAM,MAAM,GAAG,OAAO,IAAI,IAAI,CAAC;QAC/B,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,IAAI,MAAM,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE;YACvD,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;YAC7C,IAAI,CAAC,gBAAgB,CACnB,UAAU,EACV,GAAG,EAAE;gBACH,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;YACrC,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;SACH;QAED,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;YACnC,MAAM,CAAC,KAAK,EAAE,CAAC;SAChB;aAAM;YACL,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;YACtC,MAAM,CAAC,KAAK,EAAE,CAAC;YACf,MAAM,CAAC,gBAAgB,CACrB,UAAU,EACV,GAAG,EAAE;gBACH,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;YACrC,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;SACH;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,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,GACjB,GACY,CACxB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { memo, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\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\nexport default memo(() => {\n  const t = useI18n();\n  const mainContent = t('main_content');\n\n  const onClick = useCallback(() => {\n    const main = document.querySelector('main');\n    const container = main ?? document;\n\n    const heading = (\n      ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const\n    ).reduce<HTMLHeadingElement | null>((el, tag) => el ?? container.querySelector(tag), null);\n\n    const target = heading ?? main;\n    if (!target) return;\n\n    if (target === main && !main.hasAttribute('aria-label')) {\n      main.setAttribute('aria-label', mainContent);\n      main.addEventListener(\n        'focusout',\n        () => {\n          main.removeAttribute('aria-label');\n        },\n        { once: true }\n      );\n    }\n\n    if (target.hasAttribute('tabindex')) {\n      target.focus();\n    } else {\n      target.setAttribute('tabindex', '-1');\n      target.focus();\n      target.addEventListener(\n        'focusout',\n        () => {\n          target.removeAttribute('tabindex');\n        },\n        { once: true }\n      );\n    }\n  }, [mainContent]);\n\n  return (\n    <StyledSkipNavigation\n      show\n      placement='bottom-end'\n      target={{\n        getBoundingClientRect: () => ({\n          height: 0,\n          width: 0,\n          x: 24,\n          y: 24,\n          top: 24,\n          bottom: 24,\n          left: 24,\n          right: 24\n        })\n      }}\n    >\n      <Button variant='link' onClick={onClick}>\n        {t('go_to_main_content')}\n      </Button>\n    </StyledSkipNavigation>\n  );\n});\n"]}

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

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

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

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

package/lib/components/AppShell/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,YAAY,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"]}
+{"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;AAE5E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { default } from './AppShell';\nexport { default as AppShellList, AppShellListProps } from './AppShellList';\nexport { AppHeaderProps, AppShellProps, DrawerItemProps, DrawerListProps } from './AppShell.types';\nexport { default as SkipNavigation } from './SkipNavigation';\nexport { default as AppShellContext, AppShellDrawerContext } from './AppShellContext';\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,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IAC9B,yDAAyD;IACzD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,gBAAgB,CAAC,CAAC;CAC9C;AAED,aAAK,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAuBhF,eAAO,MAAM,iBAAiB,mKAM7B,CAAC;AAEF,eAAO,MAAM,YAAY;;;SAuExB,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"}
+{"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,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IAC9B,yDAAyD;IACzD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,gBAAgB,CAAC,CAAC;CAC9C;AAED,aAAK,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAuBhF,eAAO,MAAM,iBAAiB,mKAQ7B,CAAC;AAEF,eAAO,MAAM,YAAY;;;SAuExB,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

@@ -32,6 +32,8 @@ export const StyledAvatarImage = styled(Image) `
   aspect-ratio: 1 / 1;
   object-fit: cover;
   border-radius: inherit;
+  height: fit-content;
+  width: fit-content;
 `;
 export const StyledAvatar = styled.div(({ hasBrokenImage, hasSrc, size, shape, color, backgroundColor, theme: { base: { palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground } }, components: { avatar } } }) => {
     const sizeRem = sizeToRem[size];

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  /** Optional color for the icon to be rendered */\n  color?: string;\n  /** Optional background color for the avatar. Will be auto computed if not passed */\n  backgroundColor?: 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' | 'xl';\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  xl: 4\n};\n\nconst fontSizeToRem = {\n  s: 0.5625,\n  m: 0.8125,\n  l: 1,\n  xl: 1.5\n};\n\nconst sizeToBorderRadius = {\n  s: 0.25,\n  m: 0.5,\n  l: 1,\n  xl: 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    color,\n    backgroundColor,\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    let bgColor =\n      hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor || avatar['background-color'];\n    if (color && !backgroundColor && !(hasSrc && !hasBrokenImage))\n      bgColor = tryCatch(\n        () => readableColor(color),\n        () => avatar['background-color']\n      );\n    const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));\n    const iconColor = color || tryCatch(() => readableColor(bgColor));\n\n    return css`\n      position: relative;\n      background-color: ${bgColor};\n      color: ${iconColor};\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"]}
+{"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  /** Optional color for the icon to be rendered */\n  color?: string;\n  /** Optional background color for the avatar. Will be auto computed if not passed */\n  backgroundColor?: 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' | 'xl';\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  xl: 4\n};\n\nconst fontSizeToRem = {\n  s: 0.5625,\n  m: 0.8125,\n  l: 1,\n  xl: 1.5\n};\n\nconst sizeToBorderRadius = {\n  s: 0.25,\n  m: 0.5,\n  l: 1,\n  xl: 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  height: fit-content;\n  width: fit-content;\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    color,\n    backgroundColor,\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    let bgColor =\n      hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor || avatar['background-color'];\n    if (color && !backgroundColor && !(hasSrc && !hasBrokenImage))\n      bgColor = tryCatch(\n        () => readableColor(color),\n        () => avatar['background-color']\n      );\n    const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));\n    const iconColor = color || tryCatch(() => readableColor(bgColor));\n\n    return css`\n      position: relative;\n      background-color: ${bgColor};\n      color: ${iconColor};\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/Currency/utils.d.ts

@@ -1,5 +1,5 @@
 export declare const isValidCurrency: (currency: string) => boolean;
-export declare const getFormattedValue: (value: string, locale: string, currency?: string | undefined, { showGroupSeparators, showAs, numberOfDecimals }?: {
+export declare const getFormattedValue: (value: string, locale: string, currency?: string, { showGroupSeparators, showAs, numberOfDecimals }?: {
     showGroupSeparators?: boolean | undefined;
     showAs?: "symbol" | "code" | undefined;
     numberOfDecimals?: number | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Currency/utils.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,aAAc,MAAM,YAQ/C,CAAC;AAEF,eAAO,MAAM,iBAAiB,UACrB,MAAM,UACL,MAAM;;;;YAmDf,CAAC;AAEF,wBAAgB,gCAAgC,CAAC,MAAM,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAOjG;AAED,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;CACpC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,qBAAqB,UAIhG"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Currency/utils.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,aAAc,MAAM,YAQ/C,CAAC;AAEF,eAAO,MAAM,iBAAiB,UACrB,MAAM,UACL,MAAM,aACH,MAAM;;;;YAkDlB,CAAC;AAEF,wBAAgB,gCAAgC,CAAC,MAAM,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAOjG;AAED,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;CACpC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,qBAAqB,UAIhG"}

package/lib/components/DateTime/Input/usePickerButton.d.ts

@@ -1,4 +1,4 @@
 import { Dispatch, SetStateAction } from 'react';
-declare const usePickerButton: (onClose?: (() => void) | undefined) => [boolean, Dispatch<SetStateAction<boolean>>, HTMLElement | null, (instance: HTMLElement | null) => void, HTMLElement | null, (instance: HTMLElement | null) => void];
+declare const usePickerButton: (onClose?: () => void) => [boolean, Dispatch<SetStateAction<boolean>>, HTMLElement | null, (instance: HTMLElement | null) => void, HTMLElement | null, (instance: HTMLElement | null) => void];
 export default usePickerButton;
 //# sourceMappingURL=usePickerButton.d.ts.map

package/lib/components/DateTime/Input/usePickerButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePickerButton.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/usePickerButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAC;AAItE,QAAA,MAAM,eAAe,oBACH,IAAI,8FAKT,WAAW,GAAG,IAAI,KAAK,IAAI,iCAE3B,WAAW,GAAG,IAAI,KAAK,IAAI,CAoCvC,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"usePickerButton.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/usePickerButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAC;AAItE,QAAA,MAAM,eAAe,aACT,MAAM,IAAI,iFAKT,WAAW,GAAG,IAAI,KAAK,IAAI,iCAE3B,WAAW,GAAG,IAAI,KAAK,IAAI,CAoCvC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/DateTime/Input/utils.d.ts

@@ -3,18 +3,18 @@ export declare const getWeekYear: (date: Date) => number;
 export declare const getDayOfWeek: (date: Date, calendarType?: string) => number;
 export declare const getWeekdays: (calendarType: string) => Date[];
 export declare const getWeek: (date: Date, calendarType?: string) => number;
-export declare const getCalendarTypeFromLocale: (localeTag?: string | undefined) => string;
+export declare const getCalendarTypeFromLocale: (localeTag?: string) => string;
 export declare const getDateOfISOWeek: (week: number, year: number) => Date;
 export declare const parseToDate: (value: string | number | Date) => Date;
 export declare type QuarterNumber = 1 | 2 | 3 | 4;
 export declare function getQuarter(date: string | number | Date): QuarterNumber;
-export declare const getDateFormat: (localeTag?: string | undefined, options?: Intl.DateTimeFormatOptions | undefined, labelFormat?: boolean | undefined) => string[];
+export declare const getDateFormat: (localeTag?: string, options?: Intl.DateTimeFormatOptions | undefined, labelFormat?: boolean) => string[];
 export declare const getStartOfWeek: (date: Date, calendarType?: string) => Date;
 export declare const getEndOfWeek: (date: Date, calendarType?: string) => Date;
 export declare type ClockFormat = 12 | 24;
-export declare const is12HClockFormat: (localeTag?: string | undefined) => boolean;
-export declare const getLocalizedMonths: (localeTag?: string | undefined) => string[];
-export declare const getLocalizedWeekDays: (localeTag?: string | undefined) => {
+export declare const is12HClockFormat: (localeTag?: string) => boolean;
+export declare const getLocalizedMonths: (localeTag?: string) => string[];
+export declare const getLocalizedWeekDays: (localeTag?: string) => {
     [key: number]: string;
 };
 export declare const MS_IN_SECOND = 1000;
@@ -41,7 +41,7 @@ export declare const getTimeOptions: (withSeconds: boolean, is12h?: boolean) =>
 };
 export declare const validateDate: (year: number, month: number, day: number) => boolean;
 export declare const validateTime: (hour: number, minute: number, second: number, is12h: boolean) => boolean;
-export declare const toUTCDateString: (date: Date, format?: Intl.DateTimeFormat | undefined) => string;
+export declare const toUTCDateString: (date: Date, format?: Intl.DateTimeFormat) => string;
 export declare const isISODate: (value: string) => boolean;
 export declare const isTime: (value: string) => boolean;
 export declare const parseLocaleTextToDateParams: (value: string, localeTag: string) => number[] | undefined;

package/lib/components/DateTime/Input/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAK1E,eAAO,MAAM,WAAW,SAAU,IAAI,KAAG,MAIxC,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,IAAI,kCAetC,CAAC;AAEF,eAAO,MAAM,WAAW,iBAAkB,MAAM,WAS/C,CAAC;AAGF,eAAO,MAAM,OAAO,SAAU,IAAI,iBAAgB,MAAM,KAA6B,MAgBpF,CAAC;AAEF,eAAO,MAAM,yBAAyB,4CAMrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,SAAU,MAAM,QAAQ,MAAM,KAAG,IAO7D,CAAC;AAIF,eAAO,MAAM,WAAW,UAAW,MAAM,GAAG,MAAM,GAAG,IAAI,KAAG,IAsB3D,CAAC;AAEF,oBAAY,aAAa,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE1C,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,aAAa,CAItE;AAED,eAAO,MAAM,aAAa,6CAEd,KAAK,qBAAqB,GAAG,SAAS,gDA0BjD,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,IAAI,iBAAgB,MAAM,SAK9D,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,IAAI,iBAAgB,MAAM,SAK5D,CAAC;AAEF,oBAAY,WAAW,GAAG,EAAE,GAAG,EAAE,CAAC;AAElC,eAAO,MAAM,gBAAgB,sCAAyB,OAQrD,CAAC;AAKF,eAAO,MAAM,kBAAkB,8CAK9B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;CAUhC,CAAC;AAEF,eAAO,MAAM,YAAY,OAAO,CAAC;AACjC,eAAO,MAAM,YAAY,QAAY,CAAC;AACtC,eAAO,MAAM,UAAU,QAAiB,CAAC;AACzC,eAAO,MAAM,SAAS,QAAsB,CAAC;AAE7C,eAAO,MAAM,cAAc,OAAQ,MAAM,KAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAS5F,CAAC;AAEF,eAAO,MAAM,cAAc;UAKnB,MAAM;YACJ,MAAM;YACN,MAAM;MACZ,MAKH,CAAC;AAEF,eAAO,MAAM,YAAY,OAAQ,MAAM,UAAU,MAAM,KAAG,MAgBzD,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,UAAU,MAAM,KAAG,MAgB5D,CAAC;AAEF,eAAO,MAAM,cAAc,gBAAiB,OAAO,UAAS,OAAO;;;;;CAOlE,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,MAAM,SAAS,MAAM,OAAO,MAAM,YAEpE,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,MAAM,UAAU,MAAM,UAAU,MAAM,SAAS,OAAO,YAIxF,CAAC;AAEF,eAAO,MAAM,eAAe,SAAU,IAAI,qDAGzC,CAAC;AAKF,eAAO,MAAM,SAAS,UAAW,MAAM,KAAG,OAEzC,CAAC;AAIF,eAAO,MAAM,MAAM,UAAW,MAAM,KAAG,OAEtC,CAAC;AAEF,eAAO,MAAM,2BAA2B,UAAW,MAAM,aAAa,MAAM,yBAyB3E,CAAC;AAEF,eAAO,MAAM,qBAAqB,UACzB,MAAM,aACF,MAAM,eACJ,IAAI,KAChB,IAAI,GAAG,SAiBT,CAAC;AAiBF,eAAO,MAAM,6BAA6B,SAClC,IAAI,GAAG,SAAS,QAChB,MAAM,GAAG,UAAU,GAAG,MAAM,UAC1B,MAAM,eACD,oBAAoB,eAAe,CAAC,QAC3C,OAAO,KACZ,MAuBF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAK1E,eAAO,MAAM,WAAW,SAAU,IAAI,KAAG,MAIxC,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,IAAI,kCAetC,CAAC;AAEF,eAAO,MAAM,WAAW,iBAAkB,MAAM,WAS/C,CAAC;AAGF,eAAO,MAAM,OAAO,SAAU,IAAI,iBAAgB,MAAM,KAA6B,MAgBpF,CAAC;AAEF,eAAO,MAAM,yBAAyB,eAAgB,MAAM,WAM3D,CAAC;AAEF,eAAO,MAAM,gBAAgB,SAAU,MAAM,QAAQ,MAAM,KAAG,IAO7D,CAAC;AAIF,eAAO,MAAM,WAAW,UAAW,MAAM,GAAG,MAAM,GAAG,IAAI,KAAG,IAsB3D,CAAC;AAEF,oBAAY,aAAa,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE1C,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,aAAa,CAItE;AAED,eAAO,MAAM,aAAa,eACZ,MAAM,YACR,KAAK,qBAAqB,GAAG,SAAS,gBAClC,OAAO,aAyBtB,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,IAAI,iBAAgB,MAAM,SAK9D,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,IAAI,iBAAgB,MAAM,SAK5D,CAAC;AAEF,oBAAY,WAAW,GAAG,EAAE,GAAG,EAAE,CAAC;AAElC,eAAO,MAAM,gBAAgB,eAAgB,MAAM,KAAG,OAQrD,CAAC;AAKF,eAAO,MAAM,kBAAkB,eAAgB,MAAM,aAKpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,eAAgB,MAAM;;CAUtD,CAAC;AAEF,eAAO,MAAM,YAAY,OAAO,CAAC;AACjC,eAAO,MAAM,YAAY,QAAY,CAAC;AACtC,eAAO,MAAM,UAAU,QAAiB,CAAC;AACzC,eAAO,MAAM,SAAS,QAAsB,CAAC;AAE7C,eAAO,MAAM,cAAc,OAAQ,MAAM,KAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAS5F,CAAC;AAEF,eAAO,MAAM,cAAc;UAKnB,MAAM;YACJ,MAAM;YACN,MAAM;MACZ,MAKH,CAAC;AAEF,eAAO,MAAM,YAAY,OAAQ,MAAM,UAAU,MAAM,KAAG,MAgBzD,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,UAAU,MAAM,KAAG,MAgB5D,CAAC;AAEF,eAAO,MAAM,cAAc,gBAAiB,OAAO,UAAS,OAAO;;;;;CAOlE,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,MAAM,SAAS,MAAM,OAAO,MAAM,YAEpE,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,MAAM,UAAU,MAAM,UAAU,MAAM,SAAS,OAAO,YAIxF,CAAC;AAEF,eAAO,MAAM,eAAe,SAAU,IAAI,WAAW,KAAK,cAAc,WAGvE,CAAC;AAKF,eAAO,MAAM,SAAS,UAAW,MAAM,KAAG,OAEzC,CAAC;AAIF,eAAO,MAAM,MAAM,UAAW,MAAM,KAAG,OAEtC,CAAC;AAEF,eAAO,MAAM,2BAA2B,UAAW,MAAM,aAAa,MAAM,yBAyB3E,CAAC;AAEF,eAAO,MAAM,qBAAqB,UACzB,MAAM,aACF,MAAM,eACJ,IAAI,KAChB,IAAI,GAAG,SAiBT,CAAC;AAiBF,eAAO,MAAM,6BAA6B,SAClC,IAAI,GAAG,SAAS,QAChB,MAAM,GAAG,UAAU,GAAG,MAAM,UAC1B,MAAM,eACD,oBAAoB,eAAe,CAAC,QAC3C,OAAO,KACZ,MAuBF,CAAC"}

package/lib/components/DateTime/Picker/utils.d.ts

@@ -1,4 +1,4 @@
-export declare const getLocalizedDays: (calendarType: string, localeTag?: string | undefined) => string[][];
+export declare const getLocalizedDays: (calendarType: string, localeTag?: string) => string[][];
 export declare const isValidDate: (date: Date) => boolean;
 export declare const getDaysOfMonth: (date: Date, calendarType: string) => Date[];
 export declare const getWeeksOfMonth: (date: Date, calendarType: string) => number[];

package/lib/components/DateTime/Picker/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/utils.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,iBAAkB,MAAM,+CAOpD,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,IAAI,YAErC,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,IAAI,gBAAgB,MAAM,KAAG,IAAI,EAQrE,CAAC;AAEF,eAAO,MAAM,eAAe,SAAU,IAAI,gBAAgB,MAAM,KAAG,MAAM,EAmBxE,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,IAAI,WAGtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,SAAU,IAAI,WAG1C,CAAC;AAIF,wBAAiB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,kCAMrD"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/utils.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,iBAAkB,MAAM,cAAc,MAAM,eAOxE,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,IAAI,YAErC,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,IAAI,gBAAgB,MAAM,KAAG,IAAI,EAQrE,CAAC;AAEF,eAAO,MAAM,eAAe,SAAU,IAAI,gBAAgB,MAAM,KAAG,MAAM,EAmBxE,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,IAAI,WAGtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,SAAU,IAAI,WAG1C,CAAC;AAIF,wBAAiB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,kCAMrD"}

package/lib/components/Dialog/Dialog.d.ts

@@ -15,6 +15,7 @@ export interface DialogProps extends BaseProps {
     loading?: boolean;
     ref?: Ref<HTMLDivElement>;
 }
+export declare const StyledDialogTitle: import("styled-components").StyledComponent<FunctionComponent<import("../Text").TextProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const useDialog: () => {
     target: HTMLElement | null;
     loading: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAKH,UAAU,IAAI,eAAe,EAC7B,aAAa,IAAI,kBAAkB,EACpC,MAAM,OAAO,CAAC;AAcf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKtD,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAKnD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AA4CD,eAAO,MAAM,SAAS;;;;;yBAeC,eAAe;uBAGjB,kBAAkB;;4BAdN,eAAe,GAAG,kBAAkB;CAsBpE,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA8JzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAKH,UAAU,IAAI,eAAe,EAC7B,aAAa,IAAI,kBAAkB,EACpC,MAAM,OAAO,CAAC;AAcf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKtD,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAKnD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAkBD,eAAO,MAAM,iBAAiB,iKAsB7B,CAAC;AAIF,eAAO,MAAM,SAAS;;;;;yBAeC,eAAe;uBAGjB,kBAAkB;;4BAdN,eAAe,GAAG,kBAAkB;CAsBpE,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA8JzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Dialog/Dialog.js

@@ -19,7 +19,7 @@ const StyledDialog = styled.dialog(({ theme: { base: { 'content-width': contentW
     `;
 });
 StyledDialog.defaultProps = defaultThemeProp;
-const StyledDialogTitle = styled(Text)(({ theme: { base: { shadow, 'border-radius': borderRadius } } }) => {
+export const StyledDialogTitle = styled(Text)(({ theme: { base: { shadow, 'border-radius': borderRadius } } }) => {
     return css `
       position: relative;
       ::after {

package/lib/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  MouseEvent as ReactMouseEvent,\n  KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  usePrevious,\n  useUID\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { getFocusables } from '../../utils';\nimport Button from '../Button';\nimport { CardContent, CardFooter, CardHeader } from '../Card';\nimport Icon from '../Icon';\nimport Popover, { PopoverProps } from '../Popover';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface DialogProps extends BaseProps {\n  target: HTMLElement | null;\n  placement?: PopoverProps['placement'];\n  children: PopoverProps['children'];\n  heading: string;\n  headingHidden?: boolean;\n  onSubmit?: (arg: { close: () => void }) => void;\n  onClose?: () => void;\n  onOpen?: () => void;\n  loading?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledDialog = styled.dialog(\n  ({\n    theme: {\n      base: { 'content-width': contentWidth }\n    }\n  }) => {\n    return css`\n      border: none;\n      min-width: ${contentWidth.sm};\n      max-width: ${contentWidth.lg};\n    `;\n  }\n);\n\nStyledDialog.defaultProps = defaultThemeProp;\n\nconst StyledDialogTitle = styled(Text)(\n  ({\n    theme: {\n      base: { shadow, 'border-radius': borderRadius }\n    }\n  }) => {\n    return css`\n      position: relative;\n      ::after {\n        content: '';\n        border-radius: ${borderRadius};\n        position: absolute;\n        inset: -0.25rem;\n      }\n      :focus-visible {\n        outline: none;\n        ::after {\n          box-shadow: ${shadow.focus}, inset ${shadow['focus-solid']};\n        }\n      }\n    `;\n  }\n);\n\nStyledDialogTitle.defaultProps = defaultThemeProp;\n\nexport const useDialog = () => {\n  const [target, setTarget] = useState<HTMLElement | null>(null);\n  const [loading, setLoading] = useState(false);\n\n  const setTargetWithEvent = (e: ReactMouseEvent | ReactKeyboardEvent) => {\n    if (e.target instanceof HTMLElement) {\n      setTarget(e.target);\n    }\n  };\n\n  return {\n    target,\n    loading,\n    setLoading,\n    events: {\n      onMouseDown: (e: ReactMouseEvent) => {\n        setTargetWithEvent(e);\n      },\n      onKeyDown: (e: ReactKeyboardEvent) => {\n        if (e.key === 'Enter') {\n          setTargetWithEvent(e);\n        }\n      }\n    },\n    setTargetWithEvent\n  };\n};\n\nconst Dialog: FunctionComponent<DialogProps & ForwardProps> = forwardRef(\n  (\n    {\n      target,\n      placement,\n      heading,\n      headingHidden = false,\n      onSubmit,\n      onClose,\n      onOpen,\n      loading,\n      children\n    }: PropsWithoutRef<DialogProps>,\n    ref: DialogProps['ref']\n  ) => {\n    const t = useI18n();\n    const headingId = useUID();\n    const [popoverEl, setPopoverEl] = useElement<HTMLDivElement>();\n    const popoverRef = useConsolidatedRef(ref, setPopoverEl);\n    const headingRef = useRef<HTMLSpanElement>(null);\n    const [currentTarget, setCurrentTarget] = useState(() => target);\n    const [show, setShow] = useState(false);\n    const skipChangeShow = useRef(false);\n    const prevTarget = usePrevious(target);\n    useEscape(\n      () => {\n        if (show) {\n          setShow(false);\n        }\n      },\n      undefined,\n      [show, setShow]\n    );\n    useOuterEvent('mousedown', [target, popoverEl], () => {\n      if (target && popoverEl && show) {\n        setShow(false);\n        onClose?.();\n      }\n    });\n    useFocusTrap(popoverRef);\n\n    useEffect(() => {\n      if (!show) {\n        currentTarget?.focus();\n      }\n    }, [show]);\n\n    useEffect(() => {\n      if (show && popoverEl) {\n        if (headingRef.current) {\n          headingRef.current.focus();\n        } else {\n          const focusables = getFocusables(popoverRef);\n          focusables[0]?.focus();\n        }\n      }\n    }, [show, popoverEl]);\n\n    useLayoutEffect(() => {\n      const onTargetClick = (e: MouseEvent) => {\n        setCurrentTarget(prev => (e.target ? (e.target as HTMLElement) : prev));\n        if (!skipChangeShow.current) {\n          setShow(prev => !prev);\n        } else {\n          skipChangeShow.current = false;\n        }\n      };\n      if (target instanceof HTMLElement) {\n        target.addEventListener('click', onTargetClick);\n      }\n      return () => {\n        if (target instanceof HTMLElement) {\n          target.removeEventListener('click', onTargetClick);\n        }\n      };\n    }, [target]);\n\n    useEffect(() => {\n      if (show) {\n        onOpen?.();\n      } else {\n        onClose?.();\n      }\n    }, [show]);\n\n    useEffect(() => {\n      /* If our target is changing and the popover is already open we will want\n      to skip the next change. The next show change would come from a click on the new button,\n      the popover should stay open. */\n      if (target !== prevTarget && show) {\n        skipChangeShow.current = true;\n      }\n    }, [target, show]);\n\n    const onTitleKeyDown = (e: ReactKeyboardEvent) => {\n      const focusables = getFocusables(popoverRef);\n      if (e.shiftKey && e.key === 'Tab') {\n        e.preventDefault();\n        focusables[focusables.length - 1].focus();\n      }\n    };\n\n    const progress = loading ? <Progress placement='local' /> : null;\n\n    return (\n      <Popover\n        as={StyledDialog}\n        ref={popoverRef}\n        target={currentTarget}\n        placement={placement}\n        show={show}\n        open={show}\n        aria-labelledby={headingId}\n      >\n        <CardHeader\n          actions={\n            !onSubmit ? (\n              <Button icon variant='simple' onClick={() => setShow(false)} aria-label={t('close')}>\n                <Icon name='times' />\n              </Button>\n            ) : undefined\n          }\n        >\n          {headingHidden ? (\n            <VisuallyHiddenText id={headingId}>{heading}</VisuallyHiddenText>\n          ) : (\n            <StyledDialogTitle\n              variant='h2'\n              tabIndex={-1}\n              ref={headingRef}\n              onKeyDown={onTitleKeyDown}\n              id={headingId}\n            >\n              {heading}\n            </StyledDialogTitle>\n          )}\n        </CardHeader>\n        <CardContent>\n          {children}\n          {progress}\n        </CardContent>\n        {onSubmit && (\n          <CardFooter justify='between'>\n            <Button variant='secondary' onClick={() => setShow(false)}>\n              {t('cancel')}\n            </Button>\n            <Button\n              variant='primary'\n              onClick={() => onSubmit({ close: () => setShow(false) })}\n              disabled={loading}\n            >\n              {t('submit')}\n            </Button>\n          </CardFooter>\n        )}\n      </Popover>\n    );\n  }\n);\n\nexport default Dialog;\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  MouseEvent as ReactMouseEvent,\n  KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  usePrevious,\n  useUID\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { getFocusables } from '../../utils';\nimport Button from '../Button';\nimport { CardContent, CardFooter, CardHeader } from '../Card';\nimport Icon from '../Icon';\nimport Popover, { PopoverProps } from '../Popover';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface DialogProps extends BaseProps {\n  target: HTMLElement | null;\n  placement?: PopoverProps['placement'];\n  children: PopoverProps['children'];\n  heading: string;\n  headingHidden?: boolean;\n  onSubmit?: (arg: { close: () => void }) => void;\n  onClose?: () => void;\n  onOpen?: () => void;\n  loading?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledDialog = styled.dialog(\n  ({\n    theme: {\n      base: { 'content-width': contentWidth }\n    }\n  }) => {\n    return css`\n      border: none;\n      min-width: ${contentWidth.sm};\n      max-width: ${contentWidth.lg};\n    `;\n  }\n);\n\nStyledDialog.defaultProps = defaultThemeProp;\n\nexport const StyledDialogTitle = styled(Text)(\n  ({\n    theme: {\n      base: { shadow, 'border-radius': borderRadius }\n    }\n  }) => {\n    return css`\n      position: relative;\n      ::after {\n        content: '';\n        border-radius: ${borderRadius};\n        position: absolute;\n        inset: -0.25rem;\n      }\n      :focus-visible {\n        outline: none;\n        ::after {\n          box-shadow: ${shadow.focus}, inset ${shadow['focus-solid']};\n        }\n      }\n    `;\n  }\n);\n\nStyledDialogTitle.defaultProps = defaultThemeProp;\n\nexport const useDialog = () => {\n  const [target, setTarget] = useState<HTMLElement | null>(null);\n  const [loading, setLoading] = useState(false);\n\n  const setTargetWithEvent = (e: ReactMouseEvent | ReactKeyboardEvent) => {\n    if (e.target instanceof HTMLElement) {\n      setTarget(e.target);\n    }\n  };\n\n  return {\n    target,\n    loading,\n    setLoading,\n    events: {\n      onMouseDown: (e: ReactMouseEvent) => {\n        setTargetWithEvent(e);\n      },\n      onKeyDown: (e: ReactKeyboardEvent) => {\n        if (e.key === 'Enter') {\n          setTargetWithEvent(e);\n        }\n      }\n    },\n    setTargetWithEvent\n  };\n};\n\nconst Dialog: FunctionComponent<DialogProps & ForwardProps> = forwardRef(\n  (\n    {\n      target,\n      placement,\n      heading,\n      headingHidden = false,\n      onSubmit,\n      onClose,\n      onOpen,\n      loading,\n      children\n    }: PropsWithoutRef<DialogProps>,\n    ref: DialogProps['ref']\n  ) => {\n    const t = useI18n();\n    const headingId = useUID();\n    const [popoverEl, setPopoverEl] = useElement<HTMLDivElement>();\n    const popoverRef = useConsolidatedRef(ref, setPopoverEl);\n    const headingRef = useRef<HTMLSpanElement>(null);\n    const [currentTarget, setCurrentTarget] = useState(() => target);\n    const [show, setShow] = useState(false);\n    const skipChangeShow = useRef(false);\n    const prevTarget = usePrevious(target);\n    useEscape(\n      () => {\n        if (show) {\n          setShow(false);\n        }\n      },\n      undefined,\n      [show, setShow]\n    );\n    useOuterEvent('mousedown', [target, popoverEl], () => {\n      if (target && popoverEl && show) {\n        setShow(false);\n        onClose?.();\n      }\n    });\n    useFocusTrap(popoverRef);\n\n    useEffect(() => {\n      if (!show) {\n        currentTarget?.focus();\n      }\n    }, [show]);\n\n    useEffect(() => {\n      if (show && popoverEl) {\n        if (headingRef.current) {\n          headingRef.current.focus();\n        } else {\n          const focusables = getFocusables(popoverRef);\n          focusables[0]?.focus();\n        }\n      }\n    }, [show, popoverEl]);\n\n    useLayoutEffect(() => {\n      const onTargetClick = (e: MouseEvent) => {\n        setCurrentTarget(prev => (e.target ? (e.target as HTMLElement) : prev));\n        if (!skipChangeShow.current) {\n          setShow(prev => !prev);\n        } else {\n          skipChangeShow.current = false;\n        }\n      };\n      if (target instanceof HTMLElement) {\n        target.addEventListener('click', onTargetClick);\n      }\n      return () => {\n        if (target instanceof HTMLElement) {\n          target.removeEventListener('click', onTargetClick);\n        }\n      };\n    }, [target]);\n\n    useEffect(() => {\n      if (show) {\n        onOpen?.();\n      } else {\n        onClose?.();\n      }\n    }, [show]);\n\n    useEffect(() => {\n      /* If our target is changing and the popover is already open we will want\n      to skip the next change. The next show change would come from a click on the new button,\n      the popover should stay open. */\n      if (target !== prevTarget && show) {\n        skipChangeShow.current = true;\n      }\n    }, [target, show]);\n\n    const onTitleKeyDown = (e: ReactKeyboardEvent) => {\n      const focusables = getFocusables(popoverRef);\n      if (e.shiftKey && e.key === 'Tab') {\n        e.preventDefault();\n        focusables[focusables.length - 1].focus();\n      }\n    };\n\n    const progress = loading ? <Progress placement='local' /> : null;\n\n    return (\n      <Popover\n        as={StyledDialog}\n        ref={popoverRef}\n        target={currentTarget}\n        placement={placement}\n        show={show}\n        open={show}\n        aria-labelledby={headingId}\n      >\n        <CardHeader\n          actions={\n            !onSubmit ? (\n              <Button icon variant='simple' onClick={() => setShow(false)} aria-label={t('close')}>\n                <Icon name='times' />\n              </Button>\n            ) : undefined\n          }\n        >\n          {headingHidden ? (\n            <VisuallyHiddenText id={headingId}>{heading}</VisuallyHiddenText>\n          ) : (\n            <StyledDialogTitle\n              variant='h2'\n              tabIndex={-1}\n              ref={headingRef}\n              onKeyDown={onTitleKeyDown}\n              id={headingId}\n            >\n              {heading}\n            </StyledDialogTitle>\n          )}\n        </CardHeader>\n        <CardContent>\n          {children}\n          {progress}\n        </CardContent>\n        {onSubmit && (\n          <CardFooter justify='between'>\n            <Button variant='secondary' onClick={() => setShow(false)}>\n              {t('cancel')}\n            </Button>\n            <Button\n              variant='primary'\n              onClick={() => onSubmit({ close: () => setShow(false) })}\n              disabled={loading}\n            >\n              {t('submit')}\n            </Button>\n          </CardFooter>\n        )}\n      </Popover>\n    );\n  }\n);\n\nexport default Dialog;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandCollapse.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAGjB,SAAS,EAMV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAqB,MAAM,aAAa,CAAC;AAGjF,MAAM,WAAW,mBAAoB,SAAQ,MAAM,EAAE,SAAS;IAC5D,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC/B,8FAA8F;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yIAAyI;IACzI,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAmED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAgGzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ExpandCollapse.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAGjB,SAAS,EAMV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAqB,MAAM,aAAa,CAAC;AAGjF,MAAM,WAAW,mBAAoB,SAAQ,MAAM,EAAE,SAAS;IAC5D,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC/B,8FAA8F;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yIAAyI;IACzI,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAmED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA0FzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/ExpandCollapse/ExpandCollapse.js

@@ -87,7 +87,7 @@ const ExpandCollapse = forwardRef((props, refArg) => {
             transitionTimingFunction: themeAnimation.timing.ease
         });
     }
-    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (_jsx(Tag, { ref: ref, onTransitionEnd: onTransitionEnd, ...restProps, style: style, "aria-expanded": collapsed ? 'false' : 'true', children: children }));
+    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (_jsx(Tag, { ref: ref, onTransitionEnd: onTransitionEnd, ...restProps, style: style, children: children }));
 });
 export default ExpandCollapse;
 //# sourceMappingURL=ExpandCollapse.js.map

package/lib/components/ExpandCollapse/ExpandCollapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandCollapse.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  Ref,\n  forwardRef,\n  ReactNode,\n  PropsWithoutRef,\n  useState,\n  useLayoutEffect,\n  useCallback,\n  CSSProperties\n} from 'react';\n\nimport { ForwardProps, BaseProps, AsProp, PropsWithDefaults } from '../../types';\nimport { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';\n\nexport interface ExpandCollapseProps extends AsProp, BaseProps {\n  /** Content to expand/collapse. */\n  children?: ReactNode;\n  /**\n   * If true,the content will be hidden.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Used to determine the transition property.\n   * @default \"height\"\n   */\n  dimension?: 'height' | 'width';\n  /** Minimum height/width to collapse to. This will set the starting collapsed size as well. */\n  min?: string;\n  /** Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. */\n  max?: string;\n  /**  Callback fired after content collapsed.  */\n  onAfterCollapse?: () => void;\n  /**  Callback fired after content expanded.  */\n  onAfterExpand?: () => void;\n  /**  Callback fired before content collapsed.  */\n  onBeforeCollapse?: () => void;\n  /** Callback fired before content expanded.  */\n  onBeforeExpand?: () => void;\n  /**\n   * Determine the speed of animation. This value comes from `theme.base.animation.speed`.\n   * @default \"0.25s\"\n   */\n  transitionSpeed?: string;\n  /**\n   * If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level.\n   * @default false\n   */\n  nullWhenCollapsed?: boolean;\n}\n\ntype ExpandCollapsePropsWithDefaults = PropsWithDefaults<\n  ExpandCollapseProps,\n  'collapsed' | 'dimension' | 'transitionSpeed' | 'nullWhenCollapsed'\n>;\n\ntype Statuses = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';\n\ninterface GetStyleProps\n  extends Pick<\n    ExpandCollapsePropsWithDefaults,\n    'dimension' | 'transitionSpeed' | 'min' | 'max' | 'nullWhenCollapsed'\n  > {\n  status: Statuses;\n  el?: HTMLElement | null;\n  transitionTimingFunction?: string;\n}\n\nconst getScrollSize = (\n  el: HTMLElement,\n  dimension: ExpandCollapsePropsWithDefaults['dimension']\n): string => {\n  if (!el) return '';\n  return dimension === 'height' ? `${el.scrollHeight}px` : `${el.scrollWidth}px`;\n};\n\nconst getStyle = (props: GetStyleProps): CSSProperties => {\n  const {\n    status,\n    dimension,\n    transitionSpeed,\n    transitionTimingFunction,\n    min,\n    max,\n    nullWhenCollapsed,\n    el\n  } = props;\n  const style: CSSProperties = {};\n  let maxSize = max;\n\n  if (el && !max) {\n    maxSize = getScrollSize(el, dimension!);\n  }\n\n  if (status === 'expanded' || status === 'collapsed') {\n    if (max || min) {\n      style[dimension as 'height' | 'width'] = status === 'expanded' ? maxSize : min || 0;\n      style[`overflow${dimension === 'width' ? 'X' : 'Y'}`] = 'hidden';\n    }\n\n    if (status === 'collapsed' && !nullWhenCollapsed && !min) {\n      style.display = 'none';\n    }\n  }\n\n  if (status === 'expanding' || status === 'collapsing') {\n    style[dimension as 'height' | 'width'] = status === 'expanding' ? maxSize : min || 0;\n    style.overflow = 'hidden';\n    style.transitionProperty = dimension;\n    style.transitionDuration = `max(${transitionSpeed}, 0.01ms)`;\n    style.transitionTimingFunction = transitionTimingFunction;\n  }\n\n  return style;\n};\n\nconst ExpandCollapse: FunctionComponent<ExpandCollapseProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ExpandCollapseProps>, refArg: Ref<HTMLElement>) => {\n    const {\n      base: { animation: themeAnimation }\n    } = useTheme();\n\n    const {\n      children,\n      dimension = 'height',\n      collapsed = false,\n      onBeforeExpand,\n      onAfterExpand,\n      onBeforeCollapse,\n      onAfterCollapse,\n      transitionSpeed = themeAnimation.speed,\n      min,\n      max,\n      nullWhenCollapsed = false,\n      as: Tag = 'div',\n      ...restProps\n    } = props;\n\n    const [status, setStatus] = useState<Statuses>(collapsed ? 'collapsed' : 'expanded');\n    const styleStateHook = useState<CSSProperties>();\n    const setStyle = styleStateHook[1];\n    let style = styleStateHook[0];\n    const previousStatus = usePrevious(status);\n    const ref = useConsolidatedRef(refArg);\n\n    const onTransitionEnd = useCallback(\n      (e: TransitionEvent) => {\n        if (e.target !== ref.current || e.propertyName !== dimension) return;\n        setStatus(status === 'expanding' ? 'expanded' : 'collapsed');\n      },\n      [ref.current, status]\n    );\n\n    useLayoutEffect(() => {\n      const wantsToCollapse = collapsed;\n      const wantsToExpand = !collapsed;\n      const canCollapse = ['expanded', 'expanding'].includes(status);\n      const canExpand = ['collapsed', 'collapsing'].includes(status);\n\n      if (wantsToExpand && canExpand) {\n        onBeforeExpand?.();\n        setStatus('expanding');\n      } else if (wantsToCollapse && canCollapse) {\n        onBeforeCollapse?.();\n        setStatus('collapsing');\n      }\n\n      if (status === 'expanded' && previousStatus !== 'expanded') {\n        onAfterExpand?.();\n      } else if (status === 'collapsed' && previousStatus !== 'collapsed') {\n        onAfterCollapse?.();\n      }\n\n      setStyle(\n        getStyle({\n          dimension,\n          min,\n          max,\n          transitionSpeed,\n          nullWhenCollapsed,\n          status,\n          el: ref.current,\n          transitionTimingFunction: themeAnimation.timing.ease\n        })\n      );\n    }, [collapsed, status, min, max]);\n\n    if (status !== previousStatus && ['expanded', 'collapsed'].includes(previousStatus!)) {\n      style = getStyle({\n        dimension,\n        min,\n        max,\n        transitionSpeed,\n        nullWhenCollapsed,\n        status: status === 'expanding' ? 'collapsing' : 'expanding',\n        el: ref.current,\n        transitionTimingFunction: themeAnimation.timing.ease\n      });\n    }\n\n    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (\n      <Tag\n        ref={ref}\n        onTransitionEnd={onTransitionEnd}\n        {...restProps}\n        style={style}\n        aria-expanded={collapsed ? 'false' : 'true'}\n      >\n        {children}\n      </Tag>\n    );\n  }\n);\n\nexport default ExpandCollapse;\n"]}
+{"version":3,"file":"ExpandCollapse.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  Ref,\n  forwardRef,\n  ReactNode,\n  PropsWithoutRef,\n  useState,\n  useLayoutEffect,\n  useCallback,\n  CSSProperties\n} from 'react';\n\nimport { ForwardProps, BaseProps, AsProp, PropsWithDefaults } from '../../types';\nimport { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';\n\nexport interface ExpandCollapseProps extends AsProp, BaseProps {\n  /** Content to expand/collapse. */\n  children?: ReactNode;\n  /**\n   * If true,the content will be hidden.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Used to determine the transition property.\n   * @default \"height\"\n   */\n  dimension?: 'height' | 'width';\n  /** Minimum height/width to collapse to. This will set the starting collapsed size as well. */\n  min?: string;\n  /** Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. */\n  max?: string;\n  /**  Callback fired after content collapsed.  */\n  onAfterCollapse?: () => void;\n  /**  Callback fired after content expanded.  */\n  onAfterExpand?: () => void;\n  /**  Callback fired before content collapsed.  */\n  onBeforeCollapse?: () => void;\n  /** Callback fired before content expanded.  */\n  onBeforeExpand?: () => void;\n  /**\n   * Determine the speed of animation. This value comes from `theme.base.animation.speed`.\n   * @default \"0.25s\"\n   */\n  transitionSpeed?: string;\n  /**\n   * If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level.\n   * @default false\n   */\n  nullWhenCollapsed?: boolean;\n}\n\ntype ExpandCollapsePropsWithDefaults = PropsWithDefaults<\n  ExpandCollapseProps,\n  'collapsed' | 'dimension' | 'transitionSpeed' | 'nullWhenCollapsed'\n>;\n\ntype Statuses = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';\n\ninterface GetStyleProps\n  extends Pick<\n    ExpandCollapsePropsWithDefaults,\n    'dimension' | 'transitionSpeed' | 'min' | 'max' | 'nullWhenCollapsed'\n  > {\n  status: Statuses;\n  el?: HTMLElement | null;\n  transitionTimingFunction?: string;\n}\n\nconst getScrollSize = (\n  el: HTMLElement,\n  dimension: ExpandCollapsePropsWithDefaults['dimension']\n): string => {\n  if (!el) return '';\n  return dimension === 'height' ? `${el.scrollHeight}px` : `${el.scrollWidth}px`;\n};\n\nconst getStyle = (props: GetStyleProps): CSSProperties => {\n  const {\n    status,\n    dimension,\n    transitionSpeed,\n    transitionTimingFunction,\n    min,\n    max,\n    nullWhenCollapsed,\n    el\n  } = props;\n  const style: CSSProperties = {};\n  let maxSize = max;\n\n  if (el && !max) {\n    maxSize = getScrollSize(el, dimension!);\n  }\n\n  if (status === 'expanded' || status === 'collapsed') {\n    if (max || min) {\n      style[dimension as 'height' | 'width'] = status === 'expanded' ? maxSize : min || 0;\n      style[`overflow${dimension === 'width' ? 'X' : 'Y'}`] = 'hidden';\n    }\n\n    if (status === 'collapsed' && !nullWhenCollapsed && !min) {\n      style.display = 'none';\n    }\n  }\n\n  if (status === 'expanding' || status === 'collapsing') {\n    style[dimension as 'height' | 'width'] = status === 'expanding' ? maxSize : min || 0;\n    style.overflow = 'hidden';\n    style.transitionProperty = dimension;\n    style.transitionDuration = `max(${transitionSpeed}, 0.01ms)`;\n    style.transitionTimingFunction = transitionTimingFunction;\n  }\n\n  return style;\n};\n\nconst ExpandCollapse: FunctionComponent<ExpandCollapseProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ExpandCollapseProps>, refArg: Ref<HTMLElement>) => {\n    const {\n      base: { animation: themeAnimation }\n    } = useTheme();\n\n    const {\n      children,\n      dimension = 'height',\n      collapsed = false,\n      onBeforeExpand,\n      onAfterExpand,\n      onBeforeCollapse,\n      onAfterCollapse,\n      transitionSpeed = themeAnimation.speed,\n      min,\n      max,\n      nullWhenCollapsed = false,\n      as: Tag = 'div',\n      ...restProps\n    } = props;\n\n    const [status, setStatus] = useState<Statuses>(collapsed ? 'collapsed' : 'expanded');\n    const styleStateHook = useState<CSSProperties>();\n    const setStyle = styleStateHook[1];\n    let style = styleStateHook[0];\n    const previousStatus = usePrevious(status);\n    const ref = useConsolidatedRef(refArg);\n\n    const onTransitionEnd = useCallback(\n      (e: TransitionEvent) => {\n        if (e.target !== ref.current || e.propertyName !== dimension) return;\n        setStatus(status === 'expanding' ? 'expanded' : 'collapsed');\n      },\n      [ref.current, status]\n    );\n\n    useLayoutEffect(() => {\n      const wantsToCollapse = collapsed;\n      const wantsToExpand = !collapsed;\n      const canCollapse = ['expanded', 'expanding'].includes(status);\n      const canExpand = ['collapsed', 'collapsing'].includes(status);\n\n      if (wantsToExpand && canExpand) {\n        onBeforeExpand?.();\n        setStatus('expanding');\n      } else if (wantsToCollapse && canCollapse) {\n        onBeforeCollapse?.();\n        setStatus('collapsing');\n      }\n\n      if (status === 'expanded' && previousStatus !== 'expanded') {\n        onAfterExpand?.();\n      } else if (status === 'collapsed' && previousStatus !== 'collapsed') {\n        onAfterCollapse?.();\n      }\n\n      setStyle(\n        getStyle({\n          dimension,\n          min,\n          max,\n          transitionSpeed,\n          nullWhenCollapsed,\n          status,\n          el: ref.current,\n          transitionTimingFunction: themeAnimation.timing.ease\n        })\n      );\n    }, [collapsed, status, min, max]);\n\n    if (status !== previousStatus && ['expanded', 'collapsed'].includes(previousStatus!)) {\n      style = getStyle({\n        dimension,\n        min,\n        max,\n        transitionSpeed,\n        nullWhenCollapsed,\n        status: status === 'expanding' ? 'collapsing' : 'expanding',\n        el: ref.current,\n        transitionTimingFunction: themeAnimation.timing.ease\n      });\n    }\n\n    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (\n      <Tag ref={ref} onTransitionEnd={onTransitionEnd} {...restProps} style={style}>\n        {children}\n      </Tag>\n    );\n  }\n);\n\nexport default ExpandCollapse;\n"]}