@dnb/eufemia 10.17.0 → 10.18.0

package/cjs/style/themes/theme-ui/ui-theme-extensions.min.css

@@ -1,4 +1,4 @@
-.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap}.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{align-items:center;display:flex}.dnb-forms-field-number__contents--has-controls{--border-color:var(--number-control-button-border-color);--border-width:0.0625rem;border-color:transparent;border-radius:.25rem;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]){--border-color:var(--number-control-button-border-color);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within{--border-color:var(--number-control-button-border-color--focus);--border-width:var(--number-control-button-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls .dnb-input__shell{border-radius:0;box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]){box-shadow:none}.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none;outline:initial}html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none}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-forms-field-number__contents--has-error{--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]){--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell{box-shadow:none}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-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-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-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-forms-field-number__contents--has-error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]){--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input[data-input-state=disabled] .dnb-input__shell{box-shadow:none}.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-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-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__fields{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.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-button-row{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:40em){.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]){margin:0}@media screen and (min-width:40em){.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-form-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-steps-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-steps-layout__sidebar{flex:0}.dnb-forms-steps-layout__contents{flex:1 0 25rem}.dnb-forms-steps-layout__contents .dnb-card{--border-color:var(--color-pistachio)}@media screen and (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-steps-layout__contents{flex-basis:auto}}.dnb-forms-steps-layout .dnb-step-indicator__sidebar{margin-right:0}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}.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 rgba(0,0,0,.2);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: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__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__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%}.dnb-forms-field-number{--number-control-button-border-color:var(--color-sea-green);--number-control-button-border-color--hover:var(--color-emerald-green);--number-control-button-border-color--focus:var(--color-emerald-green);--number-control-button-background-color--hover:var(
+.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--spacing-x-small)}@media screen and (min-width:40em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}.dnb-forms-field-expiry .dnb-multi-input-mask{width:var(--forms-field-width--small)}.dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell{justify-content:center}.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{align-items:center;display:flex}.dnb-forms-field-number__contents--has-controls{--border-color:var(--number-control-button-border-color);--border-width:0.0625rem;border-color:transparent;border-radius:.25rem;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]){--border-color:var(--number-control-button-border-color);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within{--border-color:var(--number-control-button-border-color--focus);--border-width:var(--number-control-button-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls .dnb-input__shell{border-radius:0;box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]){box-shadow:none}.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none;outline:initial}html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none}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-forms-field-number__contents--has-error{--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]){--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell{box-shadow:none}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-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-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-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-forms-field-number__contents--has-error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]){--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input[data-input-state=disabled] .dnb-input__shell{box-shadow:none}.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-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-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__fields{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.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-button-row{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:40em){.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]){margin:0}@media screen and (min-width:40em){.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-form-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-steps-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-steps-layout__sidebar{flex:0}.dnb-forms-steps-layout__contents{flex:1 0 25rem}.dnb-forms-steps-layout__contents .dnb-card{--border-color:var(--color-pistachio)}@media screen and (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-steps-layout__contents{flex-basis:auto}}.dnb-forms-steps-layout .dnb-step-indicator__sidebar{margin-right:0}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}.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 rgba(0,0,0,.2);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: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__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__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%}.dnb-forms-field-number{--number-control-button-border-color:var(--color-sea-green);--number-control-button-border-color--hover:var(--color-emerald-green);--number-control-button-border-color--focus:var(--color-emerald-green);--number-control-button-background-color--hover:var(
     --color-mint-green-12
   );--number-control-button-color--hover:var(--color-emerald-green);--number-control-button-background-color--active:var(
     --color-mint-green-50

package/cjs/style/themes/theme-ui/ui-theme-forms.css

@@ -10,16 +10,26 @@
 /*
  * Utilities
  */
-.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+/*
+ * Utilities
+ */
+.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
   row-gap: var(--spacing-x-small);
 }
-.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
+  row-gap: var(--spacing-x-small);
+}
+@media screen and (min-width: 40em) {
+  .dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label {
+    line-height: 2.5rem;
+    margin-bottom: 0;
+  }
 }
 
 .dnb-forms-field-expiry .dnb-multi-input-mask {
@@ -325,15 +335,6 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   justify-content: space-between;
   align-items: center;
 }
-.dnb-forms-field-block__label-description {
-  margin-left: 0.3em;
-  color: var(--color-black-55);
-  font-size: var(--font-size-small);
-}
-.dnb-forms-field-block__label-secondary {
-  color: var(--color-black-55);
-  font-size: var(--font-size-small);
-}
 .dnb-forms-field-block__status {
   grid-area: status;
 }

package/cjs/style/themes/theme-ui/ui-theme-forms.min.css

