@dnb/eufemia 9.32.1 → 9.34.0

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * ATTENTION: This file is auto generated by using "styleFactory".
  * Do not change the content!
@@ -35,7 +36,14 @@
   /* stylelint-disable-next-line  */ }
   .dnb-drawer-list__portal__style {
     position: absolute;
+    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0, 1);
+    transition: all 300ms cubic-bezier(0.42, 0, 0, 1);
+    -webkit-transition: all 300ms var(--easing-default);
+    transition: all 300ms var(--easing-default);
     z-index: 3200; }
+    html[data-visual-test] .dnb-drawer-list__portal__style {
+      -webkit-animation-duration: 1ms !important;
+              animation-duration: 1ms !important; }
     .dnb-drawer-list__portal__style--fixed {
       position: fixed; }
   .dnb-drawer-list__root {
@@ -89,6 +97,10 @@
   .dnb-drawer-list--scroll .dnb-drawer-list__options {
     min-height: 2rem;
     max-height: 70vh;
+    -webkit-transition: max-height 300ms cubic-bezier(0.42, 0, 0, 1);
+    transition: max-height 300ms cubic-bezier(0.42, 0, 0, 1);
+    -webkit-transition: max-height 300ms var(--easing-default);
+    transition: max-height 300ms var(--easing-default);
     overflow-y: auto;
     -ms-scroll-chaining: none;
         overscroll-behavior: contain;
@@ -101,6 +113,10 @@
       scroll-behavior: smooth; }
     html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options {
       scroll-behavior: auto !important; }
+  html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options,
+  .dnb-drawer-list--scroll.dnb-drawer-list--no-animation .dnb-drawer-list__options {
+    -webkit-animation-duration: 1ms !important;
+            animation-duration: 1ms !important; }
   .dnb-drawer-list--opened .dnb-drawer-list__options {
     scroll-behavior: smooth; }
   .dnb-drawer-list--no-scroll-animation .dnb-drawer-list__options {
@@ -560,7 +576,7 @@
 :root {
   --accordion-border-width: 0.0625rem;
   --accordion-border-radius: 0.25rem;
-  --accordion-easing: cubic-bezier(0.42, 0, 0, 1); }
+  --accordion-easing: var(--easing-default); }
 
 .dnb-accordion {
   position: relative;
@@ -674,10 +690,6 @@
       margin-top: 0.25rem; }
     .dnb-accordion__header__description + .dnb-accordion__header__title {
       margin-top: 0.25rem; }
-  .dnb-accordion--no-animation .dnb-accordion__header__icon,
-  html[data-visual-test] .dnb-accordion__header__icon {
-    -webkit-transition-duration: 1ms !important;
-            transition-duration: 1ms !important; }
   .dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__icon {
     -webkit-transform: rotate(-180deg);
             transform: rotate(-180deg); }
@@ -685,25 +697,17 @@
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    opacity: 1;
-    visibility: visible;
     width: 100%;
     will-change: height;
     -webkit-transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 600ms cubic-bezier(0.42, 0, 0, 1);
     transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 600ms cubic-bezier(0.42, 0, 0, 1);
     -webkit-transition: height 400ms var(--accordion-easing), opacity 600ms var(--accordion-easing);
     transition: height 400ms var(--accordion-easing), opacity 600ms var(--accordion-easing); }
-    .dnb-accordion__content--hidden {
-      visibility: hidden;
-      height: 0;
-      opacity: 0; }
-    .dnb-accordion__content--is-animating {
-      overflow: hidden; }
     .dnb-accordion__content__inner {
       width: 100%;
       margin-top: 1rem; }
-      .dnb-accordion__content__inner--remove-content {
-        display: none; }
+    .dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner {
+      display: none; }
   .dnb-accordion-group--single-container {
     -webkit-transition: min-height 1s cubic-bezier(0.42, 0, 0, 1);
     transition: min-height 1s cubic-bezier(0.42, 0, 0, 1);
@@ -727,10 +731,6 @@
     .dnb-accordion-group--single-container .dnb-accordion > .dnb-accordion__header .dnb-accordion__header__icon {
       -webkit-transform: rotate(-90deg);
               transform: rotate(-90deg); } }
