@crystaldesign/diva-seller 24.14.0-beta.17 → 24.14.0-beta.19

package/build/esm/index.js

@@ -16,7 +16,7 @@ import CardActionArea from '@material-ui/core/CardActionArea';
 import CardMedia from '@material-ui/core/CardMedia';
 import Typography$1 from '@material-ui/core/Typography';
 import { makeStyles, createStyles, styled as styled$1 } from '@material-ui/core/styles';
-import { styled, Box, Typography, Card as Card$1, CardActionArea as CardActionArea$1, CardMedia as CardMedia$1, Button as Button$1, withStyles, TextField, ButtonGroup as ButtonGroup$1, makeStyles as makeStyles$1, createStyles as createStyles$1, Tooltip, Paper as Paper$1, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, Link, Tab, Tabs, Table as Table$1, TableBody as TableBody$1, TableRow as TableRow$1, TableCell as TableCell$1, CardHeader, CardContent, FormControl as FormControl$1, FormHelperText, Grid as Grid$1, TextareaAutosize, Select as Select$1, MenuItem as MenuItem$1, IconButton as IconButton$1, ListItemIcon } from '@material-ui/core';
+import { styled, Box, Typography, Card as Card$1, CardActionArea as CardActionArea$1, CardMedia as CardMedia$1, Button as Button$1, withStyles, TextField, ButtonGroup as ButtonGroup$1, makeStyles as makeStyles$1, createStyles as createStyles$1, Tooltip, Paper as Paper$1, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, IconButton as IconButton$1, Link, InputBase, Accordion, AccordionSummary, Tabs, Tab, AccordionDetails, Table as Table$1, TableBody as TableBody$1, TableRow as TableRow$1, TableCell as TableCell$1, CardHeader, CardContent, FormControl as FormControl$1, FormHelperText, Grid as Grid$1, TextareaAutosize, Select as Select$1, MenuItem as MenuItem$1, ListItemIcon } from '@material-ui/core';
 import { Histogram, useFilterState, FilterComponent, AnalyticsComponent } from '@crystaldesign/analytics';
 import Button from '@material-ui/core/Button';
 import ButtonGroup from '@material-ui/core/ButtonGroup';
@@ -54,28 +54,19 @@ import Select from '@material-ui/core/Select';
 import Input from '@material-ui/core/Input';
 import OrderEntry, { apiSaveRenderJobs, VariantSelector } from '@crystaldesign/order-entry';
 import CloseIcon from '@material-ui/icons/Close';
-import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
-import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
-import PictureAsPdfIcon from '@material-ui/icons/PictureAsPdf';
-import GridList from '@material-ui/core/GridList';
-import GridListTile from '@material-ui/core/GridListTile';
-import ExpandLess from '@material-ui/icons/ExpandLess';
-import ExpandMore from '@material-ui/icons/ExpandMore';
-import Skeleton from '@material-ui/lab/Skeleton';
-import Carousel from 'react-material-ui-carousel';
-import Toolbar from '@material-ui/core/Toolbar';
-import classNames from 'classnames';
+import classnames from 'classnames';
+import InfoRounded from '@material-ui/icons/InfoRounded';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Thumbs, Pagination, FreeMode } from 'swiper/modules';
+import { Autoplay, Thumbs, Pagination, FreeMode, Mousewheel } from 'swiper/modules';
 import 'swiper/css';
 import 'swiper/css/pagination';
 import 'swiper/css/autoplay';
 import 'swiper/css/thumbs';
 import 'swiper/css/free-mode';
-import '@babel/runtime/helpers/objectDestructuringEmpty';
-import PropTypes from 'prop-types';
+import 'swiper/css/mousewheel';
+import ExpandMore from '@material-ui/icons/ExpandMore';
 import ProductsComponent, { useProductState as useProductState$1 } from '@crystaldesign/products-component';
-import { withStyles as withStyles$1 } from '@material-ui/styles';
+import Alert from '@material-ui/lab/Alert';
 import Tab$1 from '@material-ui/core/Tab';
 import Tabs$1 from '@material-ui/core/Tabs';
 import Autocomplete$1 from '@material-ui/lab/Autocomplete';
@@ -91,13 +82,13 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItemText from '@material-ui/core/ListItemText';
+import ExpandLess from '@material-ui/icons/ExpandLess';
 import SearchField from '@crystaldesign/searchfield';
 import Drawer from '@material-ui/core/Drawer';
 import AssetEditor, { DivaFile } from '@crystaldesign/media-upload';
 import AddIcon$1 from '@material-ui/icons/NoteAdd';
 import DeleteIcon from '@material-ui/icons/Delete';
 import debounce from 'lodash/debounce';
