@dnb/eufemia 10.11.0 → 10.12.0

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

@@ -447,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;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/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 = {
   /**

package/components/form-label/FormLabel.js

@@ -31,8 +31,9 @@ export default function FormLabel(localProps) {
       label_direction
     } = props,
     attributes = _objectWithoutProperties(props, _excluded);
+  const isInteractive = !props.disabled && !srOnly && (typeof props.onClick === 'function' || forId || for_id);
   const params = _objectSpread({
-    className: classnames('dnb-form-label', (isTrue(vertical) || label_direction === 'vertical') && `dnb-form-label--vertical`, (srOnly || isTrue(sr_only)) && 'dnb-sr-only', createSkeletonClass('font', skeleton, context), createSpacingClasses(props), className, size && `dnb-h--${size}`),
+    className: classnames('dnb-form-label', (isTrue(vertical) || label_direction === 'vertical') && `dnb-form-label--vertical`, (srOnly || isTrue(sr_only)) && 'dnb-sr-only', createSkeletonClass('font', skeleton, context), createSpacingClasses(props), className, size && `dnb-h--${size}`, isInteractive && 'dnb-form-label--interactive'),
     htmlFor: forId || for_id
   }, attributes);
   params['ref'] = innerRef;

package/components/form-label/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","names":["React","classnames","extendPropsWithContext","isTrue","validateDOMAttributes","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","pickFormElementProps","Context","FormLabel","localProps","context","useContext","props","skeleton","FormRow","formElement","forId","text","srOnly","vertical","size","element","Element","innerRef","className","children","for_id","sr_only","label_direction","attributes","_objectWithoutProperties","_excluded","params","_objectSpread","htmlFor","createElement","_supportsSpacingProps"],"sources":["../../../../src/components/form-label/FormLabel.tsx"],"sourcesContent":["/**\n * Web FormLabel Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport {\n  extendPropsWithContext,\n  isTrue,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport Context from '../../shared/Context'\nimport {\n  DynamicElement,\n  DynamicElementParams,\n  SpacingProps,\n} from '../../shared/types'\n\nexport type FormLabelProps = {\n  forId?: string\n  element?: DynamicElement<HTMLLabelElement>\n  text?: React.ReactNode\n  size?: 'basis' | 'medium' | 'large'\n  id?: string\n  skeleton?: boolean\n  label?: React.ReactNode\n  vertical?: boolean\n  srOnly?: boolean\n  innerRef?: React.RefObject<HTMLElement>\n\n  /** Is not a part of HTMLLabelElement and not documented as of now */\n  disabled?: boolean\n\n  /** @deprecated use forId instead */\n  for_id?: string\n  /** @deprecated use srOnly instead */\n  sr_only?: boolean\n  /** @deprecated use labelDirection instead (was not documented before) */\n  label_direction?: 'vertical' | 'horizontal'\n}\n\nexport type FormLabelAllProps = FormLabelProps &\n  React.HTMLAttributes<HTMLLabelElement> &\n  SpacingProps\n\nexport default function FormLabel(localProps: FormLabelAllProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    null,\n    { skeleton: context?.skeleton },\n    pickFormElementProps(context?.FormRow), // Deprecated – can be removed in v11\n    pickFormElementProps(context?.formElement),\n    context?.FormLabel\n  )\n\n  const {\n    forId,\n    text,\n    srOnly,\n    vertical,\n    size,\n    skeleton,\n    element: Element = 'label',\n    innerRef,\n    className,\n    children,\n\n    /** @deprecated can be removed in v11 */\n    for_id,\n    sr_only,\n    label_direction,\n\n    ...attributes\n  } = props\n\n  const params = {\n    className: classnames(\n      'dnb-form-label',\n      (isTrue(vertical) || label_direction === 'vertical') &&\n        `dnb-form-label--vertical`,\n      (srOnly || isTrue(sr_only)) && 'dnb-sr-only',\n      size && `dnb-h--${size}`,\n      createSkeletonClass('font', skeleton, context),\n      createSpacingClasses(props),\n      className\n    ),\n    htmlFor: forId || for_id,\n    ...(attributes as DynamicElementParams),\n  }\n\n  params['ref'] = innerRef\n\n  skeletonDOMAttributes(params, skeleton, context)\n  validateDOMAttributes(localProps, params)\n\n  return <Element {...params}>{text || children}</Element>\n}\n\nFormLabel._supportsSpacingProps = true\n"],"mappings":";;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,sBAAsB,EACtBC,MAAM,EACNC,qBAAqB,QAChB,+BAA+B;AACtC,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SACEC,mBAAmB,EACnBC,qBAAqB,QAChB,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,OAAOC,OAAO,MAAM,sBAAsB;AAkC1C,eAAe,SAASC,SAASA,CAACC,UAA6B,EAAE;EAC/D,MAAMC,OAAO,GAAGZ,KAAK,CAACa,UAAU,CAACJ,OAAO,CAAC;EAGzC,MAAMK,KAAK,GAAGZ,sBAAsB,CAClCS,UAAU,EACV,IAAI,EACJ;IAAEI,QAAQ,EAAEH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG;EAAS,CAAC,EAC/BP,oBAAoB,CAACI,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEI,OAAO,CAAC,EACtCR,oBAAoB,CAACI,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,WAAW,CAAC,EAC1CL,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,SACX,CAAC;EAED,MAAM;MACJQ,KAAK;MACLC,IAAI;MACJC,MAAM;MACNC,QAAQ;MACRC,IAAI;MACJP,QAAQ;MACRQ,OAAO,EAAEC,OAAO,GAAG,OAAO;MAC1BC,QAAQ;MACRC,SAAS;MACTC,QAAQ;MAGRC,MAAM;MACNC,OAAO;MACPC;IAGF,CAAC,GAAGhB,KAAK;IADJiB,UAAU,GAAAC,wBAAA,CACXlB,KAAK,EAAAmB,SAAA;EAET,MAAMC,MAAM,GAAAC,aAAA;IACVT,SAAS,EAAEzB,UAAU,CACnB,gBAAgB,EAChB,CAACE,MAAM,CAACkB,QAAQ,CAAC,IAAIS,eAAe,KAAK,UAAU,KAChD,0BAAyB,EAC5B,CAACV,MAAM,IAAIjB,MAAM,CAAC0B,OAAO,CAAC,KAAK,aAAa,EAE5CvB,mBAAmB,CAAC,MAAM,EAAES,QAAQ,EAAEH,OAAO,CAAC,EAC9CP,oBAAoB,CAACS,KAAK,CAAC,EAC3BY,SAAS,EAHTJ,IAAI,IAAK,UAASA,IAAK,EAIzB,CAAC;IACDc,OAAO,EAAElB,KAAK,IAAIU;EAAM,GACpBG,UAAU,CACf;EAEDG,MAAM,CAAC,KAAK,CAAC,GAAGT,QAAQ;EAExBlB,qBAAqB,CAAC2B,MAAM,EAAEnB,QAAQ,EAAEH,OAAO,CAAC;EAChDR,qBAAqB,CAACO,UAAU,EAAEuB,MAAM,CAAC;EAEzC,OAAOlC,KAAA,CAAAqC,aAAA,CAACb,OAAO,EAAKU,MAAM,EAAGf,IAAI,IAAIQ,QAAkB,CAAC;AAC1D;AAEAjB,SAAS,CAAC4B,qBAAqB,GAAG,IAAI"}
+{"version":3,"file":"FormLabel.js","names":["React","classnames","extendPropsWithContext","isTrue","validateDOMAttributes","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","pickFormElementProps","Context","FormLabel","localProps","context","useContext","props","skeleton","FormRow","formElement","forId","text","srOnly","vertical","size","element","Element","innerRef","className","children","for_id","sr_only","label_direction","attributes","_objectWithoutProperties","_excluded","isInteractive","disabled","onClick","params","_objectSpread","htmlFor","createElement","_supportsSpacingProps"],"sources":["../../../../src/components/form-label/FormLabel.tsx"],"sourcesContent":["/**\n * Web FormLabel Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport {\n  extendPropsWithContext,\n  isTrue,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport Context from '../../shared/Context'\nimport {\n  DynamicElement,\n  DynamicElementParams,\n  SpacingProps,\n} from '../../shared/types'\n\nexport type FormLabelProps = {\n  forId?: string\n  element?: DynamicElement<HTMLLabelElement>\n  text?: React.ReactNode\n  size?: 'basis' | 'medium' | 'large'\n  id?: string\n  skeleton?: boolean\n  label?: React.ReactNode\n  vertical?: boolean\n  srOnly?: boolean\n  innerRef?: React.RefObject<HTMLElement>\n\n  /** Is not a part of HTMLLabelElement and not documented as of now */\n  disabled?: boolean\n\n  /** @deprecated use forId instead */\n  for_id?: string\n  /** @deprecated use srOnly instead */\n  sr_only?: boolean\n  /** @deprecated use labelDirection instead (was not documented before) */\n  label_direction?: 'vertical' | 'horizontal'\n}\n\nexport type FormLabelAllProps = FormLabelProps &\n  React.HTMLAttributes<HTMLLabelElement> &\n  SpacingProps\n\nexport default function FormLabel(localProps: FormLabelAllProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    null,\n    { skeleton: context?.skeleton },\n    pickFormElementProps(context?.FormRow), // Deprecated – can be removed in v11\n    pickFormElementProps(context?.formElement),\n    context?.FormLabel\n  )\n\n  const {\n    forId,\n    text,\n    srOnly,\n    vertical,\n    size,\n    skeleton,\n    element: Element = 'label',\n    innerRef,\n    className,\n    children,\n\n    /** @deprecated can be removed in v11 */\n    for_id,\n    sr_only,\n    label_direction,\n\n    ...attributes\n  } = props\n\n  const isInteractive =\n    !props.disabled &&\n    !srOnly &&\n    (typeof props.onClick === 'function' || forId || for_id)\n\n  const params = {\n    className: classnames(\n      'dnb-form-label',\n      (isTrue(vertical) || label_direction === 'vertical') &&\n        `dnb-form-label--vertical`,\n      (srOnly || isTrue(sr_only)) && 'dnb-sr-only',\n      size && `dnb-h--${size}`,\n      isInteractive && 'dnb-form-label--interactive',\n      createSkeletonClass('font', skeleton, context),\n      createSpacingClasses(props),\n      className\n    ),\n    htmlFor: forId || for_id,\n    ...(attributes as DynamicElementParams),\n  }\n\n  params['ref'] = innerRef\n\n  skeletonDOMAttributes(params, skeleton, context)\n  validateDOMAttributes(localProps, params)\n\n  return <Element {...params}>{text || children}</Element>\n}\n\nFormLabel._supportsSpacingProps = true\n"],"mappings":";;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,sBAAsB,EACtBC,MAAM,EACNC,qBAAqB,QAChB,+BAA+B;AACtC,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SACEC,mBAAmB,EACnBC,qBAAqB,QAChB,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,OAAOC,OAAO,MAAM,sBAAsB;AAkC1C,eAAe,SAASC,SAASA,CAACC,UAA6B,EAAE;EAC/D,MAAMC,OAAO,GAAGZ,KAAK,CAACa,UAAU,CAACJ,OAAO,CAAC;EAGzC,MAAMK,KAAK,GAAGZ,sBAAsB,CAClCS,UAAU,EACV,IAAI,EACJ;IAAEI,QAAQ,EAAEH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG;EAAS,CAAC,EAC/BP,oBAAoB,CAACI,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEI,OAAO,CAAC,EACtCR,oBAAoB,CAACI,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,WAAW,CAAC,EAC1CL,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,SACX,CAAC;EAED,MAAM;MACJQ,KAAK;MACLC,IAAI;MACJC,MAAM;MACNC,QAAQ;MACRC,IAAI;MACJP,QAAQ;MACRQ,OAAO,EAAEC,OAAO,GAAG,OAAO;MAC1BC,QAAQ;MACRC,SAAS;MACTC,QAAQ;MAGRC,MAAM;MACNC,OAAO;MACPC;IAGF,CAAC,GAAGhB,KAAK;IADJiB,UAAU,GAAAC,wBAAA,CACXlB,KAAK,EAAAmB,SAAA;EAET,MAAMC,aAAa,GACjB,CAACpB,KAAK,CAACqB,QAAQ,IACf,CAACf,MAAM,KACN,OAAON,KAAK,CAACsB,OAAO,KAAK,UAAU,IAAIlB,KAAK,IAAIU,MAAM,CAAC;EAE1D,MAAMS,MAAM,GAAAC,aAAA;IACVZ,SAAS,EAAEzB,UAAU,CACnB,gBAAgB,EAChB,CAACE,MAAM,CAACkB,QAAQ,CAAC,IAAIS,eAAe,KAAK,UAAU,KAChD,0BAAyB,EAC5B,CAACV,MAAM,IAAIjB,MAAM,CAAC0B,OAAO,CAAC,KAAK,aAAa,EAG5CvB,mBAAmB,CAAC,MAAM,EAAES,QAAQ,EAAEH,OAAO,CAAC,EAC9CP,oBAAoB,CAACS,KAAK,CAAC,EAC3BY,SAAS,EAJTJ,IAAI,IAAK,UAASA,IAAK,EAAC,EACxBY,aAAa,IAAI,6BAInB,CAAC;IACDK,OAAO,EAAErB,KAAK,IAAIU;EAAM,GACpBG,UAAU,CACf;EAEDM,MAAM,CAAC,KAAK,CAAC,GAAGZ,QAAQ;EAExBlB,qBAAqB,CAAC8B,MAAM,EAAEtB,QAAQ,EAAEH,OAAO,CAAC;EAChDR,qBAAqB,CAACO,UAAU,EAAE0B,MAAM,CAAC;EAEzC,OAAOrC,KAAA,CAAAwC,aAAA,CAAChB,OAAO,EAAKa,MAAM,EAAGlB,IAAI,IAAIQ,QAAkB,CAAC;AAC1D;AAEAjB,SAAS,CAAC+B,qBAAqB,GAAG,IAAI"}

package/components/form-label/style/themes/dnb-form-label-theme-ui.css

@@ -5,9 +5,9 @@
 .dnb-form-label {
   color: var(--color-black-80);
 }
-.dnb-form-label[for]:not([disabled]) {
+.dnb-form-label--interactive {
   cursor: pointer;
 }
-.dnb-form-label[for]:not([disabled]):hover {
+.dnb-form-label--interactive:hover {
   color: var(--color-sea-green);
 }

package/components/form-label/style/themes/dnb-form-label-theme-ui.min.css

@@ -1 +1 @@
-.dnb-form-label{color:var(--color-black-80)}.dnb-form-label[for]:not([disabled]){cursor:pointer}.dnb-form-label[for]:not([disabled]):hover{color:var(--color-sea-green)}
+.dnb-form-label{color:var(--color-black-80)}.dnb-form-label--interactive{cursor:pointer}.dnb-form-label--interactive:hover{color:var(--color-sea-green)}

package/components/form-label/style/themes/dnb-form-label-theme-ui.scss

@@ -6,7 +6,7 @@
 .dnb-form-label {
   color: var(--color-black-80);
 
-  &[for]:not([disabled]) {
+  &--interactive {
     cursor: pointer;
 
     &:hover {

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

@@ -254,5 +254,4 @@ export interface InputMaskedProps
   children?: InputMaskedChildren;
   on_state_update?: (...args: any[]) => any;
 }
-declare const InputMasked: React.FC<InputMaskedProps>;
 export default InputMasked;

package/components/input-masked/InputMasked.js

@@ -27,8 +27,6 @@ const InputMasked = props => {
     }
   }, _InputMaskedElement || (_InputMaskedElement = React.createElement(InputMaskedElement, null)));
 };
-InputMasked._supportsSpacingProps = true;
-export default InputMasked;
 process.env.NODE_ENV !== "production" ? InputMasked.propTypes = _objectSpread({
   mask: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func]),
   number_mask: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.object]),
@@ -75,4 +73,6 @@ InputMasked.defaultProps = _objectSpread(_objectSpread({}, Input.defaultProps),
   on_submit_focus: null,
   on_submit_blur: null
 });
