@dnb/eufemia 9.30.0 → 9.32.0

package/cjs/shared/types.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { GetTranslationProps } from './Context';
+export declare type LocaleProps = GetTranslationProps;
+export declare type SpacingElementProps = {
+    top?: SpaceTypes;
+    right?: SpaceTypes;
+    bottom?: SpaceTypes;
+    left?: SpaceTypes;
+};
+/**
+ * @deprecated Use SpacingElementProps instead
+ */
+export declare type ISpacingElementProps = SpacingElementProps;
+export declare type SpacingProps = SpacingElementProps & {
+    space?: SpaceTypes | SpacingElementProps;
+};
+/**
+ * @deprecated Use SpacingProps instead
+ */
+export declare type ISpacingProps = SpacingProps;
+export declare type SpaceTypes = string | boolean | number;
+export declare type DataAttributeTypes = {
+    /**
+     * When using HTMLAttributes on object to define props,
+     * we need not get data-* attributes as valid types:
+     *
+     * triggerAttributes={{
+     *   'data-testid': 'html-selector'
+     * }}
+     *
+     * Effects: triggerAttributes, closeButtonAttributes
+     */
+    'data-testid'?: string;
+};
+export declare type DynamicElement = keyof JSX.IntrinsicElements | React.FunctionComponent;

package/cjs/shared/types.js

@@ -0,0 +1 @@
+"use strict";

package/cjs/shared/useMediaQuery.js

@@ -57,13 +57,16 @@ function useMediaQuery(props) {
   var query = props.query,
       when = props.when,
       not = props.not,
-      matchOnSSR = props.matchOnSSR;
+      matchOnSSR = props.matchOnSSR,
+      disabled = props.disabled;
 
-  var _React$useState = _react.default.useState(function () {
-    return !(0, _MediaQueryUtils.isMatchMediaSupported)() && (0, _componentHelper.isTrue)(matchOnSSR) ? true : false;
-  }),
-      _React$useState2 = _slicedToArray(_React$useState, 1),
-      matches = _React$useState2[0];
+  var matches = _react.default.useMemo(function () {
+    if (disabled) {
+      return false;
+    }
+
+    return (0, _componentHelper.isTrue)(matchOnSSR) && !(0, _MediaQueryUtils.isMatchMediaSupported)();
+  }, [disabled, matchOnSSR]);
 
   var mediaQueryList = _react.default.useRef((0, _MediaQueryUtils.makeMediaQueryList)(props, context.breakpoints));
 
@@ -71,14 +74,18 @@ function useMediaQuery(props) {
     matches = true;
   }
 
-  var _React$useState3 = _react.default.useState(matches),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      match = _React$useState4[0],
-      matchUpdate = _React$useState4[1];
+  var _React$useState = _react.default.useState(matches),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      match = _React$useState2[0],
+      matchUpdate = _React$useState2[1];
 
   var listenerRef = _react.default.useRef();
 
-  _react.default.useEffect(function () {
+  _react.default.useLayoutEffect(function () {
+    if (disabled) {
+      return;
+    }
+
     if (typeof listenerRef.current === 'function') {
       listenerRef.current();
       mediaQueryList.current = (0, _MediaQueryUtils.makeMediaQueryList)(props, context.breakpoints);
@@ -89,7 +96,7 @@ function useMediaQuery(props) {
       return matchUpdate(match);
     });
     return listenerRef.current;
-  }, [query, when, not]);
+  }, [query, when, not, disabled]);
 
   return match;
 }

package/cjs/style/core/helper-classes/helper-classes.scss

@@ -3,6 +3,10 @@
  *
  */
 
