@dnb/eufemia 10.7.0 → 10.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"StepsLayout.js","names":["React","useContext","useState","useCallback","classnames","Div","StepIndicator","makeUniqueId","forwardSpaceProps","DataContext","Step","StepsContext","NextButton","PreviousButton","Buttons","StepsLayout","props","className","id","mode","scrollTopOnStepChange","initialActiveIndex","onStepChange","children","dataContext","activeIndex","setActiveIndex","handlePrevious","_window","window","scrollTo","top","behavior","handleNext","hasErrors","_window2","setShowAllErrors","stepIndicatorData","Children","map","child","isValidElement","type","Error","title","handleChange","_ref","current_step","createElement","Provider","value","_extends","Sidebar","sidebar_id","bottom","data","no_animation","on_change","i","cloneElement","index","_supportsEufemiaSpacingProps"],"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","useContext","useState","useCallback","classnames","Div","StepIndicator","makeUniqueId","forwardSpaceProps","DataContext","Step","StepsContext","NextButton","PreviousButton","Buttons","StepsLayout","props","className","id","mode","scrollTopOnStepChange","initialActiveIndex","onStepChange","children","dataContext","activeIndex","setActiveIndex","handlePrevious","_window","window","scrollTo","top","behavior","handleNext","hasErrors","_window2","setShowAllErrors","stepIndicatorData","Children","map","child","isValidElement","type","Error","title","handleChange","_ref","current_step","createElement","Provider","value","_extends","Sidebar","sidebar_id","bottom","data","no_animation","on_change","i","cloneElement","index","_supportsEufemiaSpacingProps"],"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/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/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/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/extensions/forms/ValueBlock/index.js.map

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

package/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/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/extensions/forms/style/dnb-forms.css

@@ -9,17 +9,13 @@
   width: 100%;
 }
 .dnb-forms-field-phone-number--width-large {
-  width: 336px;
-}
-.dnb-forms-field-phone-number--width-medium {
-  width: 176px;
+  width: 21rem;
 }
 .dnb-forms-field-phone-number__country-code {
-  --autocomplete-width: 145px;
-  flex: 0 144px;
+  flex: 0 9rem;
 }
 .dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell {
-  width: 144px;
+  width: 9rem;
 }
 .dnb-forms-field-phone-number__number {
   flex: 1;
@@ -32,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;
@@ -46,10 +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-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 {
@@ -61,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);
@@ -137,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;
@@ -144,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);
@@ -155,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 {
@@ -168,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;
@@ -197,20 +270,23 @@
   color: var(--color-black-55);
   font-size: var(--font-size-small);
 }
