@crystaldesign/diva-backoffice 25.1.0-beta.2 → 25.1.0-beta.4

package/build/esm/index.js

@@ -75,7 +75,7 @@ import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
 import JSONEditor from 'jsoneditor';
 import 'jsoneditor/dist/jsoneditor.css';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { MinusCircleOutlined, PlusOutlined, DownloadOutlined as DownloadOutlined$1, PlusSquareOutlined, DeleteOutlined as DeleteOutlined$1, FullscreenOutlined, FileUnknownOutlined, CloseOutlined as CloseOutlined$1, PlusCircleOutlined as PlusCircleOutlined$1, HomeOutlined as HomeOutlined$1, InboxOutlined, PushpinOutlined, PushpinFilled, ReloadOutlined as ReloadOutlined$1 } from '@ant-design/icons';
+import { MinusCircleOutlined, PlusOutlined, DownloadOutlined as DownloadOutlined$1, PlusSquareOutlined, DeleteOutlined as DeleteOutlined$1, FullscreenOutlined, FileUnknownOutlined, CloseOutlined as CloseOutlined$1, PlusCircleOutlined as PlusCircleOutlined$1, HomeOutlined as HomeOutlined$1, InboxOutlined, UploadOutlined as UploadOutlined$1, ReloadOutlined as ReloadOutlined$1 } from '@ant-design/icons';
 import classnames from 'classnames';
 import RTFEditor from '@crystaldesign/rtf-editor';
 import debounce from 'lodash/debounce';
@@ -119,17 +119,19 @@ import QuestionOutlined from '@ant-design/icons/QuestionOutlined';
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import Descriptions$1 from 'antd/es/descriptions';
-import { Spreadsheet as Spreadsheet$2 } from '@crystaldesign/spreadsheet';
+import { Spreadsheet as Spreadsheet$1 } from '@crystaldesign/spreadsheet';
 import EditOutlined from '@ant-design/icons/lib/icons/EditOutlined';
 import Checkbox$1 from 'antd/es/checkbox/Checkbox';
+import Modal$3 from 'antd/es/modal';
 import Switch$1 from 'antd/es/switch';
 import Layout$1 from 'antd/es/layout';
 import Menu from 'antd/es/menu';
-import { DoubleLeftOutlined } from '@ant-design/icons/lib/icons';
+import { DoubleLeftOutlined, PushpinFilled } from '@ant-design/icons/lib/icons';
 import { WebPlannerReact } from '@crystaldesign/diva-web-planner-react';
