@dnb/eufemia 10.6.0 → 10.7.0

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useCallback","Div","Dropdown","Radio","Checkbox","classnames","forwardSpaceProps","Option","useField","Selection","props","className","variant","label","layout","placeholder","value","error","disabled","emptyValue","width","onBlur","onFocus","onChange","children","handleDropdownChange","data","selected_key","handleRadioChange","undefined","handleHide","onBlurValue","createElement","_extends","Children","toArray","filter","child","isValidElement","type","map","i","key","title","String","Group","layout_direction","on_change","vertical","text","content","_em","list_class","portal_class","default_value","label_direction","status","message","on_show","on_hide","stretch","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Selection.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { Div } from '../../../elements'\nimport { Dropdown, Radio, Checkbox } from '../../../components'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport Option from './Option'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  FieldProps<string | number> & {\n    children?: React.ReactNode\n    variant?: 'dropdown' | 'radio' | 'checkbox'\n    // Styling\n    width?: false | 'medium' | 'large' | 'stretch'\n  }\n\nfunction Selection(props: Props) {\n  const {\n    className,\n    variant,\n    label,\n    layout = 'vertical',\n    placeholder,\n    value,\n    error,\n    disabled,\n    emptyValue,\n    width = 'large',\n    onBlur,\n    onFocus,\n    onChange,\n    children,\n  } = useField(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selected_key } }) => {\n      onChange?.(!selected_key ? emptyValue : selected_key)\n    },\n    [onChange, emptyValue]\n  )\n\n  const handleRadioChange = useCallback(\n    ({ value }) => {\n      onChange?.(value === undefined ? emptyValue : value)\n    },\n    [onChange, emptyValue]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      // Provide a value because selecting an option will lead to onChange and onBlur called in parallel, so onBlur might receive the old value\n      onBlur?.({ onBlurValue: data?.selected_key })\n    },\n    [onBlur]\n  )\n\n  switch (variant) {\n    case 'checkbox':\n      return (\n        <Div\n          className={classnames('dnb-forms-field-selection', className)}\n          {...forwardSpaceProps(props)}\n        >\n          {React.Children.toArray(children)\n            .filter(\n              (child) =>\n                React.isValidElement(child) && child.type === Option\n            )\n            .map((child: React.ReactElement, i) => (\n              <Checkbox\n                key={child.props.value ?? `option-${i}`}\n                label={child.props.title ?? child.props.children}\n                value={String(child.props.value ?? '')}\n              />\n            ))}\n        </Div>\n      )\n    case 'radio':\n      return (\n        <Radio.Group\n          className={classnames('dnb-forms-field-selection', className)}\n          label={label}\n          layout_direction=\"column\"\n          on_change={handleRadioChange}\n          {...forwardSpaceProps(props)}\n          vertical\n        >\n          {React.Children.toArray(children)\n            .filter(\n              (child) =>\n                React.isValidElement(child) && child.type === Option\n            )\n            .map((child: React.ReactElement, i) => (\n              <Radio\n                key={child.props.value ?? `option-${i}`}\n                label={child.props.title ?? child.props.children}\n                value={String(child.props.value ?? '')}\n              />\n            ))}\n        </Radio.Group>\n      )\n    default:\n    case 'dropdown': {\n      const data = React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === Option) {\n          // Option components\n          return child.props.text\n            ? {\n                selected_key: String(child.props.value ?? ''),\n                content: [\n                  child.props.title ?? child.props.children ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selected_key: child.props.value,\n                content: child.props.title ?? child.props.children,\n              }\n        }\n\n        // For other children, just show them as content\n        return {\n          content: child,\n        }\n      })\n\n      return (\n        <Dropdown\n          className={classnames(\n            'dnb-forms-field-selection',\n            width !== false &&\n              width !== 'stretch' &&\n              `dnb-forms-field-selection--width-${width}`,\n            className\n          )}\n          list_class=\"dnb-forms-field-selection__list\"\n          portal_class=\"dnb-forms-field-selection__portal\"\n          title={placeholder}\n          default_value={String(value ?? '')}\n          label={label}\n          label_direction={layout}\n          status={error?.message}\n          disabled={disabled}\n          data={data}\n          on_change={handleDropdownChange}\n          on_show={onFocus}\n          on_hide={handleHide}\n          {...forwardSpaceProps(props)}\n          stretch={width === 'stretch'}\n        />\n      )\n    }\n  }\n}\n\nSelection._supportsEufemiaSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
+{"version":3,"file":"Selection.js","names":["React","useCallback","Div","Dropdown","Radio","Checkbox","classnames","forwardSpaceProps","Option","useField","Selection","props","className","variant","label","layout","placeholder","value","error","disabled","emptyValue","width","onBlur","onFocus","onChange","children","handleDropdownChange","data","selected_key","handleRadioChange","undefined","handleHide","onBlurValue","createElement","_extends","Children","toArray","filter","child","isValidElement","type","map","i","key","title","String","Group","layout_direction","on_change","vertical","text","content","_em","list_class","portal_class","default_value","label_direction","status","message","on_show","on_hide","stretch","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Selection.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { Div } from '../../../elements'\nimport { Dropdown, Radio, Checkbox } from '../../../components'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport Option from './Option'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  FieldProps<string | number> & {\n    children?: React.ReactNode\n    variant?: 'dropdown' | 'radio' | 'checkbox'\n    // Styling\n    width?: 'medium' | 'large' | 'stretch'\n  }\n\nfunction Selection(props: Props) {\n  const {\n    className,\n    variant,\n    label,\n    layout = 'vertical',\n    placeholder,\n    value,\n    error,\n    disabled,\n    emptyValue,\n    width = 'large',\n    onBlur,\n    onFocus,\n    onChange,\n    children,\n  } = useField(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selected_key } }) => {\n      onChange?.(!selected_key ? emptyValue : selected_key)\n    },\n    [onChange, emptyValue]\n  )\n\n  const handleRadioChange = useCallback(\n    ({ value }) => {\n      onChange?.(value === undefined ? emptyValue : value)\n    },\n    [onChange, emptyValue]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      // Provide a value because selecting an option will lead to onChange and onBlur called in parallel, so onBlur might receive the old value\n      onBlur?.({ onBlurValue: data?.selected_key })\n    },\n    [onBlur]\n  )\n\n  switch (variant) {\n    case 'checkbox':\n      return (\n        <Div\n          className={classnames('dnb-forms-field-selection', className)}\n          {...forwardSpaceProps(props)}\n        >\n          {React.Children.toArray(children)\n            .filter(\n              (child) =>\n                React.isValidElement(child) && child.type === Option\n            )\n            .map((child: React.ReactElement, i) => (\n              <Checkbox\n                key={child.props.value ?? `option-${i}`}\n                label={child.props.title ?? child.props.children}\n                value={String(child.props.value ?? '')}\n              />\n            ))}\n        </Div>\n      )\n    case 'radio':\n      return (\n        <Radio.Group\n          className={classnames('dnb-forms-field-selection', className)}\n          label={label}\n          layout_direction=\"column\"\n          on_change={handleRadioChange}\n          {...forwardSpaceProps(props)}\n          vertical\n        >\n          {React.Children.toArray(children)\n            .filter(\n              (child) =>\n                React.isValidElement(child) && child.type === Option\n            )\n            .map((child: React.ReactElement, i) => (\n              <Radio\n                key={child.props.value ?? `option-${i}`}\n                label={child.props.title ?? child.props.children}\n                value={String(child.props.value ?? '')}\n              />\n            ))}\n        </Radio.Group>\n      )\n    default:\n    case 'dropdown': {\n      const data = React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === Option) {\n          // Option components\n          return child.props.text\n            ? {\n                selected_key: String(child.props.value ?? ''),\n                content: [\n                  child.props.title ?? child.props.children ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selected_key: child.props.value,\n                content: child.props.title ?? child.props.children,\n              }\n        }\n\n        // For other children, just show them as content\n        return {\n          content: child,\n        }\n      })\n\n      return (\n        <Dropdown\n          className={classnames(\n            'dnb-forms-field-selection',\n            width !== 'stretch' &&\n              `dnb-forms-field-selection--width-${width}`,\n            className\n          )}\n          list_class=\"dnb-forms-field-selection__list\"\n          portal_class=\"dnb-forms-field-selection__portal\"\n          title={placeholder}\n          default_value={String(value ?? '')}\n          label={label}\n          label_direction={layout}\n          status={error?.message}\n          disabled={disabled}\n          data={data}\n          on_change={handleDropdownChange}\n          on_show={onFocus}\n          on_hide={handleHide}\n          {...forwardSpaceProps(props)}\n          stretch={width === 'stretch'}\n        />\n      )\n    }\n  }\n}\n\nSelection._supportsEufemiaSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

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

@@ -66,7 +66,7 @@ function StringComponent(props) {
     onChange
   } = useField(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, width !== false && width !== 'stretch' && `dnb-forms-field-string__input--width-${width}`);
+  const cn = classnames('dnb-forms-field-string__input', inputClassName);
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-string', className),
     forId: id,
@@ -76,7 +76,8 @@ function StringComponent(props) {
     labelSecondary: labelSecondary ?? characterCounterElement,
     info: info,
     warning: warning,
-    error: error
+    error: error,
+    contentsWidth: width !== false ? width : undefined
   }, forwardSpaceProps(props)), multiline ? React.createElement(Textarea, {
     id: id,
     className: cn,
@@ -88,7 +89,7 @@ function StringComponent(props) {
     autoresize: autoresize,
     autoresize_max_rows: autoresizeMaxRows,
     disabled: disabled,
-    stretch: width === 'stretch'
+    stretch: width !== undefined
   }) : mask ? React.createElement(InputMasked, {
     className: cn,
     mask: mask,
@@ -100,7 +101,7 @@ function StringComponent(props) {
     on_blur: onBlur,
     on_change: onChange,
     disabled: disabled,
-    stretch: width === 'stretch'
+    stretch: width !== undefined
   }) : React.createElement(Input, {
     id: id,
     className: cn,
@@ -114,7 +115,7 @@ function StringComponent(props) {
     on_blur: onBlur,
     on_change: onChange,
     disabled: disabled,
-    stretch: width === 'stretch'
+    stretch: width !== undefined
   }));
 }
 StringComponent._supportsEufemiaSpacingProps = true;

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","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(\n    'dnb-forms-field-string__input',\n    width !== false &&\n      width !== 'stretch' &&\n      `dnb-forms-field-string__input--width-${width}`,\n    inputClassName\n  )\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      {...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 === 'stretch'}\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 === 'stretch'}\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 === 'stretch'}\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","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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"}

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

@@ -5,6 +5,9 @@
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+.dnb-forms-field-phone-number--width-stretch {
+  width: 100%;
+}
 .dnb-forms-field-phone-number--width-large {
   width: 336px;
 }

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-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: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}

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

