@pega/cosmos-react-core 5.0.0-dev.3.0 → 5.0.0-dev.4.1

package/lib/components/Badges/Keyboard.js

@@ -3,6 +3,9 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import useOS from '../../hooks/useOS';
+import { useTestIds } from '../../hooks';
+import { withTestIds } from '../../utils';
+import { getKeyboardTestIds } from './Badges.test-ids';
 const osxKeyMapper = {
     Command: '⌘',
     Alt: '⌥',
@@ -51,11 +54,12 @@ export const StyledKeyboard = styled.kbd(({ theme: { base, components: { text: {
     `;
 });
 StyledKeyboard.defaultProps = defaultThemeProp;
-export default forwardRef(function Keyboard({ keyName, ...restProps }, ref) {
+export default withTestIds(forwardRef(function Keyboard({ testId, keyName, ...restProps }, ref) {
     const { windows: isWindows } = useOS();
-    return (_jsx(StyledKeyboard, { ...restProps, "aria-label": keyName, ref: ref, children: (isWindows && windowsKeyMapper[keyName]) ||
+    const testIds = useTestIds(testId, getKeyboardTestIds);
+    return (_jsx(StyledKeyboard, { "data-testid": testIds.root, ...restProps, "aria-label": keyName, ref: ref, children: (isWindows && windowsKeyMapper[keyName]) ||
             osxKeyMapper[keyName] ||
             generalKeyMapper[keyName] ||
             keyName }));
-});
+}), getKeyboardTestIds);
 //# sourceMappingURL=Keyboard.js.map

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,EAAmB,MAAM,OAAO,CAAC;AACpD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,MAAM,mBAAmB,CAAC;AAGtC,MAAM,YAAY,GAA8B;IAC9C,OAAO,EAAE,GAAG;IACZ,GAAG,EAAE,GAAG;IACR,MAAM,EAAE,GAAG;IACX,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,KAAK;IACb,gBAAgB,EAAE,GAAG;CACtB,CAAC;AAEF,MAAM,gBAAgB,GAA8B;IAClD,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,GAAG;IACZ,SAAS,EAAE,WAAW;IACtB,gBAAgB,EAAE,MAAM;CACzB,CAAC;AAEF,MAAM,gBAAgB,GAA8B;IAClD,SAAS,EAAE,OAAO;IAClB,WAAW,EAAE,OAAO;IACpB,GAAG,EAAE,QAAQ;IACb,KAAK,EAAE,GAAG;CACX,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;AAI/C,eAAe,UAAU,CACvB,SAAS,QAAQ,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG;IAC9C,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAC;IAEvC,OAAO,CACL,KAAC,cAAc,OAAK,SAAS,gBAAc,OAAO,EAAE,GAAG,EAAE,GAAG,YACzD,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,CACF,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport useOS from '../../hooks/useOS';\nimport { NoChildrenProp, RefElement, WithAttributes } from '../../types';\n\nconst osxKeyMapper: { [key: string]: string } = {\n  Command: '⌘',\n  Alt: '⌥',\n  Option: '⌥',\n  Control: '⌃',\n  Return: '↵',\n  Enter: '↵',\n  Delete: 'Del',\n  CommandOrControl: '⌘'\n};\n\nconst windowsKeyMapper: { [key: string]: string } = {\n  Control: 'Ctrl',\n  Alt: 'Alt',\n  Option: 'Alt',\n  Meta: '⊞',\n  Command: '⊞',\n  Backspace: 'Backspace',\n  CommandOrControl: 'Ctrl'\n};\n\nconst generalKeyMapper: { [key: string]: string } = {\n  'Page up': 'Pg up',\n  'Page down': 'Pg dn',\n  Ins: 'Insert',\n  Shift: '⇧'\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<'kbd', NoChildrenProp & { keyName: string }>;\n\nexport default forwardRef<RefElement<KeyboardProps>, PropsWithoutRef<KeyboardProps>>(\n  function Keyboard({ keyName, ...restProps }, ref) {\n    const { windows: isWindows } = useOS();\n\n    return (\n      <StyledKeyboard {...restProps} aria-label={keyName} ref={ref}>\n        {(isWindows && windowsKeyMapper[keyName]) ||\n          osxKeyMapper[keyName] ||\n          generalKeyMapper[keyName] ||\n          keyName}\n      </StyledKeyboard>\n    );\n  }\n);\n"]}
+{"version":3,"file":"Keyboard.js","sourceRoot":"","sources":["../../../src/components/Badges/Keyboard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,OAAO,CAAC;AACpD,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;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAEvD,MAAM,YAAY,GAA8B;IAC9C,OAAO,EAAE,GAAG;IACZ,GAAG,EAAE,GAAG;IACR,MAAM,EAAE,GAAG;IACX,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,KAAK;IACb,gBAAgB,EAAE,GAAG;CACtB,CAAC;AAEF,MAAM,gBAAgB,GAA8B;IAClD,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,GAAG;IACZ,SAAS,EAAE,WAAW;IACtB,gBAAgB,EAAE,MAAM;CACzB,CAAC;AAEF,MAAM,gBAAgB,GAA8B;IAClD,SAAS,EAAE,OAAO;IAClB,WAAW,EAAE,OAAO;IACpB,GAAG,EAAE,QAAQ;IACb,KAAK,EAAE,GAAG;CACX,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,gBAAc,OAAO,EAAE,GAAG,EAAE,GAAG,YACpF,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, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport useOS from '../../hooks/useOS';\nimport { NoChildrenProp, RefElement, WithAttributes, TestIdProp } from '../../types';\nimport { useTestIds } from '../../hooks';\nimport { withTestIds } from '../../utils';\n\nimport { getKeyboardTestIds } from './Badges.test-ids';\n\nconst osxKeyMapper: { [key: string]: string } = {\n  Command: '⌘',\n  Alt: '⌥',\n  Option: '⌥',\n  Control: '⌃',\n  Return: '↵',\n  Enter: '↵',\n  Delete: 'Del',\n  CommandOrControl: '⌘'\n};\n\nconst windowsKeyMapper: { [key: string]: string } = {\n  Control: 'Ctrl',\n  Alt: 'Alt',\n  Option: 'Alt',\n  Meta: '⊞',\n  Command: '⊞',\n  Backspace: 'Backspace',\n  CommandOrControl: 'Ctrl'\n};\n\nconst generalKeyMapper: { [key: string]: string } = {\n  'Page up': 'Pg up',\n  'Page down': 'Pg dn',\n  Ins: 'Insert',\n  Shift: '⇧'\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} aria-label={keyName} 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,6 +1,6 @@
 import { FC, MouseEvent, KeyboardEvent } from 'react';
-import { ForwardProps } from '../../types';
-export interface SelectableProps {
+import { ForwardProps, TestIdProp } from '../../types';
+export interface SelectableProps extends TestIdProp {
     /** An id that is used by the onSelect and onRemove functions if they are provided. */
     id: string;
     /** The content of the Badge. */
@@ -15,6 +15,8 @@ export interface SelectableProps {
     onKeyUp?: (event: KeyboardEvent) => void;
 }
 export declare const StyledSelectable: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
-declare const Selectable: FC<SelectableProps & ForwardProps>;
-export default Selectable;
+declare const _default: FC<SelectableProps & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["remove"]>;
+};
+export default _default;
 //# sourceMappingURL=Selection.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAoC,aAAa,EAAE,MAAM,OAAO,CAAC;AAIxF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAU3C,MAAM,WAAW,eAAe;IAC9B,sFAAsF;IACtF,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,iHAAiH;IACjH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,gBAAgB,4GAmE5B,CAAC;AAIF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CAoDjD,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Selection.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAoC,aAAa,EAAE,MAAM,OAAO,CAAC;AAIxF,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAYvD,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,sFAAsF;IACtF,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,iHAAiH;IACjH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,gBAAgB,4GAmE5B,CAAC;;;;AAkEF,wBAA6D"}

package/lib/components/Badges/Selection.js

@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { mix, transparentize } from 'polished';
-import { tryCatch } from '../../utils';
+import { tryCatch, withTestIds } from '../../utils';
 import BareButton, { StyledBareButton } from '../Button/BareButton';
 import Icon, { registerIcon, StyledIcon } from '../Icon';
 import * as timesIcon from '../Icon/icons/times.icon';
-import { useConsolidatedRef, useI18n } from '../../hooks';
+import { useConsolidatedRef, useI18n, useTestIds } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
+import { getSelectableTestIds } from './Badges.test-ids';
 registerIcon(timesIcon);
 export const StyledSelectable = styled.button(({ theme: { base: { spacing, palette, 'border-radius': borderRadius }, components: { badges: { selectable } } } }) => {
     const { foreground, background } = selectable.base;
@@ -67,9 +68,10 @@ export const StyledSelectable = styled.button(({ theme: { base: { spacing, palet
     `;
 });
 StyledSelectable.defaultProps = defaultThemeProp;
-const Selectable = forwardRef(function Selectable({ id, children, onSelect, onRemove, onClick, onKeyUp, ...restProps }, ref) {
+const Selectable = forwardRef(function Selectable({ testId, id, children, onSelect, onRemove, onClick, onKeyUp, ...restProps }, ref) {
     const consolidatedRef = useConsolidatedRef(ref);
     const t = useI18n();
+    const testIds = useTestIds(testId, getSelectableTestIds);
     const handleClick = (e) => {
         onClick?.(e);
         onSelect?.(id);
@@ -88,7 +90,7 @@ const Selectable = forwardRef(function Selectable({ id, children, onSelect, onRe
             onRemove?.(id);
         }
     };
-    return (_jsxs(StyledSelectable, { ref: consolidatedRef, onClick: handleClick, onKeyUp: handleKeyUp, ...restProps, children: [_jsx("span", { children: children }), onRemove && (_jsx(BareButton, { tabIndex: '-1', onClick: handleCloseClick, "aria-label": t('remove'), children: _jsx(Icon, { name: 'times' }) }))] }));
+    return (_jsxs(StyledSelectable, { "data-testid": testIds.root, ref: consolidatedRef, onClick: handleClick, onKeyUp: handleKeyUp, ...restProps, children: [_jsx("span", { children: children }), onRemove && (_jsx(BareButton, { "data-testid": testIds.remove, tabIndex: '-1', onClick: handleCloseClick, "aria-label": t('remove'), children: _jsx(Icon, { name: 'times' }) }))] }));
 });
-export default Selectable;
+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 { FC, MouseEvent, forwardRef, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { useConsolidatedRef, useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps {\n  /** An id that is used by the onSelect and onRemove functions if they are provided. */\n  id: string;\n  /** The content of the Badge. */\n  children: string;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is clicked. */\n  onSelect?: (id: string) => void;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */\n  onRemove?: (id: string) => void;\n  /** Event handler called when the Badge is clicked. */\n  onClick?: (event: MouseEvent) => void;\n  /** Event handler fired on every keyup event. */\n  onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.button(\n  ({\n    theme: {\n      base: { spacing, palette, 'border-radius': borderRadius },\n      components: {\n        badges: { selectable }\n      }\n    }\n  }) => {\n    const { foreground, background } = selectable.base;\n    const { dark, 'primary-background': primaryBackground, interactive } = palette;\n\n    const displayBackground = tryCatch(() => mix(0.15, background, primaryBackground));\n    const hoverBorder = tryCatch(() => mix(0.3, background, primaryBackground));\n    const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n    const height = 1.125;\n    return css`\n      background: ${displayBackground};\n      border: 0 solid transparent;\n      border-radius: calc(${height} * ${borderRadius});\n      color: ${foreground};\n      cursor: default;\n      display: inline-flex;\n      font-size: 0.75rem;\n      height: ${height}rem;\n      padding: 0 ${spacing};\n      max-width: 100%;\n      line-height: 1;\n\n      span {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        line-height: normal;\n      }\n\n      &:hover {\n        color: ${interactive};\n        box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n\n        ${StyledBareButton} {\n          color: ${interactive};\n        }\n      }\n\n      &:active {\n        box-shadow: inset 0 0 0 0.0625rem ${background};\n      }\n\n      &:focus {\n        color: ${interactive};\n        box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n        outline: none;\n\n        ${StyledBareButton} {\n          color: ${interactive};\n        }\n      }\n\n      ${StyledIcon} {\n        margin-inline-start: ${spacing};\n        height: 1em;\n        width: 1em;\n      }\n    `;\n  }\n);\n\nStyledSelectable.defaultProps = defaultThemeProp;\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(function Selectable(\n  {\n    id,\n    children,\n    onSelect,\n    onRemove,\n    onClick,\n    onKeyUp,\n    ...restProps\n  }: PropsWithoutRef<SelectableProps>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const consolidatedRef = useConsolidatedRef(ref);\n  const t = useI18n();\n\n  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    onSelect?.(id);\n  };\n\n  const handleCloseClick = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onRemove?.(id);\n  };\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    onKeyUp?.(e);\n    if (e.key === 'Enter') {\n      onSelect?.(id);\n    }\n\n    if (e.key === 'Backspace' || e.key === 'Delete') {\n      onRemove?.(id);\n    }\n  };\n\n  return (\n    <StyledSelectable\n      ref={consolidatedRef}\n      onClick={handleClick}\n      onKeyUp={handleKeyUp}\n      {...restProps}\n    >\n      <span>{children}</span>\n      {onRemove && (\n        <BareButton tabIndex='-1' onClick={handleCloseClick} aria-label={t('remove')}>\n          <Icon name='times' />\n        </BareButton>\n      )}\n    </StyledSelectable>\n  );\n});\n\nexport default Selectable;\n"]}
+{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, MouseEvent, forwardRef, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { ForwardProps, 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';\n\nimport { getSelectableTestIds } from './Badges.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps extends TestIdProp {\n  /** An id that is used by the onSelect and onRemove functions if they are provided. */\n  id: string;\n  /** The content of the Badge. */\n  children: string;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is clicked. */\n  onSelect?: (id: string) => void;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */\n  onRemove?: (id: string) => void;\n  /** Event handler called when the Badge is clicked. */\n  onClick?: (event: MouseEvent) => void;\n  /** Event handler fired on every keyup event. */\n  onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.button(\n  ({\n    theme: {\n      base: { spacing, palette, 'border-radius': borderRadius },\n      components: {\n        badges: { selectable }\n      }\n    }\n  }) => {\n    const { foreground, background } = selectable.base;\n    const { dark, 'primary-background': primaryBackground, interactive } = palette;\n\n    const displayBackground = tryCatch(() => mix(0.15, background, primaryBackground));\n    const hoverBorder = tryCatch(() => mix(0.3, background, primaryBackground));\n    const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n    const height = 1.125;\n    return css`\n      background: ${displayBackground};\n      border: 0 solid transparent;\n      border-radius: calc(${height} * ${borderRadius});\n      color: ${foreground};\n      cursor: default;\n      display: inline-flex;\n      font-size: 0.75rem;\n      height: ${height}rem;\n      padding: 0 ${spacing};\n      max-width: 100%;\n      line-height: 1;\n\n      span {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        line-height: normal;\n      }\n\n      &:hover {\n        color: ${interactive};\n        box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n\n        ${StyledBareButton} {\n          color: ${interactive};\n        }\n      }\n\n      &:active {\n        box-shadow: inset 0 0 0 0.0625rem ${background};\n      }\n\n      &:focus {\n        color: ${interactive};\n        box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n        outline: none;\n\n        ${StyledBareButton} {\n          color: ${interactive};\n        }\n      }\n\n      ${StyledIcon} {\n        margin-inline-start: ${spacing};\n        height: 1em;\n        width: 1em;\n      }\n    `;\n  }\n);\n\nStyledSelectable.defaultProps = defaultThemeProp;\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(function Selectable(\n  {\n    testId,\n    id,\n    children,\n    onSelect,\n    onRemove,\n    onClick,\n    onKeyUp,\n    ...restProps\n  }: PropsWithoutRef<SelectableProps>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const consolidatedRef = useConsolidatedRef(ref);\n  const t = useI18n();\n  const testIds = useTestIds(testId, getSelectableTestIds);\n\n  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    onSelect?.(id);\n  };\n\n  const handleCloseClick = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onRemove?.(id);\n  };\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    onKeyUp?.(e);\n    if (e.key === 'Enter') {\n      onSelect?.(id);\n    }\n\n    if (e.key === 'Backspace' || e.key === 'Delete') {\n      onRemove?.(id);\n    }\n  };\n\n  return (\n    <StyledSelectable\n      data-testid={testIds.root}\n      ref={consolidatedRef}\n      onClick={handleClick}\n      onKeyUp={handleKeyUp}\n      {...restProps}\n    >\n      <span>{children}</span>\n      {onRemove && (\n        <BareButton\n          data-testid={testIds.remove}\n          tabIndex='-1'\n          onClick={handleCloseClick}\n          aria-label={t('remove')}\n        >\n          <Icon name='times' />\n        </BareButton>\n      )}\n    </StyledSelectable>\n  );\n});\n\nexport default withTestIds(Selectable, getSelectableTestIds);\n"]}

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

@@ -1,17 +1,19 @@
 import { ReactText } from 'react';
-import { WithAttributes } from '../../types';
-export type StatusProps = WithAttributes<'span', {
+import { WithAttributes, TestIdProp } from '../../types';
+export type StatusProps = WithAttributes<'span', TestIdProp & {
     /** Determines the color to render the Badge as. This color is derived from the Theme. */
     variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';
     /** The content of the Badge, transformed to uppercase. */
     children: ReactText;
 }>;
-export declare const StyledStatus: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+export declare const StyledStatus: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TestIdProp<undefined> & {
     /** Determines the color to render the Badge as. This color is derived from the Theme. */
     variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';
     /** The content of the Badge, transformed to uppercase. */
     children: ReactText;
-} & Omit<import("../../types").Attributes<"span">, "children" | "variant">, never>;
-declare const _default: import("react").ForwardRefExoticComponent<Omit<StatusProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+} & Omit<import("../../types").Attributes<"span">, "children" | "testId" | "variant">, never>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<StatusProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
+};
 export default _default;
 //# sourceMappingURL=Status.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AAM/D,OAAO,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAGzD,MAAM,MAAM,WAAW,GAAG,cAAc,CACtC,MAAM,EACN;IACE,yFAAyF;IACzF,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5D,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB,CACF,CAAC;AACF,eAAO,MAAM,YAAY;IANrB,yFAAyF;aAChF,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM;IAC3D,0DAA0D;cAChD,SAAS;kFAwBrB,CAAC;;AAIH,wBASG"}
+{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AAM/D,OAAO,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAMrE,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;AACF,eAAO,MAAM,YAAY;IANrB,yFAAyF;aAChF,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM;IAC3D,0DAA0D;cAChD,SAAS;6FAwBrB,CAAC;;;;AAIH,wBAaE"}

package/lib/components/Badges/Status.js

@@ -4,7 +4,9 @@ import styled, { css } from 'styled-components';
 import { rgba } from 'polished';
 import { calculateFontSize } from '../../styles';
 import { defaultThemeProp } from '../../theme';
-import { tryCatch } from '../../utils';
+import { tryCatch, withTestIds } from '../../utils';
+import { useTestIds } from '../../hooks';
+import { getStatusTestIds } from './Badges.test-ids';
 export const StyledStatus = styled.span(props => {
     const { spacing } = props.theme.base;
     const borderRadius = props.theme.base['border-radius'];
@@ -26,7 +28,8 @@ export const StyledStatus = styled.span(props => {
   `;
 });
 StyledStatus.defaultProps = defaultThemeProp;
-export default forwardRef(function Status({ variant = 'info', children, ...restProps }, ref) {
-    return (_jsx(StyledStatus, { ...restProps, variant: variant, ref: ref, children: children }));
-});
+export default withTestIds(forwardRef(function Status({ testId, variant = 'info', children, ...restProps }, ref) {
+    const testIds = useTestIds(testId, getStatusTestIds);
+    return (_jsx(StyledStatus, { "data-testid": testIds.root, ...restProps, variant: variant, ref: ref, children: children }));
+}), getStatusTestIds);
 //# sourceMappingURL=Status.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Status.js","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA8B,MAAM,OAAO,CAAC;AAC/D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAWvC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAc,KAAK,CAAC,EAAE;IAC3D,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC;IAEjD,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAElG,OAAO,GAAG,CAAA;wBACY,UAAU;iCACD,YAAY;aAChC,UAAU;wCACiB,MAAM;;iBAE7B,QAAQ,CAAC,GAAG;;wBAEL,OAAO;iBACd,OAAO;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,eAAe,UAAU,CAAwD,SAAS,MAAM,CAC9F,EAAE,OAAO,GAAG,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAC5C,GAAG;IAEH,OAAO,CACL,KAAC,YAAY,OAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,YACpD,QAAQ,GACI,CAChB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, ReactText } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { RefElement, WithAttributes } from '../../types';\nimport { tryCatch } from '../../utils';\n\nexport type StatusProps = WithAttributes<\n  'span',\n  {\n    /** Determines the color to render the Badge as. This color is derived from the Theme. */\n    variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';\n    /** The content of the Badge, transformed to uppercase. */\n    children: ReactText;\n  }\n>;\nexport const StyledStatus = styled.span<StatusProps>(props => {\n  const { spacing } = props.theme.base;\n  const borderRadius = props.theme.base['border-radius'];\n  const { status } = props.theme.components.badges;\n\n  const { background, foreground } = status[props.variant];\n  const shadow = tryCatch(() => rgba(foreground, 0.1));\n  const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);\n\n  return css`\n    background-color: ${background};\n    border-radius: calc(0.25 * ${borderRadius});\n    color: ${foreground};\n    box-shadow: inset 0 0 0 0.0625rem ${shadow};\n    display: inline-block;\n    font-size: ${fontSize.xxs};\n    font-weight: bold;\n    line-height: calc(${spacing} * 2.5);\n    padding: 0 ${spacing};\n    text-transform: uppercase;\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\nexport default forwardRef<RefElement<StatusProps>, PropsWithoutRef<StatusProps>>(function Status(\n  { variant = 'info', children, ...restProps },\n  ref\n) {\n  return (\n    <StyledStatus {...restProps} variant={variant} ref={ref}>\n      {children}\n    </StyledStatus>\n  );\n});\n"]}
+{"version":3,"file":"Status.js","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA8B,MAAM,OAAO,CAAC;AAC/D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAWrD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAc,KAAK,CAAC,EAAE;IAC3D,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC;IAEjD,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAElG,OAAO,GAAG,CAAA;wBACY,UAAU;iCACD,YAAY;aAChC,UAAU;wCACiB,MAAM;;iBAE7B,QAAQ,CAAC,GAAG;;wBAEL,OAAO;iBACd,OAAO;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,eAAe,WAAW,CACxB,UAAU,CAAwD,SAAS,MAAM,CAC/E,EAAE,MAAM,EAAE,OAAO,GAAG,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EACpD,GAAG;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IACrD,OAAO,CACL,KAAC,YAAY,mBAAc,OAAO,CAAC,IAAI,KAAM,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,YAC/E,QAAQ,GACI,CAChB,CAAC;AACJ,CAAC,CAAC,EACF,gBAAgB,CACjB,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, ReactText } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { RefElement, WithAttributes, TestIdProp } from '../../types';\nimport { tryCatch, withTestIds } from '../../utils';\nimport { useTestIds } from '../../hooks';\n\nimport { getStatusTestIds } from './Badges.test-ids';\n\nexport type StatusProps = WithAttributes<\n  'span',\n  TestIdProp & {\n    /** Determines the color to render the Badge as. This color is derived from the Theme. */\n    variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';\n    /** The content of the Badge, transformed to uppercase. */\n    children: ReactText;\n  }\n>;\nexport const StyledStatus = styled.span<StatusProps>(props => {\n  const { spacing } = props.theme.base;\n  const borderRadius = props.theme.base['border-radius'];\n  const { status } = props.theme.components.badges;\n\n  const { background, foreground } = status[props.variant];\n  const shadow = tryCatch(() => rgba(foreground, 0.1));\n  const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);\n\n  return css`\n    background-color: ${background};\n    border-radius: calc(0.25 * ${borderRadius});\n    color: ${foreground};\n    box-shadow: inset 0 0 0 0.0625rem ${shadow};\n    display: inline-block;\n    font-size: ${fontSize.xxs};\n    font-weight: bold;\n    line-height: calc(${spacing} * 2.5);\n    padding: 0 ${spacing};\n    text-transform: uppercase;\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\nexport default withTestIds(\n  forwardRef<RefElement<StatusProps>, PropsWithoutRef<StatusProps>>(function Status(\n    { testId, variant = 'info', children, ...restProps },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getStatusTestIds);\n    return (\n      <StyledStatus data-testid={testIds.root} {...restProps} variant={variant} ref={ref}>\n        {children}\n      </StyledStatus>\n    );\n  }),\n  getStatusTestIds\n);\n"]}

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

@@ -1,6 +1,6 @@
 import { FC, Ref, MouseEventHandler } from 'react';
-import { BaseProps, ForwardProps } from '../../types';
-export interface TagProps extends BaseProps {
+import { BaseProps, ForwardProps, TestIdProp } from '../../types';
+export interface TagProps extends BaseProps, TestIdProp {
     /** The content of the Badge. */
     children: string;
     /** A location to navigate to. Passing an href will render an anchor styled as a Tag. */
@@ -11,6 +11,8 @@ export interface TagProps extends BaseProps {
     ref?: Ref<HTMLSpanElement | HTMLAnchorElement | HTMLButtonElement>;
 }
 export declare const StyledTag: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-declare const Tag: FC<TagProps & ForwardProps>;
-export default Tag;
+declare const _default: FC<TagProps & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
+};
+export default _default;
 //# sourceMappingURL=Tag.d.ts.map

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":"AAAA,OAAO,EAAE,EAAE,EAAc,GAAG,EAAmB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMhF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGtD,MAAM,WAAW,QAAS,SAAQ,SAAS;IACzC,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;AAIH,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,GAAG,YAAY,CAenC,CAAC;AAEH,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,GAAG,EAAmB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMhF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAMlE,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"}

package/lib/components/Badges/Tag.js

@@ -3,8 +3,10 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { mix } from 'polished';
 import { defaultThemeProp } from '../../theme';
-import { tryCatch } from '../../utils';
+import { tryCatch, withTestIds } from '../../utils';
 import BareButton from '../Button/BareButton';
+import { useTestIds } from '../../hooks';
+import { getTagTestIds } from './Badges.test-ids';
 export const StyledTag = styled.span(props => {
     const borderRadius = props.theme.base['border-radius'];
     const { spacing } = props.theme.base;
@@ -36,8 +38,9 @@ export const StyledTag = styled.span(props => {
   `;
 });
 StyledTag.defaultProps = defaultThemeProp;
-const Tag = forwardRef(function Tag({ children, href, onClick, ...restProps }, ref) {
-    return (_jsx(StyledTag, { ...restProps, as: onClick || href ? BareButton : undefined, href: href, onClick: onClick, ref: ref, children: children }));
+const Tag = forwardRef(function Tag({ testId, children, href, onClick, ...restProps }, ref) {
+    const testIds = useTestIds(testId, getTagTestIds);
+    return (_jsx(StyledTag, { "data-testid": testIds.root, ...restProps, as: onClick || href ? BareButton : undefined, href: href, onClick: onClick, ref: ref, children: children }));
 });
-export default Tag;
+export default withTestIds(Tag, getTagTestIds);
 //# sourceMappingURL=Tag.js.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,SAAS,EACT,aAAa,EAEb,YAAY,EAMb,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC1F,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAc,EAAE,UAAU,EAAe,MAAM,UAAU,CAAC;AAW1D,OAAO,EAAuB,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrE,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC,EAC5E,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC7B,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAgBD,eAAO,MAAM,mBAAmB,uIAsB/B,CAAC;AAyBF,eAAO,MAAM,eAAe;mBACQ,OAAO;wBAAsB,OAAO;SA+DtE,CAAC;;;;AAuRH,wBAA2D"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,SAAS,EACT,aAAa,EAEb,YAAY,EAMb,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC1F,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAc,EAAE,UAAU,EAAe,MAAM,UAAU,CAAC;AAW1D,OAAO,EAAuB,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrE,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC,EAC5E,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC7B,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAgBD,eAAO,MAAM,mBAAmB,uIAsB/B,CAAC;AAyBF,eAAO,MAAM,eAAe;mBACQ,OAAO;wBAAsB,OAAO;SA+DtE,CAAC;;;;AAyRH,wBAA2D"}

package/lib/components/FormField/FormField.js

@@ -162,7 +162,7 @@ const FormField = forwardRef(function FormField(props, ref) {
     const labelContent = (_jsxs(_Fragment, { children: [_jsx(Label, { "data-testid": testIds.label, id: labelId, as: labelAs, htmlFor: labelAs === 'label' ? labelFor : undefined, labelHidden: labelHidden, onClick: (e) => {
                     if (readOnly)
                         e.preventDefault();
-                }, inline: inline, children: label }), required && _jsx(StyledRequiredAsterisk, { "aria-hidden": true, children: "\u00A0*" }), showAdditionalInfo && (_jsx(AdditionalInfo, { "data-testid": testIds.additionalInfo, heading: additionalInfo.heading, children: additionalInfo.content }))] }));
+                }, inline: inline, children: label }), required && !labelHidden && (_jsx(StyledRequiredAsterisk, { "aria-hidden": true, children: "\u00A0*" })), showAdditionalInfo && (_jsx(AdditionalInfo, { "data-testid": testIds.additionalInfo, heading: additionalInfo.heading, children: additionalInfo.content }))] }));
     const labelRow = !isRadioCheck && !labelAsLegend ? (_jsx(Flex, { as: StyledLabelRow, container: { justify: 'between', alignItems: 'end' }, item: { alignSelf: 'stretch' }, children: labelContent })) : (labelContent);
     // We have to use an internal state and an effect to set the text value of info after the DOM element is rendered.
     // This is to ensure screen readers will announce info on errors when role is set to alert.

package/lib/components/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  ReactNode,\n  ComponentType,\n  cloneElement,\n  ReactElement,\n  useEffect,\n  useState,\n  PropsWithoutRef,\n  forwardRef,\n  Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport Label, { LabelProps, StyledLabel } from '../Label';\nimport { calculateFontSize, getHoverColors } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, tryCatch, withTestIds } from '../../utils';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';\n\nimport { getFormFieldTestIds, elements } from './FormField.test-ids';\n\nregisterIcon(warnSolidIcon, flagWaveSolidIcon, checkIcon);\n\nexport interface FormFieldProps\n  extends OmitStrict<FormControlProps, 'placeholder' | 'value' | 'defaultValue'>,\n    TestIdProp<typeof elements> {\n  /** Pass a single form control component i.e. Input | TextArea | Select | etc.. */\n  children: ReactElement | ReactElement[];\n  /**\n   * An id is required to connect a FormField's wrapping element, control element and info(aria-describedby) live region.\n   * A random id will be generated if none is provided.\n   * Since MOST FormControls should possess an id(excl. i.e RadioCheckGroup and others) this can be used.\n   * The id prop will be used to generate the following:\n   * - FormControl <-> Label association via a Label's htmlFor prop.\n   * - FormField's wrapping element id {id}-field.\n   * - FormField info element id ${id}-info.\n   */\n  id?: string;\n  /**\n   * Determines how the wrapping label should be rendered.\n   * @default 'label'\n   */\n  labelAs?: LabelProps['as'];\n  /**\n   * Overrides the for attribute on the label. If this is not set it will default to the forms id.\n   * @default undefined\n   */\n  labelFor?: LabelProps['htmlFor'];\n  /**\n   * Sets the id of the label.\n   * @default undefined\n   */\n  labelId?: LabelProps['id'];\n  /**\n   * Visually hides the label region.\n   * @default false\n   */\n  labelHidden?: boolean;\n  /**\n   * Visually places the label after the input.\n   * @default false\n   */\n  labelAfter?: boolean;\n  /**\n   * Property used to check whether input type is radio to handle styling for RadioCheck\n   * @default false\n   */\n  isRadioCheck?: boolean;\n  /**\n   * Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup\n   * @default 'div'\n   */\n  as?: 'div' | 'fieldset' | ComponentType<any>;\n  /**\n   * Layout field elements inline in a row.\n   * @default false\n   */\n  inline?: boolean;\n  /** Optionally utilized by Input or Select. */\n  actions?: Action[];\n  /** Enables Flex container prop pass through. */\n  container?: ExcludeStrict<FlexProps['container'], true>;\n  /** Character remaining count. Typically used on Textareas only */\n  charLimitDisplay?: ReactNode;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(\n  ({ theme, status }) => {\n    return css`\n      height: 1em;\n      width: 1em;\n      color: ${theme.components['form-field'][status]['status-color']};\n      vertical-align: baseline;\n      margin-inline-end: 0.5ch;\n    `;\n  }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<Pick<FormControlProps, 'status'>>(\n  ({\n    status,\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n      components: { 'form-field': formField }\n    }\n  }) => {\n    const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      max-width: max-content;\n      margin-top: calc(0.25 * ${spacing});\n      font-size: ${infoFontSize};\n      word-break: break-word;\n      ${status &&\n      formField[status] &&\n      css`\n        color: ${formField[status]['status-color']};\n      `}\n    `;\n  }\n);\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nconst StyledRequiredAsterisk = styled.span(({ theme }) => {\n  const {\n    base: {\n      palette: { urgent }\n    }\n  } = theme;\n\n  return css`\n    vertical-align: top;\n    color: ${urgent};\n  `;\n});\n\nStyledRequiredAsterisk.defaultProps = defaultThemeProp;\n\nconst StyledLabelRow = styled.div`\n  ${StyledRequiredAsterisk} {\n    margin-inline-end: auto;\n  }\n`;\n\nexport const StyledFormField = styled.div<\n  FormFieldProps & { labelAsLegend: boolean; showAdditionalInfo: boolean }\n>(props => {\n  const {\n    labelAsLegend,\n    showAdditionalInfo,\n    disabled,\n    required,\n    theme: {\n      base: { 'disabled-opacity': disabledOpacity, spacing }\n    }\n  } = props;\n  const { ltr } = useDirection();\n\n  return css`\n    ${disabled &&\n    css`\n      opacity: ${disabledOpacity};\n      -webkit-user-select: none;\n      user-select: none;\n    `}\n    position: relative;\n    border: 0;\n\n    > ${StyledLabel}, > ${StyledLabelRow} {\n      margin-bottom: calc(0.25 * ${spacing});\n    }\n\n    > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n    }\n\n    ${labelAsLegend &&\n    (showAdditionalInfo || required) &&\n    css`\n      display: block;\n\n      > legend {\n        float: ${ltr ? 'left' : 'right'};\n      }\n\n      > ${StyledRequiredAsterisk} {\n        float: ${ltr ? 'left' : 'right'};\n\n        ${!showAdditionalInfo &&\n        css`\n          + * {\n            clear: both;\n          }\n        `}\n      }\n\n      > ${StyledAdditionalInfo} {\n        float: ${ltr ? 'right' : 'left'};\n\n        + * {\n          clear: both;\n        }\n      }\n    `}\n  `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionButton = styled(Button)(\n  ({\n    theme: {\n      base: {\n        'font-size': fontSize,\n        'font-scale': fontScale,\n        'border-radius': baseRadius,\n        spacing\n      },\n      components: {\n        'form-control': { 'border-radius': radius, 'border-width': borderWidth },\n        'form-field': formField\n      }\n    }\n  }) => {\n    const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n    const backgroundColor = formField.pending['status-color'];\n    const hoverColors = getHoverColors(backgroundColor);\n    const color = tryCatch(() => readableColor(backgroundColor));\n    const borderColor = color ? rgba(color, 0.4) : color;\n\n    return css`\n      background-color: ${backgroundColor};\n      color: ${color};\n      font-size: ${buttonFontSize};\n      min-width: calc(3 * ${spacing});\n      min-height: calc(3 * ${spacing});\n      padding: 0 ${spacing};\n      border-radius: 0;\n      border: none;\n      &:first-child {\n        border-inline-end: ${borderWidth} solid ${borderColor};\n        border-end-start-radius: calc(${baseRadius} * ${radius});\n        margin-inline-start: calc(2 * ${spacing});\n      }\n      &:last-child {\n        border-end-end-radius: calc(${baseRadius} * ${radius});\n        margin-inline-start: 0;\n      }\n      &:hover {\n        color: ${hoverColors.foreground};\n        background-color: ${hoverColors.background};\n      }\n\n      @media (pointer: coarse) {\n        min-height: 2rem;\n      }\n    `;\n  }\n);\n\nStyledSuggestionButton.defaultProps = defaultThemeProp;\n\nconst StyledInfo = styled.span`\n  display: contents;\n`;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'flag-wave-solid', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(function FormField(\n  props: PropsWithoutRef<FormFieldProps>,\n  ref: Ref<HTMLElement>\n) {\n  const uid = useUID();\n  const {\n    testId,\n    children: controlElement,\n    id = uid,\n    as = 'div',\n    label,\n    labelAs = 'label',\n    labelFor = id,\n    labelId,\n    labelHidden = false,\n    labelAfter = false,\n    info,\n    status,\n    isRadioCheck,\n    charLimitDisplay,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    inline = false,\n    actions,\n    container,\n    additionalInfo,\n    onResolveSuggestion,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getFormFieldTestIds);\n\n  const t = useI18n();\n  const labelAsLegend: boolean = labelAs === 'legend';\n  const hasSuggestion = status === 'pending' && !!onResolveSuggestion;\n  const consolidatedRef = useConsolidatedRef(ref);\n\n  const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;\n\n  const labelContent = (\n    <>\n      <Label\n        data-testid={testIds.label}\n        id={labelId}\n        as={labelAs}\n        htmlFor={labelAs === 'label' ? labelFor : undefined}\n        labelHidden={labelHidden}\n        onClick={(e: MouseEvent) => {\n          if (readOnly) e.preventDefault();\n        }}\n        inline={inline}\n      >\n        {label}\n      </Label>\n\n      {required && <StyledRequiredAsterisk aria-hidden>&nbsp;*</StyledRequiredAsterisk>}\n\n      {showAdditionalInfo && (\n        <AdditionalInfo data-testid={testIds.additionalInfo} heading={additionalInfo.heading}>\n          {additionalInfo.content}\n        </AdditionalInfo>\n      )}\n    </>\n  );\n\n  const labelRow =\n    !isRadioCheck && !labelAsLegend ? (\n      <Flex\n        as={StyledLabelRow}\n        container={{ justify: 'between', alignItems: 'end' }}\n        item={{ alignSelf: 'stretch' }}\n      >\n        {labelContent}\n      </Flex>\n    ) : (\n      labelContent\n    );\n\n  // We have to use an internal state and an effect to set the text value of info after the DOM element is rendered.\n  // This is to ensure screen readers will announce info on errors when role is set to alert.\n  // Needs testing to confirm. Currently the expected sequence would be:\n  // - FormField renders with no error and no info\n  // - user input triggers an error status\n  // - props passed set error status and provide info text\n  // - effect runs and sets live region state which renders and is announced\n  const [liveRegionInfo, setLiveRegionInfo] = useState<ReactNode>(null);\n\n  useEffect(() => {\n    setLiveRegionInfo(info);\n  }, [info]);\n\n  // fieldset or single form control element\n  let content: FormFieldProps['children'] = labelAsLegend\n    ? controlElement\n    : cloneElement(controlElement as ReactElement, {\n        'aria-describedby': info && `${id}-info`\n      });\n\n  if (actions) {\n    content = (\n      <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n        {content}\n        <Actions items={actions} menuAt={3} />\n      </Flex>\n    );\n  }\n\n  let infoContent = (\n    // Region for additional info, help or error message.\n    // Withholding aria-live=\"assertive\" to avoid iOS issue. See below.\n    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles\n    <Flex\n      data-testid={testIds.info}\n      status={status}\n      role={status === 'error' || status === 'warning' ? 'alert' : undefined}\n      as={StyledFormFieldInfo}\n      container={{ alignItems: 'center' }}\n    >\n      {status && status !== 'pending' && typeof label === 'string' && (\n        <VisuallyHiddenText aria-hidden>{label}</VisuallyHiddenText>\n      )}\n      <StyledInfo id={`${id}-info`}>\n        {status && status !== 'pending' && (\n          <>\n            <StyledStatusIcon status={status} name={statusIconMap[status]} />\n            <VisuallyHiddenText>{` ${t(status)} `}</VisuallyHiddenText>\n          </>\n        )}\n        {liveRegionInfo}\n      </StyledInfo>\n    </Flex>\n  );\n\n  if (charLimitDisplay) {\n    infoContent = (\n      <Flex container={{ justify: infoContent ? 'between' : 'end', gap: 1 }}>\n        {infoContent}\n        <Flex item={{ shrink: 0 }}>{charLimitDisplay}</Flex>\n      </Flex>\n    );\n  }\n\n  if (hasSuggestion) {\n    const focusables = getFocusables(consolidatedRef);\n    infoContent = (\n      <Flex container={{ alignItems: 'start', justify: 'between' }}>\n        <StyledFormFieldInfo data-testid={testIds.info} status={status} id={`${id}-info`}>\n          {t('suggestion_info')}\n          <VisuallyHiddenText aria-live='polite'>{t('suggestion_assist')}</VisuallyHiddenText>\n        </StyledFormFieldInfo>\n        <Flex container={{ wrap: 'nowrap' }}>\n          <StyledSuggestionButton\n            data-testid={testIds.suggestionReject}\n            onClick={() => {\n              onResolveSuggestion(false);\n              focusables[0]?.focus();\n            }}\n            aria-label={t('reject_suggestion_button_a11y')}\n          >\n            {t('no')}\n          </StyledSuggestionButton>\n          <StyledSuggestionButton\n            data-testid={testIds.suggestionAccept}\n            onClick={() => {\n              onResolveSuggestion(true);\n              focusables[0]?.focus();\n            }}\n            aria-label={t('accept_suggestion_button_a11y')}\n          >\n            {t('yes')}\n          </StyledSuggestionButton>\n        </Flex>\n      </Flex>\n    );\n  }\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter') {\n      const target = e.target as HTMLElement;\n      if (!target.closest('button')) {\n        e.preventDefault();\n        onResolveSuggestion?.(true);\n      }\n    }\n  };\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      {...restProps}\n      container={{\n        direction: inline ? 'row' : 'column',\n        alignItems: inline ? 'center' : undefined,\n        ...container\n      }}\n      as={StyledFormField}\n      labelAsLegend={labelAsLegend}\n      showAdditionalInfo={showAdditionalInfo}\n      id={`${id}-field`}\n      forwardedAs={as}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      onKeyDown={hasSuggestion ? onKeyDown : undefined}\n      aria-describedby={labelAsLegend && info ? `${id}-info` : undefined}\n      ref={consolidatedRef}\n    >\n      {(labelAsLegend || !labelAfter) && labelRow}\n      {content}\n      {!labelAsLegend && labelAfter && labelRow}\n      {!readOnly && infoContent}\n    </Flex>\n  );\n});\n\nexport default withTestIds(FormField, getFormFieldTestIds);\n"]}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  ReactNode,\n  ComponentType,\n  cloneElement,\n  ReactElement,\n  useEffect,\n  useState,\n  PropsWithoutRef,\n  forwardRef,\n  Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport Label, { LabelProps, StyledLabel } from '../Label';\nimport { calculateFontSize, getHoverColors } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, tryCatch, withTestIds } from '../../utils';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';\n\nimport { getFormFieldTestIds, elements } from './FormField.test-ids';\n\nregisterIcon(warnSolidIcon, flagWaveSolidIcon, checkIcon);\n\nexport interface FormFieldProps\n  extends OmitStrict<FormControlProps, 'placeholder' | 'value' | 'defaultValue'>,\n    TestIdProp<typeof elements> {\n  /** Pass a single form control component i.e. Input | TextArea | Select | etc.. */\n  children: ReactElement | ReactElement[];\n  /**\n   * An id is required to connect a FormField's wrapping element, control element and info(aria-describedby) live region.\n   * A random id will be generated if none is provided.\n   * Since MOST FormControls should possess an id(excl. i.e RadioCheckGroup and others) this can be used.\n   * The id prop will be used to generate the following:\n   * - FormControl <-> Label association via a Label's htmlFor prop.\n   * - FormField's wrapping element id {id}-field.\n   * - FormField info element id ${id}-info.\n   */\n  id?: string;\n  /**\n   * Determines how the wrapping label should be rendered.\n   * @default 'label'\n   */\n  labelAs?: LabelProps['as'];\n  /**\n   * Overrides the for attribute on the label. If this is not set it will default to the forms id.\n   * @default undefined\n   */\n  labelFor?: LabelProps['htmlFor'];\n  /**\n   * Sets the id of the label.\n   * @default undefined\n   */\n  labelId?: LabelProps['id'];\n  /**\n   * Visually hides the label region.\n   * @default false\n   */\n  labelHidden?: boolean;\n  /**\n   * Visually places the label after the input.\n   * @default false\n   */\n  labelAfter?: boolean;\n  /**\n   * Property used to check whether input type is radio to handle styling for RadioCheck\n   * @default false\n   */\n  isRadioCheck?: boolean;\n  /**\n   * Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup\n   * @default 'div'\n   */\n  as?: 'div' | 'fieldset' | ComponentType<any>;\n  /**\n   * Layout field elements inline in a row.\n   * @default false\n   */\n  inline?: boolean;\n  /** Optionally utilized by Input or Select. */\n  actions?: Action[];\n  /** Enables Flex container prop pass through. */\n  container?: ExcludeStrict<FlexProps['container'], true>;\n  /** Character remaining count. Typically used on Textareas only */\n  charLimitDisplay?: ReactNode;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(\n  ({ theme, status }) => {\n    return css`\n      height: 1em;\n      width: 1em;\n      color: ${theme.components['form-field'][status]['status-color']};\n      vertical-align: baseline;\n      margin-inline-end: 0.5ch;\n    `;\n  }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<Pick<FormControlProps, 'status'>>(\n  ({\n    status,\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n      components: { 'form-field': formField }\n    }\n  }) => {\n    const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      max-width: max-content;\n      margin-top: calc(0.25 * ${spacing});\n      font-size: ${infoFontSize};\n      word-break: break-word;\n      ${status &&\n      formField[status] &&\n      css`\n        color: ${formField[status]['status-color']};\n      `}\n    `;\n  }\n);\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nconst StyledRequiredAsterisk = styled.span(({ theme }) => {\n  const {\n    base: {\n      palette: { urgent }\n    }\n  } = theme;\n\n  return css`\n    vertical-align: top;\n    color: ${urgent};\n  `;\n});\n\nStyledRequiredAsterisk.defaultProps = defaultThemeProp;\n\nconst StyledLabelRow = styled.div`\n  ${StyledRequiredAsterisk} {\n    margin-inline-end: auto;\n  }\n`;\n\nexport const StyledFormField = styled.div<\n  FormFieldProps & { labelAsLegend: boolean; showAdditionalInfo: boolean }\n>(props => {\n  const {\n    labelAsLegend,\n    showAdditionalInfo,\n    disabled,\n    required,\n    theme: {\n      base: { 'disabled-opacity': disabledOpacity, spacing }\n    }\n  } = props;\n  const { ltr } = useDirection();\n\n  return css`\n    ${disabled &&\n    css`\n      opacity: ${disabledOpacity};\n      -webkit-user-select: none;\n      user-select: none;\n    `}\n    position: relative;\n    border: 0;\n\n    > ${StyledLabel}, > ${StyledLabelRow} {\n      margin-bottom: calc(0.25 * ${spacing});\n    }\n\n    > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n    }\n\n    ${labelAsLegend &&\n    (showAdditionalInfo || required) &&\n    css`\n      display: block;\n\n      > legend {\n        float: ${ltr ? 'left' : 'right'};\n      }\n\n      > ${StyledRequiredAsterisk} {\n        float: ${ltr ? 'left' : 'right'};\n\n        ${!showAdditionalInfo &&\n        css`\n          + * {\n            clear: both;\n          }\n        `}\n      }\n\n      > ${StyledAdditionalInfo} {\n        float: ${ltr ? 'right' : 'left'};\n\n        + * {\n          clear: both;\n        }\n      }\n    `}\n  `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionButton = styled(Button)(\n  ({\n    theme: {\n      base: {\n        'font-size': fontSize,\n        'font-scale': fontScale,\n        'border-radius': baseRadius,\n        spacing\n      },\n      components: {\n        'form-control': { 'border-radius': radius, 'border-width': borderWidth },\n        'form-field': formField\n      }\n    }\n  }) => {\n    const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n    const backgroundColor = formField.pending['status-color'];\n    const hoverColors = getHoverColors(backgroundColor);\n    const color = tryCatch(() => readableColor(backgroundColor));\n    const borderColor = color ? rgba(color, 0.4) : color;\n\n    return css`\n      background-color: ${backgroundColor};\n      color: ${color};\n      font-size: ${buttonFontSize};\n      min-width: calc(3 * ${spacing});\n      min-height: calc(3 * ${spacing});\n      padding: 0 ${spacing};\n      border-radius: 0;\n      border: none;\n      &:first-child {\n        border-inline-end: ${borderWidth} solid ${borderColor};\n        border-end-start-radius: calc(${baseRadius} * ${radius});\n        margin-inline-start: calc(2 * ${spacing});\n      }\n      &:last-child {\n        border-end-end-radius: calc(${baseRadius} * ${radius});\n        margin-inline-start: 0;\n      }\n      &:hover {\n        color: ${hoverColors.foreground};\n        background-color: ${hoverColors.background};\n      }\n\n      @media (pointer: coarse) {\n        min-height: 2rem;\n      }\n    `;\n  }\n);\n\nStyledSuggestionButton.defaultProps = defaultThemeProp;\n\nconst StyledInfo = styled.span`\n  display: contents;\n`;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'flag-wave-solid', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(function FormField(\n  props: PropsWithoutRef<FormFieldProps>,\n  ref: Ref<HTMLElement>\n) {\n  const uid = useUID();\n  const {\n    testId,\n    children: controlElement,\n    id = uid,\n    as = 'div',\n    label,\n    labelAs = 'label',\n    labelFor = id,\n    labelId,\n    labelHidden = false,\n    labelAfter = false,\n    info,\n    status,\n    isRadioCheck,\n    charLimitDisplay,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    inline = false,\n    actions,\n    container,\n    additionalInfo,\n    onResolveSuggestion,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getFormFieldTestIds);\n\n  const t = useI18n();\n  const labelAsLegend: boolean = labelAs === 'legend';\n  const hasSuggestion = status === 'pending' && !!onResolveSuggestion;\n  const consolidatedRef = useConsolidatedRef(ref);\n\n  const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;\n\n  const labelContent = (\n    <>\n      <Label\n        data-testid={testIds.label}\n        id={labelId}\n        as={labelAs}\n        htmlFor={labelAs === 'label' ? labelFor : undefined}\n        labelHidden={labelHidden}\n        onClick={(e: MouseEvent) => {\n          if (readOnly) e.preventDefault();\n        }}\n        inline={inline}\n      >\n        {label}\n      </Label>\n\n      {required && !labelHidden && (\n        <StyledRequiredAsterisk aria-hidden>&nbsp;*</StyledRequiredAsterisk>\n      )}\n\n      {showAdditionalInfo && (\n        <AdditionalInfo data-testid={testIds.additionalInfo} heading={additionalInfo.heading}>\n          {additionalInfo.content}\n        </AdditionalInfo>\n      )}\n    </>\n  );\n\n  const labelRow =\n    !isRadioCheck && !labelAsLegend ? (\n      <Flex\n        as={StyledLabelRow}\n        container={{ justify: 'between', alignItems: 'end' }}\n        item={{ alignSelf: 'stretch' }}\n      >\n        {labelContent}\n      </Flex>\n    ) : (\n      labelContent\n    );\n\n  // We have to use an internal state and an effect to set the text value of info after the DOM element is rendered.\n  // This is to ensure screen readers will announce info on errors when role is set to alert.\n  // Needs testing to confirm. Currently the expected sequence would be:\n  // - FormField renders with no error and no info\n  // - user input triggers an error status\n  // - props passed set error status and provide info text\n  // - effect runs and sets live region state which renders and is announced\n  const [liveRegionInfo, setLiveRegionInfo] = useState<ReactNode>(null);\n\n  useEffect(() => {\n    setLiveRegionInfo(info);\n  }, [info]);\n\n  // fieldset or single form control element\n  let content: FormFieldProps['children'] = labelAsLegend\n    ? controlElement\n    : cloneElement(controlElement as ReactElement, {\n        'aria-describedby': info && `${id}-info`\n      });\n\n  if (actions) {\n    content = (\n      <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n        {content}\n        <Actions items={actions} menuAt={3} />\n      </Flex>\n    );\n  }\n\n  let infoContent = (\n    // Region for additional info, help or error message.\n    // Withholding aria-live=\"assertive\" to avoid iOS issue. See below.\n    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles\n    <Flex\n      data-testid={testIds.info}\n      status={status}\n      role={status === 'error' || status === 'warning' ? 'alert' : undefined}\n      as={StyledFormFieldInfo}\n      container={{ alignItems: 'center' }}\n    >\n      {status && status !== 'pending' && typeof label === 'string' && (\n        <VisuallyHiddenText aria-hidden>{label}</VisuallyHiddenText>\n      )}\n      <StyledInfo id={`${id}-info`}>\n        {status && status !== 'pending' && (\n          <>\n            <StyledStatusIcon status={status} name={statusIconMap[status]} />\n            <VisuallyHiddenText>{` ${t(status)} `}</VisuallyHiddenText>\n          </>\n        )}\n        {liveRegionInfo}\n      </StyledInfo>\n    </Flex>\n  );\n\n  if (charLimitDisplay) {\n    infoContent = (\n      <Flex container={{ justify: infoContent ? 'between' : 'end', gap: 1 }}>\n        {infoContent}\n        <Flex item={{ shrink: 0 }}>{charLimitDisplay}</Flex>\n      </Flex>\n    );\n  }\n\n  if (hasSuggestion) {\n    const focusables = getFocusables(consolidatedRef);\n    infoContent = (\n      <Flex container={{ alignItems: 'start', justify: 'between' }}>\n        <StyledFormFieldInfo data-testid={testIds.info} status={status} id={`${id}-info`}>\n          {t('suggestion_info')}\n          <VisuallyHiddenText aria-live='polite'>{t('suggestion_assist')}</VisuallyHiddenText>\n        </StyledFormFieldInfo>\n        <Flex container={{ wrap: 'nowrap' }}>\n          <StyledSuggestionButton\n            data-testid={testIds.suggestionReject}\n            onClick={() => {\n              onResolveSuggestion(false);\n              focusables[0]?.focus();\n            }}\n            aria-label={t('reject_suggestion_button_a11y')}\n          >\n            {t('no')}\n          </StyledSuggestionButton>\n          <StyledSuggestionButton\n            data-testid={testIds.suggestionAccept}\n            onClick={() => {\n              onResolveSuggestion(true);\n              focusables[0]?.focus();\n            }}\n            aria-label={t('accept_suggestion_button_a11y')}\n          >\n            {t('yes')}\n          </StyledSuggestionButton>\n        </Flex>\n      </Flex>\n    );\n  }\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter') {\n      const target = e.target as HTMLElement;\n      if (!target.closest('button')) {\n        e.preventDefault();\n        onResolveSuggestion?.(true);\n      }\n    }\n  };\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      {...restProps}\n      container={{\n        direction: inline ? 'row' : 'column',\n        alignItems: inline ? 'center' : undefined,\n        ...container\n      }}\n      as={StyledFormField}\n      labelAsLegend={labelAsLegend}\n      showAdditionalInfo={showAdditionalInfo}\n      id={`${id}-field`}\n      forwardedAs={as}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      onKeyDown={hasSuggestion ? onKeyDown : undefined}\n      aria-describedby={labelAsLegend && info ? `${id}-info` : undefined}\n      ref={consolidatedRef}\n    >\n      {(labelAsLegend || !labelAfter) && labelRow}\n      {content}\n      {!labelAsLegend && labelAfter && labelRow}\n      {!readOnly && infoContent}\n    </Flex>\n  );\n});\n\nexport default withTestIds(FormField, getFormFieldTestIds);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,aAAa,EACb,yBAAyB,EAC1B,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAGzE,KAAK,aAAa,GAAG,cAAc,GAAG;IACpC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gGAAgG;IAChG,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,WAAW,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,SAAS,GACjB,cAAc,CACZ,KAAK,EACL,aAAa,GAAG;IACd,wBAAwB;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC7B,CACF,GACD,cAAc,CACZ,KAAK,EACL,aAAa,GAAG;IACd,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CACF,CAAC;AAEN,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACvB,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CACzB;AAID,eAAO,MAAM,YAAY,aAAc,UAAU,EAAE,SAUlD,CAAC;AAEF,eAAO,MAAM,iBAAiB,aAAc,UAAU,EAAE,SAUvD,CAAC;AAEF,eAAO,MAAM,UAAU;WAAuB,SAAS,CAAC,MAAM,CAAC;SA0C7D,CAAC;AAIH,eAAO,MAAM,eAAe;gBACd,YAAY,SAAS,CAAC,YAAY,CAAC,CAAC;iBACnC,SAAS,CAAC,YAAY,CAAC;WAC7B,SAAS,CAAC,MAAM,CAAC;YAChB,SAAS,CAAC,OAAO,CAAC;SAgE1B,CAAC;AAIH,QAAA,MAAM,IAAI,sCA6EgC,CAAC;AAE3C,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,aAAa,EACb,yBAAyB,EAC1B,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAGzE,KAAK,aAAa,GAAG,cAAc,GAAG;IACpC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gGAAgG;IAChG,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,WAAW,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,SAAS,GACjB,cAAc,CACZ,KAAK,EACL,aAAa,GAAG;IACd,wBAAwB;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC7B,CACF,GACD,cAAc,CACZ,KAAK,EACL,aAAa,GAAG;IACd,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CACF,CAAC;AAEN,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACvB,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CACzB;AAID,eAAO,MAAM,YAAY,aAAc,UAAU,EAAE,SAUlD,CAAC;AAEF,eAAO,MAAM,iBAAiB,aAAc,UAAU,EAAE,SAUvD,CAAC;AAEF,eAAO,MAAM,UAAU;WAAuB,SAAS,CAAC,MAAM,CAAC;SA0C7D,CAAC;AAIH,eAAO,MAAM,eAAe;gBACd,YAAY,SAAS,CAAC,YAAY,CAAC,CAAC;iBACnC,SAAS,CAAC,YAAY,CAAC;WAC7B,SAAS,CAAC,MAAM,CAAC;YAChB,SAAS,CAAC,OAAO,CAAC;SAgE1B,CAAC;AAMH,QAAA,MAAM,IAAI,sCA6EgC,CAAC;AAE3C,eAAe,IAAI,CAAC"}

package/lib/components/Icon/Icon.js

@@ -119,6 +119,7 @@ export const StyledIconShape = styled.div(({ theme, background, foreground, size
     }
   `;
 });
+StyledIconShape.defaultProps = defaultThemeProp;
 const emptyIconDefinition = Object.freeze({ Component: () => null });
 const Icon = forwardRef(function Icon({ set: setProp, name, size, ...restProps }, ref) {
     const { base: { 'icon-set': setTheme } } = useTheme();

package/lib/components/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useState,\n  useEffect,\n  Ref,\n  PropsWithoutRef,\n  ComponentType,\n  ForwardRefExoticComponent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { useTheme } from '../../hooks';\nimport { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\ntype BaseIconProps = NoChildrenProp & {\n  /**\n   * The name of the icon set.\n   * @default theme.base['icon-set']\n   */\n  set?: string;\n  /** The name indicating the Cosmos Icon. Reference the catalog above for the available names. */\n  name: string;\n  /**\n   * Background & svg size.\n   * @default \"s\" without background, \"m\" with background.\n   */\n  size?: 's' | 'm' | 'l' | 'font-size';\n};\n\nexport type IconProps =\n  | WithAttributes<\n      'div',\n      BaseIconProps & {\n        /** Background color. */\n        background: string;\n        /**\n         * Foreground color (svg fill).\n         * Applies readable color off background if undefined.\n         */\n        foreground?: string;\n        /**\n         * Shape of the background.\n         * @default 'square'\n         */\n        shape?: 'square' | 'circle';\n      }\n    >\n  | WithAttributes<\n      'svg',\n      BaseIconProps & {\n        background?: never;\n        foreground?: never;\n        shape?: never;\n      }\n    >;\n\nexport interface IconDefinition {\n  Component: ComponentType;\n  viewBox?: string;\n}\n\nexport interface IconModule extends IconDefinition {\n  set?: IconProps['set'];\n  name: IconProps['name'];\n}\n\nconst iconRegistry = new Map<string, Map<string, IconDefinition>>([]);\n\nexport const registerIcon = (...icons: IconModule[]) => {\n  icons.forEach(({ set: modSet, name, ...iconDef }) => {\n    const set = modSet ?? 'budicon';\n\n    if (!iconRegistry.has(set)) {\n      iconRegistry.set(set, new Map([[name, iconDef]]));\n    } else if (!iconRegistry.get(set)!.has(name)) {\n      iconRegistry.get(set)!.set(name, iconDef);\n    }\n  });\n};\n\nexport const forceRegisterIcon = (...icons: IconModule[]) => {\n  icons.forEach(({ set: modSet, name, ...iconDef }) => {\n    const set = modSet ?? 'budicon';\n\n    if (!iconRegistry.has(set)) {\n      iconRegistry.set(set, new Map([[name, iconDef]]));\n    } else {\n      iconRegistry.get(set)!.set(name, iconDef);\n    }\n  });\n};\n\nexport const StyledIcon = styled.svg<{ size?: IconProps['size'] }>(({ theme, size = 's' }) => {\n  const {\n    components: {\n      icon: {\n        size: { s, m, l }\n      }\n    }\n  } = theme;\n  return css`\n    display: inline-block;\n    fill: currentColor;\n    vertical-align: middle;\n    flex-shrink: 0;\n    /* stylelint-disable unit-allowed-list */\n    min-width: 14px;\n    min-height: 14px;\n    /* stylelint-enable unit-allowed-list */\n\n    ${size === 's' &&\n    css`\n      width: ${s};\n      height: ${s};\n    `}\n\n    ${size === 'm' &&\n    css`\n      width: ${m};\n      height: ${m};\n    `}\n\n    ${size === 'l' &&\n    css`\n      width: ${l};\n      height: ${l};\n    `}\n\n    ${size === 'font-size' &&\n    css`\n      width: 1em;\n      height: 1em;\n    `}\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nexport const StyledIconShape = styled.div<{\n  background: NonNullable<IconProps['background']>;\n  foreground?: IconProps['foreground'];\n  size?: IconProps['size'];\n  shape?: IconProps['shape'];\n}>(({ theme, background, foreground, size = 'm', shape = 'square' }) => {\n  const readableFg = readableColor(background);\n\n  const {\n    base: { 'border-radius': baseRadius },\n    components: {\n      icon: {\n        size: { s, m, l },\n        'border-radius-multiplier': borderRadiusMultiplier\n      }\n    }\n  } = theme;\n\n  return css`\n    color: ${foreground ?? readableFg};\n    background-color: ${background};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    ${size === 's' &&\n    css`\n      width: ${s};\n      height: ${s};\n    `}\n\n    ${size === 'm' &&\n    css`\n      width: ${m};\n      height: ${m};\n    `}\n\n    ${size === 'l' &&\n    css`\n      width: ${l};\n      height: ${l};\n    `}\n\n    ${size === 'font-size' &&\n    css`\n      width: 1em;\n      height: 1em;\n    `}\n\n    ${shape === 'square' &&\n    css`\n      border-radius: calc(${borderRadiusMultiplier} * ${baseRadius});\n    `}\n\n    ${shape === 'circle' &&\n    css`\n      border-radius: 50%;\n    `}\n\n    ${StyledIcon} {\n      width: 50%;\n      height: 50%;\n      /* stylelint-disable unit-allowed-list */\n      min-width: min(14px, 90%);\n      min-height: min(14px, 90%);\n      /* stylelint-enable unit-allowed-list */\n    }\n  `;\n});\n\nconst emptyIconDefinition: Readonly<IconDefinition> = Object.freeze({ Component: () => null });\n\nconst Icon = forwardRef<RefElement<IconProps>, PropsWithoutRef<IconProps>>(function Icon(\n  { set: setProp, name, size, ...restProps }: PropsWithoutRef<IconProps>,\n  ref\n) {\n  const {\n    base: { 'icon-set': setTheme }\n  } = useTheme();\n\n  const set = setProp ?? setTheme ?? 'budicon';\n\n  const [iconDef, setIconDef] = useState(iconRegistry.get(set)?.get(name) ?? emptyIconDefinition);\n\n  useEffect(() => {\n    if (iconRegistry.get(set)?.has(name)) {\n      setIconDef(iconRegistry.get(set)!.get(name)!);\n      return;\n    }\n\n    const controller = new AbortController();\n\n    (async () => {\n      try {\n        const encodedName = encodeURIComponent(name);\n\n        let module: IconModule;\n\n        switch (set) {\n          case 'streamline':\n            module = await import(`./streamline-icons/${encodedName}.icon`);\n            break;\n          case 'budicon':\n            module = await import(`./icons/${encodedName}.icon`);\n            break;\n          default:\n            throw new Error('Unknown icon');\n        }\n\n        if (module.name !== name || !module.Component) throw new Error('Malformed icon definition');\n\n        registerIcon(module);\n      } catch {\n        registerIcon({ set, name, ...emptyIconDefinition });\n      }\n\n      if (!controller.signal.aborted) {\n        setIconDef(iconRegistry.get(set)!.get(name) ?? emptyIconDefinition);\n      }\n    })();\n\n    return () => controller.abort();\n  }, [name, set]);\n\n  return typeof restProps.background === 'string' ? (\n    <StyledIconShape\n      role='presentation'\n      {...restProps}\n      background={restProps.background}\n      foreground={restProps.foreground}\n      shape={restProps.shape}\n      size={size}\n      ref={ref as Ref<HTMLDivElement>}\n    >\n      <StyledIcon viewBox={iconDef.viewBox}>\n        <iconDef.Component />\n      </StyledIcon>\n    </StyledIconShape>\n  ) : (\n    <StyledIcon\n      role='presentation'\n      {...restProps}\n      viewBox={iconDef.viewBox}\n      size={size}\n      ref={ref as Ref<SVGSVGElement>}\n    >\n      <iconDef.Component />\n    </StyledIcon>\n  );\n}) as ForwardRefExoticComponent<IconProps>;\n\nexport default Icon;\n"]}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useState,\n  useEffect,\n  Ref,\n  PropsWithoutRef,\n  ComponentType,\n  ForwardRefExoticComponent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { useTheme } from '../../hooks';\nimport { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\ntype BaseIconProps = NoChildrenProp & {\n  /**\n   * The name of the icon set.\n   * @default theme.base['icon-set']\n   */\n  set?: string;\n  /** The name indicating the Cosmos Icon. Reference the catalog above for the available names. */\n  name: string;\n  /**\n   * Background & svg size.\n   * @default \"s\" without background, \"m\" with background.\n   */\n  size?: 's' | 'm' | 'l' | 'font-size';\n};\n\nexport type IconProps =\n  | WithAttributes<\n      'div',\n      BaseIconProps & {\n        /** Background color. */\n        background: string;\n        /**\n         * Foreground color (svg fill).\n         * Applies readable color off background if undefined.\n         */\n        foreground?: string;\n        /**\n         * Shape of the background.\n         * @default 'square'\n         */\n        shape?: 'square' | 'circle';\n      }\n    >\n  | WithAttributes<\n      'svg',\n      BaseIconProps & {\n        background?: never;\n        foreground?: never;\n        shape?: never;\n      }\n    >;\n\nexport interface IconDefinition {\n  Component: ComponentType;\n  viewBox?: string;\n}\n\nexport interface IconModule extends IconDefinition {\n  set?: IconProps['set'];\n  name: IconProps['name'];\n}\n\nconst iconRegistry = new Map<string, Map<string, IconDefinition>>([]);\n\nexport const registerIcon = (...icons: IconModule[]) => {\n  icons.forEach(({ set: modSet, name, ...iconDef }) => {\n    const set = modSet ?? 'budicon';\n\n    if (!iconRegistry.has(set)) {\n      iconRegistry.set(set, new Map([[name, iconDef]]));\n    } else if (!iconRegistry.get(set)!.has(name)) {\n      iconRegistry.get(set)!.set(name, iconDef);\n    }\n  });\n};\n\nexport const forceRegisterIcon = (...icons: IconModule[]) => {\n  icons.forEach(({ set: modSet, name, ...iconDef }) => {\n    const set = modSet ?? 'budicon';\n\n    if (!iconRegistry.has(set)) {\n      iconRegistry.set(set, new Map([[name, iconDef]]));\n    } else {\n      iconRegistry.get(set)!.set(name, iconDef);\n    }\n  });\n};\n\nexport const StyledIcon = styled.svg<{ size?: IconProps['size'] }>(({ theme, size = 's' }) => {\n  const {\n    components: {\n      icon: {\n        size: { s, m, l }\n      }\n    }\n  } = theme;\n  return css`\n    display: inline-block;\n    fill: currentColor;\n    vertical-align: middle;\n    flex-shrink: 0;\n    /* stylelint-disable unit-allowed-list */\n    min-width: 14px;\n    min-height: 14px;\n    /* stylelint-enable unit-allowed-list */\n\n    ${size === 's' &&\n    css`\n      width: ${s};\n      height: ${s};\n    `}\n\n    ${size === 'm' &&\n    css`\n      width: ${m};\n      height: ${m};\n    `}\n\n    ${size === 'l' &&\n    css`\n      width: ${l};\n      height: ${l};\n    `}\n\n    ${size === 'font-size' &&\n    css`\n      width: 1em;\n      height: 1em;\n    `}\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nexport const StyledIconShape = styled.div<{\n  background: NonNullable<IconProps['background']>;\n  foreground?: IconProps['foreground'];\n  size?: IconProps['size'];\n  shape?: IconProps['shape'];\n}>(({ theme, background, foreground, size = 'm', shape = 'square' }) => {\n  const readableFg = readableColor(background);\n\n  const {\n    base: { 'border-radius': baseRadius },\n    components: {\n      icon: {\n        size: { s, m, l },\n        'border-radius-multiplier': borderRadiusMultiplier\n      }\n    }\n  } = theme;\n\n  return css`\n    color: ${foreground ?? readableFg};\n    background-color: ${background};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    ${size === 's' &&\n    css`\n      width: ${s};\n      height: ${s};\n    `}\n\n    ${size === 'm' &&\n    css`\n      width: ${m};\n      height: ${m};\n    `}\n\n    ${size === 'l' &&\n    css`\n      width: ${l};\n      height: ${l};\n    `}\n\n    ${size === 'font-size' &&\n    css`\n      width: 1em;\n      height: 1em;\n    `}\n\n    ${shape === 'square' &&\n    css`\n      border-radius: calc(${borderRadiusMultiplier} * ${baseRadius});\n    `}\n\n    ${shape === 'circle' &&\n    css`\n      border-radius: 50%;\n    `}\n\n    ${StyledIcon} {\n      width: 50%;\n      height: 50%;\n      /* stylelint-disable unit-allowed-list */\n      min-width: min(14px, 90%);\n      min-height: min(14px, 90%);\n      /* stylelint-enable unit-allowed-list */\n    }\n  `;\n});\n\nStyledIconShape.defaultProps = defaultThemeProp;\n\nconst emptyIconDefinition: Readonly<IconDefinition> = Object.freeze({ Component: () => null });\n\nconst Icon = forwardRef<RefElement<IconProps>, PropsWithoutRef<IconProps>>(function Icon(\n  { set: setProp, name, size, ...restProps }: PropsWithoutRef<IconProps>,\n  ref\n) {\n  const {\n    base: { 'icon-set': setTheme }\n  } = useTheme();\n\n  const set = setProp ?? setTheme ?? 'budicon';\n\n  const [iconDef, setIconDef] = useState(iconRegistry.get(set)?.get(name) ?? emptyIconDefinition);\n\n  useEffect(() => {\n    if (iconRegistry.get(set)?.has(name)) {\n      setIconDef(iconRegistry.get(set)!.get(name)!);\n      return;\n    }\n\n    const controller = new AbortController();\n\n    (async () => {\n      try {\n        const encodedName = encodeURIComponent(name);\n\n        let module: IconModule;\n\n        switch (set) {\n          case 'streamline':\n            module = await import(`./streamline-icons/${encodedName}.icon`);\n            break;\n          case 'budicon':\n            module = await import(`./icons/${encodedName}.icon`);\n            break;\n          default:\n            throw new Error('Unknown icon');\n        }\n\n        if (module.name !== name || !module.Component) throw new Error('Malformed icon definition');\n\n        registerIcon(module);\n      } catch {\n        registerIcon({ set, name, ...emptyIconDefinition });\n      }\n\n      if (!controller.signal.aborted) {\n        setIconDef(iconRegistry.get(set)!.get(name) ?? emptyIconDefinition);\n      }\n    })();\n\n    return () => controller.abort();\n  }, [name, set]);\n\n  return typeof restProps.background === 'string' ? (\n    <StyledIconShape\n      role='presentation'\n      {...restProps}\n      background={restProps.background}\n      foreground={restProps.foreground}\n      shape={restProps.shape}\n      size={size}\n      ref={ref as Ref<HTMLDivElement>}\n    >\n      <StyledIcon viewBox={iconDef.viewBox}>\n        <iconDef.Component />\n      </StyledIcon>\n    </StyledIconShape>\n  ) : (\n    <StyledIcon\n      role='presentation'\n      {...restProps}\n      viewBox={iconDef.viewBox}\n      size={size}\n      ref={ref as Ref<SVGSVGElement>}\n    >\n      <iconDef.Component />\n    </StyledIcon>\n  );\n}) as ForwardRefExoticComponent<IconProps>;\n\nexport default Icon;\n"]}

package/lib/components/Icon/streamline-icons/{flag-solid.icon.d.ts → flag-wave-solid.icon.d.ts}

@@ -1,5 +1,5 @@
 export declare const set = "streamline";
-export declare const name = "flag-solid";
+export declare const name = "flag-wave-solid";
 export declare const Component: () => JSX.Element;
 export declare const viewBox = "0 0 18 18";
-//# sourceMappingURL=flag-solid.icon.d.ts.map
+//# sourceMappingURL=flag-wave-solid.icon.d.ts.map

package/lib/components/Icon/streamline-icons/flag-wave-solid.icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flag-wave-solid.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/flag-wave-solid.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,oBAAoB,CAAC;AAEtC,eAAO,MAAM,SAAS,mBAQrB,CAAC;AAEF,eAAO,MAAM,OAAO,cAAc,CAAC"}

package/lib/components/Icon/streamline-icons/{flag-solid.icon.js → flag-wave-solid.icon.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // This file is autogenerated. Any changes will be overwritten.
 export const set = 'streamline';
-export const name = 'flag-solid';
+export const name = 'flag-wave-solid';
 export const Component = () => (_jsxs("g", { fill: 'none', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', children: [_jsx("path", { d: 'M1 17V1' }), _jsx("path", { fill: 'currentColor', d: 'M16.915 3.624a.76.76 0 0 0-.237-.283.883.883 0 0 0-.332-.15.82.82 0 0 0-.37.018l-1.687.48c-.91.254-1.867.33-2.806.198s-1.838-.452-2.654-.941a6.81 6.81 0 0 0-2.72-.95 6.89 6.89 0 0 0-2.872.244L1 2.927v9.985l2.246-.687a6.892 6.892 0 0 1 5.593.706c.806.49 1.706.819 2.654.941a6.89 6.89 0 0 0 2.806-.197l2.123-.603A.792.792 0 0 0 17 12.31V3.972a.794.794 0 0 0-.085-.358z' })] }));
 export const viewBox = '0 0 18 18';
-//# sourceMappingURL=flag-solid.icon.js.map
+//# sourceMappingURL=flag-wave-solid.icon.js.map

package/lib/components/Icon/streamline-icons/flag-wave-solid.icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flag-wave-solid.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/flag-wave-solid.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,iBAAiB,CAAC;AAEtC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,aAAG,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,aAC/E,eAAM,CAAC,EAAC,SAAS,GAAG,EACpB,eACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,gXAAgX,GAClX,IACA,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'flag-wave-solid';\n\nexport const Component = () => (\n  <g fill='none' stroke='currentColor' strokeLinecap='round' strokeLinejoin='round'>\n    <path d='M1 17V1' />\n    <path\n      fill='currentColor'\n      d='M16.915 3.624a.76.76 0 0 0-.237-.283.883.883 0 0 0-.332-.15.82.82 0 0 0-.37.018l-1.687.48c-.91.254-1.867.33-2.806.198s-1.838-.452-2.654-.941a6.81 6.81 0 0 0-2.72-.95 6.89 6.89 0 0 0-2.872.244L1 2.927v9.985l2.246-.687a6.892 6.892 0 0 1 5.593.706c.806.49 1.706.819 2.654.941a6.89 6.89 0 0 0 2.806-.197l2.123-.603A.792.792 0 0 0 17 12.31V3.972a.794.794 0 0 0-.085-.358z'\n    />\n  </g>\n);\n\nexport const viewBox = '0 0 18 18';\n"]}

package/lib/components/Icon/streamline-icons/{flag.icon.d.ts → flag-wave.icon.d.ts}

@@ -1,5 +1,5 @@
 export declare const set = "streamline";
-export declare const name = "flag";
+export declare const name = "flag-wave";
 export declare const Component: () => JSX.Element;
 export declare const viewBox = "0 0 18 18";
-//# sourceMappingURL=flag.icon.d.ts.map
+//# sourceMappingURL=flag-wave.icon.d.ts.map

package/lib/components/Icon/streamline-icons/flag-wave.icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flag-wave.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/flag-wave.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,cAAc,CAAC;AAEhC,eAAO,MAAM,SAAS,mBAQrB,CAAC;AAEF,eAAO,MAAM,OAAO,cAAc,CAAC"}