@dnb/eufemia 10.6.0 → 10.8.0

package/cjs/extensions/forms/StepsLayout/StepsLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepsLayout.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_elements","_components","_componentHelper","_utils","_Context","_Step","_StepsContext","_NextButton","_PreviousButton","_Buttons","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","StepsLayout","props","className","id","makeUniqueId","mode","scrollTopOnStepChange","initialActiveIndex","onStepChange","children","dataContext","useContext","DataContext","activeIndex","setActiveIndex","useState","handlePrevious","useCallback","_window","window","scrollTo","top","behavior","handleNext","hasErrors","_window2","setShowAllErrors","stepIndicatorData","React","Children","map","child","isValidElement","type","Step","Error","title","handleChange","_ref","current_step","createElement","Provider","value","Div","classnames","forwardSpaceProps","StepIndicator","Sidebar","sidebar_id","bottom","data","no_animation","on_change","cloneElement","index","_supportsEufemiaSpacingProps","NextButton","PreviousButton","Buttons","_default","exports"],"sources":["../../../../../src/extensions/forms/StepsLayout/StepsLayout.tsx"],"sourcesContent":["import React, { useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Div } from '../../../elements'\nimport { StepIndicator } from '../../../components'\nimport { makeUniqueId } from '../../../shared/component-helper'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport DataContext from '../DataContext/Context'\nimport Step, { Props as StepProps } from './Step'\nimport StepsContext from './StepsContext'\nimport NextButton from './NextButton'\nimport PreviousButton from './PreviousButton'\nimport Buttons from './Buttons'\n\nexport type Props = ComponentProps & {\n  id?: string\n  mode?: 'static' | 'strict' | 'loose'\n  scrollTopOnStepChange?: boolean\n  initialActiveIndex?: number\n  onStepChange?: (index: number) => void\n  children: React.ReactNode\n}\n\nfunction StepsLayout(props: Props) {\n  const {\n    className,\n    id = makeUniqueId(),\n    mode = 'loose',\n    scrollTopOnStepChange,\n    initialActiveIndex = 0,\n    onStepChange,\n    children,\n  } = props\n  const dataContext = useContext(DataContext)\n  const [activeIndex, setActiveIndex] =\n    useState<number>(initialActiveIndex)\n\n  const handlePrevious = useCallback(() => {\n    setActiveIndex((activeIndex) => {\n      onStepChange?.(activeIndex - 1)\n      return activeIndex - 1\n    })\n    if (scrollTopOnStepChange) {\n      window?.scrollTo({ top: 0, behavior: 'smooth' })\n    }\n  }, [scrollTopOnStepChange, onStepChange])\n\n  const handleNext = useCallback(() => {\n    if (!dataContext.hasErrors()) {\n      setActiveIndex((activeIndex) => {\n        onStepChange?.(activeIndex + 1)\n        return activeIndex + 1\n      })\n      if (scrollTopOnStepChange) {\n        window?.scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    } else {\n      dataContext.setShowAllErrors(true)\n    }\n  }, [dataContext, scrollTopOnStepChange, onStepChange])\n\n  const stepIndicatorData = React.Children.map(children, (child) => {\n    if (!React.isValidElement(child) || child.type !== Step) {\n      throw new Error('Only Step can be children of Steps')\n    }\n    return child.props.title ?? 'Title missing'\n  }) as string[]\n\n  const handleChange = useCallback(({ current_step }) => {\n    setActiveIndex(current_step)\n  }, [])\n\n  return (\n    <StepsContext.Provider\n      value={{\n        activeIndex,\n        handlePrevious,\n        handleNext,\n      }}\n    >\n      <Div\n        className={classnames('dnb-forms-steps-layout', className)}\n        {...forwardSpaceProps(props)}\n      >\n        <aside className=\"dnb-forms-steps-layout__sidebar\">\n          <StepIndicator.Sidebar sidebar_id={id} />\n          <StepIndicator\n            bottom\n            current_step={activeIndex}\n            data={stepIndicatorData}\n            mode={mode}\n            no_animation\n            on_change={handleChange}\n            sidebar_id={id}\n            title=\"\"\n          />\n        </aside>\n        <div className=\"dnb-forms-steps-layout__contents\">\n          {React.Children.map(children, (child, i) => {\n            if (React.isValidElement(child) && child.type === Step) {\n              return React.cloneElement(\n                child as React.ReactElement<StepProps>,\n                {\n                  index: i,\n                }\n              )\n            }\n            return child\n          })}\n        </div>\n      </Div>\n    </StepsContext.Provider>\n  )\n}\n\nStepsLayout._supportsEufemiaSpacingProps = true\n\nStepsLayout.Step = Step\nStepsLayout.NextButton = NextButton\nStepsLayout.PreviousButton = PreviousButton\nStepsLayout.Buttons = Buttons\n\nexport default StepsLayout\n"],"mappings":"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"}
+{"version":3,"file":"StepsLayout.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_elements","_components","_componentHelper","_utils","_Context","_Step","_StepsContext","_NextButton","_PreviousButton","_Buttons","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","StepsLayout","props","className","id","makeUniqueId","mode","scrollTopOnStepChange","initialActiveIndex","onStepChange","children","dataContext","useContext","DataContext","activeIndex","setActiveIndex","useState","handlePrevious","useCallback","_window","window","scrollTo","top","behavior","handleNext","hasErrors","_window2","setShowAllErrors","stepIndicatorData","React","Children","map","child","isValidElement","type","Step","Error","title","handleChange","_ref","current_step","createElement","Provider","value","Div","classnames","forwardSpaceProps","StepIndicator","Sidebar","sidebar_id","bottom","data","no_animation","on_change","cloneElement","index","_supportsEufemiaSpacingProps","NextButton","PreviousButton","Buttons","_default","exports"],"sources":["../../../../../src/extensions/forms/StepsLayout/StepsLayout.tsx"],"sourcesContent":["import React, { useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Div } from '../../../elements'\nimport { StepIndicator } from '../../../components'\nimport { makeUniqueId } from '../../../shared/component-helper'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport DataContext from '../DataContext/Context'\nimport Step, { Props as StepProps } from './Step'\nimport StepsContext from './StepsContext'\nimport NextButton from './NextButton'\nimport PreviousButton from './PreviousButton'\nimport Buttons from './Buttons'\n\nexport type Props = ComponentProps & {\n  id?: string\n  mode?: 'static' | 'strict' | 'loose'\n  scrollTopOnStepChange?: boolean\n  initialActiveIndex?: number\n  onStepChange?: (index: number) => void\n  children: React.ReactNode\n}\n\nfunction StepsLayout(props: Props) {\n  const {\n    className,\n    id = makeUniqueId(),\n    mode = 'loose',\n    scrollTopOnStepChange,\n    initialActiveIndex = 0,\n    onStepChange,\n    children,\n  } = props\n  const dataContext = useContext(DataContext)\n  const [activeIndex, setActiveIndex] =\n    useState<number>(initialActiveIndex)\n\n  const handlePrevious = useCallback(() => {\n    setActiveIndex((activeIndex) => {\n      onStepChange?.(activeIndex - 1)\n      return activeIndex - 1\n    })\n    if (scrollTopOnStepChange) {\n      window?.scrollTo({ top: 0, behavior: 'smooth' })\n    }\n  }, [scrollTopOnStepChange, onStepChange])\n\n  const handleNext = useCallback(() => {\n    if (!dataContext.hasErrors()) {\n      setActiveIndex((activeIndex) => {\n        onStepChange?.(activeIndex + 1)\n        return activeIndex + 1\n      })\n      if (scrollTopOnStepChange) {\n        window?.scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    } else {\n      dataContext.setShowAllErrors(true)\n    }\n  }, [dataContext, scrollTopOnStepChange, onStepChange])\n\n  const stepIndicatorData = React.Children.map(children, (child) => {\n    if (!React.isValidElement(child) || child.type !== Step) {\n      throw new Error('Only Step can be children of StepsLayout')\n    }\n    return child.props.title ?? 'Title missing'\n  }) as string[]\n\n  const handleChange = useCallback(({ current_step }) => {\n    setActiveIndex(current_step)\n  }, [])\n\n  return (\n    <StepsContext.Provider\n      value={{\n        activeIndex,\n        handlePrevious,\n        handleNext,\n      }}\n    >\n      <Div\n        className={classnames('dnb-forms-steps-layout', className)}\n        {...forwardSpaceProps(props)}\n      >\n        <aside className=\"dnb-forms-steps-layout__sidebar\">\n          <StepIndicator.Sidebar sidebar_id={id} />\n          <StepIndicator\n            bottom\n            current_step={activeIndex}\n            data={stepIndicatorData}\n            mode={mode}\n            no_animation\n            on_change={handleChange}\n            sidebar_id={id}\n            title=\"\"\n          />\n        </aside>\n        <div className=\"dnb-forms-steps-layout__contents\">\n          {React.Children.map(children, (child, i) => {\n            if (React.isValidElement(child) && child.type === Step) {\n              return React.cloneElement(\n                child as React.ReactElement<StepProps>,\n                {\n                  index: i,\n                }\n              )\n            }\n            return child\n          })}\n        </div>\n      </Div>\n    </StepsContext.Provider>\n  )\n}\n\nStepsLayout._supportsEufemiaSpacingProps = true\n\nStepsLayout.Step = Step\nStepsLayout.NextButton = NextButton\nStepsLayout.PreviousButton = PreviousButton\nStepsLayout.Buttons = Buttons\n\nexport default StepsLayout\n"],"mappings":"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"}

