@pega/cosmos-react-core 2.0.0-dev.14.3 → 2.0.0-dev.16.2

package/lib/components/AppShell/SkipNavigation.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"SkipNavigation.js","sourceRoot":"","sources":["../../../src/components/AppShell/SkipNavigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, memo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { documentIsAvailable } from '../../utils';\nimport { useI18n, useUID } from '../../hooks';\nimport Menu from '../Menu';\nimport Popover from '../Popover';\n\nexport const StyledSkipNavigation = styled(Popover)(props => {\n  const {\n    theme: {\n      base: { 'z-index': zIndexes }\n    }\n  } = props;\n\n  const z = Math.max(...Object.values(zIndexes)) + 1;\n\n  return css`\n    position: fixed;\n    z-index: ${z};\n\n    &:not(:focus-within) {\n      ${hideVisually()}\n    }\n  `;\n});\n\nStyledSkipNavigation.defaultProps = defaultThemeProp;\n\nexport default memo(() => {\n  const onClick = useCallback(() => {\n    const main = documentIsAvailable ? document.querySelector('main') : false;\n    if (!main) return;\n\n    const heading = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce<HTMLHeadingElement | null>(\n      (el, tag) => el ?? main.querySelector<HTMLHeadingElement>(tag),\n      null\n    );\n\n    main.setAttribute('tabindex', '-1');\n    if (heading?.textContent) main.setAttribute('aria-label', heading.textContent);\n    main.style.outline = 'none';\n    main.focus();\n\n    main.addEventListener(\n      'focusout',\n      () => {\n        main.removeAttribute('tabindex');\n        main.removeAttribute('aria-label');\n        main.style.outline = '';\n      },\n      { once: true }\n    );\n  }, []);\n\n  return (\n    <StyledSkipNavigation\n      show\n      placement='bottom-end'\n      target={{\n        getBoundingClientRect() {\n          return {\n            height: 0,\n            width: 0,\n            x: 20,\n            y: 20,\n            top: 20,\n            bottom: 20,\n            left: 20,\n            right: 20\n          };\n        }\n      }}\n    >\n      <Menu\n        items={[\n          {\n            id: useUID(),\n            primary: useI18n()('go_to_main_content'),\n            onClick\n          }\n        ]}\n      />\n    </StyledSkipNavigation>\n  );\n});\n"]}
+{"version":3,"file":"SkipNavigation.js","sourceRoot":"","sources":["../../../src/components/AppShell/SkipNavigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { memo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { documentIsAvailable } from '../../utils';\nimport { useI18n, useUID, useElement } from '../../hooks';\nimport Menu from '../Menu';\nimport Popover from '../Popover';\n\nexport const StyledSkipNavigation = styled(Popover)(props => {\n  const {\n    theme: {\n      base: { 'z-index': zIndices }\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\n    &:focus {\n      outline: none;\n    }\n\n    &:not(:focus-within) {\n      ${hideVisually()}\n    }\n  `;\n});\n\nStyledSkipNavigation.defaultProps = defaultThemeProp;\n\nconst onClick = () => {\n  const main = documentIsAvailable ? document.querySelector('main') : false;\n  if (!main) return;\n\n  const heading = (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const).reduce<HTMLHeadingElement | null>(\n    (el, tag) => el ?? main.querySelector(tag),\n    null\n  );\n\n  main.setAttribute('tabindex', '-1');\n  if (heading?.textContent) main.setAttribute('aria-label', heading.textContent);\n\n  const previousOutline = main.style.outline;\n  main.style.outline = 'none';\n  main.focus();\n\n  main.addEventListener(\n    'focusout',\n    () => {\n      main.removeAttribute('tabindex');\n      main.removeAttribute('aria-label');\n      main.style.outline = previousOutline;\n    },\n    { once: true }\n  );\n};\n\nexport default memo(() => {\n  const t = useI18n();\n  const id = useUID();\n  const [skipNavEl, setSkipNavEl] = useElement<HTMLElement>();\n\n  return (\n    <StyledSkipNavigation\n      show\n      placement='bottom-end'\n      tabIndex='0'\n      target={{\n        getBoundingClientRect() {\n          return {\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      ref={setSkipNavEl}\n    >\n      <Menu\n        items={[\n          {\n            id,\n            primary: t('go_to_main_content'),\n            onClick\n          }\n        ]}\n        focusControlEl={skipNavEl ?? undefined}\n      />\n    </StyledSkipNavigation>\n  );\n});\n"]}

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

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

package/lib/components/Badges/Selection.js

@@ -4,8 +4,10 @@ import styled, { css } from 'styled-components';
 import { mix, transparentize } from 'polished';
 import { tryCatch } from '../../utils/utils';
 import BareButton, { StyledBareButton } from '../Button/BareButton';
-import Icon, { StyledIcon } from '../Icon';
+import Icon, { registerIcon, StyledIcon } from '../Icon';
+import * as timesIcon from '../Icon/icons/times.icon';
 import { useConsolidatedRef } from '../../hooks';
