@pega/cosmos-react-core 9.0.0-build.9.9 → 9.0.0

package/lib/components/Banner/Banner.js

@@ -1,110 +1,32 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, forwardRef, Fragment, useMemo, useImperativeHandle, useRef } from 'react';
-import styled, { css } from 'styled-components';
-import { getContrast } from 'polished';
-import { defaultThemeProp } from '../../theme';
-import Button, { StyledButton } from '../Button';
-import { focusHeadingOrContainer, tryCatch, withTestIds } from '../../utils';
-import { useConsolidatedRef, useDirection, useI18n, useTestIds } from '../../hooks';
+import { useState, forwardRef, useMemo, useImperativeHandle, useRef, Fragment } from 'react';
+import Button from '../Button';
+import { focusHeadingOrContainer, withTestIds } from '../../utils';
+import { useConsolidatedRef, useI18n, useTestIds, useTheme } from '../../hooks';
 import Flex from '../Flex';
-import Text, { StyledText } from '../Text';
+import Text from '../Text';
 import Grid from '../Grid';
-import ExpandCollapse from '../ExpandCollapse';
+import ExpandCollapse, { ExpandCollapseButton } from '../ExpandCollapse';
 import { Count } from '../Badges';
-import Icon, { StyledIcon, registerIcon } from '../Icon';
+import Icon, { registerIcon } from '../Icon';
 import * as timesIcon from '../Icon/icons/times.icon';
 import * as caretRightIcon from '../Icon/icons/caret-right.icon';
 import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
 import * as diamondMinusIcon from '../Icon/icons/diamond-solid.icon';
 import * as informationSolidIcon from '../Icon/icons/information-solid.icon';
-import * as checkIcon from '../Icon/icons/check.icon';
+import * as checkSolidIcon from '../Icon/icons/check-solid.icon';
 import * as aiIcon from '../Icon/icons/polaris-solid.icon';
 import VisuallyHiddenText from '../VisuallyHiddenText';
-import { UnorderedList } from '../List';
-import { readableColor } from '../../styles';
+import HTML from '../HTML';
 import { getBannerTestIds } from './Banner.test-ids';