-  .dnb-accordion--no-animation .dnb-accordion__content,
-  html[data-visual-test] .dnb-accordion__content {
-    -webkit-transition-duration: 1ms !important;
-            transition-duration: 1ms !important; }
   .dnb-accordion-group--single-container .dnb-accordion-group__children {
     max-width: 60rem; }
     @media screen and (min-width: 40em) {
@@ -749,6 +749,10 @@
           top: 0;
           right: 0;
           width: 60%; } }
+  .dnb-accordion > .dnb-accordion__header--no-animation .dnb-accordion__header__icon,
+  html[data-visual-test] .dnb-accordion > .dnb-accordion__header--no-animation .dnb-accordion__header__icon {
+    -webkit-transition-duration: 1ms !important;
+            transition-duration: 1ms !important; }
 
 /*
 * Autocomplete component
@@ -784,9 +788,6 @@
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    -webkit-box-align: start;
-        -ms-flex-align: start;
-            align-items: flex-start;
     margin: 0;
     padding: 0;
     width: auto;
@@ -1345,7 +1346,9 @@
             flex-direction: column;
     overflow: hidden;
     -webkit-transition: height 400ms cubic-bezier(0.42, 0, 0, 1);
-    transition: height 400ms cubic-bezier(0.42, 0, 0, 1); }
+    transition: height 400ms cubic-bezier(0.42, 0, 0, 1);
+    -webkit-transition: height 400ms var(--easing-default);
+    transition: height 400ms var(--easing-default); }
   .dnb-breadcrumb__animation .dnb-breadcrumb__item {
     -webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0, 1) calc(var(--delay)*50ms);
     -webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0, 1) calc(var(--delay) * 50ms);
@@ -1355,6 +1358,14 @@
     transition: transform 400ms cubic-bezier(0.42, 0, 0, 1) calc(var(--delay) * 50ms);
     transition: transform 400ms cubic-bezier(0.42, 0, 0, 1) calc(var(--delay)*50ms), -webkit-transform 400ms cubic-bezier(0.42, 0, 0, 1) calc(var(--delay)*50ms);
     transition: transform 400ms cubic-bezier(0.42, 0, 0, 1) calc(var(--delay) * 50ms), -webkit-transform 400ms cubic-bezier(0.42, 0, 0, 1) calc(var(--delay) * 50ms);
+    -webkit-transition: -webkit-transform 400ms var(--easing-default) calc(var(--delay)*50ms);
+    -webkit-transition: -webkit-transform 400ms var(--easing-default) calc(var(--delay) * 50ms);
+    transition: -webkit-transform 400ms var(--easing-default) calc(var(--delay)*50ms);
+    transition: -webkit-transform 400ms var(--easing-default) calc(var(--delay) * 50ms);
+    transition: transform 400ms var(--easing-default) calc(var(--delay)*50ms);
+    transition: transform 400ms var(--easing-default) calc(var(--delay) * 50ms);
+    transition: transform 400ms var(--easing-default) calc(var(--delay)*50ms), -webkit-transform 400ms var(--easing-default) calc(var(--delay)*50ms);
+    transition: transform 400ms var(--easing-default) calc(var(--delay) * 50ms), -webkit-transform 400ms var(--easing-default) calc(var(--delay) * 50ms);
     -webkit-transform: translateX(-1rem);
             transform: translateX(-1rem); }
   .dnb-breadcrumb__animation.dnb-height-animation--parallax .dnb-breadcrumb__item {
@@ -2832,33 +2843,18 @@ button.dnb-button::-moz-focus-inner {
         -ms-flex-direction: column;
             flex-direction: column;
     z-index: 10;
-    /** Sets the color on scroll overflow (at the bottom) */
-    background-color: transparent;
-    background-color: var(--modal-background-color, transparent);
+    /** 
+      NB: Do not use "overflow-x: hidden;" in here,
+      (overflowing one direction, will influence the other – we can't just have one at a time) 
+      To make the Drawer scroll, we use .dnb-scroll-view
+    */
     width: 100%;
     height: 100%;
