@pega/cosmos-react-core 4.0.0-dev.5.1 → 4.0.0-dev.6.1

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

@@ -1 +1 @@
-{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAc,MAAM,OAAO,CAAC;AAGxF,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGnE,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE;QAChB,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;QACrC,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;KAC1C,CAAC;IACF,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA+C3D,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAc,MAAM,OAAO,CAAC;AAGxF,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGnE,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE;QAChB,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;QACrC,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;KAC1C,CAAC;IACF,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAoD3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Actions/Actions.js

@@ -1,21 +1,27 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { useI18n } from '../../hooks';
+import { useConsolidatedRef, useI18n } from '../../hooks';
 import Button from '../Button';
 import Icon from '../Icon';
 import MenuButton from '../MenuButton';
 const Actions = forwardRef(({ items, menuAt = 2, iconOnly = true, menuButtonProps }, ref) => {
     const t = useI18n();
+    const menuButtonRef = useConsolidatedRef(ref);
     if (!items || items.length === 0) {
         return null;
     }
-    return items.length >= menuAt ? (_jsx(MenuButton, { ref: ref, text: t('actions'), iconOnly: true, icon: 'more', variant: 'simple', onClick: menuButtonProps?.onClick, onKeyDown: menuButtonProps?.onKeyDown, menu: {
-            items: items.map(({ text, ...restProps }) => ({
+    return items.length >= menuAt ? (_jsx(MenuButton, { ref: menuButtonRef, text: t('actions'), iconOnly: true, icon: 'more', variant: 'simple', onClick: menuButtonProps?.onClick, onKeyDown: menuButtonProps?.onKeyDown, menu: {
+            items: items.map(({ text, onClick, ...restProps }) => ({
+                ...restProps,
                 primary: text,
-                ...restProps
+                onClick: onClick
+                    ? (id, e) => {
+                        onClick(id, e, menuButtonRef.current ?? undefined);
+                    }
+                    : undefined
             }))
         } })) : (_jsx(_Fragment, { children: items.map(({ id, icon, text, onClick, ...restProps }) => {
-            return (_jsx(Button, { ref: ref, variant: icon && iconOnly ? 'simple' : undefined, onClick: (event) => onClick?.(id, event), label: icon ? text : undefined, icon: !!icon && iconOnly, ...restProps, children: icon && iconOnly ? _jsx(Icon, { name: icon }) : text }, id));
+            return (_jsx(Button, { variant: icon && iconOnly ? 'simple' : undefined, onClick: (event) => onClick?.(id, event), label: icon ? text : undefined, icon: !!icon && iconOnly, ...restProps, children: icon && iconOnly ? _jsx(Icon, { name: icon }) : text }, id));
         }) }));
 });
 export default Actions;

package/lib/components/Actions/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuD,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAA+B,MAAM,eAAe,CAAC;AAe5D,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,eAAe,EAAiC,EACtF,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,CAC9B,KAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAClB,QAAQ,QACR,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,eAAe,EAAE,OAAO,EACjC,SAAS,EAAE,eAAe,EAAE,SAAS,EACrC,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;gBAC5C,OAAO,EAAE,IAAI;gBACb,GAAG,SAAS;aACb,CAAC,CAAC;SACJ,GACD,CACH,CAAC,CAAC,CAAC,CACF,4BACG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;YACvD,OAAO,CACL,KAAC,MAAM,IAEL,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAChD,OAAO,EAAE,CAAC,KAAoC,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,EACvE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC9B,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,QAAQ,KACpB,SAAS,YAEZ,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI,IAR1C,EAAE,CASA,CACV,CAAC;QACJ,CAAC,CAAC,GACD,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, MouseEvent } from 'react';\n\nimport { useI18n } from '../../hooks';\nimport { Action, ForwardProps, NoChildrenProp } from '../../types';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport MenuButton, { MenuButtonProps } from '../MenuButton';\n\nexport interface ActionsProps extends NoChildrenProp {\n  items: Action[];\n  /** @default 2 */\n  menuAt?: number;\n  menuButtonProps?: {\n    onClick?: MenuButtonProps['onClick'];\n    onKeyDown?: MenuButtonProps['onKeyDown'];\n  };\n  /** @default true */\n  iconOnly?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nconst Actions: FunctionComponent<ActionsProps & ForwardProps> = forwardRef(\n  (\n    { items, menuAt = 2, iconOnly = true, menuButtonProps }: PropsWithoutRef<ActionsProps>,\n    ref: ActionsProps['ref']\n  ) => {\n    const t = useI18n();\n\n    if (!items || items.length === 0) {\n      return null;\n    }\n\n    return items.length >= menuAt ? (\n      <MenuButton\n        ref={ref}\n        text={t('actions')}\n        iconOnly\n        icon='more'\n        variant='simple'\n        onClick={menuButtonProps?.onClick}\n        onKeyDown={menuButtonProps?.onKeyDown}\n        menu={{\n          items: items.map(({ text, ...restProps }) => ({\n            primary: text,\n            ...restProps\n          }))\n        }}\n      />\n    ) : (\n      <>\n        {items.map(({ id, icon, text, onClick, ...restProps }) => {\n          return (\n            <Button\n              key={id}\n              ref={ref}\n              variant={icon && iconOnly ? 'simple' : undefined}\n              onClick={(event: MouseEvent<HTMLButtonElement>) => onClick?.(id, event)}\n              label={icon ? text : undefined}\n              icon={!!icon && iconOnly}\n              {...restProps}\n            >\n              {icon && iconOnly ? <Icon name={icon} /> : text}\n            </Button>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nexport default Actions;\n"]}
+{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuD,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE1D,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAA+B,MAAM,eAAe,CAAC;AAe5D,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,eAAe,EAAiC,EACtF,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE9C,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,CAC9B,KAAC,UAAU,IACT,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAClB,QAAQ,QACR,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,eAAe,EAAE,OAAO,EACjC,SAAS,EAAE,eAAe,EAAE,SAAS,EACrC,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;gBACrD,GAAG,SAAS;gBACZ,OAAO,EAAE,IAAI;gBACb,OAAO,EAAE,OAAO;oBACd,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;wBACR,OAAO,CAAC,EAAE,EAAE,CAAC,EAAE,aAAa,CAAC,OAAO,IAAI,SAAS,CAAC,CAAC;oBACrD,CAAC;oBACH,CAAC,CAAC,SAAS;aACd,CAAC,CAAC;SACJ,GACD,CACH,CAAC,CAAC,CAAC,CACF,4BACG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;YACvD,OAAO,CACL,KAAC,MAAM,IAEL,OAAO,EAAE,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAChD,OAAO,EAAE,CAAC,KAAoC,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,EACvE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC9B,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,QAAQ,KACpB,SAAS,YAEZ,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI,IAP1C,EAAE,CAQA,CACV,CAAC;QACJ,CAAC,CAAC,GACD,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, MouseEvent } from 'react';\n\nimport { useConsolidatedRef, useI18n } from '../../hooks';\nimport { Action, ForwardProps, NoChildrenProp } from '../../types';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport MenuButton, { MenuButtonProps } from '../MenuButton';\n\nexport interface ActionsProps extends NoChildrenProp {\n  items: Action[];\n  /** @default 2 */\n  menuAt?: number;\n  menuButtonProps?: {\n    onClick?: MenuButtonProps['onClick'];\n    onKeyDown?: MenuButtonProps['onKeyDown'];\n  };\n  /** @default true */\n  iconOnly?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nconst Actions: FunctionComponent<ActionsProps & ForwardProps> = forwardRef(\n  (\n    { items, menuAt = 2, iconOnly = true, menuButtonProps }: PropsWithoutRef<ActionsProps>,\n    ref: ActionsProps['ref']\n  ) => {\n    const t = useI18n();\n    const menuButtonRef = useConsolidatedRef(ref);\n\n    if (!items || items.length === 0) {\n      return null;\n    }\n\n    return items.length >= menuAt ? (\n      <MenuButton\n        ref={menuButtonRef}\n        text={t('actions')}\n        iconOnly\n        icon='more'\n        variant='simple'\n        onClick={menuButtonProps?.onClick}\n        onKeyDown={menuButtonProps?.onKeyDown}\n        menu={{\n          items: items.map(({ text, onClick, ...restProps }) => ({\n            ...restProps,\n            primary: text,\n            onClick: onClick\n              ? (id, e) => {\n                  onClick(id, e, menuButtonRef.current ?? undefined);\n                }\n              : undefined\n          }))\n        }}\n      />\n    ) : (\n      <>\n        {items.map(({ id, icon, text, onClick, ...restProps }) => {\n          return (\n            <Button\n              key={id}\n              variant={icon && iconOnly ? 'simple' : undefined}\n              onClick={(event: MouseEvent<HTMLButtonElement>) => onClick?.(id, event)}\n              label={icon ? text : undefined}\n              icon={!!icon && iconOnly}\n              {...restProps}\n            >\n              {icon && iconOnly ? <Icon name={icon} /> : text}\n            </Button>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nexport default Actions;\n"]}

package/lib/components/AdditionalInfo/AdditionalInfo.d.ts

@@ -1,8 +1,10 @@
 import { FunctionComponent, Ref } from 'react';
 import { BaseProps, ForwardProps } from '../../types';
+import { DialogHandleValue } from '../Dialog';
 export interface AdditionalInfoProps extends BaseProps {
     heading: string;
     children: string | JSX.Element;
+    dialogHandle?: Ref<DialogHandleValue>;
     ref?: Ref<HTMLDivElement>;
 }
 export declare const StyledAdditionalInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"AdditionalInfo.d.ts","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/AdditionalInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAUtD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB,yGAMhC,CAAC;AAIF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAmBzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"AdditionalInfo.d.ts","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/AdditionalInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGtD,OAAO,EAAE,iBAAiB,EAAc,MAAM,WAAW,CAAC;AAM1D,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACtC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB,yGAAe,CAAC;AAEjD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAiDzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/AdditionalInfo/AdditionalInfo.js

@@ -1,25 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import styled from 'styled-components';
 import Icon, { registerIcon } from '../Icon';
-import { defaultThemeProp } from '../../theme';
 import HTML from '../HTML';
 import Button from '../Button';
-import Dialog, { useDialog } from '../Dialog';
+import { InfoDialog } from '../Dialog';
 import * as informationIcon from '../Icon/icons/information.icon';
-import { useI18n } from '../../hooks';
-import { StyledDialog } from '../Dialog/Dialog';
+import { useConsolidatedRef, useI18n } from '../../hooks';
 registerIcon(informationIcon);
-export const StyledAdditionalInfo = styled.div(({ theme }) => css `
-    & > ${StyledDialog} {
-      max-width: ${theme.base['content-width'].md};
-    }
-  `);
-StyledAdditionalInfo.defaultProps = defaultThemeProp;
-const AdditionalInfo = forwardRef(({ heading, children, ...restProps }, ref) => {
-    const { target, events } = useDialog();
+export const StyledAdditionalInfo = styled.div ``;
+const AdditionalInfo = forwardRef(({ heading, children, dialogHandle, ...restProps }, ref) => {
     const t = useI18n();
-    return (_jsxs(StyledAdditionalInfo, { ref: ref, ...restProps, children: [_jsx(Button, { variant: 'simple', label: t('additional_info'), compact: true, icon: true, ...events, children: _jsx(Icon, { name: 'information' }) }), _jsx(Dialog, { heading: heading, target: target, children: typeof children === 'string' ? _jsx(HTML, { content: children }) : children })] }));
+    const [target, setTarget] = useState(null);
+    const buttonRef = useRef(null);
+    const handleRef = useConsolidatedRef(dialogHandle);
+    useImperativeHandle(handleRef, () => {
+        return {
+            open: () => {
+                setTarget(buttonRef.current);
+            },
+            close: () => {
+                setTarget(null);
+            }
+        };
+    });
+    return (_jsxs(StyledAdditionalInfo, { ref: ref, ...restProps, children: [_jsx(Button, { variant: 'simple', label: t('additional_info'), compact: true, icon: true, ref: buttonRef, onClick: () => {
+                    handleRef.current?.open();
+                }, children: _jsx(Icon, { name: 'information' }) }), target && (_jsx(InfoDialog, { heading: heading, target: target, onDismiss: () => {
+                    handleRef.current?.close();
+                }, children: typeof children === 'string' ? _jsx(HTML, { content: children }) : children }))] }));
 });
 export default AdditionalInfo;
 //# sourceMappingURL=AdditionalInfo.js.map

package/lib/components/AdditionalInfo/AdditionalInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdditionalInfo.js","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/AdditionalInfo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,KAAK,eAAe,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,YAAY,CAAC,eAAe,CAAC,CAAC;AAQ9B,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAC5C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;UACV,YAAY;mBACH,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;GAE9C,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAwC,EACzE,GAA+B,EAC/B,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;IACvC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,aAC3C,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAE,OAAO,QAAC,IAAI,WAAK,MAAM,YAC3E,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACpB,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,YACrC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,OAAO,EAAE,QAAQ,GAAI,CAAC,CAAC,CAAC,QAAQ,GAC/D,IACY,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Icon, { registerIcon } from '../Icon';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport HTML from '../HTML';\nimport Button from '../Button';\nimport Dialog, { useDialog } from '../Dialog';\nimport * as informationIcon from '../Icon/icons/information.icon';\nimport { useI18n } from '../../hooks';\nimport { StyledDialog } from '../Dialog/Dialog';\n\nregisterIcon(informationIcon);\n\nexport interface AdditionalInfoProps extends BaseProps {\n  heading: string;\n  children: string | JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledAdditionalInfo = styled.div(\n  ({ theme }) => css`\n    & > ${StyledDialog} {\n      max-width: ${theme.base['content-width'].md};\n    }\n  `\n);\n\nStyledAdditionalInfo.defaultProps = defaultThemeProp;\n\nconst AdditionalInfo: FunctionComponent<AdditionalInfoProps & ForwardProps> = forwardRef(\n  (\n    { heading, children, ...restProps }: PropsWithoutRef<AdditionalInfoProps>,\n    ref: AdditionalInfoProps['ref']\n  ) => {\n    const { target, events } = useDialog();\n    const t = useI18n();\n\n    return (\n      <StyledAdditionalInfo ref={ref} {...restProps}>\n        <Button variant='simple' label={t('additional_info')} compact icon {...events}>\n          <Icon name='information' />\n        </Button>\n        <Dialog heading={heading} target={target}>\n          {typeof children === 'string' ? <HTML content={children} /> : children}\n        </Dialog>\n      </StyledAdditionalInfo>\n    );\n  }\n);\n\nexport default AdditionalInfo;\n"]}
+{"version":3,"file":"AdditionalInfo.js","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/AdditionalInfo.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAIV,mBAAmB,EACnB,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAqB,UAAU,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,KAAK,eAAe,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE1D,YAAY,CAAC,eAAe,CAAC,CAAC;AAS9B,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEjD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,SAAS,EAAwC,EACvF,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC,CAAC;IACrE,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAEnD,mBAAmB,CAAC,SAAS,EAAE,GAAG,EAAE;QAClC,OAAO;YACL,IAAI,EAAE,GAAG,EAAE;gBACT,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YAC/B,CAAC;YACD,KAAK,EAAE,GAAG,EAAE;gBACV,SAAS,CAAC,IAAI,CAAC,CAAC;YAClB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,aAC3C,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC3B,OAAO,QACP,IAAI,QACJ,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,GAAG,EAAE;oBACZ,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC;gBAC5B,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACpB,EACR,MAAM,IAAI,CACT,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,GAAG,EAAE;oBACd,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBAC7B,CAAC,YAEA,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,OAAO,EAAE,QAAQ,GAAI,CAAC,CAAC,CAAC,QAAQ,GAC3D,CACd,IACoB,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useImperativeHandle,\n  useRef,\n  useState\n} from 'react';\nimport styled from 'styled-components';\n\nimport Icon, { registerIcon } from '../Icon';\nimport { BaseProps, ForwardProps } from '../../types';\nimport HTML from '../HTML';\nimport Button from '../Button';\nimport { DialogHandleValue, InfoDialog } from '../Dialog';\nimport * as informationIcon from '../Icon/icons/information.icon';\nimport { useConsolidatedRef, useI18n } from '../../hooks';\n\nregisterIcon(informationIcon);\n\nexport interface AdditionalInfoProps extends BaseProps {\n  heading: string;\n  children: string | JSX.Element;\n  dialogHandle?: Ref<DialogHandleValue>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledAdditionalInfo = styled.div``;\n\nconst AdditionalInfo: FunctionComponent<AdditionalInfoProps & ForwardProps> = forwardRef(\n  (\n    { heading, children, dialogHandle, ...restProps }: PropsWithoutRef<AdditionalInfoProps>,\n    ref: AdditionalInfoProps['ref']\n  ) => {\n    const t = useI18n();\n    const [target, setTarget] = useState<HTMLButtonElement | null>(null);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleRef = useConsolidatedRef(dialogHandle);\n\n    useImperativeHandle(handleRef, () => {\n      return {\n        open: () => {\n          setTarget(buttonRef.current);\n        },\n        close: () => {\n          setTarget(null);\n        }\n      };\n    });\n\n    return (\n      <StyledAdditionalInfo ref={ref} {...restProps}>\n        <Button\n          variant='simple'\n          label={t('additional_info')}\n          compact\n          icon\n          ref={buttonRef}\n          onClick={() => {\n            handleRef.current?.open();\n          }}\n        >\n          <Icon name='information' />\n        </Button>\n        {target && (\n          <InfoDialog\n            heading={heading}\n            target={target}\n            onDismiss={() => {\n              handleRef.current?.close();\n            }}\n          >\n            {typeof children === 'string' ? <HTML content={children} /> : children}\n          </InfoDialog>\n        )}\n      </StyledAdditionalInfo>\n    );\n  }\n);\n\nexport default AdditionalInfo;\n"]}

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

@@ -4,7 +4,7 @@ export interface CountProps {
     /** Determines the color to render the Badge as. This color is derived from the Theme.
      * @default "default"
      */
-    variant?: 'default' | 'interactive' | 'inverted' | 'urgent';
+    variant?: 'default' | 'urgent';
     /** The count to be displayed within the Badge. */
     children: number | null;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Count.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAM7D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAG9D,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC5D,kDAAkD;IAClD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,aAAK,sBAAsB,GAAG,iBAAiB,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAEvE,eAAO,MAAM,WAAW;cACgC,MAAM;SAgC5D,CAAC;AAwCH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CASxC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Count.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAM7D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAG9D,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,kDAAkD;IAClD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,aAAK,sBAAsB,GAAG,iBAAiB,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAEvE,eAAO,MAAM,WAAW;cACgC,MAAM;SA2B5D,CAAC;AAwCH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CASxC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/Badges/Count.js

@@ -1,16 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { mix, rgba, transparentize } from 'polished';
+import { rgba } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils';
 import { calculateFontSize } from '../../styles';
 export const StyledCount = styled.span(({ theme, variant, children }) => {
-    const { foreground, background } = variant === 'default'
-        ? theme.components.badges.count.base
-        : theme.components.badges.count[variant];
-    const invertedBackground = tryCatch(() => transparentize(0.5, mix(0.2, background, '#ffffff')));
-    const displayBackground = variant === 'inverted' ? invertedBackground : background;
+    const { foreground, background } = theme.components.badges.count[variant];
     const shadow = tryCatch(() => rgba(foreground, 0.1));
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
@@ -18,7 +14,7 @@ export const StyledCount = styled.span(({ theme, variant, children }) => {
     block-size: 1rem;
     border-radius: calc(9999 * ${theme.base['border-radius']});
     color: ${foreground};
-    background-color: ${displayBackground};
+    background-color: ${background};
     box-shadow: inset 0 0 0 0.0625rem ${shadow};
     font-size: ${fontSize.xxs};
     font-weight: ${theme.base['font-weight'].bold};

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

@@ -1 +1 @@
-{"version":3,"file":"Count.js","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, PropsWithoutRef, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, rgba, transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { ForwardProps, PropsWithDefaults } from '../../types';\nimport { calculateFontSize } from '../../styles';\n\nexport interface CountProps {\n  /** Determines the color to render the Badge as. This color is derived from the Theme.\n   * @default \"default\"\n   */\n  variant?: 'default' | 'interactive' | 'inverted' | 'urgent';\n  /** The count to be displayed within the Badge. */\n  children: number | null;\n}\n\ntype CountPropsWithDefaults = PropsWithDefaults<CountProps, 'variant'>;\n\nexport const StyledCount = styled.span<\n  Pick<CountPropsWithDefaults, 'variant'> & { children: string }\n>(({ theme, variant, children }) => {\n  const { foreground, background } =\n    variant === 'default'\n      ? theme.components.badges.count.base\n      : theme.components.badges.count[variant];\n  const invertedBackground = tryCatch(() => transparentize(0.5, mix(0.2, background, '#ffffff')));\n  const displayBackground = variant === 'inverted' ? invertedBackground : background;\n\n  const shadow = tryCatch(() => rgba(foreground, 0.1));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    display: inline-block;\n    block-size: 1rem;\n    border-radius: calc(9999 * ${theme.base['border-radius']});\n    color: ${foreground};\n    background-color: ${displayBackground};\n    box-shadow: inset 0 0 0 0.0625rem ${shadow};\n    font-size: ${fontSize.xxs};\n    font-weight: ${theme.base['font-weight'].bold};\n    line-height: normal;\n    text-align: center;\n\n    ${children.length === 1\n      ? css`\n          aspect-ratio: 1 / 1;\n        `\n      : css`\n          padding-inline: ${theme.base.spacing};\n        `}\n  `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\n// Replace this with Intl.NumberFormat when roundingMode is supported.\n/* eslint-disable yoda */\nconst getLabel = (val: number): string => {\n  if (val < 1_000) return '';\n  if (1_000 <= val && val < 1_000_000) return 'K';\n  if (1_000_000 <= val && val < 1_000_000_000) return 'M';\n  if (1_000_000_000 <= val && val < 1_000_000_000_000) return 'B';\n  if (1_000_000_000_000 <= val && val < 1_000_000_000_000_000) return 'T';\n  return '';\n};\n/* eslint-enable yoda */\n\nconst truncateValue = (val: number): string => {\n  for (let magnitude = 3; magnitude < 15; magnitude += 3) {\n    if (val < 10 ** (magnitude + 1)) {\n      return `${`${val}`.slice(0, 1)}.${`${val}`.slice(1, 2)}${getLabel(val)}`;\n    }\n    if (val < 10 ** (magnitude + 2)) {\n      return `${`${val}`.slice(0, 2)}${getLabel(val)}`;\n    }\n    if (val < 10 ** (magnitude + 3)) {\n      return `${`${val}`.slice(0, 3)}${getLabel(val)}`;\n    }\n  }\n\n  return '999T+';\n};\n\nconst formatValue = (val: number): string => {\n  const absVal = Math.abs(val);\n\n  if (absVal < 1_000) return `${val}`;\n\n  return `${val < 0 ? '-' : ''}${truncateValue(absVal)}`;\n};\n\nconst Count: FC<ForwardProps & CountProps> = forwardRef(\n  (props: PropsWithoutRef<CountProps>, ref: Ref<HTMLSpanElement>) => {\n    const { variant = 'default', children, ...restProps } = props;\n    return Number.isInteger(children) ? (\n      <StyledCount variant={variant} {...restProps} ref={ref}>\n        {formatValue(children as number)}\n      </StyledCount>\n    ) : null;\n  }\n);\n\nexport default Count;\n"]}
+{"version":3,"file":"Count.js","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, PropsWithoutRef, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { ForwardProps, PropsWithDefaults } from '../../types';\nimport { calculateFontSize } from '../../styles';\n\nexport interface CountProps {\n  /** Determines the color to render the Badge as. This color is derived from the Theme.\n   * @default \"default\"\n   */\n  variant?: 'default' | 'urgent';\n  /** The count to be displayed within the Badge. */\n  children: number | null;\n}\n\ntype CountPropsWithDefaults = PropsWithDefaults<CountProps, 'variant'>;\n\nexport const StyledCount = styled.span<\n  Pick<CountPropsWithDefaults, 'variant'> & { children: string }\n>(({ theme, variant, children }) => {\n  const { foreground, background } = theme.components.badges.count[variant];\n\n  const shadow = tryCatch(() => rgba(foreground, 0.1));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    display: inline-block;\n    block-size: 1rem;\n    border-radius: calc(9999 * ${theme.base['border-radius']});\n    color: ${foreground};\n    background-color: ${background};\n    box-shadow: inset 0 0 0 0.0625rem ${shadow};\n    font-size: ${fontSize.xxs};\n    font-weight: ${theme.base['font-weight'].bold};\n    line-height: normal;\n    text-align: center;\n\n    ${children.length === 1\n      ? css`\n          aspect-ratio: 1 / 1;\n        `\n      : css`\n          padding-inline: ${theme.base.spacing};\n        `}\n  `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\n// Replace this with Intl.NumberFormat when roundingMode is supported.\n/* eslint-disable yoda */\nconst getLabel = (val: number): string => {\n  if (val < 1_000) return '';\n  if (1_000 <= val && val < 1_000_000) return 'K';\n  if (1_000_000 <= val && val < 1_000_000_000) return 'M';\n  if (1_000_000_000 <= val && val < 1_000_000_000_000) return 'B';\n  if (1_000_000_000_000 <= val && val < 1_000_000_000_000_000) return 'T';\n  return '';\n};\n/* eslint-enable yoda */\n\nconst truncateValue = (val: number): string => {\n  for (let magnitude = 3; magnitude < 15; magnitude += 3) {\n    if (val < 10 ** (magnitude + 1)) {\n      return `${`${val}`.slice(0, 1)}.${`${val}`.slice(1, 2)}${getLabel(val)}`;\n    }\n    if (val < 10 ** (magnitude + 2)) {\n      return `${`${val}`.slice(0, 2)}${getLabel(val)}`;\n    }\n    if (val < 10 ** (magnitude + 3)) {\n      return `${`${val}`.slice(0, 3)}${getLabel(val)}`;\n    }\n  }\n\n  return '999T+';\n};\n\nconst formatValue = (val: number): string => {\n  const absVal = Math.abs(val);\n\n  if (absVal < 1_000) return `${val}`;\n\n  return `${val < 0 ? '-' : ''}${truncateValue(absVal)}`;\n};\n\nconst Count: FC<ForwardProps & CountProps> = forwardRef(\n  (props: PropsWithoutRef<CountProps>, ref: Ref<HTMLSpanElement>) => {\n    const { variant = 'default', children, ...restProps } = props;\n    return Number.isInteger(children) ? (\n      <StyledCount variant={variant} {...restProps} ref={ref}>\n        {formatValue(children as number)}\n      </StyledCount>\n    ) : null;\n  }\n);\n\nexport default Count;\n"]}

package/lib/components/Banner/Banner.js

@@ -92,7 +92,7 @@ export const StyledBannerMessage = styled.span(({ theme }) => css `
     }
   `);
 StyledBannerMessage.defaultProps = defaultThemeProp;
-const BannerMessageItem = forwardRef(({ label, description, action, items, ...restProps }, ref) => {
+const BannerMessageItem = forwardRef(({ label, description, action, ...restProps }, ref) => {
     return (_jsxs(StyledBannerMessage, { ...restProps, ref: ref, children: [_jsx("strong", { children: label }), description && (_jsxs(_Fragment, { children: [' ', _jsx("span", { children: description })] })), action && (_jsxs(_Fragment, { children: [' ', _jsx(Button, { variant: 'link', href: action.href, onClick: action.onClick, ...action, children: action.text })] }))] }));
 });
 const prepareMessages = (messages) => {
@@ -101,7 +101,7 @@ const prepareMessages = (messages) => {
         messages.flatMap(msg => {
             count += 1;
             if (typeof msg === 'string') {
-                return [_jsx(BannerMessageItem, { text: msg })];
+                return [_jsx(BannerMessageItem, { label: msg })];
             }
             if (msg.items) {
                 const { items, ...restMsg } = msg;
@@ -149,7 +149,7 @@ const Banner = forwardRef(({ variant, headingTag = 'h2', messages, onDismiss, ..
             ariaLive = 'polite';
             break;
     }
-    return (_jsxs(Grid, { ...restProps, as: StyledBanner, container: { cols: '2rem minmax(0, 1fr)' }, role: role, "aria-live": ariaLive, ref: ref, children: [_jsx(Flex, { as: StyledBannerStatus, container: { justify: 'center', alignItems: 'start', pad: [1.5, 0] }, variant: variant, children: _jsx(Icon, { name: icon }) }), _jsx(_Fragment, { children: count === 1 ? (_jsxs(Flex, { container: { alignItems: 'start' }, as: StyledBannerContent, children: [_jsx(VisuallyHiddenText, { as: headingTag, children: heading }), _jsx(Flex, { item: { alignSelf: 'center', grow: 1 }, as: 'ul', children: typeof messages[0] === 'string' ? (_jsx(BannerMessageItem, { text: messages[0], as: 'li' })) : (_jsx(BannerMessageItem, { ...messages[0], as: 'li' })) }), onDismiss && (_jsx(Button, { onClick: onDismiss, label: t('dismiss'), "aria-label": t('banner_dismiss_button_label_a11y'), variant: 'simple', icon: true, children: _jsx(Icon, { name: 'times' }) }))] })) : (_jsxs(StyledBannerContent, { children: [_jsxs(Flex, { as: StyledBannerHeader, container: { alignItems: 'center', gap: 1 }, children: [_jsx(Button, { onClick: () => {
+    return (_jsxs(Grid, { ...restProps, as: StyledBanner, container: { cols: '2rem minmax(0, 1fr)' }, role: role, "aria-live": ariaLive, ref: ref, children: [_jsx(Flex, { as: StyledBannerStatus, container: { justify: 'center', alignItems: 'start', pad: [1.5, 0] }, variant: variant, children: _jsx(Icon, { name: icon }) }), _jsx(_Fragment, { children: count === 1 ? (_jsxs(Flex, { container: { alignItems: 'start' }, as: StyledBannerContent, children: [_jsx(VisuallyHiddenText, { as: headingTag, children: heading }), _jsx(Flex, { item: { alignSelf: 'center', grow: 1 }, as: 'ul', children: typeof messages[0] === 'string' ? (_jsx(BannerMessageItem, { label: messages[0], as: 'li' })) : (_jsx(BannerMessageItem, { ...messages[0], as: 'li' })) }), onDismiss && (_jsx(Button, { onClick: onDismiss, label: t('dismiss'), "aria-label": t('banner_dismiss_button_label_a11y'), variant: 'simple', icon: true, children: _jsx(Icon, { name: 'times' }) }))] })) : (_jsxs(StyledBannerContent, { children: [_jsxs(Flex, { as: StyledBannerHeader, container: { alignItems: 'center', gap: 1 }, children: [_jsx(Button, { onClick: () => {
                                         setCollapsed(cur => !cur);
                                     }, label: t(collapsed ? 'expand' : 'dismiss'), "aria-expanded": collapsed ? 'false' : 'true', variant: 'simple', icon: true, children: _jsx(Icon, { name: 'caret-right' }) }), _jsxs(Flex, { item: { grow: 1 }, as: Text, forwardedAs: headingTag, variant: 'h2', children: [heading, " ", _jsx(Count, { children: count })] }), onDismiss && (_jsx(Button, { onClick: onDismiss, label: t('dismiss'), "aria-label": t('banner_dismiss_button_label_a11y'), variant: 'simple', icon: true, children: _jsx(Icon, { name: 'times' }) }))] }), _jsx(ExpandCollapse, { collapsed: collapsed, children: _jsx(StyledBannerMessageList, { items: messagesToRender }) })] })) })] }));
 });

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 {\n  useState,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  MouseEventHandler,\n  useMemo,\n  ReactNode\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport Button, { StyledButton } from '../Button';\nimport { tryCatch } from '../../utils';\nimport { useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Grid from '../Grid';\nimport ExpandCollapse from '../ExpandCollapse';\nimport { Count } from '../Badges';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as informationSolidIcon from '../Icon/icons/information-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { UnorderedList } from '../List';\n\nregisterIcon(\n  timesIcon,\n  caretRightIcon,\n  warnSolidIcon,\n  flagWaveSolidIcon,\n  informationSolidIcon,\n  checkIcon\n);\n\nexport interface BannerMessage {\n  label: string;\n  description?: string;\n  action?: {\n    text: string;\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  };\n  items?: (BannerMessage | string)[];\n}\n\nexport interface BannerProps extends BaseProps, NoChildrenProp {\n  /** Controls the styling of the Banner. */\n  variant: 'urgent' | 'warning' | 'success' | 'info';\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 | BannerMessage)[];\n  /** Callback when user explicitly dismisses the Banner. */\n  onDismiss?: MouseEventHandler;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBanner = styled.div(({ theme }) => {\n  return css`\n    border-radius: ${theme.components.card['border-radius']};\n  `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n  const { background } = theme.components.banner[variant];\n  const color = tryCatch(() =>\n    getContrast(background, theme.base.palette['primary-background']) >= 3\n      ? theme.base.palette['primary-background']\n      : readableColor(background)\n  );\n\n  return css`\n    background-color: ${background};\n    color: ${color};\n    border-start-start-radius: inherit;\n    border-end-start-radius: inherit;\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-end: none;\n    font-size: 1.25rem;\n  `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBannerHeader = styled.div(({ theme }) => {\n  const { rtl } = useDirection();\n\n  return css`\n    min-height: 2rem;\n\n    ${StyledButton}[aria-expanded] {\n      ${StyledIcon} {\n        transition: rotate ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n      }\n\n      &[aria-expanded='true'] ${StyledIcon} {\n        rotate: 90deg;\n      }\n\n      &[aria-expanded='false'] ${StyledIcon} {\n        rotate: ${rtl ? 180 : 0}deg;\n      }\n    }\n  `;\n});\n\nStyledBannerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div(({ theme }) => {\n  return css`\n    height: 100%;\n    background: ${theme.components.card.background};\n    padding-block: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(2 * ${theme.base.spacing});\n    padding-inline-end: calc(0.5 * ${theme.base.spacing});\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n    border-start-end-radius: inherit;\n    border-end-end-radius: inherit;\n  `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessageList: typeof UnorderedList = styled(UnorderedList)(\n  ({ theme }) => css`\n    padding-block-end: calc(0.5 * ${theme.base.spacing});\n    padding-inline-end: calc(2 * ${theme.base.spacing});\n  `\n);\n\nStyledBannerMessageList.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.span(\n  ({ theme }) => css`\n    overflow-wrap: break-word;\n    list-style: none;\n\n    > strong {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n    }\n  `\n);\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nconst BannerMessageItem = forwardRef<\n  HTMLLIElement,\n  OmitStrict<BannerMessage, 'items'> & ForwardProps\n>(({ label, description, action, items, ...restProps }, ref) => {\n  return (\n    <StyledBannerMessage {...restProps} ref={ref}>\n      <strong>{label}</strong>\n      {description && (\n        <>\n          {' '}\n          <span>{description}</span>\n        </>\n      )}\n      {action && (\n        <>\n          {' '}\n          <Button variant='link' href={action.href} onClick={action.onClick} {...action}>\n            {action.text}\n          </Button>\n        </>\n      )}\n    </StyledBannerMessage>\n  );\n});\n\nconst prepareMessages = (\n  messages: (string | BannerMessage)[]\n): [messages: ReactNode[], count: number] => {\n  let count = 0;\n\n  return [\n    messages.flatMap(msg => {\n      count += 1;\n\n      if (typeof msg === 'string') {\n        return [<BannerMessageItem text={msg} />];\n      }\n\n      if (msg.items) {\n        const { items, ...restMsg } = msg;\n        const [subMessages, subCount] = prepareMessages(items);\n        count += subCount;\n        return [<BannerMessageItem {...restMsg} />, subMessages];\n      }\n\n      return [<BannerMessageItem {...msg} />];\n    }),\n    count\n  ];\n};\n\nconst Banner: FunctionComponent<BannerProps & ForwardProps> = forwardRef(\n  (\n    { variant, headingTag = 'h2', messages, onDismiss, ...restProps }: PropsWithoutRef<BannerProps>,\n    ref: BannerProps['ref']\n  ) => {\n    const [messagesToRender, count] = useMemo(() => prepareMessages(messages), [messages]);\n\n    const t = useI18n();\n    const [collapsed, setCollapsed] = useState(count > 2);\n\n    let role: string;\n    let icon: string;\n    let heading: string;\n    let ariaLive: string;\n\n    switch (variant) {\n      case 'urgent':\n        heading = t('error');\n        icon = 'warn-solid';\n        role = 'alert';\n        ariaLive = 'assertive';\n        break;\n      case 'warning':\n        heading = t('warning');\n        icon = 'flag-wave-solid';\n        role = 'alert';\n        ariaLive = 'assertive';\n        break;\n      case 'success':\n        heading = t('success');\n        icon = 'check';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n      case 'info':\n      default:\n        heading = t('information');\n        icon = 'information-solid';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n    }\n\n    return (\n      <Grid\n        {...restProps}\n        as={StyledBanner}\n        container={{ cols: '2rem minmax(0, 1fr)' }}\n        role={role}\n        aria-live={ariaLive}\n        ref={ref}\n      >\n        <Flex\n          as={StyledBannerStatus}\n          container={{ justify: 'center', alignItems: 'start', pad: [1.5, 0] }}\n          variant={variant}\n        >\n          <Icon name={icon} />\n        </Flex>\n        <>\n          {count === 1 ? (\n            <Flex container={{ alignItems: 'start' }} as={StyledBannerContent}>\n              <VisuallyHiddenText as={headingTag}>{heading}</VisuallyHiddenText>\n              <Flex item={{ alignSelf: 'center', grow: 1 }} as='ul'>\n                {typeof messages[0] === 'string' ? (\n                  <BannerMessageItem text={messages[0]} as='li' />\n                ) : (\n                  <BannerMessageItem {...messages[0]} as='li' />\n                )}\n              </Flex>\n              {onDismiss && (\n                <Button\n                  onClick={onDismiss}\n                  label={t('dismiss')}\n                  aria-label={t('banner_dismiss_button_label_a11y')}\n                  variant='simple'\n                  icon\n                >\n                  <Icon name='times' />\n                </Button>\n              )}\n            </Flex>\n          ) : (\n            <StyledBannerContent>\n              <Flex as={StyledBannerHeader} container={{ alignItems: 'center', gap: 1 }}>\n                <Button\n                  onClick={() => {\n                    setCollapsed(cur => !cur);\n                  }}\n                  label={t(collapsed ? 'expand' : 'dismiss')}\n                  aria-expanded={collapsed ? 'false' : 'true'}\n                  variant='simple'\n                  icon\n                >\n                  <Icon name='caret-right' />\n                </Button>\n                <Flex item={{ grow: 1 }} as={Text} forwardedAs={headingTag} variant='h2'>\n                  {heading} <Count>{count}</Count>\n                </Flex>\n                {onDismiss && (\n                  <Button\n                    onClick={onDismiss}\n                    label={t('dismiss')}\n                    aria-label={t('banner_dismiss_button_label_a11y')}\n                    variant='simple'\n                    icon\n                  >\n                    <Icon name='times' />\n                  </Button>\n                )}\n              </Flex>\n              <ExpandCollapse collapsed={collapsed}>\n                <StyledBannerMessageList items={messagesToRender} />\n              </ExpandCollapse>\n            </StyledBannerContent>\n          )}\n        </>\n      </Grid>\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 {\n  useState,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  MouseEventHandler,\n  useMemo,\n  ReactNode\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport Button, { StyledButton } from '../Button';\nimport { tryCatch } from '../../utils';\nimport { useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Grid from '../Grid';\nimport ExpandCollapse from '../ExpandCollapse';\nimport { Count } from '../Badges';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as informationSolidIcon from '../Icon/icons/information-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { UnorderedList } from '../List';\n\nregisterIcon(\n  timesIcon,\n  caretRightIcon,\n  warnSolidIcon,\n  flagWaveSolidIcon,\n  informationSolidIcon,\n  checkIcon\n);\n\nexport interface BannerMessage {\n  label: string;\n  description?: string;\n  action?: {\n    text: string;\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  };\n  items?: (BannerMessage | string)[];\n}\n\nexport interface BannerProps extends BaseProps, NoChildrenProp {\n  /** Controls the styling of the Banner. */\n  variant: 'urgent' | 'warning' | 'success' | 'info';\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 | BannerMessage)[];\n  /** Callback when user explicitly dismisses the Banner. */\n  onDismiss?: MouseEventHandler;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBanner = styled.div(({ theme }) => {\n  return css`\n    border-radius: ${theme.components.card['border-radius']};\n  `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n  const { background } = theme.components.banner[variant];\n  const color = tryCatch(() =>\n    getContrast(background, theme.base.palette['primary-background']) >= 3\n      ? theme.base.palette['primary-background']\n      : readableColor(background)\n  );\n\n  return css`\n    background-color: ${background};\n    color: ${color};\n    border-start-start-radius: inherit;\n    border-end-start-radius: inherit;\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-end: none;\n    font-size: 1.25rem;\n  `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBannerHeader = styled.div(({ theme }) => {\n  const { rtl } = useDirection();\n\n  return css`\n    min-height: 2rem;\n\n    ${StyledButton}[aria-expanded] {\n      ${StyledIcon} {\n        transition: rotate ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n      }\n\n      &[aria-expanded='true'] ${StyledIcon} {\n        rotate: 90deg;\n      }\n\n      &[aria-expanded='false'] ${StyledIcon} {\n        rotate: ${rtl ? 180 : 0}deg;\n      }\n    }\n  `;\n});\n\nStyledBannerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div(({ theme }) => {\n  return css`\n    height: 100%;\n    background: ${theme.components.card.background};\n    padding-block: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(2 * ${theme.base.spacing});\n    padding-inline-end: calc(0.5 * ${theme.base.spacing});\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n    border-start-end-radius: inherit;\n    border-end-end-radius: inherit;\n  `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessageList: typeof UnorderedList = styled(UnorderedList)(\n  ({ theme }) => css`\n    padding-block-end: calc(0.5 * ${theme.base.spacing});\n    padding-inline-end: calc(2 * ${theme.base.spacing});\n  `\n);\n\nStyledBannerMessageList.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.span(\n  ({ theme }) => css`\n    overflow-wrap: break-word;\n    list-style: none;\n\n    > strong {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n    }\n  `\n);\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nconst BannerMessageItem = forwardRef<\n  HTMLLIElement,\n  OmitStrict<BannerMessage, 'items'> & ForwardProps\n>(({ label, description, action, ...restProps }, ref) => {\n  return (\n    <StyledBannerMessage {...restProps} ref={ref}>\n      <strong>{label}</strong>\n      {description && (\n        <>\n          {' '}\n          <span>{description}</span>\n        </>\n      )}\n      {action && (\n        <>\n          {' '}\n          <Button variant='link' href={action.href} onClick={action.onClick} {...action}>\n            {action.text}\n          </Button>\n        </>\n      )}\n    </StyledBannerMessage>\n  );\n});\n\nconst prepareMessages = (\n  messages: (string | BannerMessage)[]\n): [messages: ReactNode[], count: number] => {\n  let count = 0;\n\n  return [\n    messages.flatMap(msg => {\n      count += 1;\n\n      if (typeof msg === 'string') {\n        return [<BannerMessageItem label={msg} />];\n      }\n\n      if (msg.items) {\n        const { items, ...restMsg } = msg;\n        const [subMessages, subCount] = prepareMessages(items);\n        count += subCount;\n        return [<BannerMessageItem {...restMsg} />, subMessages];\n      }\n\n      return [<BannerMessageItem {...msg} />];\n    }),\n    count\n  ];\n};\n\nconst Banner: FunctionComponent<BannerProps & ForwardProps> = forwardRef(\n  (\n    { variant, headingTag = 'h2', messages, onDismiss, ...restProps }: PropsWithoutRef<BannerProps>,\n    ref: BannerProps['ref']\n  ) => {\n    const [messagesToRender, count] = useMemo(() => prepareMessages(messages), [messages]);\n\n    const t = useI18n();\n    const [collapsed, setCollapsed] = useState(count > 2);\n\n    let role: string;\n    let icon: string;\n    let heading: string;\n    let ariaLive: string;\n\n    switch (variant) {\n      case 'urgent':\n        heading = t('error');\n        icon = 'warn-solid';\n        role = 'alert';\n        ariaLive = 'assertive';\n        break;\n      case 'warning':\n        heading = t('warning');\n        icon = 'flag-wave-solid';\n        role = 'alert';\n        ariaLive = 'assertive';\n        break;\n      case 'success':\n        heading = t('success');\n        icon = 'check';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n      case 'info':\n      default:\n        heading = t('information');\n        icon = 'information-solid';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n    }\n\n    return (\n      <Grid\n        {...restProps}\n        as={StyledBanner}\n        container={{ cols: '2rem minmax(0, 1fr)' }}\n        role={role}\n        aria-live={ariaLive}\n        ref={ref}\n      >\n        <Flex\n          as={StyledBannerStatus}\n          container={{ justify: 'center', alignItems: 'start', pad: [1.5, 0] }}\n          variant={variant}\n        >\n          <Icon name={icon} />\n        </Flex>\n        <>\n          {count === 1 ? (\n            <Flex container={{ alignItems: 'start' }} as={StyledBannerContent}>\n              <VisuallyHiddenText as={headingTag}>{heading}</VisuallyHiddenText>\n              <Flex item={{ alignSelf: 'center', grow: 1 }} as='ul'>\n                {typeof messages[0] === 'string' ? (\n                  <BannerMessageItem label={messages[0]} as='li' />\n                ) : (\n                  <BannerMessageItem {...messages[0]} as='li' />\n                )}\n              </Flex>\n              {onDismiss && (\n                <Button\n                  onClick={onDismiss}\n                  label={t('dismiss')}\n                  aria-label={t('banner_dismiss_button_label_a11y')}\n                  variant='simple'\n                  icon\n                >\n                  <Icon name='times' />\n                </Button>\n              )}\n            </Flex>\n          ) : (\n            <StyledBannerContent>\n              <Flex as={StyledBannerHeader} container={{ alignItems: 'center', gap: 1 }}>\n                <Button\n                  onClick={() => {\n                    setCollapsed(cur => !cur);\n                  }}\n                  label={t(collapsed ? 'expand' : 'dismiss')}\n                  aria-expanded={collapsed ? 'false' : 'true'}\n                  variant='simple'\n                  icon\n                >\n                  <Icon name='caret-right' />\n                </Button>\n                <Flex item={{ grow: 1 }} as={Text} forwardedAs={headingTag} variant='h2'>\n                  {heading} <Count>{count}</Count>\n                </Flex>\n                {onDismiss && (\n                  <Button\n                    onClick={onDismiss}\n                    label={t('dismiss')}\n                    aria-label={t('banner_dismiss_button_label_a11y')}\n                    variant='simple'\n                    icon\n                  >\n                    <Icon name='times' />\n                  </Button>\n                )}\n              </Flex>\n              <ExpandCollapse collapsed={collapsed}>\n                <StyledBannerMessageList items={messagesToRender} />\n              </ExpandCollapse>\n            </StyledBannerContent>\n          )}\n        </>\n      </Grid>\n    );\n  }\n);\n\nexport default Banner;\n"]}

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

@@ -1,32 +1,5 @@
-import { FunctionComponent, Ref, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
-import { BaseProps, ForwardProps } from '../../types';
-import { PopoverProps } from '../Popover';
-export interface DialogProps extends BaseProps {
-    target: HTMLElement | null;
-    placement?: PopoverProps['placement'];
-    children: PopoverProps['children'];
-    heading: string;
-    headingHidden?: boolean;
-    onSubmit?: (arg: {
-        close: () => void;
-    }) => void;
-    onClose?: () => void;
-    onOpen?: () => void;
-    loading?: boolean;
-    ref?: Ref<HTMLDivElement>;
-}
-export declare const StyledDialog: import("styled-components").StyledComponent<"dialog", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDialogTitle: import("styled-components").StyledComponent<FunctionComponent<import("../Text").TextProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const useDialog: () => {
-    target: HTMLElement | null;
-    loading: boolean;
-    setLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    events: {
-        onMouseDown: (e: ReactMouseEvent) => void;
-        onKeyDown: (e: ReactKeyboardEvent) => void;
-    };
-    setTargetWithEvent: (e: ReactMouseEvent | ReactKeyboardEvent) => void;
-};
-declare const Dialog: FunctionComponent<DialogProps & ForwardProps>;
+import { FC, HTMLAttributes } from 'react';
+import { DialogProps } from './Dialog.types';
+declare const Dialog: FC<DialogProps & HTMLAttributes<HTMLDivElement>>;
 export default Dialog;
 //# sourceMappingURL=Dialog.d.ts.map

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

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

package/lib/components/Dialog/Dialog.js

@@ -1,150 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { useConsolidatedRef, useElement, useEscape, useFocusTrap, useI18n, useOuterEvent, usePrevious, useUID } from '../../hooks';
-import { defaultThemeProp } from '../../theme';
-import { getFocusables } from '../../utils';
-import Button from '../Button';
-import { CardContent, CardFooter, CardHeader } from '../Card';
-import Icon from '../Icon';
-import Popover from '../Popover';
-import Progress from '../Progress';
-import Text from '../Text';
-import VisuallyHiddenText from '../VisuallyHiddenText';
-export const StyledDialog = styled.dialog(({ theme: { base: { 'content-width': contentWidth, palette: { 'foreground-color': foregroundColor } } } }) => {
-    return css `
-      border: none;
-      min-width: ${contentWidth.sm};
-      max-width: ${contentWidth.lg};
-      color: ${foregroundColor};
-    `;
-});
-StyledDialog.defaultProps = defaultThemeProp;
-export const StyledDialogTitle = styled(Text)(({ theme: { base: { shadow, 'border-radius': borderRadius } } }) => {
-    return css `
-      position: relative;
-      ::after {
-        content: '';
-        border-radius: ${borderRadius};
-        position: absolute;
-        inset: -0.25rem;
-      }
-      :focus-visible {
-        outline: none;
-        ::after {
-          box-shadow: ${shadow.focus}, inset ${shadow['focus-solid']};
-        }
-      }
-    `;
-});
-StyledDialogTitle.defaultProps = defaultThemeProp;
-export const useDialog = () => {
-    const [target, setTarget] = useState(null);
-    const [loading, setLoading] = useState(false);
-    const setTargetWithEvent = (e) => {
-        if (e.target instanceof HTMLElement) {
-            setTarget(e.target);
-        }
-    };
-    return {
-        target,
-        loading,
-        setLoading,
-        events: {
-            onMouseDown: (e) => {
-                setTargetWithEvent(e);
-            },
-            onKeyDown: (e) => {
-                if (e.key === 'Enter') {
-                    setTargetWithEvent(e);
-                }
-            }
-        },
-        setTargetWithEvent
-    };
-};
-const Dialog = forwardRef(({ target, placement, heading, headingHidden = false, onSubmit, onClose, onOpen, loading, children, ...restProps }, ref) => {
-    const t = useI18n();
-    const headingId = useUID();
-    const [popoverEl, setPopoverEl] = useElement();
-    const popoverRef = useConsolidatedRef(ref, setPopoverEl);
-    const headingRef = useRef(null);
-    const [currentTarget, setCurrentTarget] = useState(() => target);
-    const [show, setShow] = useState(false);
-    const skipChangeShow = useRef(false);
-    const prevTarget = usePrevious(target);
-    useEscape(() => {
-        if (show) {
-            setShow(false);
-        }
-    }, undefined, [show, setShow]);
-    useOuterEvent('mousedown', [target, popoverEl], () => {
-        if (target && popoverEl && show) {
-            setShow(false);
-            onClose?.();
-        }
-    });
-    useFocusTrap(popoverRef);
-    useEffect(() => {
-        if (!show) {
-            currentTarget?.focus();
-        }
-    }, [show]);
-    useEffect(() => {
-        if (show && popoverEl) {
-            if (headingRef.current) {
-                headingRef.current.focus();
-            }
-            else {
-                const focusables = getFocusables(popoverRef);
-                focusables[0]?.focus();
-            }
-        }
-    }, [show, popoverEl]);
-    useLayoutEffect(() => {
-        const onTargetClick = (e) => {
-            setCurrentTarget(prev => (e.target ? e.target : prev));
-            if (!skipChangeShow.current) {
-                setShow(prev => !prev);
-            }
-            else {
-                skipChangeShow.current = false;
-            }
-        };
-        if (target instanceof HTMLElement) {
-            target.addEventListener('click', onTargetClick);
-        }
-        return () => {
-            if (target instanceof HTMLElement) {
-                target.removeEventListener('click', onTargetClick);
-            }
-        };
-    }, [target]);
-    useEffect(() => {
-        if (show) {
-            onOpen?.();
-        }
-        else {
-            onClose?.();
-        }
-    }, [show]);
-    useEffect(() => {
-        /* If our target is changing and the popover is already open we will want
-        to skip the next change. The next show change would come from a click on the new button,
-        the popover should stay open. */
-        if (target !== prevTarget && show) {
-            skipChangeShow.current = true;
-        }
-    }, [target, show]);
-    const onTitleKeyDown = (e) => {
-        const focusables = getFocusables(popoverRef);
-        if (e.shiftKey && e.key === 'Tab') {
-            e.preventDefault();
-            focusables[focusables.length - 1].focus();
-        }
-    };
-    const progress = loading ? _jsx(Progress, { placement: 'local' }) : null;
-    return (_jsxs(Popover, { ...restProps, as: StyledDialog, ref: popoverRef, target: currentTarget, placement: placement, show: show, open: show, "aria-labelledby": headingId, children: [_jsx(CardHeader, { actions: !onSubmit ? (_jsx(Button, { icon: true, variant: 'simple', onClick: () => setShow(false), "aria-label": t('close'), children: _jsx(Icon, { name: 'times' }) })) : undefined, children: headingHidden ? (_jsx(VisuallyHiddenText, { id: headingId, children: heading })) : (_jsx(StyledDialogTitle, { variant: 'h2', tabIndex: -1, ref: headingRef, onKeyDown: onTitleKeyDown, id: headingId, children: heading })) }), _jsxs(CardContent, { children: [children, progress] }), onSubmit && (_jsxs(CardFooter, { justify: 'between', children: [_jsx(Button, { variant: 'secondary', onClick: () => setShow(false), children: t('cancel') }), _jsx(Button, { variant: 'primary', onClick: () => onSubmit({ close: () => setShow(false) }), disabled: loading, children: t('submit') })] }))] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useConsolidatedRef } from '../../hooks';
+import { StyledDialog } from './Dialog.styles';
+const Dialog = forwardRef(({ target, labelledbyId, portal, strategy, placement, children, progress, ...restProps }, ref) => {
+    const dialogRef = useConsolidatedRef(ref);
+    return (_jsx(StyledDialog, { ...restProps, role: 'dialog', "aria-modal": 'false', "aria-labelledby": labelledbyId, "aria-busy": progress ? 'true' : 'false', ref: dialogRef, target: target, portal: portal, strategy: strategy, placement: placement, arrow: true, children: children }));
 });
 export default Dialog;
 //# sourceMappingURL=Dialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  MouseEvent as ReactMouseEvent,\n  KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  usePrevious,\n  useUID\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { getFocusables } from '../../utils';\nimport Button from '../Button';\nimport { CardContent, CardFooter, CardHeader } from '../Card';\nimport Icon from '../Icon';\nimport Popover, { PopoverProps } from '../Popover';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface DialogProps extends BaseProps {\n  target: HTMLElement | null;\n  placement?: PopoverProps['placement'];\n  children: PopoverProps['children'];\n  heading: string;\n  headingHidden?: boolean;\n  onSubmit?: (arg: { close: () => void }) => void;\n  onClose?: () => void;\n  onOpen?: () => void;\n  loading?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledDialog = styled.dialog(\n  ({\n    theme: {\n      base: {\n        'content-width': contentWidth,\n        palette: { 'foreground-color': foregroundColor }\n      }\n    }\n  }) => {\n    return css`\n      border: none;\n      min-width: ${contentWidth.sm};\n      max-width: ${contentWidth.lg};\n      color: ${foregroundColor};\n    `;\n  }\n);\n\nStyledDialog.defaultProps = defaultThemeProp;\n\nexport const StyledDialogTitle = styled(Text)(\n  ({\n    theme: {\n      base: { shadow, 'border-radius': borderRadius }\n    }\n  }) => {\n    return css`\n      position: relative;\n      ::after {\n        content: '';\n        border-radius: ${borderRadius};\n        position: absolute;\n        inset: -0.25rem;\n      }\n      :focus-visible {\n        outline: none;\n        ::after {\n          box-shadow: ${shadow.focus}, inset ${shadow['focus-solid']};\n        }\n      }\n    `;\n  }\n);\n\nStyledDialogTitle.defaultProps = defaultThemeProp;\n\nexport const useDialog = () => {\n  const [target, setTarget] = useState<HTMLElement | null>(null);\n  const [loading, setLoading] = useState(false);\n\n  const setTargetWithEvent = (e: ReactMouseEvent | ReactKeyboardEvent) => {\n    if (e.target instanceof HTMLElement) {\n      setTarget(e.target);\n    }\n  };\n\n  return {\n    target,\n    loading,\n    setLoading,\n    events: {\n      onMouseDown: (e: ReactMouseEvent) => {\n        setTargetWithEvent(e);\n      },\n      onKeyDown: (e: ReactKeyboardEvent) => {\n        if (e.key === 'Enter') {\n          setTargetWithEvent(e);\n        }\n      }\n    },\n    setTargetWithEvent\n  };\n};\n\nconst Dialog: FunctionComponent<DialogProps & ForwardProps> = forwardRef(\n  (\n    {\n      target,\n      placement,\n      heading,\n      headingHidden = false,\n      onSubmit,\n      onClose,\n      onOpen,\n      loading,\n      children,\n      ...restProps\n    }: PropsWithoutRef<DialogProps>,\n    ref: DialogProps['ref']\n  ) => {\n    const t = useI18n();\n    const headingId = useUID();\n    const [popoverEl, setPopoverEl] = useElement<HTMLDivElement>();\n    const popoverRef = useConsolidatedRef(ref, setPopoverEl);\n    const headingRef = useRef<HTMLSpanElement>(null);\n    const [currentTarget, setCurrentTarget] = useState(() => target);\n    const [show, setShow] = useState(false);\n    const skipChangeShow = useRef(false);\n    const prevTarget = usePrevious(target);\n    useEscape(\n      () => {\n        if (show) {\n          setShow(false);\n        }\n      },\n      undefined,\n      [show, setShow]\n    );\n    useOuterEvent('mousedown', [target, popoverEl], () => {\n      if (target && popoverEl && show) {\n        setShow(false);\n        onClose?.();\n      }\n    });\n    useFocusTrap(popoverRef);\n\n    useEffect(() => {\n      if (!show) {\n        currentTarget?.focus();\n      }\n    }, [show]);\n\n    useEffect(() => {\n      if (show && popoverEl) {\n        if (headingRef.current) {\n          headingRef.current.focus();\n        } else {\n          const focusables = getFocusables(popoverRef);\n          focusables[0]?.focus();\n        }\n      }\n    }, [show, popoverEl]);\n\n    useLayoutEffect(() => {\n      const onTargetClick = (e: MouseEvent) => {\n        setCurrentTarget(prev => (e.target ? (e.target as HTMLElement) : prev));\n        if (!skipChangeShow.current) {\n          setShow(prev => !prev);\n        } else {\n          skipChangeShow.current = false;\n        }\n      };\n      if (target instanceof HTMLElement) {\n        target.addEventListener('click', onTargetClick);\n      }\n      return () => {\n        if (target instanceof HTMLElement) {\n          target.removeEventListener('click', onTargetClick);\n        }\n      };\n    }, [target]);\n\n    useEffect(() => {\n      if (show) {\n        onOpen?.();\n      } else {\n        onClose?.();\n      }\n    }, [show]);\n\n    useEffect(() => {\n      /* If our target is changing and the popover is already open we will want\n      to skip the next change. The next show change would come from a click on the new button,\n      the popover should stay open. */\n      if (target !== prevTarget && show) {\n        skipChangeShow.current = true;\n      }\n    }, [target, show]);\n\n    const onTitleKeyDown = (e: ReactKeyboardEvent) => {\n      const focusables = getFocusables(popoverRef);\n      if (e.shiftKey && e.key === 'Tab') {\n        e.preventDefault();\n        focusables[focusables.length - 1].focus();\n      }\n    };\n\n    const progress = loading ? <Progress placement='local' /> : null;\n\n    return (\n      <Popover\n        {...restProps}\n        as={StyledDialog}\n        ref={popoverRef}\n        target={currentTarget}\n        placement={placement}\n        show={show}\n        open={show}\n        aria-labelledby={headingId}\n      >\n        <CardHeader\n          actions={\n            !onSubmit ? (\n              <Button icon variant='simple' onClick={() => setShow(false)} aria-label={t('close')}>\n                <Icon name='times' />\n              </Button>\n            ) : undefined\n          }\n        >\n          {headingHidden ? (\n            <VisuallyHiddenText id={headingId}>{heading}</VisuallyHiddenText>\n          ) : (\n            <StyledDialogTitle\n              variant='h2'\n              tabIndex={-1}\n              ref={headingRef}\n              onKeyDown={onTitleKeyDown}\n              id={headingId}\n            >\n              {heading}\n            </StyledDialogTitle>\n          )}\n        </CardHeader>\n        <CardContent>\n          {children}\n          {progress}\n        </CardContent>\n        {onSubmit && (\n          <CardFooter justify='between'>\n            <Button variant='secondary' onClick={() => setShow(false)}>\n              {t('cancel')}\n            </Button>\n            <Button\n              variant='primary'\n              onClick={() => onSubmit({ close: () => setShow(false) })}\n              disabled={loading}\n            >\n              {t('submit')}\n            </Button>\n          </CardFooter>\n        )}\n      </Popover>\n    );\n  }\n);\n\nexport default Dialog;\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuC,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG/C,MAAM,MAAM,GAAqD,UAAU,CACzE,CACE,EACE,MAAM,EACN,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACiB,EAC/B,GAAuB,EACvB,EAAE;IACF,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,YAAY,OACP,SAAS,EACb,IAAI,EAAC,QAAQ,gBACF,OAAO,qBACD,YAAY,eAClB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACtC,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,KAAK,kBAEJ,QAAQ,GACI,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, HTMLAttributes } from 'react';\n\nimport { useConsolidatedRef } from '../../hooks';\n\nimport { StyledDialog } from './Dialog.styles';\nimport { DialogProps } from './Dialog.types';\n\nconst Dialog: FC<DialogProps & HTMLAttributes<HTMLDivElement>> = forwardRef(\n  (\n    {\n      target,\n      labelledbyId,\n      portal,\n      strategy,\n      placement,\n      children,\n      progress,\n      ...restProps\n    }: PropsWithoutRef<DialogProps>,\n    ref: DialogProps['ref']\n  ) => {\n    const dialogRef = useConsolidatedRef(ref);\n\n    return (\n      <StyledDialog\n        {...restProps}\n        role='dialog'\n        aria-modal='false'\n        aria-labelledby={labelledbyId}\n        aria-busy={progress ? 'true' : 'false'}\n        ref={dialogRef}\n        target={target}\n        portal={portal}\n        strategy={strategy}\n        placement={placement}\n        arrow\n      >\n        {children}\n      </StyledDialog>\n    );\n  }\n);\n\nexport default Dialog;\n"]}