@dnb/eufemia 10.15.0 → 10.16.0

package/es/extensions/forms/Field/Email/Email.js

@@ -7,17 +7,19 @@ import React, { useContext, useMemo } from 'react';
 import StringComponent from '../String';
 import SharedContext from '../../../../shared/Context';
 function Email(props) {
-  var _props$type, _props$pattern, _props$label;
   const sharedContext = useContext(SharedContext);
   const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
   const errorMessages = useMemo(() => _objectSpread({
     required: tr.emailErrorRequired,
     pattern: tr.emailErrorPattern
   }, props.errorMessages), [tr, props.errorMessages]);
-  const stringComponentProps = _objectSpread(_objectSpread({}, props), {}, {
-    type: (_props$type = props.type) !== null && _props$type !== void 0 ? _props$type : 'email',
-    pattern: (_props$pattern = props.pattern) !== null && _props$pattern !== void 0 ? _props$pattern : "^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$",
-    label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.emailLabel,
+  const stringComponentProps = _objectSpread(_objectSpread({
+    label: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.emailLabel,
+    autoComplete: 'email',
+    inputMode: 'email',
+    pattern: "^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$",
+    trim: true
+  }, props), {}, {
     errorMessages
   });
   return React.createElement(StringComponent, stringComponentProps);

package/es/extensions/forms/Field/Email/Email.js.map

@@ -1 +1 @@
-{"version":3,"file":"Email.js","names":["React","useContext","useMemo","StringComponent","SharedContext","Email","props","_props$type","_props$pattern","_props$label","sharedContext","tr","translation","Forms","errorMessages","_objectSpread","required","emailErrorRequired","pattern","emailErrorPattern","stringComponentProps","type","label","emailLabel","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Email/Email.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport StringComponent, { Props as StringComponentProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringComponentProps\n\nfunction Email(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.emailErrorRequired,\n      pattern: tr.emailErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const stringComponentProps: Props = {\n    ...props,\n    type: props.type ?? 'email',\n    pattern:\n      props.pattern ??\n      \"^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$\",\n    label: props.label ?? sharedContext?.translation.Forms.emailLabel,\n    errorMessages,\n  }\n\n  return <StringComponent {...stringComponentProps} />\n}\n\nEmail._supportsSpacingProps = true\nexport default Email\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,eAAe,MAAyC,WAAW;AAC1E,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,KAAKA,CAACC,KAAY,EAAE;EAAA,IAAAC,WAAA,EAAAC,cAAA,EAAAC,YAAA;EAC3B,MAAMC,aAAa,GAAGT,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAMO,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAE3C,MAAMC,aAAa,GAAGZ,OAAO,CAC3B,MAAAa,aAAA;IACEC,QAAQ,EAAEL,EAAE,CAACM,kBAAkB;IAC/BC,OAAO,EAAEP,EAAE,CAACQ;EAAiB,GAC1Bb,KAAK,CAACQ,aAAa,CACtB,EACF,CAACH,EAAE,EAAEL,KAAK,CAACQ,aAAa,CAC1B,CAAC;EAED,MAAMM,oBAA2B,GAAAL,aAAA,CAAAA,aAAA,KAC5BT,KAAK;IACRe,IAAI,GAAAd,WAAA,GAAED,KAAK,CAACe,IAAI,cAAAd,WAAA,cAAAA,WAAA,GAAI,OAAO;IAC3BW,OAAO,GAAAV,cAAA,GACLF,KAAK,CAACY,OAAO,cAAAV,cAAA,cAAAA,cAAA,GACb,qEAAqE;IACvEc,KAAK,GAAAb,YAAA,GAAEH,KAAK,CAACgB,KAAK,cAAAb,YAAA,cAAAA,YAAA,GAAIC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACU,UAAU;IACjET;EAAa,EACd;EAED,OAAOd,KAAA,CAAAwB,aAAA,CAACrB,eAAe,EAAKiB,oBAAuB,CAAC;AACtD;AAEAf,KAAK,CAACoB,qBAAqB,GAAG,IAAI;AAClC,eAAepB,KAAK"}
+{"version":3,"file":"Email.js","names":["React","useContext","useMemo","StringComponent","SharedContext","Email","props","sharedContext","tr","translation","Forms","errorMessages","_objectSpread","required","emailErrorRequired","pattern","emailErrorPattern","stringComponentProps","label","emailLabel","autoComplete","inputMode","trim","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Email/Email.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport StringComponent, { Props as StringComponentProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringComponentProps\n\nfunction Email(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.emailErrorRequired,\n      pattern: tr.emailErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const stringComponentProps: Props = {\n    label: sharedContext?.translation.Forms.emailLabel,\n    autoComplete: 'email',\n    inputMode: 'email',\n    pattern:\n      \"^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$\",\n    trim: true,\n    ...props,\n    errorMessages,\n  }\n\n  return <StringComponent {...stringComponentProps} />\n}\n\nEmail._supportsSpacingProps = true\nexport default Email\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,eAAe,MAAyC,WAAW;AAC1E,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,KAAKA,CAACC,KAAY,EAAE;EAC3B,MAAMC,aAAa,GAAGN,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAMI,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAE3C,MAAMC,aAAa,GAAGT,OAAO,CAC3B,MAAAU,aAAA;IACEC,QAAQ,EAAEL,EAAE,CAACM,kBAAkB;IAC/BC,OAAO,EAAEP,EAAE,CAACQ;EAAiB,GAC1BV,KAAK,CAACK,aAAa,CACtB,EACF,CAACH,EAAE,EAAEF,KAAK,CAACK,aAAa,CAC1B,CAAC;EAED,MAAMM,oBAA2B,GAAAL,aAAA,CAAAA,aAAA;IAC/BM,KAAK,EAAEX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACS,UAAU;IAClDC,YAAY,EAAE,OAAO;IACrBC,SAAS,EAAE,OAAO;IAClBN,OAAO,EACL,qEAAqE;IACvEO,IAAI,EAAE;EAAI,GACPhB,KAAK;IACRK;EAAa,EACd;EAED,OAAOX,KAAA,CAAAuB,aAAA,CAACpB,eAAe,EAAKc,oBAAuB,CAAC;AACtD;AAEAZ,KAAK,CAACmB,qBAAqB,GAAG,IAAI;AAClC,eAAenB,KAAK"}

package/es/extensions/forms/Field/Expiry/Expiry.js

@@ -14,7 +14,7 @@ import FieldBlock from '../../FieldBlock';
 import { MultiInputMask } from '../../../../components/input-masked';
 import { HelpButton } from '../../../../components';
 function Expiry(props) {
-  var _value$substring, _value$substring2;
+  var _value$substring;
   const sharedContext = useContext(SharedContext);
   const placeholders = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.DatePicker.placeholder_characters;
   const {
@@ -38,8 +38,8 @@ function Expiry(props) {
     emptyValue: ''
   }));
   const expiry = {
-    month: (_value$substring = value.substring(0, 2)) !== null && _value$substring !== void 0 ? _value$substring : '',
-    year: (_value$substring2 = value.substring(2, 4)) !== null && _value$substring2 !== void 0 ? _value$substring2 : ''
+    month: ensureValidMonth(value === null || value === void 0 ? void 0 : value.substring(0, 2)),
+    year: (_value$substring = value === null || value === void 0 ? void 0 : value.substring(2, 4)) !== null && _value$substring !== void 0 ? _value$substring : ''
   };
   const idRef = useRef(propsId || makeUniqueId()).current;
   const status = error ? 'error' : warning ? 'warn' : info ? 'info' : null;
@@ -64,10 +64,11 @@ function Expiry(props) {
     onBlur: handleBlur,
     onFocus: handleFocus,
     delimiter: "/",
+    inputMode: "numeric",
     inputs: [{
       id: 'month',
       label: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.DatePicker['month'],
-      mask: [/[0-1]/, expiry.month.charAt(0) === '0' || expiry.month.charAt(0) === '' ? /[1-9]/ : /[0-2]/],
+      mask: getMonthMask(expiry === null || expiry === void 0 ? void 0 : expiry.month),
       placeholderCharacter: placeholders['month'],
       autoComplete: 'cc-exp-month'
     }, {
@@ -84,6 +85,27 @@ function Expiry(props) {
   function expiryToString(values) {
     return Object.values(values).join('');
   }
+  function ensureValidMonth(month) {
+    if (!month) {
+      return '';
+    }
+    const [firstMask, secondMask] = getMonthMask(month);
+    const firstDigit = month === null || month === void 0 ? void 0 : month.charAt(0);
+    const isFirstDigitValid = firstMask.test(firstDigit);
+    if (firstDigit && !isFirstDigitValid) {
+      return '';
+    }
+    const seconDigit = month === null || month === void 0 ? void 0 : month.charAt(1);
+    const isSecondDigitValid = secondMask.test(seconDigit);
+    if (seconDigit && !isSecondDigitValid) {
+      return '';
+    }
+    return month;
+  }
+  function getMonthMask(month) {
+    const firstDigit = month === null || month === void 0 ? void 0 : month.charAt(0);
+    return [/[0-1]/, firstDigit === '0' || firstDigit === '' ? /[1-9]/ : /[0-2]/];
+  }
 }
 Expiry._supportsEufemiaSpacingProps = true;
 export default Expiry;

package/es/extensions/forms/Field/Expiry/Expiry.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expiry.js","names":["React","useContext","useRef","makeUniqueId","SharedContext","pickSpacingProps","useDataValue","classnames","FieldBlock","MultiInputMask","HelpButton","Expiry","props","_value$substring","_value$substring2","sharedContext","placeholders","translation","DatePicker","placeholder_characters","id","propsId","className","label","Forms","expiryLabel","error","info","warning","help","disabled","value","labelDescription","labelSecondary","layout","required","handleFocus","handleBlur","handleChange","_objectSpread","emptyValue","expiry","month","substring","year","idRef","current","status","createElement","_extends","stretch","labelDirection","values","statusState","undefined","onChange","expiryToString","onBlur","onFocus","delimiter","inputs","mask","charAt","placeholderCharacter","autoComplete","suffix","title","contents","Object","join","_supportsEufemiaSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Expiry/Expiry.tsx"],"sourcesContent":["import React, { useContext, useRef } from 'react'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport SharedContext from '../../../../shared/Context'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { useDataValue } from '../../hooks'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { MultiInputMask } from '../../../../components/input-masked'\nimport type { MultiInputMaskValue } from '../../../../components/input-masked'\nimport { HelpButton } from '../../../../components'\n\ntype ExpiryValue = MultiInputMaskValue<'month' | 'year'>\n\nexport type ExpiryProps = FieldProps<string> & FieldHelpProps\n\nfunction Expiry(props: ExpiryProps) {\n  const sharedContext = useContext(SharedContext)\n  const placeholders =\n    sharedContext?.translation.DatePicker.placeholder_characters\n\n  const {\n    id: propsId,\n    className,\n    label = sharedContext?.translation.Forms.expiryLabel,\n    error,\n    info,\n    warning,\n    help,\n    disabled,\n    value = '',\n    labelDescription,\n    labelSecondary,\n    layout = 'vertical',\n    required,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue({\n    ...props,\n    emptyValue: '',\n  })\n\n  const expiry: ExpiryValue = {\n    month: value.substring(0, 2) ?? '',\n    year: value.substring(2, 4) ?? '',\n  }\n\n  const idRef = useRef(propsId || makeUniqueId()).current\n\n  const status = error ? 'error' : warning ? 'warn' : info ? 'info' : null\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-expiry', className)}\n      labelSecondary={labelSecondary}\n      labelDescription={labelDescription}\n      info={info}\n      warning={warning}\n      error={error}\n      {...pickSpacingProps(props)}\n    >\n      <MultiInputMask\n        stretch\n        id={`${idRef}__input`}\n        label={label}\n        labelDirection={layout}\n        values={expiry}\n        status={status}\n        statusState={disabled ? 'disabled' : undefined}\n        disabled={disabled}\n        required={required}\n        onChange={(expiry) => handleChange(expiryToString(expiry))}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        delimiter=\"/\"\n        inputs={[\n          {\n            id: 'month',\n            label: sharedContext?.translation.DatePicker['month'],\n            mask: [\n              /[0-1]/,\n              expiry.month.charAt(0) === '0' ||\n              expiry.month.charAt(0) === ''\n                ? /[1-9]/\n                : /[0-2]/,\n            ],\n            placeholderCharacter: placeholders['month'],\n            autoComplete: 'cc-exp-month',\n          },\n          {\n            id: 'year',\n            label: sharedContext?.translation.DatePicker['year'],\n            mask: [/[0-9]/, /[0-9]/],\n            placeholderCharacter: placeholders['year'],\n            autoComplete: 'cc-exp-year',\n          },\n        ]}\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.contents}</HelpButton>\n          ) : undefined\n        }\n      />\n    </FieldBlock>\n  )\n\n  function expiryToString(values: ExpiryValue) {\n    return Object.values(values).join('')\n  }\n}\n\nExpiry._supportsEufemiaSpacingProps = true\nexport default Expiry\n"],"mappings":"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"}
+{"version":3,"file":"Expiry.js","names":["React","useContext","useRef","makeUniqueId","SharedContext","pickSpacingProps","useDataValue","classnames","FieldBlock","MultiInputMask","HelpButton","Expiry","props","_value$substring","sharedContext","placeholders","translation","DatePicker","placeholder_characters","id","propsId","className","label","Forms","expiryLabel","error","info","warning","help","disabled","value","labelDescription","labelSecondary","layout","required","handleFocus","handleBlur","handleChange","_objectSpread","emptyValue","expiry","month","ensureValidMonth","substring","year","idRef","current","status","createElement","_extends","stretch","labelDirection","values","statusState","undefined","onChange","expiryToString","onBlur","onFocus","delimiter","inputMode","inputs","mask","getMonthMask","placeholderCharacter","autoComplete","suffix","title","contents","Object","join","firstMask","secondMask","firstDigit","charAt","isFirstDigitValid","test","seconDigit","isSecondDigitValid","_supportsEufemiaSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Expiry/Expiry.tsx"],"sourcesContent":["import React, { useContext, useRef } from 'react'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport SharedContext from '../../../../shared/Context'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { useDataValue } from '../../hooks'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { MultiInputMask } from '../../../../components/input-masked'\nimport type { MultiInputMaskValue } from '../../../../components/input-masked'\nimport { HelpButton } from '../../../../components'\n\ntype ExpiryValue = MultiInputMaskValue<'month' | 'year'>\n\nexport type ExpiryProps = FieldProps<string> & FieldHelpProps\n\nfunction Expiry(props: ExpiryProps) {\n  const sharedContext = useContext(SharedContext)\n  const placeholders =\n    sharedContext?.translation.DatePicker.placeholder_characters\n\n  const {\n    id: propsId,\n    className,\n    label = sharedContext?.translation.Forms.expiryLabel,\n    error,\n    info,\n    warning,\n    help,\n    disabled,\n    value = '',\n    labelDescription,\n    labelSecondary,\n    layout = 'vertical',\n    required,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue({\n    ...props,\n    emptyValue: '',\n  })\n\n  const expiry: ExpiryValue = {\n    month: ensureValidMonth(value?.substring(0, 2)),\n    year: value?.substring(2, 4) ?? '',\n  }\n\n  const idRef = useRef(propsId || makeUniqueId()).current\n\n  const status = error ? 'error' : warning ? 'warn' : info ? 'info' : null\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-expiry', className)}\n      labelSecondary={labelSecondary}\n      labelDescription={labelDescription}\n      info={info}\n      warning={warning}\n      error={error}\n      {...pickSpacingProps(props)}\n    >\n      <MultiInputMask\n        stretch\n        id={`${idRef}__input`}\n        label={label}\n        labelDirection={layout}\n        values={expiry}\n        status={status}\n        statusState={disabled ? 'disabled' : undefined}\n        disabled={disabled}\n        required={required}\n        onChange={(expiry) => handleChange(expiryToString(expiry))}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        delimiter=\"/\"\n        inputMode=\"numeric\"\n        inputs={[\n          {\n            id: 'month',\n            label: sharedContext?.translation.DatePicker['month'],\n            mask: getMonthMask(expiry?.month),\n            placeholderCharacter: placeholders['month'],\n            autoComplete: 'cc-exp-month',\n          },\n          {\n            id: 'year',\n            label: sharedContext?.translation.DatePicker['year'],\n            mask: [/[0-9]/, /[0-9]/],\n            placeholderCharacter: placeholders['year'],\n            autoComplete: 'cc-exp-year',\n          },\n        ]}\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.contents}</HelpButton>\n          ) : undefined\n        }\n      />\n    </FieldBlock>\n  )\n\n  function expiryToString(values: ExpiryValue) {\n    return Object.values(values).join('')\n  }\n\n  function ensureValidMonth(month: string) {\n    // Return empty value if no month is given\n    if (!month) {\n      return ''\n    }\n\n    const [firstMask, secondMask] = getMonthMask(month)\n\n    const firstDigit = month?.charAt(0)\n    const isFirstDigitValid = firstMask.test(firstDigit)\n\n    if (firstDigit && !isFirstDigitValid) {\n      // Return empty value if the first digit is invalid\n      return ''\n    }\n\n    const seconDigit = month?.charAt(1)\n    const isSecondDigitValid = secondMask.test(seconDigit)\n\n    if (seconDigit && !isSecondDigitValid) {\n      // Return empty value if the second digit is invalid\n      return ''\n    }\n\n    // Return given month of month value is valid\n    return month\n  }\n\n  function getMonthMask(month: string) {\n    const firstDigit = month?.charAt(0)\n\n    return [\n      /[0-1]/,\n      firstDigit === '0' || firstDigit === '' ? /[1-9]/ : /[0-2]/,\n    ]\n  }\n}\n\nExpiry._supportsEufemiaSpacingProps = true\nexport default Expiry\n"],"mappings":"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"}

package/es/extensions/forms/Field/NationalIdentityNumber/NationalIdentityNumber.js

@@ -25,7 +25,8 @@ function NationalIdentityNumber(props) {
     label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.nationalIdentityNumberLabel,
     errorMessages,
     mask,
-    width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'medium'
+    width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'medium',
+    inputMode: 'numeric'
   });
   return React.createElement(StringComponent, stringComponentProps);
 }

package/es/extensions/forms/Field/NationalIdentityNumber/NationalIdentityNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"NationalIdentityNumber.js","names":["React","useContext","useMemo","StringComponent","SharedContext","NationalIdentityNumber","props","_props$pattern","_props$label","_props$width","sharedContext","tr","translation","Forms","errorMessage","nationalIdentityNumberErrorRequired","validate","omitMask","errorMessages","_objectSpread","required","pattern","mask","Array","fill","stringComponentProps","validator","undefined","label","nationalIdentityNumberLabel","width","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/NationalIdentityNumber/NationalIdentityNumber.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport StringComponent, { Props as StringComponentProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringComponentProps & {\n  omitMask?: boolean\n  validate?: boolean\n}\n\nfunction NationalIdentityNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n  const errorMessage = tr.nationalIdentityNumberErrorRequired\n\n  const { validate = true, omitMask } = props\n\n  const errorMessages = useMemo(\n    () => ({\n      required: errorMessage,\n      pattern: errorMessage,\n      ...props.errorMessages,\n    }),\n    [errorMessage, props.errorMessages]\n  )\n  const mask = useMemo(\n    () =>\n      omitMask\n        ? Array(11).fill(/\\d/)\n        : [\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n          ],\n    [omitMask]\n  )\n\n  const stringComponentProps: Props = {\n    ...props,\n    pattern:\n      props.pattern ??\n      (validate && !props.validator ? '^[0-9]{11}$' : undefined),\n    label:\n      props.label ??\n      sharedContext?.translation.Forms.nationalIdentityNumberLabel,\n    errorMessages,\n    mask,\n    width: props.width ?? 'medium',\n  }\n\n  return <StringComponent {...stringComponentProps} />\n}\n\nNationalIdentityNumber._supportsSpacingProps = true\nexport default NationalIdentityNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,eAAe,MAAyC,WAAW;AAC1E,OAAOC,aAAa,MAAM,4BAA4B;AAOtD,SAASC,sBAAsBA,CAACC,KAAY,EAAE;EAAA,IAAAC,cAAA,EAAAC,YAAA,EAAAC,YAAA;EAC5C,MAAMC,aAAa,GAAGT,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAMO,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAC3C,MAAMC,YAAY,GAAGH,EAAE,CAACI,mCAAmC;EAE3D,MAAM;IAAEC,QAAQ,GAAG,IAAI;IAAEC;EAAS,CAAC,GAAGX,KAAK;EAE3C,MAAMY,aAAa,GAAGhB,OAAO,CAC3B,MAAAiB,aAAA;IACEC,QAAQ,EAAEN,YAAY;IACtBO,OAAO,EAAEP;EAAY,GAClBR,KAAK,CAACY,aAAa,CACtB,EACF,CAACJ,YAAY,EAAER,KAAK,CAACY,aAAa,CACpC,CAAC;EACD,MAAMI,IAAI,GAAGpB,OAAO,CAClB,MACEe,QAAQ,GACJM,KAAK,CAAC,EAAE,CAAC,CAACC,IAAI,CAAC,IAAI,CAAC,GACpB,CACE,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,CACL,EACP,CAACP,QAAQ,CACX,CAAC;EAED,MAAMQ,oBAA2B,GAAAN,aAAA,CAAAA,aAAA,KAC5Bb,KAAK;IACRe,OAAO,GAAAd,cAAA,GACLD,KAAK,CAACe,OAAO,cAAAd,cAAA,cAAAA,cAAA,GACZS,QAAQ,IAAI,CAACV,KAAK,CAACoB,SAAS,GAAG,aAAa,GAAGC,SAAU;IAC5DC,KAAK,GAAApB,YAAA,GACHF,KAAK,CAACsB,KAAK,cAAApB,YAAA,cAAAA,YAAA,GACXE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACgB,2BAA2B;IAC9DX,aAAa;IACbI,IAAI;IACJQ,KAAK,GAAArB,YAAA,GAAEH,KAAK,CAACwB,KAAK,cAAArB,YAAA,cAAAA,YAAA,GAAI;EAAQ,EAC/B;EAED,OAAOT,KAAA,CAAA+B,aAAA,CAAC5B,eAAe,EAAKsB,oBAAuB,CAAC;AACtD;AAEApB,sBAAsB,CAAC2B,qBAAqB,GAAG,IAAI;AACnD,eAAe3B,sBAAsB"}
+{"version":3,"file":"NationalIdentityNumber.js","names":["React","useContext","useMemo","StringComponent","SharedContext","NationalIdentityNumber","props","_props$pattern","_props$label","_props$width","sharedContext","tr","translation","Forms","errorMessage","nationalIdentityNumberErrorRequired","validate","omitMask","errorMessages","_objectSpread","required","pattern","mask","Array","fill","stringComponentProps","validator","undefined","label","nationalIdentityNumberLabel","width","inputMode","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/NationalIdentityNumber/NationalIdentityNumber.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport StringComponent, { Props as StringComponentProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringComponentProps & {\n  omitMask?: boolean\n  validate?: boolean\n}\n\nfunction NationalIdentityNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n  const errorMessage = tr.nationalIdentityNumberErrorRequired\n\n  const { validate = true, omitMask } = props\n\n  const errorMessages = useMemo(\n    () => ({\n      required: errorMessage,\n      pattern: errorMessage,\n      ...props.errorMessages,\n    }),\n    [errorMessage, props.errorMessages]\n  )\n  const mask = useMemo(\n    () =>\n      omitMask\n        ? Array(11).fill(/\\d/)\n        : [\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n          ],\n    [omitMask]\n  )\n\n  const stringComponentProps: Props = {\n    ...props,\n    pattern:\n      props.pattern ??\n      (validate && !props.validator ? '^[0-9]{11}$' : undefined),\n    label:\n      props.label ??\n      sharedContext?.translation.Forms.nationalIdentityNumberLabel,\n    errorMessages,\n    mask,\n    width: props.width ?? 'medium',\n    inputMode: 'numeric',\n  }\n\n  return <StringComponent {...stringComponentProps} />\n}\n\nNationalIdentityNumber._supportsSpacingProps = true\nexport default NationalIdentityNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,eAAe,MAAyC,WAAW;AAC1E,OAAOC,aAAa,MAAM,4BAA4B;AAOtD,SAASC,sBAAsBA,CAACC,KAAY,EAAE;EAAA,IAAAC,cAAA,EAAAC,YAAA,EAAAC,YAAA;EAC5C,MAAMC,aAAa,GAAGT,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAMO,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAC3C,MAAMC,YAAY,GAAGH,EAAE,CAACI,mCAAmC;EAE3D,MAAM;IAAEC,QAAQ,GAAG,IAAI;IAAEC;EAAS,CAAC,GAAGX,KAAK;EAE3C,MAAMY,aAAa,GAAGhB,OAAO,CAC3B,MAAAiB,aAAA;IACEC,QAAQ,EAAEN,YAAY;IACtBO,OAAO,EAAEP;EAAY,GAClBR,KAAK,CAACY,aAAa,CACtB,EACF,CAACJ,YAAY,EAAER,KAAK,CAACY,aAAa,CACpC,CAAC;EACD,MAAMI,IAAI,GAAGpB,OAAO,CAClB,MACEe,QAAQ,GACJM,KAAK,CAAC,EAAE,CAAC,CAACC,IAAI,CAAC,IAAI,CAAC,GACpB,CACE,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,CACL,EACP,CAACP,QAAQ,CACX,CAAC;EAED,MAAMQ,oBAA2B,GAAAN,aAAA,CAAAA,aAAA,KAC5Bb,KAAK;IACRe,OAAO,GAAAd,cAAA,GACLD,KAAK,CAACe,OAAO,cAAAd,cAAA,cAAAA,cAAA,GACZS,QAAQ,IAAI,CAACV,KAAK,CAACoB,SAAS,GAAG,aAAa,GAAGC,SAAU;IAC5DC,KAAK,GAAApB,YAAA,GACHF,KAAK,CAACsB,KAAK,cAAApB,YAAA,cAAAA,YAAA,GACXE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACgB,2BAA2B;IAC9DX,aAAa;IACbI,IAAI;IACJQ,KAAK,GAAArB,YAAA,GAAEH,KAAK,CAACwB,KAAK,cAAArB,YAAA,cAAAA,YAAA,GAAI,QAAQ;IAC9BsB,SAAS,EAAE;EAAS,EACrB;EAED,OAAO/B,KAAA,CAAAgC,aAAA,CAAC7B,eAAe,EAAKsB,oBAAuB,CAAC;AACtD;AAEApB,sBAAsB,CAAC4B,qBAAqB,GAAG,IAAI;AACnD,eAAe5B,sBAAsB"}

package/es/extensions/forms/Field/OrganizationNumber/OrganizationNumber.js

@@ -25,7 +25,8 @@ function OrganizationNumber(props) {
     label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.organizationNumberLabel,
     errorMessages,
     mask,
-    width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'medium'
+    width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'medium',
+    inputMode: 'numeric'
   });
   return React.createElement(StringComponent, stringComponentProps);
 }

package/es/extensions/forms/Field/OrganizationNumber/OrganizationNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrganizationNumber.js","names":["React","useContext","useMemo","StringComponent","SharedContext","OrganizationNumber","props","_props$pattern","_props$label","_props$width","sharedContext","tr","translation","Forms","validate","omitMask","errorMessages","_objectSpread","required","organizationNumberErrorRequired","pattern","organizationNumberErrorPattern","mask","stringComponentProps","className","undefined","label","organizationNumberLabel","width","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/OrganizationNumber/OrganizationNumber.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport StringComponent, { Props as StringComponentProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringComponentProps & {\n  validate?: boolean\n  omitMask?: boolean\n}\n\nfunction OrganizationNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const { validate = true, omitMask } = props\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.organizationNumberErrorRequired,\n      pattern: tr.organizationNumberErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n  const mask = useMemo(\n    () =>\n      omitMask\n        ? [/\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/]\n        : [/\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/],\n    [omitMask]\n  )\n\n  const stringComponentProps: Props = {\n    ...props,\n    className: 'dnb-forms-field-organization-number',\n    pattern: props.pattern ?? (validate ? '^[0-9]{9}$' : undefined),\n    label:\n      props.label ??\n      sharedContext?.translation.Forms.organizationNumberLabel,\n    errorMessages,\n    mask,\n    width: props.width ?? 'medium',\n  }\n\n  return <StringComponent {...stringComponentProps} />\n}\n\nOrganizationNumber._supportsSpacingProps = true\nexport default OrganizationNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,eAAe,MAAyC,WAAW;AAC1E,OAAOC,aAAa,MAAM,4BAA4B;AAOtD,SAASC,kBAAkBA,CAACC,KAAY,EAAE;EAAA,IAAAC,cAAA,EAAAC,YAAA,EAAAC,YAAA;EACxC,MAAMC,aAAa,GAAGT,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAMO,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAE3C,MAAM;IAAEC,QAAQ,GAAG,IAAI;IAAEC;EAAS,CAAC,GAAGT,KAAK;EAE3C,MAAMU,aAAa,GAAGd,OAAO,CAC3B,MAAAe,aAAA;IACEC,QAAQ,EAAEP,EAAE,CAACQ,+BAA+B;IAC5CC,OAAO,EAAET,EAAE,CAACU;EAA8B,GACvCf,KAAK,CAACU,aAAa,CACtB,EACF,CAACL,EAAE,EAAEL,KAAK,CAACU,aAAa,CAC1B,CAAC;EACD,MAAMM,IAAI,GAAGpB,OAAO,CAClB,MACEa,QAAQ,GACJ,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,GACtD,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EACtE,CAACA,QAAQ,CACX,CAAC;EAED,MAAMQ,oBAA2B,GAAAN,aAAA,CAAAA,aAAA,KAC5BX,KAAK;IACRkB,SAAS,EAAE,qCAAqC;IAChDJ,OAAO,GAAAb,cAAA,GAAED,KAAK,CAACc,OAAO,cAAAb,cAAA,cAAAA,cAAA,GAAKO,QAAQ,GAAG,YAAY,GAAGW,SAAU;IAC/DC,KAAK,GAAAlB,YAAA,GACHF,KAAK,CAACoB,KAAK,cAAAlB,YAAA,cAAAA,YAAA,GACXE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACc,uBAAuB;IAC1DX,aAAa;IACbM,IAAI;IACJM,KAAK,GAAAnB,YAAA,GAAEH,KAAK,CAACsB,KAAK,cAAAnB,YAAA,cAAAA,YAAA,GAAI;EAAQ,EAC/B;EAED,OAAOT,KAAA,CAAA6B,aAAA,CAAC1B,eAAe,EAAKoB,oBAAuB,CAAC;AACtD;AAEAlB,kBAAkB,CAACyB,qBAAqB,GAAG,IAAI;AAC/C,eAAezB,kBAAkB"}
+{"version":3,"file":"OrganizationNumber.js","names":["React","useContext","useMemo","StringComponent","SharedContext","OrganizationNumber","props","_props$pattern","_props$label","_props$width","sharedContext","tr","translation","Forms","validate","omitMask","errorMessages","_objectSpread","required","organizationNumberErrorRequired","pattern","organizationNumberErrorPattern","mask","stringComponentProps","className","undefined","label","organizationNumberLabel","width","inputMode","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/OrganizationNumber/OrganizationNumber.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport StringComponent, { Props as StringComponentProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringComponentProps & {\n  validate?: boolean\n  omitMask?: boolean\n}\n\nfunction OrganizationNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const { validate = true, omitMask } = props\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.organizationNumberErrorRequired,\n      pattern: tr.organizationNumberErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n  const mask = useMemo(\n    () =>\n      omitMask\n        ? [/\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/]\n        : [/\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/],\n    [omitMask]\n  )\n\n  const stringComponentProps: Props = {\n    ...props,\n    className: 'dnb-forms-field-organization-number',\n    pattern: props.pattern ?? (validate ? '^[0-9]{9}$' : undefined),\n    label:\n      props.label ??\n      sharedContext?.translation.Forms.organizationNumberLabel,\n    errorMessages,\n    mask,\n    width: props.width ?? 'medium',\n    inputMode: 'numeric',\n  }\n\n  return <StringComponent {...stringComponentProps} />\n}\n\nOrganizationNumber._supportsSpacingProps = true\nexport default OrganizationNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,eAAe,MAAyC,WAAW;AAC1E,OAAOC,aAAa,MAAM,4BAA4B;AAOtD,SAASC,kBAAkBA,CAACC,KAAY,EAAE;EAAA,IAAAC,cAAA,EAAAC,YAAA,EAAAC,YAAA;EACxC,MAAMC,aAAa,GAAGT,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAMO,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAE3C,MAAM;IAAEC,QAAQ,GAAG,IAAI;IAAEC;EAAS,CAAC,GAAGT,KAAK;EAE3C,MAAMU,aAAa,GAAGd,OAAO,CAC3B,MAAAe,aAAA;IACEC,QAAQ,EAAEP,EAAE,CAACQ,+BAA+B;IAC5CC,OAAO,EAAET,EAAE,CAACU;EAA8B,GACvCf,KAAK,CAACU,aAAa,CACtB,EACF,CAACL,EAAE,EAAEL,KAAK,CAACU,aAAa,CAC1B,CAAC;EACD,MAAMM,IAAI,GAAGpB,OAAO,CAClB,MACEa,QAAQ,GACJ,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,GACtD,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EACtE,CAACA,QAAQ,CACX,CAAC;EAED,MAAMQ,oBAA2B,GAAAN,aAAA,CAAAA,aAAA,KAC5BX,KAAK;IACRkB,SAAS,EAAE,qCAAqC;IAChDJ,OAAO,GAAAb,cAAA,GAAED,KAAK,CAACc,OAAO,cAAAb,cAAA,cAAAA,cAAA,GAAKO,QAAQ,GAAG,YAAY,GAAGW,SAAU;IAC/DC,KAAK,GAAAlB,YAAA,GACHF,KAAK,CAACoB,KAAK,cAAAlB,YAAA,cAAAA,YAAA,GACXE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACc,uBAAuB;IAC1DX,aAAa;IACbM,IAAI;IACJM,KAAK,GAAAnB,YAAA,GAAEH,KAAK,CAACsB,KAAK,cAAAnB,YAAA,cAAAA,YAAA,GAAI,QAAQ;IAC9BoB,SAAS,EAAE;EAAS,EACrB;EAED,OAAO7B,KAAA,CAAA8B,aAAA,CAAC3B,eAAe,EAAKoB,oBAAuB,CAAC;AACtD;AAEAlB,kBAAkB,CAAC0B,qBAAqB,GAAG,IAAI;AAC/C,eAAe1B,kBAAkB"}

package/es/extensions/forms/Field/PhoneNumber/PhoneNumber.js

@@ -4,13 +4,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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, { useMemo, useContext, useCallback, useEffect } from 'react';
+import React, { useMemo, useContext, useCallback } from 'react';
 import { Autocomplete, Flex } from '../../../../components';
 import classnames from 'classnames';
 import countries from '../../constants/countries';
 import StringComponent from '../String';
 import { useDataValue } from '../../hooks';
 import FieldBlock from '../../FieldBlock';
+import { FormError } from '../../types';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import SharedContext from '../../../../shared/Context';
 import { getCountryData, makeCountryFilterSet } from '../SelectCountry';
@@ -18,18 +19,48 @@ const defaultCountryCode = '+47';
 const defaultPlaceholder = '00 00 00 00';
 const defaultMask = [/\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/];
 function PhoneNumber(props) {
-  var _sharedContext$locale;
+  var _sharedContext$locale, _countryCodeRef$curre;
   const sharedContext = useContext(SharedContext);
   const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
   const lang = (_sharedContext$locale = sharedContext.locale) === null || _sharedContext$locale === void 0 ? void 0 : _sharedContext$locale.split('-')[0];
+  const countryCodeRef = React.useRef(null);
+  const numberRef = React.useRef(null);
+  const dataRef = React.useRef(null);
+  const langRef = React.useRef(lang);
+  const wasFilled = React.useRef(false);
   const errorMessages = useMemo(() => _objectSpread({
     required: tr.phoneNumberErrorRequired,
     pattern: tr.phoneNumberErrorRequired
   }, props === null || props === void 0 ? void 0 : props.errorMessages), [tr, props.errorMessages]);
+  const validateRequired = useCallback((value, {
+    required,
+    isChanged
+  }) => {
+    const error = new FormError('The value is required', {
+      validationRule: 'required'
+    });
+    if (required) {
+      const [countryCode, phoneNumber] = splitValue(value);
+      if (countryCode !== prevCountryCodeRef.current) {
+        if (countryCode) {
+          prevCountryCodeRef.current = countryCode;
+        }
+        return undefined;
+      }
+      if (isChanged && !phoneNumber) {
+        return error;
+      }
+    }
+    return undefined;
+  }, []);
   const defaultProps = {
     errorMessages
   };
-  const preparedProps = _objectSpread(_objectSpread({}, defaultProps), props);
+  const preparedProps = _objectSpread(_objectSpread(_objectSpread({}, defaultProps), props), {}, {
+    validateRequired,
+    fromExternal,
+    toEvent
+  });
   const {
     className,
     countryCodeFieldClassName,
@@ -61,11 +92,20 @@ function PhoneNumber(props) {
     onNumberChange,
     filterCountries = ccFilter !== 'Prioritized' ? makeCountryFilterSet(ccFilter) : undefined
   } = useDataValue(preparedProps);
-  const countryCodeRef = React.useRef(null);
-  const numberRef = React.useRef(null);
-  const dataRef = React.useRef(null);
-  const langRef = React.useRef(lang);
-  const wasFilled = React.useRef(false);
+  function fromExternal(external) {
+    const [, phoneNumber] = splitValue(external);
+    if (!phoneNumber && !props.omitCountryCodeField) {
+      return countryCodeRef.current;
+    }
+    return external;
+  }
+  function toEvent(value) {
+    const [, phoneNumber] = splitValue(value);
+    if (!phoneNumber) {
+      return emptyValue;
+    }
+    return value;
+  }
   const updateCurrentDataSet = useCallback(() => {
     dataRef.current = getCountryData({
       lang,
@@ -79,7 +119,7 @@ function PhoneNumber(props) {
     phoneNumber = numberRef.current || emptyValue
   }) => {
     updateValue('invalidate');
-    handleChange(phoneNumber ? joinValue([countryCode, phoneNumber]) : emptyValue, omitCountryCodeField ? {
+    handleChange(joinValue([countryCode, phoneNumber]), omitCountryCodeField ? {
       phoneNumber
     } : {
       countryCode,
@@ -90,16 +130,14 @@ function PhoneNumber(props) {
     const [countryCode, phoneNumber] = splitValue(props.value);
     numberRef.current = phoneNumber;
     if (lang !== langRef.current || !wasFilled.current) {
-      countryCodeRef.current = countryCode || defaultCountryCode;
+      if (!countryCodeRef.current || countryCode) {
+        countryCodeRef.current = countryCode || defaultCountryCode;
+      }
       langRef.current = lang;
       updateCurrentDataSet();
     }
   }, [props.value, lang, updateCurrentDataSet]);
-  useEffect(() => {
-    const [countryCode, phoneNumber] = splitValue(props.value);
-    const newValue = phoneNumber ? joinValue([countryCode, phoneNumber]) : emptyValue;
-    updateValue(newValue);
-  }, [props.value, emptyValue, updateValue]);
+  const prevCountryCodeRef = React.useRef(countryCodeRef.current);
   const handleCountryCodeChange = useCallback(({
     data
   }) => {
@@ -152,7 +190,7 @@ function PhoneNumber(props) {
       }
     }
   }, [callOnChange, updateCurrentDataSet]);
-  const isDefault = countryCodeRef.current.includes(defaultCountryCode);
+  const isDefault = (_countryCodeRef$curre = countryCodeRef.current) === null || _countryCodeRef$curre === void 0 ? void 0 : _countryCodeRef$curre.includes(defaultCountryCode);
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-phone-number', className),
     width: omitCountryCodeField ? undefined : width,
@@ -161,11 +199,11 @@ function PhoneNumber(props) {
     error: error,
     disabled: disabled
   }, pickSpacingProps(props)), React.createElement(Flex.Horizontal, {
-    align: "baseline"
+    align: "flex-end"
   }, !omitCountryCodeField && React.createElement(Autocomplete, {
     className: classnames('dnb-forms-field-phone-number__country-code', countryCodeFieldClassName),
     mode: "async",
-    placeholder: countryCodePlaceholder !== null && countryCodePlaceholder !== void 0 ? countryCodePlaceholder : ' ',
+    placeholder: countryCodePlaceholder,
     label_direction: "vertical",
     label: countryCodeLabel !== null && countryCodeLabel !== void 0 ? countryCodeLabel : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.countryCodeLabel,
     data: dataRef.current,
@@ -187,7 +225,7 @@ function PhoneNumber(props) {
     autoComplete: "tel-national",
     emptyValue: "",
     layout: "vertical",
-    label: label !== null && label !== void 0 ? label : ' ',
+    label: label,
     placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : isDefault ? defaultPlaceholder : undefined,
     mask: numberMask !== null && numberMask !== void 0 ? numberMask : isDefault ? defaultMask : Array(12).fill(/\d/),
     onFocus: handleFocus,
@@ -205,7 +243,8 @@ function PhoneNumber(props) {
     errorMessages: errorMessages,
     validateInitially: validateInitially,
     continuousValidation: continuousValidation,
-    validateUnchanged: validateUnchanged
+    validateUnchanged: validateUnchanged,
+    inputMode: "tel"
   })));
 }
 function makeObject(country, lang) {
@@ -213,7 +252,6 @@ function makeObject(country, lang) {
   return {
     selectedKey: formattCountryCode(country.cdc),
     selected_value: `${country.iso} (${formattCountryCode(country.cdc)})`,
-    search_content: Object.values(country.i18n).map(v => `${formattCountryCode(country.cdc)} ${v}`),
     content: `${formattCountryCode(country.cdc)} ${(_country$i18n$lang = country.i18n[lang]) !== null && _country$i18n$lang !== void 0 ? _country$i18n$lang : country.i18n.en}`
   };
 }

package/es/extensions/forms/Field/PhoneNumber/PhoneNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","useEffect","Autocomplete","Flex","classnames","countries","StringComponent","useDataValue","FieldBlock","pickSpacingProps","SharedContext","getCountryData","makeCountryFilterSet","defaultCountryCode","defaultPlaceholder","defaultMask","PhoneNumber","props","_sharedContext$locale","sharedContext","tr","translation","Forms","lang","locale","split","errorMessages","_objectSpread","required","phoneNumberErrorRequired","pattern","defaultProps","preparedProps","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","ccFilter","emptyValue","info","warning","error","disabled","width","help","validateInitially","continuousValidation","validateUnchanged","omitCountryCodeField","handleFocus","handleBlur","handleChange","updateValue","onCountryCodeChange","onNumberChange","filterCountries","undefined","countryCodeRef","useRef","numberRef","dataRef","langRef","wasFilled","updateCurrentDataSet","current","filter","country","formattCountryCode","cdc","sort","makeObject","callOnChange","countryCode","phoneNumber","joinValue","splitValue","value","newValue","handleCountryCodeChange","data","_data$selectedKey","selectedKey","trim","handleNumberChange","onFocusHandler","updateData","onTypeHandler","revalidateInputValue","event","_event$nativeEvent","nativeEvent","cdcVal","test","find","window","requestAnimationFrame","isDefault","includes","createElement","_extends","Horizontal","align","mode","label_direction","on_focus","on_blur","on_change","on_type","independent_width","search_numbers","keep_selection","autoComplete","no_animation","noAnimation","stretch","type","layout","mask","Array","fill","onFocus","onBlur","onChange","_country$i18n$lang","selected_value","iso","search_content","Object","values","i18n","map","v","content","en","match","slice","array","Boolean","join","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback, useEffect } from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries, { CountryType } from '../../constants/countries'\nimport StringComponent, { Props as InputProps } from '../String'\nimport { useDataValue } from '../../hooks'\nimport FieldBlock from '../../FieldBlock'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport {\n  CountryFilterSet,\n  getCountryData,\n  makeCountryFilterSet,\n} from '../SelectCountry'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string> & {\n    countryCodeFieldClassName?: string\n    numberFieldClassName?: string\n    countryCodePlaceholder?: string\n    countryCodeLabel?: string\n    numberMask?: InputMaskedProps['mask']\n    pattern?: InputProps['pattern']\n    width?: 'large' | 'stretch'\n    omitCountryCodeField?: boolean\n    onCountryCodeChange?: (value: string | undefined) => void\n    onNumberChange?: (value: string | undefined) => void\n    countries?: CountryFilterSet\n\n    /**\n     * For internal use only.\n     *\n     * @param country\n     * @returns boolean\n     */\n    filterCountries?: (country: CountryType) => boolean\n\n    /**\n     * For internal testing purposes\n     */\n    noAnimation?: boolean\n  }\n\n// Important for the default value to be defined here, and not after the useDataValue call, to avoid the UI jumping\n// back to +47 once the user empty the field so handleChange send out undefined.\nconst defaultCountryCode = '+47'\nconst defaultPlaceholder = '00 00 00 00'\nconst defaultMask = [\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n]\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n  const lang = sharedContext.locale?.split('-')[0]\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.phoneNumberErrorRequired,\n      pattern: tr.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const defaultProps: Partial<Props> = {\n    errorMessages,\n  }\n  const preparedProps: Props = {\n    ...defaultProps,\n    ...props,\n  }\n\n  const {\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    countryCodePlaceholder,\n    placeholder,\n    countryCodeLabel,\n    label = sharedContext?.translation.Forms.phoneNumberLabel,\n    numberMask,\n    countries: ccFilter = 'Prioritized',\n    emptyValue,\n    info,\n    warning,\n    error,\n    disabled,\n    width = 'large',\n    help,\n    pattern,\n    required,\n    validateInitially,\n    continuousValidation,\n    validateUnchanged,\n    omitCountryCodeField,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    updateValue,\n    onCountryCodeChange,\n    onNumberChange,\n    filterCountries = ccFilter !== 'Prioritized'\n      ? makeCountryFilterSet(ccFilter)\n      : undefined,\n  } = useDataValue(preparedProps)\n\n  const countryCodeRef = React.useRef(null)\n  const numberRef = React.useRef(null)\n  const dataRef = React.useRef(null)\n  const langRef = React.useRef(lang)\n  const wasFilled = React.useRef(false)\n\n  const updateCurrentDataSet = useCallback(() => {\n    dataRef.current = getCountryData({\n      lang,\n      filter: !wasFilled.current\n        ? (country) =>\n            `${formattCountryCode(country.cdc)}` === countryCodeRef.current\n        : filterCountries,\n      sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      makeObject,\n    })\n  }, [lang, filterCountries, ccFilter])\n\n  const callOnChange = useCallback(\n    ({\n      countryCode = omitCountryCodeField\n        ? emptyValue\n        : countryCodeRef.current || emptyValue,\n      phoneNumber = numberRef.current || emptyValue,\n    }) => {\n      /**\n       * To ensure, we actually call onChange every time,\n       * even if the value is undefined\n       */\n      updateValue('invalidate')\n\n      handleChange(\n        phoneNumber ? joinValue([countryCode, phoneNumber]) : emptyValue,\n        omitCountryCodeField\n          ? { phoneNumber }\n          : { countryCode, phoneNumber }\n      )\n    },\n    [omitCountryCodeField, emptyValue, updateValue, handleChange]\n  )\n\n  /**\n   * We do not process the whole country list at the first render.\n   * Only when the Autocomplete opens (focus).\n   * To achieve this, we use memo instead of effect to update refs in sync.\n   *\n   * We set or update the data list depending on if the countrycode changes or lang changes.\n   * We then update countryCode and phoneNumber when value changes.\n   */\n  useMemo(() => {\n    const [countryCode, phoneNumber] = splitValue(props.value)\n    numberRef.current = phoneNumber\n\n    if (lang !== langRef.current || !wasFilled.current) {\n      countryCodeRef.current = countryCode || defaultCountryCode\n      langRef.current = lang\n\n      updateCurrentDataSet()\n    }\n  }, [props.value, lang, updateCurrentDataSet])\n\n  /**\n   * On external value change, update the internal,\n   * only so onFocus and onBlur does have correct (eventually empty) value.\n   */\n  useEffect(() => {\n    const [countryCode, phoneNumber] = splitValue(props.value)\n    const newValue = phoneNumber\n      ? joinValue([countryCode, phoneNumber])\n      : emptyValue\n    updateValue(newValue)\n  }, [props.value, emptyValue, updateValue])\n\n  const handleCountryCodeChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const countryCode = (countryCodeRef.current =\n        data?.selectedKey?.trim() || emptyValue)\n\n      callOnChange({ countryCode })\n      onCountryCodeChange?.(countryCode)\n    },\n    [emptyValue, callOnChange, onCountryCodeChange]\n  )\n\n  const handleNumberChange = useCallback(\n    (value: string) => {\n      const phoneNumber = (numberRef.current = value || emptyValue)\n\n      callOnChange({ phoneNumber })\n      onNumberChange?.(phoneNumber)\n    },\n    [emptyValue, callOnChange, onNumberChange]\n  )\n\n  const onFocusHandler = useCallback(\n    ({ updateData }) => {\n      if (!wasFilled.current) {\n        wasFilled.current = true\n        updateCurrentDataSet()\n        updateData(dataRef.current)\n      }\n      handleFocus()\n    },\n    [handleFocus, updateCurrentDataSet]\n  )\n\n  const onTypeHandler = useCallback(\n    ({ value, updateData, revalidateInputValue, event }) => {\n      // Handle browser autofill/autocomplete\n      if (typeof event?.nativeEvent?.data === 'undefined') {\n        const cdcVal = /\\+\\d{1,3}\\s{1}\\d+/.test(value)\n          ? splitValue(value)[0]\n          : value\n        const country = countries.find(({ cdc }) => cdc === cdcVal)\n        if (country?.cdc) {\n          const countryCode = (countryCodeRef.current = formattCountryCode(\n            country.cdc\n          ))\n\n          updateCurrentDataSet()\n          updateData(dataRef.current)\n          callOnChange({ countryCode })\n\n          // To ensure correct input value,\n          // regardless if there is changed data before or not.\n          window.requestAnimationFrame(() => {\n            revalidateInputValue()\n          })\n        }\n      }\n    },\n    [callOnChange, updateCurrentDataSet]\n  )\n\n  const isDefault = countryCodeRef.current.includes(defaultCountryCode)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-phone-number', className)}\n      width={omitCountryCodeField ? undefined : width}\n      info={info}\n      warning={warning}\n      error={error}\n      disabled={disabled}\n      {...pickSpacingProps(props)}\n    >\n      <Flex.Horizontal align=\"baseline\">\n        {!omitCountryCodeField && (\n          <Autocomplete\n            className={classnames(\n              'dnb-forms-field-phone-number__country-code',\n              countryCodeFieldClassName\n            )}\n            mode=\"async\"\n            placeholder={countryCodePlaceholder ?? ' '}\n            label_direction=\"vertical\"\n            label={\n              countryCodeLabel ??\n              sharedContext?.translation.Forms.countryCodeLabel\n            }\n            data={dataRef.current}\n            value={countryCodeRef.current}\n            disabled={disabled}\n            on_focus={onFocusHandler}\n            on_blur={handleBlur}\n            on_change={handleCountryCodeChange}\n            on_type={onTypeHandler}\n            independent_width\n            search_numbers\n            keep_selection\n            autoComplete=\"tel-country-code\"\n            no_animation={props.noAnimation}\n            stretch={width === 'stretch'}\n          />\n        )}\n\n        <StringComponent\n          className={classnames(\n            'dnb-forms-field-phone-number__number',\n            numberFieldClassName\n          )}\n          type=\"tel\"\n          autoComplete=\"tel-national\"\n          emptyValue=\"\"\n          layout=\"vertical\"\n          label={label ?? ' '}\n          placeholder={\n            placeholder ?? (isDefault ? defaultPlaceholder : undefined)\n          }\n          mask={\n            numberMask ?? (isDefault ? defaultMask : Array(12).fill(/\\d/))\n          }\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onChange={handleNumberChange}\n          value={numberRef.current}\n          info={info}\n          warning={warning}\n          error={error}\n          disabled={disabled}\n          width={omitCountryCodeField ? 'medium' : 'stretch'}\n          help={help}\n          required={required}\n          pattern={pattern}\n          errorMessages={errorMessages}\n          validateInitially={validateInitially}\n          continuousValidation={continuousValidation}\n          validateUnchanged={validateUnchanged}\n        />\n      </Flex.Horizontal>\n    </FieldBlock>\n  )\n}\n\nfunction makeObject(country: CountryType, lang: string) {\n  return {\n    selectedKey: formattCountryCode(country.cdc),\n    selected_value: `${country.iso} (${formattCountryCode(country.cdc)})`,\n    search_content: Object.values(country.i18n).map(\n      (v) => `${formattCountryCode(country.cdc)} ${v}`\n    ),\n    content: `${formattCountryCode(country.cdc)} ${\n      country.i18n[lang] ?? country.i18n.en\n    }`,\n  }\n}\n\nfunction formattCountryCode(value: string) {\n  return `+${value}`\n}\n\nfunction splitValue(value: string) {\n  return (\n    typeof value === 'string'\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n  ).slice(1)\n}\n\nfunction joinValue(array: Array<string>) {\n  return array.filter(Boolean).join(' ')\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}
+{"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","Autocomplete","Flex","classnames","countries","StringComponent","useDataValue","FieldBlock","FormError","pickSpacingProps","SharedContext","getCountryData","makeCountryFilterSet","defaultCountryCode","defaultPlaceholder","defaultMask","PhoneNumber","props","_sharedContext$locale","_countryCodeRef$curre","sharedContext","tr","translation","Forms","lang","locale","split","countryCodeRef","useRef","numberRef","dataRef","langRef","wasFilled","errorMessages","_objectSpread","required","phoneNumberErrorRequired","pattern","validateRequired","value","isChanged","error","validationRule","countryCode","phoneNumber","splitValue","prevCountryCodeRef","current","undefined","defaultProps","preparedProps","fromExternal","toEvent","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","ccFilter","emptyValue","info","warning","disabled","width","help","validateInitially","continuousValidation","validateUnchanged","omitCountryCodeField","handleFocus","handleBlur","handleChange","updateValue","onCountryCodeChange","onNumberChange","filterCountries","external","updateCurrentDataSet","filter","country","formattCountryCode","cdc","sort","makeObject","callOnChange","joinValue","handleCountryCodeChange","data","_data$selectedKey","selectedKey","trim","handleNumberChange","onFocusHandler","updateData","onTypeHandler","revalidateInputValue","event","_event$nativeEvent","nativeEvent","cdcVal","test","find","window","requestAnimationFrame","isDefault","includes","createElement","_extends","Horizontal","align","mode","label_direction","on_focus","on_blur","on_change","on_type","independent_width","search_numbers","keep_selection","autoComplete","no_animation","noAnimation","stretch","type","layout","mask","Array","fill","onFocus","onBlur","onChange","inputMode","_country$i18n$lang","selected_value","iso","content","i18n","en","match","slice","array","Boolean","join","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries, { CountryType } from '../../constants/countries'\nimport StringComponent, { Props as InputProps } from '../String'\nimport { useDataValue } from '../../hooks'\nimport FieldBlock from '../../FieldBlock'\nimport { FieldHelpProps, FieldProps, FormError } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport {\n  CountryFilterSet,\n  getCountryData,\n  makeCountryFilterSet,\n} from '../SelectCountry'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string> & {\n    countryCodeFieldClassName?: string\n    numberFieldClassName?: string\n    countryCodePlaceholder?: string\n    countryCodeLabel?: string\n    numberMask?: InputMaskedProps['mask']\n    pattern?: InputProps['pattern']\n    width?: 'large' | 'stretch'\n    omitCountryCodeField?: boolean\n    onCountryCodeChange?: (value: string | undefined) => void\n    onNumberChange?: (value: string | undefined) => void\n    countries?: CountryFilterSet\n\n    /**\n     * For internal use only.\n     *\n     * @param country\n     * @returns boolean\n     */\n    filterCountries?: (country: CountryType) => boolean\n\n    /**\n     * For internal testing purposes\n     */\n    noAnimation?: boolean\n  }\n\n// Important for the default value to be defined here, and not after the useDataValue call, to avoid the UI jumping\n// back to +47 once the user empty the field so handleChange send out undefined.\nconst defaultCountryCode = '+47'\nconst defaultPlaceholder = '00 00 00 00'\nconst defaultMask = [\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n]\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n  const lang = sharedContext.locale?.split('-')[0]\n\n  const countryCodeRef = React.useRef(null)\n  const numberRef = React.useRef(null)\n  const dataRef = React.useRef(null)\n  const langRef = React.useRef(lang)\n  const wasFilled = React.useRef(false)\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.phoneNumberErrorRequired,\n      pattern: tr.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, isChanged }) => {\n      const error = new FormError('The value is required', {\n        validationRule: 'required',\n      })\n\n      if (required) {\n        const [countryCode, phoneNumber] = splitValue(value)\n\n        if (countryCode !== prevCountryCodeRef.current) {\n          if (countryCode) {\n            prevCountryCodeRef.current = countryCode\n          }\n          return undefined\n        }\n\n        if (isChanged && !phoneNumber) {\n          return error\n        }\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const defaultProps: Partial<Props> = {\n    errorMessages,\n  }\n  const preparedProps: Props = {\n    ...defaultProps,\n    ...props,\n    validateRequired,\n    fromExternal,\n    toEvent,\n  }\n\n  const {\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    countryCodePlaceholder,\n    placeholder,\n    countryCodeLabel,\n    label = sharedContext?.translation.Forms.phoneNumberLabel,\n    numberMask,\n    countries: ccFilter = 'Prioritized',\n    emptyValue,\n    info,\n    warning,\n    error,\n    disabled,\n    width = 'large',\n    help,\n    pattern,\n    required,\n    validateInitially,\n    continuousValidation,\n    validateUnchanged,\n    omitCountryCodeField,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    updateValue,\n    onCountryCodeChange,\n    onNumberChange,\n    filterCountries = ccFilter !== 'Prioritized'\n      ? makeCountryFilterSet(ccFilter)\n      : undefined,\n  } = useDataValue(preparedProps)\n\n  function fromExternal(external: string) {\n    const [, phoneNumber] = splitValue(external)\n    if (!phoneNumber && !props.omitCountryCodeField) {\n      return countryCodeRef.current\n    }\n    return external\n  }\n\n  function toEvent(value: string) {\n    const [, phoneNumber] = splitValue(value)\n    if (!phoneNumber) {\n      return emptyValue\n    }\n    return value\n  }\n\n  const updateCurrentDataSet = useCallback(() => {\n    dataRef.current = getCountryData({\n      lang,\n      filter: !wasFilled.current\n        ? (country) =>\n            `${formattCountryCode(country.cdc)}` === countryCodeRef.current\n        : filterCountries,\n      sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      makeObject,\n    })\n  }, [lang, filterCountries, ccFilter])\n\n  const callOnChange = useCallback(\n    ({\n      countryCode = omitCountryCodeField\n        ? emptyValue\n        : countryCodeRef.current || emptyValue,\n      phoneNumber = numberRef.current || emptyValue,\n    }) => {\n      /**\n       * To ensure, we actually call onChange every time the cc value changes,\n       * even if the value is undefined\n       */\n      updateValue('invalidate')\n\n      handleChange(\n        joinValue([countryCode, phoneNumber]),\n        omitCountryCodeField\n          ? { phoneNumber }\n          : { countryCode, phoneNumber }\n      )\n    },\n    [omitCountryCodeField, emptyValue, updateValue, handleChange]\n  )\n\n  /**\n   * We do not process the whole country list at the first render.\n   * Only when the Autocomplete opens (focus).\n   * To achieve this, we use memo instead of effect to update refs in sync.\n   *\n   * We set or update the data list depending on if the countrycode changes or lang changes.\n   * We then update countryCode and phoneNumber when value changes.\n   */\n  useMemo(() => {\n    const [countryCode, phoneNumber] = splitValue(props.value)\n    numberRef.current = phoneNumber\n\n    if (lang !== langRef.current || !wasFilled.current) {\n      if (!countryCodeRef.current || countryCode) {\n        countryCodeRef.current = countryCode || defaultCountryCode\n      }\n      langRef.current = lang\n\n      updateCurrentDataSet()\n    }\n  }, [props.value, lang, updateCurrentDataSet])\n\n  const prevCountryCodeRef = React.useRef(countryCodeRef.current)\n\n  const handleCountryCodeChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const countryCode = (countryCodeRef.current =\n        data?.selectedKey?.trim() || emptyValue)\n\n      callOnChange({ countryCode })\n      onCountryCodeChange?.(countryCode)\n    },\n    [emptyValue, callOnChange, onCountryCodeChange]\n  )\n\n  const handleNumberChange = useCallback(\n    (value: string) => {\n      const phoneNumber = (numberRef.current = value || emptyValue)\n\n      callOnChange({ phoneNumber })\n      onNumberChange?.(phoneNumber)\n    },\n    [emptyValue, callOnChange, onNumberChange]\n  )\n\n  const onFocusHandler = useCallback(\n    ({ updateData }) => {\n      if (!wasFilled.current) {\n        wasFilled.current = true\n        updateCurrentDataSet()\n        updateData(dataRef.current)\n      }\n      handleFocus()\n    },\n    [handleFocus, updateCurrentDataSet]\n  )\n\n  const onTypeHandler = useCallback(\n    ({ value, updateData, revalidateInputValue, event }) => {\n      // Handle browser autofill/autocomplete\n      if (typeof event?.nativeEvent?.data === 'undefined') {\n        const cdcVal = /\\+\\d{1,3}\\s{1}\\d+/.test(value)\n          ? splitValue(value)[0]\n          : value\n        const country = countries.find(({ cdc }) => cdc === cdcVal)\n        if (country?.cdc) {\n          const countryCode = (countryCodeRef.current = formattCountryCode(\n            country.cdc\n          ))\n\n          updateCurrentDataSet()\n          updateData(dataRef.current)\n          callOnChange({ countryCode })\n\n          // To ensure correct input value,\n          // regardless if there is changed data before or not.\n          window.requestAnimationFrame(() => {\n            revalidateInputValue()\n          })\n        }\n      }\n    },\n    [callOnChange, updateCurrentDataSet]\n  )\n\n  const isDefault = countryCodeRef.current?.includes(defaultCountryCode)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-phone-number', className)}\n      width={omitCountryCodeField ? undefined : width}\n      info={info}\n      warning={warning}\n      error={error}\n      disabled={disabled}\n      {...pickSpacingProps(props)}\n    >\n      <Flex.Horizontal align=\"flex-end\">\n        {!omitCountryCodeField && (\n          <Autocomplete\n            className={classnames(\n              'dnb-forms-field-phone-number__country-code',\n              countryCodeFieldClassName\n            )}\n            mode=\"async\"\n            placeholder={countryCodePlaceholder}\n            label_direction=\"vertical\"\n            label={\n              countryCodeLabel ??\n              sharedContext?.translation.Forms.countryCodeLabel\n            }\n            data={dataRef.current}\n            value={countryCodeRef.current}\n            disabled={disabled}\n            on_focus={onFocusHandler}\n            on_blur={handleBlur}\n            on_change={handleCountryCodeChange}\n            on_type={onTypeHandler}\n            independent_width\n            search_numbers\n            keep_selection\n            autoComplete=\"tel-country-code\"\n            no_animation={props.noAnimation}\n            stretch={width === 'stretch'}\n          />\n        )}\n\n        <StringComponent\n          className={classnames(\n            'dnb-forms-field-phone-number__number',\n            numberFieldClassName\n          )}\n          type=\"tel\"\n          autoComplete=\"tel-national\"\n          emptyValue=\"\"\n          layout=\"vertical\"\n          label={label}\n          placeholder={\n            placeholder ?? (isDefault ? defaultPlaceholder : undefined)\n          }\n          mask={\n            numberMask ?? (isDefault ? defaultMask : Array(12).fill(/\\d/))\n          }\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onChange={handleNumberChange}\n          value={numberRef.current}\n          info={info}\n          warning={warning}\n          error={error}\n          disabled={disabled}\n          width={omitCountryCodeField ? 'medium' : 'stretch'}\n          help={help}\n          required={required}\n          pattern={pattern}\n          errorMessages={errorMessages}\n          validateInitially={validateInitially}\n          continuousValidation={continuousValidation}\n          validateUnchanged={validateUnchanged}\n          inputMode=\"tel\"\n        />\n      </Flex.Horizontal>\n    </FieldBlock>\n  )\n}\n\nfunction makeObject(country: CountryType, lang: string) {\n  return {\n    selectedKey: formattCountryCode(country.cdc),\n    selected_value: `${country.iso} (${formattCountryCode(country.cdc)})`,\n    content: `${formattCountryCode(country.cdc)} ${\n      country.i18n[lang] ?? country.i18n.en\n    }`,\n  }\n}\n\nfunction formattCountryCode(value: string) {\n  return `+${value}`\n}\n\nfunction splitValue(value: string) {\n  return (\n    typeof value === 'string'\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n  ).slice(1)\n}\n\nfunction joinValue(array: Array<string>) {\n  return array.filter(Boolean).join(' ')\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}

package/es/extensions/forms/Field/PhoneNumber/style/dnb-phone-number.css

@@ -6,4 +6,7 @@
 }
 .dnb-forms-field-phone-number__number {
   flex: 1;
+}
+.dnb-forms-field-phone-number .dnb-form-label {
+  max-width: 14ch;
 }

package/es/extensions/forms/Field/PhoneNumber/style/dnb-phone-number.min.css

@@ -1 +1 @@
-.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:calc(var(--forms-field-width--medium) - 2rem)}.dnb-forms-field-phone-number__number{flex:1}
+.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:calc(var(--forms-field-width--medium) - 2rem)}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-phone-number .dnb-form-label{max-width:14ch}

package/es/extensions/forms/Field/PhoneNumber/style/dnb-phone-number.scss

@@ -10,4 +10,8 @@
   &__number {
     flex: 1;
   }
+
+  .dnb-form-label {
+    max-width: 14ch;
+  }
 }

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

@@ -29,6 +29,7 @@ function PostalCodeAndCity(props) {
     className: 'dnb-forms-field-postal-code-and-city__fields'
   }, React.createElement(StringComponent, _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),
     label: (_postalCode$label = postalCode.label) !== null && _postalCode$label !== void 0 ? _postalCode$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.postalCodeLabel,
     errorMessages: _objectSpread({
@@ -37,7 +38,8 @@ function PostalCodeAndCity(props) {
     }, postalCode.errorMessages),
     placeholder: (_postalCode$placehold = postalCode.placeholder) !== null && _postalCode$placehold !== void 0 ? _postalCode$placehold : '0000',
     width: false,
-    inputClassName: "dnb-forms-field-postal-code-and-city__postal-code-input"
+    inputClassName: "dnb-forms-field-postal-code-and-city__postal-code-input",
+    inputMode: "numeric"
   })), React.createElement(StringComponent, _extends({}, city, {
     className: classnames('dnb-forms-field-postal-code-and-city__city', city.className),
     label: (_city$label = city.label) !== null && _city$label !== void 0 ? _city$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.cityLabel,

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

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldBlock","StringComponent","PostalCodeAndCity","props","_postalCode$pattern","_postalCode$label","_postalCode$placehold","_city$label","sharedContext","postalCode","city","help","width","fieldBlockProps","_objectWithoutProperties","_excluded","createElement","_extends","className","pattern","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","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 StringComponent, { Props as StringComponentProps } from '../String'\nimport { FieldHelpProps } from '../../types'\n\nexport type Props = FieldHelpProps &\n  Omit<FieldBlockProps, 'children'> &\n  Record<'postalCode' | 'city', StringComponentProps>\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        <StringComponent\n          {...postalCode}\n          pattern={postalCode.pattern ?? '^[0-9]{4}$'}\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        />\n        <StringComponent\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,eAAe,MAAyC,WAAW;AAO1E,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,eAAe,EAAAgB,QAAA,KACVR,UAAU;IACdU,OAAO,GAAAf,mBAAA,GAAEK,UAAU,CAACU,OAAO,cAAAf,mBAAA,cAAAA,mBAAA,GAAI,YAAa;IAC5Cc,SAAS,EAAEpB,UAAU,CACnB,mDAAmD,EACnDW,UAAU,CAACS,SACb,CAAE;IACFE,KAAK,GAAAf,iBAAA,GACHI,UAAU,CAACW,KAAK,cAAAf,iBAAA,cAAAA,iBAAA,GAChBG,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACC,eAClC;IACDC,aAAa,EAAAC,aAAA;MACXC,QAAQ,EACNlB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACK,uBAAuB;MAC1DR,OAAO,EACLX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACM;IAAsB,GACtDnB,UAAU,CAACe,aAAa,CAC3B;IACFK,WAAW,GAAAvB,qBAAA,GAAEG,UAAU,CAACoB,WAAW,cAAAvB,qBAAA,cAAAA,qBAAA,GAAI,MAAO;IAC9CM,KAAK,EAAE,KAAM;IACbkB,cAAc,EAAC;EAAyD,EACzE,CAAC,EACFlC,KAAA,CAAAoB,aAAA,CAACf,eAAe,EAAAgB,QAAA,KACVP,IAAI;IACRQ,SAAS,EAAEpB,UAAU,CACnB,4CAA4C,EAC5CY,IAAI,CAACQ,SACP,CAAE;IACFE,KAAK,GAAAb,WAAA,GAAEG,IAAI,CAACU,KAAK,cAAAb,WAAA,cAAAA,WAAA,GAAIC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACS,SAAU;IAChEP,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAElB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACU;IAAiB,GACzDtB,IAAI,CAACc,aAAa,CACrB;IACFZ,KAAK,EAAC,SAAS;IACfD,IAAI,EAAEA;EAAK,EACZ,CACE,CACK,CAAC;AAEjB;AAEAT,iBAAiB,CAAC+B,qBAAqB,GAAG,IAAI;AAC9C,eAAe/B,iBAAiB"}
+{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldBlock","StringComponent","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 StringComponent, { Props as StringComponentProps } from '../String'\nimport { FieldHelpProps } from '../../types'\n\nexport type Props = FieldHelpProps &\n  Omit<FieldBlockProps, 'children'> &\n  Record<'postalCode' | 'city', StringComponentProps>\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        <StringComponent\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        <StringComponent\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,eAAe,MAAyC,WAAW;AAO1E,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,eAAe,EAAAgB,QAAA,KACVR,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,eAAe,EAAAgB,QAAA,KACVP,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"}

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

@@ -1,7 +1,6 @@
 .dnb-forms-field-postal-code-and-city__fields {
   display: flex;
   flex-flow: row;
-  grid-column-gap: var(--spacing-small);
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }

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

@@ -1 +1 @@
-.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.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__fields{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}