-    overflow-x: hidden; }
-  .dnb-drawer--spacing .dnb-drawer__inner {
-    padding: 0 2rem 0;
-    padding: 0 var(--drawer-spacing) 0; }
-    @media screen and (min-width: 72em) {
-      .dnb-drawer--spacing .dnb-drawer__inner {
-        padding: 0 3.5rem 0;
-        padding: 0 calc(2rem * 1.75) 0;
-        padding: 0 calc(var(--drawer-spacing)*1.75) 0;
-        padding: 0 calc(var(--drawer-spacing) * 1.75) 0; } }
-    @media screen and (max-width: 50em) {
-      .dnb-drawer--spacing .dnb-drawer__inner {
-        padding: 0 1.5rem 0;
-        padding: 0 calc(2rem / 1.333333) 0;
-        padding: 0 calc(var(--drawer-spacing)/1.33333) 0;
-        padding: 0 calc(var(--drawer-spacing) / 1.333333) 0; } }
-    @media screen and (max-width: 40em) {
-      .dnb-drawer--spacing .dnb-drawer__inner {
-        padding: 0 1rem 0;
-        padding: 0 calc(2rem / 2) 0;
-        padding: 0 calc(var(--drawer-spacing)/2) 0;
-        padding: 0 calc(var(--drawer-spacing) / 2) 0; } }
+    height: calc(100% - 0);
+    height: calc(100% - var(--header-height, 0));
+    /** Sets the color on scroll overflow (at the bottom) */
+    background-color: transparent;
+    background-color: var(--modal-background-color, transparent); }
   .dnb-drawer__align--centered .dnb-drawer__inner {
     -webkit-box-align: center;
         -ms-flex-align: center;
@@ -2868,22 +2864,28 @@ button.dnb-button::-moz-focus-inner {
             justify-content: center; }
   .dnb-drawer__content {
     position: relative;
-    z-index: 1;
-    padding-bottom: 4rem;
-    padding-bottom: calc(2rem * 2);
-    padding-bottom: calc(var(--drawer-spacing)*2);
-    padding-bottom: calc(var(--drawer-spacing) * 2); }
+    z-index: 1; }
   .dnb-drawer--spacing .dnb-drawer__content {
-    padding-bottom: 4rem;
-    padding-bottom: calc(2rem * 2);
-    padding-bottom: calc(var(--drawer-spacing)*2);
-    padding-bottom: calc(var(--drawer-spacing) * 2); }
-    @supports (-webkit-touch-callout: none) {
+    padding: 0 2rem;
+    padding: 0 var(--drawer-spacing); }
+    @media screen and (min-width: 72em) {
+      .dnb-drawer--spacing .dnb-drawer__content {
+        padding: 0 3.5rem;
+        padding: 0 calc(2rem * 1.75);
+        padding: 0 calc(var(--drawer-spacing)*1.75);
+        padding: 0 calc(var(--drawer-spacing) * 1.75); } }
+    @media screen and (max-width: 50em) {
       .dnb-drawer--spacing .dnb-drawer__content {
-        padding-bottom: 16rem;
-        padding-bottom: calc(2rem * 8);
-        padding-bottom: calc(var(--drawer-spacing)*8);
-        padding-bottom: calc(var(--drawer-spacing) * 8); } }
+        padding: 0 1.5rem;
+        padding: 0 calc(2rem / 1.333333);
+        padding: 0 calc(var(--drawer-spacing)/1.33333);
+        padding: 0 calc(var(--drawer-spacing) / 1.333333); } }
+    @media screen and (max-width: 40em) {
+      .dnb-drawer--spacing .dnb-drawer__content {
+        padding: 0 1rem;
+        padding: 0 calc(2rem / 2);
+        padding: 0 calc(var(--drawer-spacing)/2);
+        padding: 0 calc(var(--drawer-spacing) / 2); } }
   .dnb-drawer__align--center .dnb-drawer__content {
     -webkit-box-align: center;
         -ms-flex-align: center;
@@ -2986,9 +2988,30 @@ button.dnb-button::-moz-focus-inner {
   .dnb-drawer .dnb-drawer__header::after {
     top: -500%;
     height: 600%; }
-  .dnb-drawer--spacing .dnb-drawer__header .dnb-tabs {
-    margin-top: 2rem;
-    margin-top: var(--drawer-spacing); }
+  .dnb-drawer--spacing .dnb-drawer__header {
+    padding: 0 2rem;
+    padding: 0 var(--drawer-spacing); }
+    @media screen and (min-width: 72em) {
+      .dnb-drawer--spacing .dnb-drawer__header {
+        padding: 0 3.5rem;
+        padding: 0 calc(2rem * 1.75);
+        padding: 0 calc(var(--drawer-spacing)*1.75);
+        padding: 0 calc(var(--drawer-spacing) * 1.75); } }
+    @media screen and (max-width: 50em) {
+      .dnb-drawer--spacing .dnb-drawer__header {
+        padding: 0 1.5rem;
+        padding: 0 calc(2rem / 1.333333);
+        padding: 0 calc(var(--drawer-spacing)/1.33333);
+        padding: 0 calc(var(--drawer-spacing) / 1.333333); } }
+    @media screen and (max-width: 40em) {
+      .dnb-drawer--spacing .dnb-drawer__header {
+        padding: 0 1rem;
+        padding: 0 calc(2rem / 2);
+        padding: 0 calc(var(--drawer-spacing)/2);
+        padding: 0 calc(var(--drawer-spacing) / 2); } }
+    .dnb-drawer--spacing .dnb-drawer__header .dnb-tabs {
+      margin-top: 2rem;
+      margin-top: var(--drawer-spacing); }
   .dnb-drawer__body {
     padding-bottom: 4rem;
     padding-bottom: calc(2rem * 2);
@@ -3019,12 +3042,28 @@ button.dnb-button::-moz-focus-inner {
     position: sticky;
     top: 0;
     z-index: 99;
-    margin: 2rem -2rem;
-    margin: 2rem calc(2rem * -1);
-    margin: var(--drawer-spacing) calc(var(--drawer-spacing)*-1);
-    margin: var(--drawer-spacing) calc(var(--drawer-spacing) * -1);
+    margin: 2rem 0;
+    margin: var(--drawer-spacing) 0;
     padding: 0 2rem;
     padding: 0 var(--drawer-spacing); }
+    @media screen and (min-width: 72em) {
+      .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
+        padding: 0 3.5rem;
+        padding: 0 calc(2rem * 1.75);
+        padding: 0 calc(var(--drawer-spacing)*1.75);
+        padding: 0 calc(var(--drawer-spacing) * 1.75); } }
+    @media screen and (max-width: 50em) {
+      .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
+        padding: 0 1.5rem;
+        padding: 0 calc(2rem / 1.333333);
+        padding: 0 calc(var(--drawer-spacing)/1.33333);
+        padding: 0 calc(var(--drawer-spacing) / 1.333333); } }
+    @media screen and (max-width: 40em) {
+      .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
+        padding: 0 1rem;
+        padding: 0 calc(2rem / 2);
+        padding: 0 calc(var(--drawer-spacing)/2);
+        padding: 0 calc(var(--drawer-spacing) / 2); } }
   .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section.dnb-drawer__navigation--sticky {
     z-index: 2999; }
   .dnb-drawer .dnb-drawer__navigation--sticky::before {
@@ -3085,9 +3124,6 @@ button.dnb-button::-moz-focus-inner {
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    -webkit-box-align: start;
-        -ms-flex-align: start;
-            align-items: flex-start;
     margin: 0;
     padding: 0;
     width: auto;
@@ -3568,7 +3604,9 @@ legend.dnb-form-label {
   display: flex;
   opacity: 1;
   -webkit-transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1);
-  transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1); }
+  transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1);
+  -webkit-transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
+  transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); }
   .dnb-form-status--hidden {
     will-change: height, opacity, margin, padding;
     width: 0;
@@ -3729,7 +3767,7 @@ legend.dnb-form-label {
  *
  */
 :root {
-  --global-status-easing: cubic-bezier(0.42, 0, 0, 1); }
+  --global-status-easing: var(--easing-default); }
 
 .dnb-global-status.dnb-section {
   display: block; }
@@ -3868,6 +3906,8 @@ html[data-visual-test] .dnb-global-status__shell {
   transition: height var(--duration, 400ms) var(--easing-default); }
   .dnb-height-animation--animating {
     overflow: hidden; }
+  .dnb-height-animation--show-overflow {
+    overflow: visible; }
 
 /*
  * HelpButton component
@@ -5671,7 +5711,11 @@ html[data-dnb-modal-active] {
     -webkit-transition: left 250ms cubic-bezier(0.42, 0, 0, 1), top 250ms cubic-bezier(0.42, 0, 0, 1), bottom 250ms cubic-bezier(0.42, 0, 0, 1), right 250ms cubic-bezier(0.42, 0, 0, 1), -webkit-box-shadow 250ms cubic-bezier(0.42, 0, 0, 1);
     transition: left 250ms cubic-bezier(0.42, 0, 0, 1), top 250ms cubic-bezier(0.42, 0, 0, 1), bottom 250ms cubic-bezier(0.42, 0, 0, 1), right 250ms cubic-bezier(0.42, 0, 0, 1), -webkit-box-shadow 250ms cubic-bezier(0.42, 0, 0, 1);
     transition: left 250ms cubic-bezier(0.42, 0, 0, 1), top 250ms cubic-bezier(0.42, 0, 0, 1), bottom 250ms cubic-bezier(0.42, 0, 0, 1), right 250ms cubic-bezier(0.42, 0, 0, 1), box-shadow 250ms cubic-bezier(0.42, 0, 0, 1);
-    transition: left 250ms cubic-bezier(0.42, 0, 0, 1), top 250ms cubic-bezier(0.42, 0, 0, 1), bottom 250ms cubic-bezier(0.42, 0, 0, 1), right 250ms cubic-bezier(0.42, 0, 0, 1), box-shadow 250ms cubic-bezier(0.42, 0, 0, 1), -webkit-box-shadow 250ms cubic-bezier(0.42, 0, 0, 1); }
+    transition: left 250ms cubic-bezier(0.42, 0, 0, 1), top 250ms cubic-bezier(0.42, 0, 0, 1), bottom 250ms cubic-bezier(0.42, 0, 0, 1), right 250ms cubic-bezier(0.42, 0, 0, 1), box-shadow 250ms cubic-bezier(0.42, 0, 0, 1), -webkit-box-shadow 250ms cubic-bezier(0.42, 0, 0, 1);
+    -webkit-transition: left 250ms var(--easing-default), top 250ms var(--easing-default), bottom 250ms var(--easing-default), right 250ms var(--easing-default), -webkit-box-shadow 250ms var(--easing-default);
+    transition: left 250ms var(--easing-default), top 250ms var(--easing-default), bottom 250ms var(--easing-default), right 250ms var(--easing-default), -webkit-box-shadow 250ms var(--easing-default);
+    transition: left 250ms var(--easing-default), top 250ms var(--easing-default), bottom 250ms var(--easing-default), right 250ms var(--easing-default), box-shadow 250ms var(--easing-default);
+    transition: left 250ms var(--easing-default), top 250ms var(--easing-default), bottom 250ms var(--easing-default), right 250ms var(--easing-default), box-shadow 250ms var(--easing-default), -webkit-box-shadow 250ms var(--easing-default); }
   .dnb-slider__state--disabled .dnb-slider__track,
   .dnb-slider__state--disabled .dnb-slider__thumb,
   .dnb-slider__state--disabled .dnb-slider__line {
@@ -6853,7 +6897,9 @@ span.dnb-space--no-collapse > span {
   border-radius: 0.25rem;
   will-change: height;
   -webkit-transition: height 400ms cubic-bezier(0.42, 0, 0, 1);
-  transition: height 400ms cubic-bezier(0.42, 0, 0, 1); }
+  transition: height 400ms cubic-bezier(0.42, 0, 0, 1);
+  -webkit-transition: height 400ms var(--easing-default);
+  transition: height 400ms var(--easing-default); }
   .dnb-step-indicator-v2 .dnb-step-indicator__trigger__button .dnb-button__text,
   .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button .dnb-button__text {
     text-align: left; }
@@ -7473,7 +7519,9 @@ span.dnb-space--no-collapse > span {
     padding: 0 1rem 0 1.5rem;
     will-change: padding;
     -webkit-transition: padding 1s cubic-bezier(0.42, 0, 0, 1);
-    transition: padding 1s cubic-bezier(0.42, 0, 0, 1); }
+    transition: padding 1s cubic-bezier(0.42, 0, 0, 1);
+    -webkit-transition: padding 1s var(--easing-default);
+    transition: padding 1s var(--easing-default); }
     @media screen and (max-width: 40em) {
       .dnb-tabs__button__snap {
         padding: 0 1rem; } }
@@ -8531,12 +8579,16 @@ span.dnb-space--no-collapse > span {
   opacity: 0;
   visibility: hidden;
   -webkit-transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
-  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+  -webkit-transition: opacity 200ms var(--easing-default);
+  transition: opacity 200ms var(--easing-default); }
   .dnb-tooltip--large {
     padding: 0.25rem 1rem; }
   .dnb-tooltip--animate_position {
     -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1);
-    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+    -webkit-transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default);
+    transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); }
   .dnb-tooltip--active {
     visibility: visible;
     /*
@@ -8544,14 +8596,20 @@ span.dnb-space--no-collapse > span {
       also, use forwards because of the usage of visibility
     */
     -webkit-animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: show-tooltip 200ms var(--easing-default) forwards;
+            animation: show-tooltip 200ms var(--easing-default) forwards; }
   html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
     -webkit-animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: show-tooltip 1ms var(--easing-default) forwards;
