@dnb/eufemia 10.14.0 → 10.15.0

package/es/style/themes/theme-sbanken/sbanken-theme-components.css

@@ -451,6 +451,250 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
   border-color: transparent;
 }
 
+/**
+ * ATTENTION: This file is auto generated by using "styleFactory".
+ * Do not change the content!
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: column;
+  grid-row-gap: var(--spacing-x-small);
+  row-gap: var(--spacing-x-small);
+}
+.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: row wrap;
+  grid-column-gap: var(--spacing-small);
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
+}
+
+.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-phone-number__country-code {
+  width: calc(var(--forms-field-width--medium) - 2rem);
+}
+.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-postal-code-and-city__fields {
+  display: flex;
+  flex-flow: row;
+  grid-column-gap: var(--spacing-small);
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
+}
+.dnb-forms-field-postal-code-and-city__postal-code {
+  flex: 0 5rem;
+}
+.dnb-forms-field-postal-code-and-city__city {
+  flex: 1;
+}
+
+.dnb-forms-field-selection--width-large .dnb-dropdown__shell {
+  width: var(--forms-field-width--large);
+}
+.dnb-forms-field-selection--width-medium .dnb-dropdown__shell {
+  width: var(--forms-field-width--medium);
+}
+.dnb-forms-field-selection--width-small .dnb-dropdown__shell {
+  width: var(--forms-field-width--small);
+}
+
+:root {
+  --forms-field-width--small: 5rem;
+  --forms-field-width--medium: 11rem;
+  --forms-field-width--large: 21rem;
+}
+
+/*
+ * Utilities
+ */
+fieldset.dnb-forms-field-block {
+  padding: 0;
+  border: none;
+}
+fieldset.dnb-forms-field-block:not([class*=space__top]) {
+  margin-top: 0;
+}
+fieldset.dnb-forms-field-block:not([class*=space__right]) {
+  margin-right: 0;
+}
+fieldset.dnb-forms-field-block:not([class*=space__bottom]) {
+  margin-bottom: 0;
+}
+fieldset.dnb-forms-field-block:not([class*=space__left]) {
+  margin-left: 0;
+}
+
+.dnb-forms-field-block__grid {
+  display: grid;
+}
+.dnb-forms-field-block--layout-vertical {
+  grid-template-columns: auto;
+  grid-template-areas: "label" "contents" "status";
+}
+.dnb-forms-field-block--layout-horizontal {
+  grid-template-columns: var(--forms-field-width--medium) auto;
+  grid-template-areas: "label contents" "status status";
+}
+.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 {
+  grid-area: label;
+  display: flex;
+  flex-flow: row;
+  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;
+}
+.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 {
+  display: flex;
+  flex-flow: row;
+  grid-column-gap: var(--spacing-small);
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
+}
+
+.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]) {
+  margin: 0;
+}
+.dnb-form-main-heading[\:has\(\%2B\%20.dnb-flex-stack\%20\%3E\%20.dnb-card\,\%20\%2B\%20.dnb-card\)]:not([class*=space__left]) {
+  margin-left: var(--spacing-medium);
+}
+.dnb-form-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__left]) {
+  margin-left: var(--spacing-medium);
+}
+.dnb-form-main-heading[\:has\(\%2B\%20.dnb-flex-stack\%20\%3E\%20.dnb-card\,\%20\%2B\%20.dnb-card\)]:not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
+}
+.dnb-form-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
+}
+
+.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]) {
+  margin: 0;
+}
+.dnb-form-sub-heading[\:has\(\%2B\%20.dnb-flex-stack\%20\%3E\%20.dnb-card\,\%20\%2B\%20.dnb-card\)]:not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
+}
+.dnb-form-sub-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
+}
+
+/*
+ * Utilities
+ */
+.dnb-forms-steps-layout {
+  display: flex;
+  flex-flow: row wrap;
+  grid-column-gap: var(--spacing-medium);
+  -moz-column-gap: var(--spacing-medium);
+       column-gap: var(--spacing-medium);
+}
+@media (max-width: 60em) {
+  .dnb-forms-steps-layout {
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: stretch;
+  }
+}
+.dnb-forms-steps-layout__sidebar {
+  flex: 0;
+  min-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar {
+  max-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+  min-width: 336px;
+}
+.dnb-forms-steps-layout__contents {
+  flex: 1;
+  min-width: 25rem;
+}
+.dnb-forms-steps-layout__contents .dnb-card {
+  --border-color: var(--color-pistachio);
+}
+
+.dnb-forms-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, 0.5);
+}
+
+.dnb-forms-test-element {
+  border: 1px dashed #808080;
+  border-radius: 0.5rem;
+  color: #909090;
+  padding: 0.5rem 1rem;
+}
+
 /*
 * Accordion component
 *
@@ -460,14 +704,16 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
  */
 .dnb-accordion {
   --accordion-border-width: 0.0625rem;
-  --accordion-border-radius: 0.25rem;
+  --accordion-border-radius: 0.5rem;
   --accordion-easing: var(--easing-default);
-  --accordion-header-margin-vertical: 1.5rem;
-  --accordion-header-margin-vertical--description: 1rem;
-  --accordion-header-wrapper-margin: 2rem;
+  --accordion-header-margin-vertical: 1.25rem;
+  --accordion-header-margin-vertical--description: 0.75rem;
+  --accordion-header-wrapper-margin: 1rem;
   --accordion-header-wrapper-margin--icon-right: 1rem;
   --accordion-header-icon-gutter: 1rem;
   --accordion-header-icon-margin: 1rem;
+  --accordion-title-font-weight: var(--font-weight-basis);
+  --accordion-title-font-weight--expanded: var(--font-weight-medium);
   position: relative;
   display: flex;
   flex-direction: column;
@@ -515,7 +761,7 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
   transition: transform 400ms var(--accordion-easing);
 }
 .dnb-accordion__header--description .dnb-accordion__header__icon {
-  margin-top: 1rem;
+  margin-top: var(--accordion-header-margin-vertical--description);
 }
 .dnb-accordion__header--icon-right {
   justify-content: space-between;
@@ -539,9 +785,15 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 .dnb-accordion__header--icon-right .dnb-accordion__header__container + .dnb-accordion__header__wrapper {
   margin-left: 0;
 }
+.dnb-accordion__header--expanded {
+  --accordion-title-font-weight: var(
+    --accordion-title-font-weight--expanded
+  );
+}
 .dnb-accordion__header__title {
   font-size: var(--font-size-basis);
   line-height: var(--line-height-basis);
+  font-weight: var(--accordion-title-font-weight);
 }
 .dnb-accordion__header__description {
   font-size: var(--font-size-small);
@@ -1380,6 +1632,8 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
   list-style: none;
   flex-flow: row wrap;
   align-items: center;
+  grid-gap: 1.5rem;
+  gap: 1.5rem;
 }
 .dnb-breadcrumb__item__span {
   display: flex;
@@ -1388,12 +1642,8 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
   padding: 0.5rem 0;
 }
 .dnb-breadcrumb__item__span__icon {
-  margin-left: calc(var(--button-icon-size) / 2);
   margin-right: 0.5rem;
 }
-.dnb-breadcrumb__item:not(:first-of-type) .dnb-button.dnb-button--has-text {
-  padding-left: 0.5rem;
-}
 .dnb-breadcrumb__animation {
   display: flex;
   flex-direction: column;
@@ -1415,6 +1665,8 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
   align-items: flex-start;
   margin: 0.5rem 0;
   margin-left: 1.5rem;
+  grid-gap: 0;
+  gap: 0;
 }
 
 /*
@@ -1659,6 +1911,9 @@ button.dnb-button::-moz-focus-inner {
   border: none;
 }
 
+/*
+ * Utilities
+ */
 .dnb-card {
   --background-color: var(--color-white);
   --border-color: var(--color-lavender);
@@ -1669,6 +1924,13 @@ button.dnb-button::-moz-focus-inner {
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
 }
+@media screen and (max-width: 40em) {
+  .dnb-card {
+    --border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
+}
 .dnb-card__heading {
   font-size: var(--font-size-basis);
   font-weight: var(--font-weight-medium);
@@ -1693,10 +1955,43 @@ button.dnb-button::-moz-focus-inner {
   --checkbox-width--large: 2rem;
   --checkbox-height--large: 2rem;
   --checkbox-border-width: 0.125rem;
+  --checkbox-color-gfx-on: black;
+  --checkbox-color-gfx-off: black;
+  --checkbox-color-background-on: white;
+  --checkbox-color-background-off: white;
+  --checkbox-color-border-on: black;
+  --checkbox-color-border-off: black;
+  --checkbox-color-gfx--disabled: grey;
+  --checkbox-color-background-on--disabled: lightgrey;
+  --checkbox-color-background-off--disabled: lightgrey;
+  --checkbox-color-border-on--disabled: grey;
+  --checkbox-color-border-off--disabled: grey;
+  --checkbox-color-background--active: lightgrey;
+  --checkbox-color-border--active: transparent;
+  --checkbox-color-gfx--hover: grey;
+  --checkbox-color-background--hover: white;
+  --checkbox-color-border-on--hover: grey;
+  --checkbox-color-border-off--hover: grey;
+  --checkbox-color-gfx--focus: grey;
+  --checkbox-color-background--focus: lightgrey;
+  --checkbox-color-gfx--error: lavenderblush;
+  --checkbox-color-gfx--error-contrast: red;
+  --checkbox-color-background-on--error: red;
+  --checkbox-color-background--error-contrast: lavenderblush;
+  --checkbox-color-border--error: red;
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
   line-height: var(--line-height-basis);
+  /*
+   * Color scheme
+   */
+  /** Normal state **/
+  /** Disabled state **/
+  /** Active state **/
+  /** Hover state **/
+  /** Focus state **/
+  /** Error state **/
 }
 .dnb-checkbox__inner {
   display: inline-flex;
@@ -1751,6 +2046,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   width: calc(var(--checkbox-width--medium) - 0.5rem);
   height: calc(var(--checkbox-height--medium) - 0.5rem);
   shape-rendering: geometricprecision;
+  transition: opacity 200ms ease-out, transform 200ms ease-out;
 }
 .dnb-checkbox--large {
   line-height: var(--checkbox-height--large);
@@ -1813,12 +2109,107 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   vertical-align: top;
   margin-top: 0.5rem;
 }
+.dnb-checkbox__input:checked ~ .dnb-checkbox__gfx, .dnb-checkbox__input[data-checked=true] ~ .dnb-checkbox__gfx {
+  opacity: 1;
+  transform: scale(1);
+  color: var(--checkbox-color-gfx-on);
+}
+.dnb-checkbox__input:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[data-checked=true] ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background-on);
+  border-color: var(--checkbox-color-border-on);
+}
+.dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__gfx {
+  opacity: 0;
+  transform: scale(0.8);
+  color: var(--checkbox-color-gfx-off);
+}
+.dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background-off);
+  border-color: var(--checkbox-color-border-off);
+}
+.dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[disabled][data-checked=true] ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background-on--disabled);
+  border-color: var(--checkbox-color-border-on--disabled);
+}
+.dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__gfx, .dnb-checkbox__input[disabled][data-checked=true] ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--disabled);
+}
+.dnb-checkbox__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button {
+  border-color: var(--checkbox-color-border-off--disabled);
+  background-color: var(--checkbox-color-background-off--disabled);
+}
+.dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background--active);
+  border-color: var(--checkbox-color-border--active);
+}
+.dnb-checkbox__input:not([disabled]):checked:active ~ .dnb-checkbox__gfx, .dnb-checkbox__input:not([disabled])[data-checked=true]:active ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx-on);
+}
+.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__button {
+  border-color: var(--checkbox-color-border-off--hover);
+  background-color: var(--checkbox-color-background--hover);
+}
+.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--hover);
+}
+.dnb-checkbox__input:not([disabled]):not(:focus):checked:hover ~ .dnb-checkbox__button, .dnb-checkbox__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-checkbox__button {
+  border-color: var(--checkbox-color-border-on--hover);
+}
+html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button {
+  border: none;
+  background-color: var(--checkbox-color-background--focus);
+}
+html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--focus);
+}
+.dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button .dnb-checkbox__focus, .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button .dnb-checkbox__focus {
+  display: block;
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button {
+  border: none;
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus {
+  display: block;
+  --border-color: var(--checkbox-color-border--error);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background--error-contrast);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button[data-checked=true] {
+  border-color: var(--checkbox-color-border--error);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--error-contrast);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--error);
+}
+html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button, html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover ~ .dnb-checkbox__button {
+  border: none;
+  background-color: var(--checkbox-color-background--error-contrast);
+  --border-color: var(--checkbox-color-border--error);
+  --border-width: calc(var(--focus-ring-width) + 0.0625rem);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--error-contrast);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked ~ .dnb-checkbox__button, .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true] ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background-on--error);
+}
 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button {
   border-color: var(--skeleton-color);
 }
 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button::before {
   border-radius: 0;
 }
