@pega/cosmos-react-core 3.0.0-dev.18.0 → 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":"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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.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/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiB9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,yGAwBjC,CAAC;AAGH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA8M7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiB9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,yGAwBjC,CAAC;AAGH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA+M7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js

@@ -74,6 +74,7 @@ const MultiSelectInput = forwardRef((props, ref) => {
             }
         }
         onRemove?.(selectionId, idx);
+        inputRef.current?.focus();
     }, [selected, onRemove, onSelectedBlur, uadConfig]);
     useEffect(() => {
         // Maintain active item & prev. val only as it changes.

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  Ref,\n  PropsWithoutRef,\n  KeyboardEvent,\n  useRef,\n  useCallback,\n  useMemo,\n  useState,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport {\n  useConsolidatedRef,\n  useActiveDescendant,\n  useDirection,\n  useI18n,\n  useUID\n} from '../../../hooks';\nimport { cap, tryCatch } from '../../../utils';\nimport { StyledBareButton } from '../../Button/BareButton';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport { StyledSelectInput } from '../ComboBox.styles';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelectInput = styled(StyledSelectInput)(({ theme }) => {\n  const { background } = theme.components.badges.selectable.base;\n  const { 'foreground-color': foreground } = theme.base.palette;\n  const boxShadowColor = tryCatch(() => transparentize(0.45, foreground));\n\n  return css`\n    ul {\n      list-style: none;\n\n      &[data-active-scope='true'] ${StyledSelectable}[data-current='true'] {\n        color: ${theme.base.palette.interactive};\n        box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n        outline: none;\n\n        ${StyledBareButton} {\n          color: ${theme.base.palette.interactive};\n        }\n      }\n    }\n\n    ${StyledSelectable} {\n      margin: calc(0.25 * ${theme.base.spacing});\n    }\n  `;\n});\nStyledMultiSelectInput.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n    const {\n      selected = [],\n      value,\n      onRemove,\n      onChange,\n      onKeyDown,\n      onResolveSuggestion,\n      actions,\n      readOnly,\n      disabled,\n      status,\n      placeholder,\n      autoFocus,\n      pauseDescendantEvaluation,\n      onSelectedFocus,\n      onSelectedBlur,\n      'aria-controls': ariaControls,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const id = useUID();\n    const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n    const listRef = useRef<HTMLUListElement>(null);\n    const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n    const [activeItemId, setActiveItemId] = useState<string | null>(null);\n    const { start, end } = useDirection();\n\n    const uadConfig = useMemo(\n      () => ({\n        focusEl: inputRef.current,\n        scope: listRef.current,\n        selector: 'li[role=\"option\"]',\n        orientation: 'horizontal' as const,\n        focusDescendantEl: focusDescendant,\n        clearFocusDescendant: () => {\n          setFocusDescendant(null);\n        },\n        pauseDescendantEvaluation,\n        onClick: (el: HTMLElement) => {\n          el.click();\n        }\n      }),\n      [pauseDescendantEvaluation, selected, focusDescendant]\n    );\n\n    const { activeDescendant } = useActiveDescendant(uadConfig, [\n      pauseDescendantEvaluation,\n      selected\n    ]);\n\n    const handleSelectedRemoval = useCallback(\n      (selectionId, idx) => {\n        if (!pauseDescendantEvaluation && idx === selected.length - 1) {\n          if (selected.length > 1) {\n            setFocusDescendant(\n              (listRef.current?.querySelectorAll(uadConfig.selector)[idx - 1] as HTMLElement) ||\n                null\n            );\n          } else {\n            onSelectedBlur?.();\n          }\n        }\n        onRemove?.(selectionId, idx);\n      },\n      [selected, onRemove, onSelectedBlur, uadConfig]\n    );\n\n    useEffect(() => {\n      // Maintain active item & prev. val only as it changes.\n      if (activeDescendant?.id && activeDescendant.id !== activeItemId) {\n        setActiveItemId(activeDescendant.id);\n      }\n    }, [activeDescendant]);\n\n    const onInputKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (selected.length && inputRef.current?.selectionStart === 0) {\n          const lastIndex = selected.length - 1;\n          if (pauseDescendantEvaluation && e.key === `Arrow${cap(start)}`) {\n            setFocusDescendant(\n              (listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex] as HTMLElement) ||\n                null\n            );\n            onSelectedFocus?.();\n          }\n\n          const lastSelectableId = listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex]\n            ?.id;\n          const onLastItem = activeItemId === lastSelectableId;\n\n          if (\n            !pauseDescendantEvaluation &&\n            ((onLastItem && e.key === `Arrow${cap(end)}`) || e.key === 'ArrowDown')\n          ) {\n            onSelectedBlur?.();\n          }\n\n          if (['Backspace', 'Delete'].includes(e.key) && !(readOnly || disabled)) {\n            handleSelectedRemoval(selected[lastIndex].id, lastIndex);\n          }\n        }\n        onKeyDown?.(e);\n      },\n      [\n        pauseDescendantEvaluation,\n        activeItemId,\n        onKeyDown,\n        handleSelectedRemoval,\n        selected,\n        readOnly,\n        disabled\n      ]\n    );\n\n    const ariaDescribedBy = useMemo(() => {\n      return onChange\n        ? `${id}-inputDescription  ${id}-searchDescription`\n        : `${id}-inputDescription`;\n    }, [id]);\n\n    return (\n      <Flex\n        as={StyledMultiSelectInput}\n        forwardedAs={StyledFormControl}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        container={{ alignItems: 'center' }}\n        {...{\n          readOnly,\n          disabled,\n          status\n        }}\n      >\n        {selected.length > 0 && (\n          <Flex\n            ref={listRef}\n            id={id}\n            as='ul'\n            role='listbox'\n            container={{ alignItems: 'center', wrap: 'wrap' }}\n            aria-label={t('selected_items')}\n          >\n            {selected.map((element, idx) => {\n              return (\n                <Selectable\n                  as='li'\n                  key={element.id}\n                  role='option'\n                  id={element.id.toString()}\n                  status={status}\n                  onClick={e => {\n                    const mouseClick = e.detail !== 0;\n\n                    if (!readOnly && !disabled && !mouseClick) {\n                      handleSelectedRemoval(element.id, idx);\n                    }\n                  }}\n                  onRemove={() => {\n                    if (!readOnly && !disabled) {\n                      handleSelectedRemoval(element.id, idx);\n                    }\n                  }}\n                  onKeyDown={(e: KeyboardEvent<Element>) => {\n                    // prevent browser's Back on FF\n                    if (e.key === 'Backspace') e.preventDefault();\n                  }}\n                  tabIndex='-1'\n                  aria-label={`${t('remove')} ${element.text}`}\n                  aria-describedby={ariaDescribedBy}\n                >\n                  {element.text}\n                </Selectable>\n              );\n            })}\n          </Flex>\n        )}\n        <Flex item={{ grow: 1 }} container>\n          <input\n            size={5}\n            ref={inputRef}\n            value={value}\n            // no-op avoids react uncontrolled warning\n            onChange={onChange || (() => {})}\n            onKeyDown={onInputKeyDown}\n            readOnly={readOnly || !onChange}\n            disabled={disabled}\n            placeholder={selected?.length ? undefined : placeholder}\n            autoComplete='off'\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            aria-controls={!pauseDescendantEvaluation ? id : ariaControls}\n            {...restProps}\n          />\n        </Flex>\n        {actions}\n\n        <VisuallyHiddenText id={`${id}-inputDescription`}>\n          {`${t('combobox_open_close')} `}\n        </VisuallyHiddenText>\n        <VisuallyHiddenText id={`${id}-searchDescription`}>\n          {t('combobox_search_instructions')}\n        </VisuallyHiddenText>\n      </Flex>\n    );\n  }\n);\n\nexport default MultiSelectInput;\n"]}
+{"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  Ref,\n  PropsWithoutRef,\n  KeyboardEvent,\n  useRef,\n  useCallback,\n  useMemo,\n  useState,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport {\n  useConsolidatedRef,\n  useActiveDescendant,\n  useDirection,\n  useI18n,\n  useUID\n} from '../../../hooks';\nimport { cap, tryCatch } from '../../../utils';\nimport { StyledBareButton } from '../../Button/BareButton';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport { StyledSelectInput } from '../ComboBox.styles';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelectInput = styled(StyledSelectInput)(({ theme }) => {\n  const { background } = theme.components.badges.selectable.base;\n  const { 'foreground-color': foreground } = theme.base.palette;\n  const boxShadowColor = tryCatch(() => transparentize(0.45, foreground));\n\n  return css`\n    ul {\n      list-style: none;\n\n      &[data-active-scope='true'] ${StyledSelectable}[data-current='true'] {\n        color: ${theme.base.palette.interactive};\n        box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n        outline: none;\n\n        ${StyledBareButton} {\n          color: ${theme.base.palette.interactive};\n        }\n      }\n    }\n\n    ${StyledSelectable} {\n      margin: calc(0.25 * ${theme.base.spacing});\n    }\n  `;\n});\nStyledMultiSelectInput.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n    const {\n      selected = [],\n      value,\n      onRemove,\n      onChange,\n      onKeyDown,\n      onResolveSuggestion,\n      actions,\n      readOnly,\n      disabled,\n      status,\n      placeholder,\n      autoFocus,\n      pauseDescendantEvaluation,\n      onSelectedFocus,\n      onSelectedBlur,\n      'aria-controls': ariaControls,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const id = useUID();\n    const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n    const listRef = useRef<HTMLUListElement>(null);\n    const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n    const [activeItemId, setActiveItemId] = useState<string | null>(null);\n    const { start, end } = useDirection();\n\n    const uadConfig = useMemo(\n      () => ({\n        focusEl: inputRef.current,\n        scope: listRef.current,\n        selector: 'li[role=\"option\"]',\n        orientation: 'horizontal' as const,\n        focusDescendantEl: focusDescendant,\n        clearFocusDescendant: () => {\n          setFocusDescendant(null);\n        },\n        pauseDescendantEvaluation,\n        onClick: (el: HTMLElement) => {\n          el.click();\n        }\n      }),\n      [pauseDescendantEvaluation, selected, focusDescendant]\n    );\n\n    const { activeDescendant } = useActiveDescendant(uadConfig, [\n      pauseDescendantEvaluation,\n      selected\n    ]);\n\n    const handleSelectedRemoval = useCallback(\n      (selectionId, idx) => {\n        if (!pauseDescendantEvaluation && idx === selected.length - 1) {\n          if (selected.length > 1) {\n            setFocusDescendant(\n              (listRef.current?.querySelectorAll(uadConfig.selector)[idx - 1] as HTMLElement) ||\n                null\n            );\n          } else {\n            onSelectedBlur?.();\n          }\n        }\n        onRemove?.(selectionId, idx);\n        inputRef.current?.focus();\n      },\n      [selected, onRemove, onSelectedBlur, uadConfig]\n    );\n\n    useEffect(() => {\n      // Maintain active item & prev. val only as it changes.\n      if (activeDescendant?.id && activeDescendant.id !== activeItemId) {\n        setActiveItemId(activeDescendant.id);\n      }\n    }, [activeDescendant]);\n\n    const onInputKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (selected.length && inputRef.current?.selectionStart === 0) {\n          const lastIndex = selected.length - 1;\n          if (pauseDescendantEvaluation && e.key === `Arrow${cap(start)}`) {\n            setFocusDescendant(\n              (listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex] as HTMLElement) ||\n                null\n            );\n            onSelectedFocus?.();\n          }\n\n          const lastSelectableId = listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex]\n            ?.id;\n          const onLastItem = activeItemId === lastSelectableId;\n\n          if (\n            !pauseDescendantEvaluation &&\n            ((onLastItem && e.key === `Arrow${cap(end)}`) || e.key === 'ArrowDown')\n          ) {\n            onSelectedBlur?.();\n          }\n\n          if (['Backspace', 'Delete'].includes(e.key) && !(readOnly || disabled)) {\n            handleSelectedRemoval(selected[lastIndex].id, lastIndex);\n          }\n        }\n        onKeyDown?.(e);\n      },\n      [\n        pauseDescendantEvaluation,\n        activeItemId,\n        onKeyDown,\n        handleSelectedRemoval,\n        selected,\n        readOnly,\n        disabled\n      ]\n    );\n\n    const ariaDescribedBy = useMemo(() => {\n      return onChange\n        ? `${id}-inputDescription  ${id}-searchDescription`\n        : `${id}-inputDescription`;\n    }, [id]);\n\n    return (\n      <Flex\n        as={StyledMultiSelectInput}\n        forwardedAs={StyledFormControl}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        container={{ alignItems: 'center' }}\n        {...{\n          readOnly,\n          disabled,\n          status\n        }}\n      >\n        {selected.length > 0 && (\n          <Flex\n            ref={listRef}\n            id={id}\n            as='ul'\n            role='listbox'\n            container={{ alignItems: 'center', wrap: 'wrap' }}\n            aria-label={t('selected_items')}\n          >\n            {selected.map((element, idx) => {\n              return (\n                <Selectable\n                  as='li'\n                  key={element.id}\n                  role='option'\n                  id={element.id.toString()}\n                  status={status}\n                  onClick={e => {\n                    const mouseClick = e.detail !== 0;\n\n                    if (!readOnly && !disabled && !mouseClick) {\n                      handleSelectedRemoval(element.id, idx);\n                    }\n                  }}\n                  onRemove={() => {\n                    if (!readOnly && !disabled) {\n                      handleSelectedRemoval(element.id, idx);\n                    }\n                  }}\n                  onKeyDown={(e: KeyboardEvent<Element>) => {\n                    // prevent browser's Back on FF\n                    if (e.key === 'Backspace') e.preventDefault();\n                  }}\n                  tabIndex='-1'\n                  aria-label={`${t('remove')} ${element.text}`}\n                  aria-describedby={ariaDescribedBy}\n                >\n                  {element.text}\n                </Selectable>\n              );\n            })}\n          </Flex>\n        )}\n        <Flex item={{ grow: 1 }} container>\n          <input\n            size={5}\n            ref={inputRef}\n            value={value}\n            // no-op avoids react uncontrolled warning\n            onChange={onChange || (() => {})}\n            onKeyDown={onInputKeyDown}\n            readOnly={readOnly || !onChange}\n            disabled={disabled}\n            placeholder={selected?.length ? undefined : placeholder}\n            autoComplete='off'\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            aria-controls={!pauseDescendantEvaluation ? id : ariaControls}\n            {...restProps}\n          />\n        </Flex>\n        {actions}\n\n        <VisuallyHiddenText id={`${id}-inputDescription`}>\n          {`${t('combobox_open_close')} `}\n        </VisuallyHiddenText>\n        <VisuallyHiddenText id={`${id}-searchDescription`}>\n          {t('combobox_search_instructions')}\n        </VisuallyHiddenText>\n      </Flex>\n    );\n  }\n);\n\nexport default MultiSelectInput;\n"]}

package/lib/components/CompositeInput/CompositeInput.js

@@ -39,7 +39,7 @@ const CompositeInput = forwardRef((props, ref) => {
         closePopover();
     }, document, [closePopover]);
     const labelId = `${id}-label`;
-    const Comp = (_jsxs(Flex, { as: StyledCompositeInput, forwardedAs: StyledFormControl, container: { alignItems: 'center' }, status: status, disabled: disabled, ref: containerRef, children: [_jsxs(Flex, { container: { alignItems: 'center' }, as: StyledInputContainer, children: [_jsx(StyledInputButton, { ...restProps, id: id, disabled: disabled, "aria-haspopup": 'dialog', "aria-expanded": !disabled && open, "aria-describedby": info ? `${id}-info` : undefined, readOnly: true, required: required, onClick: () => {
+    const Comp = (_jsxs(Flex, { as: StyledCompositeInput, forwardedAs: StyledFormControl, container: { alignItems: 'center' }, status: status, disabled: disabled, ref: containerRef, children: [_jsxs(Flex, { container: { alignItems: 'center' }, item: { grow: 1 }, as: StyledInputContainer, children: [_jsx(StyledInputButton, { ...restProps, id: id, disabled: disabled, "aria-haspopup": 'dialog', "aria-expanded": !disabled && open, "aria-describedby": info ? `${id}-info` : undefined, readOnly: true, required: required, onClick: () => {
                             if (!disabled) {
                                 setOpen(true);
                             }

package/lib/components/CompositeInput/CompositeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompositeInput.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, useEffect, useRef, useState } from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { ForwardProps } from '../../types';\nimport {\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useI18n,\n  useOuterEvent,\n  useUID\n} from '../../hooks';\nimport { StyledFormControl } from '../FormControl';\nimport { getFocusables } from '../../utils';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\n\nimport {\n  StyledCompositeInput,\n  StyledInputButton,\n  StyledInputContainer\n} from './CompositeInput.styles';\nimport { CompositeInputProps } from './CompositeInput.types';\n\nregisterIcon(caretDownIcon, timesIcon);\n\nconst CompositeInput = forwardRef(\n  (props: PropsWithoutRef<CompositeInputProps>, ref: CompositeInputProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      disabled,\n      value,\n      onClear,\n      required,\n      status,\n      info,\n      label,\n      labelHidden,\n      dialog: { renderer: Renderer, rendererProps, onApply, onCancel },\n      ...restProps\n    } = props;\n    const t = useI18n();\n\n    const [open, setOpen] = useState(false);\n\n    const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n    const containerRef = useConsolidatedRef<HTMLDivElement>(ref);\n    const buttonRef = useRef<HTMLInputElement>(null);\n    const formContentRef = useRef<HTMLElement>(null);\n\n    const closePopover = () => {\n      setOpen(false);\n      buttonRef.current?.focus();\n    };\n\n    useOuterEvent('mousedown', [popoverEl, buttonRef], () => {\n      if (open) onCancel({ close: closePopover });\n    });\n\n    useEffect(() => {\n      if (open) {\n        getFocusables(formContentRef)[0]?.focus();\n      }\n    }, [open, formContentRef.current]);\n\n    useEscape(\n      e => {\n        e.preventDefault();\n        closePopover();\n      },\n      document,\n      [closePopover]\n    );\n\n    const labelId = `${id}-label`;\n\n    const Comp = (\n      <Flex\n        as={StyledCompositeInput}\n        forwardedAs={StyledFormControl}\n        container={{ alignItems: 'center' }}\n        status={status}\n        disabled={disabled}\n        ref={containerRef}\n      >\n        <Flex container={{ alignItems: 'center' }} as={StyledInputContainer}>\n          <StyledInputButton\n            {...restProps}\n            id={id}\n            disabled={disabled}\n            aria-haspopup='dialog'\n            aria-expanded={!disabled && open}\n            aria-describedby={info ? `${id}-info` : undefined}\n            readOnly\n            required={required}\n            onClick={() => {\n              if (!disabled) {\n                setOpen(true);\n              }\n            }}\n            onKeyDown={e => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                setOpen(true);\n              }\n            }}\n            value={value ?? ''}\n            ref={buttonRef}\n          />\n          <Flex\n            container={{ justify: 'center', alignItems: 'center' }}\n            style={{ pointerEvents: value ? '' : 'none' }}\n          >\n            {value && !open ? (\n              <Button icon compact variant='simple' label={t('clear')} onClick={onClear}>\n                <Icon name='times' />\n              </Button>\n            ) : (\n              <Icon name='caret-down' />\n            )}\n          </Flex>\n        </Flex>\n\n        {open && (\n          <Popover\n            ref={setPopoverEl}\n            role='dialog'\n            target={containerRef.current}\n            placement='bottom-start'\n            strategy='fixed'\n            modifiers={[\n              {\n                name: 'flip',\n                options: {\n                  fallbackPlacements: ['top-start']\n                }\n              }\n            ]}\n          >\n            <Flex container={{ direction: 'column', gap: 1.5, pad: 2 }} ref={formContentRef}>\n              <Renderer {...rendererProps} />\n              <Flex container={{ justify: 'between' }}>\n                <Button variant='secondary' onClick={() => onCancel({ close: closePopover })}>\n                  {t('cancel')}\n                </Button>\n                <Button variant='primary' onClick={() => onApply({ close: closePopover })}>\n                  {t('apply')}\n                </Button>\n              </Flex>\n            </Flex>\n          </Popover>\n        )}\n      </Flex>\n    );\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled, labelId }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n) as <P extends object>(props: CompositeInputProps<P> & ForwardProps) => JSX.Element | null;\n\nexport default CompositeInput;\n"]}
+{"version":3,"file":"CompositeInput.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, useEffect, useRef, useState } from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { ForwardProps } from '../../types';\nimport {\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useI18n,\n  useOuterEvent,\n  useUID\n} from '../../hooks';\nimport { StyledFormControl } from '../FormControl';\nimport { getFocusables } from '../../utils';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\n\nimport {\n  StyledCompositeInput,\n  StyledInputButton,\n  StyledInputContainer\n} from './CompositeInput.styles';\nimport { CompositeInputProps } from './CompositeInput.types';\n\nregisterIcon(caretDownIcon, timesIcon);\n\nconst CompositeInput = forwardRef(\n  (props: PropsWithoutRef<CompositeInputProps>, ref: CompositeInputProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      disabled,\n      value,\n      onClear,\n      required,\n      status,\n      info,\n      label,\n      labelHidden,\n      dialog: { renderer: Renderer, rendererProps, onApply, onCancel },\n      ...restProps\n    } = props;\n    const t = useI18n();\n\n    const [open, setOpen] = useState(false);\n\n    const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n    const containerRef = useConsolidatedRef<HTMLDivElement>(ref);\n    const buttonRef = useRef<HTMLInputElement>(null);\n    const formContentRef = useRef<HTMLElement>(null);\n\n    const closePopover = () => {\n      setOpen(false);\n      buttonRef.current?.focus();\n    };\n\n    useOuterEvent('mousedown', [popoverEl, buttonRef], () => {\n      if (open) onCancel({ close: closePopover });\n    });\n\n    useEffect(() => {\n      if (open) {\n        getFocusables(formContentRef)[0]?.focus();\n      }\n    }, [open, formContentRef.current]);\n\n    useEscape(\n      e => {\n        e.preventDefault();\n        closePopover();\n      },\n      document,\n      [closePopover]\n    );\n\n    const labelId = `${id}-label`;\n\n    const Comp = (\n      <Flex\n        as={StyledCompositeInput}\n        forwardedAs={StyledFormControl}\n        container={{ alignItems: 'center' }}\n        status={status}\n        disabled={disabled}\n        ref={containerRef}\n      >\n        <Flex container={{ alignItems: 'center' }} item={{ grow: 1 }} as={StyledInputContainer}>\n          <StyledInputButton\n            {...restProps}\n            id={id}\n            disabled={disabled}\n            aria-haspopup='dialog'\n            aria-expanded={!disabled && open}\n            aria-describedby={info ? `${id}-info` : undefined}\n            readOnly\n            required={required}\n            onClick={() => {\n              if (!disabled) {\n                setOpen(true);\n              }\n            }}\n            onKeyDown={e => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                setOpen(true);\n              }\n            }}\n            value={value ?? ''}\n            ref={buttonRef}\n          />\n          <Flex\n            container={{ justify: 'center', alignItems: 'center' }}\n            style={{ pointerEvents: value ? '' : 'none' }}\n          >\n            {value && !open ? (\n              <Button icon compact variant='simple' label={t('clear')} onClick={onClear}>\n                <Icon name='times' />\n              </Button>\n            ) : (\n              <Icon name='caret-down' />\n            )}\n          </Flex>\n        </Flex>\n\n        {open && (\n          <Popover\n            ref={setPopoverEl}\n            role='dialog'\n            target={containerRef.current}\n            placement='bottom-start'\n            strategy='fixed'\n            modifiers={[\n              {\n                name: 'flip',\n                options: {\n                  fallbackPlacements: ['top-start']\n                }\n              }\n            ]}\n          >\n            <Flex container={{ direction: 'column', gap: 1.5, pad: 2 }} ref={formContentRef}>\n              <Renderer {...rendererProps} />\n              <Flex container={{ justify: 'between' }}>\n                <Button variant='secondary' onClick={() => onCancel({ close: closePopover })}>\n                  {t('cancel')}\n                </Button>\n                <Button variant='primary' onClick={() => onApply({ close: closePopover })}>\n                  {t('apply')}\n                </Button>\n              </Flex>\n            </Flex>\n          </Popover>\n        )}\n      </Flex>\n    );\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled, labelId }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n) as <P extends object>(props: CompositeInputProps<P> & ForwardProps) => JSX.Element | null;\n\nexport default CompositeInput;\n"]}

package/lib/components/CompositeInput/CompositeInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CompositeInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,iBAAiB,2GAkB7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,yGAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,yGAgChC,CAAC;AAIF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"CompositeInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,iBAAiB,2GAmB7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,yGAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,yGAgChC,CAAC;AAIF,eAAe,oBAAoB,CAAC"}

package/lib/components/CompositeInput/CompositeInput.styles.js

@@ -15,7 +15,8 @@ export const StyledInputButton = styled(StyledInput) `
 
   & + div {
     position: absolute;
-    inset: 0.0625rem 0 0.0625rem calc(100% - 2rem);
+    inset-block: 0.0625rem;
+    inset-inline: calc(100% - 2rem) 0;
     ${StyledButton} ${StyledIcon} {
       width: 1rem;
       height: 1rem;

package/lib/components/CompositeInput/CompositeInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompositeInput.styles.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;;;;;;;;;;;;;MAa9C,YAAY,IAAI,UAAU;;;;;CAK/B,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE7C,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAC5C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,EAC5D,UAAU,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,EACnD,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;gBACE,KAAK,CAAC,MAAM;oBACR,OAAO,CAAC,WAAW,CAAC;;;sBAGlB,OAAO,CAAC,YAAY,CAAC;;;;wBAInB,WAAW,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;sBACvC,WAAW,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;YAO7C,YAAY;;wCAEgB,YAAY,MAAM,WAAW,CAAC,eAAe,CAAC;;sCAEhD,YAAY,MAAM,WAAW,CAAC,eAAe,CAAC;;KAE/E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,eAAe,oBAAoB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledButton } from '../Button';\nimport { defaultThemeProp } from '../../theme';\nimport StyledInput from '../Input/Input.styles';\nimport { StyledIcon } from '../Icon';\n\nexport const StyledInputButton = styled(StyledInput)`\n  padding-inline-end: 2rem;\n  background-color: inherit;\n  color: currentColor;\n  outline: none;\n  border: 0;\n  caret-color: transparent;\n  cursor: pointer;\n  width: 100%;\n\n  & + div {\n    position: absolute;\n    inset: 0.0625rem 0 0.0625rem calc(100% - 2rem);\n    ${StyledButton} ${StyledIcon} {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n`;\n\nexport const StyledInputContainer = styled.div`\n  position: relative;\n`;\n\nexport const StyledCompositeInput = styled.div(\n  ({\n    theme: {\n      base: { 'border-radius': borderRadius, 'hit-area': hitArea },\n      components: { 'form-control': formControl, input }\n    }\n  }) => {\n    return css`\n      height: ${input.height};\n      min-height: ${hitArea['mouse-min']};\n\n      @media (pointer: coarse) {\n        min-height: ${hitArea['finger-min']};\n      }\n\n      &:focus-within {\n        border-color: ${formControl[':focus']['border-color']};\n        box-shadow: ${formControl[':focus']['box-shadow']};\n      }\n\n      &:hover:not([readonly]):not([disabled]):focus-within {\n        border-color: transparent;\n      }\n\n      & > ${StyledButton} {\n        border-start-start-radius: 0;\n        border-start-end-radius: calc(${borderRadius} * ${formControl['border-radius']});\n        border-end-start-radius: 0;\n        border-end-end-radius: calc(${borderRadius} * ${formControl['border-radius']});\n      }\n    `;\n  }\n);\n\nStyledCompositeInput.defaultProps = defaultThemeProp;\n\nexport default StyledCompositeInput;\n"]}
+{"version":3,"file":"CompositeInput.styles.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;;;;;;;;;;;;;;MAc9C,YAAY,IAAI,UAAU;;;;;CAK/B,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE7C,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAC5C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,EAC5D,UAAU,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,EACnD,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;gBACE,KAAK,CAAC,MAAM;oBACR,OAAO,CAAC,WAAW,CAAC;;;sBAGlB,OAAO,CAAC,YAAY,CAAC;;;;wBAInB,WAAW,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;sBACvC,WAAW,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;YAO7C,YAAY;;wCAEgB,YAAY,MAAM,WAAW,CAAC,eAAe,CAAC;;sCAEhD,YAAY,MAAM,WAAW,CAAC,eAAe,CAAC;;KAE/E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,eAAe,oBAAoB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledButton } from '../Button';\nimport { defaultThemeProp } from '../../theme';\nimport StyledInput from '../Input/Input.styles';\nimport { StyledIcon } from '../Icon';\n\nexport const StyledInputButton = styled(StyledInput)`\n  padding-inline-end: 2rem;\n  background-color: inherit;\n  color: currentColor;\n  outline: none;\n  border: 0;\n  caret-color: transparent;\n  cursor: pointer;\n  width: 100%;\n\n  & + div {\n    position: absolute;\n    inset-block: 0.0625rem;\n    inset-inline: calc(100% - 2rem) 0;\n    ${StyledButton} ${StyledIcon} {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n`;\n\nexport const StyledInputContainer = styled.div`\n  position: relative;\n`;\n\nexport const StyledCompositeInput = styled.div(\n  ({\n    theme: {\n      base: { 'border-radius': borderRadius, 'hit-area': hitArea },\n      components: { 'form-control': formControl, input }\n    }\n  }) => {\n    return css`\n      height: ${input.height};\n      min-height: ${hitArea['mouse-min']};\n\n      @media (pointer: coarse) {\n        min-height: ${hitArea['finger-min']};\n      }\n\n      &:focus-within {\n        border-color: ${formControl[':focus']['border-color']};\n        box-shadow: ${formControl[':focus']['box-shadow']};\n      }\n\n      &:hover:not([readonly]):not([disabled]):focus-within {\n        border-color: transparent;\n      }\n\n      & > ${StyledButton} {\n        border-start-start-radius: 0;\n        border-start-end-radius: calc(${borderRadius} * ${formControl['border-radius']});\n        border-end-start-radius: 0;\n        border-end-end-radius: calc(${borderRadius} * ${formControl['border-radius']});\n      }\n    `;\n  }\n);\n\nStyledCompositeInput.defaultProps = defaultThemeProp;\n\nexport default StyledCompositeInput;\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;