@dnb/eufemia 10.17.0 → 10.18.0

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

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

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

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

package/cjs/extensions/forms/types.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { JSONSchema7 } from 'json-schema';
-import { SpacingProps } from '../../components/space/types';
+import type { SpacingProps } from '../../components/space/types';
+import type { JSONSchema7 as JSONSchema } from 'json-schema';
+export type { JSONSchema };
 type ValidationRule = string | string[];
 type MessageValues = Record<string, string>;
 interface IFormErrorOptions {
@@ -60,10 +61,6 @@ export interface FieldProps<Value = unknown, EmptyValue = undefined | string, Er
     layout?: 'horizontal' | 'vertical';
     /** Main label text */
     label?: React.ReactNode;
-    /** A more discreet text displayed beside the label (i.e for "(optional)") */
-    labelDescription?: React.ReactNode;
-    /** Secondary information displayed at the end of the label line (i.e character counter) */
-    labelSecondary?: React.ReactNode;
     /** Text showing in place of the value if no value is given */
     placeholder?: string;
     autoComplete?: HTMLInputElement['autocomplete'] | HTMLTextAreaElement['autocomplete'];
@@ -75,7 +72,7 @@ export interface FieldProps<Value = unknown, EmptyValue = undefined | string, Er
     capitalize?: boolean;
     trim?: boolean;
     required?: boolean;
-    schema?: JSONSchema7;
+    schema?: JSONSchema;
     validator?: (value: Value | EmptyValue, errorMessages?: ErrorMessages) => Error | undefined | Promise<Error | undefined>;
     onBlurValidator?: (value: Value | EmptyValue) => Error | undefined | Promise<Error | undefined>;
     /**
@@ -123,4 +120,3 @@ export interface ValueProps<Value> extends DataValueReadComponentProps<Value> {
     /** Prepare value for display (regardless of source like props or data context) */
     prepare?: (external: Value | undefined) => string;
 }
-export {};

