@crystaldesign/diva-core 25.11.0-beta.8 → 25.11.0-rc.0

package/build/esm/{index-3627d08f.js → index-0c20a95b.js}

@@ -26,18 +26,17 @@ import { StyledEngineProvider, ThemeProvider, createTheme } from '@mui/material/
 import { enUS, itIT, frFR, deDE } from '@mui/material/locale';
 import { withTransaction } from '@elastic/apm-rum-react';
 import Typography from '@mui/material/Typography';
-import { useTranslation, Trans, I18nextProvider } from 'react-i18next';
-import classnames from 'classnames';
-import Button from '@mui/material/Button';
+import { I18nextProvider, useTranslation } from 'react-i18next';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { ArrowBack } from '@mui/icons-material';
 import '@crystaldesign/basket-model';
 import debounce from 'lodash/debounce';
 import axios from 'axios';
 import { ProductHandlerAbstract } from '@crystaldesign/product-handler';
-import { useSwipeable } from 'react-swipeable';
+import classnames from 'classnames';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { Drawer } from 'vaul';
 import { ContentBoxComponent } from '@crystaldesign/content-box';
-import { Button as Button$1, Snackbar, SnackbarContent, IconButton, Card, CardHeader, CardContent } from '@mui/material';
+import { Button, Snackbar, SnackbarContent, IconButton, Card, CardHeader, CardContent } from '@mui/material';
 import { useTranslation as useTranslation$1, useDivaCore as useDivaCore$1 } from '@crystaldesign/diva-core';
 import QRCode from 'react-qr-code';
 import CloseIcon from '@mui/icons-material/Close';
