@dnb/eufemia 10.28.0 → 10.30.0

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * ATTENTION: This file is auto generated by using "styleFactory".
  * Do not change the content!
@@ -9,12 +10,15 @@
 /*
  * Utilities
  */
-.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
   row-gap: var(--spacing-x-small);
 }
-.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
+  row-gap: 0;
+}
+.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-small);
@@ -364,42 +368,42 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 /*
  * Utilities
  */
-.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]) {
+.dnb-spacing .dnb-forms-main-heading.dnb-h--large:not([class*=space__]) {
   margin: 0;
 }
 @media screen and (min-width: 40em) {
-  .dnb-form-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__left]) {
+  .dnb-forms-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__left]) {
     margin-left: var(--spacing-medium);
   }
 }
-.dnb-form-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
+.dnb-forms-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
   margin-bottom: var(--spacing-small);
 }
 
 /*
  * Utilities
  */
-.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]) {
+.dnb-spacing .dnb-forms-sub-heading.dnb-h--medium:not([class*=space__]) {
   margin: 0;
 }
-.dnb-form-sub-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
+.dnb-forms-sub-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
   margin-bottom: var(--spacing-small);
 }
 
 /*
  * Utilities
  */
-.dnb-form-submit-indicator {
+.dnb-forms-submit-indicator {
   display: inline;
   --padding-left: 0.5em;
 }
-.dnb-form-submit-indicator__content {
+.dnb-forms-submit-indicator__content {
   font-size: 0;
   line-height: 1em;
   will-change: font-size;
   transition: font-size 800ms var(--easing-default);
 }
-.dnb-form-submit-indicator__content b {
+.dnb-forms-submit-indicator__content b {
   padding-left: 0.125em;
   color: var(--dots-color, currentColor);
   opacity: 0.2;
@@ -408,38 +412,38 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   animation-duration: 1.3s;
   animation-delay: 200ms;
 }
-.dnb-form-submit-indicator__content b:nth-of-type(1) {
+.dnb-forms-submit-indicator__content b:nth-of-type(1) {
   padding-left: var(--padding-left);
   animation-delay: 50ms;
 }
-.dnb-form-submit-indicator__content b:nth-of-type(2) {
+.dnb-forms-submit-indicator__content b:nth-of-type(2) {
   animation-delay: 200ms;
 }
-.dnb-form-submit-indicator__content b:nth-of-type(3) {
+.dnb-forms-submit-indicator__content b:nth-of-type(3) {
   animation-delay: 400ms;
 }
-html[data-visual-test] .dnb-form-submit-indicator__content b {
+html[data-visual-test] .dnb-forms-submit-indicator__content b {
   animation: none;
 }
-.dnb-form-submit-indicator--state-pending .dnb-form-submit-indicator__content {
+.dnb-forms-submit-indicator--state-pending .dnb-forms-submit-indicator__content {
   font-size: 1em;
   font-weight: var(--font-weight-bold);
 }
-.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content {
+.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content {
   font-size: 1em;
 }
-.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon {
+.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content .dnb-icon {
   padding-left: var(--padding-left);
   color: var(--color-success-green);
 }
-.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon--default {
+.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content .dnb-icon--default {
   font-size: 1em;
 }
-.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content__label {
+.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content__label {
   font-size: var(--font-size-small);
   padding-left: calc(var(--padding-left) * 2);
 }
-.dnb-form-submit-indicator--inline-wrap .dnb-form-submit-indicator__content {
+.dnb-forms-submit-indicator--inline-wrap .dnb-forms-submit-indicator__content {
   display: flex;
   --padding-left: 0.25em;
 }
@@ -485,68 +489,68 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
     font-size: 0;
   }
 }
-.dnb-form-iterate-block {
+.dnb-forms-iterate-block {
   --block-outline-color: var(--outline-color, var(--color-lavender));
 }
-.dnb-form-iterate-block--error:has(.dnb-form-status--error) {
+.dnb-forms-iterate-block--error:has(.dnb-form-status--error) {
   --block-outline-color: var(--color-fire-red);
 }
-.dnb-form-iterate-block:not(.dnb-height-animation--hidden) {
+.dnb-forms-iterate-block:not(.dnb-height-animation--hidden) {
   display: flex;
   flex-direction: column;
 }
-.dnb-form-iterate-block__inner {
+.dnb-forms-iterate-block__inner {
   flex: 1;
   margin-bottom: var(--space);
   padding: var(--padding, 1rem);
   transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default);
   transform: translateY(-2.5rem);
 }
-.dnb-form-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {
+.dnb-forms-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {
   --padding: 0;
 }
-.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing] {
+.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing] {
   border-radius: 0.375rem;
   box-shadow: inset 0 0 0 2px var(--block-outline-color);
 }
-.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small {
+.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small {
   --space: var(--spacing-small);
 }
-.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium {
+.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium {
   --space: var(--spacing-medium);
 }
-.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large {
+.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large {
   --space: var(--spacing-large);
 }
-.dnb-form-iterate-block__inner .dnb-dl .dnb-dd {
+.dnb-forms-iterate-block__inner .dnb-dl .dnb-dd {
   margin-bottom: 0;
 }
-.dnb-form-iterate-block.dnb-height-animation--is-visible .dnb-form-iterate-block__inner {
+.dnb-forms-iterate-block.dnb-height-animation--is-visible .dnb-forms-iterate-block__inner {
   transform: translateY(-0.5rem);
 }
-.dnb-form-iterate-block.dnb-height-animation--parallax .dnb-form-iterate-block__inner {
+.dnb-forms-iterate-block.dnb-height-animation--parallax .dnb-forms-iterate-block__inner {
   transform: translateY(0);
 }
-.dnb-form-iterate__element {
+.dnb-forms-iterate__element {
   outline: none;
 }
-.dnb-form-iterate > .dnb-form-iterate__element:has(.dnb-form-iterate-block) {
+.dnb-forms-iterate > .dnb-forms-iterate__element:has(.dnb-forms-iterate-block) {
   margin-top: 0;
 }
 
 /*
  * Utilities
  */
-.dnb-form-summary-list.dnb-dl .dnb-dt, .dnb-form-summary-list.dnb-dl > .dnb-dd > .dnb-dl, .dnb-form-summary-list.dnb-dl:not([class*=dnb-space]) > .dnb-dd > .dnb-dl {
+.dnb-forms-summary-list.dnb-dl .dnb-dt, .dnb-forms-summary-list.dnb-dl > .dnb-dd > .dnb-dl, .dnb-forms-summary-list.dnb-dl:not([class*=dnb-space]) > .dnb-dd > .dnb-dl {
   margin: 0;
 }
-.dnb-form-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd {
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd {
   margin-bottom: var(--spacing-medium);
 }
-.dnb-form-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd:last-of-type {
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd:last-of-type {
   margin-bottom: 0;
 }
-.dnb-form-summary-list.dnb-dl.dnb-dl__layout--grid {
+.dnb-forms-summary-list.dnb-dl.dnb-dl__layout--grid {
   row-gap: var(--spacing-medium);
 }
 
@@ -557,8 +561,12 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
 .dnb-forms-value-block--inline:not([class*=__composition]) {
   display: inline-block;
   font-size: inherit;
-  margin-left: var(--spacing-xx-small);
-  margin-right: var(--spacing-xx-small);
+}
+.dnb-forms-value-block--inline:not([class*=__composition])::before, .dnb-forms-value-block--inline:not([class*=__composition])::after {
+  content: " ";
+}
+.dnb-forms-value-block + .dnb-forms-value-block--inline:not([class*=__composition])::before {
+  content: none;
 }
 .dnb-forms-value-block__label, .dnb-forms-value-block__label strong {
   font-weight: var(--font-weight-medium);
@@ -645,10 +653,35 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
 .dnb-forms-wizard-layout__contents {
   flex: 1;
 }
+.dnb-forms-wizard-layout__contents .dnb-forms-step {
+  outline: none;
+}
 .dnb-forms-wizard-layout__contents .dnb-card {
   --border-color: var(--color-pistachio);
   max-width: var(--forms-card-max-width);
 }
+.dnb-forms-wizard-layout__contents .dnb-forms-step > .appear-fx,
+.dnb-forms-wizard-layout__contents .dnb-forms-button-row > .appear-fx {
+  --appear-opacity: 0;
+  --appear-offset: -0.25rem;
+  opacity: var(--appear-opacity);
+  transform: translate3d(var(--appear-offset), 0, 0);
+  animation: appear 600ms var(--easing-default) forwards;
+  animation-delay: calc(var(--element-index, 0) * 30ms);
+}
+@keyframes appear {
+  0% {
+    opacity: var(--appear-opacity);
+    transform: translate3d(var(--appear-offset), 0, 0);
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
 @media screen and (min-width: 40em) {
   .dnb-forms-wizard-layout + .dnb-form-status:not([class*=space__left]), .dnb-forms-wizard-layout + .dnb-form-status + .dnb-form-status:not([class*=space__left]) {
     margin-left: var(--spacing-medium);
@@ -668,10 +701,11 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
   margin-right: 0;
 }
 
-.dnb-forms-step {
-  outline: none;
+@media screen and (min-width: 60em) {
+  .dnb-forms-form:has(.dnb-forms-wizard-layout--sidebar) .dnb-forms-status {
+    margin-left: 23rem;
+  }
 }
-
 .dnb-forms-test-element {
   border: 1px dashed #808080;
   border-radius: 0.5rem;

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

@@ -1 +1 @@
-.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--spacing-x-small)}@media screen and (min-width:40em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}.dnb-forms-field-expiry .dnb-multi-input-mask{width:var(--forms-field-width--small)}.dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell{justify-content:center}.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{display:flex}.dnb-forms-field-number__contents--has-controls .dnb-input__input{align-items:center}.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border{border-radius:0}.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border,.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within,.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:hover,html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within{box-shadow:none}.dnb-forms-field-number__contents--has-controls>.dnb-input__border--root{--input-border-inset: ;--input-border-inset--hover: ;--input-border-inset--active: ;--input-border-inset--focus: ;--input-border-inset--disabled: }html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button-background-color--hover);color:var(--number-control-button-color--hover)}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button-background-color--active);color:var(--number-control-button-color--active)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button--error-contrast);color:var(--number-control-button--error)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button--error);color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-before[disabled]{background-color:var(--color-black-3);color:var(--color-black-20)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small{width:calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before{width:var(--number-control-button-width--small)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium{width:calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before{width:var(--number-control-button-width--medium)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large{width:calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before{width:var(--number-control-button-width--large)}.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button{color:var(--color-fire-red)}.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button:hover{color:var(--color-white)}.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:calc(var(--forms-field-width--medium) - 2rem)}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-phone-number .dnb-form-label{max-width:14ch}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}@media screen and (max-width:15em){.dnb-forms-field-number .dnb-input__shell,.dnb-forms-field-string .dnb-input__shell{width:90%}}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{width:100%}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:25em){.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__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__contents__composition--vertical{display:flex;flex-flow:column;row-gap:var(--spacing-small)}.dnb-forms-field-block__contents__composition--horizontal{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:25em){.dnb-forms-field-block__contents__composition--horizontal{align-items:flex-end}}@media screen and (max-width:25em){.dnb-forms-field-block__contents__composition--horizontal{flex-flow:column;row-gap:var(--spacing-x-small)}}.dnb-forms-button-row{display:flex;flex-flow:row;flex-wrap:wrap;gap:var(--spacing-small)}.dnb-card+.dnb-button--primary:not([class*=space__top]),.dnb-card+.dnb-forms-button-row:not([class*=space__top]){margin-top:var(--spacing-small)}.dnb-card+.dnb-button--primary:not([class*=space__top]) .dnb-button[class*=space__top],.dnb-card+.dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top]{margin-top:0}@media screen and (min-width:40em){.dnb-card+.dnb-button--primary:not([class*=space__left]),.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}:root{--forms-card-max-width:36.5rem}.dnb-forms-form .dnb-card{max-width:var(--forms-card-max-width)}.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]){margin:0}@media screen and (min-width:40em){.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-form-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-form-submit-indicator{--padding-left:0.5em;display:inline}.dnb-form-submit-indicator__content{font-size:0;line-height:1em;transition:font-size .8s var(--easing-default);will-change:font-size}.dnb-form-submit-indicator__content b{animation-delay:.2s;animation-duration:1.3s;animation-iteration-count:infinite;animation-name:submit-indicator-dot;color:var(--dots-color,currentColor);opacity:.2;padding-left:.125em}.dnb-form-submit-indicator__content b:first-of-type{animation-delay:50ms;padding-left:var(--padding-left)}.dnb-form-submit-indicator__content b:nth-of-type(2){animation-delay:.2s}.dnb-form-submit-indicator__content b:nth-of-type(3){animation-delay:.4s}html[data-visual-test] .dnb-form-submit-indicator__content b{animation:none}.dnb-form-submit-indicator--state-pending .dnb-form-submit-indicator__content{font-size:1em;font-weight:var(--font-weight-bold)}.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content{font-size:1em}.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon{color:var(--color-success-green);padding-left:var(--padding-left)}.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon--default{font-size:1em}.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content__label{font-size:var(--font-size-small);padding-left:calc(var(--padding-left)*2)}.dnb-form-submit-indicator--inline-wrap .dnb-form-submit-indicator__content{--padding-left:0.25em;display:flex}@keyframes submit-indicator-dot{0%{opacity:.2}15%{opacity:1}50%{opacity:1}60%{opacity:.3}to{opacity:.2}}@keyframes submit-indicator-success{0%{font-size:1em;opacity:.2}20%{font-size:1em;opacity:1}80%{opacity:1}85%{font-size:1em;opacity:.3}90%{opacity:0}to{font-size:0;opacity:0}}.dnb-form-iterate-block{--block-outline-color:var(--outline-color,var(--color-lavender))}.dnb-form-iterate-block--error:has(.dnb-form-status--error){--block-outline-color:var(--color-fire-red)}.dnb-form-iterate-block:not(.dnb-height-animation--hidden){display:flex;flex-direction:column}.dnb-form-iterate-block__inner{flex:1;margin-bottom:var(--space);padding:var(--padding,1rem);transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms,box-shadow .8s var(--easing-default)}.dnb-form-iterate-block__inner:not([class*=dnb-flex-container--spacing]){--padding:0}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing]{border-radius:.375rem;box-shadow:inset 0 0 0 2px var(--block-outline-color)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small{--space:var(--spacing-small)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium{--space:var(--spacing-medium)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large{--space:var(--spacing-large)}.dnb-form-iterate-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-form-iterate-block.dnb-height-animation--is-visible .dnb-form-iterate-block__inner{transform:translateY(-.5rem)}.dnb-form-iterate-block.dnb-height-animation--parallax .dnb-form-iterate-block__inner{transform:translateY(0)}.dnb-form-iterate__element{outline:none}.dnb-form-iterate>.dnb-form-iterate__element:has(.dnb-form-iterate-block){margin-top:0}.dnb-form-summary-list.dnb-dl .dnb-dt,.dnb-form-summary-list.dnb-dl:not([class*=dnb-space])>.dnb-dd>.dnb-dl,.dnb-form-summary-list.dnb-dl>.dnb-dd>.dnb-dl{margin:0}.dnb-form-summary-list.dnb-dl:not(.dnb-dl__layout--grid)>.dnb-dd{margin-bottom:var(--spacing-medium)}.dnb-form-summary-list.dnb-dl:not(.dnb-dl__layout--grid)>.dnb-dd:last-of-type{margin-bottom:0}.dnb-form-summary-list.dnb-dl.dnb-dl__layout--grid{row-gap:var(--spacing-medium)}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline:not([class*=__composition]){display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label,.dnb-forms-value-block__label strong{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:var(--color-black-80)}.dnb-forms-value-block--max-width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-value-block--max-width-small{max-width:var(--forms-field-width--small)}.dnb-forms-value-block--max-width-medium{max-width:var(--forms-field-width--medium)}.dnb-forms-value-block--max-width-large{max-width:var(--forms-field-width--large)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{-moz-column-gap:var(--column-gap,0);column-gap:var(--column-gap,0);display:flex;flex-flow:row;row-gap:var(--row-gap,var(--spacing-medium))}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-xx-small{--column-gap:var(--spacing-xx-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-x-small{--column-gap:var(--spacing-x-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-small{--column-gap:var(--spacing-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-medium{--column-gap:var(--spacing-medium)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-large{--column-gap:var(--spacing-large)}@media screen and (min-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{align-items:flex-start}}@media screen and (max-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{flex-flow:column}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not(:has(.dnb-forms-value-block__label)){--row-gap:var(--spacing-x-small)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space])>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dd,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dt{margin:0}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl>.dnb-dd{margin-bottom:0}.dnb-forms-wizard-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-wizard-layout--drawer{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__sidebar{flex:0;margin-bottom:2rem}.dnb-forms-wizard-layout__contents{flex:1}.dnb-forms-wizard-layout__contents .dnb-card{--border-color:var(--color-pistachio);max-width:var(--forms-card-max-width)}@media screen and (min-width:40em){.dnb-forms-wizard-layout+.dnb-form-status+.dnb-form-status:not([class*=space__left]),.dnb-forms-wizard-layout+.dnb-form-status:not([class*=space__left]){margin-left:var(--spacing-medium)}}@media screen and (max-width:60em){.dnb-forms-wizard-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__contents{flex-basis:auto}}.dnb-forms-wizard-layout .dnb-step-indicator__sidebar{margin-right:0}.dnb-forms-step{outline:none}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}
+@charset "UTF-8";.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{row-gap:0}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--spacing-x-small)}@media screen and (min-width:40em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}.dnb-forms-field-expiry .dnb-multi-input-mask{width:var(--forms-field-width--small)}.dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell{justify-content:center}.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{display:flex}.dnb-forms-field-number__contents--has-controls .dnb-input__input{align-items:center}.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border{border-radius:0}.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border,.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within,.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:hover,html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within{box-shadow:none}.dnb-forms-field-number__contents--has-controls>.dnb-input__border--root{--input-border-inset: ;--input-border-inset--hover: ;--input-border-inset--active: ;--input-border-inset--focus: ;--input-border-inset--disabled: }html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button-background-color--hover);color:var(--number-control-button-color--hover)}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button-background-color--active);color:var(--number-control-button-color--active)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button--error-contrast);color:var(--number-control-button--error)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button--error);color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-before[disabled]{background-color:var(--color-black-3);color:var(--color-black-20)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small{width:calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before{width:var(--number-control-button-width--small)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium{width:calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before{width:var(--number-control-button-width--medium)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large{width:calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before{width:var(--number-control-button-width--large)}.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button{color:var(--color-fire-red)}.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button:hover{color:var(--color-white)}.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:calc(var(--forms-field-width--medium) - 2rem)}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-phone-number .dnb-form-label{max-width:14ch}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}@media screen and (max-width:15em){.dnb-forms-field-number .dnb-input__shell,.dnb-forms-field-string .dnb-input__shell{width:90%}}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{width:100%}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:25em){.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__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__contents__composition--vertical{display:flex;flex-flow:column;row-gap:var(--spacing-small)}.dnb-forms-field-block__contents__composition--horizontal{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:25em){.dnb-forms-field-block__contents__composition--horizontal{align-items:flex-end}}@media screen and (max-width:25em){.dnb-forms-field-block__contents__composition--horizontal{flex-flow:column;row-gap:var(--spacing-x-small)}}.dnb-forms-button-row{display:flex;flex-flow:row;flex-wrap:wrap;gap:var(--spacing-small)}.dnb-card+.dnb-button--primary:not([class*=space__top]),.dnb-card+.dnb-forms-button-row:not([class*=space__top]){margin-top:var(--spacing-small)}.dnb-card+.dnb-button--primary:not([class*=space__top]) .dnb-button[class*=space__top],.dnb-card+.dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top]{margin-top:0}@media screen and (min-width:40em){.dnb-card+.dnb-button--primary:not([class*=space__left]),.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}:root{--forms-card-max-width:36.5rem}.dnb-forms-form .dnb-card{max-width:var(--forms-card-max-width)}.dnb-spacing .dnb-forms-main-heading.dnb-h--large:not([class*=space__]){margin:0}@media screen and (min-width:40em){.dnb-forms-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-forms-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-spacing .dnb-forms-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-forms-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-submit-indicator{--padding-left:0.5em;display:inline}.dnb-forms-submit-indicator__content{font-size:0;line-height:1em;transition:font-size .8s var(--easing-default);will-change:font-size}.dnb-forms-submit-indicator__content b{animation-delay:.2s;animation-duration:1.3s;animation-iteration-count:infinite;animation-name:submit-indicator-dot;color:var(--dots-color,currentColor);opacity:.2;padding-left:.125em}.dnb-forms-submit-indicator__content b:first-of-type{animation-delay:50ms;padding-left:var(--padding-left)}.dnb-forms-submit-indicator__content b:nth-of-type(2){animation-delay:.2s}.dnb-forms-submit-indicator__content b:nth-of-type(3){animation-delay:.4s}html[data-visual-test] .dnb-forms-submit-indicator__content b{animation:none}.dnb-forms-submit-indicator--state-pending .dnb-forms-submit-indicator__content{font-size:1em;font-weight:var(--font-weight-bold)}.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content{font-size:1em}.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content .dnb-icon{color:var(--color-success-green);padding-left:var(--padding-left)}.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content .dnb-icon--default{font-size:1em}.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content__label{font-size:var(--font-size-small);padding-left:calc(var(--padding-left)*2)}.dnb-forms-submit-indicator--inline-wrap .dnb-forms-submit-indicator__content{--padding-left:0.25em;display:flex}@keyframes submit-indicator-dot{0%{opacity:.2}15%{opacity:1}50%{opacity:1}60%{opacity:.3}to{opacity:.2}}@keyframes submit-indicator-success{0%{font-size:1em;opacity:.2}20%{font-size:1em;opacity:1}80%{opacity:1}85%{font-size:1em;opacity:.3}90%{opacity:0}to{font-size:0;opacity:0}}.dnb-forms-iterate-block{--block-outline-color:var(--outline-color,var(--color-lavender))}.dnb-forms-iterate-block--error:has(.dnb-form-status--error){--block-outline-color:var(--color-fire-red)}.dnb-forms-iterate-block:not(.dnb-height-animation--hidden){display:flex;flex-direction:column}.dnb-forms-iterate-block__inner{flex:1;margin-bottom:var(--space);padding:var(--padding,1rem);transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms,box-shadow .8s var(--easing-default)}.dnb-forms-iterate-block__inner:not([class*=dnb-flex-container--spacing]){--padding:0}.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing]{border-radius:.375rem;box-shadow:inset 0 0 0 2px var(--block-outline-color)}.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small{--space:var(--spacing-small)}.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium{--space:var(--spacing-medium)}.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large{--space:var(--spacing-large)}.dnb-forms-iterate-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-forms-iterate-block.dnb-height-animation--is-visible .dnb-forms-iterate-block__inner{transform:translateY(-.5rem)}.dnb-forms-iterate-block.dnb-height-animation--parallax .dnb-forms-iterate-block__inner{transform:translateY(0)}.dnb-forms-iterate__element{outline:none}.dnb-forms-iterate>.dnb-forms-iterate__element:has(.dnb-forms-iterate-block){margin-top:0}.dnb-forms-summary-list.dnb-dl .dnb-dt,.dnb-forms-summary-list.dnb-dl:not([class*=dnb-space])>.dnb-dd>.dnb-dl,.dnb-forms-summary-list.dnb-dl>.dnb-dd>.dnb-dl{margin:0}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid)>.dnb-dd{margin-bottom:var(--spacing-medium)}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid)>.dnb-dd:last-of-type{margin-bottom:0}.dnb-forms-summary-list.dnb-dl.dnb-dl__layout--grid{row-gap:var(--spacing-medium)}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline:not([class*=__composition]){display:inline-block;font-size:inherit}.dnb-forms-value-block--inline:not([class*=__composition]):after,.dnb-forms-value-block--inline:not([class*=__composition]):before{content:" "}.dnb-forms-value-block+.dnb-forms-value-block--inline:not([class*=__composition]):before{content:none}.dnb-forms-value-block__label,.dnb-forms-value-block__label strong{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:var(--color-black-80)}.dnb-forms-value-block--max-width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-value-block--max-width-small{max-width:var(--forms-field-width--small)}.dnb-forms-value-block--max-width-medium{max-width:var(--forms-field-width--medium)}.dnb-forms-value-block--max-width-large{max-width:var(--forms-field-width--large)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{-moz-column-gap:var(--column-gap,0);column-gap:var(--column-gap,0);display:flex;flex-flow:row;row-gap:var(--row-gap,var(--spacing-medium))}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-xx-small{--column-gap:var(--spacing-xx-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-x-small{--column-gap:var(--spacing-x-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-small{--column-gap:var(--spacing-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-medium{--column-gap:var(--spacing-medium)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-large{--column-gap:var(--spacing-large)}@media screen and (min-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{align-items:flex-start}}@media screen and (max-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{flex-flow:column}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not(:has(.dnb-forms-value-block__label)){--row-gap:var(--spacing-x-small)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space])>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dd,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dt{margin:0}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl>.dnb-dd{margin-bottom:0}.dnb-forms-wizard-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-wizard-layout--drawer{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__sidebar{flex:0;margin-bottom:2rem}.dnb-forms-wizard-layout__contents{flex:1}.dnb-forms-wizard-layout__contents .dnb-forms-step{outline:none}.dnb-forms-wizard-layout__contents .dnb-card{--border-color:var(--color-pistachio);max-width:var(--forms-card-max-width)}.dnb-forms-wizard-layout__contents .dnb-forms-button-row>.appear-fx,.dnb-forms-wizard-layout__contents .dnb-forms-step>.appear-fx{--appear-opacity:0;--appear-offset:-0.25rem;animation:appear .6s var(--easing-default) forwards;animation-delay:calc(var(--element-index, 0)*30ms);opacity:var(--appear-opacity);transform:translate3d(var(--appear-offset),0,0)}@keyframes appear{0%{opacity:var(--appear-opacity);transform:translate3d(var(--appear-offset),0,0)}80%{opacity:1}to{opacity:1;transform:translateZ(0)}}@media screen and (min-width:40em){.dnb-forms-wizard-layout+.dnb-form-status+.dnb-form-status:not([class*=space__left]),.dnb-forms-wizard-layout+.dnb-form-status:not([class*=space__left]){margin-left:var(--spacing-medium)}}@media screen and (max-width:60em){.dnb-forms-wizard-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__contents{flex-basis:auto}}.dnb-forms-wizard-layout .dnb-step-indicator__sidebar{margin-right:0}@media screen and (min-width:60em){.dnb-forms-form:has(.dnb-forms-wizard-layout--sidebar) .dnb-forms-status{margin-left:23rem}}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}

package/extensions/forms/types.d.ts

@@ -87,6 +87,7 @@ export type FieldBlockProps = {
      */
     placeholder?: React.ReactNode;
 };
+export type FieldBlockWidth = false | 'small' | 'medium' | 'large' | 'stretch';
 export interface UseFieldProps<Value = unknown, EmptyValue = undefined | unknown, ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages> extends DataValueReadWriteComponentProps<Value, EmptyValue>, AriaAttributes {
     /**
      * ID added to the actual field component, and linked to the label via for-attribute
@@ -172,7 +173,7 @@ export interface ValueProps<Value> extends DataValueReadComponentProps<Value> {
      */
     label?: React.ReactNode;
     /**
-     * Field label to show above the data value.
+     * Shows the value even if it is empty.
      */
     showEmpty?: boolean;
     /**
@@ -260,6 +261,6 @@ export type OnSubmitParams = {
     /** Will empty the whole internal data set of the form  */
     clearData: () => void;
 };
-export type OnSubmit<Data = JsonObject> = (data: Partial<Data>, { resetForm, clearData }: OnSubmitParams) => EventReturnWithStateObject | void | Promise<EventReturnWithStateObject | void>;
+export type OnSubmit<Data = JsonObject> = (data: Data, { resetForm, clearData }: OnSubmitParams) => EventReturnWithStateObject | void | Promise<EventReturnWithStateObject | void>;
 export type OnChange<Data = unknown> = (data: Data) => EventReturnWithStateObjectAndSuccess | void | Promise<EventReturnWithStateObjectAndSuccess | void>;
 export type OnChangeValue<Value = unknown, EmptyValue = undefined | unknown> = (value: Value | EmptyValue, additionalArgs?: AdditionalEventArgs) => EventReturnWithStateObjectAndSuccess | void | Promise<EventReturnWithStateObjectAndSuccess | void>;

package/extensions/forms/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["FormError","Error","constructor","message","options","_defineProperty","key","dataValueReadProps","pickDataValueReadProps","props","Object","fromEntries","entries","filter","_ref","includes","omitDataValueReadProps","_ref2","dataValueWriteProps","pickDataValueWriteProps","_ref3","omitDataValueWriteProps","_ref4","pickDataValueReadWriteProps","_ref5","omitDataValueReadWriteProps","_ref6"],"sources":["../../../../src/extensions/forms/types.ts"],"sourcesContent":["import type { SpacingProps } from '../../components/space/types'\nimport type { JSONSchema4, JSONSchema6, JSONSchema7 } from 'json-schema'\nimport type { JSONSchemaType } from 'ajv/dist/2020'\nimport { JsonObject } from 'json-pointer'\nimport { AriaAttributes } from 'react'\n\nexport type * from 'json-schema'\nexport type JSONSchema = JSONSchema7\nexport type AllJSONSchemaVersions =\n  | JSONSchema4\n  | JSONSchema6\n  | JSONSchema7\n  | JSONSchemaType<unknown>\nexport { JSONSchemaType }\n\ntype ValidationRule = 'type' | 'pattern' | 'required' | string\ntype MessageValues = Record<string, string>\n\ninterface IFormErrorOptions {\n  validationRule?: ValidationRule\n  messageValues?: MessageValues\n}\n\n/**\n * Standard error object for Eufemia Forms, extending the built-in error with additional information for data handling\n */\nexport class FormError extends Error {\n  /**\n   * What validation rule did the error occur based on? (i.e: minLength, required or maximum)\n   */\n  validationRule?: ValidationRule\n\n  /**\n   * Replacement values relevant for this error.\n   * @example { minLength: 3 } to be able to replace values in a message like \"Minimum {minLength} characters\"\n   */\n  messageValues?: MessageValues\n\n  constructor(message: string, options?: IFormErrorOptions) {\n    super(message)\n\n    if (options) {\n      for (const key in options) {\n        this[key] = options[key]\n      }\n    }\n  }\n}\n\n/**\n * Accept any key, so custom message keys can be used\n */\nexport type CustomErrorMessages = Record<string, string>\n\n/**\n * Accept any key, so custom message keys can be used\n * including the path to the field the message is for\n */\nexport type CustomErrorMessagesWithPaths =\n  | CustomErrorMessages\n  | {\n      // eslint-disable-next-line no-unused-vars\n      [K in `/${string}`]?: CustomErrorMessages\n    }\n\nexport interface DefaultErrorMessages {\n  required?: string\n  pattern?: string\n}\n\nexport interface DataValueReadProps<Value = unknown> {\n  /** JSON Pointer for where the data for this field is located in the source dataset */\n  path?: string\n  /** JSON Pointer for where the data for this field is located in the source iterate loop element */\n  itemPath?: string\n  value?: Value\n}\n\nconst dataValueReadProps = ['path', 'itemPath', 'value']\n\nexport function pickDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): DataValueReadProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueReadProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): Omit<DataValueReadProps, keyof DataValueReadProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueReadProps.includes(key)\n    )\n  )\n}\n\nexport interface DataValueWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> {\n  emptyValue?: EmptyValue\n  onFocus?: (value: Value | EmptyValue) => void\n  onBlur?: (value: Value | EmptyValue) => void\n  onChange?: OnChangeValue<Value, EmptyValue>\n}\n\nconst dataValueWriteProps = ['emptyValue', 'onFocus', 'onBlur', 'onChange']\n\nexport function pickDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): DataValueWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): Omit<DataValueWriteProps, keyof DataValueWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type DataValueReadWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = DataValueReadProps<Value> & DataValueWriteProps<Value, EmptyValue>\n\nexport function pickDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(props: Props): DataValueReadWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        dataValueReadProps.includes(key) ||\n        dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(\n  props: Props\n): Omit<DataValueReadWriteProps, keyof DataValueReadWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        !dataValueReadProps.includes(key) &&\n        !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type ComponentProps = SpacingProps & {\n  className?: string\n}\n\nexport type AdditionalEventArgs = Record<string, unknown>\n\nexport type DataValueReadComponentProps<Value = unknown> = ComponentProps &\n  DataValueReadProps<Value>\n\nexport type DataValueReadWriteComponentProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = ComponentProps &\n  DataValueReadProps<Value> &\n  DataValueWriteProps<Value, EmptyValue>\n\nexport type FieldBlockProps = {\n  /**\n   * The layout of the field block\n   */\n  layout?: 'horizontal' | 'vertical'\n  /**\n   * Main label text for the field\n   */\n  label?: React.ReactNode\n  /**\n   * A more discreet text displayed beside the label\n   */\n  labelDescription?: React.ReactNode\n  /**\n   * Text showing in place of the value if no value is given\n   */\n  placeholder?: React.ReactNode\n}\n\nexport interface UseFieldProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> extends DataValueReadWriteComponentProps<Value, EmptyValue>,\n    AriaAttributes {\n  // - HTML Element Attributes\n  /**\n   * ID added to the actual field component, and linked to the label via for-attribute\n   */\n  id?: Identifier\n  name?: string\n  disabled?: boolean\n  readOnly?: boolean\n  autoComplete?:\n    | HTMLInputElement['autocomplete']\n    | HTMLTextAreaElement['autocomplete']\n\n  // - Used by useFieldProps and FieldBlock\n  info?: React.ReactNode\n  warning?: React.ReactNode\n  error?: Error | FormError\n\n  // - Validation\n  required?: boolean\n  schema?: AllJSONSchemaVersions\n  validator?: (\n    value: Value | EmptyValue,\n    errorMessages?: ErrorMessages\n  ) => Error | undefined | void | Promise<Error | undefined | void>\n  onBlurValidator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | void | Promise<Error | undefined | void>\n  validateRequired?: (\n    internal: Value,\n    {\n      emptyValue,\n      required,\n      isChanged,\n      error,\n    }: {\n      emptyValue: EmptyValue\n      required: boolean\n      isChanged: boolean\n      error: FormError | undefined\n    }\n  ) => FormError | undefined\n  /**\n   * Should error messages based on validation be shown initially (from given value-prop or source data)\n   * before the user interacts with the field?\n   * @default false\n   */\n  validateInitially?: boolean\n  /**\n   * Should error messages be shown when touching (like focusing a field and blurring) without having changed\n   * the value? So the user did not introduce a new error, but it was invalid based on validation initially.\n   */\n  validateUnchanged?: boolean\n  /**\n   * Should validation be done while writing, not just when blurring the field?\n   */\n  continuousValidation?: boolean\n  /**\n   * Provide custom error messages for the field\n   */\n  errorMessages?: ErrorMessages\n\n  // - Derivatives\n\n  /**\n   * Transforms the `value` before its displayed in the field (e.g. input).\n   * Public API. Should not be used internally.\n   */\n  transformIn?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the value before it gets forwarded to the form data object or returned as the onChange value parameter.\n   * Public API. Should not be used internally.\n   */\n  transformOut?: (internal: Value | unknown) => Value\n\n  /**\n   * Transforms the value given by `handleChange` after `fromInput` and before `updateValue` and `toEvent`. The second parameter returns the current value.\n   */\n  transformValue?: (value: Value, currentValue?: Value) => Value\n\n  /**\n   * Transforms the value before it gets returned as the `value`.\n   */\n  toInput?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the internal value before it gets returned by even callbacks such as `onChange`, `onFocus` and `onBlur`. The second parameter returns the event type: `onChange`, `onFocus`, `onBlur` or `onBlurValidator`.\n   */\n  toEvent?: (\n    internal: Value,\n    type: 'onChange' | 'onFocus' | 'onBlur' | 'onBlurValidator'\n  ) => Value\n\n  /**\n   * Transforms the value given by `handleChange` before it is used in the further process flow. Use it to destruct the value form the original event object.\n   */\n  fromInput?: (external: Value | unknown) => Value\n\n  /**\n   * Transforms the given props `value` before any other step gets entered.\n   */\n  fromExternal?: (external: Value) => Value\n}\n\nexport type FieldProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> = UseFieldProps<Value, EmptyValue, ErrorMessages> & FieldBlockProps\n\nexport interface FieldHelpProps {\n  help?: {\n    title?: string\n    content?: string\n  }\n}\n\nexport interface ValueProps<Value>\n  extends DataValueReadComponentProps<Value> {\n  /**\n   * Field label to show above the data value.\n   */\n  label?: React.ReactNode\n\n  /**\n   * Field label to show above the data value.\n   */\n  showEmpty?: boolean\n\n  /**\n   * Text showing in place of the value if no value is given.\n   */\n  placeholder?: React.ReactNode\n\n  /**\n   * For showing the value inline (not as a block element)\n   */\n  inline?: boolean\n\n  /** The max-width of a value block. Defaults to large */\n  maxWidth?: 'small' | 'medium' | 'large' | 'auto'\n\n  /**\n   * Transforms the `value` before its displayed in the field (e.g. input).\n   * Public API. Should not be used internally.\n   */\n  transformIn?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the value before it gets returned as the `value`.\n   */\n  toInput?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the given props `value` before any other step gets entered.\n   */\n  fromExternal?: (external: Value) => Value\n}\n\nexport type Path = string\nexport type Identifier = string\n\nexport type SubmitState =\n  | 'pending' // Used for async operations\n  | 'complete' // Used to hide the submit indicator\n  | 'success' // Used for fields\n  | 'error' // Used when error is shown\n  | 'abort' // Used to abort the state regardless (step change)\n\n/**\n * Provide a error that shows in the FormStatus of a field.\n */\ntype EventStateObjectError = Error\n/**\n * Provide a warning that shows in the FormStatus of a field.\n */\ntype EventStateObjectWarning = React.ReactNode\n/**\n * Provide an info that shows in the FormStatus of a field.\n */\ntype EventStateObjectInfo = React.ReactNode\n\n/**\n * Provide a status that will enforce the form to stay in pending state\n */\ntype EventStateObjectStatus = 'pending'\n\n/**\n * Provide a success state that will show an indicator on the related field label\n */\ntype EventStateObjectSuccess = 'saved'\n\n/**\n * Provide an error or status messages that shows in the FormStatus of a field\n */\nexport type EventStateObjectOr = {\n  error?: EventStateObjectError\n  warning?: EventStateObjectWarning\n  info?: EventStateObjectInfo\n  pending?: EventStateObjectStatus\n}\n\nexport type EventStateObjectEitherOr =\n  | { error: EventStateObjectError }\n  | { warning: EventStateObjectWarning }\n  | { info: EventStateObjectInfo }\n  | { status: EventStateObjectStatus }\n\nexport type EventStateObject = EventStateObjectOr &\n  EventStateObjectEitherOr\n\n/**\n * Provide 'saved' to indicate the data has been saved successfully. Can not be combined with `error`.\n */\nexport type EventStateObjectWithSuccess = EventStateObjectOr & {\n  success?: EventStateObjectSuccess\n} & (EventStateObjectEitherOr | { success: EventStateObjectSuccess })\n\n/**\n * Provide an error or status messages that shows in the FormStatus of a field\n */\nexport type EventReturnWithStateObject = Error | EventStateObject\n\nexport type EventReturnWithStateObjectAndSuccess =\n  | Error\n  | EventStateObjectWithSuccess\n\nexport type OnSubmitParams = {\n  /** Will remove browser-side stored autocomplete data  */\n  resetForm: () => void\n\n  /** Will empty the whole internal data set of the form  */\n  clearData: () => void\n}\n\nexport type OnSubmit<Data = JsonObject> = (\n  data: Partial<Data>,\n  { resetForm, clearData }: OnSubmitParams\n) =>\n  | EventReturnWithStateObject\n  | void\n  | Promise<EventReturnWithStateObject | void>\n\nexport type OnChange<Data = unknown> = (\n  data: Data\n) =>\n  | EventReturnWithStateObjectAndSuccess\n  | void\n  | Promise<EventReturnWithStateObjectAndSuccess | void>\n\nexport type OnChangeValue<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = (\n  value: Value | EmptyValue,\n  additionalArgs?: AdditionalEventArgs\n) =>\n  | EventReturnWithStateObjectAndSuccess\n  | void\n  | Promise<EventReturnWithStateObjectAndSuccess | void>\n"],"mappings":"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"}
+{"version":3,"file":"types.js","names":["FormError","Error","constructor","message","options","_defineProperty","key","dataValueReadProps","pickDataValueReadProps","props","Object","fromEntries","entries","filter","_ref","includes","omitDataValueReadProps","_ref2","dataValueWriteProps","pickDataValueWriteProps","_ref3","omitDataValueWriteProps","_ref4","pickDataValueReadWriteProps","_ref5","omitDataValueReadWriteProps","_ref6"],"sources":["../../../../src/extensions/forms/types.ts"],"sourcesContent":["import type { SpacingProps } from '../../components/space/types'\nimport type { JSONSchema4, JSONSchema6, JSONSchema7 } from 'json-schema'\nimport type { JSONSchemaType } from 'ajv/dist/2020'\nimport { JsonObject } from 'json-pointer'\nimport { AriaAttributes } from 'react'\n\nexport type * from 'json-schema'\nexport type JSONSchema = JSONSchema7\nexport type AllJSONSchemaVersions =\n  | JSONSchema4\n  | JSONSchema6\n  | JSONSchema7\n  | JSONSchemaType<unknown>\nexport { JSONSchemaType }\n\ntype ValidationRule = 'type' | 'pattern' | 'required' | string\ntype MessageValues = Record<string, string>\n\ninterface IFormErrorOptions {\n  validationRule?: ValidationRule\n  messageValues?: MessageValues\n}\n\n/**\n * Standard error object for Eufemia Forms, extending the built-in error with additional information for data handling\n */\nexport class FormError extends Error {\n  /**\n   * What validation rule did the error occur based on? (i.e: minLength, required or maximum)\n   */\n  validationRule?: ValidationRule\n\n  /**\n   * Replacement values relevant for this error.\n   * @example { minLength: 3 } to be able to replace values in a message like \"Minimum {minLength} characters\"\n   */\n  messageValues?: MessageValues\n\n  constructor(message: string, options?: IFormErrorOptions) {\n    super(message)\n\n    if (options) {\n      for (const key in options) {\n        this[key] = options[key]\n      }\n    }\n  }\n}\n\n/**\n * Accept any key, so custom message keys can be used\n */\nexport type CustomErrorMessages = Record<string, string>\n\n/**\n * Accept any key, so custom message keys can be used\n * including the path to the field the message is for\n */\nexport type CustomErrorMessagesWithPaths =\n  | CustomErrorMessages\n  | {\n      // eslint-disable-next-line no-unused-vars\n      [K in `/${string}`]?: CustomErrorMessages\n    }\n\nexport interface DefaultErrorMessages {\n  required?: string\n  pattern?: string\n}\n\nexport interface DataValueReadProps<Value = unknown> {\n  /** JSON Pointer for where the data for this field is located in the source dataset */\n  path?: string\n  /** JSON Pointer for where the data for this field is located in the source iterate loop element */\n  itemPath?: string\n  value?: Value\n}\n\nconst dataValueReadProps = ['path', 'itemPath', 'value']\n\nexport function pickDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): DataValueReadProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueReadProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): Omit<DataValueReadProps, keyof DataValueReadProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueReadProps.includes(key)\n    )\n  )\n}\n\nexport interface DataValueWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> {\n  emptyValue?: EmptyValue\n  onFocus?: (value: Value | EmptyValue) => void\n  onBlur?: (value: Value | EmptyValue) => void\n  onChange?: OnChangeValue<Value, EmptyValue>\n}\n\nconst dataValueWriteProps = ['emptyValue', 'onFocus', 'onBlur', 'onChange']\n\nexport function pickDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): DataValueWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): Omit<DataValueWriteProps, keyof DataValueWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type DataValueReadWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = DataValueReadProps<Value> & DataValueWriteProps<Value, EmptyValue>\n\nexport function pickDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(props: Props): DataValueReadWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        dataValueReadProps.includes(key) ||\n        dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(\n  props: Props\n): Omit<DataValueReadWriteProps, keyof DataValueReadWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        !dataValueReadProps.includes(key) &&\n        !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type ComponentProps = SpacingProps & {\n  className?: string\n}\n\nexport type AdditionalEventArgs = Record<string, unknown>\n\nexport type DataValueReadComponentProps<Value = unknown> = ComponentProps &\n  DataValueReadProps<Value>\n\nexport type DataValueReadWriteComponentProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = ComponentProps &\n  DataValueReadProps<Value> &\n  DataValueWriteProps<Value, EmptyValue>\n\nexport type FieldBlockProps = {\n  /**\n   * The layout of the field block\n   */\n  layout?: 'horizontal' | 'vertical'\n  /**\n   * Main label text for the field\n   */\n  label?: React.ReactNode\n  /**\n   * A more discreet text displayed beside the label\n   */\n  labelDescription?: React.ReactNode\n  /**\n   * Text showing in place of the value if no value is given\n   */\n  placeholder?: React.ReactNode\n}\n\nexport type FieldBlockWidth =\n  | false\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'stretch'\n\nexport interface UseFieldProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> extends DataValueReadWriteComponentProps<Value, EmptyValue>,\n    AriaAttributes {\n  // - HTML Element Attributes\n  /**\n   * ID added to the actual field component, and linked to the label via for-attribute\n   */\n  id?: Identifier\n  name?: string\n  disabled?: boolean\n  readOnly?: boolean\n  autoComplete?:\n    | HTMLInputElement['autocomplete']\n    | HTMLTextAreaElement['autocomplete']\n\n  // - Used by useFieldProps and FieldBlock\n  info?: React.ReactNode\n  warning?: React.ReactNode\n  error?: Error | FormError\n\n  // - Validation\n  required?: boolean\n  schema?: AllJSONSchemaVersions\n  validator?: (\n    value: Value | EmptyValue,\n    errorMessages?: ErrorMessages\n  ) => Error | undefined | void | Promise<Error | undefined | void>\n  onBlurValidator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | void | Promise<Error | undefined | void>\n  validateRequired?: (\n    internal: Value,\n    {\n      emptyValue,\n      required,\n      isChanged,\n      error,\n    }: {\n      emptyValue: EmptyValue\n      required: boolean\n      isChanged: boolean\n      error: FormError | undefined\n    }\n  ) => FormError | undefined\n  /**\n   * Should error messages based on validation be shown initially (from given value-prop or source data)\n   * before the user interacts with the field?\n   * @default false\n   */\n  validateInitially?: boolean\n  /**\n   * Should error messages be shown when touching (like focusing a field and blurring) without having changed\n   * the value? So the user did not introduce a new error, but it was invalid based on validation initially.\n   */\n  validateUnchanged?: boolean\n  /**\n   * Should validation be done while writing, not just when blurring the field?\n   */\n  continuousValidation?: boolean\n  /**\n   * Provide custom error messages for the field\n   */\n  errorMessages?: ErrorMessages\n\n  // - Derivatives\n\n  /**\n   * Transforms the `value` before its displayed in the field (e.g. input).\n   * Public API. Should not be used internally.\n   */\n  transformIn?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the value before it gets forwarded to the form data object or returned as the onChange value parameter.\n   * Public API. Should not be used internally.\n   */\n  transformOut?: (internal: Value | unknown) => Value\n\n  /**\n   * Transforms the value given by `handleChange` after `fromInput` and before `updateValue` and `toEvent`. The second parameter returns the current value.\n   */\n  transformValue?: (value: Value, currentValue?: Value) => Value\n\n  /**\n   * Transforms the value before it gets returned as the `value`.\n   */\n  toInput?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the internal value before it gets returned by even callbacks such as `onChange`, `onFocus` and `onBlur`. The second parameter returns the event type: `onChange`, `onFocus`, `onBlur` or `onBlurValidator`.\n   */\n  toEvent?: (\n    internal: Value,\n    type: 'onChange' | 'onFocus' | 'onBlur' | 'onBlurValidator'\n  ) => Value\n\n  /**\n   * Transforms the value given by `handleChange` before it is used in the further process flow. Use it to destruct the value form the original event object.\n   */\n  fromInput?: (external: Value | unknown) => Value\n\n  /**\n   * Transforms the given props `value` before any other step gets entered.\n   */\n  fromExternal?: (external: Value) => Value\n}\n\nexport type FieldProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> = UseFieldProps<Value, EmptyValue, ErrorMessages> & FieldBlockProps\n\nexport interface FieldHelpProps {\n  help?: {\n    title?: string\n    content?: string\n  }\n}\n\nexport interface ValueProps<Value>\n  extends DataValueReadComponentProps<Value> {\n  /**\n   * Field label to show above the data value.\n   */\n  label?: React.ReactNode\n\n  /**\n   * Shows the value even if it is empty.\n   */\n  showEmpty?: boolean\n\n  /**\n   * Text showing in place of the value if no value is given.\n   */\n  placeholder?: React.ReactNode\n\n  /**\n   * For showing the value inline (not as a block element)\n   */\n  inline?: boolean\n\n  /** The max-width of a value block. Defaults to large */\n  maxWidth?: 'small' | 'medium' | 'large' | 'auto'\n\n  /**\n   * Transforms the `value` before its displayed in the field (e.g. input).\n   * Public API. Should not be used internally.\n   */\n  transformIn?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the value before it gets returned as the `value`.\n   */\n  toInput?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the given props `value` before any other step gets entered.\n   */\n  fromExternal?: (external: Value) => Value\n}\n\nexport type Path = string\nexport type Identifier = string\n\nexport type SubmitState =\n  | 'pending' // Used for async operations\n  | 'complete' // Used to hide the submit indicator\n  | 'success' // Used for fields\n  | 'error' // Used when error is shown\n  | 'abort' // Used to abort the state regardless (step change)\n\n/**\n * Provide a error that shows in the FormStatus of a field.\n */\ntype EventStateObjectError = Error\n/**\n * Provide a warning that shows in the FormStatus of a field.\n */\ntype EventStateObjectWarning = React.ReactNode\n/**\n * Provide an info that shows in the FormStatus of a field.\n */\ntype EventStateObjectInfo = React.ReactNode\n\n/**\n * Provide a status that will enforce the form to stay in pending state\n */\ntype EventStateObjectStatus = 'pending'\n\n/**\n * Provide a success state that will show an indicator on the related field label\n */\ntype EventStateObjectSuccess = 'saved'\n\n/**\n * Provide an error or status messages that shows in the FormStatus of a field\n */\nexport type EventStateObjectOr = {\n  error?: EventStateObjectError\n  warning?: EventStateObjectWarning\n  info?: EventStateObjectInfo\n  pending?: EventStateObjectStatus\n}\n\nexport type EventStateObjectEitherOr =\n  | { error: EventStateObjectError }\n  | { warning: EventStateObjectWarning }\n  | { info: EventStateObjectInfo }\n  | { status: EventStateObjectStatus }\n\nexport type EventStateObject = EventStateObjectOr &\n  EventStateObjectEitherOr\n\n/**\n * Provide 'saved' to indicate the data has been saved successfully. Can not be combined with `error`.\n */\nexport type EventStateObjectWithSuccess = EventStateObjectOr & {\n  success?: EventStateObjectSuccess\n} & (EventStateObjectEitherOr | { success: EventStateObjectSuccess })\n\n/**\n * Provide an error or status messages that shows in the FormStatus of a field\n */\nexport type EventReturnWithStateObject = Error | EventStateObject\n\nexport type EventReturnWithStateObjectAndSuccess =\n  | Error\n  | EventStateObjectWithSuccess\n\nexport type OnSubmitParams = {\n  /** Will remove browser-side stored autocomplete data  */\n  resetForm: () => void\n\n  /** Will empty the whole internal data set of the form  */\n  clearData: () => void\n}\n\nexport type OnSubmit<Data = JsonObject> = (\n  data: Data,\n  { resetForm, clearData }: OnSubmitParams\n) =>\n  | EventReturnWithStateObject\n  | void\n  | Promise<EventReturnWithStateObject | void>\n\nexport type OnChange<Data = unknown> = (\n  data: Data\n) =>\n  | EventReturnWithStateObjectAndSuccess\n  | void\n  | Promise<EventReturnWithStateObjectAndSuccess | void>\n\nexport type OnChangeValue<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = (\n  value: Value | EmptyValue,\n  additionalArgs?: AdditionalEventArgs\n) =>\n  | EventReturnWithStateObjectAndSuccess\n  | void\n  | Promise<EventReturnWithStateObjectAndSuccess | void>\n"],"mappings":";AA0BA,OAAO,MAAMA,SAAS,SAASC,KAAK,CAAC;EAYnCC,WAAWA,CAACC,OAAe,EAAEC,OAA2B,EAAE;IACxD,KAAK,CAACD,OAAO,CAAC;IAAAE,eAAA;IAAAA,eAAA;IAEd,IAAID,OAAO,EAAE;MACX,KAAK,MAAME,GAAG,IAAIF,OAAO,EAAE;QACzB,IAAI,CAACE,GAAG,CAAC,GAAGF,OAAO,CAACE,GAAG,CAAC;MAC1B;IACF;EACF;AACF;AA+BA,MAAMC,kBAAkB,GAAG,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,CAAC;AAExD,OAAO,SAASC,sBAAsBA,CACpCC,KAAY,EACQ;EACpB,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAACC,IAAA;IAAA,IAAC,CAACR,GAAG,CAAC,GAAAQ,IAAA;IAAA,OACvCP,kBAAkB,CAACQ,QAAQ,CAACT,GAAG,CAAC;EAAA,CAClC,CACF,CAAC;AACH;AAEA,OAAO,SAASU,sBAAsBA,CACpCP,KAAY,EACwC;EACpD,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAChCI,KAAA;IAAA,IAAC,CAACX,GAAG,CAAC,GAAAW,KAAA;IAAA,OAAK,CAACV,kBAAkB,CAACQ,QAAQ,CAACT,GAAG,CAAC;EAAA,CAC9C,CACF,CAAC;AACH;AAYA,MAAMY,mBAAmB,GAAG,CAAC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,CAAC;AAE3E,OAAO,SAASC,uBAAuBA,CACrCV,KAAY,EACS;EACrB,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAACO,KAAA;IAAA,IAAC,CAACd,GAAG,CAAC,GAAAc,KAAA;IAAA,OACvCF,mBAAmB,CAACH,QAAQ,CAACT,GAAG,CAAC;EAAA,CACnC,CACF,CAAC;AACH;AAEA,OAAO,SAASe,uBAAuBA,CACrCZ,KAAY,EAC0C;EACtD,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAChCS,KAAA;IAAA,IAAC,CAAChB,GAAG,CAAC,GAAAgB,KAAA;IAAA,OAAK,CAACJ,mBAAmB,CAACH,QAAQ,CAACT,GAAG,CAAC;EAAA,CAC/C,CACF,CAAC;AACH;AAOA,OAAO,SAASiB,2BAA2BA,CAEzCd,KAAY,EAA2B;EACvC,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAChCW,KAAA;IAAA,IAAC,CAAClB,GAAG,CAAC,GAAAkB,KAAA;IAAA,OACJjB,kBAAkB,CAACQ,QAAQ,CAACT,GAAG,CAAC,IAChCY,mBAAmB,CAACH,QAAQ,CAACT,GAAG,CAAC;EAAA,CACrC,CACF,CAAC;AACH;AAEA,OAAO,SAASmB,2BAA2BA,CAGzChB,KAAY,EACkD;EAC9D,OAAOC,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,CAAC,CAACI,MAAM,CAChCa,KAAA;IAAA,IAAC,CAACpB,GAAG,CAAC,GAAAoB,KAAA;IAAA,OACJ,CAACnB,kBAAkB,CAACQ,QAAQ,CAACT,GAAG,CAAC,IACjC,CAACY,mBAAmB,CAACH,QAAQ,CAACT,GAAG,CAAC;EAAA,CACtC,CACF,CAAC;AACH"}

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

@@ -45,9 +45,7 @@ export type DrawerListChildren =
   | Record<string, unknown>
   | any[];
 export type DrawerListSuffix = React.ReactNode;
-export interface DrawerListProps
-  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
-    SpacingProps {
+export interface DrawerListProps {
   id?: string;
   role?: string;
   /**
@@ -204,8 +202,14 @@ export type DrawerListItemProps = {
     value: string;
   }) => void;
 };
+export type DrawerListAllProps = DrawerListProps &
+  SpacingProps &
+  Omit<
+    React.HTMLProps<HTMLElement>,
+    'ref' | 'size' | 'label' | 'placeholder' | 'data' | 'children'
+  >;
 export default class DrawerList extends React.Component<
-  DrawerListProps,
+  DrawerListAllProps,
   any
 > {
   static defaultProps: object;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnb/eufemia",
-  "version": "10.28.0",
+  "version": "10.30.0",
   "description": "DNB Eufemia Design System UI Library",
   "license": "SEE LICENSE IN LICENSE FILE",
   "author": "DNB Team & Tobias Høegh",

package/shared/Context.d.ts

@@ -36,7 +36,8 @@ import type { StepIndicatorProps } from '../components/StepIndicator';
 import type { FormLabelProps } from '../components/FormLabel';
 import type { InputProps } from '../components/Input';
 import type { NumberFormatCurrency } from '../components/NumberFormat';
-import type { ProgressIndicatorProps } from '../components/ProgressIndicator';
+import type { ProgressIndicatorProps } from '../components/progress-indicator/types';
+import type { FormStatusProps } from '../components/FormStatus';
 import type { FormElementProps } from './helpers/filterValidProps';
 import type { ThemeProps } from './Theme';
 import type { FormsTranslation } from '../extensions/forms/hooks/useTranslation';
@@ -73,6 +74,7 @@ export type ContextComponents = {
     FormLabel?: Partial<FormLabelProps>;
     Input?: Partial<InputProps>;
     ProgressIndicator?: Partial<ProgressIndicatorProps>;
+    FormStatus?: Partial<FormStatusProps>;
     NumberFormat?: Record<string, unknown>;
     Pagination?: Record<string, unknown>;
     /**
@@ -144,9 +146,7 @@ export type GetTranslationProps = Partial<{
 }>;
 export type Locale = TranslationLocale | 'en-US';
 export type AnyLocale = string;
-export type InternalLocale = Locale
-/** Used in tests and stories */
- | 'no' | 'en' | 'sv-SE' | 'de-CH' | 'de-DE' | 'fr-CH';
+export type InternalLocale = Locale | AnyLocale;
 export type ComponentTranslationsName = keyof ContextComponents | string;
 export type ComponentTranslation = string;
 export type Locales = Partial<Record<InternalLocale, Translation | TranslationFlat>> | Partial<Record<InternalLocale, FormsTranslation>>;

package/shared/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","names":["React","LOCALE","CURRENCY","CURRENCY_DISPLAY","defaultLocales","extend","prepareContext","props","arguments","length","undefined","locales","translations","__context__","Object","assign","key","handleLocaleFallbacks","locale","translation","destruct","context","_objectSpread","updateTranslation","getTranslation","lang","breakpoints","skeleton","split","Context","createContext","currency","currency_display","source","validKeys","k","String","includes","list","val","last","forEach","i"],"sources":["../../../src/shared/Context.tsx"],"sourcesContent":["/**\n * Web Context Context\n *\n */\n\nimport React from 'react'\nimport { LOCALE, CURRENCY, CURRENCY_DISPLAY } from './defaults'\nimport defaultLocales from './locales'\nimport { extend } from './component-helper'\n\n// All TypeScript based Eufemia elements\nimport type { ScrollViewProps } from '../fragments/scroll-view/ScrollView'\n\n// All TypeScript based Eufemia components\nimport type { AnchorProps } from '../components/Anchor'\nimport type { ButtonProps } from '../components/button/Button'\nimport type { AvatarProps } from '../components/avatar/Avatar'\nimport type { AvatarGroupProps } from '../components/avatar/AvatarGroup'\nimport type { BadgeProps } from '../components/badge/Badge'\nimport type { BreadcrumbProps } from '../components/breadcrumb/Breadcrumb'\nimport type { BreadcrumbItemProps } from '../components/breadcrumb/BreadcrumbItem'\nimport type { CheckboxProps } from '../components/Checkbox'\nimport type { InfoCardProps } from '../components/info-card/InfoCard'\nimport type { SliderProps } from '../components/slider/Slider'\nimport type { TagProps } from '../components/tag/Tag'\nimport type { TagGroupProps } from '../components/tag/TagGroup'\nimport type { TimelineProps } from '../components/timeline/Timeline'\nimport type { TimelineItemProps } from '../components/timeline/TimelineItem'\nimport type { VisuallyHiddenProps } from '../components/visually-hidden/VisuallyHidden'\nimport type { DrawerProps } from '../components/drawer/types'\nimport type { DialogProps } from '../components/dialog/types'\nimport type { TooltipProps } from '../components/tooltip/types'\nimport type { SectionProps } from '../components/section/Section'\nimport type { FormRowProps } from '../components/form-row/FormRowHelpers'\nimport type { UploadProps } from '../components/upload/types'\nimport type { SkeletonProps, SkeletonShow } from '../components/Skeleton'\nimport type { HelpButtonProps } from '../components/HelpButton'\nimport type { TableProps } from '../components/Table'\nimport type { GlobalErrorProps } from '../components/GlobalError'\nimport type { ModalProps } from '../components/modal/types'\nimport type { AccordionProps } from '../components/Accordion'\nimport type { StepIndicatorProps } from '../components/StepIndicator'\nimport type { FormLabelProps } from '../components/FormLabel'\nimport type { InputProps } from '../components/Input'\nimport type { NumberFormatCurrency } from '../components/NumberFormat'\nimport type { ProgressIndicatorProps } from '../components/ProgressIndicator'\n\nimport type { FormElementProps } from './helpers/filterValidProps'\nimport type { ThemeProps } from './Theme'\nimport type { FormsTranslation } from '../extensions/forms/hooks/useTranslation'\nimport type { DeepPartial } from './types'\n\nexport type ContextComponents = {\n  Button?: Partial<ButtonProps>\n  Anchor?: Partial<AnchorProps>\n  Avatar?: Partial<AvatarProps>\n  AvatarGroup?: Partial<AvatarGroupProps>\n  Badge?: Partial<BadgeProps>\n  Breadcrumb?: Partial<BreadcrumbProps>\n  BreadcrumbItem?: Partial<BreadcrumbItemProps>\n  Checkbox?: Partial<CheckboxProps>\n  InfoCard?: Partial<InfoCardProps>\n  Slider?: Partial<SliderProps>\n  Tag?: Partial<TagProps>\n  TagGroup?: Partial<TagGroupProps>\n  Timeline?: Partial<TimelineProps>\n  TimelineItem?: Partial<TimelineItemProps>\n  VisuallyHidden?: Partial<VisuallyHiddenProps>\n  Drawer?: Partial<DrawerProps>\n  Dialog?: Partial<DialogProps>\n  Tooltip?: Partial<TooltipProps>\n  Section?: Partial<SectionProps>\n  ScrollView?: Partial<ScrollViewProps>\n  Upload?: Partial<UploadProps>\n  Skeleton?: Partial<SkeletonProps>\n  HelpButton?: Partial<HelpButtonProps>\n  Table?: Partial<TableProps>\n  GlobalError?: Partial<GlobalErrorProps>\n  Modal?: Partial<ModalProps>\n  Accordion?: Partial<AccordionProps>\n  StepIndicator?: Partial<StepIndicatorProps>\n  FormLabel?: Partial<FormLabelProps>\n  Input?: Partial<InputProps>\n  ProgressIndicator?: Partial<ProgressIndicatorProps>\n\n  // -- TODO: Not converted yet --\n  NumberFormat?: Record<string, unknown>\n  Pagination?: Record<string, unknown>\n\n  /**\n   * @deprecated – can be removed in v11\n   */\n  FormRow?: FormRowProps\n\n  // Common props\n  formElement?: FormElementProps\n}\n\nexport type ContextProps = ContextComponents & {\n  // -- All TypeScript based Eufemia components --\n\n  // -- Global properties --\n\n  /**\n   * Contains theme related properties, such as a theme name\n   */\n  theme?: ThemeProps\n\n  /**\n   * Will enable all skeletons inside this provider/context scope\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Define what breakpoints should be used by the MediaQuery component and hook\n   */\n  breakpoints?: Record<string, string>\n\n  /**\n   * Defines the locale (internal translation) used by some components\n   */\n  locale?: InternalLocale\n\n  /**\n   * Provide your own translations. Use the same format as defined in the translation files\n   */\n  translation?: Translation\n\n  /**\n   * Defines the currency used by the NumberFormat component\n   */\n  currency?: NumberFormatCurrency\n\n  /**\n   * Defines the currencyDisplay used by the NumberFormat component\n   */\n  currency_display?: string\n\n  /**\n   * Update any given provider/context properties\n   */\n  update?: (props: ContextProps) => void\n\n  /**\n   * Update any given provider/context properties, but only for the particular scope\n   */\n  updateCurrent?: (props: ContextProps) => void\n\n  /**\n   * Update the used locale from within the context\n   */\n  setLocale?: (locale: InternalLocale) => void\n\n  /**\n   * Update the used locale from within the context, but only for the particular scope\n   */\n  setCurrentLocale?: (locale: InternalLocale) => void\n\n  /**\n   * Overwrite existing internal translation strings or define new strings via the Provider\n   */\n  translations?: Locales | TranslationCustomLocales\n\n  /**\n   * @deprecated Use `translations` instead\n   */\n  locales?: Locales | TranslationCustomLocales\n\n  // -- For internal use --\n  __context__?: Record<string, unknown>\n  updateTranslation?: (\n    locale: InternalLocale,\n    translation: Translation\n  ) => void\n  getTranslation?: (props: GetTranslationProps) => Translation\n}\n\nexport type GetTranslationProps = Partial<{\n  lang?: InternalLocale | HTMLElement['lang']\n  locale?: InternalLocale\n}>\n\nexport type Locale = TranslationLocale | 'en-US'\nexport type AnyLocale = string\nexport type InternalLocale =\n  | Locale\n\n  /** Used in tests and stories */\n  | 'no'\n  | 'en'\n  | 'sv-SE'\n  | 'de-CH'\n  | 'de-DE'\n  | 'fr-CH'\nexport type ComponentTranslationsName = keyof ContextComponents | string\nexport type ComponentTranslation = string\nexport type Locales =\n  | Partial<Record<InternalLocale, Translation | TranslationFlat>>\n  | Partial<Record<InternalLocale, FormsTranslation>>\nexport type TranslationDefaultLocales = typeof defaultLocales\nexport type TranslationLocale = keyof TranslationDefaultLocales\nexport type TranslationKeys =\n  keyof TranslationDefaultLocales[TranslationLocale]\nexport type TranslationValues =\n  TranslationDefaultLocales[TranslationLocale] & {\n    Forms?: Record<string, unknown>\n  }\nexport type TranslationCustomLocales = Record<\n  never,\n  string | Record<string, string>\n>\n\n/**\n * E.g. \"HelpButton: { title: '...' }\"\n */\nexport type Translation = DeepPartial<TranslationValues>\n\n/**\n * E.g. \"HelpButton.title\"\n */\nexport type TranslationFlat = Record<\n  ComponentTranslationsName,\n  TranslationKeys | ComponentTranslation\n>\n\nexport function prepareContext<Props>(\n  props: ContextProps = {}\n): Props & ContextProps {\n  const locales: Locales =\n    props.translations || props.locales\n      ? extend(defaultLocales, props.translations || props.locales)\n      : defaultLocales\n\n  if (props.__context__) {\n    Object.assign(props, props.__context__)\n    delete props.__context__\n  }\n\n  const key = handleLocaleFallbacks(props.locale || LOCALE, locales)\n  const translation = locales[key] || defaultLocales[LOCALE] || {} // here we could use Object.freeze\n\n  /**\n   * The code above adds support for strings, defined like:\n   * {\n   *    \"Modal.close_title\": \"Lukk\",\n   * }\n   */\n  if (locales[key]) {\n    locales[key] = destruct(locales[key] as TranslationFlat, translation)\n  }\n\n  const context = {\n    // We may use that in future\n    updateTranslation: (locale, translation) => {\n      context.translation = (context.translations || context.locales)[\n        locale\n      ] = translation\n    },\n    getTranslation: (props) => {\n      if (props) {\n        const lang = props.lang || props.locale\n        if (\n          lang &&\n          (context.translations || context.locales)[lang] &&\n          lang !== key\n        ) {\n          return (context.translations || context.locales)[lang]\n        }\n      }\n      return context.translation\n    },\n\n    locales,\n    locale: null,\n    breakpoints: null,\n    skeleton: null,\n\n    ...props,\n\n    /**\n     * Make sure we set this after props, since we update this one!\n     */\n    translation,\n  } as Props & ContextProps\n\n  return context\n}\n\nfunction handleLocaleFallbacks(\n  locale: InternalLocale | AnyLocale,\n  locales: Locales\n) {\n  if (!locales[locale]) {\n    if (locale === 'en' || locale.split('-')[0] === 'en') {\n      return 'en-GB'\n    }\n  }\n  return locale\n}\n\n// If no provider is given, we use the default context from here\nconst Context = React.createContext<ContextProps>(\n  prepareContext({\n    locale: LOCALE,\n    currency: CURRENCY,\n    currency_display: CURRENCY_DISPLAY,\n  })\n)\n\nexport default Context\n\nfunction destruct(\n  source: TranslationFlat,\n  validKeys: Record<string, unknown>\n): TranslationFlat {\n  for (const k in source) {\n    if (String(k).includes('.')) {\n      const list = k.split('.')\n\n      if (validKeys[list[0]]) {\n        const val = source[k]\n        const last = list.length - 1\n\n        list.forEach((k, i) => {\n          source[k] = i === last ? val : source[k]\n\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          source = source[k] || {}\n        })\n      }\n    }\n  }\n\n  return source\n}\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,EAAEC,QAAQ,EAAEC,gBAAgB,QAAQ,YAAY;AAC/D,OAAOC,cAAc,MAAM,WAAW;AACtC,SAASC,MAAM,QAAQ,oBAAoB;AAyN3C,OAAO,SAASC,cAAcA,CAAA,EAEN;EAAA,IADtBC,KAAmB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAExB,MAAMG,OAAgB,GACpBJ,KAAK,CAACK,YAAY,IAAIL,KAAK,CAACI,OAAO,GAC/BN,MAAM,CAACD,cAAc,EAAEG,KAAK,CAACK,YAAY,IAAIL,KAAK,CAACI,OAAO,CAAC,GAC3DP,cAAc;EAEpB,IAAIG,KAAK,CAACM,WAAW,EAAE;IACrBC,MAAM,CAACC,MAAM,CAACR,KAAK,EAAEA,KAAK,CAACM,WAAW,CAAC;IACvC,OAAON,KAAK,CAACM,WAAW;EAC1B;EAEA,MAAMG,GAAG,GAAGC,qBAAqB,CAACV,KAAK,CAACW,MAAM,IAAIjB,MAAM,EAAEU,OAAO,CAAC;EAClE,MAAMQ,WAAW,GAAGR,OAAO,CAACK,GAAG,CAAC,IAAIZ,cAAc,CAACH,MAAM,CAAC,IAAI,CAAC,CAAC;EAQhE,IAAIU,OAAO,CAACK,GAAG,CAAC,EAAE;IAChBL,OAAO,CAACK,GAAG,CAAC,GAAGI,QAAQ,CAACT,OAAO,CAACK,GAAG,CAAC,EAAqBG,WAAW,CAAC;EACvE;EAEA,MAAME,OAAO,GAAAC,aAAA,CAAAA,aAAA;IAEXC,iBAAiB,EAAEA,CAACL,MAAM,EAAEC,WAAW,KAAK;MAC1CE,OAAO,CAACF,WAAW,GAAG,CAACE,OAAO,CAACT,YAAY,IAAIS,OAAO,CAACV,OAAO,EAC5DO,MAAM,CACP,GAAGC,WAAW;IACjB,CAAC;IACDK,cAAc,EAAGjB,KAAK,IAAK;MACzB,IAAIA,KAAK,EAAE;QACT,MAAMkB,IAAI,GAAGlB,KAAK,CAACkB,IAAI,IAAIlB,KAAK,CAACW,MAAM;QACvC,IACEO,IAAI,IACJ,CAACJ,OAAO,CAACT,YAAY,IAAIS,OAAO,CAACV,OAAO,EAAEc,IAAI,CAAC,IAC/CA,IAAI,KAAKT,GAAG,EACZ;UACA,OAAO,CAACK,OAAO,CAACT,YAAY,IAAIS,OAAO,CAACV,OAAO,EAAEc,IAAI,CAAC;QACxD;MACF;MACA,OAAOJ,OAAO,CAACF,WAAW;IAC5B,CAAC;IAEDR,OAAO;IACPO,MAAM,EAAE,IAAI;IACZQ,WAAW,EAAE,IAAI;IACjBC,QAAQ,EAAE;EAAI,GAEXpB,KAAK;IAKRY;EAAW,EACY;EAEzB,OAAOE,OAAO;AAChB;AAEA,SAASJ,qBAAqBA,CAC5BC,MAAkC,EAClCP,OAAgB,EAChB;EACA,IAAI,CAACA,OAAO,CAACO,MAAM,CAAC,EAAE;IACpB,IAAIA,MAAM,KAAK,IAAI,IAAIA,MAAM,CAACU,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE;MACpD,OAAO,OAAO;IAChB;EACF;EACA,OAAOV,MAAM;AACf;AAGA,MAAMW,OAAO,GAAG7B,KAAK,CAAC8B,aAAa,CACjCxB,cAAc,CAAC;EACbY,MAAM,EAAEjB,MAAM;EACd8B,QAAQ,EAAE7B,QAAQ;EAClB8B,gBAAgB,EAAE7B;AACpB,CAAC,CACH,CAAC;AAED,eAAe0B,OAAO;AAEtB,SAAST,QAAQA,CACfa,MAAuB,EACvBC,SAAkC,EACjB;EACjB,KAAK,MAAMC,CAAC,IAAIF,MAAM,EAAE;IACtB,IAAIG,MAAM,CAACD,CAAC,CAAC,CAACE,QAAQ,CAAC,GAAG,CAAC,EAAE;MAC3B,MAAMC,IAAI,GAAGH,CAAC,CAACP,KAAK,CAAC,GAAG,CAAC;MAEzB,IAAIM,SAAS,CAACI,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE;QACtB,MAAMC,GAAG,GAAGN,MAAM,CAACE,CAAC,CAAC;QACrB,MAAMK,IAAI,GAAGF,IAAI,CAAC7B,MAAM,GAAG,CAAC;QAE5B6B,IAAI,CAACG,OAAO,CAAC,CAACN,CAAC,EAAEO,CAAC,KAAK;UACrBT,MAAM,CAACE,CAAC,CAAC,GAAGO,CAAC,KAAKF,IAAI,GAAGD,GAAG,GAAGN,MAAM,CAACE,CAAC,CAAC;UAIxCF,MAAM,GAAGA,MAAM,CAACE,CAAC,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC,CAAC;MACJ;IACF;EACF;EAEA,OAAOF,MAAM;AACf"}
+{"version":3,"file":"Context.js","names":["React","LOCALE","CURRENCY","CURRENCY_DISPLAY","defaultLocales","extend","prepareContext","props","arguments","length","undefined","locales","translations","__context__","Object","assign","key","handleLocaleFallbacks","locale","translation","destruct","context","_objectSpread","updateTranslation","getTranslation","lang","breakpoints","skeleton","split","Context","createContext","currency","currency_display","source","validKeys","k","String","includes","list","val","last","forEach","i"],"sources":["../../../src/shared/Context.tsx"],"sourcesContent":["/**\n * Web Context Context\n *\n */\n\nimport React from 'react'\nimport { LOCALE, CURRENCY, CURRENCY_DISPLAY } from './defaults'\nimport defaultLocales from './locales'\nimport { extend } from './component-helper'\n\n// All TypeScript based Eufemia elements\nimport type { ScrollViewProps } from '../fragments/scroll-view/ScrollView'\n\n// All TypeScript based Eufemia components\nimport type { AnchorProps } from '../components/Anchor'\nimport type { ButtonProps } from '../components/button/Button'\nimport type { AvatarProps } from '../components/avatar/Avatar'\nimport type { AvatarGroupProps } from '../components/avatar/AvatarGroup'\nimport type { BadgeProps } from '../components/badge/Badge'\nimport type { BreadcrumbProps } from '../components/breadcrumb/Breadcrumb'\nimport type { BreadcrumbItemProps } from '../components/breadcrumb/BreadcrumbItem'\nimport type { CheckboxProps } from '../components/Checkbox'\nimport type { InfoCardProps } from '../components/info-card/InfoCard'\nimport type { SliderProps } from '../components/slider/Slider'\nimport type { TagProps } from '../components/tag/Tag'\nimport type { TagGroupProps } from '../components/tag/TagGroup'\nimport type { TimelineProps } from '../components/timeline/Timeline'\nimport type { TimelineItemProps } from '../components/timeline/TimelineItem'\nimport type { VisuallyHiddenProps } from '../components/visually-hidden/VisuallyHidden'\nimport type { DrawerProps } from '../components/drawer/types'\nimport type { DialogProps } from '../components/dialog/types'\nimport type { TooltipProps } from '../components/tooltip/types'\nimport type { SectionProps } from '../components/section/Section'\nimport type { FormRowProps } from '../components/form-row/FormRowHelpers'\nimport type { UploadProps } from '../components/upload/types'\nimport type { SkeletonProps, SkeletonShow } from '../components/Skeleton'\nimport type { HelpButtonProps } from '../components/HelpButton'\nimport type { TableProps } from '../components/Table'\nimport type { GlobalErrorProps } from '../components/GlobalError'\nimport type { ModalProps } from '../components/modal/types'\nimport type { AccordionProps } from '../components/Accordion'\nimport type { StepIndicatorProps } from '../components/StepIndicator'\nimport type { FormLabelProps } from '../components/FormLabel'\nimport type { InputProps } from '../components/Input'\nimport type { NumberFormatCurrency } from '../components/NumberFormat'\nimport type { ProgressIndicatorProps } from '../components/progress-indicator/types'\nimport type { FormStatusProps } from '../components/FormStatus'\n\nimport type { FormElementProps } from './helpers/filterValidProps'\nimport type { ThemeProps } from './Theme'\nimport type { FormsTranslation } from '../extensions/forms/hooks/useTranslation'\nimport type { DeepPartial } from './types'\n\nexport type ContextComponents = {\n  Button?: Partial<ButtonProps>\n  Anchor?: Partial<AnchorProps>\n  Avatar?: Partial<AvatarProps>\n  AvatarGroup?: Partial<AvatarGroupProps>\n  Badge?: Partial<BadgeProps>\n  Breadcrumb?: Partial<BreadcrumbProps>\n  BreadcrumbItem?: Partial<BreadcrumbItemProps>\n  Checkbox?: Partial<CheckboxProps>\n  InfoCard?: Partial<InfoCardProps>\n  Slider?: Partial<SliderProps>\n  Tag?: Partial<TagProps>\n  TagGroup?: Partial<TagGroupProps>\n  Timeline?: Partial<TimelineProps>\n  TimelineItem?: Partial<TimelineItemProps>\n  VisuallyHidden?: Partial<VisuallyHiddenProps>\n  Drawer?: Partial<DrawerProps>\n  Dialog?: Partial<DialogProps>\n  Tooltip?: Partial<TooltipProps>\n  Section?: Partial<SectionProps>\n  ScrollView?: Partial<ScrollViewProps>\n  Upload?: Partial<UploadProps>\n  Skeleton?: Partial<SkeletonProps>\n  HelpButton?: Partial<HelpButtonProps>\n  Table?: Partial<TableProps>\n  GlobalError?: Partial<GlobalErrorProps>\n  Modal?: Partial<ModalProps>\n  Accordion?: Partial<AccordionProps>\n  StepIndicator?: Partial<StepIndicatorProps>\n  FormLabel?: Partial<FormLabelProps>\n  Input?: Partial<InputProps>\n  ProgressIndicator?: Partial<ProgressIndicatorProps>\n  FormStatus?: Partial<FormStatusProps>\n\n  // -- TODO: Not converted yet --\n  NumberFormat?: Record<string, unknown>\n  Pagination?: Record<string, unknown>\n\n  /**\n   * @deprecated – can be removed in v11\n   */\n  FormRow?: FormRowProps\n\n  // Common props\n  formElement?: FormElementProps\n}\n\nexport type ContextProps = ContextComponents & {\n  // -- All TypeScript based Eufemia components --\n\n  // -- Global properties --\n\n  /**\n   * Contains theme related properties, such as a theme name\n   */\n  theme?: ThemeProps\n\n  /**\n   * Will enable all skeletons inside this provider/context scope\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Define what breakpoints should be used by the MediaQuery component and hook\n   */\n  breakpoints?: Record<string, string>\n\n  /**\n   * Defines the locale (internal translation) used by some components\n   */\n  locale?: InternalLocale\n\n  /**\n   * Provide your own translations. Use the same format as defined in the translation files\n   */\n  translation?: Translation\n\n  /**\n   * Defines the currency used by the NumberFormat component\n   */\n  currency?: NumberFormatCurrency\n\n  /**\n   * Defines the currencyDisplay used by the NumberFormat component\n   */\n  currency_display?: string\n\n  /**\n   * Update any given provider/context properties\n   */\n  update?: (props: ContextProps) => void\n\n  /**\n   * Update any given provider/context properties, but only for the particular scope\n   */\n  updateCurrent?: (props: ContextProps) => void\n\n  /**\n   * Update the used locale from within the context\n   */\n  setLocale?: (locale: InternalLocale) => void\n\n  /**\n   * Update the used locale from within the context, but only for the particular scope\n   */\n  setCurrentLocale?: (locale: InternalLocale) => void\n\n  /**\n   * Overwrite existing internal translation strings or define new strings via the Provider\n   */\n  translations?: Locales | TranslationCustomLocales\n\n  /**\n   * @deprecated Use `translations` instead\n   */\n  locales?: Locales | TranslationCustomLocales\n\n  // -- For internal use --\n  __context__?: Record<string, unknown>\n  updateTranslation?: (\n    locale: InternalLocale,\n    translation: Translation\n  ) => void\n  getTranslation?: (props: GetTranslationProps) => Translation\n}\n\nexport type GetTranslationProps = Partial<{\n  lang?: InternalLocale | HTMLElement['lang']\n  locale?: InternalLocale\n}>\n\nexport type Locale = TranslationLocale | 'en-US'\nexport type AnyLocale = string\nexport type InternalLocale =\n  | Locale\n  // more strict type definitions than string breaks applications using React Intl.\n  | AnyLocale\nexport type ComponentTranslationsName = keyof ContextComponents | string\nexport type ComponentTranslation = string\nexport type Locales =\n  | Partial<Record<InternalLocale, Translation | TranslationFlat>>\n  | Partial<Record<InternalLocale, FormsTranslation>>\nexport type TranslationDefaultLocales = typeof defaultLocales\nexport type TranslationLocale = keyof TranslationDefaultLocales\nexport type TranslationKeys =\n  keyof TranslationDefaultLocales[TranslationLocale]\nexport type TranslationValues =\n  TranslationDefaultLocales[TranslationLocale] & {\n    Forms?: Record<string, unknown>\n  }\nexport type TranslationCustomLocales = Record<\n  never,\n  string | Record<string, string>\n>\n\n/**\n * E.g. \"HelpButton: { title: '...' }\"\n */\nexport type Translation = DeepPartial<TranslationValues>\n\n/**\n * E.g. \"HelpButton.title\"\n */\nexport type TranslationFlat = Record<\n  ComponentTranslationsName,\n  TranslationKeys | ComponentTranslation\n>\n\nexport function prepareContext<Props>(\n  props: ContextProps = {}\n): Props & ContextProps {\n  const locales: Locales =\n    props.translations || props.locales\n      ? extend(defaultLocales, props.translations || props.locales)\n      : defaultLocales\n\n  if (props.__context__) {\n    Object.assign(props, props.__context__)\n    delete props.__context__\n  }\n\n  const key = handleLocaleFallbacks(props.locale || LOCALE, locales)\n  const translation = locales[key] || defaultLocales[LOCALE] || {} // here we could use Object.freeze\n\n  /**\n   * The code above adds support for strings, defined like:\n   * {\n   *    \"Modal.close_title\": \"Lukk\",\n   * }\n   */\n  if (locales[key]) {\n    locales[key] = destruct(locales[key] as TranslationFlat, translation)\n  }\n\n  const context = {\n    // We may use that in future\n    updateTranslation: (locale, translation) => {\n      context.translation = (context.translations || context.locales)[\n        locale\n      ] = translation\n    },\n    getTranslation: (props) => {\n      if (props) {\n        const lang = props.lang || props.locale\n        if (\n          lang &&\n          (context.translations || context.locales)[lang] &&\n          lang !== key\n        ) {\n          return (context.translations || context.locales)[lang]\n        }\n      }\n      return context.translation\n    },\n\n    locales,\n    locale: null,\n    breakpoints: null,\n    skeleton: null,\n\n    ...props,\n\n    /**\n     * Make sure we set this after props, since we update this one!\n     */\n    translation,\n  } as Props & ContextProps\n\n  return context\n}\n\nfunction handleLocaleFallbacks(\n  locale: InternalLocale | AnyLocale,\n  locales: Locales\n) {\n  if (!locales[locale]) {\n    if (locale === 'en' || locale.split('-')[0] === 'en') {\n      return 'en-GB'\n    }\n  }\n  return locale\n}\n\n// If no provider is given, we use the default context from here\nconst Context = React.createContext<ContextProps>(\n  prepareContext({\n    locale: LOCALE,\n    currency: CURRENCY,\n    currency_display: CURRENCY_DISPLAY,\n  })\n)\n\nexport default Context\n\nfunction destruct(\n  source: TranslationFlat,\n  validKeys: Record<string, unknown>\n): TranslationFlat {\n  for (const k in source) {\n    if (String(k).includes('.')) {\n      const list = k.split('.')\n\n      if (validKeys[list[0]]) {\n        const val = source[k]\n        const last = list.length - 1\n\n        list.forEach((k, i) => {\n          source[k] = i === last ? val : source[k]\n\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          source = source[k] || {}\n        })\n      }\n    }\n  }\n\n  return source\n}\n"],"mappings":"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"}

package/shared/Eufemia.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "10.28.0";
+export declare const version = "10.30.0";
 export declare function init(): void;