package/cjs/extensions/forms/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["FormError","Error","constructor","message","options","_defineProperty","validationRule","messageValues","exports","dataValueReadProps","pickDataValueReadProps","props","Object","fromEntries","entries","filter","_ref","key","includes","omitDataValueReadProps","_ref2","dataValueWriteProps","pickDataValueWriteProps","_ref3","omitDataValueWriteProps","_ref4","pickDataValueReadWriteProps","_ref5","omitDataValueReadWriteProps","_ref6"],"sources":["../../../../src/extensions/forms/types.ts"],"sourcesContent":["import { JSONSchema7 } from 'json-schema'\nimport { SpacingProps } from '../../components/space/types'\n\ntype ValidationRule = string | 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      this.validationRule = options.validationRule\n      this.messageValues = options.messageValues\n    }\n  }\n}\n\n// Data value\n\ninterface DefaultErrorMessages {\n  required?: 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 | string,\n> {\n  emptyValue?: EmptyValue\n  onFocus?: (value: Value | EmptyValue) => void\n  onBlur?: (value: Value | EmptyValue) => void\n  onChange?: (\n    value: Value | EmptyValue,\n    additionalArgs?: AdditionalEventArgs\n  ) => void\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 | string,\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 | string,\n> = ComponentProps &\n  DataValueReadProps<Value> &\n  DataValueWriteProps<Value, EmptyValue>\n\nexport interface FieldProps<\n  Value = unknown,\n  EmptyValue = undefined | string,\n  ErrorMessages extends { required?: string } = DefaultErrorMessages,\n> extends DataValueReadWriteComponentProps<Value, EmptyValue> {\n  /** ID added to the actual field component, and linked to the label via for-attribute */\n  id?: string\n  name?: string\n  layout?: 'horizontal' | 'vertical'\n  /** Main label text */\n  label?: React.ReactNode\n  /** A more discreet text displayed beside the label (i.e for \"(optional)\") */\n  labelDescription?: React.ReactNode\n  /** Secondary information displayed at the end of the label line (i.e character counter) */\n  labelSecondary?: React.ReactNode\n  /** Text showing in place of the value if no value is given */\n  placeholder?: string\n  autoComplete?:\n    | HTMLInputElement['autocomplete']\n    | HTMLTextAreaElement['autocomplete']\n  info?: Error | FormError | string\n  warning?: Error | FormError | string\n  error?: Error | FormError\n  hasError?: boolean\n  disabled?: boolean\n  capitalize?: boolean\n  trim?: boolean\n  // Validation\n  required?: boolean\n  schema?: JSONSchema7\n  validator?: (\n    value: Value | EmptyValue,\n    errorMessages?: ErrorMessages\n  ) => Error | undefined | Promise<Error | undefined>\n  onBlurValidator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | Promise<Error | 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  /** Should validation be done while writing, not just when blurring the field? */\n  continuousValidation?: boolean\n  errorMessages?: ErrorMessages\n  // Derivatives\n  toInput?: (external: Value | unknown) => Value | unknown\n  fromInput?: (external: Value | unknown) => Value\n  toEvent?: (\n    internal: Value,\n    type: 'onChange' | 'onFocus' | 'onBlur' | 'onBlurValidator'\n  ) => Value\n  fromExternal?: (external: Value) => Value\n  transformValue?: (value: Value, currentValue?: Value) => Value\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\nexport interface FieldHelpProps {\n  help?: {\n    title?: string\n    contents?: string\n  }\n}\n\nexport interface ValueProps<Value>\n  extends DataValueReadComponentProps<Value> {\n  label?: string\n  /** Field label to show above the data value. */\n  showEmpty?: boolean\n  /** Text showing in place of the value if no value is given. */\n  placeholder?: string\n  /** JSON Pointer for where the data for this field is located in the source iterate loop element */\n  itemPath?: string\n  /** For showing the value inline (not as a block element) */\n  inline?: boolean\n  // Derivatives\n  /** Prepare value for display (regardless of source like props or data context) */\n  prepare?: (external: Value | undefined) => string\n}\n"],"mappings":"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"}
+{"version":3,"file":"types.js","names":["FormError","Error","constructor","message","options","_defineProperty","validationRule","messageValues","exports","dataValueReadProps","pickDataValueReadProps","props","Object","fromEntries","entries","filter","_ref","key","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 { JSONSchema7 as JSONSchema } from 'json-schema'\n\nexport type { JSONSchema }\n\ntype ValidationRule = string | 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      this.validationRule = options.validationRule\n      this.messageValues = options.messageValues\n    }\n  }\n}\n\n// Data value\n\ninterface DefaultErrorMessages {\n  required?: 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 | string,\n> {\n  emptyValue?: EmptyValue\n  onFocus?: (value: Value | EmptyValue) => void\n  onBlur?: (value: Value | EmptyValue) => void\n  onChange?: (\n    value: Value | EmptyValue,\n    additionalArgs?: AdditionalEventArgs\n  ) => void\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 | string,\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 | string,\n> = ComponentProps &\n  DataValueReadProps<Value> &\n  DataValueWriteProps<Value, EmptyValue>\n\nexport interface FieldProps<\n  Value = unknown,\n  EmptyValue = undefined | string,\n  ErrorMessages extends { required?: string } = DefaultErrorMessages,\n> extends DataValueReadWriteComponentProps<Value, EmptyValue> {\n  /** ID added to the actual field component, and linked to the label via for-attribute */\n  id?: string\n  name?: string\n  layout?: 'horizontal' | 'vertical'\n  /** Main label text */\n  label?: React.ReactNode\n  /** Text showing in place of the value if no value is given */\n  placeholder?: string\n  autoComplete?:\n    | HTMLInputElement['autocomplete']\n    | HTMLTextAreaElement['autocomplete']\n  info?: Error | FormError | string\n  warning?: Error | FormError | string\n  error?: Error | FormError\n  hasError?: boolean\n  disabled?: boolean\n  capitalize?: boolean\n  trim?: boolean\n  // Validation\n  required?: boolean\n  schema?: JSONSchema\n  validator?: (\n    value: Value | EmptyValue,\n    errorMessages?: ErrorMessages\n  ) => Error | undefined | Promise<Error | undefined>\n  onBlurValidator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | Promise<Error | 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  /** Should validation be done while writing, not just when blurring the field? */\n  continuousValidation?: boolean\n  errorMessages?: ErrorMessages\n  // Derivatives\n  toInput?: (external: Value | unknown) => Value | unknown\n  fromInput?: (external: Value | unknown) => Value\n  toEvent?: (\n    internal: Value,\n    type: 'onChange' | 'onFocus' | 'onBlur' | 'onBlurValidator'\n  ) => Value\n  fromExternal?: (external: Value) => Value\n  transformValue?: (value: Value, currentValue?: Value) => Value\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\nexport interface FieldHelpProps {\n  help?: {\n    title?: string\n    contents?: string\n  }\n}\n\nexport interface ValueProps<Value>\n  extends DataValueReadComponentProps<Value> {\n  label?: string\n  /** Field label to show above the data value. */\n  showEmpty?: boolean\n  /** Text showing in place of the value if no value is given. */\n  placeholder?: string\n  /** JSON Pointer for where the data for this field is located in the source iterate loop element */\n  itemPath?: string\n  /** For showing the value inline (not as a block element) */\n  inline?: boolean\n  // Derivatives\n  /** Prepare value for display (regardless of source like props or data context) */\n  prepare?: (external: Value | undefined) => string\n}\n"],"mappings":"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"}