+InputMasked._supportsSpacingProps = true;
+export default InputMasked;
 //# sourceMappingURL=InputMasked.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputMasked.js","names":["React","PropTypes","extendPropsWithContext","InputMaskedContext","InputMaskedElement","Input","inputPropTypes","Context","InputMasked","props","context","useContext","mask","alias","key","test","contextAndProps","useCallback","defaultProps","createElement","Provider","value","_InputMaskedElement","_supportsSpacingProps","process","env","NODE_ENV","propTypes","_objectSpread","oneOfType","object","array","func","number_mask","string","bool","currency_mask","mask_options","number_format","locale","as_currency","as_number","as_percent","show_mask","show_guide","pipe","keep_char_positions","placeholder_char","inner_ref","on_change","on_submit","on_focus","on_blur","on_submit_focus","on_submit_blur"],"sources":["../../../../src/components/input-masked/InputMasked.js"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n/**\n * Web InputMasked Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport InputMaskedContext from './InputMaskedContext'\nimport InputMaskedElement from './InputMaskedElement'\nimport Input, { inputPropTypes } from '../input/Input'\nimport Context from '../../shared/Context'\n\nconst InputMasked = (props) => {\n  const context = React.useContext(Context)\n\n  // Remove masks defined in Provider/Context, because it overwrites a custom mask\n  if (props?.mask) {\n    const alias = context?.InputMasked\n    for (const key in alias) {\n      if (/^as[_A-Z]|number_mask|currency_mask/.test(key)) {\n        delete alias[key]\n      }\n    }\n  }\n\n  const contextAndProps = React.useCallback(\n    extendPropsWithContext(\n      props,\n      InputMasked.defaultProps,\n      context?.InputMasked\n    ),\n    [props, InputMasked.defaultProps, context?.InputMasked]\n  )\n\n  return (\n    <InputMaskedContext.Provider\n      value={{\n        props: contextAndProps,\n        context,\n      }}\n    >\n      <InputMaskedElement />\n    </InputMaskedContext.Provider>\n  )\n}\n\nInputMasked._supportsSpacingProps = true\n\nexport default InputMasked\n\nInputMasked.propTypes = {\n  mask: PropTypes.oneOfType([\n    PropTypes.object,\n    PropTypes.array,\n    PropTypes.func,\n  ]),\n  number_mask: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n    PropTypes.object,\n  ]),\n  currency_mask: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n    PropTypes.object,\n  ]),\n  mask_options: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n  number_format: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n  locale: PropTypes.string,\n  as_currency: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  as_number: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  as_percent: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  show_mask: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  show_guide: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  pipe: PropTypes.func,\n  keep_char_positions: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n  ]),\n  placeholder_char: PropTypes.string,\n  inner_ref: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),\n\n  on_change: PropTypes.func,\n  on_submit: PropTypes.func,\n  on_focus: PropTypes.func,\n  on_blur: PropTypes.func,\n  on_submit_focus: PropTypes.func,\n  on_submit_blur: PropTypes.func,\n\n  ...inputPropTypes,\n}\n\nInputMasked.defaultProps = {\n  ...Input.defaultProps,\n\n  mask: null,\n  number_mask: null,\n  currency_mask: null,\n  mask_options: null,\n  number_format: null,\n  as_currency: null,\n  as_number: null,\n  as_percent: null,\n  locale: null,\n  show_mask: false,\n  show_guide: true,\n  pipe: null,\n  keep_char_positions: false,\n  placeholder_char: null,\n  inner_ref: null,\n\n  on_change: null,\n  on_submit: null,\n  on_focus: null,\n  on_blur: null,\n  on_submit_focus: null,\n  on_submit_blur: null,\n}\n"],"mappings":";;;;AAMA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,sBAAsB,QAAQ,+BAA+B;AACtE,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,KAAK,IAAIC,cAAc,QAAQ,gBAAgB;AACtD,OAAOC,OAAO,MAAM,sBAAsB;AAE1C,MAAMC,WAAW,GAAIC,KAAK,IAAK;EAC7B,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAACJ,OAAO,CAAC;EAGzC,IAAIE,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEG,IAAI,EAAE;IACf,MAAMC,KAAK,GAAGH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,WAAW;IAClC,KAAK,MAAMM,GAAG,IAAID,KAAK,EAAE;MACvB,IAAI,qCAAqC,CAACE,IAAI,CAACD,GAAG,CAAC,EAAE;QACnD,OAAOD,KAAK,CAACC,GAAG,CAAC;MACnB;IACF;EACF;EAEA,MAAME,eAAe,GAAGhB,KAAK,CAACiB,WAAW,CACvCf,sBAAsB,CACpBO,KAAK,EACLD,WAAW,CAACU,YAAY,EACxBR,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,WACX,CAAC,EACD,CAACC,KAAK,EAAED,WAAW,CAACU,YAAY,EAAER,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,WAAW,CACxD,CAAC;EAED,OACER,KAAA,CAAAmB,aAAA,CAAChB,kBAAkB,CAACiB,QAAQ;IAC1BC,KAAK,EAAE;MACLZ,KAAK,EAAEO,eAAe;MACtBN;IACF;EAAE,GAAAY,mBAAA,KAAAA,mBAAA,GAEFtB,KAAA,CAAAmB,aAAA,CAACf,kBAAkB,MAAE,CAAC,CACK,CAAC;AAElC,CAAC;AAEDI,WAAW,CAACe,qBAAqB,GAAG,IAAI;AAExC,eAAef,WAAW;AAE1BgB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAAlB,WAAW,CAACmB,SAAS,GAAAC,aAAA;EACnBhB,IAAI,EAAEX,SAAS,CAAC4B,SAAS,CAAC,CACxB5B,SAAS,CAAC6B,MAAM,EAChB7B,SAAS,CAAC8B,KAAK,EACf9B,SAAS,CAAC+B,IAAI,CACf,CAAC;EACFC,WAAW,EAAEhC,SAAS,CAAC4B,SAAS,CAAC,CAC/B5B,SAAS,CAACiC,MAAM,EAChBjC,SAAS,CAACkC,IAAI,EACdlC,SAAS,CAAC6B,MAAM,CACjB,CAAC;EACFM,aAAa,EAAEnC,SAAS,CAAC4B,SAAS,CAAC,CACjC5B,SAAS,CAACiC,MAAM,EAChBjC,SAAS,CAACkC,IAAI,EACdlC,SAAS,CAAC6B,MAAM,CACjB,CAAC;EACFO,YAAY,EAAEpC,SAAS,CAAC4B,SAAS,CAAC,CAAC5B,SAAS,CAACiC,MAAM,EAAEjC,SAAS,CAAC6B,MAAM,CAAC,CAAC;EACvEQ,aAAa,EAAErC,SAAS,CAAC4B,SAAS,CAAC,CAAC5B,SAAS,CAACiC,MAAM,EAAEjC,SAAS,CAAC6B,MAAM,CAAC,CAAC;EACxES,MAAM,EAAEtC,SAAS,CAACiC,MAAM;EACxBM,WAAW,EAAEvC,SAAS,CAAC4B,SAAS,CAAC,CAAC5B,SAAS,CAACiC,MAAM,EAAEjC,SAAS,CAACkC,IAAI,CAAC,CAAC;EACpEM,SAAS,EAAExC,SAAS,CAAC4B,SAAS,CAAC,CAAC5B,SAAS,CAACiC,MAAM,EAAEjC,SAAS,CAACkC,IAAI,CAAC,CAAC;EAClEO,UAAU,EAAEzC,SAAS,CAAC4B,SAAS,CAAC,CAAC5B,SAAS,CAACiC,MAAM,EAAEjC,SAAS,CAACkC,IAAI,CAAC,CAAC;EACnEQ,SAAS,EAAE1C,SAAS,CAAC4B,SAAS,CAAC,CAAC5B,SAAS,CAACiC,MAAM,EAAEjC,SAAS,CAACkC,IAAI,CAAC,CAAC;EAClES,UAAU,EAAE3C,SAAS,CAAC4B,SAAS,CAAC,CAAC5B,SAAS,CAACiC,MAAM,EAAEjC,SAAS,CAACkC,IAAI,CAAC,CAAC;EACnEU,IAAI,EAAE5C,SAAS,CAAC+B,IAAI;EACpBc,mBAAmB,EAAE7C,SAAS,CAAC4B,SAAS,CAAC,CACvC5B,SAAS,CAACiC,MAAM,EAChBjC,SAAS,CAACkC,IAAI,CACf,CAAC;EACFY,gBAAgB,EAAE9C,SAAS,CAACiC,MAAM;EAClCc,SAAS,EAAE/C,SAAS,CAAC4B,SAAS,CAAC,CAAC5B,SAAS,CAAC6B,MAAM,EAAE7B,SAAS,CAAC+B,IAAI,CAAC,CAAC;EAElEiB,SAAS,EAAEhD,SAAS,CAAC+B,IAAI;EACzBkB,SAAS,EAAEjD,SAAS,CAAC+B,IAAI;EACzBmB,QAAQ,EAAElD,SAAS,CAAC+B,IAAI;EACxBoB,OAAO,EAAEnD,SAAS,CAAC+B,IAAI;EACvBqB,eAAe,EAAEpD,SAAS,CAAC+B,IAAI;EAC/BsB,cAAc,EAAErD,SAAS,CAAC+B;AAAI,GAE3B1B,cAAc,CAClB;AAEDE,WAAW,CAACU,YAAY,GAAAU,aAAA,CAAAA,aAAA,KACnBvB,KAAK,CAACa,YAAY;EAErBN,IAAI,EAAE,IAAI;EACVqB,WAAW,EAAE,IAAI;EACjBG,aAAa,EAAE,IAAI;EACnBC,YAAY,EAAE,IAAI;EAClBC,aAAa,EAAE,IAAI;EACnBE,WAAW,EAAE,IAAI;EACjBC,SAAS,EAAE,IAAI;EACfC,UAAU,EAAE,IAAI;EAChBH,MAAM,EAAE,IAAI;EACZI,SAAS,EAAE,KAAK;EAChBC,UAAU,EAAE,IAAI;EAChBC,IAAI,EAAE,IAAI;EACVC,mBAAmB,EAAE,KAAK;EAC1BC,gBAAgB,EAAE,IAAI;EACtBC,SAAS,EAAE,IAAI;EAEfC,SAAS,EAAE,IAAI;EACfC,SAAS,EAAE,IAAI;EACfC,QAAQ,EAAE,IAAI;EACdC,OAAO,EAAE,IAAI;EACbC,eAAe,EAAE,IAAI;EACrBC,cAAc,EAAE;AAAI,EACrB"}
