@pega/cosmos-react-core 10.0.0-build.3.1 → 10.0.0-build.4.0

package/lib/components/FormField/FormField.js

@@ -1,24 +1,26 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, useEffect, forwardRef, useState, useRef, Children } from 'react';
 import styled, { css } from 'styled-components';
-import { rgba } from 'polished';
+import AIButton from '../AIButton';
 import { defaultThemeProp } from '../../theme';
 import Flex, { StyledFlex } from '../Flex';
 import Actions from '../Actions';
 import { useConsolidatedRef, useI18n, useLiveLog, useTestIds, useTheme, useUID } from '../../hooks';
 import Label, { StyledLabel } from '../Label';
-import { calculateFontSize, getHoverColors, readableColor, getReadableStatusColor } from '../../styles';
+import { calculateFontSize, getReadableStatusColor } from '../../styles';
 import VisuallyHiddenText from '../VisuallyHiddenText';
-import { getFocusables, tryCatch, withTestIds, createClassName } from '../../utils';
+import { getFocusables, withTestIds, createClassName } from '../../utils';
 import Button from '../Button';
+import Text, { StyledText } from '../Text';
 import Icon, { registerIcon } from '../Icon';
 import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
 import * as diamondMinusIcon from '../Icon/icons/diamond-minus.icon';
 import * as checkIcon from '../Icon/icons/check.icon';
+import * as polarisSolidIcon from '../Icon/icons/polaris-solid.icon';
 import AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';
 import { StyledRadioCheck, StyledRadioCheckInput } from '../RadioCheck/RadioCheck';
 import { getFormFieldTestIds } from './FormField.test-ids';
-registerIcon(warnSolidIcon, diamondMinusIcon, checkIcon);
+registerIcon(warnSolidIcon, diamondMinusIcon, checkIcon, polarisSolidIcon);
 const StyledStatusIcon = styled(Icon)(({ theme, status }) => {
     return css `
     height: 1em;
@@ -142,57 +144,34 @@ export const StyledFormField = styled.div(props => {
   `;
 });
 StyledFormField.defaultProps = defaultThemeProp;
-const StyledSuggestionButton = styled(Button)(({ theme }) => {
-    const { base: { 'font-size': fontSize, 'font-scale': fontScale, 'border-radius': baseRadius, spacing }, components: { 'form-control': { 'border-radius': radius, 'border-width': borderWidth } } } = theme;
-    const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);
-    const backgroundColor = getReadableStatusColor(theme, 'pending');
-    const hoverColors = getHoverColors(backgroundColor);
-    const color = tryCatch(() => readableColor(backgroundColor));
-    const borderColor = color ? rgba(color, 0.4) : color;
+const StyledSuggestionWrapper = styled(Flex)(({ theme, status }) => {
+    const { base: { 'font-size': fontSize, 'font-scale': fontScale }, components: { 'form-control': formControl } } = theme;
+    const fontSizes = calculateFontSize(fontSize, fontScale);
+    const infoFontSize = fontSizes.xxs;
     return css `
-    background-color: ${backgroundColor};
-    color: ${color};
-    font-size: ${buttonFontSize};
-    min-width: calc(3 * ${spacing});
-    min-height: calc(3 * ${spacing});
-    padding: 0 ${spacing};
-    border-radius: 0;
-    border: none;
-
-    &:first-child {
-      border-inline-end: ${borderWidth} solid ${borderColor};
-      border-end-start-radius: calc(${baseRadius} * ${radius});
-      margin-inline-start: calc(2 * ${spacing});
-    }
-
-    &:last-child {
-      border-end-end-radius: calc(${baseRadius} * ${radius});
-      margin-inline-start: 0;
-    }
-
-    &:hover {
-      color: ${hoverColors.foreground};
-      background-color: ${hoverColors.background};
-    }
-
-    @media (pointer: coarse) {
-      min-height: 2rem;
+    ${StyledText} {
+      ${(!status || status === 'pending') &&
+        css `
+        color: ${formControl['foreground-color']};
+        font-size: ${infoFontSize};
+      `}
     }
   `;
 });
-StyledSuggestionButton.defaultProps = defaultThemeProp;
+StyledSuggestionWrapper.defaultProps = defaultThemeProp;
 const statusIconMap = { error: 'warn-solid', warning: 'diamond-minus', success: 'check' };
 const FormField = forwardRef(function FormField(props, ref) {
     const uid = useUID();
     const theme = useTheme();
-    const { testId, children: controlElement, id = uid, as = 'div', label, labelAs: labelAsProp = 'label', labelFor = id, labelId: labelIdProp, labelHidden = false, labelAfter = false, info, status, suppressAnnouncements, isRadioCheck, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = theme.components['form-field'].layout === 'inline', onClear, actions, container, additionalInfo, onResolveSuggestion, 'aria-describedby': ariaDescribedBy, className, ...restProps } = props;
+    const { testId, children: controlElement, id = uid, as = 'div', label, labelAs: labelAsProp = 'label', labelFor = id, labelId: labelIdProp, labelHidden = false, labelAfter = false, info, status, suppressAnnouncements, isRadioCheck, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = theme.components['form-field'].layout === 'inline', onClear, actions, container, additionalInfo, suggestion, 'aria-describedby': ariaDescribedBy, className, ...restProps } = props;
     const infoAbove = theme.components['form-field']['helper-text-position'] === 'above';
     const testIds = useTestIds(testId, getFormFieldTestIds);
     const asFieldset = as === 'fieldset' || (typeof as !== 'string' && 'target' in as && as.target === 'fieldset');
     const t = useI18n();
     const { announceAssertive } = useLiveLog();
     const labelAs = asFieldset ? 'span' : labelAsProp;
-    const hasSuggestion = status === 'pending' && !!onResolveSuggestion;
+    const hasAutoInputSuggestion = status === 'pending' && !!suggestion && 'onReject' in suggestion;
+    const hasSuggestion = hasAutoInputSuggestion || (!!suggestion && 'value' in suggestion);
     const consolidatedRef = useConsolidatedRef(ref);
     const labelRef = useRef(null);
     const [labelText, setLabelText] = useState(null);
@@ -251,20 +230,24 @@ const FormField = forwardRef(function FormField(props, ref) {
     }
     if (hasSuggestion) {
         const focusables = getFocusables(consolidatedRef);
-        infoContent = (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between' }, children: [_jsxs(StyledFormFieldInfo, { "data-testid": testIds.info, status: status, id: `${id}-info`, infoAbove: infoAbove, children: [t('suggestion_info'), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: t('suggestion_assist') })] }), _jsxs(Flex, { container: { wrap: 'nowrap' }, children: [_jsx(StyledSuggestionButton, { "data-testid": testIds.suggestionReject, onClick: () => {
-                                onResolveSuggestion(false);
-                                focusables[0]?.focus();
-                            }, "aria-label": `${t('no')}, ${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`, children: t('no') }), _jsx(StyledSuggestionButton, { "data-testid": testIds.suggestionAccept, onClick: () => {
-                                onResolveSuggestion(true);
+        infoContent = (_jsxs(StyledFormFieldInfo, { "data-testid": testIds.info, status: status, id: `${id}-info`, infoAbove: infoAbove, children: ['value' in suggestion && (_jsxs(StyledSuggestionWrapper, { container: { alignItems: 'center', gap: 0.2 }, status: status, children: [_jsx(Icon, { size: 'font-size', name: 'polaris-solid' }), ' ', _jsx(Text, { children: `${t('suggestion_suggested_value')}:` }), _jsx(AIButton, { variant: 'link', icon: null, "data-testid": testIds.suggestionAccept, onClick: () => {
+                                suggestion.onAccept();
                                 focusables[0]?.focus();
-                            }, "aria-label": `${t('yes')}, ${t('accept_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`, children: t('yes') })] })] }));
+                            }, label: suggestion.value, "aria-label": `${t('accept_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}` })] })), 'onReject' in suggestion &&
+                    ('previousValue' in suggestion && suggestion.previousValue ? (_jsxs(StyledSuggestionWrapper, { container: { alignItems: 'center', gap: 0.2 }, status: status, children: [_jsx(Text, { children: `${t('suggestion_previous_value')}:` }), _jsx(Button, { variant: 'link', "data-testid": testIds.suggestionReject, onClick: () => {
+                                    suggestion.onReject();
+                                    focusables[0]?.focus();
+                                }, "aria-label": `${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`, children: suggestion.previousValue })] })) : (_jsx(AIButton, { variant: 'link', icon: null, "data-testid": testIds.suggestionReject, onClick: () => {
+                            suggestion.onReject();
+                            focusables[0]?.focus();
+                        }, label: t('suggestion_clear'), "aria-label": `${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}` }))), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: t('suggestion_assist') })] }));
     }
     const onKeyDown = (e) => {
         if (e.key === 'Enter') {
             const target = e.target;
             if (!target.closest('button')) {
                 e.preventDefault();
-                onResolveSuggestion?.(true);
+                suggestion?.onAccept();
             }
         }
     };