+registerIcon(timesIcon);
 export const StyledSelectable = styled.div(props => {
     const { foreground, background } = props.theme.components.badges.selectable.base;
     const { dark } = props.theme.base.palette;

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, MouseEvent, forwardRef, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils/utils';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { StyledIcon } from '../Icon';\nimport { useConsolidatedRef } from '../../hooks';\nimport { FormControlProps } from '../FormControl';\n\nexport interface SelectableProps {\n  /** An id that is used by the onSelect and onRemove functions if they are provided. */\n  id: string;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is clicked. */\n  onSelect?: (id: string) => void;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */\n  onRemove?: (id: string) => void;\n  /** The content of the Badge. */\n  children: string;\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Event handler called when the Badge is clicked. */\n  onClick?: (event: MouseEvent) => void;\n  /** Event handler fired on every keyup event. */\n  onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.div(props => {\n  const { foreground, background } = props.theme.components.badges.selectable.base;\n  const { dark } = props.theme.base.palette;\n  const borderRadius = props.theme.base['border-radius'];\n  const { spacing } = props.theme.base;\n\n  const displayBackground = tryCatch(() => mix(0.15, background, '#ffffff'));\n  const hoverBorder = tryCatch(() => mix(0.3, background, '#ffffff'));\n  const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n  const height = 1.125;\n  return css`\n    background: ${displayBackground};\n    border: 0 solid transparent;\n    border-radius: calc(${height} * ${borderRadius});\n    color: ${foreground};\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    font-size: 0.75rem;\n    height: ${height}rem;\n    padding: 0 ${spacing};\n    min-width: max-content;\n    line-height: 1;\n\n    &:hover {\n      color: ${props.theme.base.palette.interactive};\n      box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n\n      ${StyledBareButton} {\n        color: ${props.theme.base.palette.interactive};\n      }\n    }\n\n    &:active {\n      box-shadow: inset 0 0 0 0.0625rem ${background};\n    }\n\n    &:focus {\n      color: ${props.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: ${props.theme.base.palette.interactive};\n      }\n    }\n\n    ${StyledIcon} {\n      margin-inline-start: ${spacing};\n      height: 1em;\n      width: 1em;\n    }\n  `;\n});\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SelectableProps>, ref: Ref<HTMLButtonElement>) => {\n    const consolidatedRef = useConsolidatedRef(ref);\n    const { id, onSelect, onRemove, children, onClick, onKeyUp, ...restProps } = props;\n\n    const handleClick = (e: MouseEvent<HTMLDivElement>) => {\n      onClick?.(e);\n      onSelect?.(id);\n    };\n\n    const handleCloseClick = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      onRemove?.(id);\n    };\n\n    const handleKeyUp = (e: KeyboardEvent) => {\n      onKeyUp?.(e);\n      if (e.key === 'Enter') {\n        onSelect?.(id);\n      }\n\n      if (e.key === 'Backspace' || e.key === 'Delete') {\n        onRemove?.(id);\n      }\n    };\n\n    return (\n      <BareButton\n        role='button'\n        tabIndex='0'\n        as={StyledSelectable}\n        ref={consolidatedRef}\n        onClick={handleClick}\n        onKeyUp={handleKeyUp}\n        {...restProps}\n      >\n        {children}\n        <BareButton tabIndex='-1' onClick={handleCloseClick}>\n          <Icon name='times' />\n        </BareButton>\n      </BareButton>\n    );\n  }\n);\n\nexport default Selectable;\n"]}
+{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, MouseEvent, forwardRef, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils/utils';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { useConsolidatedRef } from '../../hooks';\nimport { FormControlProps } from '../FormControl';\n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps {\n  /** An id that is used by the onSelect and onRemove functions if they are provided. */\n  id: string;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is clicked. */\n  onSelect?: (id: string) => void;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */\n  onRemove?: (id: string) => void;\n  /** The content of the Badge. */\n  children: string;\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Event handler called when the Badge is clicked. */\n  onClick?: (event: MouseEvent) => void;\n  /** Event handler fired on every keyup event. */\n  onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.div(props => {\n  const { foreground, background } = props.theme.components.badges.selectable.base;\n  const { dark } = props.theme.base.palette;\n  const borderRadius = props.theme.base['border-radius'];\n  const { spacing } = props.theme.base;\n\n  const displayBackground = tryCatch(() => mix(0.15, background, '#ffffff'));\n  const hoverBorder = tryCatch(() => mix(0.3, background, '#ffffff'));\n  const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n  const height = 1.125;\n  return css`\n    background: ${displayBackground};\n    border: 0 solid transparent;\n    border-radius: calc(${height} * ${borderRadius});\n    color: ${foreground};\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    font-size: 0.75rem;\n    height: ${height}rem;\n    padding: 0 ${spacing};\n    min-width: max-content;\n    line-height: 1;\n\n    &:hover {\n      color: ${props.theme.base.palette.interactive};\n      box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n\n      ${StyledBareButton} {\n        color: ${props.theme.base.palette.interactive};\n      }\n    }\n\n    &:active {\n      box-shadow: inset 0 0 0 0.0625rem ${background};\n    }\n\n    &:focus {\n      color: ${props.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: ${props.theme.base.palette.interactive};\n      }\n    }\n\n    ${StyledIcon} {\n      margin-inline-start: ${spacing};\n      height: 1em;\n      width: 1em;\n    }\n  `;\n});\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SelectableProps>, ref: Ref<HTMLButtonElement>) => {\n    const consolidatedRef = useConsolidatedRef(ref);\n    const { id, onSelect, onRemove, children, onClick, onKeyUp, ...restProps } = props;\n\n    const handleClick = (e: MouseEvent<HTMLDivElement>) => {\n      onClick?.(e);\n      onSelect?.(id);\n    };\n\n    const handleCloseClick = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      onRemove?.(id);\n    };\n\n    const handleKeyUp = (e: KeyboardEvent) => {\n      onKeyUp?.(e);\n      if (e.key === 'Enter') {\n        onSelect?.(id);\n      }\n\n      if (e.key === 'Backspace' || e.key === 'Delete') {\n        onRemove?.(id);\n      }\n    };\n\n    return (\n      <BareButton\n        role='button'\n        tabIndex='0'\n        as={StyledSelectable}\n        ref={consolidatedRef}\n        onClick={handleClick}\n        onKeyUp={handleKeyUp}\n        {...restProps}\n      >\n        {children}\n        <BareButton tabIndex='-1' onClick={handleCloseClick}>\n          <Icon name='times' />\n        </BareButton>\n      </BareButton>\n    );\n  }\n);\n\nexport default Selectable;\n"]}

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

@@ -1,10 +1,10 @@
-import { FC } from 'react';
+import { FC, ReactText } from 'react';
 import { ForwardProps } from '../../types';
 export interface StatusProps {
     /** Determines the color to render the Badge as. This color is derived from the Theme. */
     variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';
     /** The content of the Badge, transformed to uppercase. */
-    children: string;
+    children: ReactText;
 }
 export declare const StyledStatus: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, StatusProps, never>;
 declare const Status: FC<StatusProps & ForwardProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAM7D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,MAAM,WAAW,WAAW;IAC1B,yFAAyF;IACzF,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5D,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,YAAY,mHAqBvB,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CAW1C,CAAC;AAMF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,SAAS,EAAO,MAAM,OAAO,CAAC;AAMxE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,MAAM,WAAW,WAAW;IAC1B,yFAAyF;IACzF,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5D,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,mHAqBvB,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CAW1C,CAAC;AAMF,eAAe,MAAM,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Status.js","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AASvC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAc,KAAK,CAAC,EAAE;IAC3D,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC;IAEjD,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAElG,OAAO,GAAG,CAAA;wBACY,UAAU;iCACD,YAAY;aAChC,UAAU;wCACiB,MAAM;;iBAE7B,QAAQ,CAAC,GAAG;;wBAEL,OAAO;iBACd,OAAO;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,MAAM,GAAmC,UAAU,CACvD,CACE,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAgC,EACjE,GAAyB,EACzB,EAAE;IACF,OAAO,CACL,KAAC,YAAY,oBAAK,SAAS,IAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,gBACpD,QAAQ,YACI,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\n\nexport interface StatusProps {\n  /** Determines the color to render the Badge as. This color is derived from the Theme. */\n  variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';\n  /** The content of the Badge, transformed to uppercase. */\n  children: string;\n}\n\nexport const StyledStatus = styled.span<StatusProps>(props => {\n  const { spacing } = props.theme.base;\n  const borderRadius = props.theme.base['border-radius'];\n  const { status } = props.theme.components.badges;\n\n  const { background, foreground } = status[props.variant];\n  const shadow = tryCatch(() => rgba(foreground, 0.1));\n  const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);\n\n  return css`\n    background-color: ${background};\n    border-radius: calc(0.25 * ${borderRadius});\n    color: ${foreground};\n    box-shadow: inset 0 0 0 0.0625rem ${shadow};\n    display: inline-block;\n    font-size: ${fontSize.xxs};\n    font-weight: bold;\n    line-height: calc(${spacing} * 2.5);\n    padding: 0 ${spacing};\n    text-transform: uppercase;\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\nconst Status: FC<StatusProps & ForwardProps> = forwardRef(\n  (\n    { variant, children, ...restProps }: PropsWithoutRef<StatusProps>,\n    ref: Ref<HTMLSpanElement>\n  ) => {\n    return (\n      <StyledStatus {...restProps} variant={variant} ref={ref}>\n        {children}\n      </StyledStatus>\n    );\n  }\n);\n\nStatus.defaultProps = {\n  variant: 'info'\n};\n\nexport default Status;\n"]}
+{"version":3,"file":"Status.js","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAmC,MAAM,OAAO,CAAC;AACxE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AASvC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAc,KAAK,CAAC,EAAE;IAC3D,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC;IAEjD,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAElG,OAAO,GAAG,CAAA;wBACY,UAAU;iCACD,YAAY;aAChC,UAAU;wCACiB,MAAM;;iBAE7B,QAAQ,CAAC,GAAG;;wBAEL,OAAO;iBACd,OAAO;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,MAAM,GAAmC,UAAU,CACvD,CACE,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAgC,EACjE,GAAyB,EACzB,EAAE;IACF,OAAO,CACL,KAAC,YAAY,oBAAK,SAAS,IAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,gBACpD,QAAQ,YACI,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef, ReactText, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\n\nexport interface StatusProps {\n  /** Determines the color to render the Badge as. This color is derived from the Theme. */\n  variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';\n  /** The content of the Badge, transformed to uppercase. */\n  children: ReactText;\n}\n\nexport const StyledStatus = styled.span<StatusProps>(props => {\n  const { spacing } = props.theme.base;\n  const borderRadius = props.theme.base['border-radius'];\n  const { status } = props.theme.components.badges;\n\n  const { background, foreground } = status[props.variant];\n  const shadow = tryCatch(() => rgba(foreground, 0.1));\n  const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);\n\n  return css`\n    background-color: ${background};\n    border-radius: calc(0.25 * ${borderRadius});\n    color: ${foreground};\n    box-shadow: inset 0 0 0 0.0625rem ${shadow};\n    display: inline-block;\n    font-size: ${fontSize.xxs};\n    font-weight: bold;\n    line-height: calc(${spacing} * 2.5);\n    padding: 0 ${spacing};\n    text-transform: uppercase;\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\nconst Status: FC<StatusProps & ForwardProps> = forwardRef(\n  (\n    { variant, children, ...restProps }: PropsWithoutRef<StatusProps>,\n    ref: Ref<HTMLSpanElement>\n  ) => {\n    return (\n      <StyledStatus {...restProps} variant={variant} ref={ref}>\n        {children}\n      </StyledStatus>\n    );\n  }\n);\n\nStatus.defaultProps = {\n  variant: 'info'\n};\n\nexport default Status;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAStD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,0CAA0C;IAC1C,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IACnD,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACrD,gEAAgE;IAChE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,yEAAyE;IACzE,EAAE,EAAE,MAAM,CAAC;IACX,iIAAiI;IACjI,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB;YAAuB,OAAO;SAS7D,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;SAmBjE,CAAC;AAIH,eAAO,MAAM,mBAAmB;YAAuB,OAAO;SAS5D,CAAC;AAIH,eAAO,MAAM,yBAAyB,yGAQpC,CAAC;AAIH,eAAO,MAAM,yBAAyB,qKAAmB,CAAC;AAE1D,eAAO,MAAM,kBAAkB,mIAkB7B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAKvB,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAqGzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAYtD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,0CAA0C;IAC1C,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IACnD,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACrD,gEAAgE;IAChE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,yEAAyE;IACzE,EAAE,EAAE,MAAM,CAAC;IACX,iIAAiI;IACjI,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB;YAAuB,OAAO;SAS7D,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;SAmBjE,CAAC;AAIH,eAAO,MAAM,mBAAmB;YAAuB,OAAO;SAS5D,CAAC;AAIH,eAAO,MAAM,yBAAyB,yGAQpC,CAAC;AAIH,eAAO,MAAM,yBAAyB,qKAAmB,CAAC;AAE1D,eAAO,MAAM,kBAAkB,mIAkB7B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAKvB,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAqGzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Banner/Banner.js

@@ -3,12 +3,14 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { getContrast, readableColor } from 'polished';
 import { defaultThemeProp } from '../../theme';
-import Icon from '../Icon';
+import Icon, { registerIcon } from '../Icon';
+import * as timesIcon from '../Icon/icons/times.icon';
 import Button from '../Button';
 import { tryCatch } from '../../utils';
 import { useDirection, useI18n } from '../../hooks';
 import Flex from '../Flex';
 import Text from '../Text';
+registerIcon(timesIcon);
 export const StyledBannerMessages = styled.ul(({ theme, inline }) => {
     return css `
     list-style-position: inside;

package/lib/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon from '../Icon';\nimport Button from '../Button';\nimport { tryCatch } from '../../utils';\nimport { useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\n\nexport interface BannerProps extends BaseProps {\n  /** Controls the styling of the Banner. */\n  variant: 'urgent' | 'success' | 'warning' | 'info';\n  /**  Heading text for the Banner. */\n  heading?: string;\n  /**\n   * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n   * @default \"h2\"\n   */\n  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Pass one or more descriptive messages to inform the user. */\n  messages: string[];\n  /** ID for the Banner. Used both as onDismiss callback arg and DOM id. */\n  id: string;\n  /** Link or Button provided to the user for next steps. Link should use regular href and Button should use an onClick handler. */\n  action?: ReactNode;\n  /** Callback when user explicitly dismisses the Banner. */\n  onDismiss?: (id: string) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBannerMessages = styled.ul<{ inline: boolean }>(({ theme, inline }) => {\n  return css`\n    list-style-position: inside;\n    ${inline &&\n    css`\n      display: inline-block;\n      margin-inline-end: ${theme.base.spacing};\n    `}\n  `;\n});\n\nStyledBannerMessages.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div<{ hasDismiss: boolean }>(({ theme, hasDismiss }) => {\n  const { end } = useDirection();\n  return css`\n    position: relative;\n    padding: calc(1.5 * ${theme.base.spacing});\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n    border-top-${end}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${end}-radius: ${theme.components.card['border-radius']};\n\n    ${\n      hasDismiss &&\n      css`\n        border-inline-end: none;\n        padding-inline-end: calc(0.75 * ${theme.base.spacing});\n        border-radius: 0;\n      `\n    }\n  `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.li<{ inline: boolean }>(({ inline, theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    ${inline &&\n    css`\n      display: inline-block;\n      margin-inline-end: ${theme.base.spacing};\n    `}\n  `;\n});\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nexport const StyledBannerDismissColumn = styled.div(({ theme }) => {\n  const { end } = useDirection();\n  return css`\n    border-top-${end}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${end}-radius: ${theme.components.card['border-radius']};\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n  `;\n});\n\nStyledBannerDismissColumn.defaultProps = defaultThemeProp;\n\nexport const StyledBannerDismissButton = styled(Button)``;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n  const { background: bg } = theme.components.banner[variant];\n  const color = tryCatch(() =>\n    getContrast(bg, theme.base.palette['primary-background']) >= 3\n      ? theme.base.palette['primary-background']\n      : readableColor(bg)\n  );\n\n  const { start } = useDirection();\n\n  return css`\n    background-color: ${bg};\n    width: 3.125rem;\n    color: ${color};\n    border-top-${start}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${start}-radius: ${theme.components.card['border-radius']};\n    font-size: 1.25rem;\n  `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div(({ theme }) => {\n  return css`\n    background: ${theme.components.card.background};\n    border-radius: ${theme.components.card['border-radius']};\n  `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nconst Banner: FunctionComponent<BannerProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant,\n      heading,\n      headingTag = 'h2',\n      messages,\n      onDismiss,\n      action,\n      id,\n      ...restProps\n    }: PropsWithoutRef<BannerProps>,\n    ref: BannerProps['ref']\n  ) => {\n    const inline = messages.length === 1;\n    const singleLine = inline && !heading;\n    const hasDismiss = !!onDismiss;\n\n    let bannerIcon = 'warn-solid';\n    let role: string | undefined = 'alert';\n    let ariaLive = 'assertive';\n\n    if (variant === 'info') {\n      bannerIcon = 'bulb-solid';\n      ariaLive = 'polite';\n      role = undefined;\n    } else if (variant === 'success') {\n      bannerIcon = 'check';\n      ariaLive = 'polite';\n      role = undefined;\n    } else if (variant === 'warning') {\n      bannerIcon = 'warn';\n    }\n\n    const t = useI18n();\n\n    return (\n      <Flex\n        {...restProps}\n        container\n        as={StyledBanner}\n        role={role}\n        aria-live={ariaLive}\n        id={id}\n        ref={ref}\n      >\n        <Flex\n          container={{ justify: 'center', alignItems: 'center' }}\n          item={{ shrink: 0 }}\n          as={StyledBannerStatus}\n          variant={variant}\n        >\n          <Icon name={bannerIcon} />\n        </Flex>\n\n        <Flex\n          container={singleLine ? { alignItems: 'center' } : { direction: 'column', gap: 1 }}\n          item={{ grow: 1 }}\n          as={StyledBannerContent}\n          hasDismiss={hasDismiss}\n        >\n          {heading && (\n            <Text variant='h4' as={headingTag}>\n              {heading}\n            </Text>\n          )}\n\n          <StyledBannerMessages inline={inline}>\n            {messages.map((msg, index) => (\n              // eslint-disable-next-line react/no-array-index-key\n              <StyledBannerMessage key={`${msg}+${index}`} inline={inline}>\n                {msg}\n              </StyledBannerMessage>\n            ))}\n          </StyledBannerMessages>\n\n          {action}\n        </Flex>\n\n        {onDismiss && (\n          <Flex\n            container={{\n              direction: 'column',\n              justify: singleLine ? 'center' : undefined,\n              pad: [singleLine ? 0.5 : 1, 0.5, 0.5, 0]\n            }}\n            as={StyledBannerDismissColumn}\n          >\n            <StyledBannerDismissButton\n              variant='simple'\n              icon\n              onClick={() => onDismiss(id)}\n              aria-label={t('banner_dismiss_button_label_a11y')}\n            >\n              <Icon name='times' />\n            </StyledBannerDismissButton>\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default Banner;\n"]}
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport Button from '../Button';\nimport { tryCatch } from '../../utils';\nimport { useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\n\nregisterIcon(timesIcon);\n\nexport interface BannerProps extends BaseProps {\n  /** Controls the styling of the Banner. */\n  variant: 'urgent' | 'success' | 'warning' | 'info';\n  /**  Heading text for the Banner. */\n  heading?: string;\n  /**\n   * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n   * @default \"h2\"\n   */\n  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Pass one or more descriptive messages to inform the user. */\n  messages: string[];\n  /** ID for the Banner. Used both as onDismiss callback arg and DOM id. */\n  id: string;\n  /** Link or Button provided to the user for next steps. Link should use regular href and Button should use an onClick handler. */\n  action?: ReactNode;\n  /** Callback when user explicitly dismisses the Banner. */\n  onDismiss?: (id: string) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBannerMessages = styled.ul<{ inline: boolean }>(({ theme, inline }) => {\n  return css`\n    list-style-position: inside;\n    ${inline &&\n    css`\n      display: inline-block;\n      margin-inline-end: ${theme.base.spacing};\n    `}\n  `;\n});\n\nStyledBannerMessages.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div<{ hasDismiss: boolean }>(({ theme, hasDismiss }) => {\n  const { end } = useDirection();\n  return css`\n    position: relative;\n    padding: calc(1.5 * ${theme.base.spacing});\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n    border-top-${end}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${end}-radius: ${theme.components.card['border-radius']};\n\n    ${\n      hasDismiss &&\n      css`\n        border-inline-end: none;\n        padding-inline-end: calc(0.75 * ${theme.base.spacing});\n        border-radius: 0;\n      `\n    }\n  `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.li<{ inline: boolean }>(({ inline, theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    ${inline &&\n    css`\n      display: inline-block;\n      margin-inline-end: ${theme.base.spacing};\n    `}\n  `;\n});\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nexport const StyledBannerDismissColumn = styled.div(({ theme }) => {\n  const { end } = useDirection();\n  return css`\n    border-top-${end}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${end}-radius: ${theme.components.card['border-radius']};\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n  `;\n});\n\nStyledBannerDismissColumn.defaultProps = defaultThemeProp;\n\nexport const StyledBannerDismissButton = styled(Button)``;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n  const { background: bg } = theme.components.banner[variant];\n  const color = tryCatch(() =>\n    getContrast(bg, theme.base.palette['primary-background']) >= 3\n      ? theme.base.palette['primary-background']\n      : readableColor(bg)\n  );\n\n  const { start } = useDirection();\n\n  return css`\n    background-color: ${bg};\n    width: 3.125rem;\n    color: ${color};\n    border-top-${start}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${start}-radius: ${theme.components.card['border-radius']};\n    font-size: 1.25rem;\n  `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div(({ theme }) => {\n  return css`\n    background: ${theme.components.card.background};\n    border-radius: ${theme.components.card['border-radius']};\n  `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nconst Banner: FunctionComponent<BannerProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant,\n      heading,\n      headingTag = 'h2',\n      messages,\n      onDismiss,\n      action,\n      id,\n      ...restProps\n    }: PropsWithoutRef<BannerProps>,\n    ref: BannerProps['ref']\n  ) => {\n    const inline = messages.length === 1;\n    const singleLine = inline && !heading;\n    const hasDismiss = !!onDismiss;\n\n    let bannerIcon = 'warn-solid';\n    let role: string | undefined = 'alert';\n    let ariaLive = 'assertive';\n\n    if (variant === 'info') {\n      bannerIcon = 'bulb-solid';\n      ariaLive = 'polite';\n      role = undefined;\n    } else if (variant === 'success') {\n      bannerIcon = 'check';\n      ariaLive = 'polite';\n      role = undefined;\n    } else if (variant === 'warning') {\n      bannerIcon = 'warn';\n    }\n\n    const t = useI18n();\n\n    return (\n      <Flex\n        {...restProps}\n        container\n        as={StyledBanner}\n        role={role}\n        aria-live={ariaLive}\n        id={id}\n        ref={ref}\n      >\n        <Flex\n          container={{ justify: 'center', alignItems: 'center' }}\n          item={{ shrink: 0 }}\n          as={StyledBannerStatus}\n          variant={variant}\n        >\n          <Icon name={bannerIcon} />\n        </Flex>\n\n        <Flex\n          container={singleLine ? { alignItems: 'center' } : { direction: 'column', gap: 1 }}\n          item={{ grow: 1 }}\n          as={StyledBannerContent}\n          hasDismiss={hasDismiss}\n        >\n          {heading && (\n            <Text variant='h4' as={headingTag}>\n              {heading}\n            </Text>\n          )}\n\n          <StyledBannerMessages inline={inline}>\n            {messages.map((msg, index) => (\n              // eslint-disable-next-line react/no-array-index-key\n              <StyledBannerMessage key={`${msg}+${index}`} inline={inline}>\n                {msg}\n              </StyledBannerMessage>\n            ))}\n          </StyledBannerMessages>\n\n          {action}\n        </Flex>\n\n        {onDismiss && (\n          <Flex\n            container={{\n              direction: 'column',\n              justify: singleLine ? 'center' : undefined,\n              pad: [singleLine ? 0.5 : 1, 0.5, 0.5, 0]\n            }}\n            as={StyledBannerDismissColumn}\n          >\n            <StyledBannerDismissButton\n              variant='simple'\n              icon\n              onClick={() => onDismiss(id)}\n              aria-label={t('banner_dismiss_button_label_a11y')}\n            >\n              <Icon name='times' />\n            </StyledBannerDismissButton>\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default Banner;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQtD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,mHAAmH;IACnH,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB;sBAAkC,OAAO;SAoBtE,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAoGnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAUtD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,mHAAmH;IACnH,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB;sBAAkC,OAAO;SAoBtE,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAoGnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -7,9 +7,12 @@ import { debounce } from '../../utils';
 import Button from '../Button';
 import Flex from '../Flex';
 import Link from '../Link';
-import Icon, { StyledIcon } from '../Icon';
+import Icon, { StyledIcon, registerIcon } from '../Icon';
+import * as caretLeftIcon from '../Icon/icons/caret-left.icon';
+import * as caretRightIcon from '../Icon/icons/caret-right.icon';
 import MenuButton from '../MenuButton';
 import Text from '../Text';
+registerIcon(caretLeftIcon, caretRightIcon);
 export const StyledBreadcrumbs = styled.div(({ oneItemRemaining }) => css `
     white-space: nowrap;
     overflow: visible;

package/lib/components/Breadcrumbs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  Fragment,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useElement, useConsolidatedRef, useDirection } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { debounce } from '../../utils';\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Icon, { StyledIcon } from '../Icon';\nimport MenuButton from '../MenuButton';\nimport Text from '../Text';\nimport { MenuItemProps } from '../Menu';\n\nexport interface BreadcrumbsProps extends BaseProps {\n  /** A set of actions representing the chronological hierarchy of pages or locations leading to the current view. */\n  path: MenuItemProps[];\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBreadcrumbs = styled.div<{ oneItemRemaining: boolean }>(\n  ({ oneItemRemaining }) => css`\n    white-space: nowrap;\n    overflow: visible;\n    visibility: hidden;\n\n    ${StyledIcon} {\n      width: 1em;\n      height: 1em;\n      flex-shrink: 0;\n    }\n\n    ${oneItemRemaining &&\n    css`\n      & > :last-child {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n    `}\n  `\n);\n\nStyledBreadcrumbs.defaultProps = defaultThemeProp;\n\nconst Breadcrumbs: FunctionComponent<BreadcrumbsProps & ForwardProps> = forwardRef(\n  ({ path, ...restProps }: PropsWithoutRef<BreadcrumbsProps>, ref: BreadcrumbsProps['ref']) => {\n    const [breadcrumbsEl, setBreadcrumbsEl] = useElement<HTMLDivElement>();\n    const [numMenuItems, setNumMenuItems] = useState(0);\n    const minInlineWidth = useRef(0);\n\n    const breadcrumbRef = useConsolidatedRef(setBreadcrumbsEl, ref);\n\n    const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n      if (entries[0].contentRect.width > minInlineWidth.current) {\n        setNumMenuItems(curr => {\n          if (curr === 0) return curr;\n          return curr - 1;\n        });\n      }\n    }, 100);\n\n    const resizeObserver = new ResizeObserver(debouncedResize);\n\n    const intersectionObserver = new IntersectionObserver(\n      entries => {\n        if (entries[0].intersectionRatio < 1 && numMenuItems < path.length - 1) {\n          if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n          setNumMenuItems(curr => {\n            if (curr === path.length - 1) return curr;\n            return curr + 1;\n          });\n        } else if (breadcrumbsEl) breadcrumbsEl.style.visibility = 'visible';\n      },\n      { root: breadcrumbsEl, threshold: 1 }\n    );\n\n    useEffect(() => {\n      if (breadcrumbsEl && breadcrumbsEl.lastChild) {\n        intersectionObserver.observe(breadcrumbsEl.lastChild as Element);\n        resizeObserver.observe(breadcrumbsEl);\n\n        return () => {\n          intersectionObserver.disconnect();\n          resizeObserver.disconnect();\n        };\n      }\n    }, [breadcrumbsEl, numMenuItems]);\n\n    const { end } = useDirection();\n\n    return (\n      <Flex\n        {...restProps}\n        container={{ gap: 1, alignItems: 'center' }}\n        as={StyledBreadcrumbs}\n        oneItemRemaining={numMenuItems === path.length - 1}\n        ref={breadcrumbRef}\n      >\n        {numMenuItems > 0 && (\n          <>\n            <MenuButton\n              text='Links'\n              iconOnly\n              variant='link'\n              icon='folder-hierarchy-solid'\n              menu={{ items: path.slice(0, numMenuItems).reverse() }}\n            />\n            <Icon name={`caret-${end}`} />\n          </>\n        )}\n        {path.slice(numMenuItems).map((crumb, index) => {\n          const { id, primary, visual, ...restCrumbProps } = crumb;\n          let Comp;\n          if (crumb.href)\n            Comp = (\n              <Link key={id} href={crumb.href} {...restCrumbProps}>\n                {visual} {primary}\n              </Link>\n            );\n          else if (crumb.onClick)\n            Comp = (\n              <Button key={id} variant='link' {...restCrumbProps}>\n                {visual} {primary}\n              </Button>\n            );\n          else\n            Comp = (\n              <Text key={id} {...restCrumbProps}>\n                {visual} {primary}\n              </Text>\n            );\n\n          if (index === path.slice(numMenuItems).length - 1) return Comp;\n\n          return (\n            <Fragment key={id}>\n              {Comp}\n              <Icon name={`caret-${end}`} />\n            </Fragment>\n          );\n        })}\n      </Flex>\n    );\n  }\n);\n\nexport default Breadcrumbs;\n"]}
+{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  Fragment,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useElement, useConsolidatedRef, useDirection } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { debounce } from '../../utils';\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport MenuButton from '../MenuButton';\nimport Text from '../Text';\nimport { MenuItemProps } from '../Menu';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface BreadcrumbsProps extends BaseProps {\n  /** A set of actions representing the chronological hierarchy of pages or locations leading to the current view. */\n  path: MenuItemProps[];\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBreadcrumbs = styled.div<{ oneItemRemaining: boolean }>(\n  ({ oneItemRemaining }) => css`\n    white-space: nowrap;\n    overflow: visible;\n    visibility: hidden;\n\n    ${StyledIcon} {\n      width: 1em;\n      height: 1em;\n      flex-shrink: 0;\n    }\n\n    ${oneItemRemaining &&\n    css`\n      & > :last-child {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n    `}\n  `\n);\n\nStyledBreadcrumbs.defaultProps = defaultThemeProp;\n\nconst Breadcrumbs: FunctionComponent<BreadcrumbsProps & ForwardProps> = forwardRef(\n  ({ path, ...restProps }: PropsWithoutRef<BreadcrumbsProps>, ref: BreadcrumbsProps['ref']) => {\n    const [breadcrumbsEl, setBreadcrumbsEl] = useElement<HTMLDivElement>();\n    const [numMenuItems, setNumMenuItems] = useState(0);\n    const minInlineWidth = useRef(0);\n\n    const breadcrumbRef = useConsolidatedRef(setBreadcrumbsEl, ref);\n\n    const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n      if (entries[0].contentRect.width > minInlineWidth.current) {\n        setNumMenuItems(curr => {\n          if (curr === 0) return curr;\n          return curr - 1;\n        });\n      }\n    }, 100);\n\n    const resizeObserver = new ResizeObserver(debouncedResize);\n\n    const intersectionObserver = new IntersectionObserver(\n      entries => {\n        if (entries[0].intersectionRatio < 1 && numMenuItems < path.length - 1) {\n          if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n          setNumMenuItems(curr => {\n            if (curr === path.length - 1) return curr;\n            return curr + 1;\n          });\n        } else if (breadcrumbsEl) breadcrumbsEl.style.visibility = 'visible';\n      },\n      { root: breadcrumbsEl, threshold: 1 }\n    );\n\n    useEffect(() => {\n      if (breadcrumbsEl && breadcrumbsEl.lastChild) {\n        intersectionObserver.observe(breadcrumbsEl.lastChild as Element);\n        resizeObserver.observe(breadcrumbsEl);\n\n        return () => {\n          intersectionObserver.disconnect();\n          resizeObserver.disconnect();\n        };\n      }\n    }, [breadcrumbsEl, numMenuItems]);\n\n    const { end } = useDirection();\n\n    return (\n      <Flex\n        {...restProps}\n        container={{ gap: 1, alignItems: 'center' }}\n        as={StyledBreadcrumbs}\n        oneItemRemaining={numMenuItems === path.length - 1}\n        ref={breadcrumbRef}\n      >\n        {numMenuItems > 0 && (\n          <>\n            <MenuButton\n              text='Links'\n              iconOnly\n              variant='link'\n              icon='folder-hierarchy-solid'\n              menu={{ items: path.slice(0, numMenuItems).reverse() }}\n            />\n            <Icon name={`caret-${end}`} />\n          </>\n        )}\n        {path.slice(numMenuItems).map((crumb, index) => {\n          const { id, primary, visual, ...restCrumbProps } = crumb;\n          let Comp;\n          if (crumb.href)\n            Comp = (\n              <Link key={id} href={crumb.href} {...restCrumbProps}>\n                {visual} {primary}\n              </Link>\n            );\n          else if (crumb.onClick)\n            Comp = (\n              <Button key={id} variant='link' {...restCrumbProps}>\n                {visual} {primary}\n              </Button>\n            );\n          else\n            Comp = (\n              <Text key={id} {...restCrumbProps}>\n                {visual} {primary}\n              </Text>\n            );\n\n          if (index === path.slice(numMenuItems).length - 1) return Comp;\n\n          return (\n            <Fragment key={id}>\n              {Comp}\n              <Icon name={`caret-${end}`} />\n            </Fragment>\n          );\n        })}\n      </Flex>\n    );\n  }\n);\n\nexport default Breadcrumbs;\n"]}

package/lib/components/Card/CollapsibleCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleCard.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CollapsibleCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAQhG,OAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAMzC,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,0BAA0B;IAC1B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,qDAAqD;IACrD,OAAO,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CACpD;AAeD,kBAAkB;AAClB,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAgC5D,CAAC;AAIF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CollapsibleCard.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CollapsibleCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAShG,OAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAQzC,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,0BAA0B;IAC1B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,qDAAqD;IACrD,OAAO,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CACpD;AAeD,kBAAkB;AAClB,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAgC5D,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/lib/components/Card/CollapsibleCard.js

@@ -3,13 +3,15 @@ import { useState } from 'react';
 import styled, { css } from 'styled-components';
 import Button from '../Button';
 import { defaultThemeProp } from '../../theme';
-import Icon from '../Icon';
+import Icon, { registerIcon } from '../Icon';
+import * as caretDownIcon from '../Icon/icons/caret-down.icon';
 import ExpandCollapse from '../ExpandCollapse';
 import Card from './Card';
 import CardHeader from './CardHeader';
 import CardMedia from './CardMedia';
 import CardContent from './CardContent';
 import CardFooter from './CardFooter';
+registerIcon(caretDownIcon);
 const defaultProps = {};
 const StyledToggleButton = styled.button(({ theme, collapsed }) => {
     return css `

package/lib/components/Card/CollapsibleCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleCard.js","sourceRoot":"","sources":["../../../src/components/Card/CollapsibleCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,OAAO,IAAmB,MAAM,QAAQ,CAAC;AACzC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,UAAU,MAAM,cAAc,CAAC;AAetC,MAAM,YAAY,GAAkC,EAAE,CAAC;AAEvD,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACxF,OAAO,GAAG,CAAA;qCACyB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;QACvD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;iBACvB,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW;oCACvB,KAAK,CAAC,IAAI,CAAC,OAAO;GACnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,kBAAkB;AAClB,MAAM,eAAe,GAA4C,CAC/D,KAA8C,EAC9C,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;QACzB,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,oBAAK,SAAS,eAChB,KAAK,IAAI,KAAC,SAAS,cAAE,KAAK,WAAa,EACxC,MAAC,UAAU,kBAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,iBACnD,KAAC,kBAAkB,kBACjB,EAAE,EAAE,MAAM,EACV,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,SAAS,gBAEpB,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,WAAG,YACP,EACpB,MAAM,aACI,EACb,MAAC,cAAc,kBAAC,SAAS,EAAE,SAAS,iBACjC,QAAQ,IAAI,KAAC,WAAW,cAAE,QAAQ,WAAe,EACjD,MAAM,IAAI,KAAC,UAAU,kBAAC,OAAO,EAAC,QAAQ,gBAAE,MAAM,YAAc,aAC9C,aACZ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,YAAY,CAAC;AAE5C,eAAe,eAAe,CAAC","sourcesContent":["import { FunctionComponent, ReactElement, ReactNode, PropsWithChildren, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport { defaultThemeProp } from '../../theme';\nimport Icon from '../Icon';\nimport ExpandCollapse from '../ExpandCollapse';\n\nimport Card, { CardProps } from './Card';\nimport CardHeader from './CardHeader';\nimport CardMedia from './CardMedia';\nimport CardContent from './CardContent';\nimport CardFooter from './CardFooter';\n\nexport interface CollapsibleCardProps extends CardProps {\n  /** The header content. */\n  header?: ReactElement;\n  /** Action Buttons that will render in the header. */\n  actions?: ReactElement | ReactElement[];\n  /** The footer content. */\n  footer?: ReactNode;\n  /** CardMedia content that will render above the header. */\n  media?: ReactElement;\n  /** Callback when the Card toggles from collapsed to expanded. */\n  onChange?: (event: { collapsed: boolean }) => void;\n}\n\nconst defaultProps: Partial<CollapsibleCardProps> = {};\n\nconst StyledToggleButton = styled.button<{ collapsed: boolean }>(({ theme, collapsed }) => {\n  return css`\n    transition: transform calc(2 * ${theme.base.animation.speed})\n      ${theme.base.animation.timing.ease};\n    transform: ${collapsed ? 'rotate(-90deg)' : 'rotate(0)'};\n    margin-inline-end: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\n/** @deprecated */\nconst CollapsibleCard: FunctionComponent<CollapsibleCardProps> = (\n  props: PropsWithChildren<CollapsibleCardProps>\n) => {\n  const { header, actions, footer, media, onChange, children, ...restProps } = props;\n  const [collapsed, setCollapsed] = useState(false);\n\n  const toggleCollapse = () => {\n    setCollapsed(!collapsed);\n    onChange?.({ collapsed: !collapsed });\n  };\n\n  return (\n    <Card {...restProps}>\n      {media && <CardMedia>{media}</CardMedia>}\n      <CardHeader actions={actions} onClick={toggleCollapse}>\n        <StyledToggleButton\n          as={Button}\n          variant='simple'\n          icon\n          onClick={toggleCollapse}\n          collapsed={collapsed}\n        >\n          <Icon name='caret-down' />\n        </StyledToggleButton>\n        {header}\n      </CardHeader>\n      <ExpandCollapse collapsed={collapsed}>\n        {children && <CardContent>{children}</CardContent>}\n        {footer && <CardFooter justify='center'>{footer}</CardFooter>}\n      </ExpandCollapse>\n    </Card>\n  );\n};\n\nCollapsibleCard.defaultProps = defaultProps;\n\nexport default CollapsibleCard;\n"]}
+{"version":3,"file":"CollapsibleCard.js","sourceRoot":"","sources":["../../../src/components/Card/CollapsibleCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,OAAO,IAAmB,MAAM,QAAQ,CAAC;AACzC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,YAAY,CAAC,aAAa,CAAC,CAAC;AAe5B,MAAM,YAAY,GAAkC,EAAE,CAAC;AAEvD,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACxF,OAAO,GAAG,CAAA;qCACyB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;QACvD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;iBACvB,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW;oCACvB,KAAK,CAAC,IAAI,CAAC,OAAO;GACnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,kBAAkB;AAClB,MAAM,eAAe,GAA4C,CAC/D,KAA8C,EAC9C,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;QACzB,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,oBAAK,SAAS,eAChB,KAAK,IAAI,KAAC,SAAS,cAAE,KAAK,WAAa,EACxC,MAAC,UAAU,kBAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,iBACnD,KAAC,kBAAkB,kBACjB,EAAE,EAAE,MAAM,EACV,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,SAAS,gBAEpB,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,WAAG,YACP,EACpB,MAAM,aACI,EACb,MAAC,cAAc,kBAAC,SAAS,EAAE,SAAS,iBACjC,QAAQ,IAAI,KAAC,WAAW,cAAE,QAAQ,WAAe,EACjD,MAAM,IAAI,KAAC,UAAU,kBAAC,OAAO,EAAC,QAAQ,gBAAE,MAAM,YAAc,aAC9C,aACZ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,YAAY,CAAC;AAE5C,eAAe,eAAe,CAAC","sourcesContent":["import { FunctionComponent, ReactElement, ReactNode, PropsWithChildren, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport ExpandCollapse from '../ExpandCollapse';\n\nimport Card, { CardProps } from './Card';\nimport CardHeader from './CardHeader';\nimport CardMedia from './CardMedia';\nimport CardContent from './CardContent';\nimport CardFooter from './CardFooter';\n\nregisterIcon(caretDownIcon);\n\nexport interface CollapsibleCardProps extends CardProps {\n  /** The header content. */\n  header?: ReactElement;\n  /** Action Buttons that will render in the header. */\n  actions?: ReactElement | ReactElement[];\n  /** The footer content. */\n  footer?: ReactNode;\n  /** CardMedia content that will render above the header. */\n  media?: ReactElement;\n  /** Callback when the Card toggles from collapsed to expanded. */\n  onChange?: (event: { collapsed: boolean }) => void;\n}\n\nconst defaultProps: Partial<CollapsibleCardProps> = {};\n\nconst StyledToggleButton = styled.button<{ collapsed: boolean }>(({ theme, collapsed }) => {\n  return css`\n    transition: transform calc(2 * ${theme.base.animation.speed})\n      ${theme.base.animation.timing.ease};\n    transform: ${collapsed ? 'rotate(-90deg)' : 'rotate(0)'};\n    margin-inline-end: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\n/** @deprecated */\nconst CollapsibleCard: FunctionComponent<CollapsibleCardProps> = (\n  props: PropsWithChildren<CollapsibleCardProps>\n) => {\n  const { header, actions, footer, media, onChange, children, ...restProps } = props;\n  const [collapsed, setCollapsed] = useState(false);\n\n  const toggleCollapse = () => {\n    setCollapsed(!collapsed);\n    onChange?.({ collapsed: !collapsed });\n  };\n\n  return (\n    <Card {...restProps}>\n      {media && <CardMedia>{media}</CardMedia>}\n      <CardHeader actions={actions} onClick={toggleCollapse}>\n        <StyledToggleButton\n          as={Button}\n          variant='simple'\n          icon\n          onClick={toggleCollapse}\n          collapsed={collapsed}\n        >\n          <Icon name='caret-down' />\n        </StyledToggleButton>\n        {header}\n      </CardHeader>\n      <ExpandCollapse collapsed={collapsed}>\n        {children && <CardContent>{children}</CardContent>}\n        {footer && <CardFooter justify='center'>{footer}</CardFooter>}\n      </ExpandCollapse>\n    </Card>\n  );\n};\n\nCollapsibleCard.defaultProps = defaultProps;\n\nexport default CollapsibleCard;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AA6B7C,eAAO,MAAM,cAAc,4PAO1B,CAAC;AAQF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA8L7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AA+B7C,eAAO,MAAM,cAAc,4PAO1B,CAAC;AAQF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA8L7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/ComboBox/ComboBox.js

@@ -2,7 +2,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { hideVisually } from 'polished';
-import Icon from '../Icon';
+import Icon, { registerIcon } from '../Icon';
+import * as caretDownIcon from '../Icon/icons/caret-down.icon';
+import * as caretUpIcon from '../Icon/icons/caret-up.icon';
 import { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement } from '../../hooks';
 import Popover, { StyledPopover } from '../Popover';
 import FormField from '../FormField';
@@ -12,6 +14,7 @@ import Button from '../Button';
 import { navigatorIsAvailable } from '../../utils';
 import menuHelpers from '../Menu/helpers';
 import ComboBoxInput from './ComboBoxInput';
+registerIcon(caretDownIcon, caretUpIcon);
 const popoverModifiers = [
     {
         name: 'flip',

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent as ReactKeyboardEvent,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport styled from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport Icon from '../Icon';\nimport { ForwardProps } from '../../types';\nimport { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement } from '../../hooks';\nimport Popover, { PopoverProps, StyledPopover } from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu from '../Menu';\nimport Button from '../Button';\nimport { navigatorIsAvailable } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport ComboBoxProps from './ComboBox.types';\n\nconst popoverModifiers: PopoverProps['modifiers'] = [\n  {\n    name: 'flip',\n    enabled: true,\n    options: {\n      fallbackPlacements: ['top-start']\n    }\n  },\n  {\n    name: 'preventOverflow',\n    enabled: true\n  },\n  {\n    name: 'hide',\n    enabled: false\n  },\n  {\n    name: 'sameWidth',\n    enabled: true,\n    phase: 'beforeWrite',\n    fn({ state }) {\n      state.styles.popper.width = `${state.rects.reference.width}px`;\n    },\n    requires: ['computeStyles']\n  }\n];\n\nexport const StyledComboBox = styled(StyledFormControl)`\n  border: 0;\n\n  & ${StyledPopover} {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n`;\n\nconst StyledAriaDescription = styled.p`\n  ${hideVisually}\n`;\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nconst ComboBox: FunctionComponent<ComboBoxProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ComboBoxProps>, ref: Ref<HTMLDivElement>) => {\n    const uid = useUID();\n    const {\n      value,\n      required,\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      status,\n      readOnly,\n      disabled,\n      mode = 'single-select',\n      selected,\n      onChange,\n      actions,\n      onFocus,\n      onBlur,\n      onDropdownButtonClick: onDropdownButtonClickProp,\n      onClick,\n      menu,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [open, setOpen] = useState<boolean>(false);\n    const menuRef = useRef<HTMLDivElement>(null);\n    const menuComponentId = `${id}-listbox`;\n\n    // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n    const [, setContainerEl] = useElement();\n    const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n    useFocusWithin([containerRef], focused => {\n      if (!focused) {\n        setOpen(false);\n        onBlur?.(selected?.items);\n      } else {\n        onFocus?.(selected?.items);\n        if (isMobile) {\n          setTimeout(() => {\n            containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n          }, 150); // delay it to let keyboard expand first\n        }\n      }\n    });\n\n    const onInputKeyDown = useCallback(\n      (e: ReactKeyboardEvent<HTMLInputElement>) => {\n        if (!menu || readOnly) return;\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault();\n            if (!open) setOpen(true);\n            break;\n          case 'Escape':\n            e.preventDefault();\n            if (open) e.stopPropagation();\n            setOpen(false);\n            break;\n          default:\n        }\n      },\n      [open, readOnly, menu, value]\n    );\n\n    const onDropdownButtonClick = useCallback(() => {\n      onDropdownButtonClickProp?.(!open);\n      setOpen(!open);\n    }, [open, onDropdownButtonClickProp]);\n\n    const dropdownButton = useMemo(() => {\n      return (menu?.items?.length || onDropdownButtonClickProp || !onChange) && !readOnly ? (\n        <Button\n          aria-label={t(\n            open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n          )}\n          icon\n          variant='simple'\n          onClick={onDropdownButtonClick}\n          disabled={disabled}\n          tabIndex='-1'\n        >\n          <Icon name={open ? 'caret-up' : 'caret-down'} />\n        </Button>\n      ) : null;\n    }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n    const onInputClick = useCallback(\n      (e: MouseEvent) => {\n        if (readOnly) return;\n        setOpen(true);\n        onClick?.(e);\n      },\n      [readOnly, onClick]\n    );\n\n    useEffect(() => {\n      if (menu && value && value.length > 0) {\n        setOpen(true);\n      }\n    }, [menu, value]);\n\n    // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n    // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n    const inputActions = (\n      <>\n        {dropdownButton}\n        {actions}\n      </>\n    );\n\n    const Comp = (\n      <StyledComboBox ref={containerRef} as={StyledFormControl} id={`${id}-combobox`}>\n        <ComboBoxInput\n          ref={inputRef}\n          role='combobox'\n          aria-haspopup='listbox'\n          aria-expanded={!readOnly && !disabled && open}\n          aria-autocomplete='list'\n          aria-describedby={`${id}-inputDescription`}\n          selected={selected?.items}\n          spellCheck={false}\n          {...{\n            id,\n            readOnly,\n            disabled,\n            onChange,\n            value,\n            mode,\n            status\n          }}\n          actions={inputActions}\n          onRemove={selected?.onRemove}\n          onClick={onInputClick}\n          onKeyDown={onInputKeyDown}\n          {...restProps}\n        />\n\n        <StyledAriaDescription id={`${id}-inputDescription`}>\n          {t('combobox_open_close')}\n          {!!onChange && ` ${t('combobox_search_instructions')}`}\n        </StyledAriaDescription>\n\n        <Popover\n          show={open && menu !== undefined}\n          target={containerRef.current}\n          placement='bottom-start'\n          modifiers={popoverModifiers}\n          strategy={isMobile ? 'absolute' : 'fixed'}\n          onMouseDown={(e: MouseEvent) => e.preventDefault()}\n        >\n          {menu && (\n            <Menu\n              ref={menuRef}\n              id={menuComponentId}\n              role='listbox'\n              mode={mode}\n              {...menu}\n              items={menu.items}\n              focusControlEl={inputRef.current || undefined}\n              onItemClick={(itemId, e) => {\n                if (mode === 'single-select') {\n                  setOpen(false);\n                }\n                menu.onItemClick?.(itemId, e);\n\n                const clickedItem = menuHelpers.getItem(menu.items, itemId);\n\n                if (clickedItem?.primary && !clickedItem?.selected) {\n                  selected?.onNew?.(clickedItem?.primary);\n                }\n              }}\n              arrowNavigationUnsupported\n            />\n          )}\n        </Popover>\n      </StyledComboBox>\n    );\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default ComboBox;\n"]}
+{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent as ReactKeyboardEvent,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport styled from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as caretUpIcon from '../Icon/icons/caret-up.icon';\nimport { ForwardProps } from '../../types';\nimport { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement } from '../../hooks';\nimport Popover, { PopoverProps, StyledPopover } from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu from '../Menu';\nimport Button from '../Button';\nimport { navigatorIsAvailable } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport ComboBoxProps from './ComboBox.types';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nconst popoverModifiers: PopoverProps['modifiers'] = [\n  {\n    name: 'flip',\n    enabled: true,\n    options: {\n      fallbackPlacements: ['top-start']\n    }\n  },\n  {\n    name: 'preventOverflow',\n    enabled: true\n  },\n  {\n    name: 'hide',\n    enabled: false\n  },\n  {\n    name: 'sameWidth',\n    enabled: true,\n    phase: 'beforeWrite',\n    fn({ state }) {\n      state.styles.popper.width = `${state.rects.reference.width}px`;\n    },\n    requires: ['computeStyles']\n  }\n];\n\nexport const StyledComboBox = styled(StyledFormControl)`\n  border: 0;\n\n  & ${StyledPopover} {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n`;\n\nconst StyledAriaDescription = styled.p`\n  ${hideVisually}\n`;\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nconst ComboBox: FunctionComponent<ComboBoxProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ComboBoxProps>, ref: Ref<HTMLDivElement>) => {\n    const uid = useUID();\n    const {\n      value,\n      required,\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      status,\n      readOnly,\n      disabled,\n      mode = 'single-select',\n      selected,\n      onChange,\n      actions,\n      onFocus,\n      onBlur,\n      onDropdownButtonClick: onDropdownButtonClickProp,\n      onClick,\n      menu,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [open, setOpen] = useState<boolean>(false);\n    const menuRef = useRef<HTMLDivElement>(null);\n    const menuComponentId = `${id}-listbox`;\n\n    // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n    const [, setContainerEl] = useElement();\n    const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n    useFocusWithin([containerRef], focused => {\n      if (!focused) {\n        setOpen(false);\n        onBlur?.(selected?.items);\n      } else {\n        onFocus?.(selected?.items);\n        if (isMobile) {\n          setTimeout(() => {\n            containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n          }, 150); // delay it to let keyboard expand first\n        }\n      }\n    });\n\n    const onInputKeyDown = useCallback(\n      (e: ReactKeyboardEvent<HTMLInputElement>) => {\n        if (!menu || readOnly) return;\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault();\n            if (!open) setOpen(true);\n            break;\n          case 'Escape':\n            e.preventDefault();\n            if (open) e.stopPropagation();\n            setOpen(false);\n            break;\n          default:\n        }\n      },\n      [open, readOnly, menu, value]\n    );\n\n    const onDropdownButtonClick = useCallback(() => {\n      onDropdownButtonClickProp?.(!open);\n      setOpen(!open);\n    }, [open, onDropdownButtonClickProp]);\n\n    const dropdownButton = useMemo(() => {\n      return (menu?.items?.length || onDropdownButtonClickProp || !onChange) && !readOnly ? (\n        <Button\n          aria-label={t(\n            open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n          )}\n          icon\n          variant='simple'\n          onClick={onDropdownButtonClick}\n          disabled={disabled}\n          tabIndex='-1'\n        >\n          <Icon name={open ? 'caret-up' : 'caret-down'} />\n        </Button>\n      ) : null;\n    }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n    const onInputClick = useCallback(\n      (e: MouseEvent) => {\n        if (readOnly) return;\n        setOpen(true);\n        onClick?.(e);\n      },\n      [readOnly, onClick]\n    );\n\n    useEffect(() => {\n      if (menu && value && value.length > 0) {\n        setOpen(true);\n      }\n    }, [menu, value]);\n\n    // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n    // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n    const inputActions = (\n      <>\n        {dropdownButton}\n        {actions}\n      </>\n    );\n\n    const Comp = (\n      <StyledComboBox ref={containerRef} as={StyledFormControl} id={`${id}-combobox`}>\n        <ComboBoxInput\n          ref={inputRef}\n          role='combobox'\n          aria-haspopup='listbox'\n          aria-expanded={!readOnly && !disabled && open}\n          aria-autocomplete='list'\n          aria-describedby={`${id}-inputDescription`}\n          selected={selected?.items}\n          spellCheck={false}\n          {...{\n            id,\n            readOnly,\n            disabled,\n            onChange,\n            value,\n            mode,\n            status\n          }}\n          actions={inputActions}\n          onRemove={selected?.onRemove}\n          onClick={onInputClick}\n          onKeyDown={onInputKeyDown}\n          {...restProps}\n        />\n\n        <StyledAriaDescription id={`${id}-inputDescription`}>\n          {t('combobox_open_close')}\n          {!!onChange && ` ${t('combobox_search_instructions')}`}\n        </StyledAriaDescription>\n\n        <Popover\n          show={open && menu !== undefined}\n          target={containerRef.current}\n          placement='bottom-start'\n          modifiers={popoverModifiers}\n          strategy={isMobile ? 'absolute' : 'fixed'}\n          onMouseDown={(e: MouseEvent) => e.preventDefault()}\n        >\n          {menu && (\n            <Menu\n              ref={menuRef}\n              id={menuComponentId}\n              role='listbox'\n              mode={mode}\n              {...menu}\n              items={menu.items}\n              focusControlEl={inputRef.current || undefined}\n              onItemClick={(itemId, e) => {\n                if (mode === 'single-select') {\n                  setOpen(false);\n                }\n                menu.onItemClick?.(itemId, e);\n\n                const clickedItem = menuHelpers.getItem(menu.items, itemId);\n\n                if (clickedItem?.primary && !clickedItem?.selected) {\n                  selected?.onNew?.(clickedItem?.primary);\n                }\n              }}\n              arrowNavigationUnsupported\n            />\n          )}\n        </Popover>\n      </StyledComboBox>\n    );\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default ComboBox;\n"]}

package/lib/components/Configuration/Configuration.js

@@ -25,7 +25,7 @@ if (windowIsAvailable) {
     if (!window[metaKey]) {
         window[metaKey] = [];
     }
-    window[metaKey].push({ version: '2.0.0-dev.14.3' });
+    window[metaKey].push({ version: '2.0.0-dev.16.2' });
 }
 const Configuration = ({ context = ConfigurationContext, children, locale, direction, translations: customTranslations, theme, disableDefaultFontLoading, styleSheetTarget, portalTarget, overrideMap, renderNativeControls }) => {
     const ctx = useContext(context);

package/lib/components/Configuration/Configuration.js.map

@@ -1 +1 @@
-{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  useContext,\n  FunctionComponent,\n  ComponentType,\n  ReactNode,\n  useMemo,\n  useState,\n  useEffect,\n  Context\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\n\nimport { GlobalStyle } from '../../styles';\nimport {\n  ThemeMachine,\n  BaseThemeMachine,\n  DefaultSettableTheme,\n  DefaultThemeDefinition\n} from '../../theme';\nimport {\n  createTranslationPack,\n  Translation,\n  TranslationPack,\n  DefaultTranslation,\n  direction as directionOfLocale\n} from '../../i18n';\nimport { FileInputProps } from '../File';\nimport { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';\n\nexport interface ConfigurationProps {\n  /**\n   * Any components or nodes that should be impacted by the settings applied by this Configuration component.\n   */\n  children: ReactNode;\n  /**\n   * Context to read previous configuration values from.\n   */\n  context?: Context<ConfigurationContextValue>;\n  /**\n   * User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php).\n   */\n  locale?: string;\n  /**\n   * Override rendering direction of the document. Direction will be based on the locale if now provided.\n   */\n  direction?: 'ltr' | 'rtl';\n  /**\n   * Object with (partial) translations.\n   */\n  translations?: Translation;\n  /**\n   * Theme object used to override any or all Cosmos theme properties.\n   */\n  theme?: DefaultSettableTheme;\n  /**\n   * Disables loading Open Sans from Google Fonts. Only takes effect on the root configuration.\n   */\n  disableDefaultFontLoading?: boolean;\n  /**\n   * Target element for loading styles related to `styled-components`.\n   */\n  styleSheetTarget?: HTMLElement;\n  /**\n   * Target element for rendering a `ReactDOM` portal.\n   */\n  portalTarget?: Element;\n  /**\n   * Override map to replace Cosmos components.\n   */\n  overrideMap?: {\n    FileInput?: ComponentType<FileInputProps>;\n  };\n  /**\n   * Use native HTML5 controls for inputs instead of rich ones.\n   * @default false\n   */\n  renderNativeControls?: boolean;\n}\n\nconst initializedKey = Symbol.for('@pega/cosmos-react-core.configuration.initialized');\n\nexport interface ConfigurationContextValue {\n  [initializedKey]: boolean;\n  locale: string;\n  direction: ConfigurationProps['direction'];\n  translations: TranslationPack;\n  themeMachine: ThemeMachine<DefaultThemeDefinition>;\n  styleSheetTarget?: HTMLElement;\n  portalTarget?: Element;\n  overrideMap: NonNullable<ConfigurationProps['overrideMap']>;\n  renderNativeControls: boolean;\n}\n\nconst defaultProps: Partial<ConfigurationProps> = {};\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n  [initializedKey]: false,\n  locale: defaultLocale,\n  direction: directionOfLocale(defaultLocale),\n  translations: DefaultTranslation,\n  themeMachine: BaseThemeMachine,\n  styleSheetTarget: documentIsAvailable ? document.head : undefined,\n  portalTarget: documentIsAvailable ? document.body : undefined,\n  overrideMap: {},\n  renderNativeControls: false\n});\n\nconst metaKey = Symbol.for('@pega/cosmos-react-core.metadata');\n\ninterface CosmosMetadata {\n  version: string;\n}\n\ndeclare global {\n  interface Window {\n    [metaKey]: CosmosMetadata[];\n  }\n}\n\nif (windowIsAvailable) {\n  if (!window[metaKey]) {\n    window[metaKey] = [];\n  }\n\n  window[metaKey].push({ version: '2.0.0-dev.14.3' });\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n  context = ConfigurationContext,\n  children,\n  locale,\n  direction,\n  translations: customTranslations,\n  theme,\n  disableDefaultFontLoading,\n  styleSheetTarget,\n  portalTarget,\n  overrideMap,\n  renderNativeControls\n}: ConfigurationProps) => {\n  const ctx = useContext(context);\n  const themeMachine = theme\n    ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n    : ctx.themeMachine;\n  const translations = useMemo(\n    () => createTranslationPack(customTranslations),\n    [customTranslations]\n  );\n\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const wrappedChildren = ctx[initializedKey] ? (\n    children\n  ) : (\n    <StyleSheetManager disableVendorPrefixes target={styleSheetTarget ?? ctx.styleSheetTarget}>\n      <>\n        {!disableDefaultFontLoading &&\n          mounted &&\n          documentIsAvailable &&\n          createPortal(\n            <link\n              rel='stylesheet'\n              href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap'\n            />,\n            document.head\n          )}\n        <GlobalStyle />\n        {children}\n      </>\n    </StyleSheetManager>\n  );\n  return (\n    <ConfigurationContext.Provider\n      value={{\n        locale: locale ?? ctx.locale,\n        direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n        translations,\n        themeMachine,\n        [initializedKey]: true,\n        styleSheetTarget: styleSheetTarget ?? ctx.styleSheetTarget,\n        portalTarget: portalTarget ?? ctx.portalTarget,\n        overrideMap: overrideMap ? { ...ctx.overrideMap, ...overrideMap } : ctx.overrideMap,\n        renderNativeControls: renderNativeControls ?? ctx.renderNativeControls\n      }}\n    >\n      <ThemeProvider theme={themeMachine.theme}>{wrappedChildren}</ThemeProvider>\n    </ConfigurationContext.Provider>\n  );\n};\n\nConfiguration.defaultProps = defaultProps;\n\nexport default Configuration;\n"]}
+{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  useContext,\n  FunctionComponent,\n  ComponentType,\n  ReactNode,\n  useMemo,\n  useState,\n  useEffect,\n  Context\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\n\nimport { GlobalStyle } from '../../styles';\nimport {\n  ThemeMachine,\n  BaseThemeMachine,\n  DefaultSettableTheme,\n  DefaultThemeDefinition\n} from '../../theme';\nimport {\n  createTranslationPack,\n  Translation,\n  TranslationPack,\n  DefaultTranslation,\n  direction as directionOfLocale\n} from '../../i18n';\nimport { FileInputProps } from '../File';\nimport { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';\n\nexport interface ConfigurationProps {\n  /**\n   * Any components or nodes that should be impacted by the settings applied by this Configuration component.\n   */\n  children: ReactNode;\n  /**\n   * Context to read previous configuration values from.\n   */\n  context?: Context<ConfigurationContextValue>;\n  /**\n   * User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php).\n   */\n  locale?: string;\n  /**\n   * Override rendering direction of the document. Direction will be based on the locale if now provided.\n   */\n  direction?: 'ltr' | 'rtl';\n  /**\n   * Object with (partial) translations.\n   */\n  translations?: Translation;\n  /**\n   * Theme object used to override any or all Cosmos theme properties.\n   */\n  theme?: DefaultSettableTheme;\n  /**\n   * Disables loading Open Sans from Google Fonts. Only takes effect on the root configuration.\n   */\n  disableDefaultFontLoading?: boolean;\n  /**\n   * Target element for loading styles related to `styled-components`.\n   */\n  styleSheetTarget?: HTMLElement;\n  /**\n   * Target element for rendering a `ReactDOM` portal.\n   */\n  portalTarget?: Element;\n  /**\n   * Override map to replace Cosmos components.\n   */\n  overrideMap?: {\n    FileInput?: ComponentType<FileInputProps>;\n  };\n  /**\n   * Use native HTML5 controls for inputs instead of rich ones.\n   * @default false\n   */\n  renderNativeControls?: boolean;\n}\n\nconst initializedKey = Symbol.for('@pega/cosmos-react-core.configuration.initialized');\n\nexport interface ConfigurationContextValue {\n  [initializedKey]: boolean;\n  locale: string;\n  direction: ConfigurationProps['direction'];\n  translations: TranslationPack;\n  themeMachine: ThemeMachine<DefaultThemeDefinition>;\n  styleSheetTarget?: HTMLElement;\n  portalTarget?: Element;\n  overrideMap: NonNullable<ConfigurationProps['overrideMap']>;\n  renderNativeControls: boolean;\n}\n\nconst defaultProps: Partial<ConfigurationProps> = {};\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n  [initializedKey]: false,\n  locale: defaultLocale,\n  direction: directionOfLocale(defaultLocale),\n  translations: DefaultTranslation,\n  themeMachine: BaseThemeMachine,\n  styleSheetTarget: documentIsAvailable ? document.head : undefined,\n  portalTarget: documentIsAvailable ? document.body : undefined,\n  overrideMap: {},\n  renderNativeControls: false\n});\n\nconst metaKey = Symbol.for('@pega/cosmos-react-core.metadata');\n\ninterface CosmosMetadata {\n  version: string;\n}\n\ndeclare global {\n  interface Window {\n    [metaKey]: CosmosMetadata[];\n  }\n}\n\nif (windowIsAvailable) {\n  if (!window[metaKey]) {\n    window[metaKey] = [];\n  }\n\n  window[metaKey].push({ version: '2.0.0-dev.16.2' });\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n  context = ConfigurationContext,\n  children,\n  locale,\n  direction,\n  translations: customTranslations,\n  theme,\n  disableDefaultFontLoading,\n  styleSheetTarget,\n  portalTarget,\n  overrideMap,\n  renderNativeControls\n}: ConfigurationProps) => {\n  const ctx = useContext(context);\n  const themeMachine = theme\n    ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n    : ctx.themeMachine;\n  const translations = useMemo(\n    () => createTranslationPack(customTranslations),\n    [customTranslations]\n  );\n\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const wrappedChildren = ctx[initializedKey] ? (\n    children\n  ) : (\n    <StyleSheetManager disableVendorPrefixes target={styleSheetTarget ?? ctx.styleSheetTarget}>\n      <>\n        {!disableDefaultFontLoading &&\n          mounted &&\n          documentIsAvailable &&\n          createPortal(\n            <link\n              rel='stylesheet'\n              href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap'\n            />,\n            document.head\n          )}\n        <GlobalStyle />\n        {children}\n      </>\n    </StyleSheetManager>\n  );\n  return (\n    <ConfigurationContext.Provider\n      value={{\n        locale: locale ?? ctx.locale,\n        direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n        translations,\n        themeMachine,\n        [initializedKey]: true,\n        styleSheetTarget: styleSheetTarget ?? ctx.styleSheetTarget,\n        portalTarget: portalTarget ?? ctx.portalTarget,\n        overrideMap: overrideMap ? { ...ctx.overrideMap, ...overrideMap } : ctx.overrideMap,\n        renderNativeControls: renderNativeControls ?? ctx.renderNativeControls\n      }}\n    >\n      <ThemeProvider theme={themeMachine.theme}>{wrappedChildren}</ThemeProvider>\n    </ConfigurationContext.Provider>\n  );\n};\n\nConfiguration.defaultProps = defaultProps;\n\nexport default Configuration;\n"]}