@dnb/eufemia 9.16.3 → 9.18.0

package/cjs/components/modal/{ModalHeader.js → components/ModalHeaderBar.js}

@@ -8,14 +8,8 @@ require("core-js/modules/es.object.to-string.js");
 
 require("core-js/modules/es.reflect.construct.js");
 
-require("core-js/modules/es.object.keys.js");
-
-require("core-js/modules/es.array.index-of.js");
-
 require("core-js/modules/es.symbol.js");
 
-require("core-js/modules/es.object.assign.js");
-
 require("core-js/modules/es.symbol.description.js");
 
 require("core-js/modules/es.symbol.iterator.js");
@@ -34,34 +28,38 @@ require("core-js/modules/es.array.from.js");
 
 require("core-js/modules/es.regexp.exec.js");
 
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.array.index-of.js");
+
+require("core-js/modules/es.object.assign.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ModalHeaderBar = exports.CloseButton = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _componentHelper = require("../../shared/component-helper");
+var _componentHelper = require("../../../shared/component-helper");
 
-var _Section = _interopRequireDefault(require("../section/Section"));
+var _Section = _interopRequireDefault(require("../../section/Section"));
 
-var _ModalContext = _interopRequireDefault(require("./ModalContext"));
+var _ModalContext = _interopRequireDefault(require("../ModalContext"));
 
-var _Button = _interopRequireDefault(require("../button/Button"));
+var _CloseButton = _interopRequireDefault(require("./CloseButton"));
 
-var _H = _interopRequireDefault(require("../../elements/H1"));
+var _excluded = ["className", "children", "ref"];
 
-var _Context = _interopRequireDefault(require("../../shared/Context"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _excluded = ["title", "className", "children"],
-    _excluded2 = ["className", "children"],
-    _excluded3 = ["on_click", "close_title", "className"];
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -75,12 +73,6 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -103,73 +95,21 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var ModalHeader = function (_React$PureComponent) {
-  _inherits(ModalHeader, _React$PureComponent);
-
-  var _super = _createSuper(ModalHeader);
-
-  function ModalHeader() {
-    _classCallCheck(this, ModalHeader);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(ModalHeader, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          title = _this$props.title,
-          className = _this$props.className,
-          children = _this$props.children,
-          props = _objectWithoutProperties(_this$props, _excluded);
-
-      var customHeader = (0, _componentHelper.findElementInChildren)(children, function (cur) {
-        return cur.type === 'h1' || cur.type === _H.default;
-      });
-      var usedTitle = title || this.context.title;
-      var showTitle = !customHeader && usedTitle;
-      return _react.default.createElement(_Section.default, _extends({
-        style_type: "white",
-        className: (0, _classnames.default)('dnb-modal__header', className),
-        id: showTitle ? 'dnb-modal-' + this.context.id + '-title' : undefined
-      }, props), showTitle && _react.default.createElement("h1", {
-        className: "dnb-modal__title dnb-space__top--zero dnb-space__bottom--small " + (this.context.mode === 'drawer' ? 'dnb-h--x-large' : 'dnb-h--large')
-      }, usedTitle), _react.default.createElement("div", {
-        className: "dnb-modal__header__inner"
-      }, children));
-    }
-  }]);
-
-  return ModalHeader;
-}(_react.default.PureComponent);
-
-exports.default = ModalHeader;
-
-_defineProperty(ModalHeader, "contextType", _ModalContext.default);
-
-_defineProperty(ModalHeader, "defaultProps", {
-  children: null,
-  title: null,
-  className: null
-});
-
-process.env.NODE_ENV !== "production" ? ModalHeader.propTypes = {
-  children: _propTypes.default.node,
-  title: _propTypes.default.node,
-  className: _propTypes.default.string
-} : void 0;
-
-var ModalHeaderBar = function (_React$PureComponent2) {
-  _inherits(ModalHeaderBar, _React$PureComponent2);
+var ModalHeaderBar = function (_React$PureComponent) {
+  _inherits(ModalHeaderBar, _React$PureComponent);
 
-  var _super2 = _createSuper(ModalHeaderBar);
+  var _super = _createSuper(ModalHeaderBar);
 
   function ModalHeaderBar(props) {
     var _this;
 
     _classCallCheck(this, ModalHeaderBar);
 
-    _this = _super2.call(this, props);
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "_ref", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "intersectionObserver", void 0);
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       showShadow: false
@@ -210,97 +150,45 @@ var ModalHeaderBar = function (_React$PureComponent2) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          className = _this$props2.className,
-          children = _this$props2.children,
-          props = _objectWithoutProperties(_this$props2, _excluded2);
+      var _this$props = this.props,
+          _this$props$className = _this$props.className,
+          className = _this$props$className === void 0 ? null : _this$props$className,
+          _this$props$children = _this$props.children,
+          children = _this$props$children === void 0 ? null : _this$props$children,
+          ref = _this$props.ref,
+          props = _objectWithoutProperties(_this$props, _excluded);
+
+      var showShadow = this.state.showShadow;
+      var _this$context = this.context,
+          title = _this$context.title,
+          _this$context$hide_cl = _this$context.hide_close_button,
+          hide_close_button = _this$context$hide_cl === void 0 ? false : _this$context$hide_cl,
+          close_button_attributes = _this$context.close_button_attributes,
+          onCloseClickHandler = _this$context.onCloseClickHandler,
+          close_title = _this$context.close_title;
 
-      if (!this.context.title && (0, _componentHelper.isTrue)(this.context.hide_close_button) && !this._ref.current) {
+      if (!title && (0, _componentHelper.isTrue)(hide_close_button) && !this._ref.current) {
         return null;
       }
 
       return _react.default.createElement(_Section.default, _extends({
         style_type: "white",
-        className: (0, _classnames.default)('dnb-modal__header__bar', className, this.state.showShadow && 'dnb-modal__header__bar--sticky'),
+        className: (0, _classnames.default)('dnb-modal__header__bar', className, showShadow && 'dnb-modal__header__bar--sticky'),
         inner_ref: this._ref
       }, props), _react.default.createElement("div", {
         className: "dnb-modal__header__bar__inner"
-      }, children), !(0, _componentHelper.isTrue)(this.context.hide_close_button) && _react.default.createElement("div", {
+      }, children), !(0, _componentHelper.isTrue)(hide_close_button) && _react.default.createElement("div", {
         className: "dnb-modal__header__bar__close"
-      }, _react.default.createElement(CloseButton, _extends({
-        on_click: this.context.onCloseClickHandler,
-        close_title: this.context.close_title
-      }, this.context.close_button_attributes))));
+      }, _react.default.createElement(_CloseButton.default, _extends({
+        on_click: onCloseClickHandler,
+        close_title: close_title
+      }, close_button_attributes))));
     }
   }]);
 
   return ModalHeaderBar;
 }(_react.default.PureComponent);
 