-registerIcon(timesIcon, caretRightIcon, warnSolidIcon, diamondMinusIcon, informationSolidIcon, checkIcon, aiIcon);
-export const StyledBanner = styled.div(({ headingTag, theme }) => {
-    return css `
-      border-radius: var(--border-radius, ${theme.components.card['border-radius']});
-      min-inline-size: 100%;
-      inline-size: 0;
-
-      &:has(${headingTag}:focus) {
-        box-shadow: ${theme.base.shadow.focus};
-      }
-
-      ${headingTag}${StyledText} {
-        word-break: break-word;
-      }
-    `;
-});
-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 `
-    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-end: none;
-    font-size: 1.25rem;
-  `;
-});
-StyledBannerStatus.defaultProps = defaultThemeProp;
-export const StyledBannerHeader = styled.div(({ theme }) => {
-    const { rtl } = useDirection();
-    return css `
-    min-height: 2.125rem;
-
-    ${StyledButton}[aria-expanded] {
-      ${StyledIcon} {
-        transition: rotate ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
-      }
-
-      &[aria-expanded='true'] ${StyledIcon} {
-        rotate: 90deg;
-      }
-
-      &[aria-expanded='false'] ${StyledIcon} {
-        rotate: ${rtl ? 180 : 0}deg;
-      }
-    }
-  `;
-});
-StyledBannerHeader.defaultProps = defaultThemeProp;
-export const StyledBannerContent = styled.div(({ expandable, theme }) => {
-    return css `
-    background: ${theme.components.card.background};
-    padding-block: calc(0.5 * ${theme.base.spacing});
-    padding-inline-start: calc(${expandable ? 0.5 : 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;
-  `;
-});
-StyledBannerContent.defaultProps = defaultThemeProp;
-export const StyledBannerMessageList = styled(UnorderedList)(({ theme }) => css `
-    padding-block-end: calc(0.5 * ${theme.base.spacing});
-    padding-inline-start: calc(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;
+import { StyledBanner, StyledBannerStatus, StyledBannerMessageList, StyledBannerMessage, StyledBannerMessageLabel } from './Banner.styles';
+registerIcon(timesIcon, caretRightIcon, warnSolidIcon, diamondMinusIcon, informationSolidIcon, checkSolidIcon, aiIcon);
+// FIXME: Temporarily re-exporting for backward compatibility.
+export { StyledBanner, StyledBannerMessageList };
 const BannerMessageItem = forwardRef(function BannerMessageItem({ testId, label, description, action, ...restProps }, ref) {
     const testIds = useTestIds(testId, getBannerTestIds);
     const labelArray = Array.isArray(label) ? label : [label];
-    return (_jsxs(StyledBannerMessage, { ...restProps, ref: ref, children: [_jsx("span", { "data-testid": testIds.messageLabel, children: labelArray.map((item, idx) => typeof item === 'string' ? (
+    return (_jsxs(StyledBannerMessage, { ...restProps, ref: ref, children: [_jsx(StyledBannerMessageLabel, { "data-testid": testIds.messageLabel, children: labelArray.map((item, idx) => typeof item === 'string' ? (
                 // eslint-disable-next-line react/no-array-index-key
                 _jsx(Fragment, { children: item }, idx)) : (
                 // eslint-disable-next-line react/no-array-index-key
@@ -123,7 +45,7 @@ const prepareMessages = (messages, testId) => {
         return [_jsx(BannerMessageItem, { ...msg, testId: testId })];
     });
 };
-export default withTestIds(forwardRef(function Banner({ testId, variant, headingText, headingTag = 'h2', messages, onDismiss, handle, ...restProps }, ref) {
+export default withTestIds(forwardRef(function Banner({ testId, variant, headingText, headingTag = 'h3', messages = [], content, onDismiss, handle, ...restProps }, ref) {
     const testIds = useTestIds(testId, getBannerTestIds);
     const messagesToRender = useMemo(() => prepareMessages(messages, testId), [messages]);
     const firstMessageHasChildren = messages.length > 0 &&
@@ -132,9 +54,13 @@ export default withTestIds(forwardRef(function Banner({ testId, variant, heading
         messages[0].items.length > 0;
     const count = messages.length;
     const t = useI18n();
-    const [collapsed, setCollapsed] = useState(count > 2);
+    const theme = useTheme();
+    const [collapsed, setCollapsed] = useState(false);
     const bannerRef = useConsolidatedRef(ref);
     const expandCollapseBtnRef = useRef(null);
+    const showHeader = headingText !== undefined || (content ? count !== 0 : count !== 1 || firstMessageHasChildren);
+    const expandable = showHeader && (count !== 0 || !!content);
+    const showCount = count > 0;
     let heading = headingText;
     let icon;
     let role;
@@ -154,7 +80,7 @@ export default withTestIds(forwardRef(function Banner({ testId, variant, heading
             break;
         case 'success':
             heading ??= t('success');
-            icon = 'check';
+            icon = theme.base['icon-set'] === 'budicon' ? 'check-solid' : 'check';
             role = 'none';
             ariaLive = 'polite';
             break;
@@ -185,12 +111,33 @@ export default withTestIds(forwardRef(function Banner({ testId, variant, heading
             });
         }
     }), []);
-    return (_jsxs(Grid, { "data-testid": testIds.root, ...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 }) }), count === 1 && !firstMessageHasChildren && headingText === undefined ? (_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, { testId: testId, label: messages[0], as: 'li' })) : (_jsx(BannerMessageItem, { ...messages[0], testId: testId, as: 'li' })) }), onDismiss && (_jsx(Button, { "data-testid": testIds.dismiss, onClick: onDismiss, label: t('dismiss'), "aria-label": t('banner_dismiss_button_label_a11y'), variant: 'simple', icon: true, children: _jsx(Icon, { name: 'times' }) }))] })) : (_jsxs(StyledBannerContent, { expandable: true, children: [_jsxs(Grid, { as: StyledBannerHeader, container: { cols: 'auto 1fr auto', areas: '"toggle heading dismiss"', gap: 0.5 }, children: [_jsxs(Grid, { "data-testid": testIds.heading, container: {
-                                    cols: 'fit-content(100%) max-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, { "data-testid": testIds.expandCollapse, onClick: () => {
-                                        setCollapsed(cur => !cur);
-                                    }, label: t(collapsed ? 'expand' : 'collapse'), "aria-label": t(collapsed ? 'expand_noun' : 'collapse_noun', [heading]), "aria-expanded": !collapsed, variant: 'simple', icon: true, ref: expandCollapseBtnRef, children: _jsx(Icon, { name: 'caret-right' }) }) }), _jsx(Grid, { item: { area: 'dismiss', alignSelf: 'center' }, children: onDismiss && (_jsx(Button, { "data-testid": testIds.dismiss, 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 }) })] }))] }));
+    const iconRegion = (_jsx(Flex, { as: StyledBannerStatus, container: { alignItems: 'center' }, variant: variant, children: _jsx(Icon, { name: icon }) }));
+    const dismissButton = onDismiss ? (_jsx(Button, { "data-testid": testIds.dismiss, onClick: onDismiss, label: t('dismiss'), "aria-label": t('banner_dismiss_button_label_a11y'), variant: 'simple', icon: true, children: _jsx(Icon, { name: 'times' }) })) : null;
+    return (_jsx(Grid, { "data-testid": testIds.root, ...restProps, as: StyledBanner, container: showHeader
+            ? { cols: 'minmax(0, 1fr)' }
+            : { cols: 'min-content minmax(0, 1fr) auto', gap: 1, alignItems: 'start' }, role: role, "aria-live": ariaLive, headingTag: headingTag, variant: variant, ref: bannerRef, children: !showHeader ? (_jsxs(_Fragment, { children: [iconRegion, _jsx(VisuallyHiddenText, { as: headingTag, children: `${heading} ${showCount ? count : ''}` }), _jsx(Flex, { item: { alignSelf: 'center', grow: 1 }, as: content ? undefined : 'ul', children: (() => {
+                        if (content) {
+                            return _jsx(HTML, { content: content });
+                        }
+                        if (typeof messages[0] === 'string') {
+                            return _jsx(BannerMessageItem, { testId: testId, label: messages[0], as: 'li' });
+                        }
+                        return _jsx(BannerMessageItem, { ...messages[0], testId: testId, as: 'li' });
+                    })() }), dismissButton] })) : (_jsxs(Flex, { container: { direction: 'column', justify: 'center' }, children: [_jsxs(Grid, { container: {
+                        cols: expandable ? 'auto 1fr auto' : '1fr auto',
+                        areas: expandable ? '"toggle heading dismiss"' : '"heading dismiss"',
+                        gap: 0.5,
+                        alignItems: 'start'
+                    }, children: [_jsxs(Grid, { container: { cols: 'min-content auto', gap: 1 }, item: { area: 'heading', alignSelf: 'center' }, children: [iconRegion, _jsxs(Grid, { "data-testid": testIds.heading, container: {
+                                        cols: `fit-content(100%) ${showCount ? 'max-content' : ''}`,
+                                        gap: 0.5,
+                                        alignItems: 'center'
+                                    }, as: Text, forwardedAs: headingTag, variant: 'h3', children: [heading, " ", showCount && _jsx(Count, { children: count })] })] }), expandable && (_jsx(Grid, { item: { area: 'toggle' }, children: _jsx(ExpandCollapseButton, { "data-testid": testIds.expandCollapse, onToggle: () => {
+                                    setCollapsed(cur => !cur);
+                                }, label: t(collapsed ? 'expand' : 'collapse'), "aria-label": t(collapsed ? 'expand_noun' : 'collapse_noun', [heading]), "aria-expanded": !collapsed, iconOnly: true, ref: expandCollapseBtnRef, expanded: !collapsed }) })), _jsx(Grid, { item: { area: 'dismiss' }, children: dismissButton })] }), expandable && (_jsx(ExpandCollapse, { collapsed: collapsed, children: _jsxs(Flex, { container: {
+                            direction: 'column',
+                            gap: 1,
+                            pad: [1, 2]
+                        }, children: [messagesToRender.length > 0 ? (_jsx(StyledBannerMessageList, { items: messagesToRender })) : null, content && _jsx(HTML, { content: content })] }) }))] })) }));
 }), getBannerTestIds);
 //# 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 { useState, forwardRef, Fragment, useMemo, useImperativeHandle, useRef } from 'react';\nimport type { PropsWithoutRef, Ref, MouseEventHandler, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type {\n  ForwardProps,\n  HeadingTag,\n  NoChildrenProp,\n  OmitStrict,\n  RefElement,\n  TestIdProp,\n  WithAttributes\n} from '../../types';\nimport Button, { StyledButton } from '../Button';\nimport { focusHeadingOrContainer, tryCatch, withTestIds } from '../../utils';\nimport { useConsolidatedRef, useDirection, useI18n, useTestIds } from '../../hooks';\nimport Flex from '../Flex';\nimport Text, { StyledText } 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 diamondMinusIcon from '../Icon/icons/diamond-solid.icon';\nimport * as informationSolidIcon from '../Icon/icons/information-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as aiIcon from '../Icon/icons/polaris-solid.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { UnorderedList } from '../List';\nimport { readableColor } from '../../styles';\n\nimport { getBannerTestIds } from './Banner.test-ids';\n\nregisterIcon(\n  timesIcon,\n  caretRightIcon,\n  warnSolidIcon,\n  diamondMinusIcon,\n  informationSolidIcon,\n  checkIcon,\n  aiIcon\n);\n\nexport interface BannerHandleValue {\n  /** Used to apply focus to the banner via an imperative handle. */\n  focus: () => void;\n}\n\ntype Label =\n  | string\n  | {\n      text: string;\n      onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n      href?: string;\n    };\n\nexport interface BannerMessage {\n  label: Label | Label[];\n  description?: string;\n  action?: {\n    text: string;\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  };\n  items?: (BannerMessage | string)[];\n}\n\nexport type BannerProps = WithAttributes<\n  'div',\n  TestIdProp &\n    NoChildrenProp & {\n      /** Controls the styling of the Banner. */\n      variant: 'urgent' | 'warning' | 'success' | 'info' | 'ai';\n      /** Custom heading text. Default varies by variant. */\n      headingText?: 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?: HeadingTag;\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    }\n>;\n\nexport const StyledBanner = styled.div<{ headingTag: BannerProps['headingTag'] }>(\n  ({ headingTag, theme }) => {\n    return css`\n      border-radius: var(--border-radius, ${theme.components.card['border-radius']});\n      min-inline-size: 100%;\n      inline-size: 0;\n\n      &:has(${headingTag}:focus) {\n        box-shadow: ${theme.base.shadow.focus};\n      }\n\n      ${headingTag}${StyledText} {\n        word-break: break-word;\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: 2.125rem;\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<{ expandable?: boolean }>(({ expandable, theme }) => {\n  return css`\n    background: ${theme.components.card.background};\n    padding-block: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(${expandable ? 0.5 : 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 = styled(UnorderedList)(\n  ({ theme }) => css`\n    padding-block-end: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(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  TestIdProp & OmitStrict<BannerMessage, 'items'> & ForwardProps\n>(function BannerMessageItem({ testId, label, description, action, ...restProps }, ref) {\n  const testIds = useTestIds(testId, getBannerTestIds);\n\n  const labelArray = Array.isArray(label) ? label : [label];\n\n  return (\n    <StyledBannerMessage {...restProps} ref={ref}>\n      <span data-testid={testIds.messageLabel}>\n        {labelArray.map((item, idx) =>\n          typeof item === 'string' ? (\n            // eslint-disable-next-line react/no-array-index-key\n            <Fragment key={idx}>{item}</Fragment>\n          ) : (\n            // eslint-disable-next-line react/no-array-index-key\n            <Button variant='link' href={item.href} onClick={item.onClick} key={idx}>\n              {item.text}\n            </Button>\n          )\n        )}\n      </span>\n      {description && (\n        <>\n          {' '}\n          <Text data-testid={testIds.messageDescription} variant='secondary'>\n            {description}\n          </Text>\n        </>\n      )}\n      {action && (\n        <>\n          {' '}\n          <Text variant='secondary'>\n            <Button\n              data-testid={testIds.messageAction}\n              variant='link'\n              href={action.href}\n              onClick={action.onClick}\n              {...action}\n            >\n              {action.text}\n            </Button>\n          </Text>\n        </>\n      )}\n    </StyledBannerMessage>\n  );\n});\n\nconst prepareMessages = (\n  messages: (string | BannerMessage)[],\n  testId: TestIdProp['testId']\n): ReactNode[] => {\n  return messages.flatMap(msg => {\n    if (typeof msg === 'string') {\n      return [<BannerMessageItem label={msg} />];\n    }\n\n    if (msg.items && msg.items.length > 0) {\n      const { items, ...restMsg } = msg;\n      const subMessages = prepareMessages(items, testId);\n      return [<BannerMessageItem {...restMsg} testId={testId} />, subMessages];\n    }\n\n    return [<BannerMessageItem {...msg} testId={testId} />];\n  });\n};\n\nexport default withTestIds(\n  forwardRef<RefElement<BannerProps>, PropsWithoutRef<BannerProps>>(function Banner(\n    { testId, variant, headingText, headingTag = 'h2', messages, onDismiss, handle, ...restProps },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getBannerTestIds);\n    const messagesToRender = useMemo(() => prepareMessages(messages, testId), [messages]);\n    const firstMessageHasChildren =\n      messages.length > 0 &&\n      typeof messages[0] === 'object' &&\n      Array.isArray(messages[0].items) &&\n      messages[0].items.length > 0;\n    const count = messages.length;\n    const t = useI18n();\n    const [collapsed, setCollapsed] = useState(count > 2);\n\n    const bannerRef = useConsolidatedRef(ref);\n    const expandCollapseBtnRef = useRef<HTMLButtonElement>(null);\n\n    let heading = headingText;\n    let icon: string;\n    let role: 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 = 'diamond-minus';\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 'ai':\n        heading ??= t('ai_generated');\n        icon = 'polaris-solid';\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          // Empty timeout ensures that the banner will take focus after any other programmatic focus events\n          setTimeout(() => {\n            if (expandCollapseBtnRef.current) {\n              expandCollapseBtnRef.current.focus();\n            } else if (bannerRef.current) {\n              focusHeadingOrContainer(bannerRef.current, heading);\n            }\n          });\n        }\n      }),\n      []\n    );\n\n    return (\n      <Grid\n        data-testid={testIds.root}\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        {count === 1 && !firstMessageHasChildren && headingText === undefined ? (\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 testId={testId} label={messages[0]} as='li' />\n              ) : (\n                <BannerMessageItem {...messages[0]} testId={testId} as='li' />\n              )}\n            </Flex>\n            {onDismiss && (\n              <Button\n                data-testid={testIds.dismiss}\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 expandable>\n            <Grid\n              as={StyledBannerHeader}\n              container={{ cols: 'auto 1fr auto', areas: '\"toggle heading dismiss\"', gap: 0.5 }}\n            >\n              <Grid\n                data-testid={testIds.heading}\n                container={{\n                  cols: 'fit-content(100%) max-content',\n                  gap: 0.5,\n                  alignItems: 'center'\n                }}\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                  data-testid={testIds.expandCollapse}\n                  onClick={() => {\n                    setCollapsed(cur => !cur);\n                  }}\n                  label={t(collapsed ? 'expand' : 'collapse')}\n                  aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [heading])}\n                  aria-expanded={!collapsed}\n                  variant='simple'\n                  icon\n                  ref={expandCollapseBtnRef}\n                >\n                  <Icon name='caret-right' />\n                </Button>\n              </Grid>\n              <Grid item={{ area: 'dismiss', alignSelf: 'center' }}>\n                {onDismiss && (\n                  <Button\n                    data-testid={testIds.dismiss}\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      </Grid>\n    );\n  }),\n  getBannerTestIds\n);\n"]}
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, forwardRef, useMemo, useImperativeHandle, useRef, Fragment } from 'react';\nimport type { PropsWithoutRef, Ref, MouseEventHandler, ReactNode } from 'react';\n\nimport type {\n  ForwardProps,\n  HeadingTag,\n  NoChildrenProp,\n  OmitStrict,\n  RefElement,\n  TestIdProp,\n  WithAttributes\n} from '../../types';\nimport Button from '../Button';\nimport { focusHeadingOrContainer, withTestIds } from '../../utils';\nimport { useConsolidatedRef, useI18n, useTestIds, useTheme } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Grid from '../Grid';\nimport ExpandCollapse, { ExpandCollapseButton } from '../ExpandCollapse';\nimport { Count } from '../Badges';\nimport Icon, { 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 diamondMinusIcon from '../Icon/icons/diamond-solid.icon';\nimport * as informationSolidIcon from '../Icon/icons/information-solid.icon';\nimport * as checkSolidIcon from '../Icon/icons/check-solid.icon';\nimport * as aiIcon from '../Icon/icons/polaris-solid.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport HTML from '../HTML';\n\nimport { getBannerTestIds } from './Banner.test-ids';\nimport {\n  StyledBanner,\n  StyledBannerStatus,\n  StyledBannerMessageList,\n  StyledBannerMessage,\n  StyledBannerMessageLabel\n} from './Banner.styles';\n\nregisterIcon(\n  timesIcon,\n  caretRightIcon,\n  warnSolidIcon,\n  diamondMinusIcon,\n  informationSolidIcon,\n  checkSolidIcon,\n  aiIcon\n);\n\n// FIXME: Temporarily re-exporting for backward compatibility.\nexport { StyledBanner, StyledBannerMessageList };\n\nexport interface BannerHandleValue {\n  /** Used to apply focus to the banner via an imperative handle. */\n  focus: () => void;\n}\n\ntype Label =\n  | string\n  | {\n      text: string;\n      onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n      href?: string;\n    };\n\nexport interface BannerMessage {\n  label: Label | Label[];\n  description?: string;\n  action?: {\n    text: string;\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  };\n  items?: (BannerMessage | string)[];\n}\n\nexport type BannerProps = WithAttributes<\n  'div',\n  TestIdProp &\n    NoChildrenProp & {\n      /** Controls the styling of the Banner. */\n      variant: 'urgent' | 'warning' | 'success' | 'info' | 'ai';\n      /** Custom heading text. Default varies by variant. */\n      headingText?: string;\n      /**\n       * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n       * @default 'h3'\n       */\n      headingTag?: HeadingTag;\n      /**\n       * Pass one or more descriptive messages to inform the user\n       * @default []\n       */\n      messages?: (string | BannerMessage)[];\n      /** Rich text content to render within banner. */\n      content?: string;\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    }\n>;\n\nconst BannerMessageItem = forwardRef<\n  HTMLLIElement,\n  TestIdProp & OmitStrict<BannerMessage, 'items'> & ForwardProps\n>(function BannerMessageItem({ testId, label, description, action, ...restProps }, ref) {\n  const testIds = useTestIds(testId, getBannerTestIds);\n\n  const labelArray = Array.isArray(label) ? label : [label];\n\n  return (\n    <StyledBannerMessage {...restProps} ref={ref}>\n      <StyledBannerMessageLabel data-testid={testIds.messageLabel}>\n        {labelArray.map((item, idx) =>\n          typeof item === 'string' ? (\n            // eslint-disable-next-line react/no-array-index-key\n            <Fragment key={idx}>{item}</Fragment>\n          ) : (\n            // eslint-disable-next-line react/no-array-index-key\n            <Button variant='link' href={item.href} onClick={item.onClick} key={idx}>\n              {item.text}\n            </Button>\n          )\n        )}\n      </StyledBannerMessageLabel>\n      {description && (\n        <>\n          {' '}\n          <Text data-testid={testIds.messageDescription} variant='secondary'>\n            {description}\n          </Text>\n        </>\n      )}\n      {action && (\n        <>\n          {' '}\n          <Text variant='secondary'>\n            <Button\n              data-testid={testIds.messageAction}\n              variant='link'\n              href={action.href}\n              onClick={action.onClick}\n              {...action}\n            >\n              {action.text}\n            </Button>\n          </Text>\n        </>\n      )}\n    </StyledBannerMessage>\n  );\n});\n\nconst prepareMessages = (\n  messages: (string | BannerMessage)[],\n  testId: TestIdProp['testId']\n): ReactNode[] => {\n  return messages.flatMap(msg => {\n    if (typeof msg === 'string') {\n      return [<BannerMessageItem label={msg} />];\n    }\n\n    if (msg.items && msg.items.length > 0) {\n      const { items, ...restMsg } = msg;\n      const subMessages = prepareMessages(items, testId);\n      return [<BannerMessageItem {...restMsg} testId={testId} />, subMessages];\n    }\n\n    return [<BannerMessageItem {...msg} testId={testId} />];\n  });\n};\n\nexport default withTestIds(\n  forwardRef<RefElement<BannerProps>, PropsWithoutRef<BannerProps>>(function Banner(\n    {\n      testId,\n      variant,\n      headingText,\n      headingTag = 'h3',\n      messages = [],\n      content,\n      onDismiss,\n      handle,\n      ...restProps\n    },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getBannerTestIds);\n    const messagesToRender = useMemo(() => prepareMessages(messages, testId), [messages]);\n    const firstMessageHasChildren =\n      messages.length > 0 &&\n      typeof messages[0] === 'object' &&\n      Array.isArray(messages[0].items) &&\n      messages[0].items.length > 0;\n    const count = messages.length;\n    const t = useI18n();\n    const theme = useTheme();\n    const [collapsed, setCollapsed] = useState(false);\n\n    const bannerRef = useConsolidatedRef(ref);\n    const expandCollapseBtnRef = useRef<HTMLButtonElement>(null);\n\n    const showHeader =\n      headingText !== undefined || (content ? count !== 0 : count !== 1 || firstMessageHasChildren);\n    const expandable = showHeader && (count !== 0 || !!content);\n    const showCount = count > 0;\n\n    let heading = headingText;\n    let icon: string;\n    let role: 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 = 'diamond-minus';\n        role = 'alert';\n        ariaLive = 'assertive';\n        break;\n      case 'success':\n        heading ??= t('success');\n        icon = theme.base['icon-set'] === 'budicon' ? 'check-solid' : 'check';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n      case 'ai':\n        heading ??= t('ai_generated');\n        icon = 'polaris-solid';\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          // Empty timeout ensures that the banner will take focus after any other programmatic focus events\n          setTimeout(() => {\n            if (expandCollapseBtnRef.current) {\n              expandCollapseBtnRef.current.focus();\n            } else if (bannerRef.current) {\n              focusHeadingOrContainer(bannerRef.current, heading);\n            }\n          });\n        }\n      }),\n      []\n    );\n\n    const iconRegion = (\n      <Flex as={StyledBannerStatus} container={{ alignItems: 'center' }} variant={variant}>\n        <Icon name={icon} />\n      </Flex>\n    );\n\n    const dismissButton = onDismiss ? (\n      <Button\n        data-testid={testIds.dismiss}\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    ) : null;\n\n    return (\n      <Grid\n        data-testid={testIds.root}\n        {...restProps}\n        as={StyledBanner}\n        container={\n          showHeader\n            ? { cols: 'minmax(0, 1fr)' }\n            : { cols: 'min-content minmax(0, 1fr) auto', gap: 1, alignItems: 'start' }\n        }\n        role={role}\n        aria-live={ariaLive}\n        headingTag={headingTag}\n        variant={variant}\n        ref={bannerRef}\n      >\n        {!showHeader ? (\n          <>\n            {iconRegion}\n            <VisuallyHiddenText\n              as={headingTag}\n            >{`${heading} ${showCount ? count : ''}`}</VisuallyHiddenText>\n            <Flex item={{ alignSelf: 'center', grow: 1 }} as={content ? undefined : 'ul'}>\n              {(() => {\n                if (content) {\n                  return <HTML content={content} />;\n                }\n\n                if (typeof messages[0] === 'string') {\n                  return <BannerMessageItem testId={testId} label={messages[0]} as='li' />;\n                }\n\n                return <BannerMessageItem {...messages[0]} testId={testId} as='li' />;\n              })()}\n            </Flex>\n            {dismissButton}\n          </>\n        ) : (\n          <Flex container={{ direction: 'column', justify: 'center' }}>\n            <Grid\n              container={{\n                cols: expandable ? 'auto 1fr auto' : '1fr auto',\n                areas: expandable ? '\"toggle heading dismiss\"' : '\"heading dismiss\"',\n                gap: 0.5,\n                alignItems: 'start'\n              }}\n            >\n              <Grid\n                container={{ cols: 'min-content auto', gap: 1 }}\n                item={{ area: 'heading', alignSelf: 'center' }}\n              >\n                {iconRegion}\n                <Grid\n                  data-testid={testIds.heading}\n                  container={{\n                    cols: `fit-content(100%) ${showCount ? 'max-content' : ''}`,\n                    gap: 0.5,\n                    alignItems: 'center'\n                  }}\n                  as={Text}\n                  forwardedAs={headingTag}\n                  variant='h3'\n                >\n                  {heading} {showCount && <Count>{count}</Count>}\n                </Grid>\n              </Grid>\n              {expandable && (\n                <Grid item={{ area: 'toggle' }}>\n                  <ExpandCollapseButton\n                    data-testid={testIds.expandCollapse}\n                    onToggle={() => {\n                      setCollapsed(cur => !cur);\n                    }}\n                    label={t(collapsed ? 'expand' : 'collapse')}\n                    aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [heading])}\n                    aria-expanded={!collapsed}\n                    iconOnly\n                    ref={expandCollapseBtnRef}\n                    expanded={!collapsed}\n                  />\n                </Grid>\n              )}\n              <Grid item={{ area: 'dismiss' }}>{dismissButton}</Grid>\n            </Grid>\n            {expandable && (\n              <ExpandCollapse collapsed={collapsed}>\n                <Flex\n                  container={{\n                    direction: 'column',\n                    gap: 1,\n                    pad: [1, 2]\n                  }}\n                >\n                  {messagesToRender.length > 0 ? (\n                    <StyledBannerMessageList items={messagesToRender} />\n                  ) : null}\n                  {content && <HTML content={content} />}\n                </Flex>\n              </ExpandCollapse>\n            )}\n          </Flex>\n        )}\n      </Grid>\n    );\n  }),\n  getBannerTestIds\n);\n"]}

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

@@ -0,0 +1,22 @@
+import type { DefaultTheme } from 'styled-components';
+import type { PropsWithDefaults } from '../../types';
+import type { BannerProps } from './Banner';
+export declare const getVariantColors: (variant: BannerProps["variant"], theme: DefaultTheme) => {
+    background: string;
+    borderColor: string;
+    iconColor: string;
+    textColor: string;
+};
+interface StyledBannerProps extends Pick<PropsWithDefaults<BannerProps, 'headingTag'>, 'headingTag' | 'variant'> {
+}
+export declare const StyledBanner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBannerProps>> & string;
+export declare const StyledBannerStatus: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    variant: BannerProps["variant"];
+}>> & string;
+export declare const StyledBannerMessageList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../List").UnorderedListProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("../../types").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string & Omit<import("../../types").ForwardRefForwardPropsComponent<import("../List").UnorderedListProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledBannerMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledBannerMessageLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export {};
+//# sourceMappingURL=Banner.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAOrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,eAAO,MAAM,gBAAgB,GAAI,SAAS,WAAW,CAAC,SAAS,CAAC,EAAE,OAAO,YAAY;;;;;CAuBpF,CAAC;AAEF,UAAU,iBACR,SAAQ,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CAAG;AAEzF,eAAO,MAAM,YAAY,sPA4BvB,CAAC;AAIH,eAAO,MAAM,kBAAkB;aAAyB,WAAW,CAAC,SAAS,CAAC;YAkB7E,CAAC;AAIF,eAAO,MAAM,uBAAuB;;sKAEnC,CAAC;AAIF,eAAO,MAAM,mBAAmB,+NAG/B,CAAC;AAIF,eAAO,MAAM,wBAAwB,+NAIpC,CAAC"}

package/lib/components/Banner/Banner.styles.js

@@ -0,0 +1,84 @@
+import { mix } from 'polished';
+import styled, { css } from 'styled-components';
+import { readableColor, readableHue } from '../../styles';
+import { defaultThemeProp } from '../../theme';
+import { StyledText } from '../Text';
+import { StyledIcon } from '../Icon';
+import { UnorderedList } from '../List';
+import { StyledCard } from '../Card';
+import { StyledModal } from '../Modal/Modal.styles';
+export const getVariantColors = (variant, theme) => {
+    const variantBackground = theme.components.banner[variant].background;
+    const background = mix(theme.components.banner[variant]['background-mix'], variantBackground, theme.base.palette['primary-background']);
+    const iconColor = readableHue(variantBackground, background, {
+        level: 'AANonText'
+    });
+    const borderColor = mix(0.7, iconColor, theme.base.palette['primary-background']);
+    const textColor = readableColor(background);
+    return {
+        background,
+        borderColor,
+        iconColor,
+        textColor
+    };
+};
+export const StyledBanner = styled.div(({ theme, headingTag, variant }) => {
+    const colors = getVariantColors(variant, theme);
+    return css `
+    padding: ${theme.base.spacing};
+    color: ${colors.textColor};
+    background: ${colors.background};
+    border: 0.0625rem solid ${colors.borderColor};
+    min-inline-size: 100%;
+    inline-size: 0;
+    min-block-size: 2.25rem;
+    border-radius: ${theme.components.card['border-radius']};
+
+    ${StyledCard} &,
+    ${StyledModal} & {
+      border-radius: calc(
+        ${theme.components['form-control']['border-radius']} * ${theme.base['border-radius']}
+      );
+    }
+
+    &:has(${headingTag}${StyledText}:focus) {
+      box-shadow: ${theme.base.shadow.focus};
+    }
+
+    ${headingTag}${StyledText} {
+      word-break: break-word;
+    }
+  `;
+});
+StyledBanner.defaultProps = defaultThemeProp;
+export const StyledBannerStatus = styled.div(({ theme, variant }) => {
+    const colors = getVariantColors(variant, theme);
+    return css `
+      block-size: ${theme.base['hit-area']['mouse-min']};
+
+      @media (pointer: coarse) {
+        & {
+          block-size: ${theme.base['hit-area']['finger-min']};
+        }
+      }
+
+      ${StyledIcon} {
+        color: ${colors.iconColor};
+      }
+    `;
+});
+StyledBannerStatus.defaultProps = defaultThemeProp;
+export const StyledBannerMessageList = styled(UnorderedList) `
+  padding-inline-start: 0;
+`;
+StyledBannerMessageList.defaultProps = defaultThemeProp;
+export const StyledBannerMessage = styled.span `
+  overflow-wrap: break-word;
+  list-style: none;
+`;
+StyledBannerMessage.defaultProps = defaultThemeProp;
+export const StyledBannerMessageLabel = styled.span(({ theme }) => css `
+    font-weight: ${theme.base['font-weight']['semi-bold']};
+  `);
+StyledBannerMessageLabel.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Banner.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.styles.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix } from 'polished';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\n\nimport { readableColor, readableHue } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport type { PropsWithDefaults } from '../../types';\nimport { StyledText } from '../Text';\nimport { StyledIcon } from '../Icon';\nimport { UnorderedList } from '../List';\nimport { StyledCard } from '../Card';\nimport { StyledModal } from '../Modal/Modal.styles';\n\nimport type { BannerProps } from './Banner';\n\nexport const getVariantColors = (variant: BannerProps['variant'], theme: DefaultTheme) => {\n  const variantBackground = theme.components.banner[variant].background;\n\n  const background = mix(\n    theme.components.banner[variant]['background-mix'],\n    variantBackground,\n    theme.base.palette['primary-background']\n  );\n\n  const iconColor = readableHue(variantBackground, background, {\n    level: 'AANonText'\n  });\n\n  const borderColor = mix(0.7, iconColor, theme.base.palette['primary-background']);\n\n  const textColor = readableColor(background);\n\n  return {\n    background,\n    borderColor,\n    iconColor,\n    textColor\n  };\n};\n\ninterface StyledBannerProps\n  extends Pick<PropsWithDefaults<BannerProps, 'headingTag'>, 'headingTag' | 'variant'> {}\n\nexport const StyledBanner = styled.div<StyledBannerProps>(({ theme, headingTag, variant }) => {\n  const colors = getVariantColors(variant, theme);\n\n  return css`\n    padding: ${theme.base.spacing};\n    color: ${colors.textColor};\n    background: ${colors.background};\n    border: 0.0625rem solid ${colors.borderColor};\n    min-inline-size: 100%;\n    inline-size: 0;\n    min-block-size: 2.25rem;\n    border-radius: ${theme.components.card['border-radius']};\n\n    ${StyledCard} &,\n    ${StyledModal} & {\n      border-radius: calc(\n        ${theme.components['form-control']['border-radius']} * ${theme.base['border-radius']}\n      );\n    }\n\n    &:has(${headingTag}${StyledText}:focus) {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    ${headingTag}${StyledText} {\n      word-break: break-word;\n    }\n  `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledBannerStatus = styled.div<{ variant: BannerProps['variant'] }>(\n  ({ theme, variant }) => {\n    const colors = getVariantColors(variant, theme);\n\n    return css`\n      block-size: ${theme.base['hit-area']['mouse-min']};\n\n      @media (pointer: coarse) {\n        & {\n          block-size: ${theme.base['hit-area']['finger-min']};\n        }\n      }\n\n      ${StyledIcon} {\n        color: ${colors.iconColor};\n      }\n    `;\n  }\n);\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessageList = styled(UnorderedList)`\n  padding-inline-start: 0;\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\nexport const StyledBannerMessageLabel = styled.span(\n  ({ theme }) => css`\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n  `\n);\n\nStyledBannerMessageLabel.defaultProps = defaultThemeProp;\n"]}

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

@@ -1,5 +1,4 @@
 import type { Ref } from 'react';
-import type { DefaultTheme } from 'styled-components';
 import type { BaseProps, ForwardRefForwardPropsComponent, NoChildrenProp } from '../../types';
 import type { MenuItemProps } from '../Menu';
 export interface BreadcrumbsProps extends BaseProps, NoChildrenProp {
@@ -14,10 +13,10 @@ export interface BreadcrumbsProps extends BaseProps, NoChildrenProp {
     /** Ref forwarded to the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledBreadcrumbs: import("styled-components").StyledComponent<"div", DefaultTheme, {
+export declare const StyledBreadcrumbs: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     oneItemRemaining: boolean;
     fixedLength: boolean;
-}, never>;
+}>> & string;
 declare const Breadcrumbs: ForwardRefForwardPropsComponent<BreadcrumbsProps>;
 export default Breadcrumbs;
 //# sourceMappingURL=Breadcrumbs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAc,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKtD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAU9F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAK7C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,mHAAmH;IACnH,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAYD,eAAO,MAAM,iBAAiB;sBACV,OAAO;iBACZ,OAAO;SA8BrB,CAAC;AAuBF,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,CAmJlE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAc,MAAM,OAAO,CAAC;AAO9D,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAU9F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAK7C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,mHAAmH;IACnH,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAYD,eAAO,MAAM,iBAAiB;sBACV,OAAO;iBACZ,OAAO;YA8BrB,CAAC;AAuBF,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,CAmJlE,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -18,7 +18,7 @@ export interface BareButtonProps extends BaseProps {
     /** Ref forwarded to the wrapping element. */
     ref?: ButtonProps['ref'];
 }
-export declare const StyledBareButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBareButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 declare const BareButton: ForwardRefForwardPropsComponent<BareButtonProps>;
 export default BareButton;
 //# sourceMappingURL=BareButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BareButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/BareButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAgB,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAI5F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,wFAAwF;IACxF,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,4GAW5B,CAAC;AAIF,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CA4D/D,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"BareButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/BareButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAgB,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAI5F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,wFAAwF;IACxF,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,yOAc5B,CAAC;AAIF,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CA4D/D,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/lib/components/Button/BareButton.js

@@ -6,11 +6,14 @@ import { useConsolidatedRef } from '../../hooks';
 export const StyledBareButton = styled.button `
   background: none;
   border: none;
-  outline: none;
   cursor: pointer;
   user-select: none;
   color: inherit;
 
+  @media (forced-colors: none) {
+    outline: none;
+  }
+
   & + & {
     margin-inline-start: ${props => props.theme.base.spacing};
   }

package/lib/components/Button/BareButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BareButton.js","sourceRoot":"","sources":["../../../src/components/Button/BareButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAuBjD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;2BASlB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE3D,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAqD,UAAU,CAAC,SAAS,UAAU,CACjG,EACE,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,GAAG,SAAS,EACoC,EAClD,GAA2B;IAE3B,MAAM,cAAc,GAAG,MAAM,EAAc,CAAC;IAC5C,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;QACrC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,CAAC,CAAoD,EAAE,EAAE;QAC9E,SAAS,CAAC,WAA6C,EAAE,CAAC,CAAC,CAAC,CAAC;QAC9D,CAAC,CAAC,OAAO,EAAE,CAAC;QACZ,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAoD,EAAE,EAAE;QAC7E,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,gBAAgB,CAAC;QACvF,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;QAEnC,IAAI,WAAW,IAAI,SAAS,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE,CAAC;YAChE,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC7B,CAAC;QAED,OAAQ,SAAS,CAAC,SAA2C,EAAE,CAAC,CAAC,CAAC,CAAC;IACrE,CAAC,CAAC;IAEF,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,KAAC,gBAAgB,IACf,EAAE,EAAC,GAAG,EACN,GAAG,EAAE,SAAmC,EACxC,IAAI,EAAE,IAAI,EAEJ,QAAQ,KACV,SAAS,EACb,WAAW,EAAE,eAAe,EAC5B,kBAAkB,EAAE,aAAa,GACjC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,gBAAgB,IACf,GAAG,EAAE,SAAmC,EACxC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,KACd,SAAS,EACb,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,GACxB,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, useRef, useEffect } from 'react';\nimport type { PropsWithoutRef, Ref, MouseEvent, MouseEventHandler } from 'react';\nimport styled from 'styled-components';\n\nimport type { BaseProps, ForwardProps, ForwardRefForwardPropsComponent } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useConsolidatedRef } from '../../hooks';\n\nimport type { ButtonProps } from './Button';\n\nexport interface BareButtonProps extends BaseProps {\n  /** Text or content for the Button. */\n  children: ButtonProps['children'];\n  /**\n   * Determines if the Button will be disabled.\n   * @default false\n   */\n  disabled?: ButtonProps['disabled'];\n  /** A location to navigate to. Passing an href will render a Link styled as a Button. */\n  href?: ButtonProps['href'];\n  /**\n   * Controls the behavior of a Button within a Form.\n   * @default 'button'\n   */\n  type?: ButtonProps['type'];\n  /** Ref forwarded to the wrapping element. */\n  ref?: ButtonProps['ref'];\n}\n\nexport const StyledBareButton = styled.button`\n  background: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  user-select: none;\n  color: inherit;\n\n  & + & {\n    margin-inline-start: ${props => props.theme.base.spacing};\n  }\n`;\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nconst BareButton: ForwardRefForwardPropsComponent<BareButtonProps> = forwardRef(function BareButton(\n  {\n    type = 'button',\n    disabled = false,\n    href,\n    ...restProps\n  }: PropsWithoutRef<BareButtonProps> & ForwardProps,\n  ref: BareButtonProps['ref']\n) {\n  const mouseDownEvent = useRef<MouseEvent>();\n  const buttonRef = useConsolidatedRef(ref);\n\n  useEffect(() => {\n    return () => {\n      mouseDownEvent.current = undefined;\n    };\n  }, []);\n\n  const handleMouseDown = (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n    e.persist();\n    mouseDownEvent.current = e;\n  };\n\n  const handleMouseUp = (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n    mouseDownEvent.current = undefined;\n\n    if (shouldFocus && buttonRef.current !== document.activeElement) {\n      buttonRef.current?.focus();\n    }\n\n    return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n  };\n\n  if (href) {\n    return (\n      <StyledBareButton\n        as='a'\n        ref={buttonRef as Ref<HTMLAnchorElement>}\n        href={href}\n        // Not actually included in the types for a, but we've been setting it, so we should continue for now.\n        {...{ disabled }}\n        {...restProps}\n        onMouseDown={handleMouseDown}\n        onMouseDownCapture={handleMouseUp}\n      />\n    );\n  }\n\n  return (\n    <StyledBareButton\n      ref={buttonRef as Ref<HTMLButtonElement>}\n      type={type}\n      disabled={disabled}\n      {...restProps}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n    />\n  );\n});\n\nexport default BareButton;\n"]}
+{"version":3,"file":"BareButton.js","sourceRoot":"","sources":["../../../src/components/Button/BareButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAuBjD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;;;2BAYlB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE3D,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAqD,UAAU,CAAC,SAAS,UAAU,CACjG,EACE,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,GAAG,SAAS,EACoC,EAClD,GAA2B;IAE3B,MAAM,cAAc,GAAG,MAAM,EAAc,CAAC;IAC5C,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;QACrC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,CAAC,CAAoD,EAAE,EAAE;QAC9E,SAAS,CAAC,WAA6C,EAAE,CAAC,CAAC,CAAC,CAAC;QAC9D,CAAC,CAAC,OAAO,EAAE,CAAC;QACZ,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAoD,EAAE,EAAE;QAC7E,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,gBAAgB,CAAC;QACvF,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;QAEnC,IAAI,WAAW,IAAI,SAAS,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE,CAAC;YAChE,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC7B,CAAC;QAED,OAAQ,SAAS,CAAC,SAA2C,EAAE,CAAC,CAAC,CAAC,CAAC;IACrE,CAAC,CAAC;IAEF,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,KAAC,gBAAgB,IACf,EAAE,EAAC,GAAG,EACN,GAAG,EAAE,SAAmC,EACxC,IAAI,EAAE,IAAI,EAEJ,QAAQ,KACV,SAAS,EACb,WAAW,EAAE,eAAe,EAC5B,kBAAkB,EAAE,aAAa,GACjC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,gBAAgB,IACf,GAAG,EAAE,SAAmC,EACxC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,KACd,SAAS,EACb,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,GACxB,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, useRef, useEffect } from 'react';\nimport type { PropsWithoutRef, Ref, MouseEvent, MouseEventHandler } from 'react';\nimport styled from 'styled-components';\n\nimport type { BaseProps, ForwardProps, ForwardRefForwardPropsComponent } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useConsolidatedRef } from '../../hooks';\n\nimport type { ButtonProps } from './Button';\n\nexport interface BareButtonProps extends BaseProps {\n  /** Text or content for the Button. */\n  children: ButtonProps['children'];\n  /**\n   * Determines if the Button will be disabled.\n   * @default false\n   */\n  disabled?: ButtonProps['disabled'];\n  /** A location to navigate to. Passing an href will render a Link styled as a Button. */\n  href?: ButtonProps['href'];\n  /**\n   * Controls the behavior of a Button within a Form.\n   * @default 'button'\n   */\n  type?: ButtonProps['type'];\n  /** Ref forwarded to the wrapping element. */\n  ref?: ButtonProps['ref'];\n}\n\nexport const StyledBareButton = styled.button`\n  background: none;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  color: inherit;\n\n  @media (forced-colors: none) {\n    outline: none;\n  }\n\n  & + & {\n    margin-inline-start: ${props => props.theme.base.spacing};\n  }\n`;\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nconst BareButton: ForwardRefForwardPropsComponent<BareButtonProps> = forwardRef(function BareButton(\n  {\n    type = 'button',\n    disabled = false,\n    href,\n    ...restProps\n  }: PropsWithoutRef<BareButtonProps> & ForwardProps,\n  ref: BareButtonProps['ref']\n) {\n  const mouseDownEvent = useRef<MouseEvent>();\n  const buttonRef = useConsolidatedRef(ref);\n\n  useEffect(() => {\n    return () => {\n      mouseDownEvent.current = undefined;\n    };\n  }, []);\n\n  const handleMouseDown = (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n    e.persist();\n    mouseDownEvent.current = e;\n  };\n\n  const handleMouseUp = (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n    mouseDownEvent.current = undefined;\n\n    if (shouldFocus && buttonRef.current !== document.activeElement) {\n      buttonRef.current?.focus();\n    }\n\n    return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n  };\n\n  if (href) {\n    return (\n      <StyledBareButton\n        as='a'\n        ref={buttonRef as Ref<HTMLAnchorElement>}\n        href={href}\n        // Not actually included in the types for a, but we've been setting it, so we should continue for now.\n        {...{ disabled }}\n        {...restProps}\n        onMouseDown={handleMouseDown}\n        onMouseDownCapture={handleMouseUp}\n      />\n    );\n  }\n\n  return (\n    <StyledBareButton\n      ref={buttonRef as Ref<HTMLButtonElement>}\n      type={type}\n      disabled={disabled}\n      {...restProps}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n    />\n  );\n});\n\nexport default BareButton;\n"]}

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

@@ -6,7 +6,7 @@ export interface BareRoleButtonProps extends BaseProps {
     onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledBareRoleButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBareRoleButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const BareRoleButton: ForwardRefForwardPropsComponent<BareRoleButtonProps>;
 export default BareRoleButton;
 //# sourceMappingURL=BareRoleButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BareRoleButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/BareRoleButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAC;AAGxF,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAE9E,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACvD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB,yGAEhC,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,+BAA+B,CAAC,mBAAmB,CAiCxE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"BareRoleButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/BareRoleButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAC;AAGxF,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAE9E,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACvD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB,6NAEhC,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,+BAA+B,CAAC,mBAAmB,CAiCxE,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -1,5 +1,4 @@
 import type { ReactNode, Ref } from 'react';
-import type { DefaultTheme } from 'styled-components';
 import type { BaseProps, ForwardRefForwardPropsComponent, PropsWithDefaults, AsProp } from '../../types';
 export interface ButtonProps extends BaseProps, AsProp {
     /** Text or content for the Button. */
@@ -35,6 +34,11 @@ export interface ButtonProps extends BaseProps, AsProp {
     label?: string;
     /** The aria label text will be inserted as the aria-label on the Button. */
     'aria-label'?: string;
+    /**
+     * Applies visual disabled styles without disabling the button element itself.
+     * @default false
+     */
+    'aria-disabled'?: boolean | 'true' | 'false';
     /**
      * Optionally renders an indeterminate progress indicator in a button.
      * @default false
@@ -44,8 +48,8 @@ export interface ButtonProps extends BaseProps, AsProp {
     ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
 }
 type ButtonPropsWithDefaults = PropsWithDefaults<ButtonProps, 'variant' | 'type' | 'disabled' | 'icon' | 'loading'>;
-export declare const StyledButton: import("styled-components").StyledComponent<"button", DefaultTheme, ButtonPropsWithDefaults, never>;
-export declare const StyledButtonLink: import("styled-components").StyledComponent<"a", DefaultTheme, Pick<ButtonPropsWithDefaults, "href" | "variant"> & Pick<ButtonProps, "loading">, never>;
+export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonPropsWithDefaults>> & string;
+export declare const StyledButtonLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, Pick<ButtonPropsWithDefaults, "href" | "variant"> & Pick<ButtonProps, "loading">>> & string;
 declare const Button: ForwardRefForwardPropsComponent<ButtonProps>;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

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":"AACA,OAAO,KAAK,EACV,SAAS,EAET,GAAG,EAGJ,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,KAAK,EACV,SAAS,EAET,+BAA+B,EAC/B,iBAAiB,EACjB,MAAM,EACP,MAAM,aAAa,CAAC;AAkBrB,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,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAClD;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAyEF,eAAO,MAAM,YAAY,qGAqOxB,CAAC;AAIF,eAAO,MAAM,gBAAgB,yJA+D3B,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,+BAA+B,CAAC,WAAW,CAkGvD,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EAET,GAAG,EAGJ,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EACV,SAAS,EAET,+BAA+B,EAC/B,iBAAiB,EACjB,MAAM,EACP,MAAM,aAAa,CAAC;AAkBrB,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,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC7C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAClD;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAgFF,eAAO,MAAM,YAAY,wQAqOxB,CAAC;AAIF,eAAO,MAAM,gBAAgB,iUA+D3B,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,+BAA+B,CAAC,WAAW,CA2GvD,CAAC;AAEH,eAAe,MAAM,CAAC"}