-import Select$2 from 'react-select';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { ContentItemComponent } from '@crystaldesign/content-item';
+import PushpinOutlined from '@ant-design/icons/lib/icons/PushpinOutlined';
+import Spin$1 from 'antd/es/spin';
 
 (function() {
     const env = {"STAGE":"production"};
@@ -146,8 +148,8 @@ import { ContentItemComponent } from '@crystaldesign/content-item';
 function _createForOfIteratorHelper$m(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$m(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$m(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$m(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$m(r, a) : void 0; } }
 function _arrayLikeToArray$m(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$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$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$e = getLogger('Backoffice', 'ApplyMapping');
 function applyMapping (_ref) {
   var mappable = _ref.mappable,
@@ -168,10 +170,10 @@ function applyMapping (_ref) {
         var newValue = {};
         newValue[newKey] = valueToAdd;
         if ((startValue === null || startValue === void 0 ? void 0 : startValue[newKey]) != undefined) {
-          if (_typeof(startValue[newKey]) == 'object') startValue[newKey] = _objectSpread$P(_objectSpread$P({}, startValue[newKey]), valueToAdd);else startValue[newKey] = type == 'addToSourceValue' ? startValue[newKey] + valueToAdd : valueToAdd;
+          if (_typeof(startValue[newKey]) == 'object') startValue[newKey] = _objectSpread$O(_objectSpread$O({}, startValue[newKey]), valueToAdd);else startValue[newKey] = type == 'addToSourceValue' ? startValue[newKey] + valueToAdd : valueToAdd;
           return startValue;
         }
-        if (newIdx == 1) return _objectSpread$P(_objectSpread$P({}, startValue), newValue);
+        if (newIdx == 1) return _objectSpread$O(_objectSpread$O({}, startValue), newValue);
         return _getTarget(idx + 1, keys, startValue, newValue);
       };
       returnValue = _getTarget(0, key.split('.'), returnValue, value);
@@ -472,8 +474,8 @@ function getLeafColumns(columns) {
   });
 }
 
-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 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; }
 var LOG$d = getLogger('Backoffice', 'ApiHandler');
 var jp = require('jsonpath');
 var _default$d = /*#__PURE__*/function () {
@@ -652,7 +654,7 @@ var _default$d = /*#__PURE__*/function () {
               _context2.next = 20;
               return fetch(finalUrl, {
                 method: this._updateMethod,
-                headers: _objectSpread$O(_objectSpread$O({}, jwt ? {
+                headers: _objectSpread$N(_objectSpread$N({}, jwt ? {
                   Authorization: 'Bearer ' + jwt
                 } : {}), {}, {
                   'Content-Type': 'application/json'
@@ -745,7 +747,7 @@ var _default$d = /*#__PURE__*/function () {
                   rootStore: this._rootStore,
                   fallBackToParams: true
                 });
-                if (data) createData = _objectSpread$O({}, data);
+                if (data) createData = _objectSpread$N({}, data);
               } else if (data !== undefined) {
                 createData = applyMapping({
                   mappable: data,
@@ -1007,7 +1009,7 @@ var _default$d = /*#__PURE__*/function () {
               throw new Error('Read List endpoint is missing in configuration.');
             case 2:
               jwt = (_this$_rootStore5 = this._rootStore) === null || _this$_rootStore5 === void 0 ? void 0 : _this$_rootStore5.dataStore.jwt;
-              url = filterServerSide ? parseServersideFilters(_objectSpread$O(_objectSpread$O({}, filterServerSide), {}, {
+              url = filterServerSide ? parseServersideFilters(_objectSpread$N(_objectSpread$N({}, filterServerSide), {}, {
                 columns: this._filterFields ? filterServerSide.columns : undefined,
                 baseUrl: this._readListUrl,
                 prefilter: prefilter
@@ -1027,7 +1029,7 @@ var _default$d = /*#__PURE__*/function () {
               });
             case 6:
               response = _context8.sent;
-              return _context8.abrupt("return", _objectSpread$O(_objectSpread$O({}, response), {}, {
+              return _context8.abrupt("return", _objectSpread$N(_objectSpread$N({}, response), {}, {
                 data: response.data.map(function (d) {
                   return _this2.aplyJsonPath(d, _this2._readJsonPath);
                 })
@@ -1051,7 +1053,7 @@ var _default$d = /*#__PURE__*/function () {
         throw new Error('Read List endpoint is missing in configuration.');
       }
       (_this$_rootStore6 = this._rootStore) === null || _this$_rootStore6 === void 0 ? void 0 : _this$_rootStore6.dataStore.jwt;
-      var url = filterServerSide ? parseServersideFilters(_objectSpread$O(_objectSpread$O({}, filterServerSide), {}, {
+      var url = filterServerSide ? parseServersideFilters(_objectSpread$N(_objectSpread$N({}, filterServerSide), {}, {
         columns: this._filterFields ? filterServerSide.columns : undefined,
         baseUrl: this._readListUrl,
         prefilter: prefilter
@@ -1258,8 +1260,8 @@ var _default$c = /*#__PURE__*/function (_ApiHandler) {
   }]);
 }(_default$d);
 
-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 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 _callSuper$5(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$5() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct$5() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$5 = function _isNativeReflectConstruct() { return !!t; })(); }
 var _default$b = /*#__PURE__*/function (_ApiHandler) {
@@ -1358,7 +1360,7 @@ var _default$b = /*#__PURE__*/function (_ApiHandler) {
               _context2.next = 5;
               return fetch(this._createUrl + '?ref=true', {
                 method: this._createMethod,
-                headers: _objectSpread$N({}, jwt ? {
+                headers: _objectSpread$M({}, jwt ? {
                   Authorization: 'Bearer ' + jwt
                 } : {}),
                 body: data
@@ -1736,8 +1738,8 @@ var _default$8 = /*#__PURE__*/function (_ApiHandler) {
   }]);
 }(_default$d);
 
-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 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 _default$7 = /*#__PURE__*/function () {
   function _default(root) {
     _classCallCheck(this, _default);
@@ -1773,7 +1775,7 @@ var _default$7 = /*#__PURE__*/function () {
           var _i$permission;
           return !i.permission || _this.root.actions.userHasPermission((_i$permission = i.permission) === null || _i$permission === void 0 ? void 0 : _i$permission.toLocaleLowerCase());
         });
-        config = _objectSpread$M(_objectSpread$M({}, config), {}, {
+        config = _objectSpread$L(_objectSpread$L({}, config), {}, {
           items: filteredItems
         });
       }
@@ -7828,6 +7830,22 @@ function loadConfiguration(t, root, config, lang) {
         hidden: function hidden(data) {
           return (data === null || data === void 0 ? void 0 : data.parentType) === 'SUPPLIER' && (data === null || data === void 0 ? void 0 : data.type) === undefined;
         }
+      }, {
+        name: ['settings', 'enable3DExport'],
+        label: t('backoffice.form.organizationdetails.items.settings.enable3DExport'),
+        type: 'radio',
+        optionType: 'button',
+        options: [{
+          label: t('backoffice.form.organizationdetails.items.vererbt'),
+          value: undefined
+        }, {
+          label: t('backoffice.form.organizationdetails.items.ja'),
+          value: true
+        }, {
+          label: t('backoffice.form.organizationdetails.items.nein'),
+          value: false
+        }],
+        permission: 'backoffice_sys_admin_organizations'
       }, {
         name: ['settings', 'enableAR'],
         label: t('backoffice.form.organizationdetails.items.settings.enableAR'),
@@ -8306,7 +8324,9 @@ function loadConfiguration(t, root, config, lang) {
       tools: [{
         id: 'WYSIWYG_ContentItem',
         name: 'ContentItem Preview',
-        type: 'ContentItem'
+        type: 'ContentItem',
+        defaultPinned: true,
+        startWidth: 450
       }],
       itemsByData: function itemsByData(data, apiConfig) {
         var result = [{
@@ -8791,7 +8811,9 @@ function loadConfiguration(t, root, config, lang) {
       tools: [{
         id: 'WYSIWYG_ContentItem',
         name: 'ContentItem Preview',
-        type: 'ContentItem'
+        type: 'ContentItem',
+        defaultPinned: true,
+        startWidth: 450
       }]
     },
     FormApplicationTranslationsEdit: {
@@ -12933,8 +12955,187 @@ function getIcon(icon) {
   return undefined;
 }
 
-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 DEFAULT_WIDTH = 500;
+var ToolBarStore = /*#__PURE__*/function () {
+  function ToolBarStore(defaultLanguage) {
+    _classCallCheck(this, ToolBarStore);
+    this.defaultLanguage = defaultLanguage;
+    _defineProperty(this, "_tools", []);
+    _defineProperty(this, "_hidden", true);
+    _defineProperty(this, "_pinned", false);
+    _defineProperty(this, "_openedToolId", void 0);
+    _defineProperty(this, "_loadingTools", new Map());
+    _defineProperty(this, "_currentLanguage", void 0);
+    _defineProperty(this, "_width", 0);
+    _defineProperty(this, "_toolbarElement", null);
+    this._currentLanguage = defaultLanguage;
+    makeAutoObservable(this, {
+      _toolbarElement: observable.ref
+    });
+  }
+  return _createClass(ToolBarStore, [{
+    key: "tools",
+    get: function get() {
+      return this._tools;
+    },
+    set: function set(tools) {
+      var _this = this,
+        _tools$,
+        _tools$0$defaultPinne,
+        _tools$2,
+        _tools$3,
+        _tools$0$startWidth,
+        _tools$4;
+      this._tools = tools;
+      if (tools.find(function (t) {
+        return t.id === _this._openedToolId;
+      })) {
+        //if current tool is in the new list, don't change the current state
+        return;
+      }
+      this._openedToolId = (_tools$ = tools[0]) === null || _tools$ === void 0 ? void 0 : _tools$.id;
+      this._pinned = (_tools$0$defaultPinne = (_tools$2 = tools[0]) === null || _tools$2 === void 0 ? void 0 : _tools$2.defaultPinned) !== null && _tools$0$defaultPinne !== void 0 ? _tools$0$defaultPinne : this._pinned;
+      this._hidden = ((_tools$3 = tools[0]) === null || _tools$3 === void 0 ? void 0 : _tools$3.defaultOpen) !== undefined ? !tools[0].defaultOpen : this._hidden;
+      this._width = (_tools$0$startWidth = (_tools$4 = tools[0]) === null || _tools$4 === void 0 ? void 0 : _tools$4.startWidth) !== null && _tools$0$startWidth !== void 0 ? _tools$0$startWidth : this._width;
+    }
+  }, {
+    key: "hidden",
+    get: function get() {
+      return this._hidden;
+    },
+    set: function set(hidden) {
+      this._hidden = hidden;
+      if (!hidden && this._width === 0) {
+        var _this$currentOpenTool, _this$currentOpenTool2;
+        this._width = (_this$currentOpenTool = (_this$currentOpenTool2 = this.currentOpenTool) === null || _this$currentOpenTool2 === void 0 ? void 0 : _this$currentOpenTool2.startWidth) !== null && _this$currentOpenTool !== void 0 ? _this$currentOpenTool : DEFAULT_WIDTH;
+      }
+    }
+  }, {
+    key: "pinned",
+    get: function get() {
+      return this._pinned;
+    },
+    set: function set(pinned) {
+      this._pinned = pinned;
+    }
+  }, {
+    key: "currentLanguage",
+    get: function get() {
+      return this._currentLanguage;
+    },
+    set: function set(language) {
+      this._currentLanguage = language;
+    }
+  }, {
+    key: "currentOpenTool",
+    get: function get() {
+      var _this2 = this;
+      return this._tools.find(function (t) {
+        return t.id === _this2._openedToolId;
+      });
+    }
+  }, {
+    key: "width",
+    get: function get() {
+      return this._hidden ? 0 : this._width;
+    },
+    set: function set(width) {
+      if (width > this._width) {
+        this._hidden = false;
+      }
+      this._width = width;
+      if (width < 50) {
+        this._width = 0;
+        this._hidden = true;
+      }
+    }
+  }, {
+    key: "toolbarElement",
+    get: function get() {
+      return this._toolbarElement;
+    },
+    set: function set(element) {
+      this._toolbarElement = element;
+    }
+  }, {
+    key: "openTool",
+    value: function openTool(toolId) {
+      this._openedToolId = toolId;
+      this._currentLanguage = this.defaultLanguage;
+      var tool = this._tools.find(function (t) {
+        return t.id === toolId;
+      });
+      if (tool) {
+        var _tool$startWidth;
+        this._width = Math.max((_tool$startWidth = tool.startWidth) !== null && _tool$startWidth !== void 0 ? _tool$startWidth : DEFAULT_WIDTH, this._width);
+      }
+    }
+  }, {
+    key: "isLoading",
+    value: function isLoading(toolId) {
+      var loading = this._loadingTools.get(toolId);
+      return loading !== undefined && loading.length > 0;
+    }
+  }, {
+    key: "toggleLoading",
+    value: function toggleLoading(toolId, subId, toggle) {
+      // Get current loading state for tool
+      var loadingState = this._loadingTools.get(toolId);
+      if (!subId) {
+        // Handle tool-level loading
+        if (toggle === undefined) {
+          // Toggle loading state
+          if (loadingState) {
+            this._loadingTools["delete"](toolId);
+          } else {
+            this._loadingTools.set(toolId, []);
+          }
+        } else {
+          // Set explicit loading state
+          if (toggle) {
+            this._loadingTools.set(toolId, []);
+          } else {
+            this._loadingTools["delete"](toolId);
+          }
+        }
+      } else {
+        loadingState = loadingState || [];
+        // Handle subId-level loading
+        if (toggle === undefined) {
+          // Toggle subId in loading state
+          var subIdIndex = loadingState.indexOf(subId);
+          if (subIdIndex > -1) {
+            loadingState.splice(subIdIndex, 1);
+          } else {
+            loadingState.push(subId);
+          }
+        } else {
+          // Set explicit subId loading state
+          if (toggle) {
+            if (!loadingState.includes(subId)) {
+              loadingState.push(subId);
+            }
+          } else {
+            var _subIdIndex = loadingState.indexOf(subId);
+            if (_subIdIndex > -1) {
+              loadingState.splice(_subIdIndex, 1);
+            }
+          }
+        }
+
+        // If no subIds are loading, remove the tool loading state entirely
+        if (loadingState.length === 0) {
+          this._loadingTools["delete"](toolId);
+        } else {
+          this._loadingTools.set(toolId, loadingState);
+        }
+      }
+    }
+  }]);
+}();
+
+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; }
 var _default$6 = /*#__PURE__*/function () {
   function _default(root) {
     _classCallCheck(this, _default);
@@ -12945,20 +13146,19 @@ var _default$6 = /*#__PURE__*/function () {
     _defineProperty(this, "_menuElement1", void 0);
     _defineProperty(this, "_menuElement2", void 0);
     _defineProperty(this, "_additionalMenuElements", []);
-    _defineProperty(this, "_tools", []);
-    _defineProperty(this, "_toolsLanguage", 'de');
-    _defineProperty(this, "_openedToolId", undefined);
-    _defineProperty(this, "_hideTools", true);
-    _defineProperty(this, "_toolLoading", new Map());
-    _defineProperty(this, "_toolPinned", false);
+    _defineProperty(this, "rightToolBar", void 0);
+    _defineProperty(this, "bottomToolBar", void 0);
     makeAutoObservable(this, {
-      root: false
+      root: false,
+      rightToolBar: false,
+      bottomToolBar: false
     });
     var theme = localStorage.getItem('theme');
     if (theme) {
       this._theme = theme;
     }
-    this._toolsLanguage = root.i18n.language;
+    this.rightToolBar = new ToolBarStore(this.root.i18n.language);
+    this.bottomToolBar = new ToolBarStore(this.root.i18n.language);
   }
   return _createClass(_default, [{
     key: "initMenu",
@@ -13003,60 +13203,6 @@ var _default$6 = /*#__PURE__*/function () {
     get: function get() {
       return this._menuElement2;
     }
-  }, {
-    key: "tools",
-    get: function get() {
-      return this._tools;
-    },
-    set: function set(tools) {
-      this._tools = tools;
-    }
-  }, {
-    key: "hideTools",
-    get: function get() {
-      return this._hideTools;
-    },
-    set: function set(hidden) {
-      this._hideTools = hidden;
-    }
-  }, {
-    key: "openedToolId",
-    get: function get() {
-      return this._openedToolId;
-    },
-    set: function set(id) {
-      this._openedToolId = id;
-    }
-  }, {
-    key: "toolPinned",
-    get: function get() {
-      return this._toolPinned;
-    },
-    set: function set(val) {
-      this._toolPinned = val;
-    }
-  }, {
-    key: "toolsLanguage",
-    get: function get() {
-      return this._toolsLanguage;
-    },
-    set: function set(lang) {
-      this._toolsLanguage = lang;
-    }
-  }, {
-    key: "isToolLoading",
-    get: function get() {
-      return this._toolLoading.size != 0;
-    }
-  }, {
-    key: "toggleToolLoading",
-    value: function toggleToolLoading(id, hidden, toggle) {
-      if (this._toolLoading.has(id) && toggle !== true) {
-        this._toolLoading["delete"](id);
-      } else if (!this._toolLoading.has(id) && toggle !== false) {
-        this._toolLoading.set(id, hidden == undefined ? false : hidden);
-      }
-    }
   }, {
     key: "updateAdditionalElement",
     value: function updateAdditionalElement(key, items, selected) {
@@ -13066,7 +13212,7 @@ var _default$6 = /*#__PURE__*/function () {
       if (index >= 0) {
         this._additionalMenuElements[index] = {
           key: key,
-          element: _objectSpread$L(_objectSpread$L({}, this._additionalMenuElements[index].element), {}, {
+          element: _objectSpread$K(_objectSpread$K({}, this._additionalMenuElements[index].element), {}, {
             items: items,
             selected: selected
           })
@@ -13117,7 +13263,7 @@ var _default$6 = /*#__PURE__*/function () {
         var path = this.getPath(element.menu, this._selectedMenuKeys, this.root.navigationState.searchParams);
         this.root.navigate('/' + path);
       }
-      this._menuElement1 = _objectSpread$L(_objectSpread$L({}, this.menuElement1), {}, {
+      this._menuElement1 = _objectSpread$K(_objectSpread$K({}, this.menuElement1), {}, {
         selected: this._selectedMenuKeys[0]
       });
       var menu2 = (_this$_menu$find = this._menu.find(function (element) {
@@ -13361,7 +13507,7 @@ var _default$6 = /*#__PURE__*/function () {
       return items.filter(function (item) {
         return !item.permission || hasPermission(item.permission.toLocaleLowerCase());
       }).map(function (item) {
-        return _objectSpread$L(_objectSpread$L({}, item), {}, {
+        return _objectSpread$K(_objectSpread$K({}, item), {}, {
           items: item.items ? _this4.filterMenuByPermission(hasPermission, item.items) : undefined,
           subMenu: item.subMenu ? _this4.filterMenuByPermission(hasPermission, item.subMenu) : undefined
         });
@@ -15100,8 +15246,8 @@ var MediaItem = /*#__PURE__*/function () {
   }]);
 }();
 
-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 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 _createForOfIteratorHelper$j(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$j(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$j(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$j(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$j(r, a) : void 0; } }
 function _arrayLikeToArray$j(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; }
@@ -15223,7 +15369,7 @@ function useFormData (_ref) {
         multipleEditingData = inboundData;
       }
       return {
-        loadedData: _onLoadFields(_objectSpread$K({}, dt)),
+        loadedData: _onLoadFields(_objectSpread$J({}, dt)),
         multipleEditingData: multipleEditingData
       };
     }, [inboundData, selectedItemsIndex]),
@@ -15260,7 +15406,7 @@ function useFormData (_ref) {
     setFieldErrors = _useState20[1];
   useEffect(function () {
     var _loadedData$_id2;
-    setState(_objectSpread$K(_objectSpread$K({}, state), {}, {
+    setState(_objectSpread$J(_objectSpread$J({}, state), {}, {
       data: loadedData,
       origData: JSON.parse(JSON.stringify(inboundData !== null && inboundData !== void 0 ? inboundData : {})),
       update: !!((_loadedData$_id2 = loadedData === null || loadedData === void 0 ? void 0 : loadedData._id) !== null && _loadedData$_id2 !== void 0 ? _loadedData$_id2 : loadedData === null || loadedData === void 0 ? void 0 : loadedData.ID),
@@ -15362,7 +15508,7 @@ function useFormData (_ref) {
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            newData = merge(_objectSpread$K({}, state.data), values);
+            newData = merge(_objectSpread$J({}, state.data), values);
             if (!skipApi) {
               _context2.next = 3;
               break;
@@ -15372,7 +15518,7 @@ function useFormData (_ref) {
             root.actions.toggleLoading('saving_form');
             _context2.prev = 4;
             _context2.next = 7;
-            return setDynamicFields(_objectSpread$K({}, state.data), newData);
+            return setDynamicFields(_objectSpread$J({}, state.data), newData);
           case 7:
             newData = _context2.sent;
             _context2.next = 10;
@@ -15387,7 +15533,7 @@ function useFormData (_ref) {
             root.actions.toggleLoading('saving_form');
             throw _context2.t0;
           case 17:
-            setState(_objectSpread$K(_objectSpread$K({}, state), {}, {
+            setState(_objectSpread$J(_objectSpread$J({}, state), {}, {
               loading: true
             }));
             finalData = state.data;
@@ -15440,14 +15586,14 @@ function useFormData (_ref) {
               _context2.next = 47;
               break;
             }
-            setFieldErrors(_objectSpread$K(_objectSpread$K({}, fieldErrors), {}, _defineProperty({}, item.name.toString(), item.onError[errorCode])));
+            setFieldErrors(_objectSpread$J(_objectSpread$J({}, fieldErrors), {}, _defineProperty({}, item.name.toString(), item.onError[errorCode])));
             return _context2.abrupt("return", undefined);
           case 47:
             throw _context2.t1;
           case 48:
             _context2.prev = 48;
             root.actions.toggleLoading('saving_form');
-            setState(_objectSpread$K(_objectSpread$K({}, state), {}, {
+            setState(_objectSpread$J(_objectSpread$J({}, state), {}, {
               data: finalData,
               loading: false
             }));
@@ -15477,7 +15623,7 @@ function useFormData (_ref) {
   }
   var updateHiddenRequiredDisabled = function updateHiddenRequiredDisabled(data, changedFields) {
     if (!(selectedItems !== null && selectedItems !== void 0 && selectedItems.length)) return;
-    var wholeData = Object.assign(_objectSpread$K({}, state.data), _objectSpread$K({}, changedFields !== null && changedFields !== void 0 ? changedFields : data));
+    var wholeData = Object.assign(_objectSpread$J({}, state.data), _objectSpread$J({}, changedFields !== null && changedFields !== void 0 ? changedFields : data));
     var newState = getHiddenRequredDisabled(wholeData, selectedItems);
     if (JSON.stringify(newState) !== JSON.stringify(hiddenRequiredDisabled)) {
       setHiddenRequiredDisabled(newState);
@@ -15490,14 +15636,14 @@ function useFormData (_ref) {
     }
   };
   var onInputChanged = function onInputChanged(id, value, d) {
-    var data = d !== null && d !== void 0 ? d : mergeWith(_objectSpread$K({}, state.data), state.form.getFieldsValue(), mergeCustomizer);
+    var data = d !== null && d !== void 0 ? d : mergeWith(_objectSpread$J({}, state.data), state.form.getFieldsValue(), mergeCustomizer);
     if (id) {
       setFieldInObject(id, data, value);
-      var newFieldErrors = _objectSpread$K({}, fieldErrors);
+      var newFieldErrors = _objectSpread$J({}, fieldErrors);
       delete newFieldErrors[id.toString()];
       setFieldErrors(newFieldErrors);
     }
-    setState(_objectSpread$K(_objectSpread$K({}, state), {}, {
+    setState(_objectSpread$J(_objectSpread$J({}, state), {}, {
       data: data
     }));
     return data;
@@ -15529,12 +15675,12 @@ function useFormData (_ref) {
       var _value$value;
       if (((_value$value = value === null || value === void 0 ? void 0 : value.value) !== null && _value$value !== void 0 ? _value$value : value) === val) {
         if (configuration.itemSelectorReset) {
-          setState(_objectSpread$K(_objectSpread$K({}, state), {}, {
+          setState(_objectSpread$J(_objectSpread$J({}, state), {}, {
             data: _defineProperty({}, name, val)
           }));
         } else {
-          setState(_objectSpread$K(_objectSpread$K({}, state), {}, {
-            data: _objectSpread$K(_objectSpread$K({}, state.data), {}, _defineProperty({}, name, val))
+          setState(_objectSpread$J(_objectSpread$J({}, state), {}, {
+            data: _objectSpread$J(_objectSpread$J({}, state.data), {}, _defineProperty({}, name, val))
           }));
         }
         setSelectedItemsIndex(idx);
@@ -15544,12 +15690,12 @@ function useFormData (_ref) {
       var val = _ref6.value;
       if (value === val) {
         if (configuration.itemSelectorReset) {
-          setState(_objectSpread$K(_objectSpread$K({}, state), {}, {
+          setState(_objectSpread$J(_objectSpread$J({}, state), {}, {
             data: _defineProperty({}, name, val)
           }));
         } else {
-          setState(_objectSpread$K(_objectSpread$K({}, state), {}, {
-            data: _objectSpread$K(_objectSpread$K({}, state.data), {}, _defineProperty({}, name, val))
+          setState(_objectSpread$J(_objectSpread$J({}, state), {}, {
+            data: _objectSpread$J(_objectSpread$J({}, state.data), {}, _defineProperty({}, name, val))
           }));
         }
         setSelectedItemsIndex(idx);
@@ -15828,19 +15974,20 @@ function useFormData (_ref) {
     if ((_configuration$tools = configuration.tools) !== null && _configuration$tools !== void 0 && _configuration$tools.length) {
       var tools = [];
       for (var i = 0; i < configuration.tools.length; i++) {
+        var _tool$defaultOpen;
         var tool = configuration.tools[i];
-        tools.push(_objectSpread$K({
+        tools.push(_objectSpread$J(_objectSpread$J({}, tool), {}, {
           parameters: {
             data: state.data
           },
-          startWidth: 500,
-          offsetRight: 1037,
-          defaultOpen: true
-        }, tool));
+          startWidth: tool.startWidth,
+          defaultOpen: (_tool$defaultOpen = tool.defaultOpen) !== null && _tool$defaultOpen !== void 0 ? _tool$defaultOpen : true,
+          defaultPinned: tool.defaultPinned
+        }));
       }
-      root.contentStore.tools = tools;
+      root.contentStore.rightToolBar.tools = tools;
       return function () {
-        root.contentStore.tools = [];
+        root.contentStore.rightToolBar.tools = [];
       };
     }
     return;
@@ -15931,7 +16078,7 @@ function useFormData (_ref) {
     })) return;
     setRemovedMedias([].concat(_toConsumableArray(removedMedias), [media]));
   };
-  return _objectSpread$K(_objectSpread$K({}, state), {}, {
+  return _objectSpread$J(_objectSpread$J({}, state), {}, {
     getIsHidden: getIsHidden,
     setUsedPreset: setUsedPreset,
     configuration: configuration,
@@ -16048,8 +16195,8 @@ var JsonEditor$2 = function JsonEditor(_ref) {
 };
 
 var _excluded$3 = ["key", "name"];
-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 ownKeys$I(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$I(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$I(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$I(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FormList$2 = function FormList(_ref) {
   var _item$initialValue;
   var value = _ref.value,
@@ -16102,7 +16249,7 @@ var FormList$2 = function FormList(_ref) {
                 var aName = [].concat(_toConsumableArray(Array.isArray(absoluteName) ? absoluteName : [absoluteName]), _toConsumableArray(n));
                 var hidden = state.getIsHidden(i, state.data, [].concat(_toConsumableArray(Array.isArray(absoluteName) ? absoluteName : [absoluteName]), [name]));
                 if (hidden) return /*#__PURE__*/jsx(Fragment, {});
-                return /*#__PURE__*/createElement(Form$1.Item, _objectSpread$J(_objectSpread$J({}, restField), {}, {
+                return /*#__PURE__*/createElement(Form$1.Item, _objectSpread$I(_objectSpread$I({}, restField), {}, {
                   id: n.join(),
                   key: n.join(),
                   name: n,
@@ -16114,7 +16261,7 @@ var FormList$2 = function FormList(_ref) {
                   validateStatus: !!state.fieldErrors[n.toString()] ? 'error' : undefined,
                   help: state.fieldErrors[n.toString()],
                   hidden: hidden
-                }), getElement(_objectSpread$J(_objectSpread$J({}, i), {}, {
+                }), getElement(_objectSpread$I(_objectSpread$I({}, i), {}, {
                   name: n
                 }), setCanSave, state, aName, state.onInputChanged, onError, root, form, hidden));
               })
@@ -16347,8 +16494,8 @@ var buttonGroup = "button-group-GYt-T";
 var css_248z$n = ".wrapper-GVe2h {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n}\n\n.button-group-GYt-T {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n  margin: 0 12px;\n}\n";
 styleInject(css_248z$n);
 
-function ownKeys$I(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$I(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$I(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$I(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$H(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$H(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$H(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$H(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SubTitle = function SubTitle(_ref) {
   var _item$orientation, _item$buttonIds;
   var item = _ref.item,
@@ -16357,7 +16504,7 @@ var SubTitle = function SubTitle(_ref) {
     t = _useTranslation.t;
   return /*#__PURE__*/jsx(Divider, {
     orientation: (_item$orientation = item.orientation) !== null && _item$orientation !== void 0 ? _item$orientation : 'left',
-    style: _objectSpread$I({}, item.style),
+    style: _objectSpread$H({}, item.style),
     children: /*#__PURE__*/jsxs("div", {
       className: wrapper$5,
       children: [Array.isArray(item.name) ? t(item.name[0].toString()) : t(item.name), ((_item$buttonIds = item.buttonIds) === null || _item$buttonIds === void 0 ? void 0 : _item$buttonIds.length) && item.buttonIds.map(function (b) {
@@ -16607,8 +16754,8 @@ var css_248z$m = ".wrapper-4xyke {\n  display: flex;\n  flex-direction: column;\
 styleInject(css_248z$m);
 
 var _excluded$2 = ["apiInterface", "selectMapping", "apiMapping", "onChange", "value", "search", "options", "autoSelectFirst", "title"];
-function ownKeys$H(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$H(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$H(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$H(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$G(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$G(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$G(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$G(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SelectWrapper$1 = function SelectWrapper(_ref, ref) {
   var apiInterface = _ref.apiInterface,
     selectMapping = _ref.selectMapping,
@@ -16633,7 +16780,7 @@ var SelectWrapper$1 = function SelectWrapper(_ref, ref) {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     className: classnames(title ? wrapper$4 : undefined),
-    children: [title, /*#__PURE__*/jsx(Select$1, _objectSpread$H(_objectSpread$H({}, selectProps), {}, {
+    children: [title, /*#__PURE__*/jsx(Select$1, _objectSpread$G(_objectSpread$G({}, selectProps), {}, {
       showSearch: search,
       loading: state.loading,
       options: state.options,
@@ -17250,8 +17397,8 @@ var _default = /*#__PURE__*/function (_ApiHandler) {
   }]);
 }(_default$d);
 
-function ownKeys$G(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$G(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$G(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$G(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$F(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$F(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$F(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$F(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 getLogger('Backoffice', 'SelectClientRelationCatalog');
 function useSelectClientRelationCatalog (_ref) {
   var onSelectedCatalog = _ref.onSelectedCatalog,
@@ -17420,7 +17567,7 @@ function useSelectClientRelationCatalog (_ref) {
           case 22:
             supplierData = _context2.sent;
           case 23:
-            onSelectedSupplier === null || onSelectedSupplier === void 0 || onSelectedSupplier(_objectSpread$G(_objectSpread$G({}, _selectedSupplier), {}, {
+            onSelectedSupplier === null || onSelectedSupplier === void 0 || onSelectedSupplier(_objectSpread$F(_objectSpread$F({}, _selectedSupplier), {}, {
               supplierGuid: catalogList === null || catalogList === void 0 || (_catalogList$ = catalogList[0]) === null || _catalogList$ === void 0 ? void 0 : _catalogList$.Subfolder
             }), supplierData);
             if (catalogId && catalogList.find(function (c) {
@@ -17641,8 +17788,8 @@ function SelectClientRelationCatalog (_ref) {
 function _createForOfIteratorHelper$h(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$h(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$h(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$h(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$h(r, a) : void 0; } }
 function _arrayLikeToArray$h(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$F(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$F(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$F(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$F(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$E(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$E(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$E(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$E(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function useSelectData (_ref) {
   var data = _ref.data,
     onChange = _ref.onChange,
@@ -17825,7 +17972,7 @@ function useSelectData (_ref) {
             setFetching(true);
             serverSideParams = {
               filters: selectMapping !== null && selectMapping !== void 0 && selectMapping.searchField ? selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.searchField.reduce(function (filter, field) {
-                return _objectSpread$F(_objectSpread$F({}, filter), value !== undefined ? _defineProperty({}, field.field, [value, field.filter, true]) : {});
+                return _objectSpread$E(_objectSpread$E({}, filter), value !== undefined ? _defineProperty({}, field.field, [value, field.filter, true]) : {});
               }, {}) : {
                 _id: [value, 'contains']
               },
@@ -18117,8 +18264,8 @@ var buttonsWrapper$1 = "buttons-wrapper-7ebR9";
 var css_248z$j = ".wrapper-WStAk {\n  display: flex;\n  flex-direction: column;\n}\n.header-wrapper-gWQuH {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-left: 64px;\n}\n\n.buttons-wrapper-7ebR9 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-grow: 1;\n}\n";
 styleInject(css_248z$j);
 
-function ownKeys$E(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$E(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$E(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$E(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$D(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$D(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LOG$9 = getLogger('Backoffice', 'Translation Form');
 function useTranslationHook (item, state) {
   var root = useStore();
@@ -18251,7 +18398,7 @@ function useTranslationHook (item, state) {
           case 0:
             _context2.next = 2;
             return apiHandler.create({
-              locales: _objectSpread$E({
+              locales: _objectSpread$D({
                 de: {},
                 it: {},
                 fr: {},
@@ -18289,7 +18436,7 @@ function useTranslationHook (item, state) {
   };
   var onChange = function onChange(value) {
     state.onInputChanged();
-    root.contentStore.toolsLanguage = value;
+    root.contentStore.rightToolBar.currentLanguage = value;
     setCurrentLang(value);
   };
   return {
@@ -18300,8 +18447,8 @@ function useTranslationHook (item, state) {
   };
 }
 
-function ownKeys$D(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$D(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$C(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$C(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$C(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Translation = function Translation(_ref) {
   var item = _ref.item,
     state = _ref.state,
@@ -18351,7 +18498,7 @@ var Translation = function Translation(_ref) {
         var hidden = state.getIsHidden(i, data);
         var newAbsoluteName = absoluteName !== '' ? [].concat(_toConsumableArray(Array.isArray(absoluteName) ? absoluteName : [absoluteName]), _toConsumableArray(n)) : n;
         return /*#__PURE__*/jsx(React.Fragment, {
-          children: ['subTitle', 'array'].includes(i.type) ? getElement(_objectSpread$D(_objectSpread$D({}, i), {}, {
+          children: ['subTitle', 'array'].includes(i.type) ? getElement(_objectSpread$C(_objectSpread$C({}, i), {}, {
             name: n
           }), setCanSave, state, newAbsoluteName, state.onInputChanged, onError, root, form, hidden, currentLang) : /*#__PURE__*/jsx(Form$1.Item, {
             id: idx.toString(),
@@ -18364,7 +18511,7 @@ var Translation = function Translation(_ref) {
             validateStatus: !!state.fieldErrors[n.toString()] ? 'error' : undefined,
             help: state.fieldErrors[n.toString()],
             hidden: hidden,
-            children: getElement(_objectSpread$D(_objectSpread$D({}, i), {}, {
+            children: getElement(_objectSpread$C(_objectSpread$C({}, i), {}, {
               name: n
             }), setCanSave, state, newAbsoluteName, state.onInputChanged, onError, root, form, hidden)
           })
@@ -18699,8 +18846,8 @@ var Text$1 = observer(Text);
 function _createForOfIteratorHelper$g(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$g(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$g(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$g(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$g(r, a) : void 0; } }
 function _arrayLikeToArray$g(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$C(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$C(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$C(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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; }
 function getElement(item, setCanSave, state, absoluteName, _onChange, _onError, root, form, hidden, postFixName) {
   var _isReadonly, _state$hiddenRequired;
   if (hidden) return /*#__PURE__*/jsx(Fragment, {});
@@ -18735,7 +18882,7 @@ function getElement(item, setCanSave, state, absoluteName, _onChange, _onError,
         }
       });
     case 'selectSimple':
-      return /*#__PURE__*/jsx(SimpleSelect, _objectSpread$C(_objectSpread$C({}, item), {}, {
+      return /*#__PURE__*/jsx(SimpleSelect, _objectSpread$B(_objectSpread$B({}, item), {}, {
         disabled: disabled,
         onChange: function onChange(value) {
           _onChange(absoluteName, value);
@@ -18939,7 +19086,7 @@ function getElement(item, setCanSave, state, absoluteName, _onChange, _onError,
         value: item.value,
         options: item.options.map(function (o) {
           var _o$disabled;
-          return _objectSpread$C(_objectSpread$C({}, o), {}, {
+          return _objectSpread$B(_objectSpread$B({}, o), {}, {
             disabled: (_o$disabled = o.disabled) === null || _o$disabled === void 0 ? void 0 : _o$disabled.call(o, state.data)
           });
         }),
@@ -18960,7 +19107,7 @@ function getElement(item, setCanSave, state, absoluteName, _onChange, _onError,
         },
         icon: item.icon,
         callback: function callback(data) {
-          return form === null || form === void 0 ? void 0 : form.setFieldsValue(_objectSpread$C(_objectSpread$C({}, state.data), data));
+          return form === null || form === void 0 ? void 0 : form.setFieldsValue(_objectSpread$B(_objectSpread$B({}, state.data), data));
         }
       });
     case 'media':
@@ -18981,7 +19128,7 @@ function getElement(item, setCanSave, state, absoluteName, _onChange, _onError,
 var DisplayInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  return /*#__PURE__*/jsx(Input, _objectSpread$C(_objectSpread$C({}, props), {}, {
+  return /*#__PURE__*/jsx(Input, _objectSpread$B(_objectSpread$B({}, props), {}, {
     ref: ref,
     disabled: true,
     value: t(props.translationPrefix + '.' + props.value)
@@ -19000,8 +19147,8 @@ function isReadonly(item, data) {
   return false;
 }
 
-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; }
+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 _createForOfIteratorHelper$f(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$f(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$f(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$f(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$f(r, a) : void 0; } }
 function _arrayLikeToArray$f(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; }
@@ -19051,13 +19198,13 @@ var Presets = function Presets(_ref) {
     } finally {
       _iterator.f();
     }
-    var data = _objectSpread$B(_objectSpread$B({}, form.getFieldsValue(names)), {}, {
+    var data = _objectSpread$A(_objectSpread$A({}, form.getFieldsValue(names)), {}, {
       newPresetName: newPresetName
     });
     data.dpi = parseInt(data.dpi);
     data.organization = root.getGlobalValue('organizationId');
     apiHandler.create({}, state.configuration.createPresetMapping, data);
-    var dt = _objectSpread$B(_objectSpread$B({}, form.getFieldsValue(names)), {}, {
+    var dt = _objectSpread$A(_objectSpread$A({}, form.getFieldsValue(names)), {}, {
       name: newPresetName
     });
     setPresets({
@@ -19399,8 +19546,8 @@ function getLabel(item, t) {
 }
 var Form = observer(/*#__PURE__*/React.forwardRef(FormWrapper$1));
 
-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$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; }
 function _createForOfIteratorHelper$e(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$e(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$e(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$e(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$e(r, a) : void 0; } }
 function _arrayLikeToArray$e(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; }
@@ -19602,7 +19749,7 @@ function useRoleSelectorData (_ref) {
             roles.forEach(function (r) {
               //check if after the changes the role is selected
               if (value.includes(r._id)) {
-                var newValue = _objectSpread$A(_objectSpread$A({}, r), {}, {
+                var newValue = _objectSpread$z(_objectSpread$z({}, r), {}, {
                   selected: true
                 });
                 //add it to the new list as selected role
@@ -19638,7 +19785,7 @@ function useRoleSelectorData (_ref) {
                   }
                 }
               } else {
-                var _newValue = _objectSpread$A(_objectSpread$A({}, r), {}, {
+                var _newValue = _objectSpread$z(_objectSpread$z({}, r), {}, {
                   selected: false
                 });
                 //add it to the new list as unselected role
@@ -19842,7 +19989,7 @@ function _updateRoles() {
                   userRole = userRoles.find(function (r) {
                     return r._id == role._id;
                   });
-                  newRole = _objectSpread$A({}, role);
+                  newRole = _objectSpread$z({}, role);
                   if (userRole) {
                     newRole.selected = true;
                     newRole.inherited = userRole.inherited;
@@ -20062,7 +20209,7 @@ function _fetchOptions() {
         case 4:
           result = _context11.sent;
           options = result.data.map(function (d) {
-            return _objectSpread$A(_objectSpread$A({}, d), {}, {
+            return _objectSpread$z(_objectSpread$z({}, d), {}, {
               label: d.displayName,
               value: d._id,
               isLeaf: !d.hasChildren
@@ -20164,8 +20311,8 @@ var parent = "parent-NZJ3S";
 var css_248z$i = ".permission-Button-XctsZ {\n  position: relative;\n  top: 25px;\n  left: -30px;\n  float: right;\n  height: 20px;\n  z-index: 1000;\n}\n.select-lzft- {\n  width: 100%;\n}\n.loadingOption-qCkRw {\n  margin-top: 11px;\n  padding-left: 500px;\n}\n.scroller-lrdk9 {\n  overflow: auto;\n  height: 100%;\n}\n\n.skeleton--xCI0 {\n  padding-left: 25px;\n  padding-bottom: 10px;\n}\n.filterField-1kU1O {\n  display: flex;\n  gap: 10px;\n}\n.filterField-1kU1O button {\n  height: 32px;\n}\n.filterField-1kU1O div {\n  height: 32px;\n}\n\n.parent-scroll-GmaL9 {\n  overflow: auto;\n  padding: 24px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n.parent-NZJ3S {\n  overflow: auto;\n  padding: 24px;\n  height: 100%;\n}\n\n.parent-scroll-GmaL9 .ant-spin-container {\n  height: 100%;\n}\n.parent-scroll-GmaL9 .infinite-scroll-component__outerdiv {\n  height: 100%;\n}\n.parent-scroll-GmaL9 .infinite-scroll-component {\n  height: 100% !important;\n}\n";
 styleInject(css_248z$i);
 
-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; }
+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 _createForOfIteratorHelper$d(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$d(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$d(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$d(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$d(r, a) : void 0; } }
 function _arrayLikeToArray$d(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; }
@@ -20225,8 +20372,8 @@ function _generateCSV() {
             break;
           }
           _context2.next = 21;
-          return generateCSV(_objectSpread$z(_objectSpread$z({}, exportParams.children), {}, {
-            mappingData: _objectSpread$z(_objectSpread$z({}, parent), {}, {
+          return generateCSV(_objectSpread$y(_objectSpread$y({}, exportParams.children), {}, {
+            mappingData: _objectSpread$y(_objectSpread$y({}, parent), {}, {
               parentId: exportParams.mappingData._id
             })
           }), csvData);
@@ -20287,9 +20434,55 @@ var generateCSVData = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
+function downloadFile(_x4, _x5, _x6, _x7) {
+  return _downloadFile.apply(this, arguments);
+}
+function _downloadFile() {
+  _downloadFile = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(url, jwt, accept, fileName) {
+    var response, blob, downloadLink, fileURL;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _context3.next = 2;
+          return fetch(url, {
+            headers: {
+              Authorization: 'Bearer ' + jwt,
+              Accept: accept
+            }
+          });
+        case 2:
+          response = _context3.sent;
+          if (response.ok) {
+            _context3.next = 5;
+            break;
+          }
+          throw new Error("Failed to fetch the file: ".concat(response.statusText));
+        case 5:
+          _context3.next = 7;
+          return response.blob();
+        case 7:
+          blob = _context3.sent;
+          downloadLink = document.createElement('a');
+          fileURL = URL.createObjectURL(blob);
+          downloadLink.href = fileURL;
+          downloadLink.download = fileName; // Specify the desired file name
+          document.body.appendChild(downloadLink);
+          downloadLink.click();
+
+          // Clean up
+          document.body.removeChild(downloadLink);
+          URL.revokeObjectURL(fileURL);
+        case 16:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return _downloadFile.apply(this, arguments);
+}
 
-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 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 _createForOfIteratorHelper$c(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$c(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$c(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$c(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$c(r, a) : void 0; } }
 function _arrayLikeToArray$c(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; }
@@ -20708,7 +20901,7 @@ function useRelationSelectorData (_ref) {
               var activeItem = _step.value;
               if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem._id) === (addedData === null || addedData === void 0 ? void 0 : addedData._id)) {
                 addedObjects.push(addedData);
-                getSplittedItems(_objectSpread$y(_objectSpread$y({}, activeItem), {}, {
+                getSplittedItems(_objectSpread$x(_objectSpread$x({}, activeItem), {}, {
                   userId: data === null || data === void 0 ? void 0 : data._id
                 }));
                 ret = true;
@@ -20913,8 +21106,8 @@ function useRelationSelectorData (_ref) {
   };
 }
 
-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$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 _createForOfIteratorHelper$b(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$b(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$b(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$b(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$b(r, a) : void 0; } }
 function _arrayLikeToArray$b(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; }
@@ -21047,7 +21240,7 @@ function ActionButton (_ref) {
               _iterator2.f();
             }
             _context.next = 19;
-            return apiInterface.update(_objectSpread$x(_objectSpread$x({}, data), {}, {
+            return apiInterface.update(_objectSpread$w(_objectSpread$w({}, data), {}, {
               state: toSwitch
             }), data);
           case 19:
@@ -21204,14 +21397,14 @@ function _simpleChangeValue() {
             break;
           }
           for (i = 0; i < action.newValues.length; i++) {
-            fieldsToUpdate = _objectSpread$x(_objectSpread$x({}, fieldsToUpdate), {}, _defineProperty({}, action.newValues[i].field, action.newValues[i].value));
+            fieldsToUpdate = _objectSpread$w(_objectSpread$w({}, fieldsToUpdate), {}, _defineProperty({}, action.newValues[i].field, action.newValues[i].value));
           }
           if (!apiInterface.canUpdate) {
             _context2.next = 9;
             break;
           }
           _context2.next = 7;
-          return apiInterface.update(_objectSpread$x({}, fieldsToUpdate), data);
+          return apiInterface.update(_objectSpread$w({}, fieldsToUpdate), data);
         case 7:
           response = _context2.sent;
           return _context2.abrupt("return", response);
@@ -21226,7 +21419,7 @@ function _simpleChangeValue() {
   return _simpleChangeValue.apply(this, arguments);
 }
 function A(props) {
-  return /*#__PURE__*/jsx("a", _objectSpread$x({}, props));
+  return /*#__PURE__*/jsx("a", _objectSpread$w({}, props));
 }
 
 function _createForOfIteratorHelper$a(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$a(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; } } }; }
@@ -21364,8 +21557,8 @@ var itemDesc = "item-desc-DBiiF";
 var css_248z$h = ".diva-component-DIVA_BACKOFFICE_NEW .title-cl-ZAj2y {\n  color: black;\n}\n.diva-component-DIVA_BACKOFFICE_NEW .description-m3mNY {\n  color: grey;\n  flex: 1 1 100%;\n  margin-left: 25px;\n  margin-top: -25px;\n}\n.diva-component-DIVA_BACKOFFICE_NEW .item-group-xWnj- {\n  /* border-bottom: 1px solid black; */\n  margin-bottom: 40px;\n}\n.diva-component-DIVA_BACKOFFICE_NEW .delete-item-otdSr {\n  cursor: pointer;\n  position: relative;\n  float: right;\n  top: 13px;\n  margin-right: 20px;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW .newscroller-INKeD {\n  overflow: auto;\n  height: 400px;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW .ant-collapse-header--6FgU div {\n  flex-wrap: wrap !important;\n}\n.diva-component-DIVA_BACKOFFICE_NEW a .item-title--BTvC {\n  padding: 0 0 0 30px;\n  color: rgba(0, 0, 0, 0.85);\n}\n.diva-component-DIVA_BACKOFFICE_NEW .item-desc-DBiiF {\n  padding: 0 0 0 30px;\n  color: rgba(0, 0, 0, 0.45);\n}\n";
 styleInject(css_248z$h);
 
-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 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 DropDown = function DropDown(_ref) {
   var _curItem$data$length;
   var split = _ref.split,
@@ -21397,7 +21590,7 @@ var DropDown = function DropDown(_ref) {
   });
   return /*#__PURE__*/jsx(Collapse, {
     onChange: function onChange() {
-      return getSplittedItems(_objectSpread$w(_objectSpread$w({}, item.item), {}, {
+      return getSplittedItems(_objectSpread$v(_objectSpread$v({}, item.item), {}, {
         parentId: item.parentId
       }), 0);
     },
@@ -21655,8 +21848,8 @@ var RelationSelector = function RelationSelector(_ref, ref) {
 };
 var RelationSelector$1 = observer(/*#__PURE__*/React.forwardRef(RelationSelector));
 
-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$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 useFormListData (_ref) {
   var _configuration$defaul;
   var id = _ref.id,
@@ -21736,7 +21929,7 @@ function useFormListData (_ref) {
             if (updated.length == state.length) {
               newState = state.map(function (s, i) {
                 var _updated$find;
-                return _objectSpread$v(_objectSpread$v({}, s), {}, {
+                return _objectSpread$u(_objectSpread$u({}, s), {}, {
                   data: (_updated$find = updated.find(function (u) {
                     return u.index == i;
                   })) === null || _updated$find === void 0 ? void 0 : _updated$find.data
@@ -21873,8 +22066,8 @@ var FormList = function FormList(_ref, ref) {
 };
 var FormList$1 = observer(/*#__PURE__*/React.forwardRef(FormList));
 
-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$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 LOG$6 = getLogger('Backoffice', 'SelectOrCreate');
 function useSelectOrCreateData (_ref) {
   var id = _ref.id,
@@ -21971,7 +22164,7 @@ function useSelectOrCreateData (_ref) {
               _context.next = 7;
               return apiHandler.readList(configuration.readMapping, mappingData, {
                 filters: (_configuration$select3 = configuration.selectMapping) !== null && _configuration$select3 !== void 0 && _configuration$select3.searchField ? (_configuration$select4 = configuration.selectMapping) === null || _configuration$select4 === void 0 ? void 0 : _configuration$select4.searchField.reduce(function (filter, field) {
-                  return _objectSpread$u(_objectSpread$u({}, filter), {}, _defineProperty({}, field.field, [value, field.filter, true]));
+                  return _objectSpread$t(_objectSpread$t({}, filter), {}, _defineProperty({}, field.field, [value, field.filter, true]));
                 }, {}) : {
                   _id: [value, 'contains']
                 },
@@ -22282,8 +22475,8 @@ var Multiple = function Multiple(_ref3) {
   });
 };
 
-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 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 useListData (_ref) {
   var id = _ref.id,
     data = _ref.data;
@@ -22326,7 +22519,7 @@ function useListData (_ref) {
           case 3:
             result = _context.sent;
             setListData(result.data.map(parseField));
-            initData = _objectSpread$t({}, data);
+            initData = _objectSpread$s({}, data);
             setUpdatedObject(initData);
             setLoading(false);
           case 8:
@@ -22367,7 +22560,7 @@ function useListData (_ref) {
     });
     (_configuration$itemMa7 = configuration.itemMapping.itemUpdate) === null || _configuration$itemMa7 === void 0 || _configuration$itemMa7.forEach(function (field) {
       var parsedField = field.field.split('.');
-      item.itemUpdate = _objectSpread$t(_objectSpread$t({}, field), {}, {
+      item.itemUpdate = _objectSpread$s(_objectSpread$s({}, field), {}, {
         value: dataEntry[parsedField[parsedField.length - 1]]
       });
     });
@@ -22398,16 +22591,16 @@ function useListData (_ref) {
       console.error('field with more than 2 parts not allowed');
       return;
     }
-    var updObj = _objectSpread$t({}, updatedObject);
+    var updObj = _objectSpread$s({}, updatedObject);
     if (fields.length === 1) {
-      updObj = _objectSpread$t(_objectSpread$t({}, updObj), {}, _defineProperty({}, fields[0], value));
+      updObj = _objectSpread$s(_objectSpread$s({}, updObj), {}, _defineProperty({}, fields[0], value));
     } else if (fields.length === 2) {
       var updatedField = updObj[fields[0]].find(function (v) {
         return v.id === item.id.trim();
       });
       if (updatedField) {
-        var updatedFieldCopy = _objectSpread$t(_objectSpread$t({}, updatedField), {}, _defineProperty({}, fields[1], value));
-        updObj = _objectSpread$t(_objectSpread$t({}, updObj), {}, _defineProperty({}, fields[0], updObj[fields[0]].map(function (v) {
+        var updatedFieldCopy = _objectSpread$s(_objectSpread$s({}, updatedField), {}, _defineProperty({}, fields[1], value));
+        updObj = _objectSpread$s(_objectSpread$s({}, updObj), {}, _defineProperty({}, fields[0], updObj[fields[0]].map(function (v) {
           return v.id === item.id.trim() ? updatedFieldCopy : v;
         })));
       }
@@ -22416,11 +22609,11 @@ function useListData (_ref) {
     var acItems = listData;
     for (var i = 0; i < acItems.length; i++) {
       if (i == index) {
-        acItems[i].itemUpdate = _objectSpread$t(_objectSpread$t({}, acItems[i].itemUpdate), {}, {
+        acItems[i].itemUpdate = _objectSpread$s(_objectSpread$s({}, acItems[i].itemUpdate), {}, {
           value: value
         });
       } else if (!acItems[i].itemUpdate.multiselect) {
-        acItems[i].itemUpdate = _objectSpread$t(_objectSpread$t({}, acItems[i].itemUpdate), {}, {
+        acItems[i].itemUpdate = _objectSpread$s(_objectSpread$s({}, acItems[i].itemUpdate), {}, {
           value: !value
         });
       }
@@ -22934,8 +23127,8 @@ function calcNaturalCanvasSize(image, crop) {
   };
 }
 
-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 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; }
 var ImageCropper = function ImageCropper(_ref, ref) {
   var id = _ref.id,
     data = _ref.data,
@@ -23043,12 +23236,12 @@ var ImageCropper = function ImageCropper(_ref, ref) {
   }
   function onEnter(e) {
     if (e.key != 'Enter') return;
-    setCrop(_objectSpread$s(_objectSpread$s({}, crop), {}, {
+    setCrop(_objectSpread$r(_objectSpread$r({}, crop), {}, {
       unit: 'px',
       width: Number(widthInputElement.current.value),
       height: Number(heightInputElement.current.value)
     }));
-    setCompletedCrop(_objectSpread$s(_objectSpread$s({}, crop), {}, {
+    setCompletedCrop(_objectSpread$r(_objectSpread$r({}, crop), {}, {
       unit: 'px',
       width: Number(widthInputElement.current.value),
       height: Number(heightInputElement.current.value)
@@ -23126,8 +23319,8 @@ var ImageCropper$1 = observer(/*#__PURE__*/React.forwardRef(ImageCropper));
 function _createForOfIteratorHelper$9(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$9(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$9(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$9(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$9(r, a) : void 0; } }
 function _arrayLikeToArray$9(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$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$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 useDescriptions (_ref) {
   var id = _ref.id;
   var root = useStore();
@@ -23220,7 +23413,7 @@ function _getDisplayData() {
     return _regeneratorRuntime.wrap(function _callee3$(_context4) {
       while (1) switch (_context4.prev = _context4.next) {
         case 0:
-          displayData = _objectSpread$r({}, data);
+          displayData = _objectSpread$q({}, data);
           _iterator = _createForOfIteratorHelper$9(items);
           _context4.prev = 2;
           _loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
@@ -23496,8 +23689,8 @@ var FileUploadWrapper = function FileUploadWrapper(_ref) {
 };
 var FileUploadBeta = observer(FileUploadWrapper);
 
-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$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 useGridData (_ref) {
   var id = _ref.id,
     data = _ref.data;
@@ -23540,11 +23733,11 @@ function useGridData (_ref) {
 function reducer(state, action) {
   switch (action.type) {
     case 'update':
-      return _objectSpread$q(_objectSpread$q({}, state), {}, _defineProperty({}, action.data.divaNr, _objectSpread$q(_objectSpread$q({}, action.data), {}, {
+      return _objectSpread$p(_objectSpread$p({}, state), {}, _defineProperty({}, action.data.divaNr, _objectSpread$p(_objectSpread$p({}, action.data), {}, {
         buffer: Buffer.from(action.data.buffer)
       })));
     case 'delete':
-      var newState = _objectSpread$q({}, state);
+      var newState = _objectSpread$p({}, state);
       delete newState[action.data.divaNr];
       return newState;
     default:
@@ -23558,7 +23751,7 @@ var css_248z$f = ".grid-sGemi {\n  display: grid;\n  grid-template-columns: repe
 styleInject(css_248z$f);
 
 var wrapper$2 = "wrapper-p-gR3";
-var container$2 = "container-DoZqe";
+var container$3 = "container-DoZqe";
 var css_248z$e = ".wrapper-p-gR3 {\n  background: #ececec;\n}\n\n.container-DoZqe {\n  display: flex;\n  justify-content: space-between;\n}\n";
 styleInject(css_248z$e);
 
@@ -23579,7 +23772,7 @@ var ToolTipInfo = function ToolTipInfo(props) {
         width: 230
       },
       children: /*#__PURE__*/jsx("div", {
-        className: container$2
+        className: container$3
       })
     })
   });
@@ -23631,8 +23824,8 @@ var Grid = function Grid(_ref) {
   });
 };
 
-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$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 useMediaUpload = function useMediaUpload(_ref) {
   var id = _ref.id;
   var root = useStore();
@@ -23751,7 +23944,7 @@ var useMediaUpload = function useMediaUpload(_ref) {
     onRemove: onRemove,
     customRequest: customRequest,
     fileList: fileList.map(function (f) {
-      return _objectSpread$p(_objectSpread$p({}, f), {}, {
+      return _objectSpread$o(_objectSpread$o({}, f), {}, {
         url: f.url
       });
     }),
@@ -24508,8 +24701,8 @@ function LinkCell (_ref) {
 
 var _excluded$1 = ["index"],
   _excluded2 = ["children", "dataIndex", "record", "handleSave", "column"];
-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 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; }
 var LOG$4 = getLogger('Backoffice', 'CellRenderer');
 var EditableContext = /*#__PURE__*/React.createContext(null);
 var CustomRow = function CustomRow(_ref) {
@@ -24523,7 +24716,7 @@ var CustomRow = function CustomRow(_ref) {
     component: false,
     children: /*#__PURE__*/jsx(EditableContext.Provider, {
       value: form,
-      children: /*#__PURE__*/jsx("tr", _objectSpread$o({}, props))
+      children: /*#__PURE__*/jsx("tr", _objectSpread$n({}, props))
     })
   });
 };
@@ -24576,7 +24769,7 @@ var CustomCell = function CustomCell(_ref2) {
   if ((record === null || record === void 0 ? void 0 : record.ItemField) == 'LongDescription') {
     longDescriptionType = 'text';
   }
-  var modifiedColumn = _objectSpread$o(_objectSpread$o({}, column), {}, {
+  var modifiedColumn = _objectSpread$n(_objectSpread$n({}, column), {}, {
     type: longDescriptionType || (column === null || column === void 0 ? void 0 : column.type)
   });
   if (column) {
@@ -24589,40 +24782,40 @@ var CustomCell = function CustomCell(_ref2) {
     };
     switch (modifiedColumn.type) {
       case 'boolean':
-        childNode = /*#__PURE__*/jsx(BooleanCell, _objectSpread$o({}, cellProps));
+        childNode = /*#__PURE__*/jsx(BooleanCell, _objectSpread$n({}, cellProps));
         break;
       case 'text':
-        childNode = /*#__PURE__*/jsx(TextCell, _objectSpread$o({}, cellProps));
+        childNode = /*#__PURE__*/jsx(TextCell, _objectSpread$n({}, cellProps));
         break;
       case 'select':
-        childNode = /*#__PURE__*/jsx(DropdownCell, _objectSpread$o({}, cellProps));
+        childNode = /*#__PURE__*/jsx(DropdownCell, _objectSpread$n({}, cellProps));
       case 'media':
-        childNode = /*#__PURE__*/jsx(MediaViewerCell, _objectSpread$o({}, cellProps));
+        childNode = /*#__PURE__*/jsx(MediaViewerCell, _objectSpread$n({}, cellProps));
         break;
       case 'mediaItem':
-        childNode = /*#__PURE__*/jsx(MediaItemViewerCell, _objectSpread$o({}, cellProps));
+        childNode = /*#__PURE__*/jsx(MediaItemViewerCell, _objectSpread$n({}, cellProps));
         break;
       case 'unixTimeStamp':
-        childNode = /*#__PURE__*/jsx(UnixTimeStampCell, _objectSpread$o({}, cellProps));
+        childNode = /*#__PURE__*/jsx(UnixTimeStampCell, _objectSpread$n({}, cellProps));
         break;
       case 'unixTimeStampCheck':
-        childNode = /*#__PURE__*/jsx(UnixTimeStampCheckCell, _objectSpread$o({}, cellProps));
+        childNode = /*#__PURE__*/jsx(UnixTimeStampCheckCell, _objectSpread$n({}, cellProps));
         break;
       case 'icon':
-        childNode = /*#__PURE__*/jsx(IconCell, _objectSpread$o({}, cellProps));
+        childNode = /*#__PURE__*/jsx(IconCell, _objectSpread$n({}, cellProps));
         break;
       case 'progress':
-        childNode = /*#__PURE__*/jsx(ProgressCell, _objectSpread$o({}, cellProps));
+        childNode = /*#__PURE__*/jsx(ProgressCell, _objectSpread$n({}, cellProps));
         break;
       case 'link':
-        childNode = /*#__PURE__*/jsx(LinkCell, _objectSpread$o({}, cellProps));
+        childNode = /*#__PURE__*/jsx(LinkCell, _objectSpread$n({}, cellProps));
         break;
       default:
-        childNode = /*#__PURE__*/jsx(StringCell, _objectSpread$o({}, cellProps));
+        childNode = /*#__PURE__*/jsx(StringCell, _objectSpread$n({}, cellProps));
         break;
     }
   }
-  return /*#__PURE__*/jsx("td", _objectSpread$o(_objectSpread$o({}, restProps), {}, {
+  return /*#__PURE__*/jsx("td", _objectSpread$n(_objectSpread$n({}, restProps), {}, {
     children: childNode
   }));
 };
@@ -24811,7 +25004,7 @@ function useAGHistogram (_ref) {
   };
 }
 
-var container$1 = "container-2r-OJ";
+var container$2 = "container-2r-OJ";
 var column1 = "column1-9viTK";
 var spinner = "spinner-00VcK";
 var css_248z$b = ".container-2r-OJ {\n  display: flex;\n  gap: 40px; /* Distribute the columns evenly */\n}\n\n.column-yZ2Qc {\n  padding: 10px;\n}\n\n.column1-9viTK .column-yZ2Qc {\n  flex: 8;\n}\n\n.column2-pCnEz .column-yZ2Qc {\n  flex: 1;\n}\n\n.column3-QZDVv .column-yZ2Qc {\n  flex: 3;\n}\n\n.spinner-00VcK {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n";
@@ -24928,7 +25121,7 @@ function AGHistogram (_ref) {
       children: /*#__PURE__*/jsx(Panel, {
         header: headerText,
         children: /*#__PURE__*/jsxs("div", {
-          className: container$1,
+          className: container$2,
           children: [!loadingHistogram && /*#__PURE__*/jsx("div", {
             className: classnames(column1, 'ag-theme-alpine'),
             style: {
@@ -24974,8 +25167,8 @@ var SMChart = function SMChart(props) {
   }) : /*#__PURE__*/jsx(Fragment, {});
 };
 
-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 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 _createForOfIteratorHelper$4(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$4(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$4(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$4(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$4(r, a) : void 0; } }
 function _arrayLikeToArray$4(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; }
@@ -25170,7 +25363,7 @@ var TableWrapper = function TableWrapper(_ref) {
               // Convert to Dayjs
               (_state$globalFilter4 = state.globalFilter) !== null && _state$globalFilter4 !== void 0 && (_state$globalFilter4 = _state$globalFilter4.timeStamp) !== null && _state$globalFilter4 !== void 0 && (_state$globalFilter4 = _state$globalFilter4['toTimeStamp']) !== null && _state$globalFilter4 !== void 0 && _state$globalFilter4[0] ? dayjs((_state$globalFilter5 = state.globalFilter) === null || _state$globalFilter5 === void 0 || (_state$globalFilter5 = _state$globalFilter5.timeStamp) === null || _state$globalFilter5 === void 0 || (_state$globalFilter5 = _state$globalFilter5['toTimeStamp']) === null || _state$globalFilter5 === void 0 ? void 0 : _state$globalFilter5[0]) : dayjs(new Date()) // Convert to Dayjs
               ]
-            }), ((_state$configuration$4 = state.configuration.filter) === null || _state$configuration$4 === void 0 ? void 0 : _state$configuration$4.select) && /*#__PURE__*/jsx(SimpleSelect, _objectSpread$n(_objectSpread$n({}, (_state$configuration$5 = state.configuration.filter) === null || _state$configuration$5 === void 0 ? void 0 : _state$configuration$5.select.settings), {}, {
+            }), ((_state$configuration$4 = state.configuration.filter) === null || _state$configuration$4 === void 0 ? void 0 : _state$configuration$4.select) && /*#__PURE__*/jsx(SimpleSelect, _objectSpread$m(_objectSpread$m({}, (_state$configuration$5 = state.configuration.filter) === null || _state$configuration$5 === void 0 ? void 0 : _state$configuration$5.select.settings), {}, {
               style: {
                 minWidth: '200px'
               },
@@ -25275,7 +25468,7 @@ var TableWrapper = function TableWrapper(_ref) {
       },
       dataSource: data,
       loading: state.loading,
-      pagination: _objectSpread$n(_objectSpread$n({}, state.pagination), {}, {
+      pagination: _objectSpread$m(_objectSpread$m({}, state.pagination), {}, {
         showTotal: function showTotal(total, range) {
           return "".concat(range[0], "-").concat(range[1], " of ").concat(total, " Elements");
         },
@@ -25582,7 +25775,7 @@ function BulkAction(_ref6) {
             }
             _context4.t0 = data;
             _context4.next = 11;
-            return apiInterface.update(_objectSpread$n(_objectSpread$n({}, dataEntry), updatedData), dataEntry, action.apiCallbackMapping);
+            return apiInterface.update(_objectSpread$m(_objectSpread$m({}, dataEntry), updatedData), dataEntry, action.apiCallbackMapping);
           case 11:
             _context4.t1 = _context4.sent;
             _context4.t0.push.call(_context4.t0, _context4.t1);
@@ -25695,8 +25888,8 @@ function SelectionText(_ref8) {
   });
 }
 
-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 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 getColumnFilterProps (_ref) {
   var filter = _ref.filter,
     title = _ref.title;
@@ -26059,7 +26252,7 @@ var selectProps = function selectProps(title, filter) {
               });
             },
             options: filter.map(function (f) {
-              return _objectSpread$m(_objectSpread$m({}, f), {}, {
+              return _objectSpread$l(_objectSpread$l({}, f), {}, {
                 label: t(f.label)
               });
             })
@@ -26108,7 +26301,7 @@ var multiSelectProps = function multiSelectProps(title, filter) {
         setDisplaySelectedvalues = _useState4[1];
       var options = [];
       options = filter.map(function (f) {
-        return _objectSpread$m(_objectSpread$m({}, f), {}, {
+        return _objectSpread$l(_objectSpread$l({}, f), {}, {
           label: t(f.label)
         });
       });
@@ -26182,8 +26375,8 @@ var multiSelectProps = function multiSelectProps(title, filter) {
   };
 };
 
-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 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 mapColumns(configuration, userHasPermission, onUpdate, data, globalFilter) {
   var columns = configuration.columns.filter(function (c) {
     if (typeof c.hidden == 'boolean' && c.hidden) {
@@ -26236,7 +26429,7 @@ function mapColumns(configuration, userHasPermission, onUpdate, data, globalFilt
 }
 function mapColumn(column, onUpdate) {
   var _column$field, _column$children;
-  return _objectSpread$l(_objectSpread$l(_objectSpread$l({}, column), {}, {
+  return _objectSpread$k(_objectSpread$k(_objectSpread$k({}, column), {}, {
     hidden: false,
     width: column.width || 100,
     dataIndex: (_column$field = column.field) === null || _column$field === void 0 ? void 0 : _column$field.split('.'),
@@ -26286,8 +26479,8 @@ function updateData (_ref) {
   };
 }
 
-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 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 applyFilterAndSortation (_ref) {
   var data = _ref.data,
     filters = _ref.filters,
@@ -26302,7 +26495,7 @@ function applyFilterAndSortation (_ref) {
   processedData = sort(sorter || [], processedData);
   return {
     data: processedData,
-    pagination: _objectSpread$k(_objectSpread$k({}, pagination), {}, {
+    pagination: _objectSpread$j(_objectSpread$j({}, pagination), {}, {
       total: processedData.length
     })
   };
@@ -26387,8 +26580,8 @@ function filter(f, data) {
 }
 
 var _excluded = ["_id"];
-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 ownKeys$i(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$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function useTableData$1 (_ref) {
   var _configuration$apiInt;
   var id = _ref.id;
@@ -26443,7 +26636,7 @@ function useTableData$1 (_ref) {
     var _configuration$create;
     if (!dataRow) return;
     var id = v4();
-    var processedDataRow = unflatten(_objectSpread$j({
+    var processedDataRow = unflatten(_objectSpread$i({
       _id: id,
       ID: id
     }, dataRow));
@@ -26455,11 +26648,11 @@ function useTableData$1 (_ref) {
       newData = _updateData.data;
       _updateData.prevDataRow;
       _updateData.index;
-    var newState = _objectSpread$j(_objectSpread$j({}, state), {}, {
+    var newState = _objectSpread$i(_objectSpread$i({}, state), {}, {
       data: newData
     });
     if (!filterServerSide) {
-      var res = applyFilterAndSortation(_objectSpread$j(_objectSpread$j({}, filterData), {}, {
+      var res = applyFilterAndSortation(_objectSpread$i(_objectSpread$i({}, filterData), {}, {
         data: newData
       }));
       newState.data = res.data;
@@ -26471,33 +26664,33 @@ function useTableData$1 (_ref) {
     var formData = new FormData();
     processedDataRow._id;
       var value = _objectWithoutProperties(processedDataRow, _excluded);
-    apiHandler.create(undefined, (_configuration$create = configuration.createMapping) !== null && _configuration$create !== void 0 ? _configuration$create : configuration.mapping, _objectSpread$j(_objectSpread$j({}, catalogItem), {}, {
+    apiHandler.create(undefined, (_configuration$create = configuration.createMapping) !== null && _configuration$create !== void 0 ? _configuration$create : configuration.mapping, _objectSpread$i(_objectSpread$i({}, catalogItem), {}, {
       filterContex: filterContex,
       value: JSON.stringify([value])
     }), formData, catalogItem === null || catalogItem === void 0 ? void 0 : catalogItem.sessionGuid).then(function (d) {
       if (d && d.Result && d.Result == 'Success') return;
-      setState(_objectSpread$j({}, oldState));
+      setState(_objectSpread$i({}, oldState));
     });
   }, [state, catalogItem, filterData]);
   useEffect(function () {
     if (!catalogItem) return;
-    setState(_objectSpread$j(_objectSpread$j({}, state), {}, {
+    setState(_objectSpread$i(_objectSpread$i({}, state), {}, {
       loading: true,
-      mappingData: _objectSpread$j(_objectSpread$j({}, catalogItem), {}, {
+      mappingData: _objectSpread$i(_objectSpread$i({}, catalogItem), {}, {
         filterContex: filterContex
       })
     }));
     if (!filterServerSide) {
-      apiHandler.readList(configuration.mapping, _objectSpread$j(_objectSpread$j({}, catalogItem), {}, {
+      apiHandler.readList(configuration.mapping, _objectSpread$i(_objectSpread$i({}, catalogItem), {}, {
         filterContex: filterContex
       }), undefined, catalogItem.sessionGuid).then(function (data) {
         var newData = data.data.map(function (d) {
-          return _objectSpread$j(_objectSpread$j({}, d), {}, {
+          return _objectSpread$i(_objectSpread$i({}, d), {}, {
             _id: d._id || d.ID || nanoid()
           });
         });
         onChange({
-          pagination: _objectSpread$j({}, state.pagination),
+          pagination: _objectSpread$i({}, state.pagination),
           filters: {},
           sorter: mapColumns(configuration, root.actions.userHasPermission, onUpdate).filter(function (c) {
             return c.defaultSortOrder;
@@ -26513,7 +26706,7 @@ function useTableData$1 (_ref) {
       });
     } else {
       onChange({
-        pagination: _objectSpread$j({}, state.pagination),
+        pagination: _objectSpread$i({}, state.pagination),
         filters: {},
         sorter: mapColumns(configuration, root.actions.userHasPermission, onUpdate).filter(function (c) {
           return c.defaultSortOrder;
@@ -26529,17 +26722,17 @@ function useTableData$1 (_ref) {
     }
   }, [filterContex, catalogItem]);
   var onChange = function onChange(p, dataParam) {
-    setState(_objectSpread$j(_objectSpread$j({}, state), {}, {
+    setState(_objectSpread$i(_objectSpread$i({}, state), {}, {
       loading: true
     }));
     if (!filterServerSide) {
       var unfilteredData = dataParam ? dataParam : state.unfilteredData;
-      var _applyFilterAndSortat = applyFilterAndSortation(_objectSpread$j(_objectSpread$j({}, p), {}, {
+      var _applyFilterAndSortat = applyFilterAndSortation(_objectSpread$i(_objectSpread$i({}, p), {}, {
           data: unfilteredData
         })),
         data = _applyFilterAndSortat.data,
         pagination = _applyFilterAndSortat.pagination;
-      setState(_objectSpread$j(_objectSpread$j({}, state), {}, {
+      setState(_objectSpread$i(_objectSpread$i({}, state), {}, {
         data: data,
         pagination: pagination,
         loading: false,
@@ -26550,20 +26743,20 @@ function useTableData$1 (_ref) {
         sorter: p.sorter
       });
     } else {
-      apiHandler.readList(configuration.mapping, _objectSpread$j(_objectSpread$j({}, catalogItem), {}, {
+      apiHandler.readList(configuration.mapping, _objectSpread$i(_objectSpread$i({}, catalogItem), {}, {
         filterContex: filterContex
       }), p, catalogItem === null || catalogItem === void 0 ? void 0 : catalogItem.sessionGuid).then(function (data) {
-        setState(_objectSpread$j(_objectSpread$j({}, state), {}, {
+        setState(_objectSpread$i(_objectSpread$i({}, state), {}, {
           data: data.data.map(function (dt) {
-            return _objectSpread$j(_objectSpread$j({}, dt), {}, {
+            return _objectSpread$i(_objectSpread$i({}, dt), {}, {
               _id: dt._id || dt.ID || nanoid()
             });
           }),
-          pagination: _objectSpread$j(_objectSpread$j({}, p.pagination), {}, {
+          pagination: _objectSpread$i(_objectSpread$i({}, p.pagination), {}, {
             total: data.total
           }),
           loading: false,
-          mappingData: _objectSpread$j(_objectSpread$j({}, catalogItem), {}, {
+          mappingData: _objectSpread$i(_objectSpread$i({}, catalogItem), {}, {
             filterContex: filterContex
           })
         }));
@@ -26584,7 +26777,7 @@ function useTableData$1 (_ref) {
             filters['_id'] = [id, 'eq', false];
             _context.next = 4;
             return apiHandler.readList(configuration.mapping, {
-              pagination: _objectSpread$j({}, state.pagination),
+              pagination: _objectSpread$i({}, state.pagination),
               columns: configuration.columns,
               filters: filters,
               sorter: filterData.sorter
@@ -26603,7 +26796,7 @@ function useTableData$1 (_ref) {
     };
   }();
   var onSelect = function onSelect(keys) {
-    setState(_objectSpread$j(_objectSpread$j({}, state), {}, {
+    setState(_objectSpread$i(_objectSpread$i({}, state), {}, {
       selected: keys
     }));
   };
@@ -26613,7 +26806,7 @@ function useTableData$1 (_ref) {
       return _regeneratorRuntime.wrap(function _callee2$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
-            setState(_objectSpread$j(_objectSpread$j({}, state), {}, {
+            setState(_objectSpread$i(_objectSpread$i({}, state), {}, {
               deleting: true
             }));
             newData = _toConsumableArray(state.data);
@@ -26628,7 +26821,7 @@ function useTableData$1 (_ref) {
                     mappingData = (_newData$filter = newData.filter(function (nd) {
                       return nd._id === state.selected[index];
                     })) === null || _newData$filter === void 0 ? void 0 : _newData$filter[0];
-                    mappingData = _objectSpread$j(_objectSpread$j({}, mappingData), state.mappingData);
+                    mappingData = _objectSpread$i(_objectSpread$i({}, mappingData), state.mappingData);
                     _context2.next = 5;
                     return apiHandler["delete"](id, (_configuration$delete = configuration.deleteMapping) !== null && _configuration$delete !== void 0 ? _configuration$delete : configuration.mapping, mappingData, true, catalogItem === null || catalogItem === void 0 ? void 0 : catalogItem.sessionGuid);
                   case 5:
@@ -26678,7 +26871,7 @@ function useTableData$1 (_ref) {
             }
             _context3.next = 18;
             return apiHandler.readList(configuration.mapping, {
-              pagination: _objectSpread$j(_objectSpread$j({}, state.pagination), {}, {
+              pagination: _objectSpread$i(_objectSpread$i({}, state.pagination), {}, {
                 current: current
               }),
               columns: configuration.columns,
@@ -26690,11 +26883,11 @@ function useTableData$1 (_ref) {
             newData = data.data;
             total = data.total;
           case 21:
-            setState(_objectSpread$j(_objectSpread$j({}, state), {}, {
+            setState(_objectSpread$i(_objectSpread$i({}, state), {}, {
               selected: [],
               deleting: false,
               data: newData,
-              pagination: _objectSpread$j(_objectSpread$j({}, state.pagination), {}, {
+              pagination: _objectSpread$i(_objectSpread$i({}, state.pagination), {}, {
                 current: current,
                 total: total
               })
@@ -26710,12 +26903,12 @@ function useTableData$1 (_ref) {
     };
   }();
   function setLoading() {
-    setState(_objectSpread$j(_objectSpread$j({}, state), {}, {
+    setState(_objectSpread$i(_objectSpread$i({}, state), {}, {
       loading: true
     }));
   }
-  return _objectSpread$j(_objectSpread$j({}, state), {}, {
-    configuration: _objectSpread$j(_objectSpread$j({}, configuration), {}, {
+  return _objectSpread$i(_objectSpread$i({}, state), {}, {
+    configuration: _objectSpread$i(_objectSpread$i({}, configuration), {}, {
       title: undefined
     }),
     columns: mapColumns(configuration, root.actions.userHasPermission, onUpdate),
@@ -26827,8 +27020,8 @@ function objectHash (obj) {
 function _createForOfIteratorHelper$3(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$3(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$3(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$3(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$3(r, a) : void 0; } }
 function _arrayLikeToArray$3(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$i(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$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LOG$2 = getLogger('Backoffice', 'TableData');
 function useTableData (_ref) {
   var _configuration$filter, _configuration$filter2, _configuration$filter3, _configuration$bulkAc, _configuration$apiInt;
@@ -26886,7 +27079,7 @@ function useTableData (_ref) {
   var _useState13 = useState({
       loading: true,
       deleting: false,
-      pagination: _objectSpread$i({
+      pagination: _objectSpread$h({
         current: 1,
         pageSize: 20,
         total: 0,
@@ -26895,7 +27088,7 @@ function useTableData (_ref) {
       selected: [],
       canDelete: !!apiHandler.canDelete,
       canSelect: !!apiHandler.canDelete || !!((_configuration$bulkAc = configuration.bulkActions) !== null && _configuration$bulkAc !== void 0 && _configuration$bulkAc.length),
-      mappingData: _objectSpread$i(_objectSpread$i({}, parentData), {}, {
+      mappingData: _objectSpread$h(_objectSpread$h({}, parentData), {}, {
         prefilter: {
           select: globalFilter.select
         }
@@ -26904,7 +27097,7 @@ function useTableData (_ref) {
     _useState14 = _slicedToArray(_useState13, 2),
     state = _useState14[0],
     setState = _useState14[1];
-  var mapping = _objectSpread$i(_objectSpread$i({}, parentData), {}, {
+  var mapping = _objectSpread$h(_objectSpread$h({}, parentData), {}, {
     catalogCodex: catalogItem === null || catalogItem === void 0 ? void 0 : catalogItem.codex,
     sessionGuID: catalogItem === null || catalogItem === void 0 ? void 0 : catalogItem.sessionGuid
   });
@@ -26943,14 +27136,14 @@ function useTableData (_ref) {
     }
     var dataArray = Array.isArray(data) ? data : [data];
     var newInitData = initData;
-    var newState = _objectSpread$i({}, state);
+    var newState = _objectSpread$h({}, state);
     var selected = [];
     if (configuration.deselectOnUpdate == false) {
       selected = state.selected;
     }
     var pagination = undefined;
     if (state.pagination.total !== state.data.length + dataArray.length) {
-      pagination = _objectSpread$i(_objectSpread$i({}, state.pagination), {}, {
+      pagination = _objectSpread$h(_objectSpread$h({}, state.pagination), {}, {
         total: state.data.length + dataArray.length
       });
     }
@@ -26967,7 +27160,7 @@ function useTableData (_ref) {
               dataRow: dataRow
             }),
             _data = _updateData.data;
-          newState = _objectSpread$i(_objectSpread$i({}, newState), {}, {
+          newState = _objectSpread$h(_objectSpread$h({}, newState), {}, {
             pagination: (_pagination = pagination) !== null && _pagination !== void 0 ? _pagination : newState.pagination,
             data: _data,
             selected: selected
@@ -26980,8 +27173,8 @@ function useTableData (_ref) {
             dataRow: dataRow
           }),
           nextInitData = _updateData2.data;
-        var _applyFilterAndSortat = applyFilterAndSortation(_objectSpread$i(_objectSpread$i(_objectSpread$i({}, filterData), {}, {
-            filters: _objectSpread$i(_objectSpread$i(_objectSpread$i(_objectSpread$i(_objectSpread$i(_objectSpread$i({}, filterData.filters), globalFilter.search), !(configuration !== null && configuration !== void 0 && (_configuration$filter5 = configuration.filter) !== null && _configuration$filter5 !== void 0 && (_configuration$filter5 = _configuration$filter5.toggle) !== null && _configuration$filter5 !== void 0 && _configuration$filter5.inQuery) ? globalFilter.toggle : undefined), globalFilter.select), globalFilter.timeStamp), globalFilter["default"])
+        var _applyFilterAndSortat = applyFilterAndSortation(_objectSpread$h(_objectSpread$h(_objectSpread$h({}, filterData), {}, {
+            filters: _objectSpread$h(_objectSpread$h(_objectSpread$h(_objectSpread$h(_objectSpread$h(_objectSpread$h({}, filterData.filters), globalFilter.search), !(configuration !== null && configuration !== void 0 && (_configuration$filter5 = configuration.filter) !== null && _configuration$filter5 !== void 0 && (_configuration$filter5 = _configuration$filter5.toggle) !== null && _configuration$filter5 !== void 0 && _configuration$filter5.inQuery) ? globalFilter.toggle : undefined), globalFilter.select), globalFilter.timeStamp), globalFilter["default"])
           }, configuration !== null && configuration !== void 0 && (_configuration$filter6 = configuration.filter) !== null && _configuration$filter6 !== void 0 && (_configuration$filter6 = _configuration$filter6.toggle) !== null && _configuration$filter6 !== void 0 && _configuration$filter6.inQuery ? {
             genericProps: globalFilter.toggle
           } : undefined), {}, {
@@ -26991,7 +27184,7 @@ function useTableData (_ref) {
           _data2 = _applyFilterAndSortat.data,
           _pagination2 = _applyFilterAndSortat.pagination;
         newInitData = nextInitData;
-        newState = _objectSpread$i(_objectSpread$i({}, newState), {}, {
+        newState = _objectSpread$h(_objectSpread$h({}, newState), {}, {
           pagination: _pagination2,
           data: _data2,
           selected: selected
@@ -27001,8 +27194,8 @@ function useTableData (_ref) {
     if (apiHandler.canCreate) {
       apiCreate(data).then(function (res) {
         if (!res || (res === null || res === void 0 ? void 0 : res.Error) !== undefined) {
-          initData && setInitData(_objectSpread$i({}, initData));
-          setState(_objectSpread$i({}, state));
+          initData && setInitData(_objectSpread$h({}, initData));
+          setState(_objectSpread$h({}, state));
         }
       });
     }
@@ -27015,7 +27208,7 @@ function useTableData (_ref) {
   var triggerRefresh = function triggerRefresh() {
     var _configuration$filter7;
     setError(undefined);
-    var newGlobalFilter = _objectSpread$i({}, globalFilter);
+    var newGlobalFilter = _objectSpread$h({}, globalFilter);
     //on refresh update default filter, since global value can change
     if ((_configuration$filter7 = configuration.filter) !== null && _configuration$filter7 !== void 0 && _configuration$filter7["default"]) {
       var _configuration$filter8;
@@ -27026,7 +27219,7 @@ function useTableData (_ref) {
       newGlobalFilter["default"] = _defaultFilter;
       setGlobaFilter(newGlobalFilter);
     }
-    onChange(_objectSpread$i({
+    onChange(_objectSpread$h({
       pagination: state.pagination
     }, filterData), newGlobalFilter, true);
   };
@@ -27044,7 +27237,7 @@ function useTableData (_ref) {
         order: c.defaultSortOrder
       };
     });
-    if (configuration.initialCall === false && !catalogItem) setState(_objectSpread$i(_objectSpread$i({}, state), {}, {
+    if (configuration.initialCall === false && !catalogItem) setState(_objectSpread$h(_objectSpread$h({}, state), {}, {
       loading: false
     }));else {
       onChange({
@@ -27087,7 +27280,7 @@ function useTableData (_ref) {
           case 0:
             filters = {};
             filters['_id'] = [id, 'eq', false];
-            ssf = _objectSpread$i({
+            ssf = _objectSpread$h({
               pagination: {
                 current: 1,
                 pageSize: 1
@@ -27140,11 +27333,11 @@ function useTableData (_ref) {
             prefilter = _args3.length > 1 && _args3[1] !== undefined ? _args3[1] : globalFilter;
             refresh = _args3.length > 2 ? _args3[2] : undefined;
             clearSelection = _args3.length > 3 ? _args3[3] : undefined;
-            setState(_objectSpread$i(_objectSpread$i({}, state), {}, {
+            setState(_objectSpread$h(_objectSpread$h({}, state), {}, {
               loading: true
             }));
             currentData = initData;
-            filterData = _objectSpread$i(_objectSpread$i(_objectSpread$i(_objectSpread$i({}, prefilter.search), ((_configuration$filter10 = configuration.filter) === null || _configuration$filter10 === void 0 || (_configuration$filter10 = _configuration$filter10.select) === null || _configuration$filter10 === void 0 ? void 0 : _configuration$filter10.applyDefaultValue) !== false || ((_configuration$filter11 = configuration.filter) === null || _configuration$filter11 === void 0 || (_configuration$filter11 = _configuration$filter11.select) === null || _configuration$filter11 === void 0 ? void 0 : _configuration$filter11.defaultValue) !== ((_prefilter$select = prefilter.select) === null || _prefilter$select === void 0 || (_prefilter$select = _prefilter$select[(_configuration$filter12 = (_configuration$filter13 = configuration.filter) === null || _configuration$filter13 === void 0 || (_configuration$filter13 = _configuration$filter13.select) === null || _configuration$filter13 === void 0 ? void 0 : _configuration$filter13.filterField) !== null && _configuration$filter12 !== void 0 ? _configuration$filter12 : '']) === null || _prefilter$select === void 0 ? void 0 : _prefilter$select[0]) ? prefilter.select : undefined), prefilter.timeStamp), prefilter["default"]); //remove all null values
+            filterData = _objectSpread$h(_objectSpread$h(_objectSpread$h(_objectSpread$h({}, prefilter.search), ((_configuration$filter10 = configuration.filter) === null || _configuration$filter10 === void 0 || (_configuration$filter10 = _configuration$filter10.select) === null || _configuration$filter10 === void 0 ? void 0 : _configuration$filter10.applyDefaultValue) !== false || ((_configuration$filter11 = configuration.filter) === null || _configuration$filter11 === void 0 || (_configuration$filter11 = _configuration$filter11.select) === null || _configuration$filter11 === void 0 ? void 0 : _configuration$filter11.defaultValue) !== ((_prefilter$select = prefilter.select) === null || _prefilter$select === void 0 || (_prefilter$select = _prefilter$select[(_configuration$filter12 = (_configuration$filter13 = configuration.filter) === null || _configuration$filter13 === void 0 || (_configuration$filter13 = _configuration$filter13.select) === null || _configuration$filter13 === void 0 ? void 0 : _configuration$filter13.filterField) !== null && _configuration$filter12 !== void 0 ? _configuration$filter12 : '']) === null || _prefilter$select === void 0 ? void 0 : _prefilter$select[0]) ? prefilter.select : undefined), prefilter.timeStamp), prefilter["default"]); //remove all null values
             filterData = Object.fromEntries(Object.entries(filterData).filter(function (_ref6) {
               var _ref7 = _slicedToArray(_ref6, 2);
                 _ref7[0];
@@ -27152,7 +27345,7 @@ function useTableData (_ref) {
               return v != null;
             }));
             currentFilterHash = objectHash(filterData);
-            currentPagination = _objectSpread$i(_objectSpread$i({}, p.pagination), {}, {
+            currentPagination = _objectSpread$h(_objectSpread$h({}, p.pagination), {}, {
               current: currentFilterHash == filterHash.current ? p.pagination.current : 1
             });
             filterHash.current = currentFilterHash;
@@ -27160,7 +27353,7 @@ function useTableData (_ref) {
               _context3.next = 20;
               break;
             }
-            ssf = _objectSpread$i({
+            ssf = _objectSpread$h({
               pagination: currentPagination,
               columns: configuration.columns,
               filters: filterData,
@@ -27174,7 +27367,7 @@ function useTableData (_ref) {
             data = _context3.sent;
             currentUrl = apiHandler.getReadListUrl(parentMapping || configuration.mapping, mapping, ssf);
             currentData = data.data;
-            currentPagination = _objectSpread$i(_objectSpread$i({}, currentPagination), {}, {
+            currentPagination = _objectSpread$h(_objectSpread$h({}, currentPagination), {}, {
               total: data.total
             });
             _context3.next = 29;
@@ -27191,7 +27384,7 @@ function useTableData (_ref) {
             currentData = _data3.data;
             setInitData(currentData);
           case 26:
-            _applyFilterAndSortat2 = applyFilterAndSortation(_objectSpread$i(_objectSpread$i({}, p), {}, {
+            _applyFilterAndSortat2 = applyFilterAndSortation(_objectSpread$h(_objectSpread$h({}, p), {}, {
               pagination: currentPagination,
               filters: filterData,
               data: currentData,
@@ -27200,11 +27393,11 @@ function useTableData (_ref) {
             currentData = _data4;
             currentPagination = pagination;
           case 29:
-            setState(_objectSpread$i(_objectSpread$i({}, state), {}, {
+            setState(_objectSpread$h(_objectSpread$h({}, state), {}, {
               loading: false,
               data: currentData,
               pagination: currentPagination,
-              mappingData: _objectSpread$i(_objectSpread$i({}, parentData), {}, {
+              mappingData: _objectSpread$h(_objectSpread$h({}, parentData), {}, {
                 prefilter: prefilter
               }),
               currentFetchUrl: currentUrl
@@ -27226,7 +27419,7 @@ function useTableData (_ref) {
     };
   }();
   var onSelect = function onSelect(keys) {
-    setState(_objectSpread$i(_objectSpread$i({}, state), {}, {
+    setState(_objectSpread$h(_objectSpread$h({}, state), {}, {
       selected: keys
     }));
   };
@@ -27237,7 +27430,7 @@ function useTableData (_ref) {
       return _regeneratorRuntime.wrap(function _callee4$(_context5) {
         while (1) switch (_context5.prev = _context5.next) {
           case 0:
-            setState(_objectSpread$i(_objectSpread$i({}, state), {}, {
+            setState(_objectSpread$h(_objectSpread$h({}, state), {}, {
               deleting: true
             }));
             newData = _toConsumableArray(state.data);
@@ -27277,7 +27470,7 @@ function useTableData (_ref) {
                     } finally {
                       _iterator.f();
                     }
-                    mappingData = _objectSpread$i(_objectSpread$i(_objectSpread$i({}, mappingData), state.mappingData), mapToggle);
+                    mappingData = _objectSpread$h(_objectSpread$h(_objectSpread$h({}, mappingData), state.mappingData), mapToggle);
                     deleteResult = undefined;
                     _context4.prev = 7;
                     if (!(userPermissions && !root.actions.userHasPermission(userPermissions))) {
@@ -27367,12 +27560,12 @@ function useTableData (_ref) {
               break;
             }
             _context5.next = 25;
-            return apiHandler.readList(parentMapping || configuration.mapping, mapping, _objectSpread$i({
-              pagination: _objectSpread$i(_objectSpread$i({}, state.pagination), {}, {
+            return apiHandler.readList(parentMapping || configuration.mapping, mapping, _objectSpread$h({
+              pagination: _objectSpread$h(_objectSpread$h({}, state.pagination), {}, {
                 current: current
               }),
               columns: configuration.columns,
-              filters: _objectSpread$i(_objectSpread$i(_objectSpread$i(_objectSpread$i(_objectSpread$i(_objectSpread$i({}, filterData.filters), globalFilter.search), !(configuration !== null && configuration !== void 0 && (_configuration$filter16 = configuration.filter) !== null && _configuration$filter16 !== void 0 && (_configuration$filter16 = _configuration$filter16.toggle) !== null && _configuration$filter16 !== void 0 && _configuration$filter16.inQuery) ? globalFilter.toggle : undefined), globalFilter.select), globalFilter.timeStamp), globalFilter["default"]),
+              filters: _objectSpread$h(_objectSpread$h(_objectSpread$h(_objectSpread$h(_objectSpread$h(_objectSpread$h({}, filterData.filters), globalFilter.search), !(configuration !== null && configuration !== void 0 && (_configuration$filter16 = configuration.filter) !== null && _configuration$filter16 !== void 0 && (_configuration$filter16 = _configuration$filter16.toggle) !== null && _configuration$filter16 !== void 0 && _configuration$filter16.inQuery) ? globalFilter.toggle : undefined), globalFilter.select), globalFilter.timeStamp), globalFilter["default"]),
               sorter: filterData.sorter
             }, configuration !== null && configuration !== void 0 && (_configuration$filter17 = configuration.filter) !== null && _configuration$filter17 !== void 0 && (_configuration$filter17 = _configuration$filter17.toggle) !== null && _configuration$filter17 !== void 0 && _configuration$filter17.inQuery ? {
               genericProps: globalFilter.toggle
@@ -27383,11 +27576,11 @@ function useTableData (_ref) {
             total = data.total;
           case 28:
             setInitData(newInitData);
-            setState(_objectSpread$i(_objectSpread$i({}, state), {}, {
+            setState(_objectSpread$h(_objectSpread$h({}, state), {}, {
               selected: [],
               deleting: false,
               data: newData,
-              pagination: _objectSpread$i(_objectSpread$i({}, state.pagination), {}, {
+              pagination: _objectSpread$h(_objectSpread$h({}, state.pagination), {}, {
                 current: current === 0 ? 1 : current,
                 total: total
               })
@@ -27408,14 +27601,14 @@ function useTableData (_ref) {
       LOG$2.error(new DivaError('No global select filter defiend'));
       return;
     }
-    var newGlobalFilter = _objectSpread$i({}, globalFilter);
+    var newGlobalFilter = _objectSpread$h({}, globalFilter);
     if (value !== null && value !== void 0 && value.length) {
       newGlobalFilter.select = _defineProperty({}, configuration.filter.select.filterField, Array.isArray(value) ? value : [value]);
     } else {
       newGlobalFilter.select = {};
     }
     setGlobaFilter(newGlobalFilter);
-    onChange(_objectSpread$i({
+    onChange(_objectSpread$h({
       pagination: state.pagination
     }, filterData), newGlobalFilter);
   };
@@ -27429,11 +27622,11 @@ function useTableData (_ref) {
     configuration.filter.toggle.fields.forEach(function (f) {
       return toggleFilter[f] = [configuration.filter.toggle.globalValue ? root.getGlobalValue(configuration.filter.toggle.globalValue) : true, 'eq', !configuration.filter.toggle.isAnd];
     });
-    var newGlobalFilter = _objectSpread$i(_objectSpread$i({}, globalFilter), {}, {
+    var newGlobalFilter = _objectSpread$h(_objectSpread$h({}, globalFilter), {}, {
       toggle: globalFilter.toggle ? undefined : toggleFilter
     });
     setGlobaFilter(newGlobalFilter);
-    onChange(_objectSpread$i({
+    onChange(_objectSpread$h({
       pagination: state.pagination
     }, filterData), newGlobalFilter, undefined, true);
   };
@@ -27446,7 +27639,7 @@ function useTableData (_ref) {
       LOG$2.error(new DivaError('No global search filter defiend'));
       return;
     }
-    var newGlobalFilter = _objectSpread$i(_objectSpread$i({}, globalFilter), {}, {
+    var newGlobalFilter = _objectSpread$h(_objectSpread$h({}, globalFilter), {}, {
       search: {}
     });
     if (value) {
@@ -27460,7 +27653,7 @@ function useTableData (_ref) {
       });
     }
     setGlobaFilter(newGlobalFilter);
-    onChange(_objectSpread$i({
+    onChange(_objectSpread$h({
       pagination: state.pagination
     }, filterData), newGlobalFilter);
   };
@@ -27470,17 +27663,17 @@ function useTableData (_ref) {
       LOG$2.error(new DivaError('No global period filter defiend'));
       return;
     }
-    var newGlobalFilter = _objectSpread$i({}, globalFilter);
+    var newGlobalFilter = _objectSpread$h({}, globalFilter);
     newGlobalFilter.timeStamp = {
       fromTimeStamp: [from],
       toTimeStamp: [to]
     };
     setGlobaFilter(newGlobalFilter);
-    onChange(_objectSpread$i({
+    onChange(_objectSpread$h({
       pagination: state.pagination
     }, filterData), newGlobalFilter);
   };
-  return _objectSpread$i(_objectSpread$i({}, state), {}, {
+  return _objectSpread$h(_objectSpread$h({}, state), {}, {
     title: title,
     configuration: configuration,
     columns: mapColumns(configuration, root.actions.userHasPermission, onUpdate, selectedData, globalFilter),
@@ -27522,8 +27715,8 @@ function StandardTable (_ref) {
   });
 }
 
-function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function Table (props) {
   var root = useStore();
   var variant = useMemo(function () {
@@ -27531,15 +27724,15 @@ function Table (props) {
     return config.variant;
   }, [props.id]);
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [(variant == 'Standard' || !variant) && /*#__PURE__*/jsx(StandardTable, _objectSpread$h({}, props)), variant == 'CatalogTable' && /*#__PURE__*/jsx(CatalogTable, _objectSpread$h({}, props))]
+    children: [(variant == 'Standard' || !variant) && /*#__PURE__*/jsx(StandardTable, _objectSpread$g({}, props)), variant == 'CatalogTable' && /*#__PURE__*/jsx(CatalogTable, _objectSpread$g({}, props))]
   });
 }
 
 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$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function useAGGrid (_ref) {
   var id = _ref.id,
     filter = _ref.filter,
@@ -27633,7 +27826,7 @@ function useAGGrid (_ref) {
                     value = _ref3[1];
                   if (_idx == 0) {
                     var _supplierData$Options2, _supplierData$Options3, _supplierData$Optionv2, _supplierData$Optionv3;
-                    rdat.push(_objectSpread$g(_objectSpread$g({}, rd), {}, {
+                    rdat.push(_objectSpread$f(_objectSpread$f({}, rd), {}, {
                       grouping: [idx.toString()]
                     }));
                     var sp = key.split(':');
@@ -27768,7 +27961,7 @@ function useAGGrid (_ref) {
   };
 }
 
-var overlay$1 = "overlay-lm0tm";
+var overlay = "overlay-lm0tm";
 var loader = "loader-LaXZy";
 var flex = "flex-yQdda";
 var bar = "bar-Y663f";
@@ -27776,8 +27969,8 @@ var value = "value-FCA-6";
 var css_248z$a = ".overlay-lm0tm {\n  position: absolute;\n  z-index: 1;\n  background-color: rgba(247,247,247,0.45882);\n  height: 60vh;\n  width: 100%;\n}\n.loader-LaXZy {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 50px;\n  height: 50px;\n  border: 3px solid rgba(0, 0, 0, 0.3);\n  border-radius: 50%;\n  border-top-color: #fff;\n  animation: spin-qUdpu 1s ease-in-out infinite;\n  -webkit-animation: spin-qUdpu 1s ease-in-out infinite;\n}\n.flex-yQdda {\n  display: flex;\n}\n\n.bar-Y663f {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  margin-top: 7%;\n}\n\n.value-FCA-6 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n@keyframes spin-qUdpu {\n  to {\n    -webkit-transform: rotate(360deg);\n  }\n}\n";
 styleInject(css_248z$a);
 
-function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var AGChart = function AGChart(_ref) {
   var data = _ref.data;
   var groupedData = [];
@@ -27785,11 +27978,11 @@ var AGChart = function AGChart(_ref) {
   data.forEach(function (dt) {
     if (dt.count == 0) return;
     if (groupedData.length > dt.grouping[0]) {
-      groupedData[dt.grouping[0]].push(_objectSpread$f(_objectSpread$f({}, dt), {}, {
+      groupedData[dt.grouping[0]].push(_objectSpread$e(_objectSpread$e({}, dt), {}, {
         count: Number(dt.count)
       }));
     } else {
-      groupedData.push([_objectSpread$f(_objectSpread$f({}, dt), {}, {
+      groupedData.push([_objectSpread$e(_objectSpread$e({}, dt), {}, {
         count: Number(dt.count)
       })]);
     }
@@ -27830,8 +28023,8 @@ var AGChart = function AGChart(_ref) {
   });
 };
 
-function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var AGGrid = /*#__PURE__*/memo(function (_ref) {
   var id = _ref.id,
     filter = _ref.filter,
@@ -27924,7 +28117,7 @@ var AGGrid = /*#__PURE__*/memo(function (_ref) {
           });
         });
       }
-      return _objectSpread$e(_objectSpread$e({}, column), {}, {
+      return _objectSpread$d(_objectSpread$d({}, column), {}, {
         cellRenderer: renderer
       });
     });
@@ -28051,7 +28244,7 @@ var AGGrid = /*#__PURE__*/memo(function (_ref) {
       checkedChildren: "Chart",
       unCheckedChildren: "Grid"
     }), /*#__PURE__*/jsx("div", {
-      className: loading || state.loading ? overlay$1 : undefined,
+      className: loading || state.loading ? overlay : undefined,
       children: /*#__PURE__*/jsx("div", {
         className: loading || state.loading ? loader : undefined
       })
@@ -28194,8 +28387,8 @@ var CustomText = function CustomText(_ref) {
 };
 var CustomText$1 = observer(CustomText);
 
-function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper$1(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$1(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$1(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$1(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$1(r, a) : void 0; } }
 function _arrayLikeToArray$1(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; }
@@ -28258,7 +28451,7 @@ function useFilterBoxData (id) {
     } finally {
       _iterator.f();
     }
-    return _objectSpread$d(_objectSpread$d({}, state), ob);
+    return _objectSpread$c(_objectSpread$c({}, state), ob);
   }
   return {
     configuration: configuration,
@@ -28272,8 +28465,8 @@ function useFilterBoxData (id) {
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(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(r, a) : void 0; } }
 function _arrayLikeToArray(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$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 FilterBox = /*#__PURE__*/memo(function (_ref) {
   var id = _ref.id,
     onChangeFilter = _ref.onChangeFilter,
@@ -28301,7 +28494,7 @@ var FilterBox = /*#__PURE__*/memo(function (_ref) {
           }), /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx(Select, {
             mode: "single",
             apiInterface: filter.requestOptions,
-            wholeData: _objectSpread$c(_objectSpread$c({}, state.filter), {}, {
+            wholeData: _objectSpread$b(_objectSpread$b({}, state.filter), {}, {
               tab: tab
             }),
             mapping: filter.requestMapping,
@@ -28533,8 +28726,8 @@ var FilterBox = /*#__PURE__*/memo(function (_ref) {
   return false;
 });
 
-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; }
+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 useUIBuilderData (id) {
   var save = undefined;
   var root = useStore();
@@ -28566,7 +28759,7 @@ function useUIBuilderData (id) {
     var configuration = _useMemo.configuration;
   useEffect(function () {
     root.dataStore.getApi2SessionGuid().then(function (res) {
-      return setFilter(_objectSpread$b(_objectSpread$b({}, filter), {}, {
+      return setFilter(_objectSpread$a(_objectSpread$a({}, filter), {}, {
         sessionGuid: res
       }));
     });
@@ -28589,8 +28782,8 @@ function useUIBuilderData (id) {
   };
 }
 
-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$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function UIBuilder(_ref) {
   var id = _ref.id;
   var state = useUIBuilderData(id);
@@ -28617,7 +28810,7 @@ function UIBuilder(_ref) {
           override = {
             value: newFilter[item.field],
             setValue: function setValue(newVal) {
-              var newFilter = _objectSpread$a({}, state.filter);
+              var newFilter = _objectSpread$9({}, state.filter);
               newFilter[item.field] = newVal;
               state.setFilter(newFilter);
             }
@@ -28665,7 +28858,7 @@ function UIBuilder(_ref) {
       case 'AGGrid':
         return /*#__PURE__*/jsx(AGGrid, {
           id: item.id,
-          filter: _objectSpread$a({
+          filter: _objectSpread$9({
             optionCodices: JSON.stringify(state.data)
           }, state.filter),
           override: item.id == 'AGGridTopOptionValues' ? {
@@ -28825,8 +29018,8 @@ var OrgItem = function OrgItem(_ref) {
 };
 var OrgItem$1 = observer(OrgItem);
 
-function ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function useTransformJson (_ref) {
   var id = _ref.id;
   var _useState = useState(),
@@ -28892,7 +29085,7 @@ function useTransformJson (_ref) {
   }();
   var _transformData = function transformData(data, itemChain, parentOrgId) {
     var _data$children;
-    return _objectSpread$9(_objectSpread$9({}, data), {}, {
+    return _objectSpread$8(_objectSpread$8({}, data), {}, {
       label: /*#__PURE__*/jsx(OrgItem$1, {
         data: data,
         configuration: configuration,
@@ -29553,8 +29746,8 @@ function useCatalogEditor (id) {
   };
 }
 
-function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function DragDropUpload(_ref) {
   var api2Params = _ref.api2Params,
     catalogId = _ref.catalogId,
@@ -29659,7 +29852,7 @@ function DragDropUpload(_ref) {
     children: [importStarted && /*#__PURE__*/jsx("p", {
       children: t('backoffice.catalogeditor.classimportstarted')
     }), !importStarted && /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsxs(Dragger, _objectSpread$8(_objectSpread$8({}, props), {}, {
+      children: [/*#__PURE__*/jsxs(Dragger, _objectSpread$7(_objectSpread$7({}, props), {}, {
         children: [/*#__PURE__*/jsx("p", {
           className: "ant-upload-drag-icon",
           children: /*#__PURE__*/jsx(InboxOutlined, {})
@@ -29876,15 +30069,20 @@ function CatalogEditor(_ref) {
 }
 var CatalogEditor$1 = observer(CatalogEditor);
 
-function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function Spreadsheet$1 (props) {
+function ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function SpreadsheetWrapper(props) {
+  var _root$contentStore$bo, _root$contentStore$ri;
   var root = useStore();
-  return /*#__PURE__*/jsx(Spreadsheet$2, _objectSpread$7(_objectSpread$7({}, props), {}, {
+  return /*#__PURE__*/jsx(Spreadsheet$1, _objectSpread$6(_objectSpread$6({}, props), {}, {
     darkMode: root.contentStore.theme == 'darkmode',
-    jwt: root.dataStore.jwt
+    jwt: root.dataStore.jwt,
+    refSecondaryGrids: [(_root$contentStore$bo = root.contentStore.bottomToolBar.toolbarElement) !== null && _root$contentStore$bo !== void 0 ? _root$contentStore$bo : undefined, (_root$contentStore$ri = root.contentStore.rightToolBar.toolbarElement) !== null && _root$contentStore$ri !== void 0 ? _root$contentStore$ri : undefined].filter(function (element) {
+      return element !== undefined;
+    })
   }));
 }
+var Spreadsheet = observer(SpreadsheetWrapper);
 
 function useNavigation$1 () {
   var root = useStore();
@@ -30035,6 +30233,14 @@ function TablePackages () {
       organizationId: organizationId
     };
   }, [organizationId]);
+  var preFilter = useMemo(function () {
+    return {
+      colId: 'organizationId',
+      filterType: 'text',
+      type: 'equals',
+      filter: organizationId
+    };
+  }, [organizationId]);
   useEffect(function () {
     //remove the packages submenu when opening this module
     root.contentStore.removeAdditionalElement('idmenricher');
@@ -30042,7 +30248,7 @@ function TablePackages () {
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Descriptions$1, {
       title: t('backoffice.menu.items.label.IDMEnricherTablePackages')
-    }), /*#__PURE__*/jsx(Spreadsheet$1, {
+    }), /*#__PURE__*/jsx(Spreadsheet, {
       gridId: 'packages-grid',
       applicationData: applicationData,
       rowActions: [{
@@ -30055,13 +30261,31 @@ function TablePackages () {
           var selectedNodes = _ref2.selectedNodes;
           return !selectedNodes[0].data.basedCatalogId && !selectedNodes[0].data.basedPackageId || !selectedNodes[0].data.name;
         }
+      }, {
+        icon: /*#__PURE__*/jsx(DownloadOutlined, {}),
+        action: function () {
+          var _action = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
+            var selectedNodes, url;
+            return _regeneratorRuntime.wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  selectedNodes = _ref3.selectedNodes;
+                  url = apiConfig.enricherService + '/packages/' + selectedNodes[0].data._id + '/catalog';
+                  _context.next = 4;
+                  return downloadFile(url, root.dataStore.jwt, 'application/xml', selectedNodes[0].data.name + '.xml');
+                case 4:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          function action(_x) {
+            return _action.apply(this, arguments);
+          }
+          return action;
+        }()
       }],
-      preFilter: {
-        colId: 'organizationId',
-        filterType: 'text',
-        type: 'equals',
-        filter: organizationId
-      },
+      preFilter: preFilter,
       configuration: {
         type: 'dotnetSSM',
         apiInterface: {
@@ -30076,8 +30300,8 @@ function TablePackages () {
         colDef: [{
           field: 'isPublished',
           //the cell should refresh on changes of this fields
-          valueGetter: function valueGetter(_ref3) {
-            var data = _ref3.data;
+          valueGetter: function valueGetter(_ref4) {
+            var data = _ref4.data;
             return {
               isPublished: data === null || data === void 0 ? void 0 : data.isPublished,
               name: data === null || data === void 0 ? void 0 : data.name,
@@ -30102,8 +30326,8 @@ function TablePackages () {
           headerName: 'backoffice.idmEnricher.packages.label.catalogId',
           field: 'basedCatalogId',
           cellDataType: 'lookup',
-          editable: function editable(_ref4) {
-            var data = _ref4.data;
+          editable: function editable(_ref5) {
+            var data = _ref5.data;
             return !data.basedCatalogId && !data.basedPackageId;
           },
           customParams: {
@@ -30120,8 +30344,8 @@ function TablePackages () {
           headerName: 'backoffice.idmEnricher.packages.label.packageId',
           field: 'basedPackageId',
           cellDataType: 'lookup',
-          editable: function editable(_ref5) {
-            var data = _ref5.data;
+          editable: function editable(_ref6) {
+            var data = _ref6.data;
             return !data.basedCatalogId && !data.basedPackageId;
           },
           customParams: {
@@ -30412,9 +30636,9 @@ function useModule$1 (currentModules) {
       startWidth: 600,
       defaultPinned: true
     });
-    root.contentStore.tools = tools;
+    root.contentStore.rightToolBar.tools = tools;
     return function () {
-      root.contentStore.tools = [];
+      root.contentStore.rightToolBar.tools = [];
     };
   }, [packageId]);
   return {
@@ -30456,7 +30680,7 @@ function TableProperties () {
           })
         })]
       })
-    }), /*#__PURE__*/jsx(Spreadsheet$1, {
+    }), /*#__PURE__*/jsx(Spreadsheet, {
       gridId: 'crud-grid_properties',
       applicationData: applicationData,
       configuration: {
@@ -31117,6 +31341,19 @@ var RenamingTable = function RenamingTable(_ref) {
       packageId: packageId
     };
   }, [packageId]);
+  var preFilter = useMemo(function () {
+    return type === 'options' && selectedFeature ? {
+      filterType: 'text',
+      type: 'equals',
+      colId: 'featureNo',
+      filter: selectedFeature === null || selectedFeature === void 0 ? void 0 : selectedFeature.featureNo
+    } : type === 'items' && selectedSerie ? {
+      filterType: 'number',
+      type: 'equals',
+      colId: 'serieNo',
+      filter: selectedSerie === null || selectedSerie === void 0 ? void 0 : selectedSerie.serieNo
+    } : undefined;
+  }, [type, selectedSerie, selectedFeature]);
   var showTable = function showTable() {
     return !['items', 'options'].includes(type) || type === 'items' && selectedSerie || type === 'options' && selectedFeature;
   };
@@ -31146,20 +31383,10 @@ var RenamingTable = function RenamingTable(_ref) {
           })]
         })]
       })
-    }), showTable() && /*#__PURE__*/jsx(Spreadsheet$1, {
+    }), showTable() && /*#__PURE__*/jsx(Spreadsheet, {
       gridId: 'renaming-grid_' + type + (type === 'options' ? '_' + (selectedFeature === null || selectedFeature === void 0 ? void 0 : selectedFeature.featureNo) : type === 'items' ? '_' + (selectedSerie === null || selectedSerie === void 0 ? void 0 : selectedSerie.serieNo) : ''),
       applicationData: applicationData,
-      preFilter: type === 'options' && selectedFeature ? {
-        filterType: 'text',
-        type: 'equals',
-        colId: 'featureNo',
-        filter: selectedFeature === null || selectedFeature === void 0 ? void 0 : selectedFeature.featureNo
-      } : type === 'items' && selectedSerie ? {
-        filterType: 'number',
-        type: 'equals',
-        colId: 'serieNo',
-        filter: selectedSerie === null || selectedSerie === void 0 ? void 0 : selectedSerie.serieNo
-      } : undefined,
+      preFilter: preFilter,
       configuration: {
         type: 'dotnetSSM',
         apiInterface: {
@@ -31623,7 +31850,7 @@ var ExclusivityTable = function ExclusivityTable(_ref) {
           })]
         })]
       })
-    }), showTable() && /*#__PURE__*/jsx(Spreadsheet$1, {
+    }), showTable() && /*#__PURE__*/jsx(Spreadsheet, {
       gridId: 'crud-grid_exclusivity_' + type + ((_selectedSerie$series = selectedSerie === null || selectedSerie === void 0 ? void 0 : selectedSerie.seriesName.DE) !== null && _selectedSerie$series !== void 0 ? _selectedSerie$series : ''),
       applicationData: applicationData,
       configuration: {
@@ -31669,6 +31896,12 @@ function TableTabGroups () {
     organizationId = _useModule.organizationId,
     updateNavigation = _useModule.updateNavigation,
     apiConfig = _useModule.apiConfig;
+  var applicationData = useMemo(function () {
+    return {
+      packageId: packageId,
+      organizationId: organizationId
+    };
+  }, [packageId, organizationId]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Descriptions$1, {
       title: /*#__PURE__*/jsxs("div", {
@@ -31686,12 +31919,9 @@ function TableTabGroups () {
           })
         })]
       })
-    }), /*#__PURE__*/jsx(Spreadsheet$1, {
+    }), /*#__PURE__*/jsx(Spreadsheet, {
       gridId: 'crud-grid_tabgroups',
-      applicationData: {
-        organizationId: organizationId,
-        packageId: packageId
-      },
+      applicationData: applicationData,
       configuration: {
         type: 'dotnetSSM',
         apiInterface: {
@@ -31823,16 +32053,6 @@ function Content$2() {
   });
 }
 
-function ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function Spreadsheet (props) {
-  var root = useStore();
-  return /*#__PURE__*/jsx(Spreadsheet$2, _objectSpread$6(_objectSpread$6({}, props), {}, {
-    darkMode: root.contentStore.theme == 'darkmode',
-    jwt: root.dataStore.jwt
-  }));
-}
-
 function useNavigation () {
   var root = useStore();
   var _useSearchParams = useSearchParams(),
@@ -31860,6 +32080,160 @@ function useNavigation () {
   };
 }
 
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function UploadButton (_ref) {
+  var action = _ref.action,
+    title = _ref.title,
+    disabled = _ref.disabled,
+    contentType = _ref.contentType,
+    setProgress = _ref.setProgress;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var root = useStore();
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    fileList = _useState2[0],
+    setFileList = _useState2[1];
+  var handleUploadChange = function handleUploadChange(info) {
+    var status = info.file.status;
+    if (status === 'done') {
+      message.success("".concat(info.file.name, " file uploaded successfully."));
+      setFileList([]); // Clear the file list
+      setProgress('SUCCESS'); // Mark upload as successful
+    } else if (status === 'error') {
+      message.error("".concat(info.file.name, " file upload failed."));
+      setProgress('ERROR'); // Mark upload as failed
+    } else if (status === 'removed') {
+      setFileList([]); // Clear the file list
+      setProgress(undefined); // Reset the progress state
+    } else {
+      setProgress('INPROGRESS'); // Mark upload as in progress
+      setFileList(info.fileList); // Update the file list during the upload
+    }
+  };
+  var props = {
+    name: 'file',
+    action: action,
+    headers: {
+      ContentType: contentType,
+      Authorization: "Bearer ".concat(root.dataStore.jwt)
+    },
+    multiple: false,
+    onChange: handleUploadChange,
+    fileList: fileList
+  };
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsx(Upload$2, _objectSpread$5(_objectSpread$5({}, props), {}, {
+      children: /*#__PURE__*/jsx(Button$1, {
+        icon: /*#__PURE__*/jsx(UploadOutlined$1, {}),
+        disabled: disabled,
+        children: title !== null && title !== void 0 ? title : t('backoffice.idmEnricher.import.upload')
+      })
+    }))
+  });
+}
+
+function IDMImportForm (_ref) {
+  var idmService = _ref.idmService,
+    organizationId = _ref.organizationId,
+    setProgress = _ref.setProgress,
+    progress = _ref.progress;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    name = _useState2[0],
+    setName = _useState2[1];
+  var uploadAction = "".concat(idmService, "/v3.0/catalogs/upload?organizationId=").concat(organizationId, "&name=").concat(encodeURIComponent(name));
+  return /*#__PURE__*/jsxs(Form$1, {
+    name: "basic",
+    children: [/*#__PURE__*/jsx(Form$1.Item, {
+      label: "Name",
+      name: "name",
+      rules: [{
+        required: true,
+        message: t('backoffice.idmEnricher.import.namerequired')
+      }],
+      children: /*#__PURE__*/jsx(Input, {
+        onChange: function onChange(e) {
+          return setName(e.target.value);
+        },
+        value: name
+      })
+    }), /*#__PURE__*/jsx(Form$1.Item, {
+      children: /*#__PURE__*/jsx(UploadButton, {
+        action: uploadAction,
+        contentType: "multipart/form-data",
+        setProgress: setProgress,
+        disabled: !name.trim()
+      })
+    }), /*#__PURE__*/jsxs(Form$1.Item, {
+      style: {
+        display: !progress || progress === 'INPROGRESS' ? 'none' : 'block'
+      },
+      children: [progress === 'SUCCESS' && /*#__PURE__*/jsx(Alert, {
+        message: t('backoffice.idmEnricher.import.uploadsuccess'),
+        type: "success",
+        showIcon: true
+      }), progress === 'ERROR' && /*#__PURE__*/jsx(Alert, {
+        message: t('backoffice.idmEnricher.import.uploaderror'),
+        type: "error",
+        showIcon: true
+      })]
+    })]
+  });
+}
+
+function OpenModalButton (_ref) {
+  var title = _ref.title,
+    type = _ref.type,
+    idmService = _ref.idmService,
+    organizationId = _ref.organizationId;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isModalOpen = _useState2[0],
+    setIsModalOpen = _useState2[1];
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    progress = _useState4[0],
+    setProgress = _useState4[1];
+  var showModal = function showModal() {
+    setIsModalOpen(true);
+  };
+  var handleOk = function handleOk() {
+    setIsModalOpen(false);
+  };
+  var handleCancel = function handleCancel() {
+    setIsModalOpen(false);
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Button$1, {
+      type: "primary",
+      onClick: showModal,
+      children: title
+    }), /*#__PURE__*/jsx(Modal$3, {
+      title: title,
+      open: isModalOpen,
+      onOk: handleOk,
+      onCancel: handleCancel,
+      okText: progress === 'INPROGRESS' ? t('backoffice.idmEnricher.import.inprogress') : 'OK',
+      okButtonProps: {
+        disabled: progress === 'INPROGRESS'
+      } // Disable the button if progress is 'INPROGRESS'
+      ,
+      children: type === 'IDM_IMPORT' && /*#__PURE__*/jsx(IDMImportForm, {
+        setProgress: setProgress,
+        progress: progress,
+        idmService: idmService,
+        organizationId: organizationId
+      })
+    })]
+  });
+}
+
 function TableCatalogs () {
   var root = useStore();
   var _useTranslation = useTranslation(),
@@ -31960,13 +32334,33 @@ function TableCatalogs () {
       organizationId: organizationId
     };
   }, [organizationId]);
+  var preFilter = useMemo(function () {
+    return {
+      colId: 'organizationId',
+      filterType: 'text',
+      type: 'equals',
+      filter: organizationId
+    };
+  }, [organizationId]);
   useEffect(function () {
     //remove the packages submenu when opening this module
     root.contentStore.removeAdditionalElement('idmenricher');
   }, []);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Descriptions$1, {
-      title: t('backoffice.menu.items.label.IDMEditorTableCatalogs')
+      title: /*#__PURE__*/jsxs("div", {
+        children: [t('backoffice.menu.items.label.IDMEditorTableCatalogs'), /*#__PURE__*/jsx(Space$1, {
+          style: {
+            "float": 'right'
+          },
+          children: /*#__PURE__*/jsx(OpenModalButton, {
+            title: "IDM Import",
+            type: "IDM_IMPORT",
+            idmService: apiConfig.idmService,
+            organizationId: organizationId
+          })
+        })]
+      })
     }), /*#__PURE__*/jsx(Spreadsheet, {
       gridId: 'catalogs-grid',
       applicationData: applicationData,
@@ -31976,13 +32370,33 @@ function TableCatalogs () {
           var selectedNodes = _ref.selectedNodes;
           updateNavigation(selectedNodes[0].data._id, ['series']);
         }
+      }, {
+        icon: /*#__PURE__*/jsx(DownloadOutlined$1, {}),
+        action: function () {
+          var _action = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
+            var selectedNodes, context, url;
+            return _regeneratorRuntime.wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  selectedNodes = _ref2.selectedNodes, context = _ref2.context;
+                  url = apiConfig.idmService + '/v3.0/catalogs/' + selectedNodes[0].data._id + '/complete';
+                  _context.next = 4;
+                  return downloadFile(url, root.dataStore.jwt, 'application/xml', selectedNodes[0].data.name + '.xml');
+                case 4:
+                  context.refresh();
+                case 5:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          function action(_x) {
+            return _action.apply(this, arguments);
+          }
+          return action;
+        }()
       }],
-      preFilter: {
-        colId: 'organizationId',
-        filterType: 'text',
-        type: 'equals',
-        filter: organizationId
-      },
+      preFilter: preFilter,
       configuration: {
         type: 'dotnetSSM',
         apiInterface: {
@@ -32642,9 +33056,9 @@ function useModule (currentModules) {
       startWidth: 600,
       defaultPinned: true
     });
-    root.contentStore.tools = tools;
+    root.contentStore.rightToolBar.tools = tools;
     return function () {
-      root.contentStore.tools = [];
+      root.contentStore.rightToolBar.tools = [];
     };
   }, [catalogId]);
   return {
@@ -32655,18 +33069,14 @@ function useModule (currentModules) {
   };
 }
 
-function TableItems () {
+function Items(_ref) {
+  var organizationId = _ref.organizationId,
+    catalogId = _ref.catalogId,
+    apiConfig = _ref.apiConfig,
+    selectedSerie = _ref.selectedSerie;
+  useStore();
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useModule = useModule(['items']),
-    catalogId = _useModule.catalogId,
-    updateNavigation = _useModule.updateNavigation,
-    apiConfig = _useModule.apiConfig,
-    organizationId = _useModule.organizationId;
-  var _React$useState = React.useState(),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    selectedSerie = _React$useState2[0],
-    setSelectedSerie = _React$useState2[1];
   var itemIdentification = [{
     name: t('backoffice.idmCatalogEditor.items.label.catalogArticle'),
     value: 'K'
@@ -32756,6 +33166,285 @@ function TableItems () {
     name: t('backoffice.idmCatalogEditor.items.label.sonstiges'),
     value: '26'
   }];
+  var applicationData = useMemo(function () {
+    return {
+      organizationId: organizationId,
+      catalogId: catalogId,
+      selectedSerie: selectedSerie
+    };
+  }, [organizationId, catalogId, selectedSerie]);
+  return /*#__PURE__*/jsx(Spreadsheet, {
+    gridId: 'crud-grid_items',
+    applicationData: applicationData,
+    configuration: {
+      type: 'dotnetSSM',
+      idCol: 'typeNo',
+      apiInterface: {
+        read: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/series/${selectedSerie}/items',
+        create: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/series/${selectedSerie}/items',
+        restore: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/series/${selectedSerie}/items/${typeNo}',
+        "delete": apiConfig.idmService + '/v3.0/catalogs/${catalogId}/series/${selectedSerie}/items/${typeNo}',
+        update: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/series/${selectedSerie}/items/${typeNo}'
+      },
+      dateFormat: 'LL',
+      floatingFilter: true,
+      colDef: [{
+        field: 'typeNo',
+        required: true,
+        unique: true
+      }, {
+        headerName: 'backoffice.idmCatalogEditor.items.label.priceTypeRef',
+        field: 'priceTypeRef',
+        cellDataType: 'number',
+        required: true
+      }, {
+        headerName: 'backoffice.idmCatalogEditor.general.label.sequenceNo',
+        field: 'sequenceNo',
+        cellDataType: 'number'
+      }, {
+        headerName: 'backoffice.idmCatalog.common.label.texts',
+        children: [{
+          headerName: 'backoffice.idmCatalog.general.label.shortText',
+          marryChildren: true,
+          children: [{
+            field: 'shortText.DE',
+            headerName: 'backoffice.idmEnricher.general.label.DE',
+            isDictionary: true,
+            required: true
+          }, {
+            field: 'shortText.EN',
+            headerName: 'backoffice.idmEnricher.general.label.EN',
+            isDictionary: true
+          }, {
+            field: 'shortText.FR',
+            headerName: 'backoffice.idmEnricher.general.label.FR',
+            isDictionary: true
+          }, {
+            field: 'shortText.IT',
+            headerName: 'backoffice.idmEnricher.general.label.IT',
+            isDictionary: true
+          }]
+        }, {
+          headerName: 'backoffice.idmCatalog.general.label.planningAdvice',
+          marryChildren: true,
+          children: [{
+            field: 'planningAdvice.DE',
+            headerName: 'backoffice.idmEnricher.general.label.DE',
+            isDictionary: true
+          }, {
+            field: 'planningAdvice.EN',
+            headerName: 'backoffice.idmEnricher.general.label.EN',
+            isDictionary: true
+          }, {
+            field: 'planningAdvice.FR',
+            headerName: 'backoffice.idmEnricher.general.label.FR',
+            isDictionary: true
+          }, {
+            field: 'planningAdvice.IT',
+            headerName: 'backoffice.idmEnricher.general.label.IT',
+            isDictionary: true
+          }]
+        }]
+      }, {
+        headerName: 'backoffice.idmCatalog.items.label.articleNumbers',
+        children: [{
+          headerName: 'backoffice.idmCatalogEditor.items.label.edpNumber',
+          field: 'edpNumber'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.eanNumber',
+          field: 'eanNumber'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.salesNumber',
+          field: 'salesNumber'
+        }, {
+          headerName: 'backoffice.idmCatalog.general.items.itemIdentification',
+          field: 'itemIdentification',
+          cellDataType: 'enum',
+          customParams: {
+            enumData: itemIdentification,
+            displayLabelTemplate: '${name} (${value})'
+          },
+          required: true
+        }]
+      }, {
+        headerName: 'backoffice.idmCatalog.items.label.common',
+        children: [{
+          headerName: 'backoffice.idmCatalog.general.items.typeKey',
+          field: 'typeKey',
+          cellDataType: 'enum',
+          customParams: {
+            enumData: typeKey,
+            displayLabelTemplate: '${name} (${value})'
+          },
+          required: true
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.featureClassRefNo',
+          field: 'featureClassRefNo',
+          cellDataType: 'number',
+          required: true
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.eClassNo',
+          field: 'eClassNo',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.catalogPage',
+          field: 'catalogPage'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.minimumDeliveryTime',
+          field: 'minimumDeliveryTime',
+          cellDataType: 'number'
+        }]
+      }, {
+        headerName: 'backoffice.idmCatalog.items.label.configurator',
+        children: [{
+          headerName: 'backoffice.idmCatalogEditor.items.label.partListExclusive',
+          field: 'partListExclusive',
+          cellDataType: 'boolean'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.partlist',
+          field: 'partListRef',
+          cellDataType: 'lookup',
+          customParams: {
+            nameField: 'partListRef',
+            apiInterface: {
+              read: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/partlists'
+            },
+            lookupValue: 'partlistKey',
+            lookupKey: 'partlistKey'
+          }
+        }, {
+          field: 'decisionRefs',
+          headerName: 'backoffice.idmCatalogEditor.items.label.decisionRefs',
+          cellDataType: 'lookup',
+          editable: true,
+          customParams: {
+            nameField: 'decisionRefsDisplayTexts',
+            filterCellType: 'number',
+            displayLabelTemplate: '${name} (${value})',
+            apiInterface: {
+              read: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/decisions'
+            },
+            lookupValue: 'decisionText',
+            lookupKey: 'decisionNo',
+            lookupKeyFilterType: {
+              type: 'equals',
+              filterType: 'number'
+            },
+            multiple: true,
+            translated: true
+          },
+          additionalFields: ['decisionRefsDisplayTexts'],
+          isDictionary: true
+        }]
+      }, {
+        headerName: 'backoffice.idmCatalog.items.label.validation',
+        children: [{
+          headerName: 'backoffice.idmCatalog.general.label.validFromDate',
+          field: 'validFromDate',
+          cellDataType: 'dateString'
+        }, {
+          headerName: 'backoffice.idmCatalog.general.label.validUntilDate',
+          field: 'validUntilDate',
+          cellDataType: 'dateString'
+        }]
+      }, {
+        headerName: 'backoffice.idmCatalog.items.label.measurements',
+        children: [{
+          headerName: 'backoffice.idmCatalogEditor.items.label.weightBrutto',
+          field: 'weightBrutto',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.weightNetto',
+          field: 'weightNetto',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.volume',
+          field: 'volume',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.widthBasicShapeNominalValue',
+          field: 'widthBasicShapeNominalValue',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.widthBasicShapeFrom',
+          field: 'widthBasicShapeFrom',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.widthBasicShapeTo',
+          field: 'widthBasicShapeTo',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.widthBasicShapeStepSize',
+          field: 'widthBasicShapeStepSize',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.heightBasicShapeNominalValue',
+          field: 'heightBasicShapeNominalValue',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.heightBasicShapeFrom',
+          field: 'heightBasicShapeFrom',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.heightBasicShapeTo',
+          field: 'heightBasicShapeTo',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.heightBasicShapeStepSize',
+          field: 'heightBasicShapeStepSize',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.depthBasicShapeNominalValue',
+          field: 'depthBasicShapeNominalValue',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.depthBasicShapeFrom',
+          field: 'depthBasicShapeFrom',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.depthBasicShapeTo',
+          field: 'depthBasicShapeTo',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalogEditor.items.label.depthBasicShapeStepSize',
+          field: 'depthBasicShapeStepSize',
+          cellDataType: 'number'
+        }]
+      }, {
+        headerName: 'backoffice.idmCatalog.general.label.lastUpdatedDate',
+        field: 'lastUpdatedDate',
+        cellDataType: 'dateString',
+        editable: false
+      }, {
+        headerName: 'backoffice.idmCatalog.general.label.createdDate',
+        field: 'createdDate',
+        cellDataType: 'dateString',
+        editable: false
+      }, {
+        headerName: 'backoffice.idmCatalog.general.label.createdByDisplayText',
+        field: 'createdByDisplayText',
+        editable: false
+      }, {
+        headerName: 'backoffice.idmCatalog.general.label.lastUpdatedByDisplayText',
+        field: 'lastUpdatedByDisplayText',
+        editable: false
+      }]
+    }
+  });
+}
+
+function TableItems () {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useModule = useModule(['items']),
+    catalogId = _useModule.catalogId,
+    updateNavigation = _useModule.updateNavigation,
+    apiConfig = _useModule.apiConfig,
+    organizationId = _useModule.organizationId;
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selectedSerie = _React$useState2[0],
+    setSelectedSerie = _React$useState2[1];
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Descriptions$1, {
       title: /*#__PURE__*/jsxs("div", {
@@ -32779,266 +33468,11 @@ function TableItems () {
           })]
         })]
       })
-    }), selectedSerie && /*#__PURE__*/jsx(Spreadsheet, {
-      gridId: 'crud-grid_items',
-      applicationData: {
-        organizationId: organizationId,
-        catalogId: catalogId
-      },
-      configuration: {
-        type: 'dotnetSSM',
-        idCol: 'typeNo',
-        apiInterface: {
-          read: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/series/' + (selectedSerie === null || selectedSerie === void 0 ? void 0 : selectedSerie._id) + '/items',
-          create: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/series/' + (selectedSerie === null || selectedSerie === void 0 ? void 0 : selectedSerie._id) + '/items',
-          restore: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/series/' + (selectedSerie === null || selectedSerie === void 0 ? void 0 : selectedSerie._id) + '/items/${typeNo}',
-          "delete": apiConfig.idmService + '/v3.0/catalogs/${catalogId}/series/' + (selectedSerie === null || selectedSerie === void 0 ? void 0 : selectedSerie._id) + '/items/${typeNo}',
-          update: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/series/' + (selectedSerie === null || selectedSerie === void 0 ? void 0 : selectedSerie._id) + '/items/${typeNo}'
-        },
-        dateFormat: 'LL',
-        floatingFilter: true,
-        colDef: [{
-          field: 'typeNo',
-          required: true,
-          unique: true
-        }, {
-          headerName: 'backoffice.idmCatalogEditor.items.label.priceTypeRef',
-          field: 'priceTypeRef',
-          cellDataType: 'number',
-          required: true
-        }, {
-          headerName: 'backoffice.idmCatalogEditor.general.label.sequenceNo',
-          field: 'sequenceNo',
-          cellDataType: 'number'
-        }, {
-          headerName: 'backoffice.idmCatalog.common.label.texts',
-          children: [{
-            headerName: 'backoffice.idmCatalog.general.label.shortText',
-            marryChildren: true,
-            children: [{
-              field: 'shortText.DE',
-              headerName: 'backoffice.idmEnricher.general.label.DE',
-              isDictionary: true,
-              required: true
-            }, {
-              field: 'shortText.EN',
-              headerName: 'backoffice.idmEnricher.general.label.EN',
-              isDictionary: true
-            }, {
-              field: 'shortText.FR',
-              headerName: 'backoffice.idmEnricher.general.label.FR',
-              isDictionary: true
-            }, {
-              field: 'shortText.IT',
-              headerName: 'backoffice.idmEnricher.general.label.IT',
-              isDictionary: true
-            }]
-          }, {
-            headerName: 'backoffice.idmCatalog.general.label.planningAdvice',
-            marryChildren: true,
-            children: [{
-              field: 'planningAdvice.DE',
-              headerName: 'backoffice.idmEnricher.general.label.DE',
-              isDictionary: true
-            }, {
-              field: 'planningAdvice.EN',
-              headerName: 'backoffice.idmEnricher.general.label.EN',
-              isDictionary: true
-            }, {
-              field: 'planningAdvice.FR',
-              headerName: 'backoffice.idmEnricher.general.label.FR',
-              isDictionary: true
-            }, {
-              field: 'planningAdvice.IT',
-              headerName: 'backoffice.idmEnricher.general.label.IT',
-              isDictionary: true
-            }]
-          }]
-        }, {
-          headerName: 'backoffice.idmCatalog.items.label.articleNumbers',
-          children: [{
-            headerName: 'backoffice.idmCatalogEditor.items.label.edpNumber',
-            field: 'edpNumber'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.eanNumber',
-            field: 'eanNumber'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.salesNumber',
-            field: 'salesNumber'
-          }, {
-            headerName: 'backoffice.idmCatalog.general.items.itemIdentification',
-            field: 'itemIdentification',
-            cellDataType: 'enum',
-            customParams: {
-              enumData: itemIdentification,
-              displayLabelTemplate: '${name} (${value})'
-            },
-            required: true
-          }]
-        }, {
-          headerName: 'backoffice.idmCatalog.items.label.common',
-          children: [{
-            headerName: 'backoffice.idmCatalog.general.items.typeKey',
-            field: 'typeKey',
-            cellDataType: 'enum',
-            customParams: {
-              enumData: typeKey,
-              displayLabelTemplate: '${name} (${value})'
-            },
-            required: true
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.featureClassRefNo',
-            field: 'featureClassRefNo',
-            cellDataType: 'number',
-            required: true
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.eClassNo',
-            field: 'eClassNo',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.catalogPage',
-            field: 'catalogPage'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.minimumDeliveryTime',
-            field: 'minimumDeliveryTime',
-            cellDataType: 'number'
-          }]
-        }, {
-          headerName: 'backoffice.idmCatalog.items.label.configurator',
-          children: [{
-            headerName: 'backoffice.idmCatalogEditor.items.label.partListExclusive',
-            field: 'partListExclusive',
-            cellDataType: 'boolean'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.partlist',
-            field: 'partListRef',
-            cellDataType: 'lookup',
-            customParams: {
-              nameField: 'partListRef',
-              apiInterface: {
-                read: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/partlists'
-              },
-              lookupValue: 'partlistKey',
-              lookupKey: 'partlistKey'
-            }
-          }, {
-            field: 'decisionRefs',
-            headerName: 'backoffice.idmCatalogEditor.items.label.decisionRefs',
-            cellDataType: 'lookup',
-            editable: true,
-            customParams: {
-              nameField: 'decisionRefsDisplayTexts',
-              filterCellType: 'number',
-              displayLabelTemplate: '${name} (${value})',
-              apiInterface: {
-                read: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/decisions'
-              },
-              lookupValue: 'decisionText',
-              lookupKey: 'decisionNo',
-              lookupKeyFilterType: {
-                type: 'equals',
-                filterType: 'number'
-              },
-              multiple: true,
-              translated: true
-            },
-            additionalFields: ['decisionRefsDisplayTexts'],
-            isDictionary: true
-          }]
-        }, {
-          headerName: 'backoffice.idmCatalog.items.label.validation',
-          children: [{
-            headerName: 'backoffice.idmCatalog.general.label.validFromDate',
-            field: 'validFromDate',
-            cellDataType: 'dateString'
-          }, {
-            headerName: 'backoffice.idmCatalog.general.label.validUntilDate',
-            field: 'validUntilDate',
-            cellDataType: 'dateString'
-          }]
-        }, {
-          headerName: 'backoffice.idmCatalog.items.label.measurements',
-          children: [{
-            headerName: 'backoffice.idmCatalogEditor.items.label.weightBrutto',
-            field: 'weightBrutto',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.weightNetto',
-            field: 'weightNetto',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.volume',
-            field: 'volume',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.widthBasicShapeNominalValue',
-            field: 'widthBasicShapeNominalValue',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.widthBasicShapeFrom',
-            field: 'widthBasicShapeFrom',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.widthBasicShapeTo',
-            field: 'widthBasicShapeTo',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.widthBasicShapeStepSize',
-            field: 'widthBasicShapeStepSize',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.heightBasicShapeNominalValue',
-            field: 'heightBasicShapeNominalValue',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.heightBasicShapeFrom',
-            field: 'heightBasicShapeFrom',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.heightBasicShapeTo',
-            field: 'heightBasicShapeTo',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.heightBasicShapeStepSize',
-            field: 'heightBasicShapeStepSize',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.depthBasicShapeNominalValue',
-            field: 'depthBasicShapeNominalValue',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.depthBasicShapeFrom',
-            field: 'depthBasicShapeFrom',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.depthBasicShapeTo',
-            field: 'depthBasicShapeTo',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalogEditor.items.label.depthBasicShapeStepSize',
-            field: 'depthBasicShapeStepSize',
-            cellDataType: 'number'
-          }]
-        }, {
-          headerName: 'backoffice.idmCatalog.general.label.lastUpdatedDate',
-          field: 'lastUpdatedDate',
-          cellDataType: 'dateString',
-          editable: false
-        }, {
-          headerName: 'backoffice.idmCatalog.general.label.createdDate',
-          field: 'createdDate',
-          cellDataType: 'dateString',
-          editable: false
-        }, {
-          headerName: 'backoffice.idmCatalog.general.label.createdByDisplayText',
-          field: 'createdByDisplayText',
-          editable: false
-        }, {
-          headerName: 'backoffice.idmCatalog.general.label.lastUpdatedByDisplayText',
-          field: 'lastUpdatedByDisplayText',
-          editable: false
-        }]
-      }
+    }), selectedSerie && /*#__PURE__*/jsx(Items, {
+      organizationId: organizationId,
+      catalogId: catalogId,
+      selectedSerie: selectedSerie._id,
+      apiConfig: apiConfig
     })]
   });
 }
@@ -33046,6 +33480,7 @@ function TableItems () {
 function TableSeries () {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var root = useStore();
   var _useModule = useModule(['series']),
     catalogId = _useModule.catalogId,
     organizationId = _useModule.organizationId,
@@ -33064,6 +33499,29 @@ function TableSeries () {
     name: t('backoffice.idmCatalog.series.label.purchaseRetail.p3'),
     value: 3
   }];
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selectedSerie = _React$useState2[0],
+    setSelectedSerie = _React$useState2[1];
+  useEffect(function () {
+    if (selectedSerie) {
+      root.contentStore.bottomToolBar.tools = [{
+        id: 'options',
+        name: t('backoffice.menu.items.label.IDMCatalogEditorTableOptions'),
+        element: /*#__PURE__*/jsx(Items, {
+          organizationId: organizationId,
+          catalogId: catalogId,
+          selectedSerie: selectedSerie._id,
+          apiConfig: apiConfig
+        }),
+        startWidth: 300,
+        defaultPinned: false,
+        defaultOpen: false
+      }];
+    } else {
+      root.contentStore.bottomToolBar.tools = [];
+    }
+  }, [selectedSerie]);
   var applicationData = useMemo(function () {
     return {
       catalogId: catalogId,
@@ -33090,6 +33548,15 @@ function TableSeries () {
     }), /*#__PURE__*/jsx(Spreadsheet, {
       gridId: 'crud-grid_series',
       applicationData: applicationData,
+      hooks: {
+        onCellSelectionChanged: function onCellSelectionChanged(event) {
+          if (event.selection.length == 1) {
+            setSelectedSerie(event.selection[0].node.data);
+          } else {
+            setSelectedSerie(null);
+          }
+        }
+      },
       configuration: {
         type: 'dotnetSSM',
         apiInterface: {
@@ -33233,14 +33700,162 @@ function TableSeries () {
   });
 }
 
-function TableFeatures () {
+function Options(_ref) {
+  var organizationId = _ref.organizationId,
+    catalogId = _ref.catalogId,
+    selectedFeature = _ref.selectedFeature,
+    apiConfig = _ref.apiConfig;
+  var applicationData = useMemo(function () {
+    return {
+      organizationId: organizationId,
+      catalogId: catalogId,
+      selectedFeature: selectedFeature
+    };
+  }, [organizationId, catalogId, selectedFeature]);
+  return /*#__PURE__*/jsx(Spreadsheet, {
+    gridId: 'crud-grid_options',
+    applicationData: applicationData,
+    configuration: {
+      type: 'dotnetSSM',
+      idCol: 'optionKey',
+      apiInterface: {
+        read: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features/${selectedFeature}/options',
+        create: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features/${selectedFeature}/options',
+        restore: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features/${selectedFeature}/options/${optionKey}',
+        "delete": apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features/${selectedFeature}/options/${optionKey}',
+        update: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features/${selectedFeature}/options/${optionKey}'
+      },
+      dateFormat: 'LL',
+      floatingFilter: true,
+      colDef: [{
+        field: 'optionKey',
+        required: true,
+        unique: true
+      }, {
+        headerName: 'backoffice.idmCatalogEditor.general.label.sequenceNo',
+        field: 'sequenceNo',
+        cellDataType: 'number'
+      }, {
+        headerName: 'backoffice.idmCatalog.common.label.texts',
+        children: [{
+          headerName: 'backoffice.idmCatalog.options.label.optionText',
+          marryChildren: true,
+          children: [{
+            field: 'optionText.DE',
+            headerName: 'backoffice.idmEnricher.general.label.DE',
+            isDictionary: true,
+            required: true
+          }, {
+            field: 'optionText.EN',
+            headerName: 'backoffice.idmEnricher.general.label.EN',
+            isDictionary: true
+          }, {
+            field: 'optionText.FR',
+            headerName: 'backoffice.idmEnricher.general.label.FR',
+            isDictionary: true
+          }, {
+            field: 'optionText.IT',
+            headerName: 'backoffice.idmEnricher.general.label.IT',
+            isDictionary: true
+          }]
+        }, {
+          headerName: 'backoffice.idmCatalog.options.label.optionCommentText',
+          marryChildren: true,
+          children: [{
+            field: 'optionCommentText.DE',
+            headerName: 'backoffice.idmEnricher.general.label.DE',
+            isDictionary: true
+          }, {
+            field: 'optionCommentText.EN',
+            headerName: 'backoffice.idmEnricher.general.label.EN',
+            isDictionary: true
+          }, {
+            field: 'optionCommentText.FR',
+            headerName: 'backoffice.idmEnricher.general.label.FR',
+            isDictionary: true
+          }, {
+            field: 'optionCommentText.IT',
+            headerName: 'backoffice.idmEnricher.general.label.IT',
+            isDictionary: true
+          }]
+        }, {
+          headerName: 'backoffice.idmCatalog.options.label.optionFreeText',
+          field: 'optionFreeText',
+          cellDataType: 'boolean'
+        }]
+      }, {
+        headerName: 'backoffice.idmCatalog.items.label.validation',
+        children: [{
+          headerName: 'backoffice.idmCatalog.general.label.validFromDate',
+          field: 'validFromDate',
+          cellDataType: 'dateString'
+        }, {
+          headerName: 'backoffice.idmCatalog.general.label.validUntilDate',
+          field: 'validUntilDate',
+          cellDataType: 'dateString'
+        }]
+      }, {
+        headerName: 'backoffice.idmCatalog.options.label.material',
+        children: [{
+          headerName: 'backoffice.idmCatalog.options.label.materialNo',
+          field: 'materialNo'
+        }, {
+          headerName: 'backoffice.idmCatalog.options.label.materialColorR',
+          field: 'materialColorR',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalog.options.label.materialColorG',
+          field: 'materialColorG',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalog.options.label.materialColorB',
+          field: 'materialColorR',
+          cellDataType: 'number'
+        }]
+      }, {
+        headerName: 'backoffice.idmCatalog.options.label.measurement',
+        children: [{
+          headerName: 'backoffice.idmCatalog.options.label.measureNo',
+          field: 'measureNo'
+        }, {
+          headerName: 'backoffice.idmCatalog.options.label.measureValue',
+          field: 'measureValue',
+          cellDataType: 'number'
+        }, {
+          headerName: 'backoffice.idmCatalog.options.label.measureUnit',
+          field: 'measureUnit'
+        }]
+      }, {
+        headerName: 'backoffice.idmCatalog.general.label.lastUpdatedDate',
+        field: 'lastUpdatedDate',
+        cellDataType: 'dateString',
+        editable: false
+      }, {
+        headerName: 'backoffice.idmCatalog.general.label.lastUpdatedByDisplayText',
+        field: 'lastUpdatedByDisplayText',
+        editable: false
+      }, {
+        headerName: 'backoffice.idmCatalog.general.label.createdDate',
+        field: 'createdDate',
+        cellDataType: 'dateString',
+        editable: false
+      }, {
+        headerName: 'backoffice.idmCatalog.general.label.createdByDisplayText',
+        field: 'createdByDisplayText',
+        editable: false
+      }]
+    }
+  });
+}
+
+function Features(_ref) {
+  var organizationId = _ref.organizationId,
+    catalogId = _ref.catalogId,
+    featureClassId = _ref.featureClassId,
+    apiConfig = _ref.apiConfig,
+    hooks = _ref.hooks;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useModule = useModule(['features']),
-    catalogId = _useModule.catalogId,
-    organizationId = _useModule.organizationId,
-    updateNavigation = _useModule.updateNavigation,
-    apiConfig = _useModule.apiConfig;
   var headerPosVariationType = [{
     name: t('backoffice.idmCatalog.features.label.vt.I'),
     value: 'I'
@@ -33264,9 +33879,184 @@ function TableFeatures () {
   var applicationData = useMemo(function () {
     return {
       catalogId: catalogId,
-      organizationId: organizationId
+      organizationId: organizationId,
+      featureClassId: featureClassId
     };
-  }, [catalogId]);
+  }, [catalogId, featureClassId, organizationId]);
+  var apiInterface = featureClassId ? {
+    read: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/featureclasses/${featureClassId}/features',
+    create: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/featureclasses/${featureClassId}/features',
+    restore: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/featureclasses/${featureClassId}/features',
+    "delete": apiConfig.idmService + '/v3.0/catalogs/${catalogId}/featureclasses/${featureClassId}/features/${_id}',
+    update: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/featureclasses/${featureClassId}/features/${_id}'
+  } : {
+    read: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features',
+    create: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features',
+    restore: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features/${_id}',
+    "delete": apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features/${_id}',
+    update: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features/${_id}'
+  };
+  return /*#__PURE__*/jsx(Spreadsheet, {
+    gridId: 'crud-grid_features' + (featureClassId ? '_featureClass' : ''),
+    applicationData: applicationData,
+    hooks: hooks,
+    configuration: {
+      type: 'dotnetSSM',
+      apiInterface: apiInterface,
+      dateFormat: 'LL',
+      colDef: [].concat(_toConsumableArray(featureClassId ? [{
+        field: 'visible',
+        headerName: 'backoffice.idmCatalog.features.label.visible',
+        cellDataType: 'boolean',
+        required: true,
+        pinned: true,
+        lockPinned: true,
+        defaultValue: false
+      }, {
+        field: 'featureNo',
+        headerName: 'backoffice.idmCatalog.features.label.featureNo',
+        required: true,
+        cellDataType: 'lookup',
+        doRefresh: true,
+        unique: true,
+        customParams: {
+          apiInterface: {
+            read: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features'
+          },
+          lookupValue: 'featureText',
+          lookupKey: 'featureNo',
+          translated: true,
+          lookupLabelTemplate: '${name} (${value})',
+          insertLookup: true,
+          allowToAdd: true
+        }
+      }] : [{
+        field: 'featureNo',
+        headerName: 'backoffice.idmCatalog.features.label.featureNo',
+        required: true,
+        unique: true
+      }]), [{
+        headerName: 'backoffice.idmCatalog.features.label.featureText',
+        marryChildren: true,
+        children: [{
+          field: 'featureText.DE',
+          headerName: 'backoffice.idmEnricher.general.label.DE',
+          isDictionary: true,
+          required: true
+        }, {
+          field: 'featureText.EN',
+          headerName: 'backoffice.idmEnricher.general.label.EN',
+          isDictionary: true
+        }, {
+          field: 'featureText.FR',
+          headerName: 'backoffice.idmEnricher.general.label.FR',
+          isDictionary: true
+        }, {
+          field: 'featureText.IT',
+          headerName: 'backoffice.idmEnricher.general.label.IT',
+          isDictionary: true
+        }]
+      }, {
+        field: 'sequenceNo',
+        headerName: 'backoffice.idmCatalog.features.label.sequenceNo',
+        required: true,
+        cellDataType: 'number'
+      }, {
+        field: 'headerPosVariationType',
+        headerName: 'backoffice.idmCatalog.features.label.headerPosVariationType',
+        required: true,
+        cellDataType: 'enum',
+        customParams: {
+          enumData: headerPosVariationType,
+          displayLabelTemplate: '${name} (${value})'
+        }
+      }, {
+        field: 'featureT',
+        headerName: 'backoffice.idmCatalog.features.label.featureT',
+        cellDataType: 'enum',
+        customParams: {
+          enumData: featureT,
+          displayLabelTemplate: '${name} (${value})'
+        }
+      }, {
+        field: 'measureUnit',
+        headerName: 'backoffice.idmCatalog.features.label.measureUnit'
+      }, {
+        field: 'measureParameter',
+        headerName: 'backoffice.idmCatalog.features.label.measureParameter'
+      }, {
+        headerName: 'backoffice.idmCatalog.general.label.lastUpdatedDate',
+        field: 'lastUpdatedDate',
+        cellDataType: 'dateString',
+        editable: false
+      }, {
+        headerName: 'backoffice.idmCatalog.general.label.createdDate',
+        field: 'createdDate',
+        cellDataType: 'dateString',
+        editable: false
+      }, {
+        headerName: 'backoffice.idmCatalog.general.label.createdByDisplayText',
+        field: 'createdByDisplayText',
+        editable: false
+      }, {
+        headerName: 'backoffice.idmCatalog.general.label.lastUpdatedByDisplayText',
+        field: 'lastUpdatedByDisplayText',
+        editable: false
+      }, {
+        headerName: 'backoffice.idmCatalog.general.label._id',
+        field: '_id',
+        editable: false
+      }, {
+        field: 'organizationId',
+        editable: false,
+        hide: true,
+        lockVisible: true,
+        suppressColumnsToolPanel: true,
+        defaultValue: '${organizationId}'
+      }, {
+        field: 'catalogId',
+        editable: false,
+        hide: true,
+        lockVisible: true,
+        suppressColumnsToolPanel: true,
+        defaultValue: '${catalogId}'
+      }])
+    }
+  });
+}
+
+function TableFeatures () {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var root = useStore();
+  var _useModule = useModule(['features']),
+    catalogId = _useModule.catalogId,
+    organizationId = _useModule.organizationId,
+    updateNavigation = _useModule.updateNavigation,
+    apiConfig = _useModule.apiConfig;
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selectedFeature = _React$useState2[0],
+    setSelectedFeature = _React$useState2[1];
+  useEffect(function () {
+    if (selectedFeature) {
+      root.contentStore.bottomToolBar.tools = [{
+        id: 'options',
+        name: t('backoffice.menu.items.label.IDMCatalogEditorTableOptions'),
+        element: /*#__PURE__*/jsx(Options, {
+          organizationId: organizationId,
+          catalogId: catalogId,
+          selectedFeature: selectedFeature._id,
+          apiConfig: apiConfig
+        }),
+        startWidth: 300,
+        defaultPinned: false,
+        defaultOpen: false
+      }];
+    } else {
+      root.contentStore.bottomToolBar.tools = [];
+    }
+  }, [selectedFeature]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Descriptions$1, {
       title: /*#__PURE__*/jsxs("div", {
@@ -33284,109 +34074,18 @@ function TableFeatures () {
           })
         })]
       })
-    }), /*#__PURE__*/jsx(Spreadsheet, {
-      gridId: 'crud-grid_features',
-      applicationData: applicationData,
-      configuration: {
-        type: 'dotnetSSM',
-        apiInterface: {
-          read: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features',
-          create: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features',
-          restore: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features/${_id}',
-          "delete": apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features/${_id}',
-          update: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features/${_id}'
-        },
-        dateFormat: 'LL',
-        colDef: [{
-          field: 'featureNo',
-          headerName: 'backoffice.idmCatalog.features.label.featureNo',
-          required: true
-        }, {
-          headerName: 'backoffice.idmCatalog.features.label.featureText',
-          marryChildren: true,
-          children: [{
-            field: 'featureText.DE',
-            headerName: 'backoffice.idmEnricher.general.label.DE',
-            isDictionary: true,
-            required: true
-          }, {
-            field: 'featureText.EN',
-            headerName: 'backoffice.idmEnricher.general.label.EN',
-            isDictionary: true
-          }, {
-            field: 'featureText.FR',
-            headerName: 'backoffice.idmEnricher.general.label.FR',
-            isDictionary: true
-          }, {
-            field: 'featureText.IT',
-            headerName: 'backoffice.idmEnricher.general.label.IT',
-            isDictionary: true
-          }]
-        }, {
-          field: 'sequenceNo',
-          headerName: 'backoffice.idmCatalog.features.label.sequenceNo',
-          required: true,
-          cellDataType: 'number'
-        }, {
-          field: 'headerPosVariationType',
-          headerName: 'backoffice.idmCatalog.features.label.headerPosVariationType',
-          required: true,
-          cellDataType: 'enum',
-          customParams: {
-            enumData: headerPosVariationType,
-            displayLabelTemplate: '${name} (${value})'
-          }
-        }, {
-          field: 'featureT',
-          headerName: 'backoffice.idmCatalog.features.label.featureT',
-          cellDataType: 'enum',
-          customParams: {
-            enumData: featureT,
-            displayLabelTemplate: '${name} (${value})'
+    }), /*#__PURE__*/jsx(Features, {
+      organizationId: organizationId,
+      catalogId: catalogId,
+      apiConfig: apiConfig,
+      hooks: {
+        onCellSelectionChanged: function onCellSelectionChanged(event) {
+          if (event.selection.length == 1) {
+            setSelectedFeature(event.selection[0].node.data);
+          } else {
+            setSelectedFeature(null);
           }
-        }, {
-          field: 'measureUnit',
-          headerName: 'backoffice.idmCatalog.features.label.measureUnit'
-        }, {
-          field: 'measureParameter',
-          headerName: 'backoffice.idmCatalog.features.label.measureParameter'
-        }, {
-          headerName: 'backoffice.idmCatalog.general.label.lastUpdatedDate',
-          field: 'lastUpdatedDate',
-          cellDataType: 'dateString',
-          editable: false
-        }, {
-          headerName: 'backoffice.idmCatalog.general.label.createdDate',
-          field: 'createdDate',
-          cellDataType: 'dateString',
-          editable: false
-        }, {
-          headerName: 'backoffice.idmCatalog.general.label.createdByDisplayText',
-          field: 'createdByDisplayText',
-          editable: false
-        }, {
-          headerName: 'backoffice.idmCatalog.general.label.lastUpdatedByDisplayText',
-          field: 'lastUpdatedByDisplayText',
-          editable: false
-        }, {
-          headerName: 'backoffice.idmCatalog.general.label._id',
-          field: '_id',
-          editable: false
-        }, {
-          field: 'organizationId',
-          editable: false,
-          hide: true,
-          lockVisible: true,
-          suppressColumnsToolPanel: true,
-          defaultValue: '${organizationId}'
-        }, {
-          field: 'catalogId',
-          editable: false,
-          hide: true,
-          lockVisible: true,
-          suppressColumnsToolPanel: true,
-          defaultValue: '${catalogId}'
-        }]
+        }
       }
     })]
   });
@@ -33427,154 +34126,48 @@ function TableOptions () {
           })]
         })]
       })
-    }), selectedFeature && /*#__PURE__*/jsx(Spreadsheet, {
-      gridId: 'crud-grid_options',
-      applicationData: {
-        organizationId: organizationId,
-        catalogId: catalogId
-      },
-      configuration: {
-        type: 'dotnetSSM',
-        idCol: 'optionKey',
-        apiInterface: {
-          read: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features/' + (selectedFeature === null || selectedFeature === void 0 ? void 0 : selectedFeature._id) + '/options',
-          create: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features/' + (selectedFeature === null || selectedFeature === void 0 ? void 0 : selectedFeature._id) + '/options',
-          restore: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features/' + (selectedFeature === null || selectedFeature === void 0 ? void 0 : selectedFeature._id) + '/options/${optionKey}',
-          "delete": apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features/' + (selectedFeature === null || selectedFeature === void 0 ? void 0 : selectedFeature._id) + '/options/${optionKey}',
-          update: apiConfig.idmService + '/v3.0/catalogs/${catalogId}/features/' + (selectedFeature === null || selectedFeature === void 0 ? void 0 : selectedFeature._id) + '/options/${optionKey}'
-        },
-        dateFormat: 'LL',
-        floatingFilter: true,
-        colDef: [{
-          field: 'optionKey',
-          required: true,
-          unique: true
-        }, {
-          headerName: 'backoffice.idmCatalogEditor.general.label.sequenceNo',
-          field: 'sequenceNo',
-          cellDataType: 'number'
-        }, {
-          headerName: 'backoffice.idmCatalog.common.label.texts',
-          children: [{
-            headerName: 'backoffice.idmCatalog.options.label.optionText',
-            marryChildren: true,
-            children: [{
-              field: 'optionText.DE',
-              headerName: 'backoffice.idmEnricher.general.label.DE',
-              isDictionary: true,
-              required: true
-            }, {
-              field: 'optionText.EN',
-              headerName: 'backoffice.idmEnricher.general.label.EN',
-              isDictionary: true
-            }, {
-              field: 'optionText.FR',
-              headerName: 'backoffice.idmEnricher.general.label.FR',
-              isDictionary: true
-            }, {
-              field: 'optionText.IT',
-              headerName: 'backoffice.idmEnricher.general.label.IT',
-              isDictionary: true
-            }]
-          }, {
-            headerName: 'backoffice.idmCatalog.options.label.optionCommentText',
-            marryChildren: true,
-            children: [{
-              field: 'optionCommentText.DE',
-              headerName: 'backoffice.idmEnricher.general.label.DE',
-              isDictionary: true
-            }, {
-              field: 'optionCommentText.EN',
-              headerName: 'backoffice.idmEnricher.general.label.EN',
-              isDictionary: true
-            }, {
-              field: 'optionCommentText.FR',
-              headerName: 'backoffice.idmEnricher.general.label.FR',
-              isDictionary: true
-            }, {
-              field: 'optionCommentText.IT',
-              headerName: 'backoffice.idmEnricher.general.label.IT',
-              isDictionary: true
-            }]
-          }, {
-            headerName: 'backoffice.idmCatalog.options.label.optionFreeText',
-            field: 'optionFreeText',
-            cellDataType: 'boolean'
-          }]
-        }, {
-          headerName: 'backoffice.idmCatalog.items.label.validation',
-          children: [{
-            headerName: 'backoffice.idmCatalog.general.label.validFromDate',
-            field: 'validFromDate',
-            cellDataType: 'dateString'
-          }, {
-            headerName: 'backoffice.idmCatalog.general.label.validUntilDate',
-            field: 'validUntilDate',
-            cellDataType: 'dateString'
-          }]
-        }, {
-          headerName: 'backoffice.idmCatalog.options.label.material',
-          children: [{
-            headerName: 'backoffice.idmCatalog.options.label.materialNo',
-            field: 'materialNo'
-          }, {
-            headerName: 'backoffice.idmCatalog.options.label.materialColorR',
-            field: 'materialColorR',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalog.options.label.materialColorG',
-            field: 'materialColorG',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalog.options.label.materialColorB',
-            field: 'materialColorR',
-            cellDataType: 'number'
-          }]
-        }, {
-          headerName: 'backoffice.idmCatalog.options.label.measurement',
-          children: [{
-            headerName: 'backoffice.idmCatalog.options.label.measureNo',
-            field: 'measureNo'
-          }, {
-            headerName: 'backoffice.idmCatalog.options.label.measureValue',
-            field: 'measureValue',
-            cellDataType: 'number'
-          }, {
-            headerName: 'backoffice.idmCatalog.options.label.measureUnit',
-            field: 'measureUnit'
-          }]
-        }, {
-          headerName: 'backoffice.idmCatalog.general.label.lastUpdatedDate',
-          field: 'lastUpdatedDate',
-          cellDataType: 'dateString',
-          editable: false
-        }, {
-          headerName: 'backoffice.idmCatalog.general.label.lastUpdatedByDisplayText',
-          field: 'lastUpdatedByDisplayText',
-          editable: false
-        }, {
-          headerName: 'backoffice.idmCatalog.general.label.createdDate',
-          field: 'createdDate',
-          cellDataType: 'dateString',
-          editable: false
-        }, {
-          headerName: 'backoffice.idmCatalog.general.label.createdByDisplayText',
-          field: 'createdByDisplayText',
-          editable: false
-        }]
-      }
+    }), selectedFeature && /*#__PURE__*/jsx(Options, {
+      organizationId: organizationId,
+      catalogId: catalogId,
+      selectedFeature: selectedFeature._id,
+      apiConfig: apiConfig
     })]
   });
 }
 
 function TableFeatureClasses () {
+  var _root$contentStore$bo, _root$contentStore$ri;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var root = useStore();
   var _useModule = useModule(['featureclasses']),
     catalogId = _useModule.catalogId,
     organizationId = _useModule.organizationId,
     updateNavigation = _useModule.updateNavigation,
     apiConfig = _useModule.apiConfig;
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selectedFeatureClass = _React$useState2[0],
+    setSelectedFeatureClass = _React$useState2[1];
+  useEffect(function () {
+    if (selectedFeatureClass) {
+      root.contentStore.bottomToolBar.tools = [{
+        id: 'options',
+        name: t('backoffice.menu.items.label.IDMCatalogEditorTableFeatures'),
+        element: /*#__PURE__*/jsx(Features, {
+          organizationId: organizationId,
+          catalogId: catalogId,
+          apiConfig: apiConfig,
+          featureClassId: selectedFeatureClass._id
+        }),
+        startWidth: 300,
+        defaultPinned: false,
+        defaultOpen: false
+      }];
+    } else {
+      root.contentStore.bottomToolBar.tools = [];
+    }
+  }, [selectedFeatureClass]);
   var applicationData = useMemo(function () {
     return {
       catalogId: catalogId,
@@ -33601,6 +34194,15 @@ function TableFeatureClasses () {
     }), /*#__PURE__*/jsx(Spreadsheet, {
       gridId: 'crud-grid_featureclasses',
       applicationData: applicationData,
+      hooks: {
+        onCellSelectionChanged: function onCellSelectionChanged(event) {
+          if (event.selection.length == 1) {
+            setSelectedFeatureClass(event.selection[0].node.data);
+          } else {
+            setSelectedFeatureClass(null);
+          }
+        }
+      },
       configuration: {
         type: 'dotnetSSM',
         apiInterface: {
@@ -33671,8 +34273,13 @@ function TableFeatureClasses () {
           lockVisible: true,
           suppressColumnsToolPanel: true,
           defaultValue: '${catalogId}'
+        }, {
+          field: 'featureRefs'
         }]
-      }
+      },
+      refSecondaryGrids: [(_root$contentStore$bo = root.contentStore.bottomToolBar.toolbarElement) !== null && _root$contentStore$bo !== void 0 ? _root$contentStore$bo : undefined, (_root$contentStore$ri = root.contentStore.rightToolBar.toolbarElement) !== null && _root$contentStore$ri !== void 0 ? _root$contentStore$ri : undefined].filter(function (element) {
+        return element !== undefined;
+      })
     })]
   });
 }
@@ -33879,8 +34486,8 @@ function Content$1() {
   });
 }
 
-function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ContentWrapper = function ContentWrapper(_ref) {
   var id = _ref.id;
   var root = useStore();
@@ -33953,14 +34560,13 @@ var ContentCard = observer(function (_ref3) {
   var root = useStore();
   var configuration = root.configurationStore.getConfiguration(configId);
   return /*#__PURE__*/jsxs("div", {
-    style: _objectSpread$5(_objectSpread$5({}, !inGroup ? {
+    style: _objectSpread$4(_objectSpread$4({}, !inGroup ? {
       height: '100%'
     } : {
       maxHeight: '60vh'
     }), {}, {
       maxWidth: '100%',
       padding: direction == 'horizontal' ? 0 : 16,
-      backgroundColor: root.contentStore.theme == 'lightmode' ? '#fff' : '#000',
       display: 'flex',
       flexDirection: 'column'
     }),
@@ -34000,7 +34606,7 @@ var Content = observer(ContentWrapper);
 var layout = "layout-gqKsp";
 var contentWrapper = "content-wrapper-mQSc0";
 var detail = "detail-WeK8Q";
-var css_248z$5 = ".layout-gqKsp {\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.content-wrapper-mQSc0 {\n  overflow: auto;\n  height: 100%;\n}\n\n.detail-WeK8Q .ant-drawer-content-wrapper {\n  max-width: 100%;\n}\n\n.darkmode .layout-gqKsp {\n  background-color: rgb(20, 20, 20);\n}\n\n.lightmode .layout-gqKsp {\n  background-color: rgb(255, 255, 255);\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.darkmode {\n  background-color: #001529 !important;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.darkmode .arrows {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2225%22 height%3D%2224%22 viewBox%3D%220 0 25 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M10.5 7L15.5 12L10.5 17%22 stroke%3D%22%23fff%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"), linear-gradient(270deg, rgba(0, 21, 41, 1) 0%, rgba(0, 21, 41, 1) 72%, rgba(0, 21, 41, 0) 100%) !important;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.darkmode #Profile > div {\n  border-left: 1px solid black;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.darkmode #welcomeText {\n  border-right: 1px solid black;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.darkmode #Profile {\n  background-color: #001529 !important;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.lightmode {\n  background-color: #fff !important;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.darkmode * {\n  color: rgb(255, 255, 255);\n}\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.lightmode * {\n  color: rgb(0, 0, 0);\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW ::-webkit-scrollbar {\n  width: 10px;\n  height: 10px;\n}\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode ::-webkit-scrollbar-track {\n  box-shadow: inset 0 0 10px 10px #021129;\n  border: solid 3px transparent;\n}\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode ::-webkit-scrollbar-thumb {\n  box-shadow: inset 0 0 10px 10px rgb(130, 130, 130);\n  border: solid 3px transparent;\n  border-radius: 10px;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW .lightmode ::-webkit-scrollbar-track {\n  box-shadow: inset 0 0 10px 10px #ffffff;\n  border: solid 3px transparent;\n}\n.diva-component-DIVA_BACKOFFICE_NEW .lightmode ::-webkit-scrollbar-thumb {\n  box-shadow: inset 0 0 10px 10px #bdbdbd;\n  border: solid 3px transparent;\n  border-radius: 10px;\n}\n";
+var css_248z$5 = ".layout-gqKsp {\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.content-wrapper-mQSc0 {\n  overflow: auto;\n  height: 100%;\n}\n\n.detail-WeK8Q .ant-drawer-content-wrapper {\n  max-width: 100%;\n}\n\n.darkmode .ant-layout {\n  background-color: rgb(20, 20, 20);\n}\n\n.lightmode .ant-layout {\n  background-color: rgb(255, 255, 255);\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.darkmode {\n  background-color: #001529 !important;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.darkmode .arrows {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2225%22 height%3D%2224%22 viewBox%3D%220 0 25 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M10.5 7L15.5 12L10.5 17%22 stroke%3D%22%23fff%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"), linear-gradient(270deg, rgba(0, 21, 41, 1) 0%, rgba(0, 21, 41, 1) 72%, rgba(0, 21, 41, 0) 100%) !important;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.darkmode #Profile > div {\n  border-left: 1px solid black;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.darkmode #welcomeText {\n  border-right: 1px solid black;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.darkmode #Profile {\n  background-color: #001529 !important;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.lightmode {\n  background-color: #fff !important;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.darkmode * {\n  color: rgb(255, 255, 255);\n}\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.lightmode * {\n  color: rgb(0, 0, 0);\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW ::-webkit-scrollbar {\n  width: 10px;\n  height: 10px;\n}\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode ::-webkit-scrollbar-track {\n  box-shadow: inset 0 0 10px 10px #021129;\n  border: solid 3px transparent;\n}\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode ::-webkit-scrollbar-thumb {\n  box-shadow: inset 0 0 10px 10px rgb(130, 130, 130);\n  border: solid 3px transparent;\n  border-radius: 10px;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW .lightmode ::-webkit-scrollbar-track {\n  box-shadow: inset 0 0 10px 10px #ffffff;\n  border: solid 3px transparent;\n}\n.diva-component-DIVA_BACKOFFICE_NEW .lightmode ::-webkit-scrollbar-thumb {\n  box-shadow: inset 0 0 10px 10px #bdbdbd;\n  border: solid 3px transparent;\n  border-radius: 10px;\n}\n";
 styleInject(css_248z$5);
 
 function Detail(_ref) {
@@ -34493,15 +35099,28 @@ var MenuWrapper = function MenuWrapper() {
 };
 var Navigation = observer(MenuWrapper);
 
-var wrapper$1 = "wrapper-Q13-g";
-var css_248z$3 = ".wrapper-Q13-g {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n";
+var container$1 = "container-BucHG";
+var right = "right--XETU";
+var unpinnedRight = "unpinned-right-tbnNb";
+var draghandle = "draghandle-f5b0N";
+var bottom = "bottom-cqyfS";
+var midHandle = "mid-handle--qh50";
+var toolsSelector = "tools-selector-BHV3Z";
+var toolItem = "tool-item-KyKgQ";
+var sel = "sel-iUm8X";
+var button = "button-K-0KR";
+var css_248z$3 = ".container-BucHG {\n  height: 100%;\n  width: 100%;\n  position: relative;\n  z-index: 1001;\n  overflow: auto;\n}\n\n.right--XETU .container-BucHG {\n  z-index: 1003;\n}\n\n.unpinned-right-tbnNb.container-BucHG {\n  right: 37px;\n  position: absolute;\n}\n\n.draghandle-f5b0N {\n  position: absolute;\n  top: 0px;\n  background-color: rgba(128, 128, 128, 0.3);\n  z-index: 1002;\n}\n\n.right--XETU .draghandle-f5b0N {\n  height: 100%;\n  width: 2px;\n  left: -1px;\n  cursor: ew-resize;\n  z-index: 1004;\n}\n\n.bottom-cqyfS .draghandle-f5b0N {\n  height: 2px;\n  width: 100%;\n  cursor: ns-resize;\n}\n\n.mid-handle--qh50 {\n  position: absolute;\n  background-color: rgba(128, 128, 128, 0.3);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.right--XETU .mid-handle--qh50 {\n  width: 5px;\n  height: 32px;\n  border-left: 2px solid grey;\n  border-right: 2px solid grey;\n}\n\n.bottom-cqyfS .mid-handle--qh50 {\n  height: 5px;\n  width: 32px;\n  border-top: 2px solid gray;\n  border-bottom: 2px solid gray;\n}\n\n.tools-selector-BHV3Z {\n  z-index: 1000;\n  display: flex;\n  position: relative;\n  gap: 16px;\n  align-items: center;\n  background-color: #f5f5f5;\n}\n\n.darkmode .tools-selector-BHV3Z {\n  background-color: #001529;\n  color: rgba(255, 255, 255, 0.85);\n}\n\n.right--XETU .tools-selector-BHV3Z {\n  width: 36px;\n  height: 100%;\n  padding-top: 16px;\n  flex-direction: column;\n}\n\n.bottom-cqyfS .tools-selector-BHV3Z {\n  width: 100%;\n  height: 36px;\n  padding-top: 0;\n  flex-direction: row;\n}\n\n.tool-item-KyKgQ {\n  padding: 10px;\n  cursor: pointer;\n  position: relative;\n}\n\n.right--XETU .tool-item-KyKgQ {\n  writing-mode: vertical-lr;\n  text-orientation: mixed;\n}\n\n.tool-item-KyKgQ::after {\n  content: '';\n  position: absolute;\n  background-color: #0088ff;\n  transition: all ease-in-out 0.2s;\n}\n\n.right--XETU .tool-item-KyKgQ::after {\n  width: 3px;\n  height: 0px;\n  left: 1px;\n  bottom: 50%;\n}\n\n.right--XETU .tool-item-KyKgQ:hover::after,\n.right--XETU .sel-iUm8X::after {\n  height: 100%;\n  bottom: 0;\n}\n\n.bottom-cqyfS .tool-item-KyKgQ::after {\n  width: 0px;\n  height: 3px;\n  bottom: 1px;\n  left: 50%;\n}\n\n.bottom-cqyfS .tool-item-KyKgQ:hover::after,\n.bottom-cqyfS .sel-iUm8X::after {\n  width: 100%;\n  left: 0;\n}\n\n.button-K-0KR {\n  width: 40px;\n  justify-content: center;\n}\n";
 styleInject(css_248z$3);
 
+var wrapper$1 = "wrapper-Q13-g";
+var confContainer = "conf-container-Sm5LL";
+var css_248z$2 = ".wrapper-Q13-g {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.conf-container-Sm5LL {\n  padding-top: 10px;\n  background: white;\n  color: black;\n  height: calc(100% - 40px);\n  border-radius: 5px;\n  border: 1px solid #d9d9d9;\n  position: relative;\n  overflow: hidden;\n}\n\n.darkmode .conf-container-Sm5LL {\n  border-color: #424242;\n}\n";
+styleInject(css_248z$2);
+
 var wrapper = "wrapper-IcNC5";
 var select = "select-jVMz-";
-var button = "button-78H38";
-var css_248z$2 = ".wrapper-IcNC5 {\n  display: flex;\n  gap: 16px;\n  margin: 8px;\n  justify-content: flex-start;\n}\n\n.select-jVMz- {\n  z-index: 1000;\n  margin: 8px;\n  flex-grow: 0.5;\n  min-width: 100px;\n}\n.select-jVMz- div {\n  border-color: grey !important;\n}\n.select-jVMz- div {\n  box-shadow: none;\n  box-shadow: initial;\n}\n\n.button-78H38 {\n  width: 40px;\n  justify-content: center;\n}\n";
-styleInject(css_248z$2);
+var css_248z$1 = ".wrapper-IcNC5 {\n  display: flex;\n  gap: 16px;\n  justify-content: space-between;\n  margin-bottom: 8px;\n}\n\n.select-jVMz- {\n  z-index: 1000;\n  flex: 1;\n}\n";
+styleInject(css_248z$1);
 
 var ArticleSelection = function ArticleSelection(_ref) {
   var _ref$state = _ref.state,
@@ -34509,26 +35128,9 @@ var ArticleSelection = function ArticleSelection(_ref) {
     articleCodex = _ref$state.articleCodex,
     setArticleCodex = _ref$state.setArticleCodex,
     setDoReset = _ref$state.setDoReset;
-  var onChange = function onChange(action) {
-    setArticleCodex(action.value);
-  };
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    groupedArticles = _useState2[0],
-    setGroupedArticles = _useState2[1];
-  var root = useStore();
-  var formatGroupLabel = function formatGroupLabel(data) {
-    return /*#__PURE__*/jsxs("div", {
-      style: groupStyles,
-      children: [/*#__PURE__*/jsx("span", {
-        children: data.label
-      }), /*#__PURE__*/jsx("span", {
-        style: groupBadgeStyles,
-        children: data.options.length
-      })]
-    });
-  };
-  useEffect(function () {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var groupedArticles = useMemo(function () {
     var groups = [];
     var _loop = function _loop() {
       var article = articleList[i];
@@ -34540,6 +35142,7 @@ var ArticleSelection = function ArticleSelection(_ref) {
         group.options.push(article);
       } else {
         groups.push({
+          title: article.groupName,
           label: article.groupName,
           options: [article]
         });
@@ -34548,60 +35151,31 @@ var ArticleSelection = function ArticleSelection(_ref) {
     for (var i = 0; i < articleList.length; i++) {
       _loop();
     }
-    setGroupedArticles(groups);
+    return groups;
   }, [articleList]);
   return /*#__PURE__*/jsxs("div", {
     className: wrapper,
-    children: [!root.contentStore.toolPinned && /*#__PURE__*/jsx(PushpinOutlined, {
-      onClick: function onClick() {
-        return root.contentStore.toolPinned = !root.contentStore.toolPinned;
-      },
-      className: button
-    }), root.contentStore.toolPinned && /*#__PURE__*/jsx(PushpinFilled, {
-      onClick: function onClick() {
-        return root.contentStore.toolPinned = !root.contentStore.toolPinned;
-      },
-      className: button
-    }), /*#__PURE__*/jsx(Select$2, {
-      value: articleList.find(function (a) {
-        return a.value == articleCodex;
-      }),
+    children: [/*#__PURE__*/jsx(Select$1, {
+      placeholder: t('backoffice.configurator.article.placeholder'),
+      value: articleCodex,
       options: groupedArticles,
-      formatGroupLabel: formatGroupLabel,
-      onChange: onChange,
+      onChange: setArticleCodex,
       className: select
-    }), /*#__PURE__*/jsx(ReloadOutlined$1, {
+    }), /*#__PURE__*/jsx(Button, {
+      icon: /*#__PURE__*/jsx(ReloadOutlined$1, {}),
       onClick: function onClick() {
         return setDoReset(true);
-      },
-      className: button
+      }
     })]
   });
 };
-var groupStyles = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between'
-};
-var groupBadgeStyles = {
-  backgroundColor: '#EBECF0',
-  borderRadius: '2em',
-  color: '#172B4D',
-  display: 'inline-block',
-  fontSize: 12,
-  fontWeight: 'normal',
-  lineHeight: '1',
-  minWidth: 1,
-  padding: '0.16em 0.5em',
-  textAlign: 'center'
-};
 var ArticleSelection$1 = observer(ArticleSelection);
 
-function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function useWysiwyg$1(_ref) {
   var tool = _ref.tool,
-    visible = _ref.visible;
+    toolbar = _ref.toolbar;
   var _useDivaCore = useDivaCore(),
     _useDivaCore$actions = _useDivaCore.actions,
     subscribeEvents = _useDivaCore$actions.subscribeEvents,
@@ -34632,8 +35206,8 @@ function useWysiwyg$1(_ref) {
     doNavigate = _useState12[0],
     setDoNavigate = _useState12[1];
   useEffect(function () {
-    if (visible) setDoReset(true);
-  }, [visible]);
+    if (!toolbar.hidden) setDoReset(true);
+  }, [toolbar.hidden]);
   var loadMask = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(id) {
       var jwt, d;
@@ -34644,7 +35218,7 @@ function useWysiwyg$1(_ref) {
             _context.next = 3;
             return fetch(root.configurationStore.apiConfig.enricherService + '/packages/' + id + '/mask', {
               method: 'GET',
-              headers: _objectSpread$4({}, jwt ? {
+              headers: _objectSpread$3({}, jwt ? {
                 Authorization: 'Bearer ' + jwt
               } : {})
             }).then(function (r) {
@@ -34851,18 +35425,17 @@ var FallbackComponent = function FallbackComponent(_ref2) {
   });
 };
 
-function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Wsyiwyg = function Wsyiwyg(_ref) {
   var _state$articleCodex;
   var tool = _ref.tool,
-    visible = _ref.visible;
+    toolbar = _ref.toolbar;
   var _useDivaCore = useDivaCore(),
     organizationId = _useDivaCore.state.organization._id;
-  var root = useStore();
   var state = useWysiwyg$1({
     tool: tool,
-    visible: visible
+    toolbar: toolbar
   });
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -34879,12 +35452,10 @@ var Wsyiwyg = function Wsyiwyg(_ref) {
         state: state
       }), state.pack && !state.doReset && /*#__PURE__*/jsx("div", {
         hidden: !state.articleCodex,
-        style: {
-          height: 'calc(100% - 71px)'
-        },
+        className: confContainer,
         children: /*#__PURE__*/jsx(WebPlannerReact, {
           settings: state.settings,
-          parameters: _objectSpread$3(_objectSpread$3({
+          parameters: _objectSpread$2(_objectSpread$2({
             articleCodexes: (_state$articleCodex = state.articleCodex) !== null && _state$articleCodex !== void 0 ? _state$articleCodex : '',
             variantValues: '',
             resetArticle: '',
@@ -34903,7 +35474,9 @@ var Wsyiwyg = function Wsyiwyg(_ref) {
           internal: {
             catalogMask: state.pack,
             actions: {
-              toggleLoading: root.contentStore.toggleToolLoading.bind(root.contentStore)
+              toggleLoading: function toggleLoading(subId, _, toggle) {
+                return toolbar.toggleLoading(tool.id, subId, toggle);
+              }
             }
           },
           isVisible: !!state.articleCodex
@@ -34914,8 +35487,8 @@ var Wsyiwyg = function Wsyiwyg(_ref) {
 };
 
 function useWysiwyg(_ref) {
-  var tool = _ref.tool;
-    _ref.visible;
+  var tool = _ref.tool,
+    toolbar = _ref.toolbar;
   tool.parameters;
   _objectDestructuringEmpty(useDivaCore());
   var root = useStore();
@@ -34925,7 +35498,7 @@ function useWysiwyg(_ref) {
     setData = _useState2[1];
   useEffect(function () {
     var _tool$parameters$data, _tool$parameters, _root$resetErrorBound;
-    var newData = _resoveLanguage(toJS((_tool$parameters$data = (_tool$parameters = tool.parameters) === null || _tool$parameters === void 0 || (_tool$parameters = _tool$parameters.data) === null || _tool$parameters === void 0 ? void 0 : _tool$parameters.content) !== null && _tool$parameters$data !== void 0 ? _tool$parameters$data : []), root.contentStore.toolsLanguage);
+    var newData = _resoveLanguage(toJS((_tool$parameters$data = (_tool$parameters = tool.parameters) === null || _tool$parameters === void 0 || (_tool$parameters = _tool$parameters.data) === null || _tool$parameters === void 0 ? void 0 : _tool$parameters.content) !== null && _tool$parameters$data !== void 0 ? _tool$parameters$data : []), toolbar.currentLanguage);
     setData(newData);
     (_root$resetErrorBound = root.resetErrorBoundary) === null || _root$resetErrorBound === void 0 || _root$resetErrorBound.call(root);
   }, [tool.parameters, tool.parameters.data]);
@@ -34966,99 +35539,52 @@ var getTranslation = function getTranslation(text, lang) {
   }
 };
 
+var container = "container-Xbv0B";
+var css_248z = ".container-Xbv0B {\n  background: white;\n  color: black;\n  border-radius: 5px;\n  border: 1px solid #d9d9d9;\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.darkmode .container-Xbv0B {\n  border-color: #424242;\n}\n";
+styleInject(css_248z);
+
 var WsyiwygContentItem = function WsyiwygContentItem(_ref) {
   var tool = _ref.tool,
-    visible = _ref.visible;
+    toolbar = _ref.toolbar;
   var _useWysiwygContentIte = useWysiwyg({
       tool: tool,
-      visible: visible
+      toolbar: toolbar
     }),
     data = _useWysiwygContentIte.data;
   return /*#__PURE__*/jsx(ErrorBoundary, {
     errorCode: "BACKO_0004",
     addToErrorLog: data,
-    children: /*#__PURE__*/jsxs("div", {
-      style: {
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%'
-      },
-      children: [/*#__PURE__*/jsx(ContentItemComponent, {
+    children: /*#__PURE__*/jsx("div", {
+      className: container,
+      children: /*#__PURE__*/jsx(ContentItemComponent, {
         settings: {
           contentItems: data !== null && data !== void 0 ? data : []
         }
-      }), ";"]
+      })
     })
   });
 };
 
-var toolsSelector = "tools-selector-BHV3Z";
-var container = "container-BucHG";
-var pinned = "pinned-vk2AT";
-var draghandle = "draghandle-f5b0N";
-var midHandle = "mid-handle--qh50";
-var toolItem = "tool-item-KyKgQ";
-var sel = "sel-iUm8X";
-var css_248z$1 = ".wrapper-njnwX {\n  position: absolute;\n  top: 0px;\n}\n.tools-selector-BHV3Z {\n  z-index: 2000;\n  width: 36px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: 16px;\n  align-items: center;\n  background-color: #001529;\n  color: rgba(255, 255, 255, 0.85);\n  padding-top: 16px;\n  height: 100%;\n}\n\n.container-BucHG {\n  right: 37px;\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: #fff;\n  z-index: 10001;\n  overflow: auto;\n}\n\n.pinned-vk2AT.container-BucHG {\n  position: relative;\n  right: auto;\n  right: initial;\n}\n\n.draghandle-f5b0N {\n  position: absolute;\n  height: 100%;\n  top: 0px;\n  left: 0;\n  width: 2px;\n  cursor: ew-resize;\n  background-color: gray;\n}\n\n.mid-handle--qh50 {\n  position: absolute;\n  width: 5px;\n  height: 32px;\n  background-color: #fff;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border-left: 2px solid grey;\n  border-right: 2px solid grey;\n}\n\n.tool-item-KyKgQ {\n  writing-mode: vertical-lr;\n  padding: 10px;\n  text-orientation: mixed;\n  cursor: pointer;\n  position: relative;\n}\n\n.tool-item-KyKgQ::after {\n  content: '';\n  position: absolute;\n  width: 3px;\n  height: 0px;\n  left: 0;\n  bottom: 50%;\n  background-color: rgba(255, 255, 255, 0.85);\n  transition: all ease-in-out 0.2s;\n}\n.tool-item-KyKgQ:hover::after,\n.sel-iUm8X::after {\n  height: 100%;\n  bottom: 0;\n}\n";
-styleInject(css_248z$1);
-
-var overlay = "overlay-Dr5pn";
-var loading = "loading-Ed3rZ";
-var css_248z = ".overlay-Dr5pn {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  background-color: rgba(255, 255, 255, 0.6);\n  z-index: 10000;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n}\n\n.loading-Ed3rZ {\n  margin: 0 auto;\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n}\n.loading-Ed3rZ div {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 64px;\n  height: 64px;\n  margin: 8px;\n  border: 8px solid #b6b6b6;\n  border-radius: 50%;\n  animation: loading-Ed3rZ 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: #b6b6b6 transparent transparent transparent;\n}\n.loading-Ed3rZ div:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.loading-Ed3rZ div:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.loading-Ed3rZ div:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes loading-Ed3rZ {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
-styleInject(css_248z);
-
-function Spinner() {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showSpinner = _useState2[0],
-    setShowSpinner = _useState2[1];
-  var root = useStore();
-  useEffect(function () {
-    if (root.contentStore.isToolLoading) {
-      setShowSpinner(true);
-    } else if (!root.contentStore.isToolLoading) {
-      setShowSpinner(false);
-    }
-  }, [root.contentStore.isToolLoading]);
-  if (!showSpinner) {
-    return /*#__PURE__*/jsx(Fragment, {});
-  }
-  return /*#__PURE__*/jsx("div", {
-    className: overlay,
-    id: "diva-loader",
-    children: /*#__PURE__*/jsxs("div", {
-      className: loading,
-      children: [/*#__PURE__*/jsx("div", {}), /*#__PURE__*/jsx("div", {}), /*#__PURE__*/jsx("div", {}), /*#__PURE__*/jsx("div", {})]
-    })
-  });
-}
-var Spinner$1 = observer(Spinner);
-
-function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Toolbar = function Toolbar(_ref) {
-  _objectDestructuringEmpty(_ref);
+  var position = _ref.position;
   var root = useStore();
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    width = _useState2[0],
-    setWidth = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    mouseDown = _useState4[0],
-    setMouseDown = _useState4[1];
-  var handler = function handler(mouseDownEvent) {
-    var startWidth = width;
+  var toolBar = position === 'bottom' ? root.contentStore.bottomToolBar : root.contentStore.rightToolBar;
+  var onMouseDown = function onMouseDown(mouseDownEvent) {
+    mouseDownEvent.preventDefault();
+    var startWidth = toolBar.width;
     var startPosition = {
       x: mouseDownEvent.pageX,
       y: mouseDownEvent.pageY
     };
-    setMouseDown(true);
     function onMouseMove(mouseMoveEvent) {
-      setWidth(startWidth + startPosition.x - mouseMoveEvent.pageX);
+      mouseMoveEvent.preventDefault();
+      if (position === 'bottom') {
+        toolBar.width = startWidth + startPosition.y - mouseMoveEvent.pageY;
+      } else {
+        toolBar.width = startWidth + startPosition.x - mouseMoveEvent.pageX;
+      }
     }
     function onMouseUp() {
-      setMouseDown(false);
       document.body.removeEventListener('mousemove', onMouseMove);
     }
     document.body.addEventListener('mousemove', onMouseMove);
@@ -35066,91 +35592,115 @@ var Toolbar = function Toolbar(_ref) {
       once: true
     });
   };
-  useEffect(function () {
-    var tool = root.contentStore.tools.find(function (t) {
-      return t.id === root.contentStore.openedToolId;
-    });
-    setWidth(tool ? tool.startWidth : 0);
-  }, [root.contentStore.openedToolId]);
-  useEffect(function () {
-    if (width < 300 && !mouseDown) {
-      root.contentStore.hideTools = true;
-      setWidth(0);
-    }
-  }, [width, mouseDown]);
-  var tool = root.contentStore.tools.find(function (t) {
-    return t.id === root.contentStore.openedToolId;
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(el) {
+      return toolBar.toolbarElement = el;
+    },
+    className: classnames(_defineProperty(_defineProperty({}, right, position === 'right'), bottom, position === 'bottom')),
+    style: {
+      position: 'relative',
+      display: toolBar.tools.length === 0 ? 'none' : 'flex',
+      flexDirection: position === 'right' ? 'row' : 'column-reverse',
+      height: !toolBar.pinned && position === 'bottom' ? 5 : undefined
+    },
+    children: [/*#__PURE__*/jsx("div", {
+      className: draghandle,
+      onMouseDown: onMouseDown,
+      style: {
+        left: position === 'right' && !toolBar.pinned ? toolBar.width * -1 - 1 : undefined,
+        top: position === 'bottom' && !toolBar.pinned ? toolBar.width * -1 - 31 : undefined
+      },
+      children: /*#__PURE__*/jsx("div", {
+        className: midHandle
+      })
+    }), !toolBar.hidden && toolBar.currentOpenTool && /*#__PURE__*/jsx("div", {
+      className: classnames(container$1, _defineProperty({}, unpinnedRight, !toolBar.pinned && position === 'right')),
+      hidden: toolBar.hidden,
+      style: {
+        width: position === 'right' ? toolBar.width : undefined,
+        minWidth: position === 'right' ? toolBar.width : undefined,
+        height: position === 'bottom' ? toolBar.width : undefined,
+        minHeight: position === 'bottom' ? toolBar.width : undefined
+      },
+      children: /*#__PURE__*/jsx(ToolElement, {
+        tool: toolBar.currentOpenTool,
+        toolbar: toolBar,
+        loading: toolBar.isLoading(toolBar.currentOpenTool.id)
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames(toolsSelector),
+      children: [/*#__PURE__*/jsxs("div", {
+        children: [!toolBar.pinned && /*#__PURE__*/jsx(PushpinOutlined, {
+          onClick: function onClick() {
+            return toolBar.pinned = !toolBar.pinned;
+          },
+          className: button
+        }), toolBar.pinned && /*#__PURE__*/jsx(PushpinFilled, {
+          onClick: function onClick() {
+            return toolBar.pinned = !toolBar.pinned;
+          },
+          className: button,
+          rotate: 315
+        })]
+      }), toolBar.tools.map(function (t) {
+        var _toolBar$currentOpenT;
+        return /*#__PURE__*/jsx("div", {
+          className: classnames(toolItem, _defineProperty({}, sel, t.id === ((_toolBar$currentOpenT = toolBar.currentOpenTool) === null || _toolBar$currentOpenT === void 0 ? void 0 : _toolBar$currentOpenT.id))),
+          onClick: function onClick() {
+            var _toolBar$currentOpenT2;
+            if (((_toolBar$currentOpenT2 = toolBar.currentOpenTool) === null || _toolBar$currentOpenT2 === void 0 ? void 0 : _toolBar$currentOpenT2.id) != t.id) {
+              toolBar.openTool(t.id);
+              toolBar.hidden = false;
+            } else {
+              toolBar.hidden = !toolBar.hidden;
+            }
+          },
+          children: t.name
+        }, t.id);
+      })]
+    })]
   });
-  var ToolElement = undefined;
-  switch (tool === null || tool === void 0 ? void 0 : tool.type) {
+};
+var Toolbar$1 = observer(Toolbar);
+function ToolElement(_ref2) {
+  var _tool$element;
+  var tool = _ref2.tool,
+    toolbar = _ref2.toolbar,
+    loading = _ref2.loading;
+  var Tool = (_tool$element = tool.element) !== null && _tool$element !== void 0 ? _tool$element : /*#__PURE__*/jsx(Fragment, {});
+  switch (tool.type) {
     case 'Configurator':
-      ToolElement = /*#__PURE__*/jsx(Wsyiwyg, {
+      Tool = /*#__PURE__*/jsx(Wsyiwyg, {
         tool: tool,
-        visible: !root.contentStore.hideTools
+        toolbar: toolbar
       });
       break;
     case 'ContentItem':
-      ToolElement = /*#__PURE__*/jsx(WsyiwygContentItem, {
+      Tool = /*#__PURE__*/jsx(WsyiwygContentItem, {
         tool: tool,
-        visible: !root.contentStore.hideTools
+        toolbar: toolbar
       });
       break;
   }
-  useEffect(function () {
-    if (!root.contentStore.hideTools) {
-      if (tool) setWidth(tool === null || tool === void 0 ? void 0 : tool.startWidth);
-    }
-  }, [root.contentStore.hideTools]);
-  useEffect(function () {
-    if (root.contentStore.hideTools) {
-      var _tool = root.contentStore.tools.find(function (t) {
-        return t.defaultOpen;
-      });
-      if (_tool) {
-        root.contentStore.openedToolId = _tool.id;
-        root.contentStore.toolPinned = !!_tool.defaultPinned;
-        root.contentStore.hideTools = false;
-      }
-    }
-  }, [root.contentStore.tools]);
-  if (root.contentStore.tools.length === 0) return /*#__PURE__*/jsx(Fragment, {});
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [ToolElement && /*#__PURE__*/jsxs("div", {
-      className: classnames(container, root.contentStore.toolPinned ? pinned : undefined),
-      hidden: root.contentStore.hideTools,
-      style: _objectSpread$2({
-        width: width
-      }, tool !== null && tool !== void 0 && tool.offsetRight ? {
-        right: tool.offsetRight
-      } : {}),
-      children: [/*#__PURE__*/jsx(Spinner$1, {}), ToolElement, /*#__PURE__*/jsx("div", {
-        className: draghandle,
-        onMouseDown: handler,
-        children: /*#__PURE__*/jsx("div", {
-          className: midHandle
-        })
-      })]
-    }), /*#__PURE__*/jsx("div", {
-      className: toolsSelector,
-      children: root.contentStore.tools.map(function (t) {
-        return /*#__PURE__*/jsx("div", {
-          className: classnames(toolItem, t.id === root.contentStore.openedToolId ? sel : undefined),
-          onClick: function onClick() {
-            if (root.contentStore.openedToolId != t.id) {
-              root.contentStore.openedToolId = t.id;
-              root.contentStore.toolPinned = !!t.defaultPinned;
-              root.contentStore.hideTools = false;
-            } else {
-              root.contentStore.hideTools = !root.contentStore.hideTools;
-            }
-          },
-          children: t.name
-        }, t.id);
+  return /*#__PURE__*/jsx(Layout$1, {
+    style: {
+      height: '100%',
+      width: '100%'
+    },
+    children: /*#__PURE__*/jsx(Spin$1, {
+      spinning: loading,
+      size: "large",
+      children: /*#__PURE__*/jsx(Layout$1.Content, {
+        style: {
+          height: '100%',
+          width: '100%',
+          padding: 32
+        },
+        children: Tool
       })
-    })]
+    })
   });
-};
-var Toolbar$1 = observer(Toolbar);
+}
 
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -35216,10 +35766,10 @@ var MainLayout = function MainLayout() {
         position: 'relative',
         overflowX: 'hidden'
       },
-      children: [/*#__PURE__*/jsx(Navigation, {}), /*#__PURE__*/jsx(Layout, {
+      children: [/*#__PURE__*/jsx(Navigation, {}), /*#__PURE__*/jsxs(Layout, {
         className: layout,
         ref: containerRef,
-        children: /*#__PURE__*/jsxs(ErrorBoundary, {
+        children: [/*#__PURE__*/jsxs(ErrorBoundary, {
           children: [/*#__PURE__*/jsx("div", {
             className: contentWrapper,
             children: /*#__PURE__*/jsx(Router$1, {})
@@ -35229,8 +35779,12 @@ var MainLayout = function MainLayout() {
             container: containerRef,
             left: true
           })]
-        })
-      }), /*#__PURE__*/jsx(Toolbar$1, {}), /*#__PURE__*/jsx(Modal$1, {})]
+        }), /*#__PURE__*/jsx(Toolbar$1, {
+          position: "bottom"
+        })]
+      }), /*#__PURE__*/jsx(Toolbar$1, {
+        position: "right"
+      }), /*#__PURE__*/jsx(Modal$1, {})]
     })
   });
 };