@pega/cosmos-react-core 4.0.0-dev.1.1 → 4.0.0-dev.10.0

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, { registerIcon, StyledIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { useConsolidatedRef, useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\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  /** The content of the Badge. */\n  children: 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  /** 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.button(\n  ({\n    theme: {\n      base: { spacing, palette, 'border-radius': borderRadius },\n      components: {\n        badges: { selectable }\n      }\n    }\n  }) => {\n    const { foreground, background } = selectable.base;\n    const { dark, 'primary-background': primaryBackground, interactive } = palette;\n\n    const displayBackground = tryCatch(() => mix(0.15, background, primaryBackground));\n    const hoverBorder = tryCatch(() => mix(0.3, background, primaryBackground));\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: ${interactive};\n        box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n\n        ${StyledBareButton} {\n          color: ${interactive};\n        }\n      }\n\n      &:active {\n        box-shadow: inset 0 0 0 0.0625rem ${background};\n      }\n\n      &:focus {\n        color: ${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: ${interactive};\n        }\n      }\n\n      ${StyledIcon} {\n        margin-inline-start: ${spacing};\n        height: 1em;\n        width: 1em;\n      }\n    `;\n  }\n);\n\nStyledSelectable.defaultProps = defaultThemeProp;\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(\n  (\n    {\n      id,\n      children,\n      onSelect,\n      onRemove,\n      onClick,\n      onKeyUp,\n      ...restProps\n    }: PropsWithoutRef<SelectableProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const consolidatedRef = useConsolidatedRef(ref);\n    const t = useI18n();\n\n    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\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      <StyledSelectable\n        ref={consolidatedRef}\n        onClick={handleClick}\n        onKeyUp={handleKeyUp}\n        {...restProps}\n      >\n        {children}\n        {onRemove && (\n          <BareButton tabIndex='-1' onClick={handleCloseClick} aria-label={`${t('remove')}`}>\n            <Icon name='times' />\n          </BareButton>\n        )}\n      </StyledSelectable>\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';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { useConsolidatedRef, useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\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  /** The content of the Badge. */\n  children: 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  /** 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.button(\n  ({\n    theme: {\n      base: { spacing, palette, 'border-radius': borderRadius },\n      components: {\n        badges: { selectable }\n      }\n    }\n  }) => {\n    const { foreground, background } = selectable.base;\n    const { dark, 'primary-background': primaryBackground, interactive } = palette;\n\n    const displayBackground = tryCatch(() => mix(0.15, background, primaryBackground));\n    const hoverBorder = tryCatch(() => mix(0.3, background, primaryBackground));\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: ${interactive};\n        box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n\n        ${StyledBareButton} {\n          color: ${interactive};\n        }\n      }\n\n      &:active {\n        box-shadow: inset 0 0 0 0.0625rem ${background};\n      }\n\n      &:focus {\n        color: ${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: ${interactive};\n        }\n      }\n\n      ${StyledIcon} {\n        margin-inline-start: ${spacing};\n        height: 1em;\n        width: 1em;\n      }\n    `;\n  }\n);\n\nStyledSelectable.defaultProps = defaultThemeProp;\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(\n  (\n    {\n      id,\n      children,\n      onSelect,\n      onRemove,\n      onClick,\n      onKeyUp,\n      ...restProps\n    }: PropsWithoutRef<SelectableProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const consolidatedRef = useConsolidatedRef(ref);\n    const t = useI18n();\n\n    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\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      <StyledSelectable\n        ref={consolidatedRef}\n        onClick={handleClick}\n        onKeyUp={handleKeyUp}\n        {...restProps}\n      >\n        {children}\n        {onRemove && (\n          <BareButton tabIndex='-1' onClick={handleCloseClick} aria-label={`${t('remove')}`}>\n            <Icon name='times' />\n          </BareButton>\n        )}\n      </StyledSelectable>\n    );\n  }\n);\n\nexport default Selectable;\n"]}

package/lib/components/Badges/Tag.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { mix } from 'polished';
 import { defaultThemeProp } from '../../theme';
-import { tryCatch } from '../../utils/utils';
+import { tryCatch } from '../../utils';
 import BareButton from '../Button/BareButton';
 export const StyledTag = styled.span(props => {
     const borderRadius = props.theme.base['border-radius'];

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Badges/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAA2C,MAAM,OAAO,CAAC;AAChF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAa9C,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;IAC3C,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC;IAErE,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,UAAU,CAAC,CACtE,CAAC;IACF,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IAEhD,OAAO,GAAG,CAAA;8BACkB,WAAW;iCACR,YAAY;aAChC,UAAU;;;iBAGN,OAAO;;;sBAGF,UAAU;;;;sBAIV,UAAU;oBACZ,SAAS;;;;;gCAKG,WAAW;;;GAGxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,GAAG,GAAgC,UAAU,CACjD,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAA6B,EAAE,GAAoB,EAAE,EAAE;IAC7F,OAAO,CACL,KAAC,SAAS,OACJ,SAAS,EACb,EAAE,EAAE,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC5C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,YAEP,QAAQ,GACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import { FC, forwardRef, Ref, PropsWithoutRef, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/utils';\nimport { BaseProps, ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\n\nexport interface TagProps extends BaseProps {\n  /** The content of the Badge. */\n  children: string;\n  /** A location to navigate to. Passing an href will render an anchor styled as a Tag. */\n  href?: string;\n  /** Click handler for the badge. Passing an onClick function will render a button styled as a Tag. */\n  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLSpanElement | HTMLAnchorElement | HTMLButtonElement>;\n}\n\nexport const StyledTag = styled.span(props => {\n  const borderRadius = props.theme.base['border-radius'];\n  const { spacing } = props.theme.base;\n  const { foreground, background } = props.theme.components.badges.tag;\n\n  const borderColor = tryCatch(() =>\n    mix(0.85, props.theme.base.palette['primary-background'], background)\n  );\n  const boxShadow = props.theme.base.shadow.focus;\n\n  return css`\n    border: 0.0625rem solid ${borderColor};\n    border-radius: calc(0.25 * ${borderRadius});\n    color: ${foreground};\n    display: inline-block;\n    font-size: 0.75rem;\n    padding: 0 ${spacing};\n\n    &:hover {\n      border-color: ${background};\n    }\n\n    &:focus {\n      border-color: ${background};\n      box-shadow: ${boxShadow};\n      outline: none;\n    }\n\n    &:active {\n      border: 0.0625rem solid ${borderColor};\n      box-shadow: none;\n    }\n  `;\n});\n\nStyledTag.defaultProps = defaultThemeProp;\n\nconst Tag: FC<TagProps & ForwardProps> = forwardRef(\n  ({ children, href, onClick, ...restProps }: PropsWithoutRef<TagProps>, ref: TagProps['ref']) => {\n    return (\n      <StyledTag\n        {...restProps}\n        as={onClick || href ? BareButton : undefined}\n        href={href}\n        onClick={onClick}\n        ref={ref}\n      >\n        {children}\n      </StyledTag>\n    );\n  }\n);\n\nexport default Tag;\n"]}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Badges/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAA2C,MAAM,OAAO,CAAC;AAChF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAa9C,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;IAC3C,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC;IAErE,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,UAAU,CAAC,CACtE,CAAC;IACF,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IAEhD,OAAO,GAAG,CAAA;8BACkB,WAAW;iCACR,YAAY;aAChC,UAAU;;;iBAGN,OAAO;;;sBAGF,UAAU;;;;sBAIV,UAAU;oBACZ,SAAS;;;;;gCAKG,WAAW;;;GAGxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,GAAG,GAAgC,UAAU,CACjD,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAA6B,EAAE,GAAoB,EAAE,EAAE;IAC7F,OAAO,CACL,KAAC,SAAS,OACJ,SAAS,EACb,EAAE,EAAE,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC5C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,YAEP,QAAQ,GACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import { FC, forwardRef, Ref, PropsWithoutRef, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { BaseProps, ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\n\nexport interface TagProps extends BaseProps {\n  /** The content of the Badge. */\n  children: string;\n  /** A location to navigate to. Passing an href will render an anchor styled as a Tag. */\n  href?: string;\n  /** Click handler for the badge. Passing an onClick function will render a button styled as a Tag. */\n  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLSpanElement | HTMLAnchorElement | HTMLButtonElement>;\n}\n\nexport const StyledTag = styled.span(props => {\n  const borderRadius = props.theme.base['border-radius'];\n  const { spacing } = props.theme.base;\n  const { foreground, background } = props.theme.components.badges.tag;\n\n  const borderColor = tryCatch(() =>\n    mix(0.85, props.theme.base.palette['primary-background'], background)\n  );\n  const boxShadow = props.theme.base.shadow.focus;\n\n  return css`\n    border: 0.0625rem solid ${borderColor};\n    border-radius: calc(0.25 * ${borderRadius});\n    color: ${foreground};\n    display: inline-block;\n    font-size: 0.75rem;\n    padding: 0 ${spacing};\n\n    &:hover {\n      border-color: ${background};\n    }\n\n    &:focus {\n      border-color: ${background};\n      box-shadow: ${boxShadow};\n      outline: none;\n    }\n\n    &:active {\n      border: 0.0625rem solid ${borderColor};\n      box-shadow: none;\n    }\n  `;\n});\n\nStyledTag.defaultProps = defaultThemeProp;\n\nconst Tag: FC<TagProps & ForwardProps> = forwardRef(\n  ({ children, href, onClick, ...restProps }: PropsWithoutRef<TagProps>, ref: TagProps['ref']) => {\n    return (\n      <StyledTag\n        {...restProps}\n        as={onClick || href ? BareButton : undefined}\n        href={href}\n        onClick={onClick}\n        ref={ref}\n      >\n        {children}\n      </StyledTag>\n    );\n  }\n);\n\nexport default Tag;\n"]}

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