@@ -47,7 +46,7 @@ import { actions } from '@storybook/addon-actions';
 import * as Styles from '@mui/styles';
 
 (function() {
-    const env = {"STAGE":"production","VERSION":"25.11.0-beta.8"};
+    const env = {"STAGE":"production","VERSION":"25.11.0-rc.0"};
     try {
         if (process) {
             process.env = Object.assign({}, process.env);
@@ -124,8 +123,8 @@ function baseUrl() {
   return urlParts[urlParts.length - 2] + '.' + urlParts[urlParts.length - 1];
 }
 
-function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _existingLogger = new Map();
 var _apmInitialized = false;
 var _onErrorEvent = function _onErrorEvent() {};
@@ -206,9 +205,9 @@ var ApplicationLogger = /*#__PURE__*/function () {
       this.transactions["delete"](eventId);
       event.end = end;
       var cleanLabels = this.cleanLabels(labels);
-      event.event.labels = _objectSpread$h(_objectSpread$h({}, event.event.labels), cleanLabels);
+      event.event.labels = _objectSpread$f(_objectSpread$f({}, event.event.labels), cleanLabels);
       if (event.event.span) {
-        event.event.span.addLabels(_objectSpread$h(_objectSpread$h(_objectSpread$h({}, event.event.labels), cleanLabels), {}, {
+        event.event.span.addLabels(_objectSpread$f(_objectSpread$f(_objectSpread$f({}, event.event.labels), cleanLabels), {}, {
           eventId: eventId
         }));
         event.event.span.end();
@@ -216,7 +215,7 @@ var ApplicationLogger = /*#__PURE__*/function () {
       clearTimeout(event.event.warningTimeout);
       clearTimeout(event.event.errorTimeout);
       this.debug("Transaction ".concat(event.event.type, " (").concat(event.event.message, ") took ").concat(Math.floor(end - event.start), "ms"));
-      DivaUtils.businessMetrics.logEvent(event.event.type, this.module, event.event.message, _objectSpread$h(_objectSpread$h(_objectSpread$h({}, event.event.labels), cleanLabels), {}, {
+      DivaUtils.businessMetrics.logEvent(event.event.type, this.module, event.event.message, _objectSpread$f(_objectSpread$f(_objectSpread$f({}, event.event.labels), cleanLabels), {}, {
         eventId: eventId,
         status: event.event.timeout ? 'TIMEOUT' : 'SUCCESS',
         eventDuration: Math.floor(end - event.start),
@@ -251,9 +250,9 @@ var ApplicationLogger = /*#__PURE__*/function () {
       }
       event.end = end;
       var cleanLabels = this.cleanLabels(labels);
-      event.event.labels = _objectSpread$h(_objectSpread$h({}, event.event.labels), cleanLabels);
+      event.event.labels = _objectSpread$f(_objectSpread$f({}, event.event.labels), cleanLabels);
       if (event.event.span) {
-        event.event.span.addLabels(_objectSpread$h(_objectSpread$h(_objectSpread$h({}, event.event.labels), cleanLabels), {}, {
+        event.event.span.addLabels(_objectSpread$f(_objectSpread$f(_objectSpread$f({}, event.event.labels), cleanLabels), {}, {
           eventId: eventId
         }));
         event.event.span.end();
@@ -261,7 +260,7 @@ var ApplicationLogger = /*#__PURE__*/function () {
       clearTimeout(event.event.warningTimeout);
       clearTimeout(event.event.errorTimeout);
       this.debug("Transaction ".concat(event.event.type, " (").concat(event.event.message, ") failed after ").concat(Math.floor(end - event.start), "ms"));
-      DivaUtils.businessMetrics.logEvent(event.event.type, this.module, event.event.message, _objectSpread$h(_objectSpread$h(_objectSpread$h({}, event.event.labels), cleanLabels), {}, {
+      DivaUtils.businessMetrics.logEvent(event.event.type, this.module, event.event.message, _objectSpread$f(_objectSpread$f(_objectSpread$f({}, event.event.labels), cleanLabels), {}, {
         error: code,
         errorMessage: message,
         eventId: eventId,
@@ -360,7 +359,7 @@ var ApplicationLogger = /*#__PURE__*/function () {
       _onErrorEvent(_error.message, _error.name);
 
       //for apm we spread the custom object directly on the error object, so that the are added to APM as custom attributes
-      var forApm = _objectSpread$h(_objectSpread$h({}, _error), _error.custom);
+      var forApm = _objectSpread$f(_objectSpread$f({}, _error), _error.custom);
       (_getApmInstance = getApmInstance()) === null || _getApmInstance === void 0 || _getApmInstance.captureError(forApm);
     }
   }, {
@@ -434,8 +433,8 @@ if (typeof __webpack_public_path__ !== 'undefined') {
   }
 }
 
-function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper$2(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$2() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct$2() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$2 = function _isNativeReflectConstruct() { return !!t; })(); }
 var LOG$e = getLogger('Framework', 'webcomponent');
@@ -484,6 +483,20 @@ var DivaFramework = /*#__PURE__*/function (_HTMLElement) {
         return JSON.parse(compAttr);
       }
       return undefined;
+    },
+    set: function set(val) {
+      if (val) {
+        this.setAttribute('defaultApiConfig', JSON.stringify(val));
+      } else this.removeAttribute('defaultApiConfig');
+    }
+  }, {
+    key: "analyticsProps",
+    get: function get() {
+      var compAttr = this.getAttribute('analyticsProps') || undefined;
+      if (compAttr) {
+        return JSON.parse(compAttr);
+      }
+      return undefined;
     }
 
     /**
@@ -491,8 +504,8 @@ var DivaFramework = /*#__PURE__*/function (_HTMLElement) {
      */,
     set: function set(val) {
       if (val) {
-        this.setAttribute('defaultApiConfig', JSON.stringify(val));
-      } else this.removeAttribute('defaultApiConfig');
+        this.setAttribute('analyticsProps', JSON.stringify(val));
+      } else this.removeAttribute('analyticsProps');
     }
   }, {
     key: "configUrl",
@@ -623,6 +636,7 @@ var DivaFramework = /*#__PURE__*/function (_HTMLElement) {
           organizationId: this.organizationId,
           identifier: this.identifier,
           telemetry: this.telemetry,
+          analyticsProps: this.analyticsProps,
           onEvent: this.onEvent.bind(this),
           ref: this.ref
         });
@@ -659,14 +673,14 @@ var CoreWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
   if (!components) {
     return /*#__PURE__*/jsx(Fragment, {});
   }
-  return /*#__PURE__*/jsx(DivaCore, _objectSpread$g(_objectSpread$g({}, props), {}, {
+  return /*#__PURE__*/jsx(DivaCore, _objectSpread$e(_objectSpread$e({}, props), {}, {
     components: components,
     ref: ref
   }));
 });
 
 //we have to externalize the materialUI styling here, so that also in UMD the same instance is used
-window.MaterialUIStyles = _objectSpread$g(_objectSpread$g({}, Styles), CoreStyles);
+window.MaterialUIStyles = _objectSpread$e(_objectSpread$e({}, Styles), CoreStyles);
 if (!window.customElements.get('diva-framework')) {
   window.customElements.define('diva-framework', DivaFramework);
 }
@@ -769,8 +783,8 @@ var defaultTheme = {
   }
 };
 
-function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LOG$d = getLogger('Framework', 'ConfigurationStore');
 var ConfigurationStore = /*#__PURE__*/function () {
   function ConfigurationStore(root, identifier, defaultApiConfig, domain) {
@@ -941,7 +955,7 @@ var ConfigurationStore = /*#__PURE__*/function () {
     key: "authentication",
     get: function get() {
       var _this$_configuration$3, _this$_configuration37, _this$_configuration38, _this$_configuration39, _this$_configuration40, _this$_configuration41, _this$_configuration42, _this$_configuration43, _this$_configuration44, _this$_configuration45, _this$_configuration$4, _this$_configuration46;
-      return _objectSpread$f(_objectSpread$f({}, (_this$_configuration$3 = (_this$_configuration37 = this._configuration) === null || _this$_configuration37 === void 0 ? void 0 : _this$_configuration37.authentication) !== null && _this$_configuration$3 !== void 0 ? _this$_configuration$3 : {}), {}, {
+      return _objectSpread$d(_objectSpread$d({}, (_this$_configuration$3 = (_this$_configuration37 = this._configuration) === null || _this$_configuration37 === void 0 ? void 0 : _this$_configuration37.authentication) !== null && _this$_configuration$3 !== void 0 ? _this$_configuration$3 : {}), {}, {
         loginMethods: {
           google: (_this$_configuration38 = this._configuration) !== null && _this$_configuration38 !== void 0 && (_this$_configuration38 = _this$_configuration38.authentication) !== null && _this$_configuration38 !== void 0 && _this$_configuration38.loginMethods ? (_this$_configuration39 = this._configuration) === null || _this$_configuration39 === void 0 || (_this$_configuration39 = _this$_configuration39.authentication) === null || _this$_configuration39 === void 0 ? void 0 : _this$_configuration39.loginMethods.google : true,
           microsoft: (_this$_configuration40 = this._configuration) !== null && _this$_configuration40 !== void 0 && (_this$_configuration40 = _this$_configuration40.authentication) !== null && _this$_configuration40 !== void 0 && _this$_configuration40.loginMethods ? (_this$_configuration41 = this._configuration) === null || _this$_configuration41 === void 0 || (_this$_configuration41 = _this$_configuration41.authentication) === null || _this$_configuration41 === void 0 ? void 0 : _this$_configuration41.loginMethods.microsoft : true,
@@ -1011,12 +1025,12 @@ var ConfigurationStore = /*#__PURE__*/function () {
       var _this$_configuration55;
       if ((_this$_configuration55 = this._configuration) !== null && _this$_configuration55 !== void 0 && _this$_configuration55.priceFormat) {
         var _this$_configuration56, _this$root$dataStore$2, _this$root$dataStore$3, _this$_configuration57;
-        return _objectSpread$f(_objectSpread$f({}, (_this$_configuration56 = this._configuration) === null || _this$_configuration56 === void 0 ? void 0 : _this$_configuration56.priceFormat), {}, {
+        return _objectSpread$d(_objectSpread$d({}, (_this$_configuration56 = this._configuration) === null || _this$_configuration56 === void 0 ? void 0 : _this$_configuration56.priceFormat), {}, {
           currency: (_this$root$dataStore$2 = (_this$root$dataStore$3 = this.root.dataStore.organization) === null || _this$root$dataStore$3 === void 0 ? void 0 : _this$root$dataStore$3.settings.defaultCurrency) !== null && _this$root$dataStore$2 !== void 0 ? _this$root$dataStore$2 : (_this$_configuration57 = this._configuration) === null || _this$_configuration57 === void 0 ? void 0 : _this$_configuration57.priceFormat.currency
         });
       } else {
         var _this$root$dataStore$4, _this$root$dataStore$5;
-        return _objectSpread$f(_objectSpread$f({}, DivaUtils.defaultPriceFormat), {}, {
+        return _objectSpread$d(_objectSpread$d({}, DivaUtils.defaultPriceFormat), {}, {
           currency: (_this$root$dataStore$4 = (_this$root$dataStore$5 = this.root.dataStore.organization) === null || _this$root$dataStore$5 === void 0 ? void 0 : _this$root$dataStore$5.settings.defaultCurrency) !== null && _this$root$dataStore$4 !== void 0 ? _this$root$dataStore$4 : DivaUtils.defaultPriceFormat.currency
         });
       }
@@ -1227,8 +1241,8 @@ function isIpadOS() {
   return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
 }
 
-function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LOG$c = getLogger('Framework', 'DataStore');
 var DataStore = /*#__PURE__*/function () {
   function DataStore(root) {
@@ -1266,8 +1280,8 @@ var DataStore = /*#__PURE__*/function () {
     key: "organization",
     get: function get() {
       var _settings$defaultCurr, _settings;
-      return this._organization ? _objectSpread$e(_objectSpread$e({}, this._organization), {}, {
-        settings: _objectSpread$e(_objectSpread$e({}, this._organization.settings), {}, {
+      return this._organization ? _objectSpread$c(_objectSpread$c({}, this._organization), {}, {
+        settings: _objectSpread$c(_objectSpread$c({}, this._organization.settings), {}, {
           defaultCurrency: (_settings$defaultCurr = (_settings = this._organization.settings) === null || _settings === void 0 ? void 0 : _settings.defaultCurrency) !== null && _settings$defaultCurr !== void 0 ? _settings$defaultCurr : '€'
         })
       }) : this._organization;
@@ -1308,7 +1322,7 @@ var DataStore = /*#__PURE__*/function () {
       return [].concat(_toConsumableArray(((_this$_organization$p = (_this$_organization$p2 = this._organization.parentOrganizations) === null || _this$_organization$p2 === void 0 ? void 0 : _this$_organization$p2.filter(function (org) {
         return _this._parentOrganizations.includes(org._id);
       })) !== null && _this$_organization$p !== void 0 ? _this$_organization$p : []).map(function (org) {
-        return _objectSpread$e(_objectSpread$e({}, org), {}, {
+        return _objectSpread$c(_objectSpread$c({}, org), {}, {
           type: org.type != 'SUPPLIER' ? org.parentType : undefined //supplier should not be accessed directly, only its children, so the simpliest solution is to remove here the type
         });
       }).reverse()), [{
@@ -1701,226 +1715,6 @@ function empty(p) {
   return !p || Object.keys(p).length == 0;
 }
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var titlecontainer = "titlecontainer-LeRMj";
-var auth = "auth-y9j9-";
-var loginBox = "login-box-Zu-QM";
-var logoContainer = "logo-container-Gujpy";
-var success = "success-7n9-D";
-var error = "error-gJyOw";
-var authButton = "auth-button-nvUhU";
-var buttonDisabled = "button-disabled-GS-ox";
-var socialButton = "social-button-p5pUa";
-var google = "google-WhFJU";
-var microsoft = "microsoft-e3GYR";
-var separator = "separator-Hg6fH";
-var input = "input--Dl8e";
-var readonly = "readonly-uw66l";
-var link = "link-s-Rcm";
-var css_248z$6 = ".titlecontainer-LeRMj {\n  text-align: center;\n  color: #474747;\n}\n\n.auth-y9j9- {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  background-color: rgba(255, 255, 255);\n  z-index: 3;\n  overflow: auto;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n}\n\n.login-box-Zu-QM {\n  padding: 20px;\n  width: 400px;\n  margin: 50px auto auto auto;\n  position: relative;\n}\n\n@media (max-height: 450px) {\n  .login-box-Zu-QM {\n    margin: auto;\n  }\n}\n\n.logo-container-Gujpy {\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  margin-bottom: 50px;\n}\n\n.success-7n9-D {\n  width: 100%;\n  padding: 12px;\n  border-radius: 4px;\n  margin: 15px 0;\n  box-sizing: border-box;\n  background-color: rgb(228, 244, 228);\n  color: rgb(17, 97, 73);\n  border: rgb(195, 231, 202) solid 1px;\n  border-left: solid 4px;\n  line-height: 20px;\n  font-size: 16px;\n  position: relative;\n}\n\n.success-7n9-D span {\n  width: 30px;\n  height: 100%;\n  float: left;\n  background-repeat: no-repeat;\n  background-image: url(\"data:image/svg+xml,%3Csvg fill%3D%22rgb(19%2C 170%2C 82)%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2230px%22 width%3D%2230px%22   viewBox%3D%220 0 24 24%22 %3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M8 15A7 7 0 108 1a7 7 0 000 14zm2.448-10.104a.997.997 0 111.508 1.306l-4.572 5.28a1 1 0 01-1.64-.07l-1.82-2.868a1 1 0 111.69-1.07l1.1 1.734 3.734-4.312z%22 fill%3D%22currentColor%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\");\n  position: absolute;\n}\n\n.success-7n9-D div {\n  text-align: justify;\n  margin-left: 30px;\n}\n\n[dir=\"ltr\"] .error-gJyOw {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .error-gJyOw {\n  text-align: right;\n}\n\n.error-gJyOw {\n  border-left: 4px solid red !important;\n}\n\n.error-gJyOw {\n  border-radius: 4px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n}\n\n.auth-button-nvUhU {\n  width: 100%;\n  padding: 12px;\n  border-radius: 4px;\n  margin: 15px 0;\n  opacity: 0.85;\n  font-size: 17px;\n  line-height: 22px;\n  cursor: pointer;\n  box-sizing: border-box;\n  background-color: var(--diva-theme-palette-primary-main);\n  text-align: center;\n  color: var(--diva-theme-palette-primary-contrast-text);\n  text-transform: none;\n}\n\n.auth-button-nvUhU:hover {\n  opacity: 1;\n}\n\n.button-disabled-GS-ox {\n  opacity: 0.3;\n  cursor: auto;\n  cursor: initial;\n}\n.button-disabled-GS-ox:hover {\n  opacity: 0.3;\n}\n\n.social-button-p5pUa {\n  justify-content: space-around;\n  text-transform: none;\n}\n\n.social-button-p5pUa div {\n  width: 30px;\n  height: 22px;\n  float: left;\n  background-repeat: no-repeat;\n  background-size: contain;\n  background-position: center;\n}\n\n.google-WhFJU,\n.microsoft-e3GYR {\n  font-size: medium;\n  margin-top: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  background-color: white;\n  color: #333;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  font-weight: 600;\n  padding: 12px;\n  transition: all 0.3s ease-in-out;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.google-WhFJU:hover,\n.microsoft-e3GYR:hover {\n  background-color: #f8f9fa;\n  border-color: #bbb;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n.google-WhFJU div {\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Uploaded to%3A SVG Repo%2C www.svgrepo.com%2C Generator%3A SVG Repo Mixer Tools --%3E%3Csvg width%3D%22800px%22 height%3D%22800px%22 viewBox%3D%22-3 0 262 262%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 preserveAspectRatio%3D%22xMidYMid%22%3E%3Cpath d%3D%22M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027%22 fill%3D%22%234285F4%22%2F%3E%3Cpath d%3D%22M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1%22 fill%3D%22%2334A853%22%2F%3E%3Cpath d%3D%22M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782%22 fill%3D%22%23FBBC05%22%2F%3E%3Cpath d%3D%22M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251%22 fill%3D%22%23EB4335%22%2F%3E%3C%2Fsvg%3E\");\n}\n.microsoft-e3GYR div {\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Uploaded to%3A SVG Repo%2C www.svgrepo.com%2C Generator%3A SVG Repo Mixer Tools --%3E%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22aria-label%3D%22Microsoft%22 role%3D%22img%22viewBox%3D%220 0 512 512%22%3E%3Crectwidth%3D%22512%22 height%3D%22512%22rx%3D%2215%25%22fill%3D%22%23ffffff%22%2F%3E%3Cpathd%3D%22M75 75v171h171v-171z%22 fill%3D%22%23f25022%22%2F%3E%3Cpathd%3D%22M266 75v171h171v-171z%22 fill%3D%22%237fba00%22%2F%3E%3Cpathd%3D%22M75 266v171h171v-171z%22 fill%3D%22%2300a4ef%22%2F%3E%3Cpathd%3D%22M266 266v171h171v-171z%22 fill%3D%22%23ffb900%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.separator-Hg6fH {\n  display: flex;\n  align-items: center;\n  text-align: center;\n  color: rgb(184, 196, 194);\n}\n\n.separator-Hg6fH::before,\n.separator-Hg6fH::after {\n  content: '';\n  flex: 1;\n  border-bottom: 1px solid rgb(184, 196, 194);\n}\n\n.separator-Hg6fH:not(:empty)::before {\n  margin-right: 0.25em;\n}\n\n.separator-Hg6fH:not(:empty)::after {\n  margin-left: 0.25em;\n}\n\n.input--Dl8e {\n  width: 100%;\n  padding: 1em;\n  border: solid 1px rgba(0, 0, 0, 0.1);\n  border-radius: 0.3em;\n  outline: none;\n  margin: 15px 0;\n  box-sizing: border-box;\n}\n\n.input--Dl8e:hover,\n.input--Dl8e:focus,\n.input--Dl8e:active {\n  border: solid 1px var(--diva-theme-palette-primary-main);\n}\n\n.input--Dl8e::-moz-placeholder {\n  color: rgba(0, 0, 0, 0.25);\n}\n\n.input--Dl8e::placeholder {\n  color: rgba(0, 0, 0, 0.25);\n}\n\n.input--Dl8e.readonly-uw66l {\n  border: solid 1px rgba(0, 0, 0, 0.1);\n  color: rgba(0, 0, 0, 0.25);\n}\n\n.reset-input-ERpB4 {\n  position: relative;\n}\n\n.reset-input-ERpB4:after {\n  content: '';\n  position: absolute;\n  right: 10px;\n  top: 0;\n  bottom: 0;\n  width: 20px;\n  background: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 %3F%3E%3C!DOCTYPE svg  PUBLIC '-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN'  'http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd'%3E%3Csvg  id%3D%22Layer_1%22 style%3D%22enable-background%3Anew 0 0 512 512%3B%22 version%3D%221.1%22 viewBox%3D%220 0 512 512%22 width%3D%22512px%22 xml%3Aspace%3D%22preserve%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%3E%3Cpath d%3D%22M256%2C33C132.3%2C33%2C32%2C133.3%2C32%2C257c0%2C123.7%2C100.3%2C224%2C224%2C224c123.7%2C0%2C224-100.3%2C224-224C480%2C133.3%2C379.7%2C33%2C256%2C33z    M364.3%2C332.5c1.5%2C1.5%2C2.3%2C3.5%2C2.3%2C5.6c0%2C2.1-0.8%2C4.2-2.3%2C5.6l-21.6%2C21.7c-1.6%2C1.6-3.6%2C2.3-5.6%2C2.3c-2%2C0-4.1-0.8-5.6-2.3L256%2C289.8   l-75.4%2C75.7c-1.5%2C1.6-3.6%2C2.3-5.6%2C2.3c-2%2C0-4.1-0.8-5.6-2.3l-21.6-21.7c-1.5-1.5-2.3-3.5-2.3-5.6c0-2.1%2C0.8-4.2%2C2.3-5.6l75.7-76   l-75.9-75c-3.1-3.1-3.1-8.2%2C0-11.3l21.6-21.7c1.5-1.5%2C3.5-2.3%2C5.6-2.3c2.1%2C0%2C4.1%2C0.8%2C5.6%2C2.3l75.7%2C74.7l75.7-74.7   c1.5-1.5%2C3.5-2.3%2C5.6-2.3c2.1%2C0%2C4.1%2C0.8%2C5.6%2C2.3l21.6%2C21.7c3.1%2C3.1%2C3.1%2C8.2%2C0%2C11.3l-75.9%2C75L364.3%2C332.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\") center / contain no-repeat;\n  cursor: pointer;\n  opacity: 0.7;\n}\n\n.link-s-Rcm {\n  color: var(--diva-theme-palette-primary-main);\n  cursor: pointer;\n  display: inline-block;\n}\n";
-styleInject(css_248z$6);
-
-var _excluded$7 = ["className", "disabled", "children", "onClick", "style"];
-function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function AuthButton(_ref) {
-  var className = _ref.className,
-    disabled = _ref.disabled,
-    children = _ref.children,
-    onClick = _ref.onClick,
-    style = _ref.style,
-    props = _objectWithoutProperties(_ref, _excluded$7);
-  return /*#__PURE__*/jsx(Button, _objectSpread$d(_objectSpread$d({
-    id: "submit",
-    variant: "contained",
-    disabled: disabled,
-    onClick: onClick,
-    className: classnames(authButton, className, disabled ? buttonDisabled : undefined),
-    style: style
-  }, props), {}, {
-    children: children
-  }));
-}
-
-var _excluded$6 = ["className", "readOnly", "resetInput"];
-function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    readOnly = _ref.readOnly,
-    resetInput = _ref.resetInput,
-    props = _objectWithoutProperties(_ref, _excluded$6);
-  return /*#__PURE__*/jsxs("div", {
-    style: {
-      position: 'relative'
-    },
-    children: [/*#__PURE__*/jsx("input", _objectSpread$c({
-      ref: ref,
-      className: classnames(input, readOnly ? readonly : undefined, className),
-      readOnly: readOnly,
-      "data-test-id": "barrier-input-text",
-      style: {
-        paddingLeft: resetInput ? '40px' : undefined
-      } // Platzierung des Pfeils
-    }, props)), resetInput && /*#__PURE__*/jsx(ArrowBack, {
-      onClick: function onClick() {
-        return resetInput();
-      },
-      style: {
-        position: 'absolute',
-        left: '8px',
-        // Platzierung des Pfeils
-        top: '50%',
-        transform: 'translateY(-50%)',
-        // Vertikale Zentrierung
-        cursor: 'pointer'
-      }
-    })]
-  });
-});
-
-function SimpleLogin (_ref) {
-  var email = _ref.email,
-    setEmail = _ref.setEmail,
-    tos = _ref.tos,
-    setTos = _ref.setTos,
-    showTos = _ref.showTos;
-  var _useDivaCoreContext = useDivaCoreContext(),
-    configurationStore = _useDivaCoreContext.configurationStore,
-    contentStore = _useDivaCoreContext.contentStore;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Input, {
-      placeholder: t('auth.input.email'),
-      value: email,
-      onChange: function onChange(e) {
-        return setEmail(e.currentTarget.value);
-      }
-    }), showTos && /*#__PURE__*/jsxs("div", {
-      style: {
-        display: 'flex',
-        cursor: 'pointer'
-      },
-      onClick: function onClick() {
-        return setTos(!tos);
-      },
-      children: [/*#__PURE__*/jsx("input", {
-        "data-test-id": "check-agb",
-        type: "checkbox",
-        style: {
-          marginRight: '12px',
-          cursor: 'pointer'
-        },
-        checked: tos,
-        onChange: function onChange() {
-          return setTos(!tos);
-        }
-      }), /*#__PURE__*/jsx("span", {
-        children: /*#__PURE__*/jsx(Trans, {
-          i18nKey: "barrier.tosconsent",
-          components: {
-            TOS: /*#__PURE__*/jsx("div", {
-              className: link,
-              onClick: function onClick() {
-                return contentStore.openComponent({
-                  url: configurationStore.navigation.tosUrl,
-                  openInNewTab: true
-                });
-              }
-            }),
-            PRIVACY: /*#__PURE__*/jsx("div", {
-              className: link,
-              onClick: function onClick() {
-                return contentStore.openComponent({
-                  url: configurationStore.navigation.privacyUrl,
-                  openInNewTab: true
-                });
-              }
-            })
-          }
-        })
-      })]
-    })]
-  });
-}
-
-function Barrier (_ref) {
-  var actions = _ref.actions,
-    _ref$currentEmail = _ref.currentEmail,
-    currentEmail = _ref$currentEmail === void 0 ? '' : _ref$currentEmail,
-    type = _ref.type;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useState = useState(currentEmail),
-    _useState2 = _slicedToArray(_useState, 2),
-    email = _useState2[0],
-    setEmail = _useState2[1];
-  var _useState3 = useState(!!currentEmail),
-    _useState4 = _slicedToArray(_useState3, 2),
-    tosChecked = _useState4[0],
-    setTosChecked = _useState4[1];
-  var disabledActions = actions === null || actions === void 0 ? void 0 : actions.map(function (action) {
-    return (!tosChecked || !email || !DivaUtils.validateEmail(email)) && action.loginType != 'NO_LOGIN';
-  });
-  return /*#__PURE__*/jsxs("form", {
-    autoComplete: "off",
-    onSubmit: function onSubmit(e) {
-      var _actions$;
-      e.preventDefault();
-      if (disabledActions !== null && disabledActions !== void 0 && disabledActions[0]) return;
-      actions === null || actions === void 0 || (_actions$ = actions[0]) === null || _actions$ === void 0 || _actions$.onClick(email);
-    },
-    "data-test-id": "barrier-action-form",
-    children: [type != 'NO_LOGIN' && /*#__PURE__*/jsx(SimpleLogin, {
-      setEmail: setEmail,
-      email: email,
-      showTos: !currentEmail,
-      tos: tosChecked,
-      setTos: setTosChecked
-    }), actions === null || actions === void 0 ? void 0 : actions.map(function (a, index) {
-      return /*#__PURE__*/jsx(AuthButton, {
-        "data-test-id": "barrier-action-button",
-        className: a.className,
-        disabled: disabledActions === null || disabledActions === void 0 ? void 0 : disabledActions[index],
-        onClick: disabledActions !== null && disabledActions !== void 0 && disabledActions[index] ? function () {} : function () {
-          return a.onClick(email);
-        },
-        style: {
-          justifyContent: 'flex-start'
-        },
-        children: t(a.text)
-      }, a.text);
-    })]
-  });
-}
-
 function _callSuper$1(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$1() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct$1() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$1 = function _isNativeReflectConstruct() { return !!t; })(); }
 var LOG$b = getLogger('Framework', 'root');
@@ -2127,10 +1921,9 @@ var ContentStore = /*#__PURE__*/function () {
     _defineProperty(this, "_snackBars", []);
     _defineProperty(this, "_banner", undefined);
     _defineProperty(this, "_fullscreen", undefined);
-    _defineProperty(this, "_sideMenu", undefined);
-    _defineProperty(this, "_headerInfos", {
-      visible: false
-    });
+    _defineProperty(this, "_drawerMenu", undefined);
+    _defineProperty(this, "_sideMenuOpen", false);
+    _defineProperty(this, "_headerInfos", {});
     _defineProperty(this, "visible", undefined);
     _defineProperty(this, "customLogoMap", new Map());
     _defineProperty(this, "customHeaderComponentMap", new Map());
@@ -2184,6 +1977,17 @@ var ContentStore = /*#__PURE__*/function () {
           return 'Undefined';
       }
     });
+    /**
+     * Resets the modal state
+     */
+    _defineProperty(this, "closeDrawerMenu", function (id, destroy) {
+      if (_this._drawerMenu) {
+        if (id && _this._drawerMenu.id !== id) return;
+        _this._drawerMenu = destroy ? undefined : _objectSpread$a(_objectSpread$a({}, _this._drawerMenu), {}, {
+          open: false
+        });
+      }
+    });
     this.root = root;
     this.configuration = components;
     if (window.customElements.get('model-viewer')) this._modelViewerHasLoaded = true;
@@ -2204,7 +2008,7 @@ var ContentStore = /*#__PURE__*/function () {
       ref: observable.ref,
       _fullscreen: observable.ref,
       _banner: observable.ref,
-      _sideMenu: observable.ref,
+      _drawerMenu: observable.ref,
       resizeObserver: false,
       _currentlyRendered: false,
       openComponent: flow,
@@ -2307,7 +2111,7 @@ var ContentStore = /*#__PURE__*/function () {
         _config6,
         _config8,
         _config9;
-      var _this$componentChange2, _this$componentChange3, _this$openInNewTab, _this$openInNewTab2, link, _window, _ref2, type, identifier, parameters, internal, route, openInFullscreen, keepOldState, config, parent, _this$root$dataStore$, _this$root$dataStore$2, _config4, newTab, _config7, base, settings, openModuleLables, _parameters, otherPrams, module, prevType, prevState, currentState, componentState, _this$root$dataStore$3, _config$barrier, _parameters2;
+      var _this$componentChange2, _this$componentChange3, _this$openInNewTab, _this$openInNewTab2, link, _window, _ref2, type, identifier, parameters, internal, route, openInFullscreen, keepOldState, config, parent, _this$root$dataStore$, _this$root$dataStore$2, _config4, newTab, _config7, base, settings, openModuleLables, _parameters, otherPrams, module, prevType, prevState, currentState, componentState;
       return _regeneratorRuntime.wrap(function openComponent$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -2453,13 +2257,6 @@ var ContentStore = /*#__PURE__*/function () {
             componentState.path = route;
             this.state.set(config.type, componentState);
             this.visible = config.type;
-            if (config.isPublic == 'barrier') {
-              if (!this.root.dataStore.user || !((_this$root$dataStore$3 = this.root.dataStore.user) !== null && _this$root$dataStore$3 !== void 0 && _this$root$dataStore$3.isEmailVerified)) {
-                if (!((_config$barrier = config.barrier) !== null && _config$barrier !== void 0 && _config$barrier.excludeParams) || !Object.keys((_parameters2 = parameters) !== null && _parameters2 !== void 0 ? _parameters2 : {}).find(function (p) {
-                  return config.barrier.excludeParams.includes(p);
-                })) this.loginBarrier(true, config.barrier);
-              }
-            }
             if (action.breadcrumb && prevType && prevState) {
               this.updateBreadcrumbs({
                 type: 'update',
@@ -2486,7 +2283,7 @@ var ContentStore = /*#__PURE__*/function () {
             }
             this.setGlobalClass();
             this.root.loadingAndErrorStore.toggleLoading('openComponent');
-          case 60:
+          case 59:
           case "end":
             return _context2.stop();
         }
@@ -2588,6 +2385,16 @@ var ContentStore = /*#__PURE__*/function () {
     value: function getSubConfiguration(type) {
       return this.findSubComponent(type, this.currentComponent);
     }
+  }, {
+    key: "openSideMenu",
+    value: function openSideMenu() {
+      this._sideMenuOpen = true;
+    }
+  }, {
+    key: "closeSideMenu",
+    value: function closeSideMenu() {
+      this._sideMenuOpen = false;
+    }
   }, {
     key: "findSubComponent",
     value: function findSubComponent(type, component) {
@@ -2612,48 +2419,6 @@ var ContentStore = /*#__PURE__*/function () {
       }
       return undefined;
     }
-  }, {
-    key: "loginBarrier",
-    value: function loginBarrier(anon, settings) {
-      var _settings$title,
-        _settings$text,
-        _this3 = this;
-      this.openBarrier({
-        type: settings !== null && settings !== void 0 && settings.skipVerify ? 'SIMPLE' : 'GET_EMAIL',
-        rejectable: false,
-        anonOnly: anon,
-        title: this.root.t((_settings$title = settings === null || settings === void 0 ? void 0 : settings.title) !== null && _settings$title !== void 0 ? _settings$title : 'loginbarrier.barrier.title'),
-        text: this.root.t((_settings$text = settings === null || settings === void 0 ? void 0 : settings.text) !== null && _settings$text !== void 0 ? _settings$text : 'loginbarrier.barrier.text'),
-        actions: [{
-          text: this.root.t('loginbarrier.barrier.button'),
-          onClick: function onClick(email) {
-            var _settings$emailVarian;
-            if (settings !== null && settings !== void 0 && settings.skipVerify) {
-              return;
-            }
-            LOG$9.debug("Request email verification for ".concat(email));
-            _this3.root.apiHandler.sendVerificationEmail({
-              email: email,
-              emailVariant: (_settings$emailVarian = settings === null || settings === void 0 ? void 0 : settings.emailVariant) !== null && _settings$emailVarian !== void 0 ? _settings$emailVarian : 'DEMO'
-            });
-            _this3.openModal({
-              title: _this3.root.t('loginbarrier.verify.title'),
-              text: _this3.root.t('loginbarrier.verify.text'),
-              maxWidth: 500,
-              actions: [{
-                text: _this3.root.t('loginbarrier.verify.button'),
-                variant: 'contained',
-                id: 'verify',
-                closeable: false
-              }],
-              callback: function callback() {
-                _this3.loginBarrier(false, settings);
-              }
-            });
-          }
-        }]
-      });
-    }
   }, {
     key: "updateCustomLogo",
     value:
@@ -2663,9 +2428,9 @@ var ContentStore = /*#__PURE__*/function () {
      * @param logo the custom logo
      */
     function updateCustomLogo(components, logo) {
-      var _this4 = this;
+      var _this3 = this;
       components.forEach(function (c) {
-        return logo ? _this4.customLogoMap.set(c, logo) : _this4.customLogoMap["delete"](c);
+        return logo ? _this3.customLogoMap.set(c, logo) : _this3.customLogoMap["delete"](c);
       });
     }
 
@@ -2677,9 +2442,9 @@ var ContentStore = /*#__PURE__*/function () {
   }, {
     key: "updateCustomHeaderElement",
     value: function updateCustomHeaderElement(components, element) {
-      var _this5 = this;
+      var _this4 = this;
       components.forEach(function (c) {
-        return element ? _this5.customHeaderComponentMap.set(c, element) : _this5.customHeaderComponentMap["delete"](c);
+        return element ? _this4.customHeaderComponentMap.set(c, element) : _this4.customHeaderComponentMap["delete"](c);
       });
     }
 
@@ -2758,7 +2523,7 @@ var ContentStore = /*#__PURE__*/function () {
   }, {
     key: "breadcrumbs",
     get: function get() {
-      var _this6 = this;
+      var _this5 = this;
       if (!this.visible) {
         return undefined;
       }
@@ -2770,7 +2535,7 @@ var ContentStore = /*#__PURE__*/function () {
           var group = _step2.value;
           var path = group.path.find(function (p) {
             return componentsEqual(p.component, {
-              type: _this6.visible,
+              type: _this5.visible,
               parameters: state.parameters,
               internal: state.internal
             });
@@ -2824,9 +2589,9 @@ var ContentStore = /*#__PURE__*/function () {
   }, {
     key: "currentComponent",
     get: function get() {
-      var _this7 = this;
+      var _this6 = this;
       return this.root.configurationStore.components.find(function (c) {
-        return c.type == _this7.visible;
+        return c.type == _this6.visible;
       });
     }
 
@@ -2863,11 +2628,11 @@ var ContentStore = /*#__PURE__*/function () {
   }, {
     key: "allowHidePrices",
     get: function get() {
-      var _this$root$dataStore$4;
+      var _this$root$dataStore$3;
       if (!this.visible) {
         return false;
       }
-      if (((_this$root$dataStore$4 = this.root.dataStore.organization) === null || _this$root$dataStore$4 === void 0 || (_this$root$dataStore$4 = _this$root$dataStore$4.settings) === null || _this$root$dataStore$4 === void 0 ? void 0 : _this$root$dataStore$4.hidePrices) !== undefined) {
+      if (((_this$root$dataStore$3 = this.root.dataStore.organization) === null || _this$root$dataStore$3 === void 0 || (_this$root$dataStore$3 = _this$root$dataStore$3.settings) === null || _this$root$dataStore$3 === void 0 ? void 0 : _this$root$dataStore$3.hidePrices) !== undefined) {
         return this.root.dataStore.organization.settings.hidePrices.startsWith('DEFAULT');
       }
       return true;
@@ -2882,8 +2647,8 @@ var ContentStore = /*#__PURE__*/function () {
     key: "hidePrices",
     get: function get() {
       if (this._hidePrices === undefined) {
-        var _this$root$dataStore$5;
-        if ((_this$root$dataStore$5 = this.root.dataStore.organization) !== null && _this$root$dataStore$5 !== void 0 && (_this$root$dataStore$5 = _this$root$dataStore$5.settings) !== null && _this$root$dataStore$5 !== void 0 && _this$root$dataStore$5.hidePrices) {
+        var _this$root$dataStore$4;
+        if ((_this$root$dataStore$4 = this.root.dataStore.organization) !== null && _this$root$dataStore$4 !== void 0 && (_this$root$dataStore$4 = _this$root$dataStore$4.settings) !== null && _this$root$dataStore$4 !== void 0 && _this$root$dataStore$4.hidePrices) {
           switch (this.root.dataStore.organization.settings.hidePrices) {
             case 'DEFAULT_HIDDEN':
             case 'ONLY_HIDDEN':
@@ -3049,39 +2814,30 @@ var ContentStore = /*#__PURE__*/function () {
     }
 
     /**
-     * Open sideMenu screen modal
-     * @param sideMenu the settings for the sideMenu
+     * Open drawerMenu screen modal
+     * @param drawerMenu the settings for the drawerMenu
      */
   }, {
-    key: "openSideMenu",
-    value: function openSideMenu(_ref3) {
-      var _this$_sideMenu$open, _this$_sideMenu;
+    key: "openDrawerMenu",
+    value: function openDrawerMenu(_ref3) {
+      var _this$_drawerMenu, _this$_drawerMenu2, _this$_drawerMenu$onC, _this$_drawerMenu3, _this$_drawerMenu$ope, _this$_drawerMenu4;
       var _ref3$onClose = _ref3.onClose,
-        onClose = _ref3$onClose === void 0 ? this.closeSideMenu.bind(this) : _ref3$onClose,
-        sideMenu = _objectWithoutProperties(_ref3, _excluded2$1);
-      if (sideMenu.open === undefined) sideMenu.open = (_this$_sideMenu$open = (_this$_sideMenu = this._sideMenu) === null || _this$_sideMenu === void 0 ? void 0 : _this$_sideMenu.open) !== null && _this$_sideMenu$open !== void 0 ? _this$_sideMenu$open : false;
-      this._sideMenu = _objectSpread$a(_objectSpread$a({}, sideMenu), {}, {
+        onClose = _ref3$onClose === void 0 ? this.closeDrawerMenu.bind(this) : _ref3$onClose,
+        drawerMenu = _objectWithoutProperties(_ref3, _excluded2$1);
+      if ((_this$_drawerMenu = this._drawerMenu) !== null && _this$_drawerMenu !== void 0 && _this$_drawerMenu.id && drawerMenu !== null && drawerMenu !== void 0 && drawerMenu.id && drawerMenu.id !== ((_this$_drawerMenu2 = this._drawerMenu) === null || _this$_drawerMenu2 === void 0 ? void 0 : _this$_drawerMenu2.id)) (_this$_drawerMenu$onC = (_this$_drawerMenu3 = this._drawerMenu).onClose) === null || _this$_drawerMenu$onC === void 0 || _this$_drawerMenu$onC.call(_this$_drawerMenu3);
+      if (drawerMenu.open === undefined) drawerMenu.open = (_this$_drawerMenu$ope = (_this$_drawerMenu4 = this._drawerMenu) === null || _this$_drawerMenu4 === void 0 ? void 0 : _this$_drawerMenu4.open) !== null && _this$_drawerMenu$ope !== void 0 ? _this$_drawerMenu$ope : false;
+      this._drawerMenu = _objectSpread$a(_objectSpread$a({}, drawerMenu), {}, {
         onClose: onClose
       });
     }
-
-    /**
-     * Resets the modal state
-     */
   }, {
-    key: "closeSideMenu",
-    value: function closeSideMenu(destroy) {
-      if (this._sideMenu) this._sideMenu = destroy ? undefined : _objectSpread$a(_objectSpread$a({}, this._sideMenu), {}, {
-        open: false
-      });
-    }
-
+    key: "updateHeaderInfos",
+    value:
     /**
      * Updates HeaderInfos so other component know the state of the header
      */
-  }, {
-    key: "updateHeaderInfos",
-    value: function updateHeaderInfos(headerInfos) {
+
+    function updateHeaderInfos(headerInfos) {
       this._headerInfos = headerInfos;
     }
   }, {
@@ -3091,86 +2847,17 @@ var ContentStore = /*#__PURE__*/function () {
     }
 
     /**
-     * The settings of the sideMenu, if one should be opened
+     * The settings of the drawerMenu, if one should be opened.
      */
   }, {
-    key: "sideMenu",
+    key: "drawerMenu",
     get: function get() {
-      return this._sideMenu;
+      return this._drawerMenu;
     }
-
-    /**
-     * Opens a berrier to request user infos
-     *
-     * @param barrier the settings for the barrier
-     */
   }, {
-    key: "openBarrier",
-    value: function openBarrier(barrier) {
-      var _this$root$dataStore$6,
-        _this$root$dataStore$7,
-        _barrier$actions,
-        _this8 = this;
-      if (barrier.anonOnly && (_this$root$dataStore$6 = this.root.dataStore.user) !== null && _this$root$dataStore$6 !== void 0 && _this$root$dataStore$6.mainEmail) {
-        LOG$9.debug('Skip barrier because user is logged in');
-        return;
-      }
-      this._modal = {
-        text: barrier.text,
-        title: barrier.title,
-        rejectByIcon: barrier.rejectable != false,
-        dontRenderForm: true,
-        callback: function callback() {
-          var _barrier$onClose;
-          (_barrier$onClose = barrier.onClose) === null || _barrier$onClose === void 0 || _barrier$onClose.call(barrier);
-        },
-        content: /*#__PURE__*/React.createElement(Barrier, {
-          type: barrier.type,
-          currentEmail: (_this$root$dataStore$7 = this.root.dataStore.user) === null || _this$root$dataStore$7 === void 0 ? void 0 : _this$root$dataStore$7.mainEmail,
-          actions: (_barrier$actions = barrier.actions) === null || _barrier$actions === void 0 ? void 0 : _barrier$actions.map(function (a) {
-            return _objectSpread$a(_objectSpread$a({}, a), {}, {
-              onClick: function () {
-                var _onClick = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(email) {
-                  var _this8$root$dataStore;
-                  var doLogin;
-                  return _regeneratorRuntime.wrap(function _callee2$(_context4) {
-                    while (1) switch (_context4.prev = _context4.next) {
-                      case 0:
-                        _this8.closeModal();
-                        doLogin = (a.loginType ? a.loginType : barrier.type) === 'SIMPLE';
-                        if (!(doLogin && ((_this8$root$dataStore = _this8.root.dataStore.user) === null || _this8$root$dataStore === void 0 ? void 0 : _this8$root$dataStore.mainEmail) != email)) {
-                          _context4.next = 11;
-                          break;
-                        }
-                        _context4.prev = 3;
-                        _context4.next = 6;
-                        return flowResult(_this8.root.authorizationStore.login(email, undefined, true, _this8.root.dataStore.organizationId));
-                      case 6:
-                        _context4.next = 11;
-                        break;
-                      case 8:
-                        _context4.prev = 8;
-                        _context4.t0 = _context4["catch"](3);
-                        LOG$9.error(new DivaError('Error while logging in', {
-                          cause: _context4.t0
-                        }));
-                      case 11:
-                        a.onClick(email);
-                      case 12:
-                      case "end":
-                        return _context4.stop();
-                    }
-                  }, _callee2, null, [[3, 8]]);
-                }));
-                function onClick(_x) {
-                  return _onClick.apply(this, arguments);
-                }
-                return onClick;
-              }()
-            });
-          })
-        })
-      };
+    key: "sideMenuOpen",
+    get: function get() {
+      return this._sideMenuOpen;
     }
   }, {
     key: "openBanner",
@@ -3190,31 +2877,31 @@ var ContentStore = /*#__PURE__*/function () {
   }, {
     key: "sendEmail",
     value: function sendEmail(_ref4) {
-      var _this9 = this;
+      var _this7 = this;
       var dialogText = _ref4.dialogText,
         showDialog = _ref4.showDialog,
         callback = _ref4.callback,
         content = _ref4.content,
         mailSendCallback = _ref4.mailSendCallback,
         dialogAcceptMailSend = _ref4.dialogAcceptMailSend;
-      return /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+      return /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
         var accepted, _content$language$toU, _content$language;
-        return _regeneratorRuntime.wrap(function _callee3$(_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
+        return _regeneratorRuntime.wrap(function _callee2$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
             case 0:
               accepted = showDialog === false;
               if (!(showDialog !== false)) {
-                _context5.next = 4;
+                _context4.next = 4;
                 break;
               }
-              _context5.next = 4;
+              _context4.next = 4;
               return new Promise(function (resolve) {
-                return _this9.openModal({
+                return _this7.openModal({
                   reject: true,
                   accept: true,
-                  text: dialogText ? _this9.root.t(dialogText, {
+                  text: dialogText ? _this7.root.t(dialogText, {
                     to: content.to
-                  }) : _this9.root.t('email.question.default', {
+                  }) : _this7.root.t('email.question.default', {
                     to: content.to
                   }),
                   callback: function callback(accept) {
@@ -3225,26 +2912,26 @@ var ContentStore = /*#__PURE__*/function () {
               });
             case 4:
               if (accepted) {
-                _context5.next = 6;
+                _context4.next = 6;
                 break;
               }
-              return _context5.abrupt("return");
+              return _context4.abrupt("return");
             case 6:
-              if (showDialog !== false) _this9.root.loadingAndErrorStore.toggleLoading('sendingEmail');
-              _context5.prev = 7;
+              if (showDialog !== false) _this7.root.loadingAndErrorStore.toggleLoading('sendingEmail');
+              _context4.prev = 7;
               content.language = (_content$language$toU = (_content$language = content.language) === null || _content$language === void 0 ? void 0 : _content$language.toUpperCase()) !== null && _content$language$toU !== void 0 ? _content$language$toU : instance.language.toUpperCase();
-              _context5.next = 11;
-              return _this9.root.apiHandler.sendEmail({
+              _context4.next = 11;
+              return _this7.root.apiHandler.sendEmail({
                 content: content,
-                organizationIds: _this9.root.dataStore.fullParentList
+                organizationIds: _this7.root.dataStore.fullParentList
               });
             case 11:
               if (callback) {
                 callback(true);
               } else {
                 if (showDialog !== false) {
-                  _this9.openModal({
-                    text: _this9.root.t('email.send.success'),
+                  _this7.openModal({
+                    text: _this7.root.t('email.send.success'),
                     accept: dialogAcceptMailSend !== null && dialogAcceptMailSend !== void 0 ? dialogAcceptMailSend : true,
                     reject: dialogAcceptMailSend ? true : false,
                     callback: function callback(accept) {
@@ -3255,31 +2942,31 @@ var ContentStore = /*#__PURE__*/function () {
                   });
                 }
               }
-              _context5.next = 18;
+              _context4.next = 18;
               break;
             case 14:
-              _context5.prev = 14;
-              _context5.t0 = _context5["catch"](7);
-              LOG$9.error(_context5.t0);
+              _context4.prev = 14;
+              _context4.t0 = _context4["catch"](7);
+              LOG$9.error(_context4.t0);
               if (callback) {
                 callback(false);
               } else {
                 if (showDialog !== false) {
-                  _this9.openModal({
-                    text: _this9.root.t('email.send.error'),
+                  _this7.openModal({
+                    text: _this7.root.t('email.send.error'),
                     accept: true
                   });
                 }
               }
             case 18:
-              _context5.prev = 18;
-              if (showDialog !== false) _this9.root.loadingAndErrorStore.toggleLoading('sendingEmail');
-              return _context5.finish(18);
+              _context4.prev = 18;
+              if (showDialog !== false) _this7.root.loadingAndErrorStore.toggleLoading('sendingEmail');
+              return _context4.finish(18);
             case 21:
             case "end":
-              return _context5.stop();
+              return _context4.stop();
           }
-        }, _callee3, null, [[7, 14, 18, 21]]);
+        }, _callee2, null, [[7, 14, 18, 21]]);
       })();
     }
 
@@ -3315,31 +3002,31 @@ var ContentStore = /*#__PURE__*/function () {
   }, {
     key: "setContainer",
     value: (function () {
-      var _setContainer = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(ref) {
-        return _regeneratorRuntime.wrap(function _callee4$(_context6) {
-          while (1) switch (_context6.prev = _context6.next) {
+      var _setContainer = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(ref) {
+        return _regeneratorRuntime.wrap(function _callee3$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
             case 0:
               if (!(ref === this.ref)) {
-                _context6.next = 2;
+                _context5.next = 2;
                 break;
               }
-              return _context6.abrupt("return");
+              return _context5.abrupt("return");
             case 2:
               this.ref = ref;
               if (this.resizeObserver) {
                 unregisterResizeObserver(this.resizeObserver);
               }
-              _context6.next = 6;
+              _context5.next = 6;
               return registerResizeObserver(ref, this.onResize.bind(this));
             case 6:
-              this.resizeObserver = _context6.sent;
+              this.resizeObserver = _context5.sent;
             case 7:
             case "end":
-              return _context6.stop();
+              return _context5.stop();
           }
-        }, _callee4, this);
+        }, _callee3, this);
       }));
-      function setContainer(_x2) {
+      function setContainer(_x) {
         return _setContainer.apply(this, arguments);
       }
       return setContainer;
@@ -3369,10 +3056,10 @@ var ContentStore = /*#__PURE__*/function () {
     key: "availableComponents",
     get: function get() {
       var _this$root,
-        _this10 = this;
+        _this8 = this;
       return (_this$root = this.root) === null || _this$root === void 0 ? void 0 : _this$root.configurationStore.components.filter(function (component) {
         //the component must be passed to diva core
-        if (!_this10.configuration.find(function (config) {
+        if (!_this8.configuration.find(function (config) {
           return config.name == component.type;
         })) {
           return false;
@@ -3383,11 +3070,11 @@ var ContentStore = /*#__PURE__*/function () {
           return true;
         }
         //if the user is not logged in the component must be public
-        if (!_this10.root.dataStore.user) {
+        if (!_this8.root.dataStore.user) {
           return false;
         }
         //if there is a permission specified, the user must have it
-        return component.permission ? _this10.root.dataStore.userHasPermission(component.permission) : true;
+        return component.permission ? _this8.root.dataStore.userHasPermission(component.permission) : true;
       });
     }
 
@@ -3397,14 +3084,14 @@ var ContentStore = /*#__PURE__*/function () {
   }, {
     key: "components",
     get: function get() {
-      var _this11 = this;
+      var _this9 = this;
       var componentDefinitionToRender = this.configuration.filter(function (config) {
         //there must be a state present in order for the component to be rendered
-        if (!_this11.state.has(config.name)) {
+        if (!_this9.state.has(config.name)) {
           return false;
         }
         //the component must be contained in the available components list in order to be rendered
-        return _this11.availableComponents.find(function (component) {
+        return _this9.availableComponents.find(function (component) {
           return component.type == config.name;
         });
       });
@@ -3412,7 +3099,7 @@ var ContentStore = /*#__PURE__*/function () {
       //when a new component is added we have to make sure that for the currently open components the existing instance is reused
       //withTransaction creates a new instance if APM is active, so we would loose the state of currently open components
       componentDefinitionToRender.forEach(function (cmp) {
-        var toRender = _this11._currentlyRendered.find(function (c) {
+        var toRender = _this9._currentlyRendered.find(function (c) {
           return c.name == cmp.name;
         });
         if (!toRender) {
@@ -3433,10 +3120,10 @@ var ContentStore = /*#__PURE__*/function () {
   }, {
     key: "fullscreenComponent",
     get: function get() {
-      var _this12 = this;
+      var _this10 = this;
       var component = this.availableComponents.find(function (component) {
-        var _this12$_fullscreenCo;
-        return component.type == ((_this12$_fullscreenCo = _this12._fullscreenComponent) === null || _this12$_fullscreenCo === void 0 ? void 0 : _this12$_fullscreenCo.key);
+        var _this10$_fullscreenCo;
+        return component.type == ((_this10$_fullscreenCo = _this10._fullscreenComponent) === null || _this10$_fullscreenCo === void 0 ? void 0 : _this10$_fullscreenCo.key);
       });
       var cmp = this.configuration.find(function (config) {
         return (component === null || component === void 0 ? void 0 : component.type) == config.name;
@@ -3483,24 +3170,24 @@ var ContentStore = /*#__PURE__*/function () {
     key: "availableButtons",
     get: function get() {
       var _this$root$configurat,
-        _this13 = this;
+        _this11 = this;
       return (_this$root$configurat = this.root.configurationStore.navigation) === null || _this$root$configurat === void 0 ? void 0 : _this$root$configurat.buttons.filter(function (button) {
         //if component is public it can be displayed
         if (button.isPublic) {
           return true;
         }
         //if the user is not logged in the component must be public
-        if (!_this13.root.dataStore.user) {
+        if (!_this11.root.dataStore.user) {
           return false;
         }
 
         //if the button is opening a component, the component must be availalbe
-        if (button.action.type && !_this13.availableComponentList.includes(button.action.type)) {
+        if (button.action.type && !_this11.availableComponentList.includes(button.action.type)) {
           return false;
         }
 
         //if there is a permission specified, the user must have it
-        return button.permission ? _this13.root.dataStore.userHasPermission(button.permission) : true;
+        return button.permission ? _this11.root.dataStore.userHasPermission(button.permission) : true;
       });
     }
 
@@ -3585,7 +3272,7 @@ var ContentStore = /*#__PURE__*/function () {
   }, {
     key: "updateStateAfterLogout",
     value: function updateStateAfterLogout() {
-      var _this14 = this;
+      var _this12 = this;
       var _iterator3 = _createForOfIteratorHelper(this.state.entries()),
         _step3;
       try {
@@ -3593,19 +3280,19 @@ var ContentStore = /*#__PURE__*/function () {
           var _step3$value = _slicedToArray(_step3.value, 2),
             type = _step3$value[0],
             component = _step3$value[1];
-          var config = _this14.root.configurationStore.components.find(function (c) {
+          var config = _this12.root.configurationStore.components.find(function (c) {
             return c.type == type;
           });
           if (!(config !== null && config !== void 0 && config.isPublic)) {
-            _this14.state["delete"](type);
-            if (_this14.visible == type) {
-              _this14.visible = undefined;
-              _this14._restrictedComponent = {
+            _this12.state["delete"](type);
+            if (_this12.visible == type) {
+              _this12.visible = undefined;
+              _this12._restrictedComponent = {
                 type: type,
                 parameters: component.parameters,
                 internal: component.internal
               };
-              _this14.root.authorizationStore.showLogin();
+              _this12.root.authorizationStore.showLogin();
             }
           }
         };
@@ -3638,7 +3325,7 @@ var ContentStore = /*#__PURE__*/function () {
       if (action.url) {
         link = this.resoveUrl(action.url);
       } else {
-        var _this$root$dataStore$8;
+        var _this$root$dataStore$5;
         var _ref5 = action,
           parameters = _ref5.parameters;
         var url = new URL(baseUrl);
@@ -3647,7 +3334,7 @@ var ContentStore = /*#__PURE__*/function () {
           return param[1] ? params.append(param[0], param[1]) : false;
         });
         params.append('lang', instance.language);
-        if ((_this$root$dataStore$8 = this.root.dataStore.organization) !== null && _this$root$dataStore$8 !== void 0 && _this$root$dataStore$8._id) {
+        if ((_this$root$dataStore$5 = this.root.dataStore.organization) !== null && _this$root$dataStore$5 !== void 0 && _this$root$dataStore$5._id) {
           params.append('organizationId', this.root.dataStore.organization._id);
         }
         link = url.href;
@@ -9154,16 +8841,17 @@ var DivaCoreProvider = /*#__PURE__*/forwardRef(function (_ref, ref) {
         userHasPermission: store.dataStore.userHasPermission.bind(store.dataStore),
         openFullscreen: store.contentStore.openFullscreen.bind(store.contentStore),
         closeFullscreen: store.contentStore.closeFullscreen.bind(store.contentStore),
-        openSideMenu: store.contentStore.openSideMenu.bind(store.contentStore),
-        closeSideMenu: store.contentStore.closeSideMenu.bind(store.contentStore),
-        openBarrier: store.contentStore.openBarrier.bind(store.contentStore),
+        openDrawerMenu: store.contentStore.openDrawerMenu.bind(store.contentStore),
+        closeDrawerMenu: store.contentStore.closeDrawerMenu.bind(store.contentStore),
         updateHeaderInfos: store.contentStore.updateHeaderInfos.bind(store.contentStore),
         openBanner: store.contentStore.openBanner.bind(store.contentStore),
         closeBanner: store.contentStore.closeBanner.bind(store.contentStore),
         resolveComponent: store.contentStore.resolveComponent.bind(store.contentStore),
         openSnackBar: store.contentStore.openSnackBar.bind(store.contentStore),
         fetchConfiguration: store.configurationStore.fetchConfiguration.bind(store.configurationStore),
-        getSubConfiguration: store.contentStore.getSubConfiguration.bind(store.contentStore)
+        getSubConfiguration: store.contentStore.getSubConfiguration.bind(store.contentStore),
+        openSideMenu: store.contentStore.openSideMenu.bind(store.contentStore),
+        closeSideMenu: store.contentStore.closeSideMenu.bind(store.contentStore)
       },
       state: toJS({
         isMobile: store.dataStore.isMobile,
@@ -9201,7 +8889,8 @@ var DivaCoreProvider = /*#__PURE__*/forwardRef(function (_ref, ref) {
         googleMapsConfig: store.configurationStore.googleMapsconfig,
         cometChatConfig: store.configurationStore.cometchatConfig,
         defaultComponent: store.configurationStore.defaultComponent,
-        currentComponent: store.contentStore.currentComponent
+        currentComponent: store.contentStore.currentComponent,
+        sideMenuOpen: store.contentStore.sideMenuOpen
       }),
       handler: {
         productHandler: store.productHandler,
@@ -9253,16 +8942,17 @@ var DivaCoreProvider = /*#__PURE__*/forwardRef(function (_ref, ref) {
           userHasPermission: store.dataStore.userHasPermission.bind(store.dataStore),
           openFullscreen: store.contentStore.openFullscreen.bind(store.contentStore),
           closeFullscreen: store.contentStore.closeFullscreen.bind(store.contentStore),
-          openSideMenu: store.contentStore.openSideMenu.bind(store.contentStore),
-          closeSideMenu: store.contentStore.closeSideMenu.bind(store.contentStore),
-          openBarrier: store.contentStore.openBarrier.bind(store.contentStore),
+          openDrawerMenu: store.contentStore.openDrawerMenu.bind(store.contentStore),
+          closeDrawerMenu: store.contentStore.closeDrawerMenu.bind(store.contentStore),
           updateHeaderInfos: store.contentStore.updateHeaderInfos.bind(store.contentStore),
           openBanner: store.contentStore.openBanner.bind(store.contentStore),
           closeBanner: store.contentStore.closeBanner.bind(store.contentStore),
           resolveComponent: store.contentStore.resolveComponent.bind(store.contentStore),
           openSnackBar: store.contentStore.openSnackBar.bind(store.contentStore),
           fetchConfiguration: store.configurationStore.fetchConfiguration.bind(store.configurationStore),
-          getSubConfiguration: store.contentStore.getSubConfiguration.bind(store.contentStore)
+          getSubConfiguration: store.contentStore.getSubConfiguration.bind(store.contentStore),
+          openSideMenu: store.contentStore.openSideMenu.bind(store.contentStore),
+          closeSideMenu: store.contentStore.closeSideMenu.bind(store.contentStore)
         },
         state: toJS({
           availableComponents: store.contentStore.availableComponentList,
@@ -9300,7 +8990,8 @@ var DivaCoreProvider = /*#__PURE__*/forwardRef(function (_ref, ref) {
           isFullscreenComponent: store.contentStore.isFullscreenComponentDefined,
           enableSupport: !!store.configurationStore.enableSupport,
           defaultComponent: store.configurationStore.defaultComponent,
-          currentComponent: store.contentStore.currentComponent
+          currentComponent: store.contentStore.currentComponent,
+          sideMenuOpen: store.contentStore.sideMenuOpen
         }),
         handler: {
           productHandler: store.productHandler,
@@ -9432,7 +9123,34 @@ var useDivaCore = function useDivaCore() {
   return context.context;
 };
 
-var overlay$1 = "overlay-X3zhH";
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var overlay$2 = "overlay-X3zhH";
 var loading = "loading-kAuhm";
 var css_248z$5 = ".overlay-X3zhH {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  background-color: rgba(255, 255, 255, 0.6);\n  z-index: 1000;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n}\n\n.loading-kAuhm {\n  margin: 0 auto;\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n}\n.loading-kAuhm div {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 64px;\n  height: 64px;\n  margin: 8px;\n  border: 8px solid #b6b6b6;\n  border-radius: 50%;\n  animation: loading-kAuhm 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: #b6b6b6 transparent transparent transparent;\n}\n.loading-kAuhm div:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.loading-kAuhm div:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.loading-kAuhm div:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes loading-kAuhm {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
 styleInject(css_248z$5);
@@ -9542,7 +9260,7 @@ function Spinner() {
     return /*#__PURE__*/jsx(Fragment, {});
   }
   return /*#__PURE__*/jsx("div", {
-    className: overlay$1,
+    className: overlay$2,
     id: "diva-loader",
     children: /*#__PURE__*/jsxs("div", {
       className: className,
@@ -9552,102 +9270,170 @@ function Spinner() {
 }
 var Spinner$1 = observer(Spinner);
 
-var overlay = "overlay-34l68";
+var overlay$1 = "overlay-34l68";
 var absoluteOverlay = "absolute-overlay-cG7uO";
-var closeIcon$1 = "close-icon-1kDyU";
+var closeIcon = "close-icon-1kDyU";
 var css_248z$4 = ".overlay-34l68 {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  background-color: #fff;\n  z-index: 999;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n}\n\n.absolute-overlay-cG7uO {\n  height: 100% !important;\n}\n\n.absolute-overlay-cG7uO {\n  background-color: #fff;\n  position: fixed;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n  overflow: hidden;\n  z-index: 1000000;\n  display: block;\n  width: 100vw;\n}\n\n.diva-pseudo-fullscreen body {\n  height: auto !important;\n}\n.diva-pseudo-fullscreen, .diva-pseudo-fullscreen body {\n  overflow: hidden !important;\n}\n\n.close-icon-1kDyU {\n  position: absolute;\n  right: 32px;\n  top: 32px;\n  width: 50px;\n  height: 40px;\n  opacity: 0.3;\n  z-index: 700;\n  cursor: pointer;\n}\n\n.close-icon-1kDyU:before {\n  transform: rotate(45deg);\n}\n\n.close-icon-1kDyU:after {\n  transform: rotate(-45deg);\n}\n\n.close-icon-1kDyU:before,\n.close-icon-1kDyU:after {\n  position: absolute;\n  left: 23px;\n  top: 5px;\n  content: ' ';\n  height: 33px;\n  width: 3px;\n  background-color: #4b4b4b;\n}\n\n.close-icon-1kDyU:hover {\n  opacity: 0.8;\n  transition: opacity 0.2s ease-in-out;\n}\n";
 styleInject(css_248z$4);
 
-var sideMenu = "side-menu-2Fgdm";
-var leftSideMenu = "left-side-menu-L42L3";
-var rightSideMenu = "right-side-menu-Akk-Y";
-var wrapper$1 = "wrapper-jJaXo";
-var scroller = "scroller-ZnoJy";
-var title$1 = "title-WOjYJ";
-var hideLeft = "hide-left-4bzTL";
-var hideRight = "hide-right-IOmlC";
-var show = "show-Z8M2h";
-var closeIcon = "close-icon-NJkeP";
-var mobileBcGroup = "mobile-bc-group-6v8wI";
-var css_248z$3 = ".side-menu-2Fgdm {\n  width: 100%;\n  max-width: 400px;\n  height: 100%;\n  background-color: #f2f2f2;\n  position: absolute;\n  bottom: 0;\n  transition: transform 0.3s cubic-bezier(0, 0.52, 0, 1);\n  box-sizing: border-box;\n}\n\n.left-side-menu-L42L3 {\n  left: 0px;\n}\n\n.right-side-menu-Akk-Y {\n  right: 0px;\n}\n\n.wrapper-jJaXo {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.scroller-ZnoJy {\n  height: 100%;\n}\n\n.title-WOjYJ {\n  font-size: 22px;\n  margin: 20px;\n}\n\n.hide-left-4bzTL {\n  transform: translate(-960px, 0);\n}\n.hide-right-IOmlC {\n  transform: translate(960px, 0);\n}\n\n.show-Z8M2h {\n  transform: translate(0, 0);\n  overflow: hidden;\n}\n\n.close-icon-NJkeP {\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  opacity: 0.3;\n  width: 32px;\n  height: 32px;\n  z-index: 300;\n  width: 50px;\n  height: 40px;\n  cursor: pointer;\n}\n\n.close-icon-NJkeP:before {\n  transform: rotate(45deg);\n}\n\n.close-icon-NJkeP:after {\n  transform: rotate(-45deg);\n}\n\n.close-icon-NJkeP:before,\n.close-icon-NJkeP:after {\n  position: absolute;\n  right: 15px;\n  content: ' ';\n  height: 33px;\n  width: 3px;\n  background-color: #4b4b4b;\n}\n\n.close-icon-NJkeP:hover {\n  opacity: 0.8;\n  transition: opacity 0.2s ease-in-out;\n}\n\n.mobile-bc-group-6v8wI {\n  display: flex;\n  border-top: 0.8px solid #b6b6b7;\n  padding: 12px 16px;\n  border-bottom: 0.8px solid #b6b6b7;\n  margin-top: 40px;\n  overflow: auto;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n}\n\n.mobile-bc-group-6v8wI::-webkit-scrollbar {\n  display: none;\n}\n";
+var drawerWrapper = "drawer-wrapper-QY9a7";
+var left = "left-SicAa";
+var right = "right-p1mpA";
+var handle = "handle-5tzN-";
+var overlay = "overlay-vhpU9";
+var drawerHandleLine = "drawer-handle-line-65wJw";
+var drawerHandle = "drawer-handle-zhmPW";
+var drawer = "drawer-P-5-0";
+var drawerHeader = "drawer-header-FOHFa";
+var scrollWrapper = "scroll-wrapper-f27j2";
+var closeButton = "close-button-Tg2c5";
+var bottom = "bottom-VZZjn";
+var top = "top-o1Wjp";
+var bottomSpacer = "bottom-spacer-kdhiH";
+var onSide = "on-side-JUQWn";
+var css_248z$3 = ".drawer-wrapper-QY9a7 {\n  transition:\n    opacity 0.3s ease,\n    transform 0.5s cubic-bezier(0.32, 0.72, 0, 1) !important;\n}\n\n.drawer-wrapper-QY9a7 {\n  outline: medium none invert;\n  outline: initial;\n  position: fixed;\n  width: 100%;\n  z-index: 14000;\n  pointer-events: auto;\n  opacity: 1;\n}\n\n.drawer-wrapper-QY9a7.vaul-dragging {\n  transition: opacity 0.3s ease !important;\n}\n\n[data-state='closed'].drawer-wrapper-QY9a7.left-SicAa,\n[data-state='closed'].drawer-wrapper-QY9a7.right-p1mpA {\n  opacity: 0;\n}\n\ndiv.handle-5tzN- {\n  background: transparent;\n}\n\n.overlay-vhpU9 {\n  background-color: rgba(0, 0, 0, 0.4);\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  opacity: 0;\n  animation: fadeIn-W2rJo 0.3s ease-in forwards;\n  z-index: 10000;\n}\n\n@keyframes fadeIn-W2rJo {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.drawer-handle-line-65wJw {\n  width: calc(36px);\n  height: 4px;\n  background-color: rgba(234, 234, 234, 0.9);\n  border-radius: 2px;\n}\n\n.drawer-handle-zhmPW {\n  position: absolute;\n  left: 50%;\n  transform: translate(-50%, -10px);\n  width: 40px;\n  height: 40px;\n  touch-action: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.drawer-P-5-0 {\n  display: flex;\n  flex-direction: column;\n  border-top-left-radius: 10px;\n  border-top-right-radius: 10px;\n  border: 0px solid #e4e4e7;\n  border-bottom: none;\n  border-top-width: 1px;\n  z-index: 2000000;\n  box-shadow: 0 -5px 16px rgba(0, 0, 0, 0.1);\n  background-color: rgba(255, 255, 255, 0.95);\n}\n\n.drawer-header-FOHFa {\n  padding: 8px 32px;\n}\n\n.drawer-open #Diva-content-wrapper {\n  overflow: visible !important;\n}\n\n.scroll-wrapper-f27j2 {\n  overflow-y: auto;\n  overflow-x: hidden;\n  overscroll-behavior: contain;\n  padding: 0px 32px;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 12px;\n}\n\n.close-button-Tg2c5 {\n  position: absolute;\n  top: 18px;\n  right: 18px;\n  width: 32px;\n  height: 32px;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2248%22 viewBox%3D%220 -960 960 960%22 width%3D%2248%22 fill%3D%22%23ccc%22%3E%3Cpath d%3D%22m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 70%;\n  transition:\n    border-color 0.2s ease-in,\n    background-image 0.2s ease-in;\n  cursor: pointer;\n  z-index: 500;\n  border: 1px solid transparent;\n  border-radius: 50%;\n  padding: 0px;\n}\n\n.close-button-Tg2c5:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2248%22 viewBox%3D%220 -960 960 960%22 width%3D%2248%22 fill%3D%22%23aaa%22%3E%3Cpath d%3D%22m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z%22%2F%3E%3C%2Fsvg%3E\");\n  border: 1px solid #aaa;\n}\n\n.bottom-VZZjn {\n  bottom: 0;\n  right: 0;\n  left: 0;\n}\n\n.left-SicAa,\n.right-p1mpA {\n  bottom: 0;\n}\n.right-p1mpA {\n  right: 0;\n}\n\n.top-o1Wjp {\n  top: 0;\n  right: 0;\n  left: 0;\n}\n\nhtml body[data-scroll-locked] {\n  position: static !important;\n}\n\n.bottom-spacer-kdhiH {\n  min-height: 12px;\n}\n\n.on-side-JUQWn {\n  width: 100%;\n}\n";
 styleInject(css_248z$3);
 
 function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var SideMenu = function SideMenu() {
-  var _contentStore$sideMen, _contentStore$sideMen5, _contentStore$sideMen6, _contentStore$headerI, _contentStore$headerI2, _contentStore$sideMen7, _contentStore$sideMen8, _contentStore$sideMen9, _contentStore$sideMen10;
+var MobileDrawer = function MobileDrawer(_ref) {
+  var _contentStore$drawerM, _contentStore$drawerM2;
+  _objectDestructuringEmpty(_ref);
   var _useDivaCoreContext = useDivaCoreContext(),
     contentStore = _useDivaCoreContext.contentStore;
-  var _useState = useState(!((_contentStore$sideMen = contentStore.sideMenu) !== null && _contentStore$sideMen !== void 0 && _contentStore$sideMen.open)),
+  var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
-    hiddenDelayed = _useState2[0],
-    setHiddenDelayed = _useState2[1];
+    activeSnapPoint = _useState2[0],
+    _setActiveSnapPoint = _useState2[1];
+  var useMove = useMemo(function () {
+    return function (ev) {
+      return ev.preventDefault();
+    };
+  }, []);
+  var closeDrawerMenu = contentStore.closeDrawerMenu;
+  var _ref2 = (_contentStore$drawerM = contentStore.drawerMenu) !== null && _contentStore$drawerM !== void 0 ? _contentStore$drawerM : {},
+    showOverlay = _ref2.showOverlay,
+    _ref2$mountElementId = _ref2.mountElementId,
+    mountElementId = _ref2$mountElementId === void 0 ? 'DivaCore' : _ref2$mountElementId,
+    onClose = _ref2.onClose,
+    open = _ref2.open,
+    _ref2$direction = _ref2.direction,
+    direction = _ref2$direction === void 0 ? 'bottom' : _ref2$direction,
+    title = _ref2.title,
+    snapPoints = _ref2.snapPoints,
+    noModal = _ref2.noModal,
+    handleInternScroll = _ref2.handleInternScroll,
+    hideCloseButton = _ref2.hideCloseButton,
+    content = _ref2.content,
+    backgroundColor = _ref2.backgroundColor,
+    drawerStyle = _ref2.drawerStyle,
+    wrapperStyle = _ref2.wrapperStyle;
   useEffect(function () {
-    var _contentStore$sideMen2;
-    if (!((_contentStore$sideMen2 = contentStore.sideMenu) !== null && _contentStore$sideMen2 !== void 0 && _contentStore$sideMen2.open)) {
-      setTimeout(function () {
-        var _contentStore$sideMen3;
-        return setHiddenDelayed(!((_contentStore$sideMen3 = contentStore.sideMenu) !== null && _contentStore$sideMen3 !== void 0 && _contentStore$sideMen3.open));
-      }, 500);
+    //when drawer is open, prevent swipe to refresh the page on android
+    if (open) {
+      window.addEventListener('touchmove', useMove, {
+        passive: false
+      });
+      if (!noModal) document.body.classList.add('drawer-open');
     } else {
-      var _contentStore$sideMen4;
-      setHiddenDelayed(!((_contentStore$sideMen4 = contentStore.sideMenu) !== null && _contentStore$sideMen4 !== void 0 && _contentStore$sideMen4.open));
-    }
-  }, [(_contentStore$sideMen5 = contentStore.sideMenu) === null || _contentStore$sideMen5 === void 0 ? void 0 : _contentStore$sideMen5.open]);
-  var swipeHandler = useSwipeable({
-    onSwipedLeft: function onSwipedLeft(e) {
-      var _e$event$path;
-      // do not swipe if the event is triggered withing the breadcrumbs
-
-      var allElements = [];
-      _getAllParents(e.event.target, allElements);
-      if (contentStore.sideMenu && contentStore.sideMenu.swipeable != false && !((_e$event$path = e.event.path) !== null && _e$event$path !== void 0 && _e$event$path.find(function (p) {
-        return p.className == mobileBcGroup || p.className == 'diva-stop-swipe-detection';
-      })) && !allElements.find(function (e) {
-        return e.className == mobileBcGroup || e.className == 'diva-stop-swipe-detection';
-      })) contentStore.closeSideMenu();
-    },
-    trackMouse: true
-  });
-  var _getAllParents = function getAllParents(element, allElements) {
-    if (element.parentElement && element.nodeName != 'BODY') {
-      allElements.push(element.parentElement);
-      _getAllParents(element.parentElement, allElements);
+      window.removeEventListener('touchmove', useMove);
+      if (!noModal) document.body.classList.remove('drawer-open');
     }
+    return function () {
+      window.removeEventListener('touchmove', useMove);
+      if (!noModal) document.body.classList.remove('drawer-open');
+    };
+  }, [(_contentStore$drawerM2 = contentStore.drawerMenu) === null || _contentStore$drawerM2 === void 0 ? void 0 : _contentStore$drawerM2.open]);
+  if (!contentStore.drawerMenu) return /*#__PURE__*/jsx(Fragment, {});
+  var mountElement = mountElementId ? document.getElementById(mountElementId) : undefined;
+  if (!mountElement) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  var close = function close() {
+    closeDrawerMenu();
+    //delay the state changes so the animation of the drawer is not interrupted
+    setTimeout(function () {
+      onClose === null || onClose === void 0 || onClose();
+    }, 400);
   };
-  var hide = ((_contentStore$sideMen6 = contentStore.sideMenu) === null || _contentStore$sideMen6 === void 0 ? void 0 : _contentStore$sideMen6.side) == 'right' ? hideRight : hideLeft;
-  if (!contentStore.sideMenu) return /*#__PURE__*/jsx(Fragment, {});
-  var height = (_contentStore$headerI = (_contentStore$headerI2 = contentStore.headerInfos.HeaderElement) === null || _contentStore$headerI2 === void 0 ? void 0 : _contentStore$headerI2.getBoundingClientRect().height) !== null && _contentStore$headerI !== void 0 ? _contentStore$headerI : 0;
-  return /*#__PURE__*/jsxs("div", _objectSpread$5(_objectSpread$5({}, swipeHandler), {}, {
-    style: _objectSpread$5(_objectSpread$5({}, contentStore.sideMenu.style), {}, {
-      width: hiddenDelayed ? '0px' : undefined,
-      backgroundColor: contentStore.sideMenu.backgroundColor,
-      height: (_contentStore$sideMen7 = contentStore.sideMenu) !== null && _contentStore$sideMen7 !== void 0 && _contentStore$sideMen7.showCoreHeader ? 'calc(100% - ' + height + 'px)' : undefined,
-      zIndex: 2000000,
-      position: contentStore.isAbsoluteFullscreenComponent ? 'fixed' : contentStore === null || contentStore === void 0 || (_contentStore$sideMen8 = contentStore.sideMenu) === null || _contentStore$sideMen8 === void 0 || (_contentStore$sideMen8 = _contentStore$sideMen8.style) === null || _contentStore$sideMen8 === void 0 ? void 0 : _contentStore$sideMen8.position
-    }),
-    className: classnames(sideMenu, contentStore.sideMenu.side == 'right' ? rightSideMenu : leftSideMenu, (_contentStore$sideMen9 = contentStore.sideMenu) !== null && _contentStore$sideMen9 !== void 0 && _contentStore$sideMen9.open ? show : hide),
-    children: [/*#__PURE__*/jsx("div", {
-      className: closeIcon,
-      onClick: (_contentStore$sideMen10 = contentStore.sideMenu) === null || _contentStore$sideMen10 === void 0 ? void 0 : _contentStore$sideMen10.onClose
-    }), /*#__PURE__*/jsxs("div", {
-      className: wrapper$1,
-      children: [!!contentStore.sideMenu.title && /*#__PURE__*/jsx("div", {
-        className: title$1,
-        children: contentStore.sideMenu.title
-      }), contentStore.sideMenu.content && /*#__PURE__*/jsx("div", {
-        className: scroller,
-        children: contentStore.sideMenu.content
+  var contentHeight = '100%';
+  if (['bottom', 'top'].includes(direction)) {
+    if (snapPoints) {
+      if (snapPoints[activeSnapPoint] > 1) {
+        contentHeight = snapPoints[activeSnapPoint] + 'px';
+      } else contentHeight = 'calc(' + (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[activeSnapPoint]) * 100 + '%' + ' - 16px)';
+    } else {
+      contentHeight = 'fit-content';
+    }
+  }
+  var maxHeight = contentHeight === 'fit-content' && mountElement ? mountElement === null || mountElement === void 0 ? void 0 : mountElement.getBoundingClientRect().height : undefined;
+  var maxWidth = ['left', 'right'].includes(direction) ? 400 : undefined;
+  return /*#__PURE__*/jsx(Drawer.Root, {
+    container: mountElement,
+    open: !!open,
+    direction: direction,
+    onClose: close,
+    activeSnapPoint: snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[activeSnapPoint],
+    setActiveSnapPoint: function setActiveSnapPoint(s) {
+      var _snapPoints$indexOf;
+      return _setActiveSnapPoint((_snapPoints$indexOf = snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints.indexOf(s)) !== null && _snapPoints$indexOf !== void 0 ? _snapPoints$indexOf : 0);
+    },
+    snapPoints: snapPoints,
+    closeThreshold: 0.8,
+    repositionInputs: false,
+    modal: !noModal,
+    children: /*#__PURE__*/jsxs(Drawer.Portal, {
+      children: [showOverlay && /*#__PURE__*/jsx(Drawer.Overlay, {
+        className: overlay
+      }), /*#__PURE__*/jsxs(Drawer.Content, {
+        className: classnames(drawerWrapper, direction === 'bottom' ? bottom : direction === 'left' ? left : direction === 'right' ? right : direction === 'top' ? top : undefined),
+        style: _objectSpread$5({
+          height: contentHeight,
+          maxWidth: maxWidth,
+          maxHeight: maxHeight ? maxHeight + 'px' : undefined
+        }, drawerStyle),
+        children: [['bottom', 'top'].includes(direction) && /*#__PURE__*/jsx(Drawer.Handle, {
+          className: handle,
+          children: /*#__PURE__*/jsx("div", {
+            className: drawerHandle,
+            children: /*#__PURE__*/jsx("div", {
+              className: drawerHandleLine
+            })
+          })
+        }), /*#__PURE__*/jsxs("div", {
+          className: classnames(drawer, ['left', 'right'].includes(direction) ? onSide : undefined),
+          onTouchMove: function onTouchMove(e) {
+            return e.stopPropagation();
+          },
+          style: _objectSpread$5({
+            height: contentHeight,
+            maxWidth: maxWidth,
+            maxHeight: maxHeight ? maxHeight - 22 + 'px' : undefined,
+            backgroundColor: backgroundColor
+          }, wrapperStyle),
+          children: [!hideCloseButton && /*#__PURE__*/jsx("button", {
+            className: closeButton,
+            onClick: close
+          }), title !== undefined && /*#__PURE__*/jsx("div", {
+            className: classnames(drawerHeader),
+            children: title
+          }), !handleInternScroll ? /*#__PURE__*/jsxs("div", {
+            className: classnames(scrollWrapper),
+            children: [content, /*#__PURE__*/jsx("div", {
+              className: bottomSpacer
+            })]
+          }) : content]
+        })]
       })]
-    })]
-  }));
+    })
+  });
 };
-var SideMenu$1 = observer(SideMenu);
+var DrawerMenu = observer(MobileDrawer);
 
 function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LazyModals$1 = /*#__PURE__*/React.lazy(function () {
-  return import('./ModalsWrapper-ced4f268.js');
+  return import('./ModalsWrapper-d1581ecb.js');
 });
 function Fullscreen(_ref) {
   var inAbsoluteFullscreen = _ref.inAbsoluteFullscreen;
@@ -9739,11 +9525,11 @@ function Fullscreen(_ref) {
     var C = c.component;
     return /*#__PURE__*/jsxs("div", {
       id: "DivaCore",
-      className: classnames('diva-fullscreen', c.state.absoluteFullscreen ? absoluteOverlay : overlay),
+      className: classnames('diva-fullscreen', c.state.absoluteFullscreen ? absoluteOverlay : overlay$1),
       style: isMobile ? (_c$state$absoluteFull = c.state.absoluteFullscreenStyle) === null || _c$state$absoluteFull === void 0 ? void 0 : _c$state$absoluteFull.mobile : (_c$state$absoluteFull2 = c.state.absoluteFullscreenStyle) === null || _c$state$absoluteFull2 === void 0 ? void 0 : _c$state$absoluteFull2.desktop,
       children: [/*#__PURE__*/jsx(Fullscreen, {
         inAbsoluteFullscreen: true
-      }), /*#__PURE__*/jsx(Spinner$1, {}), /*#__PURE__*/jsx(SideMenu$1, {}), configurationStore.enableModals && /*#__PURE__*/jsx(LazyModals$1, {}), /*#__PURE__*/jsx(Suspense, {
+      }), /*#__PURE__*/jsx(Spinner$1, {}), /*#__PURE__*/jsx(DrawerMenu, {}), configurationStore.enableModals && /*#__PURE__*/jsx(LazyModals$1, {}), /*#__PURE__*/jsx(Suspense, {
         fallback: /*#__PURE__*/jsx(Fallback, {}),
         children: /*#__PURE__*/jsx(C, _objectSpread$4({}, c.state))
       })]
@@ -9751,13 +9537,13 @@ function Fullscreen(_ref) {
   }
   if (!contentStore.fullscreen) return /*#__PURE__*/jsx(Fragment, {});
   return /*#__PURE__*/jsxs("div", {
-    className: classnames('diva-fullscreen', contentStore.fullscreen.absoluteFullscreen ? absoluteOverlay : overlay),
+    className: classnames('diva-fullscreen', contentStore.fullscreen.absoluteFullscreen ? absoluteOverlay : overlay$1),
     "data-test-id": "plannerFullscreen",
     style: {
       zIndex: contentStore.fullscreen.overwrittenZIndex
     },
-    children: [!contentStore.fullscreen.hideSpinner && /*#__PURE__*/jsx(Spinner$1, {}), /*#__PURE__*/jsx(SideMenu$1, {}), configurationStore.enableModals && /*#__PURE__*/jsx(LazyModals$1, {}), !contentStore.fullscreen.hideClose && /*#__PURE__*/jsx("div", {
-      className: closeIcon$1,
+    children: [!contentStore.fullscreen.hideSpinner && /*#__PURE__*/jsx(Spinner$1, {}), /*#__PURE__*/jsx(DrawerMenu, {}), configurationStore.enableModals && /*#__PURE__*/jsx(LazyModals$1, {}), !contentStore.fullscreen.hideClose && /*#__PURE__*/jsx("div", {
+      className: closeIcon,
       onClick: onClose,
       "data-test-id": "closeFullscreenBtn",
       style: {
@@ -9922,7 +9708,7 @@ function ErrorDisplay() {
             children: [loadingAndErrorStore.divaErrorCode ? loadingAndErrorStore.divaErrorCode + ': ' : '', " ", loadingAndErrorStore.error]
           }), /*#__PURE__*/jsxs("div", {
             className: actionButtons,
-            children: [((_loadingAndErrorStore2 = loadingAndErrorStore.fallbackModule) === null || _loadingAndErrorStore2 === void 0 ? void 0 : _loadingAndErrorStore2.route) && /*#__PURE__*/jsx(Button$1, {
+            children: [((_loadingAndErrorStore2 = loadingAndErrorStore.fallbackModule) === null || _loadingAndErrorStore2 === void 0 ? void 0 : _loadingAndErrorStore2.route) && /*#__PURE__*/jsx(Button, {
               color: "primary",
               variant: "contained",
               onClick: function onClick() {
@@ -9932,14 +9718,14 @@ function ErrorDisplay() {
                 });
               },
               children: (_loadingAndErrorStore6 = loadingAndErrorStore.fallbackModule.text) !== null && _loadingAndErrorStore6 !== void 0 ? _loadingAndErrorStore6 : t('portal.error.gotodefaultmodule') + ' (' + loadingAndErrorStore.fallbackModule.route.replace('/', '') + ')'
-            }), configurationStore.applicationEnvironment !== 'WEB' && loadingAndErrorStore.showLogout && /*#__PURE__*/jsx(Button$1, {
+            }), configurationStore.applicationEnvironment !== 'WEB' && loadingAndErrorStore.showLogout && /*#__PURE__*/jsx(Button, {
               color: "primary",
               variant: "contained",
               onClick: function onClick() {
                 return authorizationStore.logout();
               },
               children: "Logout"
-            }), showReload && /*#__PURE__*/jsx(Button$1, {
+            }), showReload && /*#__PURE__*/jsx(Button, {
               color: "primary",
               variant: "contained",
               onClick: function onClick() {
@@ -10105,10 +9891,10 @@ function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymb
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LOG$2 = getLogger('Framework', 'Root');
 var LazyAuth = /*#__PURE__*/React.lazy(function () {
-  return import('./index-25c54ee4.js');
+  return import('./index-77f480cb.js');
 });
 var LazyModals = /*#__PURE__*/React.lazy(function () {
-  return import('./ModalsWrapper-ced4f268.js');
+  return import('./ModalsWrapper-d1581ecb.js');
 });
 function ContentComponent() {
   var context = useDivaCoreContext();
@@ -10119,7 +9905,7 @@ function ContentComponent() {
     children: [/*#__PURE__*/jsxs(Suspense, {
       fallback: /*#__PURE__*/jsx(Fragment, {}),
       children: [context.configurationStore.hasAuthentication && /*#__PURE__*/jsx(LazyAuth, {}), context.configurationStore.enableModals && !context.contentStore.fullscreen && !context.contentStore.isFullscreenComponentDefined && /*#__PURE__*/jsx(LazyModals, {})]
-    }), /*#__PURE__*/jsx(Banner$1, {}), /*#__PURE__*/jsx(Fullscreen$1, {}), /*#__PURE__*/jsx(SnackBar, {}), !context.contentStore.isFullscreenComponentDefined && /*#__PURE__*/jsx(SideMenu$1, {}), /*#__PURE__*/jsxs("div", {
+    }), /*#__PURE__*/jsx(Banner$1, {}), /*#__PURE__*/jsx(Fullscreen$1, {}), /*#__PURE__*/jsx(SnackBar, {}), !context.contentStore.isFullscreenComponentDefined && /*#__PURE__*/jsx(DrawerMenu, {}), /*#__PURE__*/jsxs("div", {
       style: {
         position: 'relative',
         width: '100%',
@@ -10383,7 +10169,7 @@ function HelpButton(_ref) {
 
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var actionFunctions = ['openComponent', 'closeComponentInFullscreen', 'setAbsoluteFullScreen', 'updateBreadcrumbs', 'openModal', 'closeModal', 'sendEmail', 'updateCustomLogo', 'updateCustomHeaderElement', 'toggleHidePrices', 'toggleHideConfigPricePreview', 'toggleLoading', 'changeLanguage', 'changeLoginMode', 'onEvent', 'subscribeEvents', 'unSubscribeEvents', 'setOrganization', 'getSessionGuid', 'getApi2AuthLoginData', 'logout', 'showLoginWindow', 'userHasPermission', 'openFullscreen', 'closeFullscreen', 'openSideMenu', 'closeSideMenu', 'openBarrier', 'updateHeaderInfos', 'openBanner', 'closeBanner', 'resolveComponent', 'openSnackBar', 'setComponentChange'];
+var actionFunctions = ['openComponent', 'closeComponentInFullscreen', 'setAbsoluteFullScreen', 'updateBreadcrumbs', 'openModal', 'closeModal', 'sendEmail', 'updateCustomLogo', 'updateCustomHeaderElement', 'toggleHidePrices', 'toggleHideConfigPricePreview', 'toggleLoading', 'changeLanguage', 'changeLoginMode', 'onEvent', 'subscribeEvents', 'unSubscribeEvents', 'setOrganization', 'getSessionGuid', 'getApi2AuthLoginData', 'logout', 'showLoginWindow', 'userHasPermission', 'openFullscreen', 'closeFullscreen', 'openDrawerMenu', 'closeDrawerMenu', 'updateHeaderInfos', 'openBanner', 'closeBanner', 'resolveComponent', 'openSnackBar', 'setComponentChange'];
 function getRender(C) {
   return function (args) {
     return /*#__PURE__*/jsx(DivaMockProvider, {
@@ -10751,9 +10537,7 @@ var MockedRootStore = /*#__PURE__*/function () {
     key: "headerInfos",
     get: function get() {
       var _this$data$headerInfo;
-      return (_this$data$headerInfo = this.data.headerInfos) !== null && _this$data$headerInfo !== void 0 ? _this$data$headerInfo : {
-        visible: false
-      };
+      return (_this$data$headerInfo = this.data.headerInfos) !== null && _this$data$headerInfo !== void 0 ? _this$data$headerInfo : {};
     }
   }, {
     key: "theme",
@@ -10793,9 +10577,12 @@ var MockedRootStore = /*#__PURE__*/function () {
         _this$data$hideConfig,
         _this$data$applicatio,
         _this$data$isFullscre,
-        _this$data$enableSupp;
+        _this$data$enableSupp,
+        _this$data$sideMenuOp;
       return {
         actions: {
+          openSideMenu: function openSideMenu() {},
+          closeSideMenu: function closeSideMenu() {},
           changeLanguage: this.changeLanguage.bind(this),
           changeLoginMode: this.changeLoginMode.bind(this),
           subscribeEvents: this.subscribeEvents.bind(this),
@@ -10949,23 +10736,16 @@ var MockedRootStore = /*#__PURE__*/function () {
               throw new Error('Method not implemented.');
             }
           },
-          openSideMenu: function openSideMenu(sideMenu) {
-            if (_this2.actions.openSideMenu) {
-              _this2.actions.openSideMenu(sideMenu);
-            } else {
-              throw new Error('Method not implemented.');
-            }
-          },
-          closeSideMenu: function closeSideMenu() {
-            if (_this2.actions.closeSideMenu) {
-              _this2.actions.closeSideMenu();
+          openDrawerMenu: function openDrawerMenu(drawerMenu) {
+            if (_this2.actions.openDrawerMenu) {
+              _this2.actions.openDrawerMenu(drawerMenu);
             } else {
               throw new Error('Method not implemented.');
             }
           },
-          openBarrier: function openBarrier(barrier) {
-            if (_this2.actions.openBarrier) {
-              _this2.actions.openBarrier(barrier);
+          closeDrawerMenu: function closeDrawerMenu(id, destroy) {
+            if (_this2.actions.closeDrawerMenu) {
+              _this2.actions.closeDrawerMenu();
             } else {
               throw new Error('Method not implemented.');
             }
@@ -11056,7 +10836,8 @@ var MockedRootStore = /*#__PURE__*/function () {
           theme: this.theme,
           applicationEnvironment: (_this$data$applicatio = this.data.applicationEnvironment) !== null && _this$data$applicatio !== void 0 ? _this$data$applicatio : 'WEB',
           isFullscreenComponent: (_this$data$isFullscre = this.data.isFullscreenComponent) !== null && _this$data$isFullscre !== void 0 ? _this$data$isFullscre : false,
-          enableSupport: (_this$data$enableSupp = this.data.enableSupport) !== null && _this$data$enableSupp !== void 0 ? _this$data$enableSupp : false
+          enableSupport: (_this$data$enableSupp = this.data.enableSupport) !== null && _this$data$enableSupp !== void 0 ? _this$data$enableSupp : false,
+          sideMenuOpen: (_this$data$sideMenuOp = this.data.sideMenuOpen) !== null && _this$data$sideMenuOp !== void 0 ? _this$data$sideMenuOp : false
         }),
         handler: this.handlers
       };
@@ -11094,4 +10875,4 @@ LOG.startTransaction({
 });
 window.DIVA_VERSION = "v".concat(process.env.VERSION);
 
-export { AuthButton as A, Content as C, DivaCore as D, HelpButton as H, Input as I, ONE_DAY_UNIX as O, ProductHandler as P, RequestStatus as R, SupportHandler as S, getLogger as a, separator as b, success as c, auth as d, error as e, loginBox as f, google as g, logoContainer as h, styleInject as i, useDivaCore as j, AuthorizationHandler as k, link as l, microsoft as m, AnalyticsHandler as n, OrganizationHandler as o, ClientArticleHandler as p, DivaMockProvider as q, storyBookCoreMock as r, socialButton as s, titlecontainer as t, useDivaCoreContext as u };
+export { AuthorizationHandler as A, Content as C, DivaCore as D, HelpButton as H, ONE_DAY_UNIX as O, ProductHandler as P, RequestStatus as R, SupportHandler as S, useDivaCore as a, AnalyticsHandler as b, OrganizationHandler as c, ClientArticleHandler as d, DivaMockProvider as e, storyBookCoreMock as f, getLogger as g, styleInject as s, useDivaCoreContext as u };