-exports.ModalHeaderBar = ModalHeaderBar;
-
-_defineProperty(ModalHeaderBar, "contextType", _ModalContext.default);
-
-_defineProperty(ModalHeaderBar, "defaultProps", {
-  children: null,
-  className: null
-});
-
-process.env.NODE_ENV !== "production" ? ModalHeaderBar.propTypes = {
-  children: _propTypes.default.node,
-  className: _propTypes.default.string
-} : void 0;
-
-var CloseButton = function (_React$PureComponent3) {
-  _inherits(CloseButton, _React$PureComponent3);
-
-  var _super3 = _createSuper(CloseButton);
-
-  function CloseButton() {
-    _classCallCheck(this, CloseButton);
-
-    return _super3.apply(this, arguments);
-  }
-
-  _createClass(CloseButton, [{
-    key: "render",
-    value: function render() {
-      var _extendPropsWithConte = (0, _componentHelper.extendPropsWithContext)(this.props, CloseButton.defaultProps, this.context.getTranslation(this.props).Modal),
-          on_click = _extendPropsWithConte.on_click,
-          close_title = _extendPropsWithConte.close_title,
-          _extendPropsWithConte2 = _extendPropsWithConte.className,
-          className = _extendPropsWithConte2 === void 0 ? null : _extendPropsWithConte2,
-          rest = _objectWithoutProperties(_extendPropsWithConte, _excluded3);
-
-      return _react.default.createElement(_Button.default, _extends({
-        type: "button",
-        text: close_title,
-        variant: "tertiary",
-        className: (0, _classnames.default)('dnb-modal__close-button', className),
-        icon: "close",
-        on_click: on_click
-      }, rest));
-    }
-  }]);
-
-  return CloseButton;
-}(_react.default.PureComponent);
-
-exports.CloseButton = CloseButton;
-
-_defineProperty(CloseButton, "contextType", _Context.default);
-
-_defineProperty(CloseButton, "defaultProps", {
-  close_title: null,
-  size: 'large',
-  icon_position: 'left',
-  className: null
-});
+exports.default = ModalHeaderBar;
 
