@dnb/eufemia 10.10.0 → 10.12.0

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

@@ -225,7 +225,7 @@ del .dnb-code {
   border-radius: 0.25px;
   /* 
   * 60% and 65% for best result on low res screens, like on Chromebook (Acer)
-  * Else the line will dissapear!
+  * Else the line will disappear!
   */
   background-image: linear-gradient(to bottom, currentcolor 60%, transparent 65%);
   background-size: 100% 1px;

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

@@ -179,7 +179,6 @@
 fieldset.dnb-forms-field-block {
   padding: 0;
   border: none;
-  line-height: var(--font-size-basis--em);
 }
 fieldset.dnb-forms-field-block:not([class*=space__top]) {
   margin-top: 0;
@@ -448,6 +447,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   align-items: center;
   background: linear-gradient(184.55deg, rgba(204, 204, 204, 0.5) 4.63%, rgba(232, 232, 232, 0.5) 84.83%);
 }
+.dnb-payment-card__blocking__overlay svg path {
+  stroke: currentcolor;
+}
 .dnb-payment-card__blocking__center {
   padding: 1rem;
   display: flex;

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

@@ -1 +1 @@
-.dnb-forms-button-row{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]){margin:0}.dnb-form-main-heading[\:has\(\%2B\%20\.dnb-flex-stack\%20\%3E\%20\.dnb-card\,\%20\%2B\%20\.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__left]){margin-left:var(--spacing-medium)}.dnb-form-main-heading[\:has\(\%2B\%20\.dnb-flex-stack\%20\%3E\%20\.dnb-card\,\%20\%2B\%20\.dnb-card\)]:not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.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\(\%2B\%20\.dnb-flex-stack\%20\%3E\%20\.dnb-card\,\%20\%2B\%20\.dnb-card\)]:not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-form-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:9rem}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-postal-code-and-city--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-postal-code-and-city--width-large{width:var(--forms-field-width--large)}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:var(--forms-field-width--large)}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:var(--forms-field-width--medium)}.dnb-forms-field-selection--width-small .dnb-dropdown__shell{width:var(--forms-field-width--small)}.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{grid-row-gap:var(--spacing-x-small);display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap}.dnb-forms-steps-layout{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar{max-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item{min-width:336px}.dnb-forms-steps-layout__contents{flex:1;min-width:25rem}.dnb-forms-steps-layout__contents .dnb-card{--border-color:var(--color-pistachio)}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;line-height:var(--font-size-basis--em);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}.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:var(--forms-field-width--medium) auto}@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-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-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%,at 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);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__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{grid-gap:var(--spacing-x-small);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-button-row{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]){margin:0}.dnb-form-main-heading[\:has\(\%2B\%20\.dnb-flex-stack\%20\%3E\%20\.dnb-card\,\%20\%2B\%20\.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__left]){margin-left:var(--spacing-medium)}.dnb-form-main-heading[\:has\(\%2B\%20\.dnb-flex-stack\%20\%3E\%20\.dnb-card\,\%20\%2B\%20\.dnb-card\)]:not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.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\(\%2B\%20\.dnb-flex-stack\%20\%3E\%20\.dnb-card\,\%20\%2B\%20\.dnb-card\)]:not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-form-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:9rem}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-postal-code-and-city--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-postal-code-and-city--width-large{width:var(--forms-field-width--large)}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:var(--forms-field-width--large)}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:var(--forms-field-width--medium)}.dnb-forms-field-selection--width-small .dnb-dropdown__shell{width:var(--forms-field-width--small)}.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{grid-row-gap:var(--spacing-x-small);display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap}.dnb-forms-steps-layout{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar{max-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item{min-width:336px}.dnb-forms-steps-layout__contents{flex:1;min-width:25rem}.dnb-forms-steps-layout__contents .dnb-card{--border-color:var(--color-pistachio)}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}: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}.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:var(--forms-field-width--medium) auto}@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-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-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%,at 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);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{grid-gap:var(--spacing-x-small);align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:flex;flex-direction:row;gap:var(--spacing-x-small);height:100%;justify-content:center;width:100%}

package/components/accordion/Accordion.d.ts

