@dnb/eufemia 10.0.0-beta.3 → 10.0.0-beta.5

package/components/button/style/themes/dnb-button-theme-sbanken.scss

@@ -3,7 +3,12 @@
 *
 */
 
-@import './dnb-button-theme-ui.scss';
+@import '../../../../style/core/utilities.scss';
+@import './button-mixins.scss';
+
+// Because the tertiary button has so much code,
+// we slice the shareable parts out in a separate file
+@import '../dnb-button--tertiary.scss';
 
 %focus {
   @include buttonFocus(
@@ -12,52 +17,201 @@
   );
 }
 
-.dnb-button--primary {
-  color: var(--sb-color-green);
-  background-color: var(--sb-color-purple-alternative);
+.dnb-button {
+  border: none;
 
-  @include hover() {
-    color: var(--sb-color-green);
-    background-color: var(--sb-color-purple);
-    @include removeFocusRing();
+  &#{&}--has-text#{&}--size-large {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    &.dnb-button--icon-position-right {
+      padding-right: 0.5rem;
+    }
+    &.dnb-button--icon-position-left {
+      padding-left: 0.5rem;
+    }
   }
 
-  @include active() {
+  &--primary {
     color: var(--sb-color-green);
     background-color: var(--sb-color-purple-alternative);
-  }
 
-  @extend %focus;
+    @include hover() {
+      color: var(--sb-color-green);
+      background-color: var(--sb-color-purple);
+      @include removeFocusRing();
+    }
 
-  &[disabled] {
-    color: var(--sb-color-gray-dark-2);
-    background-color: var(--sb-color-gray-light);
-    @include removeFocusRing();
-  }
-}
+    @include active() {
+      color: var(--sb-color-green);
+      background-color: var(--sb-color-purple-alternative);
+    }
 
-.dnb-button--secondary {
-  color: var(--sb-color-purple-alternative);
-  background-color: var(--sb-color-white);
-  @include fakeBorder(var(--sb-color-purple-alternative));
+    @extend %focus;
 
-  @include hover() {
-    color: var(--sb-color-purple-alternative);
-    background-color: var(--sb-color-green-light-2);
-    @include fakeBorder(var(--sb-color-purple-alternative));
+    &[disabled] {
+      color: var(--sb-color-gray-dark-2);
+      background-color: var(--sb-color-gray-light);
+      @include removeFocusRing();
+    }
+    
+    &:not([disabled]).dnb-button__status--error {
+      color: var(--sb-color-white);
+      background-color: var(--sb-color-red);
+    }
   }
 
-  @include active() {
+  &--secondary {
     color: var(--sb-color-purple-alternative);
     background-color: var(--sb-color-white);
-    @include fakeBorder(var(--sb-color-purple-alternative));
+    @include fakeBorder(var(--sb-color-purple-alternative), null, inset);
+
+    @include hover() {
+      color: var(--sb-color-purple-alternative);
+      background-color: var(--sb-color-green-light-2);
+      @include fakeBorder(var(--sb-color-purple-alternative), null, inset);
+    }
+
+    @include active() {
+      color: var(--sb-color-purple-alternative);
+      background-color: var(--sb-color-white);
+      @include fakeBorder(var(--sb-color-purple-alternative), null, inset);
+    }
+
+    @extend %focus;
+
+    &[disabled] {
+      color: var(--sb-color-gray-dark);
+      background-color: var(--sb-color-white);
+      @include fakeBorder(var(--sb-color-gray-light), null, inset);
+    }
+
+    &:not([disabled]).dnb-button__status--error {
+      color: var(--sb-color-red);
+      background-color: var(--sb-color-white);
+      @include fakeBorder(var(--sb-color-red), null, inset);
+      
+      @include hover() {
+        color: var(--sb-color-red);
+        background-color: var(--sb-color-magenta-light-3);
+        @include fakeBorder(var(--sb-color-red), null, inset);
+      }
+    }
   }
 
-  @extend %focus;
+  &--tertiary {
+    $tertiary-padding: 0.5rem;
+    $tertiary-padding-large: 1.5rem;
+    $tertiary-icon-space: 0.5rem;
 
-  &[disabled] {
-    color: var(--sb-color-gray-dark);
-    background-color: var(--sb-color-white);
-    @include fakeBorder(var(--sb-color-gray-light));
+    color: var(--sb-color-violet);
+    background-color: transparent;
+
+    .dnb-button__text::after {
+      height: 0.0625rem;
+      bottom: -0.5rem;
+      left: -$tertiary-padding;
+      right: -$tertiary-padding;
+    }
+
+    &.dnb-button--size-large {
+      .dnb-button__text::after {
+        bottom: -0.75rem;
+        left: -$tertiary-padding-large;
+        right: -$tertiary-padding-large;
+      }
+    }
+
+    &.dnb-button--icon-position-top {
+      .dnb-button__text {
+        font-size: var(--font-size-x-small);
+      }
+      &.dnb-button--size-large {
+        .dnb-button__text {
+          font-size: var(--font-size-small);
+        }
+      }
+    }
+
+    &.dnb-button--has-text {
+      padding-left: $tertiary-padding;
+      padding-right: $tertiary-padding;
+
+      &.dnb-button--has-icon {
+        &.dnb-button--icon-position-left {
+          .dnb-button__text::after {
+            left: -($tertiary-padding + $tertiary-icon-space);
+          }
+        }
+        &.dnb-button--icon-position-right {
+          .dnb-button__text::after {
+            right: -($tertiary-padding + $tertiary-icon-space);
+          }
+        }
+        &.dnb-button--icon-position-top {
+          padding-left: $tertiary-padding;
+          padding-right: $tertiary-padding;
+          .dnb-button__text {
+            margin-bottom: 0.5rem;
+            font-size: var(--button-font-size);
+            &::after {
+              left: -$tertiary-padding;
+              right: -$tertiary-padding;
+            }
+          }
+        }
+      }
+
+      &.dnb-button--size-large {
+        padding-left: $tertiary-padding-large;
+        padding-right: $tertiary-padding-large;
+        
+        &.dnb-button--has-icon {
+          &.dnb-button--icon-position-left {
+            padding-left: $tertiary-padding-large - $tertiary-icon-space;
+            .dnb-button__text::after {
+              left: -$tertiary-padding-large ;
+            }            
+          }
+          &.dnb-button--icon-position-right {
+            padding-right: $tertiary-padding-large - $tertiary-icon-space;
+            .dnb-button__text::after {
+              right: -$tertiary-padding-large;
+            }
+          }
+          &.dnb-button--icon-position-top {
+            padding-left: $tertiary-padding-large;
+            padding-right: $tertiary-padding-large;
+            .dnb-button__text {
+              margin-top: 0.25rem;
+              margin-bottom: 0.75rem;
+              font-size: var(--button-font-size);
+              &::after {
+                left: -$tertiary-padding-large;
+                right: -$tertiary-padding-large;
+              }
+            }  
+          }
+        }
+      }
+    }
+
+    @include hover() {
+      // underline
+      .dnb-button__text::after {
+        color: var(--sb-color-violet);
+        transition: none;
+      }
+    }
+
+    @include active() {
+      // underline
+      .dnb-button__text::after {
+          color: var(--sb-color-violet);
+      }
+    }
+
+    &[disabled] {
+      color: var(--sb-color-gray-dark);
+    }
   }
-}
+}

package/components/button/style/themes/dnb-button-theme-ui.css

@@ -41,14 +41,6 @@
 .dnb-skeleton .dnb-button--tertiary .dnb-button__text::after {
   content: none;
 }
-.dnb-button--tertiary.dnb-button--has-text {
-  padding-left: 0;
-  padding-right: 0;
-}
-.dnb-button--tertiary.dnb-button--has-icon .dnb-button__text::after {
-  left: -1rem;
-  right: -1rem;
-}
 .dnb-button--tertiary:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled] {
   cursor: not-allowed;
 }
@@ -148,7 +140,6 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text::after {
   left: -0.5rem;
-  right: 0;
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon {
   margin-right: -0.5rem;
@@ -176,7 +167,6 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
   padding-right: 1rem;
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text::after {
-  left: 0;
   right: -0.5rem;
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon {
@@ -373,6 +363,10 @@ html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):
   color: var(--color-sea-green);
   background-color: transparent;
 }
+.dnb-button--tertiary.dnb-button--has-text {
+  padding-left: 0;
+  padding-right: 0;
+}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled] {
   cursor: not-allowed;
 }

package/components/button/style/themes/dnb-button-theme-ui.min.css

@@ -1 +1 @@
-.dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentcolor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.dnb-button--tertiary.dnb-button--has-text{padding-left:0;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon .dnb-button__text:after{left:-1rem;right:-1rem}.dnb-button--tertiary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){box-shadow:none}.dnb-button--tertiary:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]):before,html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){box-shadow:none}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{opacity:1;transition:none;visibility:visible}html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{border-radius:.5rem;flex-direction:column;vertical-align:middle}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text{padding:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon{align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{margin-bottom:.25rem;margin-top:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text:after{left:0;right:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment{height:0;order:3}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text{padding-left:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text:after{left:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-left:0;margin-right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text{margin-left:1rem;padding-left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text:after{left:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before{right:-1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text{padding-right:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text:after{left:0;right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem;margin-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text{margin-right:1rem;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text:after{right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before{left:-1rem}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before{left:0;right:0}html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-button--primary{background-color:var(--color-sea-green);color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--primary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--primary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:focus[disabled]{cursor:not-allowed}.dnb-button--primary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--primary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:active[disabled]{cursor:not-allowed}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--primary[disabled]{background-color:var(--color-sea-green-30);color:var(--color-white)}.dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error{background-color:var(--color-fire-red);color:var(--color-white)}.dnb-button--secondary{--border-color:var(--color-sea-green);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--secondary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:focus[disabled]{cursor:not-allowed}.dnb-button--secondary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--secondary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:active[disabled]{cursor:not-allowed}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{--border-color:var(--color-sea-green-30);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green-30)}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{--border-color:var(--color-fire-red);--border-width:0.0625rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-fire-red)}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon{color:inherit}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--secondary:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--secondary:not(.dnb-button--has-text):active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--secondary:not(.dnb-button--has-text):not(.dnb-button--input-button).dnb-button--size-large{line-height:calc(var(--button-height--large) - .5rem);width:calc(var(--button-width--large) - .5rem)}.dnb-button--active{--border-color:var(--color-emerald-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--tertiary{background-color:transparent;color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{color:var(--color-emerald-green)}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{color:var(--color-emerald-green)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:var(--font-size-x-small)}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:var(--font-size-small)}.dnb-button--tertiary[disabled]{color:var(--color-sea-green-30)}.dnb-button--signal{background-color:var(--color-accent-yellow);color:var(--color-ocean-green)}html:not([data-whatintent=touch]) .dnb-button--signal:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--signal:hover:not([disabled]){--border-color:var(--color-ocean-green);--border-width:0.125rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active[disabled],html[data-whatintent=touch] .dnb-button--signal:active[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]),html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]){--border-color:var(--color-ocean-green);--border-width:0.125rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--signal:focus[disabled]{cursor:not-allowed}.dnb-button--signal:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal:active[disabled],html:not([data-whatintent=touch]) .dnb-button--signal:active[disabled]{cursor:not-allowed}.dnb-button--signal:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--signal:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal[disabled]{background-color:var(--color-accent-yellow-30);color:var(--color-black-20)}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]){background-color:transparent;box-shadow:none}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):after{background-color:currentcolor;bottom:0;content:"";left:0;position:absolute;top:0;width:.0625rem}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover{box-shadow:none;color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus:after,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover:after{background-color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):not(:active):hover{border-radius:0}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active{box-shadow:none;color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active:after{background-color:var(--color-mint-green-50)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled]{background-color:var(--color-black-3);color:var(--color-black-55)}
+.dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentcolor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.dnb-button--tertiary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){box-shadow:none}.dnb-button--tertiary:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]):before,html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){box-shadow:none}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{opacity:1;transition:none;visibility:visible}html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{border-radius:.5rem;flex-direction:column;vertical-align:middle}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text{padding:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon{align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{margin-bottom:.25rem;margin-top:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text:after{left:0;right:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment{height:0;order:3}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text{padding-left:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text:after{left:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-left:0;margin-right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text{margin-left:1rem;padding-left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text:after{left:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before{right:-1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text{padding-right:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text:after{right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem;margin-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text{margin-right:1rem;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text:after{right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before{left:-1rem}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before{left:0;right:0}html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-button--primary{background-color:var(--color-sea-green);color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--primary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--primary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:focus[disabled]{cursor:not-allowed}.dnb-button--primary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--primary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:active[disabled]{cursor:not-allowed}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--primary[disabled]{background-color:var(--color-sea-green-30);color:var(--color-white)}.dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error{background-color:var(--color-fire-red);color:var(--color-white)}.dnb-button--secondary{--border-color:var(--color-sea-green);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--secondary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:focus[disabled]{cursor:not-allowed}.dnb-button--secondary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--secondary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:active[disabled]{cursor:not-allowed}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{--border-color:var(--color-sea-green-30);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green-30)}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{--border-color:var(--color-fire-red);--border-width:0.0625rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-fire-red)}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon{color:inherit}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--secondary:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--secondary:not(.dnb-button--has-text):active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--secondary:not(.dnb-button--has-text):not(.dnb-button--input-button).dnb-button--size-large{line-height:calc(var(--button-height--large) - .5rem);width:calc(var(--button-width--large) - .5rem)}.dnb-button--active{--border-color:var(--color-emerald-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--tertiary{background-color:transparent;color:var(--color-sea-green)}.dnb-button--tertiary.dnb-button--has-text{padding-left:0;padding-right:0}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{color:var(--color-emerald-green)}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{color:var(--color-emerald-green)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:var(--font-size-x-small)}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:var(--font-size-small)}.dnb-button--tertiary[disabled]{color:var(--color-sea-green-30)}.dnb-button--signal{background-color:var(--color-accent-yellow);color:var(--color-ocean-green)}html:not([data-whatintent=touch]) .dnb-button--signal:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--signal:hover:not([disabled]){--border-color:var(--color-ocean-green);--border-width:0.125rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active[disabled],html[data-whatintent=touch] .dnb-button--signal:active[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]),html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]){--border-color:var(--color-ocean-green);--border-width:0.125rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--signal:focus[disabled]{cursor:not-allowed}.dnb-button--signal:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal:active[disabled],html:not([data-whatintent=touch]) .dnb-button--signal:active[disabled]{cursor:not-allowed}.dnb-button--signal:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--signal:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal[disabled]{background-color:var(--color-accent-yellow-30);color:var(--color-black-20)}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]){background-color:transparent;box-shadow:none}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):after{background-color:currentcolor;bottom:0;content:"";left:0;position:absolute;top:0;width:.0625rem}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover{box-shadow:none;color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus:after,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover:after{background-color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):not(:active):hover{border-radius:0}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active{box-shadow:none;color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active:after{background-color:var(--color-mint-green-50)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled]{background-color:var(--color-black-3);color:var(--color-black-55)}

package/components/button/style/themes/dnb-button-theme-ui.scss

@@ -92,6 +92,11 @@
     color: var(--color-sea-green);
     background-color: transparent;
 
+    &.dnb-button--has-text {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
     @include hover() {
       // underline
       .dnb-button__text::after {

package/components/date-picker/DatePicker.d.ts

@@ -260,12 +260,12 @@ export interface DatePickerProps
   on_days_render?: (...args: any[]) => any;
 
   /**
-   * Will be called on a date change event. Returns an `object`. See above.
+   * Will be called on a date change event. Returns an `object`. See Returned Object below.
    */
   on_change?: (...args: any[]) => any;
 
   /**
-   * Will be called on every input and date picker interaction. Returns an `object`. See above.
+   * Will be called on every input and date picker interaction. Returns an `object`. See Returned Object below.
    */
   on_type?: (...args: any[]) => any;
 

package/components/date-picker/DatePickerAddon.js

@@ -93,8 +93,7 @@ export default class DatePickerAddon extends React.PureComponent {
         onClick: event => this.setDate({
           shortcut,
           event
-        }),
-        right: true
+        })
       });
     }));
     return React.createElement("div", {

package/components/date-picker/style/dnb-date-picker.css

@@ -219,7 +219,11 @@ html[data-visual-test] .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-
   height: 1px;
 }
 .dnb-date-picker__addon {
-  display: block;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  grid-gap: 1rem;
+  gap: 1rem;
   padding: 1rem;
 }
 .dnb-date-picker__addon::after {

package/components/date-picker/style/dnb-date-picker.min.css

@@ -1 +1 @@
-.dnb-date-picker{--date-picker-input-height:2rem;--date-picker-day-width:2rem;--date-picker-day-horizontal-spacing:4px;align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-date-picker__inner{display:inline-flex;flex-direction:column;line-height:var(--date-picker-input-height)}.dnb-date-picker__row{display:inline-flex}.dnb-date-picker__shell{display:inline-flex;flex-direction:column;position:relative;top:0}.dnb-date-picker__input__wrapper{display:inline-flex;height:inherit;white-space:nowrap}.dnb-date-picker__container{display:block;left:-1rem;position:absolute;top:var(--date-picker-input-height);z-index:3}.dnb-date-picker--small .dnb-date-picker__container{top:1.5rem}.dnb-date-picker--medium .dnb-date-picker__container{top:2.5rem}.dnb-date-picker--large .dnb-date-picker__container{top:3rem}.dnb-date-picker--show-input .dnb-date-picker__container{left:0}.dnb-date-picker--right .dnb-date-picker__container{left:auto;right:-1rem}.dnb-date-picker--show-input.dnb-date-picker--right .dnb-date-picker__container{left:auto;right:0}.dnb-date-picker--opened .dnb-date-picker__container{z-index:100}.dnb-date-picker--opened .dnb-date-picker__container:not(.dnb-date-picker--opened .dnb-date-picker__container--no-animation){animation:date-picker-slide-down .2s ease-out 1 forwards}.dnb-date-picker--opened .dnb-date-picker__container--no-animation,html[data-visual-test] .dnb-date-picker--opened .dnb-date-picker__container{animation:date-picker-slide-down 1ms ease-out 1 forwards}.dnb-date-picker--hidden .dnb-date-picker__container{display:none}.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container:not(.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation){animation:date-picker-slide-up .15s ease-out 1 forwards}.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation,html[data-visual-test] .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container{animation:date-picker-slide-up 1ms ease-out 1 forwards}.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{background:transparent;border:none;display:inline-block;font-family:var(--font-family-monospace);margin:0;outline:none;overflow:visible;padding:0 .125rem;text-align:center;transform:translateY(0);white-space:nowrap;width:auto}@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{margin:0 -4px}}@supports (-ms-ime-align:auto){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{margin:0 -5px}}@supports (-webkit-touch-callout:none){.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin:0}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin:0 -4px}.dnb-core-style .dnb-date-picker__input:first-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type:not(:root),.dnb-date-picker__input:first-of-type:not(:root){margin-left:.8rem}.dnb-core-style .dnb-date-picker__input:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type:not(:root),.dnb-date-picker__input:last-of-type:not(:root){margin-right:2.2rem}}.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-core-style .dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-core-style .dnb-date-picker__input--small.dnb-date-picker__input--small,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small.dnb-date-picker__input--small,.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-date-picker__input--small.dnb-date-picker__input--small{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--small:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small:last-of-type:not(:root),.dnb-date-picker__input--small:last-of-type:not(:root){margin-right:2.2rem}.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-core-style .dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-core-style .dnb-date-picker__input--medium.dnb-date-picker__input--medium,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium.dnb-date-picker__input--medium,.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-date-picker__input--medium.dnb-date-picker__input--medium{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--medium:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium:last-of-type:not(:root),.dnb-date-picker__input--medium:last-of-type:not(:root){margin-right:3.2rem}.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-core-style .dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-core-style .dnb-date-picker__input--large.dnb-date-picker__input--large,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large.dnb-date-picker__input--large,.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-date-picker__input--large.dnb-date-picker__input--large{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--large:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large:last-of-type:not(:root),.dnb-date-picker__input--large:last-of-type:not(:root){margin-right:4rem}.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type,.dnb-date-picker__input:first-of-type{margin-left:.8rem}.dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type,.dnb-date-picker__input:last-of-type{margin-right:2.2rem}.dnb-date-picker .dnb-input__shell{display:none}.dnb-date-picker--show-input .dnb-input__shell{display:flex}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__status--error .dnb-input__shell{box-shadow:none}.dnb-input__submit-button button:focus~.dnb-date-picker__input__wrapper{display:block}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-element,.dnb-input__submit-element>.dnb-date-picker .dnb-input__submit-element{margin-left:0}.dnb-date-picker__views{display:flex;user-select:none;-webkit-user-select:none}@media screen and (max-width:60em){.dnb-date-picker__views{flex-direction:column}}.dnb-date-picker__calendar{padding:1rem;position:relative}.dnb-date-picker__calendar:after{bottom:0;content:"";height:1px;position:absolute;width:calc(100% - 2rem)}.dnb-date-picker:not(.dnb-date-picker--show-footer) .dnb-date-picker__calendar:after{content:none}.dnb-date-picker__header{height:2.5rem;line-height:var(--line-height-basis)}.dnb-date-picker__addon,.dnb-date-picker__header{display:flex;justify-content:space-between;padding-bottom:1rem;position:relative}.dnb-date-picker__addon:after,.dnb-date-picker__header:after{bottom:0;content:"";height:1px;position:absolute;width:100%}.dnb-date-picker__addon{display:block;padding:1rem}.dnb-date-picker__addon:after{left:1rem;width:calc(100% - 2rem)}.dnb-date-picker__footer{display:flex;justify-content:space-between;padding:1rem;position:relative}.dnb-date-picker__labels__day{padding-bottom:.5rem;padding-top:1.5rem}.dnb-date-picker__days,.dnb-date-picker__labels{display:flex;flex-wrap:wrap;list-style:none;margin:0;max-width:18rem;min-width:18rem;padding:0}.dnb-date-picker table{margin:0;position:relative;z-index:1}.dnb-date-picker table.dnb-no-focus:focus{outline:none}html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-date-picker__day,.dnb-date-picker__labels__day{display:flex;flex-basis:14.2857142857%;justify-content:center}.dnb-date-picker__day{margin:var(--date-picker-day-horizontal-spacing) 0;position:relative}.dnb-date-picker__day,.dnb-date-picker__day .dnb-button{height:var(--date-picker-day-width);width:var(--date-picker-day-width)}.dnb-date-picker__day .dnb-button{box-shadow:none;position:absolute;top:0;white-space:nowrap}.dnb-date-picker__day .dnb-button__bounding{border-radius:0;transform:scale(1.28)}.dnb-date-picker__day .dnb-button__text{transform:translateY(0)}.dnb-date-picker__day--selectable:hover{z-index:2}.dnb-date-picker__day--end-date .dnb-button,.dnb-date-picker__day--start-date .dnb-button{z-index:1}.dnb-date-picker__day--end-date,.dnb-date-picker__day--start-date{position:relative}.dnb-date-picker__day--end-date:after,.dnb-date-picker__day--start-date:after{content:"";height:100%;position:absolute;top:0;width:calc(var(--date-picker-day-width)/2)}.dnb-date-picker__day--start-date:after{left:auto;right:0}.dnb-date-picker__day--end-date:after{left:0;right:auto}.dnb-date-picker__day--start-date.dnb-date-picker__day--end-date:after{content:none}.dnb-date-picker__triangle{margin:0 1.5rem;overflow:hidden;pointer-events:none;right:auto;top:calc(2px - var(--date-picker-input-height)/2)}.dnb-date-picker__triangle,.dnb-date-picker__triangle:before{height:calc(var(--date-picker-input-height)/2);left:0;position:absolute;width:calc(var(--date-picker-input-height)/2)}.dnb-date-picker__triangle:before{background-color:var(--color-white);border:1px solid var(--color-black-border);content:"";top:0;transform:translateY(60%) rotate(45deg)}.dnb-date-picker--right .dnb-date-picker__triangle{left:auto;right:0}.dnb-date-picker .rtl{direction:rtl}.dnb-date-picker .rtl .dnb-date-picker__next:before,.dnb-date-picker .rtl .dnb-date-picker__prev:before{transform:scaleX(-1)}.dnb-date-picker__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-date-picker--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-date-picker>.dnb-form-label{line-height:var(--line-height-basis)}@media screen and (max-width:40em){.dnb-date-picker{flex-wrap:wrap}.dnb-date-picker>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-date-picker--stretch{display:flex;flex-grow:1}.dnb-date-picker--stretch .dnb-date-picker__inner,.dnb-date-picker--stretch .dnb-date-picker__shell,.dnb-form-row--horizontal .dnb-date-picker--stretch{width:100%}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]{align-items:flex-start}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-button .dnb-button{border-radius:50%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-date-picker{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker>.dnb-form-label{margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker__helper{display:none}}.dnb-date-picker .dnb-input__submit-button .dnb-button.dnb-skeleton{visibility:hidden}.dnb-core-style .dnb-date-picker__fieldset,.dnb-date-picker__fieldset{border:none;margin:0;padding:0}@keyframes date-picker-slide-down{0%{opacity:0}to{opacity:1}}@keyframes date-picker-slide-up{0%{opacity:1}to{opacity:0}}
+.dnb-date-picker{--date-picker-input-height:2rem;--date-picker-day-width:2rem;--date-picker-day-horizontal-spacing:4px;align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-date-picker__inner{display:inline-flex;flex-direction:column;line-height:var(--date-picker-input-height)}.dnb-date-picker__row{display:inline-flex}.dnb-date-picker__shell{display:inline-flex;flex-direction:column;position:relative;top:0}.dnb-date-picker__input__wrapper{display:inline-flex;height:inherit;white-space:nowrap}.dnb-date-picker__container{display:block;left:-1rem;position:absolute;top:var(--date-picker-input-height);z-index:3}.dnb-date-picker--small .dnb-date-picker__container{top:1.5rem}.dnb-date-picker--medium .dnb-date-picker__container{top:2.5rem}.dnb-date-picker--large .dnb-date-picker__container{top:3rem}.dnb-date-picker--show-input .dnb-date-picker__container{left:0}.dnb-date-picker--right .dnb-date-picker__container{left:auto;right:-1rem}.dnb-date-picker--show-input.dnb-date-picker--right .dnb-date-picker__container{left:auto;right:0}.dnb-date-picker--opened .dnb-date-picker__container{z-index:100}.dnb-date-picker--opened .dnb-date-picker__container:not(.dnb-date-picker--opened .dnb-date-picker__container--no-animation){animation:date-picker-slide-down .2s ease-out 1 forwards}.dnb-date-picker--opened .dnb-date-picker__container--no-animation,html[data-visual-test] .dnb-date-picker--opened .dnb-date-picker__container{animation:date-picker-slide-down 1ms ease-out 1 forwards}.dnb-date-picker--hidden .dnb-date-picker__container{display:none}.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container:not(.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation){animation:date-picker-slide-up .15s ease-out 1 forwards}.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation,html[data-visual-test] .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container{animation:date-picker-slide-up 1ms ease-out 1 forwards}.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{background:transparent;border:none;display:inline-block;font-family:var(--font-family-monospace);margin:0;outline:none;overflow:visible;padding:0 .125rem;text-align:center;transform:translateY(0);white-space:nowrap;width:auto}@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{margin:0 -4px}}@supports (-ms-ime-align:auto){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{margin:0 -5px}}@supports (-webkit-touch-callout:none){.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin:0}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin:0 -4px}.dnb-core-style .dnb-date-picker__input:first-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type:not(:root),.dnb-date-picker__input:first-of-type:not(:root){margin-left:.8rem}.dnb-core-style .dnb-date-picker__input:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type:not(:root),.dnb-date-picker__input:last-of-type:not(:root){margin-right:2.2rem}}.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-core-style .dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-core-style .dnb-date-picker__input--small.dnb-date-picker__input--small,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small.dnb-date-picker__input--small,.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-date-picker__input--small.dnb-date-picker__input--small{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--small:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small:last-of-type:not(:root),.dnb-date-picker__input--small:last-of-type:not(:root){margin-right:2.2rem}.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-core-style .dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-core-style .dnb-date-picker__input--medium.dnb-date-picker__input--medium,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium.dnb-date-picker__input--medium,.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-date-picker__input--medium.dnb-date-picker__input--medium{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--medium:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium:last-of-type:not(:root),.dnb-date-picker__input--medium:last-of-type:not(:root){margin-right:3.2rem}.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-core-style .dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-core-style .dnb-date-picker__input--large.dnb-date-picker__input--large,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large.dnb-date-picker__input--large,.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-date-picker__input--large.dnb-date-picker__input--large{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--large:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large:last-of-type:not(:root),.dnb-date-picker__input--large:last-of-type:not(:root){margin-right:4rem}.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type,.dnb-date-picker__input:first-of-type{margin-left:.8rem}.dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type,.dnb-date-picker__input:last-of-type{margin-right:2.2rem}.dnb-date-picker .dnb-input__shell{display:none}.dnb-date-picker--show-input .dnb-input__shell{display:flex}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__status--error .dnb-input__shell{box-shadow:none}.dnb-input__submit-button button:focus~.dnb-date-picker__input__wrapper{display:block}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-element,.dnb-input__submit-element>.dnb-date-picker .dnb-input__submit-element{margin-left:0}.dnb-date-picker__views{display:flex;user-select:none;-webkit-user-select:none}@media screen and (max-width:60em){.dnb-date-picker__views{flex-direction:column}}.dnb-date-picker__calendar{padding:1rem;position:relative}.dnb-date-picker__calendar:after{bottom:0;content:"";height:1px;position:absolute;width:calc(100% - 2rem)}.dnb-date-picker:not(.dnb-date-picker--show-footer) .dnb-date-picker__calendar:after{content:none}.dnb-date-picker__header{height:2.5rem;line-height:var(--line-height-basis)}.dnb-date-picker__addon,.dnb-date-picker__header{display:flex;justify-content:space-between;padding-bottom:1rem;position:relative}.dnb-date-picker__addon:after,.dnb-date-picker__header:after{bottom:0;content:"";height:1px;position:absolute;width:100%}.dnb-date-picker__addon{grid-gap:1rem;display:flex;flex-flow:row wrap;gap:1rem;justify-content:flex-start;padding:1rem}.dnb-date-picker__addon:after{left:1rem;width:calc(100% - 2rem)}.dnb-date-picker__footer{display:flex;justify-content:space-between;padding:1rem;position:relative}.dnb-date-picker__labels__day{padding-bottom:.5rem;padding-top:1.5rem}.dnb-date-picker__days,.dnb-date-picker__labels{display:flex;flex-wrap:wrap;list-style:none;margin:0;max-width:18rem;min-width:18rem;padding:0}.dnb-date-picker table{margin:0;position:relative;z-index:1}.dnb-date-picker table.dnb-no-focus:focus{outline:none}html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-date-picker__day,.dnb-date-picker__labels__day{display:flex;flex-basis:14.2857142857%;justify-content:center}.dnb-date-picker__day{margin:var(--date-picker-day-horizontal-spacing) 0;position:relative}.dnb-date-picker__day,.dnb-date-picker__day .dnb-button{height:var(--date-picker-day-width);width:var(--date-picker-day-width)}.dnb-date-picker__day .dnb-button{box-shadow:none;position:absolute;top:0;white-space:nowrap}.dnb-date-picker__day .dnb-button__bounding{border-radius:0;transform:scale(1.28)}.dnb-date-picker__day .dnb-button__text{transform:translateY(0)}.dnb-date-picker__day--selectable:hover{z-index:2}.dnb-date-picker__day--end-date .dnb-button,.dnb-date-picker__day--start-date .dnb-button{z-index:1}.dnb-date-picker__day--end-date,.dnb-date-picker__day--start-date{position:relative}.dnb-date-picker__day--end-date:after,.dnb-date-picker__day--start-date:after{content:"";height:100%;position:absolute;top:0;width:calc(var(--date-picker-day-width)/2)}.dnb-date-picker__day--start-date:after{left:auto;right:0}.dnb-date-picker__day--end-date:after{left:0;right:auto}.dnb-date-picker__day--start-date.dnb-date-picker__day--end-date:after{content:none}.dnb-date-picker__triangle{margin:0 1.5rem;overflow:hidden;pointer-events:none;right:auto;top:calc(2px - var(--date-picker-input-height)/2)}.dnb-date-picker__triangle,.dnb-date-picker__triangle:before{height:calc(var(--date-picker-input-height)/2);left:0;position:absolute;width:calc(var(--date-picker-input-height)/2)}.dnb-date-picker__triangle:before{background-color:var(--color-white);border:1px solid var(--color-black-border);content:"";top:0;transform:translateY(60%) rotate(45deg)}.dnb-date-picker--right .dnb-date-picker__triangle{left:auto;right:0}.dnb-date-picker .rtl{direction:rtl}.dnb-date-picker .rtl .dnb-date-picker__next:before,.dnb-date-picker .rtl .dnb-date-picker__prev:before{transform:scaleX(-1)}.dnb-date-picker__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-date-picker--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-date-picker>.dnb-form-label{line-height:var(--line-height-basis)}@media screen and (max-width:40em){.dnb-date-picker{flex-wrap:wrap}.dnb-date-picker>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-date-picker--stretch{display:flex;flex-grow:1}.dnb-date-picker--stretch .dnb-date-picker__inner,.dnb-date-picker--stretch .dnb-date-picker__shell,.dnb-form-row--horizontal .dnb-date-picker--stretch{width:100%}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]{align-items:flex-start}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-button .dnb-button{border-radius:50%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-date-picker{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker>.dnb-form-label{margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker__helper{display:none}}.dnb-date-picker .dnb-input__submit-button .dnb-button.dnb-skeleton{visibility:hidden}.dnb-core-style .dnb-date-picker__fieldset,.dnb-date-picker__fieldset{border:none;margin:0;padding:0}@keyframes date-picker-slide-down{0%{opacity:0}to{opacity:1}}@keyframes date-picker-slide-up{0%{opacity:1}to{opacity:0}}

package/components/date-picker/style/dnb-date-picker.scss

@@ -270,8 +270,12 @@
   }
 
   &__addon {
-    display: block;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    gap: 1rem;
     padding: 1rem;
+
     &::after {
       left: 1rem;
       width: calc(100% - 2rem);

package/components/dialog/parts/DialogAction.d.ts

@@ -8,11 +8,11 @@ export declare type DialogActionProps = {
     /**
      * For dialog actions, give a custom text for the decline button.
      */
-    declineText?: string;
+    declineText?: string | React.ReactNode;
     /**
      * For dialog actions, give a custom text for the confirm button.
      */
-    confirmText?: string;
+    confirmText?: string | React.ReactNode;
     /**
      * For variant confirmation, handle the confirm action click.
      */

package/components/dropdown/Dropdown.d.ts

@@ -9,7 +9,11 @@ import type {
 import type { IconIcon, IconSize } from '../Icon';
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
-import type { DrawerListProps } from '../../fragments/DrawerList';
+import type {
+  DrawerListProps,
+  DrawerListData
+} from '../../fragments/DrawerList';
+export type DropdownData = DrawerListData;
 type DropdownTitle = string | React.ReactNode;
 type DropdownAlignDropdown = 'left' | 'right';
 type DropdownTriggerElement = ((...args: any[]) => any) | React.ReactNode;
@@ -48,7 +52,7 @@ export interface DropdownProps
   label?: FormLabelText;
 
   /**
-   * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`
+   * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.
    */
   label_direction?: FormLabelLabelDirection;
 

package/components/icon/Icon.d.ts

@@ -42,7 +42,7 @@ export interface IconProps
   color?: IconColor;
 
   /**
-   * Default to `true`. Set to `false` if you do not want to inherit the color by `currentColor`.
+   * Defaults to `true`. Set to `false` if you do not want to inherit the color by `currentColor`.
    */
   inherit_color?: boolean;
 

package/components/icon-primary/IconPrimary.js

@@ -8,8 +8,8 @@ import React from 'react';
 import Context from '../../shared/Context';
 import { extendPropsWithContextInClassComponent } from '../../shared/component-helper';
 import DefaultIcon, { iconPropTypes, DefaultIconSize, prerenderIcon, prepareIcon } from '../icon/Icon';
-import * as primary_icons from '../../icons/dnb/primary_icons.ts';
-import * as primary_icons_medium from '../../icons/dnb/primary_icons_medium.ts';
+import * as primary_icons from '../../icons/dnb/primary_icons';
+import * as primary_icons_medium from '../../icons/dnb/primary_icons_medium';
 
 const icons = _objectSpread(_objectSpread({}, primary_icons), primary_icons_medium);
 

package/components/input/Input.d.ts

@@ -53,7 +53,7 @@ export interface InputProps
   label?: FormLabelText;
 
   /**
-   * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`
+   * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.
    */
   label_direction?: FormLabelLabelDirection;
 

package/components/input-masked/InputMasked.d.ts

@@ -164,7 +164,7 @@ export interface InputMaskedProps
   label?: FormLabelText;
 
   /**
-   * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`
+   * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.
    */
   label_direction?: FormLabelLabelDirection;
 

package/components/logo/Logo.d.ts

@@ -9,39 +9,39 @@ export interface LogoProps
   extends React.HTMLProps<HTMLElement>,
     SpacingProps {
   /**
-   * Define the size of the logo. Sets the height. The width will be calculated by the ratio. Also, `inherit` will use the inherited height. Defaults to `auto`
+   * Define the size of the logo. Sets the height. The width will be calculated by the ratio. Also, `inherit` will use the inherited height. Defaults to `auto`.
    */
   size?: LogoSize;
   ratio?: LogoRatio;
 
   /**
-   * Define either the width of the logo
+   * Define either the width of the logo.
    */
   width?: LogoWidth;
 
   /**
-   * Or define the height of the logo
+   * Or define the height of the logo.
    */
   height?: LogoHeight;
   alt?: string;
 
   /**
-   * Define the color of the logo
+   * Define the color of the logo.
    */
   color?: IconColor;
 
   /**
-   * Define which brand&#39;s logo to show. `ui` (DNB) or `sbanken`. Defaults to `ui`
+   * Define which brand&#39;s logo to show. `ui` (DNB) or `sbanken`. Defaults to `ui`.
    */
   brand?: string;
 
   /**
-   * Define the logo variant, if there is more than one variant of a brand&#39;s logo. Currently the only option other than default is a `compact` variant of the Sbanken logo. Defaults to `default`
+   * Define the logo variant, if there is more than one variant of a brand&#39;s logo. Currently the only option other than default is a `compact` variant of the Sbanken logo. Defaults to `default`.
    */
   variant?: string;
 
   /**
-   * Set to `true` if you do not want to inherit the color by `currentColor`. Default to `false`.
+   * Set to `true` if you do not want to inherit the color by `currentColor`. Defaults to `false`.
    */
   inherit_color?: boolean;
   class?: string;

package/components/modal/types.d.ts

@@ -17,7 +17,7 @@ export interface ModalProps extends ModalRootProps {
      */
     id?: string;
     /**
-     * Will disable the trigger button
+     * Will disable the trigger button.
      */
     disabled?: boolean;
     /**