@dnb/eufemia 10.7.0 → 10.9.0

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

@@ -4,12 +4,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 } from 'react';
 import classnames from 'classnames';
-import { Input, Textarea } from '../../../components';
+import { HelpButton, Input, Textarea } from '../../../components';
 import InputMasked from '../../../components/InputMasked';
-import { forwardSpaceProps } from '../utils';
 import SharedContext from '../../../shared/Context';
 import FieldBlock from '../FieldBlock';
-import { useField } from './hooks';
+import { useDataValue } from '../hooks';
+import { pickSpacingProps } from '../types';
 function StringComponent(props) {
   var _props$minLength, _props$maxLength;
   const sharedContext = useContext(SharedContext);
@@ -52,6 +52,7 @@ function StringComponent(props) {
     warning,
     error,
     disabled,
+    help,
     multiline,
     leftIcon,
     rightIcon,
@@ -61,10 +62,10 @@ function StringComponent(props) {
     characterCounter,
     mask,
     width,
-    onFocus,
-    onBlur,
-    onChange
-  } = useField(preparedProps);
+    handleFocus,
+    handleBlur,
+    handleChange
+  } = useDataValue(preparedProps);
   const characterCounterElement = characterCounter ? props.maxLength ? `${(value === null || value === void 0 ? void 0 : value.length) ?? '0'}/${props.maxLength}` : `${(value === null || value === void 0 ? void 0 : value.length) ?? '0'}` : undefined;
   const cn = classnames('dnb-forms-field-string__input', inputClassName);
   return React.createElement(FieldBlock, _extends({
@@ -78,28 +79,36 @@ function StringComponent(props) {
     warning: warning,
     error: error,
     contentsWidth: width !== false ? width : undefined
-  }, forwardSpaceProps(props)), multiline ? React.createElement(Textarea, {
+  }, pickSpacingProps(props)), multiline ? React.createElement(Textarea, {
     id: id,
     className: cn,
     placeholder: placeholder,
     value: value,
-    on_focus: onFocus,
-    on_blur: onBlur,
-    on_change: onChange,
+    suffix: help ? React.createElement(HelpButton, {
+      title: help.title,
+      left: "x-small"
+    }, help.contents) : undefined,
+    on_focus: handleFocus,
+    on_blur: handleBlur,
+    on_change: handleChange,
     autoresize: autoresize,
     autoresize_max_rows: autoresizeMaxRows,
     disabled: disabled,
     stretch: width !== undefined
   }) : mask ? React.createElement(InputMasked, {
+    id: id,
     className: cn,
     mask: mask,
     placeholder: placeholder,
     value: (value === null || value === void 0 ? void 0 : value.toString()) ?? '',
     icon: leftIcon ?? rightIcon,
     icon_position: rightIcon && !leftIcon ? 'right' : undefined,
-    on_focus: onFocus,
-    on_blur: onBlur,
-    on_change: onChange,
+    suffix: help ? React.createElement(HelpButton, {
+      title: help.title
+    }, help.contents) : undefined,
+    on_focus: handleFocus,
+    on_blur: handleBlur,
+    on_change: handleChange,
     disabled: disabled,
     stretch: width !== undefined
   }) : React.createElement(Input, {
@@ -111,9 +120,12 @@ function StringComponent(props) {
     icon: leftIcon ?? rightIcon,
     icon_position: rightIcon && !leftIcon ? 'right' : undefined,
     clear: clear,
-    on_focus: onFocus,
-    on_blur: onBlur,
-    on_change: onChange,
+    suffix: help ? React.createElement(HelpButton, {
+      title: help.title
+    }, help.contents) : undefined,
+    on_focus: handleFocus,
+    on_blur: handleBlur,
+    on_change: handleChange,
     disabled: disabled,
     stretch: width !== undefined
   }));

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

@@ -1 +1 @@
-{"version":3,"file":"String.js","names":["React","useContext","classnames","Input","Textarea","InputMasked","forwardSpaceProps","SharedContext","FieldBlock","useField","StringComponent","props","_props$minLength","_props$maxLength","sharedContext","preparedProps","_objectSpread","errorMessages","required","translation","Forms","inputErrorRequired","minLength","stringInputErrorMinLength","replace","toString","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","type","fromInput","value","cleanedValue","emptyValue","width","id","className","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","info","warning","error","disabled","multiline","leftIcon","rightIcon","clear","autoresize","autoresizeMaxRows","characterCounter","mask","onFocus","onBlur","onChange","characterCounterElement","length","undefined","cn","createElement","_extends","forId","contentsWidth","on_focus","on_blur","on_change","autoresize_max_rows","stretch","icon","icon_position","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/String.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport { Input, Textarea } from '../../../components'\nimport { InputProps } from '../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../components/InputMasked'\nimport { forwardSpaceProps } from '../utils'\nimport SharedContext from '../../../shared/Context'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minLength?: string\n  maxLength?: string\n  pattern?: string\n}\nexport type Props = ComponentProps &\n  FieldProps<string, undefined, ErrorMessages> & {\n    inputClassName?: string\n    type?: InputProps['type']\n    multiline?: boolean\n    leftIcon?: string\n    rightIcon?: string\n    clear?: boolean\n    autoresize?: boolean\n    autoresizeMaxRows?: number\n    characterCounter?: boolean\n    mask?: InputMaskedProps['mask']\n    // Validation\n    minLength?: number\n    maxLength?: number\n    pattern?: string\n    // Styling\n    width?: false | 'medium' | 'large' | 'stretch'\n  }\n\nfunction StringComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: {\n      required: sharedContext?.translation.Forms.inputErrorRequired,\n      minLength:\n        sharedContext?.translation.Forms.stringInputErrorMinLength.replace(\n          '{minLength}',\n          props.minLength?.toString()\n        ),\n      maxLength:\n        sharedContext?.translation.Forms.stringInputErrorMaxLength.replace(\n          '{maxLength}',\n          props.maxLength?.toString()\n        ),\n      pattern: sharedContext?.translation.Forms.inputErrorPattern,\n      ...props.errorMessages,\n    },\n    schema: props.schema ?? {\n      type: 'string',\n      minLength: props.minLength,\n      maxLength: props.maxLength,\n      pattern: props.pattern,\n    },\n    fromInput: ({\n      value,\n      cleanedValue,\n    }: {\n      value: string\n      cleanedValue: string\n    }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return cleanedValue ?? value\n    },\n    width: props.width ?? 'large',\n  }\n  const {\n    id,\n    className,\n    inputClassName,\n    layout,\n    type,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    info,\n    warning,\n    error,\n    disabled,\n    multiline,\n    leftIcon,\n    rightIcon,\n    clear,\n    autoresize = true,\n    autoresizeMaxRows = 6,\n    characterCounter,\n    mask,\n    width,\n    onFocus,\n    onBlur,\n    onChange,\n  } = useField(preparedProps)\n\n  const characterCounterElement = characterCounter\n    ? props.maxLength\n      ? `${value?.length ?? '0'}/${props.maxLength}`\n      : `${value?.length ?? '0'}`\n    : undefined\n  const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-string', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary ?? characterCounterElement}\n      info={info}\n      warning={warning}\n      error={error}\n      contentsWidth={width !== false ? width : undefined}\n      {...forwardSpaceProps(props)}\n    >\n      {multiline ? (\n        <Textarea\n          id={id}\n          className={cn}\n          placeholder={placeholder}\n          value={value}\n          on_focus={onFocus}\n          on_blur={onBlur}\n          on_change={onChange}\n          autoresize={autoresize}\n          autoresize_max_rows={autoresizeMaxRows}\n          disabled={disabled}\n          stretch={width !== undefined}\n        />\n      ) : mask ? (\n        <InputMasked\n          className={cn}\n          mask={mask}\n          placeholder={placeholder}\n          value={value?.toString() ?? ''}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          on_focus={onFocus}\n          on_blur={onBlur}\n          on_change={onChange}\n          disabled={disabled}\n          stretch={width !== undefined}\n        />\n      ) : (\n        <Input\n          id={id}\n          className={cn}\n          type={type}\n          placeholder={placeholder}\n          value={value?.toString() ?? ''}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          clear={clear}\n          on_focus={onFocus}\n          on_blur={onBlur}\n          on_change={onChange}\n          disabled={disabled}\n          stretch={width !== undefined}\n        />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsEufemiaSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}
+{"version":3,"file":"String.js","names":["React","useContext","classnames","HelpButton","Input","Textarea","InputMasked","SharedContext","FieldBlock","useDataValue","pickSpacingProps","StringComponent","props","_props$minLength","_props$maxLength","sharedContext","preparedProps","_objectSpread","errorMessages","required","translation","Forms","inputErrorRequired","minLength","stringInputErrorMinLength","replace","toString","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","type","fromInput","value","cleanedValue","emptyValue","width","id","className","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","info","warning","error","disabled","help","multiline","leftIcon","rightIcon","clear","autoresize","autoresizeMaxRows","characterCounter","mask","handleFocus","handleBlur","handleChange","characterCounterElement","length","undefined","cn","createElement","_extends","forId","contentsWidth","suffix","title","left","contents","on_focus","on_blur","on_change","autoresize_max_rows","stretch","icon","icon_position","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/String.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport { HelpButton, Input, Textarea } from '../../../components'\nimport { InputProps } from '../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../components/InputMasked'\nimport SharedContext from '../../../shared/Context'\nimport FieldBlock from '../FieldBlock'\nimport { useDataValue } from '../hooks'\nimport { FieldProps, FieldHelpProps, pickSpacingProps } from '../types'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minLength?: string\n  maxLength?: string\n  pattern?: string\n}\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string, ErrorMessages> & {\n    inputClassName?: string\n    type?: InputProps['type']\n    multiline?: boolean\n    leftIcon?: string\n    rightIcon?: string\n    clear?: boolean\n    autoresize?: boolean\n    autoresizeMaxRows?: number\n    characterCounter?: boolean\n    mask?: InputMaskedProps['mask']\n    // Validation\n    minLength?: number\n    maxLength?: number\n    pattern?: string\n    // Styling\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction StringComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: {\n      required: sharedContext?.translation.Forms.inputErrorRequired,\n      minLength:\n        sharedContext?.translation.Forms.stringInputErrorMinLength.replace(\n          '{minLength}',\n          props.minLength?.toString()\n        ),\n      maxLength:\n        sharedContext?.translation.Forms.stringInputErrorMaxLength.replace(\n          '{maxLength}',\n          props.maxLength?.toString()\n        ),\n      pattern: sharedContext?.translation.Forms.inputErrorPattern,\n      ...props.errorMessages,\n    },\n    schema: props.schema ?? {\n      type: 'string',\n      minLength: props.minLength,\n      maxLength: props.maxLength,\n      pattern: props.pattern,\n    },\n    fromInput: ({\n      value,\n      cleanedValue,\n    }: {\n      value: string\n      cleanedValue: string\n    }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return cleanedValue ?? value\n    },\n    width: props.width ?? 'large',\n  }\n  const {\n    id,\n    className,\n    inputClassName,\n    layout,\n    type,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    info,\n    warning,\n    error,\n    disabled,\n    help,\n    multiline,\n    leftIcon,\n    rightIcon,\n    clear,\n    autoresize = true,\n    autoresizeMaxRows = 6,\n    characterCounter,\n    mask,\n    width,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  const characterCounterElement = characterCounter\n    ? props.maxLength\n      ? `${value?.length ?? '0'}/${props.maxLength}`\n      : `${value?.length ?? '0'}`\n    : undefined\n  const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-string', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary ?? characterCounterElement}\n      info={info}\n      warning={warning}\n      error={error}\n      contentsWidth={width !== false ? width : undefined}\n      {...pickSpacingProps(props)}\n    >\n      {multiline ? (\n        <Textarea\n          id={id}\n          className={cn}\n          placeholder={placeholder}\n          value={value}\n          suffix={\n            help ? (\n              <HelpButton title={help.title} left=\"x-small\">\n                {help.contents}\n              </HelpButton>\n            ) : undefined\n          }\n          on_focus={handleFocus}\n          on_blur={handleBlur}\n          on_change={handleChange}\n          autoresize={autoresize}\n          autoresize_max_rows={autoresizeMaxRows}\n          disabled={disabled}\n          stretch={width !== undefined}\n        />\n      ) : mask ? (\n        <InputMasked\n          id={id}\n          className={cn}\n          mask={mask}\n          placeholder={placeholder}\n          value={value?.toString() ?? ''}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          suffix={\n            help ? (\n              <HelpButton title={help.title}>{help.contents}</HelpButton>\n            ) : undefined\n          }\n          on_focus={handleFocus}\n          on_blur={handleBlur}\n          on_change={handleChange}\n          disabled={disabled}\n          stretch={width !== undefined}\n        />\n      ) : (\n        <Input\n          id={id}\n          className={cn}\n          type={type}\n          placeholder={placeholder}\n          value={value?.toString() ?? ''}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          clear={clear}\n          suffix={\n            help ? (\n              <HelpButton title={help.title}>{help.contents}</HelpButton>\n            ) : undefined\n          }\n          on_focus={handleFocus}\n          on_blur={handleBlur}\n          on_change={handleChange}\n          disabled={disabled}\n          stretch={width !== undefined}\n        />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsEufemiaSpacingProps = true\nexport default StringComponent\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,UAAU,EAAEC,KAAK,EAAEC,QAAQ,QAAQ,qBAAqB;AAEjE,OAAOC,WAAW,MAEX,iCAAiC;AACxC,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,UAAU,MAAM,eAAe;AACtC,SAASC,YAAY,QAAQ,UAAU;AACvC,SAAqCC,gBAAgB,QAAQ,UAAU;AA6BvE,SAASC,eAAeA,CAACC,KAAY,EAAE;EAAA,IAAAC,gBAAA,EAAAC,gBAAA;EACrC,MAAMC,aAAa,GAAGd,UAAU,CAACM,aAAa,CAAC;EAE/C,MAAMS,aAAoB,GAAAC,aAAA,CAAAA,aAAA,KACrBL,KAAK;IACRM,aAAa,EAAAD,aAAA;MACXE,QAAQ,EAAEJ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEK,WAAW,CAACC,KAAK,CAACC,kBAAkB;MAC7DC,SAAS,EACPR,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEK,WAAW,CAACC,KAAK,CAACG,yBAAyB,CAACC,OAAO,CAChE,aAAa,GAAAZ,gBAAA,GACbD,KAAK,CAACW,SAAS,cAAAV,gBAAA,uBAAfA,gBAAA,CAAiBa,QAAQ,CAAC,CAC5B,CAAC;MACHC,SAAS,EACPZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEK,WAAW,CAACC,KAAK,CAACO,yBAAyB,CAACH,OAAO,CAChE,aAAa,GAAAX,gBAAA,GACbF,KAAK,CAACe,SAAS,cAAAb,gBAAA,uBAAfA,gBAAA,CAAiBY,QAAQ,CAAC,CAC5B,CAAC;MACHG,OAAO,EAAEd,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEK,WAAW,CAACC,KAAK,CAACS;IAAiB,GACxDlB,KAAK,CAACM,aAAa,CACvB;IACDa,MAAM,EAAEnB,KAAK,CAACmB,MAAM,IAAI;MACtBC,IAAI,EAAE,QAAQ;MACdT,SAAS,EAAEX,KAAK,CAACW,SAAS;MAC1BI,SAAS,EAAEf,KAAK,CAACe,SAAS;MAC1BE,OAAO,EAAEjB,KAAK,CAACiB;IACjB,CAAC;IACDI,SAAS,EAAEA,CAAC;MACVC,KAAK;MACLC;IAIF,CAAC,KAAK;MACJ,IAAID,KAAK,KAAK,EAAE,EAAE;QAChB,OAAOtB,KAAK,CAACwB,UAAU;MACzB;MAEA,OAAOD,YAAY,IAAID,KAAK;IAC9B,CAAC;IACDG,KAAK,EAAEzB,KAAK,CAACyB,KAAK,IAAI;EAAO,EAC9B;EACD,MAAM;IACJC,EAAE;IACFC,SAAS;IACTC,cAAc;IACdC,MAAM;IACNT,IAAI;IACJU,WAAW;IACXC,KAAK;IACLC,gBAAgB;IAChBC,cAAc;IACdX,KAAK;IACLY,IAAI;IACJC,OAAO;IACPC,KAAK;IACLC,QAAQ;IACRC,IAAI;IACJC,SAAS;IACTC,QAAQ;IACRC,SAAS;IACTC,KAAK;IACLC,UAAU,GAAG,IAAI;IACjBC,iBAAiB,GAAG,CAAC;IACrBC,gBAAgB;IAChBC,IAAI;IACJrB,KAAK;IACLsB,WAAW;IACXC,UAAU;IACVC;EACF,CAAC,GAAGpD,YAAY,CAACO,aAAa,CAAC;EAE/B,MAAM8C,uBAAuB,GAAGL,gBAAgB,GAC5C7C,KAAK,CAACe,SAAS,GACZ,GAAE,CAAAO,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAE6B,MAAM,KAAI,GAAI,IAAGnD,KAAK,CAACe,SAAU,EAAC,GAC3C,GAAE,CAAAO,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAE6B,MAAM,KAAI,GAAI,EAAC,GAC3BC,SAAS;EACb,MAAMC,EAAE,GAAG/D,UAAU,CAAC,+BAA+B,EAAEsC,cAAc,CAAC;EAEtE,OACExC,KAAA,CAAAkE,aAAA,CAAC1D,UAAU,EAAA2D,QAAA;IACT5B,SAAS,EAAErC,UAAU,CAAC,wBAAwB,EAAEqC,SAAS,CAAE;IAC3D6B,KAAK,EAAE9B,EAAG;IACVG,MAAM,EAAEA,MAAO;IACfE,KAAK,EAAEA,KAAM;IACbC,gBAAgB,EAAEA,gBAAiB;IACnCC,cAAc,EAAEA,cAAc,IAAIiB,uBAAwB;IAC1DhB,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBC,KAAK,EAAEA,KAAM;IACbqB,aAAa,EAAEhC,KAAK,KAAK,KAAK,GAAGA,KAAK,GAAG2B;EAAU,GAC/CtD,gBAAgB,CAACE,KAAK,CAAC,GAE1BuC,SAAS,GACRnD,KAAA,CAAAkE,aAAA,CAAC7D,QAAQ;IACPiC,EAAE,EAAEA,EAAG;IACPC,SAAS,EAAE0B,EAAG;IACdvB,WAAW,EAAEA,WAAY;IACzBR,KAAK,EAAEA,KAAM;IACboC,MAAM,EACJpB,IAAI,GACFlD,KAAA,CAAAkE,aAAA,CAAC/D,UAAU;MAACoE,KAAK,EAAErB,IAAI,CAACqB,KAAM;MAACC,IAAI,EAAC;IAAS,GAC1CtB,IAAI,CAACuB,QACI,CAAC,GACXT,SACL;IACDU,QAAQ,EAAEf,WAAY;IACtBgB,OAAO,EAAEf,UAAW;IACpBgB,SAAS,EAAEf,YAAa;IACxBN,UAAU,EAAEA,UAAW;IACvBsB,mBAAmB,EAAErB,iBAAkB;IACvCP,QAAQ,EAAEA,QAAS;IACnB6B,OAAO,EAAEzC,KAAK,KAAK2B;EAAU,CAC9B,CAAC,GACAN,IAAI,GACN1D,KAAA,CAAAkE,aAAA,CAAC5D,WAAW;IACVgC,EAAE,EAAEA,EAAG;IACPC,SAAS,EAAE0B,EAAG;IACdP,IAAI,EAAEA,IAAK;IACXhB,WAAW,EAAEA,WAAY;IACzBR,KAAK,EAAE,CAAAA,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAER,QAAQ,CAAC,CAAC,KAAI,EAAG;IAC/BqD,IAAI,EAAE3B,QAAQ,IAAIC,SAAU;IAC5B2B,aAAa,EAAE3B,SAAS,IAAI,CAACD,QAAQ,GAAG,OAAO,GAAGY,SAAU;IAC5DM,MAAM,EACJpB,IAAI,GACFlD,KAAA,CAAAkE,aAAA,CAAC/D,UAAU;MAACoE,KAAK,EAAErB,IAAI,CAACqB;IAAM,GAAErB,IAAI,CAACuB,QAAqB,CAAC,GACzDT,SACL;IACDU,QAAQ,EAAEf,WAAY;IACtBgB,OAAO,EAAEf,UAAW;IACpBgB,SAAS,EAAEf,YAAa;IACxBZ,QAAQ,EAAEA,QAAS;IACnB6B,OAAO,EAAEzC,KAAK,KAAK2B;EAAU,CAC9B,CAAC,GAEFhE,KAAA,CAAAkE,aAAA,CAAC9D,KAAK;IACJkC,EAAE,EAAEA,EAAG;IACPC,SAAS,EAAE0B,EAAG;IACdjC,IAAI,EAAEA,IAAK;IACXU,WAAW,EAAEA,WAAY;IACzBR,KAAK,EAAE,CAAAA,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAER,QAAQ,CAAC,CAAC,KAAI,EAAG;IAC/BqD,IAAI,EAAE3B,QAAQ,IAAIC,SAAU;IAC5B2B,aAAa,EAAE3B,SAAS,IAAI,CAACD,QAAQ,GAAG,OAAO,GAAGY,SAAU;IAC5DV,KAAK,EAAEA,KAAM;IACbgB,MAAM,EACJpB,IAAI,GACFlD,KAAA,CAAAkE,aAAA,CAAC/D,UAAU;MAACoE,KAAK,EAAErB,IAAI,CAACqB;IAAM,GAAErB,IAAI,CAACuB,QAAqB,CAAC,GACzDT,SACL;IACDU,QAAQ,EAAEf,WAAY;IACtBgB,OAAO,EAAEf,UAAW;IACpBgB,SAAS,EAAEf,YAAa;IACxBZ,QAAQ,EAAEA,QAAS;IACnB6B,OAAO,EAAEzC,KAAK,KAAK2B;EAAU,CAC9B,CAEO,CAAC;AAEjB;AAEArD,eAAe,CAACsE,4BAA4B,GAAG,IAAI;AACnD,eAAetE,eAAe"}

package/es/extensions/forms/Field/Toggle.d.ts

@@ -1,6 +1,5 @@
-import type { ComponentProps } from '../component-types';
-import type { FieldProps } from '../field-types';
-export type Props = ComponentProps & FieldProps<unknown> & {
+import { FieldProps } from '../types';
+export type Props = FieldProps<unknown> & {
     valueOn: unknown;
     valueOff: unknown;
     variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons';

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

@@ -8,8 +8,8 @@ import { Checkbox, ToggleButton, Button, Space } from '../../../components';
 import classnames from 'classnames';
 import ButtonRow from '../Layout/ButtonRow';
 import FieldBlock from '../FieldBlock';
-import { useField } from './hooks';
-import { forwardSpaceProps } from '../utils';
+import { useDataValue } from '../hooks';
+import { pickSpacingProps } from '../types';
 import SharedContext from '../../../shared/Context';
 function Toggle(props) {
   const sharedContext = useContext(SharedContext);
@@ -23,34 +23,35 @@ function Toggle(props) {
     disabled,
     label,
     labelDescription,
+    labelSecondary,
     textOn,
     textOff,
     value,
     info,
     warning,
     error,
-    onChange
-  } = useField(props);
+    handleChange
+  } = useDataValue(props);
   const handleCheckboxChange = useCallback(({
     checked
   }) => {
-    onChange === null || onChange === void 0 ? void 0 : onChange(checked ? valueOn : valueOff);
-  }, [onChange, valueOn, valueOff]);
+    handleChange === null || handleChange === void 0 ? void 0 : handleChange(checked ? valueOn : valueOff);
+  }, [handleChange, valueOn, valueOff]);
   const setOn = useCallback(() => {
     if (value !== valueOn) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(valueOn);
+      handleChange === null || handleChange === void 0 ? void 0 : handleChange(valueOn);
     }
-  }, [onChange, value, valueOn]);
+  }, [handleChange, value, valueOn]);
   const setOff = useCallback(() => {
     if (value !== valueOff) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(valueOff);
+      handleChange === null || handleChange === void 0 ? void 0 : handleChange(valueOff);
     }
-  }, [onChange, value, valueOff]);
-  const cn = classnames('dnb-forms-field-boolean', className);
+  }, [handleChange, value, valueOff]);
+  const cn = classnames('dnb-forms-field-toggle', className);
   const fieldBlockPropsWithoutLabel = _objectSpread(_objectSpread({
     forId: id,
     className: cn
-  }, forwardSpaceProps(props)), {}, {
+  }, pickSpacingProps(props)), {}, {
     info,
     warning,
     error
@@ -58,7 +59,8 @@ function Toggle(props) {
   const fieldBlockProps = _objectSpread(_objectSpread({}, fieldBlockPropsWithoutLabel), {}, {
     layout,
     label,
-    labelDescription
+    labelDescription,
+    labelSecondary
   });
   const isOn = value === valueOn;
   switch (variant) {
@@ -71,7 +73,7 @@ function Toggle(props) {
         checked: isOn,
         disabled: disabled,
         on_change: handleCheckboxChange
-      }, forwardSpaceProps(props))));
+      }, pickSpacingProps(props))));
     case 'button':
       return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ToggleButton, {
         id: id,

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["React","useContext","useCallback","Checkbox","ToggleButton","Button","Space","classnames","ButtonRow","FieldBlock","useField","forwardSpaceProps","SharedContext","Toggle","props","sharedContext","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","textOn","textOff","value","info","warning","error","onChange","handleCheckboxChange","checked","setOn","setOff","cn","fieldBlockPropsWithoutLabel","_objectSpread","forId","fieldBlockProps","isOn","createElement","_extends","on_change","text","translation","Forms","booleanYes","booleanNo","on_click","undefined","status","_Space","bottom","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Toggle.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react'\nimport { Checkbox, ToggleButton, Button, Space } from '../../../components'\nimport classnames from 'classnames'\nimport ButtonRow from '../Layout/ButtonRow'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\nimport { forwardSpaceProps } from '../utils'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps &\n  FieldProps<unknown> & {\n    valueOn: unknown\n    valueOff: unknown\n    variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n    textOn?: string\n    textOff?: string\n  }\n\nfunction Toggle(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    layout,\n    variant,\n    disabled,\n    label,\n    labelDescription,\n    textOn,\n    textOff,\n    value,\n    info,\n    warning,\n    error,\n    onChange,\n  } = useField(props)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      onChange?.(checked ? valueOn : valueOff)\n    },\n    [onChange, valueOn, valueOff]\n  )\n\n  const setOn = useCallback(() => {\n    if (value !== valueOn) {\n      onChange?.(valueOn)\n    }\n  }, [onChange, value, valueOn])\n\n  const setOff = useCallback(() => {\n    if (value !== valueOff) {\n      onChange?.(valueOff)\n    }\n  }, [onChange, value, valueOff])\n\n  const cn = classnames('dnb-forms-field-boolean', className)\n\n  const fieldBlockPropsWithoutLabel = {\n    forId: id,\n    className: cn,\n    ...forwardSpaceProps(props),\n    info,\n    warning,\n    error,\n  }\n\n  const fieldBlockProps = {\n    ...fieldBlockPropsWithoutLabel,\n    layout,\n    label,\n    labelDescription,\n  }\n\n  const isOn = value === valueOn\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockPropsWithoutLabel}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={label}\n            checked={isOn}\n            disabled={disabled}\n            on_change={handleCheckboxChange}\n            {...forwardSpaceProps(props)}\n          />\n        </FieldBlock>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            text={\n              isOn\n                ? textOn ?? sharedContext?.translation.Forms.booleanYes\n                : textOff ?? sharedContext?.translation.Forms.booleanNo\n            }\n            checked={isOn}\n            disabled={disabled}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ButtonRow>\n            <Button\n              id={id}\n              text={textOn ?? sharedContext?.translation.Forms.booleanYes}\n              on_click={setOn}\n              variant={isOn ? undefined : 'secondary'}\n              status={error ? 'error' : undefined}\n              disabled={disabled}\n            />\n            <Button\n              id={id}\n              text={textOff ?? sharedContext?.translation.Forms.booleanNo}\n              on_click={setOff}\n              variant={isOn ? 'secondary' : undefined}\n              status={error ? 'error' : undefined}\n              disabled={disabled}\n            />\n          </ButtonRow>\n          <Space bottom=\"x-small\" />\n        </FieldBlock>\n      )\n    case 'checkbox-button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            variant=\"checkbox\"\n            text={\n              isOn\n                ? textOn ?? sharedContext?.translation.Forms.booleanYes\n                : textOff ?? sharedContext?.translation.Forms.booleanNo\n            }\n            checked={isOn}\n            disabled={disabled}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsEufemiaSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","names":["React","useContext","useCallback","Checkbox","ToggleButton","Button","Space","classnames","ButtonRow","FieldBlock","useDataValue","pickSpacingProps","SharedContext","Toggle","props","sharedContext","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","labelSecondary","textOn","textOff","value","info","warning","error","handleChange","handleCheckboxChange","checked","setOn","setOff","cn","fieldBlockPropsWithoutLabel","_objectSpread","forId","fieldBlockProps","isOn","createElement","_extends","on_change","text","translation","Forms","booleanYes","booleanNo","on_click","undefined","status","_Space","bottom","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Toggle.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react'\nimport { Checkbox, ToggleButton, Button, Space } from '../../../components'\nimport classnames from 'classnames'\nimport ButtonRow from '../Layout/ButtonRow'\nimport FieldBlock from '../FieldBlock'\nimport { useDataValue } from '../hooks'\nimport { FieldProps, pickSpacingProps } from '../types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = FieldProps<unknown> & {\n  valueOn: unknown\n  valueOff: unknown\n  variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n  textOn?: string\n  textOff?: string\n}\n\nfunction Toggle(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    layout,\n    variant,\n    disabled,\n    label,\n    labelDescription,\n    labelSecondary,\n    textOn,\n    textOff,\n    value,\n    info,\n    warning,\n    error,\n    handleChange,\n  } = useDataValue(props)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      handleChange?.(checked ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n\n  const setOn = useCallback(() => {\n    if (value !== valueOn) {\n      handleChange?.(valueOn)\n    }\n  }, [handleChange, value, valueOn])\n\n  const setOff = useCallback(() => {\n    if (value !== valueOff) {\n      handleChange?.(valueOff)\n    }\n  }, [handleChange, value, valueOff])\n\n  const cn = classnames('dnb-forms-field-toggle', className)\n\n  const fieldBlockPropsWithoutLabel = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n  }\n\n  const fieldBlockProps = {\n    ...fieldBlockPropsWithoutLabel,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\n  }\n\n  const isOn = value === valueOn\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockPropsWithoutLabel}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={label}\n            checked={isOn}\n            disabled={disabled}\n            on_change={handleCheckboxChange}\n            {...pickSpacingProps(props)}\n          />\n        </FieldBlock>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            text={\n              isOn\n                ? textOn ?? sharedContext?.translation.Forms.booleanYes\n                : textOff ?? sharedContext?.translation.Forms.booleanNo\n            }\n            checked={isOn}\n            disabled={disabled}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ButtonRow>\n            <Button\n              id={id}\n              text={textOn ?? sharedContext?.translation.Forms.booleanYes}\n              on_click={setOn}\n              variant={isOn ? undefined : 'secondary'}\n              status={error ? 'error' : undefined}\n              disabled={disabled}\n            />\n            <Button\n              id={id}\n              text={textOff ?? sharedContext?.translation.Forms.booleanNo}\n              on_click={setOff}\n              variant={isOn ? 'secondary' : undefined}\n              status={error ? 'error' : undefined}\n              disabled={disabled}\n            />\n          </ButtonRow>\n          <Space bottom=\"x-small\" />\n        </FieldBlock>\n      )\n    case 'checkbox-button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            variant=\"checkbox\"\n            text={\n              isOn\n                ? textOn ?? sharedContext?.translation.Forms.booleanYes\n                : textOff ?? sharedContext?.translation.Forms.booleanNo\n            }\n            checked={isOn}\n            disabled={disabled}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsEufemiaSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}

package/es/extensions/forms/Field/fields.scss

@@ -1,2 +1,2 @@
-$forms-field-width-medium: 176px;
-$forms-field-width-large: 336px;
+$forms-field-width-medium: 11rem;
+$forms-field-width-large: 21rem;

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

@@ -5,8 +5,6 @@ import BooleanComponent from './Boolean';
 import Currency from './Currency';
 import DateComponent from './Date';
 import Email from './Email';
-import FirstName from './FirstName';
-import LastName from './LastName';
 import NationalIdentityNumber from './NationalIdentityNumber';
 import PhoneNumber from './PhoneNumber';
 import OrganizationNumber from './OrganizationNumber';
@@ -16,6 +14,7 @@ import ArraySelection from './ArraySelection';
 import Option from './Option';
 import SelectCountry from './SelectCountry';
 import BankAccountNumber from './BankAccountNumber';
+import CountryCode from './CountryCode';
 declare const Field: {
     String: typeof StringComponent;
     Number: typeof NumberComponent;
@@ -24,8 +23,6 @@ declare const Field: {
     Currency: typeof Currency;
     Date: typeof DateComponent;
     Email: typeof Email;
-    FirstName: typeof FirstName;
-    LastName: typeof LastName;
     NationalIdentityNumber: typeof NationalIdentityNumber;
     OrganizationNumber: typeof OrganizationNumber;
     PhoneNumber: typeof PhoneNumber;
@@ -35,5 +32,6 @@ declare const Field: {
     Option: typeof Option;
     SelectCountry: typeof SelectCountry;
     BankAccountNumber: typeof BankAccountNumber;
+    CountryCode: typeof CountryCode;
 };
 export default Field;

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

@@ -5,8 +5,6 @@ import BooleanComponent from './Boolean';
 import Currency from './Currency';
 import DateComponent from './Date';
 import Email from './Email';
-import FirstName from './FirstName';
-import LastName from './LastName';
 import NationalIdentityNumber from './NationalIdentityNumber';
 import PhoneNumber from './PhoneNumber';
 import OrganizationNumber from './OrganizationNumber';
@@ -16,6 +14,7 @@ import ArraySelection from './ArraySelection';
 import Option from './Option';
 import SelectCountry from './SelectCountry';
 import BankAccountNumber from './BankAccountNumber';
+import CountryCode from './CountryCode';
 const Field = {
   String: StringComponent,
   Number: NumberComponent,
@@ -24,8 +23,6 @@ const Field = {
   Currency,
   Date: DateComponent,
   Email,
-  FirstName,
-  LastName,
   NationalIdentityNumber,
   OrganizationNumber,
   PhoneNumber,
@@ -34,7 +31,8 @@ const Field = {
   ArraySelection,
   Option,
   SelectCountry,
-  BankAccountNumber
+  BankAccountNumber,
+  CountryCode
 };
 export default Field;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["StringComponent","NumberComponent","Toggle","BooleanComponent","Currency","DateComponent","Email","FirstName","LastName","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","Field","String","Number","Boolean","Date"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["import StringComponent from './String'\nimport NumberComponent from './Number'\nimport Toggle from './Toggle'\nimport BooleanComponent from './Boolean'\nimport Currency from './Currency'\nimport DateComponent from './Date'\nimport Email from './Email'\nimport FirstName from './FirstName'\nimport LastName from './LastName'\nimport NationalIdentityNumber from './NationalIdentityNumber'\nimport PhoneNumber from './PhoneNumber'\nimport OrganizationNumber from './OrganizationNumber'\nimport PostalCodeAndCity from './PostalCodeAndCity'\nimport Selection from './Selection'\nimport ArraySelection from './ArraySelection';\nimport Option from './Option'\nimport SelectCountry from './SelectCountry'\nimport BankAccountNumber from './BankAccountNumber'\n\nconst Field = {\n  String: StringComponent,\n  Number: NumberComponent,\n  Toggle,\n  Boolean: BooleanComponent,\n  Currency,\n  Date: DateComponent,\n  Email,\n  FirstName,\n  LastName,\n  NationalIdentityNumber,\n  OrganizationNumber,\n  PhoneNumber,\n  PostalCodeAndCity,\n  Selection,\n  ArraySelection,\n  Option,\n  SelectCountry,\n  BankAccountNumber,\n}\n\nexport default Field\n"],"mappings":"AAAA,OAAOA,eAAe,MAAM,UAAU;AACtC,OAAOC,eAAe,MAAM,UAAU;AACtC,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,gBAAgB,MAAM,WAAW;AACxC,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,aAAa,MAAM,QAAQ;AAClC,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,sBAAsB,MAAM,0BAA0B;AAC7D,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,iBAAiB,MAAM,qBAAqB;AAEnD,MAAMC,KAAK,GAAG;EACZC,MAAM,EAAEnB,eAAe;EACvBoB,MAAM,EAAEnB,eAAe;EACvBC,MAAM;EACNmB,OAAO,EAAElB,gBAAgB;EACzBC,QAAQ;EACRkB,IAAI,EAAEjB,aAAa;EACnBC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,sBAAsB;EACtBE,kBAAkB;EAClBD,WAAW;EACXE,iBAAiB;EACjBC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,aAAa;EACbC;AACF,CAAC;AAED,eAAeC,KAAK"}
+{"version":3,"file":"index.js","names":["StringComponent","NumberComponent","Toggle","BooleanComponent","Currency","DateComponent","Email","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","CountryCode","Field","String","Number","Boolean","Date"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["import StringComponent from './String'\nimport NumberComponent from './Number'\nimport Toggle from './Toggle'\nimport BooleanComponent from './Boolean'\nimport Currency from './Currency'\nimport DateComponent from './Date'\nimport Email from './Email'\nimport NationalIdentityNumber from './NationalIdentityNumber'\nimport PhoneNumber from './PhoneNumber'\nimport OrganizationNumber from './OrganizationNumber'\nimport PostalCodeAndCity from './PostalCodeAndCity'\nimport Selection from './Selection'\nimport ArraySelection from './ArraySelection'\nimport Option from './Option'\nimport SelectCountry from './SelectCountry'\nimport BankAccountNumber from './BankAccountNumber'\nimport CountryCode from './CountryCode'\n\nconst Field = {\n  String: StringComponent,\n  Number: NumberComponent,\n  Toggle,\n  Boolean: BooleanComponent,\n  Currency,\n  Date: DateComponent,\n  Email,\n  NationalIdentityNumber,\n  OrganizationNumber,\n  PhoneNumber,\n  PostalCodeAndCity,\n  Selection,\n  ArraySelection,\n  Option,\n  SelectCountry,\n  BankAccountNumber,\n  CountryCode,\n}\n\nexport default Field\n"],"mappings":"AAAA,OAAOA,eAAe,MAAM,UAAU;AACtC,OAAOC,eAAe,MAAM,UAAU;AACtC,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,gBAAgB,MAAM,WAAW;AACxC,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,aAAa,MAAM,QAAQ;AAClC,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAOC,sBAAsB,MAAM,0BAA0B;AAC7D,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,WAAW,MAAM,eAAe;AAEvC,MAAMC,KAAK,GAAG;EACZC,MAAM,EAAElB,eAAe;EACvBmB,MAAM,EAAElB,eAAe;EACvBC,MAAM;EACNkB,OAAO,EAAEjB,gBAAgB;EACzBC,QAAQ;EACRiB,IAAI,EAAEhB,aAAa;EACnBC,KAAK;EACLC,sBAAsB;EACtBE,kBAAkB;EAClBD,WAAW;EACXE,iBAAiB;EACjBC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,aAAa;EACbC,iBAAiB;EACjBC;AACF,CAAC;AAED,eAAeC,KAAK"}

package/es/extensions/forms/Field/style/dnb-array-selection.css

@@ -0,0 +1,13 @@
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: column;
+  grid-row-gap: var(--spacing-x-small);
+  row-gap: var(--spacing-x-small);
+}
+.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: row wrap;
+  grid-column-gap: var(--spacing-small);
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
+}

package/es/extensions/forms/Field/style/dnb-array-selection.min.css

@@ -0,0 +1 @@
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{grid-row-gap:var(--spacing-x-small);display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap}

package/es/extensions/forms/Field/style/dnb-array-selection.scss

@@ -0,0 +1,15 @@
+@import '../../variables.scss';
+
+.dnb-forms-field-array-selection {
+  &--options-layout-vertical &__options {
+    display: flex;
+    flex-flow: column;
+    row-gap: var(--spacing-x-small);
+  }
+
+  &--options-layout-horizontal &__options {
+    display: flex;
+    flex-flow: row wrap;
+    column-gap: var(--spacing-small);
+  }
+}

package/es/extensions/forms/Field/style/dnb-country-code.css

@@ -0,0 +1,12 @@
+.dnb-forms-field-country-code .dnb-autocomplete__inner {
+  --autocomplete-width: 9rem;
+}
+.dnb-forms-field-country-code--width-small .dnb-autocomplete__inner {
+  --autocomplete-width: 5rem;
+}
+.dnb-forms-field-country-code--width-medium .dnb-autocomplete__inner {
+  --autocomplete-width: 11rem;
+}
+.dnb-forms-field-country-code--width-large .dnb-autocomplete__inner {
+  --autocomplete-width: 21rem;
+}

package/es/extensions/forms/Field/style/dnb-country-code.min.css

@@ -0,0 +1 @@
+.dnb-forms-field-country-code .dnb-autocomplete__inner{--autocomplete-width:9rem}.dnb-forms-field-country-code--width-small .dnb-autocomplete__inner{--autocomplete-width:5rem}.dnb-forms-field-country-code--width-medium .dnb-autocomplete__inner{--autocomplete-width:11rem}.dnb-forms-field-country-code--width-large .dnb-autocomplete__inner{--autocomplete-width:21rem}

package/es/extensions/forms/Field/style/dnb-country-code.scss

@@ -0,0 +1,19 @@
+@import '../../variables.scss';
+
+.dnb-forms-field-country-code {
+  .dnb-autocomplete__inner {
+    --autocomplete-width: 9rem;
+  }
+
+  &--width-small .dnb-autocomplete__inner {
+    --autocomplete-width: #{$forms-field-width-small};
+  }
+
+  &--width-medium .dnb-autocomplete__inner {
+    --autocomplete-width: #{$forms-field-width-medium};
+  }
+
+  &--width-large .dnb-autocomplete__inner {
+    --autocomplete-width: #{$forms-field-width-large};
+  }
+}

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

@@ -9,17 +9,13 @@
   width: 100%;
 }
 .dnb-forms-field-phone-number--width-large {
-  width: 336px;
-}
-.dnb-forms-field-phone-number--width-medium {
-  width: 176px;
+  width: 21rem;
 }
 .dnb-forms-field-phone-number__country-code {
-  --autocomplete-width: 145px;
-  flex: 0 144px;
+  flex: 0 9rem;
 }
 .dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell {
-  width: 144px;
+  width: 9rem;
 }
 .dnb-forms-field-phone-number__number {
   flex: 1;

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

@@ -1 +1 @@
-.dnb-forms-field-phone-number{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-phone-number--width-stretch{width:100%}.dnb-forms-field-phone-number--width-large{width:336px}.dnb-forms-field-phone-number--width-medium{width:176px}.dnb-forms-field-phone-number__country-code{--autocomplete-width:145px;flex:0 144px}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:144px}.dnb-forms-field-phone-number__number{flex:1}
+.dnb-forms-field-phone-number{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-phone-number--width-stretch{width:100%}.dnb-forms-field-phone-number--width-large{width:21rem}.dnb-forms-field-phone-number__country-code{flex:0 9rem}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:9rem}.dnb-forms-field-phone-number__number{flex:1}

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

@@ -1,4 +1,4 @@
-@import '../fields.scss';
+@import '../../variables.scss';
 
 .dnb-forms-field-phone-number {
   display: flex;
@@ -13,16 +13,11 @@
     width: $forms-field-width-large;
   }
 
-  &--width-medium {
-    width: $forms-field-width-medium;
-  }
-
   &__country-code {
-    --autocomplete-width: 145px;
-    flex: 0 144px;
+    flex: 0 9rem;
 
     .dnb-autocomplete__shell {
-      width: 144px;
+      width: 9rem;
     }
   }
 

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

@@ -5,11 +5,14 @@
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+.dnb-forms-field-postal-code-and-city--width-small {
+  width: 5rem;
+}
 .dnb-forms-field-postal-code-and-city--width-medium {
-  width: 176px;
+  width: 11rem;
 }
 .dnb-forms-field-postal-code-and-city--width-large {
-  width: 336px;
+  width: 21rem;
 }
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;

package/es/extensions/forms/Field/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--width-medium{width:176px}.dnb-forms-field-postal-code-and-city--width-large{width:336px}.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{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--width-small{width:5rem}.dnb-forms-field-postal-code-and-city--width-medium{width:11rem}.dnb-forms-field-postal-code-and-city--width-large{width:21rem}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}

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

@@ -1,4 +1,4 @@
-@import '../fields.scss';
+@import '../../variables.scss';
 
 .dnb-forms-field-postal-code-and-city {
   &__fields {
@@ -7,6 +7,10 @@
     column-gap: var(--spacing-small);
   }
 
+  &--width-small {
+    width: $forms-field-width-small;
+  }
+
   &--width-medium {
     width: $forms-field-width-medium;
   }

package/es/extensions/forms/Field/style/dnb-selection.css

@@ -1,6 +1,9 @@
 .dnb-forms-field-selection--width-large .dnb-dropdown__shell {
-  width: 336px;
+  width: 21rem;
 }
 .dnb-forms-field-selection--width-medium .dnb-dropdown__shell {
-  width: 176px;
+  width: 11rem;
+}
+.dnb-forms-field-selection--width-small .dnb-dropdown__shell {
+  width: 5rem;
 }

package/es/extensions/forms/Field/style/dnb-selection.min.css

@@ -1 +1 @@
-.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:336px}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:176px}
+.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:21rem}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:11rem}.dnb-forms-field-selection--width-small .dnb-dropdown__shell{width:5rem}

package/es/extensions/forms/Field/style/dnb-selection.scss

@@ -1,4 +1,4 @@
-@import '../fields.scss';
+@import '../../variables.scss';
 
 .dnb-forms-field-selection {
   &--width-large {
@@ -12,4 +12,10 @@
       width: $forms-field-width-medium;
     }
   }
+
+  &--width-small {
+    .dnb-dropdown__shell {
+      width: $forms-field-width-small;
+    }
+  }
 }

package/es/extensions/forms/Field/style/index.scss

@@ -1,3 +1,5 @@
 @import './dnb-phone-number.scss';
 @import './dnb-postal-code-and-city.scss';
 @import './dnb-selection.scss';
+@import './dnb-array-selection.scss';
+@import './dnb-country-code.scss';

package/es/extensions/forms/FieldBlock/FieldBlock.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
-import type { ComponentProps } from '../component-types';
-import type { FieldProps } from '../field-types';
-export type Props = ComponentProps & Pick<FieldProps, 'layout' | 'label' | 'labelDescription' | 'labelSecondary' | 'info' | 'warning' | 'error'> & {
+import { ComponentProps, FieldProps } from '../types';
+export type Props = Pick<FieldProps, keyof ComponentProps | 'layout' | 'label' | 'labelDescription' | 'labelSecondary' | 'info' | 'warning' | 'error'> & {
     forId?: string;
+    contentClassName?: string;
     children: React.ReactNode;
     /** Width of outer block element */
-    width?: 'medium' | 'large';
+    width?: 'small' | 'medium' | 'large';
     /** Width of contents block, while label etc can be wider if space is available */
-    contentsWidth?: 'medium' | 'large' | 'stretch';
+    contentsWidth?: 'small' | 'medium' | 'large' | 'stretch';
 };
 declare function FieldBlock(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace FieldBlock {