@dnb/eufemia 10.55.1 → 10.57.0

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

@@ -41,6 +41,8 @@
   --drawer-list-option-inner-background: var(--color-white);
   --drawer-list-list-background: var(--color-white);
   --drawer-list-list-line-height: var(--line-height-basis);
+  --drawer-list-option-disabled-background: var(--color-white);
+  --drawer-list-option-disabled-color: var(--color-black-20);
   display: block;
   position: relative;
   width: inherit;
@@ -197,6 +199,13 @@ html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options, .dnb-
   cursor: default;
   pointer-events: none;
 }
+.dnb-drawer-list__option[disabled] {
+  --drawer-list-option-inner-background: var(
+    --drawer-list-option-disabled-background
+  );
+  color: var(--drawer-list-option-disabled-color);
+  cursor: not-allowed;
+}
 .dnb-drawer-list__triangle {
   position: absolute;
   top: calc(var(--drawer-list-focus-border-width) - var(--drawer-list-height) / 2);
@@ -482,18 +491,18 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 .dnb-forms-field-array-selection--variant-button {
   --row-gap: var(--spacing-small);
 }
-.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--options-layout--vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
   row-gap: var(--row-gap);
 }
-.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
+.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
   align-items: flex-start;
 }
-.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
+.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
   line-height: 2.5rem;
 }
-.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--options-layout--horizontal .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-small);
@@ -640,6 +649,11 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-input__border {
   flex-grow: 1;
 }
+@media screen and (max-width: xx-small0) {
+  .dnb-forms-field-number .dnb-input__shell {
+    width: 90%;
+  }
+}
 
 .dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button {
   color: var(--color-fire-red);
@@ -677,6 +691,9 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
 .dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label, .dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label {
   margin-bottom: 0;
 }
+.dnb-forms-field-selection--options-layout--vertical.dnb-forms-field-selection--layout-horizontal .dnb-forms-field-block__label {
+  align-items: flex-start;
+}
 .dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label {
   line-height: 2.5rem;
 }
@@ -690,6 +707,23 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   flex-grow: 1;
 }
 
+/*
+ * Utilities
+ */
+.dnb-forms-field-string .dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label.dnb-form-label {
+  align-items: baseline;
+}
+@media screen and (max-width: xx-small0) {
+  .dnb-forms-field-string .dnb-input__shell {
+    width: 90%;
+  }
+}
+
+.dnb-forms-field-upload .dnb-help-button__content .dnb-section {
+  margin-left: var(--upload-border-width);
+  margin-right: var(--upload-border-width);
+}
+
 /*
  * Utilities
  */
@@ -699,13 +733,6 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   --forms-field-width--large: 21rem;
 }
 
-@media screen and (max-width: 15em) {
-  .dnb-forms-field-string .dnb-input__shell,
-  .dnb-forms-field-number .dnb-input__shell {
-    width: 90%;
-  }
-}
-
 fieldset.dnb-forms-field-block {
   padding: 0;
   border: none;
@@ -725,35 +752,12 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 
 .dnb-forms-field-block {
   --label-margin: 0.25rem;
+  --max-width: var(--forms-field-width--large);
 }
 .dnb-forms-field-block__grid {
   display: grid;
   grid-template-columns: minmax(min-content, var(--block-content-width, auto));
-  grid-template-areas: "label" "contents" "status";
-}
-.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical {
-  flex-wrap: wrap;
-}
-.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-forms-field-block__label > .dnb-form-label {
-  margin-bottom: 0.5rem;
-}
-@media screen and (max-width: 40em) {
-  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-forms-field-block__label > .dnb-form-label {
-    margin-bottom: 0.5rem;
-  }
-}
-@media screen and (min-width: 40.00625em) {
-  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal {
-    grid-template-columns: minmax(var(--dnb-forms-field-block-layout-width-min, min-content), var(--dnb-forms-field-block-layout-width-max, max-content)) auto;
-    grid-template-areas: "label contents" ". status";
-  }
-  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-forms-field-block__label > .dnb-form-label {
-    margin-top: var(--label-margin);
-    margin-bottom: var(--label-margin);
-  }
-  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents {
-    align-self: end;
-  }
+  grid-template-areas: "label" "help" "contents" "indicator" "status";
 }
 .dnb-forms-field-block--label-height-small {
   --label-margin: 0;
@@ -781,16 +785,76 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
     width: var(--forms-field-width--large);
   }
 }
