@dnb/eufemia 10.20.0 → 10.21.0

package/extensions/forms/Field/Number/Number.js.map

@@ -1 +1 @@
-{"version":3,"file":"Number.js","names":["React","useContext","useMemo","useCallback","InputMasked","HelpButton","Button","SharedContext","classnames","FieldBlock","useDataValue","pickSpacingProps","clamp","useErrorMessage","NumberComponent","props","_props$width","_sharedContext$transl","_sharedContext$transl2","sharedContext","tr","translation","Forms","currency","percent","mask","step","decimalLimit","prefix","suffix","showStepControls","errorMessages","path","required","inputErrorRequired","minimum","numberFieldErrorMinimum","maximum","numberFieldErrorMaximum","exclusiveMinimum","numberFieldErrorExclusiveMinimum","exclusiveMaximum","numberFieldErrorExclusiveMaximum","multipleOf","numberFieldErrorMultipleOf","schema","_props$schema","type","toInput","external","undefined","fromInput","_ref","value","numberValue","emptyValue","transformValue","currentValue","Number","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","maskProps","mask_options","as_currency","as_percent","as_number","number_mask","_objectSpread","preparedProps","width","id","name","className","autoComplete","inputClassName","layout","placeholder","label","labelDescription","disabled","ariaAttributes","info","warning","error","hasError","help","size","align","handleFocus","handleBlur","handleChange","onKeyDownHandler","_ref2","key","event","persist","preventDefault","fieldBlockProps","contentClassName","forId","contentWidth","increaseProps","variant","icon","tabIndex","onClick","title","Slider","addTitle","replace","String","decreaseProps","subtractTitle","ariaParams","role","inputProps","onKeyDown","onFocus","onBlur","onChange","status","stretch","createElement","content","_extends","asFieldset","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport { InputMasked, HelpButton, Button } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport type { InputAlign, InputSize } from '../../../../components/Input'\nimport SharedContext from '../../../../shared/Context'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport {\n  FieldProps,\n  FieldHelpProps,\n  AllJSONSchemaVersions,\n  CustomErrorMessages,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { ButtonProps, ButtonSize } from '../../../../components/Button'\nimport { clamp } from '../../../../components/slider/SliderHelpers'\nimport useErrorMessage from '../../hooks/useErrorMessage'\n\ninterface ErrorMessages extends CustomErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    step?: number\n    // Formatting\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    size?: InputSize\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n    align?: InputAlign\n    showStepControls?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const {\n    currency,\n    percent,\n    mask,\n    step = 1,\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    showStepControls,\n  } = props\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: tr.inputErrorRequired,\n    minimum: tr.numberFieldErrorMinimum,\n    maximum: tr.numberFieldErrorMaximum,\n    exclusiveMinimum: tr.numberFieldErrorExclusiveMinimum,\n    exclusiveMaximum: tr.numberFieldErrorExclusiveMaximum,\n    multipleOf: tr.numberFieldErrorMultipleOf,\n  })\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'number',\n        minimum: props.minimum,\n        maximum: props.maximum,\n        exclusiveMinimum: props.exclusiveMinimum,\n        exclusiveMaximum: props.exclusiveMaximum,\n        multipleOf: props.multipleOf,\n      },\n    [\n      props.schema,\n      props.minimum,\n      props.maximum,\n      props.exclusiveMinimum,\n      props.exclusiveMaximum,\n      props.multipleOf,\n    ]\n  )\n\n  const toInput = useCallback((external: number | undefined) => {\n    if (external === undefined) {\n      return ''\n    }\n    return external\n  }, [])\n  const fromInput = useCallback(\n    ({ value, numberValue }: { value: string; numberValue: number }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      return numberValue\n    },\n    [props.emptyValue]\n  )\n  const transformValue = useCallback(\n    (value: number, currentValue: number) => {\n      if (\n        value > Number.MAX_SAFE_INTEGER ||\n        value < Number.MIN_SAFE_INTEGER\n      ) {\n        return currentValue\n      }\n\n      return value\n    },\n    []\n  )\n\n  const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n    const mask_options = { prefix, suffix, decimalLimit }\n\n    if (currency) {\n      return {\n        as_currency: currency,\n        mask_options,\n      }\n    }\n\n    if (percent) {\n      return {\n        as_percent: percent,\n        mask_options,\n      }\n    }\n\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        ...mask_options,\n      },\n    }\n  }, [currency, decimalLimit, mask, percent, prefix, suffix])\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    toInput,\n    fromInput,\n    transformValue,\n    width: props.width ?? 'medium',\n  }\n\n  const {\n    id,\n    name,\n    className,\n    autoComplete,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    value,\n    minimum = Number.MIN_SAFE_INTEGER,\n    maximum = Number.MAX_SAFE_INTEGER,\n    disabled,\n    ariaAttributes,\n    info,\n    warning,\n    error,\n    hasError,\n    help,\n    size,\n    width,\n    align,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  const onKeyDownHandler = useCallback(\n    ({ key, event }) => {\n      if (!showStepControls) {\n        return\n      }\n\n      let numberValue = null\n\n      switch (key) {\n        case 'ArrowUp':\n          numberValue = clamp((value as number) + step, minimum, maximum)\n          break\n        case 'ArrowDown':\n          numberValue = clamp((value as number) - step, minimum, maximum)\n          break\n      }\n\n      if (numberValue !== null) {\n        event.persist()\n        event.preventDefault()\n        handleChange({ numberValue })\n      }\n    },\n    [handleChange, maximum, minimum, showStepControls, step, value]\n  )\n\n  const fieldBlockProps = {\n    className: classnames('dnb-forms-field-number', className),\n    contentClassName: classnames(\n      'dnb-forms-field-number__contents',\n      showStepControls && 'dnb-forms-field-number__contents--has-controls',\n      disabled && 'dnb-forms-field-number__contents--is-disabled',\n      hasError && 'dnb-forms-field-number__contents--has-error'\n    ),\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    info,\n    warning,\n    error,\n    disabled,\n    width: width === 'stretch' ? width : undefined,\n    contentWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  const increaseProps: ButtonProps = showStepControls && {\n    'aria-hidden': true,\n    className: 'dnb-button--control-after',\n    variant: 'secondary',\n    icon: 'add',\n    size: (size || 'small') as ButtonSize,\n    tabIndex: -1,\n    disabled: disabled || value >= maximum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) + step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.addTitle?.replace(\n      '%s',\n      String(value + step)\n    ),\n  }\n\n  const decreaseProps: ButtonProps = showStepControls && {\n    ...increaseProps,\n    className: 'dnb-button--control-before',\n    icon: 'subtract',\n    size: (size || 'small') as ButtonSize,\n    disabled: disabled || value <= minimum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) - step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.subtractTitle?.replace(\n      '%s',\n      String(value - step)\n    ),\n  }\n\n  const ariaParams = showStepControls && {\n    role: 'spinbutton',\n    'aria-valuemin': String(minimum),\n    'aria-valuemax': String(maximum),\n    'aria-valuenow': String(value), // without it, VO will read an invlaid value\n    'aria-valuetext': String(value), // without it, VO will read %\n  }\n\n  const inputProps = {\n    id,\n    name,\n    autoComplete,\n    className: classnames(\n      'dnb-forms-field-number__input',\n      `dnb-input--${size}`,\n      inputClassName\n    ),\n    step,\n    placeholder,\n    value,\n    align: showStepControls ? 'center' : align,\n    ...maskProps,\n    onKeyDown: onKeyDownHandler,\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    onChange: handleChange,\n    disabled,\n    ...ariaAttributes,\n    status: hasError ? 'error' : undefined,\n    stretch: width !== undefined,\n    suffix:\n      help && !showStepControls ? (\n        <HelpButton title={help.title}>{help.content}</HelpButton>\n      ) : undefined,\n    ...ariaParams,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps} asFieldset={false}>\n      {showStepControls && <Button {...decreaseProps} />}\n      <InputMasked {...inputProps} />\n      {showStepControls && <Button {...increaseProps} />}\n      {help && showStepControls && (\n        <HelpButton title={help.title}>{help.content}</HelpButton>\n      )}\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}
+{"version":3,"file":"Number.js","names":["React","useContext","useMemo","useCallback","InputMasked","HelpButton","Button","SharedContext","FieldBlockContext","classnames","FieldBlock","useDataValue","pickSpacingProps","clamp","useErrorMessage","NumberComponent","props","_props$width","_sharedContext$transl","_sharedContext$transl2","fieldBlockContext","sharedContext","tr","translation","Forms","currency","currencyDisplay","percent","mask","step","decimalLimit","prefix","suffix","showStepControls","errorMessages","path","required","inputErrorRequired","minimum","numberFieldErrorMinimum","maximum","numberFieldErrorMaximum","exclusiveMinimum","numberFieldErrorExclusiveMinimum","exclusiveMaximum","numberFieldErrorExclusiveMaximum","multipleOf","numberFieldErrorMultipleOf","schema","_props$schema","type","toInput","external","undefined","fromInput","_ref","value","numberValue","emptyValue","transformValue","currentValue","Number","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","maskProps","mask_options","as_currency","currency_mask","as_percent","as_number","number_mask","_objectSpread","preparedProps","width","composition","id","name","className","inputClassName","autoComplete","layout","placeholder","label","labelDescription","disabled","ariaAttributes","info","warning","error","hasError","help","size","align","handleFocus","handleBlur","handleChange","onKeyDownHandler","_ref2","key","event","persist","preventDefault","fieldBlockProps","contentClassName","forId","contentWidth","increaseProps","variant","icon","tabIndex","onClick","title","Slider","addTitle","replace","String","decreaseProps","subtractTitle","ariaParams","role","inputProps","onKeyDown","onFocus","onBlur","onChange","status","stretch","Boolean","createElement","content","_extends","asFieldset","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport { InputMasked, HelpButton, Button } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport type { InputAlign, InputSize } from '../../../../components/Input'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport {\n  FieldProps,\n  FieldHelpProps,\n  AllJSONSchemaVersions,\n  CustomErrorMessages,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { ButtonProps, ButtonSize } from '../../../../components/Button'\nimport { clamp } from '../../../../components/slider/SliderHelpers'\nimport useErrorMessage from '../../hooks/useErrorMessage'\n\ninterface ErrorMessages extends CustomErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    currencyDisplay?: 'code' | 'symbol' | 'narrowSymbol' | 'name'\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    step?: number\n    // Formatting\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    size?: InputSize\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n    align?: InputAlign\n    showStepControls?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const fieldBlockContext = useContext(FieldBlockContext)\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const {\n    currency,\n    currencyDisplay,\n    percent,\n    mask,\n    step = 1,\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    showStepControls,\n  } = props\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: tr.inputErrorRequired,\n    minimum: tr.numberFieldErrorMinimum,\n    maximum: tr.numberFieldErrorMaximum,\n    exclusiveMinimum: tr.numberFieldErrorExclusiveMinimum,\n    exclusiveMaximum: tr.numberFieldErrorExclusiveMaximum,\n    multipleOf: tr.numberFieldErrorMultipleOf,\n  })\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'number',\n        minimum: props.minimum,\n        maximum: props.maximum,\n        exclusiveMinimum: props.exclusiveMinimum,\n        exclusiveMaximum: props.exclusiveMaximum,\n        multipleOf: props.multipleOf,\n      },\n    [\n      props.schema,\n      props.minimum,\n      props.maximum,\n      props.exclusiveMinimum,\n      props.exclusiveMaximum,\n      props.multipleOf,\n    ]\n  )\n\n  const toInput = useCallback((external: number | undefined) => {\n    if (external === undefined) {\n      return ''\n    }\n    return external\n  }, [])\n  const fromInput = useCallback(\n    ({ value, numberValue }: { value: string; numberValue: number }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      return numberValue\n    },\n    [props.emptyValue]\n  )\n  const transformValue = useCallback(\n    (value: number, currentValue: number) => {\n      if (\n        value > Number.MAX_SAFE_INTEGER ||\n        value < Number.MIN_SAFE_INTEGER\n      ) {\n        return currentValue\n      }\n\n      return value\n    },\n    []\n  )\n\n  const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n    const mask_options = { prefix, suffix, decimalLimit }\n\n    if (currency) {\n      return {\n        as_currency: currency,\n        mask_options,\n        currency_mask: {\n          currencyDisplay,\n        },\n      }\n    }\n\n    if (percent) {\n      return {\n        as_percent: percent,\n        mask_options,\n      }\n    }\n\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        ...mask_options,\n      },\n    }\n  }, [\n    currency,\n    currencyDisplay,\n    decimalLimit,\n    mask,\n    percent,\n    prefix,\n    suffix,\n  ])\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    toInput,\n    fromInput,\n    transformValue,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'medium'),\n  }\n\n  const {\n    id,\n    name,\n    className,\n    inputClassName,\n    autoComplete,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    value,\n    minimum = Number.MIN_SAFE_INTEGER,\n    maximum = Number.MAX_SAFE_INTEGER,\n    disabled,\n    ariaAttributes,\n    info,\n    warning,\n    error,\n    hasError,\n    help,\n    size,\n    width,\n    align,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  const onKeyDownHandler = useCallback(\n    ({ key, event }) => {\n      if (!showStepControls) {\n        return\n      }\n\n      let numberValue = null\n\n      switch (key) {\n        case 'ArrowUp':\n          numberValue = clamp((value as number) + step, minimum, maximum)\n          break\n        case 'ArrowDown':\n          numberValue = clamp((value as number) - step, minimum, maximum)\n          break\n      }\n\n      if (numberValue !== null) {\n        event.persist()\n        event.preventDefault()\n        handleChange({ numberValue })\n      }\n    },\n    [handleChange, maximum, minimum, showStepControls, step, value]\n  )\n\n  const fieldBlockProps = {\n    className: classnames('dnb-forms-field-number', className),\n    contentClassName: classnames(\n      'dnb-forms-field-number__contents',\n      showStepControls && 'dnb-forms-field-number__contents--has-controls',\n      disabled && 'dnb-forms-field-number__contents--is-disabled',\n      hasError && 'dnb-forms-field-number__contents--has-error'\n    ),\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    info,\n    warning,\n    error,\n    disabled,\n    width:\n      width === 'stretch' || fieldBlockContext?.composition\n        ? width\n        : undefined,\n    contentWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  const increaseProps: ButtonProps = showStepControls && {\n    'aria-hidden': true,\n    className: 'dnb-button--control-after',\n    variant: 'secondary',\n    icon: 'add',\n    size: (size || 'small') as ButtonSize,\n    tabIndex: -1,\n    disabled: disabled || value >= maximum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) + step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.addTitle?.replace(\n      '%s',\n      String(value + step)\n    ),\n  }\n\n  const decreaseProps: ButtonProps = showStepControls && {\n    ...increaseProps,\n    className: 'dnb-button--control-before',\n    icon: 'subtract',\n    size: (size || 'small') as ButtonSize,\n    disabled: disabled || value <= minimum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) - step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.subtractTitle?.replace(\n      '%s',\n      String(value - step)\n    ),\n  }\n\n  const ariaParams = showStepControls && {\n    role: 'spinbutton',\n    'aria-valuemin': String(minimum),\n    'aria-valuemax': String(maximum),\n    'aria-valuenow': String(value), // without it, VO will read an invlaid value\n    'aria-valuetext': String(value), // without it, VO will read %\n  }\n\n  const inputProps = {\n    id,\n    name,\n    autoComplete,\n    className: classnames(\n      'dnb-forms-field-number__input',\n      `dnb-input--${size}`,\n      inputClassName\n    ),\n    step: showStepControls ? step : undefined,\n    placeholder,\n    value,\n    align: showStepControls ? 'center' : align,\n    ...maskProps,\n    onKeyDown: onKeyDownHandler,\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    onChange: handleChange,\n    disabled,\n    ...ariaAttributes,\n    status: hasError ? 'error' : undefined,\n    stretch: Boolean(\n      width !== undefined || fieldBlockContext?.composition\n    ),\n    suffix:\n      help && !showStepControls ? (\n        <HelpButton title={help.title}>{help.content}</HelpButton>\n      ) : undefined,\n    ...ariaParams,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps} asFieldset={false}>\n      {showStepControls && <Button {...decreaseProps} />}\n      <InputMasked {...inputProps} />\n      {showStepControls && <Button {...increaseProps} />}\n      {help && showStepControls && (\n        <HelpButton title={help.title}>{help.content}</HelpButton>\n      )}\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}

package/extensions/forms/Field/Number/NumberDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../../../shared/types';
+export declare const numberProperties: PropertiesTableProps;

package/extensions/forms/Field/Number/NumberDocs.js

@@ -0,0 +1,85 @@
+import { inputProperties } from '../../../../components/input/InputDocs';
+export const numberProperties = {
+  decimalLimit: {
+    doc: 'Max number of decimals. Values with more decimals will be rounded. Defaults to `12`.',
+    type: 'number',
+    status: 'optional'
+  },
+  percent: {
+    doc: 'Format a number as percentage.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  currency: {
+    doc: 'Currency code (ISO 4217) or `true` to use the default `NOK`. Uses two decimals by default.',
+    type: ['boolean', 'string'],
+    status: 'optional'
+  },
+  minimum: {
+    doc: 'Validation for inclusive minimum number value (greater than or equal). Defaults to `Number.MIN_SAFE_INTEGER`.',
+    type: 'number',
+    status: 'optional'
+  },
+  maximum: {
+    doc: 'Validation for inclusive maximum number value (less than or equal). Defaults to `Number.MAX_SAFE_INTEGER`.',
+    type: 'number',
+    status: 'optional'
+  },
+  exclusiveMinimum: {
+    doc: 'Validation for exclusive minimum number value (greater than).',
+    type: 'number',
+    status: 'optional'
+  },
+  exclusiveMaximum: {
+    doc: 'Validation for exclusive maximum number value (less than).',
+    type: 'number',
+    status: 'optional'
+  },
+  multipleOf: {
+    doc: 'Validation that requires the number to be a multiple of given value.',
+    type: 'number',
+    status: 'optional'
+  },
+  width: {
+    doc: '`false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width.',
+    type: ['string', 'false'],
+    status: 'optional'
+  },
+  size: inputProperties.size,
+  align: {
+    doc: 'Lateral alignment of contents of input field, one of `left` (default), `center`, or `right`.',
+    type: 'string',
+    status: 'optional'
+  },
+  help: {
+    doc: 'Provide a help button. Object consisting of `title` and `content`.',
+    type: 'object',
+    status: 'optional'
+  },
+  autoComplete: {
+    doc: 'For HTML `autocomplete` attributes.',
+    type: ['on', 'string'],
+    status: 'optional'
+  },
+  prefix: {
+    doc: 'Text added before the value input.',
+    type: 'string',
+    status: 'optional'
+  },
+  suffix: {
+    doc: 'Text added after the value input.',
+    type: 'string',
+    status: 'optional'
+  },
+  step: {
+    doc: 'Determines step granularity when in/decreasing value input through step controls buttons or arrow keys.',
+    type: 'number',
+    status: 'optional'
+  },
+  showStepControls: {
+    doc: 'Show buttons that in/decreases value input by the step value.',
+    type: 'boolean',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=NumberDocs.js.map

package/extensions/forms/Field/Number/NumberDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberDocs.js","names":["inputProperties","numberProperties","decimalLimit","doc","type","status","percent","currency","minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","width","size","align","help","autoComplete","prefix","suffix","step","showStepControls"],"sources":["../../../../../../src/extensions/forms/Field/Number/NumberDocs.ts"],"sourcesContent":["import { inputProperties } from '../../../../components/input/InputDocs'\nimport { PropertiesTableProps } from '../../../../shared/types'\n\nexport const numberProperties: PropertiesTableProps = {\n  decimalLimit: {\n    doc: 'Max number of decimals. Values with more decimals will be rounded. Defaults to `12`.',\n    type: 'number',\n    status: 'optional',\n  },\n  percent: {\n    doc: 'Format a number as percentage.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  currency: {\n    doc: 'Currency code (ISO 4217) or `true` to use the default `NOK`. Uses two decimals by default.',\n    type: ['boolean', 'string'],\n    status: 'optional',\n  },\n  minimum: {\n    doc: 'Validation for inclusive minimum number value (greater than or equal). Defaults to `Number.MIN_SAFE_INTEGER`.',\n    type: 'number',\n    status: 'optional',\n  },\n  maximum: {\n    doc: 'Validation for inclusive maximum number value (less than or equal). Defaults to `Number.MAX_SAFE_INTEGER`.',\n    type: 'number',\n    status: 'optional',\n  },\n  exclusiveMinimum: {\n    doc: 'Validation for exclusive minimum number value (greater than).',\n    type: 'number',\n    status: 'optional',\n  },\n  exclusiveMaximum: {\n    doc: 'Validation for exclusive maximum number value (less than).',\n    type: 'number',\n    status: 'optional',\n  },\n  multipleOf: {\n    doc: 'Validation that requires the number to be a multiple of given value.',\n    type: 'number',\n    status: 'optional',\n  },\n  width: {\n    doc: '`false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  size: inputProperties.size,\n  align: {\n    doc: 'Lateral alignment of contents of input field, one of `left` (default), `center`, or `right`.',\n    type: 'string',\n    status: 'optional',\n  },\n  help: {\n    doc: 'Provide a help button. Object consisting of `title` and `content`.',\n    type: 'object',\n    status: 'optional',\n  },\n  autoComplete: {\n    doc: 'For HTML `autocomplete` attributes.',\n    type: ['on', 'string'],\n    status: 'optional',\n  },\n  prefix: {\n    doc: 'Text added before the value input.',\n    type: 'string',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text added after the value input.',\n    type: 'string',\n    status: 'optional',\n  },\n  step: {\n    doc: 'Determines step granularity when in/decreasing value input through step controls buttons or arrow keys.',\n    type: 'number',\n    status: 'optional',\n  },\n  showStepControls: {\n    doc: 'Show buttons that in/decreases value input by the step value.',\n    type: 'boolean',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,wCAAwC;AAGxE,OAAO,MAAMC,gBAAsC,GAAG;EACpDC,YAAY,EAAE;IACZC,GAAG,EAAE,sFAAsF;IAC3FC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,gCAAgC;IACrCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,QAAQ,EAAE;IACRJ,GAAG,EAAE,4FAA4F;IACjGC,IAAI,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC;IAC3BC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,+GAA+G;IACpHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,OAAO,EAAE;IACPN,GAAG,EAAE,4GAA4G;IACjHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,gBAAgB,EAAE;IAChBP,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,gBAAgB,EAAE;IAChBR,GAAG,EAAE,4DAA4D;IACjEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,UAAU,EAAE;IACVT,GAAG,EAAE,sEAAsE;IAC3EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,KAAK,EAAE;IACLV,GAAG,EAAE,8IAA8I;IACnJC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDS,IAAI,EAAEd,eAAe,CAACc,IAAI;EAC1BC,KAAK,EAAE;IACLZ,GAAG,EAAE,8FAA8F;IACnGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDW,IAAI,EAAE;IACJb,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDY,YAAY,EAAE;IACZd,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC;IACtBC,MAAM,EAAE;EACV,CAAC;EACDa,MAAM,EAAE;IACNf,GAAG,EAAE,oCAAoC;IACzCC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDc,MAAM,EAAE;IACNhB,GAAG,EAAE,mCAAmC;IACxCC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDe,IAAI,EAAE;IACJjB,GAAG,EAAE,yGAAyG;IAC9GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDgB,gBAAgB,EAAE;IAChBlB,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC"}

package/extensions/forms/Field/Number/style/dnb-number.css

@@ -27,7 +27,6 @@
 }
 .dnb-forms-field-number__contents {
   display: flex;
-  align-items: center;
 }
 .dnb-forms-field-number__contents--has-controls {
   border-radius: 0.25rem;
@@ -51,6 +50,9 @@ html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:fo
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
+.dnb-forms-field-number__contents--has-controls .dnb-input__input {
+  align-items: center;
+}
 .dnb-forms-field-number__contents--has-controls .dnb-input__shell {
   border-radius: 0;
   box-shadow: none;

package/extensions/forms/Field/Number/style/dnb-number.min.css

@@ -1 +1 @@
-.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{align-items:center;display:flex}.dnb-forms-field-number__contents--has-controls{--border-color:var(--number-control-button-border-color);--border-width:0.0625rem;border-color:transparent;border-radius:.25rem;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]){--border-color:var(--number-control-button-border-color);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within{--border-color:var(--number-control-button-border-color--focus);--border-width:var(--number-control-button-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls .dnb-input__shell{border-radius:0;box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]){box-shadow:none}.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none;outline:initial}html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button-background-color--hover);color:var(--number-control-button-color--hover)}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button-background-color--active);color:var(--number-control-button-color--active)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error{--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]){--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell{box-shadow:none}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button--error-contrast);color:var(--number-control-button--error)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button--error);color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]){--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input[data-input-state=disabled] .dnb-input__shell{box-shadow:none}.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-before[disabled]{background-color:var(--color-black-3);color:var(--color-black-20)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small{width:calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before{width:var(--number-control-button-width--small)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium{width:calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before{width:var(--number-control-button-width--medium)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large{width:calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before{width:var(--number-control-button-width--large)}
+.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{display:flex}.dnb-forms-field-number__contents--has-controls{--border-color:var(--number-control-button-border-color);--border-width:0.0625rem;border-color:transparent;border-radius:.25rem;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]){--border-color:var(--number-control-button-border-color);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within{--border-color:var(--number-control-button-border-color--focus);--border-width:var(--number-control-button-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls .dnb-input__input{align-items:center}.dnb-forms-field-number__contents--has-controls .dnb-input__shell{border-radius:0;box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]){box-shadow:none}.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none;outline:initial}html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button-background-color--hover);color:var(--number-control-button-color--hover)}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button-background-color--active);color:var(--number-control-button-color--active)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error{--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]){--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell{box-shadow:none}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button--error-contrast);color:var(--number-control-button--error)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button--error);color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]){--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input[data-input-state=disabled] .dnb-input__shell{box-shadow:none}.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-before[disabled]{background-color:var(--color-black-3);color:var(--color-black-20)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small{width:calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before{width:var(--number-control-button-width--small)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium{width:calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before{width:var(--number-control-button-width--medium)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large{width:calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before{width:var(--number-control-button-width--large)}

package/extensions/forms/Field/Number/style/dnb-number.scss

@@ -26,7 +26,6 @@
 
   &__contents {
     display: flex;
-    align-items: center;
 
     &--has-controls {
       border-radius: 0.25rem;
@@ -51,6 +50,10 @@
       }
 
       .dnb-input {
+        &__input {
+          align-items: center;
+        }
+
         &__shell {
           border-radius: 0;
           box-shadow: none;

package/extensions/forms/Field/Password/Password.d.ts

@@ -0,0 +1,45 @@
+import React, { MutableRefObject } from 'react';
+import { Props as StringFieldProps } from '../String';
+import { InputProps } from '../../../../components/Input';
+export type PasswordVisibilityEvent = React.MouseEvent<HTMLButtonElement> & {
+    value: string;
+};
+export type PasswordProps = Omit<StringFieldProps, 'innerRef'> & {
+    /**
+     * Fires when the input toggles to show the password.
+     */
+    onShowPassword?: (event: PasswordVisibilityEvent) => void;
+    /**
+     * Fires when the input toggles to hide the password.
+     */
+    onHidePassword?: (event: PasswordVisibilityEvent) => void;
+    /**
+     * The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size="2" then it will be forwarded as the input element attribute.
+     */
+    size?: InputProps['size'];
+    /**
+     * ElememntRef passed on to the password input element.
+     */
+    innerRef?: MutableRefObject<HTMLInputElement>;
+    /**
+     * @deprecated in v11, use use `locales`prop on `Provider` and override `passwordShowLabel` instead.
+     */
+    show_password?: string;
+    /**
+     * @deprecated in v11, use use `locales`prop on `Provider` and override `passwordHideLabel` instead.
+     */
+    hide_password?: string;
+    /**
+     * @deprecated in v11, use `onShowPassword` instead.
+     */
+    on_show_password?: (event: PasswordVisibilityEvent) => void;
+    /**
+     * @deprecated in v11, use `onHidePassword` instead.
+     */
+    on_hide_password?: (event: PasswordVisibilityEvent) => void;
+};
+declare function Password({ id, className, innerRef, value, label, disabled, size, ...externalProps }: PasswordProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Password {
+    var _supportsSpacingProps: boolean;
+}
+export default Password;

package/extensions/forms/Field/Password/Password.js

@@ -0,0 +1,99 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["id", "className", "innerRef", "value", "label", "disabled", "size"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useContext, useRef, useState, useCallback } from 'react';
+import classnames from 'classnames';
+import SharedContext from '../../../../shared/Context';
+import StringField from '../String';
+import { SubmitButton } from '../../../../components/Input';
+import IconView from '../../../../icons/view';
+import IconViewOff from '../../../../icons/hide';
+import IconViewMedium from '../../../../icons/view_medium';
+import IconViewOffMedium from '../../../../icons/hide_medium';
+import { convertSnakeCaseProps } from '../../../../shared/helpers/withSnakeCaseProps';
+function Password(_ref) {
+  var _innerRef$current;
+  let {
+      id,
+      className,
+      innerRef,
+      value,
+      label,
+      disabled,
+      size
+    } = _ref,
+    externalProps = _objectWithoutProperties(_ref, _excluded);
+  const props = convertSnakeCaseProps(Object.freeze(externalProps));
+  const [hidden, setHidden] = useState(true);
+  const sharedContext = useContext(SharedContext);
+  const translations = sharedContext.translation.Forms;
+  const ref = useRef((_innerRef$current = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) !== null && _innerRef$current !== void 0 ? _innerRef$current : null);
+  const toggleVisibility = useCallback(event => {
+    const {
+      onShowPassword,
+      onHidePassword
+    } = convertSnakeCaseProps(props);
+    const value = ref.current.value;
+    setHidden(hidden => {
+      hidden ? onShowPassword === null || onShowPassword === void 0 ? void 0 : onShowPassword(_objectSpread(_objectSpread({}, event), {}, {
+        value
+      })) : onHidePassword === null || onHidePassword === void 0 ? void 0 : onHidePassword(_objectSpread(_objectSpread({}, event), {}, {
+        value
+      }));
+      return !hidden;
+    });
+    if (ref.current) {
+      ref.current.focus();
+    }
+  }, [props]);
+  const getAriaLabel = useCallback(() => {
+    const {
+      passwordShowLabel,
+      passwordHideLabel
+    } = translations;
+    const ariaLabels = {
+      showPassword: passwordShowLabel,
+      hidePassword: passwordHideLabel
+    };
+    if (externalProps.show_password) {
+      ariaLabels['showPassword'] = externalProps.show_password;
+    }
+    if (externalProps.hide_password) {
+      ariaLabels['hidePassword'] = externalProps.hide_password;
+    }
+    return ariaLabels;
+  }, [externalProps.show_password, externalProps.hide_password, translations]);
+  const ariaLabels = getAriaLabel();
+  const ToggleVisibilityButton = useCallback(() => {
+    return React.createElement(SubmitButton, {
+      id: id + '-submit-button',
+      type: "button",
+      variant: "secondary",
+      "aria-controls": id,
+      "aria-label": hidden ? ariaLabels.showPassword : ariaLabels.hidePassword,
+      icon: size === 'large' ? hidden ? IconViewMedium : IconViewOffMedium : hidden ? IconView : IconViewOff,
+      disabled: disabled,
+      skeleton: sharedContext.skeleton,
+      onClick: toggleVisibility
+    });
+  }, [id, hidden, sharedContext.skeleton, disabled, size, toggleVisibility, ariaLabels]);
+  return React.createElement(StringField, _extends({
+    id: id,
+    className: classnames('dnb-forms-field-password', className),
+    label: label !== null && label !== void 0 ? label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.passwordLabel,
+    type: hidden ? 'password' : 'text',
+    value: value,
+    innerRef: ref,
+    "aria-describedby": id + '-submit-button',
+    submitElement: React.createElement(ToggleVisibilityButton, null),
+    disabled: disabled
+  }, props));
+}
+export default Password;
+Password._supportsSpacingProps = true;
+//# sourceMappingURL=Password.js.map

package/extensions/forms/Field/Password/Password.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Password.js","names":["React","useContext","useRef","useState","useCallback","classnames","SharedContext","StringField","SubmitButton","IconView","IconViewOff","IconViewMedium","IconViewOffMedium","convertSnakeCaseProps","Password","_ref","_innerRef$current","id","className","innerRef","value","label","disabled","size","externalProps","_objectWithoutProperties","_excluded","props","Object","freeze","hidden","setHidden","sharedContext","translations","translation","Forms","ref","current","toggleVisibility","event","onShowPassword","onHidePassword","_objectSpread","focus","getAriaLabel","passwordShowLabel","passwordHideLabel","ariaLabels","showPassword","hidePassword","show_password","hide_password","ToggleVisibilityButton","createElement","type","variant","icon","skeleton","onClick","_extends","passwordLabel","submitElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Password/Password.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useRef,\n  useState,\n  ElementRef,\n  MutableRefObject,\n  useCallback,\n} from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../../shared/Context'\nimport StringField, { Props as StringFieldProps } from '../String'\n\nimport { InputProps, SubmitButton } from '../../../../components/Input'\nimport IconView from '../../../../icons/view'\nimport IconViewOff from '../../../../icons/hide'\nimport IconViewMedium from '../../../../icons/view_medium'\nimport IconViewOffMedium from '../../../../icons/hide_medium'\nimport { convertSnakeCaseProps } from '../../../../shared/helpers/withSnakeCaseProps'\n\nexport type PasswordVisibilityEvent =\n  React.MouseEvent<HTMLButtonElement> & {\n    value: string\n  }\n\nexport type PasswordProps = Omit<StringFieldProps, 'innerRef'> & {\n  /**\n   * Fires when the input toggles to show the password.\n   */\n  onShowPassword?: (event: PasswordVisibilityEvent) => void\n  /**\n   * Fires when the input toggles to hide the password.\n   */\n  onHidePassword?: (event: PasswordVisibilityEvent) => void\n  /**\n   * The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size=\"2\" then it will be forwarded as the input element attribute.\n   */\n  size?: InputProps['size']\n  /**\n   * ElememntRef passed on to the password input element.\n   */\n  innerRef?: MutableRefObject<HTMLInputElement>\n  /**\n   * @deprecated in v11, use use `locales`prop on `Provider` and override `passwordShowLabel` instead.\n   */\n  show_password?: string\n  /**\n   * @deprecated in v11, use use `locales`prop on `Provider` and override `passwordHideLabel` instead.\n   */\n  hide_password?: string\n  /**\n   * @deprecated in v11, use `onShowPassword` instead.\n   */\n  on_show_password?: (event: PasswordVisibilityEvent) => void\n  /**\n   * @deprecated in v11, use `onHidePassword` instead.\n   */\n  on_hide_password?: (event: PasswordVisibilityEvent) => void\n}\n\nfunction Password({\n  id,\n  className,\n  innerRef,\n  value,\n  label,\n  disabled,\n  size,\n  ...externalProps\n}: PasswordProps) {\n  // Object freeze used to prevent mutation of show_password and hide_password props. Freeze and convertToSnakeCase can be removed in v11.\n  const props = convertSnakeCaseProps(Object.freeze(externalProps))\n\n  const [hidden, setHidden] = useState<boolean>(true)\n\n  const sharedContext = useContext(SharedContext)\n  const translations = sharedContext.translation.Forms\n\n  const ref = useRef<ElementRef<'input'>>(innerRef?.current ?? null)\n\n  const toggleVisibility = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      const { onShowPassword, onHidePassword } =\n        convertSnakeCaseProps(props)\n\n      const value = ref.current.value\n\n      setHidden((hidden) => {\n        hidden\n          ? onShowPassword?.({ ...event, value })\n          : onHidePassword?.({ ...event, value })\n\n        return !hidden\n      })\n\n      if (ref.current) {\n        ref.current.focus()\n      }\n    },\n    [props]\n  )\n\n  // Can be removed with v11, just used to make sure that the old show_password and hide_password are still backward compatible.\n  const getAriaLabel = useCallback(() => {\n    const { passwordShowLabel, passwordHideLabel } = translations\n\n    const ariaLabels = {\n      showPassword: passwordShowLabel,\n      hidePassword: passwordHideLabel,\n    }\n\n    if (externalProps.show_password) {\n      ariaLabels['showPassword'] = externalProps.show_password\n    }\n\n    if (externalProps.hide_password) {\n      ariaLabels['hidePassword'] = externalProps.hide_password\n    }\n\n    return ariaLabels\n  }, [\n    externalProps.show_password,\n    externalProps.hide_password,\n    translations,\n  ])\n\n  const ariaLabels = getAriaLabel()\n\n  const ToggleVisibilityButton = useCallback(() => {\n    return (\n      <SubmitButton\n        id={id + '-submit-button'}\n        type=\"button\"\n        variant=\"secondary\"\n        aria-controls={id}\n        aria-label={\n          hidden ? ariaLabels.showPassword : ariaLabels.hidePassword\n        }\n        icon={\n          size === 'large'\n            ? hidden\n              ? IconViewMedium\n              : IconViewOffMedium\n            : hidden\n            ? IconView\n            : IconViewOff\n        }\n        // status={hasError ? 'error' : undefined}\n        disabled={disabled}\n        skeleton={sharedContext.skeleton}\n        onClick={toggleVisibility}\n      />\n    )\n  }, [\n    id,\n    hidden,\n    sharedContext.skeleton,\n    disabled,\n    size,\n    toggleVisibility,\n    ariaLabels,\n  ])\n\n  return (\n    <StringField\n      id={id}\n      className={classnames('dnb-forms-field-password', className)}\n      label={label ?? sharedContext?.translation.Forms.passwordLabel}\n      type={hidden ? 'password' : 'text'}\n      value={value}\n      innerRef={ref}\n      aria-describedby={id + '-submit-button'}\n      submitElement={<ToggleVisibilityButton />}\n      disabled={disabled}\n      {...props}\n    />\n  )\n}\n\nexport default Password\n\nPassword._supportsSpacingProps = true\n"],"mappings":"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"}

package/extensions/forms/Field/Password/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Password';
+export * from './Password';

package/extensions/forms/Field/Password/index.js

@@ -0,0 +1,3 @@
+export { default } from './Password';
+export * from './Password';
+//# sourceMappingURL=index.js.map

package/extensions/forms/Field/Password/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../../src/extensions/forms/Field/Password/index.ts"],"sourcesContent":["export { default } from './Password'\nexport * from './Password'\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AACpC,cAAc,YAAY"}

package/extensions/forms/Field/Password/style/dnb-password.css

@@ -0,0 +1,6 @@
+.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button {
+  color: var(--color-fire-red);
+}
+.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button:hover {
+  color: var(--color-white);
+}

package/extensions/forms/Field/Password/style/dnb-password.min.css

@@ -0,0 +1 @@
+.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button{color:var(--color-fire-red)}.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button:hover{color:var(--color-white)}

package/extensions/forms/Field/Password/style/dnb-password.scss

@@ -0,0 +1,10 @@
+.dnb-forms-field-password {
+  // Make sure submit element recieves red text color on error.
+  .dnb-input__status--error .dnb-input__submit-button__button {
+    color: var(--color-fire-red);
+
+    &:hover {
+      color: var(--color-white);
+    }
+  }
+}

package/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js

@@ -24,10 +24,9 @@ function PostalCodeAndCity(props) {
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-postal-code-and-city', props.className)
   }, fieldBlockProps, {
-    width: width
-  }), React.createElement("div", {
-    className: 'dnb-forms-field-postal-code-and-city__fields'
-  }, React.createElement(StringField, _extends({}, postalCode, {
+    width: width,
+    composition: true
+  }), React.createElement(StringField, _extends({}, postalCode, {
     pattern: (_postalCode$pattern = postalCode.pattern) !== null && _postalCode$pattern !== void 0 ? _postalCode$pattern : '^[0-9]{4}$',
     mask: [/\d/, /\d/, /\d/, /\d/],
     className: classnames('dnb-forms-field-postal-code-and-city__postal-code', postalCode.className),
@@ -48,7 +47,7 @@ function PostalCodeAndCity(props) {
     }, city.errorMessages),
     width: "stretch",
     help: help
-  }))));
+  })));
 }
 PostalCodeAndCity._supportsSpacingProps = true;
 export default PostalCodeAndCity;

package/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldBlock","StringField","PostalCodeAndCity","props","_postalCode$pattern","_postalCode$label","_postalCode$placehold","_city$label","sharedContext","postalCode","city","help","width","fieldBlockProps","_objectWithoutProperties","_excluded","createElement","_extends","className","pattern","mask","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","inputMode","cityLabel","cityErrorRequired","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport { FieldHelpProps } from '../../types'\n\nexport type Props = FieldHelpProps &\n  Omit<FieldBlockProps, 'children'> &\n  Record<'postalCode' | 'city', StringFieldProps>\n\nfunction PostalCodeAndCity(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const {\n    postalCode = {},\n    city = {},\n    help,\n    width = 'large',\n    ...fieldBlockProps\n  } = props\n\n  return (\n    <FieldBlock\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldBlockProps}\n      width={width}\n    >\n      <div\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__fields'\n        )}\n      >\n        <StringField\n          {...postalCode}\n          pattern={postalCode.pattern ?? '^[0-9]{4}$'}\n          mask={[/\\d/, /\\d/, /\\d/, /\\d/]}\n          className={classnames(\n            'dnb-forms-field-postal-code-and-city__postal-code',\n            postalCode.className\n          )}\n          label={\n            postalCode.label ??\n            sharedContext?.translation.Forms.postalCodeLabel\n          }\n          errorMessages={{\n            required:\n              sharedContext?.translation.Forms.postalCodeErrorRequired,\n            pattern:\n              sharedContext?.translation.Forms.postalCodeErrorPattern,\n            ...postalCode.errorMessages,\n          }}\n          placeholder={postalCode.placeholder ?? '0000'}\n          width={false}\n          inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n          inputMode=\"numeric\"\n        />\n        <StringField\n          {...city}\n          className={classnames(\n            'dnb-forms-field-postal-code-and-city__city',\n            city.className\n          )}\n          label={city.label ?? sharedContext?.translation.Forms.cityLabel}\n          errorMessages={{\n            required: sharedContext?.translation.Forms.cityErrorRequired,\n            ...city.errorMessages,\n          }}\n          width=\"stretch\"\n          help={help}\n        />\n      </div>\n    </FieldBlock>\n  )\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,UAAU,MAAoC,kBAAkB;AACvE,OAAOC,WAAW,MAAqC,WAAW;AAOlE,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EAAA,IAAAC,mBAAA,EAAAC,iBAAA,EAAAC,qBAAA,EAAAC,WAAA;EACvC,MAAMC,aAAa,GAAGX,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAM;MACJU,UAAU,GAAG,CAAC,CAAC;MACfC,IAAI,GAAG,CAAC,CAAC;MACTC,IAAI;MACJC,KAAK,GAAG;IAEV,CAAC,GAAGT,KAAK;IADJU,eAAe,GAAAC,wBAAA,CAChBX,KAAK,EAAAY,SAAA;EAET,OACEnB,KAAA,CAAAoB,aAAA,CAAChB,UAAU,EAAAiB,QAAA;IACTC,SAAS,EAAEpB,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACe,SACR;EAAE,GACEL,eAAe;IACnBD,KAAK,EAAEA;EAAM,IAEbhB,KAAA,CAAAoB,aAAA;IACEE,SAAS,EACP;EACA,GAEFtB,KAAA,CAAAoB,aAAA,CAACf,WAAW,EAAAgB,QAAA,KACNR,UAAU;IACdU,OAAO,GAAAf,mBAAA,GAAEK,UAAU,CAACU,OAAO,cAAAf,mBAAA,cAAAA,mBAAA,GAAI,YAAa;IAC5CgB,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAE;IAC/BF,SAAS,EAAEpB,UAAU,CACnB,mDAAmD,EACnDW,UAAU,CAACS,SACb,CAAE;IACFG,KAAK,GAAAhB,iBAAA,GACHI,UAAU,CAACY,KAAK,cAAAhB,iBAAA,cAAAA,iBAAA,GAChBG,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACC,eAClC;IACDC,aAAa,EAAAC,aAAA;MACXC,QAAQ,EACNnB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACK,uBAAuB;MAC1DT,OAAO,EACLX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACM;IAAsB,GACtDpB,UAAU,CAACgB,aAAa,CAC3B;IACFK,WAAW,GAAAxB,qBAAA,GAAEG,UAAU,CAACqB,WAAW,cAAAxB,qBAAA,cAAAA,qBAAA,GAAI,MAAO;IAC9CM,KAAK,EAAE,KAAM;IACbmB,cAAc,EAAC,yDAAyD;IACxEC,SAAS,EAAC;EAAS,EACpB,CAAC,EACFpC,KAAA,CAAAoB,aAAA,CAACf,WAAW,EAAAgB,QAAA,KACNP,IAAI;IACRQ,SAAS,EAAEpB,UAAU,CACnB,4CAA4C,EAC5CY,IAAI,CAACQ,SACP,CAAE;IACFG,KAAK,GAAAd,WAAA,GAAEG,IAAI,CAACW,KAAK,cAAAd,WAAA,cAAAA,WAAA,GAAIC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACU,SAAU;IAChER,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAEnB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACW;IAAiB,GACzDxB,IAAI,CAACe,aAAa,CACrB;IACFb,KAAK,EAAC,SAAS;IACfD,IAAI,EAAEA;EAAK,EACZ,CACE,CACK,CAAC;AAEjB;AAEAT,iBAAiB,CAACiC,qBAAqB,GAAG,IAAI;AAC9C,eAAejC,iBAAiB"}
+{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldBlock","StringField","PostalCodeAndCity","props","_postalCode$pattern","_postalCode$label","_postalCode$placehold","_city$label","sharedContext","postalCode","city","help","width","fieldBlockProps","_objectWithoutProperties","_excluded","createElement","_extends","className","composition","pattern","mask","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","inputMode","cityLabel","cityErrorRequired","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport { FieldHelpProps } from '../../types'\n\nexport type Props = FieldHelpProps &\n  Omit<FieldBlockProps, 'children'> &\n  Record<'postalCode' | 'city', StringFieldProps>\n\nfunction PostalCodeAndCity(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const {\n    postalCode = {},\n    city = {},\n    help,\n    width = 'large',\n    ...fieldBlockProps\n  } = props\n\n  return (\n    <FieldBlock\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldBlockProps}\n      width={width}\n      composition\n    >\n      <StringField\n        {...postalCode}\n        pattern={postalCode.pattern ?? '^[0-9]{4}$'}\n        mask={[/\\d/, /\\d/, /\\d/, /\\d/]}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__postal-code',\n          postalCode.className\n        )}\n        label={\n          postalCode.label ??\n          sharedContext?.translation.Forms.postalCodeLabel\n        }\n        errorMessages={{\n          required:\n            sharedContext?.translation.Forms.postalCodeErrorRequired,\n          pattern: sharedContext?.translation.Forms.postalCodeErrorPattern,\n          ...postalCode.errorMessages,\n        }}\n        placeholder={postalCode.placeholder ?? '0000'}\n        width={false}\n        inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        inputMode=\"numeric\"\n      />\n      <StringField\n        {...city}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__city',\n          city.className\n        )}\n        label={city.label ?? sharedContext?.translation.Forms.cityLabel}\n        errorMessages={{\n          required: sharedContext?.translation.Forms.cityErrorRequired,\n          ...city.errorMessages,\n        }}\n        width=\"stretch\"\n        help={help}\n      />\n    </FieldBlock>\n  )\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,UAAU,MAAoC,kBAAkB;AACvE,OAAOC,WAAW,MAAqC,WAAW;AAOlE,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EAAA,IAAAC,mBAAA,EAAAC,iBAAA,EAAAC,qBAAA,EAAAC,WAAA;EACvC,MAAMC,aAAa,GAAGX,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAM;MACJU,UAAU,GAAG,CAAC,CAAC;MACfC,IAAI,GAAG,CAAC,CAAC;MACTC,IAAI;MACJC,KAAK,GAAG;IAEV,CAAC,GAAGT,KAAK;IADJU,eAAe,GAAAC,wBAAA,CAChBX,KAAK,EAAAY,SAAA;EAET,OACEnB,KAAA,CAAAoB,aAAA,CAAChB,UAAU,EAAAiB,QAAA;IACTC,SAAS,EAAEpB,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACe,SACR;EAAE,GACEL,eAAe;IACnBD,KAAK,EAAEA,KAAM;IACbO,WAAW;EAAA,IAEXvB,KAAA,CAAAoB,aAAA,CAACf,WAAW,EAAAgB,QAAA,KACNR,UAAU;IACdW,OAAO,GAAAhB,mBAAA,GAAEK,UAAU,CAACW,OAAO,cAAAhB,mBAAA,cAAAA,mBAAA,GAAI,YAAa;IAC5CiB,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAE;IAC/BH,SAAS,EAAEpB,UAAU,CACnB,mDAAmD,EACnDW,UAAU,CAACS,SACb,CAAE;IACFI,KAAK,GAAAjB,iBAAA,GACHI,UAAU,CAACa,KAAK,cAAAjB,iBAAA,cAAAA,iBAAA,GAChBG,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACC,eAClC;IACDC,aAAa,EAAAC,aAAA;MACXC,QAAQ,EACNpB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACK,uBAAuB;MAC1DT,OAAO,EAAEZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACM;IAAsB,GAC7DrB,UAAU,CAACiB,aAAa,CAC3B;IACFK,WAAW,GAAAzB,qBAAA,GAAEG,UAAU,CAACsB,WAAW,cAAAzB,qBAAA,cAAAA,qBAAA,GAAI,MAAO;IAC9CM,KAAK,EAAE,KAAM;IACboB,cAAc,EAAC,yDAAyD;IACxEC,SAAS,EAAC;EAAS,EACpB,CAAC,EACFrC,KAAA,CAAAoB,aAAA,CAACf,WAAW,EAAAgB,QAAA,KACNP,IAAI;IACRQ,SAAS,EAAEpB,UAAU,CACnB,4CAA4C,EAC5CY,IAAI,CAACQ,SACP,CAAE;IACFI,KAAK,GAAAf,WAAA,GAAEG,IAAI,CAACY,KAAK,cAAAf,WAAA,cAAAA,WAAA,GAAIC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACU,SAAU;IAChER,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAEpB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACW;IAAiB,GACzDzB,IAAI,CAACgB,aAAa,CACrB;IACFd,KAAK,EAAC,SAAS;IACfD,IAAI,EAAEA;EAAK,EACZ,CACS,CAAC;AAEjB;AAEAT,iBAAiB,CAACkC,qBAAqB,GAAG,IAAI;AAC9C,eAAelC,iBAAiB"}

package/extensions/forms/Field/PostalCodeAndCity/style/dnb-postal-code-and-city.css

@@ -1,18 +1,6 @@
 /*
  * Utilities
  */
-.dnb-forms-field-postal-code-and-city__fields {
-  display: flex;
-  flex-flow: row;
-  -moz-column-gap: var(--spacing-small);
-       column-gap: var(--spacing-small);
-}
-@media screen and (max-width: 25em) {
-  .dnb-forms-field-postal-code-and-city__fields {
-    row-gap: var(--spacing-x-small);
-    flex-flow: column;
-  }
-}
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;
 }

package/extensions/forms/Field/PostalCodeAndCity/style/dnb-postal-code-and-city.min.css

@@ -1 +1 @@
-.dnb-forms-field-postal-code-and-city__fields{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (max-width:25em){.dnb-forms-field-postal-code-and-city__fields{flex-flow:column;row-gap:var(--spacing-x-small)}}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}
+.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}

package/extensions/forms/Field/PostalCodeAndCity/style/dnb-postal-code-and-city.scss

@@ -1,17 +1,6 @@
 @import '../../../../../style/core/utilities.scss';
 
 .dnb-forms-field-postal-code-and-city {
-  &__fields {
-    display: flex;
-    flex-flow: row;
-    column-gap: var(--spacing-small);
-
-    @include allBelow(x-small) {
-      row-gap: var(--spacing-x-small);
-      flex-flow: column;
-    }
-  }
-
   &__postal-code {
     flex: 0 5rem;
   }

package/extensions/forms/Field/Selection/Selection.d.ts

@@ -9,7 +9,6 @@ interface IOption {
 export type Props = FieldHelpProps & FieldProps<IOption['value']> & {
     children?: React.ReactNode;
     variant?: 'dropdown' | 'radio' | 'button';
-    clear?: boolean;
     optionsLayout?: 'horizontal' | 'vertical';
     width?: 'small' | 'medium' | 'large' | 'stretch';
 };