@dnb/eufemia 9.32.1 → 9.33.0

package/es/components/space/SpacingHelper.d.ts

@@ -10,43 +10,8 @@ export namespace spacingPropTypes {
     const bottom: PropTypes.Requireable<string | number | boolean>;
     const left: PropTypes.Requireable<string | number | boolean>;
 }
-export namespace spacingDefaultProps {
-    const space_1: any;
-    export { space_1 as space };
-    const top_1: any;
-    export { top_1 as top };
-    const right_1: any;
-    export { right_1 as right };
-    const bottom_1: any;
-    export { bottom_1 as bottom };
-    const left_1: any;
-    export { left_1 as left };
-}
-export const spacePatterns: {
-    'xx-small': number;
-    'x-small': number;
-    small: number;
-    medium: number;
-    large: number;
-    'x-large': number;
-    'xx-large': number;
-    'xx-large-x2': number;
-};
-export function translateSpace(type: any): any;
-export function splitTypes(types: any): any;
-export function sumTypes(types: any): any;
-export function createTypeModifiers(types: any): any;
-export function findType(num: any, { returnObject }?: {
-    returnObject?: boolean;
-}): string | [string, number];
-export function findNearestTypes(num: any): any;
-export function isValidSpaceProp(prop: any): boolean;
-export function removeSpaceProps({ ...props }: {
-    [x: string]: any;
-}): {
-    [x: string]: any;
-};
-export function createSpacingClasses(props: any, Element?: any): any[];
-export function createStyleObject(props: any): {};
-export function isInline(Element: any): boolean;
+import { createSpacingClasses } from "./SpacingUtils";
+import { removeSpaceProps } from "./SpacingUtils";
+import { createStyleObject } from "./SpacingUtils";
 import PropTypes from "prop-types";
+export { createSpacingClasses, removeSpaceProps, createStyleObject };

package/es/components/space/SpacingHelper.js