+:root {
+  --easing-default: #{$defaultEasing};
+}
+
 // Focus management
 .dnb-no-focus {
   outline: none;

package/cjs/style/dnb-ui-basis.css

@@ -166,6 +166,9 @@
  * Helper Classes
  *
  */
+:root {
+  --easing-default: cubic-bezier(0.42, 0, 0, 1); }
+
 .dnb-no-focus {
   outline: none; }
 

package/cjs/style/dnb-ui-basis.min.css

@@ -1 +1 @@
-:root{--font-family-default:"DNB",sans-serif;--font-family-monospace:"DNBMono","Menlo","Consolas","Roboto Mono","Ubuntu Monospace","Noto Mono","Oxygen Mono","Liberation Mono",monospace;--font-weight-default:normal;--font-weight-basis:normal;--font-weight-regular:normal;--font-weight-medium:500;--font-weight-bold:600;--font-size-x-small:0.875rem;--font-size-small:1rem;--font-size-basis:1.125rem;--font-size-basis--em:1em;--font-size-medium:1.25rem;--font-size-large:1.625rem;--font-size-x-large:2.125rem;--font-size-xx-large:3rem;--line-height-xx-small--em:1em;--line-height-x-small:1.125rem;--line-height-small:1.25rem;--line-height-basis:1.5rem;--line-height-basis--em:1.333em;--line-height-medium:2rem;--line-height-large:2.5rem;--line-height-x-large:3.5rem;--color-mint-green-50:#d2f0e9;--color-mint-green-25:#e9f8f4;--color-mint-green-12:#f4fbf9;--color-sea-green-30:#b3dada;--color-accent-yellow-30:#feebc1;--color-signal-orange:#ff5400;--color-fire-red:#dc2a2a;--color-success-green:#007b5e;--color-fire-red-8:#fdeeee;--color-black:#000;--color-black-80:#333;--color-black-55:#737373;--color-black-20:#ccc;--color-black-8:#ebebeb;--color-black-3:#f8f8f8;--color-white:#fff;--color-black-border:#cdcdcd;--color-black-background:#fafafa;--color-sea-green:#007272;--color-mint-green:#a5e1d2;--color-summer-green:#28b482;--color-emerald-green:#14555a;--color-ocean-green:#00343e;--color-accent-yellow:#fdbb31;--color-indigo:#23195a;--color-violet:#6e2382;--color-sky-blue:#4bbed2;--color-lavender:#f2f2f5;--color-sand-yellow:#fbf6ec;--color-pistachio:#f2f4ec;--color-mint-green-alt:#ebfffa;--color-indigo-medium:#6e6491;--color-indigo-light:#b9afc8;--color-violet-medium:#a06eaf;--color-violet-light:#cfb9d7;--color-sky-blue-medium:#87d2e1;--color-sky-blue-light:#c3ebf0;--spacing-xx-small:0.25rem;--spacing-x-small:0.5rem;--spacing-small:1rem;--spacing-medium:1.5rem;--spacing-large:2rem;--spacing-x-large:3rem;--spacing-xx-large:3.5rem;--layout-small:40em;--layout-medium:50em;--layout-large:60em;--layout-x-large:72em;--layout-xx-large:80em;--layout-xxx-large:90em;--shadow-default:0 8px 16px rgba(51,51,51,.08);--shadow-default-x:0;--shadow-default-y:8px;--shadow-default-blur-radius:16px;--shadow-default-color:rgba(51,51,51,.08)}.dnb-typo-regular{font-weight:400}.dnb-typo-medium,.dnb-typo-regular{font-family:DNB,sans-serif;font-family:var(--font-family-default);font-style:normal}.dnb-typo-medium{font-weight:500;font-weight:var(--font-weight-medium)}.dnb-typo-bold{font-family:DNB,sans-serif;font-family:var(--font-family-default);font-style:normal;font-weight:600;font-weight:var(--font-weight-bold)}.dnb-typo-mono-regular{font-family:DNBMono,Menlo,Consolas,Roboto Mono,"Ubuntu Monospace",Noto Mono,Oxygen Mono,Liberation Mono,monospace;font-family:var(--font-family-monospace);font-style:normal;font-weight:400}@font-face{font-display:fallback;font-family:DNB;font-style:normal;font-weight:400;src:url(../assets/fonts/DNB-Regular.woff2) format("woff2"),url(../assets/fonts/DNB-Regular.woff) format("woff"),url(../assets/fonts/DNB-Regular.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNB;font-style:normal;font-weight:500;src:url(../assets/fonts/DNB-Medium.woff2) format("woff2"),url(../assets/fonts/DNB-Medium.woff) format("woff"),url(../assets/fonts/DNB-Medium.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNB;font-style:normal;font-weight:600;src:url(../assets/fonts/DNB-Bold.woff2) format("woff2"),url(../assets/fonts/DNB-Bold.woff) format("woff"),url(../assets/fonts/DNB-Bold.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBMono;font-style:normal;font-weight:400;src:url(../assets/fonts/DNBMono-Regular.woff2) format("woff2"),url(../assets/fonts/DNBMono-Regular.woff) format("woff"),url(../assets/fonts/DNBMono-Regular.ttf) format("truetype")}.dnb-no-focus,.dnb-tab-focus,.dnb-tab-focus:focus{outline:none}html[data-whatinput=keyboard] .dnb-tab-focus:focus{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tab-focus:focus{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-mouse-focus,.dnb-mouse-focus:focus{outline:none}html[data-whatinput=mouse] .dnb-mouse-focus:focus{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=mouse] .dnb-mouse-focus:focus{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-focus-ring{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color)!important;box-shadow:0 0 0 .125rem var(--border-color)!important}@media screen and (-ms-high-contrast:none){.dnb-focus-ring{-webkit-box-shadow:0 0 0 .125rem #14555a!important;box-shadow:0 0 0 .125rem #14555a!important;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green)!important;box-shadow:0 0 0 .125rem var(--color-emerald-green)!important}}.dnb-scrollbar-appearance{-ms-scroll-chaining:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;overscroll-behavior:contain;scrollbar-color:#14555a transparent;scrollbar-color:var(--color-emerald-green) transparent;scrollbar-width:thin}.dnb-skip-link{opacity:.3;position:absolute;top:-100vh;-webkit-transition:opacity .3s ease-out;transition:opacity .3s ease-out;z-index:0}.dnb-skip-link--active,.dnb-skip-link:focus{background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;color:#007272;color:var(--color-sea-green);font-size:1.125rem;font-size:var(--font-size-basis);left:40%;margin:0;outline:none;padding:.5rem 1rem;position:fixed;text-align:center;text-decoration:none;top:5%;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:9999}.dnb-skip-link--active:after,.dnb-skip-link:focus:after{background-color:hsla(0,0%,100%,.85);-webkit-box-shadow:150vw 150vh 0 0 hsla(0,0%,100%,.85);box-shadow:150vw 150vh 0 0 hsla(0,0%,100%,.85);content:"";height:150vh;left:-200vw;position:absolute;top:-200vh;width:150vw;z-index:-2}.dnb-skip-link--active:before,.dnb-skip-link:focus:before{background-color:#fff;background-color:var(--color-white);border-radius:1.5rem;content:"";height:100%;left:0;outline:none;position:absolute;top:0;width:100%;z-index:-1}html[data-whatinput=mouse] .dnb-skip-link--active:before,html[data-whatinput=mouse] .dnb-skip-link:focus:before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=mouse] .dnb-skip-link--active:before,html[data-whatinput=mouse] .dnb-skip-link:focus:before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-skip-link--active:hover:before,.dnb-skip-link:focus:hover:before{background-color:#d2f0e9;background-color:var(--color-mint-green-50)}.dnb-skip-link--active:active:before,.dnb-skip-link:focus:active:before{background-color:#14555a;background-color:var(--color-emerald-green)}.dnb-skip-link--active:focus:not(:active):before,.dnb-skip-link:focus:focus:not(:active):before{outline:none}html[data-whatinput=keyboard] .dnb-skip-link--active:focus:not(:active):before,html[data-whatinput=keyboard] .dnb-skip-link:focus:focus:not(:active):before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-skip-link--active:focus:not(:active):before,html[data-whatinput=keyboard] .dnb-skip-link:focus:focus:not(:active):before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-skip-link--active:focus,.dnb-skip-link:focus:focus{opacity:1}.dnb-skip-link--active:focus:not(:hover):not(:active),.dnb-skip-link--active:hover,.dnb-skip-link:focus:focus:not(:hover):not(:active),.dnb-skip-link:focus:hover{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;color:#007272;color:var(--color-sea-green)}.dnb-skip-link--active:active,.dnb-skip-link:focus:active{background-color:transparent;color:#fff;color:var(--color-white)}html[data-whatintent=touch] .dnb-skip-link{display:none}.dnb-alignment-helper,.dnb-alignment-helper:before{speak:none;display:inline-block;font-size:1rem;font-size:var(--font-size-small);height:0;width:0}.dnb-alignment-helper:before{content:"\200C"}.dnb-drop-shadow{-webkit-box-shadow:0 8px 16px rgba(51,51,51,.08);box-shadow:0 8px 16px rgba(51,51,51,.08);-webkit-box-shadow:var(--shadow-default);box-shadow:var(--shadow-default)}.dnb-sr-only,.dnb-sr-only--inline{-webkit-touch-callout:none;clip:rect(1px,1px,1px,1px);border:0;height:1px;margin:-1px 0 0 -1px;overflow:hidden;padding:0;pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;width:1px}.dnb-sr-only--inline{display:inline-block;font-size:0;line-height:0;opacity:0;position:static;visibility:visible}.dnb-not-sr-only{font-size:medium;height:auto;line-height:normal;opacity:1;overflow:auto;position:static;white-space:normal;width:auto}.dnb-suffix{font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis);padding-left:.5rem;word-break:normal}html{font-size:100%;scroll-behavior:smooth}@supports (-webkit-touch-callout:none) and (font:-apple-system-body){html{font:-apple-system-body}}html[xmlns="http://www.w3.org/1999/xhtml"] a:hover{text-decoration:none}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--active{color:#a5e1d2!important;color:var(--color-mint-green)!important}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--contrast:not(:hover){color:#fff!important;color:var(--color-white)!important}html[xmlns="http://www.w3.org/1999/xhtml"] a.dnb-button--primary{color:#fff;color:var(--color-white)}html[xmlns="http://www.w3.org/1999/xhtml"] ul{list-style:disc none outside;list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] p{background-color:transparent;background-color:initial;overflow:visible;overflow:initial;text-align:inherit}html[xmlns="http://www.w3.org/1999/xhtml"] i{font-style:italic}html[xmlns="http://www.w3.org/1999/xhtml"] #column_left,html[xmlns="http://www.w3.org/1999/xhtml"] #root{width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefault #wrapper,html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefaultStartPage #wrapper{max-width:60rem;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{-webkit-box-shadow:none;box-shadow:none}body{margin:0}.dnb-core-style{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-core-style *,.dnb-core-style :after,.dnb-core-style :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-core-style :after,.dnb-core-style :before{text-decoration:inherit;vertical-align:inherit}.dnb-core-style hr{height:0;overflow:visible}.dnb-core-style main{display:block}.dnb-core-style nav ol,.dnb-core-style nav ul{list-style:none}.dnb-core-style abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.dnb-core-style b,.dnb-core-style strong{font-weight:bolder}.dnb-core-style code,.dnb-core-style kbd,.dnb-core-style pre,.dnb-core-style samp{font-family:DNBMono,Menlo,Consolas,Roboto Mono,"Ubuntu Monospace",Noto Mono,Oxygen Mono,Liberation Mono,monospace;font-family:var(--font-family-monospace);font-size:1em;font-size:var(--font-size-basis--em)}.dnb-core-style ::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}.dnb-core-style audio,.dnb-core-style canvas,.dnb-core-style iframe,.dnb-core-style img,.dnb-core-style svg,.dnb-core-style video{vertical-align:middle}.dnb-core-style audio,.dnb-core-style video{display:inline-block}.dnb-core-style audio:not([controls]){display:none;height:0}.dnb-core-style img{border-style:none}.dnb-core-style svg:not([fill]){fill:currentColor}.dnb-core-style svg:not(:root){overflow:hidden}.dnb-core-style table{border-collapse:collapse}.dnb-core-style button,.dnb-core-style input,.dnb-core-style select,.dnb-core-style textarea{font-family:inherit;font-size:inherit;line-height:inherit}.dnb-core-style button,.dnb-core-style figure,.dnb-core-style input,.dnb-core-style select{margin:0}.dnb-core-style button{overflow:visible;text-transform:none}.dnb-core-style fieldset{padding:.35rem .75rem .625rem}.dnb-core-style input{overflow:visible;word-break:normal}.dnb-core-style legend{color:inherit;display:table;max-width:100%;white-space:normal}.dnb-core-style progress{display:inline-block;vertical-align:baseline}.dnb-core-style select{text-transform:none}.dnb-core-style textarea{overflow:auto;resize:vertical}.dnb-core-style [type=checkbox],.dnb-core-style [type=radio]{padding:0}.dnb-core-style input[type=search]{-webkit-appearance:textfield;outline-offset:-2px}.dnb-core-style ::-webkit-inner-spin-button,.dnb-core-style ::-webkit-outer-spin-button{height:auto}.dnb-core-style ::-webkit-input-placeholder{color:inherit;opacity:.54}.dnb-core-style ::-webkit-search-decoration{-webkit-appearance:none}.dnb-core-style ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}.dnb-core-style ::-moz-focus-inner{border-style:none;padding:0}.dnb-core-style details{display:block}.dnb-core-style summary{display:list-item}.dnb-core-style canvas{display:inline-block}.dnb-core-style template{display:none}.dnb-core-style [tabindex],.dnb-core-style a,.dnb-core-style area,.dnb-core-style button,.dnb-core-style input,.dnb-core-style label,.dnb-core-style select,.dnb-core-style summary,.dnb-core-style textarea{-ms-touch-action:manipulation;touch-action:manipulation}.dnb-core-style [hidden]{display:none}.dnb-core-style [aria-busy=true]{cursor:progress}.dnb-core-style [aria-controls]:not(input){cursor:pointer}.dnb-core-style [aria-disabled=true],.dnb-core-style [disabled]{cursor:not-allowed}.dnb-core-style [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{.dnb-core-style{background-color:#fff;color:#000}}
+:root{--font-family-default:"DNB",sans-serif;--font-family-monospace:"DNBMono","Menlo","Consolas","Roboto Mono","Ubuntu Monospace","Noto Mono","Oxygen Mono","Liberation Mono",monospace;--font-weight-default:normal;--font-weight-basis:normal;--font-weight-regular:normal;--font-weight-medium:500;--font-weight-bold:600;--font-size-x-small:0.875rem;--font-size-small:1rem;--font-size-basis:1.125rem;--font-size-basis--em:1em;--font-size-medium:1.25rem;--font-size-large:1.625rem;--font-size-x-large:2.125rem;--font-size-xx-large:3rem;--line-height-xx-small--em:1em;--line-height-x-small:1.125rem;--line-height-small:1.25rem;--line-height-basis:1.5rem;--line-height-basis--em:1.333em;--line-height-medium:2rem;--line-height-large:2.5rem;--line-height-x-large:3.5rem;--color-mint-green-50:#d2f0e9;--color-mint-green-25:#e9f8f4;--color-mint-green-12:#f4fbf9;--color-sea-green-30:#b3dada;--color-accent-yellow-30:#feebc1;--color-signal-orange:#ff5400;--color-fire-red:#dc2a2a;--color-success-green:#007b5e;--color-fire-red-8:#fdeeee;--color-black:#000;--color-black-80:#333;--color-black-55:#737373;--color-black-20:#ccc;--color-black-8:#ebebeb;--color-black-3:#f8f8f8;--color-white:#fff;--color-black-border:#cdcdcd;--color-black-background:#fafafa;--color-sea-green:#007272;--color-mint-green:#a5e1d2;--color-summer-green:#28b482;--color-emerald-green:#14555a;--color-ocean-green:#00343e;--color-accent-yellow:#fdbb31;--color-indigo:#23195a;--color-violet:#6e2382;--color-sky-blue:#4bbed2;--color-lavender:#f2f2f5;--color-sand-yellow:#fbf6ec;--color-pistachio:#f2f4ec;--color-mint-green-alt:#ebfffa;--color-indigo-medium:#6e6491;--color-indigo-light:#b9afc8;--color-violet-medium:#a06eaf;--color-violet-light:#cfb9d7;--color-sky-blue-medium:#87d2e1;--color-sky-blue-light:#c3ebf0;--spacing-xx-small:0.25rem;--spacing-x-small:0.5rem;--spacing-small:1rem;--spacing-medium:1.5rem;--spacing-large:2rem;--spacing-x-large:3rem;--spacing-xx-large:3.5rem;--layout-small:40em;--layout-medium:50em;--layout-large:60em;--layout-x-large:72em;--layout-xx-large:80em;--layout-xxx-large:90em;--shadow-default:0 8px 16px rgba(51,51,51,.08);--shadow-default-x:0;--shadow-default-y:8px;--shadow-default-blur-radius:16px;--shadow-default-color:rgba(51,51,51,.08)}.dnb-typo-regular{font-weight:400}.dnb-typo-medium,.dnb-typo-regular{font-family:DNB,sans-serif;font-family:var(--font-family-default);font-style:normal}.dnb-typo-medium{font-weight:500;font-weight:var(--font-weight-medium)}.dnb-typo-bold{font-family:DNB,sans-serif;font-family:var(--font-family-default);font-style:normal;font-weight:600;font-weight:var(--font-weight-bold)}.dnb-typo-mono-regular{font-family:DNBMono,Menlo,Consolas,Roboto Mono,"Ubuntu Monospace",Noto Mono,Oxygen Mono,Liberation Mono,monospace;font-family:var(--font-family-monospace);font-style:normal;font-weight:400}@font-face{font-display:fallback;font-family:DNB;font-style:normal;font-weight:400;src:url(../assets/fonts/DNB-Regular.woff2) format("woff2"),url(../assets/fonts/DNB-Regular.woff) format("woff"),url(../assets/fonts/DNB-Regular.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNB;font-style:normal;font-weight:500;src:url(../assets/fonts/DNB-Medium.woff2) format("woff2"),url(../assets/fonts/DNB-Medium.woff) format("woff"),url(../assets/fonts/DNB-Medium.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNB;font-style:normal;font-weight:600;src:url(../assets/fonts/DNB-Bold.woff2) format("woff2"),url(../assets/fonts/DNB-Bold.woff) format("woff"),url(../assets/fonts/DNB-Bold.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBMono;font-style:normal;font-weight:400;src:url(../assets/fonts/DNBMono-Regular.woff2) format("woff2"),url(../assets/fonts/DNBMono-Regular.woff) format("woff"),url(../assets/fonts/DNBMono-Regular.ttf) format("truetype")}:root{--easing-default:cubic-bezier(0.42,0,0,1)}.dnb-no-focus,.dnb-tab-focus,.dnb-tab-focus:focus{outline:none}html[data-whatinput=keyboard] .dnb-tab-focus:focus{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tab-focus:focus{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-mouse-focus,.dnb-mouse-focus:focus{outline:none}html[data-whatinput=mouse] .dnb-mouse-focus:focus{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=mouse] .dnb-mouse-focus:focus{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-focus-ring{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color)!important;box-shadow:0 0 0 .125rem var(--border-color)!important}@media screen and (-ms-high-contrast:none){.dnb-focus-ring{-webkit-box-shadow:0 0 0 .125rem #14555a!important;box-shadow:0 0 0 .125rem #14555a!important;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green)!important;box-shadow:0 0 0 .125rem var(--color-emerald-green)!important}}.dnb-scrollbar-appearance{-ms-scroll-chaining:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;overscroll-behavior:contain;scrollbar-color:#14555a transparent;scrollbar-color:var(--color-emerald-green) transparent;scrollbar-width:thin}.dnb-skip-link{opacity:.3;position:absolute;top:-100vh;-webkit-transition:opacity .3s ease-out;transition:opacity .3s ease-out;z-index:0}.dnb-skip-link--active,.dnb-skip-link:focus{background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;color:#007272;color:var(--color-sea-green);font-size:1.125rem;font-size:var(--font-size-basis);left:40%;margin:0;outline:none;padding:.5rem 1rem;position:fixed;text-align:center;text-decoration:none;top:5%;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:9999}.dnb-skip-link--active:after,.dnb-skip-link:focus:after{background-color:hsla(0,0%,100%,.85);-webkit-box-shadow:150vw 150vh 0 0 hsla(0,0%,100%,.85);box-shadow:150vw 150vh 0 0 hsla(0,0%,100%,.85);content:"";height:150vh;left:-200vw;position:absolute;top:-200vh;width:150vw;z-index:-2}.dnb-skip-link--active:before,.dnb-skip-link:focus:before{background-color:#fff;background-color:var(--color-white);border-radius:1.5rem;content:"";height:100%;left:0;outline:none;position:absolute;top:0;width:100%;z-index:-1}html[data-whatinput=mouse] .dnb-skip-link--active:before,html[data-whatinput=mouse] .dnb-skip-link:focus:before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=mouse] .dnb-skip-link--active:before,html[data-whatinput=mouse] .dnb-skip-link:focus:before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-skip-link--active:hover:before,.dnb-skip-link:focus:hover:before{background-color:#d2f0e9;background-color:var(--color-mint-green-50)}.dnb-skip-link--active:active:before,.dnb-skip-link:focus:active:before{background-color:#14555a;background-color:var(--color-emerald-green)}.dnb-skip-link--active:focus:not(:active):before,.dnb-skip-link:focus:focus:not(:active):before{outline:none}html[data-whatinput=keyboard] .dnb-skip-link--active:focus:not(:active):before,html[data-whatinput=keyboard] .dnb-skip-link:focus:focus:not(:active):before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-skip-link--active:focus:not(:active):before,html[data-whatinput=keyboard] .dnb-skip-link:focus:focus:not(:active):before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-skip-link--active:focus,.dnb-skip-link:focus:focus{opacity:1}.dnb-skip-link--active:focus:not(:hover):not(:active),.dnb-skip-link--active:hover,.dnb-skip-link:focus:focus:not(:hover):not(:active),.dnb-skip-link:focus:hover{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;color:#007272;color:var(--color-sea-green)}.dnb-skip-link--active:active,.dnb-skip-link:focus:active{background-color:transparent;color:#fff;color:var(--color-white)}html[data-whatintent=touch] .dnb-skip-link{display:none}.dnb-alignment-helper,.dnb-alignment-helper:before{speak:none;display:inline-block;font-size:1rem;font-size:var(--font-size-small);height:0;width:0}.dnb-alignment-helper:before{content:"\200C"}.dnb-drop-shadow{-webkit-box-shadow:0 8px 16px rgba(51,51,51,.08);box-shadow:0 8px 16px rgba(51,51,51,.08);-webkit-box-shadow:var(--shadow-default);box-shadow:var(--shadow-default)}.dnb-sr-only,.dnb-sr-only--inline{-webkit-touch-callout:none;clip:rect(1px,1px,1px,1px);border:0;height:1px;margin:-1px 0 0 -1px;overflow:hidden;padding:0;pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;width:1px}.dnb-sr-only--inline{display:inline-block;font-size:0;line-height:0;opacity:0;position:static;visibility:visible}.dnb-not-sr-only{font-size:medium;height:auto;line-height:normal;opacity:1;overflow:auto;position:static;white-space:normal;width:auto}.dnb-suffix{font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis);padding-left:.5rem;word-break:normal}html{font-size:100%;scroll-behavior:smooth}@supports (-webkit-touch-callout:none) and (font:-apple-system-body){html{font:-apple-system-body}}html[xmlns="http://www.w3.org/1999/xhtml"] a:hover{text-decoration:none}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--active{color:#a5e1d2!important;color:var(--color-mint-green)!important}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--contrast:not(:hover){color:#fff!important;color:var(--color-white)!important}html[xmlns="http://www.w3.org/1999/xhtml"] a.dnb-button--primary{color:#fff;color:var(--color-white)}html[xmlns="http://www.w3.org/1999/xhtml"] ul{list-style:disc none outside;list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] p{background-color:transparent;background-color:initial;overflow:visible;overflow:initial;text-align:inherit}html[xmlns="http://www.w3.org/1999/xhtml"] i{font-style:italic}html[xmlns="http://www.w3.org/1999/xhtml"] #column_left,html[xmlns="http://www.w3.org/1999/xhtml"] #root{width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefault #wrapper,html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefaultStartPage #wrapper{max-width:60rem;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{-webkit-box-shadow:none;box-shadow:none}body{margin:0}.dnb-core-style{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-core-style *,.dnb-core-style :after,.dnb-core-style :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-core-style :after,.dnb-core-style :before{text-decoration:inherit;vertical-align:inherit}.dnb-core-style hr{height:0;overflow:visible}.dnb-core-style main{display:block}.dnb-core-style nav ol,.dnb-core-style nav ul{list-style:none}.dnb-core-style abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.dnb-core-style b,.dnb-core-style strong{font-weight:bolder}.dnb-core-style code,.dnb-core-style kbd,.dnb-core-style pre,.dnb-core-style samp{font-family:DNBMono,Menlo,Consolas,Roboto Mono,"Ubuntu Monospace",Noto Mono,Oxygen Mono,Liberation Mono,monospace;font-family:var(--font-family-monospace);font-size:1em;font-size:var(--font-size-basis--em)}.dnb-core-style ::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}.dnb-core-style audio,.dnb-core-style canvas,.dnb-core-style iframe,.dnb-core-style img,.dnb-core-style svg,.dnb-core-style video{vertical-align:middle}.dnb-core-style audio,.dnb-core-style video{display:inline-block}.dnb-core-style audio:not([controls]){display:none;height:0}.dnb-core-style img{border-style:none}.dnb-core-style svg:not([fill]){fill:currentColor}.dnb-core-style svg:not(:root){overflow:hidden}.dnb-core-style table{border-collapse:collapse}.dnb-core-style button,.dnb-core-style input,.dnb-core-style select,.dnb-core-style textarea{font-family:inherit;font-size:inherit;line-height:inherit}.dnb-core-style button,.dnb-core-style figure,.dnb-core-style input,.dnb-core-style select{margin:0}.dnb-core-style button{overflow:visible;text-transform:none}.dnb-core-style fieldset{padding:.35rem .75rem .625rem}.dnb-core-style input{overflow:visible;word-break:normal}.dnb-core-style legend{color:inherit;display:table;max-width:100%;white-space:normal}.dnb-core-style progress{display:inline-block;vertical-align:baseline}.dnb-core-style select{text-transform:none}.dnb-core-style textarea{overflow:auto;resize:vertical}.dnb-core-style [type=checkbox],.dnb-core-style [type=radio]{padding:0}.dnb-core-style input[type=search]{-webkit-appearance:textfield;outline-offset:-2px}.dnb-core-style ::-webkit-inner-spin-button,.dnb-core-style ::-webkit-outer-spin-button{height:auto}.dnb-core-style ::-webkit-input-placeholder{color:inherit;opacity:.54}.dnb-core-style ::-webkit-search-decoration{-webkit-appearance:none}.dnb-core-style ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}.dnb-core-style ::-moz-focus-inner{border-style:none;padding:0}.dnb-core-style details{display:block}.dnb-core-style summary{display:list-item}.dnb-core-style canvas{display:inline-block}.dnb-core-style template{display:none}.dnb-core-style [tabindex],.dnb-core-style a,.dnb-core-style area,.dnb-core-style button,.dnb-core-style input,.dnb-core-style label,.dnb-core-style select,.dnb-core-style summary,.dnb-core-style textarea{-ms-touch-action:manipulation;touch-action:manipulation}.dnb-core-style [hidden]{display:none}.dnb-core-style [aria-busy=true]{cursor:progress}.dnb-core-style [aria-controls]:not(input){cursor:pointer}.dnb-core-style [aria-disabled=true],.dnb-core-style [disabled]{cursor:not-allowed}.dnb-core-style [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{.dnb-core-style{background-color:#fff;color:#000}}

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

@@ -138,7 +138,7 @@
       @supports (display: grid) {
         .dnb-drawer-list__option__inner {
           display: grid;
-          grid-template-columns: 1fr minmax(2rem, auto);
+          grid-template-columns: 1fr auto;
           grid-template-rows: repeat(10, -webkit-min-content);
           grid-template-rows: repeat(10, min-content); } }
       .dnb-drawer-list__option__inner > * {
@@ -674,19 +674,20 @@
       margin-top: 0.25rem; }
     .dnb-accordion__header__description + .dnb-accordion__header__title {
       margin-top: 0.25rem; }
-  .dnb-accordion--expanded .dnb-accordion__header__icon {
-    -webkit-transform: rotate(-180deg);
-            transform: rotate(-180deg); }
   .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); }
   .dnb-accordion__content {
     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);
@@ -699,6 +700,7 @@
     .dnb-accordion__content--is-animating {
       overflow: hidden; }
     .dnb-accordion__content__inner {
+      width: 100%;
       margin-top: 1rem; }
       .dnb-accordion__content__inner--remove-content {
         display: none; }
@@ -713,9 +715,6 @@
     @media screen and (min-width: 40em) {
       .dnb-accordion-group--single-container .dnb-accordion__header {
         width: 40%; }
-        .dnb-accordion-group--single-container .dnb-accordion__header__icon {
-          -webkit-transform: rotate(-90deg);
-                  transform: rotate(-90deg); }
       .dnb-accordion-group--single-container .dnb-accordion__content {
         margin-left: 1rem;
         -webkit-transition: opacity 1s cubic-bezier(0.42, 0, 0, 1);
@@ -724,6 +723,10 @@
         transition: opacity 1s var(--accordion-easing); }
         .dnb-accordion-group--single-container .dnb-accordion__content__inner {
           margin-top: 0; } }
+  @media screen and (min-width: 40em) {
+    .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;
@@ -905,12 +908,12 @@
     z-index: 3;
     cursor: text; }
   @media screen and (min-width: 40em) {
-    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder,
-    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
+    .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__placeholder,
+    .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__input {
       padding-right: 0 !important; } }
   @media screen and (max-width: 40em) {
-    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder,
-    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
+    .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__placeholder,
+    .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__input {
       padding-right: 2.5rem !important; } }
   .dnb-autocomplete .dnb-input__inner__element.dnb-p {
     white-space: nowrap;
@@ -1301,16 +1304,13 @@
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex; }
-  .dnb-breadcrumb--spacing .dnb-breadcrumb__bar.dnb-section {
-    padding: 0.5rem 0;
-    padding: var(--spacing-x-small) 0; }
-  .dnb-breadcrumb__list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  .dnb-breadcrumb__list.dnb-section {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+    margin: 0;
+    padding: 0;
+    list-style: none;
     -ms-flex-wrap: wrap;
         flex-wrap: wrap;
     -webkit-box-orient: horizontal;
@@ -1328,15 +1328,14 @@
         -ms-flex-align: center;
             align-items: center;
     line-height: normal;
-    padding: 0.5rem 0;
-    padding: var(--spacing-x-small) 0; }
+    padding: 0.5rem 0; }
     .dnb-breadcrumb__item__span__icon {
       margin-left: 0.5rem;
       margin-left: calc(1rem / 2);
       margin-left: calc(var(--button-icon-size)/2);
       margin-left: calc(var(--button-icon-size) / 2);
       margin-right: 0.5rem; }