-.dnb-forms-field-block__label {
+.dnb-forms-field-block:not([class*="--content-width"]) {
+  --max-width: 60ch;
+}
+.dnb-forms-field-block__label, .dnb-forms-field-block__label.dnb-form-label {
   grid-area: label;
   display: flex;
-  flex-flow: row;
-  justify-content: space-between;
+  max-width: var(--max-width);
   align-items: center;
+  margin-right: 0;
 }
-.dnb-forms-field-block__label-description {
+.dnb-forms-field-block__label__description, .dnb-forms-field-block__label.dnb-form-label__description {
   margin-left: 0.3em;
 }
+.dnb-forms-field-block__label__content:has(+ .dnb-help-button), .dnb-forms-field-block__label__description:has(+ .dnb-help-button), .dnb-forms-field-block__label.dnb-form-label__content:has(+ .dnb-help-button), .dnb-forms-field-block__label.dnb-form-label__description:has(+ .dnb-help-button) {
+  margin-right: 0.5rem;
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical {
+  flex-wrap: wrap;
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-form-label {
+  margin-bottom: 0.5rem;
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label {
+  margin-right: 1rem;
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label {
+  margin-top: var(--label-margin);
+  margin-bottom: var(--label-margin);
+}
+@media screen and (max-width: 40em) {
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label {
+    margin-bottom: calc(var(--label-margin) + 0.5rem);
+  }
+}
+@media screen and (min-width: 40.00625em) {
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal {
+    grid-template-columns: minmax(var(--dnb-forms-field-block-layout-width-min, min-content), var(--dnb-forms-field-block-layout-width-max, max-content)) auto;
+    grid-template-areas: "label contents" ". help" ". indicator" ". status";
+  }
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content {
+    --help-button-indent-width: 0;
+  }
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content .dnb-section {
+    --rounded-corner: 0.25rem;
+    align-self: flex-start;
+  }
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents {
+    align-self: end;
+  }
+}
+.dnb-forms-field-block__indicator {
+  grid-area: indicator;
+}
+.dnb-forms-field-block__help {
+  grid-area: help;
+  display: flex;
+  flex-flow: column;
+}
+.dnb-forms-field-block__help .dnb-section {
+  margin-bottom: 1rem;
+}
+.dnb-forms-field-block__help .dnb-section > .dnb-p--lead {
+  margin-bottom: 0.5rem;
+}
+@media screen and (min-width: 40.00625em) {
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__help .dnb-section {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+  }
+}
 .dnb-forms-field-block__status {
   grid-area: status;
 }
@@ -825,31 +889,41 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
     width: var(--forms-field-width--large);
   }
 }
-.dnb-forms-field-block__contents__composition--vertical {
+.dnb-forms-field-block__composition--vertical .dnb-forms-field-block__contents {
   display: flex;
   flex-flow: column;
-  row-gap: var(--spacing-small);
+  row-gap: var(--spacing-x-small);
 }
-.dnb-forms-field-block__contents__composition--horizontal {
+.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
   display: flex;
   flex-flow: row;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
 @media screen and (min-width: 25.00625em) {
-  .dnb-forms-field-block__contents__composition--horizontal {
+  .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
     align-items: flex-end;
   }
-  .dnb-forms-field-block__contents__composition--horizontal[class*=align-center] {
+  .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents[class*=align-center] {
     align-items: center;
   }
 }
 @media screen and (max-width: 25em) {
-  .dnb-forms-field-block__contents__composition--horizontal {
+  .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
     row-gap: var(--spacing-x-small);
     flex-flow: column;
   }
 }
+@media screen and (max-width: 25em) {
+  .dnb-forms-field-block__composition > .dnb-forms-field-block__grid > .dnb-forms-submit-indicator {
+    display: none;
+  }
+}
+@media screen and (min-width: 25.00625em) {
+  .dnb-forms-field-block__composition > .dnb-forms-field-block__grid > .dnb-forms-field-block__contents .dnb-forms-submit-indicator {
+    display: none;
+  }
+}
 
 /*
  * Utilities
@@ -861,17 +935,15 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   gap: var(--spacing-small);
 }
 
-.dnb-card + .dnb-forms-button-row:not([class*=space__top]),
-.dnb-card + .dnb-button--primary:not([class*=space__top]) {
+.dnb-card + .dnb-forms-button-row:not([class*=space__top]), .dnb-card + .dnb-button--primary:not([class*=space__top]) {
   margin-top: var(--spacing-small);
 }
-.dnb-card + .dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top],
-.dnb-card + .dnb-button--primary:not([class*=space__top]) .dnb-button[class*=space__top] {
+.dnb-card + .dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top], .dnb-card + .dnb-button--primary:not([class*=space__top]) .dnb-button[class*=space__top] {
   margin-top: 0;
 }
+
 @media screen and (min-width: 40.00625em) {
-  .dnb-card + .dnb-forms-button-row:not([class*=space__left]),
-  .dnb-card + .dnb-button--primary:not([class*=space__left]) {
+  .dnb-card:not([style*="--outset"]) + .dnb-forms-button-row:not([class*=space__left]), .dnb-card:not([style*="--outset"]) + .dnb-button--primary:not([class*=space__left]) {
     margin-left: var(--spacing-medium);
   }
 }
@@ -882,13 +954,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-spacing .dnb-forms-main-heading.dnb-h--large:not([class*=space__]) {
   margin: 0;
 }
-@media screen and (min-width: 40.00625em) {
-  .dnb-forms-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__left]) {
-    margin-left: var(--spacing-medium);
-  }
-}
-.dnb-forms-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
-  margin-bottom: var(--spacing-small);
+
+.dnb-forms-main-heading + .dnb-help-button__content .dnb-section {
+  margin-top: 1rem;
 }
 
 .dnb-forms-section-block {
@@ -904,6 +972,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-section-block--variant-basic {
   --border-color: transparent;
 }
+.dnb-forms-section-block--variant-basic .dnb-card {
+  --card-outline-color: transparent;
+}
 .dnb-forms-section-block__inner {
   flex: 1;
   outline: none;
@@ -943,6 +1014,10 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-bottom: var(--spacing-small);
 }
 
+.dnb-forms-sub-heading + .dnb-help-button__content .dnb-section {
+  margin-top: 1rem;
+}
+
 /*
  * Utilities
  */
@@ -1143,8 +1218,8 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
 .dnb-forms-wizard-layout {
   display: flex;
   flex-flow: row wrap;
-  -moz-column-gap: var(--spacing-medium);
-       column-gap: var(--spacing-medium);
+  -moz-column-gap: var(--spacing-x-large);
+       column-gap: var(--spacing-x-large);
 }
 .dnb-forms-wizard-layout--drawer {
   flex-direction: column;
@@ -1407,7 +1482,7 @@ button.dnb-anchor {
 :where(:not(.dnb-anchor--no-style)).dnb-anchor {
   --anchor-underline-thickness: 0.0938rem;
   --anchor-icon-gutter: 0.25em;
-  --anchor-icon-seperator: "⁠";
+  --anchor-icon-separator: "⁠";
   --anchor-icon-position: translateY(-0.175em);
   display: inline;
   padding: 0.05575em 0;
@@ -1486,13 +1561,13 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   display: none;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child::after {
-  content: var(--anchor-icon-seperator);
+  content: var(--anchor-icon-separator);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child svg {
   margin-right: calc(var(--anchor-icon-gutter) * 2);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child::before {
-  content: var(--anchor-icon-seperator);
+  content: var(--anchor-icon-separator);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child svg {
   margin-left: calc(var(--anchor-icon-gutter) * 2);
@@ -1538,7 +1613,7 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   :not(.dnb-anchor--no-style).dnb-anchor {
     --anchor-underline-thickness: 0.0938rem;
     --anchor-icon-gutter: 0.25em;
-    --anchor-icon-seperator: "⁠";
+    --anchor-icon-separator: "⁠";
     --anchor-icon-position: translateY(-0.175em);
     display: inline;
     padding: 0.05575em 0;
@@ -1617,13 +1692,13 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
     display: none;
   }
   :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child::after {
-    content: var(--anchor-icon-seperator);
+    content: var(--anchor-icon-separator);
   }
   :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child svg {
     margin-right: calc(var(--anchor-icon-gutter) * 2);
   }
   :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child::before {
-    content: var(--anchor-icon-seperator);
+    content: var(--anchor-icon-separator);
   }
   :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child svg {
     margin-left: calc(var(--anchor-icon-gutter) * 2);
@@ -2582,8 +2657,29 @@ button.dnb-button::-moz-focus-inner {
 .dnb-card > .dnb-flex-container--align-stretch > .dnb-button {
   align-self: flex-start;
 }
-.dnb-card .dnb-card {
-  --outline-width: 0.125rem;
+.dnb-card[style*="--outset"].dnb-space[style]:not(.dnb-card) {
+  padding-left: calc(var(--padding-left) * (1 - var(--outset)));
+  padding-right: calc(var(--padding-right) * (1 - var(--outset)));
+}
+.dnb-card[style*="--outset"].dnb-card > .dnb-flex-container {
+  margin-left: calc(var(--padding-left, var(--spacing-medium)) * -1 * var(--outset));
+  margin-right: calc(var(--padding-right, var(--spacing-medium)) * -1 * var(--outset));
+}
+
+.dnb-card--auto-indent:has(+ .dnb-card,
++ * + .dnb-card,
++ * + * + .dnb-card,
++ .dnb-help-button__content + .dnb-section + .dnb-card):not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
+}
+
+@media screen and (min-width: 40.00625em) {
+  .dnb-card--auto-indent:has(+ .dnb-card:not([style*="--outset"]),
+  + * + .dnb-card:not([style*="--outset"]),
+  + * + * + .dnb-card:not([style*="--outset"]),
+  + .dnb-help-button__content + .dnb-section + .dnb-card:not([style*="--outset"])):not([class*=space__left]) {
+    margin-left: var(--spacing-medium);
+  }
 }
 
 /*
@@ -6093,9 +6189,213 @@ html[data-visual-test] .dnb-height-animation, html[data-visual-test] .dnb-height
 /*
  * HelpButton component
  *
- * TODO: Set spacing in the theme file, as theme comes later in the stack
+ */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+.dnb-help-button.dnb-help-button__inline--open {
+  --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-help-button__inline svg {
+  will-change: transform;
+}
+.dnb-help-button__inline svg:nth-of-type(2) {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(1) {
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(2) {
+  animation: rotate-icon-in 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(1) {
+  opacity: 0;
+  animation: animate-question 400ms var(--easing-default) 200ms forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2) {
+  animation: rotate-icon-out 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg, html[data-visual-test] .dnb-help-button__inline svg {
+  animation-duration: 0ms;
+}
+@keyframes rotate-icon-in {
+  from {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+}
+@keyframes rotate-icon-out {
+  0% {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+}
+@keyframes animate-question {
+  from {
+    opacity: 0;
+    transform: rotate(10deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+}
+
+.dnb-help-button__content {
+  --help-button-indent-width: var(--card-outline-width);
+}
+.dnb-help-button__content .dnb-section {
+  --background-color: var(--help-button-content-background);
+  --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
+}
+.dnb-help-button__content .dnb-section .dnb-p {
+  max-width: 60ch;
+  transition: transform 400ms var(--easing-default) 40ms;
+  transform: translate3d(0, -0.5rem, 0);
+}
+:not(.dnb-card) .dnb-help-button__content .dnb-section {
+  --outset-left: calc(
+    var(--spacing-medium) + var(--help-button-indent-width)
+  );
+  --outset-right: calc(
+    var(--spacing-medium) + var(--help-button-indent-width)
+  );
+}
+.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
+  transform: translate3d(0, 0, 0);
+}
+
+/*
+ * HelpButton component
  *
  */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+/*
+ * HelpButton component
+ *
+ */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+.dnb-help-button.dnb-help-button__inline--open {
+  --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-help-button__inline svg {
+  will-change: transform;
+}
+.dnb-help-button__inline svg:nth-of-type(2) {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(1) {
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(2) {
+  animation: rotate-icon-in 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(1) {
+  opacity: 0;
+  animation: animate-question 400ms var(--easing-default) 200ms forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2) {
+  animation: rotate-icon-out 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg, html[data-visual-test] .dnb-help-button__inline svg {
+  animation-duration: 0ms;
+}
+@keyframes rotate-icon-in {
+  from {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+}
+@keyframes rotate-icon-out {
+  0% {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+}
+@keyframes animate-question {
+  from {
+    opacity: 0;
+    transform: rotate(10deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+}
+
+.dnb-help-button__content {
+  --help-button-indent-width: var(--card-outline-width);
+}
+.dnb-help-button__content .dnb-section {
+  --background-color: var(--help-button-content-background);
+  --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
+}
+.dnb-help-button__content .dnb-section .dnb-p {
+  max-width: 60ch;
+  transition: transform 400ms var(--easing-default) 40ms;
+  transform: translate3d(0, -0.5rem, 0);
+}
+:not(.dnb-card) .dnb-help-button__content .dnb-section {
+  --outset-left: calc(
+    var(--spacing-medium) + var(--help-button-indent-width)
+  );
+  --outset-right: calc(
+    var(--spacing-medium) + var(--help-button-indent-width)
+  );
+}
+.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
+  transform: translate3d(0, 0, 0);
+}
+
 .dnb-help-button .dnb-button__bounding {
   transform: scale(1.5);
 }
@@ -7801,9 +8101,19 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
 .dnb-section:not([style*="--breakout"]) {
   --breakout: var(--breakout--on);
 }
+.dnb-section[style*="--outset"].dnb-space[style]:not(.dnb-card) {
+  padding-left: calc(var(--padding-left) * (1 - var(--outset)));
+  padding-right: calc(var(--padding-right) * (1 - var(--outset)));
+}
+.dnb-section[style*="--outset"]::before {
+  margin-left: calc(var(--outset-left, var(--padding-left)) * -1 * var(--outset));
+  margin-right: calc(var(--outset-right, var(--padding-right)) * -1 * var(--outset));
+  background-color: inherit;
+}
 @media screen and (max-width: 60em) {
   .dnb-section {
     --breakout: var(--breakout--small, var(--breakout--fallback));
+    --outset: var(--outset--small, var(--outset--fallback));
     --background-color--value: var(--background-color--small);
     --text-color--value: var(--text-color--small);
     --outline-color: var(--outline-color--small);
@@ -7817,6 +8127,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
 @media screen and (max-width: 60em) and (min-width: 40.00625em) {
   .dnb-section {
     --breakout: var(--breakout--medium, var(--breakout--fallback));
+    --outset: var(--outset--medium, var(--outset--fallback));
     --background-color--value: var(--background-color--medium);
     --text-color--value: var(--text-color--medium);
     --outline-color: var(--outline-color--medium);
@@ -7830,6 +8141,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
 @media screen and (min-width: 60.00625em) {
   .dnb-section {
     --breakout: var(--breakout--large, var(--breakout--fallback));
+    --outset: var(--outset--large, var(--outset--fallback));
     --background-color--value: var(--background-color--large);
     --text-color--value: var(--text-color--large);
     --outline-color: var(--outline-color--large);
@@ -9261,6 +9573,8 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -9552,6 +9866,8 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 *
 */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -9574,6 +9890,8 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 *
 */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -9693,6 +10011,8 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 *
 */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -10061,6 +10381,8 @@ html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__t
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -10391,6 +10713,8 @@ html[data-whatinput=keyboard] .dnb-tabs__content:focus::before {
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -11110,6 +11434,7 @@ html[data-visual-test] .dnb-tooltip--hide {
   --upload-background--active: lightgray;
   --upload-border: gray;
   --upload-border--active: black;
+  --upload-border-width: 2px;
   --upload-list-border: black;
   --upload-icon--default: black;
   --upload-icon--warning: red;
@@ -11141,8 +11466,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 }
 .dnb-upload--active .dnb-upload__outline {
   inset: -1px;
-  width: calc(100% + 2px);
-  height: calc(100% + 2px);
+  width: calc(100% + var(--upload-border-width));
+  height: calc(100% + var(--upload-border-width));
   stroke: var(--upload-border--active);
 }
 .dnb-upload--active .dnb-upload__outline rect {
@@ -11429,7 +11754,7 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
 }
 :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor {
   --anchor-icon-gutter: 0.125em;
-  --anchor-icon-seperator: " ";
+  --anchor-icon-separator: " ";
 }
 :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left, :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right {
   text-decoration-color: var(--sb-color-green-dark);
@@ -11438,13 +11763,13 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
   --anchor-background-gutter-right: 0rem;
 }
 :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
-  content: var(--anchor-icon-seperator);
+  content: var(--anchor-icon-separator);
 }
 :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
   --anchor-background-gutter-left: 0rem;
 }
 :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
-  content: var(--anchor-icon-seperator);
+  content: var(--anchor-icon-separator);
 }
 :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline) {
   /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -11452,7 +11777,7 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
 @supports not (selector(*:where(*))) {
   :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor {
     --anchor-icon-gutter: 0.125em;
-    --anchor-icon-seperator: " ";
+    --anchor-icon-separator: " ";
   }
   :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left, :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right {
     text-decoration-color: var(--sb-color-green-dark);
@@ -11461,13 +11786,13 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
     --anchor-background-gutter-right: 0rem;
   }
   :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
-    content: var(--anchor-icon-seperator);
+    content: var(--anchor-icon-separator);
   }
   :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
     --anchor-background-gutter-left: 0rem;
   }
   :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
-    content: var(--anchor-icon-seperator);
+    content: var(--anchor-icon-separator);
   }
 }
 
@@ -11521,7 +11846,7 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
   }
   :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor {
     --anchor-icon-gutter: 0.125em;
-    --anchor-icon-seperator: " ";
+    --anchor-icon-separator: " ";
   }
   :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left, :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right {
     text-decoration-color: var(--sb-color-green-dark);
@@ -11530,13 +11855,13 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
     --anchor-background-gutter-right: 0rem;
   }
   :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
-    content: var(--anchor-icon-seperator);
+    content: var(--anchor-icon-separator);
   }
   :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
     --anchor-background-gutter-left: 0rem;
   }
   :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
-    content: var(--anchor-icon-seperator);
+    content: var(--anchor-icon-separator);
   }
   :not(.dnb-anchor--no-style):not(.dnb-anchor--inline) {
     /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -11544,7 +11869,7 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
   @supports not (selector(*:where(*))) {
     :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor {
       --anchor-icon-gutter: 0.125em;
-      --anchor-icon-seperator: " ";
+      --anchor-icon-separator: " ";
     }
     :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left, :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right {
       text-decoration-color: var(--sb-color-green-dark);
@@ -11553,13 +11878,13 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
       --anchor-background-gutter-right: 0rem;
     }
     :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
-      content: var(--anchor-icon-seperator);
+      content: var(--anchor-icon-separator);
     }
     :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
       --anchor-background-gutter-left: 0rem;
     }
     :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
-      content: var(--anchor-icon-seperator);
+      content: var(--anchor-icon-separator);
     }
   }
 }
@@ -11670,11 +11995,11 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
 }
 .dnb-avatar--size-large {
   font-weight: var(--sb-font-weight-basis);
-  font-family: var(--sb-font-family-headings);
+  font-family: var(--font-family-heading);
 }
 .dnb-avatar--size-x-large {
   font-weight: var(--sb-font-weight-basis);
-  font-family: var(--sb-font-family-headings);
+  font-family: var(--font-family-heading);
 }
 .dnb-avatar__group {
   --avatar-font-size-left--medium: var(--font-size-basis);
@@ -11723,6 +12048,8 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -11730,6 +12057,8 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -12244,6 +12573,8 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disab
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -12410,6 +12741,14 @@ html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown
   --hr-color: var(--sb-color-green-dark-3);
 }
 
+/*
+ * Help button theme for Sbanken
+ *
+ */
+.dnb-help-button__content {
+  --help-button-content-background: var(--sb-color-green);
+}
+
 /*
 * Input theme
 *
@@ -12950,6 +13289,8 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -13329,9 +13670,13 @@ html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__bu
   --drawer-list-options-border-radius: 0 0 0.5rem 0.5rem;
   --drawer-list-options-border-radius-reversed: 0.5rem 0.5rem 0 0;
   --drawer-list-option-border-width: 0.125rem;
+  --drawer-list-option-border-color: transparent;
   --drawer-list-option-inner-border-display: none;
   --drawer-list-option-inner-background: transparent;
   --drawer-list-list-background: var(--sb-color-white);
+  --drawer-list-list-option-background: transparent;
+  --drawer-list-option-disabled-background: var(--sb-color-gray-light);
+  --drawer-list-option-disabled-color: var(--sb-color-gray-dark);
 }
 .dnb-drawer-list__list {
   margin-top: calc(-1 * var(--drawer-list-option-border-width));
@@ -13342,14 +13687,14 @@ html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__bu
 }
 .dnb-drawer-list__option__inner {
   overflow: visible;
-  background-color: inherit;
   padding: 1rem 0.75rem;
+  margin: 0 var(--drawer-list-option-border-width);
 }
 .dnb-drawer-list__option__inner::before {
   content: "";
   display: block;
   position: absolute;
-  bottom: -3px;
+  top: -1px;
   left: 0.5rem;
   width: calc(100% - 1rem);
   height: 1px;
@@ -13366,11 +13711,8 @@ html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__bu
   border-radius: var(--drawer-list-options-border-radius);
 }
 .dnb-drawer-list__option {
-  border: var(--drawer-list-option-border-width) solid var(--sb-color-gray-dark-2);
-  border-bottom-color: transparent;
-  border-top-color: transparent;
-  border-right-color: transparent;
-  background-color: transparent;
+  box-shadow: inset 0 0 0 var(--drawer-list-option-border-width) var(--drawer-list-option-border-color);
+  background: var(--drawer-list-list-option-background);
   z-index: 0;
 }
 .dnb-drawer-list__option__item.item-nr-1 {
@@ -13380,7 +13722,7 @@ html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover[disabled] {
   cursor: not-allowed;
 }
 html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover:not([disabled]) {
-  border-color: var(--sb-color-violet);
+  --drawer-list-option-border-color: var(--sb-color-violet);
   z-index: 1;
 }
 html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover:not([disabled]) .dnb-drawer-list__option__inner::before {
@@ -13390,14 +13732,14 @@ html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover:not([disabled])
   cursor: not-allowed;
 }
 .dnb-drawer-list__option:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-drawer-list__option:active:not([disabled]) {
-  border-color: var(--sb-color-violet);
+  --drawer-list-option-border-color: var(--sb-color-violet);
   z-index: 1;
 }
 .dnb-drawer-list__option:active:not([disabled]) .dnb-drawer-list__option__inner::before, html:not([data-whatintent=touch]) .dnb-drawer-list__option:active:not([disabled]) .dnb-drawer-list__option__inner::before {
   display: var(--drawer-list-option-inner-border-display);
 }
 .dnb-drawer-list__option--selected {
-  background-color: var(--sb-color-violet);
+  --drawer-list-list-option-background: var(--sb-color-violet);
   color: var(--sb-color-white);
   border-right-color: var(--sb-color-gray-dark-2);
 }
@@ -13421,25 +13763,27 @@ html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover:not([disabled])
 @media screen and (min-width: 40.00625em) {
   .dnb-drawer-list__option--selected .dnb-drawer-list__option__suffix {
     z-index: 2;
-    background-color: inherit;
+    background-color: var(--drawer-list-list-option-background);
   }
 }
+.dnb-drawer-list__option.first-of-type .dnb-drawer-list__option__inner::before {
+  content: none;
+}
 .dnb-drawer-list__option.last-of-type {
   border-radius: var(--drawer-list-options-border-radius);
 }
-.dnb-drawer-list__option.last-of-type .dnb-drawer-list__option__inner::before {
-  display: none;
-}
 .dnb-drawer-list__option:focus-visible, .dnb-drawer-list__option--focus {
-  border-color: var(--sb-color-blue-dark);
-  outline: 0.0625rem solid var(--sb-color-blue-dark);
-  background-color: var(--sb-color-blue-light-3);
+  --drawer-list-option-border-color: var(--sb-color-blue-dark);
+  --drawer-list-list-option-background: var(--sb-color-blue-light-3);
   color: var(--sb-color-blue-dark);
   font-weight: var(--sb-font-weight-medium);
   z-index: 1;
   /* stylelint-disable no-descending-specificity */
   /* stylelint-enable no-descending-specificity */
 }
+.dnb-drawer-list__option:focus-visible .dnb-drawer-list__option__inner, .dnb-drawer-list__option--focus .dnb-drawer-list__option__inner {
+  --drawer-list-option-inner-background: transparent;
+}
 .dnb-drawer-list__option:focus-visible .dnb-drawer-list__option__inner::before, .dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::before {
   display: var(--drawer-list-option-inner-border-display);
 }
@@ -13619,10 +13963,6 @@ html:not([data-whatintent=touch]) .dnb-date-picker__day--inactive .dnb-button[di
  * GlobalError theme
  *
  */
-/*
- * Np theme is provided
- *
- */
 /*
  * Icon theme
  *
@@ -13671,6 +14011,8 @@ html:not([data-whatintent=touch]) .dnb-date-picker__day--inactive .dnb-button[di
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -13792,18 +14134,18 @@ html:not([data-whatintent=touch]) .dnb-date-picker__day--inactive .dnb-button[di
 .dnb-forms-field-array-selection--variant-button {
   --row-gap: var(--spacing-small);
 }
-.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--options-layout--vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
   row-gap: var(--row-gap);
 }
-.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
+.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
   align-items: flex-start;
 }
-.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
+.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
   line-height: 2.5rem;
 }
-.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--options-layout--horizontal .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-small);
@@ -13950,6 +14292,11 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-input__border {
   flex-grow: 1;
 }
+@media screen and (max-width: xx-small0) {
+  .dnb-forms-field-number .dnb-input__shell {
+    width: 90%;
+  }
+}
 
 .dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button {
   color: var(--color-fire-red);
@@ -13987,6 +14334,9 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
 .dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label, .dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label {
   margin-bottom: 0;
 }
+.dnb-forms-field-selection--options-layout--vertical.dnb-forms-field-selection--layout-horizontal .dnb-forms-field-block__label {
+  align-items: flex-start;
+}
 .dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label {
   line-height: 2.5rem;
 }
@@ -14000,6 +14350,23 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   flex-grow: 1;
 }
 
+/*
+ * Utilities
+ */
+.dnb-forms-field-string .dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label.dnb-form-label {
+  align-items: baseline;
+}
+@media screen and (max-width: xx-small0) {
+  .dnb-forms-field-string .dnb-input__shell {
+    width: 90%;
+  }
+}
+
+.dnb-forms-field-upload .dnb-help-button__content .dnb-section {
+  margin-left: var(--upload-border-width);
+  margin-right: var(--upload-border-width);
+}
+
 /*
  * Utilities
  */
@@ -14009,13 +14376,6 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   --forms-field-width--large: 21rem;
 }
 
-@media screen and (max-width: 15em) {
-  .dnb-forms-field-string .dnb-input__shell,
-  .dnb-forms-field-number .dnb-input__shell {
-    width: 90%;
-  }
-}
-
 fieldset.dnb-forms-field-block {
   padding: 0;
   border: none;
@@ -14035,35 +14395,12 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 
 .dnb-forms-field-block {
   --label-margin: 0.25rem;
+  --max-width: var(--forms-field-width--large);
 }
 .dnb-forms-field-block__grid {
   display: grid;
   grid-template-columns: minmax(min-content, var(--block-content-width, auto));
-  grid-template-areas: "label" "contents" "status";
-}
-.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical {
-  flex-wrap: wrap;
-}
-.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-forms-field-block__label > .dnb-form-label {
-  margin-bottom: 0.5rem;
-}
-@media screen and (max-width: 40em) {
-  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-forms-field-block__label > .dnb-form-label {
-    margin-bottom: 0.5rem;
-  }
-}
-@media screen and (min-width: 40.00625em) {
-  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal {
-    grid-template-columns: minmax(var(--dnb-forms-field-block-layout-width-min, min-content), var(--dnb-forms-field-block-layout-width-max, max-content)) auto;
-    grid-template-areas: "label contents" ". status";
-  }
-  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-forms-field-block__label > .dnb-form-label {
-    margin-top: var(--label-margin);
-    margin-bottom: var(--label-margin);
-  }
-  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents {
-    align-self: end;
-  }
+  grid-template-areas: "label" "help" "contents" "indicator" "status";
 }
 .dnb-forms-field-block--label-height-small {
   --label-margin: 0;
@@ -14091,16 +14428,76 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
     width: var(--forms-field-width--large);
   }
 }
-.dnb-forms-field-block__label {
+.dnb-forms-field-block:not([class*="--content-width"]) {
+  --max-width: 60ch;
+}
+.dnb-forms-field-block__label, .dnb-forms-field-block__label.dnb-form-label {
   grid-area: label;
   display: flex;
-  flex-flow: row;
-  justify-content: space-between;
+  max-width: var(--max-width);
   align-items: center;
+  margin-right: 0;
 }
-.dnb-forms-field-block__label-description {
+.dnb-forms-field-block__label__description, .dnb-forms-field-block__label.dnb-form-label__description {
   margin-left: 0.3em;
 }
+.dnb-forms-field-block__label__content:has(+ .dnb-help-button), .dnb-forms-field-block__label__description:has(+ .dnb-help-button), .dnb-forms-field-block__label.dnb-form-label__content:has(+ .dnb-help-button), .dnb-forms-field-block__label.dnb-form-label__description:has(+ .dnb-help-button) {
+  margin-right: 0.5rem;
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical {
+  flex-wrap: wrap;
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-form-label {
+  margin-bottom: 0.5rem;
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label {
+  margin-right: 1rem;
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label {
+  margin-top: var(--label-margin);
+  margin-bottom: var(--label-margin);
+}
+@media screen and (max-width: 40em) {
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label {
+    margin-bottom: calc(var(--label-margin) + 0.5rem);
+  }
+}
+@media screen and (min-width: 40.00625em) {
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal {
+    grid-template-columns: minmax(var(--dnb-forms-field-block-layout-width-min, min-content), var(--dnb-forms-field-block-layout-width-max, max-content)) auto;
+    grid-template-areas: "label contents" ". help" ". indicator" ". status";
+  }
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content {
+    --help-button-indent-width: 0;
+  }
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content .dnb-section {
+    --rounded-corner: 0.25rem;
+    align-self: flex-start;
+  }
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents {
+    align-self: end;
+  }
+}
+.dnb-forms-field-block__indicator {
+  grid-area: indicator;
+}
+.dnb-forms-field-block__help {
+  grid-area: help;
+  display: flex;
+  flex-flow: column;
+}
+.dnb-forms-field-block__help .dnb-section {
+  margin-bottom: 1rem;
+}
+.dnb-forms-field-block__help .dnb-section > .dnb-p--lead {
+  margin-bottom: 0.5rem;
+}
+@media screen and (min-width: 40.00625em) {
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__help .dnb-section {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+  }
+}
 .dnb-forms-field-block__status {
   grid-area: status;
 }
@@ -14135,31 +14532,41 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
     width: var(--forms-field-width--large);
   }
 }
-.dnb-forms-field-block__contents__composition--vertical {
+.dnb-forms-field-block__composition--vertical .dnb-forms-field-block__contents {
   display: flex;
   flex-flow: column;
-  row-gap: var(--spacing-small);
+  row-gap: var(--spacing-x-small);
 }
-.dnb-forms-field-block__contents__composition--horizontal {
+.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
   display: flex;
   flex-flow: row;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
 @media screen and (min-width: 25.00625em) {
-  .dnb-forms-field-block__contents__composition--horizontal {
+  .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
     align-items: flex-end;
   }
-  .dnb-forms-field-block__contents__composition--horizontal[class*=align-center] {
+  .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents[class*=align-center] {
     align-items: center;
   }
 }
 @media screen and (max-width: 25em) {
-  .dnb-forms-field-block__contents__composition--horizontal {
+  .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
     row-gap: var(--spacing-x-small);
     flex-flow: column;
   }
 }
+@media screen and (max-width: 25em) {
+  .dnb-forms-field-block__composition > .dnb-forms-field-block__grid > .dnb-forms-submit-indicator {
+    display: none;
+  }
+}
+@media screen and (min-width: 25.00625em) {
+  .dnb-forms-field-block__composition > .dnb-forms-field-block__grid > .dnb-forms-field-block__contents .dnb-forms-submit-indicator {
+    display: none;
+  }
+}
 
 /*
  * Utilities
@@ -14171,17 +14578,15 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   gap: var(--spacing-small);
 }
 
-.dnb-card + .dnb-forms-button-row:not([class*=space__top]),
-.dnb-card + .dnb-button--primary:not([class*=space__top]) {
+.dnb-card + .dnb-forms-button-row:not([class*=space__top]), .dnb-card + .dnb-button--primary:not([class*=space__top]) {
   margin-top: var(--spacing-small);
 }
-.dnb-card + .dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top],
-.dnb-card + .dnb-button--primary:not([class*=space__top]) .dnb-button[class*=space__top] {
+.dnb-card + .dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top], .dnb-card + .dnb-button--primary:not([class*=space__top]) .dnb-button[class*=space__top] {
   margin-top: 0;
 }
+
 @media screen and (min-width: 40.00625em) {
-  .dnb-card + .dnb-forms-button-row:not([class*=space__left]),
-  .dnb-card + .dnb-button--primary:not([class*=space__left]) {
+  .dnb-card:not([style*="--outset"]) + .dnb-forms-button-row:not([class*=space__left]), .dnb-card:not([style*="--outset"]) + .dnb-button--primary:not([class*=space__left]) {
     margin-left: var(--spacing-medium);
   }
 }
@@ -14192,13 +14597,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-spacing .dnb-forms-main-heading.dnb-h--large:not([class*=space__]) {
   margin: 0;
 }
-@media screen and (min-width: 40.00625em) {
-  .dnb-forms-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__left]) {
-    margin-left: var(--spacing-medium);
-  }
-}
-.dnb-forms-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
-  margin-bottom: var(--spacing-small);
+
+.dnb-forms-main-heading + .dnb-help-button__content .dnb-section {
+  margin-top: 1rem;
 }
 
 .dnb-forms-section-block {
@@ -14214,6 +14615,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-section-block--variant-basic {
   --border-color: transparent;
 }
+.dnb-forms-section-block--variant-basic .dnb-card {
+  --card-outline-color: transparent;
+}
 .dnb-forms-section-block__inner {
   flex: 1;
   outline: none;
@@ -14253,6 +14657,10 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-bottom: var(--spacing-small);
 }
 
+.dnb-forms-sub-heading + .dnb-help-button__content .dnb-section {
+  margin-top: 1rem;
+}
+
 /*
  * Utilities
  */
@@ -14453,8 +14861,8 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
 .dnb-forms-wizard-layout {
   display: flex;
   flex-flow: row wrap;
-  -moz-column-gap: var(--spacing-medium);
-       column-gap: var(--spacing-medium);
+  -moz-column-gap: var(--spacing-x-large);
+       column-gap: var(--spacing-x-large);
 }
 .dnb-forms-wizard-layout--drawer {
   flex-direction: column;
@@ -14596,7 +15004,7 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
   background-color: var(--sb-color-gray-light);
 }
 
-.dnb-forms-field-block__label-description {
+.dnb-forms-field-block__label__description {
   color: var(--sb-color-gray-dark);
   font-size: var(--font-size-small);
 }