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

package/lib/components/Badges/Count.js

@@ -30,7 +30,13 @@ export const StyledCount = styled.span(({ theme, variant, children }) => {
           aspect-ratio: 1 / 1;
         `
         : css `
-          padding-inline: ${theme.base.spacing};
+          /*
+            Match the "padding" when rendered with a single character.
+            1rem is the inline-size. 1ch is the single character width.
+            Their difference is the space around the character.
+            Divide by 2 to distribute evenly between both sides.
+          */
+          padding-inline: calc((1rem - 1ch) / 2);
         `}
   `;
 });
@@ -71,8 +77,8 @@ const formatValue = (val) => {
         return `${val}`;
     return `${val < 0 ? '-' : ''}${truncateValue(absVal)}`;
 };
-export default withTestIds(forwardRef(function Count({ testId, variant = 'default', children, ...restProps }, ref) {
+export default withTestIds(forwardRef(function Count({ testId, variant = 'default', hasMore, children, ...restProps }, ref) {
     const testIds = useTestIds(testId, getCountTestIds);
-    return Number.isInteger(children) ? (_jsx(StyledCount, { "data-testid": testIds.root, variant: variant, ...restProps, ref: ref, children: formatValue(children) })) : null;
+    return Number.isInteger(children) ? (_jsx(StyledCount, { "data-testid": testIds.root, variant: variant, ...restProps, ref: ref, children: `${formatValue(children)}${hasMore ? '+' : ''}`.replace('++', '+') })) : null;
 }), getCountTestIds);
 //# sourceMappingURL=Count.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Count.js","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch, withTestIds } from '../../utils';\nimport type { PropsWithDefaults, RefElement, WithAttributes, TestIdProp } from '../../types';\nimport { calculateFontSize } from '../../styles';\nimport { useTestIds } from '../../hooks';\n\nimport { getCountTestIds } from './Badges.test-ids';\n\nexport type CountProps = WithAttributes<\n  'span',\n  TestIdProp & {\n    /** Determines the color to render the Badge as. This color is derived from the Theme.\n     * @default 'default'\n     */\n    variant?: 'default' | 'urgent';\n    /** The count to be displayed within the Badge. */\n    children: number | null;\n  }\n>;\n\ntype CountPropsWithDefaults = PropsWithDefaults<CountProps, 'variant'>;\n\nexport const StyledCount = styled.span<\n  Pick<CountPropsWithDefaults, 'variant'> & { children: string }\n>(({ theme, variant, children }) => {\n  const { foreground, background } = theme.components.badges.count[variant];\n\n  const shadow = tryCatch(() => rgba(foreground, 0.1));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    display: inline-block;\n    block-size: 1rem;\n    flex-shrink: 0;\n    border-radius: calc(9999 * ${theme.base['border-radius']});\n    color: ${foreground};\n    background-color: ${background};\n    box-shadow: inset 0 0 0 0.0625rem ${shadow};\n    font-size: ${fontSize.xxs};\n    font-weight: ${theme.base['font-weight'].bold};\n    line-height: 1rem;\n    text-align: center;\n    white-space: nowrap;\n\n    ${children.length === 1\n      ? css`\n          aspect-ratio: 1 / 1;\n        `\n      : css`\n          padding-inline: ${theme.base.spacing};\n        `}\n  `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\n// Replace this with Intl.NumberFormat when roundingMode is supported.\n/* eslint-disable yoda */\nconst getLabel = (val: number): string => {\n  if (val < 1_000) return '';\n  if (1_000 <= val && val < 1_000_000) return 'K';\n  if (1_000_000 <= val && val < 1_000_000_000) return 'M';\n  if (1_000_000_000 <= val && val < 1_000_000_000_000) return 'B';\n  if (1_000_000_000_000 <= val && val < 1_000_000_000_000_000) return 'T';\n  return '';\n};\n/* eslint-enable yoda */\n\nconst truncateValue = (val: number): string => {\n  for (let magnitude = 3; magnitude < 15; magnitude += 3) {\n    if (val < 10 ** (magnitude + 1)) {\n      return `${`${val}`.slice(0, 1)}.${`${val}`.slice(1, 2)}${getLabel(val)}`;\n    }\n    if (val < 10 ** (magnitude + 2)) {\n      return `${`${val}`.slice(0, 2)}${getLabel(val)}`;\n    }\n    if (val < 10 ** (magnitude + 3)) {\n      return `${`${val}`.slice(0, 3)}${getLabel(val)}`;\n    }\n  }\n\n  return '999T+';\n};\n\nconst formatValue = (val: number): string => {\n  const absVal = Math.abs(val);\n\n  if (absVal < 1_000) return `${val}`;\n\n  return `${val < 0 ? '-' : ''}${truncateValue(absVal)}`;\n};\n\nexport default withTestIds(\n  forwardRef<RefElement<CountProps>, PropsWithoutRef<CountProps>>(function Count(\n    { testId, variant = 'default', children, ...restProps },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getCountTestIds);\n\n    return Number.isInteger(children) ? (\n      <StyledCount data-testid={testIds.root} variant={variant} {...restProps} ref={ref}>\n        {formatValue(children as number)}\n      </StyledCount>\n    ) : null;\n  }),\n  getCountTestIds\n);\n"]}
+{"version":3,"file":"Count.js","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAkBpD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAEpC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;IACjC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAE1E,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;;;;iCAIqB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;aAC/C,UAAU;wBACC,UAAU;wCACM,MAAM;iBAC7B,QAAQ,CAAC,GAAG;mBACV,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;;;;;MAK3C,QAAQ,CAAC,MAAM,KAAK,CAAC;QACrB,CAAC,CAAC,GAAG,CAAA;;SAEF;QACH,CAAC,CAAC,GAAG,CAAA;;;;;;;;SAQF;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,sEAAsE;AACtE,yBAAyB;AACzB,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAU,EAAE;IACvC,IAAI,GAAG,GAAG,KAAK;QAAE,OAAO,EAAE,CAAC;IAC3B,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,GAAG,SAAS;QAAE,OAAO,GAAG,CAAC;IAChD,IAAI,SAAS,IAAI,GAAG,IAAI,GAAG,GAAG,aAAa;QAAE,OAAO,GAAG,CAAC;IACxD,IAAI,aAAa,IAAI,GAAG,IAAI,GAAG,GAAG,iBAAiB;QAAE,OAAO,GAAG,CAAC;IAChE,IAAI,iBAAiB,IAAI,GAAG,IAAI,GAAG,GAAG,qBAAqB;QAAE,OAAO,GAAG,CAAC;IACxE,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AACF,wBAAwB;AAExB,MAAM,aAAa,GAAG,CAAC,GAAW,EAAU,EAAE;IAC5C,KAAK,IAAI,SAAS,GAAG,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,SAAS,IAAI,CAAC,EAAE,CAAC;QACvD,IAAI,GAAG,GAAG,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE,CAAC;YAChC,OAAO,GAAG,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QAC3E,CAAC;QACD,IAAI,GAAG,GAAG,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE,CAAC;YAChC,OAAO,GAAG,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QACnD,CAAC;QACD,IAAI,GAAG,GAAG,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE,CAAC;YAChC,OAAO,GAAG,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QACnD,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,GAAW,EAAU,EAAE;IAC1C,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAE7B,IAAI,MAAM,GAAG,KAAK;QAAE,OAAO,GAAG,GAAG,EAAE,CAAC;IAEpC,OAAO,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC;AACzD,CAAC,CAAC;AAEF,eAAe,WAAW,CACxB,UAAU,CAAsD,SAAS,KAAK,CAC5E,EAAE,MAAM,EAAE,OAAO,GAAG,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAChE,GAAG;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAEpD,OAAO,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAClC,KAAC,WAAW,mBAAc,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,KAAM,SAAS,EAAE,GAAG,EAAE,GAAG,YAC9E,GAAG,WAAW,CAAC,QAAkB,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,GACjE,CACf,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,EACF,eAAe,CAChB,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch, withTestIds } from '../../utils';\nimport type { PropsWithDefaults, RefElement, WithAttributes, TestIdProp } from '../../types';\nimport { calculateFontSize } from '../../styles';\nimport { useTestIds } from '../../hooks';\n\nimport { getCountTestIds } from './Badges.test-ids';\n\nexport type CountProps = WithAttributes<\n  'span',\n  TestIdProp & {\n    /** Determines the color to render the Badge as. This color is derived from the Theme.\n     * @default 'default'\n     */\n    variant?: 'default' | 'urgent';\n    /** The count to be displayed within the Badge. */\n    children: number | null;\n    /** Indicates whether there are more items than the count being displayed. If true, a \"+\" is appended to the count. */\n    hasMore?: boolean;\n  }\n>;\n\ntype CountPropsWithDefaults = PropsWithDefaults<CountProps, 'variant'>;\n\nexport const StyledCount = styled.span<\n  Pick<CountPropsWithDefaults, 'variant'> & { children: string }\n>(({ theme, variant, children }) => {\n  const { foreground, background } = theme.components.badges.count[variant];\n\n  const shadow = tryCatch(() => rgba(foreground, 0.1));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    display: inline-block;\n    block-size: 1rem;\n    flex-shrink: 0;\n    border-radius: calc(9999 * ${theme.base['border-radius']});\n    color: ${foreground};\n    background-color: ${background};\n    box-shadow: inset 0 0 0 0.0625rem ${shadow};\n    font-size: ${fontSize.xxs};\n    font-weight: ${theme.base['font-weight'].bold};\n    line-height: 1rem;\n    text-align: center;\n    white-space: nowrap;\n\n    ${children.length === 1\n      ? css`\n          aspect-ratio: 1 / 1;\n        `\n      : css`\n          /*\n            Match the \"padding\" when rendered with a single character.\n            1rem is the inline-size. 1ch is the single character width.\n            Their difference is the space around the character.\n            Divide by 2 to distribute evenly between both sides.\n          */\n          padding-inline: calc((1rem - 1ch) / 2);\n        `}\n  `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\n// Replace this with Intl.NumberFormat when roundingMode is supported.\n/* eslint-disable yoda */\nconst getLabel = (val: number): string => {\n  if (val < 1_000) return '';\n  if (1_000 <= val && val < 1_000_000) return 'K';\n  if (1_000_000 <= val && val < 1_000_000_000) return 'M';\n  if (1_000_000_000 <= val && val < 1_000_000_000_000) return 'B';\n  if (1_000_000_000_000 <= val && val < 1_000_000_000_000_000) return 'T';\n  return '';\n};\n/* eslint-enable yoda */\n\nconst truncateValue = (val: number): string => {\n  for (let magnitude = 3; magnitude < 15; magnitude += 3) {\n    if (val < 10 ** (magnitude + 1)) {\n      return `${`${val}`.slice(0, 1)}.${`${val}`.slice(1, 2)}${getLabel(val)}`;\n    }\n    if (val < 10 ** (magnitude + 2)) {\n      return `${`${val}`.slice(0, 2)}${getLabel(val)}`;\n    }\n    if (val < 10 ** (magnitude + 3)) {\n      return `${`${val}`.slice(0, 3)}${getLabel(val)}`;\n    }\n  }\n\n  return '999T+';\n};\n\nconst formatValue = (val: number): string => {\n  const absVal = Math.abs(val);\n\n  if (absVal < 1_000) return `${val}`;\n\n  return `${val < 0 ? '-' : ''}${truncateValue(absVal)}`;\n};\n\nexport default withTestIds(\n  forwardRef<RefElement<CountProps>, PropsWithoutRef<CountProps>>(function Count(\n    { testId, variant = 'default', hasMore, children, ...restProps },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getCountTestIds);\n\n    return Number.isInteger(children) ? (\n      <StyledCount data-testid={testIds.root} variant={variant} {...restProps} ref={ref}>\n        {`${formatValue(children as number)}${hasMore ? '+' : ''}`.replace('++', '+')}\n      </StyledCount>\n    ) : null;\n  }),\n  getCountTestIds\n);\n"]}

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

@@ -1,5 +1,5 @@
 import type { NoChildrenProp, WithAttributes, TestIdProp } from '../../types';
-export declare const StyledKeyboard: import("styled-components").StyledComponent<"kbd", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledKeyboard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
 export type KeyboardProps = WithAttributes<'kbd', NoChildrenProp & TestIdProp & {
     keyName: string;
 }>;

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

@@ -1 +1 @@
-{"version":3,"file":"Keyboard.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Keyboard.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AA2E1F,eAAO,MAAM,cAAc,yGA+B1B,CAAC;AAGF,MAAM,MAAM,aAAa,GAAG,cAAc,CACxC,KAAK,EACL,cAAc,GAAG,UAAU,GAAG;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAClD,CAAC;;;;AAEF,wBAkBE"}
+{"version":3,"file":"Keyboard.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Keyboard.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AA0G1F,eAAO,MAAM,cAAc,uNA+B1B,CAAC;AAGF,MAAM,MAAM,aAAa,GAAG,cAAc,CACxC,KAAK,EACL,cAAc,GAAG,UAAU,GAAG;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAClD,CAAC;;;;AAEF,wBAkBE"}

package/lib/components/Badges/Keyboard.js

@@ -9,11 +9,11 @@ import VisuallyHiddenText from '../VisuallyHiddenText';
 import { getKeyboardTestIds } from './Badges.test-ids';
 const osxKeyMapper = {
     Command: '⌘',
+    Cmd: '⌘',
     Alt: '⌥',
     Option: '⌥',
     Control: '⌃',
     Return: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u21B5" }), _jsx(VisuallyHiddenText, { children: "Return" })] })),
-    Enter: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u21B5" }), _jsx(VisuallyHiddenText, { children: "Enter" })] })),
     Delete: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "Del" }), _jsx(VisuallyHiddenText, { children: "Delete" })] })),
     CommandOrControl: '⌘'
 };