@@ -5,6 +5,10 @@
   flex-flow: row;
   column-gap: var(--spacing-small);
 
+  &--width-stretch {
+    width: 100%;
+  }
+
   &--width-large {
     width: $forms-field-width-large;
   }

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

@@ -2,5 +2,6 @@
  * Web Style Import
  *
  */
-import './dnb-national-identity-number.scss';
 import './dnb-phone-number.scss';
+import './dnb-postal-code-and-city.scss';
+import './dnb-selection.scss';

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

@@ -1,3 +1,4 @@
-import "./dnb-national-identity-number.min.css";
 import "./dnb-phone-number.min.css";
+import "./dnb-postal-code-and-city.min.css";
+import "./dnb-selection.min.css";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/extensions/forms/Field/style/index.ts"],"sourcesContent":["/**\n * Web Style Import\n *\n */\n\nimport './dnb-national-identity-number.scss'\nimport './dnb-phone-number.scss'\n"],"mappings":"AAKA,OAAO,wCAAqC;AAC5C,OAAO,4BAAyB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/extensions/forms/Field/style/index.ts"],"sourcesContent":["/**\n * Web Style Import\n *\n */\n\nimport './dnb-phone-number.scss'\nimport './dnb-postal-code-and-city.scss'\nimport './dnb-selection.scss'\n"],"mappings":"AAKA,OAAO,4BAAyB;AAChC,OAAO,oCAAiC;AACxC,OAAO,yBAAsB"}

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

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

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

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

package/es/extensions/forms/FieldBlock/FieldBlock.js

@@ -16,10 +16,13 @@ function FieldBlock(props) {
     info,
     warning,
     error,
+    width,
+    contentsWidth,
     children
   } = props;
