@dnb/eufemia 10.13.0 → 10.15.0

package/cjs/style/themes/theme-ui/ui-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,51 +4333,119 @@ 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__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);
+.dnb-input-masked--guide {
+  font-family: var(--font-family-monospace);
 }
-.dnb-input__input {
+
+.dnb-multi-input-mask__fieldset {
+  margin: 0;
+  padding: 0;
   border: none;
-  outline: none;
-  word-break: normal;
-  position: relative;
-  z-index: 2;
 }
-.dnb-input__input[disabled] {
+.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);
+}
+.dnb-input__input {
+  border: none;
+  outline: none;
+  word-break: normal;
+  position: relative;
+  z-index: 2;
+}
+.dnb-input__input[disabled] {
   -webkit-user-select: none;
           user-select: none;
   opacity: 1;
@@ -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
  *
@@ -5048,10 +5435,44 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
   --radio-width--large: 2rem;
   --radio-height--large: 2rem;
   --radio-border-width: 0.125rem;
+  --radio-color-dot-on: black;
+  --radio-color-background-on: white;
+  --radio-color-border-on: black;
+  --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;
+  --radio-color-border-on--active: lightgrey;
+  --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-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);
   line-height: var(--line-height-basis);
+  /*
+   * Color scheme
+   */
+  /** Normal state **/
+  /** Disabled state **/
+  /** Active state **/
+  /** Hover state **/
+  /** Focus state **/
+  /** Error state **/
 }
 .dnb-radio__inner {
   display: inline-flex;
@@ -5099,6 +5520,8 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   width: calc(var(--radio-width--medium) - 0.75rem);
   height: calc(var(--radio-height--medium) - 0.75rem);
   border-radius: 50%;
+  background-color: var(--radio-color-dot-on);
+  transition: opacity 200ms ease-out, transform 200ms ease-out;
 }
 .dnb-radio--large .dnb-radio__dot {
   width: calc(var(--radio-width--large) - 0.875rem);
@@ -5184,6 +5607,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   margin-top: 0.5rem;
   margin-bottom: 1rem;
 }
+.dnb-radio > .dnb-form-status {
+  transform: translateY(0.25rem); /* 4/16 */
+}
 .dnb-radio-group {
   --radio-group-margin-bottom: 0.5rem;
   --radio-group-margin-right: 1rem;
@@ -5222,9 +5648,101 @@ 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 {
+.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);
+}
+.dnb-radio__input:checked ~ .dnb-radio__dot, .dnb-radio__input[data-checked=true] ~ .dnb-radio__dot {
+  opacity: 1;
+  transform: scale(1);
+}
+.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__dot {
+  opacity: 0;
+  transform: scale(0.8);
+}
+.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off);
+  border-color: var(--radio-color-border-off);
+}
+.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: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);
+}
+.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__dot, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--active);
+}
+.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--active);
+  border-color: var(--radio-color-border-off--active);
+}
+.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);
+}
+html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__button {
+  border: none;
+}
+.dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus {
+  display: block;
+}
+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);
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__button {
+  border: none;
+}
+.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(--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;
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true] ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--error);
+}
+.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-hover);
+}
 
 /*
  * Section component
@@ -5251,6 +5769,15 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .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);
@@ -5275,6 +5802,7 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
     --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)
@@ -5287,6 +5815,7 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
     --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)
@@ -5299,6 +5828,7 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
     --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)
@@ -6502,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);
@@ -6528,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);
@@ -6543,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 {
@@ -6570,14 +7096,25 @@ 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--large .dnb-switch__background {
-  width: var(--switch-width--large);
-  height: calc(var(--switch-height--large) - 0.75rem);
-  border-radius: calc(var(--switch-height--large) - 0.375rem);
+.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);
+  border-radius: calc(var(--switch-height--large) - 0.375rem);
 }
 .dnb-switch__input {
   opacity: 0;
@@ -6599,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;
@@ -6619,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;
@@ -6643,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);
@@ -8173,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;
@@ -8234,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);
@@ -8521,129 +9081,177 @@ html[data-visual-test] .dnb-tooltip--hide {
  * You may want to update it by running "yarn build" locally.
  */
 /*
-* Accordion theme
-*
-*/
+ * Accordion theme
+ *
+ */
 /*
  * Utilities
  */