+.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__gfx {
+  color: var(--skeleton-color);
+}
 
 /*
 * DatePicker component
@@ -3278,7 +3669,7 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
 .dnb-flex-container--row-gap-large, .dnb-flex-container--has-size.dnb-flex-container--spacing-large {
   --gap: var(--spacing-large);
 }
-.dnb-flex-container .dnb-hr {
+.dnb-flex-container__hr.dnb-hr {
   width: 100%;
   color: var(--color-black-8);
 }
@@ -3343,7 +3734,6 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;
@@ -3606,10 +3996,6 @@ button .dnb-form-status__text {
 .dnb-global-status.dnb-section {
   display: block;
 }
-.dnb-global-status__wrapper {
-  position: relative;
-  z-index: 1;
-}
 .dnb-global-status__shell {
   width: 100%;
   opacity: 1;
@@ -3681,9 +4067,6 @@ button .dnb-form-status__text {
 .dnb-global-status__content .dnb-ul .dnb-anchor:last-of-type, .dnb-spacing .dnb-global-status__content .dnb-ul .dnb-anchor:last-of-type, .dnb-spacing .dnb-global-status__content .dnb-ul:not([class*=dnb-space]) .dnb-anchor:last-of-type {
   margin-left: 0.5rem;
 }
-.dnb-global-status__content .dnb-hr, .dnb-spacing .dnb-global-status__content .dnb-hr, .dnb-spacing .dnb-global-status__content .dnb-hr:not([class*=dnb-space]) {
-  margin: 0;
-}
 
 /*
  * Utilities
@@ -3950,40 +4333,108 @@ p > .dnb-icon {
 }
 
 /*
-* Input component
+* InputMasked component
 *
 */
 /*
  * Utilities
  */