+{"version":3,"file":"InputMasked.js","names":["React","PropTypes","extendPropsWithContext","InputMaskedContext","InputMaskedElement","Input","inputPropTypes","Context","InputMasked","props","context","useContext","mask","alias","key","test","contextAndProps","useCallback","defaultProps","createElement","Provider","value","_InputMaskedElement","process","env","NODE_ENV","propTypes","_objectSpread","oneOfType","object","array","func","number_mask","string","bool","currency_mask","mask_options","number_format","locale","as_currency","as_number","as_percent","show_mask","show_guide","pipe","keep_char_positions","placeholder_char","inner_ref","on_change","on_submit","on_focus","on_blur","on_submit_focus","on_submit_blur","_supportsSpacingProps"],"sources":["../../../../src/components/input-masked/InputMasked.js"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n/**\n * Web InputMasked Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport InputMaskedContext from './InputMaskedContext'\nimport InputMaskedElement from './InputMaskedElement'\nimport Input, { inputPropTypes } from '../input/Input'\nimport Context from '../../shared/Context'\n\nconst InputMasked = (props) => {\n  const context = React.useContext(Context)\n\n  // Remove masks defined in Provider/Context, because it overwrites a custom mask\n  if (props?.mask) {\n    const alias = context?.InputMasked\n    for (const key in alias) {\n      if (/^as[_A-Z]|number_mask|currency_mask/.test(key)) {\n        delete alias[key]\n      }\n    }\n  }\n\n  const contextAndProps = React.useCallback(\n    extendPropsWithContext(\n      props,\n      InputMasked.defaultProps,\n      context?.InputMasked\n    ),\n    [props, InputMasked.defaultProps, context?.InputMasked]\n  )\n\n  return (\n    <InputMaskedContext.Provider\n      value={{\n        props: contextAndProps,\n        context,\n      }}\n    >\n      <InputMaskedElement />\n    </InputMaskedContext.Provider>\n  )\n}\n\nInputMasked.propTypes = {\n  mask: PropTypes.oneOfType([\n    PropTypes.object,\n    PropTypes.array,\n    PropTypes.func,\n  ]),\n  number_mask: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n    PropTypes.object,\n  ]),\n  currency_mask: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n    PropTypes.object,\n  ]),\n  mask_options: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n  number_format: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n  locale: PropTypes.string,\n  as_currency: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  as_number: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  as_percent: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  show_mask: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  show_guide: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  pipe: PropTypes.func,\n  keep_char_positions: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n  ]),\n  placeholder_char: PropTypes.string,\n  inner_ref: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),\n\n  on_change: PropTypes.func,\n  on_submit: PropTypes.func,\n  on_focus: PropTypes.func,\n  on_blur: PropTypes.func,\n  on_submit_focus: PropTypes.func,\n  on_submit_blur: PropTypes.func,\n\n  ...inputPropTypes,\n}\n\nInputMasked.defaultProps = {\n  ...Input.defaultProps,\n\n  mask: null,\n  number_mask: null,\n  currency_mask: null,\n  mask_options: null,\n  number_format: null,\n  as_currency: null,\n  as_number: null,\n  as_percent: null,\n  locale: null,\n  show_mask: false,\n  show_guide: true,\n  pipe: null,\n  keep_char_positions: false,\n  placeholder_char: null,\n  inner_ref: null,\n\n  on_change: null,\n  on_submit: null,\n  on_focus: null,\n  on_blur: null,\n  on_submit_focus: null,\n  on_submit_blur: null,\n}\n\nInputMasked._supportsSpacingProps = true\n\nexport default InputMasked\n"],"mappings":"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"}

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { SpacingProps } from '../space/types';
+import { FormStatusState, FormStatusText } from '../FormStatus';
+export type MultiInputMaskInput<T extends string> = {
+    /**
+     * Defines the id for the input. This id is also used to map the input value to the correct property on the objects used for `values` and `onChange` paramaters.
+     */
+    id: T;
+    /**
+     * Label used by the input. The label itself is hidden, but required to uphold accesability standards for screen readers.
+     */
+    label: React.ReactNode;
+    /**
+     * Each RegExp item in the array defines what the mask should be for each subsequent character in the input. The length sets the size of the input, so an array of two items would produce an input of two characters
+     */
+    mask: RegExp[];
+    /**
+     * Sets the placeholder character used for the input.
+     */
+    placeholderCharacter: string;
+};
+export type MultiInputMaskValue<T extends string> = {
+    [K in T]: string;
+};
+export type MultiInputMaskProps<T extends string> = {
+    /**
+     * The label describing the group of inputs inside the components.
+     */
+    label?: React.ReactNode;
+    /**
+     * Use to change the label layout direction. Defaults to `horizontal`.
+     */
+    labelDirection?: 'vertical' | 'horizontal';
+    /**
+     * Used to define the different inputs representing the inputs in the component. The id's defined here is used to map input value to correct property in `values` parameters used in `onChange`
+     */
+    inputs: MultiInputMaskInput<T>[];
+    /**
+     * Values used for the inputs inside the component. Expects an object with keys matching the id's defined in `inputs`
+     */
+    values?: MultiInputMaskValue<T>;
+    /**
+     * Defines the delimiter used to seperate the inputs inside the component.
+     */
+    delimiter?: string;
+    /**
+     * Runs when the input value changes. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`
+     */
+    onChange?: (values: MultiInputMaskValue<T>) => void;
+    /**
+     * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
+     */
+    status?: FormStatusText;
+    /**
+     * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
+     */
+    statusState?: FormStatusState;
+} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'ref' | 'value' | 'label'> & SpacingProps;
+declare function MultiInputMask<T extends string>({ label, labelDirection, inputs, delimiter, onChange: onChangeExternal, disabled, status, statusState, values: defaultValues, className, ...props }: MultiInputMaskProps<T>): import("react/jsx-runtime").JSX.Element;
+export default MultiInputMask;

package/components/input-masked/MultiInputMask.js

@@ -0,0 +1,148 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["label", "labelDirection", "inputs", "delimiter", "onChange", "disabled", "status", "statusState", "values", "className"];
+import React, { Fragment, useRef } from 'react';
+import Input from '../Input';
+import TextMask from './TextMask';
+import useHandleCursorPosition from './hooks/useHandleCursorPosition';
+import classnames from 'classnames';
+import FormLabel from '../FormLabel';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import { useMultiInputValue } from './hooks/useMultiInputValues';
+function MultiInputMask(_ref) {
+  let {
+      label,
+      labelDirection = 'horizontal',
+      inputs,
+      delimiter,
+      onChange: onChangeExternal,
+      disabled,
+      status,
+      statusState,
+      values: defaultValues,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [values, onChange] = useMultiInputValue({
+    inputs,
+    defaultValues,
+    callback: onChangeExternal
+  });
+  const inputRefs = useRef([]);
+  const {
+    onKeyDown
+  } = useHandleCursorPosition(inputRefs.current, getKeysToHandle());
+  const WrapperElement = label ? 'fieldset' : 'div';
+  return React.createElement(WrapperElement, {
+    className: classnames('dnb-multi-input-mask__fieldset', createSpacingClasses(props), labelDirection === 'horizontal' && 'dnb-multi-input-mask__fieldset--horizontal')
+  }, label && React.createElement(FormLabel, {
+    className: 'dnb-multi-input-mask__legend' + (labelDirection === 'horizontal' ? " dnb-multi-input-mask__legend--horizontal" : ""),
+    element: "legend",
+    onClick: onLegendClick,
+    disabled: disabled,
+    vertical: labelDirection === 'vertical'
+  }, React.createElement("span", null, label)), React.createElement(Input, _extends({}, props, {
+    className: classnames('dnb-multi-input-mask', className),
+    disabled: disabled,
+    status: status,
+    status_state: statusState,
+    input_element: inputs.map((input, index) => React.createElement(Fragment, {
+      key: input.id
+    }, React.createElement(MultiInputMaskInput, _extends({}, input, {
+      value: values[input.id],
+      delimiter: index !== inputs.length - 1 ? delimiter : undefined,
+      onKeyDown: onKeyDown,
+      onChange: onChange,
+      disabled: disabled,
+      inputRef: getInputRef
+    }))))
+  })));
+  function onLegendClick() {
+    if (disabled) {
+      return;
+    }
+    const firstInput = inputRefs.current[0].current;
+    firstInput.focus();
+    firstInput.setSelectionRange(0, 0);
+  }
+  function getInputRef(ref) {
+    const inputRef = ref === null || ref === void 0 ? void 0 : ref.inputRef;
+    if (inputRef && !inputRefs.current.includes(inputRef)) {
+      inputRefs.current.push(inputRef);
+    }
+  }
+  function getKeysToHandle() {
+    const uniqueMasks = getUniqueMasks();
+    if (uniqueMasks.size === 1) {
+      const pattern = uniqueMasks.values().next().value.replace(/\//g, '');
+      return new RegExp(pattern);
+    }
+    return inputs.reduce((keys, _ref2) => {
+      let {
+        id,
+        mask
+      } = _ref2;
+      keys[`${id}__input`] = mask;
+      return keys;
+    }, {});
+  }
+  function getUniqueMasks() {
+    const masks = new Set();
+    inputs.forEach(input => {
+      input.mask.forEach(pattern => masks.add(String(pattern)));
+    });
+    return masks;
+  }
+}
+function MultiInputMaskInput(_ref3) {
+  let {
+    id,
+    label,
+    value,
+    mask,
+    placeholderCharacter,
+    delimiter,
+    disabled,
+    inputRef,
+    onKeyDown,
+    onChange
+  } = _ref3;
+  return React.createElement(React.Fragment, null, React.createElement(TextMask, {
+    id: `${id}__input`,
+    className: "dnb-input__input dnb-multi-input-mask__input" + (value ? " dnb-multi-input-mask__input--highlight" : ""),
+    disabled: disabled,
+    size: mask.length,
+    mask: mask,
+    value: value ?? '',
+    placeholderChar: placeholderCharacter,
+    guide: true,
+    showMask: true,
+    keepCharPositions: false,
+    "aria-labelledby": `${id}__label`,
+    ref: inputRef,
+    onKeyDown: onKeyDown,
+    onFocus: onFocus,
+    onChange: event => {
+      onChange(id, removePlaceholder(event.target.value, placeholderCharacter));
+    }
+  }), React.createElement("label", {
+    id: `${id}__label`,
+    htmlFor: `${id}__input`,
+    hidden: true
+  }, label), delimiter && React.createElement("span", {
+    "aria-hidden": true,
+    className: 'dnb-multi-input-mask__delimiter' + (value ? " dnb-multi-input-mask__delimiter--highlight" : "")
+  }, delimiter));
+  function removePlaceholder(value, placeholder) {
+    return value.replace(RegExp(placeholder, 'gm'), '');
+  }
+  function onFocus(_ref4) {
+    let {
+      target
+    } = _ref4;
+    target.focus();
+    target.select();
+  }
+}
+export default MultiInputMask;
+//# sourceMappingURL=MultiInputMask.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiInputMask.js","names":["React","Fragment","useRef","Input","TextMask","useHandleCursorPosition","classnames","FormLabel","createSpacingClasses","useMultiInputValue","MultiInputMask","_ref","label","labelDirection","inputs","delimiter","onChange","onChangeExternal","disabled","status","statusState","values","defaultValues","className","props","_objectWithoutProperties","_excluded","callback","inputRefs","onKeyDown","current","getKeysToHandle","WrapperElement","createElement","element","onClick","onLegendClick","vertical","_extends","status_state","input_element","map","input","index","key","id","MultiInputMaskInput","value","length","undefined","inputRef","getInputRef","firstInput","focus","setSelectionRange","ref","includes","push","uniqueMasks","getUniqueMasks","size","pattern","next","replace","RegExp","reduce","keys","_ref2","mask","masks","Set","forEach","add","String","_ref3","placeholderCharacter","placeholderChar","guide","showMask","keepCharPositions","onFocus","event","removePlaceholder","target","htmlFor","hidden","placeholder","_ref4","select"],"sources":["../../../../src/components/input-masked/MultiInputMask.tsx"],"sourcesContent":["import React, { Fragment, MutableRefObject, useRef } from 'react'\nimport Input from '../Input'\nimport TextMask from './TextMask'\nimport useHandleCursorPosition from './hooks/useHandleCursorPosition'\nimport classnames from 'classnames'\nimport FormLabel from '../FormLabel'\nimport { SpacingProps } from '../space/types'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { FormStatusState, FormStatusText } from '../FormStatus'\nimport { useMultiInputValue } from './hooks/useMultiInputValues'\n\nexport type MultiInputMaskInput<T extends string> = {\n  /**\n   * Defines the id for the input. This id is also used to map the input value to the correct property on the objects used for `values` and `onChange` paramaters.\n   */\n  id: T\n  /**\n   * Label used by the input. The label itself is hidden, but required to uphold accesability standards for screen readers.\n   */\n  label: React.ReactNode\n  /**\n   * Each RegExp item in the array defines what the mask should be for each subsequent character in the input. The length sets the size of the input, so an array of two items would produce an input of two characters\n   */\n  mask: RegExp[]\n  /**\n   * Sets the placeholder character used for the input.\n   */\n  placeholderCharacter: string\n}\n\nexport type MultiInputMaskValue<T extends string> = {\n  // eslint-disable-next-line no-unused-vars\n  [K in T]: string\n}\n\nexport type MultiInputMaskProps<T extends string> = {\n  /**\n   * The label describing the group of inputs inside the components.\n   */\n  label?: React.ReactNode\n  /**\n   * Use to change the label layout direction. Defaults to `horizontal`.\n   */\n  labelDirection?: 'vertical' | 'horizontal'\n  /**\n   * Used to define the different inputs representing the inputs in the component. The id's defined here is used to map input value to correct property in `values` parameters used in `onChange`\n   */\n  inputs: MultiInputMaskInput<T>[]\n  /**\n   * Values used for the inputs inside the component. Expects an object with keys matching the id's defined in `inputs`\n   */\n  values?: MultiInputMaskValue<T>\n  /**\n   * Defines the delimiter used to seperate the inputs inside the component.\n   */\n  delimiter?: string\n  /**\n   * Runs when the input value changes. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n   */\n  onChange?: (values: MultiInputMaskValue<T>) => void\n  /**\n   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n   */\n  status?: FormStatusText\n  /**\n   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n   */\n  statusState?: FormStatusState\n} & Omit<\n  React.HTMLProps<HTMLInputElement>,\n  'onChange' | 'ref' | 'value' | 'label'\n> &\n  SpacingProps\n\nfunction MultiInputMask<T extends string>({\n  label,\n  labelDirection = 'horizontal',\n  inputs,\n  delimiter,\n  onChange: onChangeExternal,\n  disabled,\n  status,\n  statusState,\n  values: defaultValues,\n  className,\n  ...props\n}: MultiInputMaskProps<T>) {\n  const [values, onChange] = useMultiInputValue({\n    inputs,\n    defaultValues,\n    callback: onChangeExternal,\n  })\n\n  const inputRefs = useRef<Array<MutableRefObject<HTMLInputElement>>>([])\n\n  const { onKeyDown } = useHandleCursorPosition(\n    inputRefs.current,\n    getKeysToHandle()\n  )\n\n  const WrapperElement = label ? 'fieldset' : 'div'\n\n  return (\n    <WrapperElement\n      className={classnames(\n        'dnb-multi-input-mask__fieldset',\n        labelDirection === 'horizontal' &&\n          'dnb-multi-input-mask__fieldset--horizontal',\n        createSpacingClasses(props)\n      )}\n    >\n      {label && (\n        <FormLabel\n          className={classnames(\n            'dnb-multi-input-mask__legend',\n            labelDirection === 'horizontal' &&\n              'dnb-multi-input-mask__legend--horizontal'\n          )}\n          element=\"legend\"\n          onClick={onLegendClick}\n          disabled={disabled}\n          vertical={labelDirection === 'vertical'}\n        >\n          {/* This <span/> wrapper is needed to make hover work in Safari Desktop */}\n          <span>{label}</span>\n        </FormLabel>\n      )}\n      <Input\n        {...props}\n        className={classnames('dnb-multi-input-mask', className)}\n        disabled={disabled}\n        status={status}\n        status_state={statusState}\n        input_element={inputs.map((input, index) => (\n          <Fragment key={input.id}>\n            <MultiInputMaskInput\n              {...input}\n              value={values[input.id]}\n              delimiter={\n                index !== inputs.length - 1 ? delimiter : undefined\n              }\n              onKeyDown={onKeyDown}\n              onChange={onChange}\n              disabled={disabled}\n              inputRef={getInputRef}\n            />\n          </Fragment>\n        ))}\n      />\n    </WrapperElement>\n  )\n\n  // Event handlers\n  function onLegendClick() {\n    if (disabled) {\n      return\n    }\n\n    const firstInput = inputRefs.current[0].current\n\n    firstInput.focus()\n    firstInput.setSelectionRange(0, 0)\n  }\n\n  // Utilites\n  function getInputRef(ref: any) {\n    const inputRef = ref?.inputRef\n\n    if (inputRef && !inputRefs.current.includes(inputRef)) {\n      inputRefs.current.push(inputRef)\n    }\n  }\n\n  function getKeysToHandle() {\n    const uniqueMasks = getUniqueMasks()\n\n    // Return the only one RegExp since all the inputs are using the same mask\n    if (uniqueMasks.size === 1) {\n      const pattern = uniqueMasks.values().next().value.replace(/\\//g, '')\n      return new RegExp(pattern)\n    }\n\n    // If there are multiple types of masks used, then map the maps to an object based on input ids\n    // So that useHandleCursorPosition can do a per character test to see if the pressed key should be handeled or not\n    return inputs.reduce(\n      (keys, { id, mask }) => {\n        keys[`${id}__input`] = mask\n\n        return keys\n      },\n      {} as Record<`${T}__input`, RegExp[]>\n    )\n  }\n\n  function getUniqueMasks() {\n    const masks = new Set()\n\n    inputs.forEach((input) => {\n      input.mask.forEach((pattern) => masks.add(String(pattern)))\n    })\n\n    return masks\n  }\n}\n\ntype MultiInputMaskInputProps<T extends string> =\n  MultiInputMaskInput<T> & {\n    id: MultiInputMaskInput<T>['id']\n    label: MultiInputMaskInput<T>['label']\n    value: string\n    mask: MultiInputMaskInput<T>['mask']\n    placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    delimiter?: MultiInputMaskProps<T>['delimiter']\n    disabled: boolean\n    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void\n    onChange: (\n      id: string,\n      placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    ) => void\n    inputRef: any\n  }\n\nfunction MultiInputMaskInput<T extends string>({\n  id,\n  label,\n  value,\n  mask,\n  placeholderCharacter,\n  delimiter,\n  disabled,\n  inputRef,\n  onKeyDown,\n  onChange,\n}: MultiInputMaskInputProps<T>) {\n  return (\n    <>\n      <TextMask\n        id={`${id}__input`}\n        className={classnames(\n          'dnb-input__input',\n          'dnb-multi-input-mask__input',\n          value && 'dnb-multi-input-mask__input--highlight'\n        )}\n        disabled={disabled}\n        size={mask.length}\n        mask={mask}\n        value={value ?? ''}\n        placeholderChar={placeholderCharacter}\n        guide={true}\n        showMask={true}\n        keepCharPositions={false} // so we can overwrite next value, if it already exists\n        aria-labelledby={`${id}__label`}\n        ref={inputRef}\n        onKeyDown={onKeyDown}\n        onFocus={onFocus}\n        onChange={(event) => {\n          onChange(\n            id,\n            removePlaceholder(event.target.value, placeholderCharacter)\n          )\n        }}\n      />\n      <label id={`${id}__label`} htmlFor={`${id}__input`} hidden>\n        {label}\n      </label>\n      {delimiter && (\n        <span\n          aria-hidden\n          className={classnames(\n            'dnb-multi-input-mask__delimiter',\n            value && 'dnb-multi-input-mask__delimiter--highlight'\n          )}\n        >\n          {delimiter}\n        </span>\n      )}\n    </>\n  )\n\n  function removePlaceholder(value: string, placeholder: string) {\n    return value.replace(RegExp(placeholder, 'gm'), '')\n  }\n\n  function onFocus({ target }: React.FocusEvent<HTMLInputElement>) {\n    target.focus()\n    target.select()\n  }\n}\n\nexport default MultiInputMask\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAoBC,MAAM,QAAQ,OAAO;AACjE,OAAOC,KAAK,MAAM,UAAU;AAC5B,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,uBAAuB,MAAM,iCAAiC;AACrE,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAM,cAAc;AAEpC,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D,SAASC,kBAAkB,QAAQ,6BAA6B;AAiEhE,SAASC,cAAcA,CAAAC,IAAA,EAYI;EAAA,IAZe;MACxCC,KAAK;MACLC,cAAc,GAAG,YAAY;MAC7BC,MAAM;MACNC,SAAS;MACTC,QAAQ,EAAEC,gBAAgB;MAC1BC,QAAQ;MACRC,MAAM;MACNC,WAAW;MACXC,MAAM,EAAEC,aAAa;MACrBC;IAEsB,CAAC,GAAAZ,IAAA;IADpBa,KAAK,GAAAC,wBAAA,CAAAd,IAAA,EAAAe,SAAA;EAER,MAAM,CAACL,MAAM,EAAEL,QAAQ,CAAC,GAAGP,kBAAkB,CAAC;IAC5CK,MAAM;IACNQ,aAAa;IACbK,QAAQ,EAAEV;EACZ,CAAC,CAAC;EAEF,MAAMW,SAAS,GAAG1B,MAAM,CAA4C,EAAE,CAAC;EAEvE,MAAM;IAAE2B;EAAU,CAAC,GAAGxB,uBAAuB,CAC3CuB,SAAS,CAACE,OAAO,EACjBC,eAAe,CAAC,CAClB,CAAC;EAED,MAAMC,cAAc,GAAGpB,KAAK,GAAG,UAAU,GAAG,KAAK;EAEjD,OACEZ,KAAA,CAAAiC,aAAA,CAACD,cAAc;IACbT,SAAS,EAAEjB,UAAU,CACnB,gCAAgC,EAGhCE,oBAAoB,CAACgB,KAAK,CAAC,EAF3BX,cAAc,KAAK,YAAY,IAC7B,4CAEJ;EAAE,GAEDD,KAAK,IACJZ,KAAA,CAAAiC,aAAA,CAAC1B,SAAS;IACRgB,SAAS,EACP,8BAA8B,IAC9BV,cAAc,KAAK,YAAY,oDAE/B;IACFqB,OAAO,EAAC,QAAQ;IAChBC,OAAO,EAAEC,aAAc;IACvBlB,QAAQ,EAAEA,QAAS;IACnBmB,QAAQ,EAAExB,cAAc,KAAK;EAAW,GAGxCb,KAAA,CAAAiC,aAAA,eAAOrB,KAAY,CACV,CACZ,EACDZ,KAAA,CAAAiC,aAAA,CAAC9B,KAAK,EAAAmC,QAAA,KACAd,KAAK;IACTD,SAAS,EAAEjB,UAAU,CAAC,sBAAsB,EAAEiB,SAAS,CAAE;IACzDL,QAAQ,EAAEA,QAAS;IACnBC,MAAM,EAAEA,MAAO;IACfoB,YAAY,EAAEnB,WAAY;IAC1BoB,aAAa,EAAE1B,MAAM,CAAC2B,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KACrC3C,KAAA,CAAAiC,aAAA,CAAChC,QAAQ;MAAC2C,GAAG,EAAEF,KAAK,CAACG;IAAG,GACtB7C,KAAA,CAAAiC,aAAA,CAACa,mBAAmB,EAAAR,QAAA,KACdI,KAAK;MACTK,KAAK,EAAE1B,MAAM,CAACqB,KAAK,CAACG,EAAE,CAAE;MACxB9B,SAAS,EACP4B,KAAK,KAAK7B,MAAM,CAACkC,MAAM,GAAG,CAAC,GAAGjC,SAAS,GAAGkC,SAC3C;MACDpB,SAAS,EAAEA,SAAU;MACrBb,QAAQ,EAAEA,QAAS;MACnBE,QAAQ,EAAEA,QAAS;MACnBgC,QAAQ,EAAEC;IAAY,EACvB,CACO,CACX;EAAE,EACJ,CACa,CAAC;EAInB,SAASf,aAAaA,CAAA,EAAG;IACvB,IAAIlB,QAAQ,EAAE;MACZ;IACF;IAEA,MAAMkC,UAAU,GAAGxB,SAAS,CAACE,OAAO,CAAC,CAAC,CAAC,CAACA,OAAO;IAE/CsB,UAAU,CAACC,KAAK,CAAC,CAAC;IAClBD,UAAU,CAACE,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC;EACpC;EAGA,SAASH,WAAWA,CAACI,GAAQ,EAAE;IAC7B,MAAML,QAAQ,GAAGK,GAAG,aAAHA,GAAG,uBAAHA,GAAG,CAAEL,QAAQ;IAE9B,IAAIA,QAAQ,IAAI,CAACtB,SAAS,CAACE,OAAO,CAAC0B,QAAQ,CAACN,QAAQ,CAAC,EAAE;MACrDtB,SAAS,CAACE,OAAO,CAAC2B,IAAI,CAACP,QAAQ,CAAC;IAClC;EACF;EAEA,SAASnB,eAAeA,CAAA,EAAG;IACzB,MAAM2B,WAAW,GAAGC,cAAc,CAAC,CAAC;IAGpC,IAAID,WAAW,CAACE,IAAI,KAAK,CAAC,EAAE;MAC1B,MAAMC,OAAO,GAAGH,WAAW,CAACrC,MAAM,CAAC,CAAC,CAACyC,IAAI,CAAC,CAAC,CAACf,KAAK,CAACgB,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;MACpE,OAAO,IAAIC,MAAM,CAACH,OAAO,CAAC;IAC5B;IAIA,OAAO/C,MAAM,CAACmD,MAAM,CAClB,CAACC,IAAI,EAAAC,KAAA,KAAmB;MAAA,IAAjB;QAAEtB,EAAE;QAAEuB;MAAK,CAAC,GAAAD,KAAA;MACjBD,IAAI,CAAE,GAAErB,EAAG,SAAQ,CAAC,GAAGuB,IAAI;MAE3B,OAAOF,IAAI;IACb,CAAC,EACD,CAAC,CACH,CAAC;EACH;EAEA,SAASP,cAAcA,CAAA,EAAG;IACxB,MAAMU,KAAK,GAAG,IAAIC,GAAG,CAAC,CAAC;IAEvBxD,MAAM,CAACyD,OAAO,CAAE7B,KAAK,IAAK;MACxBA,KAAK,CAAC0B,IAAI,CAACG,OAAO,CAAEV,OAAO,IAAKQ,KAAK,CAACG,GAAG,CAACC,MAAM,CAACZ,OAAO,CAAC,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,OAAOQ,KAAK;EACd;AACF;AAmBA,SAASvB,mBAAmBA,CAAA4B,KAAA,EAWI;EAAA,IAXe;IAC7C7B,EAAE;IACFjC,KAAK;IACLmC,KAAK;IACLqB,IAAI;IACJO,oBAAoB;IACpB5D,SAAS;IACTG,QAAQ;IACRgC,QAAQ;IACRrB,SAAS;IACTb;EAC2B,CAAC,GAAA0D,KAAA;EAC5B,OACE1E,KAAA,CAAAiC,aAAA,CAAAjC,KAAA,CAAAC,QAAA,QACED,KAAA,CAAAiC,aAAA,CAAC7B,QAAQ;IACPyC,EAAE,EAAG,GAAEA,EAAG,SAAS;IACnBtB,SAAS,oDAGPwB,KAAK,kDACL;IACF7B,QAAQ,EAAEA,QAAS;IACnB0C,IAAI,EAAEQ,IAAI,CAACpB,MAAO;IAClBoB,IAAI,EAAEA,IAAK;IACXrB,KAAK,EAAEA,KAAK,IAAI,EAAG;IACnB6B,eAAe,EAAED,oBAAqB;IACtCE,KAAK,EAAE,IAAK;IACZC,QAAQ,EAAE,IAAK;IACfC,iBAAiB,EAAE,KAAM;IACzB,mBAAkB,GAAElC,EAAG,SAAS;IAChCU,GAAG,EAAEL,QAAS;IACdrB,SAAS,EAAEA,SAAU;IACrBmD,OAAO,EAAEA,OAAQ;IACjBhE,QAAQ,EAAGiE,KAAK,IAAK;MACnBjE,QAAQ,CACN6B,EAAE,EACFqC,iBAAiB,CAACD,KAAK,CAACE,MAAM,CAACpC,KAAK,EAAE4B,oBAAoB,CAC5D,CAAC;IACH;EAAE,CACH,CAAC,EACF3E,KAAA,CAAAiC,aAAA;IAAOY,EAAE,EAAG,GAAEA,EAAG,SAAS;IAACuC,OAAO,EAAG,GAAEvC,EAAG,SAAS;IAACwC,MAAM;EAAA,GACvDzE,KACI,CAAC,EACPG,SAAS,IACRf,KAAA,CAAAiC,aAAA;IACE,mBAAW;IACXV,SAAS,EACP,iCAAiC,IACjCwB,KAAK;EACL,GAEDhC,SACG,CAER,CAAC;EAGL,SAASmE,iBAAiBA,CAACnC,KAAa,EAAEuC,WAAmB,EAAE;IAC7D,OAAOvC,KAAK,CAACgB,OAAO,CAACC,MAAM,CAACsB,WAAW,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;EACrD;EAEA,SAASN,OAAOA,CAAAO,KAAA,EAAiD;IAAA,IAAhD;MAAEJ;IAA2C,CAAC,GAAAI,KAAA;IAC7DJ,MAAM,CAAC9B,KAAK,CAAC,CAAC;IACd8B,MAAM,CAACK,MAAM,CAAC,CAAC;EACjB;AACF;AAEA,eAAe9E,cAAc"}

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

@@ -13,7 +13,7 @@ export type TextMaskInputElement =
 export type TextMaskValue = string | number;
 export interface TextMaskProps extends React.HTMLProps<HTMLElement> {
   mask: TextMaskMask;
-  inputRef?: Record<string, unknown>;
+  inputRef?: React.MutableRefObject<HTMLInputElement>;
   inputElement?: TextMaskInputElement;
   onChange?: (...args: any[]) => any;
   guide?: boolean;

package/components/input-masked/hooks/useHandleCursorPosition.d.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject } from 'react';
+declare function useHandleCursorPosition(inputRefs: MutableRefObject<HTMLInputElement>[], keysToHandle?: RegExp | {
+    [inputId: string]: RegExp[];
+}): {
+    onKeyDown: (event: React.KeyboardEvent) => void;
+};
+export default useHandleCursorPosition;

package/components/input-masked/hooks/useHandleCursorPosition.js

@@ -0,0 +1,106 @@
+import { useEffect, useRef } from 'react';
+function useHandleCursorPosition(inputRefs, keysToHandle) {
+  const inputList = useRef(refsToInputList(inputRefs));
+  useEffect(() => {
+    inputList.current = refsToInputList(inputRefs);
+  }, [inputRefs]);
+  function onKeyDown(event) {
+    var _getKeysToHandle;
+    const inputs = inputList.current;
+    const input = event.target;
+    const pressedKey = event.key;
+    const hasPressedKeysToHandle = ((_getKeysToHandle = getKeysToHandle({
+      keysToHandle,
+      input
+    })) === null || _getKeysToHandle === void 0 ? void 0 : _getKeysToHandle.test(pressedKey)) || /(ArrowRight|ArrowLeft|Backspace)/.test(pressedKey);
+    const initialSelectionStart = input.selectionStart;
+    const inputPosition = getInputPosition(input, inputs);
+    window.requestAnimationFrame(() => {
+      const caretPosition = getCaretPosition(input);
+      if (!hasPressedKeysToHandle) {
+        return;
+      }
+      if (caretPosition === 'last' && inputPosition !== 'last' && !(initialSelectionStart === 1 && pressedKey === 'ArrowRight')) {
+        return goToInput('next', input, inputs);
+      }
+      if (caretPosition === 'first' && inputPosition !== 'first' && !(initialSelectionStart === 1 && (pressedKey === 'ArrowLeft' || pressedKey === 'Backspace'))) {
+        return goToInput('previous', input, inputs);
+      }
+    });
+  }
+  return {
+    onKeyDown
+  };
+}
+function refsToInputList(inputRefs) {
+  return inputRefs.map(ref => ref.current).filter(Boolean);
+}
+function getKeysToHandle(_ref) {
+  let {
+    keysToHandle,
+    input
+  } = _ref;
+  if (!keysToHandle) {
+    return undefined;
+  }
+  if (keysToHandle instanceof RegExp) {
+    return keysToHandle;
+  }
+  const masks = keysToHandle[input.id];
+  const selection = input.selectionStart === input.selectionEnd ? input.selectionStart : undefined;
+  if (!selection) {
+    return undefined;
+  }
+  const maskIndex = selection === input.size ? masks.length - 1 : selection;
+  return masks[maskIndex];
+}
+function getInputPosition(input, inputs) {
+  const firstInput = inputs[0];
+  const lastInput = inputs[inputs.length - 1];
+  if (input === firstInput) {
+    return 'first';
+  }
+  if (input === lastInput) {
+    return 'last';
+  }
+  return 'non-initial';
+}
+function getSelectionPositions(input) {
+  return {
+    start: 0,
+    end: Number(input.size)
+  };
+}
+function getCaretPosition(input) {
+  const {
+    start,
+    end
+  } = getSelectionPositions(input);
+  const selectionStart = input.selectionStart;
+  const selectionEnd = input.selectionEnd;
+  if (selectionStart === start && selectionEnd === start) {
+    return 'first';
+  }
+  if (selectionStart === end && selectionEnd === end) {
+    return 'last';
+  }
+  return 'non-initial';
+}
+function goToInput(to, input, inputs) {
+  const currentInputIndex = inputs.indexOf(input);
+  const siblingIndex = to === 'next' ? currentInputIndex + 1 : to === 'previous' ? currentInputIndex - 1 : 0;
+  const siblingInput = inputs[siblingIndex];
+  const {
+    start,
+    end
+  } = getSelectionPositions(siblingInput);
+  siblingInput.focus();
+  if (to === 'next') {
+    return siblingInput.setSelectionRange(start, start);
+  }
+  if (to === 'previous') {
+    return siblingInput.setSelectionRange(end, end);
+  }
+}
+export default useHandleCursorPosition;
+//# sourceMappingURL=useHandleCursorPosition.js.map

package/components/input-masked/hooks/useHandleCursorPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHandleCursorPosition.js","names":["useEffect","useRef","useHandleCursorPosition","inputRefs","keysToHandle","inputList","refsToInputList","current","onKeyDown","event","_getKeysToHandle","inputs","input","target","pressedKey","key","hasPressedKeysToHandle","getKeysToHandle","test","initialSelectionStart","selectionStart","inputPosition","getInputPosition","window","requestAnimationFrame","caretPosition","getCaretPosition","goToInput","map","ref","filter","Boolean","_ref","undefined","RegExp","masks","id","selection","selectionEnd","maskIndex","size","length","firstInput","lastInput","getSelectionPositions","start","end","Number","to","currentInputIndex","indexOf","siblingIndex","siblingInput","focus","setSelectionRange"],"sources":["../../../../../src/components/input-masked/hooks/useHandleCursorPosition.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useRef } from 'react'\n\nfunction useHandleCursorPosition(\n  inputRefs: MutableRefObject<HTMLInputElement>[],\n  keysToHandle?: RegExp | { [inputId: string]: RegExp[] }\n) {\n  const inputList = useRef(refsToInputList(inputRefs))\n\n  // To keep the refs.current in synch with component of use, or else it wont be possible to navigate to the next input, without triggering a re-render first.\n  useEffect(() => {\n    inputList.current = refsToInputList(inputRefs)\n  }, [inputRefs])\n\n  function onKeyDown(event: React.KeyboardEvent) {\n    const inputs = inputList.current\n    const input = event.target as HTMLInputElement\n\n    const pressedKey = event.key\n\n    const hasPressedKeysToHandle =\n      getKeysToHandle({ keysToHandle, input })?.test(pressedKey) ||\n      /(ArrowRight|ArrowLeft|Backspace)/.test(pressedKey)\n\n    const initialSelectionStart = input.selectionStart\n\n    const inputPosition = getInputPosition(input, inputs)\n\n    window.requestAnimationFrame(() => {\n      const caretPosition = getCaretPosition(input)\n\n      if (!hasPressedKeysToHandle) {\n        return // stop here\n      }\n\n      if (\n        caretPosition === 'last' &&\n        inputPosition !== 'last' &&\n        !(initialSelectionStart === 1 && pressedKey === 'ArrowRight')\n      ) {\n        return goToInput('next', input, inputs)\n      }\n\n      if (\n        caretPosition === 'first' &&\n        inputPosition !== 'first' &&\n        !(\n          initialSelectionStart === 1 &&\n          (pressedKey === 'ArrowLeft' || pressedKey === 'Backspace')\n        )\n      ) {\n        return goToInput('previous', input, inputs)\n      }\n    })\n  }\n\n  return { onKeyDown }\n}\n\n// Helpers\nfunction refsToInputList(inputRefs: MutableRefObject<HTMLInputElement>[]) {\n  return inputRefs.map((ref) => ref.current).filter(Boolean)\n}\n\ntype GetKeysToHandleParams = {\n  keysToHandle: RegExp | { [inputId: string]: RegExp[] }\n  input: HTMLInputElement\n}\n\nfunction getKeysToHandle({ keysToHandle, input }: GetKeysToHandleParams) {\n  if (!keysToHandle) {\n    return undefined\n  }\n\n  if (keysToHandle instanceof RegExp) {\n    return keysToHandle\n  }\n\n  const masks = keysToHandle[input.id]\n\n  const selection =\n    input.selectionStart === input.selectionEnd\n      ? input.selectionStart\n      : undefined\n\n  if (!selection) {\n    return undefined\n  }\n\n  const maskIndex = selection === input.size ? masks.length - 1 : selection\n\n  return masks[maskIndex]\n}\n\nfunction getInputPosition(\n  input: HTMLInputElement,\n  inputs: HTMLInputElement[]\n) {\n  const firstInput = inputs[0]\n  const lastInput = inputs[inputs.length - 1]\n\n  if (input === firstInput) {\n    return 'first'\n  }\n\n  if (input === lastInput) {\n    return 'last'\n  }\n\n  return 'non-initial'\n}\n\nfunction getSelectionPositions(input: HTMLInputElement) {\n  return { start: 0, end: Number(input.size) }\n}\n\nfunction getCaretPosition(input: HTMLInputElement) {\n  const { start, end } = getSelectionPositions(input)\n\n  const selectionStart = input.selectionStart\n  const selectionEnd = input.selectionEnd\n\n  if (selectionStart === start && selectionEnd === start) {\n    return 'first'\n  }\n\n  if (selectionStart === end && selectionEnd === end) {\n    return 'last'\n  }\n\n  return 'non-initial'\n}\n\nfunction goToInput(\n  to: 'next' | 'previous',\n  input: HTMLInputElement,\n  inputs: HTMLInputElement[]\n) {\n  const currentInputIndex = inputs.indexOf(input)\n\n  const siblingIndex =\n    to === 'next'\n      ? currentInputIndex + 1\n      : to === 'previous'\n      ? currentInputIndex - 1\n      : 0\n\n  const siblingInput = inputs[siblingIndex]\n\n  const { start, end } = getSelectionPositions(siblingInput)\n\n  siblingInput.focus()\n\n  if (to === 'next') {\n    return siblingInput.setSelectionRange(start, start)\n  }\n\n  if (to === 'previous') {\n    return siblingInput.setSelectionRange(end, end)\n  }\n}\n\nexport default useHandleCursorPosition\n"],"mappings":"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"}

package/components/input-masked/hooks/useMultiInputValues.d.ts

@@ -0,0 +1,8 @@
+import { MultiInputMaskProps, MultiInputMaskValue } from '../MultiInputMask';
+type SteppedValuesHook<T extends string> = {
+    inputs: MultiInputMaskProps<T>['inputs'];
+    defaultValues?: MultiInputMaskProps<T>['values'];
+    callback?: (values: MultiInputMaskProps<T>['values']) => void;
+};
+export declare function useMultiInputValue<T extends string>({ inputs, defaultValues, callback, }: SteppedValuesHook<T>): readonly [MultiInputMaskValue<T>, (id: string, value: string) => void];
+export {};