@@ -30,7 +30,13 @@ const generalKeyMapper = {
     'Page up': (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "Pg up" }), _jsx(VisuallyHiddenText, { children: "Page up" })] })),
     'Page down': (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "Pg dn" }), _jsx(VisuallyHiddenText, { children: "Page down" })] })),
     Ins: 'Insert',
-    Shift: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u21E7" }), _jsx(VisuallyHiddenText, { children: "Shift" })] }))
+    Shift: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u21E7" }), _jsx(VisuallyHiddenText, { children: "Shift" })] })),
+    Up: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u2191" }), _jsx(VisuallyHiddenText, { children: "Up" })] })),
+    Down: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u2193" }), _jsx(VisuallyHiddenText, { children: "Down" })] })),
+    Left: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u2190" }), _jsx(VisuallyHiddenText, { children: "Left" })] })),
+    Right: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u2192" }), _jsx(VisuallyHiddenText, { children: "Right" })] })),
+    Enter: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u21B5" }), _jsx(VisuallyHiddenText, { children: "Enter" })] })),
+    Escape: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "Esc" }), _jsx(VisuallyHiddenText, { children: "Escape" })] }))
 };
 export const StyledKeyboard = styled.kbd(({ theme: { base, components: { text: { primary }, badges: { keyboard } } } }) => {
     return css `

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

@@ -1 +1 @@
-{"version":3,"file":"Keyboard.js","sourceRoot":"","sources":["../../../src/components/Badges/Keyboard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,MAAM,mBAAmB,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAEvD,MAAM,YAAY,GAA4C;IAC5D,OAAO,EAAE,GAAG;IACZ,GAAG,EAAE,GAAG;IACR,MAAM,EAAE,GAAG;IACX,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,CACN,8BACE,yDAA0B,EAC1B,KAAC,kBAAkB,yBAA4B,IAC9C,CACJ;IACD,KAAK,EAAE,CACL,8BACE,yDAA0B,EAC1B,KAAC,kBAAkB,wBAA2B,IAC7C,CACJ;IACD,MAAM,EAAE,CACN,8BACE,sDAA4B,EAC5B,KAAC,kBAAkB,yBAA4B,IAC9C,CACJ;IACD,gBAAgB,EAAE,GAAG;CACtB,CAAC;AAEF,MAAM,gBAAgB,GAA4C;IAChE,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,CACJ,8BACE,yDAA0B,EAC1B,KAAC,kBAAkB,0BAA6B,IAC/C,CACJ;IACD,OAAO,EAAE,CACP,8BACE,yDAA0B,EAC1B,KAAC,kBAAkB,0BAA6B,IAC/C,CACJ;IACD,SAAS,EAAE,WAAW;IACtB,gBAAgB,EAAE,MAAM;CACzB,CAAC;AAEF,MAAM,gBAAgB,GAA4C;IAChE,SAAS,EAAE,CACT,8BACE,wDAA8B,EAC9B,KAAC,kBAAkB,0BAA6B,IAC/C,CACJ;IACD,WAAW,EAAE,CACX,8BACE,wDAA8B,EAC9B,KAAC,kBAAkB,4BAA+B,IACjD,CACJ;IACD,GAAG,EAAE,QAAQ;IACb,KAAK,EAAE,CACL,8BACE,yDAA0B,EAC1B,KAAC,kBAAkB,wBAA2B,IAC7C,CACJ;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CACtC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EACJ,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,MAAM,EAAE,EAAE,QAAQ,EAAE,EACrB,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;0BACY,QAAQ,CAAC,kBAAkB,CAAC;eACvC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;qBAG1B,IAAI,CAAC,aAAa,CAAC;qBACnB,OAAO,CAAC,aAAa,CAAC;;;;gCAIX,QAAQ,CAAC,cAAc,CAAC;4BAC5B,IAAI,CAAC,eAAe,CAAC;;;;;;;;KAQ5C,CAAC;AACJ,CAAC,CACF,CAAC;AACF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAO/C,eAAe,WAAW,CACxB,UAAU,CAA4D,SAAS,QAAQ,CACrF,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EACjC,GAAG;IAEH,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAC;IACvC,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAEvD,OAAO,CACL,KAAC,cAAc,mBAAc,OAAO,CAAC,IAAI,KAAM,SAAS,EAAE,GAAG,EAAE,GAAG,YAC/D,CAAC,SAAS,IAAI,gBAAgB,CAAC,OAAO,CAAC,CAAC;YACvC,YAAY,CAAC,OAAO,CAAC;YACrB,gBAAgB,CAAC,OAAO,CAAC;YACzB,OAAO,GACM,CAClB,CAAC;AACJ,CAAC,CAAC,EACF,kBAAkB,CACnB,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport useOS from '../../hooks/useOS';\nimport type { NoChildrenProp, RefElement, WithAttributes, TestIdProp } from '../../types';\nimport { useTestIds } from '../../hooks';\nimport { withTestIds } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport { getKeyboardTestIds } from './Badges.test-ids';\n\nconst osxKeyMapper: { [key: string]: string | JSX.Element } = {\n  Command: '⌘',\n  Alt: '⌥',\n  Option: '⌥',\n  Control: '⌃',\n  Return: (\n    <>\n      <span aria-hidden>↵</span>\n      <VisuallyHiddenText>Return</VisuallyHiddenText>\n    </>\n  ),\n  Enter: (\n    <>\n      <span aria-hidden>↵</span>\n      <VisuallyHiddenText>Enter</VisuallyHiddenText>\n    </>\n  ),\n  Delete: (\n    <>\n      <span aria-hidden>Del</span>\n      <VisuallyHiddenText>Delete</VisuallyHiddenText>\n    </>\n  ),\n  CommandOrControl: '⌘'\n};\n\nconst windowsKeyMapper: { [key: string]: string | JSX.Element } = {\n  Control: 'Ctrl',\n  Alt: 'Alt',\n  Option: 'Alt',\n  Meta: (\n    <>\n      <span aria-hidden>⊞</span>\n      <VisuallyHiddenText>Windows</VisuallyHiddenText>\n    </>\n  ),\n  Command: (\n    <>\n      <span aria-hidden>⊞</span>\n      <VisuallyHiddenText>Windows</VisuallyHiddenText>\n    </>\n  ),\n  Backspace: 'Backspace',\n  CommandOrControl: 'Ctrl'\n};\n\nconst generalKeyMapper: { [key: string]: string | JSX.Element } = {\n  'Page up': (\n    <>\n      <span aria-hidden>Pg up</span>\n      <VisuallyHiddenText>Page up</VisuallyHiddenText>\n    </>\n  ),\n  'Page down': (\n    <>\n      <span aria-hidden>Pg dn</span>\n      <VisuallyHiddenText>Page down</VisuallyHiddenText>\n    </>\n  ),\n  Ins: 'Insert',\n  Shift: (\n    <>\n      <span aria-hidden>⇧</span>\n      <VisuallyHiddenText>Shift</VisuallyHiddenText>\n    </>\n  )\n};\n\nexport const StyledKeyboard = styled.kbd(\n  ({\n    theme: {\n      base,\n      components: {\n        text: { primary },\n        badges: { keyboard }\n      }\n    }\n  }) => {\n    return css`\n      background-color: ${keyboard['background-color']};\n      color: ${base.palette['foreground-color']};\n      display: inline-block;\n      position: relative;\n      font-family: ${base['font-family']};\n      font-weight: ${primary['font-weight']};\n      overflow: hidden;\n      white-space: nowrap;\n      padding: 0.125rem;\n      border: 0.0125rem solid ${keyboard['border-color']};\n      border-radius: calc(${base['border-radius']} / 4);\n      text-transform: capitalize;\n      text-align: center;\n      min-width: 1.25rem;\n      height: 1.25rem;\n      text-overflow: ellipsis;\n      line-height: 1rem;\n      inset-block-start: calc(1.25rem / 4 - 0.125rem);\n    `;\n  }\n);\nStyledKeyboard.defaultProps = defaultThemeProp;\n\nexport type KeyboardProps = WithAttributes<\n  'kbd',\n  NoChildrenProp & TestIdProp & { keyName: string }\n>;\n\nexport default withTestIds(\n  forwardRef<RefElement<KeyboardProps>, PropsWithoutRef<KeyboardProps>>(function Keyboard(\n    { testId, keyName, ...restProps },\n    ref\n  ) {\n    const { windows: isWindows } = useOS();\n    const testIds = useTestIds(testId, getKeyboardTestIds);\n\n    return (\n      <StyledKeyboard data-testid={testIds.root} {...restProps} ref={ref}>\n        {(isWindows && windowsKeyMapper[keyName]) ||\n          osxKeyMapper[keyName] ||\n          generalKeyMapper[keyName] ||\n          keyName}\n      </StyledKeyboard>\n    );\n  }),\n  getKeyboardTestIds\n);\n"]}
+{"version":3,"file":"Keyboard.js","sourceRoot":"","sources":["../../../src/components/Badges/Keyboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport useOS from '../../hooks/useOS';\nimport type { NoChildrenProp, RefElement, WithAttributes, TestIdProp } from '../../types';\nimport { useTestIds } from '../../hooks';\nimport { withTestIds } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport { getKeyboardTestIds } from './Badges.test-ids';\n\nconst osxKeyMapper: { [key: string]: string | JSX.Element } = {\n  Command: '⌘',\n  Cmd: '⌘',\n  Alt: '⌥',\n  Option: '⌥',\n  Control: '⌃',\n  Return: (\n    <>\n      <span aria-hidden>↵</span>\n      <VisuallyHiddenText>Return</VisuallyHiddenText>\n    </>\n  ),\n  Delete: (\n    <>\n      <span aria-hidden>Del</span>\n      <VisuallyHiddenText>Delete</VisuallyHiddenText>\n    </>\n  ),\n  CommandOrControl: '⌘'\n};\n\nconst windowsKeyMapper: { [key: string]: string | JSX.Element } = {\n  Control: 'Ctrl',\n  Alt: 'Alt',\n  Option: 'Alt',\n  Meta: (\n    <>\n      <span aria-hidden>⊞</span>\n      <VisuallyHiddenText>Windows</VisuallyHiddenText>\n    </>\n  ),\n  Command: (\n    <>\n      <span aria-hidden>⊞</span>\n      <VisuallyHiddenText>Windows</VisuallyHiddenText>\n    </>\n  ),\n  Backspace: 'Backspace',\n  CommandOrControl: 'Ctrl'\n};\n\nconst generalKeyMapper: { [key: string]: string | JSX.Element } = {\n  'Page up': (\n    <>\n      <span aria-hidden>Pg up</span>\n      <VisuallyHiddenText>Page up</VisuallyHiddenText>\n    </>\n  ),\n  'Page down': (\n    <>\n      <span aria-hidden>Pg dn</span>\n      <VisuallyHiddenText>Page down</VisuallyHiddenText>\n    </>\n  ),\n  Ins: 'Insert',\n  Shift: (\n    <>\n      <span aria-hidden>⇧</span>\n      <VisuallyHiddenText>Shift</VisuallyHiddenText>\n    </>\n  ),\n  Up: (\n    <>\n      <span aria-hidden>↑</span>\n      <VisuallyHiddenText>Up</VisuallyHiddenText>\n    </>\n  ),\n  Down: (\n    <>\n      <span aria-hidden>↓</span>\n      <VisuallyHiddenText>Down</VisuallyHiddenText>\n    </>\n  ),\n  Left: (\n    <>\n      <span aria-hidden>←</span>\n      <VisuallyHiddenText>Left</VisuallyHiddenText>\n    </>\n  ),\n  Right: (\n    <>\n      <span aria-hidden>→</span>\n      <VisuallyHiddenText>Right</VisuallyHiddenText>\n    </>\n  ),\n  Enter: (\n    <>\n      <span aria-hidden>↵</span>\n      <VisuallyHiddenText>Enter</VisuallyHiddenText>\n    </>\n  ),\n  Escape: (\n    <>\n      <span aria-hidden>Esc</span>\n      <VisuallyHiddenText>Escape</VisuallyHiddenText>\n    </>\n  )\n};\n\nexport const StyledKeyboard = styled.kbd(\n  ({\n    theme: {\n      base,\n      components: {\n        text: { primary },\n        badges: { keyboard }\n      }\n    }\n  }) => {\n    return css`\n      background-color: ${keyboard['background-color']};\n      color: ${base.palette['foreground-color']};\n      display: inline-block;\n      position: relative;\n      font-family: ${base['font-family']};\n      font-weight: ${primary['font-weight']};\n      overflow: hidden;\n      white-space: nowrap;\n      padding: 0.125rem;\n      border: 0.0125rem solid ${keyboard['border-color']};\n      border-radius: calc(${base['border-radius']} / 4);\n      text-transform: capitalize;\n      text-align: center;\n      min-width: 1.25rem;\n      height: 1.25rem;\n      text-overflow: ellipsis;\n      line-height: 1rem;\n      inset-block-start: calc(1.25rem / 4 - 0.125rem);\n    `;\n  }\n);\nStyledKeyboard.defaultProps = defaultThemeProp;\n\nexport type KeyboardProps = WithAttributes<\n  'kbd',\n  NoChildrenProp & TestIdProp & { keyName: string }\n>;\n\nexport default withTestIds(\n  forwardRef<RefElement<KeyboardProps>, PropsWithoutRef<KeyboardProps>>(function Keyboard(\n    { testId, keyName, ...restProps },\n    ref\n  ) {\n    const { windows: isWindows } = useOS();\n    const testIds = useTestIds(testId, getKeyboardTestIds);\n\n    return (\n      <StyledKeyboard data-testid={testIds.root} {...restProps} ref={ref}>\n        {(isWindows && windowsKeyMapper[keyName]) ||\n          osxKeyMapper[keyName] ||\n          generalKeyMapper[keyName] ||\n          keyName}\n      </StyledKeyboard>\n    );\n  }),\n  getKeyboardTestIds\n);\n"]}

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

@@ -1,17 +1,21 @@
-import type { FC, KeyboardEvent } from 'react';
+import type { KeyboardEvent, ReactNode } from 'react';
 import type { Attributes, ForwardProps, TestIdProp } from '../../types';
 export interface SelectableProps extends TestIdProp, Pick<Attributes<'div'>, 'tabIndex'> {
     /** An id that is used by the onSelect and onRemove functions if they are provided. */
     id: string;
     /** The content of the Badge. */
-    children: string;
+    children: ReactNode;
+    /** Label text used for the remove button's aria-label when children is JSX. */
+    contextualLabel?: string;
     /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */
     onRemove?: (id: string) => void;
     /** Event handler fired on every keyup event. */
     onKeyUp?: (event: KeyboardEvent) => void;
 }
-export declare const StyledSelectable: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-declare const _default: FC<SelectableProps & ForwardProps> & {
+export declare const StyledSelectable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $hasRichContent?: boolean;
+}>> & string;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<SelectableProps & ForwardProps, "ref"> & import("react").RefAttributes<HTMLElement>> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["remove"]>;
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAoC,aAAa,EAAE,MAAM,OAAO,CAAC;AAIjF,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAaxE,MAAM,WAAW,eAAgB,SAAQ,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACtF,sFAAsF;IACtF,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,gBAAgB,0GAmE5B,CAAC;;;;AA6DF,wBAA6D"}
+{"version":3,"file":"Selection.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA+B,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAInF,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAaxE,MAAM,WAAW,eAAgB,SAAQ,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACtF,sFAAsF;IACtF,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,+EAA+E;IAC/E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,gBAAgB;sBAAmC,OAAO;YAkFtE,CAAC;;;;AA4DF,wBAA6D"}

package/lib/components/Badges/Selection.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, isValidElement } from 'react';
 import styled, { css } from 'styled-components';
 import { mix, readableColor, transparentize } from 'polished';
 import { tryCatch, withTestIds } from '../../utils';
@@ -11,11 +11,16 @@ import { defaultThemeProp } from '../../theme';
 import { readableHue } from '../../styles';
 import { getSelectableTestIds } from './Badges.test-ids';
 registerIcon(timesIcon);
-export const StyledSelectable = styled.span(({ theme: { base: { spacing, palette, 'border-radius': borderRadius } } }) => {
+export const StyledSelectable = styled.span(({ $hasRichContent, theme: { base: { spacing, palette, 'border-radius': borderRadius } } }) => {
     const { dark, 'primary-background': primaryBackground, interactive } = palette;
-    const displayBackground = tryCatch(() => mix(0.15, interactive, primaryBackground));
+    const displayBackground = $hasRichContent
+        ? tryCatch(() => transparentize(0.9, interactive))
+        : tryCatch(() => mix(0.15, interactive, primaryBackground));
     const hoverBorder = tryCatch(() => mix(0.3, interactive, primaryBackground));
     const boxShadowColor = tryCatch(() => transparentize(0.45, dark));
+    const closeButtonColor = $hasRichContent
+        ? tryCatch(() => readableColor(primaryBackground))
+        : 'inherit';
     const height = 1.125;
     return css `
       background-color: ${displayBackground};
@@ -38,13 +43,20 @@ export const StyledSelectable = styled.span(({ theme: { base: { spacing, palette
         overflow: hidden;
       }
 
+      ${$hasRichContent &&
+        css `
+        ${StyledBareButton} {
+          color: ${closeButtonColor};
+        }
+      `}
+
       &:hover,
       &:focus-within,
       [data-active-scope='true'] &[data-current='true'] {
         color: ${tryCatch(() => readableHue(interactive, displayBackground))};
 
         ${StyledBareButton} {
-          color: inherit;
+          color: ${closeButtonColor};
         }
       }
 
@@ -72,7 +84,7 @@ export const StyledSelectable = styled.span(({ theme: { base: { spacing, palette
     `;
 });
 StyledSelectable.defaultProps = defaultThemeProp;
-const Selectable = forwardRef(function Selectable({ testId, id, children, onRemove, onKeyUp, tabIndex, ...restProps }, ref) {
+const Selectable = forwardRef(function Selectable({ testId, id, children, contextualLabel, onRemove, onKeyUp, tabIndex, ...restProps }, ref) {
     const consolidatedRef = useConsolidatedRef(ref);
     const t = useI18n();
     const testIds = useTestIds(testId, getSelectableTestIds);
@@ -87,11 +99,15 @@ const Selectable = forwardRef(function Selectable({ testId, id, children, onRemo
             onRemove?.(id);
         }
     };
-    return (_jsxs(StyledSelectable, { "data-testid": testIds.root, ref: consolidatedRef, onKeyUp: handleKeyUp, onKeyDown: e => {
+    const childrenIsJSX = isValidElement(children);
+    const childrenIsPrimitive = typeof children === 'string' || typeof children === 'number';
+    const shouldAriaHideChildren = onRemove && !childrenIsJSX;
+    const resolvedChildrenText = contextualLabel || (childrenIsPrimitive ? String(children) : '');
+    return (_jsxs(StyledSelectable, { "data-testid": testIds.root, "$hasRichContent": childrenIsJSX, ref: consolidatedRef, onKeyUp: handleKeyUp, onKeyDown: e => {
             // Prevents back navigation in Firefox.
             if (e.key === 'Backspace')
                 e.preventDefault();
-        }, tabIndex: tabIndex, ...restProps, children: [_jsx("span", { "aria-hidden": onRemove ? true : undefined, children: children }), onRemove && (_jsx(BareButton, { "data-testid": testIds.remove, tabIndex: tabIndex === -1 ? -1 : undefined, onClick: handleCloseClick, "aria-label": t('remove_noun', [children]), children: _jsx(Icon, { name: 'times' }) }))] }));
+        }, tabIndex: tabIndex, ...restProps, children: [_jsx("span", { "aria-hidden": shouldAriaHideChildren ? true : undefined, children: children }), onRemove && (_jsx(BareButton, { "data-testid": testIds.remove, tabIndex: tabIndex === -1 ? -1 : undefined, onClick: handleCloseClick, "aria-label": t('remove_noun', [resolvedChildrenText]), children: _jsx(Icon, { name: 'times' }) }))] }));
 });
 export default withTestIds(Selectable, getSelectableTestIds);
 //# sourceMappingURL=Selection.js.map

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 { forwardRef } from 'react';\nimport type { FC, MouseEvent, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor, transparentize } from 'polished';\n\nimport type { Attributes, ForwardProps, TestIdProp } from '../../types';\nimport { tryCatch, withTestIds } 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, useTestIds } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { readableHue } from '../../styles';\n\nimport { getSelectableTestIds } from './Badges.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps extends TestIdProp, Pick<Attributes<'div'>, 'tabIndex'> {\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 closed by clicking the X. */\n  onRemove?: (id: string) => void;\n  /** Event handler fired on every keyup event. */\n  onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.span(\n  ({\n    theme: {\n      base: { spacing, palette, 'border-radius': borderRadius }\n    }\n  }) => {\n    const { dark, 'primary-background': primaryBackground, interactive } = palette;\n\n    const displayBackground = tryCatch(() => mix(0.15, interactive, primaryBackground));\n    const hoverBorder = tryCatch(() => mix(0.3, interactive, primaryBackground));\n    const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n    const height = 1.125;\n    return css`\n      background-color: ${displayBackground};\n      border: 0 solid transparent;\n      border-radius: calc(${height} * ${borderRadius});\n      color: ${tryCatch(() => readableColor(displayBackground!))};\n      cursor: default;\n      display: inline-flex;\n      font-size: 0.75rem;\n      height: ${height}rem;\n      padding: 0 ${spacing};\n      max-width: 100%;\n      line-height: 1;\n\n      span {\n        display: flex;\n        align-items: center;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      &:hover,\n      &:focus-within,\n      [data-active-scope='true'] &[data-current='true'] {\n        color: ${tryCatch(() => readableHue(interactive, displayBackground!))};\n\n        ${StyledBareButton} {\n          color: inherit;\n        }\n      }\n\n      &:hover {\n        box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n      }\n\n      &:active {\n        box-shadow: inset 0 0 0 0.0625rem ${interactive};\n      }\n\n      &:focus-within,\n      [data-active-scope='true'] &[data-current='true'] {\n        box-shadow:\n          0 0 0.5rem -0.125rem ${boxShadowColor},\n          inset 0 0 0 0.125rem ${interactive};\n        outline: none;\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(function Selectable(\n  {\n    testId,\n    id,\n    children,\n    onRemove,\n    onKeyUp,\n    tabIndex,\n    ...restProps\n  }: PropsWithoutRef<SelectableProps>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const consolidatedRef = useConsolidatedRef(ref);\n  const t = useI18n();\n  const testIds = useTestIds(testId, getSelectableTestIds);\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\n    if (e.key === 'Backspace' || e.key === 'Delete') {\n      onRemove?.(id);\n    }\n  };\n\n  return (\n    <StyledSelectable\n      data-testid={testIds.root}\n      ref={consolidatedRef}\n      onKeyUp={handleKeyUp}\n      onKeyDown={e => {\n        // Prevents back navigation in Firefox.\n        if (e.key === 'Backspace') e.preventDefault();\n      }}\n      tabIndex={tabIndex}\n      {...restProps}\n    >\n      <span aria-hidden={onRemove ? true : undefined}>{children}</span>\n      {onRemove && (\n        <BareButton\n          data-testid={testIds.remove}\n          tabIndex={tabIndex === -1 ? -1 : undefined}\n          onClick={handleCloseClick}\n          aria-label={t('remove_noun', [children])}\n        >\n          <Icon name='times' />\n        </BareButton>\n      )}\n    </StyledSelectable>\n  );\n});\n\nexport default withTestIds(Selectable, getSelectableTestIds);\n"]}
+{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, isValidElement } from 'react';\nimport type { MouseEvent, PropsWithoutRef, KeyboardEvent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor, transparentize } from 'polished';\n\nimport type { Attributes, ForwardProps, TestIdProp } from '../../types';\nimport { tryCatch, withTestIds } 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, useTestIds } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { readableHue } from '../../styles';\n\nimport { getSelectableTestIds } from './Badges.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps extends TestIdProp, Pick<Attributes<'div'>, 'tabIndex'> {\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: ReactNode;\n  /** Label text used for the remove button's aria-label when children is JSX. */\n  contextualLabel?: string;\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 fired on every keyup event. */\n  onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.span<{ $hasRichContent?: boolean }>(\n  ({\n    $hasRichContent,\n    theme: {\n      base: { spacing, palette, 'border-radius': borderRadius }\n    }\n  }) => {\n    const { dark, 'primary-background': primaryBackground, interactive } = palette;\n\n    const displayBackground = $hasRichContent\n      ? tryCatch(() => transparentize(0.9, interactive))\n      : tryCatch(() => mix(0.15, interactive, primaryBackground));\n\n    const hoverBorder = tryCatch(() => mix(0.3, interactive, primaryBackground));\n    const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n    const closeButtonColor = $hasRichContent\n      ? tryCatch(() => readableColor(primaryBackground))\n      : 'inherit';\n\n    const height = 1.125;\n    return css`\n      background-color: ${displayBackground};\n      border: 0 solid transparent;\n      border-radius: calc(${height} * ${borderRadius});\n      color: ${tryCatch(() => readableColor(displayBackground!))};\n      cursor: default;\n      display: inline-flex;\n      font-size: 0.75rem;\n      height: ${height}rem;\n      padding: 0 ${spacing};\n      max-width: 100%;\n      line-height: 1;\n\n      span {\n        display: flex;\n        align-items: center;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      ${$hasRichContent &&\n      css`\n        ${StyledBareButton} {\n          color: ${closeButtonColor};\n        }\n      `}\n\n      &:hover,\n      &:focus-within,\n      [data-active-scope='true'] &[data-current='true'] {\n        color: ${tryCatch(() => readableHue(interactive, displayBackground!))};\n\n        ${StyledBareButton} {\n          color: ${closeButtonColor};\n        }\n      }\n\n      &:hover {\n        box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n      }\n\n      &:active {\n        box-shadow: inset 0 0 0 0.0625rem ${interactive};\n      }\n\n      &:focus-within,\n      [data-active-scope='true'] &[data-current='true'] {\n        box-shadow:\n          0 0 0.5rem -0.125rem ${boxShadowColor},\n          inset 0 0 0 0.125rem ${interactive};\n        outline: none;\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 = forwardRef<HTMLElement, PropsWithoutRef<SelectableProps> & ForwardProps>(\n  function Selectable(\n    { testId, id, children, contextualLabel, onRemove, onKeyUp, tabIndex, ...restProps },\n    ref\n  ) {\n    const consolidatedRef = useConsolidatedRef(ref);\n    const t = useI18n();\n    const testIds = useTestIds(testId, getSelectableTestIds);\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\n      if (e.key === 'Backspace' || e.key === 'Delete') {\n        onRemove?.(id);\n      }\n    };\n    const childrenIsJSX = isValidElement(children);\n    const childrenIsPrimitive = typeof children === 'string' || typeof children === 'number';\n    const shouldAriaHideChildren = onRemove && !childrenIsJSX;\n    const resolvedChildrenText = contextualLabel || (childrenIsPrimitive ? String(children) : '');\n\n    return (\n      <StyledSelectable\n        data-testid={testIds.root}\n        $hasRichContent={childrenIsJSX}\n        ref={consolidatedRef}\n        onKeyUp={handleKeyUp}\n        onKeyDown={e => {\n          // Prevents back navigation in Firefox.\n          if (e.key === 'Backspace') e.preventDefault();\n        }}\n        tabIndex={tabIndex}\n        {...restProps}\n      >\n        <span aria-hidden={shouldAriaHideChildren ? true : undefined}>{children}</span>\n        {onRemove && (\n          <BareButton\n            data-testid={testIds.remove}\n            tabIndex={tabIndex === -1 ? -1 : undefined}\n            onClick={handleCloseClick}\n            aria-label={t('remove_noun', [resolvedChildrenText])}\n          >\n            <Icon name='times' />\n          </BareButton>\n        )}\n      </StyledSelectable>\n    );\n  }\n);\n\nexport default withTestIds(Selectable, getSelectableTestIds);\n"]}

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

@@ -6,9 +6,9 @@ export type StatusProps = WithAttributes<'span', TestIdProp & {
     /** The content of the Badge, transformed to uppercase. */
     children: ReactText;
 }>;
-export declare const StyledStatus: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, Pick<StatusProps, "variant"> & {
+export declare const StyledStatus: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<StatusProps, "variant"> & {
     afterContent: StatusProps["children"];
-}, never>;
+}>> & string;
 declare const _default: import("react").ForwardRefExoticComponent<Omit<StatusProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxD,OAAO,KAAK,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO1E,MAAM,MAAM,WAAW,GAAG,cAAc,CACtC,MAAM,EACN,UAAU,GAAG;IACX,yFAAyF;IACzF,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5D,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB,CACF,CAAC;AAEF,eAAO,MAAM,YAAY;kBACwB,WAAW,CAAC,UAAU,CAAC;SA4BtE,CAAC;;;;AAIH,wBAoBE"}
+{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxD,OAAO,KAAK,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO1E,MAAM,MAAM,WAAW,GAAG,cAAc,CACtC,MAAM,EACN,UAAU,GAAG;IACX,yFAAyF;IACzF,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5D,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB,CACF,CAAC;AAEF,eAAO,MAAM,YAAY;kBACwB,WAAW,CAAC,UAAU,CAAC;YA4BtE,CAAC;;;;AAIH,wBAoBE"}

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

@@ -1,5 +1,6 @@
-import type { Ref, MouseEventHandler } from 'react';
+import type { Ref, MouseEventHandler, HTMLAttributes, DetailedHTMLProps } from 'react';
 import type { BaseProps, ForwardRefForwardPropsComponent, TestIdProp } from '../../types';
+import BareButton from '../Button/BareButton';
 export interface TagProps extends BaseProps, TestIdProp {
     /** The content of the Badge. */
     children: string;
@@ -10,7 +11,14 @@ export interface TagProps extends BaseProps, TestIdProp {
     /** Ref forwarded to the wrapping element. */
     ref?: Ref<HTMLSpanElement | HTMLAnchorElement | HTMLButtonElement>;
 }
-export declare const StyledTag: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+type TagAs = 'span' | 'a' | 'button' | typeof BareButton;
+type StyledTagPolymorphicProps = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
+    as?: TagAs;
+    href?: TagProps['href'];
+    onClick?: TagProps['onClick'];
+    ref?: TagProps['ref'];
+};
+export declare const StyledTag: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledTagPolymorphicProps>> & string;
 declare const _default: ForwardRefForwardPropsComponent<TagProps> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Tag.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAmB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMrE,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM1F,MAAM,WAAW,QAAS,SAAQ,SAAS,EAAE,UAAU;IACrD,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,wFAAwF;IACxF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qGAAqG;IACrG,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACnE,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,GAAG,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CACpE;AAED,eAAO,MAAM,SAAS,0GAiCpB,CAAC;;;;AAuBH,wBAA+C"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Tag.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,GAAG,EAEH,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC1F,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAK9C,MAAM,WAAW,QAAS,SAAQ,SAAS,EAAE,UAAU;IACrD,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,wFAAwF;IACxF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qGAAqG;IACrG,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACnE,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,GAAG,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CACpE;AAED,KAAK,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,QAAQ,GAAG,OAAO,UAAU,CAAC;AAEzD,KAAK,yBAAyB,GAAG,iBAAiB,CAChD,cAAc,CAAC,eAAe,CAAC,EAC/B,eAAe,CAChB,GAAG;IACF,EAAE,CAAC,EAAE,KAAK,CAAC;IACX,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACxB,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC9B,GAAG,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,SAAS,gOAiCpB,CAAC;;;;AAuBH,wBAA+C"}

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,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,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,WAAW,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAalD,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,GAA8C,UAAU,CAAC,SAAS,GAAG,CAC5E,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAA6B,EAC5E,GAAoB;IAEpB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAClD,OAAO,CACL,KAAC,SAAS,mBACK,OAAO,CAAC,IAAI,KACrB,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,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,GAAG,EAAE,aAAa,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, PropsWithoutRef, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch, withTestIds } from '../../utils';\nimport type { BaseProps, ForwardRefForwardPropsComponent, TestIdProp } from '../../types';\nimport BareButton from '../Button/BareButton';\nimport { useTestIds } from '../../hooks';\n\nimport { getTagTestIds } from './Badges.test-ids';\n\nexport interface TagProps extends BaseProps, TestIdProp {\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: ForwardRefForwardPropsComponent<TagProps> = forwardRef(function Tag(\n  { testId, children, href, onClick, ...restProps }: PropsWithoutRef<TagProps>,\n  ref: TagProps['ref']\n) {\n  const testIds = useTestIds(testId, getTagTestIds);\n  return (\n    <StyledTag\n      data-testid={testIds.root}\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\nexport default withTestIds(Tag, getTagTestIds);\n"]}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Badges/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAQnC,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,WAAW,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAyBlD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAA4B,KAAK,CAAC,EAAE;IACtE,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,GAA8C,UAAU,CAAC,SAAS,GAAG,CAC5E,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAA6B,EAC5E,GAAoB;IAEpB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAClD,OAAO,CACL,KAAC,SAAS,mBACK,OAAO,CAAC,IAAI,KACrB,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,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,GAAG,EAAE,aAAa,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type {\n  Ref,\n  PropsWithoutRef,\n  MouseEventHandler,\n  HTMLAttributes,\n  DetailedHTMLProps\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch, withTestIds } from '../../utils';\nimport type { BaseProps, ForwardRefForwardPropsComponent, TestIdProp } from '../../types';\nimport BareButton from '../Button/BareButton';\nimport { useTestIds } from '../../hooks';\n\nimport { getTagTestIds } from './Badges.test-ids';\n\nexport interface TagProps extends BaseProps, TestIdProp {\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\ntype TagAs = 'span' | 'a' | 'button' | typeof BareButton;\n\ntype StyledTagPolymorphicProps = DetailedHTMLProps<\n  HTMLAttributes<HTMLSpanElement>,\n  HTMLSpanElement\n> & {\n  as?: TagAs;\n  href?: TagProps['href'];\n  onClick?: TagProps['onClick'];\n  ref?: TagProps['ref'];\n};\n\nexport const StyledTag = styled.span<StyledTagPolymorphicProps>(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: ForwardRefForwardPropsComponent<TagProps> = forwardRef(function Tag(\n  { testId, children, href, onClick, ...restProps }: PropsWithoutRef<TagProps>,\n  ref: TagProps['ref']\n) {\n  const testIds = useTestIds(testId, getTagTestIds);\n  return (\n    <StyledTag\n      data-testid={testIds.root}\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\nexport default withTestIds(Tag, getTagTestIds);\n"]}

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

@@ -1,5 +1,7 @@
 import type { Ref, MouseEventHandler } from 'react';
 import type { HeadingTag, NoChildrenProp, TestIdProp, WithAttributes } from '../../types';
+import { StyledBanner, StyledBannerMessageList } from './Banner.styles';
+export { StyledBanner, StyledBannerMessageList };
 export interface BannerHandleValue {
     /** Used to apply focus to the banner via an imperative handle. */
     focus: () => void;
@@ -26,26 +28,21 @@ export type BannerProps = WithAttributes<'div', TestIdProp & NoChildrenProp & {
     headingText?: string;
     /**
      * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.
-     * @default 'h2'
+     * @default 'h3'
      */
     headingTag?: HeadingTag;
-    /** Pass one or more descriptive messages to inform the user. */
-    messages: (string | BannerMessage)[];
+    /**
+     * Pass one or more descriptive messages to inform the user
+     * @default []
+     */
+    messages?: (string | BannerMessage)[];
+    /** Rich text content to render within banner. */
+    content?: string;
     /** Callback when user explicitly dismisses the Banner. */
     onDismiss?: MouseEventHandler;
     /** Ref that can be used to access the imperative handle. */
     handle?: Ref<BannerHandleValue>;
 }>;
-export declare const StyledBanner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    headingTag: BannerProps["headingTag"];
-}, never>;
-export declare const StyledBannerStatus: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<BannerProps, "variant">, 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, {
-    expandable?: boolean;
-}, never>;
-export declare const StyledBannerMessageList: import("styled-components").StyledComponent<import("../../types").ForwardRefForwardPropsComponent<import("../List").UnorderedListProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledBannerMessage: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 declare const _default: import("react").ForwardRefExoticComponent<Omit<BannerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["heading", "expand-collapse", "dismiss", "message-label", "message-description", "message-action"]>;
 };

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":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAKhF,OAAO,KAAK,EAEV,UAAU,EACV,cAAc,EAGd,UAAU,EACV,cAAc,EACf,MAAM,aAAa,CAAC;AAiCrB,MAAM,WAAW,iBAAiB;IAChC,kEAAkE;IAClE,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,KAAK,KAAK,GACN,MAAM,GACN;IACE,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,CAAC;IACvB,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,MAAM,WAAW,GAAG,cAAc,CACtC,KAAK,EACL,UAAU,GACR,cAAc,GAAG;IACf,0CAA0C;IAC1C,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAAC;IAC1D,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,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;CACjC,CACJ,CAAC;AAEF,eAAO,MAAM,YAAY;gBAA4B,WAAW,CAAC,YAAY,CAAC;SAgB7E,CAAC;AAIF,eAAO,MAAM,kBAAkB,mIAiB7B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAoB7B,CAAC;AAIH,eAAO,MAAM,mBAAmB;iBAA6B,OAAO;SAWlE,CAAC;AAIH,eAAO,MAAM,uBAAuB,+LAMnC,CAAC;AAIF,eAAO,MAAM,mBAAmB,0GAG/B,CAAC;;;;AA0EF,wBAgLE"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAEhF,OAAO,KAAK,EAEV,UAAU,EACV,cAAc,EAGd,UAAU,EACV,cAAc,EACf,MAAM,aAAa,CAAC;AAqBrB,OAAO,EACL,YAAY,EAEZ,uBAAuB,EAGxB,MAAM,iBAAiB,CAAC;AAazB,OAAO,EAAE,YAAY,EAAE,uBAAuB,EAAE,CAAC;AAEjD,MAAM,WAAW,iBAAiB;IAChC,kEAAkE;IAClE,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,KAAK,KAAK,GACN,MAAM,GACN;IACE,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,CAAC;IACvB,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,MAAM,WAAW,GAAG,cAAc,CACtC,KAAK,EACL,UAAU,GACR,cAAc,GAAG;IACf,0CAA0C;IAC1C,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAAC;IAC1D,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,aAAa,CAAC,EAAE,CAAC;IACtC,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACjC,CACJ,CAAC;;;;AAwEF,wBAwNE"}