@pega/cosmos-react-core 3.0.0-dev.16.1 → 3.0.0-dev.17.0

package/lib/components/FormControl/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAuCjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAA+B,KAAK,CAAC,EAAE;IAChF,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,EAC7F,UAAU,EAAE,EACV,YAAY,EAAE,SAAS,EACvB,cAAc,EAAE,EACd,kBAAkB,EAAE,UAAU,EAC9B,kBAAkB,EAAE,UAAU,EAC9B,cAAc,EAAE,GAAG,EACnB,eAAe,EAAE,MAAM,EACvB,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,EAC9C,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACpE,WAAW,EAAE,EACX,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACD,YAAY,EAAE,EACZ,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACF,EACF,EACF,EACD,MAAM,EACP,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAEhE,MAAM,WAAW,GAAG,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAE1F,OAAO,GAAG,CAAA;aACC,UAAU;wBACC,UAAU;0BACR,UAAU,MAAM,MAAM;oBAC5B,WAAW;oBACX,WAAW;;;;;;;;;0BASL,uBAAuB;sBAC3B,mBAAmB;;;;;sBAKnB,gBAAgB;oBAClB,MAAM;;;MAGpB,CAAC,MAAM;QACT,GAAG,CAAA;;wBAEiB,gBAAgB;;KAEnC;;;0BAGqB,uBAAuB;sBAC3B,mBAAmB;;;;;uBAKlB,QAAQ,CAAC,CAAC;;GAE9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,KAAwC,EAAE,GAAwB,EAAE,EAAE;IACrE,OAAO,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC;AACpD,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\n\nexport interface FormControlProps extends BaseProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: string;\n  /** Set visual state based on a validation state. */\n  status?: 'success' | 'warning' | 'error';\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: ReactNode;\n  /** Visually hides the label region. */\n  labelHidden?: boolean;\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: ReactNode;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: boolean;\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: string;\n  /**\n   * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html), pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n   */\n  defaultValue?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: boolean;\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: string;\n}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport const StyledFormControl = styled.div<FormControlPropsWithDefaults>(props => {\n  const {\n    theme: {\n      base: { 'border-radius': baseRadius, 'font-size': baseFontSize, 'font-scale': baseFontScale },\n      components: {\n        'form-field': formField,\n        'form-control': {\n          'foreground-color': foreground,\n          'background-color': background,\n          'border-color': brd,\n          'border-radius': radius,\n          'border-width': borderWidth,\n          ':hover': { 'border-color': hoverBorderColor },\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n          ':disabled': {\n            'border-color': disabledBorderColor,\n            'background-color': disabledBackgroundColor\n          },\n          ':read-only': {\n            'border-color': readOnlyBorderColor,\n            'background-color': readOnlyBackgroundColor\n          }\n        }\n      }\n    },\n    status\n  } = props;\n  const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n\n  const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;\n\n  return css`\n    color: ${foreground};\n    background-color: ${background};\n    border-radius: calc(${baseRadius} * ${radius});\n    border-color: ${borderColor};\n    border-width: ${borderWidth};\n    border-style: solid;\n    &,\n    & > select {\n      outline: none;\n    }\n\n    &:disabled,\n    &[disabled] {\n      background-color: ${disabledBackgroundColor};\n      border-color: ${disabledBorderColor};\n      cursor: not-allowed;\n    }\n\n    &:focus:not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n\n    ${!status &&\n    css`\n      &:hover:not([readonly]):not([disabled]):not(:focus) {\n        border-color: ${hoverBorderColor};\n      }\n    `}\n\n    &[readonly] {\n      background-color: ${readOnlyBackgroundColor};\n      border-color: ${readOnlyBorderColor};\n    }\n\n    @media (pointer: coarse) {\n      /* stylelint-disable-next-line unit-allowed-list */\n      font-size: max(${fontSize.s}, 16px);\n    }\n  `;\n});\n\nStyledFormControl.defaultProps = defaultThemeProp;\n\nconst FormControl: FunctionComponent<FormControlProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FormControlProps>, ref: Ref<HTMLDivElement>) => {\n    return <StyledFormControl ref={ref} {...props} />;\n  }\n);\n\nexport default FormControl;\n"]}
+{"version":3,"file":"FormControl.js","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAyCjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAGzC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,eAAe,EAAE,UAAU,EAC3B,WAAW,EAAE,YAAY,EACzB,YAAY,EAAE,aAAa,EAC3B,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAC5B,OAAO,EACR,EACD,UAAU,EAAE,EACV,YAAY,EAAE,SAAS,EACvB,cAAc,EAAE,EACd,kBAAkB,EAAE,UAAU,EAC9B,kBAAkB,EAAE,UAAU,EAC9B,cAAc,EAAE,GAAG,EACnB,eAAe,EAAE,MAAM,EACvB,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,EAC9C,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACpE,WAAW,EAAE,EACX,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACD,YAAY,EAAE,EACZ,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACF,EACF,EACF,EACD,MAAM,EACN,aAAa,EACd,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC1F,MAAM,eAAe,GACnB,aAAa,IAAI,MAAM;QACrB,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;QAC5E,CAAC,CAAC,UAAU,CAAC;IAEjB,OAAO,GAAG,CAAA;eACC,UAAU;0BACC,eAAe;4BACb,UAAU,MAAM,MAAM;sBAC5B,WAAW;sBACX,WAAW;;wBAET,MAAM,CAAC,IAAI,IAAI,KAAK;;;;;;;;4BAQhB,uBAAuB;wBAC3B,mBAAmB;;;;;wBAKnB,gBAAgB;sBAClB,MAAM;UAClB,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,CAAC,MAAM;QACT,GAAG,CAAA;0BACe,gBAAgB;SACjC;UACC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;uCACD,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC;SACpD;;;QAGD,aAAa;QACf,GAAG,CAAA;;OAEF;;;4BAGqB,uBAAuB;wBAC3B,mBAAmB;;;;;yBAKlB,QAAQ,CAAC,CAAC;;KAE9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,KAAwC,EAAE,GAAwB,EAAE,EAAE;IACrE,OAAO,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC;AACpD,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, rgba } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\n\nexport interface FormControlProps extends BaseProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: string;\n  /** Set visual state based on a validation state. */\n  status?: 'success' | 'warning' | 'error' | 'pending';\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: ReactNode;\n  /** Visually hides the label region. */\n  labelHidden?: boolean;\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: ReactNode;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: boolean;\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: string;\n  /**\n   * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html), pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n   */\n  defaultValue?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: boolean;\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: string;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: (accepted: boolean) => void;\n}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport const StyledFormControl = styled.div<\n  FormControlPropsWithDefaults & { hasSuggestion?: boolean }\n>(\n  ({\n    theme: {\n      base: {\n        'border-radius': baseRadius,\n        'font-size': baseFontSize,\n        'font-scale': baseFontScale,\n        animation: { speed, timing },\n        palette\n      },\n      components: {\n        'form-field': formField,\n        'form-control': {\n          'foreground-color': foreground,\n          'background-color': background,\n          'border-color': brd,\n          'border-radius': radius,\n          'border-width': borderWidth,\n          ':hover': { 'border-color': hoverBorderColor },\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n          ':disabled': {\n            'border-color': disabledBorderColor,\n            'background-color': disabledBackgroundColor\n          },\n          ':read-only': {\n            'border-color': readOnlyBorderColor,\n            'background-color': readOnlyBackgroundColor\n          }\n        }\n      }\n    },\n    status,\n    hasSuggestion\n  }) => {\n    const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n    const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;\n    const backgroundColor =\n      hasSuggestion && status\n        ? mix(0.1, formField[status]['status-color'], palette['primary-background'])\n        : background;\n\n    return css`\n      color: ${foreground};\n      background-color: ${backgroundColor};\n      border-radius: calc(${baseRadius} * ${radius});\n      border-color: ${borderColor};\n      border-width: ${borderWidth};\n      border-style: solid;\n      transition: all ${timing.ease} ${speed};\n      &,\n      & > select {\n        outline: none;\n      }\n\n      &:disabled,\n      &[disabled] {\n        background-color: ${disabledBackgroundColor};\n        border-color: ${disabledBorderColor};\n        cursor: not-allowed;\n      }\n\n      &:focus:not([disabled]) {\n        border-color: ${focusBorderColor};\n        box-shadow: ${shadow};\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n        `}\n      }\n\n      &:focus-within:not([disabled]) {\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n        `}\n      }\n\n      &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {\n        ${!status &&\n        css`\n          border-color: ${hoverBorderColor};\n        `}\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n          box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};\n        `}\n      }\n\n      ${hasSuggestion &&\n      css`\n        border-end-end-radius: 0;\n      `}\n\n      &[readonly] {\n        background-color: ${readOnlyBackgroundColor};\n        border-color: ${readOnlyBorderColor};\n      }\n\n      @media (pointer: coarse) {\n        /* stylelint-disable-next-line unit-allowed-list */\n        font-size: max(${fontSize.s}, 16px);\n      }\n    `;\n  }\n);\n\nStyledFormControl.defaultProps = defaultThemeProp;\n\nconst FormControl: FunctionComponent<FormControlProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FormControlProps>, ref: Ref<HTMLDivElement>) => {\n    return <StyledFormControl ref={ref} {...props} />;\n  }\n);\n\nexport default FormControl;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,SAAS,EACT,aAAa,EAEb,YAAY,EAMb,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAc,EAAE,UAAU,EAAe,MAAM,UAAU,CAAC;AAS1D,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC;IAC9E,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;IACrD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAgBD,eAAO,MAAM,mBAAmB,uIAsB/B,CAAC;AAIF,eAAO,MAAM,eAAe,qHAsC1B,CAAC;AAMH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CA4HhD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,SAAS,EACT,aAAa,EAEb,YAAY,EAMb,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAc,EAAE,UAAU,EAAe,MAAM,UAAU,CAAC;AAY1D,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC;IAC9E,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;IACrD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAgBD,eAAO,MAAM,mBAAmB,uIAsB/B,CAAC;AAIF,eAAO,MAAM,eAAe,qHAsC1B,CAAC;AA0DH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CA0KhD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/FormField/FormField.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, useEffect, useState, forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { readableColor, rgba } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
 import Actions from '../Actions';
-import { useUID } from '../../hooks';
+import { useConsolidatedRef, useI18n, useUID } from '../../hooks';
 import Label, { StyledLabel } from '../Label';
-import { calculateFontSize } from '../../styles';
+import { calculateFontSize, getHoverColors } from '../../styles';
+import VisuallyHiddenText from '../VisuallyHiddenText';
+import { getFocusables, tryCatch } from '../../utils';
+import Button from '../Button';
 import Icon, { registerIcon } from '../Icon';
 import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
 import * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';
@@ -66,15 +70,52 @@ export const StyledFormField = styled.div(props => {
   `;
 });
 StyledFormField.defaultProps = defaultThemeProp;
+const StyledSuggestionButton = styled(Button)(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, 'border-radius': baseRadius, spacing }, components: { 'form-control': { 'border-radius': radius, 'border-width': borderWidth }, 'form-field': formField } } }) => {
+    const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);
+    const backgroundColor = formField.pending['status-color'];
+    const hoverColors = getHoverColors(backgroundColor);
+    const color = tryCatch(() => readableColor(backgroundColor));
+    const borderColor = color ? rgba(color, 0.4) : color;
+    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 {
+        background-color: ${hoverColors.background};
+      }
+
+      @media (pointer: coarse) {
+        min-height: 2rem;
+      }
+    `;
+});
+StyledSuggestionButton.defaultProps = defaultThemeProp;
 const statusIconMap = { error: 'warn-solid', warning: 'flag-wave-solid', success: 'check' };
 const FormField = forwardRef((props, ref) => {
     const uid = useUID();
-    const { children: controlElement, id = uid, as = 'div', label, labelAs = 'label', labelFor = id, labelId, labelHidden = false, labelAfter = false, info, status, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = false, actions, container, ...restProps } = props;
+    const { children: controlElement, id = uid, as = 'div', label, labelAs = 'label', labelFor = id, labelId, labelHidden = false, labelAfter = false, info, status, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = false, actions, container, onResolveSuggestion, ...restProps } = props;
+    const t = useI18n();
     const labelAsLegend = labelAs === 'legend';
+    const hasSuggestion = status === 'pending' && !!onResolveSuggestion;
+    const consolidatedRef = useConsolidatedRef(ref);
     const styledLabel = (_jsxs(Label, { id: labelId, as: labelAs, htmlFor: labelAs === 'label' ? labelFor : undefined, labelHidden: labelHidden, onClick: (e) => {
             if (readOnly)
                 e.preventDefault();
-        }, inline: inline, children: [status && !labelHidden && (_jsx(StyledStatusIcon, { status: status, name: statusIconMap[status] })), label] }));
+        }, inline: inline, children: [status && status !== 'pending' && !labelHidden && (_jsx(StyledStatusIcon, { status: status, name: statusIconMap[status] })), label] }));
     /*
       We have to use an internal state and an effect to set the text value of info after the DOM element is rendered.
       This is to ensure screen readers will announce info on errors when role is set to alert.
@@ -107,11 +148,30 @@ const FormField = forwardRef((props, ref) => {
     if (charLimitDisplay) {
         infoContent = (_jsxs(Flex, { container: { justify: infoContent ? 'between' : 'end', gap: 1 }, children: [infoContent, _jsx(Flex, { item: { shrink: 0 }, children: charLimitDisplay })] }));
     }
+    if (hasSuggestion) {
+        const focusables = getFocusables(consolidatedRef);
+        infoContent = (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between' }, children: [_jsxs(StyledFormFieldInfo, { status: status, id: `${id}-info`, children: [t('suggestion_info'), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: t('suggestion_assist') })] }), _jsxs(Flex, { container: { wrap: 'nowrap' }, children: [_jsx(StyledSuggestionButton, { onClick: () => {
+                                onResolveSuggestion(false);
+                                focusables[0]?.focus();
+                            }, "aria-label": t('reject_suggestion_button_a11y'), children: t('no') }), _jsx(StyledSuggestionButton, { onClick: () => {
+                                onResolveSuggestion(true);
+                                focusables[0]?.focus();
+                            }, "aria-label": t('accept_suggestion_button_a11y'), children: t('yes') })] })] }));
+    }
+    const onKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            const target = e.target;
+            if (!target.closest('button')) {
+                e.preventDefault();
+                onResolveSuggestion?.(true);
+            }
+        }
+    };
     return (_jsxs(Flex, { ...restProps, container: {
             direction: inline ? 'row' : 'column',
             alignItems: inline ? 'center' : undefined,
             ...container
-        }, as: StyledFormField, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, "aria-describedby": labelAsLegend && info ? `${id}-info` : undefined, ref: ref, children: [(labelAsLegend || !labelAfter) && styledLabel, content, !labelAsLegend && labelAfter && styledLabel, infoContent] }));
+        }, as: StyledFormField, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": labelAsLegend && info ? `${id}-info` : undefined, ref: consolidatedRef, children: [(labelAsLegend || !labelAfter) && styledLabel, content, !labelAsLegend && labelAfter && styledLabel, infoContent] }));
 });
 export default FormField;
 //# sourceMappingURL=FormField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  ReactNode,\n  ComponentType,\n  cloneElement,\n  ReactElement,\n  useEffect,\n  useState,\n  PropsWithoutRef,\n  forwardRef,\n  Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, ForwardProps, OmitStrict } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport { FormControlProps } from '../FormControl';\nimport { useUID } from '../../hooks';\nimport Label, { LabelProps, StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\n\nregisterIcon(warnSolidIcon, flagWaveSolidIcon, checkIcon);\n\nexport interface FormFieldProps\n  extends OmitStrict<FormControlProps, 'placeholder' | 'value' | 'defaultValue'> {\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   * 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?: Exclude<FlexProps['container'], boolean>;\n  /** Character remaining count. Typically used on Textareas only */\n  charLimitDisplay?: ReactNode;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(\n  ({ theme, status }) => {\n    return css`\n      height: 1em;\n      width: 1em;\n      color: ${theme.components['form-field'][status]['status-color']};\n      vertical-align: baseline;\n      margin-inline-end: 0.5ch;\n    `;\n  }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<Pick<FormControlProps, 'status'>>(\n  ({\n    status,\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n      components: { 'form-field': formField }\n    }\n  }) => {\n    const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      max-width: max-content;\n      margin-top: calc(0.25 * ${spacing});\n      font-size: ${infoFontSize};\n      word-break: break-word;\n      ${status &&\n      formField[status] &&\n      css`\n        color: ${formField[status]['status-color']};\n      `}\n    `;\n  }\n);\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledFormField = styled.div<FormFieldProps>(props => {\n  const {\n    disabled,\n    required,\n    theme: {\n      base: {\n        palette: { urgent },\n        'disabled-opacity': disabledOpacity,\n        spacing\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    > ${StyledLabel} {\n      margin-bottom: calc(0.25 * ${spacing});\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n\n      &::after {\n        display: ${required ? 'inline' : 'none'};\n        content: '\\\\00a0*';\n        vertical-align: top;\n        color: ${urgent};\n      }\n    }\n  `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'flag-wave-solid', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FormFieldProps>, ref: Ref<HTMLElement>) => {\n    const uid = useUID();\n    const {\n      children: controlElement,\n      id = uid,\n      as = 'div',\n      label,\n      labelAs = 'label',\n      labelFor = id,\n      labelId,\n      labelHidden = false,\n      labelAfter = false,\n      info,\n      status,\n      charLimitDisplay,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      inline = false,\n      actions,\n      container,\n      ...restProps\n    } = props;\n\n    const labelAsLegend: boolean = labelAs === 'legend';\n\n    const styledLabel = (\n      <Label\n        id={labelId}\n        as={labelAs}\n        htmlFor={labelAs === 'label' ? labelFor : undefined}\n        labelHidden={labelHidden}\n        onClick={(e: MouseEvent) => {\n          if (readOnly) e.preventDefault();\n        }}\n        inline={inline}\n      >\n        {status && !labelHidden && (\n          <StyledStatusIcon status={status} name={statusIconMap[status]} />\n        )}\n        {label}\n      </Label>\n    );\n\n    /*\n      We have to use an internal state and an effect to set the text value of info after the DOM element is rendered.\n      This is to ensure screen readers will announce info on errors when role is set to alert.\n      Needs testing to confirm. Currently the expected sequence would be:\n      - FormField renders with no error and no info\n      - user input triggers an error status\n      - props passed set error status and provide info text\n      - effect runs and sets live region state which renders and is announced\n    */\n    const [liveRegionInfo, setLiveRegionInfo] = useState<ReactNode>(null);\n\n    useEffect(() => {\n      setLiveRegionInfo(info);\n    }, [info]);\n\n    // fieldset or single form control element\n    let content: FormFieldProps['children'] = labelAsLegend\n      ? controlElement\n      : cloneElement(controlElement as ReactElement, {\n          'aria-describedby': info && `${id}-info`\n        });\n\n    if (actions) {\n      content = (\n        <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n          {content}\n          <Actions items={actions} menuAt={3} />\n        </Flex>\n      );\n    }\n\n    let infoContent = info ? (\n      /*\n        Region for additional info, help or error message.\n        Withholding aria-live=\"assertive\" to avoid iOS issue. See below.\n        https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles\n      */\n      <StyledFormFieldInfo\n        status={status}\n        role={status === 'error' || status === 'warning' ? 'alert' : undefined}\n        id={`${id}-info`}\n      >\n        {liveRegionInfo}\n      </StyledFormFieldInfo>\n    ) : undefined;\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    return (\n      <Flex\n        {...restProps}\n        container={{\n          direction: inline ? 'row' : 'column',\n          alignItems: inline ? 'center' : undefined,\n          ...container\n        }}\n        as={StyledFormField}\n        id={`${id}-field`}\n        forwardedAs={as}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        aria-describedby={labelAsLegend && info ? `${id}-info` : undefined}\n        ref={ref}\n      >\n        {(labelAsLegend || !labelAfter) && styledLabel}\n        {content}\n        {!labelAsLegend && labelAfter && styledLabel}\n        {infoContent}\n      </Flex>\n    );\n  }\n);\n\nexport default FormField;\n"]}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  ReactNode,\n  ComponentType,\n  cloneElement,\n  ReactElement,\n  useEffect,\n  useState,\n  PropsWithoutRef,\n  forwardRef,\n  Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, ForwardProps, OmitStrict } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useI18n, useUID } from '../../hooks';\nimport Label, { LabelProps, StyledLabel } from '../Label';\nimport { calculateFontSize, getHoverColors } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, tryCatch } from '../../utils';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\n\nregisterIcon(warnSolidIcon, flagWaveSolidIcon, checkIcon);\n\nexport interface FormFieldProps\n  extends OmitStrict<FormControlProps, 'placeholder' | 'value' | 'defaultValue'> {\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   * 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?: Exclude<FlexProps['container'], boolean>;\n  /** Character remaining count. Typically used on Textareas only */\n  charLimitDisplay?: ReactNode;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(\n  ({ theme, status }) => {\n    return css`\n      height: 1em;\n      width: 1em;\n      color: ${theme.components['form-field'][status]['status-color']};\n      vertical-align: baseline;\n      margin-inline-end: 0.5ch;\n    `;\n  }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<Pick<FormControlProps, 'status'>>(\n  ({\n    status,\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n      components: { 'form-field': formField }\n    }\n  }) => {\n    const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      max-width: max-content;\n      margin-top: calc(0.25 * ${spacing});\n      font-size: ${infoFontSize};\n      word-break: break-word;\n      ${status &&\n      formField[status] &&\n      css`\n        color: ${formField[status]['status-color']};\n      `}\n    `;\n  }\n);\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledFormField = styled.div<FormFieldProps>(props => {\n  const {\n    disabled,\n    required,\n    theme: {\n      base: {\n        palette: { urgent },\n        'disabled-opacity': disabledOpacity,\n        spacing\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    > ${StyledLabel} {\n      margin-bottom: calc(0.25 * ${spacing});\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n\n      &::after {\n        display: ${required ? 'inline' : 'none'};\n        content: '\\\\00a0*';\n        vertical-align: top;\n        color: ${urgent};\n      }\n    }\n  `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionButton = styled(Button)(\n  ({\n    theme: {\n      base: {\n        'font-size': fontSize,\n        'font-scale': fontScale,\n        'border-radius': baseRadius,\n        spacing\n      },\n      components: {\n        'form-control': { 'border-radius': radius, 'border-width': borderWidth },\n        'form-field': formField\n      }\n    }\n  }) => {\n    const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n    const backgroundColor = formField.pending['status-color'];\n    const hoverColors = getHoverColors(backgroundColor);\n    const color = tryCatch(() => readableColor(backgroundColor));\n    const borderColor = color ? rgba(color, 0.4) : color;\n\n    return css`\n      background-color: ${backgroundColor};\n      color: ${color};\n      font-size: ${buttonFontSize};\n      min-width: calc(3 * ${spacing});\n      min-height: calc(3 * ${spacing});\n      padding: 0 ${spacing};\n      border-radius: 0;\n      border: none;\n      &:first-child {\n        border-inline-end: ${borderWidth} solid ${borderColor};\n        border-end-start-radius: calc(${baseRadius} * ${radius});\n        margin-inline-start: calc(2 * ${spacing});\n      }\n      &:last-child {\n        border-end-end-radius: calc(${baseRadius} * ${radius});\n        margin-inline-start: 0;\n      }\n      &:hover {\n        background-color: ${hoverColors.background};\n      }\n\n      @media (pointer: coarse) {\n        min-height: 2rem;\n      }\n    `;\n  }\n);\n\nStyledSuggestionButton.defaultProps = defaultThemeProp;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'flag-wave-solid', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FormFieldProps>, ref: Ref<HTMLElement>) => {\n    const uid = useUID();\n    const {\n      children: controlElement,\n      id = uid,\n      as = 'div',\n      label,\n      labelAs = 'label',\n      labelFor = id,\n      labelId,\n      labelHidden = false,\n      labelAfter = false,\n      info,\n      status,\n      charLimitDisplay,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      inline = false,\n      actions,\n      container,\n      onResolveSuggestion,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const labelAsLegend: boolean = labelAs === 'legend';\n    const hasSuggestion = status === 'pending' && !!onResolveSuggestion;\n    const consolidatedRef = useConsolidatedRef(ref);\n\n    const styledLabel = (\n      <Label\n        id={labelId}\n        as={labelAs}\n        htmlFor={labelAs === 'label' ? labelFor : undefined}\n        labelHidden={labelHidden}\n        onClick={(e: MouseEvent) => {\n          if (readOnly) e.preventDefault();\n        }}\n        inline={inline}\n      >\n        {status && status !== 'pending' && !labelHidden && (\n          <StyledStatusIcon status={status} name={statusIconMap[status]} />\n        )}\n        {label}\n      </Label>\n    );\n\n    /*\n      We have to use an internal state and an effect to set the text value of info after the DOM element is rendered.\n      This is to ensure screen readers will announce info on errors when role is set to alert.\n      Needs testing to confirm. Currently the expected sequence would be:\n      - FormField renders with no error and no info\n      - user input triggers an error status\n      - props passed set error status and provide info text\n      - effect runs and sets live region state which renders and is announced\n    */\n    const [liveRegionInfo, setLiveRegionInfo] = useState<ReactNode>(null);\n\n    useEffect(() => {\n      setLiveRegionInfo(info);\n    }, [info]);\n\n    // fieldset or single form control element\n    let content: FormFieldProps['children'] = labelAsLegend\n      ? controlElement\n      : cloneElement(controlElement as ReactElement, {\n          'aria-describedby': info && `${id}-info`\n        });\n\n    if (actions) {\n      content = (\n        <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n          {content}\n          <Actions items={actions} menuAt={3} />\n        </Flex>\n      );\n    }\n\n    let infoContent = info ? (\n      /*\n        Region for additional info, help or error message.\n        Withholding aria-live=\"assertive\" to avoid iOS issue. See below.\n        https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles\n      */\n      <StyledFormFieldInfo\n        status={status}\n        role={status === 'error' || status === 'warning' ? 'alert' : undefined}\n        id={`${id}-info`}\n      >\n        {liveRegionInfo}\n      </StyledFormFieldInfo>\n    ) : undefined;\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 status={status} id={`${id}-info`}>\n            {t('suggestion_info')}\n            <VisuallyHiddenText aria-live='polite'>{t('suggestion_assist')}</VisuallyHiddenText>\n          </StyledFormFieldInfo>\n          <Flex container={{ wrap: 'nowrap' }}>\n            <StyledSuggestionButton\n              onClick={() => {\n                onResolveSuggestion(false);\n                focusables[0]?.focus();\n              }}\n              aria-label={t('reject_suggestion_button_a11y')}\n            >\n              {t('no')}\n            </StyledSuggestionButton>\n            <StyledSuggestionButton\n              onClick={() => {\n                onResolveSuggestion(true);\n                focusables[0]?.focus();\n              }}\n              aria-label={t('accept_suggestion_button_a11y')}\n            >\n              {t('yes')}\n            </StyledSuggestionButton>\n          </Flex>\n        </Flex>\n      );\n    }\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Enter') {\n        const target = e.target as HTMLElement;\n        if (!target.closest('button')) {\n          e.preventDefault();\n          onResolveSuggestion?.(true);\n        }\n      }\n    };\n\n    return (\n      <Flex\n        {...restProps}\n        container={{\n          direction: inline ? 'row' : 'column',\n          alignItems: inline ? 'center' : undefined,\n          ...container\n        }}\n        as={StyledFormField}\n        id={`${id}-field`}\n        forwardedAs={as}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        onKeyDown={hasSuggestion ? onKeyDown : undefined}\n        aria-describedby={labelAsLegend && info ? `${id}-info` : undefined}\n        ref={consolidatedRef}\n      >\n        {(labelAsLegend || !labelAfter) && styledLabel}\n        {content}\n        {!labelAsLegend && labelAfter && styledLabel}\n        {infoContent}\n      </Flex>\n    );\n  }\n);\n\nexport default FormField;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE9E,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAMrE,MAAM,WAAW,UAAW,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc;IAC7E;;;OAGG;IACH,IAAI,CAAC,EACD,MAAM,GACN,UAAU,GACV,QAAQ,GACR,OAAO,GACP,KAAK,GACL,QAAQ,GACR,KAAK,GACL,MAAM,GACN,gBAAgB,GAChB,MAAM,GACN,MAAM,GACN,OAAO,GACP,OAAO,CAAC;IACZ,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,GAAG,YAAY,CAoDxC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE9E,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAMrE,MAAM,WAAW,UAAW,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc;IAC7E;;;OAGG;IACH,IAAI,CAAC,EACD,MAAM,GACN,UAAU,GACV,QAAQ,GACR,OAAO,GACP,KAAK,GACL,QAAQ,GACR,KAAK,GACL,MAAM,GACN,gBAAgB,GAChB,MAAM,GACN,MAAM,GACN,OAAO,GACP,OAAO,CAAC;IACZ,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,GAAG,YAAY,CAkExC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/Input/Input.js

@@ -7,7 +7,7 @@ import { useUID } from '../../hooks';
 import StyledInput from './Input.styles';
 const Input = forwardRef((props, ref) => {
     const uid = useUID();
-    const { id = uid, value, defaultValue, required = false, disabled = false, label, labelHidden, info, status, actions, ...restProps } = props;
+    const { id = uid, value, defaultValue, required = false, disabled = false, label, labelHidden, info, status, actions, onResolveSuggestion, ...restProps } = props;
     const controlProp = {};
     // Conditionally render component as controlled/uncontrolled
     if (hasProp(props, 'value')) {
@@ -22,11 +22,22 @@ const Input = forwardRef((props, ref) => {
             required,
             disabled,
             status,
+            hasSuggestion: !!onResolveSuggestion && status === 'pending',
             ...controlProp,
             ...restProps,
             as: StyledInput
         } }));
-    return label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, status, required, disabled, actions }, children: Comp })) : (Comp);
+    return label ? (_jsx(FormField, { ...{
+            label,
+            labelHidden,
+            id,
+            info,
+            status,
+            required,
+            disabled,
+            actions,
+            onResolveSuggestion
+        }, children: Comp })) : (Comp);
 });
 export default Input;
 //# 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,EAAW,UAAU,EAAmB,MAAM,OAAO,CAAC;AAG7D,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAoB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAyBzC,MAAM,KAAK,GAAkC,UAAU,CACrD,CAAC,KAAkC,EAAE,GAA0B,EAAE,EAAE;IACjE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,EAAE,GAAG,GAAG,EACR,KAAK,EACL,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,OAAO,EACP,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAGb,EAAE,CAAC;IAEP,4DAA4D;IAC5D,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE;QAC3B,WAAW,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;KACjC;SAAM,IAAI,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE;QACzC,WAAW,CAAC,YAAY,GAAG,YAAY,IAAI,EAAE,CAAC;KAC/C;IAED,MAAM,IAAI,GAAG,CACX,KAAC,iBAAiB,OACZ;YACF,GAAG;YACH,EAAE;YACF,QAAQ;YACR,QAAQ;YACR,MAAM;YACN,GAAG,WAAW;YACd,GAAG,SAAS;YACZ,EAAE,EAAE,WAAW;SAChB,GACD,CACH,CAAC;IAEF,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,OAAK,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,YACjF,IAAI,GACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { FC, Ref, forwardRef, PropsWithoutRef } from 'react';\n\nimport { Action, BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { hasProp } from '../../utils';\nimport { useUID } from '../../hooks';\n\nimport StyledInput from './Input.styles';\n\nexport interface InputProps extends FormControlProps, BaseProps, 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    | 'color';\n  /** Pass an array of Action objects to append button(s) inline with the Input. */\n  actions?: Action[];\n}\n\nconst Input: FC<InputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<InputProps>, ref: Ref<HTMLInputElement>) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      value,\n      defaultValue,\n      required = false,\n      disabled = false,\n      label,\n      labelHidden,\n      info,\n      status,\n      actions,\n      ...restProps\n    } = props;\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      <StyledFormControl\n        {...{\n          ref,\n          id,\n          required,\n          disabled,\n          status,\n          ...controlProp,\n          ...restProps,\n          as: StyledInput\n        }}\n      />\n    );\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled, actions }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default Input;\n"]}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,UAAU,EAAmB,MAAM,OAAO,CAAC;AAG7D,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAoB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAyBzC,MAAM,KAAK,GAAkC,UAAU,CACrD,CAAC,KAAkC,EAAE,GAA0B,EAAE,EAAE;IACjE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,EAAE,GAAG,GAAG,EACR,KAAK,EACL,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,OAAO,EACP,mBAAmB,EACnB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAGb,EAAE,CAAC;IAEP,4DAA4D;IAC5D,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE;QAC3B,WAAW,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;KACjC;SAAM,IAAI,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE;QACzC,WAAW,CAAC,YAAY,GAAG,YAAY,IAAI,EAAE,CAAC;KAC/C;IAED,MAAM,IAAI,GAAG,CACX,KAAC,iBAAiB,OACZ;YACF,GAAG;YACH,EAAE;YACF,QAAQ;YACR,QAAQ;YACR,MAAM;YACN,aAAa,EAAE,CAAC,CAAC,mBAAmB,IAAI,MAAM,KAAK,SAAS;YAC5D,GAAG,WAAW;YACd,GAAG,SAAS;YACZ,EAAE,EAAE,WAAW;SAChB,GACD,CACH,CAAC;IAEF,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,OACJ;YACF,KAAK;YACL,WAAW;YACX,EAAE;YACF,IAAI;YACJ,MAAM;YACN,QAAQ;YACR,QAAQ;YACR,OAAO;YACP,mBAAmB;SACpB,YAEA,IAAI,GACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { FC, Ref, forwardRef, PropsWithoutRef } from 'react';\n\nimport { Action, BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { hasProp } from '../../utils';\nimport { useUID } from '../../hooks';\n\nimport StyledInput from './Input.styles';\n\nexport interface InputProps extends FormControlProps, BaseProps, 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    | 'color';\n  /** Pass an array of Action objects to append button(s) inline with the Input. */\n  actions?: Action[];\n}\n\nconst Input: FC<InputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<InputProps>, ref: Ref<HTMLInputElement>) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      value,\n      defaultValue,\n      required = false,\n      disabled = false,\n      label,\n      labelHidden,\n      info,\n      status,\n      actions,\n      onResolveSuggestion,\n      ...restProps\n    } = props;\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      <StyledFormControl\n        {...{\n          ref,\n          id,\n          required,\n          disabled,\n          status,\n          hasSuggestion: !!onResolveSuggestion && status === 'pending',\n          ...controlProp,\n          ...restProps,\n          as: StyledInput\n        }}\n      />\n    );\n\n    return label ? (\n      <FormField\n        {...{\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          disabled,\n          actions,\n          onResolveSuggestion\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default Input;\n"]}