+  const cn = classnames('dnb-forms-field-block', className, width !== undefined && `dnb-forms-field-block--width-${width}`);
   return React.createElement(Div, _extends({
-    className: classnames('dnb-forms-field-block', className)
+    className: cn
   }, forwardSpaceProps(props)), labelDescription || labelSecondary ? React.createElement("div", {
     className: "dnb-forms-field-block__label-block"
   }, label || labelDescription ? React.createElement(FormLabel, {
@@ -38,7 +41,9 @@ function FieldBlock(props) {
     space: {
       bottom: 'x-small'
     }
-  }, label), children, error && React.createElement(FormStatus, {
+  }, label), React.createElement("div", {
+    className: 'dnb-forms-field-block__contents' + (contentsWidth !== undefined ? ` dnb-forms-field-block__contents--width-${contentsWidth}` : "")
+  }, children), error && React.createElement(FormStatus, {
     state: "error",
     id: forId ? `${forId}-form-status` : undefined,
     text: error === null || error === void 0 ? void 0 : error.message,

package/es/extensions/forms/FieldBlock/FieldBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldBlock.js","names":["React","classnames","Div","Span","FormLabel","FormStatus","forwardSpaceProps","FormError","FieldBlock","props","className","forId","layout","label","labelDescription","labelSecondary","info","warning","error","children","createElement","_extends","for_id","label_direction","space","bottom","Fragment","state","id","undefined","text","message","top","Error","toString","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Div, Span } from '../../../elements'\nimport { FormLabel, FormStatus } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport { FormError } from '../types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  Pick<\n    FieldProps,\n    | 'layout'\n    | 'label'\n    | 'labelDescription'\n    | 'labelSecondary'\n    | 'info'\n    | 'warning'\n    | 'error'\n  > & {\n    forId?: string\n    children: React.ReactNode\n  }\n\nfunction FieldBlock(props: Props) {\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    info,\n    warning,\n    error,\n    children,\n  } = props\n\n  return (\n    <Div\n      className={classnames('dnb-forms-field-block', className)}\n      {...forwardSpaceProps(props)}\n    >\n      {labelDescription || labelSecondary ? (\n        <div className=\"dnb-forms-field-block__label-block\">\n          {label || labelDescription ? (\n            <FormLabel\n              for_id={forId}\n              label_direction={layout}\n              space={{ bottom: 'x-small' }}\n            >\n              {label}\n              {labelDescription && (\n                <span className=\"dnb-forms-field-block__label-description\">\n                  {labelDescription}\n                </span>\n              )}\n            </FormLabel>\n          ) : (\n            <>&nbsp;</>\n          )}\n          {labelSecondary && (\n            <Span className=\"dnb-forms-field-block__label-secondary\">\n              {labelSecondary}\n            </Span>\n          )}\n        </div>\n      ) : (\n        label && (\n          <FormLabel\n            for_id={forId}\n            label_direction={layout}\n            space={{ bottom: 'x-small' }}\n          >\n            {label}\n          </FormLabel>\n        )\n      )}\n\n      {children}\n\n      {error && (\n        <FormStatus\n          state=\"error\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={error?.message}\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n      {warning && (\n        <FormStatus\n          state=\"warn\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={\n            (warning instanceof Error && warning.message) ||\n            (warning instanceof FormError && warning.message) ||\n            info?.toString()\n          }\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n      {info && (\n        <FormStatus\n          state=\"info\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={\n            (info instanceof Error && info.message) ||\n            (info instanceof FormError && info.message) ||\n            info?.toString()\n          }\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n    </Div>\n  )\n}\n\nFieldBlock._supportsEufemiaSpacingProps = true\nexport default FieldBlock\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,GAAG,EAAEC,IAAI,QAAQ,mBAAmB;AAC7C,SAASC,SAAS,EAAEC,UAAU,QAAQ,qBAAqB;AAC3D,SAASC,iBAAiB,QAAQ,UAAU;AAE5C,SAASC,SAAS,QAAQ,UAAU;AAkBpC,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAM;IACJC,SAAS;IACTC,KAAK;IACLC,MAAM,GAAG,UAAU;IACnBC,KAAK;IACLC,gBAAgB;IAChBC,cAAc;IACdC,IAAI;IACJC,OAAO;IACPC,KAAK;IACLC;EACF,CAAC,GAAGV,KAAK;EAET,OACET,KAAA,CAAAoB,aAAA,CAAClB,GAAG,EAAAmB,QAAA;IACFX,SAAS,EAAET,UAAU,CAAC,uBAAuB,EAAES,SAAS;EAAE,GACtDJ,iBAAiB,CAACG,KAAK,CAAC,GAE3BK,gBAAgB,IAAIC,cAAc,GACjCf,KAAA,CAAAoB,aAAA;IAAKV,SAAS,EAAC;EAAoC,GAChDG,KAAK,IAAIC,gBAAgB,GACxBd,KAAA,CAAAoB,aAAA,CAAChB,SAAS;IACRkB,MAAM,EAAEX,KAAM;IACdY,eAAe,EAAEX,MAAO;IACxBY,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAU;EAAE,GAE5BZ,KAAK,EACLC,gBAAgB,IACfd,KAAA,CAAAoB,aAAA;IAAMV,SAAS,EAAC;EAA0C,GACvDI,gBACG,CAEC,CAAC,GAEZd,KAAA,CAAAoB,aAAA,CAAApB,KAAA,CAAA0B,QAAA,QAAE,MAAQ,CACX,EACAX,cAAc,IACbf,KAAA,CAAAoB,aAAA,CAACjB,IAAI;IAACO,SAAS,EAAC;EAAwC,GACrDK,cACG,CAEL,CAAC,GAENF,KAAK,IACHb,KAAA,CAAAoB,aAAA,CAAChB,SAAS;IACRkB,MAAM,EAAEX,KAAM;IACdY,eAAe,EAAEX,MAAO;IACxBY,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAU;EAAE,GAE5BZ,KACQ,CAEd,EAEAM,QAAQ,EAERD,KAAK,IACJlB,KAAA,CAAAoB,aAAA,CAACf,UAAU;IACTsB,KAAK,EAAC,OAAO;IACbC,EAAE,EAAEjB,KAAK,GAAI,GAAEA,KAAM,cAAa,GAAGkB,SAAU;IAC/CC,IAAI,EAAEZ,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEa,OAAQ;IACrBlB,KAAK,EAAEA,KAAM;IACbW,KAAK,EAAE;MAAEQ,GAAG,EAAE;IAAU;EAAE,CAC3B,CACF,EACAf,OAAO,IACNjB,KAAA,CAAAoB,aAAA,CAACf,UAAU;IACTsB,KAAK,EAAC,MAAM;IACZC,EAAE,EAAEjB,KAAK,GAAI,GAAEA,KAAM,cAAa,GAAGkB,SAAU;IAC/CC,IAAI,EACDb,OAAO,YAAYgB,KAAK,IAAIhB,OAAO,CAACc,OAAO,IAC3Cd,OAAO,YAAYV,SAAS,IAAIU,OAAO,CAACc,OAAQ,KACjDf,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEkB,QAAQ,CAAC,CAAC,CACjB;IACDrB,KAAK,EAAEA,KAAM;IACbW,KAAK,EAAE;MAAEQ,GAAG,EAAE;IAAU;EAAE,CAC3B,CACF,EACAhB,IAAI,IACHhB,KAAA,CAAAoB,aAAA,CAACf,UAAU;IACTsB,KAAK,EAAC,MAAM;IACZC,EAAE,EAAEjB,KAAK,GAAI,GAAEA,KAAM,cAAa,GAAGkB,SAAU;IAC/CC,IAAI,EACDd,IAAI,YAAYiB,KAAK,IAAIjB,IAAI,CAACe,OAAO,IACrCf,IAAI,YAAYT,SAAS,IAAIS,IAAI,CAACe,OAAQ,KAC3Cf,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEkB,QAAQ,CAAC,CAAC,CACjB;IACDrB,KAAK,EAAEA,KAAM;IACbW,KAAK,EAAE;MAAEQ,GAAG,EAAE;IAAU;EAAE,CAC3B,CAEA,CAAC;AAEV;AAEAxB,UAAU,CAAC2B,4BAA4B,GAAG,IAAI;AAC9C,eAAe3B,UAAU"}
+{"version":3,"file":"FieldBlock.js","names":["React","classnames","Div","Span","FormLabel","FormStatus","forwardSpaceProps","FormError","FieldBlock","props","className","forId","layout","label","labelDescription","labelSecondary","info","warning","error","width","contentsWidth","children","cn","undefined","createElement","_extends","for_id","label_direction","space","bottom","Fragment","state","id","text","message","top","Error","toString","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Div, Span } from '../../../elements'\nimport { FormLabel, FormStatus } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport { FormError } from '../types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  Pick<\n    FieldProps,\n    | 'layout'\n    | 'label'\n    | 'labelDescription'\n    | 'labelSecondary'\n    | 'info'\n    | 'warning'\n    | 'error'\n  > & {\n    forId?: string\n    children: React.ReactNode\n    /** Width of outer block element */\n    width?: 'medium' | 'large'\n    /** Width of contents block, while label etc can be wider if space is available */\n    contentsWidth?: 'medium' | 'large' | 'stretch'\n  }\n\nfunction FieldBlock(props: Props) {\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    info,\n    warning,\n    error,\n    width,\n    contentsWidth,\n    children,\n  } = props\n\n  const cn = classnames(\n    'dnb-forms-field-block',\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n\n  return (\n    <Div className={cn} {...forwardSpaceProps(props)}>\n      {labelDescription || labelSecondary ? (\n        <div className=\"dnb-forms-field-block__label-block\">\n          {label || labelDescription ? (\n            <FormLabel\n              for_id={forId}\n              label_direction={layout}\n              space={{ bottom: 'x-small' }}\n            >\n              {label}\n              {labelDescription && (\n                <span className=\"dnb-forms-field-block__label-description\">\n                  {labelDescription}\n                </span>\n              )}\n            </FormLabel>\n          ) : (\n            <>&nbsp;</>\n          )}\n          {labelSecondary && (\n            <Span className=\"dnb-forms-field-block__label-secondary\">\n              {labelSecondary}\n            </Span>\n          )}\n        </div>\n      ) : (\n        label && (\n          <FormLabel\n            for_id={forId}\n            label_direction={layout}\n            space={{ bottom: 'x-small' }}\n          >\n            {label}\n          </FormLabel>\n        )\n      )}\n\n      <div\n        className={classnames(\n          'dnb-forms-field-block__contents',\n          contentsWidth !== undefined &&\n            `dnb-forms-field-block__contents--width-${contentsWidth}`\n        )}\n      >\n        {children}\n      </div>\n\n      {error && (\n        <FormStatus\n          state=\"error\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={error?.message}\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n      {warning && (\n        <FormStatus\n          state=\"warn\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={\n            (warning instanceof Error && warning.message) ||\n            (warning instanceof FormError && warning.message) ||\n            info?.toString()\n          }\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n      {info && (\n        <FormStatus\n          state=\"info\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={\n            (info instanceof Error && info.message) ||\n            (info instanceof FormError && info.message) ||\n            info?.toString()\n          }\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n    </Div>\n  )\n}\n\nFieldBlock._supportsEufemiaSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}

package/es/extensions/forms/FieldBlock/style/dnb-field-block.css

@@ -12,4 +12,19 @@
 .dnb-forms-field-block__label-secondary {
   color: var(--color-black-55);
   font-size: var(--font-size-small);
+}
+.dnb-forms-field-block--width-large {
+  width: 336px;
+}
+.dnb-forms-field-block--width-medium {
+  width: 176px;
+}
+.dnb-forms-field-block__contents--width-stretch {
+  width: 100%;
+}
+.dnb-forms-field-block__contents--width-large {
+  width: 336px;
+}
+.dnb-forms-field-block__contents--width-medium {
+  width: 176px;
 }

package/es/extensions/forms/FieldBlock/style/dnb-field-block.min.css

@@ -1 +1 @@
-.dnb-forms-field-block__label-block{align-items:center;display:flex;flex-flow:row;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}
+.dnb-forms-field-block__label-block{align-items:center;display:flex;flex-flow:row;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block--width-large{width:336px}.dnb-forms-field-block--width-medium{width:176px}.dnb-forms-field-block__contents--width-stretch{width:100%}.dnb-forms-field-block__contents--width-large{width:336px}.dnb-forms-field-block__contents--width-medium{width:176px}

package/es/extensions/forms/FieldBlock/style/dnb-field-block.scss

@@ -1,3 +1,5 @@
+@import '../../Field/fields.scss';
+
 .dnb-forms-field-block {
   &__label-block {
     display: flex;
@@ -16,4 +18,28 @@
     color: var(--color-black-55);
     font-size: var(--font-size-small);
   }
+
+  &--width-large {
+    width: $forms-field-width-large;
+  }
+
+  &--width-medium {
+    width: $forms-field-width-medium;
+  }
+
+  &__contents {
+    &--width-stretch {
+      width: 100%;
+    }
+
+    &--width-large {
+      width: $forms-field-width-large;
+    }
+  
+    &--width-medium {
+      width: $forms-field-width-medium;
+    }
+  }
+
+  
 }

package/es/extensions/forms/Layout/FlexContainer.js

@@ -29,7 +29,8 @@ export const isEufemiaElement = element => {
   return Object.values(EufemiaElements).some(eufemiaElement => (element === null || element === void 0 ? void 0 : element.type) === eufemiaElement);
 };
 export const isSpacePropsComponent = element => {
-  return React.isValidElement(element) && typeof element.type === 'object' && '_supportsEufemiaSpacingProps' in element.type || isEufemiaElement(element);
+  var _element$type;
+  return React.isValidElement(element) && (element === null || element === void 0 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type['_supportsEufemiaSpacingProps']) === true || isEufemiaElement(element);
 };
 const renderWithSpacing = (element, props) => {
   const takesSpaceProps = isSpacePropsComponent(element);

package/es/extensions/forms/Layout/FlexContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexContainer.js","names":["React","classnames","Space","Div","EufemiaElements","forwardSpaceProps","MainHeading","SubHeading","isHeadingElement","element","type","getSpaceTop","_element$props","_element$props2","isValidElement","props","top","space","undefined","getSpaceBottom","_element$props3","_element$props4","bottom","isEufemiaElement","Object","values","some","eufemiaElement","isSpacePropsComponent","renderWithSpacing","takesSpaceProps","cloneElement","createElement","FlexContainer","className","children","direction","wrap","justify","align","divider","spacing","cn","childrenArray","Children","toArray","_extends","map","child","i","isFirst","previousChild","currentIsHeading","previousWasHeading","spaceAboveLine","Fragment","key","_hr","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/FlexContainer.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Space } from '../../../components'\nimport { Div } from '../../../elements'\nimport * as EufemiaElements from '../../../elements'\nimport { SpaceType } from '../../../components/space/types'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport MainHeading from './MainHeading'\nimport SubHeading from './SubHeading'\n\nexport function isHeadingElement(element): boolean {\n  return element.type === MainHeading || element.type === SubHeading\n}\n\nconst getSpaceTop = (\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n  return (\n    element.props?.top ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space.top\n      : undefined)\n  )\n}\n\nconst getSpaceBottom = (\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n  return (\n    element.props?.bottom ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space.bottom\n      : undefined)\n  )\n}\n\nexport const isEufemiaElement = (element): boolean => {\n  return Object.values(EufemiaElements).some(\n    (eufemiaElement) => element?.type === eufemiaElement\n  )\n}\n\n/**\n * Is the requested element a component that can receive Eufemia space props (space, top, bottom, left and right)?\n */\nexport const isSpacePropsComponent = (\n  element: React.ReactNode\n): boolean => {\n  return (\n    (React.isValidElement(element) &&\n      typeof element.type === 'object' &&\n      '_supportsEufemiaSpacingProps' in\n        (element.type as React.JSXElementConstructor<unknown>)) ||\n    isEufemiaElement(element)\n  )\n}\n\nconst renderWithSpacing = (element: React.ReactNode, props) => {\n  const takesSpaceProps = isSpacePropsComponent(element)\n\n  return takesSpaceProps ? (\n    React.cloneElement(element as React.ReactElement<unknown>, props)\n  ) : (\n    <Div {...props}>{element}</Div>\n  )\n}\n\nexport type Props = ComponentProps & {\n  direction?: 'row' | 'column'\n  wrap?: boolean\n  justify?:\n    | 'flex-start'\n    | 'flex-end'\n    | 'center'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n  align?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'\n  divider?: 'space' | 'line'\n  /** Spacing between items inside */\n  spacing?:\n    | false\n    | 'xx-small'\n    | 'x-small'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'x-large'\n    | 'xx-large'\n  children: React.ReactNode\n}\n\nfunction FlexContainer(props: Props) {\n  const {\n    className,\n    children,\n    direction = 'column',\n    wrap = false,\n    justify = 'flex-start',\n    align = 'stretch',\n    divider = 'space',\n    spacing = 'small',\n  } = props\n\n  const cn = classnames(\n    'dnb-forms-flex-container',\n    direction && `dnb-forms-flex-container--direction-${direction}`,\n    justify && `dnb-forms-flex-container--justify-${justify}`,\n    align && `dnb-forms-flex-container--align-${align}`,\n    wrap && `dnb-forms-flex-container--wrap`,\n    divider && `dnb-forms-flex-container--divider-${divider}`,\n    spacing && `dnb-forms-flex-container--spacing-${spacing}`,\n    className\n  )\n  const childrenArray = React.Children.toArray(children)\n\n  return (\n    <Div className={cn} {...forwardSpaceProps(props)}>\n      {direction === 'column'\n        ? childrenArray.map((child, i) => {\n            // Set spacing on child components by props (instead of CSS) to be able to dynamically override by props on each child. The default\n            // is the spacing-props that controls space between children. Then override with props sent to the children, including both top\n            // and bottom when th\n            const isFirst = i === 0\n            const previousChild = childrenArray?.[i - 1]\n            const currentIsHeading = isHeadingElement(child)\n            const previousWasHeading =\n              i > 0 && isHeadingElement(previousChild)\n\n            // Always set spacing between elements in the column layout on the top props, and 0 on bottom, to avoid\n            // having to divide spacing between both with smaller values.\n            const bottom = 0\n\n            if (\n              divider === 'line' &&\n              // No line above first element\n              !isFirst &&\n              // No line above/below headings\n              !previousWasHeading &&\n              !currentIsHeading\n            ) {\n              const spaceAboveLine =\n                getSpaceBottom(previousChild) ?? spacing\n              const top = getSpaceTop(child) ?? spacing\n\n              return (\n                <React.Fragment key={`element-${i}`}>\n                  <Space top={spaceAboveLine} />\n                  <hr className=\"dnb-forms-flex-container__hr\" />\n                  {renderWithSpacing(child, {\n                    space: { top, bottom },\n                    top,\n                    bottom,\n                  })}\n                </React.Fragment>\n              )\n            }\n\n            const top =\n              // No space above first element.\n              isFirst\n                ? 0\n                : // Since top space of current and bottom space of previous component is the same\n                  getSpaceTop(child) ??\n                  getSpaceBottom(previousChild) ??\n                  spacing\n\n            return renderWithSpacing(child, {\n              key: `element-${i}`,\n              space: { top, bottom },\n              top,\n              bottom,\n            })\n          })\n        : // TODO: Consider doing the same with spacing between horizontal items (direction = row) as vertical\n          children}\n    </Div>\n  )\n}\n\nFlexContainer._supportsEufemiaSpacingProps = true\nexport default FlexContainer\n"],"mappings":"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"}
+{"version":3,"file":"FlexContainer.js","names":["React","classnames","Space","Div","EufemiaElements","forwardSpaceProps","MainHeading","SubHeading","isHeadingElement","element","type","getSpaceTop","_element$props","_element$props2","isValidElement","props","top","space","undefined","getSpaceBottom","_element$props3","_element$props4","bottom","isEufemiaElement","Object","values","some","eufemiaElement","isSpacePropsComponent","_element$type","renderWithSpacing","takesSpaceProps","cloneElement","createElement","FlexContainer","className","children","direction","wrap","justify","align","divider","spacing","cn","childrenArray","Children","toArray","_extends","map","child","i","isFirst","previousChild","currentIsHeading","previousWasHeading","spaceAboveLine","Fragment","key","_hr","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/FlexContainer.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Space } from '../../../components'\nimport { Div } from '../../../elements'\nimport * as EufemiaElements from '../../../elements'\nimport { SpaceType } from '../../../components/space/types'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport MainHeading from './MainHeading'\nimport SubHeading from './SubHeading'\n\nexport function isHeadingElement(element): boolean {\n  return element.type === MainHeading || element.type === SubHeading\n}\n\nconst getSpaceTop = (\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n  return (\n    element.props?.top ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space.top\n      : undefined)\n  )\n}\n\nconst getSpaceBottom = (\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n  return (\n    element.props?.bottom ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space.bottom\n      : undefined)\n  )\n}\n\nexport const isEufemiaElement = (element): boolean => {\n  return Object.values(EufemiaElements).some(\n    (eufemiaElement) => element?.type === eufemiaElement\n  )\n}\n\n/**\n * Is the requested element a component that can receive Eufemia space props (space, top, bottom, left and right)?\n */\nexport const isSpacePropsComponent = (\n  element: React.ReactNode\n): boolean => {\n  return (\n    (React.isValidElement(element) &&\n      element?.type?.['_supportsEufemiaSpacingProps'] === true) ||\n    isEufemiaElement(element)\n  )\n}\n\nconst renderWithSpacing = (element: React.ReactNode, props) => {\n  const takesSpaceProps = isSpacePropsComponent(element)\n\n  return takesSpaceProps ? (\n    React.cloneElement(element as React.ReactElement<unknown>, props)\n  ) : (\n    <Div {...props}>{element}</Div>\n  )\n}\n\nexport type Props = ComponentProps & {\n  direction?: 'row' | 'column'\n  wrap?: boolean\n  justify?:\n    | 'flex-start'\n    | 'flex-end'\n    | 'center'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n  align?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'\n  divider?: 'space' | 'line'\n  /** Spacing between items inside */\n  spacing?:\n    | false\n    | 'xx-small'\n    | 'x-small'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'x-large'\n    | 'xx-large'\n  children: React.ReactNode\n}\n\nfunction FlexContainer(props: Props) {\n  const {\n    className,\n    children,\n    direction = 'column',\n    wrap = false,\n    justify = 'flex-start',\n    align = 'stretch',\n    divider = 'space',\n    spacing = 'small',\n  } = props\n\n  const cn = classnames(\n    'dnb-forms-flex-container',\n    direction && `dnb-forms-flex-container--direction-${direction}`,\n    justify && `dnb-forms-flex-container--justify-${justify}`,\n    align && `dnb-forms-flex-container--align-${align}`,\n    wrap && `dnb-forms-flex-container--wrap`,\n    divider && `dnb-forms-flex-container--divider-${divider}`,\n    spacing && `dnb-forms-flex-container--spacing-${spacing}`,\n    className\n  )\n  const childrenArray = React.Children.toArray(children)\n\n  return (\n    <Div className={cn} {...forwardSpaceProps(props)}>\n      {direction === 'column'\n        ? childrenArray.map((child, i) => {\n            // Set spacing on child components by props (instead of CSS) to be able to dynamically override by props on each child. The default\n            // is the spacing-props that controls space between children. Then override with props sent to the children, including both top\n            // and bottom when th\n            const isFirst = i === 0\n            const previousChild = childrenArray?.[i - 1]\n            const currentIsHeading = isHeadingElement(child)\n            const previousWasHeading =\n              i > 0 && isHeadingElement(previousChild)\n\n            // Always set spacing between elements in the column layout on the top props, and 0 on bottom, to avoid\n            // having to divide spacing between both with smaller values.\n            const bottom = 0\n\n            if (\n              divider === 'line' &&\n              // No line above first element\n              !isFirst &&\n              // No line above/below headings\n              !previousWasHeading &&\n              !currentIsHeading\n            ) {\n              const spaceAboveLine =\n                getSpaceBottom(previousChild) ?? spacing\n              const top = getSpaceTop(child) ?? spacing\n\n              return (\n                <React.Fragment key={`element-${i}`}>\n                  <Space top={spaceAboveLine} />\n                  <hr className=\"dnb-forms-flex-container__hr\" />\n                  {renderWithSpacing(child, {\n                    space: { top, bottom },\n                    top,\n                    bottom,\n                  })}\n                </React.Fragment>\n              )\n            }\n\n            const top =\n              // No space above first element.\n              isFirst\n                ? 0\n                : // Since top space of current and bottom space of previous component is the same\n                  getSpaceTop(child) ??\n                  getSpaceBottom(previousChild) ??\n                  spacing\n\n            return renderWithSpacing(child, {\n              key: `element-${i}`,\n              space: { top, bottom },\n              top,\n              bottom,\n            })\n          })\n        : // TODO: Consider doing the same with spacing between horizontal items (direction = row) as vertical\n          children}\n    </Div>\n  )\n}\n\nFlexContainer._supportsEufemiaSpacingProps = true\nexport default FlexContainer\n"],"mappings":"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"}

package/es/extensions/forms/Layout/SubHeading.js

@@ -10,7 +10,8 @@ function SubHeading(props) {
   } = props;
   return React.createElement(Heading, _extends({
     className: classnames('dnb-forms-sub-heading', className),
-    level: "3"
+    level: "3",
+    size: "medium"
   }, forwardSpaceProps(props)), children);
 }
 SubHeading._supportsEufemiaSpacingProps = true;

package/es/extensions/forms/Layout/SubHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubHeading.js","names":["React","classnames","Heading","forwardSpaceProps","SubHeading","props","className","children","createElement","_extends","level","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/SubHeading.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Heading } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\n\nexport type Props = ComponentProps & {\n  children?: React.ReactNode\n}\n\nfunction SubHeading(props: Props) {\n  const { className, children } = props\n  return (\n    <Heading\n      className={classnames('dnb-forms-sub-heading', className)}\n      level=\"3\"\n      {...forwardSpaceProps(props)}\n    >\n      {children}\n    </Heading>\n  )\n}\n\nSubHeading._supportsEufemiaSpacingProps = true\nexport default SubHeading\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,iBAAiB,QAAQ,UAAU;AAO5C,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAM;IAAEC,SAAS;IAAEC;EAAS,CAAC,GAAGF,KAAK;EACrC,OACEL,KAAA,CAAAQ,aAAA,CAACN,OAAO,EAAAO,QAAA;IACNH,SAAS,EAAEL,UAAU,CAAC,uBAAuB,EAAEK,SAAS,CAAE;IAC1DI,KAAK,EAAC;EAAG,GACLP,iBAAiB,CAACE,KAAK,CAAC,GAE3BE,QACM,CAAC;AAEd;AAEAH,UAAU,CAACO,4BAA4B,GAAG,IAAI;AAC9C,eAAeP,UAAU"}
+{"version":3,"file":"SubHeading.js","names":["React","classnames","Heading","forwardSpaceProps","SubHeading","props","className","children","createElement","_extends","level","size","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/SubHeading.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Heading } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\n\nexport type Props = ComponentProps & {\n  children?: React.ReactNode\n}\n\nfunction SubHeading(props: Props) {\n  const { className, children } = props\n  return (\n    <Heading\n      className={classnames('dnb-forms-sub-heading', className)}\n      level=\"3\"\n      size=\"medium\"\n      {...forwardSpaceProps(props)}\n    >\n      {children}\n    </Heading>\n  )\n}\n\nSubHeading._supportsEufemiaSpacingProps = true\nexport default SubHeading\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,iBAAiB,QAAQ,UAAU;AAO5C,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAM;IAAEC,SAAS;IAAEC;EAAS,CAAC,GAAGF,KAAK;EACrC,OACEL,KAAA,CAAAQ,aAAA,CAACN,OAAO,EAAAO,QAAA;IACNH,SAAS,EAAEL,UAAU,CAAC,uBAAuB,EAAEK,SAAS,CAAE;IAC1DI,KAAK,EAAC,GAAG;IACTC,IAAI,EAAC;EAAQ,GACTR,iBAAiB,CAACE,KAAK,CAAC,GAE3BE,QACM,CAAC;AAEd;AAEAH,UAAU,CAACQ,4BAA4B,GAAG,IAAI;AAC9C,eAAeR,UAAU"}

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

@@ -1,15 +1,3 @@
-.dnb-forms-field-number__input--width-medium {
-  width: 176px;
-}
-.dnb-forms-field-number__input--width-large {
-  width: 336px;
-}
-.dnb-forms-field-number .dnb-input__inner,
-.dnb-forms-field-number .dnb-input__row,
-.dnb-forms-field-number .dnb-input__shell {
-  width: 100%;
-}
-
 .dnb-forms-field-phone-number {
   display: flex;
   flex-flow: row;
@@ -17,6 +5,9 @@
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+.dnb-forms-field-phone-number--width-stretch {
+  width: 100%;
+}
 .dnb-forms-field-phone-number--width-large {
   width: 336px;
 }
@@ -61,18 +52,6 @@
   width: 176px;
 }
 
-.dnb-forms-field-string__input--width-large {
-  width: 336px;
-}
-.dnb-forms-field-string__input--width-medium {
-  width: 176px;
-}
-.dnb-forms-field-string .dnb-input__inner,
-.dnb-forms-field-string .dnb-input__row,
-.dnb-forms-field-string .dnb-input__shell {
-  width: 100%;
-}
-
 .dnb-forms-button-row {
   display: flex;
   flex-flow: row;
@@ -218,6 +197,21 @@
   color: var(--color-black-55);
   font-size: var(--font-size-small);
 }
+.dnb-forms-field-block--width-large {
+  width: 336px;
+}
+.dnb-forms-field-block--width-medium {
+  width: 176px;
+}
+.dnb-forms-field-block__contents--width-stretch {
+  width: 100%;
+}
+.dnb-forms-field-block__contents--width-large {
+  width: 336px;
+}
+.dnb-forms-field-block__contents--width-medium {
+  width: 176px;
+}
 
 .dnb-forms-value-block {
   display: block;

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

@@ -1 +1 @@
-.dnb-forms-field-number__input--width-medium{width:176px}.dnb-forms-field-number__input--width-large{width:336px}.dnb-forms-field-number .dnb-input__inner,.dnb-forms-field-number .dnb-input__row,.dnb-forms-field-number .dnb-input__shell{width:100%}.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-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-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-selection--width-large .dnb-dropdown__shell{width:336px}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:176px}.dnb-forms-field-string__input--width-large{width:336px}.dnb-forms-field-string__input--width-medium{width:176px}.dnb-forms-field-string .dnb-input__inner,.dnb-forms-field-string .dnb-input__row,.dnb-forms-field-string .dnb-input__shell{width:100%}.dnb-forms-button-row{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-card{background-color:var(--color-white);border:4px solid #f2f2f5;border-radius:.5rem;padding:var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium)}.dnb-forms-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-forms-card+.dnb-forms-card__heading{margin-top:var(--spacing-small)}.dnb-forms-flex-container{display:flex}.dnb-forms-flex-container--direction-row{flex-direction:row}.dnb-forms-flex-container--direction-column{flex-direction:column}.dnb-forms-flex-container--justify-flex-start{justify-content:flex-start}.dnb-forms-flex-container--justify-flex-end{justify-content:flex-end}.dnb-forms-flex-container--justify-center{justify-content:center}.dnb-forms-flex-container--justify-space-between{justify-content:space-between}.dnb-forms-flex-container--justify-space-around{justify-content:space-around}.dnb-forms-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-forms-flex-container--align-flex-start{align-items:flex-start}.dnb-forms-flex-container--align-flex-end{align-items:flex-end}.dnb-forms-flex-container--align-center{align-items:center}.dnb-forms-flex-container--align-stretch{align-items:stretch}.dnb-forms-flex-container--align-baseline{align-items:baseline}.dnb-forms-flex-container--wrap{flex-wrap:wrap}.dnb-forms-flex-container__hr{border:none;border-top:1px solid var(--color-black-8);height:0;margin:0;padding:0;width:100%}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-small{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small)}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-medium{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium)}.dnb-forms-flex-item--grow{flex-grow:1}.dnb-forms-flex-item--shrink{flex-shrink:1}.dnb-forms-section+.dnb-forms-section{margin-top:var(--spacing-large)}.dnb-forms-steps-layout{grid-column-gap:3rem;-moz-column-gap:3rem;column-gap:3rem;display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:320px}.dnb-forms-steps-layout__contents{flex:1;min-width:400px}.dnb-forms-test-element{border:1px dashed grey;border-radius:6px;color:#909090;padding:4px 8px}.dnb-forms-field-block__label-block{align-items:center;display:flex;flex-flow:row;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}
+.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-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-selection--width-large .dnb-dropdown__shell{width:336px}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:176px}.dnb-forms-button-row{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-card{background-color:var(--color-white);border:4px solid #f2f2f5;border-radius:.5rem;padding:var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium)}.dnb-forms-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-forms-card+.dnb-forms-card__heading{margin-top:var(--spacing-small)}.dnb-forms-flex-container{display:flex}.dnb-forms-flex-container--direction-row{flex-direction:row}.dnb-forms-flex-container--direction-column{flex-direction:column}.dnb-forms-flex-container--justify-flex-start{justify-content:flex-start}.dnb-forms-flex-container--justify-flex-end{justify-content:flex-end}.dnb-forms-flex-container--justify-center{justify-content:center}.dnb-forms-flex-container--justify-space-between{justify-content:space-between}.dnb-forms-flex-container--justify-space-around{justify-content:space-around}.dnb-forms-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-forms-flex-container--align-flex-start{align-items:flex-start}.dnb-forms-flex-container--align-flex-end{align-items:flex-end}.dnb-forms-flex-container--align-center{align-items:center}.dnb-forms-flex-container--align-stretch{align-items:stretch}.dnb-forms-flex-container--align-baseline{align-items:baseline}.dnb-forms-flex-container--wrap{flex-wrap:wrap}.dnb-forms-flex-container__hr{border:none;border-top:1px solid var(--color-black-8);height:0;margin:0;padding:0;width:100%}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-small{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small)}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-medium{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium)}.dnb-forms-flex-item--grow{flex-grow:1}.dnb-forms-flex-item--shrink{flex-shrink:1}.dnb-forms-section+.dnb-forms-section{margin-top:var(--spacing-large)}.dnb-forms-steps-layout{grid-column-gap:3rem;-moz-column-gap:3rem;column-gap:3rem;display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:320px}.dnb-forms-steps-layout__contents{flex:1;min-width:400px}.dnb-forms-test-element{border:1px dashed grey;border-radius:6px;color:#909090;padding:4px 8px}.dnb-forms-field-block__label-block{align-items:center;display:flex;flex-flow:row;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block--width-large{width:336px}.dnb-forms-field-block--width-medium{width:176px}.dnb-forms-field-block__contents--width-stretch{width:100%}.dnb-forms-field-block__contents--width-large{width:336px}.dnb-forms-field-block__contents--width-medium{width:176px}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}

package/es/extensions/payment-card/PaymentCard.d.ts

@@ -3,7 +3,11 @@ import * as React from 'react';
 import type { SpacingProps } from '../shared/types';
 import type { SkeletonShow } from '../components/skeleton/Skeleton';
 import type { Locale } from '../../shared/Context';
-export type PaymentCardCardStatus = 'active' | 'blocked' | 'expired';
+export type PaymentCardCardStatus =
+  | 'active'
+  | 'blocked'
+  | 'expired'
+  | 'not_active';
 export type PaymentCardVariant = 'normal' | 'compact';
 export type PaymentCardDigits = string | number;
 export enum CardType {
@@ -70,7 +74,7 @@ export interface PaymentCardProps
    */
   card_number: string;
   /**
-   * Use one of these: `active`, `blocked`, `expired`. Defaults to `active`.
+   * Use one of these: `active`, `not_active`, `blocked`, `expired`. Defaults to `active`.
    */
   card_status?: PaymentCardCardStatus;
   /**

package/es/extensions/payment-card/PaymentCard.js

@@ -30,7 +30,8 @@ const cardDataPropTypes = process.env.NODE_ENV !== "production" ? PropTypes.shap
 const translationDefaultPropsProps = {
   text_card_number: null,
   text_expired: null,
-  text_blocked: null
+  text_blocked: null,
+  text_not_active: null
 };
 export default class PaymentCard extends React.PureComponent {
   render() {
@@ -96,7 +97,7 @@ _defineProperty(PaymentCard, "defaultProps", _objectSpread({
 process.env.NODE_ENV !== "production" ? PaymentCard.propTypes = _objectSpread(_objectSpread({
   product_code: PropTypes.string.isRequired,
   card_number: PropTypes.string.isRequired,
-  card_status: PropTypes.oneOf(['active', 'blocked', 'expired']),
+  card_status: PropTypes.oneOf(['active', 'blocked', 'expired', 'not_active']),
   variant: PropTypes.oneOf(['normal', 'compact']),
   digits: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   raw_data: cardDataPropTypes,
@@ -137,6 +138,16 @@ function StatusOverlay({
   skeleton
 }) {
   switch (cardStatus) {
+    case 'not_active':
+      return React.createElement("div", {
+        className: classnames('dnb-payment-card__blocking__overlay', createSkeletonClass('font', skeleton))
+      }, React.createElement("div", {
+        className: "dnb-payment-card__blocking__center"
+      }, React.createElement(StatusIcon, {
+        status: cardStatus
+      }), React.createElement(P, {
+        top: "xx-small"
+      }, translations.text_not_active)));
     case 'blocked':
       return React.createElement("div", {
         className: classnames('dnb-payment-card__blocking__overlay', createSkeletonClass('font', skeleton))