@dnb/eufemia 10.6.0 → 10.8.0

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

@@ -1,15 +1,3 @@
-.dnb-forms-field-number__input--width-medium {
-  width: 176px;
-}
-.dnb-forms-field-number__input--width-large {
-  width: 336px;
-}
-.dnb-forms-field-number .dnb-input__inner,
-.dnb-forms-field-number .dnb-input__row,
-.dnb-forms-field-number .dnb-input__shell {
-  width: 100%;
-}
-
 .dnb-forms-field-phone-number {
   display: flex;
   flex-flow: row;
@@ -17,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/es/extensions/forms/style/dnb-forms.min.css

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

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

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

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

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

@@ -0,0 +1,51 @@
+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(([key]) => subject[key] === undefined)].reduce(({
+    changed,
+    unchanged
+  }, [key, value]) => {
+    var _previous$current;
+    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/es/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","key","undefined","reduce","value","_previous$current","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,CAC9C,CAAC,CAACC,GAAG,CAAC,KAAKZ,OAAO,CAACY,GAAG,CAAC,KAAKC,SAC9B,CAAC,CACF,CAACC,MAAM,CACN,CAAC;IAAEP,OAAO;IAAEC;EAAU,CAAC,EAAE,CAACI,GAAG,EAAEG,KAAK,CAAC,KAAK;IAAA,IAAAC,iBAAA;IACxC,IAAI,EAAAA,iBAAA,GAAAb,QAAQ,CAACC,OAAO,cAAAY,iBAAA,uBAAhBA,iBAAA,CAAmBJ,GAAG,CAAC,OAAKZ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGY,GAAG,CAAC,GAAE;MAC9C,OAAO;QACLL,OAAO,EAAEA,OAAO,CAACU,MAAM,CAACL,GAAG,CAAC;QAC5BJ;MACF,CAAC;IACH,CAAC,MAAM;MACL,OAAO;QACLD,OAAO;QACPC,SAAS,EAAEA,SAAS,CAACS,MAAM,CAACL,GAAG;MACjC,CAAC;IACH;EACF,CAAC,EACD;IAAEL,OAAO,EAAE,EAAE;IAAEC,SAAS,EAAE;EAAG,CAC/B,CAAC;EAED,IAAID,OAAO,CAACW,MAAM,KAAK,CAAC,IAAI,CAAChB,KAAK,EAAE;IAClC;EACF;EAEAG,OAAO,CAACc,cAAc,CACnB,GAAElB,KAAK,IAAI,QAAS,OAAMM,OAAO,CAACW,MAAO,sBAC5C,CAAC;EAEDT,MAAM,CAACW,MAAM,CAACb,OAAO,CAAC,CAACc,GAAG,CAAET,GAAG,IAAK;IAClC,IAAIV,KAAK,EAAE;MAAA,IAAAoB,kBAAA;MACTjB,OAAO,CAACc,cAAc,CAAE,YAAWP,GAAI,EAAC,CAAC;MACzCP,OAAO,CAACC,GAAG,CAAC,YAAY,GAAAgB,kBAAA,GAAEnB,QAAQ,CAACC,OAAO,cAAAkB,kBAAA,uBAAhBA,kBAAA,CAAmBV,GAAG,CAAC,CAAC;MAClDP,OAAO,CAACC,GAAG,CAAC,WAAW,EAAEN,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGY,GAAG,CAAC,CAAC;MACxCP,OAAO,CAACkB,QAAQ,CAAC,CAAC;IACpB,CAAC,MAAM;MACLlB,OAAO,CAACC,GAAG,CAAE,YAAWM,GAAI,EAAC,CAAC;IAChC;EACF,CAAC,CAAC;EACFH,MAAM,CAACW,MAAM,CAACZ,SAAS,CAAC,CAACa,GAAG,CAAET,GAAG,IAAK;IACpCP,OAAO,CAACC,GAAG,CAAE,cAAaM,GAAI,EAAC,CAAC;EAClC,CAAC,CAAC;EAEFT,QAAQ,CAACC,OAAO,GAAGJ,OAAO;EAE1BK,OAAO,CAACkB,QAAQ,CAAC,CAAC;AACpB"}

package/es/extensions/forms/variables.scss

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

package/es/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/es/extensions/payment-card/PaymentCard.d.ts

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

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

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

package/es/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","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","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","status","top","CardText","modifier","_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}\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']),\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 '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","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","status","top","CardText","modifier","_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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"}

package/es/extensions/payment-card/icons/CardIn.d.ts

@@ -0,0 +1,2 @@
+declare const CardIn: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default CardIn;

package/es/extensions/payment-card/icons/CardIn.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _title, _path;
+import React from 'react';
+const CardIn = props => React.createElement("svg", _extends({
+  width: "24",
+  height: "24",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _title || (_title = React.createElement("title", null, "Kort In")), _path || (_path = React.createElement("path", {
+  d: "M12 16h7.5M.75 8V6.5a2 2 0 0 1 2-2h18.5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2.75a2 2 0 0 1-2-2V17M1 12.5h7.5M6 15l2.5-2.5m0 0L6 10",
+  stroke: "#FBF6EC",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 1.5
+})));
+export default CardIn;
+//# sourceMappingURL=CardIn.js.map

package/es/extensions/payment-card/icons/CardIn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardIn.js","names":["React","CardIn","props","createElement","_extends","width","height","fill","viewBox","xmlns","_title","_path","d","stroke","strokeLinecap","strokeLinejoin","strokeWidth"],"sources":["../../../../../src/extensions/payment-card/icons/CardIn.tsx"],"sourcesContent":["import React from 'react'\nconst CardIn = (props) => (\n  <svg\n    width=\"24\"\n    height=\"24\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>Kort In</title>\n    <path\n      d=\"M12 16h7.5M.75 8V6.5a2 2 0 0 1 2-2h18.5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2.75a2 2 0 0 1-2-2V17M1 12.5h7.5M6 15l2.5-2.5m0 0L6 10\"\n      stroke=\"#FBF6EC\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n    />\n  </svg>\n)\nexport default CardIn\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,MAAMC,MAAM,GAAIC,KAAK,IACnBF,KAAA,CAAAG,aAAA,QAAAC,QAAA;EACEC,KAAK,EAAC,IAAI;EACVC,MAAM,EAAC,IAAI;EACXC,IAAI,EAAC,MAAM;EACXC,OAAO,EAAC,WAAW;EACnBC,KAAK,EAAC;AAA4B,GAC9BP,KAAK,GAAAQ,MAAA,KAAAA,MAAA,GAETV,KAAA,CAAAG,aAAA,gBAAO,SAAc,CAAC,GAAAQ,KAAA,KAAAA,KAAA,GACtBX,KAAA,CAAAG,aAAA;EACES,CAAC,EAAC,+HAA+H;EACjIC,MAAM,EAAC,SAAS;EAChBC,aAAa,EAAC,OAAO;EACrBC,cAAc,EAAC,OAAO;EACtBC,WAAW,EAAE;AAAI,CAClB,CAAC,CACC,CACN;AACD,eAAef,MAAM"}

package/es/extensions/payment-card/icons/index.js

@@ -1,9 +1,10 @@
-var _Expired, _Blocked;
+var _Expired, _NotActive, _Blocked;
 import React from 'react';
 import BankAxept from './BankAxept';
 import DNB from './DNB';
 import Expired from './Clock';
 import Blocked from './Padlock';
+import NotActive from './CardIn';
 import MastercardDefault from './MastercardDefault';
 import MastercardDark from './MastercardDark';
 import Pluss from './Pluss';
@@ -100,6 +101,8 @@ const StatusIcon = ({
   switch (status) {
     case 'expired':
       return _Expired || (_Expired = React.createElement(Expired, null));
+    case 'not_active':
+      return _NotActive || (_NotActive = React.createElement(NotActive, null));
     case 'blocked':
       return _Blocked || (_Blocked = React.createElement(Blocked, null));
     case 'active':