-.dnb-forms-field-block--width-large {
-  width: 336px;
+.dnb-forms-field-block__status {
+  grid-area: status;
 }
-.dnb-forms-field-block--width-medium {
-  width: 176px;
+.dnb-forms-field-block__contents {
+  grid-area: contents;
 }
 .dnb-forms-field-block__contents--width-stretch {
   width: 100%;
 }
-.dnb-forms-field-block__contents--width-large {
-  width: 336px;
+.dnb-forms-field-block__contents--width-small {
+  width: 5rem;
 }
 .dnb-forms-field-block__contents--width-medium {
-  width: 176px;
+  width: 11rem;
+}
+.dnb-forms-field-block__contents--width-large {
+  width: 21rem;
 }
 
 .dnb-forms-value-block {

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

@@ -1 +1 @@
-.dnb-forms-field-phone-number{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-phone-number--width-stretch{width:100%}.dnb-forms-field-phone-number--width-large{width:336px}.dnb-forms-field-phone-number--width-medium{width:176px}.dnb-forms-field-phone-number__country-code{--autocomplete-width:145px;flex:0 144px}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:144px}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-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)}
+.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/extensions/forms/style/index.d.ts

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

package/extensions/forms/style/index.js

@@ -0,0 +1 @@
+import "./dnb-forms.min.css";

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

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

package/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/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/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/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/extensions/forms/utils/useWasChanged.js

@@ -0,0 +1,56 @@
+import { useRef } from 'react';
+export default function useWasChanged(subject, title, debug) {
+  const previous = 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/extensions/forms/utils/useWasChanged.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWasChanged.js","names":["useRef","useWasChanged","subject","title","debug","previous","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,SAASA,MAAM,QAAQ,OAAO;AAM9B,eAAe,SAASC,aAAaA,CACnCC,OAAgB,EAChBC,KAAc,EACdC,KAAe,EACT;EACN,MAAMC,QAAQ,GAAGL,MAAM,CAAUE,OAAO,CAAC;EACzC,IAAI,CAACG,QAAQ,CAACC,OAAO,IAAI,CAACJ,OAAO,EAAE;IACjCK,OAAO,CAACC,GAAG,CACT,+GACF,CAAC;EACH;EAEA,MAAM;IAAEC,OAAO;IAAEC;EAAU,CAAC,GAAG,CAC7B,GAAGC,MAAM,CAACC,OAAO,CAACV,OAAO,CAAC,EAC1B,GAAGS,MAAM,CAACC,OAAO,CAACP,QAAQ,CAACC,OAAO,IAAI,CAAC,CAAC,CAAC,CAACO,MAAM,CAC9CC,IAAA;IAAA,IAAC,CAACC,GAAG,CAAC,GAAAD,IAAA;IAAA,OAAKZ,OAAO,CAACa,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,GAAAf,QAAQ,CAACC,OAAO,cAAAc,iBAAA,uBAAhBA,iBAAA,CAAmBL,GAAG,CAAC,OAAKb,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGa,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,CAACnB,KAAK,EAAE;IAClC;EACF;EAEAG,OAAO,CAACiB,cAAc,CACnB,GAAErB,KAAK,IAAI,QAAS,OAAMM,OAAO,CAACc,MAAO,sBAC5C,CAAC;EAEDZ,MAAM,CAACc,MAAM,CAAChB,OAAO,CAAC,CAACiB,GAAG,CAAEX,GAAG,IAAK;IAClC,IAAIX,KAAK,EAAE;MAAA,IAAAuB,kBAAA;MACTpB,OAAO,CAACiB,cAAc,CAAE,YAAWT,GAAI,EAAC,CAAC;MACzCR,OAAO,CAACC,GAAG,CAAC,YAAY,GAAAmB,kBAAA,GAAEtB,QAAQ,CAACC,OAAO,cAAAqB,kBAAA,uBAAhBA,kBAAA,CAAmBZ,GAAG,CAAC,CAAC;MAClDR,OAAO,CAACC,GAAG,CAAC,WAAW,EAAEN,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGa,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;EAEFV,QAAQ,CAACC,OAAO,GAAGJ,OAAO;EAE1BK,OAAO,CAACqB,QAAQ,CAAC,CAAC;AACpB"}

package/extensions/forms/variables.scss

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

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentCard.js","names":["React","PropTypes","classnames","Context","Provider","isTrue","validateDOMAttributes","extendPropsWithContextInClassComponent","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","P","ProductType","CardType","BankAxeptType","Designs","defaultDesign","cardProducts","ProductLogo","TypeLogo","BankLogo","StatusIcon","BankAxeptLogo","cardDataPropTypes","process","env","NODE_ENV","shape","productCode","string","isRequired","productName","displayName","cardDesign","object","cardType","productType","bankAxept","translationDefaultPropsProps","text_card_number","text_expired","text_blocked","text_not_active","PaymentCard","PureComponent","render","_this$context","props","defaultProps","locale","context","skeleton","product_code","card_number","card_status","variant","digits","id","raw_data","className","class","_className","children","attributes","_objectWithoutProperties","_excluded","cardData","getCardData","params","_objectSpread","createElement","Consumer","_ref","translation","translations","NormalCard","data","cardStatus","cardNumber","formatCardNumber","parseFloat","_defineProperty","propTypes","oneOf","oneOfType","number","bool","node","func","formatCardNumberRegex","slice","length","replace","card","find","item","defaultCard","None","StatusOverlay","_ref2","status","top","CardText","_ref3","modifier","_ref4","_data$cardDesign","_extends","cardStyle","backgroundImage","style","logoType","bankLogo"],"sources":["../../../../src/extensions/payment-card/PaymentCard.js"],"sourcesContent":["/**\n * Web PaymentCard Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport Provider from '../../shared/Provider'\nimport {\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContextInClassComponent,\n} from '../../shared/component-helper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../../components/space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../../components/skeleton/SkeletonHelper'\nimport P from '../../elements/P'\n\nimport { ProductType, CardType, BankAxeptType } from './utils/Types'\nimport Designs, { defaultDesign } from './utils/CardDesigns'\nimport cardProducts from './utils/cardProducts'\nimport {\n  ProductLogo,\n  TypeLogo,\n  BankLogo,\n  StatusIcon,\n  BankAxeptLogo,\n} from './icons'\n\nexport { Designs, ProductType, CardType, BankAxeptType }\n\nconst cardDataPropTypes = PropTypes.shape({\n  productCode: PropTypes.string.isRequired,\n  productName: PropTypes.string.isRequired,\n  displayName: PropTypes.string.isRequired,\n  cardDesign: PropTypes.object.isRequired,\n  cardType: PropTypes.object.isRequired,\n  productType: PropTypes.object.isRequired,\n  bankAxept: PropTypes.object.isRequired,\n})\n\nconst translationDefaultPropsProps = {\n  text_card_number: null,\n  text_expired: null,\n  text_blocked: null,\n  text_not_active: null,\n}\n\nexport default class PaymentCard extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    product_code: PropTypes.string.isRequired,\n    card_number: PropTypes.string.isRequired,\n    card_status: PropTypes.oneOf(['active', 'blocked', 'expired', 'not_active']),\n    variant: PropTypes.oneOf(['normal', 'compact']),\n    digits: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    raw_data: cardDataPropTypes,\n    id: PropTypes.string,\n    locale: PropTypes.string,\n\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    ...spacingPropTypes,\n\n    class: PropTypes.string,\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.node,\n      PropTypes.func,\n    ]),\n  }\n\n  static defaultProps = {\n    digits: 8,\n    locale: null,\n    card_status: 'active',\n    variant: 'normal',\n\n    id: null,\n    raw_data: null,\n\n    skeleton: false,\n    class: null,\n    className: null,\n    children: null,\n\n    ...translationDefaultPropsProps,\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      PaymentCard.defaultProps,\n      { locale: this.context.locale },\n      { skeleton: this.context?.skeleton }\n    )\n\n    const {\n      product_code,\n      card_number,\n      card_status,\n      variant,\n      digits,\n      id,\n      raw_data,\n      locale,\n      skeleton,\n      className,\n      class: _className,\n      children, //eslint-disable-line\n      ...attributes\n    } = props\n\n    const cardData = raw_data || getCardData(product_code)\n\n    const params = {\n      className: classnames(\n        'dnb-payment-card',\n        `dnb-payment-card--${variant}`,\n        createSkeletonClass(null, skeleton, this.context),\n        createSpacingClasses(props),\n        className,\n        _className\n      ),\n      ...attributes,\n    }\n\n    skeletonDOMAttributes(params, skeleton, this.context)\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    return (\n      <Provider locale={locale}>\n        <Context.Consumer>\n          {({ translation }) => {\n            const translations = extendPropsWithContextInClassComponent(\n              this.props,\n              translationDefaultPropsProps,\n              translation.PaymentCard\n            )\n            return (\n              <figure {...params}>\n                <figcaption className=\"dnb-sr-only dnb-payment-card__figcaption\">\n                  {cardData.productName}\n                </figcaption>\n                <NormalCard\n                  id={id}\n                  skeleton={isTrue(skeleton)}\n                  data={cardData}\n                  cardStatus={card_status}\n                  cardNumber={formatCardNumber(\n                    card_number,\n                    parseFloat(digits)\n                  )}\n                  translations={translations}\n                />\n              </figure>\n            )\n          }}\n        </Context.Consumer>\n      </Provider>\n    )\n  }\n}\n\nconst formatCardNumberRegex = /(?=(?:....)*$)/g\n\nexport const formatCardNumber = (cardNumber, digits) =>\n  digits\n    ? cardNumber\n        .slice(cardNumber.length - digits, cardNumber.length)\n        .replace(formatCardNumberRegex, ' ')\n    : cardNumber.replace(formatCardNumberRegex, ' ')\n\nexport const getCardData = (productCode) => {\n  const card = cardProducts.find(\n    (item) => item.productCode === productCode\n  )\n  return card || defaultCard(productCode)\n}\n\nconst defaultCard = (productCode) => ({\n  productCode,\n  productName: '',\n  displayName: '',\n  cardDesign: defaultDesign,\n  cardType: CardType.None,\n  productType: ProductType.None,\n  bankAxept: BankAxeptType.None,\n})\n\nStatusOverlay.propTypes = {\n  cardStatus: PropTypes.string.isRequired,\n  translations: PropTypes.object.isRequired,\n  skeleton: PropTypes.bool,\n}\nStatusOverlay.defaultProps = {\n  skeleton: false,\n}\n\nfunction StatusOverlay({ cardStatus, translations, skeleton }) {\n  switch (cardStatus) {\n    case 'not_active':\n      return (\n        <div\n          className={classnames(\n            'dnb-payment-card__blocking__overlay',\n            createSkeletonClass('font', skeleton)\n          )}\n        >\n          <div className=\"dnb-payment-card__blocking__center\">\n            <StatusIcon status={cardStatus} />\n            <P top=\"xx-small\">{translations.text_not_active}</P>\n          </div>\n        </div>\n      )\n    case 'blocked':\n      return (\n        <div\n          className={classnames(\n            'dnb-payment-card__blocking__overlay',\n            createSkeletonClass('font', skeleton)\n          )}\n        >\n          <div className=\"dnb-payment-card__blocking__center\">\n            <StatusIcon status={cardStatus} />\n            <P top=\"xx-small\">{translations.text_blocked}</P>\n          </div>\n        </div>\n      )\n\n    case 'expired':\n      return (\n        <div\n          className={classnames(\n            'dnb-payment-card__blocking__overlay',\n            createSkeletonClass('font', skeleton)\n          )}\n        >\n          <div className=\"dnb-payment-card__blocking__center\">\n            <StatusIcon status={cardStatus} />\n            <P top=\"xx-small\">{translations.text_expired}</P>\n          </div>\n        </div>\n      )\n\n    case 'active':\n    default:\n      return null\n  }\n}\n\nCardText.propTypes = {\n  cardNumber: PropTypes.string.isRequired,\n  translations: PropTypes.object.isRequired,\n  skeleton: PropTypes.bool.isRequired,\n}\n\nfunction CardText({ cardNumber, translations, skeleton }) {\n  return (\n    <span\n      className={classnames(\n        'dnb-payment-card__card__wrapper',\n        createSkeletonClass('font', skeleton)\n      )}\n    >\n      <P\n        className=\"dnb-payment-card__card__holder\"\n        modifier=\"x-small medium\"\n      >\n        {translations.text_card_number}\n      </P>\n      <P className=\"dnb-payment-card__card__numbers\">{cardNumber}</P>\n    </span>\n  )\n}\n\nNormalCard.propTypes = {\n  id: PropTypes.string,\n  skeleton: PropTypes.bool,\n  data: cardDataPropTypes.isRequired,\n  cardStatus: PropTypes.string.isRequired,\n  cardNumber: PropTypes.string.isRequired,\n  translations: PropTypes.object.isRequired,\n}\nNormalCard.defaultProps = {\n  id: null,\n  skeleton: null,\n}\n\nfunction NormalCard({\n  data,\n  cardStatus,\n  cardNumber,\n  id,\n  skeleton,\n  translations,\n}) {\n  return (\n    <div\n      id={id}\n      className={classnames(\n        'dnb-payment-card__card',\n        `dnb-payment-card__${data.cardDesign.cardStyle}`\n      )}\n      {...(data.cardDesign?.backgroundImage\n        ? {\n            style: {\n              backgroundImage: `url(${data.cardDesign.backgroundImage})`,\n            },\n          }\n        : {})}\n    >\n      <div className=\"dnb-payment-card__card__content\">\n        <div className=\"dnb-payment-card__card__top\">\n          <BankLogo logoType={data.cardDesign.bankLogo} />\n          <ProductLogo\n            productType={data.productType}\n            cardDesign={data.cardDesign}\n          />\n          <BankAxeptLogo\n            bankAxept={data.bankAxept}\n            cardDesign={data.cardDesign}\n          />\n        </div>\n        <div className=\"dnb-payment-card__card__bottom\">\n          <CardText\n            cardNumber={cardNumber}\n            displayName={data.displayName}\n            translations={translations}\n            skeleton={skeleton}\n          />\n          <TypeLogo\n            cardType={data.cardType}\n            cardDesign={data.cardDesign}\n          />\n        </div>\n      </div>\n      <StatusOverlay\n        skeleton={skeleton}\n        cardStatus={cardStatus}\n        translations={translations}\n      />\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"PaymentCard.js","names":["React","PropTypes","classnames","Context","Provider","isTrue","validateDOMAttributes","extendPropsWithContextInClassComponent","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","P","ProductType","CardType","BankAxeptType","Designs","defaultDesign","cardProducts","ProductLogo","TypeLogo","BankLogo","StatusIcon","BankAxeptLogo","cardDataPropTypes","process","env","NODE_ENV","shape","productCode","string","isRequired","productName","displayName","cardDesign","object","cardType","productType","bankAxept","translationDefaultPropsProps","text_card_number","text_expired","text_blocked","text_not_active","PaymentCard","PureComponent","render","_this$context","props","defaultProps","locale","context","skeleton","product_code","card_number","card_status","variant","digits","id","raw_data","className","class","_className","children","attributes","_objectWithoutProperties","_excluded","cardData","getCardData","params","_objectSpread","createElement","Consumer","_ref","translation","translations","NormalCard","data","cardStatus","cardNumber","formatCardNumber","parseFloat","_defineProperty","propTypes","oneOf","oneOfType","number","bool","node","func","formatCardNumberRegex","slice","length","replace","card","find","item","defaultCard","None","StatusOverlay","_ref2","status","top","CardText","_ref3","modifier","_ref4","_data$cardDesign","_extends","cardStyle","backgroundImage","style","logoType","bankLogo"],"sources":["../../../../src/extensions/payment-card/PaymentCard.js"],"sourcesContent":["/**\n * Web PaymentCard Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport Provider from '../../shared/Provider'\nimport {\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContextInClassComponent,\n} from '../../shared/component-helper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../../components/space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../../components/skeleton/SkeletonHelper'\nimport P from '../../elements/P'\n\nimport { ProductType, CardType, BankAxeptType } from './utils/Types'\nimport Designs, { defaultDesign } from './utils/CardDesigns'\nimport cardProducts from './utils/cardProducts'\nimport {\n  ProductLogo,\n  TypeLogo,\n  BankLogo,\n  StatusIcon,\n  BankAxeptLogo,\n} from './icons'\n\nexport { Designs, ProductType, CardType, BankAxeptType }\n\nconst cardDataPropTypes = PropTypes.shape({\n  productCode: PropTypes.string.isRequired,\n  productName: PropTypes.string.isRequired,\n  displayName: PropTypes.string.isRequired,\n  cardDesign: PropTypes.object.isRequired,\n  cardType: PropTypes.object.isRequired,\n  productType: PropTypes.object.isRequired,\n  bankAxept: PropTypes.object.isRequired,\n})\n\nconst translationDefaultPropsProps = {\n  text_card_number: null,\n  text_expired: null,\n  text_blocked: null,\n  text_not_active: null,\n}\n\nexport default class PaymentCard extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    product_code: PropTypes.string.isRequired,\n    card_number: PropTypes.string.isRequired,\n    card_status: PropTypes.oneOf([\n      'active',\n      'blocked',\n      'expired',\n      'not_active',\n    ]),\n    variant: PropTypes.oneOf(['normal', 'compact']),\n    digits: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    raw_data: cardDataPropTypes,\n    id: PropTypes.string,\n    locale: PropTypes.string,\n\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    ...spacingPropTypes,\n\n    class: PropTypes.string,\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.node,\n      PropTypes.func,\n    ]),\n  }\n\n  static defaultProps = {\n    digits: 8,\n    locale: null,\n    card_status: 'active',\n    variant: 'normal',\n\n    id: null,\n    raw_data: null,\n\n    skeleton: false,\n    class: null,\n    className: null,\n    children: null,\n\n    ...translationDefaultPropsProps,\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      PaymentCard.defaultProps,\n      { locale: this.context.locale },\n      { skeleton: this.context?.skeleton }\n    )\n\n    const {\n      product_code,\n      card_number,\n      card_status,\n      variant,\n      digits,\n      id,\n      raw_data,\n      locale,\n      skeleton,\n      className,\n      class: _className,\n      children, //eslint-disable-line\n      ...attributes\n    } = props\n\n    const cardData = raw_data || getCardData(product_code)\n\n    const params = {\n      className: classnames(\n        'dnb-payment-card',\n        `dnb-payment-card--${variant}`,\n        createSkeletonClass(null, skeleton, this.context),\n        createSpacingClasses(props),\n        className,\n        _className\n      ),\n      ...attributes,\n    }\n\n    skeletonDOMAttributes(params, skeleton, this.context)\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    return (\n      <Provider locale={locale}>\n        <Context.Consumer>\n          {({ translation }) => {\n            const translations = extendPropsWithContextInClassComponent(\n              this.props,\n              translationDefaultPropsProps,\n              translation.PaymentCard\n            )\n            return (\n              <figure {...params}>\n                <figcaption className=\"dnb-sr-only dnb-payment-card__figcaption\">\n                  {cardData.productName}\n                </figcaption>\n                <NormalCard\n                  id={id}\n                  skeleton={isTrue(skeleton)}\n                  data={cardData}\n                  cardStatus={card_status}\n                  cardNumber={formatCardNumber(\n                    card_number,\n                    parseFloat(digits)\n                  )}\n                  translations={translations}\n                />\n              </figure>\n            )\n          }}\n        </Context.Consumer>\n      </Provider>\n    )\n  }\n}\n\nconst formatCardNumberRegex = /(?=(?:....)*$)/g\n\nexport const formatCardNumber = (cardNumber, digits) =>\n  digits\n    ? cardNumber\n        .slice(cardNumber.length - digits, cardNumber.length)\n        .replace(formatCardNumberRegex, ' ')\n    : cardNumber.replace(formatCardNumberRegex, ' ')\n\nexport const getCardData = (productCode) => {\n  const card = cardProducts.find(\n    (item) => item.productCode === productCode\n  )\n  return card || defaultCard(productCode)\n}\n\nconst defaultCard = (productCode) => ({\n  productCode,\n  productName: '',\n  displayName: '',\n  cardDesign: defaultDesign,\n  cardType: CardType.None,\n  productType: ProductType.None,\n  bankAxept: BankAxeptType.None,\n})\n\nStatusOverlay.propTypes = {\n  cardStatus: PropTypes.string.isRequired,\n  translations: PropTypes.object.isRequired,\n  skeleton: PropTypes.bool,\n}\nStatusOverlay.defaultProps = {\n  skeleton: false,\n}\n\nfunction StatusOverlay({ cardStatus, translations, skeleton }) {\n  switch (cardStatus) {\n    case 'not_active':\n      return (\n        <div\n          className={classnames(\n            'dnb-payment-card__blocking__overlay',\n            createSkeletonClass('font', skeleton)\n          )}\n        >\n          <div className=\"dnb-payment-card__blocking__center\">\n            <StatusIcon status={cardStatus} />\n            <P top=\"xx-small\">{translations.text_not_active}</P>\n          </div>\n        </div>\n      )\n    case 'blocked':\n      return (\n        <div\n          className={classnames(\n            'dnb-payment-card__blocking__overlay',\n            createSkeletonClass('font', skeleton)\n          )}\n        >\n          <div className=\"dnb-payment-card__blocking__center\">\n            <StatusIcon status={cardStatus} />\n            <P top=\"xx-small\">{translations.text_blocked}</P>\n          </div>\n        </div>\n      )\n\n    case 'expired':\n      return (\n        <div\n          className={classnames(\n            'dnb-payment-card__blocking__overlay',\n            createSkeletonClass('font', skeleton)\n          )}\n        >\n          <div className=\"dnb-payment-card__blocking__center\">\n            <StatusIcon status={cardStatus} />\n            <P top=\"xx-small\">{translations.text_expired}</P>\n          </div>\n        </div>\n      )\n\n    case 'active':\n    default:\n      return null\n  }\n}\n\nCardText.propTypes = {\n  cardNumber: PropTypes.string.isRequired,\n  translations: PropTypes.object.isRequired,\n  skeleton: PropTypes.bool.isRequired,\n}\n\nfunction CardText({ cardNumber, translations, skeleton }) {\n  return (\n    <span\n      className={classnames(\n        'dnb-payment-card__card__wrapper',\n        createSkeletonClass('font', skeleton)\n      )}\n    >\n      <P\n        className=\"dnb-payment-card__card__holder\"\n        modifier=\"x-small medium\"\n      >\n        {translations.text_card_number}\n      </P>\n      <P className=\"dnb-payment-card__card__numbers\">{cardNumber}</P>\n    </span>\n  )\n}\n\nNormalCard.propTypes = {\n  id: PropTypes.string,\n  skeleton: PropTypes.bool,\n  data: cardDataPropTypes.isRequired,\n  cardStatus: PropTypes.string.isRequired,\n  cardNumber: PropTypes.string.isRequired,\n  translations: PropTypes.object.isRequired,\n}\nNormalCard.defaultProps = {\n  id: null,\n  skeleton: null,\n}\n\nfunction NormalCard({\n  data,\n  cardStatus,\n  cardNumber,\n  id,\n  skeleton,\n  translations,\n}) {\n  return (\n    <div\n      id={id}\n      className={classnames(\n        'dnb-payment-card__card',\n        `dnb-payment-card__${data.cardDesign.cardStyle}`\n      )}\n      {...(data.cardDesign?.backgroundImage\n        ? {\n            style: {\n              backgroundImage: `url(${data.cardDesign.backgroundImage})`,\n            },\n          }\n        : {})}\n    >\n      <div className=\"dnb-payment-card__card__content\">\n        <div className=\"dnb-payment-card__card__top\">\n          <BankLogo logoType={data.cardDesign.bankLogo} />\n          <ProductLogo\n            productType={data.productType}\n            cardDesign={data.cardDesign}\n          />\n          <BankAxeptLogo\n            bankAxept={data.bankAxept}\n            cardDesign={data.cardDesign}\n          />\n        </div>\n        <div className=\"dnb-payment-card__card__bottom\">\n          <CardText\n            cardNumber={cardNumber}\n            displayName={data.displayName}\n            translations={translations}\n            skeleton={skeleton}\n          />\n          <TypeLogo\n            cardType={data.cardType}\n            cardDesign={data.cardDesign}\n          />\n        </div>\n      </div>\n      <StatusOverlay\n        skeleton={skeleton}\n        cardStatus={cardStatus}\n        translations={translations}\n      />\n    </div>\n  )\n}\n"],"mappings":"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"}