package/lib/components/Number/NumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3C,OAAO,gBAA+C,MAAM,qBAAqB,CAAC;AAWlF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAqMnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3C,OAAO,gBAA+C,MAAM,qBAAqB,CAAC;AAWlF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAmNnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Number/NumberInput.js

@@ -14,7 +14,7 @@ import { getCleanedValue, getDecimalSign, getDecrementedValue, getFormattedValue
 registerIcon(minusIcon, plusIcon);
 const NumberInput = forwardRef((props, ref) => {
     const uid = useUID();
-    const { id = uid, status, label, labelHidden, info, required, disabled, readOnly, value = '', onChange, onFocus, onBlur, 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, ...restProps } = props;
+    const { id = uid, status, label, labelHidden, info, required, disabled, readOnly, value = '', onChange, onFocus, onBlur, 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, ...restProps } = props;
     const { locale } = useConfiguration();
     const inputRef = useConsolidatedRef(ref);
     const containerRef = useRef(null);
@@ -92,13 +92,22 @@ const NumberInput = forwardRef((props, ref) => {
     const onPlusClick = () => {
         onChange?.(getIncrementedValue(value, min, max, step));
     };
-    const StepperComp = (_jsxs(Flex, { as: StyledStepperInput, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, size: formattedValue?.length, children: [_jsx(Button, { variant: 'simple', icon: true, onClick: onMinusClick, "aria-label": t('number_decrement_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, children: _jsx(Icon, { name: 'minus' }) }), _jsx(Flex, { container: { alignItems: 'center', wrap: 'nowrap', justify: 'center' }, item: { grow: 1 }, ref: containerRef, onClick: (e) => {
+    const StepperComp = (_jsxs(Flex, { as: StyledStepperInput, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, size: formattedValue?.length, children: [_jsx(Button, { variant: 'simple', icon: true, onClick: onMinusClick, "aria-label": t('number_decrement_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, 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: NumberInputComp }), _jsx(Button, { variant: 'simple', icon: true, onClick: onPlusClick, "aria-label": t('number_increment_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, children: _jsx(Icon, { name: 'plus' }) })] }));
-    const NumberComp = (_jsx(Flex, { as: StyledNumberInput, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, children: NumberInputComp }));
+    const NumberComp = (_jsx(Flex, { as: StyledNumberInput, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, children: NumberInputComp }));
     const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;
-    return label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp })) : (Comp);
+    return label ? (_jsx(FormField, { ...{
+            label,
+            labelHidden,
+            id,
+            info,
+            status,
+            required,
+            disabled,
+            onResolveSuggestion
+        }, children: Comp })) : (Comp);
 });
 export default NumberInput;
 //# 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 {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useCallback,\n  useMemo,\n  useRef,\n  FocusEvent\n} 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 { ForwardProps } from '../../types';\nimport Input from '../Input';\nimport {\n  useConfiguration,\n  useConsolidatedRef,\n  useI18n,\n  useInputFormatter,\n  useUID\n} from '../../hooks';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport NumberInputProps, { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n  getCleanedValue,\n  getDecimalSign,\n  getDecrementedValue,\n  getFormattedValue,\n  getIncrementedValue\n} from './utils';\n\nregisterIcon(minusIcon, plusIcon);\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      status,\n      label,\n      labelHidden,\n      info,\n      required,\n      disabled,\n      readOnly,\n      value = '',\n      onChange,\n      onFocus,\n      onBlur,\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      ...restProps\n    } = props;\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(() => getDecimalSign(locale), [locale]);\n\n    const formatValue = useCallback(\n      number => {\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      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 (input.selectionStart && input.value.charAt(input.selectionStart) === decimalSign) {\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, `\\\\p{N}${decimalSign}-`);\n\n    const t = useI18n();\n\n    const NumberInputComp = (\n      <Input\n        {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\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      />\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 StepperComp = (\n      <Flex\n        as={StyledStepperInput}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        size={formattedValue?.length}\n      >\n        <Button\n          variant='simple'\n          icon\n          onClick={onMinusClick}\n          aria-label={t('number_decrement_value_by', [step])}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\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          {NumberInputComp}\n        </Flex>\n        <Button\n          variant='simple'\n          icon\n          onClick={onPlusClick}\n          aria-label={t('number_increment_value_by', [step])}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\n        >\n          <Icon name='plus' />\n        </Button>\n      </Flex>\n    );\n\n    const NumberComp = (\n      <Flex\n        as={StyledNumberInput}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        {NumberInputComp}\n      </Flex>\n    );\n\n    const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default NumberInput;\n"]}
+{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,WAAW,EACX,OAAO,EACP,MAAM,EAEP,MAAM,OAAO,CAAC;AAEf,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,OAAO,KAAK,MAAM,UAAU,CAAC;AAC7B,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,OAAO,EACP,iBAAiB,EACjB,MAAM,EACP,MAAM,aAAa,CAAC;AAErB,OAAO,iBAAiB,EAAE,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC7E,OAAyB,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EACL,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB,YAAY,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAElC,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,KAAwC,EAAE,GAA4B,EAAE,EAAE;IACzE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,EAAE,GAAG,GAAG,EACR,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,OAAO,EACP,MAAM,EACN,mBAAmB,EACnB,IAAI,EACJ,WAAW,GAAG,IAAI,EAClB,gBAAgB,EAAE,oBAAoB,GAAG,yBAAyB,EAClE,mBAAmB,GAAG,IAAI,EAC1B,GAAG,GAAG,MAAM,CAAC,gBAAgB,EAC7B,GAAG,GAAG,MAAM,CAAC,gBAAgB,EAC7B,IAAI,GAAG,CAAC,EACR,OAAO,EACP,YAAY,EAAE,SAAS,EACvB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,YAAY,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC/C,MAAM,qBAAqB,GAAG,WAAW,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;IACrE,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEpE,MAAM,WAAW,GAAG,WAAW,CAC7B,MAAM,CAAC,EAAE;QACP,OAAO,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE;YAC7C,WAAW,EAAE,mBAAmB;YAChC,qBAAqB;SACtB,CAAC,CAAC;IACL,CAAC,EACD,CAAC,MAAM,EAAE,IAAI,EAAE,mBAAmB,EAAE,qBAAqB,CAAC,CAC3D,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAgC,EAAE,EAAE;QACzD,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAClC,MAAM,iBAAiB,GAAG,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,qBAAqB,CAAC,CAAC;QAC1F,IAAI,iBAAiB,KAAK,KAAK;YAAE,OAAO;QACxC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,CAAkC,EAAE,EAAE;QACvD,IAAI,QAAQ;YAAE,OAAO;QACrB,MAAM,KAAK,GAAG,CAAC,CAAC,aAAa,CAAC;QAC9B,QAAQ,CAAC,CAAC,GAAG,EAAE;YACb,KAAK,SAAS;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,QAAQ,CAAC,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;gBACrD,MAAM;YACR,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,QAAQ,CAAC,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;gBACrD,MAAM;YACR,KAAK,WAAW;gBACd,IAAI,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;oBACrC,IAAI,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,WAAW,EAAE;wBACpF,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;qBAC7E;oBACD,CAAC,CAAC,cAAc,EAAE,CAAC;iBACpB;qBAAM,IACL,KAAK,CAAC,cAAc,KAAK,IAAI;oBAC7B,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,EACzD;oBACA,QAAQ,CACN,eAAe,CAAC,GAAG,KAAK,CAAC,KAAK,IAAI,WAAW,EAAE,EAAE,WAAW,EAAE,qBAAqB,CAAC,CACrF,CAAC;oBACF,CAAC,CAAC,cAAc,EAAE,CAAC;iBACpB;gBACD,MAAM;YACR,KAAK,GAAG;gBACN,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;oBAAE,CAAC,CAAC,cAAc,EAAE,CAAC;gBAC9C,MAAM;YACR,QAAQ;SACT;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAA+B,EAAE,EAAE;QAC5D,IAAI,aAAa,GAAG,KAAK,CAAC;QAE1B,IAAI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE;YACnC,aAAa,GAAG,EAAE,CAAC;SACpB;aAAM,IAAI,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE;YAC/B,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SACpC;QAED,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO;YAAE,OAAO,EAAE,CAAC,aAAa,CAAC,CAAC;aAC5C;YACH,IAAI,aAAa,KAAK,KAAK,EAAE;gBAC3B,QAAQ,CAAC,aAAa,CAAC,CAAC;aACzB;YAED,MAAM,EAAE,CAAC,aAAa,CAAC,CAAC;SACzB;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,iBAAiB,CAAC,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,WAAW,GAAG,CAAC,CAAC;IAEhG,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,eAAe,GAAG,CACtB,KAAC,KAAK,OACA,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,EACvF,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,iBAAiB,EAC1B,MAAM,EAAE,iBAAiB,gBACb,GAAG,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,EAC5E,SAAS,EAAE,EAAE,GACb,CACH,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,QAAQ,EAAE,CAAC,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,QAAQ,EAAE,CAAC,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAClB,MAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,aAAa,EAAE,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,mBAAmB,EAC5D,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,EACnD,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,cAAc,EAAE,MAAM,aAE5B,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,YAAY,gBACT,CAAC,CAAC,2BAA2B,EAAE,CAAC,IAAI,CAAC,CAAC,EAClD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,YAEZ,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,EACT,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EACtE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,GAAG,EAAE,YAAY,EACjB,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;oBACzB,IAAI,CAAC,CAAC,MAAM,KAAK,YAAY,CAAC,OAAO;wBAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;gBACpE,CAAC,YAEA,eAAe,GACX,EACP,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,WAAW,gBACR,CAAC,CAAC,2BAA2B,EAAE,CAAC,IAAI,CAAC,CAAC,EAClD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,YAEZ,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,IACJ,CACR,CAAC;IAEF,MAAM,UAAU,GAAG,CACjB,KAAC,IAAI,IACH,EAAE,EAAE,iBAAiB,EACrB,aAAa,EAAE,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,mBAAmB,EAC5D,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,EACnD,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,YAEjB,eAAe,GACX,CACR,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,KAAK,SAAS,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC;IAE3E,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,OACJ;YACF,KAAK;YACL,WAAW;YACX,EAAE;YACF,IAAI;YACJ,MAAM;YACN,QAAQ;YACR,QAAQ;YACR,mBAAmB;SACpB,YAEA,IAAI,GACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useCallback,\n  useMemo,\n  useRef,\n  FocusEvent\n} 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 { ForwardProps } from '../../types';\nimport Input from '../Input';\nimport {\n  useConfiguration,\n  useConsolidatedRef,\n  useI18n,\n  useInputFormatter,\n  useUID\n} from '../../hooks';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport NumberInputProps, { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n  getCleanedValue,\n  getDecimalSign,\n  getDecrementedValue,\n  getFormattedValue,\n  getIncrementedValue\n} from './utils';\n\nregisterIcon(minusIcon, plusIcon);\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      status,\n      label,\n      labelHidden,\n      info,\n      required,\n      disabled,\n      readOnly,\n      value = '',\n      onChange,\n      onFocus,\n      onBlur,\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      ...restProps\n    } = props;\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(() => getDecimalSign(locale), [locale]);\n\n    const formatValue = useCallback(\n      number => {\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      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 (input.selectionStart && input.value.charAt(input.selectionStart) === decimalSign) {\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, `\\\\p{N}${decimalSign}-`);\n\n    const t = useI18n();\n\n    const NumberInputComp = (\n      <Input\n        {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\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      />\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 StepperComp = (\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      >\n        <Button\n          variant='simple'\n          icon\n          onClick={onMinusClick}\n          aria-label={t('number_decrement_value_by', [step])}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\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          {NumberInputComp}\n        </Flex>\n        <Button\n          variant='simple'\n          icon\n          onClick={onPlusClick}\n          aria-label={t('number_increment_value_by', [step])}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\n        >\n          <Icon name='plus' />\n        </Button>\n      </Flex>\n    );\n\n    const NumberComp = (\n      <Flex\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        {NumberInputComp}\n      </Flex>\n    );\n\n    const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;\n\n    return label ? (\n      <FormField\n        {...{\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          disabled,\n          onResolveSuggestion\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default NumberInput;\n"]}

package/lib/components/Number/NumberInput.styles.d.ts

@@ -1,7 +1,11 @@
 interface StyledStepperProps {
     size: number;
 }
-export declare const StyledStepperInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>> & StyledStepperProps, never>;
-declare const StyledNumberInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>>, never>;
+export declare const StyledStepperInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>> & {
+    hasSuggestion?: boolean | undefined;
+} & StyledStepperProps, never>;
+declare const StyledNumberInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>> & {
+    hasSuggestion?: boolean | undefined;
+}, never>;
 export default StyledNumberInput;
 //# sourceMappingURL=NumberInput.styles.d.ts.map

package/lib/components/Number/NumberInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AASA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,kBAAkB,2QAkD7B,CAAC;AAIH,QAAA,MAAM,iBAAiB,sPA8BrB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"NumberInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AASA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,kBAAkB;;8BAmD7B,CAAC;AAIH,QAAA,MAAM,iBAAiB;;SA+BrB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}

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

@@ -6,7 +6,7 @@ import { defaultThemeProp } from '../../theme';
 import { StyledButton } from '../Button';
 import { StyledFlex } from '../Flex';
 export const StyledStepperInput = styled(StyledFormControl)(props => {
-    const { theme: { base: { spacing, 'border-radius': baseBorderRadius }, components: { input: { height }, 'form-control': { 'border-radius': formBorderRadius, 'foreground-color': fgColor, 'border-width': borderWidth, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } }, size } = props;
+    const { theme: { base: { spacing, 'border-radius': baseBorderRadius, palette }, components: { input: { height }, 'form-control': { 'border-radius': formBorderRadius, 'foreground-color': fgColor, 'border-width': borderWidth, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } }, size } = props;
     return css `
     &:focus-within:not([disabled]) {
       border-color: ${focusBorderColor};
@@ -22,6 +22,7 @@ export const StyledStepperInput = styled(StyledFormControl)(props => {
       min-width: 1ch;
       border: 0;
       padding: 0;
+      background-color: ${palette['primary-background']};
       &:focus:not([disabled]) {
         box-shadow: none;
       }
@@ -44,7 +45,7 @@ export const StyledStepperInput = styled(StyledFormControl)(props => {
 });
 StyledStepperInput.defaultProps = defaultThemeProp;
 const StyledNumberInput = styled(StyledFormControl)(props => {
-    const { theme: { base: { spacing }, components: { 'form-control': { ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } } } = props;
+    const { theme: { base: { spacing, palette }, components: { 'form-control': { ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } } } = props;
     return css `
     padding: 0 calc(0.5 * ${spacing});
     &:focus-within:not([disabled]) {
@@ -54,6 +55,7 @@ const StyledNumberInput = styled(StyledFormControl)(props => {
     ${StyledInput} {
       border: 0;
       padding: 0 calc(0.5 * ${spacing});
+      background-color: ${palette['primary-background']};
       &:focus:not([disabled]) {
         box-shadow: none;
       }

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.styles.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAMrC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAqB,KAAK,CAAC,EAAE;IACtF,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,EACpD,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EACjB,cAAc,EAAE,EACd,eAAe,EAAE,gBAAgB,EACjC,kBAAkB,EAAE,OAAO,EAC3B,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACD,IAAI,EACL,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;sBAEU,gBAAgB;oBAClB,MAAM;;MAEpB,UAAU;;6BAEa,OAAO;2BACT,OAAO;;MAE5B,WAAW;eACF,IAAI;;;;;;;;MAQb,UAAU;8BACc,OAAO;;;QAG7B,YAAY;4BACQ,gBAAgB,MAAM,gBAAgB;;;;iBAIjD,OAAO;;yBAEC,MAAM,UAAU,WAAW;qBAC/B,MAAM,UAAU,WAAW;;GAE7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC,EAAE;IAC1D,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EACV,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;4BACgB,OAAO;;sBAEb,gBAAgB;oBAClB,MAAM;;MAEpB,WAAW;;8BAEa,OAAO;;;;;MAK/B,UAAU;8BACc,OAAO;;;GAGlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,eAAe,iBAAiB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport { StyledText } from '../Text/Text';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport { StyledFlex } from '../Flex';\n\ninterface StyledStepperProps {\n  size: number;\n}\n\nexport const StyledStepperInput = styled(StyledFormControl)<StyledStepperProps>(props => {\n  const {\n    theme: {\n      base: { spacing, 'border-radius': baseBorderRadius },\n      components: {\n        input: { height },\n        'form-control': {\n          'border-radius': formBorderRadius,\n          'foreground-color': fgColor,\n          'border-width': borderWidth,\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n        }\n      }\n    },\n    size\n  } = props;\n  return css`\n    &:focus-within:not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n    ${StyledFlex} {\n      overflow: auto;\n      margin-inline-start: ${spacing};\n      margin-inline-end: ${spacing};\n    }\n    ${StyledInput} {\n      width: ${size}ch;\n      min-width: 1ch;\n      border: 0;\n      padding: 0;\n      &:focus:not([disabled]) {\n        box-shadow: none;\n      }\n    }\n    ${StyledText} {\n      padding: 0 calc(0.5 * ${spacing});\n      white-space: nowrap;\n    }\n    > ${StyledButton} {\n      border-radius: calc(${baseBorderRadius} * ${formBorderRadius});\n      margin-inline-start: auto;\n      border: 0;\n      &:enabled {\n        color: ${fgColor};\n      }\n      min-height: calc(${height} - 2 * ${borderWidth});\n      height: calc(${height} - 2 * ${borderWidth});\n    }\n  `;\n});\n\nStyledStepperInput.defaultProps = defaultThemeProp;\n\nconst StyledNumberInput = styled(StyledFormControl)(props => {\n  const {\n    theme: {\n      base: { spacing },\n      components: {\n        'form-control': {\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n        }\n      }\n    }\n  } = props;\n\n  return css`\n    padding: 0 calc(0.5 * ${spacing});\n    &:focus-within:not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n    ${StyledInput} {\n      border: 0;\n      padding: 0 calc(0.5 * ${spacing});\n      &:focus:not([disabled]) {\n        box-shadow: none;\n      }\n    }\n    ${StyledText} {\n      padding: 0 calc(0.5 * ${spacing});\n      white-space: nowrap;\n    }\n  `;\n});\n\nStyledNumberInput.defaultProps = defaultThemeProp;\n\nexport default StyledNumberInput;\n"]}
+{"version":3,"file":"NumberInput.styles.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAMrC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAqB,KAAK,CAAC,EAAE;IACtF,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAC7D,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EACjB,cAAc,EAAE,EACd,eAAe,EAAE,gBAAgB,EACjC,kBAAkB,EAAE,OAAO,EAC3B,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACD,IAAI,EACL,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;sBAEU,gBAAgB;oBAClB,MAAM;;MAEpB,UAAU;;6BAEa,OAAO;2BACT,OAAO;;MAE5B,WAAW;eACF,IAAI;;;;0BAIO,OAAO,CAAC,oBAAoB,CAAC;;;;;MAKjD,UAAU;8BACc,OAAO;;;QAG7B,YAAY;4BACQ,gBAAgB,MAAM,gBAAgB;;;;iBAIjD,OAAO;;yBAEC,MAAM,UAAU,WAAW;qBAC/B,MAAM,UAAU,WAAW;;GAE7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC,EAAE;IAC1D,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC1B,UAAU,EAAE,EACV,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;4BACgB,OAAO;;sBAEb,gBAAgB;oBAClB,MAAM;;MAEpB,WAAW;;8BAEa,OAAO;0BACX,OAAO,CAAC,oBAAoB,CAAC;;;;;MAKjD,UAAU;8BACc,OAAO;;;GAGlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,eAAe,iBAAiB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport { StyledText } from '../Text/Text';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport { StyledFlex } from '../Flex';\n\ninterface StyledStepperProps {\n  size: number;\n}\n\nexport const StyledStepperInput = styled(StyledFormControl)<StyledStepperProps>(props => {\n  const {\n    theme: {\n      base: { spacing, 'border-radius': baseBorderRadius, palette },\n      components: {\n        input: { height },\n        'form-control': {\n          'border-radius': formBorderRadius,\n          'foreground-color': fgColor,\n          'border-width': borderWidth,\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n        }\n      }\n    },\n    size\n  } = props;\n  return css`\n    &:focus-within:not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n    ${StyledFlex} {\n      overflow: auto;\n      margin-inline-start: ${spacing};\n      margin-inline-end: ${spacing};\n    }\n    ${StyledInput} {\n      width: ${size}ch;\n      min-width: 1ch;\n      border: 0;\n      padding: 0;\n      background-color: ${palette['primary-background']};\n      &:focus:not([disabled]) {\n        box-shadow: none;\n      }\n    }\n    ${StyledText} {\n      padding: 0 calc(0.5 * ${spacing});\n      white-space: nowrap;\n    }\n    > ${StyledButton} {\n      border-radius: calc(${baseBorderRadius} * ${formBorderRadius});\n      margin-inline-start: auto;\n      border: 0;\n      &:enabled {\n        color: ${fgColor};\n      }\n      min-height: calc(${height} - 2 * ${borderWidth});\n      height: calc(${height} - 2 * ${borderWidth});\n    }\n  `;\n});\n\nStyledStepperInput.defaultProps = defaultThemeProp;\n\nconst StyledNumberInput = styled(StyledFormControl)(props => {\n  const {\n    theme: {\n      base: { spacing, palette },\n      components: {\n        'form-control': {\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n        }\n      }\n    }\n  } = props;\n\n  return css`\n    padding: 0 calc(0.5 * ${spacing});\n    &:focus-within:not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n    ${StyledInput} {\n      border: 0;\n      padding: 0 calc(0.5 * ${spacing});\n      background-color: ${palette['primary-background']};\n      &:focus:not([disabled]) {\n        box-shadow: none;\n      }\n    }\n    ${StyledText} {\n      padding: 0 calc(0.5 * ${spacing});\n      white-space: nowrap;\n    }\n  `;\n});\n\nStyledNumberInput.defaultProps = defaultThemeProp;\n\nexport default StyledNumberInput;\n"]}

package/lib/components/Number/NumberInput.types.d.ts

@@ -39,6 +39,8 @@ export default interface NumberInputProps extends BaseProps, NoChildrenProp {
     onFocus?: (value: string) => void;
     /** Callback fired when the component loses focus. */
     onBlur?: (value: string) => void;
+    /** Callback fired when AI suggestion is accepted/rejected */
+    onResolveSuggestion?: FormControlProps['onResolveSuggestion'];
     /** Defines unit of the number, like 'kg', 'miles' or '%'. */
     unit?: string;
     /**

package/lib/components/Number/NumberInput.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,CAAC,OAAO,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACzE;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,qCAAqC;AACrC,eAAO,MAAM,yBAAyB,KAAK,CAAC"}
+{"version":3,"file":"NumberInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,CAAC,OAAO,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACzE;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC9D,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,qCAAqC;AACrC,eAAO,MAAM,yBAAyB,KAAK,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.types.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AAqFA,qCAAqC;AACrC,MAAM,CAAC,MAAM,yBAAyB,GAAG,EAAE,CAAC","sourcesContent":["import { Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport { BaseProps, NoChildrenProp } from '../../types';\n\nexport default interface NumberInputProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /**\n   * Visually hides the label region.\n   * @default false\n   */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the component non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /**\n   * CurrencyInput input value.\n   * Requires an onChange handler to update value.\n   */\n  value?: string;\n  /** Callback fired when input value changes. */\n  onChange: (value: string) => void;\n  /** Callback fired when the component gets focus. */\n  onFocus?: (value: string) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: string) => void;\n  /** Defines unit of the number, like 'kg', 'miles' or '%'. */\n  unit?: string;\n  /**\n   *\n  /** Determines whether decimal places should be shown. The value is rounded if true.\n   * @default true\n   */\n  showDecimal?: boolean;\n  /** Determines the maximum number of decimal places. The value is rounded to the number of places.\n   * @default variable NUMBER_MAX_DECIMAL_PLACES. Recommended minimum: 1.\n   */\n  numberOfDecimals?: number;\n  /** Determines whether group separators should be shown.\n   * @default true\n   */\n  showGroupSeparators?: boolean;\n  /** The minimum value to accept for this input.\n   *  This value must be less than or equal to the value of the max attribute.\n   *  @default Number.MIN_SAFE_INTEGER\n   */\n  min?: number;\n  /**\n   * The maximum value to accept for this input.\n   *  This value must be greater than or equal to the value of the min attribute.\n   *  @default Number.MAX_SAFE_INTEGER\n   */\n  max?: number;\n  /** A stepping interval to use when using up and down arrows to adjust the value.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Component variation. Might be rendered as regular input or stepper.\n   * @default 'default'\n   */\n  variant?: 'default' | 'stepper';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLInputElement>;\n  /** Optional manual override for generated aria label */\n  'aria-label'?: string;\n}\n\n/** Maximum fraction digits is 20. */\nexport const NUMBER_MAX_DECIMAL_PLACES = 20;\n"]}
+{"version":3,"file":"NumberInput.types.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AAuFA,qCAAqC;AACrC,MAAM,CAAC,MAAM,yBAAyB,GAAG,EAAE,CAAC","sourcesContent":["import { Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport { BaseProps, NoChildrenProp } from '../../types';\n\nexport default interface NumberInputProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /**\n   * Visually hides the label region.\n   * @default false\n   */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the component non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /**\n   * CurrencyInput input value.\n   * Requires an onChange handler to update value.\n   */\n  value?: string;\n  /** Callback fired when input value changes. */\n  onChange: (value: string) => void;\n  /** Callback fired when the component gets focus. */\n  onFocus?: (value: string) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: string) => void;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n  /** Defines unit of the number, like 'kg', 'miles' or '%'. */\n  unit?: string;\n  /**\n   *\n  /** Determines whether decimal places should be shown. The value is rounded if true.\n   * @default true\n   */\n  showDecimal?: boolean;\n  /** Determines the maximum number of decimal places. The value is rounded to the number of places.\n   * @default variable NUMBER_MAX_DECIMAL_PLACES. Recommended minimum: 1.\n   */\n  numberOfDecimals?: number;\n  /** Determines whether group separators should be shown.\n   * @default true\n   */\n  showGroupSeparators?: boolean;\n  /** The minimum value to accept for this input.\n   *  This value must be less than or equal to the value of the max attribute.\n   *  @default Number.MIN_SAFE_INTEGER\n   */\n  min?: number;\n  /**\n   * The maximum value to accept for this input.\n   *  This value must be greater than or equal to the value of the min attribute.\n   *  @default Number.MAX_SAFE_INTEGER\n   */\n  max?: number;\n  /** A stepping interval to use when using up and down arrows to adjust the value.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Component variation. Might be rendered as regular input or stepper.\n   * @default 'default'\n   */\n  variant?: 'default' | 'stepper';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLInputElement>;\n  /** Optional manual override for generated aria label */\n  'aria-label'?: string;\n}\n\n/** Maximum fraction digits is 20. */\nexport const NUMBER_MAX_DECIMAL_PLACES = 20;\n"]}

package/lib/components/Phone/PhoneInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAGJ,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AAEzF,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAUrE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc;IAClF;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAwBD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA+GjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAGJ,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AAEzF,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAUrE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc;IAClF;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAwBD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA2HjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Phone/PhoneInput.js

@@ -31,7 +31,7 @@ const StyledPhoneInput = styled.div(() => {
 });
 StyledPhoneInput.defaultProps = defaultThemeProp;
 const PhoneInput = forwardRef((props, ref) => {
-    const { value, id, label, labelHidden, info, status, required, readOnly, disabled, showCountryCode = false, callingCodesList = callingCodes, onChange, onBlur, onFocus, ...restProps } = props;
+    const { value, id, label, labelHidden, info, status, required, readOnly, disabled, showCountryCode = false, callingCodesList = callingCodes, onChange, onBlur, onFocus, onResolveSuggestion, ...restProps } = props;
     const [countryCode = callingCodesList[0], subscriberNumber = ''] = value
         ? getPhoneNumberParts(value, callingCodesList)
         : [];
@@ -56,8 +56,17 @@ const PhoneInput = forwardRef((props, ref) => {
     }, [countryCode]);
     const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);
     const codesOptions = (_jsx(_Fragment, { children: callingCodesList.map(code => (_jsx(Option, { value: code, children: code }, code))) }));
-    const Comp = (_jsxs(StyledPhoneInput, { as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled, children: [showCountryCode && (_jsx(Select, { value: countryCode, onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autocomplete: 'tel-country-code', children: codesOptions })), _jsx(Input, { ...restProps, inputMode: 'tel', ref: inputRef, value: formatted, onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autocomplete: 'tel-national' })] }));
-    return label ? (_jsx(FormField, { as: 'fieldset', labelAs: 'legend', ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp })) : (Comp);
+    const Comp = (_jsxs(StyledPhoneInput, { as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled, children: [showCountryCode && (_jsx(Select, { value: countryCode, onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autocomplete: 'tel-country-code', hasSuggestion: status === 'pending' && !!onResolveSuggestion, children: codesOptions })), _jsx(Input, { ...restProps, inputMode: 'tel', ref: inputRef, value: formatted, onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autocomplete: 'tel-national', hasSuggestion: status === 'pending' && !!onResolveSuggestion })] }));
+    return label ? (_jsx(FormField, { as: 'fieldset', labelAs: 'legend', ...{
+            label,
+            labelHidden,
+            id,
+            info,
+            status,
+            required,
+            disabled,
+            onResolveSuggestion
+        }, children: Comp })) : (Comp);
 });
 export default PhoneInput;
 //# sourceMappingURL=PhoneInput.js.map