@dnb/eufemia 10.34.0 → 10.35.0

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

@@ -159,6 +159,16 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after {
   width: var(--number-control-button-width--large);
 }
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-button--control-before,
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-button--control-after {
+  width: var(--number-control-button-width--large);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-input__border {
+  flex-grow: 1;
+}
 
 .dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button {
   color: var(--color-fire-red);
@@ -380,6 +390,52 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-bottom: var(--spacing-small);
 }
 
+.dnb-forms-section-block {
+  --block-outline-color: var(--outline-color, var(--color-lavender));
+}
+.dnb-forms-section-block--error:has(.dnb-form-status--error) {
+  --block-outline-color: var(--color-fire-red);
+}
+.dnb-forms-section-block:not(.dnb-height-animation--hidden) {
+  display: flex;
+  flex-direction: column;
+}
+.dnb-forms-section-block__inner {
+  flex: 1;
+  outline: none;
+  margin-bottom: var(--space);
+  padding: var(--padding, 1rem);
+  transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default);
+  transform: translateY(-2.5rem);
+}
+.dnb-forms-section-block--variant-basic .dnb-forms-section-block__inner, .dnb-forms-section-block__inner:not([class*=dnb-flex-container--spacing]) {
+  --padding: 0;
+}
+.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing] {
+  border-radius: 0.375rem;
+}
+.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small {
+  --space: var(--spacing-small);
+}
+.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium {
+  --space: var(--spacing-medium);
+}
+.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large {
+  --space: var(--spacing-large);
+}
+.dnb-forms-section-block--variant-outline .dnb-forms-section-block__inner[class*=dnb-flex-container--spacing] {
+  box-shadow: inset 0 0 0 2px var(--block-outline-color);
+}
+.dnb-forms-section-block__inner .dnb-dl .dnb-dd {
+  margin-bottom: 0;
+}
+.dnb-forms-section-block.dnb-height-animation--is-visible .dnb-forms-section-block__inner {
+  transform: translateY(-0.5rem);
+}
+.dnb-forms-section-block.dnb-height-animation--parallax .dnb-forms-section-block__inner {
+  transform: translateY(0);
+}
+
 /*
  * Utilities
  */
@@ -489,50 +545,6 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
     font-size: 0;
   }
 }
-.dnb-forms-iterate-block {
-  --block-outline-color: var(--outline-color, var(--color-lavender));
-}
-.dnb-forms-iterate-block--error:has(.dnb-form-status--error) {
-  --block-outline-color: var(--color-fire-red);
-}
-.dnb-forms-iterate-block:not(.dnb-height-animation--hidden) {
-  display: flex;
-  flex-direction: column;
-}
-.dnb-forms-iterate-block__inner {
-  flex: 1;
-  margin-bottom: var(--space);
-  padding: var(--padding, 1rem);
-  transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default);
-  transform: translateY(-2.5rem);
-}
-.dnb-forms-iterate-block--variant-basic .dnb-forms-iterate-block__inner, .dnb-forms-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {
-  --padding: 0;
-}
-.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing] {
-  border-radius: 0.375rem;
-}
-.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small {
-  --space: var(--spacing-small);
-}
-.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium {
-  --space: var(--spacing-medium);
-}
-.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large {
-  --space: var(--spacing-large);
-}
-.dnb-forms-iterate-block--variant-outline .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing] {
-  box-shadow: inset 0 0 0 2px var(--block-outline-color);
-}
-.dnb-forms-iterate-block__inner .dnb-dl .dnb-dd {
-  margin-bottom: 0;
-}
-.dnb-forms-iterate-block.dnb-height-animation--is-visible .dnb-forms-iterate-block__inner {
-  transform: translateY(-0.5rem);
-}
-.dnb-forms-iterate-block.dnb-height-animation--parallax .dnb-forms-iterate-block__inner {
-  transform: translateY(0);
-}
 .dnb-forms-iterate__element {
   outline: none;
 }

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