-  .dnb-breadcrumb__collapse {
+  .dnb-breadcrumb__animation {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -1344,19 +1343,41 @@
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    padding: 0 2rem;
-    padding: 0 var(--spacing-large); }
-  .dnb-breadcrumb__collapse .dnb-breadcrumb__list {
+    overflow: hidden;
+    -webkit-transition: height 400ms cubic-bezier(0.42, 0, 0, 1);
+    transition: height 400ms cubic-bezier(0.42, 0, 0, 1); }
+  .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);
+    transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0, 1) calc(var(--delay)*50ms);
+    transition: -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);
+    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-transform: translateX(-1rem);
+            transform: translateX(-1rem); }
+  .dnb-breadcrumb__animation.dnb-height-animation--parallax .dnb-breadcrumb__item {
+    -webkit-transform: translateX(0);
+            transform: translateX(0); }
+  .dnb-breadcrumb__collapse {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column; }
+  .dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     -webkit-box-align: start;
         -ms-flex-align: start;
-            align-items: flex-start; }
-  .dnb-breadcrumb--spacing .dnb-breadcrumb__collapse {
-    padding: 0.5rem 2rem;
-    padding: var(--spacing-x-small) var(--spacing-large); }
+            align-items: flex-start;
+    margin: 0.5rem 0;
+    margin-left: 1.5rem; }
 
 /*
 * Button component
@@ -2701,10 +2722,10 @@ button.dnb-button::-moz-focus-inner {
       background-color: #f2f4ec;
       background-color: var(--color-pistachio); }
   html:not([data-visual-test]) .dnb-dialog {
-    -webkit-animation: show-modal 300ms ease-out forwards;
-            animation: show-modal 300ms ease-out forwards;
-    -webkit-animation: show-modal var(--modal-animation-duration) ease-out forwards;
-            animation: show-modal var(--modal-animation-duration) ease-out forwards; }
+    -webkit-animation: show-modal 300ms ease-out;
+            animation: show-modal 300ms ease-out;
+    -webkit-animation: show-modal var(--modal-animation-duration) ease-out;
+            animation: show-modal var(--modal-animation-duration) ease-out; }
   html:not([data-visual-test]) .dnb-dialog--hide {
     -webkit-animation: hide-modal 220ms ease-in-out forwards;
             animation: hide-modal 220ms ease-in-out forwards; }
@@ -3377,12 +3398,13 @@ legend.dnb-form-label {
   --form-bounding-height: 0.25rem; }
 
 .dnb-form-row {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
   -webkit-box-align: baseline;
       -ms-flex-align: baseline;
           align-items: baseline; }
+  .dnb-form-row, .dnb-form-row.dnb-section {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex; }
   .dnb-form-row__content {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
@@ -3835,6 +3857,18 @@ html[data-visual-test] .dnb-global-status__shell {
   display: block;
   padding: 1rem 0 2rem; }
 
+/*
+* HeightAnimation component
+*
+*/
+.dnb-height-animation {
+  -webkit-transition: height 400ms cubic-bezier(0.42, 0, 0, 1);
+  transition: height 400ms cubic-bezier(0.42, 0, 0, 1);
+  -webkit-transition: height var(--duration, 400ms) var(--easing-default);
+  transition: height var(--duration, 400ms) var(--easing-default); }
+  .dnb-height-animation--animating {
+    overflow: hidden; }
+
 /*
  * HelpButton component
  *
@@ -4424,6 +4458,8 @@ html[data-visual-test] .dnb-global-status__shell {
   color: #007272;
   color: var(--color-sea-green);
   height: 1em; }
+  .dnb-logo--inherit-color {
+    color: currentColor; }
   .dnb-logo svg {
     fill: currentColor;
     shape-rendering: geometricPrecision; }
@@ -4527,10 +4563,10 @@ html[data-dnb-modal-active] {
     -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards;
             animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
-    -webkit-animation: show-modal-overlay 300ms ease-out forwards;
-            animation: show-modal-overlay 300ms ease-out forwards;
-    -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards;
-            animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards; }
+    -webkit-animation: show-modal-overlay 300ms ease-out;
+            animation: show-modal-overlay 300ms ease-out;
+    -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out;
+            animation: show-modal-overlay var(--modal-animation-duration) ease-out; }
     .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide {
       -webkit-animation: hide-modal-overlay 300ms ease-out forwards;
               animation: hide-modal-overlay 300ms ease-out forwards;
@@ -5309,32 +5345,18 @@ html[data-dnb-modal-active] {
     z-index: -8; }
   .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
     z-index: -7; }
+  .dnb-section--spacing-x-small {
+    padding: 0.5rem 0;
+    padding: var(--spacing-x-small) 0; }
   .dnb-section--spacing-small {
-    padding-top: 1rem;
-    padding-top: var(--spacing-small);
-    padding-bottom: 1rem;
-    padding-bottom: var(--spacing-small); }
+    padding: 1rem 0;
+    padding: var(--spacing-small) 0; }
   .dnb-section--spacing-medium {
-    padding-top: 1.5rem;
-    padding-top: var(--spacing-medium);
-    padding-bottom: 1.5rem;
-    padding-bottom: var(--spacing-medium); }
-  .dnb-section--spacing, .dnb-section--spacing-default, .dnb-section--spacing-large {
-    padding-top: 2rem;
-    padding-top: var(--spacing-large);
-    padding-bottom: 2rem;
-    padding-bottom: var(--spacing-large); }
-  .dnb-section--spacing-x-large {
-    padding-top: 3rem;
-    padding-top: var(--spacing-x-large);
-    padding-bottom: 3.5rem;
-    padding-bottom: var(--spacing-xx-large); }
-  .dnb-section--spacing-xx-large {
-    padding-top: 3.5rem;
-    padding-top: var(--spacing-xx-large);
-    padding-bottom: 4.5rem;
-    padding-bottom: calc(3.5rem + 1rem);
-    padding-bottom: calc(var(--spacing-xx-large) + var(--spacing-small)); }
+    padding: 1.5rem 0;
+    padding: var(--spacing-medium) 0; }
+  .dnb-section--spacing, .dnb-section--spacing-large {
+    padding: 2rem 0;
+    padding: var(--spacing-large) 0; }
 
 /*
  * Skeleton component
@@ -5483,6 +5505,7 @@ html[data-dnb-modal-active] {
    -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
+  -webkit-touch-callout: none;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -5611,7 +5634,12 @@ html[data-dnb-modal-active] {
     left: 0;
     top: 0;
     z-index: 3;
-    display: block;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
     -webkit-transform: translate3d(-50%, 0, 0);
             transform: translate3d(-50%, 0, 0);
     border-radius: 50%; }
@@ -5638,12 +5666,12 @@ html[data-dnb-modal-active] {
   .dnb-slider--vertical .dnb-slider__button.dnb-button--size-small {
     -webkit-transform: translateX(0.25rem);
             transform: translateX(0.25rem); }
-  .dnb-slider__state--jumped .dnb-slider__thumb,
-  .dnb-slider__state--jumped .dnb-slider__line {
-    -webkit-transition: left 250ms ease, top 250ms ease, bottom 250ms ease, right 250ms ease, -webkit-box-shadow 250ms ease;
-    transition: left 250ms ease, top 250ms ease, bottom 250ms ease, right 250ms ease, -webkit-box-shadow 250ms ease;
-    transition: left 250ms ease, top 250ms ease, bottom 250ms ease, right 250ms ease, box-shadow 250ms ease;
-    transition: left 250ms ease, top 250ms ease, bottom 250ms ease, right 250ms ease, box-shadow 250ms ease, -webkit-box-shadow 250ms ease; }
+  .dnb-slider__state--animate .dnb-slider__thumb,
+  .dnb-slider__state--animate .dnb-slider__line {
+    -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); }
   .dnb-slider__state--disabled .dnb-slider__track,
   .dnb-slider__state--disabled .dnb-slider__thumb,
   .dnb-slider__state--disabled .dnb-slider__line {
@@ -8502,36 +8530,36 @@ span.dnb-space--no-collapse > span {
   padding: 0 1rem;
   opacity: 0;
   visibility: hidden;
-  -webkit-transition: opacity 200ms ease-out;
-  transition: opacity 200ms ease-out; }
+  -webkit-transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
   .dnb-tooltip--large {
     padding: 0.25rem 1rem; }
   .dnb-tooltip--animate_position {
-    -webkit-transition: all 300ms ease-in-out, opacity 200ms ease-out;
-    transition: all 300ms ease-in-out, opacity 200ms ease-out; }
+    -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); }
   .dnb-tooltip--active {
     visibility: visible;
     /*
       because of the first "show" we also use animation
       also, use forwards because of the usage of visibility
     */