+            animation: show-tooltip 1ms var(--easing-default) forwards; }
   .dnb-tooltip--hide {
     visibility: visible;
     -webkit-animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: hide-tooltip 200ms var(--easing-default) forwards;
+            animation: hide-tooltip 200ms var(--easing-default) forwards; }
   .dnb-tooltip--hide.dnb-tooltip--no-animation {
     -webkit-animation: hide-tooltip 1ms linear forwards;
             animation: hide-tooltip 1ms linear forwards; }
@@ -8634,6 +8692,104 @@ span.dnb-space--no-collapse > span {
     opacity: 0;
     visibility: hidden; } }
 
+/*
+* Upload component
+*
+*/
+.dnb-upload {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  position: relative;
+  padding: 1.5rem;
+  padding: var(--spacing-medium);
+  background-color: #fff;
+  background-color: var(--color-white); }
+  @media screen and (max-width: 40em) {
+    .dnb-upload {
+      padding: 1.5rem 1rem;
+      padding: var(--spacing-medium) var(--spacing-small); } }
+  .dnb-upload__outline {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    inset: 0;
+    height: 100%;
+    width: 100%; }
+  .dnb-upload__file-input {
+    position: absolute;
+    visibility: hidden; }
+  .dnb-upload__file-list {
+    position: relative;
+    padding: 0;
+    margin-top: 1.5rem;
+    margin-top: var(--spacing-medium);
+    margin-bottom: 0;
+    list-style: none; }
+  .dnb-upload__file-list::before, .dnb-upload__file-cell::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    inset: 0;
+    height: 1px;
+    background-color: #ebebeb;
+    background-color: var(--color-black-8); }
+  .dnb-upload__file-cell {
+    position: relative;
+    padding: 1rem 0;
+    padding: var(--spacing-small) 0; }
+    .dnb-upload__file-cell::after {
+      top: auto; }
+    .dnb-upload__file-cell__content {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: row;
+              flex-direction: row;
+      -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+              justify-content: space-between;
+      -webkit-box-align: center;
+          -ms-flex-align: center;
+              align-items: center; }
+      .dnb-upload__file-cell__content__left {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: row;
+                flex-direction: row;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center; }
+    .dnb-upload__file-cell__text-container {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+              flex-direction: column;
+      margin-left: 1rem;
+      margin-left: var(--spacing-small); }
+      .dnb-upload__file-cell__text-container--loading {
+        font-size: 1.125rem;
+        font-size: var(--font-size-basis); }
+
 /*
 * VisuallyHidden component
 *