@@ -1 +1 @@
-@charset "UTF-8";.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{row-gap:0}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--spacing-x-small)}@media screen and (min-width:40em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}.dnb-forms-field-expiry .dnb-multi-input-mask{width:var(--forms-field-width--small)}.dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell{justify-content:center}.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{display:flex}.dnb-forms-field-number__contents--has-controls .dnb-input__input{align-items:center}.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border{border-radius:0}.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border,.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within,.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:hover,html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within{box-shadow:none}.dnb-forms-field-number__contents--has-controls>.dnb-input__border--root{--input-border-inset: ;--input-border-inset--hover: ;--input-border-inset--active: ;--input-border-inset--focus: ;--input-border-inset--disabled: }html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button-background-color--hover);color:var(--number-control-button-color--hover)}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button-background-color--active);color:var(--number-control-button-color--active)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button--error-contrast);color:var(--number-control-button--error)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button--error);color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-before[disabled]{background-color:var(--color-black-3);color:var(--color-black-20)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small{width:calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before{width:var(--number-control-button-width--small)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium{width:calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before{width:var(--number-control-button-width--medium)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large{width:calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before{width:var(--number-control-button-width--large)}.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button{color:var(--color-fire-red)}.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button:hover{color:var(--color-white)}.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:calc(var(--forms-field-width--medium) - 2rem)}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-phone-number .dnb-form-label{max-width:14ch}.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__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}@media screen and (max-width:15em){.dnb-forms-field-number .dnb-input__shell,.dnb-forms-field-string .dnb-input__shell{width:90%}}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:25em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.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__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__contents__composition--vertical{display:flex;flex-flow:column;row-gap:var(--spacing-small)}.dnb-forms-field-block__contents__composition--horizontal{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:25em){.dnb-forms-field-block__contents__composition--horizontal{align-items:flex-end}.dnb-forms-field-block__contents__composition--horizontal[class*=align-center]{align-items:center}}@media screen and (max-width:25em){.dnb-forms-field-block__contents__composition--horizontal{flex-flow:column;row-gap:var(--spacing-x-small)}}.dnb-forms-button-row{display:flex;flex-flow:row;flex-wrap:wrap;gap:var(--spacing-small)}.dnb-card+.dnb-button--primary:not([class*=space__top]),.dnb-card+.dnb-forms-button-row:not([class*=space__top]){margin-top:var(--spacing-small)}.dnb-card+.dnb-button--primary:not([class*=space__top]) .dnb-button[class*=space__top],.dnb-card+.dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top]{margin-top:0}@media screen and (min-width:40em){.dnb-card+.dnb-button--primary:not([class*=space__left]),.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}:root{--forms-card-max-width:36.5rem}.dnb-forms-form .dnb-card{max-width:var(--forms-card-max-width)}.dnb-spacing .dnb-forms-main-heading.dnb-h--large:not([class*=space__]){margin:0}@media screen and (min-width:40em){.dnb-forms-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-forms-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-spacing .dnb-forms-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-forms-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-submit-indicator{--padding-left:0.5em;display:inline}.dnb-forms-submit-indicator__content{font-size:0;line-height:1em;transition:font-size .8s var(--easing-default);will-change:font-size}.dnb-forms-submit-indicator__content b{animation-delay:.2s;animation-duration:1.3s;animation-iteration-count:infinite;animation-name:submit-indicator-dot;color:var(--dots-color,currentColor);opacity:.2;padding-left:.125em}.dnb-forms-submit-indicator__content b:first-of-type{animation-delay:50ms;padding-left:var(--padding-left)}.dnb-forms-submit-indicator__content b:nth-of-type(2){animation-delay:.2s}.dnb-forms-submit-indicator__content b:nth-of-type(3){animation-delay:.4s}html[data-visual-test] .dnb-forms-submit-indicator__content b{animation:none}.dnb-forms-submit-indicator--state-pending .dnb-forms-submit-indicator__content{font-size:1em;font-weight:var(--font-weight-bold)}.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content{font-size:1em}.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content .dnb-icon{color:var(--color-success-green);padding-left:var(--padding-left)}.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content .dnb-icon--default{font-size:1em}.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content__label{font-size:var(--font-size-small);padding-left:calc(var(--padding-left)*2)}.dnb-forms-submit-indicator--inline-wrap .dnb-forms-submit-indicator__content{--padding-left:0.25em;display:flex}@keyframes submit-indicator-dot{0%{opacity:.2}15%{opacity:1}50%{opacity:1}60%{opacity:.3}to{opacity:.2}}@keyframes submit-indicator-success{0%{font-size:1em;opacity:.2}20%{font-size:1em;opacity:1}80%{opacity:1}85%{font-size:1em;opacity:.3}90%{opacity:0}to{font-size:0;opacity:0}}.dnb-forms-iterate-block{--block-outline-color:var(--outline-color,var(--color-lavender))}.dnb-forms-iterate-block--error:has(.dnb-form-status--error){--block-outline-color:var(--color-fire-red)}.dnb-forms-iterate-block:not(.dnb-height-animation--hidden){display:flex;flex-direction:column}.dnb-forms-iterate-block__inner{flex:1;margin-bottom:var(--space);padding:var(--padding,1rem);transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms,box-shadow .8s var(--easing-default)}.dnb-forms-iterate-block--variant-basic .dnb-forms-iterate-block__inner,.dnb-forms-iterate-block__inner:not([class*=dnb-flex-container--spacing]){--padding:0}.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing]{border-radius:.375rem}.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small{--space:var(--spacing-small)}.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium{--space:var(--spacing-medium)}.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large{--space:var(--spacing-large)}.dnb-forms-iterate-block--variant-outline .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing]{box-shadow:inset 0 0 0 2px var(--block-outline-color)}.dnb-forms-iterate-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-forms-iterate-block.dnb-height-animation--is-visible .dnb-forms-iterate-block__inner{transform:translateY(-.5rem)}.dnb-forms-iterate-block.dnb-height-animation--parallax .dnb-forms-iterate-block__inner{transform:translateY(0)}.dnb-forms-iterate__element{outline:none}.dnb-forms-iterate>.dnb-forms-iterate__element:has(.dnb-forms-iterate-block){margin-top:0}.dnb-forms-summary-list.dnb-dl .dnb-dt,.dnb-forms-summary-list.dnb-dl:not([class*=dnb-space])>.dnb-dd>.dnb-dl,.dnb-forms-summary-list.dnb-dl>.dnb-dd>.dnb-dl{margin:0}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid)>.dnb-dd{margin-bottom:var(--spacing-medium)}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid)>.dnb-dd:last-of-type{margin-bottom:0}.dnb-forms-summary-list.dnb-dl.dnb-dl__layout--grid{row-gap:var(--spacing-medium)}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline:not([class*=__composition]){display:inline-block;font-size:inherit}.dnb-forms-value-block--inline:not([class*=__composition]):after,.dnb-forms-value-block--inline:not([class*=__composition]):before{content:" "}.dnb-forms-value-block+.dnb-forms-value-block--inline:not([class*=__composition]):before{content:none}.dnb-forms-value-block__label,.dnb-forms-value-block__label strong{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:var(--color-black-80)}.dnb-forms-value-block--max-width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-value-block--max-width-small{max-width:var(--forms-field-width--small)}.dnb-forms-value-block--max-width-medium{max-width:var(--forms-field-width--medium)}.dnb-forms-value-block--max-width-large{max-width:var(--forms-field-width--large)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{-moz-column-gap:var(--column-gap,0);column-gap:var(--column-gap,0);display:flex;flex-flow:row;row-gap:var(--row-gap,var(--spacing-medium))}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-xx-small{--column-gap:var(--spacing-xx-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-x-small{--column-gap:var(--spacing-x-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-small{--column-gap:var(--spacing-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-medium{--column-gap:var(--spacing-medium)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-large{--column-gap:var(--spacing-large)}@media screen and (min-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{align-items:flex-start}}@media screen and (max-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{flex-flow:column}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not(:has(.dnb-forms-value-block__label)){--row-gap:var(--spacing-x-small)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space])>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dd,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dt{margin:0}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl>.dnb-dd{margin-bottom:0}.dnb-forms-wizard-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-wizard-layout--drawer{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__indicator{flex:0;margin-bottom:2rem}.dnb-forms-wizard-layout__contents{flex:1}.dnb-forms-wizard-layout__contents .dnb-forms-step{outline:none}.dnb-forms-wizard-layout__contents .dnb-card{max-width:var(--forms-card-max-width)}.dnb-forms-wizard-layout__contents .dnb-forms-button-row>.appear-fx,.dnb-forms-wizard-layout__contents .dnb-forms-step>.appear-fx{--appear-opacity:0;--appear-offset:-0.25rem;animation:appear .6s var(--easing-default) forwards;animation-delay:calc(var(--element-index, 0)*30ms);opacity:var(--appear-opacity);transform:translate3d(var(--appear-offset),0,0)}@keyframes appear{0%{opacity:var(--appear-opacity);transform:translate3d(var(--appear-offset),0,0)}80%{opacity:1}to{opacity:1;transform:translateZ(0)}}@media screen and (min-width:40em){.dnb-forms-wizard-layout+.dnb-form-status+.dnb-form-status:not([class*=space__left]),.dnb-forms-wizard-layout+.dnb-form-status:not([class*=space__left]){margin-left:var(--spacing-medium)}}@media screen and (max-width:60em){.dnb-forms-wizard-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__contents{flex-basis:auto}}.dnb-forms-wizard-layout .dnb-step-indicator__sidebar{margin-right:0}@media screen and (min-width:60em){.dnb-forms-form:has(.dnb-forms-wizard-layout--sidebar) .dnb-forms-status{margin-left:23rem}}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}
+@charset "UTF-8";.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{row-gap:0}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--spacing-x-small)}@media screen and (min-width:40em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}.dnb-forms-field-expiry .dnb-multi-input-mask{width:var(--forms-field-width--small)}.dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell{justify-content:center}.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{display:flex}.dnb-forms-field-number__contents--has-controls .dnb-input__input{align-items:center}.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border{border-radius:0}.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border,.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within,.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:hover,html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within{box-shadow:none}.dnb-forms-field-number__contents--has-controls>.dnb-input__border--root{--input-border-inset: ;--input-border-inset--hover: ;--input-border-inset--active: ;--input-border-inset--focus: ;--input-border-inset--disabled: }html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button-background-color--hover);color:var(--number-control-button-color--hover)}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button-background-color--active);color:var(--number-control-button-color--active)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button--error-contrast);color:var(--number-control-button--error)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button--error);color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-before[disabled]{background-color:var(--color-black-3);color:var(--color-black-20)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small{width:calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before{width:var(--number-control-button-width--small)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium{width:calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before{width:var(--number-control-button-width--medium)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large{width:calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before{width:var(--number-control-button-width--large)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-button--control-before{width:var(--number-control-button-width--large)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-input__border{flex-grow:1}.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button{color:var(--color-fire-red)}.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button:hover{color:var(--color-white)}.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:calc(var(--forms-field-width--medium) - 2rem)}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-phone-number .dnb-form-label{max-width:14ch}.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__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}@media screen and (max-width:15em){.dnb-forms-field-number .dnb-input__shell,.dnb-forms-field-string .dnb-input__shell{width:90%}}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:25em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.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__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__contents__composition--vertical{display:flex;flex-flow:column;row-gap:var(--spacing-small)}.dnb-forms-field-block__contents__composition--horizontal{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:25em){.dnb-forms-field-block__contents__composition--horizontal{align-items:flex-end}.dnb-forms-field-block__contents__composition--horizontal[class*=align-center]{align-items:center}}@media screen and (max-width:25em){.dnb-forms-field-block__contents__composition--horizontal{flex-flow:column;row-gap:var(--spacing-x-small)}}.dnb-forms-button-row{display:flex;flex-flow:row;flex-wrap:wrap;gap:var(--spacing-small)}.dnb-card+.dnb-button--primary:not([class*=space__top]),.dnb-card+.dnb-forms-button-row:not([class*=space__top]){margin-top:var(--spacing-small)}.dnb-card+.dnb-button--primary:not([class*=space__top]) .dnb-button[class*=space__top],.dnb-card+.dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top]{margin-top:0}@media screen and (min-width:40em){.dnb-card+.dnb-button--primary:not([class*=space__left]),.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}:root{--forms-card-max-width:36.5rem}.dnb-forms-form .dnb-card{max-width:var(--forms-card-max-width)}.dnb-spacing .dnb-forms-main-heading.dnb-h--large:not([class*=space__]){margin:0}@media screen and (min-width:40em){.dnb-forms-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-forms-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-section-block{--block-outline-color:var(--outline-color,var(--color-lavender))}.dnb-forms-section-block--error:has(.dnb-form-status--error){--block-outline-color:var(--color-fire-red)}.dnb-forms-section-block:not(.dnb-height-animation--hidden){display:flex;flex-direction:column}.dnb-forms-section-block__inner{flex:1;margin-bottom:var(--space);outline:none;padding:var(--padding,1rem);transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms,box-shadow .8s var(--easing-default)}.dnb-forms-section-block--variant-basic .dnb-forms-section-block__inner,.dnb-forms-section-block__inner:not([class*=dnb-flex-container--spacing]){--padding:0}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing]{border-radius:.375rem}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small{--space:var(--spacing-small)}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium{--space:var(--spacing-medium)}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large{--space:var(--spacing-large)}.dnb-forms-section-block--variant-outline .dnb-forms-section-block__inner[class*=dnb-flex-container--spacing]{box-shadow:inset 0 0 0 2px var(--block-outline-color)}.dnb-forms-section-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-forms-section-block.dnb-height-animation--is-visible .dnb-forms-section-block__inner{transform:translateY(-.5rem)}.dnb-forms-section-block.dnb-height-animation--parallax .dnb-forms-section-block__inner{transform:translateY(0)}.dnb-spacing .dnb-forms-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-forms-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-submit-indicator{--padding-left:0.5em;display:inline}.dnb-forms-submit-indicator__content{font-size:0;line-height:1em;transition:font-size .8s var(--easing-default);will-change:font-size}.dnb-forms-submit-indicator__content b{animation-delay:.2s;animation-duration:1.3s;animation-iteration-count:infinite;animation-name:submit-indicator-dot;color:var(--dots-color,currentColor);opacity:.2;padding-left:.125em}.dnb-forms-submit-indicator__content b:first-of-type{animation-delay:50ms;padding-left:var(--padding-left)}.dnb-forms-submit-indicator__content b:nth-of-type(2){animation-delay:.2s}.dnb-forms-submit-indicator__content b:nth-of-type(3){animation-delay:.4s}html[data-visual-test] .dnb-forms-submit-indicator__content b{animation:none}.dnb-forms-submit-indicator--state-pending .dnb-forms-submit-indicator__content{font-size:1em;font-weight:var(--font-weight-bold)}.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content{font-size:1em}.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content .dnb-icon{color:var(--color-success-green);padding-left:var(--padding-left)}.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content .dnb-icon--default{font-size:1em}.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content__label{font-size:var(--font-size-small);padding-left:calc(var(--padding-left)*2)}.dnb-forms-submit-indicator--inline-wrap .dnb-forms-submit-indicator__content{--padding-left:0.25em;display:flex}@keyframes submit-indicator-dot{0%{opacity:.2}15%{opacity:1}50%{opacity:1}60%{opacity:.3}to{opacity:.2}}@keyframes submit-indicator-success{0%{font-size:1em;opacity:.2}20%{font-size:1em;opacity:1}80%{opacity:1}85%{font-size:1em;opacity:.3}90%{opacity:0}to{font-size:0;opacity:0}}.dnb-forms-iterate__element{outline:none}.dnb-forms-iterate>.dnb-forms-iterate__element:has(.dnb-forms-iterate-block){margin-top:0}.dnb-forms-summary-list.dnb-dl .dnb-dt,.dnb-forms-summary-list.dnb-dl:not([class*=dnb-space])>.dnb-dd>.dnb-dl,.dnb-forms-summary-list.dnb-dl>.dnb-dd>.dnb-dl{margin:0}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid)>.dnb-dd{margin-bottom:var(--spacing-medium)}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid)>.dnb-dd:last-of-type{margin-bottom:0}.dnb-forms-summary-list.dnb-dl.dnb-dl__layout--grid{row-gap:var(--spacing-medium)}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline:not([class*=__composition]){display:inline-block;font-size:inherit}.dnb-forms-value-block--inline:not([class*=__composition]):after,.dnb-forms-value-block--inline:not([class*=__composition]):before{content:" "}.dnb-forms-value-block+.dnb-forms-value-block--inline:not([class*=__composition]):before{content:none}.dnb-forms-value-block__label,.dnb-forms-value-block__label strong{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:var(--color-black-80)}.dnb-forms-value-block--max-width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-value-block--max-width-small{max-width:var(--forms-field-width--small)}.dnb-forms-value-block--max-width-medium{max-width:var(--forms-field-width--medium)}.dnb-forms-value-block--max-width-large{max-width:var(--forms-field-width--large)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{-moz-column-gap:var(--column-gap,0);column-gap:var(--column-gap,0);display:flex;flex-flow:row;row-gap:var(--row-gap,var(--spacing-medium))}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-xx-small{--column-gap:var(--spacing-xx-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-x-small{--column-gap:var(--spacing-x-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-small{--column-gap:var(--spacing-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-medium{--column-gap:var(--spacing-medium)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-large{--column-gap:var(--spacing-large)}@media screen and (min-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{align-items:flex-start}}@media screen and (max-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{flex-flow:column}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not(:has(.dnb-forms-value-block__label)){--row-gap:var(--spacing-x-small)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space])>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dd,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dt{margin:0}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl>.dnb-dd{margin-bottom:0}.dnb-forms-wizard-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-wizard-layout--drawer{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__indicator{flex:0;margin-bottom:2rem}.dnb-forms-wizard-layout__contents{flex:1}.dnb-forms-wizard-layout__contents .dnb-forms-step{outline:none}.dnb-forms-wizard-layout__contents .dnb-card{max-width:var(--forms-card-max-width)}.dnb-forms-wizard-layout__contents .dnb-forms-button-row>.appear-fx,.dnb-forms-wizard-layout__contents .dnb-forms-step>.appear-fx{--appear-opacity:0;--appear-offset:-0.25rem;animation:appear .6s var(--easing-default) forwards;animation-delay:calc(var(--element-index, 0)*30ms);opacity:var(--appear-opacity);transform:translate3d(var(--appear-offset),0,0)}@keyframes appear{0%{opacity:var(--appear-opacity);transform:translate3d(var(--appear-offset),0,0)}80%{opacity:1}to{opacity:1;transform:translateZ(0)}}@media screen and (min-width:40em){.dnb-forms-wizard-layout+.dnb-form-status+.dnb-form-status:not([class*=space__left]),.dnb-forms-wizard-layout+.dnb-form-status:not([class*=space__left]){margin-left:var(--spacing-medium)}}@media screen and (max-width:60em){.dnb-forms-wizard-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__contents{flex-basis:auto}}.dnb-forms-wizard-layout .dnb-step-indicator__sidebar{margin-right:0}@media screen and (min-width:60em){.dnb-forms-form:has(.dnb-forms-wizard-layout--sidebar) .dnb-forms-status{margin-left:23rem}}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}

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

@@ -96,7 +96,6 @@ _defineProperty(PaymentCard, "defaultProps", _objectSpread({
   id: null,
   raw_data: null,
   skeleton: false,
-  class: null,
   className: null,
   children: null
 }, translationDefaultPropsProps));
@@ -111,7 +110,6 @@ process.env.NODE_ENV !== "production" ? PaymentCard.propTypes = _objectSpread(_o
   locale: PropTypes.string,
   skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 }, spacingPropTypes), {}, {
-  class: PropTypes.string,
   className: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func])
 }) : void 0;

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","text_not_active","text_order_in_process","text_renewed","text_replaced","text_unknown","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","length","slice","replace","trim","card","find","item","defaultCard","None","StatusOverlay","BlockingOverlay","text","status","top","cardStatusMap","not_active","order_in_process","renewed","replaced","blocked","expired","unknown","CardText","modifier","_data$cardDesign","_extends","cardStyle","backgroundImage","style","logoType","bankLogo"],"sources":["../../../../src/extensions/payment-card/PaymentCard.js"],"sourcesContent":["/**\n * Web PaymentCard Component\n *\n * This is a legacy component.\n * For refferencing while developing new features, please use a Functional component.\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  text_order_in_process: null,\n  text_renewed: null,\n  text_replaced: null,\n  text_unknown: 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      'order_in_process',\n      'renewed',\n      'replaced',\n      'unknown',\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 = 8) => {\n  if (!cardNumber) {\n    return cardNumber\n  }\n  if (digits && digits <= cardNumber.length) {\n    return cardNumber\n      .slice(cardNumber.length - digits, cardNumber.length)\n      .replace(formatCardNumberRegex, ' ')\n      .trim()\n  }\n  return cardNumber.replace(formatCardNumberRegex, ' ').trim()\n}\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\nconst BlockingOverlay = ({ cardStatus, text }, skeleton) => {\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\">{text}</P>\n      </div>\n    </div>\n  )\n}\n\nfunction StatusOverlay({ cardStatus, translations }) {\n  const cardStatusMap = {\n    not_active: translations.text_not_active,\n    order_in_process: translations.text_order_in_process,\n    renewed: translations.text_renewed,\n    replaced: translations.text_replaced,\n    blocked: translations.text_blocked,\n    expired: translations.text_expired,\n    unknown: translations.text_unknown,\n  }\n\n  return cardStatusMap[cardStatus] ? (\n    <BlockingOverlay\n      cardStatus={cardStatus}\n      text={cardStatusMap[cardStatus]}\n    />\n  ) : null\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","text_order_in_process","text_renewed","text_replaced","text_unknown","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","length","slice","replace","trim","card","find","item","defaultCard","None","StatusOverlay","BlockingOverlay","text","status","top","cardStatusMap","not_active","order_in_process","renewed","replaced","blocked","expired","unknown","CardText","modifier","_data$cardDesign","_extends","cardStyle","backgroundImage","style","logoType","bankLogo"],"sources":["../../../../src/extensions/payment-card/PaymentCard.js"],"sourcesContent":["/**\n * Web PaymentCard Component\n *\n * This is a legacy component.\n * For referencing while developing new features, please use a Functional component.\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  text_order_in_process: null,\n  text_renewed: null,\n  text_replaced: null,\n  text_unknown: 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      'order_in_process',\n      'renewed',\n      'replaced',\n      'unknown',\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    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    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 = 8) => {\n  if (!cardNumber) {\n    return cardNumber\n  }\n  if (digits && digits <= cardNumber.length) {\n    return cardNumber\n      .slice(cardNumber.length - digits, cardNumber.length)\n      .replace(formatCardNumberRegex, ' ')\n      .trim()\n  }\n  return cardNumber.replace(formatCardNumberRegex, ' ').trim()\n}\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\nconst BlockingOverlay = ({ cardStatus, text }, skeleton) => {\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\">{text}</P>\n      </div>\n    </div>\n  )\n}\n\nfunction StatusOverlay({ cardStatus, translations }) {\n  const cardStatusMap = {\n    not_active: translations.text_not_active,\n    order_in_process: translations.text_order_in_process,\n    renewed: translations.text_renewed,\n    replaced: translations.text_replaced,\n    blocked: translations.text_blocked,\n    expired: translations.text_expired,\n    unknown: translations.text_unknown,\n  }\n\n  return cardStatusMap[cardStatus] ? (\n    <BlockingOverlay\n      cardStatus={cardStatus}\n      text={cardStatusMap[cardStatus]}\n    />\n  ) : null\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/fragments/drawer-list/DrawerList.d.ts

@@ -145,7 +145,6 @@ export interface DrawerListProps {
    */
   skip_keysearch?: boolean;
   opened?: boolean;
-  class?: string;
   /**
    * The data we want to fill the list with. Provide the data as a JSON string, array, or object in the specified data structure. If you don't have to define a value, you can also send in a function which will be called once the user opens the DrawerList.
    */

package/es/fragments/drawer-list/DrawerList.js

@@ -1,9 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["role", "align_drawer", "fixed_position", "independent_width", "scrollable", "focusable", "size", "no_animation", "no_scroll_animation", "prevent_selection", "action_menu", "is_popup", "portal_class", "list_class", "ignore_events", "options_render", "className", "class", "cache_hash", "wrapper_element", "triangle_position", "direction", "max_height", "id", "data", "prepared_data", "raw_data", "opened", "value", "children"],
-  _excluded2 = ["children", "className", "class", "triangleRef", "cache_hash", "showFocusRing"],
-  _excluded3 = ["role", "hash", "children", "className", "class", "on_click", "selected", "active", "value"],
+const _excluded = ["role", "align_drawer", "fixed_position", "independent_width", "scrollable", "focusable", "size", "no_animation", "no_scroll_animation", "prevent_selection", "action_menu", "is_popup", "portal_class", "list_class", "ignore_events", "options_render", "className", "cache_hash", "wrapper_element", "triangle_position", "direction", "max_height", "id", "data", "prepared_data", "raw_data", "opened", "value", "children"],
+  _excluded2 = ["children", "className", "triangleRef", "cache_hash", "showFocusRing"],
+  _excluded3 = ["role", "hash", "children", "className", "on_click", "selected", "active", "value"],
   _excluded4 = ["className"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -114,7 +114,6 @@ class DrawerListInstance extends React.PureComponent {
         ignore_events,
         options_render,
         className,
-        class: _className,
         cache_hash: _cache_hash,
         wrapper_element: _wrapper_element,
         triangle_position: _triangle_position,
@@ -153,7 +152,7 @@ class DrawerListInstance extends React.PureComponent {
     } = this.context.drawerList;
     const mainParams = _objectSpread({
       id: `${id}-drawer-list`,
-      className: classnames(`dnb-drawer-list dnb-drawer-list--${direction}`, (isTrue(independent_width) || isTrue(action_menu)) && 'dnb-drawer-list--independent-width', createSpacingClasses(props), _className, className, opened && 'dnb-drawer-list--opened', hidden && 'dnb-drawer-list--hidden', triangle_position && `dnb-drawer-list--triangle-position-${triangle_position}`, align_drawer && `dnb-drawer-list--${align_drawer}`, size && `dnb-drawer-list--${size}`, isTrue(action_menu) && `dnb-drawer-list--action-menu`, isTrue(is_popup) && 'dnb-drawer-list--is-popup', isTrue(scrollable) && 'dnb-drawer-list--scroll', isTrue(no_scroll_animation) && 'dnb-drawer-list--no-scroll-animation')
+      className: classnames(`dnb-drawer-list dnb-drawer-list--${direction}`, (isTrue(independent_width) || isTrue(action_menu)) && 'dnb-drawer-list--independent-width', createSpacingClasses(props), className, opened && 'dnb-drawer-list--opened', hidden && 'dnb-drawer-list--hidden', triangle_position && `dnb-drawer-list--triangle-position-${triangle_position}`, align_drawer && `dnb-drawer-list--${align_drawer}`, size && `dnb-drawer-list--${size}`, isTrue(action_menu) && `dnb-drawer-list--action-menu`, isTrue(is_popup) && 'dnb-drawer-list--is-popup', isTrue(scrollable) && 'dnb-drawer-list--scroll', isTrue(no_scroll_animation) && 'dnb-drawer-list--no-scroll-animation')
     }, attributes);
     const listParams = {
       id: `${id}-listbox`,
@@ -249,14 +248,13 @@ DrawerList.Options = React.memo(React.forwardRef((props, ref) => {
   const {
       children,
       className,
-      class: _className,
       triangleRef = null,
       cache_hash,
       showFocusRing
     } = props,
     rest = _objectWithoutProperties(props, _excluded2);
   return React.createElement("ul", _extends({
-    className: classnames('dnb-drawer-list__options', className, _className, showFocusRing && 'dnb-drawer-list__options--focusring')
+    className: classnames('dnb-drawer-list__options', className, showFocusRing && 'dnb-drawer-list__options--focusring')
   }, rest, {
     ref: ref
   }), children, React.createElement("li", {
@@ -276,14 +274,12 @@ DrawerList.Options.propTypes = {
   cache_hash: PropTypes.string,
   showFocusRing: PropTypes.bool,
   className: PropTypes.string,
-  class: PropTypes.string,
   triangleRef: PropTypes.object
 };
 DrawerList.Options.defaultProps = {
   cache_hash: null,
   showFocusRing: false,
   className: null,
-  class: null,
   triangleRef: null
 };
 DrawerList.Item = React.forwardRef((props, ref) => {
@@ -292,7 +288,6 @@ DrawerList.Item = React.forwardRef((props, ref) => {
       hash,
       children,
       className,
-      class: _className,
       on_click,
       selected,
       active,
@@ -300,7 +295,7 @@ DrawerList.Item = React.forwardRef((props, ref) => {
     } = props,
     rest = _objectWithoutProperties(props, _excluded3);
   const params = {
-    className: classnames(className, _className, 'dnb-drawer-list__option', selected && 'dnb-drawer-list__option--selected', active && 'dnb-drawer-list__option--focus'),
+    className: classnames(className, 'dnb-drawer-list__option', selected && 'dnb-drawer-list__option--selected', active && 'dnb-drawer-list__option--focus'),
     role,
     tabIndex: selected ? '0' : '-1',
     'aria-selected': active
@@ -333,7 +328,6 @@ DrawerList.Item.propTypes = {
   hash: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.object]).isRequired,
   className: PropTypes.string,
-  class: PropTypes.string,
   on_click: PropTypes.func,
   selected: PropTypes.bool,
   active: PropTypes.bool,
@@ -343,7 +337,6 @@ DrawerList.Item.defaultProps = {
   role: 'option',
   hash: '',
   className: null,
-  class: null,
   on_click: null,
   selected: null,
   active: null,