@@ -124,9 +124,8 @@ export type AccordionProps = Omit<React.HTMLProps<HTMLElement>, 'ref'> & Spacing
 declare function Accordion({ variant, icon_size, ...restOfProps }: AccordionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Accordion {
     var defaultProps: Omit<React.HTMLProps<HTMLElement>, "ref"> & import("../space/types").SpacingElementProps & {
-        space?: import("../space/types").SpaceType | import("../space/types").SpacingElementProps; /**
-         * If set to `true` the accordion will be expanded as its initial state.
-         */
+        space?: import("../space/types").SpaceTypeAll;
+        innerSpace?: import("../space/types").SpaceTypeAll | import("../space/types").SpaceTypeMedia;
     } & {
         /**
          * A title as a string or React element. It will be used as the button text.

package/components/anchor/Anchor.d.ts

@@ -25,7 +25,8 @@ export type AnchorProps = {
 export type AnchorAllProps = AnchorProps & Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'> & SpacingProps;
 export declare function AnchorInstance(localProps: AnchorAllProps): import("react/jsx-runtime").JSX.Element;
 declare const Anchor: React.ForwardRefExoticComponent<AnchorProps & Omit<React.HTMLProps<HTMLAnchorElement>, "ref"> & import("../space/types").SpacingElementProps & {
-    space?: import("../space/types").SpaceType | import("../space/types").SpacingElementProps;
+    space?: import("../space/types").SpaceTypeAll;
+    innerSpace?: import("../space/types").SpaceTypeAll | import("../space/types").SpaceTypeMedia;
 } & React.RefAttributes<HTMLAnchorElement>>;
 export default Anchor;
 export declare function scrollToHashHandler(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>): {

package/components/anchor/style/themes/dnb-anchor-theme-sbanken.css

@@ -83,14 +83,6 @@
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon {
   margin-right: 0;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left {
-  margin-left: 1.125em;
-}
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon {
-  font-size: 1em;
-  margin-right: 0.125em;
-  margin-left: -1.125em;
-}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right {
   margin-right: 1.125em;
 }
@@ -99,6 +91,14 @@
   margin-left: 0.125em;
   margin-right: -1.125em;
 }
+:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left {
+  margin-left: 1.125em;
+}
+:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-of-type {
+  font-size: 1em;
+  margin-right: 0.125em;
+  margin-left: -1.125em;
+}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left)::before {
   -webkit-text-decoration-color: var(--sb-color-green-dark);
           text-decoration-color: var(--sb-color-green-dark);
@@ -187,14 +187,6 @@
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon {
     margin-right: 0;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-left {
-    margin-left: 1.125em;
-  }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon {
-    font-size: 1em;
-    margin-right: 0.125em;
-    margin-left: -1.125em;
-  }
   :not(.dnb-anchor--no-style).dnb-anchor--icon-right {
     margin-right: 1.125em;
   }
@@ -203,6 +195,14 @@
     margin-left: 0.125em;
     margin-right: -1.125em;
   }
+  :not(.dnb-anchor--no-style).dnb-anchor--icon-left {
+    margin-left: 1.125em;
+  }
+  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-of-type {
+    font-size: 1em;
+    margin-right: 0.125em;
+    margin-left: -1.125em;
+  }
   :not(.dnb-anchor--no-style).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left)::before {
     -webkit-text-decoration-color: var(--sb-color-green-dark);
             text-decoration-color: var(--sb-color-green-dark);

package/components/anchor/style/themes/dnb-anchor-theme-sbanken.min.css

@@ -1 +1 @@
-@charset "UTF-8";:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-underline-thickness:0.125rem;--anchor-background:transparent;--anchor-color--contrast:var(--sb-color-text);border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--sb-font-weight-bold);padding:.15625em 0;-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--inline,:where(:not(.dnb-anchor--no-style)).dnb-anchor--no-underline,:where(:not(.dnb-anchor--no-style)).dnb-anchor--was-node{--anchor-background-gutter:0.25em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background),var(--anchor-background-gutter) 0 0 0 var(--anchor-background)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{--anchor-background:var(--sb-color-green);border-radius:.5em;color:var(--sb-color-text);transition:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-left{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-left{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-right{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-right{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left{margin-left:1.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon{font-size:1em;margin-left:-1.125em;margin-right:.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right{margin-right:1.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon{font-size:1em;margin-left:.125em;margin-right:-1.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left):before{content:" ";-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-right):after{content:" ";-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-underline-thickness:0.125rem;--anchor-background:transparent;--anchor-color--contrast:var(--sb-color-text);border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--sb-font-weight-bold);padding:.15625em 0;-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}:not(.dnb-anchor--no-style).dnb-anchor--inline,:not(.dnb-anchor--no-style).dnb-anchor--no-underline,:not(.dnb-anchor--no-style).dnb-anchor--was-node{--anchor-background-gutter:0.25em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background),var(--anchor-background-gutter) 0 0 0 var(--anchor-background)}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}}:not(.dnb-anchor--no-style).dnb-anchor:active{--anchor-background:var(--sb-color-green);border-radius:.5em;color:var(--sb-color-text);transition:none}:not(.dnb-anchor--no-style).dnb-anchor.focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}:not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-left{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-left{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-right{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-right{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor--icon-left{margin-left:1.125em}:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon{font-size:1em;margin-left:-1.125em;margin-right:.125em}:not(.dnb-anchor--no-style).dnb-anchor--icon-right{margin-right:1.125em}:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon{font-size:1em;margin-left:.125em;margin-right:-1.125em}:not(.dnb-anchor--no-style).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left):before,:not(.dnb-anchor--no-style).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-right):after{content:" ";-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}}.dnb-anchor--hover{--anchor-background:var(--sb-color-green-dark)}.dnb-anchor--active,.dnb-anchor--hover{border-radius:.5em;color:var(--sb-color-text);transition:none}.dnb-anchor--active{--anchor-background:var(--sb-color-green)}.dnb-anchor--focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-blue-dark);outline:none;transition:none}.dnb-anchor--focus,.dnb-section .dnb-anchor--focus.dnb-anchor{text-decoration:none}.dnb-anchor--focus.dnb-anchor--icon-left,.dnb-anchor--focus.dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor--focus.dnb-anchor--icon-right,.dnb-anchor--focus.dnb-anchor--icon-right .dnb-icon{margin-right:0}.dnb-anchor--no-radius,.dnb-anchor--no-radius.focus-visible,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus-visible,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--inline{-webkit-text-decoration-color:currentcolor;text-decoration-color:currentcolor}
+@charset "UTF-8";:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-underline-thickness:0.125rem;--anchor-background:transparent;--anchor-color--contrast:var(--sb-color-text);border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--sb-font-weight-bold);padding:.15625em 0;-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--inline,:where(:not(.dnb-anchor--no-style)).dnb-anchor--no-underline,:where(:not(.dnb-anchor--no-style)).dnb-anchor--was-node{--anchor-background-gutter:0.25em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background),var(--anchor-background-gutter) 0 0 0 var(--anchor-background)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{--anchor-background:var(--sb-color-green);border-radius:.5em;color:var(--sb-color-text);transition:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-left{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-left{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-right{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-right{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right{margin-right:1.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon{font-size:1em;margin-left:.125em;margin-right:-1.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left{margin-left:1.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-of-type{font-size:1em;margin-left:-1.125em;margin-right:.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left):before{content:" ";-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-right):after{content:" ";-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-underline-thickness:0.125rem;--anchor-background:transparent;--anchor-color--contrast:var(--sb-color-text);border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--sb-font-weight-bold);padding:.15625em 0;-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}:not(.dnb-anchor--no-style).dnb-anchor--inline,:not(.dnb-anchor--no-style).dnb-anchor--no-underline,:not(.dnb-anchor--no-style).dnb-anchor--was-node{--anchor-background-gutter:0.25em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background),var(--anchor-background-gutter) 0 0 0 var(--anchor-background)}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}}:not(.dnb-anchor--no-style).dnb-anchor:active{--anchor-background:var(--sb-color-green);border-radius:.5em;color:var(--sb-color-text);transition:none}:not(.dnb-anchor--no-style).dnb-anchor.focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}:not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-left{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-left{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-right{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-right{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor--icon-right{margin-right:1.125em}:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon{font-size:1em;margin-left:.125em;margin-right:-1.125em}:not(.dnb-anchor--no-style).dnb-anchor--icon-left{margin-left:1.125em}:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-of-type{font-size:1em;margin-left:-1.125em;margin-right:.125em}:not(.dnb-anchor--no-style).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left):before,:not(.dnb-anchor--no-style).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-right):after{content:" ";-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}}.dnb-anchor--hover{--anchor-background:var(--sb-color-green-dark)}.dnb-anchor--active,.dnb-anchor--hover{border-radius:.5em;color:var(--sb-color-text);transition:none}.dnb-anchor--active{--anchor-background:var(--sb-color-green)}.dnb-anchor--focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-blue-dark);outline:none;transition:none}.dnb-anchor--focus,.dnb-section .dnb-anchor--focus.dnb-anchor{text-decoration:none}.dnb-anchor--focus.dnb-anchor--icon-left,.dnb-anchor--focus.dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor--focus.dnb-anchor--icon-right,.dnb-anchor--focus.dnb-anchor--icon-right .dnb-icon{margin-right:0}.dnb-anchor--no-radius,.dnb-anchor--no-radius.focus-visible,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus-visible,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--inline{-webkit-text-decoration-color:currentcolor;text-decoration-color:currentcolor}

package/components/anchor/style/themes/dnb-anchor-theme-sbanken.scss

@@ -84,23 +84,23 @@
       @include anchorFocus();
     }
 
-    &--icon-left {
-      margin-left: 1em + $anchor-icon-gutter;
+    &--icon-right {
+      margin-right: 1em + $anchor-icon-gutter;
 
       .dnb-icon {
         font-size: 1em;
-        margin-right: $anchor-icon-gutter;
-        margin-left: -1em - $anchor-icon-gutter;
+        margin-left: $anchor-icon-gutter;
+        margin-right: -1em - $anchor-icon-gutter;
       }
     }
 
-    &--icon-right {
-      margin-right: 1em + $anchor-icon-gutter;
+    &--icon-left {
+      margin-left: 1em + $anchor-icon-gutter;
 
-      .dnb-icon {
+      .dnb-icon:first-of-type {
         font-size: 1em;
-        margin-left: $anchor-icon-gutter;
-        margin-right: -1em - $anchor-icon-gutter;
+        margin-right: $anchor-icon-gutter;
+        margin-left: -1em - $anchor-icon-gutter;
       }
     }
 

package/components/avatar/Avatar.d.ts

@@ -63,7 +63,8 @@ declare const Avatar: {
     (localProps: AvatarProps & SpacingProps): import("react/jsx-runtime").JSX.Element;
     Group: {
         (localProps: import("./AvatarGroup").AvatarGroupProps & import("../space/types").SpacingElementProps & {
-            space?: import("../space/types").SpaceType | import("../space/types").SpacingElementProps;
+            space?: import("../space/types").SpaceTypeAll;
+            innerSpace?: import("../space/types").SpaceTypeAll | import("../space/types").SpaceTypeMedia;
         }): import("react/jsx-runtime").JSX.Element;
         _supportsSpacingProps: boolean;
     };

package/components/breadcrumb/BreadcrumbItem.js

@@ -8,7 +8,7 @@ import P from '../../elements/P';
 import homeIcon from '../../icons/home';
 import { useTheme, useMediaQuery } from '../../shared';
 import Context from '../../shared/Context';
-import { extendPropsWithContext } from '../../shared/component-helper';
+import { extendPropsWithContext, filterProps } from '../../shared/component-helper';
 const defaultProps = {
   text: null,
   href: null,
@@ -60,7 +60,7 @@ const BreadcrumbItem = localProps => {
     currentIcon = icon || determineSbankenIcon(variant, isSmallScreen);
   }
   const currentText = text || variant === 'home' && homeText || '';
-  const isInteractive = (href || onClick) && variant !== 'current';
+  const isInteractive = (href || onClick || props.to) && variant !== 'current';
   const style = {
     '--delay': String(itemNr)
   };
@@ -76,9 +76,9 @@ const BreadcrumbItem = localProps => {
     on_click: onClick,
     text: currentText,
     skeleton: skeleton
-  }, props)) : React.createElement("span", {
+  }, props)) : React.createElement("span", _extends({
     className: "dnb-breadcrumb__item__span"
-  }, React.createElement(IconPrimary, {
+  }, filterProps(props, key => !key.includes('-'))), React.createElement(IconPrimary, {
     icon: currentIcon,
     className: "dnb-breadcrumb__item__span__icon"
   }), React.createElement(P, {

package/components/breadcrumb/BreadcrumbItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.js","names":["React","Button","IconPrimary","P","homeIcon","useTheme","useMediaQuery","Context","extendPropsWithContext","defaultProps","text","href","icon","onClick","variant","skeleton","determineSbankenIcon","isSmallScreen","BreadcrumbItem","localProps","context","useContext","translation","Breadcrumb","homeText","_extendPropsWithConte","itemNr","props","_objectWithoutProperties","_excluded","theme","matchOnSSR","when","max","currentIcon","name","currentText","isInteractive","style","String","createElement","className","undefined","_extends","icon_position","on_click","space","_supportsSpacingProps"],"sources":["../../../../src/components/breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import React from 'react'\n\n// Components\nimport Button, { ButtonProps } from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\n\n// Elements\nimport P from '../../elements/P'\n\n// Icons\nimport homeIcon from '../../icons/home'\n\n// Shared\nimport { useTheme, useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport { extendPropsWithContext } from '../../shared/component-helper'\n\nexport type BreadcrumbItemProps = {\n  /**\n   * Text displaying the title of the item's corresponding page\n   * Default: If variant='home', default is \"Home\". Otherwise it is required.\n   */\n  text?: React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: HomeIcon / chevron_left\n   */\n  icon?: IconIcon\n\n  /**\n   * Href should be the link to the item's corresponding page.\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Set a custom click event. In this case, you should not define the prop href.\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.\n   * Default: null\n   */\n  variant?: 'home' | 'previous' | 'current'\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /** Internal */\n  itemNr?: number\n} & Omit<ButtonProps, 'variant'>\n\nconst defaultProps = {\n  text: null,\n  href: null,\n  icon: null,\n  onClick: null,\n  variant: null,\n  skeleton: null,\n}\n\nconst determineSbankenIcon: IconIcon = (\n  variant: string,\n  isSmallScreen: boolean\n) => {\n  switch (variant) {\n    case 'home':\n      return homeIcon\n    case 'single':\n    case 'collapse':\n      return 'chevron_left'\n    default:\n      return isSmallScreen ? 'chevron_left' : 'chevron_right'\n  }\n}\n\nconst BreadcrumbItem = (localProps: BreadcrumbItemProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const {\n    translation: {\n      Breadcrumb: { homeText },\n    },\n  } = context\n\n  // Extract additional props from global context\n  const {\n    text,\n    href,\n    icon,\n    onClick,\n    variant,\n    skeleton,\n    itemNr,\n    ...props\n  } = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.BreadcrumbItem\n  )\n\n  const theme = useTheme()\n  const isSmallScreen = useMediaQuery({\n    matchOnSSR: true,\n    when: { max: 'medium' },\n  })\n\n  let currentIcon =\n    icon || (variant === 'home' && homeIcon) || 'chevron_left'\n  if (theme?.name === 'sbanken') {\n    currentIcon = icon || determineSbankenIcon(variant, isSmallScreen)\n  }\n  const currentText = text || (variant === 'home' && homeText) || ''\n  const isInteractive = (href || onClick) && variant !== 'current'\n  const style = { '--delay': String(itemNr) } as React.CSSProperties\n\n  return (\n    <li\n      className=\"dnb-breadcrumb__item\"\n      aria-current={variant === 'current' ? 'page' : undefined}\n      style={style}\n    >\n      {isInteractive ? (\n        <Button\n          variant=\"tertiary\"\n          href={href}\n          icon={currentIcon}\n          icon_position=\"left\"\n          on_click={onClick}\n          text={currentText}\n          skeleton={skeleton}\n          {...props}\n        />\n      ) : (\n        <span className=\"dnb-breadcrumb__item__span\">\n          <IconPrimary\n            icon={currentIcon}\n            className=\"dnb-breadcrumb__item__span__icon\"\n          />\n          <P space=\"0\">{currentText}</P>\n        </span>\n      )}\n    </li>\n  )\n}\n\nBreadcrumbItem._supportsSpacingProps = true\n\nexport default BreadcrumbItem\n"],"mappings":"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"}
+{"version":3,"file":"BreadcrumbItem.js","names":["React","Button","IconPrimary","P","homeIcon","useTheme","useMediaQuery","Context","extendPropsWithContext","filterProps","defaultProps","text","href","icon","onClick","variant","skeleton","determineSbankenIcon","isSmallScreen","BreadcrumbItem","localProps","context","useContext","translation","Breadcrumb","homeText","_extendPropsWithConte","itemNr","props","_objectWithoutProperties","_excluded","theme","matchOnSSR","when","max","currentIcon","name","currentText","isInteractive","to","style","String","createElement","className","undefined","_extends","icon_position","on_click","key","includes","space","_supportsSpacingProps"],"sources":["../../../../src/components/breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import React from 'react'\n\n// Components\nimport Button, { ButtonProps } from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\n\n// Elements\nimport P from '../../elements/P'\n\n// Icons\nimport homeIcon from '../../icons/home'\n\n// Shared\nimport { useTheme, useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  extendPropsWithContext,\n  filterProps,\n} from '../../shared/component-helper'\n\nexport type BreadcrumbItemProps = {\n  /**\n   * Text displaying the title of the item's corresponding page\n   * Default: If variant='home', default is \"Home\". Otherwise it is required.\n   */\n  text?: React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: HomeIcon / chevron_left\n   */\n  icon?: IconIcon\n\n  /**\n   * Href should be the link to the item's corresponding page.\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Set a custom click event. In this case, you should not define the prop href.\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.\n   * Default: null\n   */\n  variant?: 'home' | 'previous' | 'current'\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /** Internal */\n  itemNr?: number\n} & Omit<ButtonProps, 'variant'>\n\nconst defaultProps = {\n  text: null,\n  href: null,\n  icon: null,\n  onClick: null,\n  variant: null,\n  skeleton: null,\n}\n\nconst determineSbankenIcon: IconIcon = (\n  variant: string,\n  isSmallScreen: boolean\n) => {\n  switch (variant) {\n    case 'home':\n      return homeIcon\n    case 'single':\n    case 'collapse':\n      return 'chevron_left'\n    default:\n      return isSmallScreen ? 'chevron_left' : 'chevron_right'\n  }\n}\n\nconst BreadcrumbItem = (localProps: BreadcrumbItemProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const {\n    translation: {\n      Breadcrumb: { homeText },\n    },\n  } = context\n\n  // Extract additional props from global context\n  const {\n    text,\n    href,\n    icon,\n    onClick,\n    variant,\n    skeleton,\n    itemNr,\n    ...props\n  } = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.BreadcrumbItem\n  )\n\n  const theme = useTheme()\n  const isSmallScreen = useMediaQuery({\n    matchOnSSR: true,\n    when: { max: 'medium' },\n  })\n\n  let currentIcon =\n    icon || (variant === 'home' && homeIcon) || 'chevron_left'\n  if (theme?.name === 'sbanken') {\n    currentIcon = icon || determineSbankenIcon(variant, isSmallScreen)\n  }\n  const currentText = text || (variant === 'home' && homeText) || ''\n  const isInteractive =\n    (href || onClick || props.to) && variant !== 'current'\n  const style = { '--delay': String(itemNr) } as React.CSSProperties\n\n  return (\n    <li\n      className=\"dnb-breadcrumb__item\"\n      aria-current={variant === 'current' ? 'page' : undefined}\n      style={style}\n    >\n      {isInteractive ? (\n        <Button\n          variant=\"tertiary\"\n          href={href}\n          icon={currentIcon}\n          icon_position=\"left\"\n          on_click={onClick}\n          text={currentText}\n          skeleton={skeleton}\n          {...props}\n        />\n      ) : (\n        <span\n          className=\"dnb-breadcrumb__item__span\"\n          // TODO: Consider deprecating passing down props to span in v11\n          {...filterProps(props, (key) => !key.includes('-'))}\n        >\n          <IconPrimary\n            icon={currentIcon}\n            className=\"dnb-breadcrumb__item__span__icon\"\n          />\n          <P space=\"0\">{currentText}</P>\n        </span>\n      )}\n    </li>\n  )\n}\n\nBreadcrumbItem._supportsSpacingProps = true\n\nexport default BreadcrumbItem\n"],"mappings":"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"}

package/components/button/Button.d.ts

@@ -38,9 +38,9 @@ export type ButtonChildren =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
-export type ButtonElement = DynamicElement<
-  HTMLButtonElement | HTMLAnchorElement | AnchorProps
->;
+export type ButtonElement =
+  | DynamicElement<HTMLButtonElement | HTMLAnchorElement | AnchorProps>
+  | React.ReactNode;
 export type ButtonOnClick = string | ((...args: any[]) => any);
 export type ButtonProps = {
   /**
@@ -159,5 +159,6 @@ export type ButtonProps = {
 > &
   SpacingProps;
 export default class Button extends React.Component<ButtonProps, any> {
+  static defaultProps: object;
   render(): JSX.Element;
 }

package/components/date-picker/style/dnb-date-picker.css

@@ -412,7 +412,6 @@ html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus {
   margin: 0;
   padding: 0;
   border: none;
-  line-height: var(--font-size-basis--em);
 }
 
 @keyframes date-picker-slide-down {

package/components/date-picker/style/dnb-date-picker.min.css

@@ -1 +1 @@
-.dnb-date-picker{--date-picker-input-height:2rem;--date-picker-day-width:2rem;--date-picker-day-horizontal-spacing:4px;align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-date-picker__inner{display:inline-flex;flex-direction:column;line-height:var(--date-picker-input-height)}.dnb-date-picker__row{display:inline-flex}.dnb-date-picker__shell{display:inline-flex;flex-direction:column;position:relative;top:0}.dnb-date-picker__input__wrapper{display:inline-flex;height:inherit;white-space:nowrap}.dnb-date-picker__container{display:block;left:-1rem;position:absolute;top:var(--date-picker-input-height);z-index:3}.dnb-date-picker--small .dnb-date-picker__container{top:1.5rem}.dnb-date-picker--medium .dnb-date-picker__container{top:2.5rem}.dnb-date-picker--large .dnb-date-picker__container{top:3rem}.dnb-date-picker--show-input .dnb-date-picker__container{left:0}.dnb-date-picker--right .dnb-date-picker__container{left:auto;right:-1rem}.dnb-date-picker--show-input.dnb-date-picker--right .dnb-date-picker__container{left:auto;right:0}.dnb-date-picker--opened .dnb-date-picker__container{z-index:100}.dnb-date-picker--opened .dnb-date-picker__container:not(.dnb-date-picker--opened .dnb-date-picker__container--no-animation){animation:date-picker-slide-down .2s ease-out 1 forwards}.dnb-date-picker--opened .dnb-date-picker__container--no-animation,html[data-visual-test] .dnb-date-picker--opened .dnb-date-picker__container{animation:date-picker-slide-down 1ms ease-out 1 forwards}.dnb-date-picker--hidden .dnb-date-picker__container{display:none}.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container:not(.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation){animation:date-picker-slide-up .15s ease-out 1 forwards}.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation,html[data-visual-test] .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container{animation:date-picker-slide-up 1ms ease-out 1 forwards}.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{background:transparent;border:none;display:inline-block;font-family:var(--font-family-monospace);margin:0;outline:none;overflow:visible;padding:0 .125rem;text-align:center;transform:translateY(0);white-space:nowrap;width:auto}@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{margin:0 -4px}}@supports (-ms-ime-align:auto){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{margin:0 -5px}}@supports (-webkit-touch-callout:none){.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin:0}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin:0 -4px}.dnb-core-style .dnb-date-picker__input:first-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type:not(:root),.dnb-date-picker__input:first-of-type:not(:root){margin-left:.8rem}.dnb-core-style .dnb-date-picker__input:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type:not(:root),.dnb-date-picker__input:last-of-type:not(:root){margin-right:2.2rem}}.dnb-core-style .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-core-style .dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small.dnb-date-picker__input--small,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small.dnb-date-picker__input--small,.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-date-picker__input--small.dnb-date-picker__input--small{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--small:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small:last-of-type:not(:root),.dnb-date-picker__input--small:last-of-type:not(:root){margin-right:2.2rem}.dnb-core-style .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-core-style .dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium.dnb-date-picker__input--medium,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium.dnb-date-picker__input--medium,.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-date-picker__input--medium.dnb-date-picker__input--medium{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--medium:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium:last-of-type:not(:root),.dnb-date-picker__input--medium:last-of-type:not(:root){margin-right:3.2rem}.dnb-core-style .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-core-style .dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large.dnb-date-picker__input--large,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large.dnb-date-picker__input--large,.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-date-picker__input--large.dnb-date-picker__input--large{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--large:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large:last-of-type:not(:root),.dnb-date-picker__input--large:last-of-type:not(:root){margin-right:4rem}.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type,.dnb-date-picker__input:first-of-type{margin-left:.8rem}.dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type,.dnb-date-picker__input:last-of-type{margin-right:2.2rem}.dnb-date-picker .dnb-input__shell{display:none}.dnb-date-picker--show-input .dnb-input__shell{display:flex}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__status--error .dnb-input__shell{box-shadow:none}.dnb-input__submit-button button:focus~.dnb-date-picker__input__wrapper{display:block}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-element,.dnb-input__submit-element>.dnb-date-picker .dnb-input__submit-element{margin-left:0}.dnb-date-picker__views{display:flex;user-select:none;-webkit-user-select:none}@media screen and (max-width:60em){.dnb-date-picker__views{flex-direction:column}}.dnb-date-picker__calendar{padding:1rem;position:relative}.dnb-date-picker__calendar:after{bottom:0;content:"";height:1px;position:absolute;width:calc(100% - 2rem)}.dnb-date-picker:not(.dnb-date-picker--show-footer) .dnb-date-picker__calendar:after{content:none}.dnb-date-picker__header{height:2.5rem;line-height:var(--line-height-basis)}.dnb-date-picker__addon,.dnb-date-picker__header{display:flex;justify-content:space-between;padding-bottom:1rem;position:relative}.dnb-date-picker__addon:after,.dnb-date-picker__header:after{bottom:0;content:"";height:1px;position:absolute;width:100%}.dnb-date-picker__addon{grid-gap:1rem;display:flex;flex-flow:row wrap;gap:1rem;justify-content:flex-start;padding:1rem}.dnb-date-picker__addon:after{left:1rem;width:calc(100% - 2rem)}.dnb-date-picker__footer{display:flex;justify-content:space-between;padding:1rem;position:relative}.dnb-date-picker__labels__day{padding-bottom:.5rem;padding-top:1.5rem}.dnb-date-picker__days,.dnb-date-picker__labels{display:flex;flex-wrap:wrap;list-style:none;margin:0;max-width:18rem;min-width:18rem;padding:0}.dnb-date-picker table{margin:0;position:relative;z-index:1}.dnb-date-picker table.dnb-no-focus:focus{outline:none}html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-date-picker__day,.dnb-date-picker__labels__day{display:flex;flex-basis:14.2857142857%;justify-content:center}.dnb-date-picker__day{margin:var(--date-picker-day-horizontal-spacing) 0;position:relative}.dnb-date-picker__day,.dnb-date-picker__day .dnb-button{height:var(--date-picker-day-width);width:var(--date-picker-day-width)}.dnb-date-picker__day .dnb-button{box-shadow:none;position:absolute;top:0;white-space:nowrap}.dnb-date-picker__day .dnb-button__bounding{border-radius:0;transform:scale(1.28)}.dnb-date-picker__day .dnb-button__text{transform:translateY(0)}.dnb-date-picker__day--selectable:hover{z-index:2}.dnb-date-picker__day--end-date .dnb-button,.dnb-date-picker__day--start-date .dnb-button{z-index:1}.dnb-date-picker__day--end-date,.dnb-date-picker__day--start-date{position:relative}.dnb-date-picker__day--end-date:after,.dnb-date-picker__day--start-date:after{content:"";height:100%;position:absolute;top:0;width:calc(var(--date-picker-day-width)/2)}.dnb-date-picker__day--start-date:after{left:auto;right:0}.dnb-date-picker__day--end-date:after{left:0;right:auto}.dnb-date-picker__day--start-date.dnb-date-picker__day--end-date:after{content:none}.dnb-date-picker__triangle{margin:0 1.5rem;overflow:hidden;pointer-events:none;right:auto;top:calc(2px - var(--date-picker-input-height)/2)}.dnb-date-picker__triangle,.dnb-date-picker__triangle:before{height:calc(var(--date-picker-input-height)/2);left:0;position:absolute;width:calc(var(--date-picker-input-height)/2)}.dnb-date-picker__triangle:before{background-color:var(--color-white);border:1px solid var(--color-black-border);content:"";top:0;transform:translateY(60%) rotate(45deg)}.dnb-date-picker--right .dnb-date-picker__triangle{left:auto;right:0}.dnb-date-picker .rtl{direction:rtl}.dnb-date-picker .rtl .dnb-date-picker__next:before,.dnb-date-picker .rtl .dnb-date-picker__prev:before{transform:scaleX(-1)}.dnb-date-picker__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-date-picker--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-date-picker>.dnb-form-label{line-height:var(--line-height-basis)}@media screen and (max-width:40em){.dnb-date-picker{flex-wrap:wrap}.dnb-date-picker>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-date-picker--stretch{display:flex;flex-grow:1}.dnb-date-picker--stretch .dnb-date-picker__inner,.dnb-date-picker--stretch .dnb-date-picker__shell,.dnb-form-row--horizontal .dnb-date-picker--stretch{width:100%}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]{align-items:flex-start}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-button .dnb-button{border-radius:50%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-date-picker{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker>.dnb-form-label{margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker__helper{display:none}}.dnb-date-picker .dnb-input__submit-button .dnb-button.dnb-skeleton{visibility:hidden}.dnb-core-style .dnb-date-picker__fieldset,.dnb-date-picker__fieldset{border:none;line-height:var(--font-size-basis--em);margin:0;padding:0}@keyframes date-picker-slide-down{0%{opacity:0}to{opacity:1}}@keyframes date-picker-slide-up{0%{opacity:1}to{opacity:0}}
+.dnb-date-picker{--date-picker-input-height:2rem;--date-picker-day-width:2rem;--date-picker-day-horizontal-spacing:4px;align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-date-picker__inner{display:inline-flex;flex-direction:column;line-height:var(--date-picker-input-height)}.dnb-date-picker__row{display:inline-flex}.dnb-date-picker__shell{display:inline-flex;flex-direction:column;position:relative;top:0}.dnb-date-picker__input__wrapper{display:inline-flex;height:inherit;white-space:nowrap}.dnb-date-picker__container{display:block;left:-1rem;position:absolute;top:var(--date-picker-input-height);z-index:3}.dnb-date-picker--small .dnb-date-picker__container{top:1.5rem}.dnb-date-picker--medium .dnb-date-picker__container{top:2.5rem}.dnb-date-picker--large .dnb-date-picker__container{top:3rem}.dnb-date-picker--show-input .dnb-date-picker__container{left:0}.dnb-date-picker--right .dnb-date-picker__container{left:auto;right:-1rem}.dnb-date-picker--show-input.dnb-date-picker--right .dnb-date-picker__container{left:auto;right:0}.dnb-date-picker--opened .dnb-date-picker__container{z-index:100}.dnb-date-picker--opened .dnb-date-picker__container:not(.dnb-date-picker--opened .dnb-date-picker__container--no-animation){animation:date-picker-slide-down .2s ease-out 1 forwards}.dnb-date-picker--opened .dnb-date-picker__container--no-animation,html[data-visual-test] .dnb-date-picker--opened .dnb-date-picker__container{animation:date-picker-slide-down 1ms ease-out 1 forwards}.dnb-date-picker--hidden .dnb-date-picker__container{display:none}.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container:not(.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation){animation:date-picker-slide-up .15s ease-out 1 forwards}.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation,html[data-visual-test] .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container{animation:date-picker-slide-up 1ms ease-out 1 forwards}.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{background:transparent;border:none;display:inline-block;font-family:var(--font-family-monospace);margin:0;outline:none;overflow:visible;padding:0 .125rem;text-align:center;transform:translateY(0);white-space:nowrap;width:auto}@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{margin:0 -4px}}@supports (-ms-ime-align:auto){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{margin:0 -5px}}@supports (-webkit-touch-callout:none){.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin:0}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin:0 -4px}.dnb-core-style .dnb-date-picker__input:first-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type:not(:root),.dnb-date-picker__input:first-of-type:not(:root){margin-left:.8rem}.dnb-core-style .dnb-date-picker__input:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type:not(:root),.dnb-date-picker__input:last-of-type:not(:root){margin-right:2.2rem}}.dnb-core-style .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-core-style .dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small.dnb-date-picker__input--small,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small.dnb-date-picker__input--small,.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-date-picker__input--small.dnb-date-picker__input--small{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--small:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small:last-of-type:not(:root),.dnb-date-picker__input--small:last-of-type:not(:root){margin-right:2.2rem}.dnb-core-style .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-core-style .dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium.dnb-date-picker__input--medium,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium.dnb-date-picker__input--medium,.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-date-picker__input--medium.dnb-date-picker__input--medium{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--medium:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium:last-of-type:not(:root),.dnb-date-picker__input--medium:last-of-type:not(:root){margin-right:3.2rem}.dnb-core-style .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-core-style .dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large.dnb-date-picker__input--large,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large.dnb-date-picker__input--large,.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-date-picker__input--large.dnb-date-picker__input--large{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--large:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large:last-of-type:not(:root),.dnb-date-picker__input--large:last-of-type:not(:root){margin-right:4rem}.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type,.dnb-date-picker__input:first-of-type{margin-left:.8rem}.dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type,.dnb-date-picker__input:last-of-type{margin-right:2.2rem}.dnb-date-picker .dnb-input__shell{display:none}.dnb-date-picker--show-input .dnb-input__shell{display:flex}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__status--error .dnb-input__shell{box-shadow:none}.dnb-input__submit-button button:focus~.dnb-date-picker__input__wrapper{display:block}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-element,.dnb-input__submit-element>.dnb-date-picker .dnb-input__submit-element{margin-left:0}.dnb-date-picker__views{display:flex;user-select:none;-webkit-user-select:none}@media screen and (max-width:60em){.dnb-date-picker__views{flex-direction:column}}.dnb-date-picker__calendar{padding:1rem;position:relative}.dnb-date-picker__calendar:after{bottom:0;content:"";height:1px;position:absolute;width:calc(100% - 2rem)}.dnb-date-picker:not(.dnb-date-picker--show-footer) .dnb-date-picker__calendar:after{content:none}.dnb-date-picker__header{height:2.5rem;line-height:var(--line-height-basis)}.dnb-date-picker__addon,.dnb-date-picker__header{display:flex;justify-content:space-between;padding-bottom:1rem;position:relative}.dnb-date-picker__addon:after,.dnb-date-picker__header:after{bottom:0;content:"";height:1px;position:absolute;width:100%}.dnb-date-picker__addon{grid-gap:1rem;display:flex;flex-flow:row wrap;gap:1rem;justify-content:flex-start;padding:1rem}.dnb-date-picker__addon:after{left:1rem;width:calc(100% - 2rem)}.dnb-date-picker__footer{display:flex;justify-content:space-between;padding:1rem;position:relative}.dnb-date-picker__labels__day{padding-bottom:.5rem;padding-top:1.5rem}.dnb-date-picker__days,.dnb-date-picker__labels{display:flex;flex-wrap:wrap;list-style:none;margin:0;max-width:18rem;min-width:18rem;padding:0}.dnb-date-picker table{margin:0;position:relative;z-index:1}.dnb-date-picker table.dnb-no-focus:focus{outline:none}html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-date-picker__day,.dnb-date-picker__labels__day{display:flex;flex-basis:14.2857142857%;justify-content:center}.dnb-date-picker__day{margin:var(--date-picker-day-horizontal-spacing) 0;position:relative}.dnb-date-picker__day,.dnb-date-picker__day .dnb-button{height:var(--date-picker-day-width);width:var(--date-picker-day-width)}.dnb-date-picker__day .dnb-button{box-shadow:none;position:absolute;top:0;white-space:nowrap}.dnb-date-picker__day .dnb-button__bounding{border-radius:0;transform:scale(1.28)}.dnb-date-picker__day .dnb-button__text{transform:translateY(0)}.dnb-date-picker__day--selectable:hover{z-index:2}.dnb-date-picker__day--end-date .dnb-button,.dnb-date-picker__day--start-date .dnb-button{z-index:1}.dnb-date-picker__day--end-date,.dnb-date-picker__day--start-date{position:relative}.dnb-date-picker__day--end-date:after,.dnb-date-picker__day--start-date:after{content:"";height:100%;position:absolute;top:0;width:calc(var(--date-picker-day-width)/2)}.dnb-date-picker__day--start-date:after{left:auto;right:0}.dnb-date-picker__day--end-date:after{left:0;right:auto}.dnb-date-picker__day--start-date.dnb-date-picker__day--end-date:after{content:none}.dnb-date-picker__triangle{margin:0 1.5rem;overflow:hidden;pointer-events:none;right:auto;top:calc(2px - var(--date-picker-input-height)/2)}.dnb-date-picker__triangle,.dnb-date-picker__triangle:before{height:calc(var(--date-picker-input-height)/2);left:0;position:absolute;width:calc(var(--date-picker-input-height)/2)}.dnb-date-picker__triangle:before{background-color:var(--color-white);border:1px solid var(--color-black-border);content:"";top:0;transform:translateY(60%) rotate(45deg)}.dnb-date-picker--right .dnb-date-picker__triangle{left:auto;right:0}.dnb-date-picker .rtl{direction:rtl}.dnb-date-picker .rtl .dnb-date-picker__next:before,.dnb-date-picker .rtl .dnb-date-picker__prev:before{transform:scaleX(-1)}.dnb-date-picker__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-date-picker--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-date-picker>.dnb-form-label{line-height:var(--line-height-basis)}@media screen and (max-width:40em){.dnb-date-picker{flex-wrap:wrap}.dnb-date-picker>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-date-picker--stretch{display:flex;flex-grow:1}.dnb-date-picker--stretch .dnb-date-picker__inner,.dnb-date-picker--stretch .dnb-date-picker__shell,.dnb-form-row--horizontal .dnb-date-picker--stretch{width:100%}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]{align-items:flex-start}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-button .dnb-button{border-radius:50%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-date-picker{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker>.dnb-form-label{margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker__helper{display:none}}.dnb-date-picker .dnb-input__submit-button .dnb-button.dnb-skeleton{visibility:hidden}.dnb-core-style .dnb-date-picker__fieldset,.dnb-date-picker__fieldset{border:none;margin:0;padding:0}@keyframes date-picker-slide-down{0%{opacity:0}to{opacity:1}}@keyframes date-picker-slide-up{0%{opacity:1}to{opacity:0}}

package/components/dialog/parts/DialogBody.js

@@ -12,7 +12,7 @@ export default function DialogBody(_ref) {
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(ModalInner, _extends({}, props, {
-    style_type: styleType,
+    backgroundColor: styleType,
     className: classnames('dnb-dialog__body', className)
   }));
 }

package/components/dialog/parts/DialogBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogBody.js","names":["React","classnames","ModalInner","DialogBody","_ref","className","styleType","ref","props","_objectWithoutProperties","_excluded","createElement","_extends","style_type"],"sources":["../../../../../src/components/dialog/parts/DialogBody.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ModalInner, { ModalInnerProps } from '../../modal/parts/ModalInner'\nimport type { SectionStyleTypes } from '../../Section'\n\ninterface DialogBodyProps extends ModalInnerProps {\n  /**\n   * Give the inner content wrapper a class name (maps to `dnb-dialog__body`).\n   */\n  className?: string\n\n  /**\n   * Color/Style of the dialog body\n   */\n  styleType?: SectionStyleTypes\n}\n\nexport default function DialogBody({\n  className,\n  styleType,\n  ref, //eslint-disable-line\n  ...props\n}: DialogBodyProps & React.HTMLProps<HTMLElement>) {\n  return (\n    <ModalInner\n      {...props}\n      style_type={styleType}\n      className={classnames('dnb-dialog__body', className)}\n    />\n  )\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAA2B,8BAA8B;AAe1E,eAAe,SAASC,UAAUA,CAAAC,IAAA,EAKiB;EAAA,IALhB;MACjCC,SAAS;MACTC,SAAS;MACTC;IAE8C,CAAC,GAAAH,IAAA;IAD5CI,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAER,OACEV,KAAA,CAAAW,aAAA,CAACT,UAAU,EAAAU,QAAA,KACLJ,KAAK;IACTK,UAAU,EAAEP,SAAU;IACtBD,SAAS,EAAEJ,UAAU,CAAC,kBAAkB,EAAEI,SAAS;EAAE,EACtD,CAAC;AAEN"}
+{"version":3,"file":"DialogBody.js","names":["React","classnames","ModalInner","DialogBody","_ref","className","styleType","ref","props","_objectWithoutProperties","_excluded","createElement","_extends","backgroundColor"],"sources":["../../../../../src/components/dialog/parts/DialogBody.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ModalInner, { ModalInnerProps } from '../../modal/parts/ModalInner'\nimport type { SectionStyleTypes } from '../../Section'\n\ninterface DialogBodyProps extends ModalInnerProps {\n  /**\n   * Give the inner content wrapper a class name (maps to `dnb-dialog__body`).\n   */\n  className?: string\n\n  /**\n   * Color/Style of the dialog body\n   */\n  styleType?: SectionStyleTypes\n}\n\nexport default function DialogBody({\n  className,\n  styleType,\n  ref, //eslint-disable-line\n  ...props\n}: DialogBodyProps & React.HTMLProps<HTMLElement>) {\n  return (\n    <ModalInner\n      {...props}\n      backgroundColor={styleType}\n      className={classnames('dnb-dialog__body', className)}\n    />\n  )\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAA2B,8BAA8B;AAe1E,eAAe,SAASC,UAAUA,CAAAC,IAAA,EAKiB;EAAA,IALhB;MACjCC,SAAS;MACTC,SAAS;MACTC;IAE8C,CAAC,GAAAH,IAAA;IAD5CI,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAER,OACEV,KAAA,CAAAW,aAAA,CAACT,UAAU,EAAAU,QAAA,KACLJ,KAAK;IACTK,eAAe,EAAEP,SAAU;IAC3BD,SAAS,EAAEJ,UAAU,CAAC,kBAAkB,EAAEI,SAAS;EAAE,EACtD,CAAC;AAEN"}

package/components/drawer/parts/DrawerBody.js

@@ -12,7 +12,7 @@ export default function DrawerBody(_ref) {
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(ModalInner, _extends({}, props, {
-    style_type: styleType,
+    backgroundColor: styleType,
     className: classnames('dnb-drawer__body', className)
   }));
 }

package/components/drawer/parts/DrawerBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerBody.js","names":["React","classnames","ModalInner","DrawerBody","_ref","className","styleType","ref","props","_objectWithoutProperties","_excluded","createElement","_extends","style_type"],"sources":["../../../../../src/components/drawer/parts/DrawerBody.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ModalInner, { ModalInnerProps } from '../../modal/parts/ModalInner'\nimport type { SectionStyleTypes } from '../../Section'\n\ninterface DrawerBodyProps extends ModalInnerProps {\n  /**\n   * Give the inner content wrapper a class name (maps to `dnb-drawer__body`).\n   */\n  className?: string\n\n  /**\n   * Color/Style of the drawer body\n   */\n  styleType?: SectionStyleTypes\n}\n\nexport default function DrawerBody({\n  className,\n  styleType,\n  ref, //eslint-disable-line\n  ...props\n}: DrawerBodyProps & React.HTMLProps<HTMLElement>) {\n  return (\n    <ModalInner\n      {...props}\n      style_type={styleType}\n      className={classnames('dnb-drawer__body', className)}\n    />\n  )\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAA2B,8BAA8B;AAe1E,eAAe,SAASC,UAAUA,CAAAC,IAAA,EAKiB;EAAA,IALhB;MACjCC,SAAS;MACTC,SAAS;MACTC;IAE8C,CAAC,GAAAH,IAAA;IAD5CI,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAER,OACEV,KAAA,CAAAW,aAAA,CAACT,UAAU,EAAAU,QAAA,KACLJ,KAAK;IACTK,UAAU,EAAEP,SAAU;IACtBD,SAAS,EAAEJ,UAAU,CAAC,kBAAkB,EAAEI,SAAS;EAAE,EACtD,CAAC;AAEN"}
+{"version":3,"file":"DrawerBody.js","names":["React","classnames","ModalInner","DrawerBody","_ref","className","styleType","ref","props","_objectWithoutProperties","_excluded","createElement","_extends","backgroundColor"],"sources":["../../../../../src/components/drawer/parts/DrawerBody.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ModalInner, { ModalInnerProps } from '../../modal/parts/ModalInner'\nimport type { SectionStyleTypes } from '../../Section'\n\ninterface DrawerBodyProps extends ModalInnerProps {\n  /**\n   * Give the inner content wrapper a class name (maps to `dnb-drawer__body`).\n   */\n  className?: string\n\n  /**\n   * Color/Style of the drawer body\n   */\n  styleType?: SectionStyleTypes\n}\n\nexport default function DrawerBody({\n  className,\n  styleType,\n  ref, //eslint-disable-line\n  ...props\n}: DrawerBodyProps & React.HTMLProps<HTMLElement>) {\n  return (\n    <ModalInner\n      {...props}\n      backgroundColor={styleType}\n      className={classnames('dnb-drawer__body', className)}\n    />\n  )\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAA2B,8BAA8B;AAe1E,eAAe,SAASC,UAAUA,CAAAC,IAAA,EAKiB;EAAA,IALhB;MACjCC,SAAS;MACTC,SAAS;MACTC;IAE8C,CAAC,GAAAH,IAAA;IAD5CI,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAER,OACEV,KAAA,CAAAW,aAAA,CAACT,UAAU,EAAAU,QAAA,KACLJ,KAAK;IACTK,eAAe,EAAEP,SAAU;IAC3BD,SAAS,EAAEJ,UAAU,CAAC,kBAAkB,EAAEI,SAAS;EAAE,EACtD,CAAC;AAEN"}

package/components/dropdown/style/dnb-dropdown.css

@@ -13,8 +13,14 @@
   --dropdown-height--large: 3rem;
   --dropdown-padding-horizontal: 1rem;
   --dropdown-focus-border-width: 0.125rem;
+  --dropdown-error-border-width: 0.125rem;
   --dropdown-text-padding: 0.5rem;
+  --dropdown-button-padding: 0 1rem;
   --dropdown-border-radius: 0.25rem;
+  --dropdown-foreground-color-primary: var(--color-black-55);
+  --dropdown-foreground-color-error: var(--color-fire-red);
+  --dropdown-background-color-disabled: var(--color-black-3);
+  --dropdown-background-color-error-active: var(--color-fire-red-8);
   display: inline-flex;
   align-items: center;
   font-size: var(--font-size-small);
@@ -60,7 +66,7 @@
   width: 100%;
 }
 .dnb-dropdown__trigger.dnb-button {
-  padding: 0 1rem;
+  padding: var(--dropdown-button-padding);
   border-radius: var(--dropdown-border-radius);
 }
 .dnb-dropdown--is-popup .dnb-dropdown__trigger.dnb-button {
@@ -86,6 +92,38 @@
   white-space: nowrap;
   text-overflow: inherit;
 }
+.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger {
+  --border-color: var(--dropdown-foreground-color-error);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) {
+  color: var(--dropdown-foreground-color-error);
+  --border-color: var(--dropdown-foreground-color-error);
+  --border-width: var(--dropdown-error-border-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) .dnb-dropdown__icon .dnb-icon {
+  color: var(--dropdown-foreground-color-error);
+}
+.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active[disabled], html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active:not([disabled]) {
+  color: var(--dropdown-foreground-color-error);
+  background-color: var(--dropdown-background-color-error-active);
+}
+.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger, .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__icon {
+  color: var(--dropdown-foreground-color-error);
+}
+.dnb-dropdown > .dnb-form-status {
+  transform: translateY(-0.4375rem);
+}
 .dnb-dropdown--icon-position-left .dnb-dropdown__text {
   order: 2;
   padding-right: 0;

package/components/dropdown/style/dnb-dropdown.min.css

@@ -1 +1 @@
-.dnb-dropdown{--dropdown-width:16rem;--dropdown-height:2rem;--dropdown-height--small:1.5rem;--dropdown-height--medium:2.5rem;--dropdown-height--large:3rem;--dropdown-padding-horizontal:1rem;--dropdown-focus-border-width:0.125rem;--dropdown-text-padding:0.5rem;--dropdown-border-radius:0.25rem;align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--dropdown-height)}.dnb-dropdown__inner{color:inherit;display:inline-flex;flex-direction:column;margin:0;padding:0;width:auto}.dnb-dropdown__shell{color:inherit;height:var(--dropdown-height);margin:0;padding:0;position:relative;width:var(--dropdown-width)}.dnb-dropdown__row{display:inline-flex}.dnb-dropdown--large .dnb-drawer-list__triangle{margin-left:calc(var(--dropdown-padding-horizontal) - .25rem)}.dnb-dropdown--icon-position-left.dnb-dropdown--large .dnb-drawer-list__triangle{margin-left:calc(var(--dropdown-padding-horizontal) + .25rem)}.dnb-dropdown__icon{display:inline-flex;justify-content:center;order:2;pointer-events:none;position:relative}.dnb-dropdown__trigger{position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:1}.dnb-dropdown__trigger.dnb-button{border-radius:var(--dropdown-border-radius);padding:0 1rem}.dnb-dropdown--is-popup .dnb-dropdown__trigger.dnb-button{border-radius:50%;padding:0}.dnb-dropdown__text{color:inherit;display:inline-block;font-size:var(--font-size-basis);line-height:inherit;order:1;overflow:hidden;position:relative;text-align:left;text-overflow:ellipsis;width:100%;z-index:4}.dnb-dropdown__text__inner{display:inherit;overflow:hidden;text-overflow:inherit;white-space:nowrap}.dnb-dropdown--icon-position-left .dnb-dropdown__text{order:2;padding-left:var(--dropdown-text-padding);padding-right:0}.dnb-dropdown--icon-position-left .dnb-dropdown__icon{order:1}.dnb-dropdown--icon-position-right .dnb-dropdown__text{padding-right:var(--dropdown-text-padding)}.dnb-dropdown--independent-width .dnb-dropdown__shell{width:auto}@media screen and (max-width:40em){.dnb-dropdown--action-menu .dnb-dropdown__trigger.dnb-button{border-radius:50%;padding-left:.5rem;padding-right:.5rem}}@media screen and (min-width:40em){.dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text{padding:0 .5rem}}@media screen and (max-width:40em){.dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text{padding:0;width:0}}.dnb-dropdown--icon-position-left .dnb-button--tertiary~.dnb-drawer-list__root--portal{left:-.5rem}.dnb-dropdown--icon-position-right .dnb-button--tertiary~.dnb-drawer-list__root--portal{left:.5rem}.dnb-dropdown .dnb-button--tertiary.dnb-button--active{box-shadow:none}.dnb-dropdown .dnb-button--tertiary .dnb-button__text{margin:0 .5rem}.dnb-dropdown .dnb-button--tertiary .dnb-button__text:after{bottom:0}.dnb-dropdown--icon-position-left .dnb-button--tertiary .dnb-dropdown__text,.dnb-dropdown--icon-position-right .dnb-button--tertiary .dnb-dropdown__text{padding:0}.dnb-dropdown .dnb-button--tertiary:focus:before{left:0!important;right:0!important}.dnb-dropdown--default.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--is-popup .dnb-dropdown__trigger{height:var(--dropdown-height);padding:0;width:var(--dropdown-height)}.dnb-dropdown--is-popup .dnb-dropdown__icon{width:100%}.dnb-dropdown--is-popup.dnb-dropdown--scroll .dnb-dropdown__options{min-height:1rem}.dnb-dropdown--is-popup .dnb-drawer-list__root{width:var(--dropdown-width)}.dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__trigger{width:var(--dropdown-height--small)}.dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__trigger{width:var(--dropdown-height--medium)}.dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__trigger{width:var(--dropdown-height--large)}.dnb-dropdown--small .dnb-dropdown__shell,.dnb-dropdown--small .dnb-dropdown__trigger{height:var(--dropdown-height--small)}.dnb-dropdown--small,.dnb-dropdown--small .dnb-dropdown__trigger.dnb-button{line-height:var(--dropdown-height--small)}.dnb-dropdown--medium .dnb-dropdown__shell,.dnb-dropdown--medium .dnb-dropdown__trigger{height:var(--dropdown-height--medium)}.dnb-dropdown--medium,.dnb-dropdown--medium .dnb-dropdown__trigger.dnb-button{line-height:var(--dropdown-height--medium)}.dnb-dropdown--large .dnb-dropdown__shell,.dnb-dropdown--large .dnb-dropdown__trigger{height:var(--dropdown-height--large)}.dnb-dropdown--large,.dnb-dropdown--large .dnb-dropdown__trigger.dnb-button{line-height:var(--dropdown-height--large)}.dnb-dropdown--large .dnb-dropdown__trigger.dnb-button .dnb-dropdown__text,.dnb-dropdown>.dnb-form-label{line-height:var(--line-height-basis)}.dnb-dropdown>.dnb-form-label{margin-right:1rem}@media screen and (max-width:40em){.dnb-dropdown{flex-wrap:wrap}.dnb-dropdown>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-dropdown--stretch{display:flex;flex-grow:1}.dnb-dropdown--stretch .dnb-dropdown__inner{flex-grow:1}.dnb-dropdown--stretch .dnb-dropdown__inner,.dnb-dropdown--stretch .dnb-dropdown__row,.dnb-dropdown--stretch .dnb-dropdown__shell{width:100%}.dnb-dropdown--stretch .dnb-form-label+.dnb-dropdown__inner{width:auto}.dnb-dropdown--vertical.dnb-dropdown--stretch .dnb-dropdown__inner,.dnb-form-row--horizontal .dnb-dropdown--stretch{width:100%}label+.dnb-dropdown[class*=__form-status]{vertical-align:top}label+.dnb-dropdown[class*=__form-status] .dnb-dropdown__shell{top:-.375rem}.dnb-dropdown__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-dropdown--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-dropdown:not(.dnb-dropdown--vertical)[class*=__status]{align-items:flex-start}.dnb-dropdown:not(.dnb-dropdown--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-responsive-component .dnb-dropdown{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-dropdown>.dnb-form-label{margin-bottom:.5rem}.dnb-responsive-component .dnb-dropdown__helper{display:none}}
+.dnb-dropdown{--dropdown-width:16rem;--dropdown-height:2rem;--dropdown-height--small:1.5rem;--dropdown-height--medium:2.5rem;--dropdown-height--large:3rem;--dropdown-padding-horizontal:1rem;--dropdown-focus-border-width:0.125rem;--dropdown-error-border-width:0.125rem;--dropdown-text-padding:0.5rem;--dropdown-button-padding:0 1rem;--dropdown-border-radius:0.25rem;--dropdown-foreground-color-primary:var(--color-black-55);--dropdown-foreground-color-error:var(--color-fire-red);--dropdown-background-color-disabled:var(--color-black-3);--dropdown-background-color-error-active:var(--color-fire-red-8);align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--dropdown-height)}.dnb-dropdown__inner{color:inherit;display:inline-flex;flex-direction:column;margin:0;padding:0;width:auto}.dnb-dropdown__shell{color:inherit;height:var(--dropdown-height);margin:0;padding:0;position:relative;width:var(--dropdown-width)}.dnb-dropdown__row{display:inline-flex}.dnb-dropdown--large .dnb-drawer-list__triangle{margin-left:calc(var(--dropdown-padding-horizontal) - .25rem)}.dnb-dropdown--icon-position-left.dnb-dropdown--large .dnb-drawer-list__triangle{margin-left:calc(var(--dropdown-padding-horizontal) + .25rem)}.dnb-dropdown__icon{display:inline-flex;justify-content:center;order:2;pointer-events:none;position:relative}.dnb-dropdown__trigger{position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:1}.dnb-dropdown__trigger.dnb-button{border-radius:var(--dropdown-border-radius);padding:var(--dropdown-button-padding)}.dnb-dropdown--is-popup .dnb-dropdown__trigger.dnb-button{border-radius:50%;padding:0}.dnb-dropdown__text{color:inherit;display:inline-block;font-size:var(--font-size-basis);line-height:inherit;order:1;overflow:hidden;position:relative;text-align:left;text-overflow:ellipsis;width:100%;z-index:4}.dnb-dropdown__text__inner{display:inherit;overflow:hidden;text-overflow:inherit;white-space:nowrap}.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger{--border-color:var(--dropdown-foreground-color-error);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]){--border-color:var(--dropdown-foreground-color-error);--border-width:var(--dropdown-error-border-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--dropdown-foreground-color-error)}html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) .dnb-dropdown__icon .dnb-icon{color:var(--dropdown-foreground-color-error)}.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active[disabled],html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active[disabled]{cursor:not-allowed}.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active:not([disabled]){background-color:var(--dropdown-background-color-error-active);color:var(--dropdown-foreground-color-error)}.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__icon,.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger{color:var(--dropdown-foreground-color-error)}.dnb-dropdown>.dnb-form-status{transform:translateY(-.4375rem)}.dnb-dropdown--icon-position-left .dnb-dropdown__text{order:2;padding-left:var(--dropdown-text-padding);padding-right:0}.dnb-dropdown--icon-position-left .dnb-dropdown__icon{order:1}.dnb-dropdown--icon-position-right .dnb-dropdown__text{padding-right:var(--dropdown-text-padding)}.dnb-dropdown--independent-width .dnb-dropdown__shell{width:auto}@media screen and (max-width:40em){.dnb-dropdown--action-menu .dnb-dropdown__trigger.dnb-button{border-radius:50%;padding-left:.5rem;padding-right:.5rem}}@media screen and (min-width:40em){.dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text{padding:0 .5rem}}@media screen and (max-width:40em){.dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text{padding:0;width:0}}.dnb-dropdown--icon-position-left .dnb-button--tertiary~.dnb-drawer-list__root--portal{left:-.5rem}.dnb-dropdown--icon-position-right .dnb-button--tertiary~.dnb-drawer-list__root--portal{left:.5rem}.dnb-dropdown .dnb-button--tertiary.dnb-button--active{box-shadow:none}.dnb-dropdown .dnb-button--tertiary .dnb-button__text{margin:0 .5rem}.dnb-dropdown .dnb-button--tertiary .dnb-button__text:after{bottom:0}.dnb-dropdown--icon-position-left .dnb-button--tertiary .dnb-dropdown__text,.dnb-dropdown--icon-position-right .dnb-button--tertiary .dnb-dropdown__text{padding:0}.dnb-dropdown .dnb-button--tertiary:focus:before{left:0!important;right:0!important}.dnb-dropdown--default.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--is-popup .dnb-dropdown__trigger{height:var(--dropdown-height);padding:0;width:var(--dropdown-height)}.dnb-dropdown--is-popup .dnb-dropdown__icon{width:100%}.dnb-dropdown--is-popup.dnb-dropdown--scroll .dnb-dropdown__options{min-height:1rem}.dnb-dropdown--is-popup .dnb-drawer-list__root{width:var(--dropdown-width)}.dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__trigger{width:var(--dropdown-height--small)}.dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__trigger{width:var(--dropdown-height--medium)}.dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__trigger{width:var(--dropdown-height--large)}.dnb-dropdown--small .dnb-dropdown__shell,.dnb-dropdown--small .dnb-dropdown__trigger{height:var(--dropdown-height--small)}.dnb-dropdown--small,.dnb-dropdown--small .dnb-dropdown__trigger.dnb-button{line-height:var(--dropdown-height--small)}.dnb-dropdown--medium .dnb-dropdown__shell,.dnb-dropdown--medium .dnb-dropdown__trigger{height:var(--dropdown-height--medium)}.dnb-dropdown--medium,.dnb-dropdown--medium .dnb-dropdown__trigger.dnb-button{line-height:var(--dropdown-height--medium)}.dnb-dropdown--large .dnb-dropdown__shell,.dnb-dropdown--large .dnb-dropdown__trigger{height:var(--dropdown-height--large)}.dnb-dropdown--large,.dnb-dropdown--large .dnb-dropdown__trigger.dnb-button{line-height:var(--dropdown-height--large)}.dnb-dropdown--large .dnb-dropdown__trigger.dnb-button .dnb-dropdown__text,.dnb-dropdown>.dnb-form-label{line-height:var(--line-height-basis)}.dnb-dropdown>.dnb-form-label{margin-right:1rem}@media screen and (max-width:40em){.dnb-dropdown{flex-wrap:wrap}.dnb-dropdown>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-dropdown--stretch{display:flex;flex-grow:1}.dnb-dropdown--stretch .dnb-dropdown__inner{flex-grow:1}.dnb-dropdown--stretch .dnb-dropdown__inner,.dnb-dropdown--stretch .dnb-dropdown__row,.dnb-dropdown--stretch .dnb-dropdown__shell{width:100%}.dnb-dropdown--stretch .dnb-form-label+.dnb-dropdown__inner{width:auto}.dnb-dropdown--vertical.dnb-dropdown--stretch .dnb-dropdown__inner,.dnb-form-row--horizontal .dnb-dropdown--stretch{width:100%}label+.dnb-dropdown[class*=__form-status]{vertical-align:top}label+.dnb-dropdown[class*=__form-status] .dnb-dropdown__shell{top:-.375rem}.dnb-dropdown__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-dropdown--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-dropdown:not(.dnb-dropdown--vertical)[class*=__status]{align-items:flex-start}.dnb-dropdown:not(.dnb-dropdown--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-responsive-component .dnb-dropdown{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-dropdown>.dnb-form-label{margin-bottom:.5rem}.dnb-responsive-component .dnb-dropdown__helper{display:none}}

package/components/dropdown/style/dnb-dropdown.scss

@@ -13,8 +13,14 @@
   --dropdown-height--large: 3rem;
   --dropdown-padding-horizontal: 1rem;
   --dropdown-focus-border-width: 0.125rem;
+  --dropdown-error-border-width: 0.125rem;
   --dropdown-text-padding: 0.5rem;
+  --dropdown-button-padding: 0 1rem;
   --dropdown-border-radius: 0.25rem;
+  --dropdown-foreground-color-primary: var(--color-black-55);
+  --dropdown-foreground-color-error: var(--color-fire-red);
+  --dropdown-background-color-disabled: var(--color-black-3);
+  --dropdown-background-color-error-active: var(--color-fire-red-8);
 
   display: inline-flex;
   align-items: center;
@@ -86,7 +92,7 @@
     width: 100%;
 
     &.dnb-button {
-      padding: 0 1rem;
+      padding: var(--dropdown-button-padding);
       border-radius: var(--dropdown-border-radius);
     }
   }
@@ -120,6 +126,37 @@
     }
   }
 
+  &__status--error:not(#{&}--opened) &__trigger {
+    @include fakeBorder(var(--dropdown-foreground-color-error));
+
+    @include hover() {
+      color: var(--dropdown-foreground-color-error);
+
+      @include fakeBorder(
+        var(--dropdown-foreground-color-error),
+        var(--dropdown-error-border-width)
+      );
+
+      & .dnb-dropdown__icon .dnb-icon {
+        color: var(--dropdown-foreground-color-error);
+      }
+    }
+
+    @include active() {
+      color: var(--dropdown-foreground-color-error);
+      background-color: var(--dropdown-background-color-error-active);
+    }
+  }
+  &__status--error:not(#{&}--opened) &__trigger,
+  &__status--error:not(#{&}--opened) &__icon {
+    color: var(--dropdown-foreground-color-error);
+  }
+
+  // adjust the form-status to the inner border for 2px
+  > .dnb-form-status {
+    transform: translateY(-0.4375rem);
+  }
+
   &--icon-position-left &__text {
     order: 2;
     padding-right: 0;