@@ -1,4 +1,4 @@
-.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap}.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{align-items:center;display:flex}.dnb-forms-field-number__contents--has-controls{--border-color:var(--number-control-button-border-color);--border-width:0.0625rem;border-color:transparent;border-radius:.25rem;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]){--border-color:var(--number-control-button-border-color);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within{--border-color:var(--number-control-button-border-color--focus);--border-width:var(--number-control-button-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls .dnb-input__shell{border-radius:0;box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]){box-shadow:none}.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none;outline:initial}html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none}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-forms-field-number__contents--has-error{--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]){--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell{box-shadow:none}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-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-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-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-forms-field-number__contents--has-error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]){--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input[data-input-state=disabled] .dnb-input__shell{box-shadow:none}.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-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-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__fields{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.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-button-row{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:40em){.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]){margin:0}@media screen and (min-width:40em){.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-form-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-steps-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-steps-layout__sidebar{flex:0}.dnb-forms-steps-layout__contents{flex:1 0 25rem}.dnb-forms-steps-layout__contents .dnb-card{--border-color:var(--color-pistachio)}@media screen and (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-steps-layout__contents{flex-basis:auto}}.dnb-forms-steps-layout .dnb-step-indicator__sidebar{margin-right:0}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}.dnb-forms-field-number{--number-control-button-border-color:var(--color-sea-green);--number-control-button-border-color--hover:var(--color-emerald-green);--number-control-button-border-color--focus:var(--color-emerald-green);--number-control-button-background-color--hover:var(
+.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--spacing-x-small)}@media screen and (min-width:40em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}.dnb-forms-field-expiry .dnb-multi-input-mask{width:var(--forms-field-width--small)}.dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell{justify-content:center}.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{align-items:center;display:flex}.dnb-forms-field-number__contents--has-controls{--border-color:var(--number-control-button-border-color);--border-width:0.0625rem;border-color:transparent;border-radius:.25rem;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]){--border-color:var(--number-control-button-border-color);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within{--border-color:var(--number-control-button-border-color--focus);--border-width:var(--number-control-button-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls .dnb-input__shell{border-radius:0;box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]){box-shadow:none}.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none;outline:initial}html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none}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-forms-field-number__contents--has-error{--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]){--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell{box-shadow:none}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-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-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-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-forms-field-number__contents--has-error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]){--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input[data-input-state=disabled] .dnb-input__shell{box-shadow:none}.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-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-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__fields{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.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-button-row{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:40em){.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]){margin:0}@media screen and (min-width:40em){.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-form-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-steps-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-steps-layout__sidebar{flex:0}.dnb-forms-steps-layout__contents{flex:1 0 25rem}.dnb-forms-steps-layout__contents .dnb-card{--border-color:var(--color-pistachio)}@media screen and (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-steps-layout__contents{flex-basis:auto}}.dnb-forms-steps-layout .dnb-step-indicator__sidebar{margin-right:0}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}.dnb-forms-field-number{--number-control-button-border-color:var(--color-sea-green);--number-control-button-border-color--hover:var(--color-emerald-green);--number-control-button-border-color--focus:var(--color-emerald-green);--number-control-button-background-color--hover:var(
     --color-mint-green-12
   );--number-control-button-color--hover:var(--color-emerald-green);--number-control-button-background-color--active:var(
     --color-mint-green-50

package/components/flex/Container.js

@@ -58,6 +58,7 @@ function FlexContainer(props) {
     queries
   });
   const content = childrenArray.map((child, i) => {
+    var _previousChild$type;
     const isFirst = i === 0;
     const previousChild = childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray[i - 1];
     const start = direction === 'horizontal' ? 'left' : 'top';
@@ -89,6 +90,9 @@ function FlexContainer(props) {
       var _ref2, _getSpaceValue3;
       startSpacing = (_ref2 = (_getSpaceValue3 = getSpaceValue(start, child)) !== null && _getSpaceValue3 !== void 0 ? _getSpaceValue3 : getSpaceValue(end, previousChild)) !== null && _ref2 !== void 0 ? _ref2 : spacing;
     }
+    if (React.isValidElement(previousChild) && (previousChild === null || previousChild === void 0 ? void 0 : (_previousChild$type = previousChild.type) === null || _previousChild$type === void 0 ? void 0 : _previousChild$type['_supportsSpacingProps']) === false) {
+      startSpacing = 0;
+    }
     const space = direction === 'horizontal' ? {
       [start]: endSpacing,
       [end]: startSpacing

package/components/flex/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","names":["React","classnames","Space","Hr","useMedia","getSpaceValue","isHeadingElement","renderWithSpacing","propNames","pickFlexContainerProps","props","defaults","arguments","length","undefined","skip","_objectSpread","Object","fromEntries","entries","filter","_ref","key","includes","FlexContainer","className","style","children","element","direction","wrap","sizeCount","rowGap","justify","align","alignSelf","divider","spacing","breakpoints","queries","rest","_objectWithoutProperties","_excluded","childrenArray","wrapChildren","hasHeading","some","child","i","previousChild","hasSizeProp","_child$props","size","mediaKey","disabled","content","map","isFirst","start","end","endSpacing","startSpacing","isHeading","_getSpaceValue","_getSpaceValue2","spaceAboveLine","createElement","Fragment","top","_Hr","space","_ref2","_getSpaceValue3","n","cn","_extends","Children","toArray","isValidElement","type","cloneElement","_supportsSpacingProps"],"sources":["../../../../src/components/flex/Container.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Space, { SpaceProps } from '../space/Space'\nimport { Hr } from '../../elements'\nimport useMedia from '../../shared/useMedia'\nimport {\n  getSpaceValue,\n  isHeadingElement,\n  renderWithSpacing,\n} from './utils'\n\nimport type { MediaQueryBreakpoints } from '../../shared/MediaQueryUtils'\nimport type { SpaceType } from '../space/types'\nimport type { UseMediaQueries } from '../../shared/useMedia'\nimport type { End, Start } from './types'\n\nexport type BasicProps = {\n  direction?: 'horizontal' | 'vertical'\n  wrap?: boolean\n  rowGap?: 'small' | 'medium' | 'large' | true\n  sizeCount?: number\n  justify?:\n    | 'flex-start'\n    | 'flex-end'\n    | 'center'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n  align?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'\n  // For when used as a flex item in an outer container in addition to being a container:\n  alignSelf?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'\n  divider?: 'space' | 'line'\n  /** Spacing between items inside */\n  spacing?:\n    | false\n    | 'xx-small'\n    | 'x-small'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'x-large'\n    | 'xx-large'\n  breakpoints?: MediaQueryBreakpoints\n  queries?: UseMediaQueries\n}\n\nexport type Props = BasicProps &\n  SpaceProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap'>\n\nconst propNames: Array<keyof Props> = [\n  'direction',\n  'wrap',\n  'justify',\n  'align',\n  'divider',\n  'spacing',\n]\n\nexport function pickFlexContainerProps<T extends Props>(\n  props: T,\n  defaults: Partial<Props> = {},\n  skip: Array<keyof Props> = []\n): Omit<Props, 'children'> {\n  return {\n    ...defaults,\n    ...Object.fromEntries(\n      Object.entries(props ?? {}).filter(\n        ([key]) =>\n          propNames.includes(key as keyof Props) &&\n          !skip.includes(key as keyof Props)\n      )\n    ),\n  }\n}\n\nfunction FlexContainer(props: Props) {\n  const {\n    className,\n    style,\n    children,\n    element = 'div',\n    direction = 'horizontal',\n    wrap = true,\n    sizeCount = 12,\n    rowGap,\n    justify = 'flex-start',\n    align = 'flex-start',\n    alignSelf,\n    divider = 'space',\n    spacing = 'small',\n    breakpoints,\n    queries,\n    ...rest\n  } = props\n\n  const childrenArray = wrapChildren(props, children)\n  const hasHeading = childrenArray.some((child, i) => {\n    const previousChild = childrenArray?.[i - 1]\n    return (\n      isHeadingElement(child) || (i > 0 && isHeadingElement(previousChild))\n    )\n  })\n  const hasSizeProp =\n    !hasHeading &&\n    direction === 'horizontal' &&\n    childrenArray.some((child) => child['props']?.size)\n\n  const { key: mediaKey } = useMedia({\n    disabled: !hasSizeProp,\n    breakpoints,\n    queries,\n  })\n\n  const content = childrenArray.map((child, i) => {\n    // Set spacing on child components by props (instead of CSS) to be able to dynamically override by props on each child. The default\n    // is the spacing-props that controls space between children. Then override with props sent to the children, including both top\n    // and bottom when th\n    const isFirst = i === 0\n    const previousChild = childrenArray?.[i - 1]\n\n    // Always set spacing between elements in the vertical layout on the top props, and 0 on bottom, to avoid\n    // having to divide spacing between both with smaller values.\n    const start: Start = direction === 'horizontal' ? 'left' : 'top'\n    const end: End = direction === 'horizontal' ? 'right' : 'bottom'\n    // const start: Start | End = direction === 'horizontal' ? 'right' : 'top'\n    // const end: Start | End = direction === 'horizontal' ? 'left' : 'bottom'\n    const endSpacing = 0\n    let startSpacing = null\n\n    const isHeading = hasHeading && isHeadingElement(previousChild)\n    if (\n      divider === 'line' &&\n      // No line above first element\n      !isFirst &&\n      // No line above heading\n      !isHeading\n    ) {\n      const spaceAboveLine = getSpaceValue(end, previousChild) ?? spacing\n      startSpacing = (getSpaceValue(start, child) ?? spacing) as SpaceType\n\n      return (\n        <React.Fragment key={`element-${i}`}>\n          <Space top={spaceAboveLine} />\n          <Hr space={0} className=\"dnb-flex-container__hr\" />\n          {renderWithSpacing(child, {\n            space: { [start]: startSpacing, [end]: endSpacing },\n          })}\n        </React.Fragment>\n      )\n    }\n\n    // No space above first element.\n    if (isFirst && direction !== 'horizontal') {\n      startSpacing = 0\n    } else {\n      // Since top space of current and bottom space of previous component is the same\n      startSpacing =\n        getSpaceValue(start, child) ??\n        getSpaceValue(end, previousChild) ??\n        spacing\n    }\n\n    const space =\n      direction === 'horizontal'\n        ? { [start]: endSpacing, [end]: startSpacing }\n        : { [start]: startSpacing, [end]: endSpacing }\n\n    return renderWithSpacing(child, {\n      key: `element-${i}`,\n      space,\n    })\n  })\n\n  const n = 'dnb-flex-container'\n  const cn = classnames(\n    'dnb-flex-container',\n    direction && `${n}--direction-${direction}`,\n    justify && `${n}--justify-${justify}`,\n    align && `${n}--align-${align}`,\n    alignSelf && `${n}--align-self-${alignSelf}`,\n    spacing && `${n}--spacing-${spacing}`,\n    wrap && `${n}--wrap`,\n    rowGap && `${n}--row-gap-${rowGap === true ? 'small' : rowGap}`,\n    hasSizeProp && `${n}--has-size`,\n    divider && `${n}--divider-${divider}`,\n    className\n  )\n\n  return (\n    <Space\n      element={element}\n      className={cn}\n      data-media-key={mediaKey}\n      style={\n        hasSizeProp\n          ? ({ '--sizeCount': sizeCount, ...style } as React.CSSProperties)\n          : style\n      }\n      {...rest}\n    >\n      {content}\n    </Space>\n  )\n}\n\nfunction wrapChildren(props: Props, children: React.ReactNode) {\n  return React.Children.toArray(children).map((child) => {\n    if (\n      React.isValidElement(child) &&\n      child.type['_supportsSpacingProps'] === 'children'\n    ) {\n      return React.cloneElement(\n        child,\n        child.props,\n        <FlexContainer {...props}>{child.props.children}</FlexContainer>\n      )\n    }\n\n    return child\n  })\n}\n\nFlexContainer._supportsSpacingProps = true\n\nexport default FlexContainer\n"],"mappings":"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"}
+{"version":3,"file":"Container.js","names":["React","classnames","Space","Hr","useMedia","getSpaceValue","isHeadingElement","renderWithSpacing","propNames","pickFlexContainerProps","props","defaults","arguments","length","undefined","skip","_objectSpread","Object","fromEntries","entries","filter","_ref","key","includes","FlexContainer","className","style","children","element","direction","wrap","sizeCount","rowGap","justify","align","alignSelf","divider","spacing","breakpoints","queries","rest","_objectWithoutProperties","_excluded","childrenArray","wrapChildren","hasHeading","some","child","i","previousChild","hasSizeProp","_child$props","size","mediaKey","disabled","content","map","_previousChild$type","isFirst","start","end","endSpacing","startSpacing","isHeading","_getSpaceValue","_getSpaceValue2","spaceAboveLine","createElement","Fragment","top","_Hr","space","_ref2","_getSpaceValue3","isValidElement","type","n","cn","_extends","Children","toArray","cloneElement","_supportsSpacingProps"],"sources":["../../../../src/components/flex/Container.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Space, { SpaceProps } from '../space/Space'\nimport { Hr } from '../../elements'\nimport useMedia from '../../shared/useMedia'\nimport {\n  getSpaceValue,\n  isHeadingElement,\n  renderWithSpacing,\n} from './utils'\n\nimport type { MediaQueryBreakpoints } from '../../shared/MediaQueryUtils'\nimport type { SpaceType } from '../space/types'\nimport type { UseMediaQueries } from '../../shared/useMedia'\nimport type { End, Start } from './types'\n\nexport type BasicProps = {\n  direction?: 'horizontal' | 'vertical'\n  wrap?: boolean\n  rowGap?: 'small' | 'medium' | 'large' | true\n  sizeCount?: number\n  justify?:\n    | 'flex-start'\n    | 'flex-end'\n    | 'center'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n  align?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'\n  // For when used as a flex item in an outer container in addition to being a container:\n  alignSelf?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'\n  divider?: 'space' | 'line'\n  /** Spacing between items inside */\n  spacing?:\n    | false\n    | 'xx-small'\n    | 'x-small'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'x-large'\n    | 'xx-large'\n  breakpoints?: MediaQueryBreakpoints\n  queries?: UseMediaQueries\n}\n\nexport type Props = BasicProps &\n  SpaceProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap'>\n\nconst propNames: Array<keyof Props> = [\n  'direction',\n  'wrap',\n  'justify',\n  'align',\n  'divider',\n  'spacing',\n]\n\nexport function pickFlexContainerProps<T extends Props>(\n  props: T,\n  defaults: Partial<Props> = {},\n  skip: Array<keyof Props> = []\n): Omit<Props, 'children'> {\n  return {\n    ...defaults,\n    ...Object.fromEntries(\n      Object.entries(props ?? {}).filter(\n        ([key]) =>\n          propNames.includes(key as keyof Props) &&\n          !skip.includes(key as keyof Props)\n      )\n    ),\n  }\n}\n\nfunction FlexContainer(props: Props) {\n  const {\n    className,\n    style,\n    children,\n    element = 'div',\n    direction = 'horizontal',\n    wrap = true,\n    sizeCount = 12,\n    rowGap,\n    justify = 'flex-start',\n    align = 'flex-start',\n    alignSelf,\n    divider = 'space',\n    spacing = 'small',\n    breakpoints,\n    queries,\n    ...rest\n  } = props\n\n  const childrenArray = wrapChildren(props, children)\n  const hasHeading = childrenArray.some((child, i) => {\n    const previousChild = childrenArray?.[i - 1]\n    return (\n      isHeadingElement(child) || (i > 0 && isHeadingElement(previousChild))\n    )\n  })\n  const hasSizeProp =\n    !hasHeading &&\n    direction === 'horizontal' &&\n    childrenArray.some((child) => child['props']?.size)\n\n  const { key: mediaKey } = useMedia({\n    disabled: !hasSizeProp,\n    breakpoints,\n    queries,\n  })\n\n  const content = childrenArray.map((child, i) => {\n    // Set spacing on child components by props (instead of CSS) to be able to dynamically override by props on each child. The default\n    // is the spacing-props that controls space between children. Then override with props sent to the children, including both top\n    // and bottom when th\n    const isFirst = i === 0\n    const previousChild = childrenArray?.[i - 1]\n\n    // Always set spacing between elements in the vertical layout on the top props, and 0 on bottom, to avoid\n    // having to divide spacing between both with smaller values.\n    const start: Start = direction === 'horizontal' ? 'left' : 'top'\n    const end: End = direction === 'horizontal' ? 'right' : 'bottom'\n    // const start: Start | End = direction === 'horizontal' ? 'right' : 'top'\n    // const end: Start | End = direction === 'horizontal' ? 'left' : 'bottom'\n    const endSpacing = 0\n    let startSpacing = null\n\n    const isHeading = hasHeading && isHeadingElement(previousChild)\n    if (\n      divider === 'line' &&\n      // No line above first element\n      !isFirst &&\n      // No line above heading\n      !isHeading\n    ) {\n      const spaceAboveLine = getSpaceValue(end, previousChild) ?? spacing\n      startSpacing = (getSpaceValue(start, child) ?? spacing) as SpaceType\n\n      return (\n        <React.Fragment key={`element-${i}`}>\n          <Space top={spaceAboveLine} />\n          <Hr space={0} className=\"dnb-flex-container__hr\" />\n          {renderWithSpacing(child, {\n            space: { [start]: startSpacing, [end]: endSpacing },\n          })}\n        </React.Fragment>\n      )\n    }\n\n    // No space above first element.\n    if (isFirst && direction !== 'horizontal') {\n      startSpacing = 0\n    } else {\n      // Since top space of current and bottom space of previous component is the same\n      startSpacing =\n        getSpaceValue(start, child) ??\n        getSpaceValue(end, previousChild) ??\n        spacing\n    }\n\n    if (\n      React.isValidElement(previousChild) &&\n      previousChild?.type?.['_supportsSpacingProps'] === false\n    ) {\n      startSpacing = 0\n    }\n\n    const space =\n      direction === 'horizontal'\n        ? { [start]: endSpacing, [end]: startSpacing }\n        : { [start]: startSpacing, [end]: endSpacing }\n\n    return renderWithSpacing(child, {\n      key: `element-${i}`,\n      space,\n    })\n  })\n\n  const n = 'dnb-flex-container'\n  const cn = classnames(\n    'dnb-flex-container',\n    direction && `${n}--direction-${direction}`,\n    justify && `${n}--justify-${justify}`,\n    align && `${n}--align-${align}`,\n    alignSelf && `${n}--align-self-${alignSelf}`,\n    spacing && `${n}--spacing-${spacing}`,\n    wrap && `${n}--wrap`,\n    rowGap && `${n}--row-gap-${rowGap === true ? 'small' : rowGap}`,\n    hasSizeProp && `${n}--has-size`,\n    divider && `${n}--divider-${divider}`,\n    className\n  )\n\n  return (\n    <Space\n      element={element}\n      className={cn}\n      data-media-key={mediaKey}\n      style={\n        hasSizeProp\n          ? ({ '--sizeCount': sizeCount, ...style } as React.CSSProperties)\n          : style\n      }\n      {...rest}\n    >\n      {content}\n    </Space>\n  )\n}\n\nfunction wrapChildren(props: Props, children: React.ReactNode) {\n  return React.Children.toArray(children).map((child) => {\n    if (\n      React.isValidElement(child) &&\n      child.type['_supportsSpacingProps'] === 'children'\n    ) {\n      return React.cloneElement(\n        child,\n        child.props,\n        <FlexContainer {...props}>{child.props.children}</FlexContainer>\n      )\n    }\n\n    return child\n  })\n}\n\nFlexContainer._supportsSpacingProps = true\n\nexport default FlexContainer\n"],"mappings":"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"}

package/components/flex/utils.d.ts

@@ -15,4 +15,4 @@ export declare const isSpacePropsComponent: (element: React.ReactNode) => boolea
 export declare const renderWithSpacing: (element: React.ReactNode, props: SpacingProps & {
     key?: string;
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode>;

package/components/flex/utils.js

@@ -28,10 +28,20 @@ export const isEufemiaElement = element => {
 };
 export const isSpacePropsComponent = element => {
   var _element$type2;
-  return React.isValidElement(element) && (element === null || element === void 0 ? void 0 : (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2['_supportsSpacingProps']) === true || isEufemiaElement(element);
+  if (React.isValidElement(element) && typeof (element === null || element === void 0 ? void 0 : (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2['_supportsSpacingProps']) === 'boolean') {
+    var _element$type3;
+    return element === null || element === void 0 ? void 0 : (_element$type3 = element.type) === null || _element$type3 === void 0 ? void 0 : _element$type3['_supportsSpacingProps'];
+  }
+  if (isEufemiaElement(element)) {
+    return true;
+  }
+  return undefined;
 };
 export const renderWithSpacing = (element, props) => {
   const takesSpaceProps = isSpacePropsComponent(element);
+  if (takesSpaceProps === false) {
+    return element;
+  }
   return takesSpaceProps ? React.cloneElement(element, props) : React.createElement(Space, props, element);
 };
 //# sourceMappingURL=utils.js.map

package/components/flex/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["React","Space","removeSpaceProps","EufemiaElements","pickSpacingProps","props","space","top","bottom","left","right","omitSpacingProps","getSpaceValue","type","element","_element$props$type","_element$props","_element$props2","isValidElement","undefined","isHeadingElement","_element$type","isEufemiaElement","Object","values","some","eufemiaElement","isSpacePropsComponent","_element$type2","renderWithSpacing","takesSpaceProps","cloneElement","createElement"],"sources":["../../../../src/components/flex/utils.tsx"],"sourcesContent":["import React from 'react'\nimport { SpaceType, SpacingProps } from '../../shared/types'\nimport Space from '../space/Space'\nimport { removeSpaceProps } from '../space/SpacingUtils'\nimport * as EufemiaElements from '../../elements'\nimport { End, Start } from './types'\n\nexport const pickSpacingProps = <Props extends SpacingProps>(\n  props: Props\n): SpacingProps => {\n  return {\n    space: props?.space,\n    top: props?.top,\n    bottom: props?.bottom,\n    left: props?.left,\n    right: props?.right,\n  }\n}\n\nexport const omitSpacingProps = removeSpaceProps\n\nexport const getSpaceValue = (\n  type: Start | End,\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n\n  return (\n    element.props?.[type] ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space[type]\n      : undefined)\n  )\n}\n\nexport function isHeadingElement(\n  element: React.ReactNode & { _isHeadingElement?: boolean }\n): boolean {\n  return (\n    React.isValidElement(element) &&\n    element?.type?.['_isHeadingElement'] === true\n  )\n}\n\nexport const isEufemiaElement = (element): boolean => {\n  return Object.values(EufemiaElements).some(\n    (eufemiaElement) => element?.type === eufemiaElement\n  )\n}\n\n/**\n * Is the requested element a component that can receive Eufemia space props (space, top, bottom, left and right)?\n */\nexport const isSpacePropsComponent = (\n  element: React.ReactNode\n): boolean => {\n  return (\n    (React.isValidElement(element) &&\n      element?.type?.['_supportsSpacingProps'] === true) ||\n    isEufemiaElement(element)\n  )\n}\n\nexport const renderWithSpacing = (\n  element: React.ReactNode,\n  props: SpacingProps & { key?: string; className?: string }\n) => {\n  const takesSpaceProps = isSpacePropsComponent(element)\n\n  return takesSpaceProps ? (\n    React.cloneElement(element as React.ReactElement<unknown>, props)\n  ) : (\n    <Space {...props}>{element}</Space>\n  )\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,KAAK,MAAM,gBAAgB;AAClC,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,KAAKC,eAAe,MAAM,gBAAgB;AAGjD,OAAO,MAAMC,gBAAgB,GAC3BC,KAAY,IACK;EACjB,OAAO;IACLC,KAAK,EAAED,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEC,KAAK;IACnBC,GAAG,EAAEF,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEE,GAAG;IACfC,MAAM,EAAEH,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEG,MAAM;IACrBC,IAAI,EAAEJ,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEI,IAAI;IACjBC,KAAK,EAAEL,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEK;EAChB,CAAC;AACH,CAAC;AAED,OAAO,MAAMC,gBAAgB,GAAGT,gBAAgB;AAEhD,OAAO,MAAMU,aAAa,GAAGA,CAC3BC,IAAiB,EACjBC,OAAmE,KACzC;EAAA,IAAAC,mBAAA,EAAAC,cAAA,EAAAC,eAAA;EAC1B,IAAI,CAACjB,KAAK,CAACkB,cAAc,CAACJ,OAAO,CAAC,EAAE;IAClC;EACF;EAEA,QAAAC,mBAAA,IAAAC,cAAA,GACEF,OAAO,CAACT,KAAK,cAAAW,cAAA,uBAAbA,cAAA,CAAgBH,IAAI,CAAC,cAAAE,mBAAA,cAAAA,mBAAA,GACpB,SAAAE,eAAA,GAAOH,OAAO,CAACT,KAAK,cAAAY,eAAA,uBAAbA,eAAA,CAAeX,KAAK,MAAK,QAAQ,GACrCQ,OAAO,CAACT,KAAK,CAACC,KAAK,CAACO,IAAI,CAAC,GACzBM,SAAS;AAEjB,CAAC;AAED,OAAO,SAASC,gBAAgBA,CAC9BN,OAA0D,EACjD;EAAA,IAAAO,aAAA;EACT,OACErB,KAAK,CAACkB,cAAc,CAACJ,OAAO,CAAC,IAC7B,CAAAA,OAAO,aAAPA,OAAO,wBAAAO,aAAA,GAAPP,OAAO,CAAED,IAAI,cAAAQ,aAAA,uBAAbA,aAAA,CAAgB,mBAAmB,CAAC,MAAK,IAAI;AAEjD;AAEA,OAAO,MAAMC,gBAAgB,GAAIR,OAAO,IAAc;EACpD,OAAOS,MAAM,CAACC,MAAM,CAACrB,eAAe,CAAC,CAACsB,IAAI,CACvCC,cAAc,IAAK,CAAAZ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAED,IAAI,MAAKa,cACxC,CAAC;AACH,CAAC;AAKD,OAAO,MAAMC,qBAAqB,GAChCb,OAAwB,IACZ;EAAA,IAAAc,cAAA;EACZ,OACG5B,KAAK,CAACkB,cAAc,CAACJ,OAAO,CAAC,IAC5B,CAAAA,OAAO,aAAPA,OAAO,wBAAAc,cAAA,GAAPd,OAAO,CAAED,IAAI,cAAAe,cAAA,uBAAbA,cAAA,CAAgB,uBAAuB,CAAC,MAAK,IAAI,IACnDN,gBAAgB,CAACR,OAAO,CAAC;AAE7B,CAAC;AAED,OAAO,MAAMe,iBAAiB,GAAGA,CAC/Bf,OAAwB,EACxBT,KAA0D,KACvD;EACH,MAAMyB,eAAe,GAAGH,qBAAqB,CAACb,OAAO,CAAC;EAEtD,OAAOgB,eAAe,GACpB9B,KAAK,CAAC+B,YAAY,CAACjB,OAAO,EAAiCT,KAAK,CAAC,GAEjEL,KAAA,CAAAgC,aAAA,CAAC/B,KAAK,EAAKI,KAAK,EAAGS,OAAe,CACnC;AACH,CAAC"}
+{"version":3,"file":"utils.js","names":["React","Space","removeSpaceProps","EufemiaElements","pickSpacingProps","props","space","top","bottom","left","right","omitSpacingProps","getSpaceValue","type","element","_element$props$type","_element$props","_element$props2","isValidElement","undefined","isHeadingElement","_element$type","isEufemiaElement","Object","values","some","eufemiaElement","isSpacePropsComponent","_element$type2","_element$type3","renderWithSpacing","takesSpaceProps","cloneElement","createElement"],"sources":["../../../../src/components/flex/utils.tsx"],"sourcesContent":["import React from 'react'\nimport { SpaceType, SpacingProps } from '../../shared/types'\nimport Space from '../space/Space'\nimport { removeSpaceProps } from '../space/SpacingUtils'\nimport * as EufemiaElements from '../../elements'\nimport { End, Start } from './types'\n\nexport const pickSpacingProps = <Props extends SpacingProps>(\n  props: Props\n): SpacingProps => {\n  return {\n    space: props?.space,\n    top: props?.top,\n    bottom: props?.bottom,\n    left: props?.left,\n    right: props?.right,\n  }\n}\n\nexport const omitSpacingProps = removeSpaceProps\n\nexport const getSpaceValue = (\n  type: Start | End,\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n\n  return (\n    element.props?.[type] ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space[type]\n      : undefined)\n  )\n}\n\nexport function isHeadingElement(\n  element: React.ReactNode & { _isHeadingElement?: boolean }\n): boolean {\n  return (\n    React.isValidElement(element) &&\n    element?.type?.['_isHeadingElement'] === true\n  )\n}\n\nexport const isEufemiaElement = (element): boolean => {\n  return Object.values(EufemiaElements).some(\n    (eufemiaElement) => element?.type === eufemiaElement\n  )\n}\n\n/**\n * Is the requested element a component that can receive Eufemia space props (space, top, bottom, left and right)?\n */\nexport const isSpacePropsComponent = (\n  element: React.ReactNode\n): boolean => {\n  if (\n    React.isValidElement(element) &&\n    typeof element?.type?.['_supportsSpacingProps'] === 'boolean'\n  ) {\n    return element?.type?.['_supportsSpacingProps']\n  }\n\n  if (isEufemiaElement(element)) {\n    return true\n  }\n\n  return undefined\n}\n\nexport const renderWithSpacing = (\n  element: React.ReactNode,\n  props: SpacingProps & { key?: string; className?: string }\n) => {\n  const takesSpaceProps = isSpacePropsComponent(element)\n\n  if (takesSpaceProps === false) {\n    return element\n  }\n\n  return takesSpaceProps ? (\n    React.cloneElement(element as React.ReactElement<unknown>, props)\n  ) : (\n    <Space {...props}>{element}</Space>\n  )\n}\n"],"mappings":"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"}

package/components/input-masked/MultiInputMask.d.ts

@@ -47,6 +47,14 @@ export type MultiInputMaskProps<T extends string> = {
      * Runs when the input value changes. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`
      */
     onChange?: (values: MultiInputMaskValue<T>) => void;
+    /**
+     * Runs when the input gains focus. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`
+     */
+    onFocus?: (values: MultiInputMaskValue<T>) => void;
+    /**
+     * Runs when the input loses focus. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`
+     */
+    onBlur?: (values: MultiInputMaskValue<T>) => void;
     /**
      * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
      */
@@ -63,8 +71,8 @@ export type MultiInputMaskProps<T extends string> = {
      * Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.
      */
     suffix?: React.ReactNode;
-} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'ref' | 'value' | 'label'> & SpacingProps;
-declare function MultiInputMask<T extends string>({ label, labelDirection, inputs, delimiter, onChange: onChangeExternal, disabled, status, statusState, values: defaultValues, className, stretch, inputMode, suffix, ...props }: MultiInputMaskProps<T>): import("react/jsx-runtime").JSX.Element;
+} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'ref' | 'value' | 'label'> & SpacingProps;
+declare function MultiInputMask<T extends string>({ label, labelDirection, inputs, delimiter, onChange: onChangeExternal, disabled, status, statusState, values: defaultValues, className, stretch, inputMode, suffix, onBlur, onFocus, ...props }: MultiInputMaskProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace MultiInputMask {
     var _formElement: boolean;
     var _supportsSpacingProps: boolean;

package/components/input-masked/MultiInputMask.js

@@ -1,9 +1,13 @@
 "use client";
 
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["label", "labelDirection", "inputs", "delimiter", "onChange", "disabled", "status", "statusState", "values", "className", "stretch", "inputMode", "suffix"],
-  _excluded2 = ["id", "label", "value", "mask", "placeholderCharacter", "delimiter", "disabled", "inputRef", "onKeyDown", "onChange"];
+const _excluded = ["label", "labelDirection", "inputs", "delimiter", "onChange", "disabled", "status", "statusState", "values", "className", "stretch", "inputMode", "suffix", "onBlur", "onFocus"],
+  _excluded2 = ["id", "label", "value", "mask", "placeholderCharacter", "delimiter", "disabled", "inputRef", "onKeyDown", "onChange", "onBlur", "onFocus"],
+  _excluded3 = ["target"];
+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; }
 import React, { useRef } from 'react';
 import Input from '../Input';
 import TextMask from './TextMask';
@@ -27,7 +31,9 @@ function MultiInputMask(_ref) {
       className,
       stretch,
       inputMode,
-      suffix
+      suffix,
+      onBlur,
+      onFocus
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const [values, onChange] = useMultiInputValue({
@@ -63,6 +69,16 @@ function MultiInputMask(_ref) {
       delimiter: index !== inputs.length - 1 ? delimiter : undefined,
       onKeyDown: onKeyDown,
       onChange: onChange,
+      onFocus: () => {
+        if (onFocus) {
+          onFocus(values);
+        }
+      },
+      onBlur: () => {
+        if (onBlur) {
+          onBlur(values);
+        }
+      },
       disabled: disabled,
       inputRef: getInputRef
     })))
@@ -115,14 +131,17 @@ function MultiInputMaskInput(_ref3) {
       disabled,
       inputRef,
       onKeyDown,
-      onChange
+      onChange,
+      onBlur,
+      onFocus
     } = _ref3,
     attributes = _objectWithoutProperties(_ref3, _excluded2);
+  const shouldHighlight = !disabled && /\w+/.test(value);
   const markupId = `${id}-${makeUniqueId()}`;
   return React.createElement(React.Fragment, null, React.createElement(TextMask, _extends({
     id: `${markupId}__input`,
     "data-mask-id": id,
-    className: "dnb-input__input dnb-multi-input-mask__input" + (/\d+/.test(value) ? " dnb-multi-input-mask__input--highlight" : ""),
+    className: "dnb-input__input dnb-multi-input-mask__input" + (shouldHighlight ? " dnb-multi-input-mask__input--highlight" : ""),
     disabled: disabled,
     size: mask.length,
     mask: mask,
@@ -134,7 +153,20 @@ function MultiInputMaskInput(_ref3) {
     "aria-labelledby": `${markupId}__label`,
     ref: inputRef,
     onKeyDown: onKeyDown,
-    onFocus: onFocus,
+    onBlur: onBlur,
+    onFocus: _ref4 => {
+      let {
+          target
+        } = _ref4,
+        event = _objectWithoutProperties(_ref4, _excluded3);
+      target.focus();
+      target.select();
+      if (onFocus) {
+        onFocus(_objectSpread({
+          target
+        }, event));
+      }
+    },
     onChange: event => {
       onChange(id, removePlaceholder(event.target.value, placeholderCharacter));
     }
@@ -144,18 +176,11 @@ function MultiInputMaskInput(_ref3) {
     hidden: true
   }, label), delimiter && React.createElement("span", {
     "aria-hidden": true,
-    className: 'dnb-multi-input-mask__delimiter' + (value ? " dnb-multi-input-mask__delimiter--highlight" : "")
+    className: 'dnb-multi-input-mask__delimiter' + (shouldHighlight ? " dnb-multi-input-mask__delimiter--highlight" : "")
   }, delimiter));
   function removePlaceholder(value, placeholder) {
     return value.replace(RegExp(placeholder, 'gm'), '');
   }
-  function onFocus(_ref4) {
-    let {
-      target
-    } = _ref4;
-    target.focus();
-    target.select();
-  }
 }
 export default MultiInputMask;
 MultiInputMask._formElement = true;

package/components/input-masked/MultiInputMask.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiInputMask.js","names":["React","useRef","Input","TextMask","useHandleCursorPosition","classnames","FormLabel","createSpacingClasses","useMultiInputValue","makeUniqueId","MultiInputMask","_ref","label","labelDirection","inputs","delimiter","onChange","onChangeExternal","disabled","status","statusState","values","defaultValues","className","stretch","inputMode","suffix","props","_objectWithoutProperties","_excluded","callback","inputRefs","onKeyDown","current","getKeysToHandle","WrapperElement","createElement","element","onClick","onLegendClick","vertical","_extends","status_state","input_element","map","input","index","MultiInputMaskInput","key","id","value","length","undefined","inputRef","getInputRef","firstInput","focus","setSelectionRange","ref","includes","push","uniqueMasks","getUniqueMasks","size","pattern","next","replace","RegExp","reduce","keys","_ref2","mask","masks","Set","forEach","add","String","_ref3","placeholderCharacter","attributes","_excluded2","markupId","Fragment","test","placeholderChar","guide","showMask","keepCharPositions","onFocus","event","removePlaceholder","target","htmlFor","hidden","placeholder","_ref4","select","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/input-masked/MultiInputMask.tsx"],"sourcesContent":["import React, { Fragment, MutableRefObject, useRef } from 'react'\nimport Input from '../Input'\nimport TextMask from './TextMask'\nimport useHandleCursorPosition from './hooks/useHandleCursorPosition'\nimport classnames from 'classnames'\nimport FormLabel from '../FormLabel'\nimport { SpacingProps } from '../space/types'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { FormStatusState, FormStatusText } from '../FormStatus'\nimport { useMultiInputValue } from './hooks/useMultiInputValues'\nimport { makeUniqueId } from '../../shared/component-helper'\n\nexport type MultiInputMaskInput<T extends string> = {\n  /**\n   * Defines the id for the input. This id is also used to map the input value to the correct property on the objects used for `values` and `onChange` parameters.\n   */\n  id: T\n  /**\n   * Label used by the input. The label itself is hidden, but required to uphold accessibility standards for screen readers.\n   */\n  label: React.ReactNode\n  /**\n   * Each RegExp item in the array defines what the mask should be for each subsequent character in the input. The length sets the size of the input, so an array of two items would produce an input of two characters\n   */\n  mask: RegExp[]\n  /**\n   * Sets the placeholder character used for the input.\n   */\n  placeholderCharacter: string\n} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'ref'>\n\nexport type MultiInputMaskValue<T extends string> = {\n  // eslint-disable-next-line no-unused-vars\n  [K in T]: string\n}\n\nexport type MultiInputMaskProps<T extends string> = {\n  /**\n   * The label describing the group of inputs inside the components.\n   */\n  label?: React.ReactNode\n  /**\n   * Use to change the label layout direction. Defaults to `horizontal`.\n   */\n  labelDirection?: 'vertical' | 'horizontal'\n  /**\n   * Used to define the different inputs representing the inputs in the component. The id's defined here is used to map input value to correct property in `values` parameters used in `onChange`\n   */\n  inputs: MultiInputMaskInput<T>[]\n  /**\n   * Values used for the inputs inside the component. Expects an object with keys matching the id's defined in `inputs`\n   */\n  values?: MultiInputMaskValue<T>\n  /**\n   * Defines the delimiter used to separate the inputs inside the component.\n   */\n  delimiter?: string\n  /**\n   * Runs when the input value changes. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n   */\n  onChange?: (values: MultiInputMaskValue<T>) => void\n  /**\n   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n   */\n  status?: FormStatusText\n  /**\n   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n   */\n  statusState?: FormStatusState\n  /**\n   * Set it to `true` in order to stretch the input to the available space. Defaults to false.\n   */\n  stretch?: boolean\n  /**\n   * Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.\n   */\n  suffix?: React.ReactNode\n} & Omit<\n  React.HTMLProps<HTMLInputElement>,\n  'onChange' | 'ref' | 'value' | 'label'\n> &\n  SpacingProps\n\nfunction MultiInputMask<T extends string>({\n  label,\n  labelDirection = 'horizontal',\n  inputs,\n  delimiter,\n  onChange: onChangeExternal,\n  disabled,\n  status,\n  statusState,\n  values: defaultValues,\n  className,\n  stretch,\n  inputMode,\n  suffix,\n  ...props\n}: MultiInputMaskProps<T>) {\n  const [values, onChange] = useMultiInputValue({\n    inputs,\n    defaultValues,\n    callback: onChangeExternal,\n  })\n\n  const inputRefs = useRef<Array<MutableRefObject<HTMLInputElement>>>([])\n\n  const { onKeyDown } = useHandleCursorPosition(\n    inputRefs.current,\n    getKeysToHandle()\n  )\n\n  const WrapperElement = label ? 'fieldset' : 'div'\n\n  return (\n    <WrapperElement\n      className={classnames(\n        'dnb-multi-input-mask__fieldset',\n        labelDirection === 'horizontal' &&\n          'dnb-multi-input-mask__fieldset--horizontal',\n        createSpacingClasses(props)\n      )}\n    >\n      {label && (\n        <FormLabel\n          className={classnames(\n            'dnb-multi-input-mask__legend',\n            labelDirection === 'horizontal' &&\n              'dnb-multi-input-mask__legend--horizontal'\n          )}\n          element=\"legend\"\n          onClick={onLegendClick}\n          disabled={disabled}\n          vertical={labelDirection === 'vertical'}\n        >\n          {/* This <span/> wrapper is needed to make hover work in Safari Desktop */}\n          <span>{label}</span>\n        </FormLabel>\n      )}\n      <Input\n        {...props}\n        className={classnames('dnb-multi-input-mask', className)}\n        disabled={disabled}\n        status={status}\n        status_state={statusState}\n        suffix={suffix}\n        stretch={stretch}\n        input_element={inputs.map((input, index) => (\n          <MultiInputMaskInput\n            key={input.id}\n            {...input}\n            inputMode={inputMode}\n            value={values[input.id]}\n            delimiter={index !== inputs.length - 1 ? delimiter : undefined}\n            onKeyDown={onKeyDown}\n            onChange={onChange}\n            disabled={disabled}\n            inputRef={getInputRef}\n          />\n        ))}\n      />\n    </WrapperElement>\n  )\n\n  // Event handlers\n  function onLegendClick() {\n    if (disabled) {\n      return\n    }\n\n    const firstInput = inputRefs.current[0].current\n\n    firstInput.focus()\n    firstInput.setSelectionRange(0, 0)\n  }\n\n  // Utilities\n  function getInputRef(ref: any) {\n    const inputRef = ref?.inputRef\n\n    if (inputRef && !inputRefs.current.includes(inputRef)) {\n      inputRefs.current.push(inputRef)\n    }\n  }\n\n  function getKeysToHandle() {\n    const uniqueMasks = getUniqueMasks()\n\n    // Return the only one RegExp since all the inputs are using the same mask\n    if (uniqueMasks.size === 1) {\n      const pattern = uniqueMasks.values().next().value.replace(/\\//g, '')\n      return new RegExp(pattern)\n    }\n\n    // If there are multiple types of masks used, then map the maps to an object based on input ids\n    // So that useHandleCursorPosition can do a per character test to see if the pressed key should be handled or not\n    return inputs.reduce(\n      (keys, { id, mask }) => {\n        keys[id] = mask\n\n        return keys\n      },\n      {} as Record<T, RegExp[]>\n    )\n  }\n\n  function getUniqueMasks() {\n    const masks = new Set()\n\n    inputs.forEach((input) => {\n      input.mask.forEach((pattern) => masks.add(String(pattern)))\n    })\n\n    return masks\n  }\n}\n\ntype MultiInputMaskInputProps<T extends string> =\n  MultiInputMaskInput<T> & {\n    id: MultiInputMaskInput<T>['id']\n    label: MultiInputMaskInput<T>['label']\n    value: string\n    mask: MultiInputMaskInput<T>['mask']\n    placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    delimiter?: MultiInputMaskProps<T>['delimiter']\n    disabled: boolean\n    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void\n    onChange: (\n      id: string,\n      placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    ) => void\n    inputRef: any\n  }\n\nfunction MultiInputMaskInput<T extends string>({\n  id,\n  label,\n  value,\n  mask,\n  placeholderCharacter,\n  delimiter,\n  disabled,\n  inputRef,\n  onKeyDown,\n  onChange,\n  ...attributes\n}: MultiInputMaskInputProps<T>) {\n  const markupId = `${id}-${makeUniqueId()}`\n\n  return (\n    <>\n      <TextMask\n        id={`${markupId}__input`}\n        data-mask-id={id}\n        className={classnames(\n          'dnb-input__input',\n          'dnb-multi-input-mask__input',\n          /\\d+/.test(value) && 'dnb-multi-input-mask__input--highlight'\n        )}\n        disabled={disabled}\n        size={mask.length}\n        mask={mask}\n        value={value ?? ''}\n        placeholderChar={placeholderCharacter}\n        guide={true}\n        showMask={true}\n        keepCharPositions={false} // so we can overwrite next value, if it already exists\n        aria-labelledby={`${markupId}__label`}\n        ref={inputRef}\n        onKeyDown={onKeyDown}\n        onFocus={onFocus}\n        onChange={(event) => {\n          onChange(\n            id,\n            removePlaceholder(event.target.value, placeholderCharacter)\n          )\n        }}\n        {...attributes}\n      />\n      <label\n        id={`${markupId}__label`}\n        htmlFor={`${markupId}__input`}\n        hidden\n      >\n        {label}\n      </label>\n      {delimiter && (\n        <span\n          aria-hidden\n          className={classnames(\n            'dnb-multi-input-mask__delimiter',\n            value && 'dnb-multi-input-mask__delimiter--highlight'\n          )}\n        >\n          {delimiter}\n        </span>\n      )}\n    </>\n  )\n\n  function removePlaceholder(value: string, placeholder: string) {\n    return value.replace(RegExp(placeholder, 'gm'), '')\n  }\n\n  function onFocus({ target }: React.FocusEvent<HTMLInputElement>) {\n    target.focus()\n    target.select()\n  }\n}\n\nexport default MultiInputMask\n\nMultiInputMask._formElement = true\nMultiInputMask._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"MultiInputMask.js","names":["React","useRef","Input","TextMask","useHandleCursorPosition","classnames","FormLabel","createSpacingClasses","useMultiInputValue","makeUniqueId","MultiInputMask","_ref","label","labelDirection","inputs","delimiter","onChange","onChangeExternal","disabled","status","statusState","values","defaultValues","className","stretch","inputMode","suffix","onBlur","onFocus","props","_objectWithoutProperties","_excluded","callback","inputRefs","onKeyDown","current","getKeysToHandle","WrapperElement","createElement","element","onClick","onLegendClick","vertical","_extends","status_state","input_element","map","input","index","MultiInputMaskInput","key","id","value","length","undefined","inputRef","getInputRef","firstInput","focus","setSelectionRange","ref","includes","push","uniqueMasks","getUniqueMasks","size","pattern","next","replace","RegExp","reduce","keys","_ref2","mask","masks","Set","forEach","add","String","_ref3","placeholderCharacter","attributes","_excluded2","shouldHighlight","test","markupId","Fragment","placeholderChar","guide","showMask","keepCharPositions","_ref4","target","event","_excluded3","select","_objectSpread","removePlaceholder","htmlFor","hidden","placeholder","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/input-masked/MultiInputMask.tsx"],"sourcesContent":["import React, { Fragment, MutableRefObject, useRef } from 'react'\nimport Input from '../Input'\nimport TextMask from './TextMask'\nimport useHandleCursorPosition from './hooks/useHandleCursorPosition'\nimport classnames from 'classnames'\nimport FormLabel from '../FormLabel'\nimport { SpacingProps } from '../space/types'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { FormStatusState, FormStatusText } from '../FormStatus'\nimport { useMultiInputValue } from './hooks/useMultiInputValues'\nimport { makeUniqueId } from '../../shared/component-helper'\n\nexport type MultiInputMaskInput<T extends string> = {\n  /**\n   * Defines the id for the input. This id is also used to map the input value to the correct property on the objects used for `values` and `onChange` parameters.\n   */\n  id: T\n  /**\n   * Label used by the input. The label itself is hidden, but required to uphold accessibility standards for screen readers.\n   */\n  label: React.ReactNode\n  /**\n   * Each RegExp item in the array defines what the mask should be for each subsequent character in the input. The length sets the size of the input, so an array of two items would produce an input of two characters\n   */\n  mask: RegExp[]\n  /**\n   * Sets the placeholder character used for the input.\n   */\n  placeholderCharacter: string\n} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'ref'>\n\nexport type MultiInputMaskValue<T extends string> = {\n  // eslint-disable-next-line no-unused-vars\n  [K in T]: string\n}\n\nexport type MultiInputMaskProps<T extends string> = {\n  /**\n   * The label describing the group of inputs inside the components.\n   */\n  label?: React.ReactNode\n  /**\n   * Use to change the label layout direction. Defaults to `horizontal`.\n   */\n  labelDirection?: 'vertical' | 'horizontal'\n  /**\n   * Used to define the different inputs representing the inputs in the component. The id's defined here is used to map input value to correct property in `values` parameters used in `onChange`\n   */\n  inputs: MultiInputMaskInput<T>[]\n  /**\n   * Values used for the inputs inside the component. Expects an object with keys matching the id's defined in `inputs`\n   */\n  values?: MultiInputMaskValue<T>\n  /**\n   * Defines the delimiter used to separate the inputs inside the component.\n   */\n  delimiter?: string\n  /**\n   * Runs when the input value changes. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n   */\n  onChange?: (values: MultiInputMaskValue<T>) => void\n  /**\n   * Runs when the input gains focus. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n   */\n  onFocus?: (values: MultiInputMaskValue<T>) => void\n  /**\n   * Runs when the input loses focus. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n   */\n  onBlur?: (values: MultiInputMaskValue<T>) => void\n  /**\n   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n   */\n  status?: FormStatusText\n  /**\n   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n   */\n  statusState?: FormStatusState\n  /**\n   * Set it to `true` in order to stretch the input to the available space. Defaults to false.\n   */\n  stretch?: boolean\n  /**\n   * Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.\n   */\n  suffix?: React.ReactNode\n} & Omit<\n  React.HTMLProps<HTMLInputElement>,\n  'onChange' | 'onFocus' | 'onBlur' | 'ref' | 'value' | 'label'\n> &\n  SpacingProps\n\nfunction MultiInputMask<T extends string>({\n  label,\n  labelDirection = 'horizontal',\n  inputs,\n  delimiter,\n  onChange: onChangeExternal,\n  disabled,\n  status,\n  statusState,\n  values: defaultValues,\n  className,\n  stretch,\n  inputMode,\n  suffix,\n  onBlur,\n  onFocus,\n  ...props\n}: MultiInputMaskProps<T>) {\n  const [values, onChange] = useMultiInputValue({\n    inputs,\n    defaultValues,\n    callback: onChangeExternal,\n  })\n\n  const inputRefs = useRef<Array<MutableRefObject<HTMLInputElement>>>([])\n\n  const { onKeyDown } = useHandleCursorPosition(\n    inputRefs.current,\n    getKeysToHandle()\n  )\n\n  const WrapperElement = label ? 'fieldset' : 'div'\n\n  return (\n    <WrapperElement\n      className={classnames(\n        'dnb-multi-input-mask__fieldset',\n        labelDirection === 'horizontal' &&\n          'dnb-multi-input-mask__fieldset--horizontal',\n        createSpacingClasses(props)\n      )}\n    >\n      {label && (\n        <FormLabel\n          className={classnames(\n            'dnb-multi-input-mask__legend',\n            labelDirection === 'horizontal' &&\n              'dnb-multi-input-mask__legend--horizontal'\n          )}\n          element=\"legend\"\n          onClick={onLegendClick}\n          disabled={disabled}\n          vertical={labelDirection === 'vertical'}\n        >\n          {/* This <span/> wrapper is needed to make hover work in Safari Desktop */}\n          <span>{label}</span>\n        </FormLabel>\n      )}\n      <Input\n        {...props}\n        className={classnames('dnb-multi-input-mask', className)}\n        disabled={disabled}\n        status={status}\n        status_state={statusState}\n        suffix={suffix}\n        stretch={stretch}\n        input_element={inputs.map((input, index) => (\n          <MultiInputMaskInput\n            key={input.id}\n            {...input}\n            inputMode={inputMode}\n            value={values[input.id]}\n            delimiter={index !== inputs.length - 1 ? delimiter : undefined}\n            onKeyDown={onKeyDown}\n            onChange={onChange}\n            onFocus={() => {\n              if (onFocus) {\n                onFocus(values)\n              }\n            }}\n            onBlur={() => {\n              if (onBlur) {\n                onBlur(values)\n              }\n            }}\n            disabled={disabled}\n            inputRef={getInputRef}\n          />\n        ))}\n      />\n    </WrapperElement>\n  )\n\n  // Event handlers\n  function onLegendClick() {\n    if (disabled) {\n      return\n    }\n\n    const firstInput = inputRefs.current[0].current\n\n    firstInput.focus()\n    firstInput.setSelectionRange(0, 0)\n  }\n\n  // Utilities\n  function getInputRef(ref: any) {\n    const inputRef = ref?.inputRef\n\n    if (inputRef && !inputRefs.current.includes(inputRef)) {\n      inputRefs.current.push(inputRef)\n    }\n  }\n\n  function getKeysToHandle() {\n    const uniqueMasks = getUniqueMasks()\n\n    // Return the only one RegExp since all the inputs are using the same mask\n    if (uniqueMasks.size === 1) {\n      const pattern = uniqueMasks.values().next().value.replace(/\\//g, '')\n      return new RegExp(pattern)\n    }\n\n    // If there are multiple types of masks used, then map the maps to an object based on input ids\n    // So that useHandleCursorPosition can do a per character test to see if the pressed key should be handled or not\n    return inputs.reduce(\n      (keys, { id, mask }) => {\n        keys[id] = mask\n\n        return keys\n      },\n      {} as Record<T, RegExp[]>\n    )\n  }\n\n  function getUniqueMasks() {\n    const masks = new Set()\n\n    inputs.forEach((input) => {\n      input.mask.forEach((pattern) => masks.add(String(pattern)))\n    })\n\n    return masks\n  }\n}\n\ntype MultiInputMaskInputProps<T extends string> =\n  MultiInputMaskInput<T> & {\n    id: MultiInputMaskInput<T>['id']\n    label: MultiInputMaskInput<T>['label']\n    value: string\n    mask: MultiInputMaskInput<T>['mask']\n    placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    delimiter?: MultiInputMaskProps<T>['delimiter']\n    disabled: boolean\n    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void\n    onChange: (\n      id: string,\n      placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    ) => void\n    inputRef: any\n  }\n\nfunction MultiInputMaskInput<T extends string>({\n  id,\n  label,\n  value,\n  mask,\n  placeholderCharacter,\n  delimiter,\n  disabled,\n  inputRef,\n  onKeyDown,\n  onChange,\n  onBlur,\n  onFocus,\n  ...attributes\n}: MultiInputMaskInputProps<T>) {\n  const shouldHighlight = !disabled && /\\w+/.test(value)\n  const markupId = `${id}-${makeUniqueId()}`\n\n  return (\n    <>\n      <TextMask\n        id={`${markupId}__input`}\n        data-mask-id={id}\n        className={classnames(\n          'dnb-input__input',\n          'dnb-multi-input-mask__input',\n          shouldHighlight && 'dnb-multi-input-mask__input--highlight'\n        )}\n        disabled={disabled}\n        size={mask.length}\n        mask={mask}\n        value={value ?? ''}\n        placeholderChar={placeholderCharacter}\n        guide={true}\n        showMask={true}\n        keepCharPositions={false} // so we can overwrite next value, if it already exists\n        aria-labelledby={`${markupId}__label`}\n        ref={inputRef}\n        onKeyDown={onKeyDown}\n        onBlur={onBlur}\n        onFocus={({ target, ...event }) => {\n          target.focus()\n          target.select()\n\n          if (onFocus) {\n            onFocus({ target, ...event })\n          }\n        }}\n        onChange={(event) => {\n          onChange(\n            id,\n            removePlaceholder(event.target.value, placeholderCharacter)\n          )\n        }}\n        {...attributes}\n      />\n      <label\n        id={`${markupId}__label`}\n        htmlFor={`${markupId}__input`}\n        hidden\n      >\n        {label}\n      </label>\n      {delimiter && (\n        <span\n          aria-hidden\n          className={classnames(\n            'dnb-multi-input-mask__delimiter',\n            shouldHighlight && 'dnb-multi-input-mask__delimiter--highlight'\n          )}\n        >\n          {delimiter}\n        </span>\n      )}\n    </>\n  )\n\n  function removePlaceholder(value: string, placeholder: string) {\n    return value.replace(RegExp(placeholder, 'gm'), '')\n  }\n}\n\nexport default MultiInputMask\n\nMultiInputMask._formElement = true\nMultiInputMask._supportsSpacingProps = true\n"],"mappings":"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"}