@@ -1,38 +1,45 @@
-import { FunctionComponent, ReactNode, Ref } from 'react';
+import { FunctionComponent, Ref, MouseEventHandler } from 'react';
 import { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
+import { UnorderedList } from '../List';
+export interface BannerHandleValue {
+    /** Used to apply focus to the banner via an imperative handle. */
+    focus: () => void;
+}
+export interface BannerMessage {
+    label: string;
+    description?: string;
+    action?: {
+        text: string;
+        onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+        href?: string;
+    };
+    items?: (BannerMessage | string)[];
+}
 export interface BannerProps extends BaseProps, NoChildrenProp {
     /** Controls the styling of the Banner. */
-    variant: 'urgent' | 'success' | 'warning' | 'info';
-    /**  Heading text for the Banner. */
-    heading?: string;
+    variant: 'urgent' | 'warning' | 'success' | 'info';
     /**
      * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.
      * @default "h2"
      */
     headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     /** Pass one or more descriptive messages to inform the user. */
-    messages: string[];
-    /** ID for the Banner. Used both as onDismiss callback arg and DOM id. */
-    id: string;
-    /** Link or Button provided to the user for next steps. Link should use regular href and Button should use an onClick handler. */
-    action?: ReactNode;
+    messages: (string | BannerMessage)[];
     /** Callback when user explicitly dismisses the Banner. */
-    onDismiss?: (id: string) => void;
+    onDismiss?: MouseEventHandler;
+    /** Ref that can be used to access the imperative handle. */
+    handle?: Ref<BannerHandleValue>;
+    /** Ref forwarded to the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledBannerMessages: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {
-    inline: boolean;
-}, never>;
-export declare const StyledBannerContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    hasDismiss: boolean;
-}, never>;
-export declare const StyledBannerMessage: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
-    inline: boolean;
+export declare const StyledBanner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    headingTag: BannerProps['headingTag'];
 }, never>;
-export declare const StyledBannerDismissColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledBannerDismissButton: import("styled-components").StyledComponent<FunctionComponent<import("../Button").ButtonProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledBannerStatus: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<BannerProps, "variant">, never>;
-export declare const StyledBanner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBannerHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBannerContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBannerMessageList: typeof UnorderedList;
+export declare const StyledBannerMessage: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 declare const Banner: FunctionComponent<BannerProps & ForwardProps>;
 export default Banner;
 //# sourceMappingURL=Banner.d.ts.map

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,cAAc,EAAE,MAAM,aAAa,CAAC;AAgBtE,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D,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;SAgBjE,CAAC;AAIH,eAAO,MAAM,mBAAmB;YAAuB,OAAO;SAW5D,CAAC;AAIH,eAAO,MAAM,yBAAyB,yGAOpC,CAAC;AAIH,eAAO,MAAM,yBAAyB,qKAAmB,CAAC;AAE1D,eAAO,MAAM,kBAAkB,mIAgB7B,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,EAGL,iBAAiB,EAEjB,GAAG,EACH,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAc,MAAM,aAAa,CAAC;AAiBlF,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAWxC,MAAM,WAAW,iBAAiB;IAChC,kEAAkE;IAClE,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;QACnE,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,CAAC,EAAE,CAAC,aAAa,GAAG,MAAM,CAAC,EAAE,CAAC;CACpC;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D,0CAA0C;IAC1C,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IACnD;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACrD,gEAAgE;IAChE,QAAQ,EAAE,CAAC,MAAM,GAAG,aAAa,CAAC,EAAE,CAAC;IACrC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY;gBAA4B,WAAW,CAAC,YAAY,CAAC;SAU7E,CAAC;AAIF,eAAO,MAAM,kBAAkB,mIAiB7B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAoB7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAY9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,EAAE,OAAO,aAK5C,CAAC;AAIF,eAAO,MAAM,mBAAmB,0GAG/B,CAAC;AAyDF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAyJzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Banner/Banner.js

@@ -1,122 +1,164 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, forwardRef, useMemo, useImperativeHandle } from 'react';
 import styled, { css } from 'styled-components';
 import { getContrast, readableColor } from 'polished';
 import { defaultThemeProp } from '../../theme';
-import Icon, { registerIcon } from '../Icon';
+import Button, { StyledButton } from '../Button';
+import { focusHeadingOrContainer, tryCatch } from '../../utils';
+import { useConsolidatedRef, useDirection, useI18n } from '../../hooks';
+import Flex from '../Flex';
+import Text from '../Text';
+import Grid from '../Grid';
+import ExpandCollapse from '../ExpandCollapse';
+import { Count } from '../Badges';
+import Icon, { StyledIcon, registerIcon } from '../Icon';
 import * as timesIcon from '../Icon/icons/times.icon';
-import * as checkIcon from '../Icon/icons/check.icon';
-import * as bulbSolidIcon from '../Icon/icons/bulb-solid.icon';
+import * as caretRightIcon from '../Icon/icons/caret-right.icon';
 import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
 import * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';
-import Button from '../Button';
-import { tryCatch } from '../../utils';
-import { useI18n } from '../../hooks';
-import Flex from '../Flex';
-import Text from '../Text';
-registerIcon(timesIcon, checkIcon, bulbSolidIcon, warnSolidIcon, flagWaveSolidIcon);
-export const StyledBannerMessages = styled.ul(({ theme, inline }) => {
+import * as informationSolidIcon from '../Icon/icons/information-solid.icon';
+import * as checkIcon from '../Icon/icons/check.icon';
+import VisuallyHiddenText from '../VisuallyHiddenText';
+import { UnorderedList } from '../List';
+registerIcon(timesIcon, caretRightIcon, warnSolidIcon, flagWaveSolidIcon, informationSolidIcon, checkIcon);
+export const StyledBanner = styled.div(({ headingTag, theme }) => {
     return css `
-    list-style-position: inside;
-    ${inline &&
-        css `
-      display: inline-block;
-      margin-inline-end: ${theme.base.spacing};
-    `}
-  `;
+      border-radius: ${theme.components.card['border-radius']};
+
+      &:has(${headingTag}:focus) {
+        box-shadow: ${theme.base.shadow.focus};
+      }
+    `;
 });
-StyledBannerMessages.defaultProps = defaultThemeProp;
-export const StyledBannerContent = styled.div(({ theme, hasDismiss }) => {
+StyledBanner.defaultProps = defaultThemeProp;
+export const StyledBannerStatus = styled.div(({ variant, theme }) => {
+    const { background } = theme.components.banner[variant];
+    const color = tryCatch(() => getContrast(background, theme.base.palette['primary-background']) >= 3
+        ? theme.base.palette['primary-background']
+        : readableColor(background));
     return css `
-    position: relative;
-    padding: calc(1.5 * ${theme.base.spacing});
+    background-color: ${background};
+    color: ${color};
+    border-start-start-radius: inherit;
+    border-end-start-radius: inherit;
     border: 0.0625rem solid ${theme.base.palette['border-line']};
-    border-inline-start: none;
-    border-start-end-radius: ${theme.components.card['border-radius']};
-    border-end-end-radius: ${theme.components.card['border-radius']};
-
-    ${hasDismiss &&
-        css `
-      border-inline-end: none;
-      padding-inline-end: calc(0.75 * ${theme.base.spacing});
-      border-radius: 0;
-    `}
+    border-inline-end: none;
+    font-size: 1.25rem;
   `;
 });
-StyledBannerContent.defaultProps = defaultThemeProp;
-export const StyledBannerMessage = styled.li(({ inline, theme }) => {
+StyledBannerStatus.defaultProps = defaultThemeProp;
+export const StyledBannerHeader = styled.div(({ theme }) => {
+    const { rtl } = useDirection();
     return css `
-    color: ${theme.base.palette['foreground-color']};
-    word-break: break-word;
+    min-height: 2rem;
+
+    ${StyledButton}[aria-expanded] {
+      ${StyledIcon} {
+        transition: rotate ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+      }
 
-    ${inline &&
-        css `
-      display: inline-block;
-      margin-inline-end: ${theme.base.spacing};
-    `}
+      &[aria-expanded='true'] ${StyledIcon} {
+        rotate: 90deg;
+      }
+
+      &[aria-expanded='false'] ${StyledIcon} {
+        rotate: ${rtl ? 180 : 0}deg;
+      }
+    }
   `;
 });
-StyledBannerMessage.defaultProps = defaultThemeProp;
-export const StyledBannerDismissColumn = styled.div(({ theme }) => {
+StyledBannerHeader.defaultProps = defaultThemeProp;
+export const StyledBannerContent = styled.div(({ theme }) => {
     return css `
-    border-start-end-radius: ${theme.components.card['border-radius']};
-    border-end-end-radius: ${theme.components.card['border-radius']};
+    height: 100%;
+    background: ${theme.components.card.background};
+    padding-block: calc(0.5 * ${theme.base.spacing});
+    padding-inline-start: calc(2 * ${theme.base.spacing});
+    padding-inline-end: calc(0.5 * ${theme.base.spacing});
     border: 0.0625rem solid ${theme.base.palette['border-line']};
     border-inline-start: none;
+    border-start-end-radius: inherit;
+    border-end-end-radius: inherit;
   `;
 });
-StyledBannerDismissColumn.defaultProps = defaultThemeProp;
-export const StyledBannerDismissButton = styled(Button) ``;
-export const StyledBannerStatus = styled.div(({ variant, theme }) => {
-    const { background: bg } = theme.components.banner[variant];
-    const color = tryCatch(() => getContrast(bg, theme.base.palette['primary-background']) >= 3
-        ? theme.base.palette['primary-background']
-        : readableColor(bg));
-    return css `
-    background-color: ${bg};
-    width: 3.125rem;
-    color: ${color};
-    border-start-start-radius: ${theme.components.card['border-radius']};
-    border-end-start-radius: ${theme.components.card['border-radius']};
-    font-size: 1.25rem;
-  `;
-});
-StyledBannerStatus.defaultProps = defaultThemeProp;
-export const StyledBanner = styled.div(({ theme }) => {
-    return css `
-    background: ${theme.components.card.background};
-    border-radius: ${theme.components.card['border-radius']};
-  `;
+StyledBannerContent.defaultProps = defaultThemeProp;
+export const StyledBannerMessageList = styled(UnorderedList)(({ theme }) => css `
+    padding-block-end: calc(0.5 * ${theme.base.spacing});
+    padding-inline-end: calc(2 * ${theme.base.spacing});
+  `);
+StyledBannerMessageList.defaultProps = defaultThemeProp;
+export const StyledBannerMessage = styled.span `
+  overflow-wrap: break-word;
+  list-style: none;
+`;
+StyledBannerMessage.defaultProps = defaultThemeProp;
+const BannerMessageItem = forwardRef(({ label, description, action, ...restProps }, ref) => {
+    return (_jsxs(StyledBannerMessage, { ...restProps, ref: ref, children: [_jsx("span", { children: label }), description && (_jsxs(_Fragment, { children: [' ', _jsx(Text, { variant: 'secondary', children: description })] })), action && (_jsxs(_Fragment, { children: [' ', _jsx(Text, { variant: 'secondary', children: _jsx(Button, { variant: 'link', href: action.href, onClick: action.onClick, ...action, children: action.text }) })] }))] }));
 });
-StyledBanner.defaultProps = defaultThemeProp;
-const Banner = forwardRef(({ variant, heading, headingTag = 'h2', messages, onDismiss, action, id, ...restProps }, ref) => {
-    const inline = messages.length === 1;
-    const singleLine = inline && !heading;
-    const hasDismiss = !!onDismiss;
-    let bannerIcon = 'warn-solid';
-    let role = 'alert';
-    let ariaLive = 'assertive';
-    if (variant === 'info') {
-        bannerIcon = 'bulb-solid';
-        ariaLive = 'polite';
-        role = undefined;
-    }
-    else if (variant === 'success') {
-        bannerIcon = 'check';
-        ariaLive = 'polite';
-        role = undefined;
-    }
-    else if (variant === 'warning') {
-        bannerIcon = 'flag-wave-solid';
-    }
+const prepareMessages = (messages) => {
+    let count = 0;
+    return [
+        messages.flatMap(msg => {
+            count += 1;
+            if (typeof msg === 'string') {
+                return [_jsx(BannerMessageItem, { label: msg })];
+            }
+            if (msg.items) {
+                const { items, ...restMsg } = msg;
+                const [subMessages, subCount] = prepareMessages(items);
+                count += subCount;
+                return [_jsx(BannerMessageItem, { ...restMsg }), subMessages];
+            }
+            return [_jsx(BannerMessageItem, { ...msg })];
+        }),
+        count
+    ];
+};
+const Banner = forwardRef(({ variant, headingTag = 'h2', messages, onDismiss, handle, ...restProps }, ref) => {
+    const [messagesToRender, count] = useMemo(() => prepareMessages(messages), [messages]);
     const t = useI18n();
-    return (_jsxs(Flex, { ...restProps, container: true, as: StyledBanner, role: role, "aria-live": ariaLive, id: id, ref: ref, children: [_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, item: { shrink: 0 }, as: StyledBannerStatus, variant: variant, children: _jsx(Icon, { name: bannerIcon }) }), _jsxs(Flex, { container: singleLine ? { alignItems: 'center' } : { direction: 'column', gap: 1 }, item: { grow: 1 }, as: StyledBannerContent, hasDismiss: hasDismiss, children: [heading && (_jsx(Text, { variant: 'h4', as: headingTag, children: heading })), _jsx(StyledBannerMessages, { inline: inline, children: messages.map((msg, index) => (
-                        // eslint-disable-next-line react/no-array-index-key
-                        _jsx(StyledBannerMessage, { inline: inline, children: msg }, `${msg}+${index}`))) }), action] }), onDismiss && (_jsx(Flex, { container: {
-                    direction: 'column',
-                    justify: singleLine ? 'center' : undefined,
-                    pad: [singleLine ? 0.5 : 1, 0.5, 0.5, 0]
-                }, as: StyledBannerDismissColumn, children: _jsx(StyledBannerDismissButton, { variant: 'simple', icon: true, onClick: () => onDismiss(id), "aria-label": t('banner_dismiss_button_label_a11y'), children: _jsx(Icon, { name: 'times' }) }) }))] }));
+    const [collapsed, setCollapsed] = useState(count > 2);
+    const bannerRef = useConsolidatedRef(ref);
+    let role;
+    let icon;
+    let heading;
+    let ariaLive;
+    switch (variant) {
+        case 'urgent':
+            heading = t('error');
+            icon = 'warn-solid';
+            role = 'alert';
+            ariaLive = 'assertive';
+            break;
+        case 'warning':
+            heading = t('warning');
+            icon = 'flag-wave-solid';
+            role = 'alert';
+            ariaLive = 'assertive';
+            break;
+        case 'success':
+            heading = t('success');
+            icon = 'check';
+            role = 'none';
+            ariaLive = 'polite';
+            break;
+        case 'info':
+        default:
+            heading = t('information');
+            icon = 'information-solid';
+            role = 'none';
+            ariaLive = 'polite';
+            break;
+    }
+    useImperativeHandle(handle, () => ({
+        focus: () => {
+            if (bannerRef.current)
+                focusHeadingOrContainer(bannerRef.current, heading);
+        }
+    }), []);
+    return (_jsxs(Grid, { ...restProps, as: StyledBanner, container: { cols: '2rem minmax(0, 1fr)' }, role: role, "aria-live": ariaLive, headingTag: headingTag, ref: bannerRef, 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} ${count}` }), _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(Grid, { as: StyledBannerHeader, container: { cols: 'auto 1fr auto', areas: '"toggle heading dismiss"', gap: 1 }, children: [_jsxs(Grid, { container: { cols: 'min-content min-content', gap: 0.5, alignItems: 'center' }, item: { area: 'heading', alignSelf: 'center' }, as: Text, forwardedAs: headingTag, variant: 'h2', children: [heading, " ", _jsx(Count, { children: count })] }), _jsx(Grid, { item: { area: 'toggle', alignSelf: 'center' }, children: _jsx(Button, { onClick: () => {
+                                            setCollapsed(cur => !cur);
+                                        }, label: t(collapsed ? 'expand' : 'collapse'), "aria-expanded": collapsed ? 'false' : 'true', variant: 'simple', icon: true, children: _jsx(Icon, { name: 'caret-right' }) }) }), _jsx(Grid, { item: { area: 'dismiss', alignSelf: 'center' }, children: 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 }) })] })) })] }));
 });
 export default Banner;
 //# sourceMappingURL=Banner.js.map

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, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as bulbSolidIcon from '../Icon/icons/bulb-solid.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport Button from '../Button';\nimport { tryCatch } from '../../utils';\nimport { useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\n\nregisterIcon(timesIcon, checkIcon, bulbSolidIcon, warnSolidIcon, flagWaveSolidIcon);\n\nexport interface BannerProps extends BaseProps, NoChildrenProp {\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  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-start-end-radius: ${theme.components.card['border-radius']};\n    border-end-end-radius: ${theme.components.card['border-radius']};\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\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.li<{ inline: boolean }>(({ inline, theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    word-break: break-word;\n\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  return css`\n    border-start-end-radius: ${theme.components.card['border-radius']};\n    border-end-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  return css`\n    background-color: ${bg};\n    width: 3.125rem;\n    color: ${color};\n    border-start-start-radius: ${theme.components.card['border-radius']};\n    border-end-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 = 'flag-wave-solid';\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 {\n  useState,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  MouseEventHandler,\n  useMemo,\n  ReactNode,\n  useImperativeHandle\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 { focusHeadingOrContainer, tryCatch } from '../../utils';\nimport { useConsolidatedRef, 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 BannerHandleValue {\n  /** Used to apply focus to the banner via an imperative handle. */\n  focus: () => void;\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 that can be used to access the imperative handle. */\n  handle?: Ref<BannerHandleValue>;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBanner = styled.div<{ headingTag: BannerProps['headingTag'] }>(\n  ({ headingTag, theme }) => {\n    return css`\n      border-radius: ${theme.components.card['border-radius']};\n\n      &:has(${headingTag}:focus) {\n        box-shadow: ${theme.base.shadow.focus};\n      }\n    `;\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  overflow-wrap: break-word;\n  list-style: none;\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      <span>{label}</span>\n      {description && (\n        <>\n          {' '}\n          <Text variant='secondary'>{description}</Text>\n        </>\n      )}\n      {action && (\n        <>\n          {' '}\n          <Text variant='secondary'>\n            <Button variant='link' href={action.href} onClick={action.onClick} {...action}>\n              {action.text}\n            </Button>\n          </Text>\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    {\n      variant,\n      headingTag = 'h2',\n      messages,\n      onDismiss,\n      handle,\n      ...restProps\n    }: 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    const bannerRef = useConsolidatedRef(ref);\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    useImperativeHandle(\n      handle,\n      () => ({\n        focus: () => {\n          if (bannerRef.current) focusHeadingOrContainer(bannerRef.current, heading);\n        }\n      }),\n      []\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        headingTag={headingTag}\n        ref={bannerRef}\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} ${count}`}</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              <Grid\n                as={StyledBannerHeader}\n                container={{ cols: 'auto 1fr auto', areas: '\"toggle heading dismiss\"', gap: 1 }}\n              >\n                <Grid\n                  container={{ cols: 'min-content min-content', gap: 0.5, alignItems: 'center' }}\n                  item={{ area: 'heading', alignSelf: 'center' }}\n                  as={Text}\n                  forwardedAs={headingTag}\n                  variant='h2'\n                >\n                  {heading} <Count>{count}</Count>\n                </Grid>\n                <Grid item={{ area: 'toggle', alignSelf: 'center' }}>\n                  <Button\n                    onClick={() => {\n                      setCollapsed(cur => !cur);\n                    }}\n                    label={t(collapsed ? 'expand' : 'collapse')}\n                    aria-expanded={collapsed ? 'false' : 'true'}\n                    variant='simple'\n                    icon\n                  >\n                    <Icon name='caret-right' />\n                  </Button>\n                </Grid>\n                <Grid item={{ area: 'dismiss', alignSelf: 'center' }}>\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                </Grid>\n              </Grid>\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/Banner/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './Banner';
-export { BannerProps } from './Banner';
+export type { BannerProps, BannerHandleValue, BannerMessage } from './Banner';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default } from './Banner';\nexport { BannerProps } from './Banner';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default } from './Banner';\nexport type { BannerProps, BannerHandleValue, BannerMessage } from './Banner';\n"]}

package/lib/components/Button/Button.d.ts

@@ -46,7 +46,7 @@ export interface ButtonProps extends BaseProps, AsProp {
     /** Ref forwarded to the wrapping element. */
     ref?: Ref<HTMLButtonElement>;
 }
-declare type ButtonPropsWithDefaults = PropsWithDefaults<ButtonProps, 'variant' | 'type' | 'disabled' | 'icon' | 'loading'>;
+type ButtonPropsWithDefaults = PropsWithDefaults<ButtonProps, 'variant' | 'type' | 'disabled' | 'icon' | 'loading'>;
 export declare const StyledButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ButtonPropsWithDefaults, never>;
 declare const Button: FunctionComponent<ButtonProps & ForwardProps>;
 export default Button;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EACjB,SAAS,EAET,GAAG,EAGJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAWjF,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,MAAM;IACpD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,aAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAEF,eAAO,MAAM,YAAY,iIA2NxB,CAAC;AAIF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAwEzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EACjB,SAAS,EAET,GAAG,EAGJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAWjF,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,MAAM;IACpD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAEF,eAAO,MAAM,YAAY,iIA2NxB,CAAC;AAIF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAwEzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, Ref, ReactNode, MouseEventHandler } from 'react';
 import { ForwardProps, BaseProps, AsProp } from '../../types';
 export interface CardProps extends BaseProps, AsProp {
     /** Components and content for the Card. */
@@ -10,12 +10,9 @@ export interface CardProps extends BaseProps, AsProp {
      */
     interactive?: boolean;
     /** Callback for onClick event. */
-    onClick?: (event: any) => void;
-    /**
-     * HTML role attribute for accessibility.
-     * @default "region"
-     */
-    role?: string;
+    onClick?: MouseEventHandler<HTMLElement>;
+    /** Ref forwarded to the wrapping element. */
+    ref?: Ref<HTMLElement>;
 }
 export declare const StyledCard: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, Partial<CardProps>, never>;
 declare const Card: FunctionComponent<CardProps & ForwardProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAK9D,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAOD,eAAO,MAAM,UAAU,6HAqCrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA8BrD,CAAC;AAIF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,GAAG,EAEH,SAAS,EACT,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAK9D,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,6HAqCrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA+BrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Card/Card.js

@@ -5,10 +5,6 @@ import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
 import { StyledPopover } from '../Popover';
 import { StyledCardMedia } from './CardMedia';
-const defaultProps = {
-    interactive: false,
-    role: 'region'
-};
 export const StyledCard = styled.article(props => {
     const { 'border-radius': borderRadius, 'border-color': borderColor, background } = props.theme.components.card;
     const interactive = props.interactive
@@ -43,8 +39,7 @@ export const StyledCard = styled.article(props => {
   `;
 });
 StyledCard.defaultProps = defaultThemeProp;
-const Card = forwardRef((props, ref) => {
-    const { children, as, onClick, interactive, role, ...restProps } = props;
+const Card = forwardRef(({ children, as, onClick, interactive = false, ...restProps }, ref) => {
     const interactiveProps = {
         ...(onClick && {
             onClick,
@@ -54,11 +49,9 @@ const Card = forwardRef((props, ref) => {
         ...(interactive && {
             tabIndex: 0
         }),
-        ...(role && { role }),
         interactive
     };
-    return (_jsx(Flex, { container: { direction: 'column' }, as: StyledCard, forwardedAs: as, ref: ref, ...interactiveProps, ...restProps, children: children }));
+    return (_jsx(Flex, { role: 'none', container: { direction: 'column' }, as: StyledCard, forwardedAs: as, ref: ref, ...interactiveProps, ...restProps, children: children }));
 });
-Card.defaultProps = defaultProps;
 export default Card;
 //# sourceMappingURL=Card.js.map