@dnb/eufemia 10.56.0 → 10.57.1

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

@@ -413,31 +413,41 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
     width: var(--forms-field-width--large);
   }
 }
-.dnb-forms-field-block__contents__composition--vertical {
+.dnb-forms-field-block__composition--vertical .dnb-forms-field-block__contents {
   display: flex;
   flex-flow: column;
-  row-gap: var(--spacing-small);
+  row-gap: var(--spacing-x-small);
 }
-.dnb-forms-field-block__contents__composition--horizontal {
+.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
   display: flex;
   flex-flow: row;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
 @media screen and (min-width: 25.00625em) {
-  .dnb-forms-field-block__contents__composition--horizontal {
+  .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
     align-items: flex-end;
   }
-  .dnb-forms-field-block__contents__composition--horizontal[class*=align-center] {
+  .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents[class*=align-center] {
     align-items: center;
   }
 }
 @media screen and (max-width: 25em) {
-  .dnb-forms-field-block__contents__composition--horizontal {
+  .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
     row-gap: var(--spacing-x-small);
     flex-flow: column;
   }
 }
+@media screen and (max-width: 25em) {
+  .dnb-forms-field-block__composition > .dnb-forms-field-block__grid > .dnb-forms-submit-indicator {
+    display: none;
+  }
+}
+@media screen and (min-width: 25.00625em) {
+  .dnb-forms-field-block__composition > .dnb-forms-field-block__grid > .dnb-forms-field-block__contents .dnb-forms-submit-indicator {
+    display: none;
+  }
+}
 
 /*
  * Utilities
@@ -449,17 +459,15 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   gap: var(--spacing-small);
 }
 
-.dnb-card + .dnb-forms-button-row:not([class*=space__top]),
-.dnb-card + .dnb-button--primary:not([class*=space__top]) {
+.dnb-card + .dnb-forms-button-row:not([class*=space__top]), .dnb-card + .dnb-button--primary:not([class*=space__top]) {
   margin-top: var(--spacing-small);
 }
-.dnb-card + .dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top],
-.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], .dnb-card + .dnb-button--primary:not([class*=space__top]) .dnb-button[class*=space__top] {
   margin-top: 0;
 }
+
 @media screen and (min-width: 40.00625em) {
-  .dnb-card + .dnb-forms-button-row:not([class*=space__left]),
-  .dnb-card + .dnb-button--primary:not([class*=space__left]) {
+  .dnb-card:not([style*="--outset"]) + .dnb-forms-button-row:not([class*=space__left]), .dnb-card:not([style*="--outset"]) + .dnb-button--primary:not([class*=space__left]) {
     margin-left: var(--spacing-medium);
   }
 }
@@ -734,8 +742,8 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
 .dnb-forms-wizard-layout {
   display: flex;
   flex-flow: row wrap;
-  -moz-column-gap: var(--spacing-medium);
-       column-gap: var(--spacing-medium);
+  -moz-column-gap: var(--spacing-x-large);
+       column-gap: var(--spacing-x-large);
 }
 .dnb-forms-wizard-layout--drawer {
   flex-direction: column;

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

@@ -1 +1 @@
-.dnb-forms-field-array-selection{--row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--variant-button{--row-gap:var(--spacing-small)}.dnb-forms-field-array-selection--options-layout--vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--row-gap)}.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label{align-items:flex-start}.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label{line-height:2.5rem}.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(--row-gap)}@media screen and (min-width:40.00625em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{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--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}@media screen and (max-width:xx-small0){.dnb-forms-field-number .dnb-input__shell{width:90%}}.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--options-layout--vertical.dnb-forms-field-selection--layout-horizontal .dnb-forms-field-block__label{align-items:flex-start}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}.dnb-forms-field-selection .dnb-forms-field-block__contents{display:flex}.dnb-forms-field-selection .dnb-radio-group .dnb-height-animation,.dnb-forms-field-selection .dnb-radio-group>.dnb-flex-container,.dnb-forms-field-selection .dnb-toggle-button-group .dnb-height-animation,.dnb-forms-field-selection .dnb-toggle-button-group>.dnb-flex-container{flex-grow:1;width:100%}.dnb-forms-field-string .dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label.dnb-form-label{align-items:baseline}@media screen and (max-width:xx-small0){.dnb-forms-field-string .dnb-input__shell{width:90%}}.dnb-forms-field-upload .dnb-help-button__content .dnb-section{margin-left:var(--upload-border-width);margin-right:var(--upload-border-width)}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}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{--label-margin:0.25rem;--max-width:var(--forms-field-width--large)}.dnb-forms-field-block__grid{display:grid;grid-template-areas:"label" "help" "contents" "indicator" "status";grid-template-columns:minmax(min-content,var(--block-content-width,auto))}.dnb-forms-field-block--label-height-small{--label-margin:0}.dnb-forms-field-block--label-height-medium{--label-margin:0.5rem}.dnb-forms-field-block--label-height-large{--label-margin:0.7rem}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:25.00625em){.dnb-forms-field-block--width-custom{width:calc(var(--dnb-forms-field-block-width))}.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:not([class*="--content-width"]){--max-width:60ch}.dnb-forms-field-block__label,.dnb-forms-field-block__label.dnb-form-label{align-items:center;display:flex;grid-area:label;margin-right:0;max-width:var(--max-width)}.dnb-forms-field-block__label.dnb-form-label__description,.dnb-forms-field-block__label__description{margin-left:.3em}.dnb-forms-field-block__label.dnb-form-label__content:has(+.dnb-help-button),.dnb-forms-field-block__label.dnb-form-label__description:has(+.dnb-help-button),.dnb-forms-field-block__label__content:has(+.dnb-help-button),.dnb-forms-field-block__label__description:has(+.dnb-help-button){margin-right:.5rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical{flex-wrap:wrap}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical>.dnb-form-label{margin-bottom:.5rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label{margin-right:1rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-form-label{margin-bottom:var(--label-margin);margin-top:var(--label-margin)}@media screen and (max-width:40em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-form-label{margin-bottom:calc(var(--label-margin) + .5rem)}}@media screen and (min-width:40.00625em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" ". help" ". indicator" ". status";grid-template-columns:minmax(var(--dnb-forms-field-block-layout-width-min,min-content),var(--dnb-forms-field-block-layout-width-max,max-content)) auto}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content{--help-button-indent-width:0}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content .dnb-section{--rounded-corner:0.25rem;align-self:flex-start}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents{align-self:end}}.dnb-forms-field-block__indicator{grid-area:indicator}.dnb-forms-field-block__help{display:flex;flex-flow:column;grid-area:help}.dnb-forms-field-block__help .dnb-section{margin-bottom:1rem}.dnb-forms-field-block__help .dnb-section>.dnb-p--lead{margin-bottom:.5rem}@media screen and (min-width:40.00625em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__help .dnb-section{margin-bottom:0;margin-top:.5rem}}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem;max-width:60ch}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{display:flex;grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25.00625em){.dnb-forms-field-block__contents--width-custom{width:calc(var(--dnb-forms-field-block-content-width))}.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:25.00625em){.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:40.00625em){.dnb-card+.dnb-button--primary:not([class*=space__left]),.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-spacing .dnb-forms-main-heading.dnb-h--large:not([class*=space__]){margin:0}.dnb-forms-main-heading+.dnb-help-button__content .dnb-section{margin-top:1rem}.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--variant-basic{--border-color:transparent}.dnb-forms-section-block--variant-basic .dnb-card{--card-outline-color:transparent}.dnb-forms-section-block__inner{flex:1;margin-bottom:var(--space);outline:none;transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms,box-shadow .8s var(--easing-default)}.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-small){--space:var(--spacing-small)}.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-medium){--space:var(--spacing-medium)}.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-large){--space:var(--spacing-large)}.dnb-forms-section-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-forms-section-block--no-animation .dnb-forms-section-block__inner{transform:translateY(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-sub-heading+.dnb-help-button__content .dnb-section{margin-top:1rem}.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-section-block){margin-top:0}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt,.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not([class*=dnb-space])>.dnb-dd>.dnb-dl,.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal)>.dnb-dd>.dnb-dl{margin:0}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid)>.dnb-dd{margin-bottom:var(--spacing-medium)}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid)>.dnb-dd:last-of-type{margin-bottom:0}.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__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:25.00625em){.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-none{--column-gap:0}.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:25.00625em){.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-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 (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:60.00625em){.dnb-forms-form:has(.dnb-forms-wizard-layout--sidebar) .dnb-forms-status{margin-left:21.5rem}}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;display:flex;padding:.5rem 1rem;width:100%}
+.dnb-forms-field-array-selection{--row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--variant-button{--row-gap:var(--spacing-small)}.dnb-forms-field-array-selection--options-layout--vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--row-gap)}.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label{align-items:flex-start}.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label{line-height:2.5rem}.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(--row-gap)}@media screen and (min-width:40.00625em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{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--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}@media screen and (max-width:xx-small0){.dnb-forms-field-number .dnb-input__shell{width:90%}}.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--options-layout--vertical.dnb-forms-field-selection--layout-horizontal .dnb-forms-field-block__label{align-items:flex-start}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}.dnb-forms-field-selection .dnb-forms-field-block__contents{display:flex}.dnb-forms-field-selection .dnb-radio-group .dnb-height-animation,.dnb-forms-field-selection .dnb-radio-group>.dnb-flex-container,.dnb-forms-field-selection .dnb-toggle-button-group .dnb-height-animation,.dnb-forms-field-selection .dnb-toggle-button-group>.dnb-flex-container{flex-grow:1;width:100%}.dnb-forms-field-string .dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label.dnb-form-label{align-items:baseline}@media screen and (max-width:xx-small0){.dnb-forms-field-string .dnb-input__shell{width:90%}}.dnb-forms-field-upload .dnb-help-button__content .dnb-section{margin-left:var(--upload-border-width);margin-right:var(--upload-border-width)}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}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{--label-margin:0.25rem;--max-width:var(--forms-field-width--large)}.dnb-forms-field-block__grid{display:grid;grid-template-areas:"label" "help" "contents" "indicator" "status";grid-template-columns:minmax(min-content,var(--block-content-width,auto))}.dnb-forms-field-block--label-height-small{--label-margin:0}.dnb-forms-field-block--label-height-medium{--label-margin:0.5rem}.dnb-forms-field-block--label-height-large{--label-margin:0.7rem}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:25.00625em){.dnb-forms-field-block--width-custom{width:calc(var(--dnb-forms-field-block-width))}.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:not([class*="--content-width"]){--max-width:60ch}.dnb-forms-field-block__label,.dnb-forms-field-block__label.dnb-form-label{align-items:center;display:flex;grid-area:label;margin-right:0;max-width:var(--max-width)}.dnb-forms-field-block__label.dnb-form-label__description,.dnb-forms-field-block__label__description{margin-left:.3em}.dnb-forms-field-block__label.dnb-form-label__content:has(+.dnb-help-button),.dnb-forms-field-block__label.dnb-form-label__description:has(+.dnb-help-button),.dnb-forms-field-block__label__content:has(+.dnb-help-button),.dnb-forms-field-block__label__description:has(+.dnb-help-button){margin-right:.5rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical{flex-wrap:wrap}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical>.dnb-form-label{margin-bottom:.5rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label{margin-right:1rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-form-label{margin-bottom:var(--label-margin);margin-top:var(--label-margin)}@media screen and (max-width:40em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-form-label{margin-bottom:calc(var(--label-margin) + .5rem)}}@media screen and (min-width:40.00625em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" ". help" ". indicator" ". status";grid-template-columns:minmax(var(--dnb-forms-field-block-layout-width-min,min-content),var(--dnb-forms-field-block-layout-width-max,max-content)) auto}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content{--help-button-indent-width:0}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content .dnb-section{--rounded-corner:0.25rem;align-self:flex-start}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents{align-self:end}}.dnb-forms-field-block__indicator{grid-area:indicator}.dnb-forms-field-block__help{display:flex;flex-flow:column;grid-area:help}.dnb-forms-field-block__help .dnb-section{margin-bottom:1rem}.dnb-forms-field-block__help .dnb-section>.dnb-p--lead{margin-bottom:.5rem}@media screen and (min-width:40.00625em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__help .dnb-section{margin-bottom:0;margin-top:.5rem}}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem;max-width:60ch}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{display:flex;grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25.00625em){.dnb-forms-field-block__contents--width-custom{width:calc(var(--dnb-forms-field-block-content-width))}.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__composition--vertical .dnb-forms-field-block__contents{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:25.00625em){.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents{align-items:flex-end}.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents[class*=align-center]{align-items:center}}@media screen and (max-width:25em){.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents{flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-block__composition>.dnb-forms-field-block__grid>.dnb-forms-submit-indicator{display:none}}@media screen and (min-width:25.00625em){.dnb-forms-field-block__composition>.dnb-forms-field-block__grid>.dnb-forms-field-block__contents .dnb-forms-submit-indicator{display:none}}.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:40.00625em){.dnb-card:not([style*="--outset"])+.dnb-button--primary:not([class*=space__left]),.dnb-card:not([style*="--outset"])+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-spacing .dnb-forms-main-heading.dnb-h--large:not([class*=space__]){margin:0}.dnb-forms-main-heading+.dnb-help-button__content .dnb-section{margin-top:1rem}.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--variant-basic{--border-color:transparent}.dnb-forms-section-block--variant-basic .dnb-card{--card-outline-color:transparent}.dnb-forms-section-block__inner{flex:1;margin-bottom:var(--space);outline:none;transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms,box-shadow .8s var(--easing-default)}.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-small){--space:var(--spacing-small)}.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-medium){--space:var(--spacing-medium)}.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-large){--space:var(--spacing-large)}.dnb-forms-section-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-forms-section-block--no-animation .dnb-forms-section-block__inner{transform:translateY(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-sub-heading+.dnb-help-button__content .dnb-section{margin-top:1rem}.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-section-block){margin-top:0}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt,.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not([class*=dnb-space])>.dnb-dd>.dnb-dl,.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal)>.dnb-dd>.dnb-dl{margin:0}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid)>.dnb-dd{margin-bottom:var(--spacing-medium)}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid)>.dnb-dd:last-of-type{margin-bottom:0}.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__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:25.00625em){.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-none{--column-gap:0}.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:25.00625em){.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-x-large);column-gap:var(--spacing-x-large);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-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 (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:60.00625em){.dnb-forms-form:has(.dnb-forms-wizard-layout--sidebar) .dnb-forms-status{margin-left:21.5rem}}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;display:flex;padding:.5rem 1rem;width:100%}

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

@@ -152,7 +152,9 @@ export interface UseFieldProps<Value = unknown, EmptyValue = undefined | unknown
     error?: Error | FormError | Array<Error | FormError>;
     required?: boolean;
     schema?: AllJSONSchemaVersions<Value>;
+    /** @deprecated Use `onChangeValidator` instead */
     validator?: Validator<Value>;
+    onChangeValidator?: Validator<Value>;
     onBlurValidator?: Validator<Value>;
     exportValidators?: Record<string, Validator<Value>>;
     validateRequired?: (internal: Value, { emptyValue, required, isChanged, error, }: {
@@ -227,6 +229,8 @@ export interface ValueProps<Value = unknown> extends DataValueReadComponentProps
      * Field label to show above the data value.
      */
     label?: React.ReactNode;
+    /** Use `true` to make the label only readable by screen readers. */
+    labelSrOnly?: boolean;
     /**
      * Use `true` to inherit the label from a visible (rendered) field with the same path.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["dataValueReadProps","pickDataValueReadProps","props","Object","fromEntries","entries","filter","key","includes","omitDataValueReadProps","dataValueWriteProps","pickDataValueWriteProps","omitDataValueWriteProps","pickDataValueReadWriteProps","omitDataValueReadWriteProps"],"sources":["../../../../src/extensions/forms/types.ts"],"sourcesContent":["import type { AriaAttributes } from 'react'\nimport type { SpacingProps } from '../../components/space/types'\nimport type {\n  FilterData,\n  TransformData,\n  VisibleDataOptions,\n} from './DataContext'\nimport type { SharedFieldBlockProps } from './FieldBlock'\nimport type { JSONSchema4, JSONSchema6, JSONSchema7 } from 'json-schema'\nimport type { JSONSchemaType } from 'ajv/dist/2020'\nimport { JsonObject, FormError } from './utils'\nimport {\n  FormsTranslationFlat,\n  FormsTranslationLocale,\n} from './hooks/useTranslation'\n\nexport type * from 'json-schema'\nexport type JSONSchema = JSONSchema7\nexport type AllJSONSchemaVersionsBasis<DataType> =\n  | JSONSchema4\n  | JSONSchema6\n  | JSONSchema7\n  | JSONSchemaType<DataType>\nexport type AllJSONSchemaVersions<DataType = unknown> =\n  | AllJSONSchemaVersionsBasis<DataType>\n\n  // In order to support \"schema = { ... } as const\"\n  | (Omit<AllJSONSchemaVersionsBasis<DataType>, 'required'> & {\n      required?: readonly string[]\n    })\nexport { JSONSchemaType }\n\nexport type ValidatorReturnSync<Value> =\n  | Error\n  | undefined\n  | void\n  | Array<Validator<Value>>\n\nexport type ValidatorReturnAsync<Value> =\n  | ValidatorReturnSync<Value>\n  | Promise<ValidatorReturnSync<Value>>\nexport type Validator<Value, ErrorMessages = DefaultErrorMessages> = (\n  value: Value,\n  additionalArgs?: ValidatorAdditionalArgs<Value, ErrorMessages>\n) => ValidatorReturnAsync<Value>\nexport type ValidatorAdditionalArgs<\n  Value,\n  ErrorMessages = DefaultErrorMessages,\n> = {\n  /**\n   * Returns the error messages from the { errorMessages } object.\n   */\n  errorMessages: ErrorMessages\n\n  /**\n   * Connects the validator to another field.\n   * This allows you to rerun the validator function once the value of the connected field changes.\n   */\n  connectWithPath: (path: Path) => { getValue: () => Value }\n\n  /**\n   * Returns the validators from the { exportValidators } object.\n   */\n  validators: Record<string, Validator<Value>>\n} & {\n  /** @deprecated use the error messages from the { errorMessages } object instead. */\n  pattern?: string\n  /** @deprecated use the error messages from the { errorMessages } object instead. */\n  required?: string\n}\n\n/**\n * Accept any key, so custom message keys can be used\n * including the path to the field the message is for\n */\nexport type GlobalErrorMessagesWithPaths =\n  | VariousErrorMessages\n  | {\n      // eslint-disable-next-line no-unused-vars\n      [K in `/${string}`]?: VariousErrorMessages\n    }\n\n/**\n * 'MyCustom.message': 'Your custom message'\n */\nexport type DotNotationErrorMessages = Record<\n  `${string}` | `${string}.${string}`,\n  string\n>\n/**\n * { 'nb-NO': { 'Field.errorRequired': 'Dette feltet er påkrevd' } }\n */\nexport type ErrorMessagesWithLocaleSupport = Record<\n  FormsTranslationLocale,\n  DefaultErrorMessages\n>\n\nexport type InternalErrorMessages = Record<FormsTranslationFlat, string>\nexport type DefaultErrorMessages = Partial<InternalErrorMessages> &\n  Partial<DotNotationErrorMessages> &\n  Partial<DeprecatedErrorMessages>\n\nexport type VariousErrorMessages =\n  | DefaultErrorMessages\n  | ErrorMessagesWithLocaleSupport\n\nexport type DeprecatedErrorMessages = {\n  /**\n   * @deprecated Use translation keys as the message instead of this parameter (e.g. Field.errorRequired)\n   */\n  required?: string\n  /**\n   * @deprecated Use translation keys as the message instead of this parameter (e.g. Field.errorPattern)\n   */\n  pattern?: string\n  /**\n   * @deprecated use StringField.errorMinLength instead\n   */\n  minLength?: string\n  /**\n   * @deprecated use StringField.errorMaxLength instead\n   */\n  maxLength?: string\n  /**\n   * @deprecated use NumberField.errorMinimum instead\n   */\n  minimum?: string\n  /**\n   * @deprecated use NumberField.errorMaximum instead\n   */\n  maximum?: string\n  /**\n   * @deprecated use NumberField.errorExclusiveMinimum instead\n   */\n  exclusiveMinimum?: string\n  /**\n   * @deprecated use NumberField.errorExclusiveMaximum instead\n   */\n  exclusiveMaximum?: string\n  /**\n   * @deprecated use NumberField.errorMultipleOf instead\n   */\n  multipleOf?: string\n}\n\nexport interface DataValueReadProps<Value = unknown> {\n  /** JSON Pointer for where the data for this field is located in the source dataset */\n  path?: Path\n  /** JSON Pointer for where the data for this field is located in the source iterate loop element */\n  itemPath?: Path\n  /** Source data value for the field. Will take precedence over the path value given in the data context */\n  value?: Value\n  /** Default source data value for the field. Will not take precedence over the path value given in the data context */\n  defaultValue?: Value\n}\n\nconst dataValueReadProps = ['path', 'itemPath', 'value']\n\nexport function pickDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): DataValueReadProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueReadProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): Omit<DataValueReadProps, keyof DataValueReadProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueReadProps.includes(key)\n    )\n  )\n}\n\ntype EventArgs<\n  Value,\n  ExtraValue extends AdditionalEventArgs,\n> = ExtraValue extends undefined\n  ? [value: Value]\n  : [value: Value, additionalArgs?: ExtraValue]\n\nexport interface DataValueWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ExtraValue extends AdditionalEventArgs = undefined,\n> {\n  emptyValue?: EmptyValue\n  onFocus?: (...args: EventArgs<Value | EmptyValue, ExtraValue>) => void\n  onBlur?: (...args: EventArgs<Value | EmptyValue, ExtraValue>) => void\n  onChange?: (\n    ...args: EventArgs<Value | EmptyValue, ExtraValue>\n  ) => OnChangeReturnType\n}\n\nconst dataValueWriteProps = ['emptyValue', 'onFocus', 'onBlur', 'onChange']\n\nexport function pickDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): DataValueWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): Omit<DataValueWriteProps, keyof DataValueWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type DataValueReadWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = DataValueReadProps<Value> & DataValueWriteProps<Value, EmptyValue>\n\nexport function pickDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(props: Props): DataValueReadWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        dataValueReadProps.includes(key) ||\n        dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(\n  props: Props\n): Omit<DataValueReadWriteProps, keyof DataValueReadWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        !dataValueReadProps.includes(key) &&\n        !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type ComponentProps = SpacingProps & {\n  className?: string\n}\n\nexport type AdditionalEventArgs = Record<string, unknown>\n\nexport type DataValueReadComponentProps<Value = unknown> = ComponentProps &\n  DataValueReadProps<Value>\n\nexport type DataValueReadWriteComponentProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = ComponentProps &\n  DataValueReadProps<Value> &\n  DataValueWriteProps<Value, EmptyValue>\n\nexport interface UseFieldProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> extends DataValueReadWriteComponentProps<Value, EmptyValue>,\n    AriaAttributes {\n  // - HTML Element Attributes\n  /**\n   * ID added to the actual field component, and linked to the label via for-attribute\n   */\n  id?: Identifier\n  name?: string\n  disabled?: boolean\n  readOnly?: boolean\n  autoComplete?:\n    | HTMLInputElement['autocomplete']\n    | HTMLTextAreaElement['autocomplete']\n  /**\n   * Text showing in place of the value if no value is given\n   */\n  placeholder?: React.ReactNode\n\n  /**\n   * NB: Undocumented for now.\n   * Forwards all possible props to the underlying component.\n   */\n  htmlAttributes?: Record<string, unknown>\n\n  /**\n   * NB: Undocumented for now.\n   * Forwards all given props in a props object.\n   */\n  props?: Record<string, unknown>\n\n  // - Used by useFieldProps and FieldBlock\n  info?: React.ReactNode\n  warning?: React.ReactNode\n  error?: Error | FormError | Array<Error | FormError>\n\n  // - Validation\n  required?: boolean\n  schema?: AllJSONSchemaVersions<Value>\n  validator?: Validator<Value>\n  onBlurValidator?: Validator<Value>\n  exportValidators?: Record<string, Validator<Value>>\n  validateRequired?: (\n    internal: Value,\n    {\n      emptyValue,\n      required,\n      isChanged,\n      error,\n    }: {\n      emptyValue: EmptyValue\n      required: boolean\n      isChanged: boolean\n      error: FormError | undefined\n    }\n  ) => FormError | undefined\n  /**\n   * Should error messages based on validation be shown initially (from given value-prop or source data)\n   * before the user interacts with the field?\n   * @default false\n   */\n  validateInitially?: boolean\n  /**\n   * Should error messages be shown when touching (like focusing a field and blurring) without having changed\n   * the value? So the user did not introduce a new error, but it was invalid based on validation initially.\n   */\n  validateUnchanged?: boolean\n  /**\n   * Should validation be done while writing, not just when blurring the field?\n   */\n  continuousValidation?: boolean\n  /**\n   * Provide custom error messages for the field\n   */\n  errorMessages?: ErrorMessages\n\n  // - Derivatives\n\n  /**\n   * Transforms the `value` before it's displayed in the field (e.g. input).\n   * Public API. Should not be used internally.\n   */\n  transformIn?: (external: unknown) => Value\n\n  /**\n   * Transforms the value before it gets forwarded to the form data object or returned as the onChange value parameter.\n   * Public API. Should not be used internally.\n   */\n  transformOut?: (internal: Value, additionalArgs?: unknown) => unknown\n\n  /**\n   * Transforms the value given by `handleChange` after `fromInput` and before `updateValue` and `toEvent`. The second parameter returns the current value.\n   */\n  transformValue?: (value: Value, currentValue?: Value) => Value\n\n  /**\n   * Transform additionalArgs or generate it based on `value`.\n   */\n  provideAdditionalArgs?: (\n    value: Value,\n    additionalArgs?: AdditionalEventArgs\n  ) => AdditionalEventArgs\n\n  /**\n   * Transforms the value before it gets returned as the `value`.\n   */\n  toInput?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the internal value before it gets returned by even callbacks such as `onChange`, `onFocus` and `onBlur`. The second parameter returns the event type: `onChange`, `onFocus`, `onBlur` or `onBlurValidator`.\n   */\n  toEvent?: (\n    internal: Value,\n    type: 'onChange' | 'onFocus' | 'onBlur' | 'onBlurValidator'\n  ) => Value\n\n  /**\n   * Transforms the value given by `handleChange` before it is used in the further process flow. Use it to destruct the value from the original event object.\n   */\n  fromInput?: (external: Value | unknown) => Value\n\n  /**\n   * Transforms the given props `value` before any other step gets entered.\n   */\n  fromExternal?: (external: Value) => Value\n\n  /**\n   * For internal use only.\n   */\n  valueType?: string | number | boolean | Array<string | number | boolean>\n}\n\nexport type FieldProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> = UseFieldProps<Value, EmptyValue, ErrorMessages> & SharedFieldBlockProps\n\nexport type FieldPropsGeneric<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> = Omit<\n  FieldProps<Value, EmptyValue, ErrorMessages>,\n  keyof DataValueWriteProps\n> &\n  DataValueWriteProps<Value, EmptyValue, AdditionalEventArgs>\n\nexport type FieldPropsWithExtraValue<\n  Value = unknown,\n  ExtraValue extends AdditionalEventArgs = AdditionalEventArgs,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> = Omit<\n  FieldProps<Value, EmptyValue, ErrorMessages>,\n  keyof DataValueWriteProps\n> &\n  DataValueWriteProps<Value, EmptyValue, ExtraValue>\n\nexport interface ValueProps<Value = unknown>\n  extends DataValueReadComponentProps<Value> {\n  /**\n   * Field label to show above the data value.\n   */\n  label?: React.ReactNode\n\n  /**\n   * Use `true` to inherit the label from a visible (rendered) field with the same path.\n   */\n  inheritLabel?: boolean\n\n  /**\n   * Use `true` to inherit the visibility from a field with the same path.\n   */\n  inheritVisibility?: boolean\n\n  /**\n   * Shows the value even if it is empty.\n   */\n  showEmpty?: boolean\n\n  /**\n   * Text showing in place of the value if no value is given.\n   */\n  placeholder?: React.ReactNode\n\n  /**\n   * For showing the value inline (not as a block element)\n   */\n  inline?: boolean\n\n  /** The max-width of a value block. Defaults to large */\n  maxWidth?: 'small' | 'medium' | 'large' | 'auto'\n\n  /**\n   * Transforms the label before it gets displayed. Receives the label as the first parameter. The second parameter is a object containing the `convertJsxToString` function.\n   */\n  transformLabel?: (\n    label: React.ReactNode,\n    convertJsxToString: (label: React.ReactNode) => string\n  ) => React.ReactNode\n\n  /**\n   * Transforms the `value` before it's displayed in the field (e.g. input).\n   * Public API. Should not be used internally.\n   */\n  transformIn?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the value before it gets returned as the `value`.\n   */\n  toInput?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the given props `value` before any other step gets entered.\n   */\n  fromExternal?: (external: Value) => Value\n}\n\nexport type Path = string\nexport type Identifier = string\n\nexport type SubmitState =\n  | 'pending' // Used for async operations\n  | 'complete' // Used to hide the submit indicator\n  | 'success' // Used for fields\n  | 'error' // Used when error is shown\n  | 'abort' // Used to abort the state regardless (step change)\n\n/**\n * Provide a error that shows in the FormStatus of a field.\n */\ntype EventStateObjectError = Error\n/**\n * Provide a warning that shows in the FormStatus of a field.\n */\ntype EventStateObjectWarning = React.ReactNode\n/**\n * Provide an info that shows in the FormStatus of a field.\n */\ntype EventStateObjectInfo = React.ReactNode\n\n/**\n * Provide a status that will enforce the form to stay in pending state\n */\ntype EventStateObjectStatus = 'pending'\n\n/**\n * Provide a success state that will show an indicator on the related field label\n */\ntype EventStateObjectSuccess = 'saved'\n\n/**\n * Provide an error or status messages that shows in the FormStatus of a field\n */\nexport type EventStateObjectOr = {\n  error?: EventStateObjectError\n  warning?: EventStateObjectWarning\n  info?: EventStateObjectInfo\n  pending?: EventStateObjectStatus\n  customStatus?: unknown\n}\n\nexport type EventStateObjectEitherOr =\n  | { error: EventStateObjectError }\n  | { warning: EventStateObjectWarning }\n  | { info: EventStateObjectInfo }\n  | { status: EventStateObjectStatus }\n  | { customStatus: unknown }\n\nexport type EventStateObject = EventStateObjectOr &\n  EventStateObjectEitherOr\n\n/**\n * Provide 'saved' to indicate the data has been saved successfully. Can not be combined with `error`.\n */\nexport type EventStateObjectWithSuccess = EventStateObjectOr & {\n  success?: EventStateObjectSuccess\n} & (EventStateObjectEitherOr | { success: EventStateObjectSuccess })\n\n/**\n * Provide an error or status messages that shows in the FormStatus of a field\n */\nexport type EventReturnWithStateObject = Error | EventStateObject\n\nexport type EventReturnWithStateObjectAndSuccess =\n  | Error\n  | EventStateObjectWithSuccess\n\nexport type OnSubmitParams = {\n  /** Will remove data entries of fields that are not visible */\n  reduceToVisibleFields: (\n    data: JsonObject,\n    options?: VisibleDataOptions\n  ) => Partial<JsonObject>\n\n  /** Will call the given function for each data path. The returned `value` will replace each data entry. It's up to you to define the shape of the value. */\n  transformData: (\n    data: JsonObject,\n    handler: TransformData\n  ) => TransformData\n\n  /** Will filter data based on the given \"filterDataHandler\" method */\n  filterData: (filterDataHandler: FilterData) => Partial<JsonObject>\n\n  /** Will remove browser-side stored autocomplete data  */\n  resetForm: () => void\n\n  /** Will empty the whole internal data set of the form  */\n  clearData: () => void\n}\n\nexport type OnSubmitReturn =\n  | EventReturnWithStateObject\n  | void\n  | Promise<EventReturnWithStateObject | void>\nexport type OnSubmit<Data = JsonObject> = (\n  data: Data,\n  {\n    reduceToVisibleFields,\n    transformData,\n    filterData,\n    resetForm,\n    clearData,\n  }: OnSubmitParams\n) => OnSubmitReturn\n\nexport type OnCommit<Data = JsonObject> = (\n  data: Data,\n  {\n    clearData,\n    preventCommit,\n  }: {\n    clearData: () => void\n    preventCommit?: () => void\n  }\n) =>\n  | EventReturnWithStateObject\n  | void\n  | Promise<EventReturnWithStateObject | void>\n\nexport type OnChange<Data = JsonObject> = (\n  data: Data,\n  additionalArgs: Pick<OnSubmitParams, 'filterData'>\n) => OnChangeReturnType\n\ntype OnChangeReturnType =\n  | EventReturnWithStateObjectAndSuccess\n  | void\n  | Promise<EventReturnWithStateObjectAndSuccess | void>\n"],"mappings":"AA4JA,MAAMA,kBAAkB,GAAG,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,CAAC;AAExD,OAAO,SAASC,sBAAsBA,CACpCC,KAAY,EACQ;EACpB,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAAC,CAAC,CAACC,GAAG,CAAC,KACvCP,kBAAkB,CAACQ,QAAQ,CAACD,GAAG,CACjC,CACF,CAAC;AACH;AAEA,OAAO,SAASE,sBAAsBA,CACpCP,KAAY,EACwC;EACpD,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAChC,CAAC,CAACC,GAAG,CAAC,KAAK,CAACP,kBAAkB,CAACQ,QAAQ,CAACD,GAAG,CAC7C,CACF,CAAC;AACH;AAsBA,MAAMG,mBAAmB,GAAG,CAAC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,CAAC;AAE3E,OAAO,SAASC,uBAAuBA,CACrCT,KAAY,EACS;EACrB,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAAC,CAAC,CAACC,GAAG,CAAC,KACvCG,mBAAmB,CAACF,QAAQ,CAACD,GAAG,CAClC,CACF,CAAC;AACH;AAEA,OAAO,SAASK,uBAAuBA,CACrCV,KAAY,EAC0C;EACtD,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAChC,CAAC,CAACC,GAAG,CAAC,KAAK,CAACG,mBAAmB,CAACF,QAAQ,CAACD,GAAG,CAC9C,CACF,CAAC;AACH;AAOA,OAAO,SAASM,2BAA2BA,CAEzCX,KAAY,EAA2B;EACvC,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAChC,CAAC,CAACC,GAAG,CAAC,KACJP,kBAAkB,CAACQ,QAAQ,CAACD,GAAG,CAAC,IAChCG,mBAAmB,CAACF,QAAQ,CAACD,GAAG,CACpC,CACF,CAAC;AACH;AAEA,OAAO,SAASO,2BAA2BA,CAGzCZ,KAAY,EACkD;EAC9D,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAChC,CAAC,CAACC,GAAG,CAAC,KACJ,CAACP,kBAAkB,CAACQ,QAAQ,CAACD,GAAG,CAAC,IACjC,CAACG,mBAAmB,CAACF,QAAQ,CAACD,GAAG,CACrC,CACF,CAAC;AACH"}
+{"version":3,"file":"types.js","names":["dataValueReadProps","pickDataValueReadProps","props","Object","fromEntries","entries","filter","key","includes","omitDataValueReadProps","dataValueWriteProps","pickDataValueWriteProps","omitDataValueWriteProps","pickDataValueReadWriteProps","omitDataValueReadWriteProps"],"sources":["../../../../src/extensions/forms/types.ts"],"sourcesContent":["import type { AriaAttributes } from 'react'\nimport type { SpacingProps } from '../../components/space/types'\nimport type {\n  FilterData,\n  TransformData,\n  VisibleDataOptions,\n} from './DataContext'\nimport type { SharedFieldBlockProps } from './FieldBlock'\nimport type { JSONSchema4, JSONSchema6, JSONSchema7 } from 'json-schema'\nimport type { JSONSchemaType } from 'ajv/dist/2020'\nimport { JsonObject, FormError } from './utils'\nimport {\n  FormsTranslationFlat,\n  FormsTranslationLocale,\n} from './hooks/useTranslation'\n\nexport type * from 'json-schema'\nexport type JSONSchema = JSONSchema7\nexport type AllJSONSchemaVersionsBasis<DataType> =\n  | JSONSchema4\n  | JSONSchema6\n  | JSONSchema7\n  | JSONSchemaType<DataType>\nexport type AllJSONSchemaVersions<DataType = unknown> =\n  | AllJSONSchemaVersionsBasis<DataType>\n\n  // In order to support \"schema = { ... } as const\"\n  | (Omit<AllJSONSchemaVersionsBasis<DataType>, 'required'> & {\n      required?: readonly string[]\n    })\nexport { JSONSchemaType }\n\nexport type ValidatorReturnSync<Value> =\n  | Error\n  | undefined\n  | void\n  | Array<Validator<Value>>\n\nexport type ValidatorReturnAsync<Value> =\n  | ValidatorReturnSync<Value>\n  | Promise<ValidatorReturnSync<Value>>\nexport type Validator<Value, ErrorMessages = DefaultErrorMessages> = (\n  value: Value,\n  additionalArgs?: ValidatorAdditionalArgs<Value, ErrorMessages>\n) => ValidatorReturnAsync<Value>\nexport type ValidatorAdditionalArgs<\n  Value,\n  ErrorMessages = DefaultErrorMessages,\n> = {\n  /**\n   * Returns the error messages from the { errorMessages } object.\n   */\n  errorMessages: ErrorMessages\n\n  /**\n   * Connects the validator to another field.\n   * This allows you to rerun the validator function once the value of the connected field changes.\n   */\n  connectWithPath: (path: Path) => { getValue: () => Value }\n\n  /**\n   * Returns the validators from the { exportValidators } object.\n   */\n  validators: Record<string, Validator<Value>>\n} & {\n  /** @deprecated use the error messages from the { errorMessages } object instead. */\n  pattern?: string\n  /** @deprecated use the error messages from the { errorMessages } object instead. */\n  required?: string\n}\n\n/**\n * Accept any key, so custom message keys can be used\n * including the path to the field the message is for\n */\nexport type GlobalErrorMessagesWithPaths =\n  | VariousErrorMessages\n  | {\n      // eslint-disable-next-line no-unused-vars\n      [K in `/${string}`]?: VariousErrorMessages\n    }\n\n/**\n * 'MyCustom.message': 'Your custom message'\n */\nexport type DotNotationErrorMessages = Record<\n  `${string}` | `${string}.${string}`,\n  string\n>\n/**\n * { 'nb-NO': { 'Field.errorRequired': 'Dette feltet er påkrevd' } }\n */\nexport type ErrorMessagesWithLocaleSupport = Record<\n  FormsTranslationLocale,\n  DefaultErrorMessages\n>\n\nexport type InternalErrorMessages = Record<FormsTranslationFlat, string>\nexport type DefaultErrorMessages = Partial<InternalErrorMessages> &\n  Partial<DotNotationErrorMessages> &\n  Partial<DeprecatedErrorMessages>\n\nexport type VariousErrorMessages =\n  | DefaultErrorMessages\n  | ErrorMessagesWithLocaleSupport\n\nexport type DeprecatedErrorMessages = {\n  /**\n   * @deprecated Use translation keys as the message instead of this parameter (e.g. Field.errorRequired)\n   */\n  required?: string\n  /**\n   * @deprecated Use translation keys as the message instead of this parameter (e.g. Field.errorPattern)\n   */\n  pattern?: string\n  /**\n   * @deprecated use StringField.errorMinLength instead\n   */\n  minLength?: string\n  /**\n   * @deprecated use StringField.errorMaxLength instead\n   */\n  maxLength?: string\n  /**\n   * @deprecated use NumberField.errorMinimum instead\n   */\n  minimum?: string\n  /**\n   * @deprecated use NumberField.errorMaximum instead\n   */\n  maximum?: string\n  /**\n   * @deprecated use NumberField.errorExclusiveMinimum instead\n   */\n  exclusiveMinimum?: string\n  /**\n   * @deprecated use NumberField.errorExclusiveMaximum instead\n   */\n  exclusiveMaximum?: string\n  /**\n   * @deprecated use NumberField.errorMultipleOf instead\n   */\n  multipleOf?: string\n}\n\nexport interface DataValueReadProps<Value = unknown> {\n  /** JSON Pointer for where the data for this field is located in the source dataset */\n  path?: Path\n  /** JSON Pointer for where the data for this field is located in the source iterate loop element */\n  itemPath?: Path\n  /** Source data value for the field. Will take precedence over the path value given in the data context */\n  value?: Value\n  /** Default source data value for the field. Will not take precedence over the path value given in the data context */\n  defaultValue?: Value\n}\n\nconst dataValueReadProps = ['path', 'itemPath', 'value']\n\nexport function pickDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): DataValueReadProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueReadProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): Omit<DataValueReadProps, keyof DataValueReadProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueReadProps.includes(key)\n    )\n  )\n}\n\ntype EventArgs<\n  Value,\n  ExtraValue extends AdditionalEventArgs,\n> = ExtraValue extends undefined\n  ? [value: Value]\n  : [value: Value, additionalArgs?: ExtraValue]\n\nexport interface DataValueWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ExtraValue extends AdditionalEventArgs = undefined,\n> {\n  emptyValue?: EmptyValue\n  onFocus?: (...args: EventArgs<Value | EmptyValue, ExtraValue>) => void\n  onBlur?: (...args: EventArgs<Value | EmptyValue, ExtraValue>) => void\n  onChange?: (\n    ...args: EventArgs<Value | EmptyValue, ExtraValue>\n  ) => OnChangeReturnType\n}\n\nconst dataValueWriteProps = ['emptyValue', 'onFocus', 'onBlur', 'onChange']\n\nexport function pickDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): DataValueWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): Omit<DataValueWriteProps, keyof DataValueWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type DataValueReadWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = DataValueReadProps<Value> & DataValueWriteProps<Value, EmptyValue>\n\nexport function pickDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(props: Props): DataValueReadWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        dataValueReadProps.includes(key) ||\n        dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(\n  props: Props\n): Omit<DataValueReadWriteProps, keyof DataValueReadWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        !dataValueReadProps.includes(key) &&\n        !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type ComponentProps = SpacingProps & {\n  className?: string\n}\n\nexport type AdditionalEventArgs = Record<string, unknown>\n\nexport type DataValueReadComponentProps<Value = unknown> = ComponentProps &\n  DataValueReadProps<Value>\n\nexport type DataValueReadWriteComponentProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = ComponentProps &\n  DataValueReadProps<Value> &\n  DataValueWriteProps<Value, EmptyValue>\n\nexport interface UseFieldProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> extends DataValueReadWriteComponentProps<Value, EmptyValue>,\n    AriaAttributes {\n  // - HTML Element Attributes\n  /**\n   * ID added to the actual field component, and linked to the label via for-attribute\n   */\n  id?: Identifier\n  name?: string\n  disabled?: boolean\n  readOnly?: boolean\n  autoComplete?:\n    | HTMLInputElement['autocomplete']\n    | HTMLTextAreaElement['autocomplete']\n  /**\n   * Text showing in place of the value if no value is given\n   */\n  placeholder?: React.ReactNode\n\n  /**\n   * NB: Undocumented for now.\n   * Forwards all possible props to the underlying component.\n   */\n  htmlAttributes?: Record<string, unknown>\n\n  /**\n   * NB: Undocumented for now.\n   * Forwards all given props in a props object.\n   */\n  props?: Record<string, unknown>\n\n  // - Used by useFieldProps and FieldBlock\n  info?: React.ReactNode\n  warning?: React.ReactNode\n  error?: Error | FormError | Array<Error | FormError>\n\n  // - Validation\n  required?: boolean\n  schema?: AllJSONSchemaVersions<Value>\n  /** @deprecated Use `onChangeValidator` instead */\n  validator?: Validator<Value>\n  onChangeValidator?: Validator<Value>\n  onBlurValidator?: Validator<Value>\n  exportValidators?: Record<string, Validator<Value>>\n  validateRequired?: (\n    internal: Value,\n    {\n      emptyValue,\n      required,\n      isChanged,\n      error,\n    }: {\n      emptyValue: EmptyValue\n      required: boolean\n      isChanged: boolean\n      error: FormError | undefined\n    }\n  ) => FormError | undefined\n  /**\n   * Should error messages based on validation be shown initially (from given value-prop or source data)\n   * before the user interacts with the field?\n   * @default false\n   */\n  validateInitially?: boolean\n  /**\n   * Should error messages be shown when touching (like focusing a field and blurring) without having changed\n   * the value? So the user did not introduce a new error, but it was invalid based on validation initially.\n   */\n  validateUnchanged?: boolean\n  /**\n   * Should validation be done while writing, not just when blurring the field?\n   */\n  continuousValidation?: boolean\n  /**\n   * Provide custom error messages for the field\n   */\n  errorMessages?: ErrorMessages\n\n  // - Derivatives\n\n  /**\n   * Transforms the `value` before it's displayed in the field (e.g. input).\n   * Public API. Should not be used internally.\n   */\n  transformIn?: (external: unknown) => Value\n\n  /**\n   * Transforms the value before it gets forwarded to the form data object or returned as the onChange value parameter.\n   * Public API. Should not be used internally.\n   */\n  transformOut?: (internal: Value, additionalArgs?: unknown) => unknown\n\n  /**\n   * Transforms the value given by `handleChange` after `fromInput` and before `updateValue` and `toEvent`. The second parameter returns the current value.\n   */\n  transformValue?: (value: Value, currentValue?: Value) => Value\n\n  /**\n   * Transform additionalArgs or generate it based on `value`.\n   */\n  provideAdditionalArgs?: (\n    value: Value,\n    additionalArgs?: AdditionalEventArgs\n  ) => AdditionalEventArgs\n\n  /**\n   * Transforms the value before it gets returned as the `value`.\n   */\n  toInput?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the internal value before it gets returned by even callbacks such as `onChange`, `onFocus` and `onBlur`. The second parameter returns the event type: `onChange`, `onFocus`, `onBlur` or `onBlurValidator`.\n   */\n  toEvent?: (\n    internal: Value,\n    type: 'onChange' | 'onFocus' | 'onBlur' | 'onBlurValidator'\n  ) => Value\n\n  /**\n   * Transforms the value given by `handleChange` before it is used in the further process flow. Use it to destruct the value from the original event object.\n   */\n  fromInput?: (external: Value | unknown) => Value\n\n  /**\n   * Transforms the given props `value` before any other step gets entered.\n   */\n  fromExternal?: (external: Value) => Value\n\n  /**\n   * For internal use only.\n   */\n  valueType?: string | number | boolean | Array<string | number | boolean>\n}\n\nexport type FieldProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> = UseFieldProps<Value, EmptyValue, ErrorMessages> & SharedFieldBlockProps\n\nexport type FieldPropsGeneric<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> = Omit<\n  FieldProps<Value, EmptyValue, ErrorMessages>,\n  keyof DataValueWriteProps\n> &\n  DataValueWriteProps<Value, EmptyValue, AdditionalEventArgs>\n\nexport type FieldPropsWithExtraValue<\n  Value = unknown,\n  ExtraValue extends AdditionalEventArgs = AdditionalEventArgs,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> = Omit<\n  FieldProps<Value, EmptyValue, ErrorMessages>,\n  keyof DataValueWriteProps\n> &\n  DataValueWriteProps<Value, EmptyValue, ExtraValue>\n\nexport interface ValueProps<Value = unknown>\n  extends DataValueReadComponentProps<Value> {\n  /**\n   * Field label to show above the data value.\n   */\n  label?: React.ReactNode\n\n  /** Use `true` to make the label only readable by screen readers. */\n  labelSrOnly?: boolean\n\n  /**\n   * Use `true` to inherit the label from a visible (rendered) field with the same path.\n   */\n  inheritLabel?: boolean\n\n  /**\n   * Use `true` to inherit the visibility from a field with the same path.\n   */\n  inheritVisibility?: boolean\n\n  /**\n   * Shows the value even if it is empty.\n   */\n  showEmpty?: boolean\n\n  /**\n   * Text showing in place of the value if no value is given.\n   */\n  placeholder?: React.ReactNode\n\n  /**\n   * For showing the value inline (not as a block element)\n   */\n  inline?: boolean\n\n  /** The max-width of a value block. Defaults to large */\n  maxWidth?: 'small' | 'medium' | 'large' | 'auto'\n\n  /**\n   * Transforms the label before it gets displayed. Receives the label as the first parameter. The second parameter is a object containing the `convertJsxToString` function.\n   */\n  transformLabel?: (\n    label: React.ReactNode,\n    convertJsxToString: (label: React.ReactNode) => string\n  ) => React.ReactNode\n\n  /**\n   * Transforms the `value` before it's displayed in the field (e.g. input).\n   * Public API. Should not be used internally.\n   */\n  transformIn?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the value before it gets returned as the `value`.\n   */\n  toInput?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the given props `value` before any other step gets entered.\n   */\n  fromExternal?: (external: Value) => Value\n}\n\nexport type Path = string\nexport type Identifier = string\n\nexport type SubmitState =\n  | 'pending' // Used for async operations\n  | 'complete' // Used to hide the submit indicator\n  | 'success' // Used for fields\n  | 'error' // Used when error is shown\n  | 'abort' // Used to abort the state regardless (step change)\n\n/**\n * Provide a error that shows in the FormStatus of a field.\n */\ntype EventStateObjectError = Error\n/**\n * Provide a warning that shows in the FormStatus of a field.\n */\ntype EventStateObjectWarning = React.ReactNode\n/**\n * Provide an info that shows in the FormStatus of a field.\n */\ntype EventStateObjectInfo = React.ReactNode\n\n/**\n * Provide a status that will enforce the form to stay in pending state\n */\ntype EventStateObjectStatus = 'pending'\n\n/**\n * Provide a success state that will show an indicator on the related field label\n */\ntype EventStateObjectSuccess = 'saved'\n\n/**\n * Provide an error or status messages that shows in the FormStatus of a field\n */\nexport type EventStateObjectOr = {\n  error?: EventStateObjectError\n  warning?: EventStateObjectWarning\n  info?: EventStateObjectInfo\n  pending?: EventStateObjectStatus\n  customStatus?: unknown\n}\n\nexport type EventStateObjectEitherOr =\n  | { error: EventStateObjectError }\n  | { warning: EventStateObjectWarning }\n  | { info: EventStateObjectInfo }\n  | { status: EventStateObjectStatus }\n  | { customStatus: unknown }\n\nexport type EventStateObject = EventStateObjectOr &\n  EventStateObjectEitherOr\n\n/**\n * Provide 'saved' to indicate the data has been saved successfully. Can not be combined with `error`.\n */\nexport type EventStateObjectWithSuccess = EventStateObjectOr & {\n  success?: EventStateObjectSuccess\n} & (EventStateObjectEitherOr | { success: EventStateObjectSuccess })\n\n/**\n * Provide an error or status messages that shows in the FormStatus of a field\n */\nexport type EventReturnWithStateObject = Error | EventStateObject\n\nexport type EventReturnWithStateObjectAndSuccess =\n  | Error\n  | EventStateObjectWithSuccess\n\nexport type OnSubmitParams = {\n  /** Will remove data entries of fields that are not visible */\n  reduceToVisibleFields: (\n    data: JsonObject,\n    options?: VisibleDataOptions\n  ) => Partial<JsonObject>\n\n  /** Will call the given function for each data path. The returned `value` will replace each data entry. It's up to you to define the shape of the value. */\n  transformData: (\n    data: JsonObject,\n    handler: TransformData\n  ) => TransformData\n\n  /** Will filter data based on the given \"filterDataHandler\" method */\n  filterData: (filterDataHandler: FilterData) => Partial<JsonObject>\n\n  /** Will remove browser-side stored autocomplete data  */\n  resetForm: () => void\n\n  /** Will empty the whole internal data set of the form  */\n  clearData: () => void\n}\n\nexport type OnSubmitReturn =\n  | EventReturnWithStateObject\n  | void\n  | Promise<EventReturnWithStateObject | void>\nexport type OnSubmit<Data = JsonObject> = (\n  data: Data,\n  {\n    reduceToVisibleFields,\n    transformData,\n    filterData,\n    resetForm,\n    clearData,\n  }: OnSubmitParams\n) => OnSubmitReturn\n\nexport type OnCommit<Data = JsonObject> = (\n  data: Data,\n  {\n    clearData,\n    preventCommit,\n  }: {\n    clearData: () => void\n    preventCommit?: () => void\n  }\n) =>\n  | EventReturnWithStateObject\n  | void\n  | Promise<EventReturnWithStateObject | void>\n\nexport type OnChange<Data = JsonObject> = (\n  data: Data,\n  additionalArgs: Pick<OnSubmitParams, 'filterData'>\n) => OnChangeReturnType\n\ntype OnChangeReturnType =\n  | EventReturnWithStateObjectAndSuccess\n  | void\n  | Promise<EventReturnWithStateObjectAndSuccess | void>\n"],"mappings":"AA4JA,MAAMA,kBAAkB,GAAG,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,CAAC;AAExD,OAAO,SAASC,sBAAsBA,CACpCC,KAAY,EACQ;EACpB,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAAC,CAAC,CAACC,GAAG,CAAC,KACvCP,kBAAkB,CAACQ,QAAQ,CAACD,GAAG,CACjC,CACF,CAAC;AACH;AAEA,OAAO,SAASE,sBAAsBA,CACpCP,KAAY,EACwC;EACpD,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAChC,CAAC,CAACC,GAAG,CAAC,KAAK,CAACP,kBAAkB,CAACQ,QAAQ,CAACD,GAAG,CAC7C,CACF,CAAC;AACH;AAsBA,MAAMG,mBAAmB,GAAG,CAAC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,CAAC;AAE3E,OAAO,SAASC,uBAAuBA,CACrCT,KAAY,EACS;EACrB,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAAC,CAAC,CAACC,GAAG,CAAC,KACvCG,mBAAmB,CAACF,QAAQ,CAACD,GAAG,CAClC,CACF,CAAC;AACH;AAEA,OAAO,SAASK,uBAAuBA,CACrCV,KAAY,EAC0C;EACtD,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAChC,CAAC,CAACC,GAAG,CAAC,KAAK,CAACG,mBAAmB,CAACF,QAAQ,CAACD,GAAG,CAC9C,CACF,CAAC;AACH;AAOA,OAAO,SAASM,2BAA2BA,CAEzCX,KAAY,EAA2B;EACvC,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAChC,CAAC,CAACC,GAAG,CAAC,KACJP,kBAAkB,CAACQ,QAAQ,CAACD,GAAG,CAAC,IAChCG,mBAAmB,CAACF,QAAQ,CAACD,GAAG,CACpC,CACF,CAAC;AACH;AAEA,OAAO,SAASO,2BAA2BA,CAGzCZ,KAAY,EACkD;EAC9D,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAChC,CAAC,CAACC,GAAG,CAAC,KACJ,CAACP,kBAAkB,CAACQ,QAAQ,CAACD,GAAG,CAAC,IACjC,CAACG,mBAAmB,CAACF,QAAQ,CAACD,GAAG,CACrC,CACF,CAAC;AACH"}

package/es/extensions/payment-card/style/dnb-payment-card.css

@@ -11,7 +11,7 @@
  */
 :root {
   --sb-font-family-default: "Roboto", "Helvetica", "Arial", sans-serif;
-  --sb-font-family-headings: "MaisonNeueHeadings", "Roboto", "Helvetica",
+  --sb-font-family-heading: "MaisonNeueHeadings", "Roboto", "Helvetica",
     "Arial", sans-serif;
   --sb-font-weight-default: normal;
   --sb-font-weight-basis: normal;

package/es/extensions/payment-card/style/dnb-payment-card.min.css

@@ -1 +1 @@
-:root{--sb-font-family-default:"Roboto","Helvetica","Arial",sans-serif;--sb-font-family-headings:"MaisonNeueHeadings","Roboto","Helvetica","Arial",sans-serif;--sb-font-weight-default:normal;--sb-font-weight-basis:normal;--sb-font-weight-regular:normal;--sb-font-weight-medium:500;--sb-font-weight-bold:700;--sb-font-size-x-small:0.75rem;--sb-font-size-small:0.875rem;--sb-font-size-basis:1rem;--sb-font-size-basis--em:1em;--sb-font-size-lead:var(--font-size-medium);--sb-font-size-medium:1.25rem;--sb-font-size-medium--plus:1.625rem;--sb-font-size-large:2rem;--sb-font-size-x-large:2.375rem;--sb-font-size-xx-large:3rem;--sb-line-height-x-small:1.125rem;--sb-line-height-small:1.25rem;--sb-line-height-basis:1.5rem;--sb-line-height-basis--em:1.5em;--sb-line-height-lead:1.75rem;--sb-line-height-medium:2rem;--sb-line-height-large:2.375rem;--sb-line-height-x-large:2.75rem;--sb-line-height-xx-large:3.375rem;--sb-color-black:#000;--sb-color-text:#18172a;--sb-color-gray-dark-3:#3a3a4a;--sb-color-gray-dark-3-neutral:#3e3e4a;--sb-color-gray-dark-2:#4a4a5b;--sb-color-gray-dark-2-neutral:#656472;--sb-color-gray-dark:#666578;--sb-color-gray-dark-neutral:#9494a3;--sb-color-gray:#bbbbce;--sb-color-gray-neutral:#bdbdc6;--sb-color-gray-light:#d9d9e4;--sb-color-gray-light-2:#ebebf2;--sb-color-gray-light-3:#f9f9fd;--sb-color-purple:#1c1b4e;--sb-color-purple-alternative:#222163;--sb-color-green:#92eecd;--sb-color-white:#fff;--sb-color-red:#d8134b;--sb-color-magenta:#ff3c64;--sb-color-orange:#ff5b44;--sb-color-yellow-dark:#f7bf16;--sb-color-yellow:#ffef57;--sb-color-green-dark-3:#00785b;--sb-color-green-dark-2:#1e9f73;--sb-color-violet:#4e08bc;--sb-color-violet-light:#7129e2;--sb-color-blue-dark-2:#044ccc;--sb-color-blue-dark:#005cff;--sb-color-blue:#008eff;--sb-color-orange-light:#ff817b;--sb-color-orange-light-2:#ffd7d5;--sb-color-orange-light-3:#fff0ef;--sb-color-magenta-light:#ffb6d2;--sb-color-magenta-light-2:#ffdbe9;--sb-color-magenta-light-3:#fff5f9;--sb-color-yellow-light:#fff489;--sb-color-yellow-light-2:#fff9c4;--sb-color-yellow-light-3:#fffce5;--sb-color-green-dark:#64d7b4;--sb-color-green-light:#c8f6e5;--sb-color-green-light-2:#e5fff7;--sb-color-violet-light-2:#be99ff;--sb-color-violet-light-3:#e0d0ff;--sb-color-violet-light-4:#f1ebff;--sb-color-blue-light:#61b9ff;--sb-color-blue-light-2:#bfe3ff;--sb-color-blue-light-3:#ebf6ff;--sb-spacing-x-small:0.5rem;--sb-spacing-small:1rem;--sb-spacing-medium:1.5rem;--sb-spacing-large:2rem;--sb-spacing-x-large:3rem;--sb-spacing-xx-large:3.5rem;--sb-layout-small:40em;--sb-layout-medium:60em;--sb-layout-large:72em;--sb-layout-x-large:80em;--sb-layout-xx-large:90em;--sb-shadow-small:0 2px 4px rgba(38,35,66,.12);--sb-shadow-medium:0 5px 20px rgba(38,35,66,.1);--sb-shadow-large:0 5px 20px rgba(38,35,66,.2);--sb-shadow-hover:0 20px 40px rgba(38,35,66,.2);--sb-easing-default:cubic-bezier(0.42,0,0,1)}.dnb-payment-card{--color-dark-cyan:#003b47;--dnb-payment-bg-default:linear-gradient(187.2deg,#008484 6.31%,var(--color-sea-green) 82.66%);--dnb-payment-bg-pluss:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-white:linear-gradient(184.55deg,var(--color-black-background) 4.63%,var(--color-white) 92.04%);--dnb-payment-bg-gold:linear-gradient(184.55deg,#bfa970 4.63%,#d3bd83 84.57%);--dnb-payment-bg-saga:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-private:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-business-no-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-business-with-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);margin:0}.dnb-payment-card__card{border-color:currentcolor;border-color:hsla(0,0%,100%,.1) transparent;border-radius:12px;border-style:solid;border-width:1px;box-shadow:var(--shadow-default);color:var(--color-white);height:216px;padding:16px;position:relative;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;width:343px}.dnb-payment-card__card--design-default{background:var(--dnb-payment-bg-default);color:var(--color-white)}.dnb-payment-card__card--design-pluss{background:var(--dnb-payment-bg-pluss);color:var(--color-white)}.dnb-payment-card__card--design-my-first,.dnb-payment-card__card--design-ung,.dnb-payment-card__card--design-youth{color:var(--color-black-80)}.dnb-payment-card__card--design-gold{background:var(--dnb-payment-bg-gold);color:var(--color-white)}.dnb-payment-card__card--design-saga{background:var(--dnb-payment-bg-saga);color:var(--color-white)}.dnb-payment-card__card--design-private{background:var(--dnb-payment-bg-private);color:var(--color-white)}.dnb-payment-card__card--design-black{background:var(--color-black);color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background:var(--dnb-payment-bg-business-no-visa);color:var(--color-white)}.dnb-payment-card__card--design-business-with-visa{background:var(--dnb-payment-bg-business-with-visa);color:var(--color-white)}.dnb-payment-card__card--design-sbanken-mastercard{background:var(--sb-color-purple);color:var(--color-white)}.dnb-payment-card__card--design-sbanken-visa{background:var(--color-white);color:var(--sb-color-text)}.dnb-payment-card__card:after{background:radial-gradient(52.39% 52.39% at 50% 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.dnb-payment-card__card--design-sbanken-mastercard:after{background:none}.dnb-payment-card__card__content{display:flex;height:100%;position:relative;width:100%}.dnb-payment-card__card__wrapper{bottom:0;left:0;position:absolute}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__holder{font-weight:var(--font-weight-medium);text-align:left;text-transform:uppercase}.dnb-payment-card__card__holder.dnb-p{font-size:.625rem}.dnb-payment-card__card__numbers{font-size:1.5rem!important;font-weight:var(--font-weight-medium)}.dnb-payment-card__card__credit-type{bottom:0;position:absolute;right:0}.dnb-payment-card__card__bank-logo{left:0;position:absolute;top:0}.dnb-payment-card__card__product-type{height:38px;left:70px;position:absolute;top:0}.dnb-payment-card__card__bank-axept{height:45px;position:absolute;right:0;top:0}.dnb-payment-card__card__credit{position:absolute;right:0;top:6px}.dnb-payment-card__blocking__overlay{align-items:center;background:linear-gradient(184.55deg,hsla(0,0%,80%,.5) 4.63%,hsla(0,0%,91%,.5) 84.83%);border-radius:inherit;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay svg path{stroke:currentcolor}.dnb-payment-card__blocking__center{align-items:center;background:var(--color-black-80);border-radius:4px;color:var(--color-sand-yellow);display:flex;flex-direction:column;justify-content:center;padding:1rem}.dnb-payment-card__blocking svg{shape-rendering:geometricprecision}.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder{opacity:1}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:12px 12px 0 0;box-shadow:var(--shadow-default);height:32.8mm;padding:0}.dnb-payment-card--compact .dnb-payment-card__card__top{left:6mm;position:absolute;right:6mm;top:4mm}.dnb-payment-card--compact .dnb-payment-card__card__bottom{background-color:var(--color-white);bottom:0;height:14mm;left:0;position:absolute;right:0}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{color:var(--color-black-80);padding:6px 22px}.dnb-payment-card--compact .dnb-payment-card__card__numbers{font-size:var(--font-size-basis)}.dnb-payment-card--compact .dnb-payment-card__card__credit-type{bottom:auto;right:4px;top:10px}.dnb-payment-card--compact .dnb-payment-card__blocking__center{align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:flex;flex-direction:row;gap:var(--spacing-x-small);height:100%;justify-content:center;width:100%}
+:root{--sb-font-family-default:"Roboto","Helvetica","Arial",sans-serif;--sb-font-family-heading:"MaisonNeueHeadings","Roboto","Helvetica","Arial",sans-serif;--sb-font-weight-default:normal;--sb-font-weight-basis:normal;--sb-font-weight-regular:normal;--sb-font-weight-medium:500;--sb-font-weight-bold:700;--sb-font-size-x-small:0.75rem;--sb-font-size-small:0.875rem;--sb-font-size-basis:1rem;--sb-font-size-basis--em:1em;--sb-font-size-lead:var(--font-size-medium);--sb-font-size-medium:1.25rem;--sb-font-size-medium--plus:1.625rem;--sb-font-size-large:2rem;--sb-font-size-x-large:2.375rem;--sb-font-size-xx-large:3rem;--sb-line-height-x-small:1.125rem;--sb-line-height-small:1.25rem;--sb-line-height-basis:1.5rem;--sb-line-height-basis--em:1.5em;--sb-line-height-lead:1.75rem;--sb-line-height-medium:2rem;--sb-line-height-large:2.375rem;--sb-line-height-x-large:2.75rem;--sb-line-height-xx-large:3.375rem;--sb-color-black:#000;--sb-color-text:#18172a;--sb-color-gray-dark-3:#3a3a4a;--sb-color-gray-dark-3-neutral:#3e3e4a;--sb-color-gray-dark-2:#4a4a5b;--sb-color-gray-dark-2-neutral:#656472;--sb-color-gray-dark:#666578;--sb-color-gray-dark-neutral:#9494a3;--sb-color-gray:#bbbbce;--sb-color-gray-neutral:#bdbdc6;--sb-color-gray-light:#d9d9e4;--sb-color-gray-light-2:#ebebf2;--sb-color-gray-light-3:#f9f9fd;--sb-color-purple:#1c1b4e;--sb-color-purple-alternative:#222163;--sb-color-green:#92eecd;--sb-color-white:#fff;--sb-color-red:#d8134b;--sb-color-magenta:#ff3c64;--sb-color-orange:#ff5b44;--sb-color-yellow-dark:#f7bf16;--sb-color-yellow:#ffef57;--sb-color-green-dark-3:#00785b;--sb-color-green-dark-2:#1e9f73;--sb-color-violet:#4e08bc;--sb-color-violet-light:#7129e2;--sb-color-blue-dark-2:#044ccc;--sb-color-blue-dark:#005cff;--sb-color-blue:#008eff;--sb-color-orange-light:#ff817b;--sb-color-orange-light-2:#ffd7d5;--sb-color-orange-light-3:#fff0ef;--sb-color-magenta-light:#ffb6d2;--sb-color-magenta-light-2:#ffdbe9;--sb-color-magenta-light-3:#fff5f9;--sb-color-yellow-light:#fff489;--sb-color-yellow-light-2:#fff9c4;--sb-color-yellow-light-3:#fffce5;--sb-color-green-dark:#64d7b4;--sb-color-green-light:#c8f6e5;--sb-color-green-light-2:#e5fff7;--sb-color-violet-light-2:#be99ff;--sb-color-violet-light-3:#e0d0ff;--sb-color-violet-light-4:#f1ebff;--sb-color-blue-light:#61b9ff;--sb-color-blue-light-2:#bfe3ff;--sb-color-blue-light-3:#ebf6ff;--sb-spacing-x-small:0.5rem;--sb-spacing-small:1rem;--sb-spacing-medium:1.5rem;--sb-spacing-large:2rem;--sb-spacing-x-large:3rem;--sb-spacing-xx-large:3.5rem;--sb-layout-small:40em;--sb-layout-medium:60em;--sb-layout-large:72em;--sb-layout-x-large:80em;--sb-layout-xx-large:90em;--sb-shadow-small:0 2px 4px rgba(38,35,66,.12);--sb-shadow-medium:0 5px 20px rgba(38,35,66,.1);--sb-shadow-large:0 5px 20px rgba(38,35,66,.2);--sb-shadow-hover:0 20px 40px rgba(38,35,66,.2);--sb-easing-default:cubic-bezier(0.42,0,0,1)}.dnb-payment-card{--color-dark-cyan:#003b47;--dnb-payment-bg-default:linear-gradient(187.2deg,#008484 6.31%,var(--color-sea-green) 82.66%);--dnb-payment-bg-pluss:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-white:linear-gradient(184.55deg,var(--color-black-background) 4.63%,var(--color-white) 92.04%);--dnb-payment-bg-gold:linear-gradient(184.55deg,#bfa970 4.63%,#d3bd83 84.57%);--dnb-payment-bg-saga:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-private:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-business-no-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-business-with-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);margin:0}.dnb-payment-card__card{border-color:currentcolor;border-color:hsla(0,0%,100%,.1) transparent;border-radius:12px;border-style:solid;border-width:1px;box-shadow:var(--shadow-default);color:var(--color-white);height:216px;padding:16px;position:relative;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;width:343px}.dnb-payment-card__card--design-default{background:var(--dnb-payment-bg-default);color:var(--color-white)}.dnb-payment-card__card--design-pluss{background:var(--dnb-payment-bg-pluss);color:var(--color-white)}.dnb-payment-card__card--design-my-first,.dnb-payment-card__card--design-ung,.dnb-payment-card__card--design-youth{color:var(--color-black-80)}.dnb-payment-card__card--design-gold{background:var(--dnb-payment-bg-gold);color:var(--color-white)}.dnb-payment-card__card--design-saga{background:var(--dnb-payment-bg-saga);color:var(--color-white)}.dnb-payment-card__card--design-private{background:var(--dnb-payment-bg-private);color:var(--color-white)}.dnb-payment-card__card--design-black{background:var(--color-black);color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background:var(--dnb-payment-bg-business-no-visa);color:var(--color-white)}.dnb-payment-card__card--design-business-with-visa{background:var(--dnb-payment-bg-business-with-visa);color:var(--color-white)}.dnb-payment-card__card--design-sbanken-mastercard{background:var(--sb-color-purple);color:var(--color-white)}.dnb-payment-card__card--design-sbanken-visa{background:var(--color-white);color:var(--sb-color-text)}.dnb-payment-card__card:after{background:radial-gradient(52.39% 52.39% at 50% 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.dnb-payment-card__card--design-sbanken-mastercard:after{background:none}.dnb-payment-card__card__content{display:flex;height:100%;position:relative;width:100%}.dnb-payment-card__card__wrapper{bottom:0;left:0;position:absolute}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__holder{font-weight:var(--font-weight-medium);text-align:left;text-transform:uppercase}.dnb-payment-card__card__holder.dnb-p{font-size:.625rem}.dnb-payment-card__card__numbers{font-size:1.5rem!important;font-weight:var(--font-weight-medium)}.dnb-payment-card__card__credit-type{bottom:0;position:absolute;right:0}.dnb-payment-card__card__bank-logo{left:0;position:absolute;top:0}.dnb-payment-card__card__product-type{height:38px;left:70px;position:absolute;top:0}.dnb-payment-card__card__bank-axept{height:45px;position:absolute;right:0;top:0}.dnb-payment-card__card__credit{position:absolute;right:0;top:6px}.dnb-payment-card__blocking__overlay{align-items:center;background:linear-gradient(184.55deg,hsla(0,0%,80%,.5) 4.63%,hsla(0,0%,91%,.5) 84.83%);border-radius:inherit;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay svg path{stroke:currentcolor}.dnb-payment-card__blocking__center{align-items:center;background:var(--color-black-80);border-radius:4px;color:var(--color-sand-yellow);display:flex;flex-direction:column;justify-content:center;padding:1rem}.dnb-payment-card__blocking svg{shape-rendering:geometricprecision}.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder{opacity:1}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:12px 12px 0 0;box-shadow:var(--shadow-default);height:32.8mm;padding:0}.dnb-payment-card--compact .dnb-payment-card__card__top{left:6mm;position:absolute;right:6mm;top:4mm}.dnb-payment-card--compact .dnb-payment-card__card__bottom{background-color:var(--color-white);bottom:0;height:14mm;left:0;position:absolute;right:0}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{color:var(--color-black-80);padding:6px 22px}.dnb-payment-card--compact .dnb-payment-card__card__numbers{font-size:var(--font-size-basis)}.dnb-payment-card--compact .dnb-payment-card__card__credit-type{bottom:auto;right:4px;top:10px}.dnb-payment-card--compact .dnb-payment-card__blocking__center{align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:flex;flex-direction:row;gap:var(--spacing-x-small);height:100%;justify-content:center;width:100%}

package/es/fragments/drawer-list/DrawerList.d.ts

@@ -13,27 +13,34 @@ export type DrawerListWrapperElement =
   | React.ReactNode;
 export type DrawerListDefaultValue = string | number;
 export type DrawerListValue = string | number;
-export type DrawerListDataObject = {
+/** @deprecated use `DrawerListDataArrayObject` */
+export type DrawerListDataObject = DrawerListDataArrayObject;
+export type DrawerListDataArrayObject = {
+  [customProperty: string]: unknown;
   selected_value?: string | React.ReactNode;
   selectedKey?: string | number;
   selected_key?: string | number;
   suffix_value?: string | React.ReactNode;
-  content?: string | React.ReactNode | string[];
+  content?: DrawerListContent;
+  disabled?: boolean;
   search_content?: string | React.ReactNode | string[];
 };
-export type DrawerListDataObjectUnion =
-  | string
-  | React.ReactNode
-  | DrawerListDataObject;
+/** @deprecated use `DrawerListDataArrayItem` */
+export type DrawerListDataObjectUnion = DrawerListDataArrayItem;
+export type DrawerListDataArrayItem =
+  | DrawerListDataArrayObject
+  | DrawerListContent;
+export type DrawerListDataArray = DrawerListDataArrayItem[];
+export type DrawerListDataRecord = Record<string, DrawerListContent>;
+export type DrawerListDataAll = DrawerListDataRecord | DrawerListDataArray;
 export type DrawerListData =
   | string
-  | ((...args: any[]) => any)
+  | ((...args: any[]) => DrawerListDataAll)
+  | DrawerListDataAll;
+export type DrawerListContent =
+  | string
   | React.ReactNode
-  | Record<string, unknown>
-  | DrawerListDataObjectUnion[];
-export type DrawerListSelectedValue = string | React.ReactNode;
-export type DrawerListSuffixValue = string | React.ReactNode;
-export type DrawerListContent = string | React.ReactNode | string[];
+  | (string | React.ReactNode)[];
 export type DrawerListRawData =
   | any[]
   | Record<string, unknown>
@@ -108,7 +115,7 @@ export interface DrawerListProps {
    */
   default_value?: DrawerListDefaultValue;
   /**
-   * Define a preselected data entry (index) or key inside an array item. Can be a string or integer.
+   * Define a preselected `data` entry. In order of priority, `value` can be set to: object key (if `data` is an object), `selectedKey` prop (if `data` is an array), array index (if no `selectedKey`) or content (if `value` is a non-integer string).
    */
   value?: DrawerListValue;
   /**
@@ -145,13 +152,7 @@ export interface DrawerListProps {
    */
   skip_keysearch?: boolean;
   opened?: boolean;
-  /**
-   * 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.
-   */
   data?: DrawerListData;
-  selected_value?: DrawerListSelectedValue;
-  suffix_value?: DrawerListSuffixValue;
-  content?: DrawerListContent;
   prepared_data?: any[];
   raw_data?: DrawerListRawData;
   /**
@@ -189,14 +190,14 @@ export type DrawerListItemProps = {
   children: React.ReactNode;
   selected: boolean;
   /**
-   * Define a preselected data entry (index) or key inside an array item. Can be a string or integer.
+   * Define a preselected `data` entry. In order of priority, `value` can be set to: object key (if `data` is an object), `selectedKey` prop (if `data` is an array), array index (if no `selectedKey`) or content (if `value` is a non-integer string).
    */
   value: string;
   on_click: ({
     value
   }: {
     /**
-     * Define a preselected data entry (index) or key inside an array item. Can be a string or integer.
+     * Define a preselected `data` entry. In order of priority, `value` can be set to: object key (if `data` is an object), `selectedKey` prop (if `data` is an array), array index (if no `selectedKey`) or content (if `value` is a non-integer string).
      */
     value: string;
   }) => void;

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

@@ -3,7 +3,7 @@ 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", "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"],
+  _excluded3 = ["role", "hash", "children", "className", "on_click", "selected", "active", "value", "disabled"],
   _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; }
@@ -193,7 +193,8 @@ class DrawerListInstance extends React.PureComponent {
         active: _id == active_item,
         selected: !dataItem.ignore_events && _id == selected_item,
         onClick: this.selectItemHandler,
-        onKeyDown: this.preventTab
+        onKeyDown: this.preventTab,
+        disabled: dataItem.disabled
       };
       if (ignoreEvents) {
         liParams.active = null;
@@ -290,14 +291,17 @@ DrawerList.Item = React.forwardRef((props, ref) => {
       on_click,
       selected,
       active,
-      value
+      value,
+      disabled
     } = props,
     rest = _objectWithoutProperties(props, _excluded3);
   const params = {
     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
+    'aria-selected': active,
+    disabled,
+    'aria-disabled': disabled
   };
   if (selected) {
     params['aria-current'] = true;
@@ -330,7 +334,8 @@ DrawerList.Item.propTypes = {
   on_click: PropTypes.func,
   selected: PropTypes.bool,
   active: PropTypes.bool,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  disabled: PropTypes.bool
 };
 DrawerList.Item.defaultProps = {
   role: 'option',
@@ -371,6 +376,10 @@ process.env.NODE_ENV !== "production" ? ItemContent.propTypes = {
   hash: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.object])
 } : void 0;
+ItemContent.defaultProps = {
+  hash: '',
+  children: undefined
+};
 DrawerList.HorizontalItem = _ref => {
   let {
       className