-.dnb-input {
-  --input-font-size: var(--font-size-basis);
-  --input-font-size--small: var(--font-size-basis);
-  --input-font-size--medium: var(--font-size-basis);
-  --input-font-size--large: var(--font-size-medium);
-  --input-padding: 1rem;
-  --input-padding--small: 1rem;
-  --input-padding--medium: 1rem;
-  --input-padding--large: 1rem;
-  --input-height: 2rem;
-  --input-height--small: 1.5rem;
-  --input-height--medium: 2.5rem;
-  --input-height--large: 3rem;
-  --input-background-color: var(--color-white);
-  display: inline-flex;
-  align-items: center;
-  font-size: var(--input-font-small);
-  line-height: var(--input-height);
-  text-align: left;
+.dnb-input-masked--guide {
+  font-family: var(--font-family-monospace);
 }
-.dnb-input__inner {
-  display: inline-flex;
-  flex-direction: column;
-  width: auto;
+
+.dnb-multi-input-mask__fieldset {
+  margin: 0;
+  padding: 0;
+  border: none;
 }
-.dnb-input__shell {
-  position: relative;
-  display: flex;
+.dnb-multi-input-mask__fieldset--horizontal {
+  display: inline-flex;
+  flex-flow: row wrap;
+  align-items: baseline;
+  grid-gap: 1rem;
+  gap: 1rem;
+}
+
+.dnb-multi-input-mask__input.dnb-input__input {
+  display: inline-block;
+  width: auto;
+  margin: 0;
+  padding: 0 0.125rem;
+  transform: translateY(0);
+  outline: none;
+  font-family: var(--font-family-monospace);
+  text-align: center;
+  border: none;
+  background: transparent;
+  overflow: visible;
+  white-space: nowrap;
+}
+.dnb-multi-input-mask__input.dnb-input__input:first-of-type {
+  padding-left: 0.5rem;
+}
+.dnb-multi-input-mask__input.dnb-input__input:last-of-type {
+  padding-right: 0.5rem;
+}
+
+.dnb-multi-input-mask {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input,
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter {
+  color: var(--color-black-55);
+}
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input--highlight,
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter--highlight {
+  color: var(--color-black);
+}
+.dnb-multi-input-mask .dnb-input__shell:focus-within {
+  box-shadow: 0 0 0 var(--input-border-width--focus) var(--input-border-color--hover);
+}
+
+.dnb-multi-input-mask__legend--horizontal.dnb-form-label {
+  display: contents;
+}
+.dnb-multi-input-mask__legend:not([disabled]):hover ~ .dnb-multi-input-mask .dnb-input__shell {
+  box-shadow: 0 0 0 var(--input-border-width--focus) var(--input-border-color--hover);
+}
+
+/*
+* Input component
+*
+*/
+/*
+ * Utilities
+ */
+.dnb-input {
+  --input-font-size: var(--font-size-basis);
+  --input-font-size--small: var(--font-size-basis);
+  --input-font-size--medium: var(--font-size-basis);
+  --input-font-size--large: var(--font-size-medium);
+  --input-padding: 1rem;
+  --input-padding--small: 1rem;
+  --input-padding--medium: 1rem;
+  --input-padding--large: 1rem;
+  --input-height: 2rem;
+  --input-height--small: 1.5rem;
+  --input-height--medium: 2.5rem;
+  --input-height--large: 3rem;
+  --input-background-color: var(--color-white);
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--input-font-small);
+  line-height: var(--input-height);
+  text-align: left;
+}
+.dnb-input__inner {
+  display: inline-flex;
+  flex-direction: column;
+  width: auto;
+}
+.dnb-input__shell {
+  position: relative;
+  display: flex;
   align-items: center;
   border: var(--input-border-width) solid var(--color-sea-green);
 }
@@ -4036,9 +4487,6 @@ p > .dnb-icon {
 .dnb-input__input::-ms-clear {
   display: none;
 }
-.dnb-input__input:autofill {
-  box-shadow: 0 0 0 var(--input-border-width) var(--input-border-color), 0 0 0 10em var(--input-background-color) inset;
-}
 .dnb-input ::-webkit-file-upload-button {
   cursor: pointer;
   outline: none;
@@ -4070,6 +4518,9 @@ p > .dnb-icon {
   display: inline-flex;
   align-items: center;
 }
+.dnb-input__input:autofill {
+  box-shadow: 0 0 0 var(--input-border-width) var(--input-border-color) var(--autofill-inset, inset), 0 0 0 10em var(--input-background-color) inset;
+}
 .dnb-input__suffix {
   color: inherit;
 }
@@ -4257,6 +4708,7 @@ html:not([data-whatintent=touch]) .dnb-input--clear.dnb-input__submit-element .d
 .dnb-input__icon {
   order: 0;
   position: absolute;
+  z-index: 2;
   left: 1rem;
   right: auto;
   top: 0;
@@ -4283,6 +4735,9 @@ html:not([data-whatintent=touch]) .dnb-input--clear.dnb-input__submit-element .d
 html[data-visual-test] .dnb-input__input {
   caret-color: var(--color-white);
 }
+.dnb-input[data-has-content=false] .dnb-input__input:focus:autofill {
+  --autofill-inset: none;
+}
 @media screen and (max-width: 40em) {
   .dnb-responsive-component .dnb-input {
     display: flex;
@@ -4298,74 +4753,6 @@ html[data-visual-test] .dnb-input__input {
   }
 }
 
-/*
-* InputMasked component
-*
-*/
-/*
- * Utilities
- */
-.dnb-input-masked--guide {
-  font-family: var(--font-family-monospace);
-}
-
-.dnb-multi-input-mask__fieldset {
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-.dnb-multi-input-mask__fieldset--horizontal {
-  display: inline-flex;
-  flex-flow: row wrap;
-  align-items: baseline;
-  grid-gap: 1rem;
-  gap: 1rem;
-}
-
-.dnb-multi-input-mask__input {
-  display: inline-block;
-  width: auto;
-  margin: 0;
-  padding: 0 0.125rem;
-  transform: translateY(0);
-  outline: none;
-  font-family: var(--font-family-monospace);
-  text-align: center;
-  border: none;
-  background: transparent;
-  overflow: visible;
-  white-space: nowrap;
-}
-.dnb-multi-input-mask__input:first-of-type {
-  padding-left: 0.5rem;
-}
-.dnb-multi-input-mask__input:last-of-type {
-  padding-right: 0.5rem;
-}
-
-.dnb-multi-input-mask {
-  width: -moz-fit-content;
-  width: fit-content;
-}
-.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input,
-.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter {
-  color: var(--color-black-55);
-}
-.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input--highlight,
-.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter--highlight {
-  color: var(--color-black);
-}
-.dnb-multi-input-mask .dnb-input__shell:focus-within {
-  box-shadow: 0 0 0 var(--input-border-width--focus) var(--input-border-color--hover);
-}
-
-.dnb-multi-input-mask__legend--horizontal.dnb-form-label {
-  display: contents;
-}
-.dnb-multi-input-mask__legend:not([disabled]):hover ~ .dnb-multi-input-mask .dnb-input__shell {
-  box-shadow: 0 0 0 var(--input-border-width--focus) var(--input-border-color--hover);
-}
-
 /*
  * Logo Component
  *
@@ -5054,6 +5441,7 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
   --radio-color-background-off: white;
   --radio-color-border-off: black;
   --radio-color-dot-on--disabled: lightgrey;
+  --radio-color-background--disabled: white;
   --radio-color-border-on--disabled: lightgrey;
   --radio-color-border-off--disabled: lightgrey;
   --radio-color-dot-on--active: lightgrey;
@@ -5061,13 +5449,17 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
   --radio-color-background-off--active: lightgrey;
   --radio-color-border-off--active: transparent;
   --radio-color-dot-on--hover: lightgrey;
+  --radio-color-background-on--hover: lightgrey;
   --radio-color-background-off--hover: lightgrey;
   --radio-color-background-on--focus: var(--color-white);
   --radio-color-background-off--focus: lightgrey;
   --radio-color-dot-on--error: red;
   --radio-color-border-on--error: red;
-  --radio-color-background-off--error: lavenderblush;
+  --radio-color-border--error-hover: red;
+  --radio-color-background-off--error-hover: lavenderblush;
+  --radio-color-background-on--error-hover: lavenderblush;
   --radio-color-dot-on--error-hover: lavenderblush;
+  --radio-focus-ring-width--error: var(--focus-ring-width);
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
@@ -5256,9 +5648,6 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .dnb-radio-group .dnb-flex-container::before {
   font-size: var(--font-size-basis);
 }
-.dnb-skeleton .dnb-radio__input[disabled] ~ .dnb-radio__button {
-  border-color: var(--skeleton-color);
-}
 .dnb-radio__input:checked ~ .dnb-radio__button, .dnb-radio__input[data-checked=true] ~ .dnb-radio__button {
   background-color: var(--radio-color-background-on);
   border-color: var(--radio-color-border-on);
@@ -5277,12 +5666,20 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 }
 .dnb-radio__input[disabled]:checked ~ .dnb-radio__button, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__button {
   border-color: var(--radio-color-border-on--disabled);
+  background-color: var(--radio-color-background--disabled);
 }
 .dnb-radio__input[disabled]:checked ~ .dnb-radio__dot, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__dot {
   background-color: var(--radio-color-dot-on--disabled);
 }
-.dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
+.dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button:not(.dnb-skeleton) {
   border-color: var(--radio-color-border-off--disabled);
+  background-color: var(--radio-color-background--disabled);
+}
+.dnb-radio__input[disabled] ~ .dnb-radio__button.dnb-skeleton {
+  border-color: var(--skeleton-color);
+}
+.dnb-radio__input[disabled] ~ .dnb-radio__button.dnb-skeleton::before {
+  border-radius: 0;
 }
 .dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__button, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__button {
   border-color: var(--radio-color-border-on--active);
@@ -5297,6 +5694,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__dot, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__dot {
   background-color: var(--radio-color-dot-on--hover);
 }
+.dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on--hover);
+}
 .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
   background-color: var(--radio-color-background-off--hover);
 }
@@ -5306,9 +5706,12 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-rad
 .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus {
   display: block;
 }
-.dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__button {
+html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__button, html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__button {
   background-color: var(--radio-color-background-on--focus);
 }
+html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__dot, html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--focus, var(--focus-ring-color));
+}
 html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button {
   background-color: var(--radio-color-background-off--focus);
 }
@@ -5318,7 +5721,13 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__focus {
   display: block;
   --border-color: var(--radio-color-border-on--error);
-  --border-width: var(--focus-ring-width);
+  --border-width: var(--radio-focus-ring-width--error);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):hover ~ .dnb-radio__focus {
+  --border-color: var(--radio-color-border--error-hover);
+  --border-width: var(--radio-focus-ring-width--error);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
@@ -5328,8 +5737,11 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__dot {
   background-color: var(--radio-color-dot-on--error-hover);
 }
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__button, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on--error-hover);
+}
 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
-  background-color: var(--radio-color-background-off--error);
+  background-color: var(--radio-color-background-off--error-hover);
 }
 
 /*
@@ -5357,6 +5769,15 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
 .dnb-section[style*="--background-color"] {
   background-color: var(--background-color, white);
 }
+.dnb-section::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  box-shadow: var(--drop-shadow, none);
+}
 .dnb-section::after {
   content: "";
   visibility: var(--breakout, hidden);
@@ -5381,6 +5802,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
     --background-color--value: var(--background-color--small);
     --text-color--value: var(--text-color--small);
     --outline-color: var(--outline-color--small);
+    --drop-shadow: var(--drop-shadow--small);
     --rounded-corner: var(
       --rounded-corner--small,
       var(--rounded-corner--fallback)
@@ -5393,6 +5815,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
     --background-color--value: var(--background-color--medium);
     --text-color--value: var(--text-color--medium);
     --outline-color: var(--outline-color--medium);
+    --drop-shadow: var(--drop-shadow--medium);
     --rounded-corner: var(
       --rounded-corner--medium,
       var(--rounded-corner--fallback)
@@ -5405,6 +5828,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
     --background-color--value: var(--background-color--large);
     --text-color--value: var(--text-color--large);
     --outline-color: var(--outline-color--large);
+    --drop-shadow: var(--drop-shadow--large);
     --rounded-corner: var(
       --rounded-corner--large,
       var(--rounded-corner--fallback)
@@ -6608,11 +7032,11 @@ html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dn
   font-size: var(--font-size-basis);
 }
 .dnb-switch__shell {
-  -webkit-user-select: none;
-          user-select: none;
   position: relative;
   display: flex;
   align-items: center;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .dnb-switch--large {
   line-height: var(--switch-height--large);
@@ -6634,9 +7058,9 @@ html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dn
   left: 0;
   width: var(--switch-height--medium);
   height: var(--switch-height--medium);
-  transform: translateX(0);
-  transition: transform 160ms ease-out 125ms;
+  background-color: lightgrey;
   border: var(--switch-border-width--medium) solid transparent;
+  transition: transform 160ms ease-out 125ms;
 }
 .dnb-switch--large .dnb-switch__button {
   width: var(--switch-height--large);
@@ -6649,10 +7073,6 @@ html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dn
   z-index: 2;
   width: 100%;
   height: 100%;
-  transition: transform 150ms ease-out;
-  transform: rotate(0deg);
-  -webkit-clip-path: polygon(50% 15%, 110% 15%, 110% -10%, -10% -10%, -10% 110%, 110% 110%, 110% 85%, 50% 85%);
-          clip-path: polygon(50% 15%, 110% 15%, 110% -10%, -10% -10%, -10% 110%, 110% 110%, 110% 85%, 50% 85%);
   outline: none;
 }
 html[data-whatinput=keyboard] .dnb-switch__focus {
@@ -6676,10 +7096,21 @@ html[data-whatinput=keyboard] .dnb-switch__focus {
   transform: translateX(calc(var(--switch-width--large) - 2rem + var(--switch-border-width--large)));
 }
 .dnb-switch__background {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
   width: var(--switch-width--medium);
   height: calc(var(--switch-height--medium) - 0.5rem);
+  background-color: grey;
   border-radius: calc(var(--switch-height--medium) - 0.25rem);
 }
+.dnb-switch__background::after {
+  content: "";
+  position: absolute;
+  transition: transform 0.3s ease-out, position 0.3s ease-out;
+}
 .dnb-switch--large .dnb-switch__background {
   width: var(--switch-width--large);
   height: calc(var(--switch-height--large) - 0.75rem);
@@ -6705,6 +7136,18 @@ html[data-whatinput=keyboard] .dnb-switch__focus {
 .dnb-switch__input:not([disabled]) {
   cursor: pointer;
 }
+.dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
+  outline: none;
+}
+html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus, .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button .dnb-switch__focus {
+  display: block;
+}
 .dnb-switch .dnb-form-label {
   padding-right: 0.5rem;
   margin-right: 0;
@@ -6725,7 +7168,7 @@ html[data-whatinput=keyboard] .dnb-switch__focus {
 }
 .dnb-switch--label-position-left .dnb-switch__order .dnb-form-label {
   order: 1;
-  align-self: flex-start;
+  align-self: center;
 }
 .dnb-switch--label-position-left .dnb-switch__order .dnb-form-status {
   order: 3;
@@ -6749,8 +7192,23 @@ html[data-whatinput=keyboard] .dnb-switch__focus {
   background-color: var(--skeleton-color);
 }
 .dnb-switch.dnb-skeleton .dnb-switch__input[disabled]:not(:checked) ~ .dnb-switch__background::after {
+  content: "";
   border-color: var(--skeleton-color--contrast);
 }
+.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__button .dnb-switch__focus {
+  display: block;
+  --border-color: red;
+  --border-width: var(--focus-ring-width, 0.125rem);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background {
+  background-color: tomato;
+  --border-color: red;
+  --border-width: var(--focus-ring-width, 0.125rem);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
 @supports (-ms-ime-align: auto) {
   .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
     transform: translateX(0);
@@ -8279,16 +8737,9 @@ html[data-visual-test] .dnb-textarea__textarea {
   width: calc(var(--radio-width--medium) - 1rem);
   height: calc(var(--radio-height--medium) - 1rem);
 }
-.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active).dnb-button--secondary, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active).dnb-button--secondary:hover {
-  background-color: var(--color-emerald-green);
-  color: var(--color-mint-green);
-}
 :not(.dnb-toggle-button-group) > .dnb-form-label + .dnb-toggle-button {
   vertical-align: top;
 }
-.dnb-toggle-button-group__suffix {
-  font-size: var(--font-size-basis);
-}
 .dnb-toggle-button .dnb-form-status {
   order: 2;
   margin-top: 0.5rem;
@@ -8340,6 +8791,9 @@ html[data-visual-test] .dnb-textarea__textarea {
 .dnb-toggle-button-group .dnb-alignment-helper {
   line-height: 2.5rem;
 }
+.dnb-toggle-button-group__suffix {
+  font-size: var(--font-size-basis);
+}
 @media screen and (min-width: 40em) {
   .dnb-form-label + .dnb-toggle-button {
     transform: translateY(-0.5rem);
@@ -8633,39 +9087,29 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-/*
-* Button mixins
-*
-*/
 .dnb-accordion {
   --accordion-border-width: 0;
   --accordion-border-radius: 0;
   --accordion-header-margin-vertical: 1rem;
   --accordion-header-margin-vertical--description: 0.5rem;
-  --accordion-header-wrapper-margin: 1rem;
   --accordion-header-wrapper-margin--icon-right: calc(
-    1.5rem - var(--accordion-frame-width)
+    1.5rem - var(--sb-accordion-frame-width)
   );
   --accordion-header-icon-gutter: 0.5rem;
   --accordion-header-icon-margin: calc(
-    1.5rem - var(--accordion-frame-width)
+    1.5rem - var(--sb-accordion-frame-width)
   );
-  --accordion-frame-color: transparent;
-  --accordion-frame-color--expanded: var(--sb-color-violet);
-  --accordion-frame-color--disabled: var(--sb-color-gray-dark-2);
-  --accordion-frame-width: 0.1875rem;
-  --accordion-frame-width--active: 0rem;
-  --accordion-bg: transparent;
-  --accordion-bg--expanded: var(--sb-color-violet-light-4);
-  --accordion-bg--disabled: var(--sb-color-gray-light-2);
-  --accordion-content-padding-left: calc(
-    3.5rem - var(--accordion-frame-width)
+  --sb-accordion-frame-color: transparent;
+  --sb-accordion-frame-width: 0.1875rem;
+  --sb-accordion-frame-width--active: 0rem;
+  --sb-accordion-content-padding-left: calc(
+    3.5rem - var(--sb-accordion-frame-width)
   );
   color: var(--sb-color-text);
 }
 .dnb-accordion__header, .dnb-accordion__content {
-  background-color: var(--accordion-bg);
-  border-left: var(--accordion-frame-width) solid var(--accordion-frame-color);
+  background-color: var(--sb-accordion-background, transparent);
+  border-left: var(--sb-accordion-frame-width) solid var(--sb-accordion-frame-color);
 }
 html:not([data-whatintent=touch]) .dnb-accordion__header.focus-visible[disabled] {
   cursor: not-allowed;
@@ -8716,8 +9160,8 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
   --border-width: 0.0625rem;
   box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   --border-color: var(--sb-color-violet);
-  border-left-width: var(--accordion-frame-width--active);
-  padding-left: calc(var(--accordion-frame-width) - var(--accordion-frame-width--active));
+  border-left-width: var(--sb-accordion-frame-width--active);
+  padding-left: calc(var(--sb-accordion-frame-width) - var(--sb-accordion-frame-width--active));
 }
 .dnb-accordion__header__icon, .dnb-accordion__header__container {
   color: var(--sb-color-violet);
@@ -8726,8 +9170,8 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
   --accordion-header-icon-margin: 1.5rem;
 }
 .dnb-accordion__header--icon-right + .dnb-accordion__content {
-  --accordion-content-padding-left: calc(
-    1.5rem - var(--accordion-frame-width)
+  --sb-accordion-content-padding-left: calc(
+    1.5rem - var(--sb-accordion-frame-width)
   );
 }
 .dnb-accordion__header[disabled] * {
@@ -8735,20 +9179,17 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
 }
 .dnb-accordion__content__inner {
   margin-top: 0;
-  padding: 0 1rem 1rem var(--accordion-content-padding-left);
+  padding: 0 1rem 1rem var(--sb-accordion-content-padding-left);
 }
 .dnb-accordion--expanded {
-  --accordion-bg: var(--accordion-bg--expanded);
-  --accordion-frame-color: var(--accordion-frame-color--expanded);
-  --accordion-frame-width--active: 0.125rem;
-}
-.dnb-accordion--expanded > .dnb-accordion__header {
-  font-weight: var(--font-weight-medium);
+  --sb-accordion-background: var(--sb-color-violet-light-4);
+  --sb-accordion-frame-color: var(--sb-color-violet);
+  --sb-accordion-frame-width--active: 0.125rem;
 }
 .dnb-accordion--expanded > .dnb-accordion__header[disabled],
 .dnb-accordion--expanded > .dnb-accordion__header[disabled] + .dnb-accordion__content {
-  --accordion-bg: var(--accordion-bg--disabled);
-  --accordion-frame-color: var(--accordion-frame-color--disabled);
+  --sb-accordion-background: var(--sb-color-gray-light-2);
+  --sb-accordion-frame-color: var(--sb-color-gray-dark-2);
 }
 
 /*
@@ -9589,6 +10030,39 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disab
   color: var(--sb-color-gray-dark);
 }
 
+/*
+* Checkbox theme for Sbanken
+*
+*/
+.dnb-checkbox {
+  --checkbox-color-gfx-on: var(--sb-color-violet-light);
+  --checkbox-color-gfx-off: var(--sb-color-violet-light);
+  --checkbox-color-background-on: var(--sb-color-white);
+  --checkbox-color-background-off: var(--sb-color-white);
+  --checkbox-color-border-on: var(--sb-color-violet);
+  --checkbox-color-border-off: var(--sb-color-violet);
+  --checkbox-color-gfx--disabled: var(--sb-color-gray-dark);
+  --checkbox-color-background-on--disabled: var(--sb-color-gray-light);
+  --checkbox-color-background-off--disabled: var(--sb-color-gray-light);
+  --checkbox-color-border-on--disabled: var(--sb-color-gray-dark);
+  --checkbox-color-border-off--disabled: var(--sb-color-gray-dark);
+  --checkbox-color-background--active: var(--sb-color-white);
+  --checkbox-color-border--active: var(--sb-color-gray);
+  --checkbox-color-gfx--hover: var(--sb-color-violet-light);
+  --checkbox-color-background--hover: var(--sb-color-violet-light-3);
+  --checkbox-color-border-on--hover: var(--sb-color-violet);
+  --checkbox-color-border-off--hover: var(--sb-color-violet);
+  --checkbox-color-gfx--focus: var(--focus-ring-color);
+  --checkbox-color-background--focus: var(--sb-color-blue-light-3);
+  --checkbox-color-gfx--error: var(--sb-color-magenta);
+  --checkbox-color-gfx--error-contrast: var(--sb-color-magenta);
+  --checkbox-color-background-on--error: var(--sb-color-white);
+  --checkbox-color-background--error-contrast: var(
+    --sb-color-magenta-light-2
+  );
+  --checkbox-color-border--error: var(--sb-color-magenta);
+}
+
 /*
 * Drawer theme
 *
@@ -9949,26 +10423,35 @@ html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-i
 *
 */
 .dnb-radio {
-  --radio-color-dot-on: var(--sb-color-violet-light);
+  --radio-color-dot-on: var(--sb-color-violet);
   --radio-color-background-on: var(--sb-color-white);
-  --radio-color-border-on: var(--sb-color-gray-dark-2-neutral);
+  --radio-color-border-on: var(--sb-color-violet);
   --radio-color-background-off: var(--sb-color-white);
-  --radio-color-border-off: var(--sb-color-gray-dark-2-neutral);
-  --radio-color-dot-on--disabled: var(--sb-color-gray-dark-2-neutral);
-  --radio-color-border-on--disabled: var(--sb-color-gray-dark-2-neutral);
-  --radio-color-border-off--disabled: var(--sb-color-gray-dark-2-neutral);
+  --radio-color-border-off: var(--sb-color-violet);
+  --radio-color-dot-on--disabled: var(--sb-color-gray-dark);
+  --radio-color-background--disabled: var(--sb-color-gray-light);
+  --radio-color-border-on--disabled: var(--sb-color-gray-dark);
+  --radio-color-border-off--disabled: var(--sb-color-gray-dark);
   --radio-color-dot-on--active: var(--sb-color-violet-light);
   --radio-color-border-on--active: var(--sb-color-gray-dark-2-neutral);
   --radio-color-background-off--active: var(--sb-color-white);
   --radio-color-border-off--active: var(--sb-color-gray);
   --radio-color-dot-on--hover: var(--sb-color-violet);
-  --radio-color-background-off--hover: var(--sb-color-white);
+  --radio-color-background-on--hover: var(--sb-color-violet-light-3);
+  --radio-color-background-off--hover: var(--sb-color-violet-light-3);
   --radio-color-background-on--focus: var(--sb-color-blue-light-3);
   --radio-color-background-off--focus: var(--sb-color-blue-light-3);
   --radio-color-dot-on--error: var(--sb-color-magenta);
   --radio-color-border-on--error: var(--sb-color-magenta);
-  --radio-color-background-off--error: var(--sb-color-white);
+  --radio-color-border--error-hover: var(--sb-color-red);
+  --radio-color-background-off--error-hover: var(
+    --sb-color-magenta-light-2
+  );
+  --radio-color-background-on--error-hover: var(
+    --sb-color-magenta-light-2
+  );
   --radio-color-dot-on--error-hover: var(--sb-color-red);
+  --radio-focus-ring-width--error: var(--radio-border-width);
 }
 
 .dnb-section {
@@ -10025,27 +10508,234 @@ html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-i
 }
 
 /*
-* Table theme
-*
-*/
-/*
- * Utilities
- */
-/*
-* Button mixins
+* Switch theme for Sbanken
 *
 */
 /*
  * Utilities
  */
-.dnb-table {
-  text-align: left;
-  /* BUTTONS INSIDE TABLE */
-}
-.dnb-table thead {
-  border-bottom: var(--border);
-}
-.dnb-table__th, .dnb-table thead th {
+.dnb-switch {
+  --switch-width--medium: 3.75rem;
+  --switch-height--medium: 2rem;
+  --switch-width--large: 5rem;
+  --switch-height--large: 2.625rem;
+  --switch-border-width--medium: 0.0625rem;
+  --switch-border-width--large: 0.0625rem;
+  --switch-spacing-height--medium: 0.375rem;
+  --switch-spacing-width--medium: 0.25rem;
+  --switch-spacing-height--large: 0.5rem;
+  --switch-spacing-width--large: 0.25rem;
+  --switch-content-width: 1.125rem;
+  --switch-content-spacing--medium: 0.5rem;
+  --switch-content-spacing--large: 0.875rem;
+  --button-dimension--medium: calc(
+    var(--switch-height--medium) - var(--switch-spacing-height--medium)
+  );
+  --button-dimension--large: calc(
+    var(--switch-height--large) - var(--switch-spacing-height--large)
+  );
+  /* stylelint-disable no-descending-specificity */
+  /*
+   * When switched ON
+   */
+  /*
+   * When switched OFF
+   */
+  /*
+   * On disabled state
+   *
+   */
+  /*
+   * On focus state
+   *
+   */
+  /*
+   * On hover state
+   *
+   */
+  /*
+   * On error state
+   *
+   */
+  /* stylelint-enable no-descending-specificity */
+}
+.dnb-switch--large .dnb-switch__row {
+  height: var(--switch-height--large);
+}
+.dnb-switch__background {
+  height: 100%;
+  background-color: var(--sb-color-gray);
+  border-radius: 1.5rem;
+}
+.dnb-switch__background::after {
+  color: var(--sb-color-text);
+  font-size: var(--sb-font-size-small);
+  content: "Av";
+}
+.dnb-switch--large .dnb-switch__background {
+  height: 100%;
+  border-radius: 1.5rem;
+}
+.dnb-switch--large .dnb-switch__background::after {
+  font-size: var(--sb-font-size-basis);
+}
+.dnb-switch__button {
+  width: var(--button-dimension--medium);
+  height: var(--button-dimension--medium);
+  background-color: var(--sb-color-white);
+}
+.dnb-switch--large .dnb-switch__button {
+  width: var(--button-dimension--large);
+  height: var(--button-dimension--large);
+}
+.dnb-switch__input:checked ~ .dnb-switch__button {
+  transform: translateX(calc(var(--switch-width--medium) - var(--button-dimension--medium) - var(--switch-spacing-width--medium)));
+}
+.dnb-switch__input:checked ~ .dnb-switch__background {
+  background-color: var(--sb-color-violet-light);
+}
+.dnb-switch__input:checked ~ .dnb-switch__background::after {
+  color: var(--sb-color-white);
+  content: "På";
+  transform: translateX(var(--switch-content-spacing--medium));
+}
+.dnb-switch--large .dnb-switch__input:checked ~ .dnb-switch__button {
+  transform: translateX(calc(var(--switch-width--large) - var(--button-dimension--large) - var(--switch-spacing-width--large)));
+}
+.dnb-switch--large .dnb-switch__input:checked ~ .dnb-switch__background::after {
+  transform: translateX(var(--switch-content-spacing--large));
+}
+.dnb-switch__input:not(:checked) ~ .dnb-switch__button {
+  transform: translateX(var(--switch-spacing-width--medium));
+}
+.dnb-switch--large .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
+  transform: translateX(var(--switch-spacing-width--large));
+}
+.dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
+  transform: translateX(calc(var(--switch-width--medium) - var(--switch-content-width) - var(--switch-content-spacing--medium)));
+}
+.dnb-switch--large .dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
+  transform: translateX(calc(var(--switch-width--large) - var(--switch-content-width) - var(--switch-content-spacing--large)));
+}
+.dnb-switch__input[disabled] ~ .dnb-switch__background {
+  background-color: var(--sb-color-gray);
+}
+.dnb-switch__input[disabled] ~ .dnb-switch__background::after {
+  color: var(--sb-color-gray-dark);
+}
+.dnb-switch__input[disabled] ~ .dnb-switch__button {
+  background-color: var(--sb-color-gray-light);
+}
+.dnb-switch__input[disabled]:checked ~ .dnb-switch__background {
+  background-color: var(--sb-color-violet);
+  opacity: 0.3;
+}
+.dnb-switch__input[disabled]:checked ~ .dnb-switch__background::after {
+  color: var(--sb-color-white);
+}
+.dnb-switch__input[disabled]:checked ~ .dnb-switch__button {
+  background-color: var(--sb-color-white);
+}
+html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button {
+  outline: initial;
+  box-shadow: none;
+}
+html[data-whatinput=""] html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button {
+  box-shadow: none;
+}
+html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):checked:focus ~ .dnb-switch__button {
+  background-color: var(--focus-ring-color);
+}
+html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):not(:checked):focus ~ .dnb-switch__button {
+  outline: initial;
+  box-shadow: none;
+}
+html[data-whatinput=""] html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):not(:checked):focus ~ .dnb-switch__button {
+  box-shadow: none;
+}
+html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background {
+  background-color: var(--sb-color-blue-light-3);
+}
+html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background::after {
+  color: var(--focus-ring-color);
+  font-weight: var(--sb-font-weight-bold);
+}
+html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus {
+  --border-color: var(--focus-ring-color);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-switch__background:hover, .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:checked):hover ~ .dnb-switch__background {
+  color: var(--sb-color-violet);
+  background-color: var(--sb-color-violet-light-3);
+  --border-color: var(--sb-color-violet);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-switch__background:hover::after, .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:checked):hover ~ .dnb-switch__background::after {
+  color: var(--sb-color-violet);
+}
+.dnb-switch__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-switch__background {
+  background-color: var(--sb-color-violet);
+}
+.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background {
+  background-color: var(--sb-color-white);
+  --border-color: var(--sb-color-red);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):hover ~ .dnb-switch__background {
+  background-color: var(--sb-color-magenta-light-2);
+  --border-color: var(--sb-color-red);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):not(:checked) ~ .dnb-switch__background::after {
+  color: var(--sb-color-red);
+}
+.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked ~ .dnb-switch__background {
+  background-color: var(--sb-color-magenta);
+  box-shadow: none;
+}
+.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked:hover ~ .dnb-switch__background {
+  background-color: var(--sb-color-red);
+}
+.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:checked) ~ .dnb-switch__button .dnb-switch__focus {
+  --border-color: var(--sb-color-red);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked ~ .dnb-switch__button .dnb-switch__focus {
+  box-shadow: none;
+}
+
+/*
+* Table theme
+*
+*/
+/*
+ * Utilities
+ */
+/*
+* Button mixins
+*
+*/
+/*
+ * Utilities
+ */
+.dnb-table {
+  text-align: left;
+  /* BUTTONS INSIDE TABLE */
+}
+.dnb-table thead {
+  border-bottom: var(--border);
+}
+.dnb-table__th, .dnb-table thead th {
   padding: 0.5rem 1.5rem 0.25rem;
   font-weight: var(--font-weight-medium);
   background-color: var(--sb-color-white);
@@ -10250,6 +10940,99 @@ html[data-whatinput=keyboard] .dnb-textarea__textarea:not([disabled]):not(.dnb-t
   --textarea-border-color: var(--sb-color-red);
 }
 
+/*
+* ToggleButton theme for Sbanken
+*
+*/
+/*
+ * Utilities
+ */
+.dnb-toggle-button {
+  /* stylelint-disable no-descending-specificity */
+  /* stylelint-enable no-descending-specificity */
+}
+.dnb-toggle-button__button {
+  background-color: var(--sb-color-white);
+  color: var(--sb-color-violet);
+  --border-color: var(--sb-color-violet);
+  --border-width: 0.09375rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover:not([disabled]) {
+  background-color: var(--sb-color-violet-light-3);
+  color: var(--sb-color-violet);
+}
+.dnb-toggle-button__button:active[disabled], html:not([data-whatintent=touch]) .dnb-toggle-button__button:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-toggle-button__button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-toggle-button__button:active:not([disabled]) {
+  --border-color: var(--sb-color-violet-light-3);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  background-color: var(--sb-color-violet);
+  color: var(--sb-color-violet-light-3);
+}
+.dnb-toggle-button__button[disabled] {
+  --border-color: var(--sb-color-gray-light);
+  --border-width: 0.09375rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  background-color: var(--sb-color-gray-light);
+  color: var(--sb-color-gray-dark);
+}
+html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__button {
+  background-color: transparent;
+  border-color: var(--focus-ring-color);
+  box-shadow: 0 0 0 0.0625rem var(--focus-ring-color);
+}
+html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__dot {
+  background-color: var(--focus-ring-color);
+}
+html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__button {
+  background-color: transparent;
+  border-color: var(--focus-ring-color);
+  box-shadow: 0 0 0 0.0625rem var(--focus-ring-color);
+}
+html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__gfx {
+  color: var(--focus-ring-color);
+}
+.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active) {
+  background-color: var(--sb-color-violet);
+  color: var(--sb-color-white);
+  box-shadow: none;
+}
+html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) {
+  background-color: var(--sb-color-violet);
+  color: var(--sb-color-white);
+  --border-color: var(--sb-color-violet);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled], html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]) {
+  --border-color: var(--sb-color-violet-light-3);
+  --border-width: 0.125rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  background-color: var(--sb-color-violet);
+  color: var(--sb-color-violet-light-3);
+}
+html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus {
+  color: var(--sb-color-blue-dark-2);
+  background-color: var(--sb-color-blue-light-2);
+}
+
 /*
 * Tooltip theme for Sbanken
 *
@@ -10508,129 +11291,34 @@ html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover:not([disabled])
 }
 
 /*
-* Checkbox theme
+* DatePicker theme
 *
 */
 /*
  * Utilities
  */
-.dnb-checkbox {
-  /* stylelint-disable */
-  /* stylelint-enable */
-  /* stylelint-disable */
-  /* stylelint-enable */
-}
-.dnb-checkbox__gfx {
-  transition: opacity 200ms ease-out, transform 200ms ease-out;
+.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input {
+  color: var(--color-black-55);
 }
-.dnb-checkbox__input:checked ~ .dnb-checkbox__gfx, .dnb-checkbox__input[data-checked=true] ~ .dnb-checkbox__gfx {
-  opacity: 1;
-  transform: scale(1);
-  color: var(--color-white);
+.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input ~ .dnb-date-picker--separator {
+  color: var(--color-black-55);
 }
-.dnb-checkbox__input:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[data-checked=true] ~ .dnb-checkbox__button {
-  background-color: var(--color-sea-green);
+.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="0"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="1"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="2"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="3"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="4"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="5"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="6"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="7"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="8"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="9"]:not([data-input-state=disabled]) {
+  color: var(--color-black);
 }
-.dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__gfx {
-  opacity: 0;
-  transform: scale(0.8);
-  color: var(--color-sea-green);
+.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="0"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="1"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="2"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="3"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="4"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="5"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="6"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="7"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="8"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="9"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator {
+  color: var(--color-black);
 }
-.dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button {
+.dnb-date-picker__container {
+  box-shadow: var(--shadow-default);
+  border-radius: 0.25rem;
   background-color: var(--color-white);
-  border-color: var(--color-sea-green);
-}
-.dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[disabled][data-checked=true] ~ .dnb-checkbox__button {
-  border-color: transparent;
-  background-color: var(--color-sea-green-30);
 }
-.dnb-checkbox__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button {
-  border-color: var(--color-mint-green-50);
+.dnb-date-picker__addon::after, .dnb-date-picker__calendar::after {
+  background-color: var(--color-black-8);
 }
-.dnb-checkbox__input:not([disabled]):checked:active ~ .dnb-checkbox__button, .dnb-checkbox__input:not([disabled]):not([data-checked=true]):active ~ .dnb-checkbox__button {
-  background-color: var(--color-mint-green-50);
-  border-color: transparent;
-}
-.dnb-checkbox__input:not([disabled]):checked:active ~ .dnb-checkbox__gfx, .dnb-checkbox__input:not([disabled])[data-checked=true]:active ~ .dnb-checkbox__gfx {
-  color: var(--color-white);
-}
-.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__button {
-  background-color: var(--color-mint-green-50);
-}
-.dnb-checkbox__input:not([disabled]):not(:focus):checked:hover ~ .dnb-checkbox__button, .dnb-checkbox__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-checkbox__button {
-  border-color: transparent;
-}
-.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__gfx {
-  color: var(--color-sea-green);
-}
-html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button {
-  border: none;
-  background-color: var(--color-mint-green-50);
-}
-html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__gfx {
-  color: var(--color-sea-green);
-}
-.dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button .dnb-checkbox__focus, .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button .dnb-checkbox__focus {
-  display: block;
-}
-.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button {
-  border: none;
-}
-.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus {
-  display: block;
-  --border-color: var(--color-fire-red);
-  --border-width: var(--focus-ring-width);
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button {
-  background-color: var(--color-fire-red-8);
-}
-.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button[data-checked=true] {
-  border-color: var(--color-fire-red);
-}
-.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__button {
-  border-color: var(--color-fire-red-8);
-}
-.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked ~ .dnb-checkbox__button, .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true] ~ .dnb-checkbox__button {
-  background-color: var(--color-fire-red);
-}
-.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__gfx {
-  color: var(--color-fire-red);
-}
-.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__gfx {
-  color: var(--color-fire-red-8);
-}
-
-/*
-* DatePicker theme
-*
-*/
-/*
- * Utilities
- */
-.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input {
-  color: var(--color-black-55);
-}
-.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input ~ .dnb-date-picker--separator {
-  color: var(--color-black-55);
-}
-.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="0"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="1"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="2"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="3"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="4"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="5"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="6"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="7"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="8"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="9"]:not([data-input-state=disabled]) {
-  color: var(--color-black);
-}
-.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="0"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="1"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="2"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="3"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="4"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="5"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="6"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="7"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="8"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="9"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator {
-  color: var(--color-black);
-}
-.dnb-date-picker__container {
-  box-shadow: var(--shadow-default);
-  border-radius: 0.25rem;
-  background-color: var(--color-white);
-}
-.dnb-date-picker__addon::after, .dnb-date-picker__calendar::after {
-  background-color: var(--color-black-8);
-}
-.dnb-date-picker__header::after {
-  background-color: var(--color-black-8);
+.dnb-date-picker__header::after {
+  background-color: var(--color-black-8);
 }
 .dnb-date-picker__header__nav .dnb-button {
   box-shadow: none;
@@ -10842,177 +11530,6 @@ html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__i
   color: var(--color-black-80);
 }
 
-/*
-* Switch theme
-*
-*/
-/*
- * Utilities
- */
-.dnb-switch {
-  /*
-    * When switched OFF
-    * aka when the checkbox is not :checked
-    */
-  /*
-    * When switched ON
-    * aka when the checkbox is :checked
-    */
-  /*
-    * Draw the circle / line
-    *
-    */
-  /*
-    * On disabled
-    *
-    */
-  /*
-    * On focus
-    *
-    */
-  /* stylelint-disable-next-line */
-  /*
-    * On hover
-    *
-    */
-  /* stylelint-disable-next-line */
-  /*
-    * On active
-    *
-    */
-  /* stylelint-disable-next-line */
-  /*
-    * On error state
-    *
-    */
-  /* stylelint-disable-next-line */
-}
-.dnb-switch__background {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  overflow: hidden;
-  background-color: var(--color-sea-green-30);
-}
-.dnb-switch__background::after {
-  content: "";
-  position: absolute;
-  transition: transform 0.3s ease-out, position 0.3s ease-out;
-}
-.dnb-switch__input:not(:checked) ~ .dnb-switch__button {
-  background-color: var(--color-white);
-  border-color: var(--color-sea-green);
-}
-.dnb-switch__input:checked ~ .dnb-switch__button {
-  background-color: var(--color-sea-green);
-}
-.dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
-  right: 0;
-  transform: translateX(calc(var(--switch-width--medium) - 2.8rem));
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  border: 0.0625rem solid var(--color-sea-green);
-}
-.dnb-switch__input:checked ~ .dnb-switch__background::after {
-  left: 0;
-  transform: translateX(calc(var(--switch-width--medium) - 1.87rem));
-  width: 0.0625rem;
-  height: 0.5rem;
-  border-radius: 0.0625rem;
-  background-color: var(--color-sea-green);
-}
-.dnb-switch--large .dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
-  width: 0.625rem;
-  height: 0.625rem;
-  transform: translateX(calc(var(--switch-width--large) - 3.7rem));
-}
-.dnb-switch--large .dnb-switch__input:checked ~ .dnb-switch__background::after {
-  height: 0.625rem;
-  transform: translateX(calc(var(--switch-width--large) - 2.5rem));
-}
-.dnb-switch__input[disabled] ~ .dnb-switch__background {
-  background-color: var(--color-mint-green-25);
-}
-.dnb-switch__input[disabled]:checked ~ .dnb-switch__background::after {
-  background-color: var(--color-sea-green-30);
-}
-.dnb-switch__input[disabled]:not(:checked) ~ .dnb-switch__background::after {
-  border-color: var(--color-sea-green-30);
-}
-.dnb-switch__input[disabled] ~ .dnb-switch__button {
-  border-color: var(--color-sea-green-30);
-}
-.dnb-switch__input[disabled]:checked ~ .dnb-switch__button {
-  background-color: var(--color-sea-green-30);
-}
-html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button {
-  border: none;
-}
-html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):not(:checked):focus ~ .dnb-switch__button {
-  background-color: var(--color-mint-green-50);
-}
-.dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus, .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button .dnb-switch__focus {
-  display: block;
-}
-.dnb-switch__input:not([disabled]):checked ~ .dnb-switch__button .dnb-switch__focus {
-  transform: rotate(180deg);
-}
-.dnb-switch__input:not([disabled]):not(:focus):not(:active):hover ~ .dnb-switch__button {
-  border-color: var(--color-sea-green);
-  background-color: var(--color-mint-green-50);
-}
-.dnb-switch__input:not([disabled]):active ~ .dnb-switch__button {
-  background-color: var(--color-mint-green-50);
-  border-color: transparent;
-}
-.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):hover ~ .dnb-switch__button {
-  border-color: var(--color-fire-red);
-  background-color: var(--color-fire-red-8);
-}
-.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover) ~ .dnb-switch__button {
-  border-color: var(--color-fire-red-8);
-}
-.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-switch__button {
-  background-color: var(--color-fire-red);
-}
-.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background {
-  background-color: var(--color-fire-red-8);
-  --border-color: var(--color-fire-red);
-  --border-width: var(--focus-ring-width);
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked ~ .dnb-switch__background::after {
-  background-color: var(--color-fire-red);
-}
-.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):not(:checked) ~ .dnb-switch__background::after {
-  border-color: var(--color-fire-red);
-}
-.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__button .dnb-switch__focus {
-  display: block;
-  --border-color: var(--color-fire-red);
-  --border-width: var(--focus-ring-width);
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked ~ .dnb-switch__button .dnb-switch__focus {
-  transform: rotate(180deg);
-}
-.dnb-switch > .dnb-form-status {
-  transform: translateY(0.1875rem);
-}
-
 /*
 * Timeline theme
 *
@@ -11115,162 +11632,261 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
 }
 
 /*
-* ToggleButton theme
+* ScrollView theme
 *
 */
 /*
  * Utilities
  */
-.dnb-toggle-button {
-  /* stylelint-disable */
-  /* stylelint-enable */
-  /*
-    * On error state
-    *
-    */
-  /* stylelint-disable */
-  /* stylelint-enable */
+/**
+ * ATTENTION: This file is auto generated by using "themeFactory".
+ * But you still can change the content of this file on the very top.
+ */
+/**
+ * ATTENTION: This file is auto generated by using "styleFactory".
+ * Do not change the content!
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: column;
+  grid-row-gap: var(--spacing-x-small);
+  row-gap: var(--spacing-x-small);
 }
-.dnb-toggle-button .dnb-checkbox__gfx path {
-  stroke-width: 0.125rem;
+.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: row wrap;
+  grid-column-gap: var(--spacing-small);
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
 }
-.dnb-toggle-button .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
-  box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
+
+.dnb-forms-field-expiry .dnb-multi-input-mask {
+  width: var(--forms-field-width--small);
 }
-.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active) {
-  background-color: var(--color-emerald-green);
-  color: var(--color-mint-green);
+.dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell {
+  justify-content: center;
 }
-.dnb-toggle-button--checked .dnb-toggle-button__button .dnb-icon, .dnb-toggle-button--checked .dnb-toggle-button__button:focus .dnb-icon, .dnb-toggle-button--checked .dnb-toggle-button__button:hover .dnb-icon {
-  color: inherit;
+
+.dnb-forms-field-phone-number__country-code {
+  width: calc(var(--forms-field-width--medium) - 2rem);
 }
-.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__button, .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__button, .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__button {
-  background-color: transparent;
-  border-color: var(--color-mint-green);
-  box-shadow: 0 0 0 0.0318rem var(--color-mint-green);
+.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell {
+  width: calc(var(--forms-field-width--medium) - 2rem);
 }
-.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__dot, .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__dot, .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__dot {
-  background-color: var(--color-mint-green);
+.dnb-forms-field-phone-number__number {
+  flex: 1;
 }
-html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button {
-  --border-color: var(--color-emerald-green);
-  --border-width: 0.09375rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+
+.dnb-forms-field-postal-code-and-city__fields {
+  display: flex;
+  flex-flow: row;
+  grid-column-gap: var(--spacing-small);
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
 }
-html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot {
-  background-color: var(--color-emerald-green);
+.dnb-forms-field-postal-code-and-city__postal-code {
+  flex: 0 5rem;
 }
-.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__button, .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__button, .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__button {
-  background-color: var(--color-mint-green);
-  border-color: var(--color-emerald-green);
-  box-shadow: 0 0 0 0.0318rem var(--color-emerald-green);
+.dnb-forms-field-postal-code-and-city__city {
+  flex: 1;
 }
-.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__gfx, .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__gfx, .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__gfx {
-  color: var(--color-emerald-green);
+
+.dnb-forms-field-selection--width-large .dnb-dropdown__shell {
+  width: var(--forms-field-width--large);
 }
-html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__button, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__button, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__button {
-  background-color: var(--color-emerald-green);
+.dnb-forms-field-selection--width-medium .dnb-dropdown__shell {
+  width: var(--forms-field-width--medium);
 }
-html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__gfx, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__gfx, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__gfx {
-  color: var(--color-mint-green);
+.dnb-forms-field-selection--width-small .dnb-dropdown__shell {
+  width: var(--forms-field-width--small);
 }
-.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-radio__button,
-.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-checkbox__button, .dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-radio__button,
-.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-checkbox__button, .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-radio__button,
-.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-checkbox__button {
-  box-shadow: none;
+
+:root {
+  --forms-field-width--small: 5rem;
+  --forms-field-width--medium: 11rem;
+  --forms-field-width--large: 21rem;
 }
-html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus {
-  color: var(--color-emerald-green);
-  background-color: var(--color-mint-green);
+
+/*
+ * Utilities
+ */
+fieldset.dnb-forms-field-block {
+  padding: 0;
+  border: none;
 }
-html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus {
-  outline: none;
+fieldset.dnb-forms-field-block:not([class*=space__top]) {
+  margin-top: 0;
 }
-html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus {
-  --border-color: var(--color-emerald-green);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+fieldset.dnb-forms-field-block:not([class*=space__right]) {
+  margin-right: 0;
 }
-.dnb-toggle-button__button:not([disabled]):active .dnb-radio__button, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button {
-  background-color: transparent;
-  border-color: var(--color-sea-green);
-  box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
+fieldset.dnb-forms-field-block:not([class*=space__bottom]) {
+  margin-bottom: 0;
 }
-.dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot {
-  background-color: var(--color-sea-green);
+fieldset.dnb-forms-field-block:not([class*=space__left]) {
+  margin-left: 0;
 }
-.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button {
-  background-color: transparent;
-  border-color: var(--color-sea-green);
-  box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
+
+.dnb-forms-field-block__grid {
+  display: grid;
 }
-.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx {
-  color: var(--color-sea-green);
+.dnb-forms-field-block--layout-vertical {
+  grid-template-columns: auto;
+  grid-template-areas: "label" "contents" "status";
 }
-.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) {
-  background-color: var(--color-white);
-  color: var(--color-fire-red);
-  --border-color: var(--color-fire-red);
-  --border-width: 0.0625rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-forms-field-block--layout-horizontal {
+  grid-template-columns: var(--forms-field-width--medium) auto;
+  grid-template-areas: "label contents" "status status";
 }
-.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
-  --border-color: var(--color-fire-red);
-  --border-width: 0.09375rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-forms-field-block--width-stretch {
+  flex-grow: 1;
 }
-.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__focus {
-  box-shadow: none;
+@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-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__dot {
-  background-color: transparent;
+.dnb-forms-field-block__label {
+  grid-area: label;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  align-items: center;
 }
-.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input ~ .dnb-checkbox__button {
-  border: none;
-  --border-color: var(--color-fire-red);
-  --border-width: 0.09375rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-forms-field-block__label-description {
+  margin-left: 0.3em;
+  color: var(--color-black-55);
+  font-size: var(--font-size-small);
 }
-.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not(:hover) ~ .dnb-checkbox__button .dnb-checkbox__focus {
-  box-shadow: none;
+.dnb-forms-field-block__label-secondary {
+  color: var(--color-black-55);
+  font-size: var(--font-size-small);
 }
-.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) {
-  color: var(--color-white);
-  background-color: var(--color-fire-red);
-  --border-color: var(--color-fire-red);
-  --border-width: 0.0625rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-forms-field-block__status {
+  grid-area: status;
 }
-.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
-  --border-color: var(--color-white);
-  --border-width: 0.09375rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-forms-field-block__contents {
+  grid-area: contents;
 }
-.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]):not(:hover) ~ .dnb-radio__dot {
-  background-color: var(--color-white);
+.dnb-forms-field-block__contents--width-stretch {
+  width: 100%;
 }
-.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not([disabled]):not(:hover):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus {
-  background-color: var(--color-white);
+@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 {
+  display: flex;
+  flex-flow: row;
+  grid-column-gap: var(--spacing-small);
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
+}
+
+.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]) {
+  margin: 0;
+}
+.dnb-form-main-heading[\:has\(\%2B\%20.dnb-flex-stack\%20\%3E\%20.dnb-card\,\%20\%2B\%20.dnb-card\)]:not([class*=space__left]) {
+  margin-left: var(--spacing-medium);
+}
+.dnb-form-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__left]) {
+  margin-left: var(--spacing-medium);
 }
-.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover) ~ .dnb-checkbox__gfx {
-  color: var(--color-fire-red);
+.dnb-form-main-heading[\:has\(\%2B\%20.dnb-flex-stack\%20\%3E\%20.dnb-card\,\%20\%2B\%20.dnb-card\)]:not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
 }
-.dnb-toggle-button > .dnb-form-status {
-  transform: translateY(0.1875rem);
+.dnb-form-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
+}
+
+.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]) {
+  margin: 0;
+}
+.dnb-form-sub-heading[\:has\(\%2B\%20.dnb-flex-stack\%20\%3E\%20.dnb-card\,\%20\%2B\%20.dnb-card\)]:not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
+}
+.dnb-form-sub-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
 }
 
-/*
-* ScrollView theme
-*
-*/
 /*
  * Utilities
+ */
+.dnb-forms-steps-layout {
+  display: flex;
+  flex-flow: row wrap;
+  grid-column-gap: var(--spacing-medium);
+  -moz-column-gap: var(--spacing-medium);
+       column-gap: var(--spacing-medium);
+}
+@media (max-width: 60em) {
+  .dnb-forms-steps-layout {
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: stretch;
+  }
+}
+.dnb-forms-steps-layout__sidebar {
+  flex: 0;
+  min-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar {
+  max-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+  min-width: 336px;
+}
+.dnb-forms-steps-layout__contents {
+  flex: 1;
+  min-width: 25rem;
+}
+.dnb-forms-steps-layout__contents .dnb-card {
+  --border-color: var(--color-pistachio);
+}
+
+.dnb-forms-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, 0.5);
+}
+
+.dnb-forms-test-element {
+  border: 1px dashed #808080;
+  border-radius: 0.5rem;
+  color: #909090;
+  padding: 0.5rem 1rem;
+}
+
+/**
+ * NB: The content below is auto generated by the "themeFactory".
+ * You may want to update it by running "yarn build" locally.
  */