-    -webkit-animation: show-tooltip 200ms ease-out forwards;
-            animation: show-tooltip 200ms ease-out forwards; }
+    -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; }
   html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
-    -webkit-animation: show-tooltip 1ms ease-out forwards;
-            animation: show-tooltip 1ms ease-out forwards; }
+    -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; }
   .dnb-tooltip--hide {
     visibility: visible;
-    -webkit-animation: hide-tooltip 200ms ease-in-out forwards;
-            animation: hide-tooltip 200ms ease-in-out forwards; }
+    -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; }
   .dnb-tooltip--hide.dnb-tooltip--no-animation {
-    -webkit-animation: hide-tooltip 1ms ease-out forwards;
-            animation: hide-tooltip 1ms ease-out forwards; }
+    -webkit-animation: hide-tooltip 1ms linear forwards;
+            animation: hide-tooltip 1ms linear forwards; }
   .dnb-tooltip--fixed {
     position: fixed; }
   html[data-visual-test] .dnb-tooltip--hide {
-    -webkit-animation: hide-tooltip 1ms ease-out 1s forwards;
-            animation: hide-tooltip 1ms ease-out 1s forwards; }
+    -webkit-animation: hide-tooltip 1ms linear 1s forwards;
+            animation: hide-tooltip 1ms linear 1s forwards; }
   .dnb-tooltip__portal {
     position: absolute;
     top: 0;