-process.env.NODE_ENV !== "production" ? CloseButton.propTypes = {
-  on_click: _propTypes.default.func.isRequired,
-  close_title: _propTypes.default.string,
-  size: _propTypes.default.string,
-  icon_position: _propTypes.default.string,
-  className: _propTypes.default.string
-} : void 0;
+_defineProperty(ModalHeaderBar, "contextType", _ModalContext.default);

package/cjs/components/modal/{ModalInner.js → components/ModalInner.js}

@@ -33,15 +33,13 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _Section = _interopRequireDefault(require("../section/Section"));
+var _Section = _interopRequireDefault(require("../../section/Section"));
 
-var _ModalContext = _interopRequireDefault(require("./ModalContext"));
+var _ModalContext = _interopRequireDefault(require("../ModalContext"));
 
-var _excluded = ["className", "style_type"];
+var _excluded = ["className", "style_type", "ref"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -87,7 +85,8 @@ var ModalInner = function (_React$PureComponent) {
   _createClass(ModalInner, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var style_type = this.props.style_type;
+      var _this$props$style_typ = this.props.style_type,
+          style_type = _this$props$style_typ === void 0 ? 'black-3' : _this$props$style_typ;
 
       if (style_type) {
         this.context.setBackgroundColor(style_type);
@@ -97,8 +96,11 @@ var ModalInner = function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          className = _this$props.className,
-          style_type = _this$props.style_type,
+          _this$props$className = _this$props.className,
+          className = _this$props$className === void 0 ? null : _this$props$className,
+          _this$props$style_typ2 = _this$props.style_type,
+          style_type = _this$props$style_typ2 === void 0 ? 'black-3' : _this$props$style_typ2,
+          ref = _this$props.ref,
           props = _objectWithoutProperties(_this$props, _excluded);
 
       return _react.default.createElement(_Section.default, _extends({
@@ -113,14 +115,4 @@ var ModalInner = function (_React$PureComponent) {
 
 exports.default = ModalInner;
 
-_defineProperty(ModalInner, "contextType", _ModalContext.default);
-
-_defineProperty(ModalInner, "defaultProps", {
-  style_type: 'black-3',
-  className: null
-});
-
-process.env.NODE_ENV !== "production" ? ModalInner.propTypes = {
-  style_type: _propTypes.default.string,
-  className: _propTypes.default.string
-} : void 0;
+_defineProperty(ModalInner, "contextType", _ModalContext.default);

package/cjs/components/modal/helpers.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addToIndex = addToIndex;
+exports.getListOfModalRoots = getListOfModalRoots;
+exports.getModalRoot = getModalRoot;
+exports.removeFromIndex = removeFromIndex;
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+var _componentHelper = require("../../shared/component-helper");
+
+function getListOfModalRoots() {
+  if (typeof window !== 'undefined') {
+    try {
+      var stack = window.__modalStack || [];
+      return stack;
+    } catch (e) {
+      (0, _componentHelper.warn)(e);
+    }
+  }
+
+  return [];
+}
+
+function getModalRoot(index) {
+  if (typeof window !== 'undefined') {
+    try {
+      var stack = window.__modalStack || [];
+
+      if (index !== null) {
+        if (index === -1 && stack.length) {
+          return stack[stack.length - 1];
+        } else if (index > -1) {
+          return stack[index];
+        }
+      }
+
+      return null;
+    } catch (e) {
+      (0, _componentHelper.warn)(e);
+    }
+  }
+
+  return null;
+}
+
+function addToIndex(elem) {
+  if (typeof window !== 'undefined') {
+    try {
+      if (!Array.isArray(window.__modalStack)) {
+        window.__modalStack = [];
+      }
+
+      window.__modalStack.push(elem);
+    } catch (e) {
+      (0, _componentHelper.warn)(e);
+    }
+  }
+}
+
+function removeFromIndex(elem) {
+  if (typeof window !== 'undefined') {
+    try {
+      if (!Array.isArray(window.__modalStack)) {
+        window.__modalStack = [];
+      }
+
+      window.__modalStack = window.__modalStack.filter(function (cur) {
+        return cur !== elem;
+      });
+    } catch (e) {
+      (0, _componentHelper.warn)(e);
+    }
+  }
+}

package/cjs/components/modal/style/_modal-mixins.scss

@@ -85,17 +85,17 @@
 
 @keyframes show-modal-overlay {
   from {
-    background-color: var(--modal-overlay-transparent);
+    opacity: 0;
   }
   to {
-    background-color: var(--modal-overlay-bg);
+    opacity: var(--modal-overlay-opacity);
   }
 }
 @keyframes hide-modal-overlay {
   from {
-    background-color: var(--modal-overlay-bg);
+    opacity: var(--modal-overlay-opacity);
   }
   to {
-    background-color: var(--modal-overlay-transparent);
+    opacity: 0;
   }
 }

package/cjs/components/modal/style/_modal.scss

@@ -23,8 +23,8 @@
   --modal-drawer-header-min-height: 6rem;
 
   // Overlay
-  --modal-overlay-transparent: rgba(0, 0, 0, 0);
-  --modal-overlay-bg: rgba(0, 0, 0, 0.32);
+  --modal-overlay-bg: black;
+  --modal-overlay-opacity: 0.32;
 }
 
 html[data-dnb-modal-active] {
@@ -390,39 +390,22 @@ html[data-dnb-modal-active] {
     width: 100%;
     height: 100%;
 
-    will-change: background-color;
-    background-color: var(--modal-overlay-transparent);
-    box-shadow: 0 100vh 0 0 var(--modal-overlay-bg);
-
-    // Modal & Drawer mode
-    &--modal {
-      animation: show-modal-overlay var(--modal-animation-duration)
-        ease-out forwards 0ms;
-    }
-    &--drawer {
-      animation: show-modal-overlay var(--modal-animation-duration)
-        ease-out forwards 100ms;
-    }
-    &--hide {
-      animation: hide-modal-overlay var(--modal-animation-duration)
-        ease-in-out forwards;
-    }
+    background-color: var(--modal-overlay-bg);
   }
 
   &-root__inner &__overlay {
-    opacity: 0;
-    transition: opacity 300ms ease-in-out;
+    animation: hide-modal-overlay var(--modal-animation-duration)
+      ease-in-out forwards;
   }
-  // We may possibly use something like this to avoid the transition
-  // when there are several stacked modals
-  // &-root__inner:nth-of-type(n + 2) &__overlay {
-  //   animation-duration: 0ms !important;
-  // }
+
   &-root__inner:last-of-type &__overlay {
-    opacity: 1;
-  }
-  html[data-visual-test] &-root__inner &__overlay {
-    transition: none;
+    animation: show-modal-overlay var(--modal-animation-duration) ease-out
+      forwards 0ms;
+
+    &--hide {
+      animation: hide-modal-overlay var(--modal-animation-duration)
+        ease-in-out forwards;
+    }
   }
 
   /* stylelint-disable-next-line */

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

@@ -489,8 +489,6 @@
     padding-left: 1rem; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
     padding-right: 1rem; }
-  .dnb-button--tertiary .dnb-button__text {
-    margin: 0; }
   .dnb-button--has-text {
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {
@@ -792,35 +790,31 @@ button.dnb-button::-moz-focus-inner {
 
 @-webkit-keyframes show-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); }
+    opacity: 0; }
   to {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); } }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); } }
 
 @keyframes show-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); }