-/*
-* Button mixins
-*
-*/
 .dnb-accordion__header {
+  color: var(--ui-accordion-color--override, var(--ui-accordion-color));
+  background-color: var(--ui-accordion-background--override, var(--ui-accordion-background));
+  box-shadow: var(--ui-accordion-box-shadow);
   border: none;
-}
-.dnb-accordion__header__icon, .dnb-accordion__header__container {
-  color: var(--color-sea-green);
+  /* 
+   * VARIANTS
+   * Each variant is mutually exclusive
+   */
+  /* 
+   * STATES
+   * States that can exist across all variants.
+   */
 }
 .dnb-accordion__header__description {
-  color: var(--color-black-55);
-}
-.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__title {
-  font-weight: var(--font-weight-medium);
+  color: var(--ui-accordion-description-color--override, var(--ui-accordion-description-color));
+}
+.dnb-accordion__header--outlined, .dnb-accordion__header--filled {
+  --ui-accordion-border-inset: inset;
+  --ui-accordion-box-shadow: var(--ui-accordion-border-inset) 0 0 0
+    var(--accordion-border-width)
+    var(
+      --ui-accordion-border-color--override,
+      var(--ui-accordion-border-color)
+    );
 }
-.dnb-accordion__variant--outlined > .dnb-accordion__header {
-  color: var(--color-black-80);
-  background-color: var(--color-white);
-  --border-color: var(--color-black-8);
-  --border-width: 0.0625rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-accordion__header--outlined[disabled], .dnb-accordion__header--filled[disabled] {
+  --ui-accordion-color: var(--color-sea-green-30);
+  --ui-accordion-background-: var(--color-white);
+  --ui-accordion-border-color: var(--color-sea-green-30);
+  --ui-accordion-description-color: var(--ui-accordion-color);
+  --ui-accordion-expanded-color: var(--color-white);
+  --ui-accordion-expanded-background: var(--color-sea-green-30);
+}
+.dnb-accordion__header--outlined {
+  --ui-accordion-color: var(--color-emerald-green);
+  --ui-accordion-background: var(--color-white);
+  --ui-accordion-border-color: var(--color-black-8);
+  --ui-accordion-description-color: var(--color-black-55);
+  --ui-accordion-expanded-color: var(--color-white);
+  --ui-accordion-expanded-background: var(--color-sea-green);
+  --ui-accordion-expanded-border-color: var(
+    --ui-accordion-expanded-background
+  );
+  --ui-accordion-expanded-description-color: var(
+    --ui-accordion-expanded-color
+  );
 }
-.dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled], html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled] {
+html:not([data-whatintent=touch]) .dnb-accordion__header--outlined.focus-visible[disabled] {
   cursor: not-allowed;
 }
-.dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
-  color: var(--color-emerald-green);
-  background-color: var(--color-white);
-}
-html[data-whatinput=keyboard] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover[disabled] {
+html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:focus-visible[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover:not([disabled]) {
-  color: var(--color-emerald-green);
-  background-color: var(--color-white);
-  --border-color: var(--color-emerald-green);
-  --border-width: 0.125rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled] {
+html:not([data-whatintent=touch]) .dnb-accordion__header--outlined.focus-visible:not([disabled]) {
+  --accordion-border-width: 0.125rem;
+  --ui-accordion-border-color: var(--color-emerald-green);
+  --ui-accordion-expanded-border-color: var(--color-emerald-green);
+  --ui-accordion-expanded-color: var(--color-emerald-green);
+  --ui-accordion-expanded-background: var(--color-mint-green);
+}
+html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:focus-visible:not([disabled]) {
+  --accordion-border-width: 0.125rem;
+  --ui-accordion-border-color: var(--color-emerald-green);
+  --ui-accordion-expanded-border-color: var(--color-emerald-green);
+  --ui-accordion-expanded-color: var(--color-emerald-green);
+  --ui-accordion-expanded-background: var(--color-mint-green);
+}
+html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:hover[disabled] {
   cursor: not-allowed;
 }
-.dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]) {
-  color: var(--color-emerald-green);
-  background-color: var(--color-pistachio);
-  --border-color: var(--color-emerald-green);
-  --border-width: 0.0625rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] {
-  background-color: var(--color-white);
-  --border-color: var(--color-sea-green-30);
-  --border-width: 0.0625rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] * {
-  color: var(--color-sea-green-30);
+html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:hover:not([disabled]) {
+  --accordion-border-width: 0.125rem;
+  --ui-accordion-color: var(--color-emerald-green);
+  --ui-accordion-background: var(--color-white);
+  --ui-accordion-border-color: var(--color-emerald-green);
+  --ui-accordion-description-color: var(--color-black-55);
+  --ui-accordion-border-inset: ;
+  --ui-accordion-expanded-color: var(--ui-accordion-color);
+  --ui-accordion-expanded-background: var(--ui-accordion-background);
+  --ui-accordion-expanded-border-color: var(
+    --ui-accordion-border-color
+  );
+  --ui-accordion-expanded-description-color: var(
+    --ui-accordion-description-color
+  );
+  --ui-accordion-after-click-color: var(--color-white);
+  --ui-accordion-after-click-background: var(--color-sea-green);
+  --ui-accordion-after-click-border-color: var(--color-sea-green);
+  --ui-accordion-after-click-description-color: var(--color-white);
 }
-.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header {
-  color: var(--color-white);
-  background-color: var(--color-sea-green);
-  --border-color: transparent;
-  --border-width: 0.0625rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-accordion__header--outlined:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:active[disabled] {
+  cursor: not-allowed;
 }
-.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header[disabled] {
-  background-color: var(--color-sea-green-30);
+.dnb-accordion__header--outlined:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:active:not([disabled]) {
+  --accordion-border-width: 0.0625rem;
+  --ui-accordion-background: var(--color-pistachio);
+  --ui-accordion-border-inset: inset;
+}
+.dnb-accordion__header--filled {
+  --accordion-border-width: 0.125rem;
+  --accordion-title-font-weight--expanded: var(--font-weight-basis);
+  --ui-accordion-color: var(--color-emerald-green);
+  --ui-accordion-background: var(--color-pistachio);
+  --ui-accordion-border-color: var(--color-pistachio);
+  --ui-accordion-description-color: var(--color-black-55);
+}
+html:not([data-whatintent=touch]) .dnb-accordion__header--filled:hover[disabled] {
+  cursor: not-allowed;
 }
-.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header[disabled] * {
-  color: var(--color-white);
+html:not([data-whatintent=touch]) .dnb-accordion__header--filled:hover:not([disabled]) {
+  --ui-accordion-background: var(--color-white);
 }
-html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
-  background-color: var(--color-mint-green);
+.dnb-accordion__header--filled:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__header--filled:active[disabled] {
+  cursor: not-allowed;
 }
-html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus * {
-  color: var(--color-emerald-green);
+.dnb-accordion__header--filled:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-accordion__header--filled:active:not([disabled]) {
+  --ui-accordion-color: var(--color-white);
+  --ui-accordion-background: var(--color-sea-green);
+  --ui-accordion-border-color: var(--color-sea-green);
+  --ui-accordion-description-color: ar(--color-white);
 }
-.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
-  outline: none;
+html:not([data-whatintent=touch]) .dnb-accordion__header--filled.focus-visible[disabled] {
+  cursor: not-allowed;
 }
-html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header: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;
+html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible[disabled] {
+  cursor: not-allowed;
 }
-.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not(:hover):not([disabled]) * {
-  color: var(--color-white);
+html:not([data-whatintent=touch]) .dnb-accordion__header--filled.focus-visible:not([disabled]) {
+  --ui-accordion-border-color: var(--color-sea-green);
 }
-html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover[disabled] {
-  cursor: not-allowed;
+html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:not([disabled]) {
+  --ui-accordion-border-color: var(--color-sea-green);
 }
-html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]) {
-  color: var(--color-white);
-  background-color: var(--color-sea-green);
-  --border-color: var(--color-sea-green);
-  --border-width: 0.0625rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-accordion__header--expanded {
+  --ui-accordion-color--override: var(
+    --ui-accordion-expanded-color--override,
+    var(--ui-accordion-expanded-color)
+  );
+  --ui-accordion-background--override: var(
+    --ui-accordion-expanded-background--override,
+    var(--ui-accordion-expanded-background)
+  );
+  --ui-accordion-border-color--override: var(
+    --ui-accordion-expanded-border-color--override,
+    var(--ui-accordion-expanded-border-color)
+  );
+  --ui-accordion-description-color--override: var(
+    --ui-accordion-expanded-description-color--override,
+    var(--ui-accordion-expanded-description-color)
+  );
 }
-.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active) * {
-  color: var(--color-white);
+.dnb-accordion__header--after-click {
+  --ui-accordion-expanded-color--override: var(
+    --ui-accordion-after-click-color
+  );
+  --ui-accordion-expanded-background--override: var(
+    --ui-accordion-after-click-background
+  );
+  --ui-accordion-expanded-border-color--override: var(
+    --ui-accordion-after-click-border-color
+  );
+  --ui-accordion-expanded-description-color--override: var(
+    --ui-accordion-after-click-description-color
+  );
 }
 
 /*
@@ -9363,95 +9971,31 @@ html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondar
 * Checkbox 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-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-checkbox__input:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[data-checked=true] ~ .dnb-checkbox__button {
-  background-color: var(--color-sea-green);
-}
-.dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__gfx {
-  opacity: 0;
-  transform: scale(0.8);
-  color: var(--color-sea-green);
-}
-.dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button {
-  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-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);
+  --checkbox-color-gfx-on: var(--color-white);
+  --checkbox-color-gfx-off: var(--color-sea-green);
+  --checkbox-color-background-on: var(--color-sea-green);
+  --checkbox-color-background-off: var(--color-white);
+  --checkbox-color-border-on: transparent;
+  --checkbox-color-border-off: var(--color-sea-green);
+  --checkbox-color-gfx--disabled: var(--checkbox-color-gfx-on);
+  --checkbox-color-background-on--disabled: var(--color-sea-green-30);
+  --checkbox-color-background-off--disabled: var(--color-white);
+  --checkbox-color-border-on--disabled: transparent;
+  --checkbox-color-border-off--disabled: var(--color-mint-green-50);
+  --checkbox-color-background--active: var(--color-mint-green-50);
+  --checkbox-color-border--active: transparent;
+  --checkbox-color-gfx--hover: var(--color-sea-green);
+  --checkbox-color-background--hover: var(--color-mint-green-50);
+  --checkbox-color-border-on--hover: transparent;
+  --checkbox-color-border-off--hover: var(--color-sea-green);
+  --checkbox-color-gfx--focus: var(--color-sea-green);
+  --checkbox-color-background--focus: var(--color-mint-green-50);
+  --checkbox-color-gfx--error: var(--color-fire-red-8);
+  --checkbox-color-gfx--error-contrast: var(--color-fire-red);
+  --checkbox-color-background-on--error: var(--color-fire-red);
+  --checkbox-color-background--error-contrast: var(--color-fire-red-8);
+  --checkbox-color-border--error: var(--color-fire-red);
 }
 
 /*
@@ -9931,93 +10475,32 @@ html[data-whatinput=keyboard] .dnb-core-style .dnb-pagination__button.dnb-button
 * Radio theme
 *
 */
-/*
- * Utilities
- */
 .dnb-radio {
-  /* stylelint-disable */
-  /* stylelint-enable */
-  /* stylelint-disable */
-  /* stylelint-enable */
-}
-.dnb-radio__dot {
-  background-color: var(--color-sea-green);
-  transition: opacity 200ms ease-out, transform 200ms ease-out;
-}
-.dnb-radio__input:checked ~ .dnb-radio__button, .dnb-radio__input[data-checked=true] ~ .dnb-radio__button {
-  background-color: var(--color-white);
-  border-color: var(--color-sea-green);
-}
-.dnb-radio__input:checked ~ .dnb-radio__dot, .dnb-radio__input[data-checked=true] ~ .dnb-radio__dot {
-  opacity: 1;
-  transform: scale(1);
-}
-.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__dot {
-  opacity: 0;
-  transform: scale(0.8);
-}
-.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
-  background-color: var(--color-white);
-  border-color: var(--color-sea-green);
-}
-.dnb-radio__input[disabled]:checked ~ .dnb-radio__button, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__button {
-  border-color: var(--color-sea-green-30);
-}
-.dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
-  border-color: var(--color-mint-green-50);
-}
-.dnb-radio__input[disabled]:checked ~ .dnb-radio__dot, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__dot {
-  background-color: var(--color-sea-green-30);
-}
-.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(--color-mint-green-50);
-}
-.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active ~ .dnb-radio__button {
-  background-color: var(--color-mint-green-50);
-  border-color: transparent;
-}
-.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__dot, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__dot {
-  background-color: var(--color-mint-green-50);
-}
-.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
-  background-color: var(--color-mint-green-50);
-}
-.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(--color-mint-green-50);
-}
-html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button {
-  background-color: var(--color-mint-green-50);
-}
-html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__button {
-  border: none;
-}
-.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(:checked):not([data-checked=true]):focus ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active ~ .dnb-radio__button {
-  background-color: var(--color-mint-green-50);
-}
-.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__button {
-  border: none;
-}
-.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__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-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
-  background-color: var(--color-fire-red-8);
-}
-.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true] ~ .dnb-radio__dot {
-  background-color: var(--color-fire-red);
-}
-.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(--color-fire-red-8);
-}
-.dnb-radio > .dnb-form-status {
-  transform: translateY(0.25rem); /* 4/16 */
+  --radio-color-dot-on: var(--color-sea-green);
+  --radio-color-background-on: var(--color-white);
+  --radio-color-border-on: var(--color-sea-green);
+  --radio-color-background-off: var(--color-white);
+  --radio-color-border-off: var(--color-sea-green);
+  --radio-color-dot-on--disabled: var(--color-sea-green-30);
+  --radio-color-background--disabled: var(--color-white);
+  --radio-color-border-on--disabled: var(--color-sea-green-30);
+  --radio-color-border-off--disabled: var(--color-mint-green-50);
+  --radio-color-dot-on--active: var(--color-mint-green-50);
+  --radio-color-border-on--active: var(--color-mint-green-50);
+  --radio-color-background-off--active: var(--color-mint-green-50);
+  --radio-color-border-off--active: transparent;
+  --radio-color-dot-on--hover: var(--color-mint-green-50);
+  --radio-color-background-on--hover: var(--color-white);
+  --radio-color-background-off--hover: var(--color-mint-green-50);
+  --radio-color-dot-on--focus: var(--color-sea-green);
+  --radio-color-background-on--focus: var(--color-white);
+  --radio-color-background-off--focus: var(--color-mint-green-50);
+  --radio-color-dot-on--error: var(--color-fire-red);
+  --radio-color-border-on--error: var(--color-fire-red);
+  --radio-color-border--error-hover: var(--radio-color-border-on--error);
+  --radio-color-background-off--error-hover: var(--color-fire-red-8);
+  --radio-color-background-on--error-hover: var(--color-white);
+  --radio-color-dot-on--error-hover: var(--color-fire-red-8);
 }
 
 /*
@@ -10265,6 +10748,7 @@ html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__i
  * Utilities
  */
 .dnb-switch {
+  /* stylelint-disable no-descending-specificity */
   /*
     * When switched OFF
     * aka when the checkbox is not :checked
@@ -10278,42 +10762,35 @@ html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__i
     *
     */
   /*
-    * On disabled
+    * On disabled state
     *
     */
   /*
-    * On focus
+    * On focus state
     *
     */
-  /* stylelint-disable-next-line */
   /*
-    * On hover
+    * On hover state
     *
     */
-  /* stylelint-disable-next-line */
   /*
-    * On active
+    * On active state
     *
     */
-  /* stylelint-disable-next-line */
   /*
     * On error state
     *
     */
-  /* stylelint-disable-next-line */
+  /* stylelint-enable no-descending-specificity */
 }
 .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__focus {
+  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%);
 }
 .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
   background-color: var(--color-white);
@@ -10368,18 +10845,6 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
 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);
 }
@@ -10415,7 +10880,6 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
   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);
@@ -10824,8 +11288,6 @@ html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__bu
 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);
-}
-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;
 }
 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 {
@@ -11142,4 +11604,256 @@ html[data-whatinput=keyboard] .dnb-drawer-list__option--selected .dnb-drawer-lis
 */
 /*
  * Utilities
+ */
+/**
+ * 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-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;
+}
+
+/**
+ * NB: The content below is auto generated by the "themeFactory".
+ * You may want to update it by running "yarn build" locally.
  */