@@ -1,6 +1,6 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
-import { warn } from '../../shared/component-helper';
+import { createSpacingClasses, removeSpaceProps, createStyleObject } from './SpacingUtils';
+export { createSpacingClasses, removeSpaceProps, createStyleObject };
 export const spacingPropTypes = {
   space: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.shape({
     top: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
@@ -12,227 +12,4 @@ export const spacingPropTypes = {
   right: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   bottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   left: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
-};
-export const spacingDefaultProps = {
-  space: null,
-  top: null,
-  right: null,
-  bottom: null,
-  left: null
-};
-export const spacePatterns = {
-  'xx-small': 0.25,
-  'x-small': 0.5,
-  small: 1,
-  medium: 1.5,
-  large: 2,
-  'x-large': 3,
-  'xx-large': 3.5,
-  'xx-large-x2': 7
-};
-export const translateSpace = type => {
-  if (/-x2$/.test(type)) {
-    return spacePatterns[type.replace(/-x2$/, '')] * 2;
-  }
-
-  return spacePatterns[type] || 0;
-};
-export const splitTypes = types => {
-  if (typeof types === 'string') {
-    types = types.split(/ /g);
-  } else if (typeof types === 'boolean') {
-    return ['small'];
-  } else if (typeof types === 'number') {
-    return [types];
-  }
-
-  return types ? types.filter(r => r && r.length > 0) : null;
-};
-export const sumTypes = types => splitTypes(types).map(type => translateSpace(type)).reduce((acc, cur) => {
-  if (cur > 0) {
-    acc += cur;
-  } else if (cur < 0) {
-    acc -= cur;
-  }
-
-  return acc;
-}, 0);
-export const createTypeModifiers = types => {
-  if (typeof types === 'number') {
-    types = String(types);
-  }
-
-  return (splitTypes(types) || []).reduce((acc, type) => {
-    if (type) {
-      const firstLetter = type[0];
-
-      if (parseFloat(firstLetter) > -1) {
-        let num = parseFloat(type);
-
-        if (num >= 8 && /[0-9]px/.test(type)) {
-          num = num / 16;
-        }
-
-        const foundType = findType(num);
-
-        if (foundType) {
-          type = foundType;
-        } else {
-          findNearestTypes(num).forEach(type => {
-            if (type) {
-              acc.push(type);
-            }
-          });
-        }
-      }
-
-      if (!(parseFloat(type) > 0)) {
-        acc.push(type);
-      }
-    }
-
-    return acc;
-  }, []);
-};
-export const findType = (num, {
-  returnObject = false
-} = {}) => {
-  const found = Object.entries(spacePatterns).find(([k, v]) => k && v === num) || null;
-
-  if (returnObject) {
-    return found;
-  }
-
-  if (found) {
-    return found[0];
-  }
-
-  return found;
-};
-export const findNearestTypes = num => {
-  let res = [];
-  const near = Object.entries(spacePatterns).reverse().find(([k, v]) => k && num >= v);
-  const nearNum = near && near[1] || num;
-  const typeObject = findType(nearNum, {
-    returnObject: true
-  });
-
-  if (typeObject) {
-    const nearType = typeObject[0];
-    res.push(nearType);
-    const leftOver = num - parseFloat(typeObject[1]);
-    const foundMoreTypes = findNearestTypes(leftOver);
-    foundMoreTypes.forEach(type => {
-      const index = res.indexOf(type);
-
-      if (index !== -1) {
-        res[index] = `${type}-x2`;
-      }
-    });
-    res = [...res, ...foundMoreTypes];
-  }
-
-  return res;
-};
-export const isValidSpaceProp = prop => prop && ['top', 'right', 'bottom', 'left'].includes(prop);
-export const removeSpaceProps = _ref => {
-  let props = _extends({}, _ref);
-
-  for (let i in props) {
-    if (isValidSpaceProp(i)) {
-      delete props[i];
-    }
-  }
-
-  return props;
-};
-export const createSpacingClasses = (props, Element = null) => {
-  if (typeof props.space !== 'undefined') {
-    if (typeof props.space === 'string' || typeof props.space === 'number' || typeof props.space === 'boolean' && props.space) {
-      props.top = props.right = props.bottom = props.left = props.space;
-    }
-
-    for (let i in props.space) {
-      if (!props[i] && isValidSpaceProp(i)) {
-        props[i] = props.space[i];
-      }
-    }
-
-    delete props.space;
-  }
-
-  return Object.entries(props).reduce((acc, [direction, cur]) => {
-    if (isValidSpaceProp(direction)) {
-      if (String(cur) === '0' || String(cur) === 'false') {
-        acc.push(`dnb-space__${direction}--zero`);
-      } else if (cur) {
-        const typeModifiers = createTypeModifiers(cur);
-        const sum = sumTypes(typeModifiers);
-
-        if (sum > 10) {
-          warn(`Spacing of more than 10rem is not supported! You used ${sum} / (${typeModifiers.join(',')})`);
-        } else {
-          const nearestTypes = findNearestTypes(sum);
-          acc = [...acc, ...nearestTypes.map(type => `dnb-space__${direction}--${type}`)];
-        }
-      }
-    } else if (direction === 'no_collapse') {
-      acc.push('dnb-space--no-collapse');
-
-      if (Element && isInline(Element)) {
-        acc.push('dnb-space--inline');
-      }
-    }
-
-    return acc;
-  }, []);
-};
-export const createStyleObject = props => {
-  if (props.top && !(parseFloat(props.top) > 0)) {
-    props.top = sumTypes(props.top);
-  }
-
-  if (props.bottom && !(parseFloat(props.bottom) > 0)) {
-    props.bottom = sumTypes(props.bottom);
-  }
-
-  if (props.left && !(parseFloat(props.left) > 0)) {
-    props.left = sumTypes(props.left);
-  }
-
-  if (props.right && !(parseFloat(props.right) > 0)) {
-    props.right = sumTypes(props.right);
-  }
-
-  return Object.entries({
-    marginTop: props.top && `${props.top}rem`,
-    marginBottom: props.bottom && `${props.bottom}rem`,
-    maxWidth: props.maxWidth && `${props.maxWidth}rem`,
-    maxHeight: props.maxHeight && `${props.maxHeight}rem`,
-    width: props.width && `${props.width}rem`,
-    height: props.height && `${props.height}rem`
-  }).reduce((acc, [key, val]) => {
-    if (typeof val !== 'undefined') {
-      acc[key] = val;
-    }
-
-    return acc;
-  }, {});
-};
-export const isInline = Element => {
-  let inline = false;
-
-  switch (Element) {
-    case 'h1':
-    case 'h2':
-    case 'h3':
-    case 'h4':
-    case 'h5':
-    case 'h6':
-    case 'p':
-      inline = true;
-      break;
-  }
-
-  return inline;
 };

package/es/components/space/SpacingUtils.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Space helper
+ *
+ */
+export declare const spacingDefaultProps: {
+    space: any;
+    top: any;
+    right: any;
+    bottom: any;
+    left: any;
+};
+export declare const spacePatterns: {
+    'xx-small': number;
+    'x-small': number;
+    small: number;
+    medium: number;
+    large: number;
+    'x-large': number;
+    'xx-large': number;
+    'xx-large-x2': number;
+};
+export declare const translateSpace: (type: any) => any;
+export declare const splitTypes: (types: any) => any;
+export declare const sumTypes: (types: any) => any;
+export declare const createTypeModifiers: (types: any) => any;
+export declare const findType: (num: any, { returnObject }?: {
+    returnObject?: boolean;
+}) => string | [string, number];
+export declare const findNearestTypes: (num: any) => any[];
+export declare const isValidSpaceProp: (prop: any) => boolean;
+export declare const removeSpaceProps: ({ ...props }: {
+    [x: string]: any;
+}) => {
+    [x: string]: any;
+};
+export declare const createSpacingClasses: (props: any, Element?: any) => any[];
+export declare const createStyleObject: (props: any) => {};
+export declare const isInline: (Element: any) => boolean;

package/es/components/space/SpacingUtils.js

@@ -0,0 +1,225 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { warn } from '../../shared/component-helper';
+export const spacingDefaultProps = {
+  space: null,
+  top: null,
+  right: null,
+  bottom: null,
+  left: null
+};
+export const spacePatterns = {
+  'xx-small': 0.25,
+  'x-small': 0.5,
+  small: 1,
+  medium: 1.5,
+  large: 2,
+  'x-large': 3,
+  'xx-large': 3.5,
+  'xx-large-x2': 7
+};
+export const translateSpace = type => {
+  if (/-x2$/.test(type)) {
+    return spacePatterns[type.replace(/-x2$/, '')] * 2;
+  }
+
+  return spacePatterns[type] || 0;
+};
+export const splitTypes = types => {
+  if (typeof types === 'string') {
+    types = types.split(/ /g);
+  } else if (typeof types === 'boolean') {
+    return ['small'];
+  } else if (typeof types === 'number') {
+    return [types];
+  }
+
+  return types ? types.filter(r => r && r.length > 0) : null;
+};
+export const sumTypes = types => splitTypes(types).map(type => translateSpace(type)).reduce((acc, cur) => {
+  if (cur > 0) {
+    acc += cur;
+  } else if (cur < 0) {
+    acc -= cur;
+  }
+
+  return acc;
+}, 0);
+export const createTypeModifiers = types => {
+  if (typeof types === 'number') {
+    types = String(types);
+  }
+
+  return (splitTypes(types) || []).reduce((acc, type) => {
+    if (type) {
+      const firstLetter = type[0];
+
+      if (parseFloat(firstLetter) > -1) {
+        let num = parseFloat(type);
+
+        if (num >= 8 && /[0-9]px/.test(type)) {
+          num = num / 16;
+        }
+
+        const foundType = findType(num);
+
+        if (foundType) {
+          type = foundType;
+        } else {
+          findNearestTypes(num).forEach(type => {
+            if (type) {
+              acc.push(type);
+            }
+          });
+        }
+      }
+
+      if (!(parseFloat(type) > 0)) {
+        acc.push(type);
+      }
+    }
+
+    return acc;
+  }, []);
+};
+export const findType = (num, {
+  returnObject = false
+} = {}) => {
+  const found = Object.entries(spacePatterns).find(([k, v]) => k && v === num) || null;
+
+  if (returnObject) {
+    return found;
+  }
+
+  if (found) {
+    return found[0];
+  }
+
+  return found;
+};
+export const findNearestTypes = num => {
+  let res = [];
+  const near = Object.entries(spacePatterns).reverse().find(([k, v]) => k && num >= v);
+  const nearNum = near && near[1] || num;
+  const typeObject = findType(nearNum, {
+    returnObject: true
+  });
+
+  if (typeObject) {
+    const nearType = typeObject[0];
+    res.push(nearType);
+    const leftOver = num - parseFloat(String(typeObject[1]));
+    const foundMoreTypes = findNearestTypes(leftOver);
+    foundMoreTypes.forEach(type => {
+      const index = res.indexOf(type);
+
+      if (index !== -1) {
+        res[index] = `${type}-x2`;
+      }
+    });
+    res = [...res, ...foundMoreTypes];
+  }
+
+  return res;
+};
+export const isValidSpaceProp = prop => prop && ['top', 'right', 'bottom', 'left'].includes(prop);
+export const removeSpaceProps = _ref => {
+  let props = _extends({}, _ref);
+
+  for (const i in props) {
+    if (isValidSpaceProp(i)) {
+      delete props[i];
+    }
+  }
+
+  return props;
+};
+export const createSpacingClasses = (props, Element = null) => {
+  if (typeof props.space !== 'undefined') {
+    if (typeof props.space === 'string' || typeof props.space === 'number' || typeof props.space === 'boolean' && props.space) {
+      props.top = props.right = props.bottom = props.left = props.space;
+    }
+
+    for (const i in props.space) {
+      if (!props[i] && isValidSpaceProp(i)) {
+        props[i] = props.space[i];
+      }
+    }
+
+    delete props.space;
+  }
+
+  return Object.entries(props).reduce((acc, [direction, cur]) => {
+    if (isValidSpaceProp(direction)) {
+      if (String(cur) === '0' || String(cur) === 'false') {
+        acc.push(`dnb-space__${direction}--zero`);
+      } else if (cur) {
+        const typeModifiers = createTypeModifiers(cur);
+        const sum = sumTypes(typeModifiers);
+
+        if (sum > 10) {
+          warn(`Spacing of more than 10rem is not supported! You used ${sum} / (${typeModifiers.join(',')})`);
+        } else {
+          const nearestTypes = findNearestTypes(sum);
+          acc = [...acc, ...nearestTypes.map(type => `dnb-space__${direction}--${type}`)];
+        }
+      }
+    } else if (direction === 'no_collapse') {
+      acc.push('dnb-space--no-collapse');
+
+      if (Element && isInline(Element)) {
+        acc.push('dnb-space--inline');
+      }
+    }
+
+    return acc;
+  }, []);
+};
+export const createStyleObject = props => {
+  if (props.top && !(parseFloat(props.top) > 0)) {
+    props.top = sumTypes(props.top);
+  }
+
+  if (props.bottom && !(parseFloat(props.bottom) > 0)) {
+    props.bottom = sumTypes(props.bottom);
+  }
+
+  if (props.left && !(parseFloat(props.left) > 0)) {
+    props.left = sumTypes(props.left);
+  }
+
+  if (props.right && !(parseFloat(props.right) > 0)) {
+    props.right = sumTypes(props.right);
+  }
+
+  return Object.entries({
+    marginTop: props.top && `${props.top}rem`,
+    marginBottom: props.bottom && `${props.bottom}rem`,
+    maxWidth: props.maxWidth && `${props.maxWidth}rem`,
+    maxHeight: props.maxHeight && `${props.maxHeight}rem`,
+    width: props.width && `${props.width}rem`,
+    height: props.height && `${props.height}rem`
+  }).reduce((acc, [key, val]) => {
+    if (typeof val !== 'undefined') {
+      acc[key] = val;
+    }
+
+    return acc;
+  }, {});
+};
+export const isInline = Element => {
+  let inline = false;
+
+  switch (Element) {
+    case 'h1':
+    case 'h2':
+    case 'h3':
+    case 'h4':
+    case 'h5':
+    case 'h6':
+    case 'p':
+      inline = true;
+      break;
+  }
+
+  return inline;
+};

package/es/components/space/types.d.ts

@@ -0,0 +1,34 @@
+export declare type SpacingElementProps = {
+    /**
+     * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+     *
+     */
+    top?: SpaceTypes;
+    /**
+     * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+     *
+     */
+    right?: SpaceTypes;
+    /**
+     * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+     *
+     */
+    bottom?: SpaceTypes;
+    /**
+     * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+     *
+     */
+    left?: SpaceTypes;
+};
+export declare type SpaceTypes = string | boolean | number;
+export declare type SpacingProps = SpacingElementProps & {
+    space?: SpaceTypes | SpacingElementProps;
+};
+/**
+ * @deprecated Use SpacingElementProps instead
+ */
+export declare type ISpacingElementProps = SpacingElementProps;
+/**
+ * @deprecated Use SpacingProps instead
+ */
+export declare type ISpacingProps = SpacingProps;

package/es/components/space/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/step-indicator/StepIndicatorItem.js

@@ -7,7 +7,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { isTrue, makeUniqueId, dispatchCustomElementEvent } from '../../shared/component-helper';
-import AnimateHeight from '../../shared/AnimateHeight';
+import HeightAnimationInstance from '../height-animation/HeightAnimationInstance';
 import Button from '../button/Button';
 import Icon from '../icon/Icon';
 import { WarnIcon, InfoIcon, ErrorIcon } from '../../components/form-status/FormStatus';
@@ -49,7 +49,7 @@ export default class StepIndicatorItem extends React.PureComponent {
 
     _defineProperty(this, "canWarn", () => typeof process !== 'undefined' && process.env.NODE_ENV === 'development');
 
-    this._heightAnim = new AnimateHeight({
+    this._heightAnim = new HeightAnimationInstance({
       animate: !isTrue(context.no_animation)
     });
     this._ref = React.createRef();

package/es/components/step-indicator/StepIndicatorTriggerButton.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import Button from '../button/Button';
 import chevron_icon from '../../icons/chevron_right_medium';
 import { validateDOMAttributes, combineDescribedBy, isTrue } from '../../shared/component-helper';
-import AnimateHeight from '../../shared/AnimateHeight';
+import HeightAnimationInstance from '../height-animation/HeightAnimationInstance';
 import { createSpacingClasses } from '../space/SpacingHelper';
 import FormLabel from '../form-label/FormLabel';
 import StepIndicatorContext from './StepIndicatorContext';
@@ -20,7 +20,7 @@ import { skeletonDOMAttributes, createSkeletonClass } from '../skeleton/Skeleton
 export default class StepIndicatorTriggerButton extends React.PureComponent {
   constructor(props, context) {
     super(props);
-    this._heightAnim = new AnimateHeight({
+    this._heightAnim = new HeightAnimationInstance({
       animate: !isTrue(context.no_animation)
     });
     this._buttonRef = props.inner_ref || React.createRef();

package/es/components/step-indicator/style/_step-indicator.scss

@@ -62,7 +62,7 @@
     border-radius: 0.25rem;
 
     will-change: height;
-    transition: height 400ms #{$defaultEasing};
+    transition: height 400ms var(--easing-default);
 
     html[data-visual-test] & {
       transition-duration: 1ms !important;

package/es/components/step-indicator/style/dnb-step-indicator.css

@@ -224,12 +224,16 @@
   opacity: 0;
   visibility: hidden;
   -webkit-transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
-  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+  -webkit-transition: opacity 200ms var(--easing-default);
+  transition: opacity 200ms var(--easing-default); }
   .dnb-tooltip--large {
     padding: 0.25rem 1rem; }
   .dnb-tooltip--animate_position {
     -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1);
-    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+    -webkit-transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default);
+    transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); }
   .dnb-tooltip--active {
     visibility: visible;
     /*
@@ -237,14 +241,20 @@
       also, use forwards because of the usage of visibility
     */
     -webkit-animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: show-tooltip 200ms var(--easing-default) forwards;
+            animation: show-tooltip 200ms var(--easing-default) forwards; }
   html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
     -webkit-animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: show-tooltip 1ms var(--easing-default) forwards;
+            animation: show-tooltip 1ms var(--easing-default) forwards; }
   .dnb-tooltip--hide {
     visibility: visible;
     -webkit-animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: hide-tooltip 200ms var(--easing-default) forwards;
+            animation: hide-tooltip 200ms var(--easing-default) forwards; }
   .dnb-tooltip--hide.dnb-tooltip--no-animation {
     -webkit-animation: hide-tooltip 1ms linear forwards;
             animation: hide-tooltip 1ms linear forwards; }
@@ -410,7 +420,9 @@
   display: flex;
   opacity: 1;
   -webkit-transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1);
-  transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1); }
+  transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1);
+  -webkit-transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
+  transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); }
   .dnb-form-status--hidden {
     will-change: height, opacity, margin, padding;
     width: 0;
@@ -998,7 +1010,9 @@ button.dnb-button::-moz-focus-inner {
   border-radius: 0.25rem;
   will-change: height;
   -webkit-transition: height 400ms cubic-bezier(0.42, 0, 0, 1);
-  transition: height 400ms cubic-bezier(0.42, 0, 0, 1); }
+  transition: height 400ms cubic-bezier(0.42, 0, 0, 1);
+  -webkit-transition: height 400ms var(--easing-default);
+  transition: height 400ms var(--easing-default); }
   .dnb-step-indicator-v2 .dnb-step-indicator__trigger__button .dnb-button__text,
   .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button .dnb-button__text {
     text-align: left; }