package/cjs/extensions/forms/StepsLayout/style/dnb-steps-layout.css

@@ -4,9 +4,9 @@
 .dnb-forms-steps-layout {
   display: flex;
   flex-flow: row wrap;
-  grid-column-gap: 3rem;
-  -moz-column-gap: 3rem;
-       column-gap: 3rem;
+  grid-column-gap: var(--spacing-medium);
+  -moz-column-gap: var(--spacing-medium);
+       column-gap: var(--spacing-medium);
 }
 @media (max-width: 60em) {
   .dnb-forms-steps-layout {
@@ -17,9 +17,15 @@
 }
 .dnb-forms-steps-layout__sidebar {
   flex: 0;
-  min-width: 320px;
+  min-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar {
+  max-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+  min-width: 336px;
 }
 .dnb-forms-steps-layout__contents {
   flex: 1;
-  min-width: 400px;
+  min-width: 25rem;
 }

package/cjs/extensions/forms/StepsLayout/style/dnb-steps-layout.min.css

@@ -1 +1 @@
-.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-steps-layout{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);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:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar{max-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item{min-width:336px}.dnb-forms-steps-layout__contents{flex:1;min-width:25rem}

package/cjs/extensions/forms/StepsLayout/style/dnb-steps-layout.scss

@@ -3,7 +3,7 @@
 .dnb-forms-steps-layout {
   display: flex;
   flex-flow: row wrap;
-  column-gap: 3rem;
+  column-gap: var(--spacing-medium);
 
   @media (max-width: map-get($breakpoints, 'medium')) {
     flex-direction: column;
@@ -13,11 +13,18 @@
 
   &__sidebar {
     flex: 0;
-    min-width: 320px;
+    min-width: 21rem;
+
+    .dnb-step-indicator__sidebar {
+      max-width: 21rem;
+    }
+    .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+      min-width: 336px;
+    }
   }
 
   &__contents {
     flex: 1;
-    min-width: 400px;
+    min-width: 25rem;
   }
 }

package/cjs/extensions/forms/ValueBlock/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_ValueBlock","_interopRequireDefault","require","obj","__esModule","default"],"sources":["../../../../../src/extensions/forms/ValueBlock/index.ts"],"sourcesContent":["export { default  } from './ValueBlock';\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAwC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA"}
+{"version":3,"file":"index.js","names":["_ValueBlock","_interopRequireDefault","require","obj","__esModule","default"],"sources":["../../../../../src/extensions/forms/ValueBlock/index.ts"],"sourcesContent":["export { default } from './ValueBlock'\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAsC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA"}

package/cjs/extensions/forms/field-types.d.ts

@@ -3,7 +3,7 @@ import { FormError } from './types';
 interface DefaultErrorMessages {
     required?: string;
 }
-export interface FieldProps<Value = unknown, EmptyValue = undefined, ErrorMessages extends {
+export interface FieldProps<Value = unknown, EmptyValue = undefined | string | number, ErrorMessages extends {
     required?: string;
 } = DefaultErrorMessages> {
     /** ID added to the actual field component, and linked to the label via for-attribute */
@@ -49,4 +49,10 @@ export interface FieldProps<Value = unknown, EmptyValue = undefined, ErrorMessag
     toInput?: (external: Value | undefined) => any;
     fromInput?: (...args: any[]) => Value | undefined;
 }
+export interface FieldHelpProps {
+    help?: {
+        title?: string;
+        contents?: string;
+    };
+}
 export {};

package/cjs/extensions/forms/field-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-types.js","names":[],"sources":["../../../../src/extensions/forms/field-types.ts"],"sourcesContent":["import { JSONSchema7 } from 'json-schema'\nimport { FormError } from './types'\ninterface DefaultErrorMessages {\n  required?: string\n}\n\nexport interface FieldProps<\n  Value = unknown,\n  EmptyValue = undefined,\n  ErrorMessages extends { required?: string } = DefaultErrorMessages\n> {\n  /** ID added to the actual field component, and linked to the label via for-attribute */\n  id?: string\n  layout?: 'horizontal' | 'vertical'\n  /** Main label text */\n  label?: string\n  /** A more discreet text displayed beside the label (i.e for \"(optional)\") */\n  labelDescription?: string\n  /** Secondary information displayed at the end of the label line (i.e character counter) */\n  labelSecondary?: string\n  /** Text showing in place of the value if no value is given */\n  placeholder?: string\n  /** JSON Pointer for where the data for this field is located in the source dataset */\n  path?: string\n  value?: Value\n  info?: Error | FormError | string\n  warning?: Error | FormError | string\n  error?: Error | FormError\n  disabled?: boolean\n  onFocus?: (value: Value | EmptyValue) => void\n  onBlur?: (value: Value | EmptyValue) => void\n  onChange?: (value: Value | EmptyValue) => void\n  emptyValue?: EmptyValue\n  // Validation\n  required?: boolean\n  schema?: JSONSchema7\n  validator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | Promise<Error | undefined>\n  onBlurValidator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | Promise<Error | undefined>\n  /**\n   * Should error messages based on validation be shown initially (from given value-prop or source data)\n   * before the user interacts with the field?\n   * @default false\n   * */\n  validateInitially?: boolean\n  /**\n   * Should error messages be shown when touching (like focusing a field and blurring) without having changed\n   * the value? So the user did not introduce a new error, but it was invalid based on validation initially.\n   */\n  validateUnchanged?: boolean\n  /** Should validation be done while writing, not just when blurring the field? */\n  continuousValidation?: boolean\n  errorMessages?: ErrorMessages\n  // Derivatives\n  toInput?: (external: Value | undefined) => any\n  fromInput?: (...args: any[]) => Value | undefined\n}\n"],"mappings":""}
+{"version":3,"file":"field-types.js","names":[],"sources":["../../../../src/extensions/forms/field-types.ts"],"sourcesContent":["import { JSONSchema7 } from 'json-schema'\nimport { FormError } from './types'\ninterface DefaultErrorMessages {\n  required?: string\n}\n\nexport interface FieldProps<\n  Value = unknown,\n  EmptyValue = undefined | string | number,\n  ErrorMessages extends { required?: string } = DefaultErrorMessages,\n> {\n  /** ID added to the actual field component, and linked to the label via for-attribute */\n  id?: string\n  layout?: 'horizontal' | 'vertical'\n  /** Main label text */\n  label?: string\n  /** A more discreet text displayed beside the label (i.e for \"(optional)\") */\n  labelDescription?: string\n  /** Secondary information displayed at the end of the label line (i.e character counter) */\n  labelSecondary?: string\n  /** Text showing in place of the value if no value is given */\n  placeholder?: string\n  /** JSON Pointer for where the data for this field is located in the source dataset */\n  path?: string\n  value?: Value\n  info?: Error | FormError | string\n  warning?: Error | FormError | string\n  error?: Error | FormError\n  disabled?: boolean\n  onFocus?: (value: Value | EmptyValue) => void\n  onBlur?: (value: Value | EmptyValue) => void\n  onChange?: (value: Value | EmptyValue) => void\n  emptyValue?: EmptyValue\n  // Validation\n  required?: boolean\n  schema?: JSONSchema7\n  validator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | Promise<Error | undefined>\n  onBlurValidator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | Promise<Error | undefined>\n  /**\n   * Should error messages based on validation be shown initially (from given value-prop or source data)\n   * before the user interacts with the field?\n   * @default false\n   * */\n  validateInitially?: boolean\n  /**\n   * Should error messages be shown when touching (like focusing a field and blurring) without having changed\n   * the value? So the user did not introduce a new error, but it was invalid based on validation initially.\n   */\n  validateUnchanged?: boolean\n  /** Should validation be done while writing, not just when blurring the field? */\n  continuousValidation?: boolean\n  errorMessages?: ErrorMessages\n  // Derivatives\n  toInput?: (external: Value | undefined) => any\n  fromInput?: (...args: any[]) => Value | undefined\n}\n\nexport interface FieldHelpProps {\n  help?: {\n    title?: string\n    contents?: string\n  }\n}\n"],"mappings":""}

package/cjs/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,18 +5,17 @@
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
-.dnb-forms-field-phone-number--width-large {
-  width: 336px;
+.dnb-forms-field-phone-number--width-stretch {
+  width: 100%;
 }
-.dnb-forms-field-phone-number--width-medium {
-  width: 176px;
+.dnb-forms-field-phone-number--width-large {
+  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;
@@ -41,11 +28,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;
@@ -55,22 +45,40 @@
 }
 
 .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;
+}
+
+.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);
 }
 
-.dnb-forms-field-string__input--width-large {
-  width: 336px;
+.dnb-forms-field-country-code .dnb-autocomplete__inner {
+  --autocomplete-width: 9rem;
 }
-.dnb-forms-field-string__input--width-medium {
-  width: 176px;
+.dnb-forms-field-country-code--width-small .dnb-autocomplete__inner {
+  --autocomplete-width: 5rem;
 }
-.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-field-country-code--width-medium .dnb-autocomplete__inner {
+  --autocomplete-width: 11rem;
+}
+.dnb-forms-field-country-code--width-large .dnb-autocomplete__inner {
+  --autocomplete-width: 21rem;
 }
 
 .dnb-forms-button-row {
@@ -82,10 +90,10 @@
 }
 
 .dnb-forms-card {
-  background-color: var(--color-white);
-  border: 4px solid #F2F2F5;
-  border-radius: 0.5rem;
   padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium);
+  background-color: var(--color-white);
+  border: 0.25rem solid var(--color-pistachio);
+  border-radius: 0.75rem;
 }
 .dnb-forms-card__heading {
   font-size: var(--font-size-basis);
@@ -158,6 +166,15 @@
   -moz-column-gap: var(--spacing-medium);
        column-gap: var(--spacing-medium);
 }
+.dnb-forms-flex-container--width-small {
+  width: 5rem;
+}
+.dnb-forms-flex-container--width-medium {
+  width: 11rem;
+}
+.dnb-forms-flex-container--width-large {
+  width: 21rem;
+}
 
 .dnb-forms-flex-item--grow {
   flex-grow: 1;
@@ -165,6 +182,15 @@
 .dnb-forms-flex-item--shrink {
   flex-shrink: 1;
 }
+.dnb-forms-flex-item--width-small {
+  width: 5rem;
+}
+.dnb-forms-flex-item--width-medium {
+  width: 11rem;
+}
+.dnb-forms-flex-item--width-large {
+  width: 21rem;
+}
 
 .dnb-forms-section + .dnb-forms-section {
   margin-top: var(--spacing-large);
@@ -176,9 +202,9 @@
 .dnb-forms-steps-layout {
   display: flex;
   flex-flow: row wrap;
-  grid-column-gap: 3rem;
-  -moz-column-gap: 3rem;
-       column-gap: 3rem;
+  grid-column-gap: var(--spacing-medium);
+  -moz-column-gap: var(--spacing-medium);
+       column-gap: var(--spacing-medium);
 }
 @media (max-width: 60em) {
   .dnb-forms-steps-layout {
@@ -189,21 +215,47 @@
 }
 .dnb-forms-steps-layout__sidebar {
   flex: 0;
-  min-width: 320px;
+  min-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar {
+  max-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+  min-width: 336px;
 }
 .dnb-forms-steps-layout__contents {
   flex: 1;
-  min-width: 400px;
+  min-width: 25rem;
 }
 
 .dnb-forms-test-element {
   border: 1px dashed #808080;
-  border-radius: 6px;
+  border-radius: 0.5rem;
   color: #909090;
-  padding: 4px 8px;
+  padding: 0.5rem 1rem;
 }
 
-.dnb-forms-field-block__label-block {
+.dnb-forms-field-block--layout-vertical {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-areas: "label" "contents" "status";
+}
+.dnb-forms-field-block--layout-horizontal {
+  display: grid;
+  grid-template-columns: 11rem auto;
+  grid-template-areas: "label contents" "status status";
+}
+.dnb-forms-field-block--width-small {
+  width: 5rem;
+}
+.dnb-forms-field-block--width-medium {
+  width: 11rem;
+}
+.dnb-forms-field-block--width-large {
+  width: 21rem;
+}
+.dnb-forms-field-block__label {
+  grid-area: label;
   display: flex;
   flex-flow: row;
   justify-content: space-between;
@@ -218,6 +270,24 @@
   color: var(--color-black-55);
   font-size: var(--font-size-small);
 }
+.dnb-forms-field-block__status {
+  grid-area: status;
+}
+.dnb-forms-field-block__contents {
+  grid-area: contents;
+}
+.dnb-forms-field-block__contents--width-stretch {
+  width: 100%;
+}
+.dnb-forms-field-block__contents--width-small {
+  width: 5rem;
+}
+.dnb-forms-field-block__contents--width-medium {
+  width: 11rem;
+}
+.dnb-forms-field-block__contents--width-large {
+  width: 21rem;
+}
 
 .dnb-forms-value-block {
   display: block;

package/cjs/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: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}.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}.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}.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}.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}.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:.25rem solid var(--color-pistachio);border-radius:.75rem;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-container--width-small{width:5rem}.dnb-forms-flex-container--width-medium{width:11rem}.dnb-forms-flex-container--width-large{width:21rem}.dnb-forms-flex-item--grow{flex-grow:1}.dnb-forms-flex-item--shrink{flex-shrink:1}.dnb-forms-flex-item--width-small{width:5rem}.dnb-forms-flex-item--width-medium{width:11rem}.dnb-forms-flex-item--width-large{width:21rem}.dnb-forms-section+.dnb-forms-section{margin-top:var(--spacing-large)}.dnb-forms-steps-layout{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);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:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar{max-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item{min-width:336px}.dnb-forms-steps-layout__contents{flex:1;min-width:25rem}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}.dnb-forms-field-block--layout-vertical{display:grid;grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{display:grid;grid-template-areas:"label contents" "status status";grid-template-columns:11rem auto}.dnb-forms-field-block--width-small{width:5rem}.dnb-forms-field-block--width-medium{width:11rem}.dnb-forms-field-block--width-large{width:21rem}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;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__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}.dnb-forms-field-block__contents--width-small{width:5rem}.dnb-forms-field-block__contents--width-medium{width:11rem}.dnb-forms-field-block__contents--width-large{width:21rem}.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/cjs/extensions/forms/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/extensions/forms/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("./dnb-forms.min.css");
+//# sourceMappingURL=index.js.map

package/cjs/extensions/forms/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["require"],"sources":["../../../../../src/extensions/forms/style/index.js"],"sourcesContent":["/**\n * Web Style Import\n *\n */\n\nimport './dnb-forms.scss'\n"],"mappings":";;AAKAA,OAAA"}

package/cjs/extensions/forms/utils/TestElement/style/dnb-test-element.css

@@ -1,6 +1,6 @@
 .dnb-forms-test-element {
   border: 1px dashed #808080;
-  border-radius: 6px;
+  border-radius: 0.5rem;
   color: #909090;
-  padding: 4px 8px;
+  padding: 0.5rem 1rem;
 }

package/cjs/extensions/forms/utils/TestElement/style/dnb-test-element.min.css

@@ -1 +1 @@
-.dnb-forms-test-element{border:1px dashed grey;border-radius:6px;color:#909090;padding:4px 8px}
+.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}

package/cjs/extensions/forms/utils/TestElement/style/dnb-test-element.scss

@@ -1,6 +1,6 @@
 .dnb-forms-test-element {
   border: 1px dashed #808080;
-  border-radius: 6px;
+  border-radius: 0.5rem;
   color: #909090;
-  padding: 4px 8px;
+  padding: 0.5rem 1rem;
 }

package/cjs/extensions/forms/utils/useWasChanged.d.ts

@@ -0,0 +1,5 @@
+/**
+ *
+ * Shallow object comparison to easily find out what props of an object was changed since the last render
+ */
+export default function useWasChanged<Subject extends object>(subject: Subject, title?: string, debug?: boolean): void;

package/cjs/extensions/forms/utils/useWasChanged.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useWasChanged;
+var _react = require("react");
+function useWasChanged(subject, title, debug) {
+  const previous = (0, _react.useRef)(subject);
+  if (!previous.current && !subject) {
+    console.log('useWasChanged() - No subject was provided, while previous render had a subject. Was the whole object deleted?');
+  }
+  const {
+    changed,
+    unchanged
+  } = [...Object.entries(subject), ...Object.entries(previous.current ?? {}).filter(_ref => {
+    let [key] = _ref;
+    return subject[key] === undefined;
+  })].reduce((_ref2, _ref3) => {
+    var _previous$current;
+    let {
+      changed,
+      unchanged
+    } = _ref2;
+    let [key, value] = _ref3;
+    if (((_previous$current = previous.current) === null || _previous$current === void 0 ? void 0 : _previous$current[key]) !== (subject === null || subject === void 0 ? void 0 : subject[key])) {
+      return {
+        changed: changed.concat(key),
+        unchanged
+      };
+    } else {
+      return {
+        changed,
+        unchanged: unchanged.concat(key)
+      };
+    }
+  }, {
+    changed: [],
+    unchanged: []
+  });
+  if (changed.length === 0 && !debug) {
+    return;
+  }
+  console.groupCollapsed(`${title ?? 'object'} -- ${changed.length} members was changed`);
+  Object.values(changed).map(key => {
+    if (debug) {
+      var _previous$current2;
+      console.groupCollapsed(`CHANGED: ${key}`);
+      console.log('PREVIOUS: ', (_previous$current2 = previous.current) === null || _previous$current2 === void 0 ? void 0 : _previous$current2[key]);
+      console.log('CURRENT: ', subject === null || subject === void 0 ? void 0 : subject[key]);
+      console.groupEnd();
+    } else {
+      console.log(`CHANGED: ${key}`);
+    }
+  });
+  Object.values(unchanged).map(key => {
+    console.log(`UNCHANGED: ${key}`);
+  });
+  previous.current = subject;
+  console.groupEnd();
+}
+//# sourceMappingURL=useWasChanged.js.map

package/cjs/extensions/forms/utils/useWasChanged.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWasChanged.js","names":["_react","require","useWasChanged","subject","title","debug","previous","useRef","current","console","log","changed","unchanged","Object","entries","filter","_ref","key","undefined","reduce","_ref2","_ref3","_previous$current","value","concat","length","groupCollapsed","values","map","_previous$current2","groupEnd"],"sources":["../../../../../src/extensions/forms/utils/useWasChanged.ts"],"sourcesContent":["import { useRef } from 'react'\n\n/**\n *\n * Shallow object comparison to easily find out what props of an object was changed since the last render\n */\nexport default function useWasChanged<Subject extends object>(\n  subject: Subject,\n  title?: string,\n  debug?: boolean\n): void {\n  const previous = useRef<Subject>(subject)\n  if (!previous.current && !subject) {\n    console.log(\n      'useWasChanged() - No subject was provided, while previous render had a subject. Was the whole object deleted?'\n    )\n  }\n\n  const { changed, unchanged } = [\n    ...Object.entries(subject),\n    ...Object.entries(previous.current ?? {}).filter(\n      ([key]) => subject[key] === undefined\n    ),\n  ].reduce(\n    ({ changed, unchanged }, [key, value]) => {\n      if (previous.current?.[key] !== subject?.[key]) {\n        return {\n          changed: changed.concat(key),\n          unchanged,\n        }\n      } else {\n        return {\n          changed,\n          unchanged: unchanged.concat(key),\n        }\n      }\n    },\n    { changed: [], unchanged: [] }\n  )\n\n  if (changed.length === 0 && !debug) {\n    return\n  }\n\n  console.groupCollapsed(\n    `${title ?? 'object'} -- ${changed.length} members was changed`\n  )\n\n  Object.values(changed).map((key) => {\n    if (debug) {\n      console.groupCollapsed(`CHANGED: ${key}`)\n      console.log('PREVIOUS: ', previous.current?.[key])\n      console.log('CURRENT: ', subject?.[key])\n      console.groupEnd()\n    } else {\n      console.log(`CHANGED: ${key}`)\n    }\n  })\n  Object.values(unchanged).map((key) => {\n    console.log(`UNCHANGED: ${key}`)\n  })\n\n  previous.current = subject\n\n  console.groupEnd()\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAMe,SAASC,aAAaA,CACnCC,OAAgB,EAChBC,KAAc,EACdC,KAAe,EACT;EACN,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAUJ,OAAO,CAAC;EACzC,IAAI,CAACG,QAAQ,CAACE,OAAO,IAAI,CAACL,OAAO,EAAE;IACjCM,OAAO,CAACC,GAAG,CACT,+GACF,CAAC;EACH;EAEA,MAAM;IAAEC,OAAO;IAAEC;EAAU,CAAC,GAAG,CAC7B,GAAGC,MAAM,CAACC,OAAO,CAACX,OAAO,CAAC,EAC1B,GAAGU,MAAM,CAACC,OAAO,CAACR,QAAQ,CAACE,OAAO,IAAI,CAAC,CAAC,CAAC,CAACO,MAAM,CAC9CC,IAAA;IAAA,IAAC,CAACC,GAAG,CAAC,GAAAD,IAAA;IAAA,OAAKb,OAAO,CAACc,GAAG,CAAC,KAAKC,SAAS;EAAA,CACvC,CAAC,CACF,CAACC,MAAM,CACN,CAAAC,KAAA,EAAAC,KAAA,KAA0C;IAAA,IAAAC,iBAAA;IAAA,IAAzC;MAAEX,OAAO;MAAEC;IAAU,CAAC,GAAAQ,KAAA;IAAA,IAAE,CAACH,GAAG,EAAEM,KAAK,CAAC,GAAAF,KAAA;IACnC,IAAI,EAAAC,iBAAA,GAAAhB,QAAQ,CAACE,OAAO,cAAAc,iBAAA,uBAAhBA,iBAAA,CAAmBL,GAAG,CAAC,OAAKd,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGc,GAAG,CAAC,GAAE;MAC9C,OAAO;QACLN,OAAO,EAAEA,OAAO,CAACa,MAAM,CAACP,GAAG,CAAC;QAC5BL;MACF,CAAC;IACH,CAAC,MAAM;MACL,OAAO;QACLD,OAAO;QACPC,SAAS,EAAEA,SAAS,CAACY,MAAM,CAACP,GAAG;MACjC,CAAC;IACH;EACF,CAAC,EACD;IAAEN,OAAO,EAAE,EAAE;IAAEC,SAAS,EAAE;EAAG,CAC/B,CAAC;EAED,IAAID,OAAO,CAACc,MAAM,KAAK,CAAC,IAAI,CAACpB,KAAK,EAAE;IAClC;EACF;EAEAI,OAAO,CAACiB,cAAc,CACnB,GAAEtB,KAAK,IAAI,QAAS,OAAMO,OAAO,CAACc,MAAO,sBAC5C,CAAC;EAEDZ,MAAM,CAACc,MAAM,CAAChB,OAAO,CAAC,CAACiB,GAAG,CAAEX,GAAG,IAAK;IAClC,IAAIZ,KAAK,EAAE;MAAA,IAAAwB,kBAAA;MACTpB,OAAO,CAACiB,cAAc,CAAE,YAAWT,GAAI,EAAC,CAAC;MACzCR,OAAO,CAACC,GAAG,CAAC,YAAY,GAAAmB,kBAAA,GAAEvB,QAAQ,CAACE,OAAO,cAAAqB,kBAAA,uBAAhBA,kBAAA,CAAmBZ,GAAG,CAAC,CAAC;MAClDR,OAAO,CAACC,GAAG,CAAC,WAAW,EAAEP,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGc,GAAG,CAAC,CAAC;MACxCR,OAAO,CAACqB,QAAQ,CAAC,CAAC;IACpB,CAAC,MAAM;MACLrB,OAAO,CAACC,GAAG,CAAE,YAAWO,GAAI,EAAC,CAAC;IAChC;EACF,CAAC,CAAC;EACFJ,MAAM,CAACc,MAAM,CAACf,SAAS,CAAC,CAACgB,GAAG,CAAEX,GAAG,IAAK;IACpCR,OAAO,CAACC,GAAG,CAAE,cAAaO,GAAI,EAAC,CAAC;EAClC,CAAC,CAAC;EAEFX,QAAQ,CAACE,OAAO,GAAGL,OAAO;EAE1BM,OAAO,CAACqB,QAAQ,CAAC,CAAC;AACpB"}

package/cjs/extensions/forms/variables.scss

@@ -0,0 +1,3 @@
+$forms-field-width-small: 5rem;
+$forms-field-width-medium: 11rem;
+$forms-field-width-large: 21rem;

package/cjs/extensions/lib.d.ts

@@ -30,6 +30,7 @@ export declare const getExtensions: () => {
         Option: typeof import("./forms/Field/Option").default;
         SelectCountry: typeof import("./forms/Field/SelectCountry").default;
         BankAccountNumber: typeof import("./forms/Field/BankAccountNumber").default;
+        CountryCode: typeof import("./forms/Field/CountryCode").default;
     };
     PaymentCard: typeof PaymentCard;
 };

package/cjs/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/cjs/extensions/payment-card/PaymentCard.js

@@ -65,7 +65,8 @@ const cardDataPropTypes = process.env.NODE_ENV !== "production" ? _propTypes.def
 const translationDefaultPropsProps = {
   text_card_number: null,
   text_expired: null,
-  text_blocked: null
+  text_blocked: null,
+  text_not_active: null
 };
 class PaymentCard extends _react.default.PureComponent {
   render() {
@@ -133,7 +134,7 @@ _defineProperty(PaymentCard, "defaultProps", _objectSpread({
 process.env.NODE_ENV !== "production" ? PaymentCard.propTypes = _objectSpread(_objectSpread({
   product_code: _propTypes.default.string.isRequired,
   card_number: _propTypes.default.string.isRequired,
-  card_status: _propTypes.default.oneOf(['active', 'blocked', 'expired']),
+  card_status: _propTypes.default.oneOf(['active', 'blocked', 'expired', 'not_active']),
   variant: _propTypes.default.oneOf(['normal', 'compact']),
   digits: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   raw_data: cardDataPropTypes,
@@ -177,6 +178,16 @@ function StatusOverlay(_ref2) {
     skeleton
   } = _ref2;
   switch (cardStatus) {
+    case 'not_active':
+      return _react.default.createElement("div", {
+        className: (0, _classnames.default)('dnb-payment-card__blocking__overlay', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton))
+      }, _react.default.createElement("div", {
+        className: "dnb-payment-card__blocking__center"
+      }, _react.default.createElement(_icons.StatusIcon, {
+        status: cardStatus
+      }), _react.default.createElement(_P.default, {
+        top: "xx-small"
+      }, translations.text_not_active)));
     case 'blocked':
       return _react.default.createElement("div", {
         className: (0, _classnames.default)('dnb-payment-card__blocking__overlay', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton))