@dnb/eufemia 10.76.1 → 10.77.1

package/extensions/forms/Field/ArraySelection/style/dnb-array-selection--isolated.css

@@ -0,0 +1,31 @@
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_1 .dnb-forms-field-array-selection {
+  --row-gap: var(--spacing-x-small);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-array-selection--variant-button {
+  --row-gap: var(--spacing-small);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-array-selection--options-layout--vertical .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: column;
+  row-gap: var(--row-gap);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
+  align-items: flex-start;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
+  line-height: 2.5rem;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-array-selection--options-layout--horizontal .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: row wrap;
+  column-gap: var(--spacing-small);
+  row-gap: var(--row-gap);
+}
+@media screen and (min-width: 40.00625em) {
+  .eufemia-scope--10_77_1 .dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label {
+    margin-bottom: 0;
+  }
+}

package/extensions/forms/Field/ArraySelection/style/dnb-array-selection--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_1 .dnb-forms-field-array-selection{--row-gap:var(--spacing-x-small)}.eufemia-scope--10_77_1 .dnb-forms-field-array-selection--variant-button{--row-gap:var(--spacing-small)}.eufemia-scope--10_77_1 .dnb-forms-field-array-selection--options-layout--vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--row-gap)}.eufemia-scope--10_77_1 .dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label{align-items:flex-start}.eufemia-scope--10_77_1 .dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label{line-height:2.5rem}.eufemia-scope--10_77_1 .dnb-forms-field-array-selection--options-layout--horizontal .dnb-forms-field-array-selection__options{column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--row-gap)}@media screen and (min-width:40.00625em){.eufemia-scope--10_77_1 .dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}}

package/extensions/forms/Field/Expiry/style/dnb-expiry--isolated.css

@@ -0,0 +1,6 @@
+.eufemia-scope--10_77_1 .dnb-forms-field-expiry .dnb-multi-input-mask {
+  width: var(--forms-field-width--small);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell {
+  justify-content: center;
+}

package/extensions/forms/Field/Expiry/style/dnb-expiry--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_1 .dnb-forms-field-expiry .dnb-multi-input-mask{width:var(--forms-field-width--small)}.eufemia-scope--10_77_1 .dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell{justify-content:center}

package/extensions/forms/Field/Number/style/dnb-number--isolated.css

@@ -0,0 +1,133 @@
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_1 .dnb-forms-field-number {
+  --number-control-button-border-color: black;
+  --number-control-button-border-color--hover: darkgrey;
+  --number-control-button-border-color--focus: darkgrey;
+  --number-control-button-border-width--focus: 0.125rem;
+  --number-control-button-background-color--hover: grey;
+  --number-control-button-color--hover: black;
+  --number-control-button-background-color--active: black;
+  --number-control-button-color--active: lightgrey;
+  --number-control-button--error: red;
+  --number-control-button--error-contrast: white;
+  --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
+  );
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input__input {
+  align-items: center;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border {
+  border-radius: 0;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border, .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:hover, .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within, html[data-whatinput=keyboard] .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within {
+  box-shadow: none;
+}
+.eufemia-scope--10_77_1 .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]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled],
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]),
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]) {
+  background-color: var(--number-control-button-background-color--hover);
+  color: var(--number-control-button-color--hover);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled], .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled] {
+  cursor: not-allowed;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]), .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]) {
+  background-color: var(--number-control-button-background-color--active);
+  color: var(--number-control-button-color--active);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before,
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after {
+  color: var(--number-control-button--error);
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover[disabled],
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover:not([disabled]),
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover:not([disabled]) {
+  background-color: var(--number-control-button--error-contrast);
+  color: var(--number-control-button--error);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled], .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled] {
+  cursor: not-allowed;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]), .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]) {
+  background-color: var(--number-control-button--error);
+  color: var(--number-control-button--error-contrast);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before[disabled],
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after[disabled] {
+  color: var(--number-control-button--error-contrast);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-before[disabled],
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-after[disabled] {
+  background-color: var(--color-black-3);
+  color: var(--color-black-20);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small {
+  --field-block-content-width: calc(
+    var(--forms-field-width--small) +
+      var(--forms-field-block--number-control-buttons-width--small)
+  );
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before,
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after {
+  width: var(--number-control-button-width--small);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium {
+  --field-block-content-width: calc(
+    var(--forms-field-width--medium) +
+      var(--forms-field-block--number-control-buttons-width--medium)
+  );
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before,
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after {
+  width: var(--number-control-button-width--medium);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large {
+  --field-block-content-width: calc(
+    var(--forms-field-width--large) +
+      var(--forms-field-block--number-control-buttons-width--large)
+  );
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before,
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after {
+  width: var(--number-control-button-width--large);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-button--control-before,
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-button--control-after {
+  width: var(--number-control-button-width--large);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-input__border {
+  flex-grow: 1;
+}
+@media screen and (max-width: xx-small0) {
+  .eufemia-scope--10_77_1 .dnb-forms-field-number .dnb-input__shell {
+    width: 90%;
+  }
+}

package/extensions/forms/Field/Number/style/dnb-number--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_1 .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)}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input__input{align-items:center}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border{border-radius:0}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border,.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within,.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:hover,html[data-whatinput=keyboard] .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within{box-shadow:none}.eufemia-scope--10_77_1 .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]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .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)}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .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)}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after,.eufemia-scope--10_77_1 .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]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .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]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .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)}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled],.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]),.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .eufemia-scope--10_77_1 .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)}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after[disabled],.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-after[disabled],.eufemia-scope--10_77_1 .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)}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small{--field-block-content-width:calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small))}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.eufemia-scope--10_77_1 .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)}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium{--field-block-content-width:calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium))}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.eufemia-scope--10_77_1 .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)}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large{--field-block-content-width:calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large))}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.eufemia-scope--10_77_1 .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)}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-button--control-after,.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-button--control-before{width:var(--number-control-button-width--large)}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-input__border{flex-grow:1}@media screen and (max-width:xx-small0){.eufemia-scope--10_77_1 .dnb-forms-field-number .dnb-input__shell{width:90%}}

package/extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken--isolated.css

@@ -0,0 +1,70 @@
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_1 .dnb-forms-field-number {
+  --number-control-button-border-color: var(--sb-color-purple-alternative);
+  --number-control-button-border-color--hover: var(
+    --sb-color-purple-alternative
+  );
+  --number-control-separator-color: var(--sb-color-violet-light-3);
+  --number-control-button-border-color--focus: var(--focus-ring-color);
+  --number-control-button-border-width--focus: var(--focus-ring-width);
+  --number-control-button-background-color--hover: var(
+    --sb-color-violet-light-3
+  );
+  --number-control-button-color--hover: var(--sb-color-purple-alternative);
+  --number-control-button-background-color--active: var(--sb-color-purple);
+  --number-control-button-color--active: var(--sb-color-violet-light-3);
+  --number-control-button--error: var(--sb-color-red);
+  --number-control-button--error-contrast: var(--sb-color-magenta-light-2);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button.dnb-button--size-small {
+  --button-height--small: 2.5rem;
+  --button-width--small: 2.5rem;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input {
+  position: relative;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input::before, .eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input::after {
+  content: "";
+  position: absolute;
+  top: 0.25rem;
+  bottom: 0.25rem;
+  border-left: 1px solid var(--number-control-separator-color);
+  z-index: 1;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input::before {
+  left: -1px;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input::after {
+  right: -1px;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input__border--root {
+  --input-border-color: var(--number-control-button-border-color);
+  --input-border-color--hover: var(
+    --number-control-button-border-color--hover
+  );
+  --input-border-color--active: var(
+    --number-control-button-border-color--active
+  );
+  --input-border-radius: var(--input-border-radius--active);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:not(:disabled):active ~ .dnb-input::before {
+  z-index: -1;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:not(:disabled):active {
+  z-index: 1;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error {
+  --number-control-separator-color: var(
+    --number-control-button--error-contrast
+  );
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input--disabled {
+  --number-control-separator-color: var(--sb-color-gray-dark);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-before[disabled],
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-after[disabled] {
+  color: var(--sb-color-gray-dark);
+  background-color: var(--sb-color-gray-light);
+}

package/extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken--isolated.min.css

@@ -0,0 +1,11 @@
+.eufemia-scope--10_77_1 .dnb-forms-field-number{--number-control-button-border-color:var(--sb-color-purple-alternative);--number-control-button-border-color--hover:var(
+    --sb-color-purple-alternative
+  );--number-control-separator-color:var(--sb-color-violet-light-3);--number-control-button-border-color--focus:var(--focus-ring-color);--number-control-button-border-width--focus:var(--focus-ring-width);--number-control-button-background-color--hover:var(
+    --sb-color-violet-light-3
+  );--number-control-button-color--hover:var(--sb-color-purple-alternative);--number-control-button-background-color--active:var(--sb-color-purple);--number-control-button-color--active:var(--sb-color-violet-light-3);--number-control-button--error:var(--sb-color-red);--number-control-button--error-contrast:var(--sb-color-magenta-light-2)}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button.dnb-button--size-small{--button-height--small:2.5rem;--button-width--small:2.5rem}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input{position:relative}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input:after,.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input:before{border-left:1px solid var(--number-control-separator-color);bottom:.25rem;content:"";position:absolute;top:.25rem;z-index:1}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input:before{left:-1px}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input:after{right:-1px}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-input__border--root{--input-border-color:var(--number-control-button-border-color);--input-border-color--hover:var(
+    --number-control-button-border-color--hover
+  );--input-border-color--active:var(
+    --number-control-button-border-color--active
+  );--input-border-radius:var(--input-border-radius--active)}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:not(:disabled):active~.dnb-input:before{z-index:-1}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:not(:disabled):active{z-index:1}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error{--number-control-separator-color:var(
+    --number-control-button--error-contrast
+  )}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input--disabled{--number-control-separator-color:var(--sb-color-gray-dark)}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-after[disabled],.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-before[disabled]{background-color:var(--sb-color-gray-light);color:var(--sb-color-gray-dark)}

package/extensions/forms/Field/Number/style/themes/dnb-number-theme-ui--isolated.css

@@ -0,0 +1,19 @@
+.eufemia-scope--10_77_1 .dnb-forms-field-number {
+  --number-control-button-border-color: var(--color-sea-green);
+  --number-control-button-border-color--hover: var(--color-emerald-green);
+  --number-control-button-border-color--focus: var(--color-emerald-green);
+  --number-control-button-background-color--hover: var(
+    --color-mint-green-12
+  );
+  --number-control-button-color--hover: var(--color-emerald-green);
+  --number-control-button-background-color--active: var(
+    --color-mint-green-50
+  );
+  --number-control-button-color--active: var(--color-sea-green);
+  --number-control-button--error: var(--color-fire-red);
+  --number-control-button--error-contrast: var(--color-fire-red-8);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button.dnb-button--size-small {
+  --button-height--small: 2rem;
+  --button-width--small: 2rem;
+}

package/extensions/forms/Field/Number/style/themes/dnb-number-theme-ui--isolated.min.css

@@ -0,0 +1,5 @@
+.eufemia-scope--10_77_1 .dnb-forms-field-number{--number-control-button-border-color:var(--color-sea-green);--number-control-button-border-color--hover:var(--color-emerald-green);--number-control-button-border-color--focus:var(--color-emerald-green);--number-control-button-background-color--hover:var(
+    --color-mint-green-12
+  );--number-control-button-color--hover:var(--color-emerald-green);--number-control-button-background-color--active:var(
+    --color-mint-green-50
+  );--number-control-button-color--active:var(--color-sea-green);--number-control-button--error:var(--color-fire-red);--number-control-button--error-contrast:var(--color-fire-red-8)}.eufemia-scope--10_77_1 .dnb-forms-field-number__contents--has-controls .dnb-button.dnb-button--size-small{--button-height--small:2rem;--button-width--small:2rem}

package/extensions/forms/Field/Password/style/dnb-password--isolated.css

@@ -0,0 +1,6 @@
+.eufemia-scope--10_77_1 .dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button {
+  color: var(--color-fire-red);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button:hover {
+  color: var(--color-white);
+}

package/extensions/forms/Field/Password/style/dnb-password--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_1 .dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button{color:var(--color-fire-red)}.eufemia-scope--10_77_1 .dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button:hover{color:var(--color-white)}

package/extensions/forms/Field/PhoneNumber/style/dnb-phone-number--isolated.css

@@ -0,0 +1,12 @@
+.eufemia-scope--10_77_1 .dnb-forms-field-phone-number__country-code {
+  width: calc(var(--forms-field-width--medium) - 2rem);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell {
+  width: calc(var(--forms-field-width--medium) - 2rem);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-phone-number__number {
+  flex: 1;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-phone-number .dnb-form-label {
+  max-width: 14ch;
+}

package/extensions/forms/Field/PhoneNumber/style/dnb-phone-number--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_1 .dnb-forms-field-phone-number__country-code,.eufemia-scope--10_77_1 .dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:calc(var(--forms-field-width--medium) - 2rem)}.eufemia-scope--10_77_1 .dnb-forms-field-phone-number__number{flex:1}.eufemia-scope--10_77_1 .dnb-forms-field-phone-number .dnb-form-label{max-width:14ch}

package/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js

@@ -81,7 +81,7 @@ function PostalCodeAndCity(props) {
     className: classnames('dnb-forms-field-postal-code-and-city', props.className)
   }, fieldBlockProps, {
     width: width
-  }), React.createElement(StringField, _extends({}, postalCode, {
+  }), React.createElement(StringField, _extends({
     size: size,
     className: classnames('dnb-forms-field-postal-code-and-city__postal-code', postalCodeClassName),
     label: postalCodeLabel !== null && postalCodeLabel !== void 0 ? postalCodeLabel : translations.PostalCode.label,
@@ -97,9 +97,8 @@ function PostalCodeAndCity(props) {
     inputMode: "numeric",
     autoComplete: "postal-code",
     "data-country-code": country || countryCode
-  })), React.createElement(StringField, _extends({
-    help: help
-  }, city, {
+  }, postalCode)), React.createElement(StringField, _extends({
+    help: help,
     size: size,
     className: classnames('dnb-forms-field-postal-code-and-city__city', cityClassName),
     label: cityLabel !== null && cityLabel !== void 0 ? cityLabel : translations.City.label,
@@ -112,7 +111,7 @@ function PostalCodeAndCity(props) {
     width: cityWidth !== null && cityWidth !== void 0 ? cityWidth : 'stretch',
     inputClassName: "dnb-forms-field-postal-code-and-city__city-input",
     autoComplete: "address-level2"
-  })));
+  }, city)));
 }
 PostalCodeAndCity._supportsSpacingProps = true;
 export default PostalCodeAndCity;

package/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCity.js","names":["React","useCallback","useContext","useMemo","classnames","DataContext","StringField","CompositionField","useTranslation","useDataValue","COUNTRY","defaultCountry","PostalCodeAndCity","props","_useContext","translations","getSourceValue","countryCodeFromProvider","countryCode","postalCode","city","help","width","country","size","fieldBlockProps","_objectWithoutProperties","_excluded","countryCodeValue","handleCityDefaults","pattern","_objectSpread","cityPattern","className","cityClassName","label","cityLabel","cityWidth","errorMessages","cityErrorMessages","handlePostalCodeDefaults","mask","placeholder","postalCodeMask","postalCodePattern","postalCodePlaceHolder","postalCodeClassName","postalCodeLabel","postalCodeWidth","postalCodeErrorMessages","createElement","_extends","PostalCode","errorRequired","errorPattern","inputClassName","inputMode","autoComplete","City","trim","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { Props as FieldBlockProps } from '../../FieldBlock'\nimport DataContext from '../../DataContext/Context'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport CompositionField from '../Composition'\nimport { CountryCode, Path } from '../../types'\nimport useTranslation from '../../hooks/useTranslation'\nimport useDataValue from '../../hooks/useDataValue'\nimport { COUNTRY as defaultCountry } from '../../../../shared/defaults'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\n\nexport type Props = Pick<\n  FieldBlockProps,\n  'error' | 'warning' | 'info' | 'width' | 'className'\n> &\n  Partial<Record<'postalCode' | 'city', StringFieldProps>> & {\n    /**\n     * Defines which country the postal code and city is for.\n     * Setting it to anything other than `no` will remove the default norwegian postal code pattern.\n     * You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`.\n     * Default: `NO`\n     */\n    /**\n     * @deprecated – use countryCode instead. Will be removed in v11.\n     */\n    country?: Path | string\n\n    /**\n     * Defines which country the postal code and city is for.\n     * Setting it to anything other than `no` will remove the default norwegian postal code pattern.\n     * You can also use the value of another field to define the countryCode, by using a path value i.e. `/myCountryCodePath`.\n     * Default: `NO`\n     */\n    countryCode?: CountryCode\n    help?: HelpProps\n  } & Pick<StringFieldProps, 'size'>\n\nfunction PostalCodeAndCity(props: Props) {\n  const translations = useTranslation()\n  const { getSourceValue } = useDataValue()\n  const countryCodeFromProvider = useContext(DataContext)?.countryCode\n\n  const {\n    postalCode = {},\n    city = {},\n    help,\n    width = 'large',\n    country,\n    countryCode = countryCodeFromProvider ?? defaultCountry,\n    size,\n    ...fieldBlockProps\n  } = props\n\n  const countryCodeValue = getSourceValue(country || countryCode)\n\n  const handleCityDefaults = useCallback(\n    (city: StringFieldProps) => {\n      const props: StringFieldProps = {}\n\n      switch (countryCodeValue) {\n        case defaultCountry: {\n          props.pattern = '^[A-Za-zÆØÅæøå -]+$'\n          break\n        }\n      }\n\n      return { ...props, ...city }\n    },\n    [countryCodeValue]\n  )\n\n  const {\n    pattern: cityPattern,\n    className: cityClassName,\n    label: cityLabel,\n    width: cityWidth,\n    errorMessages: cityErrorMessages,\n  } = handleCityDefaults(city)\n\n  const handlePostalCodeDefaults = useCallback(\n    (postalCode: StringFieldProps) => {\n      const props: StringFieldProps = {}\n\n      switch (countryCodeValue) {\n        case defaultCountry:\n        case 'DK':\n        case 'CH': {\n          props.mask = [/\\d/, /\\d/, /\\d/, /\\d/]\n          props.pattern = '^[0-9]{4}$'\n          props.placeholder = '0000'\n          break\n        }\n        default:\n          props.width = '8rem'\n          break\n      }\n\n      return { ...props, ...postalCode }\n    },\n    [countryCodeValue]\n  )\n\n  const {\n    mask: postalCodeMask,\n    pattern: postalCodePattern,\n    placeholder: postalCodePlaceHolder,\n    className: postalCodeClassName,\n    label: postalCodeLabel,\n    width: postalCodeWidth,\n    errorMessages: postalCodeErrorMessages,\n  } = handlePostalCodeDefaults(postalCode)\n\n  return (\n    <CompositionField\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldBlockProps}\n      width={width}\n    >\n      <StringField\n        {...postalCode}\n        size={size}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__postal-code',\n          postalCodeClassName\n        )}\n        label={postalCodeLabel ?? translations.PostalCode.label}\n        mask={postalCodeMask}\n        pattern={postalCodePattern}\n        placeholder={postalCodePlaceHolder}\n        errorMessages={useMemo(\n          () => ({\n            'Field.errorRequired': translations.PostalCode.errorRequired,\n            'Field.errorPattern': translations.PostalCode.errorPattern,\n            ...postalCodeErrorMessages,\n          }),\n          [\n            postalCodeErrorMessages,\n            translations.PostalCode.errorPattern,\n            translations.PostalCode.errorRequired,\n          ]\n        )}\n        width={postalCodeWidth ?? false}\n        inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        inputMode=\"numeric\"\n        autoComplete=\"postal-code\"\n        data-country-code={country || countryCode}\n      />\n\n      <StringField\n        help={help}\n        {...city}\n        size={size}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__city',\n          cityClassName\n        )}\n        label={cityLabel ?? translations.City.label}\n        errorMessages={useMemo(\n          () => ({\n            'Field.errorRequired': translations.City.errorRequired,\n            'Field.errorPattern': translations.City.errorPattern,\n            ...cityErrorMessages,\n          }),\n          [\n            cityErrorMessages,\n            translations.City.errorPattern,\n            translations.City.errorRequired,\n          ]\n        )}\n        pattern={cityPattern}\n        trim\n        width={cityWidth ?? 'stretch'}\n        inputClassName=\"dnb-forms-field-postal-code-and-city__city-input\"\n        autoComplete=\"address-level2\"\n      />\n    </CompositionField>\n  )\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"PostalCodeAndCity.js","names":["React","useCallback","useContext","useMemo","classnames","DataContext","StringField","CompositionField","useTranslation","useDataValue","COUNTRY","defaultCountry","PostalCodeAndCity","props","_useContext","translations","getSourceValue","countryCodeFromProvider","countryCode","postalCode","city","help","width","country","size","fieldBlockProps","_objectWithoutProperties","_excluded","countryCodeValue","handleCityDefaults","pattern","_objectSpread","cityPattern","className","cityClassName","label","cityLabel","cityWidth","errorMessages","cityErrorMessages","handlePostalCodeDefaults","mask","placeholder","postalCodeMask","postalCodePattern","postalCodePlaceHolder","postalCodeClassName","postalCodeLabel","postalCodeWidth","postalCodeErrorMessages","createElement","_extends","PostalCode","errorRequired","errorPattern","inputClassName","inputMode","autoComplete","City","trim","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { Props as FieldBlockProps } from '../../FieldBlock'\nimport DataContext from '../../DataContext/Context'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport CompositionField from '../Composition'\nimport { CountryCode, Path } from '../../types'\nimport useTranslation from '../../hooks/useTranslation'\nimport useDataValue from '../../hooks/useDataValue'\nimport { COUNTRY as defaultCountry } from '../../../../shared/defaults'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\n\nexport type Props = Pick<\n  FieldBlockProps,\n  'error' | 'warning' | 'info' | 'width' | 'className'\n> &\n  Partial<Record<'postalCode' | 'city', StringFieldProps>> & {\n    /**\n     * Defines which country the postal code and city is for.\n     * Setting it to anything other than `no` will remove the default norwegian postal code pattern.\n     * You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`.\n     * Default: `NO`\n     */\n    /**\n     * @deprecated – use countryCode instead. Will be removed in v11.\n     */\n    country?: Path | string\n\n    /**\n     * Defines which country the postal code and city is for.\n     * Setting it to anything other than `no` will remove the default norwegian postal code pattern.\n     * You can also use the value of another field to define the countryCode, by using a path value i.e. `/myCountryCodePath`.\n     * Default: `NO`\n     */\n    countryCode?: CountryCode\n    help?: HelpProps\n  } & Pick<StringFieldProps, 'size'>\n\nfunction PostalCodeAndCity(props: Props) {\n  const translations = useTranslation()\n  const { getSourceValue } = useDataValue()\n  const countryCodeFromProvider = useContext(DataContext)?.countryCode\n\n  const {\n    postalCode = {},\n    city = {},\n    help,\n    width = 'large',\n    country,\n    countryCode = countryCodeFromProvider ?? defaultCountry,\n    size,\n    ...fieldBlockProps\n  } = props\n\n  const countryCodeValue = getSourceValue(country || countryCode)\n\n  const handleCityDefaults = useCallback(\n    (city: StringFieldProps) => {\n      const props: StringFieldProps = {}\n\n      switch (countryCodeValue) {\n        case defaultCountry: {\n          props.pattern = '^[A-Za-zÆØÅæøå -]+$'\n          break\n        }\n      }\n\n      return { ...props, ...city }\n    },\n    [countryCodeValue]\n  )\n\n  const {\n    pattern: cityPattern,\n    className: cityClassName,\n    label: cityLabel,\n    width: cityWidth,\n    errorMessages: cityErrorMessages,\n  } = handleCityDefaults(city)\n\n  const handlePostalCodeDefaults = useCallback(\n    (postalCode: StringFieldProps) => {\n      const props: StringFieldProps = {}\n\n      switch (countryCodeValue) {\n        case defaultCountry:\n        case 'DK':\n        case 'CH': {\n          props.mask = [/\\d/, /\\d/, /\\d/, /\\d/]\n          props.pattern = '^[0-9]{4}$'\n          props.placeholder = '0000'\n          break\n        }\n        default:\n          props.width = '8rem'\n          break\n      }\n\n      return { ...props, ...postalCode }\n    },\n    [countryCodeValue]\n  )\n\n  const {\n    mask: postalCodeMask,\n    pattern: postalCodePattern,\n    placeholder: postalCodePlaceHolder,\n    className: postalCodeClassName,\n    label: postalCodeLabel,\n    width: postalCodeWidth,\n    errorMessages: postalCodeErrorMessages,\n  } = handlePostalCodeDefaults(postalCode)\n\n  return (\n    <CompositionField\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldBlockProps}\n      width={width}\n    >\n      <StringField\n        size={size}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__postal-code',\n          postalCodeClassName\n        )}\n        label={postalCodeLabel ?? translations.PostalCode.label}\n        mask={postalCodeMask}\n        pattern={postalCodePattern}\n        placeholder={postalCodePlaceHolder}\n        errorMessages={useMemo(\n          () => ({\n            'Field.errorRequired': translations.PostalCode.errorRequired,\n            'Field.errorPattern': translations.PostalCode.errorPattern,\n            ...postalCodeErrorMessages,\n          }),\n          [\n            postalCodeErrorMessages,\n            translations.PostalCode.errorPattern,\n            translations.PostalCode.errorRequired,\n          ]\n        )}\n        width={postalCodeWidth ?? false}\n        inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        inputMode=\"numeric\"\n        autoComplete=\"postal-code\"\n        data-country-code={country || countryCode}\n        {...postalCode}\n      />\n\n      <StringField\n        help={help}\n        size={size}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__city',\n          cityClassName\n        )}\n        label={cityLabel ?? translations.City.label}\n        errorMessages={useMemo(\n          () => ({\n            'Field.errorRequired': translations.City.errorRequired,\n            'Field.errorPattern': translations.City.errorPattern,\n            ...cityErrorMessages,\n          }),\n          [\n            cityErrorMessages,\n            translations.City.errorPattern,\n            translations.City.errorRequired,\n          ]\n        )}\n        pattern={cityPattern}\n        trim\n        width={cityWidth ?? 'stretch'}\n        inputClassName=\"dnb-forms-field-postal-code-and-city__city-input\"\n        autoComplete=\"address-level2\"\n        {...city}\n      />\n    </CompositionField>\n  )\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":"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","ignoreList":[]}

package/extensions/forms/Field/PostalCodeAndCity/style/dnb-postal-code-and-city--isolated.css

@@ -0,0 +1,9 @@
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_1 .dnb-forms-field-postal-code-and-city__postal-code {
+  flex: 0 5rem;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-postal-code-and-city__city {
+  flex: 1;
+}

package/extensions/forms/Field/PostalCodeAndCity/style/dnb-postal-code-and-city--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_1 .dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.eufemia-scope--10_77_1 .dnb-forms-field-postal-code-and-city__city{flex:1}

package/extensions/forms/Field/Selection/style/dnb-selection--isolated.css

@@ -0,0 +1,66 @@
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label {
+  align-self: center;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label, .eufemia-scope--10_77_1 .dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label {
+  margin-bottom: 0;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-selection--options-layout--vertical.dnb-forms-field-selection--layout-horizontal .dnb-forms-field-block__label {
+  align-items: flex-start;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label {
+  line-height: 2.5rem;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--radio-list {
+  --outline-color: var(--color-black-8);
+  --outline-width: 0.0625rem;
+  --list-padding: 1rem;
+  --list-height: 4rem;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--radio-list .dnb-radio-group__shell {
+  row-gap: 0;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--radio-list .dnb-toggle-button-group__fieldset {
+  border-radius: 0.5rem;
+  --border-color: var(--outline-color);
+  --border-width: var(--outline-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  background-color: var(--color-white);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--radio-list .dnb-radio {
+  justify-content: center;
+  padding: calc((var(--list-height) - 1.5rem) / 2) var(--list-padding);
+  overflow: clip;
+  position: relative;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--radio-list .dnb-radio .dnb-radio__input {
+  -webkit-appearance: none;
+          appearance: none;
+  transform: none;
+  left: calc(var(--list-padding) * -1);
+  width: 100vw;
+  height: var(--list-height);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--radio-list .dnb-radio .dnb-form-label {
+  padding-left: var(--list-padding);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--radio-list .dnb-radio:not(:first-of-type)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(--outline-color);
+  height: var(--outline-width);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-selection .dnb-forms-field-block__contents {
+  display: flex;
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-selection .dnb-radio-group .dnb-height-animation, .eufemia-scope--10_77_1 .dnb-forms-field-selection .dnb-radio-group > .dnb-flex-container, .eufemia-scope--10_77_1 .dnb-forms-field-selection .dnb-toggle-button-group .dnb-height-animation, .eufemia-scope--10_77_1 .dnb-forms-field-selection .dnb-toggle-button-group > .dnb-flex-container {
+  width: 100%;
+  flex-grow: 1;
+}

package/extensions/forms/Field/Selection/style/dnb-selection--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.eufemia-scope--10_77_1 .dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.eufemia-scope--10_77_1 .dnb-forms-field-selection--options-layout--vertical.dnb-forms-field-selection--layout-horizontal .dnb-forms-field-block__label{align-items:flex-start}.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--radio-list{--outline-color:var(--color-black-8);--outline-width:0.0625rem;--list-padding:1rem;--list-height:4rem}.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--radio-list .dnb-radio-group__shell{row-gap:0}.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--radio-list .dnb-toggle-button-group__fieldset{--border-color:var(--outline-color);--border-width:var(--outline-width);background-color:var(--color-white);border-color:transparent;border-radius:.5rem;box-shadow:0 0 0 var(--border-width) var(--border-color)}.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--radio-list .dnb-radio{justify-content:center;overflow:clip;padding:calc((var(--list-height) - 1.5rem)/2) var(--list-padding);position:relative}.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--radio-list .dnb-radio .dnb-radio__input{-webkit-appearance:none;appearance:none;height:var(--list-height);left:calc(var(--list-padding)*-1);transform:none;width:100vw}.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--radio-list .dnb-radio .dnb-form-label{padding-left:var(--list-padding)}.eufemia-scope--10_77_1 .dnb-forms-field-selection__variant--radio-list .dnb-radio:not(:first-of-type):before{background-color:var(--outline-color);bottom:0;content:"";height:var(--outline-width);left:0;position:absolute;right:0;top:0}.eufemia-scope--10_77_1 .dnb-forms-field-selection .dnb-forms-field-block__contents{display:flex}.eufemia-scope--10_77_1 .dnb-forms-field-selection .dnb-radio-group .dnb-height-animation,.eufemia-scope--10_77_1 .dnb-forms-field-selection .dnb-radio-group>.dnb-flex-container,.eufemia-scope--10_77_1 .dnb-forms-field-selection .dnb-toggle-button-group .dnb-height-animation,.eufemia-scope--10_77_1 .dnb-forms-field-selection .dnb-toggle-button-group>.dnb-flex-container{flex-grow:1;width:100%}

package/extensions/forms/Field/String/style/dnb-string--isolated.css

@@ -0,0 +1,11 @@
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_1 .dnb-forms-field-string .dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label.dnb-form-label {
+  align-items: baseline;
+}
+@media screen and (max-width: xx-small0) {
+  .eufemia-scope--10_77_1 .dnb-forms-field-string .dnb-input__shell {
+    width: 90%;
+  }
+}

package/extensions/forms/Field/String/style/dnb-string--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_1 .dnb-forms-field-string .dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label.dnb-form-label{align-items:baseline}@media screen and (max-width:xx-small0){.eufemia-scope--10_77_1 .dnb-forms-field-string .dnb-input__shell{width:90%}}

package/extensions/forms/Field/Upload/style/dnb-upload--isolated.css

@@ -0,0 +1,9 @@
+.eufemia-scope--10_77_1 .dnb-forms-field-upload .dnb-help-button__content .dnb-section {
+  --outset-left: calc(var(--spacing-medium));
+  --outset-right: calc(var(--spacing-medium));
+  margin-left: var(--upload-border-width);
+  margin-right: var(--upload-border-width);
+}
+.eufemia-scope--10_77_1 .dnb-forms-field-upload .dnb-help-button__content .dnb-section::before {
+  z-index: 0;
+}

package/extensions/forms/Field/Upload/style/dnb-upload--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_1 .dnb-forms-field-upload .dnb-help-button__content .dnb-section{--outset-left:calc(var(--spacing-medium));--outset-right:calc(var(--spacing-medium));margin-left:var(--upload-border-width);margin-right:var(--upload-border-width)}.eufemia-scope--10_77_1 .dnb-forms-field-upload .dnb-help-button__content .dnb-section:before{z-index:0}