-import Alert from '@material-ui/lab/Alert';
 import Settings from '@material-ui/icons/Settings';
 
 (function() {
@@ -200,7 +191,7 @@ var SellerContext = /*#__PURE__*/createContext({
   }
 });
 
-var _excluded$c = ["internal"];
+var _excluded$b = ["internal"];
 var GROUP_ID = 'SELLER';
 function useBreadcrumbs(_ref) {
   var updateBreadcrumbs = _ref.updateBreadcrumbs,
@@ -364,7 +355,7 @@ function breadcrumbPlanner(_ref6) {
   if (state.currentPlannerParams) {
     var _state$currentPlanner = state.currentPlannerParams,
       internal = _state$currentPlanner.internal,
-      params = _objectWithoutProperties(_state$currentPlanner, _excluded$c);
+      params = _objectWithoutProperties(_state$currentPlanner, _excluded$b);
     return {
       groupId: GROUP_ID,
       level: 3,
@@ -463,11 +454,11 @@ function breadcrumbCollection() {
   };
 }
 
-function ownKeys$A(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$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$B(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$B(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$B(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$B(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var reducer$1 = function reducer(state, action) {
   if (action.type == 'update') {
-    var newState = _objectSpread$A({}, state);
+    var newState = _objectSpread$B({}, state);
     action.payload.forEach(function (p) {
       if (p.field == 'basketState') {
         if (p.value) {
@@ -1290,15 +1281,15 @@ function orderFn(a, b, orderBy) {
   return 0;
 }
 
-var _excluded$b = ["collectionId"],
-  _excluded2$3 = ["basetId"],
+var _excluded$a = ["collectionId"],
+  _excluded2$2 = ["basetId"],
   _excluded3$1 = ["catalogCodex", "accountId"];
 function _createForOfIteratorHelper$2(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$2(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray$2(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$2(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$2(r, a) : void 0; } }
 function _arrayLikeToArray$2(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function ownKeys$z(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$z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$z(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var LOG$a = getLogger('Seller', 'SellerStateData');
+function ownKeys$A(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$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var LOG$9 = getLogger('Seller', 'SellerStateData');
 function useSellerStateData(_ref) {
   var sessionGuid = _ref.sessionGuid,
     configData = _ref.configData,
@@ -1335,7 +1326,7 @@ function useSellerStateData(_ref) {
   var updateAcountLogo = function updateAcountLogo(logo) {
     updateCustomLogo(['SELLER', 'DIVA_WEBPLANNER', 'REPORT'], logo);
   };
-  var basketHandler = new BasketHandler(LOG$a, apiConfig.basketService, apiConfig.api2["default"]);
+  var basketHandler = new BasketHandler(LOG$9, apiConfig.basketService, apiConfig.api2["default"]);
   useEffect(function () {
     if (loginMode !== 'offline' && isVisible == true) {
       resetState();
@@ -1427,7 +1418,7 @@ function useSellerStateData(_ref) {
               }]
             });
           case 7:
-            return _context.abrupt("return", processData(_objectSpread$z(_objectSpread$z({}, props), {}, {
+            return _context.abrupt("return", processData(_objectSpread$A(_objectSpread$A({}, props), {}, {
               data: collections
             })));
           case 10:
@@ -1451,7 +1442,7 @@ function useSellerStateData(_ref) {
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            collectionId = _ref3.collectionId, props = _objectWithoutProperties(_ref3, _excluded$b);
+            collectionId = _ref3.collectionId, props = _objectWithoutProperties(_ref3, _excluded$a);
             if (!(state.firstLoginApiUrl && sessionGuid)) {
               _context2.next = 14;
               break;
@@ -1491,7 +1482,7 @@ function useSellerStateData(_ref) {
             updateAcountLogo((_state$collections = state.collections) === null || _state$collections === void 0 || (_state$collections = _state$collections.find(function (c) {
               return c.id == collectionId;
             })) === null || _state$collections === void 0 ? void 0 : _state$collections.accountLogo);
-            return _context2.abrupt("return", processData(_objectSpread$z(_objectSpread$z({}, props), {}, {
+            return _context2.abrupt("return", processData(_objectSpread$A(_objectSpread$A({}, props), {}, {
               data: catalogs || []
             })));
           case 14:
@@ -1613,7 +1604,7 @@ function useSellerStateData(_ref) {
               _context4.next = 26;
               break;
             }
-            LOG$a.error(new DivaError('AccountSessionId is undefined', {
+            LOG$9.error(new DivaError('AccountSessionId is undefined', {
               code: 'SELLER_0001'
             }));
             return _context4.abrupt("return");
@@ -1661,7 +1652,7 @@ function useSellerStateData(_ref) {
               _context4.next = 40;
               break;
             }
-            LOG$a.error(new DivaError('Error on Loading CatalogData', {
+            LOG$9.error(new DivaError('Error on Loading CatalogData', {
               code: 'SELLER_0001',
               cause: _context4.t2
             }));
@@ -1794,7 +1785,7 @@ function useSellerStateData(_ref) {
   }();
   var updateBasketState = function updateBasketState(_ref12) {
     var basetId = _ref12.basetId,
-      basketState = _objectWithoutProperties(_ref12, _excluded2$3);
+      basketState = _objectWithoutProperties(_ref12, _excluded2$2);
     dispatch({
       type: 'update',
       payload: [{
@@ -1878,8 +1869,8 @@ function useSellerStateData(_ref) {
             _context7.next = 22;
             return apiLoadBasket({
               divaNr: divaNr,
-              apiConfig: _objectSpread$z(_objectSpread$z({}, apiConfig), {}, {
-                api2: _objectSpread$z(_objectSpread$z({}, apiConfig.api2), {}, {
+              apiConfig: _objectSpread$A(_objectSpread$A({}, apiConfig), {}, {
+                api2: _objectSpread$A(_objectSpread$A({}, apiConfig.api2), {}, {
                   "default": state.firstLoginApiUrl
                 })
               }),
@@ -2207,7 +2198,7 @@ function useSellerStateData(_ref) {
               }]
             });
           case 24:
-            return _context9.abrupt("return", processData(_objectSpread$z(_objectSpread$z({}, props), {}, {
+            return _context9.abrupt("return", processData(_objectSpread$A(_objectSpread$A({}, props), {}, {
               data: articles || []
             })));
           case 27:
@@ -2263,10 +2254,10 @@ function useSellerStateData(_ref) {
   };
 }
 
-var _excluded$a = ["state", "setFirstLoginApiUrl", "updateBasketState", "setPlannerParams", "setReturnTo", "setOriginProductId", "setProductCategories", "resetState", "resetForCache"];
-function ownKeys$y(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$y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$y(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var LOG$9 = getLogger('Seller', 'SellerStateProvider');
+var _excluded$9 = ["state", "setFirstLoginApiUrl", "updateBasketState", "setPlannerParams", "setReturnTo", "setOriginProductId", "setProductCategories", "resetState", "resetForCache"];
+function ownKeys$z(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$z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$z(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var LOG$8 = getLogger('Seller', 'SellerStateProvider');
 var SellerStateProvider = function SellerStateProvider(_ref) {
   var children = _ref.children,
     vkpExportParams = _ref.vkpExportParams,
@@ -2346,7 +2337,7 @@ var SellerStateProvider = function SellerStateProvider(_ref) {
     setProductCategories = _useSellerStateData.setProductCategories,
     resetState = _useSellerStateData.resetState,
     resetForCache = _useSellerStateData.resetForCache,
-    stateFunctions = _objectWithoutProperties(_useSellerStateData, _excluded$a);
+    stateFunctions = _objectWithoutProperties(_useSellerStateData, _excluded$9);
   if (oldSession !== undefined && oldSession !== sessionGuid) resetState();
   if (oldSession !== sessionGuid) setOldSession(sessionGuid);
   useEffect(function () {
@@ -2588,7 +2579,7 @@ var SellerStateProvider = function SellerStateProvider(_ref) {
           case 37:
             _context3.prev = 37;
             _context3.t0 = _context3["catch"](0);
-            LOG$9.error(new DivaError('Could not open divaNr', {
+            LOG$8.error(new DivaError('Could not open divaNr', {
               cause: _context3.t0,
               code: 'SELLER_0001'
             }));
@@ -2629,7 +2620,7 @@ var SellerStateProvider = function SellerStateProvider(_ref) {
               _context4.next = 8;
               break;
             }
-            params = _objectSpread$y(_objectSpread$y(_objectSpread$y(_objectSpread$y({
+            params = _objectSpread$z(_objectSpread$z(_objectSpread$z(_objectSpread$z({
               catalogCodex: catalogCodex
             }, accountId ? {
               accountId: accountId
@@ -2644,13 +2635,13 @@ var SellerStateProvider = function SellerStateProvider(_ref) {
             } : {}), retailArticleNr ? {
               retailArticleNr: retailArticleNr
             } : {});
-            internal = _objectSpread$y(_objectSpread$y({}, forceReload ? {
+            internal = _objectSpread$z(_objectSpread$z({}, forceReload ? {
               forceReload: forceReload
             } : {}), {}, {
               accountSessionGuid: accountSessionGuid,
               basketData: basketData
             });
-            setPlannerParams(_objectSpread$y(_objectSpread$y({}, params), {}, {
+            setPlannerParams(_objectSpread$z(_objectSpread$z({}, params), {}, {
               internal: internal
             }));
             openComponent({
@@ -2682,7 +2673,7 @@ var SellerStateProvider = function SellerStateProvider(_ref) {
                       updateBasketState({
                         concat: true
                       });
-                      var _params = _objectSpread$y(_objectSpread$y(_objectSpread$y(_objectSpread$y(_objectSpread$y(_objectSpread$y(_objectSpread$y({}, catalogCodex ? {
+                      var _params = _objectSpread$z(_objectSpread$z(_objectSpread$z(_objectSpread$z(_objectSpread$z(_objectSpread$z(_objectSpread$z({}, catalogCodex ? {
                         catalogCodex: catalogCodex
                       } : {}), accountId ? {
                         accountId: accountId
@@ -2699,12 +2690,12 @@ var SellerStateProvider = function SellerStateProvider(_ref) {
                       } : {}), productId ? {
                         productId: productId
                       } : {});
-                      var _internal = _objectSpread$y(_objectSpread$y({}, forceReload ? {
+                      var _internal = _objectSpread$z(_objectSpread$z({}, forceReload ? {
                         forceReload: forceReload
                       } : {}), {}, {
                         accountSessionGuid: accountSessionGuid
                       });
-                      setPlannerParams(_objectSpread$y(_objectSpread$y({}, _params), {}, {
+                      setPlannerParams(_objectSpread$z(_objectSpread$z({}, _params), {}, {
                         internal: _internal
                       }));
                       openComponent({
@@ -2737,7 +2728,7 @@ var SellerStateProvider = function SellerStateProvider(_ref) {
                 });
               }
             } else {
-              _params2 = _objectSpread$y(_objectSpread$y(_objectSpread$y(_objectSpread$y(_objectSpread$y(_objectSpread$y({}, catalogCodex ? {
+              _params2 = _objectSpread$z(_objectSpread$z(_objectSpread$z(_objectSpread$z(_objectSpread$z(_objectSpread$z({}, catalogCodex ? {
                 catalogCodex: catalogCodex
               } : {}), accountId ? {
                 accountId: accountId
@@ -2752,12 +2743,12 @@ var SellerStateProvider = function SellerStateProvider(_ref) {
               } : {}), retailArticleNr ? {
                 retailArticleNr: retailArticleNr
               } : {});
-              _internal2 = _objectSpread$y(_objectSpread$y({}, forceReload ? {
+              _internal2 = _objectSpread$z(_objectSpread$z({}, forceReload ? {
                 forceReload: forceReload
               } : {}), {}, {
                 accountSessionGuid: accountSessionGuid
               });
-              setPlannerParams(_objectSpread$y(_objectSpread$y({}, _params2), {}, {
+              setPlannerParams(_objectSpread$z(_objectSpread$z({}, _params2), {}, {
                 internal: _internal2
               }));
               openComponent({
@@ -2793,7 +2784,7 @@ var SellerStateProvider = function SellerStateProvider(_ref) {
               divaNr: divaNr,
               returnTo: returnTo
             };
-            setPlannerParams(_objectSpread$y(_objectSpread$y({}, _params3), {}, {
+            setPlannerParams(_objectSpread$z(_objectSpread$z({}, _params3), {}, {
               internal: {
                 basketData: basketData,
                 forceReload: forceReload
@@ -2810,7 +2801,7 @@ var SellerStateProvider = function SellerStateProvider(_ref) {
             _context4.next = 23;
             break;
           case 22:
-            LOG$9.error(new DivaError('openPlanner got called with non all required params', {
+            LOG$8.error(new DivaError('openPlanner got called with non all required params', {
               code: 'SELLER_0001'
             }));
           case 23:
@@ -2841,7 +2832,7 @@ var SellerStateProvider = function SellerStateProvider(_ref) {
       step: null,
       assignNewDivaNr: false
     });
-    var params = _objectSpread$y(_objectSpread$y(_objectSpread$y(_objectSpread$y(_objectSpread$y(_objectSpread$y({}, catalogCodex ? {
+    var params = _objectSpread$z(_objectSpread$z(_objectSpread$z(_objectSpread$z(_objectSpread$z(_objectSpread$z({}, catalogCodex ? {
       catalogCodex: catalogCodex
     } : {}), accountId ? {
       accountId: accountId
@@ -2856,12 +2847,12 @@ var SellerStateProvider = function SellerStateProvider(_ref) {
     } : {}), retailArticleNr ? {
       retailArticleNr: retailArticleNr
     } : {});
-    var internal = _objectSpread$y(_objectSpread$y({}, forceReload ? {
+    var internal = _objectSpread$z(_objectSpread$z({}, forceReload ? {
       forceReload: forceReload
     } : {}), {}, {
       accountSessionGuid: accountSessionGuid
     });
-    setPlannerParams(_objectSpread$y(_objectSpread$y({}, params), {}, {
+    setPlannerParams(_objectSpread$z(_objectSpread$z({}, params), {}, {
       internal: internal
     }));
     openComponent({
@@ -2909,7 +2900,7 @@ var SellerStateProvider = function SellerStateProvider(_ref) {
               case 'toPlanner':
                 {
                   if (plannerParams) {
-                    var params = _objectSpread$y(_objectSpread$y(_objectSpread$y(_objectSpread$y(_objectSpread$y(_objectSpread$y({}, plannerParams.catalogCodex ? {
+                    var params = _objectSpread$z(_objectSpread$z(_objectSpread$z(_objectSpread$z(_objectSpread$z(_objectSpread$z({}, plannerParams.catalogCodex ? {
                       catalogCodex: plannerParams.catalogCodex
                     } : {}), plannerParams.accountId ? {
                       accountId: plannerParams.accountId
@@ -2922,12 +2913,12 @@ var SellerStateProvider = function SellerStateProvider(_ref) {
                     } : {}), plannerParams.retailArticleNr ? {
                       retailArticleNr: plannerParams.retailArticleNr
                     } : {});
-                    var internal = _objectSpread$y(_objectSpread$y({}, plannerParams.forceReload ? {
+                    var internal = _objectSpread$z(_objectSpread$z({}, plannerParams.forceReload ? {
                       forceReload: plannerParams.forceReload
                     } : {}), {}, {
                       accountSessionGuid: plannerParams.accountSessionGuid
                     });
-                    setPlannerParams(_objectSpread$y(_objectSpread$y({}, params), {}, {
+                    setPlannerParams(_objectSpread$z(_objectSpread$z({}, params), {}, {
                       internal: internal
                     }));
                     openComponent({
@@ -2954,8 +2945,8 @@ var SellerStateProvider = function SellerStateProvider(_ref) {
             _context5.next = 2;
             return apiLoadBasket({
               divaNr: divaNr,
-              apiConfig: _objectSpread$y(_objectSpread$y({}, apiConfig), {}, {
-                api2: _objectSpread$y(_objectSpread$y({}, apiConfig.api2), {}, {
+              apiConfig: _objectSpread$z(_objectSpread$z({}, apiConfig), {}, {
+                api2: _objectSpread$z(_objectSpread$z({}, apiConfig.api2), {}, {
                   "default": state.firstLoginApiUrl
                 })
               }),
@@ -3024,7 +3015,7 @@ var SellerStateProvider = function SellerStateProvider(_ref) {
       originProductId: state.originProductId,
       productCategories: state.productCategories
     },
-    actions: _objectSpread$y(_objectSpread$y({}, stateFunctions), {}, {
+    actions: _objectSpread$z(_objectSpread$z({}, stateFunctions), {}, {
       openComponent: openComponent,
       openModal: openModal,
       openPlanner: openPlanner,
@@ -3048,13 +3039,13 @@ var useSellerState = function useSellerState() {
 };
 
 function Badge3D() {
-  var classes = useStyles$7();
+  var classes = useStyles$3();
   return /*#__PURE__*/jsx("span", {
     className: classes.root,
     children: "3D"
   });
 }
-var useStyles$7 = makeStyles(function () {
+var useStyles$3 = makeStyles(function () {
   return createStyles({
     root: {
       position: 'absolute',
@@ -3072,21 +3063,20 @@ var useStyles$7 = makeStyles(function () {
   });
 });
 
-function ownKeys$x(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$x(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$x(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$x(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$y(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$y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$y(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function Title(_ref) {
   var text = _ref.text,
     children = _ref.children,
     help = _ref.help;
   return /*#__PURE__*/jsxs(Wrapper, {
-    children: [/*#__PURE__*/jsx(Typography, {
+    children: [/*#__PURE__*/jsxs(Typography, {
       variant: "h4",
       component: "h2",
-      children: text
-    }), help && /*#__PURE__*/jsx(HelpButton, _objectSpread$x({}, help)), /*#__PURE__*/jsx("div", {
       style: {
-        flex: 1
-      }
+        flexGrow: 1
+      },
+      children: [text, help && /*#__PURE__*/jsx(HelpButton, _objectSpread$y({}, help))]
     }), children]
   });
 }
@@ -3094,16 +3084,18 @@ var Wrapper = styled(Box)({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  margin: '10px 10px 0 10px'
+  margin: '10px 10px 0 10px',
+  flexWrap: 'wrap',
+  gap: '10px'
 });
 
 function getImageOrFallbackUrl(url) {
   return url || 'https://cdn.diva-portal.com/static/images/image_placeholder-landscape-short.png';
 }
 
-function ownKeys$w(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$w(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$w(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$w(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var LOG$8 = getLogger('SellerCatalogs', 'Catalogs');
+function ownKeys$x(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$x(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$x(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$x(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var LOG$7 = getLogger('SellerCatalogs', 'Catalogs');
 function Catalogs(_ref) {
   var _configurationData$an, _configurationData$ca5, _configurationData$an3, _configurationData$an4;
   var collectionId = _ref.collectionId;
@@ -3177,11 +3169,11 @@ function Catalogs(_ref) {
           case 19:
             _context.prev = 19;
             _context.t2 = _context["catch"](1);
-            LOG$8.errorTransaction('ON_OPEN_MODULE_CATALOGS', 'SELLER_0001', 'Could not load catalogs: ' + _context.t2, {
+            LOG$7.errorTransaction('ON_OPEN_MODULE_CATALOGS', 'SELLER_0001', 'Could not load catalogs: ' + _context.t2, {
               accountId: collectionId
             });
           case 22:
-            LOG$8.successTransaction('ON_OPEN_MODULE_CATALOGS', {
+            LOG$7.successTransaction('ON_OPEN_MODULE_CATALOGS', {
               accountId: collectionId
             });
             setLoading(false);
@@ -3196,7 +3188,7 @@ function Catalogs(_ref) {
     };
   }(), [loadCatalogs]);
   useEffect(function () {
-    LOG$8.startTransaction({
+    LOG$7.startTransaction({
       event: 'onOpenModule',
       message: 'Open Catalogs',
       eventId: 'ON_OPEN_MODULE_CATALOGS',
@@ -3215,7 +3207,7 @@ function Catalogs(_ref) {
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            LOG$8.businessEvent('onSelectCatalog', 'Seller', "Katalog wurde ausgew\xE4hlt: '".concat(item.name, "'"), {
+            LOG$7.businessEvent('onSelectCatalog', 'Seller', "Katalog wurde ausgew\xE4hlt: '".concat(item.name, "'"), {
               catalogCodex: item.codex,
               catalogName: item.name,
               accountId: item.accountId,
@@ -3232,7 +3224,7 @@ function Catalogs(_ref) {
             if (configurationData !== null && configurationData !== void 0 && (_configurationData$ca = configurationData.catalogs) !== null && _configurationData$ca !== void 0 && _configurationData$ca.onOpen) {
               action = configurationData === null || configurationData === void 0 || (_configurationData$ca2 = configurationData.catalogs) === null || _configurationData$ca2 === void 0 ? void 0 : _configurationData$ca2.onOpen;
               if (!action.url) {
-                action = _objectSpread$w({}, action);
+                action = _objectSpread$x({}, action);
                 parameters = {};
                 Object.entries(action.parameters || {}).forEach(function (_ref4) {
                   var _ref5 = _slicedToArray(_ref4, 2),
@@ -3248,7 +3240,7 @@ function Catalogs(_ref) {
             } else {
               openComponent({
                 type: 'SELLER',
-                parameters: _objectSpread$w({
+                parameters: _objectSpread$x({
                   module: 'Info',
                   catalogCodex: item.codex
                 }, item.accountId ? {
@@ -3506,7 +3498,7 @@ function Catalogs(_ref) {
   });
 }
 
-var LOG$7 = getLogger('SellerCollections', 'Collections');
+var LOG$6 = getLogger('SellerCollections', 'Collections');
 function Collections() {
   var _configurationData$an, _configurationData$an2, _configurationData$an3;
   var _useTranslation = useTranslation(),
@@ -3540,7 +3532,7 @@ function Collections() {
       parameters: {
         module: 'Catalogs'
       }
-    });else LOG$7.startTransaction({
+    });else LOG$6.startTransaction({
       event: 'onOpenModule',
       message: 'Open Collections',
       eventId: 'ON_OPEN_MODULE_COLLECTIONS'
@@ -3565,9 +3557,9 @@ function Collections() {
             case 8:
               _context.prev = 8;
               _context.t0 = _context["catch"](1);
-              LOG$7.errorTransaction('ON_OPEN_MODULE_COLLECTIONS', 'SELLER_0005', 'Error loading collections: ' + _context.t0);
+              LOG$6.errorTransaction('ON_OPEN_MODULE_COLLECTIONS', 'SELLER_0005', 'Error loading collections: ' + _context.t0);
             case 11:
-              LOG$7.successTransaction('ON_OPEN_MODULE_COLLECTIONS');
+              LOG$6.successTransaction('ON_OPEN_MODULE_COLLECTIONS');
               setLoading(false);
             case 13:
             case "end":
@@ -3585,7 +3577,7 @@ function Collections() {
   //Grupperiung anch Kollektionen und Lieferanten
   var onCollectionClick = function onCollectionClick(item) {
     if (item) {
-      LOG$7.businessEvent('onSelectCollection', 'Seller', "Kollektion wurde ausgew\xE4hlt: '".concat(item.accountName, "'"), {
+      LOG$6.businessEvent('onSelectCollection', 'Seller', "Kollektion wurde ausgew\xE4hlt: '".concat(item.accountName, "'"), {
         accountId: item.id,
         accountName: item.accountName
       });
@@ -3725,7 +3717,7 @@ function Collections() {
   });
 }
 
-var LOG$6 = getLogger('SellerArticles', 'Articles');
+var LOG$5 = getLogger('SellerArticles', 'Articles');
 function Articles(_ref) {
   var catalogCodex = _ref.catalogCodex,
     accountId = _ref.accountId;
@@ -3752,7 +3744,7 @@ function Articles(_ref) {
   var _useDivaCore = useDivaCore(),
     organization = _useDivaCore.state.organization;
   useEffect(function () {
-    LOG$6.startTransaction({
+    LOG$5.startTransaction({
       event: 'onOpenModule',
       message: 'Open Articles',
       eventId: 'ON_OPEN_MODULE_SELLER_ARTICLES',
@@ -3774,7 +3766,7 @@ function Articles(_ref) {
                 _context.next = 5;
                 break;
               }
-              LOG$6.errorTransaction('ON_OPEN_MODULE_SELLER_ARTICLES', 'SELLER_0001', 'accountId or Catalog Codex missing', {
+              LOG$5.errorTransaction('ON_OPEN_MODULE_SELLER_ARTICLES', 'SELLER_0001', 'accountId or Catalog Codex missing', {
                 cat: catalogCodex,
                 accountId: accountId
               });
@@ -3789,7 +3781,7 @@ function Articles(_ref) {
             case 7:
               articleItems = _context.sent;
               setData(articleItems.data);
-              LOG$6.successTransaction('ON_OPEN_MODULE_SELLER_ARTICLES', {
+              LOG$5.successTransaction('ON_OPEN_MODULE_SELLER_ARTICLES', {
                 cat: catalogCodex,
                 accountId: accountId
               });
@@ -4007,7 +3999,6 @@ function Header$1(_ref) {
   return /*#__PURE__*/jsx("div", {
     style: {
       padding: '12px 16px',
-      minHeight: '64px',
       boxShadow: '0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)',
       zIndex: 1
     },
@@ -4016,18 +4007,12 @@ function Header$1(_ref) {
       children: [showVKPExportButton && /*#__PURE__*/jsx(Button, {
         color: 'primary',
         variant: 'contained',
-        style: {
-          marginRight: 20
-        },
         onClick: doExportToVKP,
         disabled: !enableVKPExportButton,
         children: "VKP-Export"
       }), showProductCreator && /*#__PURE__*/jsx(Button, {
         color: 'primary',
         variant: 'contained',
-        style: {
-          marginRight: 20
-        },
         onClick: openProductCreator,
         children: t('basket.navigation.products')
       }), /*#__PURE__*/jsxs(ButtonGroup, {
@@ -4071,8 +4056,8 @@ function Header(_ref) {
   });
 }
 
-function ownKeys$v(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$v(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$v(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$v(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$w(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$w(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$w(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$w(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function MenuListComposition(_ref) {
   var setId = _ref.setId,
     visibile = _ref.visibile,
@@ -4152,7 +4137,7 @@ function MenuListComposition(_ref) {
         children: function children(_ref2) {
           var TransitionProps = _ref2.TransitionProps,
             placement = _ref2.placement;
-          return /*#__PURE__*/jsx(Grow, _objectSpread$v(_objectSpread$v({}, TransitionProps), {}, {
+          return /*#__PURE__*/jsx(Grow, _objectSpread$w(_objectSpread$w({}, TransitionProps), {}, {
             style: {
               transformOrigin: placement === 'bottom' ? 'right top' : 'right bottom'
             },
@@ -4233,8 +4218,8 @@ function Images(_ref) {
   });
 }
 
-function ownKeys$u(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$u(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$u(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$u(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$v(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$v(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$v(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$v(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var OpvImage = function OpvImage(_ref) {
   var src = _ref.src;
   var _useHover = useHover({
@@ -4252,15 +4237,15 @@ var OpvImage = function OpvImage(_ref) {
     layerProps = _useLayer.layerProps,
     triggerProps = _useLayer.triggerProps;
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx("img", _objectSpread$u(_objectSpread$u(_objectSpread$u({}, triggerProps), hoverProps), {}, {
+    children: [/*#__PURE__*/jsx("img", _objectSpread$v(_objectSpread$v(_objectSpread$v({}, triggerProps), hoverProps), {}, {
       src: src,
       style: {
         width: '20px'
       }
-    })), isOpen && (renderLayer === null || renderLayer === void 0 ? void 0 : renderLayer(/*#__PURE__*/jsx("img", _objectSpread$u(_objectSpread$u({
+    })), isOpen && (renderLayer === null || renderLayer === void 0 ? void 0 : renderLayer(/*#__PURE__*/jsx("img", _objectSpread$v(_objectSpread$v({
       src: src.replace('_gal.', '.')
     }, layerProps), {}, {
-      style: _objectSpread$u({
+      style: _objectSpread$v({
         width: '300px'
       }, layerProps.style)
     }))))]
@@ -4273,7 +4258,7 @@ function SetTable(_ref) {
     visibile = _ref.visibile;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var classes = useStyles$6();
+  var classes = useStyles$2();
   var _useSellerState = useSellerState(),
     _useSellerState$state = _useSellerState.state,
     doShowPrices = _useSellerState$state.doShowPrices,
@@ -4584,7 +4569,7 @@ function SetTable(_ref) {
     })
   });
 }
-var useStyles$6 = makeStyles({
+var useStyles$2 = makeStyles({
   table: {
     minWidth: 650
   }
@@ -4667,9 +4652,9 @@ function Set$1(_ref) {
   });
 }
 
-var _excluded$9 = ["onValueChange", "value"];
-function ownKeys$t(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$t(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$t(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$t(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$8 = ["onValueChange", "value"];
+function ownKeys$u(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$u(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$u(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$u(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function DiscountField (_ref) {
   var _ref2;
   var updateDiscount = _ref.updateDiscount,
@@ -4736,7 +4721,7 @@ function DiscountField (_ref) {
 function ControlledNumberFormat$1(_ref3) {
   var onValueChange = _ref3.onValueChange,
     origValue = _ref3.value,
-    props = _objectWithoutProperties(_ref3, _excluded$9);
+    props = _objectWithoutProperties(_ref3, _excluded$8);
   var _useState = useState(origValue),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
@@ -4756,7 +4741,7 @@ function ControlledNumberFormat$1(_ref3) {
   useEffect(function () {
     setValue(origValue);
   }, [origValue]);
-  return /*#__PURE__*/jsx(NumericFormat, _objectSpread$t(_objectSpread$t({}, props), {}, {
+  return /*#__PURE__*/jsx(NumericFormat, _objectSpread$u(_objectSpread$u({}, props), {}, {
     placeholder: props.suffix,
     value: value === 0 ? undefined : value,
     customInput: StyledTextFiled$1,
@@ -4780,9 +4765,9 @@ var StyledTextFiled$1 = withStyles({
   }
 })(TextField);
 
-var _excluded$8 = ["onValueChange", "value"];
-function ownKeys$s(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$s(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$s(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$s(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$7 = ["onValueChange", "value"];
+function ownKeys$t(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$t(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$t(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$t(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function AdditionalPriceField (_ref) {
   var updatePrice = _ref.updatePrice,
     price = _ref.price,
@@ -4840,7 +4825,7 @@ function AdditionalPriceField (_ref) {
 function ControlledNumberFormat(_ref2) {
   var onValueChange = _ref2.onValueChange,
     origValue = _ref2.value,
-    props = _objectWithoutProperties(_ref2, _excluded$8);
+    props = _objectWithoutProperties(_ref2, _excluded$7);
   var _useState = useState(origValue),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
@@ -4860,7 +4845,7 @@ function ControlledNumberFormat(_ref2) {
   useEffect(function () {
     setValue(origValue);
   }, [origValue]);
-  return /*#__PURE__*/jsx(NumericFormat, _objectSpread$s(_objectSpread$s({}, props), {}, {
+  return /*#__PURE__*/jsx(NumericFormat, _objectSpread$t(_objectSpread$t({}, props), {}, {
     placeholder: '0 ' + DivaUtils$1.defaultPriceFormat.currency,
     value: value,
     customInput: StyledTextFiled,
@@ -5358,7 +5343,7 @@ function StatusMenu(_ref) {
   });
 }
 
-var useStyles$5 = makeStyles$1(function (theme) {
+var useStyles$1 = makeStyles$1(function (theme) {
   return createStyles$1({
     margin: {
       margin: theme.spacing(1)
@@ -5377,7 +5362,7 @@ function SaveButtonsGroup(_ref) {
     userInfoPresent = _ref.userInfoPresent;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var classes = useStyles$5();
+  var classes = useStyles$1();
   return /*#__PURE__*/jsxs("div", {
     style: {
       marginTop: '0.4rem',
@@ -5430,7 +5415,7 @@ function SaveButtonsGroup(_ref) {
           onClickSave(undefined, false, true);
         },
         className: classes.margin,
-        children: t('Als Favorit speichern')
+        children: t('basket.checkout.actions.saveAsFavorite')
       })
     }), status == 'BASE_CONFIGURATION' && /*#__PURE__*/jsx(Button$1, {
       variant: "outlined",
@@ -5441,7 +5426,7 @@ function SaveButtonsGroup(_ref) {
         onClickSave(undefined, false, true, true);
       },
       className: classes.margin,
-      children: t('Produkt speichern und HQ MEdien bestellen')
+      children: t('basket.checkout.actions.saveAndOrderMedia')
     }), (configSaveButtons === null || configSaveButtons === void 0 ? void 0 : configSaveButtons.includes('NEW')) && /*#__PURE__*/jsx(Button$1, {
       variant: "outlined",
       size: "medium",
@@ -5749,8 +5734,8 @@ var HQ_RenderingTypeSource = [{
   RenderPipeline: 'vRayNext'
 }];
 
-function ownKeys$r(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$r(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$r(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$r(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$s(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$s(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$s(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$s(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function useProduct(basket) {
   var _useState = useState(undefined),
     _useState2 = _slicedToArray(_useState, 2),
@@ -5772,7 +5757,7 @@ function useProduct(basket) {
             });
           case 2:
             myProduct = _context.sent;
-            setCurrentProduct(_objectSpread$r(_objectSpread$r({}, myProduct.baseData), {}, {
+            setCurrentProduct(_objectSpread$s(_objectSpread$s({}, myProduct.baseData), {}, {
               parent: (_myProduct$baseData$p = myProduct.baseData.parent) !== null && _myProduct$baseData$p !== void 0 ? _myProduct$baseData$p : myProduct.baseData._id
             }));
             return _context.abrupt("return", myProduct);
@@ -5802,7 +5787,7 @@ function useProduct(basket) {
             });
           case 2:
             myproduct = _context2.sent;
-            setCurrentProduct(_objectSpread$r(_objectSpread$r({}, myproduct[0]), {}, {
+            setCurrentProduct(_objectSpread$s(_objectSpread$s({}, myproduct[0]), {}, {
               parent: (_myproduct$0$parent = myproduct[0].parent) !== null && _myproduct$0$parent !== void 0 ? _myproduct$0$parent : myproduct[0]._id
             }));
             if (!favourite) {
@@ -5810,7 +5795,7 @@ function useProduct(basket) {
               break;
             }
             _context2.next = 7;
-            return productHandler.apiActivateProduct(currentProduct._id, basket.OrganizationId);
+            return productHandler.apiMarkAsFavorite(currentProduct._id, basket.OrganizationId);
           case 7:
             setCurrentProduct(currentProduct);
             basket.DocumentVersion = basket.DocumentVersion + 1;
@@ -5865,8 +5850,8 @@ var hqMediaTitle = "hqMediaTitle-ugda8";
 var css_248z$a = ".paperContainer-9grpT {\n  height: 68vh;\n  margin-left: 50px;\n  margin-right: 50px;\n  margin-top: 10px;\n}\n\n.hqMediaHeaderContainer-PlXdo {\n  display: flex;\n  justify-content: space-between;\n  padding-left: 15px;\n}\n\n.hqmediaContainer-sBjym {\n  height: 90%;\n  border: 1px solid rgb(224, 224, 224);\n}\n.hqMediaTitle-ugda8 {\n  font-size: 20px;\n  font-weight: normal;\n  color: #333;\n  padding: 10px 0;\n}\n";
 styleInject(css_248z$a);
 
-function ownKeys$q(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$q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$q(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$r(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$r(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$r(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$r(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function CheckOut(_ref) {
   var _basket$Client;
   var schema = _ref.schema,
@@ -6072,7 +6057,7 @@ function CheckOut(_ref) {
   };
 
   // for LEAFLET don't show printOptions, if there are any configured.
-  var finalSchema = _objectSpread$q(_objectSpread$q({}, uiSchema), {}, {
+  var finalSchema = _objectSpread$r(_objectSpread$r({}, uiSchema), {}, {
     elements: _toConsumableArray(uiSchema.elements)
   });
   if (status == 'LEAFLET') {
@@ -6186,7 +6171,7 @@ function CheckOut(_ref) {
             control: /*#__PURE__*/jsx(Checkbox$1, {
               onChange: handleCheckBoxChange
             }),
-            label: t('basket.checkout.3dexport')
+            label: t('basket.checkout.order3dexport')
           }), /*#__PURE__*/jsxs(Typography, {
             variant: "caption",
             children: ["(", t('basket.checkout.3dexport'), ")"]
@@ -6229,12 +6214,12 @@ function isEmpty(data) {
   });
 }
 
-function ownKeys$p(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$p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$p(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$q(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$q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$q(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var schema = function schema(hideWWSButton) {
   return {
     type: 'object',
-    properties: _objectSpread$p(_objectSpread$p({
+    properties: _objectSpread$q(_objectSpread$q({
       Salesperson: {
         type: 'string',
         title: 'basket.checkout.form.seller'
@@ -6488,9 +6473,9 @@ function Step3Checkout(_ref) {
   });
 }
 
-function ownKeys$o(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$o(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$o(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$o(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var LOG$5 = getLogger('SellerBasket', 'Basket');
+function ownKeys$p(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$p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$p(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var LOG$4 = getLogger('SellerBasket', 'Basket');
 function Basket(_ref) {
   var _configurationData$Ch5;
   var divaNr = _ref.divaNr,
@@ -6532,7 +6517,7 @@ function Basket(_ref) {
     resetBasketState = _useSellerState$actio.resetBasketState;
   var statusRef = useRef(basket !== null && basket !== void 0 && basket.StatusKey ? basket === null || basket === void 0 ? void 0 : basket.StatusKey : basket !== null && basket !== void 0 && basket.Status ? basket === null || basket === void 0 ? void 0 : basket.Status : '');
   useEffect(function () {
-    LOG$5.startTransaction({
+    LOG$4.startTransaction({
       event: 'onOpenModule',
       message: 'Open Basket',
       eventId: 'ON_OPEN_MODULE_BASKET',
@@ -6545,7 +6530,7 @@ function Basket(_ref) {
   useEffect(function () {
     openBasket(statusRef, divaNr, checkBasket, basket).then(function () {
       var _getBasketStatusArr;
-      LOG$5.successTransaction('ON_OPEN_MODULE_BASKET', {
+      LOG$4.successTransaction('ON_OPEN_MODULE_BASKET', {
         divaNr: divaNr
       });
       if (!statusRef.current || !((_getBasketStatusArr = getBasketStatusArr()) !== null && _getBasketStatusArr !== void 0 && _getBasketStatusArr.includes(statusRef.current))) {
@@ -6581,7 +6566,7 @@ function Basket(_ref) {
     }
   }, [currentBasketState === null || currentBasketState === void 0 ? void 0 : currentBasketState.step]);
   useEffect(function () {
-    LOG$5.businessEvent('onBasketStep', 'SellerBasket', "goto BasketStep '".concat(actBasketPage, "'"), {
+    LOG$4.businessEvent('onBasketStep', 'SellerBasket', "goto BasketStep '".concat(actBasketPage, "'"), {
       basketStep: actBasketPage
     });
   }, [actBasketPage]);
@@ -6756,7 +6741,7 @@ function Basket(_ref) {
                   });
                   */
               }
-              LOG$5.successTransaction('ON_SAVE_BASKET', {
+              LOG$4.successTransaction('ON_SAVE_BASKET', {
                 divaNr: currentBasket.DivaNr,
                 status: currentBasket.Status,
                 documentVersion: currentBasket.DocumentVersion,
@@ -6823,7 +6808,7 @@ function Basket(_ref) {
     };
   }();
   var errorOnSaving = function errorOnSaving(type) {
-    LOG$5.errorTransaction('ON_SAVE_BASKET', 'SELLER_0003', 'Error Saving Basket', {
+    LOG$4.errorTransaction('ON_SAVE_BASKET', 'SELLER_0003', 'Error Saving Basket', {
       divaNr: currentBasket.DivaNr,
       status: currentBasket.Status,
       documentVersion: currentBasket.DocumentVersion,
@@ -6840,7 +6825,7 @@ function Basket(_ref) {
     var _currentBasket$OrderS2, _currentBasket$OrderS3, _currentBasket$OrderS4;
     openComponent({
       type: 'SELLER',
-      parameters: _objectSpread$o({
+      parameters: _objectSpread$p({
         module: 'Info',
         catalogCodex: currentBasket === null || currentBasket === void 0 || (_currentBasket$OrderS2 = currentBasket.OrderSets[0]) === null || _currentBasket$OrderS2 === void 0 ? void 0 : _currentBasket$OrderS2.CatalogCodex
       }, currentBasket !== null && currentBasket !== void 0 && (_currentBasket$OrderS3 = currentBasket.OrderSets[0]) !== null && _currentBasket$OrderS3 !== void 0 && _currentBasket$OrderS3.AccountGUID ? {
@@ -6918,719 +6903,200 @@ function Basket(_ref) {
   });
 }
 
-getLogger('SellerCatalogInfo', 'Description');
-function Description$2 (_ref) {
-  var data = _ref.data,
-    hide = _ref.hide;
-  var classes = useStyles$4();
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  useEffect(function () {
-    setOpen(!hide && !!data);
-  }, [hide, data]);
-  return /*#__PURE__*/jsx("div", {
-    className: classes.root,
-    children: /*#__PURE__*/jsxs(Paper, {
-      className: "".concat(classes.paper, " ").concat(open ? '' : 'hide'),
-      elevation: 4,
-      children: [/*#__PURE__*/jsxs("div", {
-        className: classes.expander,
-        onClick: function onClick() {
-          return setOpen(!open);
-        },
-        children: [open && /*#__PURE__*/jsx(ArrowBackIosIcon, {}), !open && /*#__PURE__*/jsx(ArrowForwardIosIcon, {})]
-      }), /*#__PURE__*/jsx(Typography, {
-        variant: "h5",
-        children: (data === null || data === void 0 ? void 0 : data.name) || ''
-      }), /*#__PURE__*/jsxs("div", {
-        className: classes.scrollWrapper,
-        children: [/*#__PURE__*/jsx(Typography, {
-          component: "div",
-          children: /*#__PURE__*/jsx("div", {
-            dangerouslySetInnerHTML: {
-              __html: (data === null || data === void 0 ? void 0 : data.description) || ''
-            }
-          })
-        }), data === null || data === void 0 ? void 0 : data.documents.map(function (d, i) {
-          return /*#__PURE__*/jsxs("div", {
-            className: classes.document,
-            children: [/*#__PURE__*/jsx(PictureAsPdfIcon, {}), /*#__PURE__*/jsx(Typography, {
-              children: /*#__PURE__*/jsx(Link, {
-                href: d.url,
-                download: true,
-                target: "_blank",
-                children: d.name
-              })
-            })]
-          }, i);
-        })]
-      })]
-    })
-  });
-}
-var useStyles$4 = makeStyles(function (theme) {
-  return {
-    root: {
-      position: 'absolute',
-      height: '100%',
-      width: '500px',
-      overflow: 'hidden'
-    },
-    paper: {
-      display: 'flex',
-      width: '300px',
-      minHeight: '60px',
-      maxHeight: 'calc(100% - 150px - 300px)',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      position: 'absolute',
-      top: 150,
-      left: 0,
-      zIndex: 3,
-      backgroundColor: 'rgba(255,255,255,0.7)',
-      transition: 'all 0.4s ease-in-out 0s',
-      borderRadius: '0 4px 4px 0',
-      padding: '1rem',
-      '&.hide': {
-        left: 'calc(-300px + -2rem)'
-      }
-    },
-    scrollWrapper: {
-      overflow: 'auto'
-    },
-    expander: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: 'rgba(255,255,255,0.7)',
-      width: 30,
-      height: 40,
-      right: '-30px',
-      top: 10,
-      zIndex: 10,
-      position: 'absolute',
-      boxShadow: '2px 0px 5px 0px rgba(0,0,0,0.2)',
-      borderRadius: '0 4px 4px 0',
-      '&:hover': {
-        cursor: 'pointer'
-      }
-    },
-    document: {
-      display: 'flex',
-      '& svg': {
-        marginRight: '10px'
-      }
-    }
-  };
-});
+var wrapper$6 = "wrapper-fSL18";
+var title$2 = "title-iTDPA";
+var descriptionContainer$1 = "description-container-k1vLT";
+var modelTitle = "model-title-Sgm-0";
+var description = "description-GyPZq";
+var pdf = "pdf-oNnao";
+var hidden = "hidden-xYPOr";
+var css_248z$9 = ".wrapper-fSL18 {\n  display: flex;\n  flex-direction: column;\n  padding: 0 12px;\n  height: 100%;\n}\n\n.title-iTDPA {\n  padding: 16px 8px;\n  font-size: 36px;\n}\n\n.title-iTDPA .MuiButtonBase-root {\n  display: none;\n}\n\n.subTitle-4-0PW {\n  padding: 12px 18px;\n  font-size: 28px;\n}\n\n.description-container-k1vLT {\n  display: flex;\n  flex-direction: column;\n  background-color: #f2f2f2;\n  padding: 18px;\n  gap: 12px;\n  height: 100%;\n}\n\n.model-title-Sgm-0 {\n  font-size: 24px;\n  font-weight: 600;\n}\n.description-GyPZq {\n  font-size: 16px;\n  overflow: auto;\n  flex-grow: 3;\n}\n\n.pdf-oNnao {\n  display: 'flex';\n  flex: 1 1 10px;\n}\n\n.pdf-oNnao svg {\n  margin-right: 10px;\n}\n\n@media (max-width: 820px) {\n  .wrapper-fSL18 {\n    height: 75px;\n  }\n  .description-container-k1vLT {\n    position: fixed;\n    top: 22px;\n    width: 80%;\n    z-index: 101;\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n    margin-top: 135px;\n    margin-left: -10px;\n    transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  }\n  .title-iTDPA .MuiButtonBase-root {\n    display: inline-flex;\n  }\n  .hidden-xYPOr .description-container-k1vLT {\n    padding: 0;\n    width: 0;\n  }\n\n  .hidden-xYPOr .model-title-Sgm-0 {\n    display: none;\n  }\n\n  .hidden-xYPOr .description-GyPZq {\n    display: none;\n  }\n}\n";
+styleInject(css_248z$9);
 
-function ImagesBar (_ref) {
-  var _data$images, _data$images2;
+var _excluded$6 = ["data", "text"];
+function ownKeys$o(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$o(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$o(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$o(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function Description$1 (_ref) {
   var data = _ref.data,
-    selected = _ref.selected,
-    setSelected = _ref.setSelected,
-    hide = _ref.hide,
-    loading = _ref.loading;
+    text = _ref.text,
+    props = _objectWithoutProperties(_ref, _excluded$6);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var listRef = useRef(null);
-  var refs = useMemo(function () {
-    return (data === null || data === void 0 ? void 0 : data.images.map(function () {
-      return /*#__PURE__*/React.createRef();
-    })) || [];
-  }, [data]);
-  var classes = useStyles$3();
-  var _useState = useState(false),
+  //hiden is only for smaller devices relevant
+  var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  useEffect(function () {
-    setOpen(!hide && !!data);
-  }, [hide, data]);
-  useEffect(function () {
-    if (open) {
-      var _refs$selected;
-      (_refs$selected = refs[selected]) === null || _refs$selected === void 0 || (_refs$selected = _refs$selected.current) === null || _refs$selected === void 0 || _refs$selected.scrollIntoView();
-    }
-  }, [selected, open]);
-  return /*#__PURE__*/jsx("div", {
-    className: classes.root,
-    children: /*#__PURE__*/jsxs(Paper, {
-      className: "".concat(classes.paper, " ").concat(open ? '' : 'hide'),
-      elevation: 4,
-      onWheel: function onWheel(e) {
-        return listRef.current.scrollLeft = listRef.current.scrollLeft + e.deltaY * 10;
-      },
-      children: [/*#__PURE__*/jsxs("div", {
-        className: classes.expander,
+    isHidden = _useState2[0],
+    setIsHidden = _useState2[1];
+  return /*#__PURE__*/jsxs("div", _objectSpread$o(_objectSpread$o({}, props), {}, {
+    className: classnames(wrapper$6, isHidden ? hidden : undefined, props.className),
+    children: [/*#__PURE__*/jsxs("div", {
+      className: title$2,
+      children: [/*#__PURE__*/jsx("span", {
+        children: t(text)
+      }), /*#__PURE__*/jsx(IconButton$1, {
         onClick: function onClick() {
-          return setOpen(!open);
-        },
-        children: [!open && /*#__PURE__*/jsx(ExpandLess, {}), open && /*#__PURE__*/jsx(ExpandMore, {}), /*#__PURE__*/jsx(Typography$1, {
-          variant: "button",
-          style: {
-            padding: '0 15px 0 5px'
-          },
-          children: t('info.buttons.images')
-        })]
-      }), /*#__PURE__*/jsxs(GridList, {
-        ref: listRef,
-        cols: (data === null || data === void 0 || (_data$images = data.images) === null || _data$images === void 0 ? void 0 : _data$images.length) == 1 ? 1 : 2,
-        className: classes.gridList,
-        style: {
-          margin: 0
+          return setIsHidden(!isHidden);
         },
-        children: [loading &&
-        //loading
-        new Array(5).fill(0).map(function (_, i) {
-          return /*#__PURE__*/jsx(GridListTile, {
-            className: classes.gridTile,
-            children: /*#__PURE__*/jsx(Skeleton, {
-              variant: "rect",
-              width: 160,
-              height: 120
-            })
-          }, i);
-        }), !loading && (!data || ((_data$images2 = data.images) === null || _data$images2 === void 0 ? void 0 : _data$images2.length) <= 0) &&
-        /*#__PURE__*/
-        //empty placeholder
-        jsx(GridListTile, {
-          className: classes.gridTile,
-          children: /*#__PURE__*/jsx("div", {
-            style: {
-              height: 120,
-              width: 160
-            }
-          })
-        }), !loading && (data === null || data === void 0 ? void 0 : data.images.map(function (img, i) {
-          return (
-            /*#__PURE__*/
-            //fill data
-            jsx(GridListTile, {
-              ref: refs[i],
-              className: classes.gridTile,
-              children: /*#__PURE__*/jsx(Card, {
-                className: "".concat(classes.card, " ").concat(selected == i ? 'selected' : ''),
-                children: /*#__PURE__*/jsx(CardActionArea, {
-                  className: classes.cardActionArea,
-                  onClick: function onClick() {
-                    return setSelected(i);
-                  },
-                  children: /*#__PURE__*/jsx(CardMedia, {
-                    className: classes.cardMedia,
-                    image: getImageOrFallbackUrl(img.thumbUrl)
-                  })
-                })
-              })
-            }, i)
-          );
-        }))]
+        children: /*#__PURE__*/jsx(InfoRounded, {})
       })]
-    })
-  });
-}
-var useStyles$3 = makeStyles(function (theme) {
-  return {
-    root: {
-      position: 'absolute',
-      bottom: 0,
-      height: '300px',
-      width: '100%',
-      overflow: 'hidden'
-    },
-    paper: {
-      display: 'flex',
-      width: '100%',
-      justifyContent: 'center',
-      position: 'absolute',
-      bottom: 0,
-      backgroundColor: 'rgba(255,255,255,0.7)',
-      transition: 'all 0.4s ease-in-out 0s',
-      '&.hide': {
-        bottom: '-199px'
-      }
-    },
-    expander: {
-      display: 'flex',
-      alignItems: 'center',
-      backgroundColor: 'rgba(255,255,255,0.7)',
-      height: 40,
-      top: '-40px',
-      right: 24,
-      zIndex: 10,
-      position: 'absolute',
-      boxShadow: '2px -2px 5px -1px rgba(0,0,0,0.2),0px -2px 5px 0px rgba(0,0,0,0.2)',
-      borderRadius: '4px 4px 0 0',
-      '&:hover': {
-        cursor: 'pointer'
-      }
-    },
-    gridList: {
-      flexWrap: 'nowrap',
-      // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
-      transform: 'translateZ(0)'
-    },
-    gridTile: {
-      flexShrink: 'initial',
-      height: '100%'
-    },
-    card: {
-      height: 120,
-      width: 160,
-      margin: '15px 5px',
-      display: 'flex',
-      alignItems: 'stretch',
-      backgroundColor: 'rgba(255,255,255,0.7)',
-      '&.selected': {
-        border: '1px solid #4B4B4B'
-      }
-    },
-    cardActionArea: {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'start'
-    },
-    cardMedia: {
-      height: '100%',
-      width: '100%',
-      backgroundSize: 'auto 100%'
-    }
-  };
-});
-
-function MainView (_ref) {
-  var data = _ref.data,
-    selected = _ref.selected,
-    setSelected = _ref.setSelected,
-    onClick = _ref.onClick;
-  var classes = useStyles$2();
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [(data === null || data === void 0 ? void 0 : data.images) && /*#__PURE__*/jsx(Carousel, {
-      autoPlay: false,
-      animation: "slide",
-      className: classes.carousel,
-      indicators: false,
-      index: selected,
-      onChange: function onChange(next) {
-        if (next !== selected) {
-          setSelected(next);
-        }
-      },
-      children: data === null || data === void 0 ? void 0 : data.images.map(function (img, i) {
+    }), /*#__PURE__*/jsxs("div", {
+      className: descriptionContainer$1,
+      children: [/*#__PURE__*/jsx("div", {
+        className: modelTitle,
+        children: data.name
+      }), data === null || data === void 0 ? void 0 : data.documents.map(function (d, i) {
         return /*#__PURE__*/jsx("div", {
-          style: {
-            backgroundImage: "url(".concat(getImageOrFallbackUrl(img.url), ")")
-          },
-          className: classes.image,
-          onWheel: function onWheel(e) {
-            return setSelected(getNext(e.deltaY, selected, data.images.length));
-          },
-          onClick: onClick
+          className: pdf,
+          children: /*#__PURE__*/jsx(Link, {
+            href: d.url,
+            download: true,
+            target: "_blank",
+            children: d.name
+          })
         }, i);
-      })
-    }), /*#__PURE__*/jsx("div", {
-      style: {
-        height: '100px'
-      }
+      }), data.description && /*#__PURE__*/jsx("div", {
+        className: description,
+        dangerouslySetInnerHTML: {
+          __html: data.description
+        }
+      })]
     })]
-  });
+  }));
 }
-function getNext(delta, current, amount) {
-  var next = delta > 0 ? current - 1 : current + 1;
-  return next >= amount ? 0 : next < 0 ? amount - 1 : next;
+
+var container = "container-Sr3pC";
+var icon$1 = "icon-0h-39";
+var css_248z$8 = ".container-Sr3pC {\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n  padding: 8px;\n  flex-wrap: wrap;\n}\n.container-Sr3pC .MuiButton-root {\n  height: 45px;\n}\n\n.icon-0h-39 {\n  width: 24px;\n  height: 24px;\n}\n";
+styleInject(css_248z$8);
+
+function ownKeys$n(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$n(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$n(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$n(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ArticleSvg (props) {
+  return /*#__PURE__*/jsx("svg", _objectSpread$n(_objectSpread$n({}, props), {}, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    children: /*#__PURE__*/jsx("path", {
+      fill: "currentColor",
+      d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+    })
+  }));
 }
-var useStyles$2 = makeStyles(function (theme) {
-  return {
-    carousel: {
-      flex: 1,
-      display: 'flex',
-      flexDirection: 'column',
-      '& div.CarouselItem': {
-        flex: 1,
-        display: 'flex',
-        '& div': {
-          height: '100%',
-          width: '100%'
-        }
-      }
-    },
-    image: {
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'center',
-      backgroundSize: 'auto 100%',
-      marginTop: '10px'
-    }
-  };
-});
 
-function NavBar$1 (_ref) {
-  var hasPlanner = _ref.hasPlanner,
-    hasArticles = _ref.hasArticles,
-    onOpenArticles = _ref.onOpenArticles,
-    onOpenPlanner = _ref.onOpenPlanner,
-    showVariants = _ref.showVariants,
-    showSetPlanner = _ref.showSetPlanner,
-    title = _ref.title;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var classes = useStyles$1();
-  return /*#__PURE__*/jsxs(Toolbar, {
-    className: classes.toolbar,
-    id: "diva-seller-info-navbar",
-    children: [title, /*#__PURE__*/jsx("div", {
-      className: classes.spacer
-    }), /*#__PURE__*/jsx(Button, {
-      className: classes.button,
-      disabled: !hasArticles,
+function ownKeys$m(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$m(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$m(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$m(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function EmptyPlanningSvg (props) {
+  return /*#__PURE__*/jsx("svg", _objectSpread$m(_objectSpread$m({}, props), {}, {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/jsx("path", {
+      d: "M4 16L3.57574 15.5757C3.46321 15.6883 3.4 15.8409 3.4 16H4ZM17 3L17.4243 2.57574C17.1899 2.34142 16.8101 2.34142 16.5757 2.57574L17 3ZM21 7L21.4243 7.42426C21.6586 7.18995 21.6586 6.81005 21.4243 6.57574L21 7ZM8 20V20.6C8.15913 20.6 8.31174 20.5368 8.42426 20.4243L8 20ZM4 20H3.4C3.4 20.3314 3.66863 20.6 4 20.6V20ZM12 19.4C11.6686 19.4 11.4 19.6686 11.4 20C11.4 20.3314 11.6686 20.6 12 20.6V19.4ZM20.5 20.6C20.8314 20.6 21.1 20.3314 21.1 20C21.1 19.6686 20.8314 19.4 20.5 19.4V20.6ZM4.42426 16.4243L17.4243 3.42426L16.5757 2.57574L3.57574 15.5757L4.42426 16.4243ZM16.5757 3.42426L20.5757 7.42426L21.4243 6.57574L17.4243 2.57574L16.5757 3.42426ZM20.5757 6.57574L7.57574 19.5757L8.42426 20.4243L21.4243 7.42426L20.5757 6.57574ZM8 19.4H4V20.6H8V19.4ZM4.6 20V16H3.4V20H4.6ZM13.5757 6.42426L17.5757 10.4243L18.4243 9.57574L14.4243 5.57574L13.5757 6.42426ZM12 20.6H20.5V19.4H12V20.6Z",
+      fill: "currentColor"
+    })
+  }));
+}
+
+function ownKeys$l(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$l(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$l(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$l(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function VarinatPlanningSvg (props) {
+  return /*#__PURE__*/jsx("svg", _objectSpread$l(_objectSpread$l({}, props), {}, {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/jsx("path", {
+      d: "M4.3314 12.0474L12 20L19.6686 12.0474C20.5211 11.1633 21 9.96429 21 8.71405C21 6.11055 18.9648 4 16.4543 4C15.2487 4 14.0925 4.49666 13.24 5.38071L12 6.66667L10.76 5.38071C9.90749 4.49666 8.75128 4 7.54569 4C5.03517 4 3 6.11055 3 8.71405C3 9.96429 3.47892 11.1633 4.3314 12.0474Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  }));
+}
+
+function ownKeys$k(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$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function NavBackSvg (props) {
+  return /*#__PURE__*/jsx("svg", _objectSpread$k(_objectSpread$k({}, props), {}, {
+    viewBox: "0 0 10 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/jsx("path", {
+      d: "M9 1L1 9L9 17",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  }));
+}
+
+function NavBar (buttons) {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var varinatArticles = !buttons.planner ? 'contained' : 'outlined';
+  var varinatVarinats = !buttons.articles && !buttons.planner ? 'contained' : 'outlined';
+  var variantPlanner = 'contained';
+  return /*#__PURE__*/jsxs("div", {
+    className: container,
+    children: [/*#__PURE__*/jsx(Button, {
+      variant: "outlined",
       color: "primary",
-      variant: !hasPlanner ? 'contained' : 'outlined',
-      onClick: onOpenArticles,
-      id: "diva-seller-info-openarticlesbtn",
-      children: t('info.buttons.articles')
+      startIcon: /*#__PURE__*/jsx(NavBackSvg, {
+        className: icon$1
+      }),
+      onClick: function onClick() {
+        return buttons.navigateBack();
+      }
     }), /*#__PURE__*/jsx(Button, {
-      className: classes.button,
-      disabled: !hasPlanner,
+      id: "diva-seller-info-openarticlesbtn",
+      variant: varinatArticles,
       color: "primary",
-      variant: "contained",
+      startIcon: /*#__PURE__*/jsx(ArticleSvg, {
+        className: icon$1
+      }),
       onClick: function onClick() {
-        return onOpenPlanner();
+        return buttons.articles();
       },
-      id: "diva-seller-info-openplannerbtn",
-      children: t('info.buttons.configurator')
-    }), showVariants && /*#__PURE__*/jsx(Button, {
-      className: classes.button,
-      disabled: !hasPlanner,
+      children: t('info.buttons.articles')
+    }), buttons.variantsPlanner && /*#__PURE__*/jsx(Button, {
+      id: "diva-seller-info-openfavplannerbtn",
+      variant: varinatVarinats,
       color: "primary",
-      variant: "contained",
+      startIcon: /*#__PURE__*/jsx(VarinatPlanningSvg, {
+        className: icon$1
+      }),
       onClick: function onClick() {
-        return onOpenPlanner(undefined, 'FAVORITS_OPEN_SELLER_PRODUCTCREATOR');
+        return buttons.variantsPlanner();
       },
       children: t('info.buttons.varinats')
-    }), showSetPlanner && /*#__PURE__*/jsx(Button, {
-      className: classes.button,
-      disabled: !hasPlanner,
+    }), buttons.planner && /*#__PURE__*/jsx(Button, {
+      id: "diva-seller-info-openplannerbtn",
+      variant: variantPlanner,
       color: "primary",
-      variant: "contained",
+      startIcon: /*#__PURE__*/jsx(EmptyPlanningSvg, {
+        className: icon$1
+      }),
       onClick: function onClick() {
-        return onOpenPlanner(undefined, 'SETPLANNER_OPEN_SELLER_BASKET');
+        return buttons.planner();
       },
-      children: t('info.buttons.SetPlanner')
+      children: t('info.buttons.configurator')
     })]
   });
 }
-var useStyles$1 = makeStyles(function (theme) {
-  return {
-    toolbar: {
-      boxShadow: '0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)',
-      zIndex: 10,
-      padding: '12px 0'
-    },
-    spacer: {
-      flex: 1
-    },
-    button: {
-      margin: '0 10px'
-    }
-  };
-});
-
-var LOG$4 = getLogger('Seller', 'Info');
-function Info$1(_ref) {
-  var accountId = _ref.accountId,
-    catalogCodex = _ref.catalogCodex;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t,
-    i18n = _useTranslation.i18n;
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    data = _useState2[0],
-    setData = _useState2[1];
-  var _useState3 = useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    loading = _useState4[0],
-    setLoading = _useState4[1];
-  var _useSellerState = useSellerState(),
-    _useSellerState$actio = _useSellerState.actions,
-    loadCatalogInfo = _useSellerState$actio.loadCatalogInfo,
-    openPlanner = _useSellerState$actio.openPlanner,
-    openComponent = _useSellerState$actio.openComponent,
-    checkAccountLogin = _useSellerState$actio.checkAccountLogin,
-    _useSellerState$state = _useSellerState.state,
-    currentAccountLoginId = _useSellerState$state.currentAccountLoginId,
-    catalogs = _useSellerState$state.catalogs;
-    _useSellerState$state.currentUser;
-    var currentBasketState = _useSellerState$state.currentBasketState,
-    configurationData = _useSellerState$state.configurationData,
-    returnTo = _useSellerState$state.returnTo,
-    sessionGuid = _useSellerState$state.sessionGuid;
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selected = _useState6[0],
-    setSelected = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    hideAll = _useState8[0],
-    setHideAll = _useState8[1];
-  var _useDivaCore = useDivaCore(),
-    _useDivaCore$actions = _useDivaCore.actions,
-    toggleLoading = _useDivaCore$actions.toggleLoading,
-    userHasPermission = _useDivaCore$actions.userHasPermission,
-    organization = _useDivaCore.state.organization;
-  useEffect(function () {
-    LOG$4.businessEvent('onOpenModule', 'SellerCatalogInfo', "Open Catalog Info", {
-      cat: catalogCodex,
-      accountId: accountId
-    });
-  }, []);
-  var onOpenPlanner = useCallback(function (accountLoginId, returnToPlanner) {
-    if (accountLoginId || currentAccountLoginId || organization.parentType === 'SUPPLIER') {
-      openPlanner({
-        catalogCodex: catalogCodex,
-        accountId: accountId,
-        accountSessionGuid: accountLoginId || currentAccountLoginId,
-        forceReload: '1',
-        basketData: returnToPlanner === 'SETPLANNER_OPEN_SELLER_BASKET' ? currentBasketState === null || currentBasketState === void 0 ? void 0 : currentBasketState.basket : undefined,
-        returnTo: returnToPlanner !== null && returnToPlanner !== void 0 && returnToPlanner.endsWith('PRODUCTCREATOR') ? returnToPlanner : ['toProductsGallery', 'toAssortmentManager'].includes(returnTo !== null && returnTo !== void 0 ? returnTo : '') ? 'OPEN_SELLER_PRODUCTCREATOR' : returnToPlanner || (configurationData === null || configurationData === void 0 ? void 0 : configurationData.defaultWebPlannerReturnTo) || 'OPEN_SELLER_BASKET'
-      });
-    } else {
-      LOG$4.error(new DivaError('Missing account login ID', {
-        code: 'SELLER_0001'
-      }));
-    }
-  }, [openPlanner, catalogs, currentAccountLoginId]);
-  var _onOpenArticles = useCallback(function () {
-    if ((accountId || organization.parentType === 'SUPPLIER') && catalogCodex) {
-      openComponent({
-        type: 'SELLER',
-        parameters: {
-          module: 'Articles',
-          accountId: accountId,
-          catalogCodex: catalogCodex
-        }
-      });
-    } else {
-      LOG$4.error(new DivaError('Missing account ID or catalog', {
-        code: 'SELLER_0001'
-      }));
-    }
-  }, [openComponent, currentAccountLoginId, accountId, catalogCodex]);
-  useEffect(function () {
-    var load = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var accountSessionId, _catalogInfoData$, catalogInfoData;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              setLoading(true);
-              toggleLoading('seller-model-info', false, true);
-              accountSessionId = undefined;
-              if (!(organization.type === 'RETAILER')) {
-                _context.next = 12;
-                break;
-              }
-              if (accountId) {
-                _context.next = 9;
-                break;
-              }
-              LOG$4.error(new DivaError('Missing account ID', {
-                code: 'SELLER_0001'
-              }));
-              setLoading(false);
-              toggleLoading('seller-model-info', false, false);
-              return _context.abrupt("return");
-            case 9:
-              _context.next = 11;
-              return checkAccountLogin({
-                accountId: accountId
-              });
-            case 11:
-              accountSessionId = _context.sent;
-            case 12:
-              if (!catalogCodex) {
-                _context.next = 18;
-                break;
-              }
-              _context.next = 15;
-              return loadCatalogInfo({
-                catalogCodex: catalogCodex,
-                accountSessionId: accountSessionId,
-                accountId: accountId,
-                language: i18n.language || 'en'
-              });
-            case 15:
-              catalogInfoData = _context.sent;
-              if ((catalogInfoData === null || catalogInfoData === void 0 || (_catalogInfoData$ = catalogInfoData[0]) === null || _catalogInfoData$ === void 0 || (_catalogInfoData$ = _catalogInfoData$.images) === null || _catalogInfoData$ === void 0 ? void 0 : _catalogInfoData$.length) == 0 && !userHasPermission('productcreator')) {
-                catalogInfoData !== null && catalogInfoData !== void 0 && catalogInfoData[0].hasPlanner ? onOpenPlanner(accountSessionId) : _onOpenArticles();
-              }
-              setData(catalogInfoData === null || catalogInfoData === void 0 ? void 0 : catalogInfoData[0]);
-            case 18:
-              setLoading(false);
-              toggleLoading('seller-model-info', false, false);
-            case 20:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function load() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    load();
-  }, [accountId, catalogCodex, i18n.language, sessionGuid]);
-  return /*#__PURE__*/jsx(Fragment, {
-    children: !loading && /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx(NavBar$1, {
-        title: /*#__PURE__*/jsx(Title, {
-          text: t('info.title')
-        }),
-        onOpenPlanner: onOpenPlanner,
-        onOpenArticles: function onOpenArticles() {
-          return _onOpenArticles();
-        },
-        hasPlanner: (!!currentAccountLoginId || organization.parentType === 'SUPPLIER') && !!catalogCodex && (data === null || data === void 0 ? void 0 : data.hasPlanner),
-        hasArticles: (!!currentAccountLoginId && !!accountId || organization.parentType === 'SUPPLIER') && !!catalogCodex,
-        showVariants: userHasPermission('productcreator') && !(configurationData !== null && configurationData !== void 0 && configurationData.hideProductCreator) || returnTo === 'toAssortmentManager' || returnTo === 'toProductsGallery',
-        showSetPlanner: userHasPermission('productcreator')
-      }), /*#__PURE__*/jsx(MainView, {
-        data: data,
-        selected: selected,
-        setSelected: setSelected,
-        onClick: function onClick() {
-          setHideAll(!hideAll);
-        }
-      }), /*#__PURE__*/jsx(Description$2, {
-        data: data,
-        hide: hideAll
-      }), /*#__PURE__*/jsx(ImagesBar, {
-        data: data,
-        selected: selected,
-        setSelected: setSelected,
-        hide: hideAll,
-        loading: loading
-      })]
-    })
-  });
-}
-
-var wrapper$7 = "wrapper-fSL18";
-var title$2 = "title-iTDPA";
-var subTitle = "subTitle-4-0PW";
-var descriptionContainer$1 = "description-container-k1vLT";
-var modelTitle = "model-title-Sgm-0";
-var description = "description-GyPZq";
-var pdf = "pdf-oNnao";
-var css_248z$9 = ".wrapper-fSL18 {\n  display: flex;\n  flex-direction: column;\n  padding: 0 12px;\n  max-height: calc(100% - 42px);\n}\n\n.title-iTDPA {\n  padding: 16px 8px;\n  font-size: 36px;\n}\n\n.subTitle-4-0PW {\n  padding: 12px 18px;\n  font-size: 28px;\n}\n\n.description-container-k1vLT {\n  display: flex;\n  flex-direction: column;\n  background-color: #f8f8f8;\n  padding: 18px;\n  gap: 12px;\n  height: calc(100% - 164px);\n}\n\n.model-title-Sgm-0 {\n  font-size: 24px;\n  font-weight: 600;\n}\n.description-GyPZq {\n  font-size: 16px;\n  overflow: auto;\n  flex-grow: 3;\n}\n\n.pdf-oNnao {\n  display: 'flex';\n  flex: 1 1 10px;\n}\n\n.pdf-oNnao svg {\n  margin-right: 10px;\n}\n";
-styleInject(css_248z$9);
-
-var _excluded$7 = ["data", "text"];
-function ownKeys$n(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$n(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$n(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$n(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-getLogger('SellerCatalogInfo', 'Description');
-function Description$1 (_ref) {
-  var data = _ref.data,
-    text = _ref.text,
-    props = _objectWithoutProperties(_ref, _excluded$7);
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/jsxs("div", _objectSpread$n(_objectSpread$n({}, props), {}, {
-    className: classNames(wrapper$7, props.className),
-    children: [/*#__PURE__*/jsx("div", {
-      className: title$2,
-      children: t(text)
-    }), /*#__PURE__*/jsx("div", {
-      className: subTitle,
-      children: t('pdp.info')
-    }), /*#__PURE__*/jsxs("div", {
-      className: descriptionContainer$1,
-      children: [/*#__PURE__*/jsx("div", {
-        className: modelTitle,
-        children: data.name
-      }), data === null || data === void 0 ? void 0 : data.documents.map(function (d, i) {
-        return /*#__PURE__*/jsx("div", {
-          className: pdf,
-          children: /*#__PURE__*/jsx(Link, {
-            href: d.url,
-            download: true,
-            target: "_blank",
-            children: d.name
-          })
-        }, i);
-      }), data.description && /*#__PURE__*/jsx("div", {
-        className: description,
-        dangerouslySetInnerHTML: {
-          __html: data.description
-        }
-      })]
-    })]
-  }));
-}
-
-var wrapper$6 = "wrapper-oUrTP";
-var container = "container-Sr3pC";
-var button = "button-NXyWV";
-var navBack = "nav-back-AzU6X";
-var icon$1 = "icon-0h-39";
-var text = "text-55Zpw";
-var css_248z$8 = ".wrapper-oUrTP {\n  right: 10px;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  z-index: 500;\n  background-color: #fff;\n  position: absolute;\n  bottom: 0;\n  width: 83%;\n}\n\n.container-Sr3pC {\n  display: flex;\n  gap: 12px;\n  width: 50%;\n  justify-content: flex-end;\n  padding: 8px;\n}\n\n.button-NXyWV {\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--diva-theme-palette-primary-main);\n  border-radius: 2px;\n  border-color: var(--diva-theme-palette-primary-main);\n  border-style: solid;\n  border-width: 1.5px;\n  flex-grow: 1;\n  cursor: pointer;\n}\n\n.nav-back-AzU6X {\n  width: 50px;\n  height: 50px;\n  border-radius: 2px;\n  border-color: var(--diva-theme-palette-primary-main);\n  border-style: solid;\n  border-width: 1.5px;\n  background-color: #fff;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%2218%22 viewBox%3D%220 0 10 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9 1L1 9L9 17%22 stroke%3D%22%23713434%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-size: 27%;\n  background-repeat: no-repeat;\n  background-position: center center;\n  cursor: pointer;\n}\n\n.icon-0h-39 {\n  width: 24px;\n  height: 24px;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center center;\n}\n\n.text-55Zpw {\n  text-align: center;\n  /* flex-basis: 100%; */\n  color: white;\n}\n";
-styleInject(css_248z$8);
-
-var _excluded$6 = ["navigateBack", "buttons"];
-function ownKeys$m(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$m(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$m(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$m(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function NavBar (_ref) {
-  var navigateBack = _ref.navigateBack,
-    buttons = _ref.buttons,
-    props = _objectWithoutProperties(_ref, _excluded$6);
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/jsx("div", _objectSpread$m(_objectSpread$m({}, props), {}, {
-    className: classNames(wrapper$6, props.className),
-    id: "diva-seller-info-navbar",
-    children: /*#__PURE__*/jsxs("div", {
-      className: container,
-      children: [navigateBack && /*#__PURE__*/jsx("div", {
-        className: classNames(navBack),
-        onClick: navigateBack
-      }), buttons.map(function (button$1) {
-        return /*#__PURE__*/jsxs("div", {
-          className: classNames(button),
-          onClick: button$1.onClick,
-          id: button$1.key,
-          children: [button$1.iconClass && /*#__PURE__*/jsx("div", {
-            className: classNames(icon$1, button$1.iconClass)
-          }), /*#__PURE__*/jsxs("div", {
-            className: classNames(text),
-            children: [" ", t(button$1.text)]
-          })]
-        }, button$1.key);
-      })]
-    })
-  }));
-}
 
 var layout$1 = "layout-NhUpB";
-var info$1 = "info-9St01";
+var content = "content-t8Rtl";
+var leftSide = "left-side-10jmj";
 var rightSide$1 = "right-side-64-Yz";
-var scrollerContainer = "scroller-container-TAsAz";
 var catalogImages = "catalog-images-jJGqW";
-var productsHidden = "products-hidden-T6mTt";
-var products = "products-QxoIf";
 var footer = "footer-1ONIt";
-var emptyPlanning = "empty-planning-BZTrr";
-var favPlanning = "fav-planning-R8cxS";
-var setPlanning = "set-planning-1AQNC";
-var articleList = "article-list-uOn26";
-var analyticsIcon = "analytics-icon-kCv53";
-var css_248z$7 = ".layout-NhUpB {\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  grid-template-rows: repeat(10, 1fr);\n  grid-column-gap: 0px;\n  grid-row-gap: 0px;\n  overflow: auto;\n  height: 100%;\n}\n\n.info-9St01 {\n  grid-area: 1 / 1 / 11 / 3;\n  z-index: 100;\n}\n\n.right-side-64-Yz {\n  grid-area: 1 / 3 / 11 / 13;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n\n.scroller-container-TAsAz {\n  overflow: auto;\n  height: calc(100% - 70px);\n}\n\n.catalog-images-jJGqW {\n  padding: 12px 12px 0 12px;\n  height: calc(50% - 12px);\n}\n.products-hidden-T6mTt .catalog-images-jJGqW {\n  height: calc(100% - 12px);\n}\n.products-QxoIf {\n  height: 50%;\n}\n.footer-1ONIt {\n  bottom: 0;\n  right: 8px;\n}\n\n.empty-planning-BZTrr {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M4 16L3.57574 15.5757C3.46321 15.6883 3.4 15.8409 3.4 16H4ZM17 3L17.4243 2.57574C17.1899 2.34142 16.8101 2.34142 16.5757 2.57574L17 3ZM21 7L21.4243 7.42426C21.6586 7.18995 21.6586 6.81005 21.4243 6.57574L21 7ZM8 20V20.6C8.15913 20.6 8.31174 20.5368 8.42426 20.4243L8 20ZM4 20H3.4C3.4 20.3314 3.66863 20.6 4 20.6V20ZM12 19.4C11.6686 19.4 11.4 19.6686 11.4 20C11.4 20.3314 11.6686 20.6 12 20.6V19.4ZM20.5 20.6C20.8314 20.6 21.1 20.3314 21.1 20C21.1 19.6686 20.8314 19.4 20.5 19.4V20.6ZM4.42426 16.4243L17.4243 3.42426L16.5757 2.57574L3.57574 15.5757L4.42426 16.4243ZM16.5757 3.42426L20.5757 7.42426L21.4243 6.57574L17.4243 2.57574L16.5757 3.42426ZM20.5757 6.57574L7.57574 19.5757L8.42426 20.4243L21.4243 7.42426L20.5757 6.57574ZM8 19.4H4V20.6H8V19.4ZM4.6 20V16H3.4V20H4.6ZM13.5757 6.42426L17.5757 10.4243L18.4243 9.57574L14.4243 5.57574L13.5757 6.42426ZM12 20.6H20.5V19.4H12V20.6Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.fav-planning-R8cxS {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M4.3314 12.0474L12 20L19.6686 12.0474C20.5211 11.1633 21 9.96429 21 8.71405C21 6.11055 18.9648 4 16.4543 4C15.2487 4 14.0925 4.49666 13.24 5.38071L12 6.66667L10.76 5.38071C9.90749 4.49666 8.75128 4 7.54569 4C5.03517 4 3 6.11055 3 8.71405C3 9.96429 3.47892 11.1633 4.3314 12.0474Z%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.set-planning-1AQNC {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M7.11164 16.5938L3.8061 18.9095C3.46519 19.1412 3 18.9011 3 18.4934V5.5064C3 5.12726 3.4083 4.88294 3.75042 5.05738L7.1021 6.77004M12.1193 16.7346V9.76989C12.1193 9.49058 12.3494 9.26416 12.6332 9.26416H16.1086C16.3924 9.26416 16.6225 9.49058 16.6225 9.76989V16.7346M7.46741 16.7346H19.486C19.7699 16.7346 20 16.5081 20 16.2288V7.12577C20 6.84647 19.7699 6.62004 19.486 6.62004H7.46741C7.18356 6.62004 6.95346 6.84647 6.95346 7.12577V16.2288C6.95346 16.5081 7.18356 16.7346 7.46741 16.7346Z%22 stroke%3D%22white%22 stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.article-list-uOn26 {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 24 24%22 %3E  %3Cpath   fill%3D%22white%22 d%3D%22M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.analytics-icon-kCv53 {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 stroke%3D%22%23fff%22  fill%3D%22%23fff%22 stroke-width%3D%222px%22 height%3D%2248%22 width%3D%2248%22%3E%3Cpath d%3D%22M7.3 40.7v-2.1l1.1-1.1v3.2Zm8.1 0V30.6l1.1-1.1v11.2Zm8.05 0V29.5l1.1 1.15V40.7Zm8.1 0V30.65l1.1-1.1V40.7Zm8.05 0V22.6l1.1-1.1v19.2ZM7.3 28.05v-1.5L20 13.85l8 8 12.7-12.7v1.55L28 23.4l-8-8Z%22%2F%3E%3C%2Fsvg%3E\");\n}\n";
+var css_248z$7 = ".layout-NhUpB {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n}\n\n.content-t8Rtl {\n  display: flex;\n  flex: 1;\n  overflow: auto;\n}\n\n.left-side-10jmj {\n  width: 25%;\n  min-width: 300px;\n}\n\n.right-side-64-Yz {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  flex: 1;\n  overflow: auto;\n}\n\n.catalog-images-jJGqW {\n  flex: 1;\n  padding: 12px;\n}\n\n.footer-1ONIt {\n  display: flex;\n  justify-content: flex-end;\n}\n\n@media (max-width: 820px) {\n  .content-t8Rtl {\n    flex-direction: column;\n  }\n}\n";
 styleInject(css_248z$7);
 
 var wrapper$5 = "wrapper-D5Cmc";
 var thumbs = "thumbs-cWKAj";
 var mainSlider = "mainSlider-S8opH";
-var css_248z$6 = ".wrapper-D5Cmc {\n  display: flex;\n  position: relative;\n  width: calc(100% - 24px);\n  gap: 12px;\n}\n\n.thumbs-cWKAj .swiper-slide {\n  opacity: 0.4;\n}\n\n.thumbs-cWKAj .swiper-slide-thumb-active {\n  opacity: 1;\n}\n\n.mainSlider-S8opH .swiper-pagination-bullet-active {\n  background-color: var(--diva-theme-palette-primary-main) !important;\n}\n\n.mainSlider-S8opH .swiper-pagination-bullet-active { /* Active bullet color */\n}\n";
+var css_248z$6 = ".wrapper-D5Cmc {\n  display: flex;\n  position: relative;\n  gap: 12px;\n  overflow: auto;\n}\n\n.thumbs-cWKAj .swiper-slide {\n  opacity: 0.4;\n}\n\n.thumbs-cWKAj .swiper-slide-thumb-active {\n  opacity: 1;\n}\n\n.mainSlider-S8opH .swiper-pagination-bullet-active {\n  background-color: var(--diva-theme-palette-primary-main) !important;\n}\n\n.mainSlider-S8opH .swiper-pagination-bullet-active { /* Active bullet color */\n}\n\n@media (max-width: 820px) {\n  .thumbs-cWKAj {\n    display: none;\n  }\n}\n";
 styleInject(css_248z$6);
 
 var _excluded$5 = ["data"];
@@ -7644,7 +7110,7 @@ var CatalogImages = function CatalogImages(_ref) {
   var mainSwiperRef = useRef(null);
   return /*#__PURE__*/jsxs("div", {
     id: "diva-catalog-images",
-    className: classNames(wrapper$5, props.className),
+    className: classnames(wrapper$5, props.className),
     children: [/*#__PURE__*/jsx(Swiper, {
       ref: mainSwiperRef,
       pagination: {
@@ -7660,7 +7126,8 @@ var CatalogImages = function CatalogImages(_ref) {
       },
       style: {
         height: '100%',
-        width: '90%'
+        width: '90%',
+        minWidth: 0
       },
       className: mainSlider,
       children: data.images.map(function (media, index) {
@@ -7678,14 +7145,18 @@ var CatalogImages = function CatalogImages(_ref) {
     }), /*#__PURE__*/jsx(Swiper, {
       onSwiper: setThumbsSwiper,
       spaceBetween: 10,
-      slidesPerView: props.showProducts ? 4 : 10,
-      freeMode: true,
+      slidesPerView: "auto",
+      freeMode: {
+        sticky: true
+      },
+      mousewheel: true,
       direction: "vertical",
       watchSlidesProgress: true,
-      modules: [Thumbs, FreeMode],
+      modules: [Thumbs, FreeMode, Mousewheel],
       style: {
         width: '10%',
         marginLeft: '10px',
+        minWidth: '150px',
         cursor: 'pointer'
       },
       className: thumbs,
@@ -7711,160 +7182,203 @@ var CatalogImages = function CatalogImages(_ref) {
 };
 
 var wrapper$4 = "wrapper-3d2zl";
-var css_248z$5 = ".wrapper-3d2zl {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  background-color: #f8f8f8;\n  height: 46px;\n}\n";
+var tabBar = "tab-bar-lQQ28";
+var nothingFound = "nothing-found-0eqZ5";
+var css_248z$5 = ".wrapper-3d2zl {\n  max-height: 50%;\n  overflow: hidden;\n}\n\n.wrapper-3d2zl.MuiAccordion-root.Mui-expanded {\n  height: 50%;\n}\n\n.wrapper-3d2zl .MuiAccordionSummary-root.Mui-expanded {\n  min-height: 0;\n}\n\n.wrapper-3d2zl .MuiAccordionSummary-root.Mui-focused {\n  background-color: #fff8f8;\n}\n\n.wrapper-3d2zl .MuiAccordionSummary-content {\n  justify-content: space-between;\n  height: 100%;\n}\n\n.wrapper-3d2zl .MuiTabs-root {\n  height: 100%;\n}\n\n.wrapper-3d2zl .MuiCollapse-root {\n  height: calc(100% - 46px) !important;\n}\n\n.wrapper-3d2zl .MuiCollapse-root {\n  scrollbar-width: thin;\n  overflow-y: scroll;\n}\n\n.wrapper-3d2zl .MuiCollapse-root .MuiCollapse-wrapper {\n  display: none;\n  height: 100%;\n}\n\n.wrapper-3d2zl .MuiCollapse-root.MuiCollapse-entered .MuiCollapse-wrapper {\n  display: flex;\n}\n\n.wrapper-3d2zl .MuiCollapse-root .MuiCollapse-wrapperInner {\n  height: 100%;\n}\n\n.wrapper-3d2zl .MuiCollapse-root .MuiCollapse-wrapperInner > div {\n  height: 100%;\n}\n\n.wrapper-3d2zl .MuiAccordionDetails-root {\n  height: calc(100% - 24px);\n  width: calc(100% - 32px);\n}\n\n.tab-bar-lQQ28 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  background-color: #f8f8f8;\n  height: 46px;\n}\n\n.nothing-found-0eqZ5 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  flex-direction: column;\n  gap: 15px;\n  margin: auto;\n}\n";
 styleInject(css_248z$5);
 
-function ownKeys$l(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$l(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$l(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$l(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Products = function Products(_ref) {
-  var catalogCodex = _ref.catalogCodex,
-    onProductClick = _ref.onProductClick,
-    productState = _ref.productState;
-  var _useSellerState = useSellerState(),
-    _useSellerState$state = _useSellerState.state,
-    currentProductId = _useSellerState$state.currentProductId,
-    configurationData = _useSellerState$state.configurationData;
-  var _productState$filter = _slicedToArray(productState.filter, 2),
-    filter = _productState$filter[0],
-    setFilter = _productState$filter[1];
-  useEffect(function () {
-    setFilter(_objectSpread$l(_objectSpread$l({}, filter), {}, {
-      catCodex: {
-        type: 'singleSelect',
-        value: catalogCodex
-      }
-    }));
-  }, []);
-  return /*#__PURE__*/jsx(ProductsComponent, {
-    productState: productState,
-    onClickFunction: onProductClick,
-    curProductId: currentProductId,
-    groupVariantsByField: configurationData === null || configurationData === void 0 ? void 0 : configurationData.groupVariantsByField,
-    galleryConfig: {
-      hidePrices: true
-    }
-  });
-};
-
 var wrapper$3 = "wrapper-i9mNn";
 var searchText = "search-text-grXdY";
 var icon = "icon-ydD53";
-var css_248z$4 = ".wrapper-i9mNn {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n\n.search-text-grXdY {\n  width: 130px;\n  height: 30px;\n  line-height: 28px;\n  border-radius: 5px;\n  -webkit-tap-highlight-color: transparent;\n  outline: 0;\n  background-color: #fff;\n  padding: 0 1.6rem;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  position: relative;\n  border: 0;\n}\n\n.icon-ydD53 {\n  width: 36px;\n  height: 36px;\n  background: center / contain no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2259%22 height%3D%2259%22 viewBox%3D%220 0 59 59%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M39.9163 41.38C40.3208 41.7844 40.9765 41.7844 41.3809 41.38C41.7854 40.9755 41.7854 40.3198 41.3809 39.9153L39.9163 41.38ZM36.851 27.5286C36.851 32.6767 32.6776 36.85 27.5296 36.85V38.9215C33.8216 38.9215 38.9224 33.8206 38.9224 27.5286H36.851ZM27.5296 36.85C22.3815 36.85 18.2081 32.6767 18.2081 27.5286H16.1367C16.1367 33.8206 21.2375 38.9215 27.5296 38.9215V36.85ZM18.2081 27.5286C18.2081 22.3805 22.3815 18.2072 27.5296 18.2072V16.1357C21.2375 16.1357 16.1367 21.2365 16.1367 27.5286H18.2081ZM27.5296 18.2072C32.6776 18.2072 36.851 22.3805 36.851 27.5286H38.9224C38.9224 21.2365 33.8216 16.1357 27.5296 16.1357V18.2072ZM41.3809 39.9153L35.5982 34.1325L34.1334 35.5972L39.9163 41.38L41.3809 39.9153Z%22 fill%3D%22%234F4F4F%22%2F%3E%3C%2Fsvg%3E\");\n  margin-left: 12px;\n  margin-right: 12px;\n}\n";
+var css_248z$4 = ".wrapper-i9mNn {\n  display: flex;\n  height: 36px;\n  align-items: center;\n  background-color: #fefefe;\n  margin: 6px 0;\n  border-radius: 5px;\n}\n\n.search-text-grXdY {\n  padding: 8px 8px 8px 0px;\n  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);\n  width: 130px;\n}\n\n.search-text-grXdY.Mui-focused {\n  width: 200px;\n}\n\n.search-text-grXdY .MuiInputBase-input {\n  padding-left: 36px;\n}\n\n.icon-ydD53 {\n  width: 36px;\n  height: 36px;\n  background: center / contain no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2259%22 height%3D%2259%22 viewBox%3D%220 0 59 59%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M39.9163 41.38C40.3208 41.7844 40.9765 41.7844 41.3809 41.38C41.7854 40.9755 41.7854 40.3198 41.3809 39.9153L39.9163 41.38ZM36.851 27.5286C36.851 32.6767 32.6776 36.85 27.5296 36.85V38.9215C33.8216 38.9215 38.9224 33.8206 38.9224 27.5286H36.851ZM27.5296 36.85C22.3815 36.85 18.2081 32.6767 18.2081 27.5286H16.1367C16.1367 33.8206 21.2375 38.9215 27.5296 38.9215V36.85ZM18.2081 27.5286C18.2081 22.3805 22.3815 18.2072 27.5296 18.2072V16.1357C21.2375 16.1357 16.1367 21.2365 16.1367 27.5286H18.2081ZM27.5296 18.2072C32.6776 18.2072 36.851 22.3805 36.851 27.5286H38.9224C38.9224 21.2365 33.8216 16.1357 27.5296 16.1357V18.2072ZM41.3809 39.9153L35.5982 34.1325L34.1334 35.5972L39.9163 41.38L41.3809 39.9153Z%22 fill%3D%22%234F4F4F%22%2F%3E%3C%2Fsvg%3E\");\n  position: absolute;\n  pointer-events: none;\n}\n";
 styleInject(css_248z$4);
 
 var Search = function Search(_ref) {
-  var _ref$searchState = _slicedToArray(_ref.searchState, 2),
-    search = _ref$searchState[0],
-    setSearch = _ref$searchState[1];
+  var searchValue = _ref.searchValue,
+    onSearch = _ref.onSearch,
+    setExpanded = _ref.setExpanded;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  var inputRef = useRef(null);
-  useEffect(function () {
-    if (value && value.length > 2) setSearch(value);else if ((search === null || search === void 0 ? void 0 : search.length) !== 0) {
-      setSearch(undefined);
-    }
-  }, [value]);
-  useEffect(function () {
-    if (!(search !== null && search !== void 0 && search.length)) setValue('');
-  }, [search]);
   return /*#__PURE__*/jsxs("div", {
     className: wrapper$3,
-    children: [/*#__PURE__*/jsx("input", {
-      ref: inputRef,
+    onClick: function onClick(ev) {
+      return ev.stopPropagation();
+    },
+    children: [/*#__PURE__*/jsx("div", {
+      className: icon
+    }), /*#__PURE__*/jsx(InputBase, {
       onChange: function onChange(e) {
-        return setValue(e.target.value);
+        return onSearch(e.target.value);
       },
-      type: 'text',
-      value: value,
+      value: searchValue,
       className: searchText,
-      placeholder: t('filter.global')
-    }), /*#__PURE__*/jsx("div", {
-      className: icon
+      placeholder: t('filter.global'),
+      onFocus: function onFocus() {
+        return setExpanded(true);
+      }
     })]
   });
 };
 
-var _excluded2$2 = ["catalogCodex", "accountId", "onProductClick", "onArticleClick", "productState"];
-function ownKeys$k(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$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-({
-  children: PropTypes.node,
-  index: PropTypes.any.isRequired,
-  value: PropTypes.any.isRequired
-});
-function a11yProps(index) {
-  return {
-    id: "simple-tab-".concat(index),
-    'aria-controls': "simple-tabpanel-".concat(index)
-  };
-}
-var StyledTab = withStyles$1(function (theme) {
-  return createStyles$1({
-    root: {
-      textTransform: 'none',
-      fontWeight: 'bold',
-      fontSize: theme.typography.pxToRem(15),
-      marginRight: theme.spacing(1)
-    }
+function NothingFound (_ref) {
+  var text = _ref.text,
+    info = _ref.info;
+  return /*#__PURE__*/jsxs("div", {
+    className: nothingFound,
+    children: [/*#__PURE__*/jsx(Typography$1, {
+      variant: "body2",
+      children: text
+    }), info && /*#__PURE__*/jsx(Alert, {
+      variant: "outlined",
+      severity: "info",
+      children: info
+    })]
   });
-})(function (props) {
-  return /*#__PURE__*/jsx(Tab, _objectSpread$k({
-    disableRipple: true
-  }, props));
-});
-var ProductsOrArticles = function ProductsOrArticles(_ref2) {
-  var catalogCodex = _ref2.catalogCodex;
-    _ref2.accountId;
-    var onProductClick = _ref2.onProductClick;
-    _ref2.onArticleClick;
-    var productState = _ref2.productState,
-    props = _objectWithoutProperties(_ref2, _excluded2$2);
+}
+
+var ProductsOrArticles = function ProductsOrArticles(_ref) {
+  var _scroller$current, _scroller$current2;
+  var catalogCodex = _ref.catalogCodex,
+    onProductClick = _ref.onProductClick,
+    hideProducts = _ref.hideProducts;
+  var _useSellerState = useSellerState(),
+    configurationData = _useSellerState.state.configurationData;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
+    tab = _useState2[0],
+    setTab = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    expanded = _useState4[0],
+    setExpanded = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    productSearch = _useState6[0],
+    setProductSearch = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showVZProducts = _useState8[0],
+    setShowVZProducts = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    showFavoriteProducts = _useState10[0],
+    setShowFavoriteProducts = _useState10[1];
+  var favDisabled = hideProducts == true || hideProducts == 'hideFav';
+  var vzDisabled = hideProducts == true || hideProducts == 'hideVZ';
+  var hideAll = !showFavoriteProducts && !showVZProducts;
+  //expand only if there is something to show
+  var shouldExpand = expanded && !hideAll;
+  //tabs are only selectable if both are shown
+  var selectedTab = !showVZProducts ? 1 : tab;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var scroller = useRef(null);
+  var vzProductsState = useProductState$1({
+    parameters: {
+      catCodex: catalogCodex
+    },
+    sort: '{-modelInfoPageWeight}',
+    scroller: (_scroller$current = scroller.current) !== null && _scroller$current !== void 0 ? _scroller$current : undefined,
+    disabled: vzDisabled,
+    onInitialized: function onInitialized(empty) {
+      setShowVZProducts(!empty);
+      if (!empty) setExpanded(true);
+    }
+  });
+  var favoriteProductsState = useProductState$1({
+    parameters: {
+      catCodex: catalogCodex
+    },
+    favorites: true,
+    scroller: (_scroller$current2 = scroller.current) !== null && _scroller$current2 !== void 0 ? _scroller$current2 : undefined,
+    disabled: favDisabled,
+    onInitialized: function onInitialized(empty) {
+      if (!favDisabled) {
+        setShowFavoriteProducts(true);
+        if (!empty) setExpanded(true);
+      }
+    }
+  });
   var handleChange = function handleChange(event, newValue) {
-    productState.search[1](undefined);
-    setValue(newValue);
+    vzProductsState.search[1](undefined);
+    favoriteProductsState.search[1](undefined);
+    setProductSearch('');
+    setTab(newValue);
+    if (newValue == selectedTab) {
+      setExpanded(!expanded);
+    } else {
+      setExpanded(true);
+    }
+    event.stopPropagation();
   };
-  return /*#__PURE__*/jsxs("div", _objectSpread$k(_objectSpread$k({}, props), {}, {
-    children: [/*#__PURE__*/jsxs("div", {
-      className: wrapper$4,
-      children: [/*#__PURE__*/jsx(Tabs, {
-        value: value,
+  var handleSearch = function handleSearch(search) {
+    setProductSearch(search);
+    if (selectedTab === 0) {
+      vzProductsState.search[1](search);
+    } else {
+      favoriteProductsState.search[1](search);
+    }
+  };
+  if (hideAll || vzProductsState.loading || favoriteProductsState.loading) return /*#__PURE__*/jsx(Fragment, {});
+  /*#__PURE__*/jsx(ProductsComponent, {
+    productState: vzProductsState,
+    onClickFunction: onProductClick,
+    groupVariantsByField: configurationData === null || configurationData === void 0 ? void 0 : configurationData.groupVariantsByField,
+    galleryConfig: {
+      hidePrices: true
+    }
+  });
+  var isEmpty = tab == 0 ? vzProductsState.groups.length == 0 : favoriteProductsState.groups.length == 0;
+  return /*#__PURE__*/jsxs(Accordion, {
+    className: wrapper$4,
+    expanded: shouldExpand,
+    onChange: function onChange(_, exp) {
+      return setExpanded(exp);
+    },
+    children: [/*#__PURE__*/jsxs(AccordionSummary, {
+      className: tabBar,
+      expandIcon: /*#__PURE__*/jsx(ExpandMore, {}),
+      children: [/*#__PURE__*/jsxs(Tabs, {
+        value: selectedTab,
         onChange: handleChange,
-        indicatorColor: "primary",
-        textColor: "secondary",
-        children: /*#__PURE__*/jsx(StyledTab, _objectSpread$k({
-          label: t('navigation.products')
-        }, a11yProps(0)))
+        children: [showVZProducts && /*#__PURE__*/jsx(Tab, {
+          label: t('info.products.shared'),
+          value: 0
+        }), /*#__PURE__*/jsx(Tab, {
+          label: t('info.products.favorite'),
+          value: 1
+        })]
       }), /*#__PURE__*/jsx(Search, {
-        searchState: productState.search
+        searchValue: productSearch,
+        onSearch: handleSearch,
+        setExpanded: setExpanded
+      }, selectedTab)]
+    }), /*#__PURE__*/jsxs(AccordionDetails, {
+      ref: scroller,
+      children: [!isEmpty && /*#__PURE__*/jsx(ProductsComponent, {
+        productState: selectedTab == 0 ? vzProductsState : favoriteProductsState,
+        onClickFunction: onProductClick,
+        groupVariantsByField: configurationData === null || configurationData === void 0 ? void 0 : configurationData.groupVariantsByField,
+        galleryConfig: {
+          hidePrices: true
+        }
+      }), isEmpty && /*#__PURE__*/jsx(NothingFound, {
+        text: selectedTab == 0 ? t('info.products.novzproducts') : t('info.products.nofavorites'),
+        info: selectedTab == 0 ? undefined : t('info.products.farvoritesinfo')
       })]
-    }), /*#__PURE__*/jsx(Products, {
-      catalogCodex: catalogCodex,
-      onProductClick: onProductClick,
-      productState: productState
     })]
-  }));
+  });
 };
 
-function ownKeys$j(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$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LOG$3 = getLogger('SellerArticles', 'InfoWithProducts');
-function Info(_ref) {
-  var _scroller$current;
+function useModelInfoPage (_ref) {
   var accountId = _ref.accountId,
     catalogCodex = _ref.catalogCodex;
+  var _useTranslation = useTranslation(),
+    i18n = _useTranslation.i18n;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
-    data = _useState2[0],
+    catalogData = _useState2[0],
     setData = _useState2[1];
   var _useState3 = useState(true),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -7877,10 +7391,7 @@ function Info(_ref) {
     openComponent = _useSellerState$actio.openComponent,
     checkAccountLogin = _useSellerState$actio.checkAccountLogin,
     _useSellerState$state = _useSellerState.state,
-    sellerIsVisible = _useSellerState$state.sellerIsVisible,
-    currentProductId = _useSellerState$state.currentProductId,
     currentAccountLoginId = _useSellerState$state.currentAccountLoginId,
-    catalogs = _useSellerState$state.catalogs,
     currentBasketState = _useSellerState$state.currentBasketState,
     configurationData = _useSellerState$state.configurationData,
     returnTo = _useSellerState$state.returnTo,
@@ -7891,121 +7402,7 @@ function Info(_ref) {
     _useDivaCore$actions = _useDivaCore.actions,
     toggleLoading = _useDivaCore$actions.toggleLoading,
     userHasPermission = _useDivaCore$actions.userHasPermission;
-  var _useTranslation = useTranslation(),
-    i18n = _useTranslation.i18n;
-  var scroller = useRef(null);
-  var productState = useProductState$1({
-    parameters: {},
-    sort: '{-modelInfoPageWeight}',
-    scroller: (_scroller$current = scroller.current) !== null && _scroller$current !== void 0 ? _scroller$current : undefined
-  });
-  useEffect(function () {
-    LOG$3.startTransaction({
-      event: 'onOpenModule',
-      message: 'Open Catalog Info',
-      eventId: 'ON_OPEN_MODULE_INFO',
-      labels: {
-        cat: catalogCodex,
-        accountId: accountId
-      }
-    });
-  }, []);
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    showProducts = _useState6[0],
-    setShowProducts = _useState6[1];
-  var showImages = !(configurationData !== null && configurationData !== void 0 && configurationData.hideCatalogImagesInModelInfo);
-  useEffect(function () {
-    if (!showProducts && !(configurationData !== null && configurationData !== void 0 && configurationData.hideProductsInModelInfo)) {
-      if (productState.groups.length) setShowProducts(true);
-    }
-  }, [productState.groups]);
-  var onOpenPlanner = useCallback(function (accountLoginId, returnToPlanner) {
-    if (accountLoginId || currentAccountLoginId || organization.parentType === 'SUPPLIER') {
-      var plannerReturn = returnToPlanner || (configurationData === null || configurationData === void 0 ? void 0 : configurationData.defaultWebPlannerReturnTo) || 'OPEN_SELLER_BASKET';
-      if (checkDoReturnToProductCreator(plannerReturn)) {
-        plannerReturn = 'OPEN_SELLER_PRODUCTCREATOR';
-      }
-      openPlanner({
-        catalogCodex: catalogCodex,
-        accountId: accountId,
-        accountSessionGuid: accountLoginId || currentAccountLoginId,
-        forceReload: '1',
-        basketData: returnToPlanner === 'SETPLANNER_OPEN_SELLER_BASKET' ? currentBasketState === null || currentBasketState === void 0 ? void 0 : currentBasketState.basket : undefined,
-        returnTo: plannerReturn
-      });
-    } else {
-      LOG$3.error(new DivaError('Missing account login ID', {
-        code: 'SELLER_0001'
-      }));
-    }
-  }, [openPlanner, catalogs, currentAccountLoginId]);
-  var onOpenArticles = useCallback(function () {
-    if ((accountId || organization.parentType === 'SUPPLIER') && catalogCodex) {
-      openComponent({
-        type: 'SELLER',
-        parameters: {
-          module: 'Articles',
-          accountId: accountId,
-          catalogCodex: catalogCodex
-        }
-      });
-    } else {
-      LOG$3.error(new DivaError('Missing account ID or catalog', {
-        code: 'SELLER_0001'
-      }));
-    }
-  }, [openComponent, currentAccountLoginId, accountId, catalogCodex]);
-  var onOpenAnalytics = useCallback(function () {
-    if ((accountId || organization.parentType === 'SUPPLIER') && catalogCodex) {
-      openComponent({
-        type: 'SELLER',
-        parameters: {
-          module: 'InfoAnalytics',
-          accountId: accountId,
-          catalogCodex: catalogCodex
-        }
-      });
-    } else {
-      LOG$3.error(new DivaError('Missing account ID or catalog', {
-        code: 'SELLER_0001'
-      }));
-    }
-  }, [openComponent, currentAccountLoginId, accountId, catalogCodex]);
-  var onArticleClick = function onArticleClick(item) {
-    var plannerReturn = (configurationData === null || configurationData === void 0 ? void 0 : configurationData.defaultWebPlannerReturnTo) || 'OPEN_SELLER_BASKET';
-    if (checkDoReturnToProductCreator(plannerReturn)) {
-      plannerReturn = 'OPEN_SELLER_PRODUCTCREATOR';
-    }
-    openPlanner({
-      catalogCodex: item.catalogCodex,
-      articleCodexes: item.articleCodex,
-      forceReload: '1',
-      accountSessionGuid: currentAccountLoginId,
-      accountId: accountId,
-      retailArticleNr: item.retailArticleNr,
-      returnTo: plannerReturn
-    });
-  };
-  var checkDoReturnToProductCreator = function checkDoReturnToProductCreator(plannerReturn) {
-    return ['toProductsGallery', 'toAssortmentManager'].includes(returnTo !== null && returnTo !== void 0 ? returnTo : '') && !plannerReturn.includes('PRODUCTCREATOR');
-  };
-  var navigateBack = useCallback(function () {
-    if ((accountId || organization.parentType === 'SUPPLIER') && catalogCodex) {
-      var _data$accountGuid;
-      openComponent({
-        type: 'SELLER',
-        parameters: {
-          module: 'Catalogs',
-          collectionId: (configurationData === null || configurationData === void 0 ? void 0 : configurationData.defaultModule) === 'Catalogs' ? undefined : (_data$accountGuid = data === null || data === void 0 ? void 0 : data.accountGuid) !== null && _data$accountGuid !== void 0 ? _data$accountGuid : accountId
-        }
-      });
-    } else {
-      LOG$3.error(new DivaError('Missing account ID or catalog', {
-        code: 'SELLER_0001'
-      }));
-    }
-  }, [openComponent, currentAccountLoginId, accountId, catalogCodex]);
+  useEffect(function () {}, []);
   useEffect(function () {
     var load = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -8013,59 +7410,76 @@ function Info(_ref) {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
+              LOG$3.startTransaction({
+                event: 'onOpenModule',
+                message: 'Open Catalog Info',
+                eventId: 'ON_OPEN_MODULE_INFO',
+                labels: {
+                  cat: catalogCodex,
+                  accountId: accountId
+                }
+              });
               setLoading(true);
               toggleLoading('seller-model-info', false, true);
               accountSessionId = undefined;
               if (!(organization.type === 'RETAILER')) {
-                _context.next = 12;
+                _context.next = 13;
                 break;
               }
               if (accountId) {
-                _context.next = 9;
+                _context.next = 10;
                 break;
               }
               LOG$3.errorTransaction('ON_OPEN_MODULE_INFO', 'SELLER_0001', 'Missing account ID', {
-                cat: data === null || data === void 0 ? void 0 : data.accountGuid,
+                cat: catalogCodex,
                 accountId: accountId
               });
               setLoading(false);
               toggleLoading('seller-model-info', false, false);
               return _context.abrupt("return");
-            case 9:
-              _context.next = 11;
+            case 10:
+              _context.next = 12;
               return checkAccountLogin({
                 accountId: accountId
               });
-            case 11:
-              accountSessionId = _context.sent;
             case 12:
+              accountSessionId = _context.sent;
+            case 13:
               if (!catalogCodex) {
-                _context.next = 18;
+                _context.next = 21;
                 break;
               }
-              _context.next = 15;
+              _context.next = 16;
               return loadCatalogInfo({
                 catalogCodex: catalogCodex,
                 accountSessionId: accountSessionId,
                 accountId: accountId,
                 language: i18n.language || 'en'
               });
-            case 15:
+            case 16:
               catalogInfoData = _context.sent;
+              {
+                _context.next = 19;
+                break;
+              }
+            case 19:
+              setData(catalogInfoData === null || catalogInfoData === void 0 ? void 0 : catalogInfoData[0]);
+
+              //if there is no relevant catalog information, as a normal seller continue directly to the planner
+              //the productcreator stays regardles on the page, because currently it is only possible to create productvariants from this page
               if ((catalogInfoData === null || catalogInfoData === void 0 || (_catalogInfoData$ = catalogInfoData[0]) === null || _catalogInfoData$ === void 0 || (_catalogInfoData$ = _catalogInfoData$.images) === null || _catalogInfoData$ === void 0 ? void 0 : _catalogInfoData$.length) == 0 && !userHasPermission('productcreator')) {
                 if (catalogInfoData !== null && catalogInfoData !== void 0 && catalogInfoData[0].hasPlanner) {
                   onOpenPlanner(accountSessionId);
                 }
               }
-              setData(catalogInfoData === null || catalogInfoData === void 0 ? void 0 : catalogInfoData[0]);
-            case 18:
+            case 21:
               LOG$3.successTransaction('ON_OPEN_MODULE_INFO', {
-                cat: data === null || data === void 0 ? void 0 : data.accountGuid,
+                cat: catalogCodex,
                 accountId: accountId
               });
               setLoading(false);
               toggleLoading('seller-model-info', false, false);
-            case 21:
+            case 24:
             case "end":
               return _context.stop();
           }
@@ -8077,121 +7491,137 @@ function Info(_ref) {
     }();
     load();
   }, [accountId, catalogCodex, i18n.language, sessionGuid]);
-  var navButtons = [{
-    onClick: function onClick() {
-      return onOpenArticles();
-    },
-    key: 'diva-seller-info-openarticlesbtn',
-    text: 'info.buttons.articles',
-    iconClass: articleList
-  }];
-  if ((!!currentAccountLoginId || organization.parentType === 'SUPPLIER') && !!catalogCodex && data !== null && data !== void 0 && data.hasPlanner) {
-    navButtons.push({
-      onClick: function onClick() {
-        return onOpenPlanner();
-      },
-      key: 'diva-seller-info-openplannerbtn',
-      text: 'info.buttons.configurator',
-      iconClass: emptyPlanning
-    });
-  }
-  if ((userHasPermission('productcreator') && !(configurationData !== null && configurationData !== void 0 && configurationData.hideProductCreator) || returnTo === 'toAssortmentManager' || returnTo === 'toProductsGallery') && !originProductId) {
-    navButtons.push({
-      onClick: function onClick() {
-        return onOpenPlanner(undefined, 'FAVORITS_OPEN_SELLER_PRODUCTCREATOR');
-      },
-      text: 'info.buttons.varinats',
-      key: 'diva-seller-info-openfavplannerbtn',
-      iconClass: favPlanning
-    });
-  }
-  if (userHasPermission('setplanner') && !(configurationData !== null && configurationData !== void 0 && configurationData.hideSetPlanner)) {
-    navButtons.push({
-      onClick: function onClick() {
-        return onOpenPlanner(undefined, 'SETPLANNER_OPEN_SELLER_BASKET');
-      },
-      text: 'info.buttons.SetPlanner',
-      key: 'diva-seller-info-opensetplannerbtn',
-      iconClass: setPlanning
-    });
-  }
-  if (userHasPermission('analytics') && configurationData !== null && configurationData !== void 0 && configurationData.analyticsConfig) {
-    navButtons.push({
-      onClick: function onClick() {
-        return onOpenAnalytics();
-      },
-      text: 'info.buttons.analytics',
-      key: 'diva-seller-info-open-analytics',
-      iconClass: analyticsIcon
-    });
-  }
-  var closePdp = function closePdp() {
-    openComponent({
-      type: 'SELLER',
-      parameters: _objectSpread$j(_objectSpread$j({
-        module: 'Info'
-      }, accountId ? {
-        accountId: accountId
-      } : {}), {}, {
-        catalogCodex: catalogCodex
-      }),
-      breadcrumb: true
-    });
-  };
-  var onProductClick = function onProductClick(product) {
+  var onOpenPlanner = useCallback(function (accountLoginId, returnToPlanner) {
+    if (accountLoginId || currentAccountLoginId || organization.parentType === 'SUPPLIER') {
+      var plannerReturn = returnToPlanner || (configurationData === null || configurationData === void 0 ? void 0 : configurationData.defaultWebPlannerReturnTo) || 'OPEN_SELLER_BASKET';
+      if (checkDoReturnToProductCreator(plannerReturn, returnTo)) {
+        plannerReturn = 'OPEN_SELLER_PRODUCTCREATOR';
+      }
+      openPlanner({
+        catalogCodex: catalogCodex,
+        accountId: accountId,
+        accountSessionGuid: accountLoginId || currentAccountLoginId,
+        forceReload: '1',
+        basketData: returnToPlanner === 'SETPLANNER_OPEN_SELLER_BASKET' ? currentBasketState === null || currentBasketState === void 0 ? void 0 : currentBasketState.basket : undefined,
+        returnTo: plannerReturn
+      });
+    } else {
+      LOG$3.error(new DivaError('Missing account login ID', {
+        code: 'SELLER_0001'
+      }));
+    }
+  }, [currentAccountLoginId, organization.parentType, accountId, catalogCodex, configurationData === null || configurationData === void 0 ? void 0 : configurationData.defaultWebPlannerReturnTo, currentBasketState === null || currentBasketState === void 0 ? void 0 : currentBasketState.basket]);
+  var onOpenArticles = useCallback(function () {
+    if ((accountId || organization.parentType === 'SUPPLIER') && catalogCodex) {
+      openComponent({
+        type: 'SELLER',
+        parameters: {
+          module: 'Articles',
+          accountId: accountId,
+          catalogCodex: catalogCodex
+        }
+      });
+    } else {
+      LOG$3.error(new DivaError('Missing account ID or catalog', {
+        code: 'SELLER_0001'
+      }));
+    }
+  }, [accountId, catalogCodex, organization.parentType]);
+  var onOpenPlannerWithProduct = useCallback(function (product) {
     openPlanner({
       accountSessionGuid: currentAccountLoginId,
       forceReload: '1',
       productId: product._id,
       returnTo: (configurationData === null || configurationData === void 0 ? void 0 : configurationData.defaultWebPlannerReturnTo) || 'OPEN_SELLER_BASKET'
     });
-  };
-  var escFunction = useCallback(function (e) {
-    if (!sellerIsVisible) return;
-    if (e.key === 'ESC' || e.key === 'Escape') {
-      if (!currentProductId) return;
-      closePdp();
+  }, [currentAccountLoginId, openPlanner, configurationData === null || configurationData === void 0 ? void 0 : configurationData.defaultWebPlannerReturnTo]);
+  var onNavigateBack = useCallback(function () {
+    if ((accountId || organization.parentType === 'SUPPLIER') && catalogCodex) {
+      openComponent({
+        type: 'SELLER',
+        parameters: {
+          module: 'Catalogs',
+          collectionId: (configurationData === null || configurationData === void 0 ? void 0 : configurationData.defaultModule) === 'Catalogs' ? undefined : accountId
+        }
+      });
+    } else {
+      LOG$3.error(new DivaError('Missing account ID or catalog', {
+        code: 'SELLER_0001'
+      }));
     }
-  }, []);
-  useEffect(function () {
-    document.addEventListener('keydown', escFunction, false);
-    return function () {
-      document.removeEventListener('keydown', escFunction, false);
+  }, [accountId, catalogCodex, organization.parentType, configurationData === null || configurationData === void 0 ? void 0 : configurationData.defaultModule]);
+  var navButtons = useMemo(function () {
+    var buttons = {
+      articles: function articles() {
+        return onOpenArticles();
+      },
+      navigateBack: function navigateBack() {
+        return onNavigateBack();
+      }
     };
-  }, []);
+    if ((!!currentAccountLoginId || organization.parentType === 'SUPPLIER') && !!catalogCodex && catalogData !== null && catalogData !== void 0 && catalogData.hasPlanner) {
+      buttons.planner = function () {
+        return onOpenPlanner(currentAccountLoginId);
+      };
+    }
+    if ((userHasPermission('productcreator') && !(configurationData !== null && configurationData !== void 0 && configurationData.hideProductCreator) || returnTo === 'toAssortmentManager' || returnTo === 'toProductsGallery') && !originProductId) {
+      buttons.variantsPlanner = function () {
+        return onOpenPlanner(undefined, 'FAVORITS_OPEN_SELLER_PRODUCTCREATOR');
+      };
+    }
+    return buttons;
+  }, [catalogData, configurationData, catalogCodex, onNavigateBack, openPlanner, onOpenArticles]);
+  return {
+    loading: loading,
+    catalogData: catalogData,
+    hideImage: configurationData === null || configurationData === void 0 ? void 0 : configurationData.hideCatalogImagesInModelInfo,
+    hideProducts: configurationData === null || configurationData === void 0 ? void 0 : configurationData.hideProductsInModelInfo,
+    navButtons: navButtons,
+    onOpenPlannerWithProduct: onOpenPlannerWithProduct
+  };
+}
+function checkDoReturnToProductCreator(plannerReturn, returnTo) {
+  return ['toProductsGallery', 'toAssortmentManager'].includes(returnTo !== null && returnTo !== void 0 ? returnTo : '') && !plannerReturn.includes('PRODUCTCREATOR');
+}
+
+function ownKeys$j(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$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function Info(props) {
+  var _useModelInfoPage = useModelInfoPage(props),
+    loading = _useModelInfoPage.loading,
+    catalogData = _useModelInfoPage.catalogData,
+    hideImage = _useModelInfoPage.hideImage,
+    hideProducts = _useModelInfoPage.hideProducts,
+    navButtons = _useModelInfoPage.navButtons,
+    onOpenPlannerWithProduct = _useModelInfoPage.onOpenPlannerWithProduct;
+  if (loading || !catalogData) {
+    return /*#__PURE__*/jsx("div", {});
+  }
   return /*#__PURE__*/jsx(Fragment, {
-    children: !loading && !!data && !!catalogCodex && /*#__PURE__*/jsx(Fragment, {
-      children: /*#__PURE__*/jsxs("div", {
-        className: layout$1,
-        ref: scroller,
+    children: !loading && /*#__PURE__*/jsxs("div", {
+      className: layout$1,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: content,
         children: [/*#__PURE__*/jsx(Description$1, {
-          data: data,
-          className: info$1,
+          data: catalogData,
+          className: leftSide,
           text: "info.title"
         }), /*#__PURE__*/jsxs("div", {
-          className: classNames(rightSide$1, !showProducts ? productsHidden : undefined),
-          children: [/*#__PURE__*/jsxs("div", {
-            className: scrollerContainer,
-            children: [showImages && /*#__PURE__*/jsx(CatalogImages, {
-              showProducts: showProducts,
-              data: data,
-              className: catalogImages
-            }, showProducts ? '0' : '1'), !(configurationData !== null && configurationData !== void 0 && configurationData.hideProductsInModelInfo) && /*#__PURE__*/jsx(ProductsOrArticles, {
-              hidden: !showProducts,
-              productState: productState,
-              className: products,
-              catalogCodex: catalogCodex,
-              onProductClick: onProductClick,
-              onArticleClick: onArticleClick,
-              accountId: accountId
-            })]
-          }), /*#__PURE__*/jsx(NavBar, {
-            className: footer,
-            navigateBack: navigateBack,
-            buttons: navButtons
+          className: rightSide$1,
+          children: [!hideImage && /*#__PURE__*/jsx(CatalogImages, {
+            data: catalogData,
+            className: catalogImages
+          }), /*#__PURE__*/jsx(ProductsOrArticles, {
+            catalogCodex: catalogData.codex,
+            onProductClick: onOpenPlannerWithProduct,
+            hideProducts: hideProducts
           })]
         })]
-      })
+      }), /*#__PURE__*/jsx("div", {
+        className: footer,
+        id: "diva-seller-info-navbar",
+        children: /*#__PURE__*/jsx(NavBar, _objectSpread$j({}, navButtons))
+      })]
     })
   });
 }
@@ -13119,7 +12549,7 @@ function Description (_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   return /*#__PURE__*/jsxs("div", _objectSpread$2(_objectSpread$2({}, props), {}, {
-    className: classNames(wrapper, props.className),
+    className: classnames(wrapper, props.className),
     children: [/*#__PURE__*/jsx("div", {
       className: title$1,
       children: t(text)
@@ -13383,8 +12813,6 @@ function ModuleComponent(_ref) {
     activeBasket = _ref.activeBasket,
     activeAccountId = _ref.activeAccountId,
     checkBasket = _ref.checkBasket;
-  var _useSellerState2 = useSellerState(),
-    configurationData = _useSellerState2.state.configurationData;
   switch (activeModule) {
     case 'Collections':
       return /*#__PURE__*/jsx(Collections, {});
@@ -13393,13 +12821,7 @@ function ModuleComponent(_ref) {
         collectionId: activeCollectionId
       });
     case 'Info':
-      if (configurationData !== null && configurationData !== void 0 && configurationData.showModelInfo) {
-        return /*#__PURE__*/jsx(Info, {
-          catalogCodex: activeCatalogCodex,
-          accountId: activeAccountId
-        });
-      }
-      return /*#__PURE__*/jsx(Info$1, {
+      return /*#__PURE__*/jsx(Info, {
         catalogCodex: activeCatalogCodex,
         accountId: activeAccountId
       });