+    opacity: 0; }
   to {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); } }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); } }
 
 @-webkit-keyframes hide-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); }
   to {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); } }
+    opacity: 0; } }
 
 @keyframes hide-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); }
   to {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); } }
+    opacity: 0; } }
 
 :root {
   --modal-z-index: 3000;
@@ -834,8 +828,8 @@ button.dnb-button::-moz-focus-inner {
   --modal-drawer-min-width: 25rem;
   --modal-drawer-max-width: 40rem;
   --modal-drawer-header-min-height: 6rem;
-  --modal-overlay-transparent: rgba(0, 0, 0, 0);
-  --modal-overlay-bg: rgba(0, 0, 0, 0.32); }
+  --modal-overlay-bg: black;
+  --modal-overlay-opacity: 0.32; }
 
 html[data-dnb-modal-active] {
   -moz-user-select: none;
@@ -1234,37 +1228,23 @@ html[data-dnb-modal-active] {
     top: 0;
     width: 100%;
     height: 100%;
-    will-change: background-color;
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent);
-    -webkit-box-shadow: 0 100vh 0 0 rgba(0, 0, 0, 0.32);
-            box-shadow: 0 100vh 0 0 rgba(0, 0, 0, 0.32);
-    -webkit-box-shadow: 0 100vh 0 0 var(--modal-overlay-bg);
-            box-shadow: 0 100vh 0 0 var(--modal-overlay-bg); }
-    .dnb-modal__overlay--modal {
-      -webkit-animation: show-modal-overlay 300ms ease-out forwards 0ms;
-              animation: show-modal-overlay 300ms ease-out forwards 0ms;
-      -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms;
-              animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
-    .dnb-modal__overlay--drawer {
-      -webkit-animation: show-modal-overlay 300ms ease-out forwards 100ms;
-              animation: show-modal-overlay 300ms ease-out forwards 100ms;
-      -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 100ms;
-              animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 100ms; }
-    .dnb-modal__overlay--hide {
+    background-color: black;
+    background-color: var(--modal-overlay-bg); }
+  .dnb-modal-root__inner .dnb-modal__overlay {
+    -webkit-animation: hide-modal-overlay 300ms ease-in-out forwards;
+            animation: hide-modal-overlay 300ms ease-in-out forwards;
+    -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards;
+            animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+  .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
+    -webkit-animation: show-modal-overlay 300ms ease-out forwards 0ms;
+            animation: show-modal-overlay 300ms ease-out forwards 0ms;
+    -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms;
+            animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
+    .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide {
       -webkit-animation: hide-modal-overlay 300ms ease-in-out forwards;
               animation: hide-modal-overlay 300ms ease-in-out forwards;
       -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards;
               animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
-  .dnb-modal-root__inner .dnb-modal__overlay {
-    opacity: 0;
-    -webkit-transition: opacity 300ms ease-in-out;
-    transition: opacity 300ms ease-in-out; }
-  .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
-    opacity: 1; }
-  html[data-visual-test] .dnb-modal-root__inner .dnb-modal__overlay {
-    -webkit-transition: none;
-    transition: none; }
   html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
     -webkit-animation-delay: 0ms !important;
             animation-delay: 0ms !important;