@dnb/eufemia 10.13.0 → 10.14.0

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

@@ -125,6 +125,19 @@
        column-gap: var(--spacing-small);
 }
 
+:root {
+  --forms-field-width--small: 5rem;
+  --forms-field-width--medium: 11rem;
+  --forms-field-width--large: 21rem;
+}
+
+.dnb-forms-field-expiry {
+  width: var(--forms-field-width--small);
+}
+.dnb-forms-field-expiry .dnb-input__shell {
+  justify-content: center;
+}
+
 /*
  * Utilities
  */

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;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%}
+.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-field-expiry{width:var(--forms-field-width--small)}.dnb-forms-field-expiry .dnb-input__shell{justify-content:center}.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/AccordionContent.js

@@ -1,3 +1,5 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";

package/components/accordion/AccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.js","names":["React","classnames","warn","validateDOMAttributes","processChildren","getPreviousSibling","useMediaQuery","AccordionContext","createSpacingClasses","HeightAnimation","AccordionContent","props","context","useContext","id","expanded","prerender","prevent_rerender","single_container","disabled","no_animation","contentRef","className","children","instance","rest","_objectWithoutProperties","_excluded","elementRef","useRef","cacheRef","setContainerHeight","contentElem","current","style","height","containerElement","transitionDuration","minHeight","offsetHeight","offsetTop","e","renderContent","prevent_rerender_conditional","content","createElement","useEffect","useState","Object","prototype","hasOwnProperty","call","isSmallScreen","when","max","wrapperParams","_objectSpread","keepInDOM","innerParams","animate","_extends","open","innerRef","_supportsSpacingProps"],"sources":["../../../../src/components/accordion/AccordionContent.tsx"],"sourcesContent":["/**\n * Web Accordion Component\n *\n */\n\nimport React, { HTMLProps } from 'react'\nimport classnames from 'classnames'\nimport {\n  warn,\n  validateDOMAttributes,\n  processChildren,\n  getPreviousSibling,\n} from '../../shared/component-helper'\nimport { useMediaQuery } from '../../shared'\nimport AccordionContext, {\n  AccordionContextProps,\n} from './AccordionContext'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport HeightAnimation from '../height-animation/HeightAnimation'\nimport { SpacingProps } from '../space/types'\n\nexport type AccordionContentProps = Omit<\n  React.HTMLProps<HTMLElement>,\n  'onAnimationEnd' | 'children'\n> &\n  SpacingProps & {\n    instance?: React.MutableRefObject<unknown>\n    className?: string\n    children?: React.ReactNode | ((...args: any[]) => any)\n  }\n\nexport default function AccordionContent(props: AccordionContentProps) {\n  const context = React.useContext<AccordionContextProps>(AccordionContext)\n\n  const {\n    id,\n    expanded,\n    prerender,\n    prevent_rerender,\n    single_container,\n    disabled,\n    no_animation,\n    contentRef,\n  } = context\n\n  const { className, children, instance, ...rest } = props\n\n  let elementRef = React.useRef(null)\n  const cacheRef = React.useRef(null)\n\n  if (contentRef) {\n    elementRef = contentRef\n  }\n\n  const setContainerHeight = () => {\n    const { single_container } = context\n\n    if (single_container) {\n      const contentElem = elementRef.current\n      if (contentElem) {\n        try {\n          contentElem.style.height = ''\n\n          const containerElement = getPreviousSibling(\n            'dnb-accordion-group--single-container',\n            contentElem\n          ) as HTMLElement\n\n          if (no_animation) {\n            containerElement.style.transitionDuration = '1ms'\n          }\n\n          const minHeight =\n            (contentElem.offsetHeight + contentElem.offsetTop) / 16\n          containerElement.style.minHeight = `${minHeight}rem`\n        } catch (e) {\n          warn(e)\n        }\n      }\n    }\n  }\n\n  const renderContent = () => {\n    const children = processChildren(props)\n\n    const {\n      expanded,\n      prerender,\n      prevent_rerender,\n      prevent_rerender_conditional,\n    } = context\n\n    let content = children\n\n    if (typeof content === 'string') {\n      content = <p className=\"dnb-p\">{content}</p>\n    }\n\n    if (prevent_rerender) {\n      /**\n       * Ensure we do not render, if it is not expanded\n       */\n      if (!(expanded || prerender)) {\n        content = null\n      }\n\n      // update the cache if children is not the same anymore\n      if (prevent_rerender_conditional && cacheRef.current !== content) {\n        cacheRef.current = content\n      }\n\n      if (cacheRef.current) {\n        content = cacheRef.current\n      } else {\n        cacheRef.current = content\n      }\n    }\n\n    return content\n  }\n\n  React.useEffect(() => {\n    if (expanded && single_container) {\n      setContainerHeight()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children, expanded, single_container])\n\n  React.useState(() => {\n    if (\n      instance &&\n      Object.prototype.hasOwnProperty.call(instance, 'current')\n    ) {\n      instance.current = { setContainerHeight }\n    }\n  })\n\n  const isSmallScreen = useMediaQuery({\n    when: { max: 'small' },\n  })\n\n  const content = renderContent()\n\n  const wrapperParams = {\n    className: classnames('dnb-accordion__content', className),\n    ...rest,\n  }\n\n  const keepInDOM = prerender || prevent_rerender\n\n  const innerParams = {\n    id: `${id}-content`,\n    'aria-labelledby': `${id}-header`,\n    className: classnames(\n      'dnb-accordion__content__inner',\n      createSpacingClasses(rest)\n    ),\n  } as HTMLProps<HTMLElement>\n\n  if (expanded) {\n    innerParams['aria-expanded'] = true\n  }\n\n  if (!expanded || disabled) {\n    innerParams.disabled = true\n    innerParams['aria-hidden'] = true\n  }\n\n  // to remove spacing props\n  validateDOMAttributes(props, wrapperParams)\n  validateDOMAttributes(null, innerParams)\n\n  const animate =\n    !no_animation && (single_container ? isSmallScreen : true)\n\n  return (\n    <HeightAnimation\n      {...wrapperParams}\n      open={expanded}\n      animate={animate}\n      keepInDOM={keepInDOM}\n      innerRef={elementRef}\n    >\n      <section {...innerParams}>{content}</section>\n    </HeightAnimation>\n  )\n}\n\nAccordionContent._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"AccordionContent.js","names":["React","classnames","warn","validateDOMAttributes","processChildren","getPreviousSibling","useMediaQuery","AccordionContext","createSpacingClasses","HeightAnimation","AccordionContent","props","context","useContext","id","expanded","prerender","prevent_rerender","single_container","disabled","no_animation","contentRef","className","children","instance","rest","_objectWithoutProperties","_excluded","elementRef","useRef","cacheRef","setContainerHeight","contentElem","current","style","height","containerElement","transitionDuration","minHeight","offsetHeight","offsetTop","e","renderContent","prevent_rerender_conditional","content","createElement","useEffect","useState","Object","prototype","hasOwnProperty","call","isSmallScreen","when","max","wrapperParams","_objectSpread","keepInDOM","innerParams","animate","_extends","open","innerRef","_supportsSpacingProps"],"sources":["../../../../src/components/accordion/AccordionContent.tsx"],"sourcesContent":["/**\n * Web Accordion Component\n *\n */\n\nimport React, { HTMLProps } from 'react'\nimport classnames from 'classnames'\nimport {\n  warn,\n  validateDOMAttributes,\n  processChildren,\n  getPreviousSibling,\n} from '../../shared/component-helper'\nimport { useMediaQuery } from '../../shared'\nimport AccordionContext, {\n  AccordionContextProps,\n} from './AccordionContext'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport HeightAnimation from '../height-animation/HeightAnimation'\nimport { SpacingProps } from '../space/types'\n\nexport type AccordionContentProps = Omit<\n  React.HTMLProps<HTMLElement>,\n  'onAnimationEnd' | 'children'\n> &\n  SpacingProps & {\n    instance?: React.MutableRefObject<unknown>\n    className?: string\n    children?: React.ReactNode | ((...args: any[]) => any)\n  }\n\nexport default function AccordionContent(props: AccordionContentProps) {\n  const context = React.useContext<AccordionContextProps>(AccordionContext)\n\n  const {\n    id,\n    expanded,\n    prerender,\n    prevent_rerender,\n    single_container,\n    disabled,\n    no_animation,\n    contentRef,\n  } = context\n\n  const { className, children, instance, ...rest } = props\n\n  let elementRef = React.useRef(null)\n  const cacheRef = React.useRef(null)\n\n  if (contentRef) {\n    elementRef = contentRef\n  }\n\n  const setContainerHeight = () => {\n    const { single_container } = context\n\n    if (single_container) {\n      const contentElem = elementRef.current\n      if (contentElem) {\n        try {\n          contentElem.style.height = ''\n\n          const containerElement = getPreviousSibling(\n            'dnb-accordion-group--single-container',\n            contentElem\n          ) as HTMLElement\n\n          if (no_animation) {\n            containerElement.style.transitionDuration = '1ms'\n          }\n\n          const minHeight =\n            (contentElem.offsetHeight + contentElem.offsetTop) / 16\n          containerElement.style.minHeight = `${minHeight}rem`\n        } catch (e) {\n          warn(e)\n        }\n      }\n    }\n  }\n\n  const renderContent = () => {\n    const children = processChildren(props)\n\n    const {\n      expanded,\n      prerender,\n      prevent_rerender,\n      prevent_rerender_conditional,\n    } = context\n\n    let content = children\n\n    if (typeof content === 'string') {\n      content = <p className=\"dnb-p\">{content}</p>\n    }\n\n    if (prevent_rerender) {\n      /**\n       * Ensure we do not render, if it is not expanded\n       */\n      if (!(expanded || prerender)) {\n        content = null\n      }\n\n      // update the cache if children is not the same anymore\n      if (prevent_rerender_conditional && cacheRef.current !== content) {\n        cacheRef.current = content\n      }\n\n      if (cacheRef.current) {\n        content = cacheRef.current\n      } else {\n        cacheRef.current = content\n      }\n    }\n\n    return content\n  }\n\n  React.useEffect(() => {\n    if (expanded && single_container) {\n      setContainerHeight()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children, expanded, single_container])\n\n  React.useState(() => {\n    if (\n      instance &&\n      Object.prototype.hasOwnProperty.call(instance, 'current')\n    ) {\n      instance.current = { setContainerHeight }\n    }\n  })\n\n  const isSmallScreen = useMediaQuery({\n    when: { max: 'small' },\n  })\n\n  const content = renderContent()\n\n  const wrapperParams = {\n    className: classnames('dnb-accordion__content', className),\n    ...rest,\n  }\n\n  const keepInDOM = prerender || prevent_rerender\n\n  const innerParams = {\n    id: `${id}-content`,\n    'aria-labelledby': `${id}-header`,\n    className: classnames(\n      'dnb-accordion__content__inner',\n      createSpacingClasses(rest)\n    ),\n  } as HTMLProps<HTMLElement>\n\n  if (expanded) {\n    innerParams['aria-expanded'] = true\n  }\n\n  if (!expanded || disabled) {\n    innerParams.disabled = true\n    innerParams['aria-hidden'] = true\n  }\n\n  // to remove spacing props\n  validateDOMAttributes(props, wrapperParams)\n  validateDOMAttributes(null, innerParams)\n\n  const animate =\n    !no_animation && (single_container ? isSmallScreen : true)\n\n  return (\n    <HeightAnimation\n      {...wrapperParams}\n      open={expanded}\n      animate={animate}\n      keepInDOM={keepInDOM}\n      innerRef={elementRef}\n    >\n      <section {...innerParams}>{content}</section>\n    </HeightAnimation>\n  )\n}\n\nAccordionContent._supportsSpacingProps = true\n"],"mappings":"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"}

package/components/anchor/Anchor.js

@@ -1,3 +1,5 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _IconPrimary;

package/components/anchor/Anchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"Anchor.js","names":["React","classnames","E","Context","makeUniqueId","extendPropsWithContext","getOffsetTop","IconPrimary","Tooltip","launch","launchIcon","defaultProps","AnchorInstance","localProps","context","useContext","allProps","skeleton","getTranslation","Anchor","inner_ref","innerRef","createRef","id","element","className","children","tooltip","icon","iconPosition","omitClass","targetBlankTitle","rest","_objectWithoutProperties","_excluded","attributes","internalId","as","prefix","suffix","href","to","showLaunchicon","target","test","showTooltip","title","_IconPrimary","createElement","iconNode","pickIcon","Fragment","_extends","showDelay","targetElement","forwardRef","props","ref","_supportsSpacingProps","scrollToHashHandler","event","_element$pathname","currentTarget","getAttribute","document","includes","isSamePath","startsWith","window","location","pathname","replace","split","reverse","anchorElem","getElementById","HTMLElement","scrollPadding","parseFloat","getComputedStyle","documentElement","scrollPaddingTop","top","scroll","error","console","_icon$props","_icon$props2","_icon$props2$classNam","_icon$props3","cloneElement","key"],"sources":["../../../../src/components/anchor/Anchor.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps, ElementIsType } from '../../elements/Element'\nimport Context from '../../shared/Context'\nimport {\n  makeUniqueId,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { getOffsetTop } from '../../shared/helpers'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport Tooltip from '../tooltip/Tooltip'\nimport { launch as launchIcon } from '../../icons'\nimport type { IconIcon } from '../icon/Icon'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport type { SpacingProps } from '../../shared/types'\n\nexport type AnchorProps = {\n  element?: ElementIsType\n  href?: string\n  to?: string\n  targetBlankTitle?: string\n  target?: string\n  tooltip?: React.ReactNode\n  icon?: IconIcon\n  iconPosition?: 'left' | 'right'\n  skeleton?: SkeletonShow\n  omitClass?: boolean\n  innerRef?: React.RefObject<HTMLAnchorElement>\n\n  /** @deprecated use innerRef instead */\n  inner_ref?: React.RefObject<HTMLAnchorElement>\n}\n\nexport type AnchorAllProps = AnchorProps &\n  Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'> &\n  SpacingProps\n\nconst defaultProps = {}\n\nexport function AnchorInstance(localProps: AnchorAllProps) {\n  const context = React.useContext(Context)\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    { skeleton: context?.skeleton },\n    context?.getTranslation(localProps as AnchorAllProps).Anchor,\n    context?.Anchor\n  )\n\n  // deprecated: inner_ref is still needed to support Button's usage of Anchor\n  if (typeof allProps.inner_ref !== 'undefined') {\n    allProps.innerRef = allProps.inner_ref\n    delete allProps.inner_ref\n  }\n\n  if (!allProps.innerRef) {\n    allProps.innerRef = React.createRef()\n  }\n\n  const {\n    id,\n    element,\n    className,\n    children,\n    tooltip,\n    icon,\n    iconPosition = 'left',\n    omitClass,\n    innerRef,\n    targetBlankTitle,\n    ...rest\n  } = allProps\n\n  const attributes = rest as ElementProps\n  const internalId = id || 'id' + makeUniqueId()\n  const as = (element || 'a') as string\n\n  let prefix: React.ReactNode\n  let suffix: React.ReactNode\n\n  const href = allProps.href || allProps.to\n  const showLaunchicon =\n    allProps.target === '_blank' && !/^(mailto|tel|sms)/.test(href)\n  const showTooltip = (tooltip || showLaunchicon) && !allProps.title\n\n  // WCAG guide: https://www.w3.org/TR/WCAG20-TECHS/G201.html\n  if (showLaunchicon) {\n    suffix = <IconPrimary icon={launchIcon} />\n  }\n\n  if (icon) {\n    const iconNode = pickIcon(icon) || <IconPrimary icon={icon} />\n    if (iconPosition === 'left') {\n      prefix = <>{iconNode} </>\n    } else if (iconPosition === 'right') {\n      suffix = <> {iconNode}</>\n    }\n  }\n\n  return (\n    <>\n      <E\n        as={as}\n        id={id}\n        className={classnames(\n          omitClass !== true && 'dnb-anchor',\n          className,\n          prefix && 'dnb-anchor--icon-left',\n          suffix && 'dnb-anchor--icon-right',\n          typeof children !== 'string' && 'dnb-anchor--was-node',\n          showLaunchicon && 'dnb-anchor--launch-icon'\n        )}\n        {...attributes}\n        innerRef={innerRef}\n      >\n        {prefix}\n        {children}\n        {suffix}\n      </E>\n\n      {showTooltip && (\n        <Tooltip\n          showDelay={100}\n          id={internalId + '-tooltip'}\n          targetElement={innerRef}\n          tooltip={tooltip}\n        >\n          {allProps.title || targetBlankTitle}\n        </Tooltip>\n      )}\n    </>\n  )\n}\n\nconst Anchor = React.forwardRef(\n  (props: AnchorAllProps, ref: React.RefObject<HTMLAnchorElement>) => {\n    return <AnchorInstance innerRef={ref} {...props} />\n  }\n)\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nAnchor._supportsSpacingProps = true\n\nexport default Anchor\n\nexport function scrollToHashHandler(\n  event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n) {\n  const element = event.currentTarget as HTMLAnchorElement\n  const href = element.getAttribute('href')\n\n  if (typeof document === 'undefined' || !href.includes('#')) {\n    return // stop here\n  }\n\n  /**\n   * What happens here?\n   * When `scroll-behavior: smooth;` in CSS is set,\n   * Blink/Chromium wants the user to click two times in order to actually scroll to the anchor hash.\n   * The first click, sets the hash, the second one, scrolls to it.\n   * We want Chromium browsers to scroll to the element on the first click.\n   */\n  const isSamePath =\n    href.startsWith('#') ||\n    window.location.href.includes(element.pathname?.replace(/\\/$/, ''))\n\n  // Only continue, when we are sure we are on the same page,\n  // because, the same ID may exists occasionally on the current page.\n  if (isSamePath) {\n    const id = href.split(/#/g).reverse()[0]\n    const anchorElem = document.getElementById(id)\n\n    if (anchorElem instanceof HTMLElement) {\n      try {\n        const scrollPadding = parseFloat(\n          window.getComputedStyle(document.documentElement)\n            .scrollPaddingTop\n        )\n        const top = getOffsetTop(anchorElem) - scrollPadding || 0\n\n        window.scroll({ top })\n\n        return { element: anchorElem }\n      } catch (error) {\n        console.error(error)\n      }\n    }\n  }\n}\n\nexport function pickIcon(icon) {\n  return icon?.props?.icon || icon?.props?.className?.includes('dnb-icon')\n    ? React.cloneElement(icon, {\n        key: 'button-icon-clone',\n        className: classnames(icon.props?.className, 'dnb-button__icon'),\n      })\n    : null\n}\n"],"mappings":"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"}
+{"version":3,"file":"Anchor.js","names":["React","classnames","E","Context","makeUniqueId","extendPropsWithContext","getOffsetTop","IconPrimary","Tooltip","launch","launchIcon","defaultProps","AnchorInstance","localProps","context","useContext","allProps","skeleton","getTranslation","Anchor","inner_ref","innerRef","createRef","id","element","className","children","tooltip","icon","iconPosition","omitClass","targetBlankTitle","rest","_objectWithoutProperties","_excluded","attributes","internalId","as","prefix","suffix","href","to","showLaunchicon","target","test","showTooltip","title","_IconPrimary","createElement","iconNode","pickIcon","Fragment","_extends","showDelay","targetElement","forwardRef","props","ref","_supportsSpacingProps","scrollToHashHandler","event","_element$pathname","currentTarget","getAttribute","document","includes","isSamePath","startsWith","window","location","pathname","replace","split","reverse","anchorElem","getElementById","HTMLElement","scrollPadding","parseFloat","getComputedStyle","documentElement","scrollPaddingTop","top","scroll","error","console","_icon$props","_icon$props2","_icon$props2$classNam","_icon$props3","cloneElement","key"],"sources":["../../../../src/components/anchor/Anchor.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps, ElementIsType } from '../../elements/Element'\nimport Context from '../../shared/Context'\nimport {\n  makeUniqueId,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { getOffsetTop } from '../../shared/helpers'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport Tooltip from '../tooltip/Tooltip'\nimport { launch as launchIcon } from '../../icons'\nimport type { IconIcon } from '../icon/Icon'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport type { SpacingProps } from '../../shared/types'\n\nexport type AnchorProps = {\n  element?: ElementIsType\n  href?: string\n  to?: string\n  targetBlankTitle?: string\n  target?: string\n  tooltip?: React.ReactNode\n  icon?: IconIcon\n  iconPosition?: 'left' | 'right'\n  skeleton?: SkeletonShow\n  omitClass?: boolean\n  innerRef?: React.RefObject<HTMLAnchorElement>\n\n  /** @deprecated use innerRef instead */\n  inner_ref?: React.RefObject<HTMLAnchorElement>\n}\n\nexport type AnchorAllProps = AnchorProps &\n  Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'> &\n  SpacingProps\n\nconst defaultProps = {}\n\nexport function AnchorInstance(localProps: AnchorAllProps) {\n  const context = React.useContext(Context)\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    { skeleton: context?.skeleton },\n    context?.getTranslation(localProps as AnchorAllProps).Anchor,\n    context?.Anchor\n  )\n\n  // deprecated: inner_ref is still needed to support Button's usage of Anchor\n  if (typeof allProps.inner_ref !== 'undefined') {\n    allProps.innerRef = allProps.inner_ref\n    delete allProps.inner_ref\n  }\n\n  if (!allProps.innerRef) {\n    allProps.innerRef = React.createRef()\n  }\n\n  const {\n    id,\n    element,\n    className,\n    children,\n    tooltip,\n    icon,\n    iconPosition = 'left',\n    omitClass,\n    innerRef,\n    targetBlankTitle,\n    ...rest\n  } = allProps\n\n  const attributes = rest as ElementProps\n  const internalId = id || 'id' + makeUniqueId()\n  const as = (element || 'a') as string\n\n  let prefix: React.ReactNode\n  let suffix: React.ReactNode\n\n  const href = allProps.href || allProps.to\n  const showLaunchicon =\n    allProps.target === '_blank' && !/^(mailto|tel|sms)/.test(href)\n  const showTooltip = (tooltip || showLaunchicon) && !allProps.title\n\n  // WCAG guide: https://www.w3.org/TR/WCAG20-TECHS/G201.html\n  if (showLaunchicon) {\n    suffix = <IconPrimary icon={launchIcon} />\n  }\n\n  if (icon) {\n    const iconNode = pickIcon(icon) || <IconPrimary icon={icon} />\n    if (iconPosition === 'left') {\n      prefix = <>{iconNode} </>\n    } else if (iconPosition === 'right') {\n      suffix = <> {iconNode}</>\n    }\n  }\n\n  return (\n    <>\n      <E\n        as={as}\n        id={id}\n        className={classnames(\n          omitClass !== true && 'dnb-anchor',\n          className,\n          prefix && 'dnb-anchor--icon-left',\n          suffix && 'dnb-anchor--icon-right',\n          typeof children !== 'string' && 'dnb-anchor--was-node',\n          showLaunchicon && 'dnb-anchor--launch-icon'\n        )}\n        {...attributes}\n        innerRef={innerRef}\n      >\n        {prefix}\n        {children}\n        {suffix}\n      </E>\n\n      {showTooltip && (\n        <Tooltip\n          showDelay={100}\n          id={internalId + '-tooltip'}\n          targetElement={innerRef}\n          tooltip={tooltip}\n        >\n          {allProps.title || targetBlankTitle}\n        </Tooltip>\n      )}\n    </>\n  )\n}\n\nconst Anchor = React.forwardRef(\n  (props: AnchorAllProps, ref: React.RefObject<HTMLAnchorElement>) => {\n    return <AnchorInstance innerRef={ref} {...props} />\n  }\n)\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nAnchor._supportsSpacingProps = true\n\nexport default Anchor\n\nexport function scrollToHashHandler(\n  event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n) {\n  const element = event.currentTarget as HTMLAnchorElement\n  const href = element.getAttribute('href')\n\n  if (typeof document === 'undefined' || !href.includes('#')) {\n    return // stop here\n  }\n\n  /**\n   * What happens here?\n   * When `scroll-behavior: smooth;` in CSS is set,\n   * Blink/Chromium wants the user to click two times in order to actually scroll to the anchor hash.\n   * The first click, sets the hash, the second one, scrolls to it.\n   * We want Chromium browsers to scroll to the element on the first click.\n   */\n  const isSamePath =\n    href.startsWith('#') ||\n    window.location.href.includes(element.pathname?.replace(/\\/$/, ''))\n\n  // Only continue, when we are sure we are on the same page,\n  // because, the same ID may exists occasionally on the current page.\n  if (isSamePath) {\n    const id = href.split(/#/g).reverse()[0]\n    const anchorElem = document.getElementById(id)\n\n    if (anchorElem instanceof HTMLElement) {\n      try {\n        const scrollPadding = parseFloat(\n          window.getComputedStyle(document.documentElement)\n            .scrollPaddingTop\n        )\n        const top = getOffsetTop(anchorElem) - scrollPadding || 0\n\n        window.scroll({ top })\n\n        return { element: anchorElem }\n      } catch (error) {\n        console.error(error)\n      }\n    }\n  }\n}\n\nexport function pickIcon(icon) {\n  return icon?.props?.icon || icon?.props?.className?.includes('dnb-icon')\n    ? React.cloneElement(icon, {\n        key: 'button-icon-clone',\n        className: classnames(icon.props?.className, 'dnb-button__icon'),\n      })\n    : null\n}\n"],"mappings":"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"}

package/components/autocomplete/Autocomplete.js

@@ -332,6 +332,10 @@ class AutocompleteInstance extends React.PureComponent {
       let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       const data = _this.runFilter(value, options);
       const count = _this.countData(data);
+      const {
+        keep_value,
+        keep_value_and_selection
+      } = _this.props;
       if (value && value.length > 0) {
         if (count === 0) {
           if (_this.state.mode !== 'async') {
@@ -349,10 +353,10 @@ class AutocompleteInstance extends React.PureComponent {
           }
         }
       } else {
-        if (!isTrue(_this.props.keep_value) && !isTrue(_this.props.keep_value_and_selection)) {
+        if (!isTrue(keep_value) && !isTrue(keep_value_and_selection)) {
           _this.totalReset();
         }
-        if (isTrue(_this.props.keep_value)) {
+        if (isTrue(keep_value)) {
           _this.resetSelectedItem();
         }
         _this.showAllItems();
@@ -559,6 +563,32 @@ class AutocompleteInstance extends React.PureComponent {
           e.preventDefault();
           break;
       }
+      switch (key) {
+        case 'up':
+        case 'down':
+          if (!this.context.drawerList.opened) {
+            this.setVisible();
+          }
+          break;
+        case 'esc':
+          this.setState({
+            showAllNextTime: true,
+            _listenForPropChanges: false
+          });
+          break;
+        case 'enter':
+          e.preventDefault();
+          if (!this.context.drawerList.opened && this.hasFilterActive()) {
+            this.ignoreEvents();
+            this.showAll();
+          }
+          if ((!this.hasValidData() || !this.hasSelectedItem()) && !this.hasActiveItem()) {
+            this.toggleVisible();
+          } else {
+            this.setVisible();
+          }
+          break;
+      }
     });
     _defineProperty(this, "onInputClickHandler", e => {
       const {
@@ -599,10 +629,20 @@ class AutocompleteInstance extends React.PureComponent {
         });
       }
     });
-    _defineProperty(this, "onReserveActivityHandler", event => {
-      this.__preventFiringBlurEvent = event.key === 'enter' || event.key === 'space' || event.target && getPreviousSibling('dnb-drawer-list', event.target);
+    _defineProperty(this, "reserveActivityHandler", function () {
+      let event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      _this.__preventFiringBlurEvent = Boolean(event.key === 'enter' || (event !== null && event !== void 0 && event.currentTarget ? getPreviousSibling('dnb-drawer-list', event.currentTarget) || getPreviousSibling('dnb-input__submit-button__button', event.currentTarget) : false));
+      if (_this.__preventFiringBlurEvent) {
+        setTimeout(() => {
+          _this.__preventFiringBlurEvent = false;
+        }, isTrue(_this.props.no_animation) ? 1 : DrawerList.blurDelay);
+      }
     });
     _defineProperty(this, "onBlurHandler", event => {
+      if (this.__preventFiringBlurEvent || this.context.drawerList.hasFocusOnElement || this.state.hasBlur) {
+        this.__preventFiringBlurEvent = null;
+        return false;
+      }
       const {
         open_on_focus,
         keep_value,
@@ -610,42 +650,39 @@ class AutocompleteInstance extends React.PureComponent {
         prevent_selection,
         no_animation
       } = this.props;
-      if (!this.state.hasBlur && !this.__preventFiringBlurEvent && !this.context.drawerList.hasFocusOnElement) {
-        dispatchCustomElementEvent(this, 'on_blur', _objectSpread({
-          event
-        }, this.getEventObjects('on_blur')));
+      dispatchCustomElementEvent(this, 'on_blur', _objectSpread({
+        event
+      }, this.getEventObjects('on_blur')));
+      this.setState({
+        hasBlur: true,
+        hasFocus: false
+      });
+      if (!isTrue(keep_value) && !isTrue(keep_value_and_selection)) {
         this.setState({
-          hasBlur: true,
-          hasFocus: false
+          typedInputValue: null,
+          _listenForPropChanges: false
         });
-        if (!isTrue(keep_value_and_selection)) {
-          this.setState({
-            typedInputValue: null,
-            _listenForPropChanges: false
-          });
-        }
-        if (!isTrue(prevent_selection)) {
-          const existingValue = this.state.inputValue;
+      }
+      if (!isTrue(prevent_selection)) {
+        const existingValue = this.state.inputValue;
+        if (!isTrue(keep_value) && !isTrue(keep_value_and_selection)) {
           this.clearInputValue();
-          const resetAfterClose = () => {
-            if (!isTrue(keep_value) || !existingValue || this.hasSelectedItem()) {
-              this.resetActiveItem();
-            }
-            this.resetFilter();
-          };
-          if (isTrue(no_animation)) {
-            resetAfterClose();
-          } else {
-            clearTimeout(this._blurTimeout);
-            this._blurTimeout = setTimeout(resetAfterClose, DrawerList.blurDelay);
-          }
         }
-        if (isTrue(open_on_focus)) {
-          this.setHidden();
+        const resetAfterClose = () => {
+          if (!isTrue(keep_value) || !existingValue || this.hasSelectedItem()) {
+            this.resetActiveItem();
+          }
+          this.resetFilter();
+        };
+        if (isTrue(no_animation)) {
+          resetAfterClose();
+        } else {
+          clearTimeout(this._blurTimeout);
+          this._blurTimeout = setTimeout(resetAfterClose, DrawerList.blurDelay);
         }
-      } else if (this.__preventFiringBlurEvent) {
-        this.__preventFiringBlurEvent = null;
-        return false;
+      }
+      if (isTrue(open_on_focus)) {
+        this.setHidden();
       }
     });
     _defineProperty(this, "onTriggerKeyDownHandler", e => {
@@ -675,37 +712,6 @@ class AutocompleteInstance extends React.PureComponent {
           break;
       }
     });
-    _defineProperty(this, "onShellKeyDownHandler", e => {
-      const key = keycode(e);
-      switch (key) {
-        case 'up':
-        case 'down':
-          if (!this.context.drawerList.opened) {
-            e.preventDefault();
-            this.setVisible();
-          }
-          break;
-        case 'esc':
-          this.setState({
-            showAllNextTime: true,
-            _listenForPropChanges: false
-          });
-          break;
-        case 'enter':
-          e.preventDefault();
-          if (!this.context.drawerList.opened && this.hasFilterActive()) {
-            this.ignoreEvents();
-            this.showAll();
-          }
-          if ((!this.hasValidData() || !this.hasSelectedItem()) && !this.hasActiveItem()) {
-            clearTimeout(this._toggleVisibleTimeout);
-            this._toggleVisibleTimeout = setTimeout(this.toggleVisible, 1);
-          } else {
-            this.setVisible();
-          }
-          break;
-      }
-    });
     _defineProperty(this, "getEventObjects", key => {
       const attributes = this.attributes;
       return {
@@ -1155,7 +1161,6 @@ class AutocompleteInstance extends React.PureComponent {
     clearTimeout(this._ariaLiveUpdateTimeout);
     clearTimeout(this._focusTimeout);
     clearTimeout(this._blurTimeout);
-    clearTimeout(this._toggleVisibleTimeout);
   }
   setSearchIndex() {
     let {
@@ -1183,12 +1188,9 @@ class AutocompleteInstance extends React.PureComponent {
           preventScroll: true
         });
       } catch (e) {}
-      clearTimeout(this._focusTimeout);
-      this._focusTimeout = setTimeout(() => {
-        this.setState({
-          hasFocus: false
-        });
-      }, 1);
+      this.setState({
+        hasFocus: false
+      });
     });
   }
   setAriaLiveUpdate() {
@@ -1332,8 +1334,7 @@ class AutocompleteInstance extends React.PureComponent {
     };
     const shellParams = {
       className: 'dnb-autocomplete__shell dnb-no-focus',
-      ref: this._refShell,
-      onKeyDown: this.onShellKeyDownHandler
+      ref: this._refShell
     };
     const inputParams = _objectSpread({
       className: 'dnb-autocomplete__input',
@@ -1381,6 +1382,7 @@ class AutocompleteInstance extends React.PureComponent {
       status: !opened && status ? status_state : null,
       onKeyDown: this.onTriggerKeyDownHandler,
       onSubmit: this.toggleVisible,
+      onMouseDown: this.reserveActivityHandler,
       'aria-haspopup': 'listbox',
       'aria-expanded': isExpanded,
       'aria-label': !hidden ? submit_button_title : undefined,
@@ -1481,8 +1483,8 @@ class AutocompleteInstance extends React.PureComponent {
       on_select: this.onSelectHandler,
       on_hide: this.onHideHandler,
       on_pre_change: this.onPreChangeHandler,
-      on_key_down: this.onReserveActivityHandler,
-      onMouseDown: this.onReserveActivityHandler,
+      on_key_down: this.reserveActivityHandler,
+      onMouseDown: this.reserveActivityHandler,
       independent_width: independent_width
     })), suffix && React.createElement(Suffix, {
       className: "dnb-autocomplete__suffix",
@@ -1498,5 +1500,6 @@ _defineProperty(AutocompleteInstance, "defaultProps", Autocomplete.defaultProps)
 _defineProperty(AutocompleteInstance, "contextType", DrawerListContext);
 process.env.NODE_ENV !== "production" ? AutocompleteInstance.propTypes = Autocomplete.propTypes : void 0;
 Autocomplete.HorizontalItem = DrawerList.HorizontalItem;
+Autocomplete._formElement = true;
 Autocomplete._supportsSpacingProps = true;
 //# sourceMappingURL=Autocomplete.js.map