package/cjs/shared/Eufemia.d.ts

@@ -1,2 +1,2 @@
 export function init(): void;
-export const version: "10.17.0";
+export const version: "10.18.0";

package/cjs/shared/Eufemia.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.init = init;
 exports.version = void 0;
-const version = '10.17.0';
+const version = '10.18.0';
 exports.version = version;
 function init() {
   if (typeof window !== 'undefined') {
     class Eufemia {
       get version() {
-        return '10.17.0';
+        return '10.18.0';
       }
     }
     window.Eufemia = new Eufemia();

package/cjs/shared/Eufemia.js.map

@@ -1 +1 @@
-{"version":3,"file":"Eufemia.js","names":["version","exports","init","window","Eufemia"],"sources":["../../../src/shared/Eufemia.js"],"sourcesContent":["export const version = '10.17.0'\n\nexport function init() {\n  if (typeof window !== 'undefined') {\n    class Eufemia {\n      get version() {\n        return '10.17.0'\n      }\n    }\n\n    window.Eufemia = new Eufemia()\n  }\n}\n"],"mappings":";;;;;;;AAAO,MAAMA,OAAO,GAAG,SAAS;AAAAC,OAAA,CAAAD,OAAA,GAAAA,OAAA;AAEzB,SAASE,IAAIA,CAAA,EAAG;EACrB,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;IACjC,MAAMC,OAAO,CAAC;MACZ,IAAIJ,OAAOA,CAAA,EAAG;QACZ,OAAO,SAAS;MAClB;IACF;IAEAG,MAAM,CAACC,OAAO,GAAG,IAAIA,OAAO,CAAC,CAAC;EAChC;AACF"}
+{"version":3,"file":"Eufemia.js","names":["version","exports","init","window","Eufemia"],"sources":["../../../src/shared/Eufemia.js"],"sourcesContent":["export const version = '10.18.0'\n\nexport function init() {\n  if (typeof window !== 'undefined') {\n    class Eufemia {\n      get version() {\n        return '10.18.0'\n      }\n    }\n\n    window.Eufemia = new Eufemia()\n  }\n}\n"],"mappings":";;;;;;;AAAO,MAAMA,OAAO,GAAG,SAAS;AAAAC,OAAA,CAAAD,OAAA,GAAAA,OAAA;AAEzB,SAASE,IAAIA,CAAA,EAAG;EACrB,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;IACjC,MAAMC,OAAO,CAAC;MACZ,IAAIJ,OAAOA,CAAA,EAAG;QACZ,OAAO,SAAS;MAClB;IACF;IAEAG,MAAM,CAACC,OAAO,GAAG,IAAIA,OAAO,CAAC,CAAC;EAChC;AACF"}

package/cjs/shared/helpers/EventEmitter.d.ts

@@ -30,6 +30,11 @@ export type EventEmitterScopeObject = {
     instances: EventEmitterScopeInstances;
     data: EventEmitterData;
 };
+/**
+ * Deprecated
+ *
+ * @deprecated Please use useSharedState instead for new code
+ */
 declare class EventEmitter {
     static createInstance(id: EventEmitterId): EventEmitter;
     static __EEE__?: Record<EventEmitterId, EventEmitterScopeObject>;

package/cjs/shared/helpers/EventEmitter.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventEmitter.js","names":["EventEmitter","createInstance","id","constructor","_defineProperty","data","set","scope","__EEE__","instances","forEach","instance","listeners","fn","get","_objectSpread","count","push","listen","includes","unlisten","i","l","length","remove","window","_default","exports","default"],"sources":["../../../../src/shared/helpers/EventEmitter.ts"],"sourcesContent":["/**\n * EventEmitter\n *\n * This is a tiny event emitter meant to be used at several components that relay on each other to sync data in parallel.\n *\n * - In your class: this._emitterInstance = EventEmitter.createInstance(id) // unique id\n * - Listen to changes: this._emitterInstance.listen(function)\n * - Set new data: this._emitterInstance.set({...})\n * - Update new data: this._emitterInstance.update({...})\n * - Get new data: this._emitterInstance.get()\n * - Remove it like this: this._emitterInstance.remove()\n *\n * __EEE__ stands for __EUFEMIA_EVENT_EMITTER__\n */\n\ndeclare global {\n  interface Window {\n    __EEE__?: EventEmitterEEE\n  }\n}\n\nexport type EventEmitterId = string\nexport type EventEmitterData = Record<string, unknown>\nexport type EventEmitterListener = (data: EventEmitterData) => void\nexport type EventEmitterEEE = Record<\n  EventEmitterId,\n  EventEmitterScopeObject\n>\nexport type EventEmitterScope =\n  | ({\n      __EEE__?: EventEmitterEEE\n    } & Window)\n  | EventEmitter\nexport type EventEmitterScopeInstances = Array<EventEmitter>\nexport type EventEmitterScopeObject = {\n  count: number\n  instances: EventEmitterScopeInstances\n  data: EventEmitterData\n}\n\nclass EventEmitter {\n  static createInstance(id: EventEmitterId) {\n    return new EventEmitter(id)\n  }\n\n  static __EEE__?: Record<EventEmitterId, EventEmitterScopeObject>\n  id: EventEmitterId\n  listeners: Array<EventEmitterListener>\n\n  constructor(id: EventEmitterId) {\n    scope.__EEE__ = scope.__EEE__ || {}\n    if (!scope.__EEE__[id]) {\n      scope.__EEE__[id] = {\n        instances: [],\n        count: 0,\n        data: {},\n      }\n    }\n    scope.__EEE__[id].count = scope.__EEE__[id].count + 1\n    scope.__EEE__[id].instances.push(this)\n\n    this.id = id\n    this.listeners = []\n\n    return this\n  }\n  update = (data: EventEmitterData) => {\n    this.set(data)\n    scope.__EEE__[this.id].instances.forEach((instance) => {\n      instance.listeners.forEach((fn) => {\n        if (typeof fn === 'function') {\n          fn(instance.get())\n        }\n      })\n    })\n  }\n  set = (data: EventEmitterData) => {\n    scope.__EEE__[this.id].data = {\n      ...scope.__EEE__[this.id].data,\n      ...data,\n    }\n  }\n  get = () => {\n    return scope.__EEE__[this.id].data\n  }\n  listen(fn: EventEmitterListener) {\n    if (!this.listeners.includes(fn)) {\n      this.listeners.push(fn)\n    }\n    return this\n  }\n  unlisten(fn?: EventEmitterListener | undefined) {\n    for (let i = 0, l = this.listeners.length; i < l; i++) {\n      if (!fn || (fn && fn === this.listeners[i])) {\n        this.listeners[i] = null\n      }\n    }\n  }\n  remove() {\n    this.unlisten()\n    scope.__EEE__[this.id].count = scope.__EEE__[this.id].count - 1\n    if (scope.__EEE__[this.id].count <= 0) {\n      delete scope[this.id]\n    }\n  }\n}\n\nconst scope = typeof window !== 'undefined' ? window : EventEmitter\n\nexport default EventEmitter\n"],"mappings":"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"}
+{"version":3,"file":"EventEmitter.js","names":["EventEmitter","createInstance","id","constructor","_defineProperty","data","set","scope","__EEE__","instances","forEach","instance","listeners","fn","get","_objectSpread","count","push","listen","includes","unlisten","i","l","length","remove","window","_default","exports","default"],"sources":["../../../../src/shared/helpers/EventEmitter.ts"],"sourcesContent":["/**\n * EventEmitter\n *\n * This is a tiny event emitter meant to be used at several components that relay on each other to sync data in parallel.\n *\n * - In your class: this._emitterInstance = EventEmitter.createInstance(id) // unique id\n * - Listen to changes: this._emitterInstance.listen(function)\n * - Set new data: this._emitterInstance.set({...})\n * - Update new data: this._emitterInstance.update({...})\n * - Get new data: this._emitterInstance.get()\n * - Remove it like this: this._emitterInstance.remove()\n *\n * __EEE__ stands for __EUFEMIA_EVENT_EMITTER__\n */\n\ndeclare global {\n  interface Window {\n    __EEE__?: EventEmitterEEE\n  }\n}\n\nexport type EventEmitterId = string\nexport type EventEmitterData = Record<string, unknown>\nexport type EventEmitterListener = (data: EventEmitterData) => void\nexport type EventEmitterEEE = Record<\n  EventEmitterId,\n  EventEmitterScopeObject\n>\nexport type EventEmitterScope =\n  | ({\n      __EEE__?: EventEmitterEEE\n    } & Window)\n  | EventEmitter\nexport type EventEmitterScopeInstances = Array<EventEmitter>\nexport type EventEmitterScopeObject = {\n  count: number\n  instances: EventEmitterScopeInstances\n  data: EventEmitterData\n}\n\n/**\n * Deprecated\n *\n * @deprecated Please use useSharedState instead for new code\n */\nclass EventEmitter {\n  static createInstance(id: EventEmitterId) {\n    return new EventEmitter(id)\n  }\n\n  static __EEE__?: Record<EventEmitterId, EventEmitterScopeObject>\n  id: EventEmitterId\n  listeners: Array<EventEmitterListener>\n\n  constructor(id: EventEmitterId) {\n    scope.__EEE__ = scope.__EEE__ || {}\n    if (!scope.__EEE__[id]) {\n      scope.__EEE__[id] = {\n        instances: [],\n        count: 0,\n        data: {},\n      }\n    }\n    scope.__EEE__[id].count = scope.__EEE__[id].count + 1\n    scope.__EEE__[id].instances.push(this)\n\n    this.id = id\n    this.listeners = []\n\n    return this\n  }\n  update = (data: EventEmitterData) => {\n    this.set(data)\n    scope.__EEE__[this.id].instances.forEach((instance) => {\n      instance.listeners.forEach((fn) => {\n        if (typeof fn === 'function') {\n          fn(instance.get())\n        }\n      })\n    })\n  }\n  set = (data: EventEmitterData) => {\n    scope.__EEE__[this.id].data = {\n      ...scope.__EEE__[this.id].data,\n      ...data,\n    }\n  }\n  get = () => {\n    return scope.__EEE__[this.id].data\n  }\n  listen(fn: EventEmitterListener) {\n    if (!this.listeners.includes(fn)) {\n      this.listeners.push(fn)\n    }\n    return this\n  }\n  unlisten(fn?: EventEmitterListener | undefined) {\n    for (let i = 0, l = this.listeners.length; i < l; i++) {\n      if (!fn || (fn && fn === this.listeners[i])) {\n        this.listeners[i] = null\n      }\n    }\n  }\n  remove() {\n    this.unlisten()\n    scope.__EEE__[this.id].count = scope.__EEE__[this.id].count - 1\n    if (scope.__EEE__[this.id].count <= 0) {\n      delete scope[this.id]\n    }\n  }\n}\n\nconst scope = typeof window !== 'undefined' ? window : EventEmitter\n\nexport default EventEmitter\n"],"mappings":"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"}

package/cjs/shared/helpers/useEventEmitter.d.ts

@@ -4,6 +4,8 @@ import { EventEmitterData, EventEmitterId } from './EventEmitter';
  *
  * @param {string} id unique id, same as used in the "lined place"
  * @returns React Hook { data, update }
+ *
+ * @deprecated Please use useSharedState instead for new code
  */
 export declare const useEventEmitter: (id?: EventEmitterId) => {
     data: any;

package/cjs/shared/helpers/useEventEmitter.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEventEmitter.js","names":["_react","_interopRequireDefault","require","_EventEmitter","obj","__esModule","default","useEventEmitter","id","arguments","length","undefined","updateState","React","useState","forceUpdate","useCallback","useEffect","emitter","unlisten","EventEmitter","createInstance","listen","data","get","update","exports"],"sources":["../../../../src/shared/helpers/useEventEmitter.tsx"],"sourcesContent":["import React from 'react'\nimport EventEmitter, {\n  EventEmitterData,\n  EventEmitterId,\n} from './EventEmitter'\n\n/**\n * Use this React Hook as an easy way to sync data between components without a Context/Provider\n *\n * @param {string} id unique id, same as used in the \"lined place\"\n * @returns React Hook { data, update }\n */\nexport const useEventEmitter = (id: EventEmitterId = null) => {\n  const [, updateState] = React.useState(null)\n  const forceUpdate = React.useCallback(() => updateState({}), [])\n\n  React.useEffect(() => () => emitter?.unlisten(forceUpdate), []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const [emitter] = React.useState(() => {\n    if (id) {\n      const emitter = EventEmitter.createInstance(id)\n      emitter.listen(forceUpdate)\n      return emitter\n    }\n  })\n\n  if (!emitter) {\n    return { data: null }\n  }\n\n  const { get, update } = emitter\n  const data: EventEmitterData = get()\n\n  return { data, update }\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAF,sBAAA,CAAAC,OAAA;AAGuB,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAQhB,MAAMG,eAAe,GAAG,SAAAA,CAAA,EAA+B;EAAA,IAA9BC,EAAkB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;EACvD,MAAM,GAAGG,WAAW,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,IAAI,CAAC;EAC5C,MAAMC,WAAW,GAAGF,cAAK,CAACG,WAAW,CAAC,MAAMJ,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EAEhEC,cAAK,CAACI,SAAS,CAAC,MAAM,MAAMC,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEC,QAAQ,CAACJ,WAAW,CAAC,EAAE,EAAE,CAAC;EAE/D,MAAM,CAACG,OAAO,CAAC,GAAGL,cAAK,CAACC,QAAQ,CAAC,MAAM;IACrC,IAAIN,EAAE,EAAE;MACN,MAAMU,OAAO,GAAGE,qBAAY,CAACC,cAAc,CAACb,EAAE,CAAC;MAC/CU,OAAO,CAACI,MAAM,CAACP,WAAW,CAAC;MAC3B,OAAOG,OAAO;IAChB;EACF,CAAC,CAAC;EAEF,IAAI,CAACA,OAAO,EAAE;IACZ,OAAO;MAAEK,IAAI,EAAE;IAAK,CAAC;EACvB;EAEA,MAAM;IAAEC,GAAG;IAAEC;EAAO,CAAC,GAAGP,OAAO;EAC/B,MAAMK,IAAsB,GAAGC,GAAG,CAAC,CAAC;EAEpC,OAAO;IAAED,IAAI;IAAEE;EAAO,CAAC;AACzB,CAAC;AAAAC,OAAA,CAAAnB,eAAA,GAAAA,eAAA"}
+{"version":3,"file":"useEventEmitter.js","names":["_react","_interopRequireDefault","require","_EventEmitter","obj","__esModule","default","useEventEmitter","id","arguments","length","undefined","updateState","React","useState","forceUpdate","useCallback","useEffect","emitter","unlisten","EventEmitter","createInstance","listen","data","get","update","exports"],"sources":["../../../../src/shared/helpers/useEventEmitter.tsx"],"sourcesContent":["import React from 'react'\nimport EventEmitter, {\n  EventEmitterData,\n  EventEmitterId,\n} from './EventEmitter'\n\n/**\n * Use this React Hook as an easy way to sync data between components without a Context/Provider\n *\n * @param {string} id unique id, same as used in the \"lined place\"\n * @returns React Hook { data, update }\n *\n * @deprecated Please use useSharedState instead for new code\n */\nexport const useEventEmitter = (id: EventEmitterId = null) => {\n  const [, updateState] = React.useState(null)\n  const forceUpdate = React.useCallback(() => updateState({}), [])\n\n  React.useEffect(() => () => emitter?.unlisten(forceUpdate), []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const [emitter] = React.useState(() => {\n    if (id) {\n      const emitter = EventEmitter.createInstance(id)\n      emitter.listen(forceUpdate)\n      return emitter\n    }\n  })\n\n  if (!emitter) {\n    return { data: null }\n  }\n\n  const { get, update } = emitter\n  const data: EventEmitterData = get()\n\n  return { data, update }\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAF,sBAAA,CAAAC,OAAA;AAGuB,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAUhB,MAAMG,eAAe,GAAG,SAAAA,CAAA,EAA+B;EAAA,IAA9BC,EAAkB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;EACvD,MAAM,GAAGG,WAAW,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,IAAI,CAAC;EAC5C,MAAMC,WAAW,GAAGF,cAAK,CAACG,WAAW,CAAC,MAAMJ,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EAEhEC,cAAK,CAACI,SAAS,CAAC,MAAM,MAAMC,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEC,QAAQ,CAACJ,WAAW,CAAC,EAAE,EAAE,CAAC;EAE/D,MAAM,CAACG,OAAO,CAAC,GAAGL,cAAK,CAACC,QAAQ,CAAC,MAAM;IACrC,IAAIN,EAAE,EAAE;MACN,MAAMU,OAAO,GAAGE,qBAAY,CAACC,cAAc,CAACb,EAAE,CAAC;MAC/CU,OAAO,CAACI,MAAM,CAACP,WAAW,CAAC;MAC3B,OAAOG,OAAO;IAChB;EACF,CAAC,CAAC;EAEF,IAAI,CAACA,OAAO,EAAE;IACZ,OAAO;MAAEK,IAAI,EAAE;IAAK,CAAC;EACvB;EAEA,MAAM;IAAEC,GAAG;IAAEC;EAAO,CAAC,GAAGP,OAAO;EAC/B,MAAMK,IAAsB,GAAGC,GAAG,CAAC,CAAC;EAEpC,OAAO;IAAED,IAAI;IAAEE;EAAO,CAAC;AACzB,CAAC;AAAAC,OAAA,CAAAnB,eAAA,GAAAA,eAAA"}

package/cjs/shared/helpers/useSharedState.d.ts

@@ -0,0 +1,15 @@
+type SharedStateId = string;
+type Subscriber = () => void;
+interface SharedStateInstance<Data> {
+    data: Data;
+    getSharedState: () => Data;
+    updateSharedState: (newData: Partial<Data>) => void;
+    subscribeToSharedState: (subscriber: Subscriber) => void;
+    unsubscribeFromSharedState: (subscriber: Subscriber) => void;
+}
+export declare function getOrCreateSharedState<Data>(id: SharedStateId, initialData: Data): SharedStateInstance<Data>;
+export declare function useSharedState<Data>(id: SharedStateId, initialData: Data): {
+    data: Data;
+    update: (newData: Data) => void;
+};
+export {};

package/cjs/shared/helpers/useSharedState.js

@@ -0,0 +1,71 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getOrCreateSharedState = getOrCreateSharedState;
+exports.useSharedState = useSharedState;
+var _react = require("react");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const sharedStates = {};
+function getOrCreateSharedState(id, initialData) {
+  if (!sharedStates[id]) {
+    let subscribers = [];
+    const getSharedState = () => sharedStates[id].data;
+    const updateSharedState = newData => {
+      sharedStates[id].data = _objectSpread(_objectSpread({}, sharedStates[id].data), newData);
+      subscribers.forEach(subscriber => subscriber());
+    };
+    const subscribeToSharedState = subscriber => {
+      subscribers.push(subscriber);
+    };
+    const unsubscribeFromSharedState = subscriber => {
+      subscribers = subscribers.filter(sub => sub !== subscriber);
+    };
+    sharedStates[id] = {
+      data: initialData ? _objectSpread({}, initialData) : undefined,
+      getSharedState,
+      updateSharedState,
+      subscribeToSharedState,
+      unsubscribeFromSharedState
+    };
+  } else if (sharedStates[id].data === undefined && initialData !== undefined) {
+    sharedStates[id].data = _objectSpread({}, initialData);
+  }
+  return sharedStates[id];
+}
+function useSharedState(id, initialData) {
+  var _sharedState$getShare;
+  const sharedState = (0, _react.useMemo)(() => id && getOrCreateSharedState(id, initialData), [id, initialData]);
+  const [data, setData] = (0, _react.useState)(sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$getShare = sharedState.getSharedState) === null || _sharedState$getShare === void 0 ? void 0 : _sharedState$getShare.call(sharedState));
+  const update = (0, _react.useCallback)(newData => {
+    var _sharedState$updateSh;
+    if (!id) {
+      return;
+    }
+    sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$updateSh = sharedState.updateSharedState) === null || _sharedState$updateSh === void 0 ? void 0 : _sharedState$updateSh.call(sharedState, newData);
+  }, [id, sharedState]);
+  (0, _react.useEffect)(() => {
+    if (!id) {
+      return;
+    }
+    const updateState = () => {
+      const existingData = sharedState.getSharedState();
+      setData(existingData);
+    };
+    sharedState.subscribeToSharedState(updateState);
+    return () => {
+      sharedState.unsubscribeFromSharedState(updateState);
+    };
+  }, [id, sharedState]);
+  return {
+    data,
+    update
+  };
+}
+//# sourceMappingURL=useSharedState.js.map

package/cjs/shared/helpers/useSharedState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSharedState.js","names":["_react","require","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","obj","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","Number","sharedStates","getOrCreateSharedState","id","initialData","subscribers","getSharedState","data","updateSharedState","newData","subscriber","subscribeToSharedState","unsubscribeFromSharedState","sub","useSharedState","_sharedState$getShare","sharedState","useMemo","setData","useState","update","useCallback","_sharedState$updateSh","useEffect","updateState","existingData"],"sources":["../../../../src/shared/helpers/useSharedState.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\n\ntype SharedStateId = string\ntype Subscriber = () => void\n\ninterface SharedStateInstance<Data> {\n  data: Data\n  getSharedState: () => Data\n  updateSharedState: (newData: Partial<Data>) => void\n  subscribeToSharedState: (subscriber: Subscriber) => void\n  unsubscribeFromSharedState: (subscriber: Subscriber) => void\n}\n\nconst sharedStates: Record<SharedStateId, SharedStateInstance<any>> = {}\n\nexport function getOrCreateSharedState<Data>(\n  id: SharedStateId,\n  initialData: Data\n): SharedStateInstance<Data> {\n  if (!sharedStates[id]) {\n    let subscribers: Subscriber[] = []\n\n    const getSharedState = () => sharedStates[id].data\n\n    const updateSharedState = (newData: Partial<Data>) => {\n      sharedStates[id].data = { ...sharedStates[id].data, ...newData }\n      subscribers.forEach((subscriber) => subscriber())\n    }\n\n    const subscribeToSharedState = (subscriber: Subscriber) => {\n      subscribers.push(subscriber)\n    }\n\n    const unsubscribeFromSharedState = (subscriber: Subscriber) => {\n      subscribers = subscribers.filter((sub) => sub !== subscriber)\n    }\n\n    sharedStates[id] = {\n      data: initialData ? { ...initialData } : undefined,\n      getSharedState,\n      updateSharedState,\n      subscribeToSharedState,\n      unsubscribeFromSharedState,\n    } as SharedStateInstance<Data>\n  } else if (\n    sharedStates[id].data === undefined &&\n    initialData !== undefined\n  ) {\n    sharedStates[id].data = { ...initialData }\n  }\n\n  return sharedStates[id]\n}\n\nexport function useSharedState<Data>(\n  id: SharedStateId,\n  initialData: Data\n) {\n  const sharedState = useMemo(\n    () => id && getOrCreateSharedState<Data>(id, initialData),\n    [id, initialData]\n  )\n  const [data, setData] = useState(sharedState?.getSharedState?.())\n\n  const update = useCallback(\n    (newData: Data) => {\n      if (!id) {\n        return\n      }\n\n      sharedState?.updateSharedState?.(newData)\n    },\n    [id, sharedState]\n  )\n\n  useEffect(() => {\n    if (!id) {\n      return\n    }\n\n    const updateState = () => {\n      const existingData = sharedState.getSharedState()\n      setData(existingData)\n    }\n\n    sharedState.subscribeToSharedState(updateState)\n\n    return () => {\n      sharedState.unsubscribeFromSharedState(updateState)\n    }\n  }, [id, sharedState])\n\n  return { data, update }\n}\n"],"mappings":"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"}

package/cjs/style/dnb-ui-components.css

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