@@ -278,7 +261,7 @@ const FormField = forwardRef(function FormField(props, ref) {
             alignItems: inline && !labelHidden ? 'center' : undefined,
             wrap: isRadioCheck || inline ? 'wrap' : undefined,
             ...container
-        }, as: StyledFormField, asFieldset: asFieldset, isRadioCheck: isRadioCheck, showAdditionalInfo: showAdditionalInfo, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, labelInline: labelInline, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": descriptionIds.length ? descriptionIds.join(' ') : undefined, "aria-labelledby": asFieldset ? labelId : undefined, ref: consolidatedRef, className: createClassName('form-field', className, { status }), children: [(asFieldset || !labelAfter) && labelRow, !readOnly && infoAbove && infoContent, content, !asFieldset && labelAfter && labelRow, !readOnly && !infoAbove && infoContent, isRadioCheck && onClear && (_jsx(StyledClearButton, { variant: 'link', onClick: () => {
+        }, as: StyledFormField, asFieldset: asFieldset, isRadioCheck: isRadioCheck, showAdditionalInfo: showAdditionalInfo, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, labelInline: labelInline, onKeyDown: hasAutoInputSuggestion ? onKeyDown : undefined, "aria-describedby": descriptionIds.length ? descriptionIds.join(' ') : undefined, "aria-labelledby": asFieldset ? labelId : undefined, ref: consolidatedRef, className: createClassName('form-field', className, { status }), children: [(asFieldset || !labelAfter) && labelRow, !readOnly && infoAbove && infoContent, content, !asFieldset && labelAfter && labelRow, !readOnly && !infoAbove && infoContent, isRadioCheck && onClear && (_jsx(StyledClearButton, { variant: 'link', onClick: () => {
                     onClear();
                 }, children: t('clear_selection') }))] }));
 });

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 { cloneElement, useEffect, forwardRef, useState, useRef, Children } from 'react';\nimport type { FC, ReactNode, ComponentType, ReactElement, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport Flex, { StyledFlex } from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport type { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useI18n, useLiveLog, useTestIds, useTheme, useUID } from '../../hooks';\nimport Label, { StyledLabel } from '../Label';\nimport type { LabelProps } from '../Label';\nimport {\n  calculateFontSize,\n  getHoverColors,\n  readableColor,\n  getReadableStatusColor\n} from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, tryCatch, withTestIds, createClassName } from '../../utils';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as diamondMinusIcon from '../Icon/icons/diamond-minus.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';\nimport { StyledRadioCheck, StyledRadioCheckInput } from '../RadioCheck/RadioCheck';\n\nimport { getFormFieldTestIds } from './FormField.test-ids';\nimport type { elements } from './FormField.test-ids';\n\nregisterIcon(warnSolidIcon, diamondMinusIcon, 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  /** Id of additional describing element. */\n  'aria-describedby'?: string;\n  /** Callback invoked when the clear button is clicked. If provided will render the clear button. */\n  onClear?: () => void;\n  /** Suppresses announcements for status changes. */\n  suppressAnnouncements?: boolean;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(({\n  theme,\n  status\n}) => {\n  return css`\n    height: 1em;\n    width: 1em;\n    color: ${getReadableStatusColor(theme, status)};\n    vertical-align: baseline;\n  `;\n});\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledClearButton = styled(Button)(({ theme }) => {\n  return css`\n    margin-block-start: calc(${theme.base.spacing} / 2);\n    align-self: start;\n  `;\n});\n\nStyledClearButton.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<\n  Pick<FormControlProps, 'status'> & { infoAbove?: boolean }\n>(({ status, infoAbove, theme }) => {\n  const {\n    base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n    components: { 'form-field': formField }\n  } = theme;\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n  const infoFontSize = fontSizes.xxs;\n\n  return css`\n    font-size: ${infoFontSize};\n    word-break: break-word;\n\n    &:not(:empty) {\n      ${infoAbove\n        ? css`\n            margin-block-end: calc(0.25 * ${spacing});\n          `\n        : css`\n            margin-block-start: calc(0.25 * ${spacing});\n          `}\n    }\n\n    ${status &&\n    formField[status] &&\n    css`\n      color: ${getReadableStatusColor(theme, status)};\n    `}\n  `;\n});\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledLabelRow = styled.div<{ inline: boolean }>(({ inline }) => {\n  if (inline) {\n    return css`\n      flex-shrink: 0;\n      width: 14ch;\n      ${StyledAdditionalInfo} {\n        align-self: center;\n      }\n    `;\n  }\n});\n\nexport const StyledFormField = styled.div<\n  FormFieldProps & {\n    asFieldset: boolean;\n    showAdditionalInfo: boolean;\n    labelInline?: boolean;\n  }\n>(props => {\n  const {\n    asFieldset,\n    showAdditionalInfo,\n    disabled,\n    required,\n    labelInline,\n    theme: {\n      base: {\n        palette: { urgent },\n        'disabled-opacity': disabledOpacity,\n        spacing,\n        'hit-area': { 'compact-min': hitAreaCompact }\n      }\n    }\n  } = props;\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    &:has(${StyledRadioCheckInput}:only-of-type) {\n      ${StyledFormFieldInfo} {\n        min-width: 100%;\n      }\n    }\n\n    ${StyledFlex}:has(${StyledRadioCheck}) {\n      flex-shrink: 0;\n    }\n\n    > ${StyledLabel}, > ${StyledLabelRow}, > ${StyledFlex}:has(> ${StyledLabel}) {\n      &:not(:empty) {\n        margin-bottom: calc(0.25 * ${spacing});\n        min-height: ${hitAreaCompact};\n      }\n    }\n\n    > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel}, > ${StyledFlex} > ${StyledLabel} {\n      ${required &&\n      css`\n        &::after {\n          content: ${'\"\\\\00a0*\" / \"\"'};\n          color: ${urgent};\n        }\n      `}\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n    }\n\n    ${asFieldset &&\n    showAdditionalInfo &&\n    css`\n      > ${StyledFlex} > ${StyledLabel} {\n        display: block;\n      }\n\n      > ${StyledFlex}:has(> ${StyledLabel}) > ${StyledAdditionalInfo} {\n        align-self: flex-start;\n      }\n    `}\n\n    ${labelInline &&\n    css`\n      display: grid;\n      grid-template-columns: 14ch 1fr;\n      grid-template-rows: auto 1fr;\n      align-items: start;\n\n      ${StyledFlex}:has(> ${StyledLabel}), ${StyledFlex}:has(> ${StyledLabelRow}) {\n        grid-row: span 2;\n      }\n    `}\n  `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionButton = styled(Button)(({ theme }) => {\n  const {\n    base: { 'font-size': fontSize, 'font-scale': fontScale, 'border-radius': baseRadius, spacing },\n    components: {\n      'form-control': { 'border-radius': radius, 'border-width': borderWidth }\n    }\n  } = theme;\n  const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n  const backgroundColor = getReadableStatusColor(theme, 'pending');\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\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\n    &:last-child {\n      border-end-end-radius: calc(${baseRadius} * ${radius});\n      margin-inline-start: 0;\n    }\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\nStyledSuggestionButton.defaultProps = defaultThemeProp;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'diamond-minus', 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 theme = useTheme();\n  const {\n    testId,\n    children: controlElement,\n    id = uid,\n    as = 'div',\n    label,\n    labelAs: labelAsProp = 'label',\n    labelFor = id,\n    labelId: labelIdProp,\n    labelHidden = false,\n    labelAfter = false,\n    info,\n    status,\n    suppressAnnouncements,\n    isRadioCheck,\n    charLimitDisplay,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    inline = theme.components['form-field'].layout === 'inline',\n    onClear,\n    actions,\n    container,\n    additionalInfo,\n    onResolveSuggestion,\n    'aria-describedby': ariaDescribedBy,\n    className,\n    ...restProps\n  } = props;\n\n  const infoAbove = theme.components['form-field']['helper-text-position'] === 'above';\n  const testIds = useTestIds(testId, getFormFieldTestIds);\n\n  const asFieldset =\n    as === 'fieldset' || (typeof as !== 'string' && 'target' in as && as.target === 'fieldset');\n  const t = useI18n();\n  const { announceAssertive } = useLiveLog();\n  const labelAs = asFieldset ? 'span' : labelAsProp;\n  const hasSuggestion = status === 'pending' && !!onResolveSuggestion;\n  const consolidatedRef = useConsolidatedRef(ref);\n  const labelRef = useRef<HTMLLabelElement | HTMLLegendElement>(null);\n  const [labelText, setLabelText] = useState<string | null>(null);\n\n  const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;\n  const labelInline = inline && !isRadioCheck && !labelHidden;\n  const labelId = asFieldset && !labelIdProp ? `${id}-label` : labelIdProp;\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={labelInline}\n        ref={labelRef}\n      >\n        {label}\n      </Label>\n\n      {showAdditionalInfo && labelText && (\n        <AdditionalInfo\n          data-testid={testIds.additionalInfo}\n          heading={additionalInfo.heading}\n          contextualLabel={labelText}\n        >\n          {additionalInfo.content}\n        </AdditionalInfo>\n      )}\n    </>\n  );\n\n  let labelRow: ReactNode;\n  if (!isRadioCheck && !asFieldset && !labelHidden) {\n    labelRow = (\n      <Flex\n        as={StyledLabelRow}\n        container={{ justify: labelInline ? 'start' : 'between', alignItems: 'end' }}\n        item={{ alignSelf: labelInline ? 'start' : 'stretch', shrink: labelInline ? 0 : undefined }}\n        inline={labelInline}\n      >\n        {labelContent}\n      </Flex>\n    );\n  } else if (asFieldset && !labelHidden) {\n    labelRow = (\n      <Flex\n        container={{\n          alignItems: 'end',\n          justify: showAdditionalInfo && !isRadioCheck ? 'between' : undefined\n        }}\n      >\n        {labelContent}\n      </Flex>\n    );\n  } else {\n    labelRow = labelContent;\n  }\n\n  useEffect(() => {\n    setLabelText(labelRef.current?.textContent ?? null);\n  }, [label]);\n\n  useEffect(() => {\n    if (suppressAnnouncements || (status !== 'error' && status !== 'warning')) return;\n\n    let message = t(status);\n\n    if (typeof info === 'string') message = `${message} ${info}`;\n\n    if (labelRef.current?.textContent) message = `${labelRef.current?.textContent} ${message}`;\n\n    announceAssertive({ message, type: status });\n  }, [status, info]);\n\n  // fieldset or single form control element\n  let content: FormFieldProps['children'];\n  if (asFieldset || Children.count(controlElement) > 1) {\n    content = controlElement;\n  } else {\n    const controlElementAriaDescribedBy = Children.only(controlElement).props[\n      'aria-describedby'\n    ] as string | undefined;\n    content = cloneElement(controlElement as ReactElement, {\n      'aria-describedby':\n        [controlElementAriaDescribedBy, info && !readOnly ? `${id}-info` : undefined]\n          .join(' ')\n          .trim() || undefined\n    });\n  }\n\n  if (actions) {\n    content = (\n      <Flex\n        container={{ alignItems: 'center', gap: 0.5 }}\n        item={{ grow: labelInline ? 1 : undefined }}\n      >\n        {content}\n        <Actions items={actions} menuAt={3} />\n      </Flex>\n    );\n  }\n\n  let infoContent = (\n    <Flex\n      id={`${id}-info`}\n      data-testid={testIds.info}\n      status={status}\n      as={StyledFormFieldInfo}\n      container={{ alignItems: 'center', gap: 0.5 }}\n      infoAbove={infoAbove}\n    >\n      {status && status !== 'pending' && (\n        <>\n          <Flex\n            item={{ alignSelf: 'start' }}\n            as={StyledStatusIcon}\n            status={status}\n            name={statusIconMap[status]}\n          />\n          <VisuallyHiddenText>{`${t(status)} `}</VisuallyHiddenText>\n        </>\n      )}\n      {info}\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\n          data-testid={testIds.info}\n          status={status}\n          id={`${id}-info`}\n          infoAbove={infoAbove}\n        >\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('no')}, ${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\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('yes')}, ${t('accept_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\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  const descriptionIds = [];\n  if (ariaDescribedBy) descriptionIds.push(ariaDescribedBy);\n  if (asFieldset && info) descriptionIds.push(`${id}-info`);\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      {...restProps}\n      container={{\n        direction: inline && !labelHidden ? 'row' : 'column',\n        alignItems: inline && !labelHidden ? 'center' : undefined,\n        wrap: isRadioCheck || inline ? 'wrap' : undefined,\n        ...container\n      }}\n      as={StyledFormField}\n      asFieldset={asFieldset}\n      isRadioCheck={isRadioCheck}\n      showAdditionalInfo={showAdditionalInfo}\n      id={`${id}-field`}\n      forwardedAs={as}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      labelInline={labelInline}\n      onKeyDown={hasSuggestion ? onKeyDown : undefined}\n      aria-describedby={descriptionIds.length ? descriptionIds.join(' ') : undefined}\n      aria-labelledby={asFieldset ? labelId : undefined}\n      ref={consolidatedRef}\n      className={createClassName('form-field', className, { status })}\n    >\n      {(asFieldset || !labelAfter) && labelRow}\n      {!readOnly && infoAbove && infoContent}\n      {content}\n      {!asFieldset && labelAfter && labelRow}\n      {!readOnly && !infoAbove && infoContent}\n      {isRadioCheck && onClear && (\n        <StyledClearButton\n          variant='link'\n          onClick={() => {\n            onClear();\n          }}\n        >\n          {t('clear_selection')}\n        </StyledClearButton>\n      )}\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":";AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACpG,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC1E,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,gBAAgB,MAAM,kCAAkC,CAAC;AACrE,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,gBAAgB,MAAM,kCAAkC,CAAC;AACrE,OAAO,cAAc,EAAE,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEnF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAG3D,YAAY,CAAC,aAAa,EAAE,gBAAgB,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC;AAuE3E,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAoD,CAAC,EACxF,KAAK,EACL,MAAM,EACP,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;aAGC,sBAAsB,CAAC,KAAK,EAAE,MAAM,CAAC;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;+BACmB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE9C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAE3C,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IACjC,MAAM,EACJ,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,EACjE,UAAU,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EACxC,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC;IAEnC,OAAO,GAAG,CAAA;iBACK,YAAY;;;;QAIrB,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;4CAC+B,OAAO;WACxC;QACH,CAAC,CAAC,GAAG,CAAA;8CACiC,OAAO;WAC1C;;;MAGL,MAAM;QACR,SAAS,CAAC,MAAM,CAAC;QACjB,GAAG,CAAA;eACQ,sBAAsB,CAAC,KAAK,EAAE,MAAM,CAAC;KAC/C;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAsB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3E,IAAI,MAAM,EAAE,CAAC;QACX,OAAO,GAAG,CAAA;;;QAGN,oBAAoB;;;KAGvB,CAAC;IACJ,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAMvC,KAAK,CAAC,EAAE;IACR,MAAM,EACJ,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,MAAM,EAAE,EACnB,kBAAkB,EAAE,eAAe,EACnC,OAAO,EACP,UAAU,EAAE,EAAE,aAAa,EAAE,cAAc,EAAE,EAC9C,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;MACN,QAAQ;QACV,GAAG,CAAA;iBACU,eAAe;;;KAG3B;;;;YAIO,qBAAqB;QACzB,mBAAmB;;;;;MAKrB,UAAU,QAAQ,gBAAgB;;;;QAIhC,WAAW,OAAO,cAAc,OAAO,UAAU,UAAU,WAAW;;qCAEzC,OAAO;sBACtB,cAAc;;;;QAI5B,WAAW,OAAO,cAAc,MAAM,WAAW,OAAO,UAAU,MAAM,WAAW;QACnF,QAAQ;QACV,GAAG,CAAA;;qBAEY,gBAAgB;mBAClB,MAAM;;OAElB;;QAEC,QAAQ;QACV,GAAG,CAAA;;OAEF;;;MAGD,UAAU;QACZ,kBAAkB;QAClB,GAAG,CAAA;UACG,UAAU,MAAM,WAAW;;;;UAI3B,UAAU,UAAU,WAAW,OAAO,oBAAoB;;;KAG/D;;MAEC,WAAW;QACb,GAAG,CAAA;;;;;;QAMC,UAAU,UAAU,WAAW,MAAM,UAAU,UAAU,cAAc;;;KAG1E;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAmC,CAAC,EAC9E,KAAK,EACL,MAAM,EACP,EAAE,EAAE;IACH,MAAM,EACJ,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EACxD,UAAU,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,EAC5C,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC;IAEnC,OAAO,GAAG,CAAA;MACN,UAAU;QACR,CAAC,CAAC,MAAM,IAAI,MAAM,KAAK,SAAS,CAAC;QACnC,GAAG,CAAA;iBACQ,WAAW,CAAC,kBAAkB,CAAC;qBAC3B,YAAY;OAC1B;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,aAAa,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;AAE1F,MAAM,SAAS,GAAsC,UAAU,CAAC,SAAS,SAAS,CAChF,KAAsC,EACtC,GAAqB;IAErB,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EACJ,MAAM,EACN,QAAQ,EAAE,cAAc,EACxB,EAAE,GAAG,GAAG,EACR,EAAE,GAAG,KAAK,EACV,KAAK,EACL,OAAO,EAAE,WAAW,GAAG,OAAO,EAC9B,QAAQ,GAAG,EAAE,EACb,OAAO,EAAE,WAAW,EACpB,WAAW,GAAG,KAAK,EACnB,UAAU,GAAG,KAAK,EAClB,IAAI,EACJ,MAAM,EACN,qBAAqB,EACrB,YAAY,EACZ,gBAAgB,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,MAAM,KAAK,QAAQ,EAC3D,OAAO,EACP,OAAO,EACP,SAAS,EACT,cAAc,EACd,UAAU,EACV,kBAAkB,EAAE,eAAe,EACnC,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,sBAAsB,CAAC,KAAK,OAAO,CAAC;IACrF,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAExD,MAAM,UAAU,GACd,EAAE,KAAK,UAAU,IAAI,CAAC,OAAO,EAAE,KAAK,QAAQ,IAAI,QAAQ,IAAI,EAAE,IAAI,EAAE,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC;IAC9F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,iBAAiB,EAAE,GAAG,UAAU,EAAE,CAAC;IAC3C,MAAM,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC;IAClD,MAAM,sBAAsB,GAAG,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,UAAU,IAAI,UAAU,IAAI,UAAU,CAAC;IAChG,MAAM,aAAa,GAAG,sBAAsB,IAAI,CAAC,CAAC,CAAC,UAAU,IAAI,OAAO,IAAI,UAAU,CAAC,CAAC;IACxF,MAAM,eAAe,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IACpE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAEhE,MAAM,kBAAkB,GAAG,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ,IAAI,CAAC,WAAW,CAAC;IACzE,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,YAAY,IAAI,CAAC,WAAW,CAAC;IAC5D,MAAM,OAAO,GAAG,UAAU,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC;IAEzE,MAAM,YAAY,GAAG,CACnB,8BACE,KAAC,KAAK,mBACS,OAAO,CAAC,KAAK,EAC1B,EAAE,EAAE,OAAO,EACX,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACnD,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;oBACzB,IAAI,QAAQ;wBAAE,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnC,CAAC,EACD,MAAM,EAAE,WAAW,EACnB,GAAG,EAAE,QAAQ,YAEZ,KAAK,GACA,EAEP,kBAAkB,IAAI,SAAS,IAAI,CAClC,KAAC,cAAc,mBACA,OAAO,CAAC,cAAc,EACnC,OAAO,EAAE,cAAc,CAAC,OAAO,EAC/B,eAAe,EAAE,SAAS,YAEzB,cAAc,CAAC,OAAO,GACR,CAClB,IACA,CACJ,CAAC;IAEF,IAAI,QAAmB,CAAC;IACxB,IAAI,CAAC,YAAY,IAAI,CAAC,UAAU,IAAI,CAAC,WAAW,EAAE,CAAC;QACjD,QAAQ,GAAG,CACT,KAAC,IAAI,IACH,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,EAC5E,IAAI,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,EAC3F,MAAM,EAAE,WAAW,YAElB,YAAY,GACR,CACR,CAAC;IACJ,CAAC;SAAM,IAAI,UAAU,IAAI,CAAC,WAAW,EAAE,CAAC;QACtC,QAAQ,GAAG,CACT,KAAC,IAAI,IACH,SAAS,EAAE;gBACT,UAAU,EAAE,KAAK;gBACjB,OAAO,EAAE,kBAAkB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;aACrE,YAEA,YAAY,GACR,CACR,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,QAAQ,GAAG,YAAY,CAAC;IAC1B,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,QAAQ,CAAC,OAAO,EAAE,WAAW,IAAI,IAAI,CAAC,CAAC;IACtD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,qBAAqB,IAAI,CAAC,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,SAAS,CAAC;YAAE,OAAO;QAElF,IAAI,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;QAExB,IAAI,OAAO,IAAI,KAAK,QAAQ;YAAE,OAAO,GAAG,GAAG,OAAO,IAAI,IAAI,EAAE,CAAC;QAE7D,IAAI,QAAQ,CAAC,OAAO,EAAE,WAAW;YAAE,OAAO,GAAG,GAAG,QAAQ,CAAC,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,CAAC;QAE3F,iBAAiB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IAC/C,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;IAEnB,0CAA0C;IAC1C,IAAI,OAAmC,CAAC;IACxC,IAAI,UAAU,IAAI,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC;QACrD,OAAO,GAAG,cAAc,CAAC;IAC3B,CAAC;SAAM,CAAC;QACN,MAAM,6BAA6B,GAAG,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,KAAK,CACvE,kBAAkB,CACG,CAAC;QACxB,OAAO,GAAG,YAAY,CAAC,cAA8B,EAAE;YACrD,kBAAkB,EAChB,CAAC,6BAA6B,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;iBAC1E,IAAI,CAAC,GAAG,CAAC;iBACT,IAAI,EAAE,IAAI,SAAS;SACzB,CAAC,CAAC;IACL,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,GAAG,CACR,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAC7C,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,aAE1C,OAAO,EACR,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,GAAI,IACjC,CACR,CAAC;IACJ,CAAC;IAED,IAAI,WAAW,GAAG,CAChB,MAAC,IAAI,IACH,EAAE,EAAE,GAAG,EAAE,OAAO,iBACH,OAAO,CAAC,IAAI,EACzB,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAC7C,SAAS,EAAE,SAAS,aAEnB,MAAM,IAAI,MAAM,KAAK,SAAS,IAAI,CACjC,8BACE,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAC5B,EAAE,EAAE,gBAAgB,EACpB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,GAC3B,EACF,KAAC,kBAAkB,cAAE,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,GAAsB,IACzD,CACJ,EACA,IAAI,IACA,CACR,CAAC;IAEF,IAAI,gBAAgB,EAAE,CAAC;QACrB,WAAW,GAAG,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,aAClE,WAAW,EACZ,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,YAAG,gBAAgB,GAAQ,IAC/C,CACR,CAAC;IACJ,CAAC;IAED,IAAI,aAAa,EAAE,CAAC;QAClB,MAAM,UAAU,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;QAClD,WAAW,GAAG,CACZ,MAAC,mBAAmB,mBACL,OAAO,CAAC,IAAI,EACzB,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,GAAG,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,aAEnB,OAAO,IAAI,UAAU,IAAI,CACxB,MAAC,uBAAuB,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,MAAM,aACpF,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,eAAe,GAAG,EAAC,GAAG,EAClD,KAAC,IAAI,cAAE,GAAG,CAAC,CAAC,4BAA4B,CAAC,GAAG,GAAQ,EACpD,KAAC,QAAQ,IACP,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,IAAI,iBACG,OAAO,CAAC,gBAAgB,EACrC,OAAO,EAAE,GAAG,EAAE;gCACZ,UAAU,CAAC,QAAQ,EAAE,CAAC;gCACtB,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;4BACzB,CAAC,EACD,KAAK,EAAE,UAAU,CAAC,KAAK,gBACX,GAAG,CAAC,CAAC,+BAA+B,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,GACxF,IACsB,CAC3B,EACA,UAAU,IAAI,UAAU;oBACvB,CAAC,eAAe,IAAI,UAAU,IAAI,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,CAC3D,MAAC,uBAAuB,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,MAAM,aACpF,KAAC,IAAI,cAAE,GAAG,CAAC,CAAC,2BAA2B,CAAC,GAAG,GAAQ,EACnD,KAAC,MAAM,IACL,OAAO,EAAC,MAAM,iBACD,OAAO,CAAC,gBAAgB,EACrC,OAAO,EAAE,GAAG,EAAE;oCACZ,UAAU,CAAC,QAAQ,EAAE,CAAC;oCACtB,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;gCACzB,CAAC,gBACW,GAAG,CAAC,CAAC,+BAA+B,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,YAEvF,UAAU,CAAC,aAAa,GAClB,IACe,CAC3B,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,IACP,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,IAAI,iBACG,OAAO,CAAC,gBAAgB,EACrC,OAAO,EAAE,GAAG,EAAE;4BACZ,UAAU,CAAC,QAAQ,EAAE,CAAC;4BACtB,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;wBACzB,CAAC,EACD,KAAK,EAAE,CAAC,CAAC,kBAAkB,CAAC,gBAChB,GAAG,CAAC,CAAC,+BAA+B,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,GACxF,CACH,CAAC,EAEJ,KAAC,kBAAkB,iBAAW,QAAQ,YAAE,CAAC,CAAC,mBAAmB,CAAC,GAAsB,IAChE,CACvB,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAG,CAAC,CAAgB,EAAE,EAAE;QACrC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAC;YACvC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,UAAU,EAAE,QAAQ,EAAE,CAAC;YACzB,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,EAAE,CAAC;IAC1B,IAAI,eAAe;QAAE,cAAc,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAC1D,IAAI,UAAU,IAAI,IAAI;QAAE,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAE1D,OAAO,CACL,MAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,SAAS,EAAE;YACT,SAAS,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;YACpD,UAAU,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;YACzD,IAAI,EAAE,YAAY,IAAI,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YACjD,GAAG,SAAS;SACb,EACD,EAAE,EAAE,eAAe,EACnB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,EAAE,EAAE,GAAG,EAAE,QAAQ,EACjB,WAAW,EAAE,EAAE,EACf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,sBAAsB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,sBACvC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,qBAC7D,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACjD,GAAG,EAAE,eAAe,EACpB,SAAS,EAAE,eAAe,CAAC,YAAY,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,aAE9D,CAAC,UAAU,IAAI,CAAC,UAAU,CAAC,IAAI,QAAQ,EACvC,CAAC,QAAQ,IAAI,SAAS,IAAI,WAAW,EACrC,OAAO,EACP,CAAC,UAAU,IAAI,UAAU,IAAI,QAAQ,EACrC,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,WAAW,EACtC,YAAY,IAAI,OAAO,IAAI,CAC1B,KAAC,iBAAiB,IAChB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,EAAE,CAAC;gBACZ,CAAC,YAEA,CAAC,CAAC,iBAAiB,CAAC,GACH,CACrB,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,SAAS,EAAE,mBAAmB,CAAC,CAAC","sourcesContent":["import { cloneElement, useEffect, forwardRef, useState, useRef, Children } from 'react';\nimport type { FC, ReactNode, ComponentType, ReactElement, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport AIButton from '../AIButton';\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport Flex, { StyledFlex } from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport type { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useI18n, useLiveLog, useTestIds, useTheme, useUID } from '../../hooks';\nimport Label, { StyledLabel } from '../Label';\nimport type { LabelProps } from '../Label';\nimport { calculateFontSize, getReadableStatusColor } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, withTestIds, createClassName } from '../../utils';\nimport Button from '../Button';\nimport Text, { StyledText } from '../Text';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as diamondMinusIcon from '../Icon/icons/diamond-minus.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as polarisSolidIcon from '../Icon/icons/polaris-solid.icon';\nimport AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';\nimport { StyledRadioCheck, StyledRadioCheckInput } from '../RadioCheck/RadioCheck';\n\nimport { getFormFieldTestIds } from './FormField.test-ids';\nimport type { elements } from './FormField.test-ids';\n\nregisterIcon(warnSolidIcon, diamondMinusIcon, checkIcon, polarisSolidIcon);\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  /** Id of additional describing element. */\n  'aria-describedby'?: string;\n  /** Callback invoked when the clear button is clicked. If provided will render the clear button. */\n  onClear?: () => void;\n  /** Suppresses announcements for status changes. */\n  suppressAnnouncements?: boolean;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(({\n  theme,\n  status\n}) => {\n  return css`\n    height: 1em;\n    width: 1em;\n    color: ${getReadableStatusColor(theme, status)};\n    vertical-align: baseline;\n  `;\n});\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledClearButton = styled(Button)(({ theme }) => {\n  return css`\n    margin-block-start: calc(${theme.base.spacing} / 2);\n    align-self: start;\n  `;\n});\n\nStyledClearButton.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<\n  Pick<FormControlProps, 'status'> & { infoAbove?: boolean }\n>(({ status, infoAbove, theme }) => {\n  const {\n    base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n    components: { 'form-field': formField }\n  } = theme;\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n  const infoFontSize = fontSizes.xxs;\n\n  return css`\n    font-size: ${infoFontSize};\n    word-break: break-word;\n\n    &:not(:empty) {\n      ${infoAbove\n        ? css`\n            margin-block-end: calc(0.25 * ${spacing});\n          `\n        : css`\n            margin-block-start: calc(0.25 * ${spacing});\n          `}\n    }\n\n    ${status &&\n    formField[status] &&\n    css`\n      color: ${getReadableStatusColor(theme, status)};\n    `}\n  `;\n});\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledLabelRow = styled.div<{ inline: boolean }>(({ inline }) => {\n  if (inline) {\n    return css`\n      flex-shrink: 0;\n      width: 14ch;\n      ${StyledAdditionalInfo} {\n        align-self: center;\n      }\n    `;\n  }\n});\n\nexport const StyledFormField = styled.div<\n  FormFieldProps & {\n    asFieldset: boolean;\n    showAdditionalInfo: boolean;\n    labelInline?: boolean;\n  }\n>(props => {\n  const {\n    asFieldset,\n    showAdditionalInfo,\n    disabled,\n    required,\n    labelInline,\n    theme: {\n      base: {\n        palette: { urgent },\n        'disabled-opacity': disabledOpacity,\n        spacing,\n        'hit-area': { 'compact-min': hitAreaCompact }\n      }\n    }\n  } = props;\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    &:has(${StyledRadioCheckInput}:only-of-type) {\n      ${StyledFormFieldInfo} {\n        min-width: 100%;\n      }\n    }\n\n    ${StyledFlex}:has(${StyledRadioCheck}) {\n      flex-shrink: 0;\n    }\n\n    > ${StyledLabel}, > ${StyledLabelRow}, > ${StyledFlex}:has(> ${StyledLabel}) {\n      &:not(:empty) {\n        margin-bottom: calc(0.25 * ${spacing});\n        min-height: ${hitAreaCompact};\n      }\n    }\n\n    > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel}, > ${StyledFlex} > ${StyledLabel} {\n      ${required &&\n      css`\n        &::after {\n          content: ${'\"\\\\00a0*\" / \"\"'};\n          color: ${urgent};\n        }\n      `}\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n    }\n\n    ${asFieldset &&\n    showAdditionalInfo &&\n    css`\n      > ${StyledFlex} > ${StyledLabel} {\n        display: block;\n      }\n\n      > ${StyledFlex}:has(> ${StyledLabel}) > ${StyledAdditionalInfo} {\n        align-self: flex-start;\n      }\n    `}\n\n    ${labelInline &&\n    css`\n      display: grid;\n      grid-template-columns: 14ch 1fr;\n      grid-template-rows: auto 1fr;\n      align-items: start;\n\n      ${StyledFlex}:has(> ${StyledLabel}), ${StyledFlex}:has(> ${StyledLabelRow}) {\n        grid-row: span 2;\n      }\n    `}\n  `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionWrapper = styled(Flex)<Pick<FormControlProps, 'status'>>(({\n  theme,\n  status\n}) => {\n  const {\n    base: { 'font-size': fontSize, 'font-scale': fontScale },\n    components: { 'form-control': formControl }\n  } = theme;\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n  const infoFontSize = fontSizes.xxs;\n\n  return css`\n    ${StyledText} {\n      ${(!status || status === 'pending') &&\n      css`\n        color: ${formControl['foreground-color']};\n        font-size: ${infoFontSize};\n      `}\n    }\n  `;\n});\n\nStyledSuggestionWrapper.defaultProps = defaultThemeProp;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'diamond-minus', 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 theme = useTheme();\n  const {\n    testId,\n    children: controlElement,\n    id = uid,\n    as = 'div',\n    label,\n    labelAs: labelAsProp = 'label',\n    labelFor = id,\n    labelId: labelIdProp,\n    labelHidden = false,\n    labelAfter = false,\n    info,\n    status,\n    suppressAnnouncements,\n    isRadioCheck,\n    charLimitDisplay,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    inline = theme.components['form-field'].layout === 'inline',\n    onClear,\n    actions,\n    container,\n    additionalInfo,\n    suggestion,\n    'aria-describedby': ariaDescribedBy,\n    className,\n    ...restProps\n  } = props;\n\n  const infoAbove = theme.components['form-field']['helper-text-position'] === 'above';\n  const testIds = useTestIds(testId, getFormFieldTestIds);\n\n  const asFieldset =\n    as === 'fieldset' || (typeof as !== 'string' && 'target' in as && as.target === 'fieldset');\n  const t = useI18n();\n  const { announceAssertive } = useLiveLog();\n  const labelAs = asFieldset ? 'span' : labelAsProp;\n  const hasAutoInputSuggestion = status === 'pending' && !!suggestion && 'onReject' in suggestion;\n  const hasSuggestion = hasAutoInputSuggestion || (!!suggestion && 'value' in suggestion);\n  const consolidatedRef = useConsolidatedRef(ref);\n  const labelRef = useRef<HTMLLabelElement | HTMLLegendElement>(null);\n  const [labelText, setLabelText] = useState<string | null>(null);\n\n  const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;\n  const labelInline = inline && !isRadioCheck && !labelHidden;\n  const labelId = asFieldset && !labelIdProp ? `${id}-label` : labelIdProp;\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={labelInline}\n        ref={labelRef}\n      >\n        {label}\n      </Label>\n\n      {showAdditionalInfo && labelText && (\n        <AdditionalInfo\n          data-testid={testIds.additionalInfo}\n          heading={additionalInfo.heading}\n          contextualLabel={labelText}\n        >\n          {additionalInfo.content}\n        </AdditionalInfo>\n      )}\n    </>\n  );\n\n  let labelRow: ReactNode;\n  if (!isRadioCheck && !asFieldset && !labelHidden) {\n    labelRow = (\n      <Flex\n        as={StyledLabelRow}\n        container={{ justify: labelInline ? 'start' : 'between', alignItems: 'end' }}\n        item={{ alignSelf: labelInline ? 'start' : 'stretch', shrink: labelInline ? 0 : undefined }}\n        inline={labelInline}\n      >\n        {labelContent}\n      </Flex>\n    );\n  } else if (asFieldset && !labelHidden) {\n    labelRow = (\n      <Flex\n        container={{\n          alignItems: 'end',\n          justify: showAdditionalInfo && !isRadioCheck ? 'between' : undefined\n        }}\n      >\n        {labelContent}\n      </Flex>\n    );\n  } else {\n    labelRow = labelContent;\n  }\n\n  useEffect(() => {\n    setLabelText(labelRef.current?.textContent ?? null);\n  }, [label]);\n\n  useEffect(() => {\n    if (suppressAnnouncements || (status !== 'error' && status !== 'warning')) return;\n\n    let message = t(status);\n\n    if (typeof info === 'string') message = `${message} ${info}`;\n\n    if (labelRef.current?.textContent) message = `${labelRef.current?.textContent} ${message}`;\n\n    announceAssertive({ message, type: status });\n  }, [status, info]);\n\n  // fieldset or single form control element\n  let content: FormFieldProps['children'];\n  if (asFieldset || Children.count(controlElement) > 1) {\n    content = controlElement;\n  } else {\n    const controlElementAriaDescribedBy = Children.only(controlElement).props[\n      'aria-describedby'\n    ] as string | undefined;\n    content = cloneElement(controlElement as ReactElement, {\n      'aria-describedby':\n        [controlElementAriaDescribedBy, info && !readOnly ? `${id}-info` : undefined]\n          .join(' ')\n          .trim() || undefined\n    });\n  }\n\n  if (actions) {\n    content = (\n      <Flex\n        container={{ alignItems: 'center', gap: 0.5 }}\n        item={{ grow: labelInline ? 1 : undefined }}\n      >\n        {content}\n        <Actions items={actions} menuAt={3} />\n      </Flex>\n    );\n  }\n\n  let infoContent = (\n    <Flex\n      id={`${id}-info`}\n      data-testid={testIds.info}\n      status={status}\n      as={StyledFormFieldInfo}\n      container={{ alignItems: 'center', gap: 0.5 }}\n      infoAbove={infoAbove}\n    >\n      {status && status !== 'pending' && (\n        <>\n          <Flex\n            item={{ alignSelf: 'start' }}\n            as={StyledStatusIcon}\n            status={status}\n            name={statusIconMap[status]}\n          />\n          <VisuallyHiddenText>{`${t(status)} `}</VisuallyHiddenText>\n        </>\n      )}\n      {info}\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      <StyledFormFieldInfo\n        data-testid={testIds.info}\n        status={status}\n        id={`${id}-info`}\n        infoAbove={infoAbove}\n      >\n        {'value' in suggestion && (\n          <StyledSuggestionWrapper container={{ alignItems: 'center', gap: 0.2 }} status={status}>\n            <Icon size='font-size' name='polaris-solid' />{' '}\n            <Text>{`${t('suggestion_suggested_value')}:`}</Text>\n            <AIButton\n              variant='link'\n              icon={null}\n              data-testid={testIds.suggestionAccept}\n              onClick={() => {\n                suggestion.onAccept();\n                focusables[0]?.focus();\n              }}\n              label={suggestion.value}\n              aria-label={`${t('accept_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\n            />\n          </StyledSuggestionWrapper>\n        )}\n        {'onReject' in suggestion &&\n          ('previousValue' in suggestion && suggestion.previousValue ? (\n            <StyledSuggestionWrapper container={{ alignItems: 'center', gap: 0.2 }} status={status}>\n              <Text>{`${t('suggestion_previous_value')}:`}</Text>\n              <Button\n                variant='link'\n                data-testid={testIds.suggestionReject}\n                onClick={() => {\n                  suggestion.onReject();\n                  focusables[0]?.focus();\n                }}\n                aria-label={`${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\n              >\n                {suggestion.previousValue}\n              </Button>\n            </StyledSuggestionWrapper>\n          ) : (\n            <AIButton\n              variant='link'\n              icon={null}\n              data-testid={testIds.suggestionReject}\n              onClick={() => {\n                suggestion.onReject();\n                focusables[0]?.focus();\n              }}\n              label={t('suggestion_clear')}\n              aria-label={`${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\n            />\n          ))}\n\n        <VisuallyHiddenText aria-live='polite'>{t('suggestion_assist')}</VisuallyHiddenText>\n      </StyledFormFieldInfo>\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        suggestion?.onAccept();\n      }\n    }\n  };\n\n  const descriptionIds = [];\n  if (ariaDescribedBy) descriptionIds.push(ariaDescribedBy);\n  if (asFieldset && info) descriptionIds.push(`${id}-info`);\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      {...restProps}\n      container={{\n        direction: inline && !labelHidden ? 'row' : 'column',\n        alignItems: inline && !labelHidden ? 'center' : undefined,\n        wrap: isRadioCheck || inline ? 'wrap' : undefined,\n        ...container\n      }}\n      as={StyledFormField}\n      asFieldset={asFieldset}\n      isRadioCheck={isRadioCheck}\n      showAdditionalInfo={showAdditionalInfo}\n      id={`${id}-field`}\n      forwardedAs={as}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      labelInline={labelInline}\n      onKeyDown={hasAutoInputSuggestion ? onKeyDown : undefined}\n      aria-describedby={descriptionIds.length ? descriptionIds.join(' ') : undefined}\n      aria-labelledby={asFieldset ? labelId : undefined}\n      ref={consolidatedRef}\n      className={createClassName('form-field', className, { status })}\n    >\n      {(asFieldset || !labelAfter) && labelRow}\n      {!readOnly && infoAbove && infoContent}\n      {content}\n      {!asFieldset && labelAfter && labelRow}\n      {!readOnly && !infoAbove && infoContent}\n      {isRadioCheck && onClear && (\n        <StyledClearButton\n          variant='link'\n          onClick={() => {\n            onClear();\n          }}\n        >\n          {t('clear_selection')}\n        </StyledClearButton>\n      )}\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":"AACA,OAAO,KAAK,EAAwB,aAAa,EAAE,yBAAyB,EAAE,MAAM,OAAO,CAAC;AAI5F,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAI9E,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,GAAI,GAAG,OAAO,UAAU,EAAE,SAUlD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,GAAG,OAAO,UAAU,EAAE,SAUvD,CAAC;AAEF,eAAO,MAAM,UAAU;WAAuB,SAAS,CAAC,MAAM,CAAC;YA8C7D,CAAC;AAIH,eAAO,MAAM,eAAe;gBACd,WAAW,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;iBACnC,SAAS,CAAC,YAAY,CAAC;WAC7B,SAAS,CAAC,MAAM,CAAC;YAChB,SAAS,CAAC,OAAO,CAAC;YAiE1B,CAAC;AAMH,QAAA,MAAM,IAAI,EAqGJ,yBAAyB,CAAC,SAAS,CAAC,CAAC;AAE3C,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,aAAa,EAAE,yBAAyB,EAAE,MAAM,OAAO,CAAC;AAI5F,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAI9E,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,GAAI,GAAG,OAAO,UAAU,EAAE,SAUlD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,GAAG,OAAO,UAAU,EAAE,SAUvD,CAAC;AAEF,eAAO,MAAM,UAAU;WAAuB,SAAS,CAAC,MAAM,CAAC;YAgD7D,CAAC;AAIH,eAAO,MAAM,eAAe;gBACd,WAAW,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;iBACnC,SAAS,CAAC,YAAY,CAAC;WAC7B,SAAS,CAAC,MAAM,CAAC;YAChB,SAAS,CAAC,OAAO,CAAC;YAiE1B,CAAC;AAMH,QAAA,MAAM,IAAI,EAqGJ,yBAAyB,CAAC,SAAS,CAAC,CAAC;AAE3C,eAAe,IAAI,CAAC"}

package/lib/components/Icon/Icon.js

@@ -63,6 +63,8 @@ export const StyledIcon = styled.svg(({ theme, size = 's' }) => {
 
     ${size === 'font-size' &&
         css `
+      min-height: 1em;
+      min-width: 1em;
       width: 1em;
       height: 1em;
     `}

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 { forwardRef, useState, useEffect } from 'react';\nimport type { Ref, PropsWithoutRef, ComponentType, ForwardRefExoticComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useTheme } from '../../hooks';\nimport type { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { readableColor } from '../../styles';\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    @media (forced-colors: active) {\n      fill: CanvasText;\n    }\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, { level: 'AANonText' });\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    overflow: clip;\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  {\n    set: setProp,\n    name,\n    size,\n    'aria-label': ariaLabel,\n    role,\n    ...restProps\n  }: 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        let iconSet: string;\n        let module: IconModule;\n\n        switch (set) {\n          case 'streamline':\n            iconSet = 'streamline-icons';\n            break;\n          case 'budicon':\n            iconSet = 'icons';\n            break;\n          default:\n            throw new Error('Unknown icon');\n        }\n\n        // Different extensions are required for different build setups.\n        try {\n          module = await import(`./${iconSet}/${encodedName}.icon`);\n        } catch {\n          try {\n            module = await import(`./${iconSet}/${encodedName}.icon.tsx`);\n          } catch {\n            module = await import(`./${iconSet}/${encodedName}.icon.js`);\n          }\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      {...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\n        role={role ?? (ariaLabel === undefined ? 'presentation' : 'img')}\n        aria-label={ariaLabel}\n        viewBox={iconDef.viewBox}\n        data-icon-name={name}\n      >\n        <iconDef.Component />\n      </StyledIcon>\n    </StyledIconShape>\n  ) : (\n    <StyledIcon\n      {...restProps}\n      role={role ?? (ariaLabel === undefined ? 'presentation' : 'img')}\n      aria-label={ariaLabel}\n      viewBox={iconDef.viewBox}\n      size={size}\n      data-icon-name={name}\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 { forwardRef, useState, useEffect } from 'react';\nimport type { Ref, PropsWithoutRef, ComponentType, ForwardRefExoticComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useTheme } from '../../hooks';\nimport type { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { readableColor } from '../../styles';\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    @media (forced-colors: active) {\n      fill: CanvasText;\n    }\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      min-height: 1em;\n      min-width: 1em;\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, { level: 'AANonText' });\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    overflow: clip;\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  {\n    set: setProp,\n    name,\n    size,\n    'aria-label': ariaLabel,\n    role,\n    ...restProps\n  }: 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        let iconSet: string;\n        let module: IconModule;\n\n        switch (set) {\n          case 'streamline':\n            iconSet = 'streamline-icons';\n            break;\n          case 'budicon':\n            iconSet = 'icons';\n            break;\n          default:\n            throw new Error('Unknown icon');\n        }\n\n        // Different extensions are required for different build setups.\n        try {\n          module = await import(`./${iconSet}/${encodedName}.icon`);\n        } catch {\n          try {\n            module = await import(`./${iconSet}/${encodedName}.icon.tsx`);\n          } catch {\n            module = await import(`./${iconSet}/${encodedName}.icon.js`);\n          }\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      {...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\n        role={role ?? (ariaLabel === undefined ? 'presentation' : 'img')}\n        aria-label={ariaLabel}\n        viewBox={iconDef.viewBox}\n        data-icon-name={name}\n      >\n        <iconDef.Component />\n      </StyledIcon>\n    </StyledIconShape>\n  ) : (\n    <StyledIcon\n      {...restProps}\n      role={role ?? (ariaLabel === undefined ? 'presentation' : 'img')}\n      aria-label={ariaLabel}\n      viewBox={iconDef.viewBox}\n      size={size}\n      data-icon-name={name}\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/Input/Input.js

@@ -8,7 +8,7 @@ import StyledInput from './Input.styles';
 import { getInputTestIds } from './Input.test-ids';
 export default withTestIds(forwardRef(function Input(props, ref) {
     const uid = useUID();
-    const { testId, id = uid, value, defaultValue, required = false, disabled = false, readOnly = false, label, additionalInfo, labelHidden, info, status, actions, onResolveSuggestion, className, ...restProps } = props;
+    const { testId, id = uid, value, defaultValue, required = false, disabled = false, readOnly = false, label, additionalInfo, labelHidden, info, status, actions, suggestion, className, ...restProps } = props;
     const testIds = useTestIds(testId, getInputTestIds);
     const controlProp = {};
     // Conditionally render component as controlled/uncontrolled
@@ -18,11 +18,11 @@ export default withTestIds(forwardRef(function Input(props, ref) {
     else if (hasProp(props, 'defaultValue')) {
         controlProp.defaultValue = defaultValue ?? '';
     }
-    const Comp = (_jsx(FormControl, { "data-testid": testIds.control, ref: ref, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, hasSuggestion: !!onResolveSuggestion && status === 'pending', ...controlProp, 
+    const Comp = (_jsx(FormControl, { "data-testid": testIds.control, ref: ref, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, hasSuggestion: !!suggestion && status === 'pending', ...controlProp, 
         // Disables browser autocomplete
         // Chrome does not respect autocomplete='off'
         // Current consensus is to workaround via random string
         autoComplete: '_off', ...restProps, as: StyledInput, className: createClassName('input', className) }));
-    return label ? (_jsx(FormField, { testId: testIds, additionalInfo: additionalInfo, label: label, labelHidden: labelHidden, id: id, info: info, readOnly: readOnly, status: status, required: required, disabled: disabled, actions: actions, onResolveSuggestion: onResolveSuggestion, children: Comp })) : (Comp);
+    return label ? (_jsx(FormField, { testId: testIds, additionalInfo: additionalInfo, label: label, labelHidden: labelHidden, id: id, info: info, readOnly: readOnly, status: status, required: required, disabled: disabled, actions: actions, suggestion: suggestion, children: Comp })) : (Comp);
 }), getInputTestIds);
 //# sourceMappingURL=Input.js.map

package/lib/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AA+BnD,eAAe,WAAW,CACxB,UAAU,CAAsD,SAAS,KAAK,CAAC,KAAK,EAAE,GAAG;IACvF,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,MAAM,EACJ,MAAM,EACN,EAAE,GAAG,GAAG,EACR,KAAK,EACL,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,cAAc,EACd,WAAW,EACX,IAAI,EACJ,MAAM,EACN,OAAO,EACP,mBAAmB,EACnB,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAEpD,MAAM,WAAW,GAGb,EAAE,CAAC;IAEP,4DAA4D;IAC5D,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC;QAC5B,WAAW,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;IAClC,CAAC;SAAM,IAAI,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,CAAC;QAC1C,WAAW,CAAC,YAAY,GAAG,YAAY,IAAI,EAAE,CAAC;IAChD,CAAC;IAED,MAAM,IAAI,GAAG,CACX,KAAC,WAAW,mBACG,OAAO,CAAC,OAAO,EAC5B,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,CAAC,CAAC,mBAAmB,IAAI,MAAM,KAAK,SAAS,KACxD,WAAW;QACf,gCAAgC;QAChC,6CAA6C;QAC7C,uDAAuD;QACvD,YAAY,EAAC,MAAM,KACf,SAAS,EACb,EAAE,EAAE,WAAW,EACf,SAAS,EAAE,eAAe,CAAC,OAAO,EAAE,SAAS,CAAC,GAC9C,CACH,CAAC;IAEF,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,IACR,MAAM,EAAE,OAAO,EACf,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,mBAAmB,EAAE,mBAAmB,YAEvC,IAAI,GACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CAAC,EACF,eAAe,CAChB,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { Action, NoChildrenProp, RefElement, TestIdProp, WithAttributes } from '../../types';\nimport FormField from '../FormField';\nimport FormControl from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { createClassName, hasProp, withTestIds } from '../../utils';\nimport { useTestIds, useUID } from '../../hooks';\n\nimport StyledInput from './Input.styles';\nimport { getInputTestIds } from './Input.test-ids';\n\nexport type InputProps = WithAttributes<\n  'input',\n  FormControlProps &\n    TestIdProp &\n    NoChildrenProp & {\n      /**\n       * Specifies the type of input to be used.\n       * @default 'text'\n       */\n      type?:\n        | 'text'\n        | 'password'\n        | 'number'\n        | 'email'\n        | 'url'\n        | 'search'\n        | 'tel'\n        | 'date'\n        | 'datetime-local'\n        | 'time'\n        | 'week'\n        | 'month'\n        | 'hidden'\n        | 'color';\n      /** Pass an array of Action objects to append button(s) inline with the Input. */\n      actions?: Action[];\n    }\n>;\n\nexport default withTestIds(\n  forwardRef<RefElement<InputProps>, PropsWithoutRef<InputProps>>(function Input(props, ref) {\n    const uid = useUID();\n\n    const {\n      testId,\n      id = uid,\n      value,\n      defaultValue,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      label,\n      additionalInfo,\n      labelHidden,\n      info,\n      status,\n      actions,\n      onResolveSuggestion,\n      className,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getInputTestIds);\n\n    const controlProp: {\n      value?: string;\n      defaultValue?: string;\n    } = {};\n\n    // Conditionally render component as controlled/uncontrolled\n    if (hasProp(props, 'value')) {\n      controlProp.value = value ?? '';\n    } else if (hasProp(props, 'defaultValue')) {\n      controlProp.defaultValue = defaultValue ?? '';\n    }\n\n    const Comp = (\n      <FormControl\n        data-testid={testIds.control}\n        ref={ref}\n        id={id}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={status}\n        hasSuggestion={!!onResolveSuggestion && status === 'pending'}\n        {...controlProp}\n        // Disables browser autocomplete\n        // Chrome does not respect autocomplete='off'\n        // Current consensus is to workaround via random string\n        autoComplete='_off'\n        {...restProps}\n        as={StyledInput}\n        className={createClassName('input', className)}\n      />\n    );\n\n    return label ? (\n      <FormField\n        testId={testIds}\n        additionalInfo={additionalInfo}\n        label={label}\n        labelHidden={labelHidden}\n        id={id}\n        info={info}\n        readOnly={readOnly}\n        status={status}\n        required={required}\n        disabled={disabled}\n        actions={actions}\n        onResolveSuggestion={onResolveSuggestion}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }),\n  getInputTestIds\n);\n"]}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AA+BnD,eAAe,WAAW,CACxB,UAAU,CAAsD,SAAS,KAAK,CAAC,KAAK,EAAE,GAAG;IACvF,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,MAAM,EACJ,MAAM,EACN,EAAE,GAAG,GAAG,EACR,KAAK,EACL,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,cAAc,EACd,WAAW,EACX,IAAI,EACJ,MAAM,EACN,OAAO,EACP,UAAU,EACV,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAEpD,MAAM,WAAW,GAGb,EAAE,CAAC;IAEP,4DAA4D;IAC5D,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC;QAC5B,WAAW,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;IAClC,CAAC;SAAM,IAAI,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,CAAC;QAC1C,WAAW,CAAC,YAAY,GAAG,YAAY,IAAI,EAAE,CAAC;IAChD,CAAC;IAED,MAAM,IAAI,GAAG,CACX,KAAC,WAAW,mBACG,OAAO,CAAC,OAAO,EAC5B,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,CAAC,CAAC,UAAU,IAAI,MAAM,KAAK,SAAS,KAC/C,WAAW;QACf,gCAAgC;QAChC,6CAA6C;QAC7C,uDAAuD;QACvD,YAAY,EAAC,MAAM,KACf,SAAS,EACb,EAAE,EAAE,WAAW,EACf,SAAS,EAAE,eAAe,CAAC,OAAO,EAAE,SAAS,CAAC,GAC9C,CACH,CAAC;IAEF,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,IACR,MAAM,EAAE,OAAO,EACf,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,YAErB,IAAI,GACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CAAC,EACF,eAAe,CAChB,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { Action, NoChildrenProp, RefElement, TestIdProp, WithAttributes } from '../../types';\nimport FormField from '../FormField';\nimport FormControl from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { createClassName, hasProp, withTestIds } from '../../utils';\nimport { useTestIds, useUID } from '../../hooks';\n\nimport StyledInput from './Input.styles';\nimport { getInputTestIds } from './Input.test-ids';\n\nexport type InputProps = WithAttributes<\n  'input',\n  FormControlProps &\n    TestIdProp &\n    NoChildrenProp & {\n      /**\n       * Specifies the type of input to be used.\n       * @default 'text'\n       */\n      type?:\n        | 'text'\n        | 'password'\n        | 'number'\n        | 'email'\n        | 'url'\n        | 'search'\n        | 'tel'\n        | 'date'\n        | 'datetime-local'\n        | 'time'\n        | 'week'\n        | 'month'\n        | 'hidden'\n        | 'color';\n      /** Pass an array of Action objects to append button(s) inline with the Input. */\n      actions?: Action[];\n    }\n>;\n\nexport default withTestIds(\n  forwardRef<RefElement<InputProps>, PropsWithoutRef<InputProps>>(function Input(props, ref) {\n    const uid = useUID();\n\n    const {\n      testId,\n      id = uid,\n      value,\n      defaultValue,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      label,\n      additionalInfo,\n      labelHidden,\n      info,\n      status,\n      actions,\n      suggestion,\n      className,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getInputTestIds);\n\n    const controlProp: {\n      value?: string;\n      defaultValue?: string;\n    } = {};\n\n    // Conditionally render component as controlled/uncontrolled\n    if (hasProp(props, 'value')) {\n      controlProp.value = value ?? '';\n    } else if (hasProp(props, 'defaultValue')) {\n      controlProp.defaultValue = defaultValue ?? '';\n    }\n\n    const Comp = (\n      <FormControl\n        data-testid={testIds.control}\n        ref={ref}\n        id={id}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={status}\n        hasSuggestion={!!suggestion && status === 'pending'}\n        {...controlProp}\n        // Disables browser autocomplete\n        // Chrome does not respect autocomplete='off'\n        // Current consensus is to workaround via random string\n        autoComplete='_off'\n        {...restProps}\n        as={StyledInput}\n        className={createClassName('input', className)}\n      />\n    );\n\n    return label ? (\n      <FormField\n        testId={testIds}\n        additionalInfo={additionalInfo}\n        label={label}\n        labelHidden={labelHidden}\n        id={id}\n        info={info}\n        readOnly={readOnly}\n        status={status}\n        required={required}\n        disabled={disabled}\n        actions={actions}\n        suggestion={suggestion}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }),\n  getInputTestIds\n);\n"]}

package/lib/components/Number/NumberInput.js

@@ -17,7 +17,7 @@ import { getNumberInputTestIds } from './Number.test-ids';
 registerIcon(minusIcon, plusIcon);
 export default withTestIds(forwardRef(function NumberInput(props, ref) {
     const uid = useUID();
-    const { testId, id = uid, status, label, labelHidden, info, required, disabled, readOnly, additionalInfo, value = '', onChange, onFocus, onBlur, onKeyDown: onKeyDownProp, onResolveSuggestion, unit, showDecimal = true, numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES, showGroupSeparators = true, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, variant, 'aria-label': ariaLabel, autoFocus, className: classNameProp, ...restProps } = props;
+    const { testId, id = uid, status, label, labelHidden, info, required, disabled, readOnly, additionalInfo, value = '', onChange, onFocus, onBlur, onKeyDown: onKeyDownProp, suggestion, unit, showDecimal = true, numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES, showGroupSeparators = true, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, variant, 'aria-label': ariaLabel, autoFocus, className: classNameProp, ...restProps } = props;
     const className = createClassName('number-input', classNameProp);
     const testIds = useTestIds(testId, getNumberInputTestIds);
     const { locale } = useConfiguration();
@@ -92,7 +92,7 @@ export default withTestIds(forwardRef(function NumberInput(props, ref) {
     };
     const formattedValue = useInputFormatter(inputRef, value, formatValue, `0-9${decimalSign}-`);
     const t = useI18n();
-    const numberInput = (_jsx(Flex, { "data-testid": testIds.root, as: StyledNumberInput, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, children: _jsx(Input, { "data-testid": testIds.control, onChange: onInputChange, id: id, readOnly: readOnly, required: required, disabled: disabled, ...restProps, className: className, inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onFocus: onInputFocusEvent, onBlur: onInputFocusEvent, "aria-label": `${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`, autoFocus: autoFocus, "aria-describedby": info ? `${id}-info` : undefined }) }));
+    const numberInput = (_jsx(Flex, { "data-testid": testIds.root, as: StyledNumberInput, hasSuggestion: status === 'pending' && !!suggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, children: _jsx(Input, { "data-testid": testIds.control, onChange: onInputChange, id: id, readOnly: readOnly, required: required, disabled: disabled, ...restProps, className: className, inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onFocus: onInputFocusEvent, onBlur: onInputFocusEvent, "aria-label": `${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`, autoFocus: autoFocus, "aria-describedby": info ? `${id}-info` : undefined }) }));
     const onMinusClick = () => {
         onChange?.(getDecrementedValue(value, min, max, step));
     };
@@ -106,11 +106,11 @@ export default withTestIds(forwardRef(function NumberInput(props, ref) {
         dir: 'left-right',
         initialFocusElement: inputRef.current
     });
-    const stepper = (_jsxs(Flex, { as: StyledStepperInput, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, size: formattedValue?.length, ref: elementRef, role: 'application', children: [_jsx(Button, { "data-testid": testIds.minus, variant: 'simple', icon: true, onClick: onMinusClick, readOnly: readOnly, disabled: disabled, tabIndex: -1, "aria-label": t('decrease_value_by', [step]), children: _jsx(Icon, { name: 'minus' }) }), _jsx(Flex, { container: { alignItems: 'center', wrap: 'nowrap', justify: 'center' }, item: { grow: 1 }, ref: containerRef, onClick: (e) => {
+    const stepper = (_jsxs(Flex, { as: StyledStepperInput, hasSuggestion: status === 'pending' && !!suggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, size: formattedValue?.length, ref: elementRef, role: 'application', children: [_jsx(Button, { "data-testid": testIds.minus, variant: 'simple', icon: true, onClick: onMinusClick, readOnly: readOnly, disabled: disabled, tabIndex: -1, "aria-label": t('decrease_value_by', [step]), children: _jsx(Icon, { name: 'minus' }) }), _jsx(Flex, { container: { alignItems: 'center', wrap: 'nowrap', justify: 'center' }, item: { grow: 1 }, ref: containerRef, onClick: (e) => {
                     if (e.target === containerRef.current)
                         inputRef?.current?.focus();
                 }, children: _jsx(Input, { "data-testid": testIds.control, onChange: onInputChange, id: id, readOnly: readOnly, required: required, disabled: disabled, ...restProps, className: className, inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onFocus: onInputFocusEvent, onBlur: onInputFocusEvent, "aria-label": `${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`, maxLength: 16, autoFocus: autoFocus, "aria-describedby": info ? `${id}-info ${id}-input-description` : `${id}-input-description` }) }), _jsx(Button, { "data-testid": testIds.plus, variant: 'simple', icon: true, onClick: onPlusClick, readOnly: readOnly, disabled: disabled, tabIndex: -1, "aria-label": t('increase_value_by', [step]), children: _jsx(Icon, { name: 'plus' }) }), _jsx(VisuallyHiddenText, { id: `${id}-input-description`, children: t('stepper_instructions') }), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: formattedValue })] }));
     const Comp = variant === 'stepper' && !readOnly ? stepper : numberInput;
-    return label ? (_jsx(FormField, { testId: testIds, label: label, labelHidden: labelHidden, id: id, info: info, status: status, required: required, readOnly: readOnly, disabled: disabled, additionalInfo: additionalInfo, onResolveSuggestion: onResolveSuggestion, children: Comp })) : (Comp);
+    return label ? (_jsx(FormField, { testId: testIds, label: label, labelHidden: labelHidden, id: id, info: info, status: status, required: required, readOnly: readOnly, disabled: disabled, additionalInfo: additionalInfo, suggestion: suggestion, children: Comp })) : (Comp);
 }), getNumberInputTestIds);
 //# sourceMappingURL=NumberInput.js.map

package/lib/components/Number/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useMemo, useRef } from 'react';\nimport type { ChangeEvent, KeyboardEvent, PropsWithoutRef, FocusEvent } from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport type { RefElement } from '../../types';\nimport {\n  useArrows,\n  useConfiguration,\n  useConsolidatedRef,\n  useI18n,\n  useInputFormatter,\n  useTestIds,\n  useUID\n} from '../../hooks';\nimport Input from '../Input';\nimport { withTestIds, createClassName } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport type { NumberInputProps } from './NumberInput.types';\nimport {\n  getCleanedValue,\n  getDecimalSign,\n  getDecrementedValue,\n  getFormattedValue,\n  getIncrementedValue\n} from './utils';\nimport { getNumberInputTestIds } from './Number.test-ids';\n\nregisterIcon(minusIcon, plusIcon);\n\nexport default withTestIds(\n  forwardRef<RefElement<NumberInputProps>, PropsWithoutRef<NumberInputProps>>(\n    function NumberInput(props, ref) {\n      const uid = useUID();\n      const {\n        testId,\n        id = uid,\n        status,\n        label,\n        labelHidden,\n        info,\n        required,\n        disabled,\n        readOnly,\n        additionalInfo,\n        value = '',\n        onChange,\n        onFocus,\n        onBlur,\n        onKeyDown: onKeyDownProp,\n        onResolveSuggestion,\n        unit,\n        showDecimal = true,\n        numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n        showGroupSeparators = true,\n        min = Number.MIN_SAFE_INTEGER,\n        max = Number.MAX_SAFE_INTEGER,\n        step = 1,\n        variant,\n        'aria-label': ariaLabel,\n        autoFocus,\n        className: classNameProp,\n        ...restProps\n      } = props;\n\n      const className = createClassName('number-input', classNameProp);\n      const testIds = useTestIds(testId, getNumberInputTestIds);\n\n      const { locale } = useConfiguration();\n      const inputRef = useConsolidatedRef(ref);\n      const containerRef = useRef<HTMLElement>(null);\n      const maximumFractionDigits = showDecimal ? numberOfDecimalsProp : 0;\n      const decimalSign = useMemo(\n        () => getDecimalSign(locale, { numberingSystem: 'latn' }),\n        [locale]\n      );\n\n      const formatValue = useCallback(\n        (number: string) => {\n          return getFormattedValue(number, locale, unit, {\n            useGrouping: showGroupSeparators,\n            maximumFractionDigits\n          });\n        },\n        [locale, unit, showGroupSeparators, maximumFractionDigits]\n      );\n\n      const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        const cleanedInputValue = getCleanedValue(inputValue, decimalSign, maximumFractionDigits);\n        if (cleanedInputValue === value) return;\n        onChange(cleanedInputValue);\n      };\n\n      const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (readOnly) return;\n        onKeyDownProp?.(e);\n        const input = e.currentTarget;\n        switch (e.key) {\n          case 'ArrowUp':\n            e.preventDefault();\n            onChange(getIncrementedValue(value, min, max, step));\n            break;\n          case 'ArrowDown':\n            e.preventDefault();\n            onChange(getDecrementedValue(value, min, max, step));\n            break;\n          case decimalSign:\n            if (input.value.includes(decimalSign)) {\n              if (\n                input.selectionStart &&\n                input.value.charAt(input.selectionStart) === decimalSign\n              ) {\n                input.setSelectionRange(input.selectionStart + 1, input.selectionStart + 1);\n              }\n              e.preventDefault();\n            } else if (\n              input.selectionStart !== null &&\n              !input.value.charAt(input.selectionStart - 1).match(/\\d/)\n            ) {\n              onChange(\n                getCleanedValue(`${input.value}0${decimalSign}`, decimalSign, maximumFractionDigits)\n              );\n              e.preventDefault();\n            }\n            break;\n          case '-':\n            if (value.startsWith('-')) e.preventDefault();\n            break;\n          default:\n        }\n      };\n\n      const onInputFocusEvent = (e: FocusEvent<HTMLInputElement>) => {\n        let parsableValue = value;\n\n        if (Number.isNaN(parseFloat(value))) {\n          parsableValue = '';\n        } else if (value?.endsWith('.')) {\n          parsableValue = value.slice(0, -1);\n        }\n\n        if (e.type === 'focus') onFocus?.(parsableValue);\n        else {\n          if (parsableValue !== value) {\n            onChange(parsableValue);\n          }\n\n          onBlur?.(parsableValue);\n        }\n      };\n\n      const formattedValue = useInputFormatter(inputRef, value, formatValue, `0-9${decimalSign}-`);\n\n      const t = useI18n();\n\n      const numberInput = (\n        <Flex\n          data-testid={testIds.root}\n          as={StyledNumberInput}\n          hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n          container={{ alignItems: 'center', wrap: 'nowrap' }}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n        >\n          <Input\n            data-testid={testIds.control}\n            onChange={onInputChange}\n            id={id}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            {...restProps}\n            className={className}\n            inputMode='numeric'\n            ref={inputRef}\n            value={formattedValue}\n            onKeyDown={onKeyDown}\n            onFocus={onInputFocusEvent}\n            onBlur={onInputFocusEvent}\n            aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n            autoFocus={autoFocus}\n            aria-describedby={info ? `${id}-info` : undefined}\n          />\n        </Flex>\n      );\n\n      const onMinusClick = () => {\n        onChange?.(getDecrementedValue(value, min, max, step));\n      };\n\n      const onPlusClick = () => {\n        onChange?.(getIncrementedValue(value, min, max, step));\n      };\n\n      const elementRef = useRef<HTMLElement | null>(null);\n      useArrows(elementRef, {\n        cycle: false,\n        selector: 'button, input',\n        dir: 'left-right',\n        initialFocusElement: inputRef.current\n      });\n\n      const stepper = (\n        <Flex\n          as={StyledStepperInput}\n          hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n          container={{ alignItems: 'center', wrap: 'nowrap' }}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n          size={formattedValue?.length}\n          ref={elementRef}\n          role='application'\n        >\n          <Button\n            data-testid={testIds.minus}\n            variant='simple'\n            icon\n            onClick={onMinusClick}\n            readOnly={readOnly}\n            disabled={disabled}\n            tabIndex={-1}\n            aria-label={t('decrease_value_by', [step])}\n          >\n            <Icon name='minus' />\n          </Button>\n          <Flex\n            container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n            item={{ grow: 1 }}\n            ref={containerRef}\n            onClick={(e: MouseEvent) => {\n              if (e.target === containerRef.current) inputRef?.current?.focus();\n            }}\n          >\n            <Input\n              data-testid={testIds.control}\n              onChange={onInputChange}\n              id={id}\n              readOnly={readOnly}\n              required={required}\n              disabled={disabled}\n              {...restProps}\n              className={className}\n              inputMode='numeric'\n              ref={inputRef}\n              value={formattedValue}\n              onKeyDown={onKeyDown}\n              onFocus={onInputFocusEvent}\n              onBlur={onInputFocusEvent}\n              aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n              maxLength={16}\n              autoFocus={autoFocus}\n              aria-describedby={\n                info ? `${id}-info ${id}-input-description` : `${id}-input-description`\n              }\n            />\n          </Flex>\n          <Button\n            data-testid={testIds.plus}\n            variant='simple'\n            icon\n            onClick={onPlusClick}\n            readOnly={readOnly}\n            disabled={disabled}\n            tabIndex={-1}\n            aria-label={t('increase_value_by', [step])}\n          >\n            <Icon name='plus' />\n          </Button>\n          <VisuallyHiddenText id={`${id}-input-description`}>\n            {t('stepper_instructions')}\n          </VisuallyHiddenText>\n          <VisuallyHiddenText aria-live='polite'>{formattedValue}</VisuallyHiddenText>\n        </Flex>\n      );\n\n      const Comp = variant === 'stepper' && !readOnly ? stepper : numberInput;\n\n      return label ? (\n        <FormField\n          testId={testIds}\n          label={label}\n          labelHidden={labelHidden}\n          id={id}\n          info={info}\n          status={status}\n          required={required}\n          readOnly={readOnly}\n          disabled={disabled}\n          additionalInfo={additionalInfo}\n          onResolveSuggestion={onResolveSuggestion}\n        >\n          {Comp}\n        </FormField>\n      ) : (\n        Comp\n      );\n    }\n  ),\n  getNumberInputTestIds\n);\n"]}
+{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useMemo, useRef } from 'react';\nimport type { ChangeEvent, KeyboardEvent, PropsWithoutRef, FocusEvent } from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport type { RefElement } from '../../types';\nimport {\n  useArrows,\n  useConfiguration,\n  useConsolidatedRef,\n  useI18n,\n  useInputFormatter,\n  useTestIds,\n  useUID\n} from '../../hooks';\nimport Input from '../Input';\nimport { withTestIds, createClassName } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport type { NumberInputProps } from './NumberInput.types';\nimport {\n  getCleanedValue,\n  getDecimalSign,\n  getDecrementedValue,\n  getFormattedValue,\n  getIncrementedValue\n} from './utils';\nimport { getNumberInputTestIds } from './Number.test-ids';\n\nregisterIcon(minusIcon, plusIcon);\n\nexport default withTestIds(\n  forwardRef<RefElement<NumberInputProps>, PropsWithoutRef<NumberInputProps>>(\n    function NumberInput(props, ref) {\n      const uid = useUID();\n      const {\n        testId,\n        id = uid,\n        status,\n        label,\n        labelHidden,\n        info,\n        required,\n        disabled,\n        readOnly,\n        additionalInfo,\n        value = '',\n        onChange,\n        onFocus,\n        onBlur,\n        onKeyDown: onKeyDownProp,\n        suggestion,\n        unit,\n        showDecimal = true,\n        numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n        showGroupSeparators = true,\n        min = Number.MIN_SAFE_INTEGER,\n        max = Number.MAX_SAFE_INTEGER,\n        step = 1,\n        variant,\n        'aria-label': ariaLabel,\n        autoFocus,\n        className: classNameProp,\n        ...restProps\n      } = props;\n\n      const className = createClassName('number-input', classNameProp);\n      const testIds = useTestIds(testId, getNumberInputTestIds);\n\n      const { locale } = useConfiguration();\n      const inputRef = useConsolidatedRef(ref);\n      const containerRef = useRef<HTMLElement>(null);\n      const maximumFractionDigits = showDecimal ? numberOfDecimalsProp : 0;\n      const decimalSign = useMemo(\n        () => getDecimalSign(locale, { numberingSystem: 'latn' }),\n        [locale]\n      );\n\n      const formatValue = useCallback(\n        (number: string) => {\n          return getFormattedValue(number, locale, unit, {\n            useGrouping: showGroupSeparators,\n            maximumFractionDigits\n          });\n        },\n        [locale, unit, showGroupSeparators, maximumFractionDigits]\n      );\n\n      const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        const cleanedInputValue = getCleanedValue(inputValue, decimalSign, maximumFractionDigits);\n        if (cleanedInputValue === value) return;\n        onChange(cleanedInputValue);\n      };\n\n      const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (readOnly) return;\n        onKeyDownProp?.(e);\n        const input = e.currentTarget;\n        switch (e.key) {\n          case 'ArrowUp':\n            e.preventDefault();\n            onChange(getIncrementedValue(value, min, max, step));\n            break;\n          case 'ArrowDown':\n            e.preventDefault();\n            onChange(getDecrementedValue(value, min, max, step));\n            break;\n          case decimalSign:\n            if (input.value.includes(decimalSign)) {\n              if (\n                input.selectionStart &&\n                input.value.charAt(input.selectionStart) === decimalSign\n              ) {\n                input.setSelectionRange(input.selectionStart + 1, input.selectionStart + 1);\n              }\n              e.preventDefault();\n            } else if (\n              input.selectionStart !== null &&\n              !input.value.charAt(input.selectionStart - 1).match(/\\d/)\n            ) {\n              onChange(\n                getCleanedValue(`${input.value}0${decimalSign}`, decimalSign, maximumFractionDigits)\n              );\n              e.preventDefault();\n            }\n            break;\n          case '-':\n            if (value.startsWith('-')) e.preventDefault();\n            break;\n          default:\n        }\n      };\n\n      const onInputFocusEvent = (e: FocusEvent<HTMLInputElement>) => {\n        let parsableValue = value;\n\n        if (Number.isNaN(parseFloat(value))) {\n          parsableValue = '';\n        } else if (value?.endsWith('.')) {\n          parsableValue = value.slice(0, -1);\n        }\n\n        if (e.type === 'focus') onFocus?.(parsableValue);\n        else {\n          if (parsableValue !== value) {\n            onChange(parsableValue);\n          }\n\n          onBlur?.(parsableValue);\n        }\n      };\n\n      const formattedValue = useInputFormatter(inputRef, value, formatValue, `0-9${decimalSign}-`);\n\n      const t = useI18n();\n\n      const numberInput = (\n        <Flex\n          data-testid={testIds.root}\n          as={StyledNumberInput}\n          hasSuggestion={status === 'pending' && !!suggestion}\n          container={{ alignItems: 'center', wrap: 'nowrap' }}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n        >\n          <Input\n            data-testid={testIds.control}\n            onChange={onInputChange}\n            id={id}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            {...restProps}\n            className={className}\n            inputMode='numeric'\n            ref={inputRef}\n            value={formattedValue}\n            onKeyDown={onKeyDown}\n            onFocus={onInputFocusEvent}\n            onBlur={onInputFocusEvent}\n            aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n            autoFocus={autoFocus}\n            aria-describedby={info ? `${id}-info` : undefined}\n          />\n        </Flex>\n      );\n\n      const onMinusClick = () => {\n        onChange?.(getDecrementedValue(value, min, max, step));\n      };\n\n      const onPlusClick = () => {\n        onChange?.(getIncrementedValue(value, min, max, step));\n      };\n\n      const elementRef = useRef<HTMLElement | null>(null);\n      useArrows(elementRef, {\n        cycle: false,\n        selector: 'button, input',\n        dir: 'left-right',\n        initialFocusElement: inputRef.current\n      });\n\n      const stepper = (\n        <Flex\n          as={StyledStepperInput}\n          hasSuggestion={status === 'pending' && !!suggestion}\n          container={{ alignItems: 'center', wrap: 'nowrap' }}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n          size={formattedValue?.length}\n          ref={elementRef}\n          role='application'\n        >\n          <Button\n            data-testid={testIds.minus}\n            variant='simple'\n            icon\n            onClick={onMinusClick}\n            readOnly={readOnly}\n            disabled={disabled}\n            tabIndex={-1}\n            aria-label={t('decrease_value_by', [step])}\n          >\n            <Icon name='minus' />\n          </Button>\n          <Flex\n            container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n            item={{ grow: 1 }}\n            ref={containerRef}\n            onClick={(e: MouseEvent) => {\n              if (e.target === containerRef.current) inputRef?.current?.focus();\n            }}\n          >\n            <Input\n              data-testid={testIds.control}\n              onChange={onInputChange}\n              id={id}\n              readOnly={readOnly}\n              required={required}\n              disabled={disabled}\n              {...restProps}\n              className={className}\n              inputMode='numeric'\n              ref={inputRef}\n              value={formattedValue}\n              onKeyDown={onKeyDown}\n              onFocus={onInputFocusEvent}\n              onBlur={onInputFocusEvent}\n              aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n              maxLength={16}\n              autoFocus={autoFocus}\n              aria-describedby={\n                info ? `${id}-info ${id}-input-description` : `${id}-input-description`\n              }\n            />\n          </Flex>\n          <Button\n            data-testid={testIds.plus}\n            variant='simple'\n            icon\n            onClick={onPlusClick}\n            readOnly={readOnly}\n            disabled={disabled}\n            tabIndex={-1}\n            aria-label={t('increase_value_by', [step])}\n          >\n            <Icon name='plus' />\n          </Button>\n          <VisuallyHiddenText id={`${id}-input-description`}>\n            {t('stepper_instructions')}\n          </VisuallyHiddenText>\n          <VisuallyHiddenText aria-live='polite'>{formattedValue}</VisuallyHiddenText>\n        </Flex>\n      );\n\n      const Comp = variant === 'stepper' && !readOnly ? stepper : numberInput;\n\n      return label ? (\n        <FormField\n          testId={testIds}\n          label={label}\n          labelHidden={labelHidden}\n          id={id}\n          info={info}\n          status={status}\n          required={required}\n          readOnly={readOnly}\n          disabled={disabled}\n          additionalInfo={additionalInfo}\n          suggestion={suggestion}\n        >\n          {Comp}\n        </FormField>\n      ) : (\n        Comp\n      );\n    }\n  ),\n  getNumberInputTestIds\n);\n"]}