@vitrosoftware/common-ui-ts 1.1.152 → 1.1.153

package/dist/index.js

@@ -465,9 +465,11 @@ var ScrollBar = function ScrollBar(props) {
     for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
       var entry = _step.value;
       if (parent && entry.target === parent) {
-        if (parent.offsetHeight && ref.current) {
+        if (parent.offsetHeight && parent.offsetWidth && ref.current) {
           ref.current.scrollTop = 1;
+          ref.current.scrollLeft = 1;
           ref.current.scrollTop = 0;
+          ref.current.scrollLeft = 0;
           resizeObserver.disconnect();
         }
       }
@@ -511,9 +513,7 @@ var ScrollBar = function ScrollBar(props) {
     }
   };
   var updateParent = function updateParent(element) {
-    if (!element.offsetParent) {
-      setParent(element.parentElement);
-    }
+    setParent(element.parentElement);
   };
   var onWheel = function onWheel(e) {
     e.stopPropagation();
@@ -531,6 +531,7 @@ var ScrollBar = function ScrollBar(props) {
 (function (EVENT) {
   EVENT["MOUSEDOWN"] = "mousedown";
   EVENT["MOUSEUP"] = "mouseup";
+  EVENT["MOUSEMOVE"] = "mousemove";
   EVENT["KEYDOWN"] = "keydown";
   EVENT["RESIZE"] = "resize";
   EVENT["DRAGOVER"] = "dragover";
@@ -747,7 +748,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
   };
   var titleClassName = styles['vitro-site-name'] + CTRL.SPACE + (displayItemList.length ? styles['opened'] : styles['closed']);
   return React__default.createElement("div", {
-    className: styles['vitro-breadcrumbs']
+    className: styles['vitro-breadcrumbs'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, props.text ? React__default.createElement("h2", {
     className: titleClassName
   }, props.text) : null, React__default.createElement("div", {
@@ -20518,6 +20519,7 @@ var EVENT;
   EVENT["LOADED"] = "loaded.jstree";
   EVENT["MODEL"] = "model.jstree";
   EVENT["DBLCLICK"] = "dblclick.jstree";
+  EVENT["DROP"] = "drop.vakata.jstree";
 })(EVENT || (EVENT = {}));
 var NODE_TYPE;
 (function (NODE_TYPE) {
@@ -20726,6 +20728,9 @@ var JsTreeViewContextImpl = /*#__PURE__*/function () {
   _proto.isUndetermined = function isUndetermined(node) {
     return this.jsTree.jstree(METHOD.IS_UNDETERMINED, node);
   };
+  _proto.clearState = function clearState() {
+    return this.jsTree.jstree('clear_state');
+  };
   return JsTreeViewContextImpl;
 }();
 
@@ -20733,35 +20738,35 @@ var styles$3 = {"vitro-tree-view":"_tree-view_vitro-tree-view_3oii-CW"};
 
 var CSS_CLASS_JSTREE_NODE = 'jstree-node';
 var TreeView = function TreeView(props) {
-  var _useState = React.useState(null),
-    jsTreeTreeView = _useState[0],
-    setJsTreeTreeView = _useState[1];
+  var _useState = React.useState(),
+    config = _useState[0],
+    setConfig = _useState[1];
+  var _useState2 = React.useState(null),
+    jsTreeTreeView = _useState2[0],
+    setJsTreeTreeView = _useState2[1];
   var jsTreeRef = React.useRef(null);
-  var config = TreeViewConfig.getConfig(props.id, props.isCheckboxSelect, props.isSaveCheckboxState, props.expandNodeIdList, props.selectNodeId);
   var jsTreeView;
   React.useEffect(function () {
-    config.core.data = props.getData;
-    if (props.isCheckboxSelect) {
-      jquery(document).on(exports.EVENT.CONTEXTMENU, CTRL.DOT + CSS_CLASS_JSTREE_NODE, function (e) {
-        return checkNode(e, jsTreeView);
-      });
+    setConfig(TreeViewConfig.getConfig(props.id, props.isCheckboxSelect, props.isSaveCheckboxState, props.expandNodeIdList, props.selectNodeId));
+  }, [props.id]);
+  React.useEffect(function () {
+    if (jsTreeTreeView && jsTreeRef.current) {
+      jsTreeTreeView.dispose();
     }
-    jquery(jsTreeRef.current).jstree(config);
-    var jsTree = jquery(jsTreeRef.current);
-    jsTreeView = new JsTreeViewContextImpl(jsTree);
-    setJsTreeTreeView(jsTreeView);
-    if (props.onInit) {
-      props.onInit(jsTreeView);
+    if (config) {
+      init();
     }
+  }, [jsTreeRef, config]);
+  React.useEffect(function () {
     return function () {
       jquery(document).off(exports.EVENT.CONTEXTMENU, CTRL.DOT + CSS_CLASS_JSTREE_NODE, function (e) {
         return checkNode(e, jsTreeView);
       });
     };
-  }, [jsTreeRef]);
+  }, []);
   React.useEffect(function () {
     if (props.onDrop) {
-      jquery(document).on('drop.vakata.jstree', function (e) {
+      jquery(document).on(EVENT.DROP, function (e) {
         onDrop(e);
       });
     }
@@ -20771,6 +20776,32 @@ var TreeView = function TreeView(props) {
       }
     };
   }, []);
+  React.useEffect(function () {
+    if (props.onSelect && jsTreeTreeView) {
+      jsTreeTreeView.setEventHandler({
+        id: EVENT.SELECT_NODE,
+        process: props.onSelect
+      });
+    }
+  }, [jsTreeTreeView]);
+  var init = function init() {
+    config.core.data = props.getData;
+    jquery(jsTreeRef.current).jstree(config);
+    var jsTree = jquery(jsTreeRef.current);
+    jsTreeView = new JsTreeViewContextImpl(jsTree);
+    setJsTreeTreeView(jsTreeView);
+    if (props.isCheckboxSelect) {
+      jquery(document).on(exports.EVENT.CONTEXTMENU, CTRL.DOT + CSS_CLASS_JSTREE_NODE, function (e) {
+        return checkNode(e, jsTreeView);
+      });
+    }
+    if (props.isSaveState === false) {
+      jsTreeView.clearState();
+    }
+    if (props.onInit) {
+      props.onInit(jsTreeView);
+    }
+  };
   var checkNode = function checkNode(e, treeView) {
     e.preventDefault();
     e.stopPropagation();
@@ -21200,6 +21231,7 @@ var EVENT$1;
   EVENT["ON_END_DRAG_GANTT"] = "OnEndDragGantt";
   EVENT["ON_ZOOM"] = "OnZoom";
   EVENT["ON_GET_DEPENDENCY"] = "OnGetDependency";
+  EVENT["ON_DATA_RECEIVE"] = "OnDataReceive";
 })(EVENT$1 || (EVENT$1 = {}));
 var URL;
 (function (URL) {
@@ -21244,6 +21276,7 @@ var CELL_TYPE;
   CELL_TYPE["HTML"] = "Html";
   CELL_TYPE["ICON"] = "Icon";
   CELL_TYPE["LIST"] = "List";
+  CELL_TYPE["BOOL"] = "Bool";
 })(CELL_TYPE || (CELL_TYPE = {}));
 var ATTRIBUTE;
 (function (ATTRIBUTE) {
@@ -21750,6 +21783,9 @@ var TreeGridTableViewContextImpl = /*#__PURE__*/function () {
   _proto.hideRow = function hideRow(row, del, noshow) {
     this.grid.HideRow(row, del, noshow);
   };
+  _proto.showRow = function showRow(row, noshow, expanded) {
+    this.grid.ShowRow(row, noshow, expanded);
+  };
   _proto.refreshGanttSlack = function refreshGanttSlack(show, min, err) {
     if (show === void 0) {
       show = true;
@@ -21795,6 +21831,15 @@ var TreeGridTableViewContextImpl = /*#__PURE__*/function () {
   _proto.calculate = function calculate(show, calculated) {
     this.grid.Calculate(show, calculated);
   };
+  _proto.changeColsVisibility = function changeColsVisibility(showList, hideList, prefer) {
+    this.grid.ChangeColsVisibility(showList, hideList, prefer);
+  };
+  _proto.setColWidth = function setColWidth(col, change) {
+    this.grid.SetWidth(col, change);
+  };
+  _proto.doGrouping = function doGrouping(group) {
+    this.grid.DoGrouping(group);
+  };
   _createClass(TreeGridTableViewContextImpl, [{
     key: "columnList",
     get: function get() {
@@ -21878,6 +21923,14 @@ var TreeGridTableViewContextImpl = /*#__PURE__*/function () {
     key: "idColumnName",
     get: function get() {
       return this.grid.IdColumnName;
+    },
+    set: function set(idColumnName) {
+      this.grid.IdColumnName = idColumnName;
+    }
+  }, {
+    key: "groupRow",
+    get: function get() {
+      return this.grid.Rows.Group1;
     }
   }]);
   return TreeGridTableViewContextImpl;
@@ -21890,28 +21943,27 @@ if (!w$2.tableViewList) {
   w$2.tableViewList = new Map();
 }
 var TreeGrid = function TreeGrid(props) {
-  var _useState = React.useState(CTRL.EMPTY),
-    className = _useState[0],
-    setClassName = _useState[1];
+  var prevGridIdRef = React.useRef();
   var disposeTableViewById = function disposeTableViewById(gridId) {
     if (gridId && w$2.Grids) {
       var tableView = getTableViewById(gridId);
       if (tableView && tableView.dispose) {
         tableView.dispose();
       }
+      w$2.TGDelEvent(null, gridId);
       var grid = w$2.Grids[gridId];
       if (grid && grid.Dispose) {
         grid.Dispose();
       }
     }
   };
-  var initData = function initData(data, value) {
-    if (data.indexOf('<B') === -1) {
+  var initData = function initData(data, value, tag) {
+    if (data.indexOf("<" + tag) === -1) {
       var configStartTag = '</Grid>';
       var insertIndex = data.indexOf(configStartTag);
-      data = data.slice(0, insertIndex) + ("<B>" + value + "</B>") + data.slice(insertIndex);
+      data = data.slice(0, insertIndex) + ("<" + tag + ">" + value + "</" + tag + ">") + data.slice(insertIndex);
     } else {
-      var _configStartTag = '<B ';
+      var _configStartTag = "<" + tag + " ";
       var _insertIndex = data.indexOf(_configStartTag) + _configStartTag.length;
       data = data.slice(0, _insertIndex) + value + CTRL.SPACE + data.slice(_insertIndex);
     }
@@ -21920,13 +21972,13 @@ var TreeGrid = function TreeGrid(props) {
   var onDataSendHandler = function onDataSendHandler(tableView, source, data) {
     var newData = data;
     if (tableView.filterOneLevel) {
-      newData = initData(newData, 'FilterOneLevel="1"');
+      newData = initData(newData, 'FilterOneLevel="1"', 'B');
     }
     var searchCriterionList = tableView.getSearchCriterionList();
     if (searchCriterionList && searchCriterionList.length) {
       var searchCriterionListJson = JSON.stringify(searchCriterionList);
       var value = "SearchCriterionList='" + searchCriterionListJson + "'";
-      newData = initData(data, value);
+      newData = initData(data, value, 'B');
     }
     return newData;
   };
@@ -21939,6 +21991,9 @@ var TreeGrid = function TreeGrid(props) {
     if (props.filterOneLevel) {
       grid.filterOneLevel = props.filterOneLevel;
     }
+    if (props.idColumnName) {
+      grid.idColumnName = props.idColumnName;
+    }
     if (props.eventHandlerList) {
       props.eventHandlerList.forEach(function (eventHandler) {
         grid.setEventHandler(eventHandler);
@@ -21954,9 +22009,6 @@ var TreeGrid = function TreeGrid(props) {
     if (props.onInit) {
       props.onInit(grid, next);
     }
-    if (g.HasGantt()) {
-      setClassName('vitro-table-view-gantt');
-    }
     var onDateSendEventHandler = {
       id: EVENT$1.ON_DATA_SEND,
       process: onDataSendHandler
@@ -21978,7 +22030,10 @@ var TreeGrid = function TreeGrid(props) {
     }
   };
   React.useEffect(function () {
-    disposeTableViewById(props.id);
+    if (prevGridIdRef.current) {
+      disposeTableViewById(prevGridIdRef.current);
+    }
+    prevGridIdRef.current = props.id;
     if (w$2.TGSetEvent) {
       w$2.TGSetEvent(EVENT$1.ON_LOADED, props.id, function (grid, next) {
         return onGridLoaded(grid, next);
@@ -22031,12 +22086,14 @@ var TreeGrid = function TreeGrid(props) {
         }, "vitro-table-view" + props.id);
       }
     }
+  }, [props.id]);
+  React.useEffect(function () {
     return function () {
       disposeTableViewById(props.id);
     };
   }, []);
   return React__default.createElement("div", {
-    className: styles$5["vitro-table-view"] + CTRL.SPACE + className
+    className: styles$5["vitro-table-view"] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, React__default.createElement("div", {
     id: "vitro-table-view" + props.id
   }));
@@ -22069,16 +22126,16 @@ var MicroFrontendState = /*#__PURE__*/function () {
   return MicroFrontendState;
 }();
 
-var renderMicrofrontend = function renderMicrofrontend(rendererName, microFrontendState, rootElement, data, tryCnt) {
+var renderMicrofrontend = function renderMicrofrontend(rendererName, microFrontendState, rootElement, data, isReloadOnChange, tryCnt) {
   if (!window[rendererName]) {
     if (tryCnt < 10) {
       setTimeout(function () {
-        renderMicrofrontend(rendererName, microFrontendState, rootElement, data, tryCnt++);
+        renderMicrofrontend(rendererName, microFrontendState, rootElement, data, isReloadOnChange, tryCnt++);
       }, 100);
     }
     console.log(rendererName + " load error. tryCnt: " + tryCnt);
   } else {
-    if (microFrontendState.unmountAction) {
+    if (isReloadOnChange !== false && microFrontendState.unmountAction) {
       microFrontendState.unmountAction();
     }
     microFrontendState.unmountAction = window[rendererName](rootElement, data);
@@ -22094,7 +22151,7 @@ var MicroFrontend = function MicroFrontend(props) {
   var renderMicroFrontend = function renderMicroFrontend() {
     if (rootRef != null && rootRef.current != null) {
       var rendererName = "render" + props.name;
-      renderMicrofrontend(rendererName, microFrontendState, rootRef.current, props.data, 0);
+      renderMicrofrontend(rendererName, microFrontendState, rootRef.current, props.data, props.isReloadOnChange, 0);
     }
     microFrontendState.renderInProgress = false;
   };
@@ -60596,18 +60653,19 @@ var Image = function Image(props) {
 
 var styles$a = {"vitro-image-button":"_image-button_vitro-image-button_34pBVmE"};
 
-var ImageButton = function ImageButton(props) {
+var ImageButton = React.forwardRef(function (props, ref) {
   return React__default.createElement(Tooltip$1, {
     text: props.tooltipText || CTRL.EMPTY,
     placement: props.tooltipPlacement
-  }, React__default.createElement("button", {
+  }, React__default.createElement("button", Object.assign({}, props, {
+    ref: ref,
     onClick: props.onClick,
     className: styles$a['vitro-image-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
-  }, props.imageUrl && React__default.createElement(Image, {
+  }), props.imageUrl && React__default.createElement(Image, {
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl
   })));
-};
+});
 
 var DialogComponent = function DialogComponent(props) {
   return React__default.createElement("div", {
@@ -61586,7 +61644,8 @@ var DropdownButton = function DropdownButton(props) {
   }), itemList.length > 0 && isReady && React__default.createElement(BootstrapDropdown, {
     align: ALIGN_END,
     onToggle: onDropdownToggle,
-    drop: DROP_DOWN
+    drop: DROP_DOWN,
+    show: props.isShow
   }, React__default.createElement(BootstrapDropdown.Toggle, {
     ref: buttonRef
   }, props.title && React__default.createElement("span", {
@@ -61917,29 +61976,71 @@ var View = function View(props) {
   }));
 };
 
-var styles$s = {"vitro-label":"_label_vitro-label_it8WNUE","vitro-required":"_label_vitro-required_2-bSGif"};
+var styles$s = {"vitro-tab-button-group":"_tab-button-group_vitro-tab-button-group_18mZ_Ds","vitro-tab-button-group-content":"_tab-button-group_vitro-tab-button-group-content_2jyBqmO","active":"_tab-button-group_active_35VFF8T"};
+
+var CSS_CLASS_ACTIVE = 'active';
+var CSS_CLASS_TAB_BUTTON_GROUP = 'vitro-tab-button-group';
+var CSS_CLASS_TAB_BUTTON_GROUP_CONTENT = 'vitro-tab-button-group-content';
+var TabButtonGroup = function TabButtonGroup(props) {
+  var _useState = React.useState(),
+    activeItem = _useState[0],
+    setActiveItem = _useState[1];
+  React.useEffect(function () {
+    var _props$itemList$;
+    var _activeItem = props.activeItem ? props.activeItem : (_props$itemList$ = props.itemList[0]) === null || _props$itemList$ === void 0 ? void 0 : _props$itemList$.id;
+    setActiveItem(_activeItem);
+  }, [props.activeItem]);
+  var setButtonActive = function setButtonActive(index) {
+    var _activeItem = props.itemList[index] ? props.itemList[index] : props.itemList[0];
+    setActiveItem(_activeItem.id);
+    props.onChange(_activeItem);
+  };
+  var isTabButtonActive = function isTabButtonActive(index) {
+    var _props$itemList$index;
+    return ((_props$itemList$index = props.itemList[index]) === null || _props$itemList$index === void 0 ? void 0 : _props$itemList$index.id) == activeItem;
+  };
+  var getTabButton = function getTabButton(item, index) {
+    return React__default.createElement(Button$2, {
+      key: item.id,
+      className: isTabButtonActive(index) ? styles$s[CSS_CLASS_ACTIVE] : CTRL.EMPTY,
+      text: item.text,
+      onClick: function onClick() {
+        setButtonActive(index);
+      }
+    });
+  };
+  return React__default.createElement("div", {
+    className: styles$s[CSS_CLASS_TAB_BUTTON_GROUP]
+  }, React__default.createElement("div", {
+    className: styles$s[CSS_CLASS_TAB_BUTTON_GROUP_CONTENT]
+  }, props.itemList.map(function (item, index) {
+    return getTabButton(item, index);
+  })));
+};
+
+var styles$t = {"vitro-label":"_label_vitro-label_it8WNUE","vitro-required":"_label_vitro-required_2-bSGif"};
 
 var Label = React.forwardRef(function (props, ref) {
   return React__default.createElement("div", {
     ref: ref,
-    className: styles$s['vitro-label'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$t['vitro-label'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     style: props.width ? {
       width: props.width + UNIT.PX
     } : undefined
   }, props.text, props.isRequired && React__default.createElement("span", {
-    className: styles$s['vitro-required']
+    className: styles$t['vitro-required']
   }, CTRL.ASTERISK));
 });
 
-var styles$t = {"vitro-error-message":"_error-message_vitro-error-message_2lHJjgO"};
+var styles$u = {"vitro-error-message":"_error-message_vitro-error-message_2lHJjgO"};
 
 var ErrorMessage = function ErrorMessage(props) {
   return React__default.createElement("span", {
-    className: styles$t['vitro-error-message'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$u['vitro-error-message'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, props.text);
 };
 
-var styles$u = {"vitro-copy-button":"_copy-button_vitro-copy-button_1_JmPVH"};
+var styles$v = {"vitro-copy-button":"_copy-button_vitro-copy-button_1_JmPVH"};
 
 var CopyButton = function CopyButton(props) {
   var copy = function copy() {
@@ -61977,7 +62078,7 @@ var CopyButton = function CopyButton(props) {
     }
   };
   return React__default.createElement(ImageButton, {
-    className: styles$u['vitro-copy-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$v['vitro-copy-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     onClick: copy
   });
 };
@@ -62516,7 +62617,7 @@ var MAX_LENGTH;
   MAX_LENGTH[MAX_LENGTH["SINGLELINE"] = 255] = "SINGLELINE";
 })(MAX_LENGTH || (MAX_LENGTH = {}));
 
-var styles$v = {"vitro-control":"_input_vitro-control_1DmPFkF","vitro-read-only":"_input_vitro-read-only_3f-cBbK","vitro-label":"_input_vitro-label_2XBESiY","vitro-focus":"_input_vitro-focus_1txynr8","vitro-error":"_input_vitro-error_1T3dLzB","vitro-left-label":"_input_vitro-left-label_D9Fpvpd","vitro-error-message":"_input_vitro-error-message_349uWKt","vitro-copy-button":"_input_vitro-copy-button_3wNhQ24","vitro-tooltip":"_input_vitro-tooltip_2DcJtbX"};
+var styles$w = {"vitro-control":"_input_vitro-control_1DmPFkF","vitro-read-only":"_input_vitro-read-only_3f-cBbK","vitro-label":"_input_vitro-label_2XBESiY","vitro-focus":"_input_vitro-focus_1txynr8","vitro-error":"_input_vitro-error_1T3dLzB","vitro-left-label":"_input_vitro-left-label_D9Fpvpd","vitro-error-message":"_input_vitro-error-message_349uWKt","vitro-copy-button":"_input_vitro-copy-button_3wNhQ24","vitro-tooltip":"_input_vitro-tooltip_2DcJtbX"};
 
 var Input = React.forwardRef(function (props, ref) {
   var control;
@@ -62536,9 +62637,14 @@ var Input = React.forwardRef(function (props, ref) {
   React.useEffect(function () {
     var value = props.value ? getValue(props.value) : CTRL.EMPTY;
     setInputValue(value);
+    if (isValueOverflow()) {
+      setIsShowTooltip(true);
+    } else {
+      setIsShowTooltip(false);
+    }
   }, [props.value]);
   React.useEffect(function () {
-    setState(props.errorMessage || props.isError ? styles$v['vitro-error'] : CTRL.EMPTY);
+    setState(props.errorMessage || props.isError ? styles$w['vitro-error'] : CTRL.EMPTY);
   }, [props.errorMessage, props.isError]);
   React.useEffect(function () {
     var jsonStyle = {};
@@ -62548,7 +62654,7 @@ var Input = React.forwardRef(function (props, ref) {
     setStyle(jsonStyle);
   }, [props.height, props.minHeight, props.maxHeight]);
   React.useEffect(function () {
-    if (state === styles$v['vitro-focus'] && inputRef.current && document.activeElement !== inputRef.current) {
+    if (state === styles$w['vitro-focus'] && inputRef.current && document.activeElement !== inputRef.current) {
       inputRef.current.focus();
     }
   }, [state]);
@@ -62584,18 +62690,22 @@ var Input = React.forwardRef(function (props, ref) {
     }
   };
   var setStateOnBlur = function setStateOnBlur() {
-    setState(props.errorMessage || props.isError ? styles$v['vitro-error'] : CTRL.EMPTY);
+    setState(props.errorMessage || props.isError ? styles$w['vitro-error'] : CTRL.EMPTY);
   };
   var onBlur = function onBlur(e) {
     setStateOnBlur();
+    if (isValueOverflow()) {
+      setIsShowTooltip(true);
+    }
     if (props.onBlur) {
       props.onBlur(e);
     }
   };
   var onFocus = function onFocus(e) {
     var _inputRef$current;
-    setState(styles$v['vitro-focus']);
+    setState(styles$w['vitro-focus']);
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    setIsShowTooltip(false);
     if (props.onFocus) {
       props.onFocus(e);
     }
@@ -62627,14 +62737,6 @@ var Input = React.forwardRef(function (props, ref) {
       return false;
     }
   };
-  var onMouseOver = function onMouseOver() {
-    var isOverflow = isValueOverflow();
-    if (isOverflow && !state) {
-      setIsShowTooltip(true);
-    } else {
-      setIsShowTooltip(false);
-    }
-  };
   var getMaxLength = function getMaxLength() {
     if (props.maxLength && props.maxLength < MAX_LENGTH.SINGLELINE) {
       return props.maxLength;
@@ -62691,19 +62793,19 @@ var Input = React.forwardRef(function (props, ref) {
     });
     if (props.isIcon) {
       control = React__default.createElement("div", {
-        className: styles$v['vitro-icon-control'] + CTRL.SPACE + state
+        className: styles$w['vitro-icon-control'] + CTRL.SPACE + state
       }, input);
     } else {
       control = input;
     }
   }
   var getClassName = function getClassName() {
-    var classList = [styles$v['vitro-control'], props.className];
+    var classList = [styles$w['vitro-control'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$v['vitro-read-only']);
+      classList.push(styles$w['vitro-read-only']);
     }
     if (props.labelPosition === POSITION.LEFT) {
-      classList.push(styles$v['vitro-left-label']);
+      classList.push(styles$w['vitro-left-label']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -62712,46 +62814,42 @@ var Input = React.forwardRef(function (props, ref) {
     text: props.isMultiline || isShowTooltip === false ? CTRL.EMPTY : inputValue,
     placement: PLACEMENT.BOTTOM,
     isShow: isShowTooltip === false ? false : undefined,
-    className: styles$v['vitro-tooltip']
+    className: styles$w['vitro-tooltip']
   }, React__default.createElement("div", {
-    className: getClassName(),
-    onMouseOver: onMouseOver,
-    onMouseLeave: function onMouseLeave() {
-      return setIsShowTooltip(false);
-    }
+    className: getClassName()
   }, props.label && React__default.createElement(Label, {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$v['vitro-label']
+    className: styles$w['vitro-label']
   }), control, props.isReadOnly && props.isShowCopyButton !== false ? React__default.createElement(CopyButton, {
-    className: styles$v['vitro-copy-button'],
+    className: styles$w['vitro-copy-button'],
     value: inputValue
   }) : null, props.children, props.errorMessage && React__default.createElement(ErrorMessage, {
     text: props.errorMessage,
-    className: styles$v['vitro-error-message']
+    className: styles$w['vitro-error-message']
   })));
 });
 
-var styles$w = {"vitro-issue-tile-footer":"_issue-tile-footer_vitro-issue-tile-footer_KtHOieL","vitro-issue-tile-status":"_issue-tile-footer_vitro-issue-tile-status_3OjC56L","vitro-status-color":"_issue-tile-footer_vitro-status-color_hhLb22J","vitro-button-more":"_issue-tile-footer_vitro-button-more_1RyVAeR"};
+var styles$x = {"vitro-issue-tile-footer":"_issue-tile-footer_vitro-issue-tile-footer_KtHOieL","vitro-issue-tile-status":"_issue-tile-footer_vitro-issue-tile-status_3OjC56L","vitro-status-color":"_issue-tile-footer_vitro-status-color_hhLb22J","vitro-button-more":"_issue-tile-footer_vitro-button-more_1RyVAeR"};
 
 var IssueTileFooter = function IssueTileFooter(props) {
   return React__default.createElement("div", {
-    className: styles$w['vitro-issue-tile-footer']
+    className: styles$x['vitro-issue-tile-footer']
   }, React__default.createElement("div", {
-    className: styles$w['vitro-issue-tile-status']
+    className: styles$x['vitro-issue-tile-status']
   }, props.statusColor && React__default.createElement("div", {
-    className: styles$w['vitro-status-color'],
+    className: styles$x['vitro-status-color'],
     style: {
       background: props.statusColor
     }
   }), props.status), props.onShowMoreClick && React__default.createElement("div", {
     onClick: props.onShowMoreClick,
-    className: styles$w['vitro-button-more']
+    className: styles$x['vitro-button-more']
   }));
 };
 
-var styles$x = {"vitro-avatar":"_avatar_vitro-avatar_P2tU-_r"};
+var styles$y = {"vitro-avatar":"_avatar_vitro-avatar_P2tU-_r"};
 
 var Avatar = function Avatar(props) {
   var getInitials = function getInitials() {
@@ -62790,7 +62888,7 @@ var Avatar = function Avatar(props) {
   var getBgColor = function getBgColor(name) {
     return "linear-gradient(0deg, hsla(" + getHue(name) + ", 58%, 55%, 1), hsla(" + (getHue(name) + 50) + ", 100%, 78%, 1))";
   };
-  var className = styles$x['vitro-avatar'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY);
+  var className = styles$y['vitro-avatar'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY);
   return React__default.createElement("div", {
     className: className,
     style: props.image ? {} : {
@@ -62801,30 +62899,30 @@ var Avatar = function Avatar(props) {
   }) : getInitials());
 };
 
-var styles$y = {"vitro-issue-tile-header":"_issue-tile-header_vitro-issue-tile-header_jTcaXBE","vitro-link":"_issue-tile-header_vitro-link_9DQ3Bqk","vitro-user-info":"_issue-tile-header_vitro-user-info_16Yhluy","vitro-avatar":"_issue-tile-header_vitro-avatar_3rf1BME","vitro-dropdown-button":"_issue-tile-header_vitro-dropdown-button_1-7nI-k"};
+var styles$z = {"vitro-issue-tile-header":"_issue-tile-header_vitro-issue-tile-header_jTcaXBE","vitro-link":"_issue-tile-header_vitro-link_9DQ3Bqk","vitro-user-info":"_issue-tile-header_vitro-user-info_16Yhluy","vitro-avatar":"_issue-tile-header_vitro-avatar_3rf1BME","vitro-dropdown-button":"_issue-tile-header_vitro-dropdown-button_1-7nI-k"};
 
 var VERSION = 'V';
 var TARGET_BLANK = '_blank';
 var IssueTileHeader = function IssueTileHeader(props) {
   return React__default.createElement("div", {
-    className: styles$y['vitro-issue-tile-header']
+    className: styles$z['vitro-issue-tile-header']
   }, React__default.createElement("a", {
-    className: styles$y['vitro-link'],
+    className: styles$z['vitro-link'],
     href: props.url,
     target: TARGET_BLANK
   }, CTRL.SHARP + props.id), React__default.createElement("div", {
-    className: styles$y['vitro-user-info']
+    className: styles$z['vitro-user-info']
   }, React__default.createElement(Avatar, {
     image: props.userImage,
     userName: props.userName,
-    className: styles$y['vitro-avatar']
+    className: styles$z['vitro-avatar']
   }), React__default.createElement("div", null, React__default.createElement("span", null, props.userName), React__default.createElement("span", null, props.date))), React__default.createElement("a", {
-    className: styles$y['vitro-link'],
+    className: styles$z['vitro-link'],
     href: props.fileVersionUrl,
     target: TARGET_BLANK
   }, VERSION + CTRL.SQUARE_BRACKET_OPEN + props.fileVersion + CTRL.SQUARE_BRACKET_CLOSE), props.actionList && props.actionList.length ? React__default.createElement(DropdownButton, {
     itemList: props.actionList,
-    className: styles$y['vitro-dropdown-button']
+    className: styles$z['vitro-dropdown-button']
   }) : null);
 };
 
@@ -62835,7 +62933,7 @@ var LOCALE$3;
   LOCALE["ERROR_EMPTY"] = "app.common.issueTile.error.empty";
 })(LOCALE$3 || (LOCALE$3 = {}));
 
-var styles$z = {"vitro-issue-tile":"_issue-tile_vitro-issue-tile_2D7E9Y-","vitro-control":"_issue-tile_vitro-control_3V6_Ze7"};
+var styles$A = {"vitro-issue-tile":"_issue-tile_vitro-issue-tile_2D7E9Y-","vitro-control":"_issue-tile_vitro-control_3V6_Ze7"};
 
 var IssueTile = function IssueTile(props) {
   var _useState = React.useState(props.name),
@@ -62890,7 +62988,7 @@ var IssueTile = function IssueTile(props) {
   };
   return React__default.createElement("div", {
     id: 'vitro-issue-tile-' + props.id,
-    className: styles$z['vitro-issue-tile'] + (props.isActive ? CTRL.SPACE + 'vitro-active' : CTRL.EMPTY),
+    className: styles$A['vitro-issue-tile'] + (props.isActive ? CTRL.SPACE + 'vitro-active' : CTRL.EMPTY),
     onClick: props.onClick
   }, React__default.createElement(IssueTileHeader, {
     id: props.id,
@@ -62906,7 +63004,7 @@ var IssueTile = function IssueTile(props) {
   }, React__default.createElement("div", null, React__default.createElement(Input, {
     label: props.createLocale(LOCALE$3.INPUT_NAME_LABEL),
     onBlur: _onBlurInputName,
-    className: styles$z['vitro-control'],
+    className: styles$A['vitro-control'],
     value: nameVal,
     isRequired: true,
     ref: inputRef,
@@ -62916,7 +63014,7 @@ var IssueTile = function IssueTile(props) {
     isMultiline: true,
     label: props.createLocale(LOCALE$3.TEXTAREA_LABEL),
     onBlur: props.onBlur,
-    className: styles$z['vitro-control'],
+    className: styles$A['vitro-control'],
     value: props.text,
     rows: 7
   }), React__default.createElement(IssueTileFooter, {
@@ -62926,7 +63024,7 @@ var IssueTile = function IssueTile(props) {
   }));
 };
 
-var styles$A = {"vitro-file-version-select":"_file-version-select_vitro-file-version-select_1wIyab3","vitro-selected-version":"_file-version-select_vitro-selected-version_2BVgaBC","vitro-file-name":"_file-version-select_vitro-file-name_1PtLh8A","vitro-file-name-tip":"_file-version-select_vitro-file-name-tip_12pxa7I","vitro-button-collapse-up":"_file-version-select_vitro-button-collapse-up_2GaCEdu","vitro-button-collapse-bottom":"_file-version-select_vitro-button-collapse-bottom_38zg3bU","vitro-version-name-red":"_file-version-select_vitro-version-name-red_-j6Z9ap","vitro-version-name-green":"_file-version-select_vitro-version-name-green_7PfVUHk","vitro-version-list":"_file-version-select_vitro-version-list_3h5D3pD","vitro-file-version-item":"_file-version-select_vitro-file-version-item_38KWa8a","vitro-content":"_file-version-select_vitro-content_zDUhjj0","vitro-version-name":"_file-version-select_vitro-version-name_1821bal","vitro-flex":"_file-version-select_vitro-flex_35zCAQv","vitro-active":"_file-version-select_vitro-active_1PRyjUa"};
+var styles$B = {"vitro-file-version-select":"_file-version-select_vitro-file-version-select_1wIyab3","vitro-selected-version":"_file-version-select_vitro-selected-version_2BVgaBC","vitro-file-name":"_file-version-select_vitro-file-name_1PtLh8A","vitro-file-name-tip":"_file-version-select_vitro-file-name-tip_12pxa7I","vitro-button-collapse-up":"_file-version-select_vitro-button-collapse-up_2GaCEdu","vitro-button-collapse-bottom":"_file-version-select_vitro-button-collapse-bottom_38zg3bU","vitro-version-name-red":"_file-version-select_vitro-version-name-red_-j6Z9ap","vitro-version-name-green":"_file-version-select_vitro-version-name-green_7PfVUHk","vitro-version-list":"_file-version-select_vitro-version-list_3h5D3pD","vitro-file-version-item":"_file-version-select_vitro-file-version-item_38KWa8a","vitro-content":"_file-version-select_vitro-content_zDUhjj0","vitro-version-name":"_file-version-select_vitro-version-name_1821bal","vitro-flex":"_file-version-select_vitro-flex_35zCAQv","vitro-active":"_file-version-select_vitro-active_1PRyjUa"};
 
 var VERSION_PREFIX = 'V';
 var Item$1 = function Item(props) {
@@ -62937,7 +63035,7 @@ var Item$1 = function Item(props) {
     }
   }, [versionNameRef]);
   return React__default.createElement("li", {
-    className: styles$A['vitro-file-version-item'] + CTRL.SPACE + (props.isActive ? styles$A['vitro-active'] : CTRL.EMPTY),
+    className: styles$B['vitro-file-version-item'] + CTRL.SPACE + (props.isActive ? styles$B['vitro-active'] : CTRL.EMPTY),
     onClick: function onClick() {
       return props.onClick(props.version);
     }
@@ -62946,13 +63044,13 @@ var Item$1 = function Item(props) {
     style: props.versionWidth ? {
       width: props.versionWidth + UNIT.PX
     } : {},
-    className: props.isActive ? props.isCurrent ? styles$A['vitro-version-name-green'] : styles$A['vitro-version-name-red'] : styles$A['vitro-version-name']
+    className: props.isActive ? props.isCurrent ? styles$B['vitro-version-name-green'] : styles$B['vitro-version-name-red'] : styles$B['vitro-version-name']
   }, VERSION_PREFIX + props.version.name), React__default.createElement("div", {
-    className: styles$A['vitro-content']
+    className: styles$B['vitro-content']
   }, React__default.createElement("div", {
-    className: styles$A['vitro-file-name']
+    className: styles$B['vitro-file-name']
   }, props.fileName), React__default.createElement("div", {
-    className: styles$A['vitro-flex']
+    className: styles$B['vitro-flex']
   }, React__default.createElement("span", null, props.version.userName), React__default.createElement("span", null, props.version.date))));
 };
 
@@ -63024,17 +63122,17 @@ var FileVersionSelect = function FileVersionSelect(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$A['vitro-file-version-select'],
+    className: styles$B['vitro-file-version-select'],
     ref: selectRef
   }, selectedVersion && React__default.createElement("div", {
-    className: styles$A['vitro-selected-version'],
+    className: styles$B['vitro-selected-version'],
     onClick: onCollapseButtonClick
   }, React__default.createElement("div", {
     ref: fileNameRef,
     onMouseOver: onMouseOver,
-    className: styles$A['vitro-file-name']
+    className: styles$B['vitro-file-name']
   }, props.fileName), showFileName && React__default.createElement("div", {
-    className: styles$A['vitro-file-name-tip'],
+    className: styles$B['vitro-file-name-tip'],
     onMouseLeave: function onMouseLeave() {
       return setShowFileName(false);
     },
@@ -63043,11 +63141,11 @@ var FileVersionSelect = function FileVersionSelect(props) {
     placement: PLACEMENT.BOTTOM,
     text: isCurrent ? props.tooltipTextCurrent : props.tooltipTextNotCurrent
   }, React__default.createElement("div", {
-    className: isCurrent ? styles$A['vitro-version-name-green'] : styles$A['vitro-version-name-red']
+    className: isCurrent ? styles$B['vitro-version-name-green'] : styles$B['vitro-version-name-red']
   }, VERSION_PREFIX$1 + selectedVersion.name)), React__default.createElement("div", {
-    className: showValueList ? styles$A['vitro-button-collapse-up'] : styles$A['vitro-button-collapse-bottom']
+    className: showValueList ? styles$B['vitro-button-collapse-up'] : styles$B['vitro-button-collapse-bottom']
   })), showValueList && React__default.createElement("ul", {
-    className: styles$A['vitro-version-list']
+    className: styles$B['vitro-version-list']
   }, React__default.createElement(ScrollBar, null, props.itemList.map(function (item) {
     return React__default.createElement(Item$1, {
       version: item,
@@ -63063,7 +63161,7 @@ var FileVersionSelect = function FileVersionSelect(props) {
 
 var w$6 = window;
 var CSS_CLASS_SIDEBAR_CONTENT = 'body__sidebar-content';
-var CSS_CLASS_ACTIVE = 'vitro-active';
+var CSS_CLASS_ACTIVE$1 = 'vitro-active';
 var CSS_CLASS_ISSUE_TILE = 'vitro-issue-tile';
 var ID_VIEWER_CONTAINER = 'viewerContainer';
 var ID_FILE_VERSION_SELECT = 'fileVersionSelect';
@@ -63106,8 +63204,8 @@ var Viewer = function Viewer(props) {
   var onIssueTileClick = function onIssueTileClick(issue) {
     var id = issue.id;
     var markup = JSON.parse(issue.markup);
-    $(CTRL.DOT + CSS_CLASS_SIDEBAR_CONTENT).children().removeClass(CSS_CLASS_ACTIVE);
-    $(CTRL.SHARP + CSS_CLASS_ISSUE_TILE + CTRL.DASH + id).addClass(CSS_CLASS_ACTIVE);
+    $(CTRL.DOT + CSS_CLASS_SIDEBAR_CONTENT).children().removeClass(CSS_CLASS_ACTIVE$1);
+    $(CTRL.SHARP + CSS_CLASS_ISSUE_TILE + CTRL.DASH + id).addClass(CSS_CLASS_ACTIVE$1);
     var numPages = w$6.PDFViewerApplication.pagesCount;
     if (markup && markup.pageNr <= numPages && markup.pageNr >= 1) {
       if (markup.pageNr != w$6.PDFViewerApplication.pdfViewer.currentPageNumber) {
@@ -63150,7 +63248,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.152";
+var version$1 = "1.1.153";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -63295,7 +63393,7 @@ var PdfViewer = function PdfViewer(props) {
   });
 };
 
-var styles$B = {"vitro-login-content":"_login-content_vitro-login-content_2RdLZle"};
+var styles$C = {"vitro-login-content":"_login-content_vitro-login-content_2RdLZle"};
 
 var LoginContent = function LoginContent(props) {
   var ref = React.useRef(null);
@@ -63306,26 +63404,26 @@ var LoginContent = function LoginContent(props) {
     }
   }, [props.children]);
   return React__default.createElement("div", {
-    className: styles$B['vitro-login-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$C['vitro-login-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     ref: ref
   }, props.children);
 };
 
-var styles$C = {"vitro-login-layout":"_login_vitro-login-layout_1C8owlz","vitro-login":"_login_vitro-login_12nYNm2","vitro-logo":"_login_vitro-logo_3-qTjgy","vitro-footer":"_login_vitro-footer_1lceaP0","vitro-link-list":"_login_vitro-link-list_1rQQg9u","vitro-copyright":"_login_vitro-copyright_1gm65Ao","vitro-language":"_login_vitro-language_2T3uktL"};
+var styles$D = {"vitro-login-layout":"_login_vitro-login-layout_1C8owlz","vitro-login":"_login_vitro-login_12nYNm2","vitro-logo":"_login_vitro-logo_3-qTjgy","vitro-footer":"_login_vitro-footer_1lceaP0","vitro-link-list":"_login_vitro-link-list_1rQQg9u","vitro-copyright":"_login_vitro-copyright_1gm65Ao","vitro-language":"_login_vitro-language_2T3uktL"};
 
 var LoginFooter = function LoginFooter(props) {
   return React__default.createElement("div", {
-    className: styles$C['vitro-footer']
+    className: styles$D['vitro-footer']
   }, React__default.createElement("div", {
-    className: styles$C['vitro-language']
+    className: styles$D['vitro-language']
   }), React__default.createElement("ul", {
-    className: styles$C['vitro-link-list']
+    className: styles$D['vitro-link-list']
   }, props.itemList && props.itemList.map(function (item) {
     return React__default.createElement("li", null, React__default.createElement("a", {
       href: item.url
     }, item.text));
   })), React__default.createElement("div", {
-    className: styles$C['vitro-copyright']
+    className: styles$D['vitro-copyright']
   }, props.copyright));
 };
 
@@ -63369,11 +63467,11 @@ var FIELD_NAME;
 var Login = function Login(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   return React__default.createElement("div", {
-    className: styles$C['vitro-login-layout']
+    className: styles$D['vitro-login-layout']
   }, React__default.createElement("div", {
-    className: styles$C['vitro-login']
+    className: styles$D['vitro-login']
   }, React__default.createElement(Image, {
-    className: styles$C['vitro-logo'],
+    className: styles$D['vitro-logo'],
     defaultUrl: props.logo
   }), React__default.createElement(LoginContent, null, props.children)), React__default.createElement(LoginFooter, {
     copyright: props.copyright || localeService.create(LOCALE$4.COPYRIGHT),
@@ -63381,7 +63479,7 @@ var Login = function Login(props) {
   }));
 };
 
-var styles$D = {"vitro-control":"_checkbox_vitro-control_DfB5DDM","vitro-checkbox-content":"_checkbox_vitro-checkbox-content_2fBG1zl","vitro-label":"_checkbox_vitro-label_qZxCbCP","vitro-left-label":"_checkbox_vitro-left-label_Uu1Tp31"};
+var styles$E = {"vitro-control":"_checkbox_vitro-control_DfB5DDM","vitro-checkbox-content":"_checkbox_vitro-checkbox-content_2fBG1zl","vitro-label":"_checkbox_vitro-label_qZxCbCP","vitro-left-label":"_checkbox_vitro-left-label_Uu1Tp31"};
 
 var Checkbox = React.forwardRef(function (props, ref) {
   var _useState = React.useState(props.value ? true : false),
@@ -63410,14 +63508,14 @@ var Checkbox = React.forwardRef(function (props, ref) {
     props.onChange && props.onChange(!value, props.name);
     _setValue(!value);
   };
-  var className = styles$D['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$D['vitro-left-label'] : CTRL.EMPTY) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY);
+  var className = styles$E['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$E['vitro-left-label'] : CTRL.EMPTY) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY);
   return React__default.createElement("div", {
     className: className
   }, props.labelPosition === POSITION.LEFT && React__default.createElement(Label, {
     text: props.label,
-    className: styles$D['vitro-label']
+    className: styles$E['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$D['vitro-checkbox-content']
+    className: styles$E['vitro-checkbox-content']
   }, React__default.createElement("input", {
     ref: checkboxRef,
     disabled: props.isDisabled,
@@ -63427,7 +63525,7 @@ var Checkbox = React.forwardRef(function (props, ref) {
     onChange: onChange
   }), props.labelPosition !== POSITION.LEFT && React__default.createElement(Label, {
     text: props.label,
-    className: styles$D['vitro-label']
+    className: styles$E['vitro-label']
   })));
 });
 
@@ -63437,22 +63535,22 @@ var TYPE;
   TYPE["PASSWORD"] = "password";
 })(TYPE || (TYPE = {}));
 
-var styles$E = {"vitro-button-show-password":"_password-input_vitro-button-show-password_2jL4nM-","vitro-button-hide-password":"_password-input_vitro-button-hide-password_vPoUeVl"};
+var styles$F = {"vitro-button-show-password":"_password-input_vitro-button-show-password_2jL4nM-","vitro-button-hide-password":"_password-input_vitro-button-hide-password_vPoUeVl"};
 
 var PasswordInput = React.forwardRef(function (props, ref) {
   var _useState = React.useState(TYPE.PASSWORD),
     type = _useState[0],
     setType = _useState[1];
-  var _useState2 = React.useState(styles$E['vitro-button-show-password']),
+  var _useState2 = React.useState(styles$F['vitro-button-show-password']),
     icon = _useState2[0],
     setIcon = _useState2[1];
   var togglePassword = function togglePassword() {
     if (type === TYPE.PASSWORD) {
       setType(TYPE.TEXT);
-      setIcon(styles$E['vitro-button-hide-password']);
+      setIcon(styles$F['vitro-button-hide-password']);
     } else {
       setType(TYPE.PASSWORD);
-      setIcon(styles$E['vitro-button-show-password']);
+      setIcon(styles$F['vitro-button-show-password']);
     }
   };
   return React__default.createElement(Input, Object.assign({}, props, {
@@ -63464,39 +63562,39 @@ var PasswordInput = React.forwardRef(function (props, ref) {
   }));
 });
 
-var styles$F = {"vitro-link":"_link_vitro-link_2ePaXvd"};
+var styles$G = {"vitro-link":"_link_vitro-link_2ePaXvd"};
 
 var Link = function Link(props) {
   return React__default.createElement("a", {
-    className: styles$F['vitro-link'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$G['vitro-link'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     href: props.href,
     onClick: props.href ? function () {} : props.onClick,
     target: props.target
   }, props.text);
 };
 
-var styles$G = {"vitro-submit-button":"_login-submit-button_vitro-submit-button_1TFkn8x"};
+var styles$H = {"vitro-submit-button":"_login-submit-button_vitro-submit-button_1TFkn8x"};
 
 var LoginSubmitButton = function LoginSubmitButton(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   return React__default.createElement(Button$2, {
-    className: styles$G['vitro-submit-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$H['vitro-submit-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     text: localeService.create(LOCALE$4.ACTION_LOGIN),
     onClick: props.onClick,
     isDisabled: props.isDisabled
   });
 };
 
-var styles$H = {"vitro-login-title":"_login-title_vitro-login-title_3Y4jqav"};
+var styles$I = {"vitro-login-title":"_login-title_vitro-login-title_3Y4jqav"};
 
 var LoginTitle = function LoginTitle(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   return React__default.createElement("h1", {
-    className: styles$H['vitro-login-title'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$I['vitro-login-title'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, props.text || localeService.create(LOCALE$4.LOGIN_FORM_TITLE));
 };
 
-var styles$I = {"vitro-title":"_login-form_vitro-title_3hbcdDr","vitro-flex":"_login-form_vitro-flex_fxG_Mos","vitro-error":"_login-form_vitro-error_2-jVYfA","vitro-link":"_login-form_vitro-link_2LCXwY2","vitro-separator":"_login-form_vitro-separator_P7hw9MH","vitro-control":"_login-form_vitro-control_1Th9h7G","vitro-password-control":"_login-form_vitro-password-control_2_Eo-gN","vitro-login-checkbox":"_login-form_vitro-login-checkbox_1eoT81X","vitro-button-list":"_login-form_vitro-button-list_1-9qryi","vitro-button":"_login-form_vitro-button_r2KCJ7k","vitro-link-register":"_login-form_vitro-link-register_zUIL_1f"};
+var styles$J = {"vitro-title":"_login-form_vitro-title_3hbcdDr","vitro-flex":"_login-form_vitro-flex_fxG_Mos","vitro-error":"_login-form_vitro-error_2-jVYfA","vitro-link":"_login-form_vitro-link_2LCXwY2","vitro-separator":"_login-form_vitro-separator_P7hw9MH","vitro-control":"_login-form_vitro-control_1Th9h7G","vitro-password-control":"_login-form_vitro-password-control_2_Eo-gN","vitro-login-checkbox":"_login-form_vitro-login-checkbox_1eoT81X","vitro-button-list":"_login-form_vitro-button-list_1-9qryi","vitro-button":"_login-form_vitro-button_r2KCJ7k","vitro-link-register":"_login-form_vitro-link-register_zUIL_1f"};
 
 var LoginForm = React.forwardRef(function (props, ref) {
   var _useState = React.useState(CTRL.EMPTY),
@@ -63606,7 +63704,7 @@ var LoginForm = React.forwardRef(function (props, ref) {
     }
   };
   return React__default.createElement("div", null, React__default.createElement(LoginTitle, {
-    className: styles$I['vitro-title']
+    className: styles$J['vitro-title']
   }), React__default.createElement(Input, {
     name: FIELD_NAME.USER_NAME,
     label: localeService.create(LOCALE$4.LOGIN_FORM_FIELD_NAME),
@@ -63616,7 +63714,7 @@ var LoginForm = React.forwardRef(function (props, ref) {
       return _onFocus(FIELD_NAME.USER_NAME);
     },
     isError: errorMessage ? true : false,
-    className: styles$I['vitro-control']
+    className: styles$J['vitro-control']
   }), React__default.createElement(PasswordInput, {
     name: FIELD_NAME.PASSWORD,
     label: localeService.create(LOCALE$4.LOGIN_FORM_FIELD_PASSWORD),
@@ -63626,48 +63724,48 @@ var LoginForm = React.forwardRef(function (props, ref) {
       return _onFocus(FIELD_NAME.PASSWORD);
     },
     isError: errorMessage ? true : false,
-    className: styles$I['vitro-control']
+    className: styles$J['vitro-control']
   }), (props.onSaveData || props.onResetPassword) && React__default.createElement("div", {
-    className: styles$I['vitro-flex'] + (passwordErrorMessage || errorMessage || userNameErrorMessage ? CTRL.SPACE + styles$I['vitro-error'] : CTRL.EMPTY)
+    className: styles$J['vitro-flex'] + (passwordErrorMessage || errorMessage || userNameErrorMessage ? CTRL.SPACE + styles$J['vitro-error'] : CTRL.EMPTY)
   }, props.onSaveData && React__default.createElement(Checkbox, {
     label: localeService.create(LOCALE$4.LOGIN_FORM_ACTION_SAVE_DATA),
     name: FIELD_NAME.SAVE_DATA,
     onChange: props.onSaveData,
-    className: styles$I['vitro-login-checkbox']
+    className: styles$J['vitro-login-checkbox']
   }), props.onResetPassword && React__default.createElement(Link, {
     text: localeService.create(LOCALE$4.LOGIN_FORM_ACTION_RESET_PASSWORD),
     onClick: props.onResetPassword,
-    className: styles$I['vitro-link']
+    className: styles$J['vitro-link']
   })), React__default.createElement(LoginSubmitButton, {
     onClick: submit,
     isDisabled: loading
   }), props.buttonList && props.buttonList.length ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$I['vitro-separator']
+    className: styles$J['vitro-separator']
   }, localeService.create(LOCALE$4.LOGIN_FORM_SEPARATOR_TEXT)), React__default.createElement("div", {
-    className: styles$I['vitro-button-list']
+    className: styles$J['vitro-button-list']
   }, props.buttonList.map(function (button) {
     return React__default.createElement(Button$2, Object.assign({}, button, {
-      className: styles$I['vitro-button']
+      className: styles$J['vitro-button']
     }));
   }))) : React__default.createElement(React__default.Fragment, null), props.onRegister && React__default.createElement(Link, {
     text: localeService.create(LOCALE$4.LOGIN_FORM_ACTION_REGISTER),
     onClick: props.onRegister,
-    className: styles$I['vitro-link-register']
+    className: styles$J['vitro-link-register']
   }));
 });
 
-var styles$J = {"vitro-link":"_login-go-back-link_vitro-link_103lWHm"};
+var styles$K = {"vitro-link":"_login-go-back-link_vitro-link_103lWHm"};
 
 var LoginGoBackLink = function LoginGoBackLink(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   return React__default.createElement(Link, {
     text: localeService.create(LOCALE$4.ACTION_GO_BACK),
     onClick: props.onClick,
-    className: styles$J['vitro-link']
+    className: styles$K['vitro-link']
   });
 };
 
-var styles$K = {"vitro-two-factor-authentication-form":"_two-factor-authentication-form_vitro-two-factor-authentication-form_2BAlkOL","vitro-title":"_two-factor-authentication-form_vitro-title_2TyfWcR","vitro-subtitle":"_two-factor-authentication-form_vitro-subtitle_aP8TzSj","vitro-control":"_two-factor-authentication-form_vitro-control_DMLipzl","vitro-link-resend-code":"_two-factor-authentication-form_vitro-link-resend-code_1TOWPEe","vitro-description":"_two-factor-authentication-form_vitro-description_2mhz2nj","vitro-resend-code-description":"_two-factor-authentication-form_vitro-resend-code-description_9WkdV6i","vitro-flex":"_two-factor-authentication-form_vitro-flex_3mAp0Js","vitro-clock":"_two-factor-authentication-form_vitro-clock_3_ffAz_","vitro-button":"_two-factor-authentication-form_vitro-button_3hpMWyE","vitro-email":"_two-factor-authentication-form_vitro-email_qxiJm1M","vitro-hidden-symbol":"_two-factor-authentication-form_vitro-hidden-symbol_12uh3tN"};
+var styles$L = {"vitro-two-factor-authentication-form":"_two-factor-authentication-form_vitro-two-factor-authentication-form_2BAlkOL","vitro-title":"_two-factor-authentication-form_vitro-title_2TyfWcR","vitro-subtitle":"_two-factor-authentication-form_vitro-subtitle_aP8TzSj","vitro-control":"_two-factor-authentication-form_vitro-control_DMLipzl","vitro-link-resend-code":"_two-factor-authentication-form_vitro-link-resend-code_1TOWPEe","vitro-description":"_two-factor-authentication-form_vitro-description_2mhz2nj","vitro-resend-code-description":"_two-factor-authentication-form_vitro-resend-code-description_9WkdV6i","vitro-flex":"_two-factor-authentication-form_vitro-flex_3mAp0Js","vitro-clock":"_two-factor-authentication-form_vitro-clock_3_ffAz_","vitro-button":"_two-factor-authentication-form_vitro-button_3hpMWyE","vitro-email":"_two-factor-authentication-form_vitro-email_qxiJm1M","vitro-hidden-symbol":"_two-factor-authentication-form_vitro-hidden-symbol_12uh3tN"};
 
 var RESEND_CODE_DURATION = 60000;
 var DOT_STRING = "\u2022\u2022\u2022\u2022";
@@ -63729,9 +63827,9 @@ var TwoFactorAuthenticationForm = React.forwardRef(function (props, ref) {
     var name = emailArr[0].slice(0, 2);
     var domain = emailArr.length > 1 ? emailArr[1].slice(emailArr[1].indexOf(CTRL.DOT)) : "";
     return React__default.createElement(React__default.Fragment, null, name, React__default.createElement("span", {
-      className: styles$K['vitro-hidden-symbol']
+      className: styles$L['vitro-hidden-symbol']
     }, DOT_STRING), CTRL.AT_SIGN, React__default.createElement("span", {
-      className: styles$K['vitro-hidden-symbol']
+      className: styles$L['vitro-hidden-symbol']
     }, DOT_STRING), domain);
   };
   var onResendCode = function onResendCode() {
@@ -63748,44 +63846,44 @@ var TwoFactorAuthenticationForm = React.forwardRef(function (props, ref) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$K['vitro-two-factor-authentication-form']
+    className: styles$L['vitro-two-factor-authentication-form']
   }, props.totpApplicationQrCode && React__default.createElement("div", null, React__default.createElement("img", {
     src: props.totpApplicationQrCode
   })), React__default.createElement(LoginTitle, {
-    className: styles$K['vitro-title'],
+    className: styles$L['vitro-title'],
     text: localeService.create(LOCALE$4.TWO_FACTOR_AUTHENTICATION_FORM_TITLE)
   }), props.isTotpMode ? React__default.createElement("div", {
-    className: styles$K['vitro-subtitle']
+    className: styles$L['vitro-subtitle']
   }) : React__default.createElement("div", {
-    className: styles$K['vitro-subtitle']
+    className: styles$L['vitro-subtitle']
   }, React__default.createElement("div", null, localeService.create(LOCALE$4.TWO_FACTOR_AUTHENTICATION_FORM_SUBTITLE_USER_NAME), React__default.createElement("span", null, CTRL.SPACE + props.userName)), React__default.createElement("div", null, localeService.create(LOCALE$4.TWO_FACTOR_AUTHENTICATION_FORM_SUBTITLE_EMAIL) + CTRL.SPACE, React__default.createElement("span", {
-    className: styles$K['vitro-email']
+    className: styles$L['vitro-email']
   }, getEmail(props.email)))), React__default.createElement(Input, {
     name: FIELD_NAME.USER_NAME,
     label: localeService.create(LOCALE$4.TWO_FACTOR_AUTHENTICATION_FORM_FIELD_CODE),
     onChange: onChange,
     onBlur: validate,
     errorMessage: errorMessage,
-    className: styles$K['vitro-control']
+    className: styles$L['vitro-control']
   }), !props.isTotpMode && React__default.createElement("div", {
-    className: styles$K['vitro-flex']
+    className: styles$L['vitro-flex']
   }, React__default.createElement(Link, {
     text: localeService.create(LOCALE$4.TWO_FACTOR_AUTHENTICATION_FORM_ACTION_CODE_SEND_ERROR),
     onClick: props.onResendCode,
-    className: styles$K['vitro-link']
+    className: styles$L['vitro-link']
   }), React__default.createElement("div", {
-    className: styles$K['vitro-description'] + CTRL.SPACE + styles$K['vitro-clock']
+    className: styles$L['vitro-description'] + CTRL.SPACE + styles$L['vitro-clock']
   }, localeService.create(LOCALE$4.TWO_FACTOR_AUTHENTICATION_FORM_DESCRIPTION_VALIDITY, {
     duration: props.codeValidityDurationMin || 10
   }))), React__default.createElement(LoginSubmitButton, {
     onClick: submit,
-    className: styles$K['vitro-button']
+    className: styles$L['vitro-button']
   }), !props.isTotpMode && !resendDuration && React__default.createElement(Link, {
     text: localeService.create(LOCALE$4.TWO_FACTOR_AUTHENTICATION_FORM_ACTION_RESEND_CODE),
     onClick: onResendCode,
-    className: styles$K['vitro-link-resend-code']
+    className: styles$L['vitro-link-resend-code']
   }), !props.isTotpMode && resendDuration && React__default.createElement("div", {
-    className: styles$K['vitro-resend-code-description']
+    className: styles$L['vitro-resend-code-description']
   }, localeService.create(LOCALE$4.TWO_FACTOR_AUTHENTICATION_FORM_DESCRIPTION_RESEND, {
     duration: resendDuration
   })), React__default.createElement(LoginGoBackLink, {
@@ -63793,19 +63891,19 @@ var TwoFactorAuthenticationForm = React.forwardRef(function (props, ref) {
   }));
 });
 
-var styles$L = {"vitro-flex-row":"_flex-box_vitro-flex-row_2kWIov_","vitro-flex-column":"_flex-box_vitro-flex-column_2TWAp5t"};
+var styles$M = {"vitro-flex-row":"_flex-box_vitro-flex-row_2kWIov_","vitro-flex-column":"_flex-box_vitro-flex-column_2TWAp5t"};
 
 var FlexBox = React.forwardRef(function (props, ref) {
   return React__default.createElement("div", Object.assign({}, props, {
     ref: ref,
-    style: props.gap ? {
+    style: props.gap ? _extends({}, props.style, {
       gridGap: props.gap + UNIT.PX
-    } : {},
-    className: [props.isColumn ? styles$L['vitro-flex-column'] : styles$L['vitro-flex-row'], props.className || CTRL.EMPTY].join(CTRL.SPACE)
+    }) : _extends({}, props.style),
+    className: [props.isColumn ? styles$M['vitro-flex-column'] : styles$M['vitro-flex-row'], props.className || CTRL.EMPTY].join(CTRL.SPACE)
   }), props.children);
 });
 
-var styles$M = {"vitro-login-kerberos-form":"_login-kerberos-form_vitro-login-kerberos-form_v_rdUFi","vitro-flex":"_login-kerberos-form_vitro-flex_3DV6V0F","vitro-subtitle":"_login-kerberos-form_vitro-subtitle_hOCCFau","vitro-error-message":"_login-kerberos-form_vitro-error-message_2LXMkSK"};
+var styles$N = {"vitro-login-kerberos-form":"_login-kerberos-form_vitro-login-kerberos-form_v_rdUFi","vitro-flex":"_login-kerberos-form_vitro-flex_3DV6V0F","vitro-subtitle":"_login-kerberos-form_vitro-subtitle_hOCCFau","vitro-error-message":"_login-kerberos-form_vitro-error-message_2LXMkSK"};
 
 var LoginKerberosForm = React.forwardRef(function (props, ref) {
   var _useState = React.useState(props.errorMessage),
@@ -63824,16 +63922,16 @@ var LoginKerberosForm = React.forwardRef(function (props, ref) {
     };
   });
   return React__default.createElement(FlexBox, {
-    className: styles$M['vitro-login-kerberos-form']
+    className: styles$N['vitro-login-kerberos-form']
   }, React__default.createElement(LoginTitle, null), React__default.createElement(FlexBox, {
-    className: styles$M['vitro-flex']
+    className: styles$N['vitro-flex']
   }, React__default.createElement(Image, {
     defaultUrl: props.imageUrl
   }), React__default.createElement("span", {
-    className: styles$M['vitro-subtitle']
+    className: styles$N['vitro-subtitle']
   }, subtitle), errorMessage && React__default.createElement(ErrorMessage, {
     text: errorMessage,
-    className: styles$M['vitro-error-message']
+    className: styles$N['vitro-error-message']
   })), React__default.createElement(LoginGoBackLink, {
     onClick: props.onGoBack
   }));
@@ -64012,7 +64110,7 @@ var LABEL_POSITION;
   LABEL_POSITION["LEFT"] = "left";
 })(LABEL_POSITION || (LABEL_POSITION = {}));
 
-var styles$N = {"vitro-control":"_date-picker_vitro-control_2AYXegb","vitro-display-none":"_date-picker_vitro-display-none_2wJx8XG","vitro-copy-button":"_date-picker_vitro-copy-button_SvhKTCG","vitro-control-container":"_date-picker_vitro-control-container_2CVwecs","vitro-read-only":"_date-picker_vitro-read-only_2NZoMN5","vitro-label":"_date-picker_vitro-label_2jh9qxb","vitro-focus":"_date-picker_vitro-focus_2cJKcKr","vitro-error":"_date-picker_vitro-error_3DkgZiN","vitro-left-label":"_date-picker_vitro-left-label_ZFhZFS9","vitro-error-message":"_date-picker_vitro-error-message_3VKrJgj"};
+var styles$O = {"vitro-control":"_date-picker_vitro-control_2AYXegb","vitro-display-none":"_date-picker_vitro-display-none_2wJx8XG","vitro-copy-button":"_date-picker_vitro-copy-button_SvhKTCG","vitro-control-container":"_date-picker_vitro-control-container_2CVwecs","vitro-read-only":"_date-picker_vitro-read-only_2NZoMN5","vitro-label":"_date-picker_vitro-label_2jh9qxb","vitro-focus":"_date-picker_vitro-focus_2cJKcKr","vitro-error":"_date-picker_vitro-error_3DkgZiN","vitro-left-label":"_date-picker_vitro-left-label_ZFhZFS9","vitro-error-message":"_date-picker_vitro-error-message_3VKrJgj"};
 
 var $$4 = window.$;
 var DatePicker = React.forwardRef(function (props, ref) {
@@ -64065,7 +64163,7 @@ var DatePicker = React.forwardRef(function (props, ref) {
     }
   }, [props.depth, props.start]);
   React.useEffect(function () {
-    props.errorMessage ? setState(styles$N['vitro-error']) : setState(CTRL.EMPTY);
+    props.errorMessage ? setState(styles$O['vitro-error']) : setState(CTRL.EMPTY);
   }, [props.errorMessage]);
   React.useImperativeHandle(ref, function () {
     return {
@@ -64129,13 +64227,13 @@ var DatePicker = React.forwardRef(function (props, ref) {
     $$4(inputRef.current).data(componentName).setOptions(options);
   };
   var onFocus = function onFocus(e) {
-    setState(styles$N['vitro-focus']);
+    setState(styles$O['vitro-focus']);
     if (props.onFocus) {
       props.onFocus(e);
     }
   };
   var onBlur = function onBlur(e) {
-    setState(props.errorMessage ? styles$N['vitro-error'] : styles$N[CTRL.EMPTY]);
+    setState(props.errorMessage ? styles$O['vitro-error'] : styles$O[CTRL.EMPTY]);
     if (props.onBlur) {
       props.onBlur(e);
     }
@@ -64159,12 +64257,12 @@ var DatePicker = React.forwardRef(function (props, ref) {
     }
   };
   var getClassName = function getClassName() {
-    var classList = [styles$N['vitro-control'], props.className];
+    var classList = [styles$O['vitro-control'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$N['vitro-read-only']);
+      classList.push(styles$O['vitro-read-only']);
     }
     if (props.labelPosition === POSITION.LEFT) {
-      classList.push(styles$N['vitro-left-label']);
+      classList.push(styles$O['vitro-left-label']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -64176,21 +64274,21 @@ var DatePicker = React.forwardRef(function (props, ref) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$N['vitro-label']
+    className: styles$O['vitro-label']
   }), React__default.createElement("input", {
     ref: inputRef,
     placeholder: props.placeholder,
     onFocus: onFocus,
     onBlur: onBlur
   }), props.isReadOnly ? React__default.createElement(CopyButton, {
-    className: styles$N['vitro-copy-button'],
+    className: styles$O['vitro-copy-button'],
     value: ((_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.toString()) || CTRL.EMPTY
   }) : null, React__default.createElement("div", {
     ref: containerRef,
-    className: styles$N['vitro-control-container']
+    className: styles$O['vitro-control-container']
   }), props.errorMessage && React__default.createElement(ErrorMessage, {
     text: props.errorMessage,
-    className: styles$N['vitro-error-message']
+    className: styles$O['vitro-error-message']
   }));
 });
 
@@ -64211,7 +64309,7 @@ var COMPONENT_TYPE;
   COMPONENT_TYPE["MODERN"] = "modern";
 })(COMPONENT_TYPE || (COMPONENT_TYPE = {}));
 
-var styles$O = {"vitro-control":"_time-picker_vitro-control_1sx07It","vitro-display-none":"_time-picker_vitro-display-none_3GgWh46","vitro-copy-button":"_time-picker_vitro-copy-button_aJZAh9q","vitro-control-container":"_time-picker_vitro-control-container_3ys3rMN","vitro-read-only":"_time-picker_vitro-read-only_NlE18Zm","vitro-label":"_time-picker_vitro-label_2b97aCy","vitro-focus":"_time-picker_vitro-focus_wmhPjvE","vitro-error":"_time-picker_vitro-error_2ZmK0I5","vitro-left-label":"_time-picker_vitro-left-label_3NRmFYH","vitro-error-message":"_time-picker_vitro-error-message_1w7ey-y"};
+var styles$P = {"vitro-control":"_time-picker_vitro-control_1sx07It","vitro-display-none":"_time-picker_vitro-display-none_3GgWh46","vitro-copy-button":"_time-picker_vitro-copy-button_aJZAh9q","vitro-control-container":"_time-picker_vitro-control-container_3ys3rMN","vitro-read-only":"_time-picker_vitro-read-only_NlE18Zm","vitro-label":"_time-picker_vitro-label_2b97aCy","vitro-focus":"_time-picker_vitro-focus_wmhPjvE","vitro-error":"_time-picker_vitro-error_2ZmK0I5","vitro-left-label":"_time-picker_vitro-left-label_3NRmFYH","vitro-error-message":"_time-picker_vitro-error-message_1w7ey-y"};
 
 var $$5 = window.$;
 var TimePicker = React.forwardRef(function (props, ref) {
@@ -64276,7 +64374,7 @@ var TimePicker = React.forwardRef(function (props, ref) {
         appendTo: $$5(containerRef.current)
       };
     } else {
-      $$5('.k-animation-container').addClass(styles$O['vitro-control-container']);
+      $$5('.k-animation-container').addClass(styles$P['vitro-control-container']);
     }
     return config;
   };
@@ -64298,24 +64396,24 @@ var TimePicker = React.forwardRef(function (props, ref) {
     }
   };
   var onFocus = function onFocus(e) {
-    setState(styles$O['vitro-focus']);
+    setState(styles$P['vitro-focus']);
     if (props.onFocus) {
       props.onFocus(e);
     }
   };
   var onBlur = function onBlur(e) {
-    setState(props.errorMessage ? styles$O['vitro-error'] : styles$O[CTRL.EMPTY]);
+    setState(props.errorMessage ? styles$P['vitro-error'] : styles$P[CTRL.EMPTY]);
     if (props.onBlur) {
       props.onBlur(e);
     }
   };
   var getClassName = function getClassName() {
-    var classList = [styles$O['vitro-control'], props.className];
+    var classList = [styles$P['vitro-control'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$O['vitro-read-only']);
+      classList.push(styles$P['vitro-read-only']);
     }
     if (props.labelPosition === POSITION.LEFT) {
-      classList.push(styles$O['vitro-left-label']);
+      classList.push(styles$P['vitro-left-label']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -64327,47 +64425,37 @@ var TimePicker = React.forwardRef(function (props, ref) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$O['vitro-label']
+    className: styles$P['vitro-label']
   }), React__default.createElement("input", {
     ref: inputRef,
     placeholder: props.placeholder,
     onFocus: onFocus,
     onBlur: onBlur
   }), props.isReadOnly ? React__default.createElement(CopyButton, {
-    className: styles$O['vitro-copy-button'],
+    className: styles$P['vitro-copy-button'],
     value: ((_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.toString()) || CTRL.EMPTY
   }) : null, React__default.createElement("div", {
     ref: containerRef,
-    className: styles$O['vitro-control-container']
+    className: styles$P['vitro-control-container']
   }), props.errorMessage && React__default.createElement(ErrorMessage, {
     text: props.errorMessage,
-    className: styles$O['vitro-error-message']
+    className: styles$P['vitro-error-message']
   }));
 });
 
-var styles$P = {"vitro-selected-item-multi":"_lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ","vitro-selected-item":"_lookup-picker-selected-item_vitro-selected-item_hw-euth","vitro-button-close":"_lookup-picker-selected-item_vitro-button-close_1SRnr_0"};
+var styles$Q = {"vitro-selected-item-multi":"_lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ","vitro-selected-item":"_lookup-picker-selected-item_vitro-selected-item_hw-euth","vitro-button-close":"_lookup-picker-selected-item_vitro-button-close_1SRnr_0"};
 
-var styles$Q = {"vitro-lookup-picker":"_lookup-picker_vitro-lookup-picker_1aXYQEG","vitro-content":"_lookup-picker_vitro-content_37L0slb","vitro-lookup-picker-multi-select":"_lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk","vitro-read-only":"_lookup-picker_vitro-read-only_32NOdGB","vitro-label":"_lookup-picker_vitro-label_2QoJkUz","vitro-focus":"_lookup-picker_vitro-focus_2UGpxXD","vitro-error":"_lookup-picker_vitro-error_dF7iopC","vitro-error-message":"_lookup-picker_vitro-error-message_2iBjyRP","vitro-copy-button":"_lookup-picker_vitro-copy-button_3UItrZb","vitro-right":"_lookup-picker_vitro-right_1XFsL1w","vitro-button-close":"_lookup-picker_vitro-button-close_3_Qndrj","vitro-button-collapse-up":"_lookup-picker_vitro-button-collapse-up_3i0OJub","vitro-button-collapse-bottom":"_lookup-picker_vitro-button-collapse-bottom_3o0Pl83","vitro-tooltip":"_lookup-picker_vitro-tooltip_2a12Z4P"};
+var styles$R = {"vitro-lookup-picker":"_lookup-picker_vitro-lookup-picker_1aXYQEG","vitro-content":"_lookup-picker_vitro-content_37L0slb","vitro-lookup-picker-multi-select":"_lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk","vitro-read-only":"_lookup-picker_vitro-read-only_32NOdGB","vitro-label":"_lookup-picker_vitro-label_2QoJkUz","vitro-focus":"_lookup-picker_vitro-focus_2UGpxXD","vitro-error":"_lookup-picker_vitro-error_dF7iopC","vitro-error-message":"_lookup-picker_vitro-error-message_2iBjyRP","vitro-copy-button":"_lookup-picker_vitro-copy-button_3UItrZb","vitro-right":"_lookup-picker_vitro-right_1XFsL1w","vitro-button-close":"_lookup-picker_vitro-button-close_3_Qndrj","vitro-button-collapse-up":"_lookup-picker_vitro-button-collapse-up_3i0OJub","vitro-button-collapse-bottom":"_lookup-picker_vitro-button-collapse-bottom_3o0Pl83","vitro-tooltip":"_lookup-picker_vitro-tooltip_2a12Z4P"};
 
 var htmlValueStyles = {"vitro-item-html-value":"_lookup-picker-html-value_vitro-item-html-value_2QBoTey"};
 
 var SelectedValueListItem = function SelectedValueListItem(props) {
-  var _useState = React.useState(CTRL.EMPTY),
-    tooltipText = _useState[0],
-    setTooltipText = _useState[1];
-  var className = props.isMultiSelect ? styles$P['vitro-selected-item-multi'] : styles$P['vitro-selected-item'];
+  var className = props.isMultiSelect ? styles$Q['vitro-selected-item-multi'] : styles$Q['vitro-selected-item'];
   var title = props.selectedValueTemplate(props.item);
-  React.useEffect(function () {
-    if (props.isMultiSelect) {
-      setTooltipText(title);
-    } else {
-      props.setTooltipText(title);
-    }
-  }, []);
   return React__default.createElement(Tooltip$1, {
-    text: tooltipText,
+    text: title,
     placement: PLACEMENT.BOTTOM,
-    className: styles$Q['vitro-tooltip'],
+    className: styles$R['vitro-tooltip'],
     isFlip: true
   }, React__default.createElement("div", {
     className: className
@@ -64377,16 +64465,11 @@ var SelectedValueListItem = function SelectedValueListItem(props) {
     onClick: function onClick() {
       return props.onOptionValueDelete(props.item.id);
     },
-    className: styles$P['vitro-button-close']
+    className: styles$Q['vitro-button-close']
   })));
 };
 
 var SelectedValueList = function SelectedValueList(props) {
-  React.useEffect(function () {
-    return function () {
-      props.setTooltipText(CTRL.EMPTY);
-    };
-  }, []);
   return React__default.createElement(React__default.Fragment, null, props.list.map(function (x) {
     return React__default.createElement(SelectedValueListItem, {
       key: x.id,
@@ -64395,8 +64478,7 @@ var SelectedValueList = function SelectedValueList(props) {
       isReadOnly: props.isReadOnly,
       selectedValueTemplate: props.selectedValueTemplate,
       onOptionValueDelete: props.onOptionValueDelete,
-      getHtmlValue: props.getHtmlValue,
-      setTooltipText: props.setTooltipText
+      getHtmlValue: props.getHtmlValue
     });
   }));
 };
@@ -64542,12 +64624,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   var _useState6 = React.useState(null),
     valueListRequestToken = _useState6[0],
     setValueListRequestToken = _useState6[1];
-  var _useState7 = React.useState(props.isDisabled || props.isReadOnly ? styles$Q['vitro-read-only'] : CTRL.EMPTY),
+  var _useState7 = React.useState(props.isDisabled || props.isReadOnly ? styles$R['vitro-read-only'] : CTRL.EMPTY),
     state = _useState7[0],
     setState = _useState7[1];
-  var _useState8 = React.useState(CTRL.EMPTY),
-    tooltipText = _useState8[0],
-    setTooltipText = _useState8[1];
   var localeService = props.container ? props.container.get(SERVICE.LOCALE) : inversifyReact.useInjection(SERVICE.LOCALE);
   var isEditable = !props.isDisabled && !props.isReadOnly;
   var inputRef = React.useRef(null);
@@ -64642,17 +64721,17 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }
   }, [selectedValueList]);
   React.useEffect(function () {
-    setState(props.errorMessage && !valueListVisible ? styles$Q['vitro-error'] : valueListVisible ? state : CTRL.EMPTY);
+    setState(props.errorMessage && !valueListVisible ? styles$R['vitro-error'] : valueListVisible ? state : CTRL.EMPTY);
   }, [props.errorMessage]);
   React.useEffect(function () {
     if (inputRef.current) {
-      if (state === styles$Q['vitro-focus'] && document.activeElement !== inputRef.current && !tooltipText) {
+      if (state === styles$R['vitro-focus'] && document.activeElement !== inputRef.current) {
         inputRef.current.focus();
-      } else if (state !== styles$Q['vitro-focus']) {
+      } else if (state !== styles$R['vitro-focus']) {
         isShowTooltipRef.current = true;
       }
     }
-  }, [state, tooltipText]);
+  }, [state]);
   var updateFilteredValueList = function updateFilteredValueList(valueList) {
     var availableValueList = inputValue ? filteredValueList : valueList;
     if (inputValue && inputValue.length >= (props.charCount || 0)) {
@@ -64674,7 +64753,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   };
   var onChange = function onChange(e) {
     var _inputRef$current;
-    setState(styles$Q['vitro-focus']);
+    setState(styles$R['vitro-focus']);
     setValueListVisible(true);
     setInputValue(e.target.value);
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
@@ -64769,14 +64848,14 @@ var LookupPicker = React.forwardRef(function (props, ref) {
           return x;
         }), props.name);
       }
-      setState(props.errorMessage ? styles$Q['vitro-error'] : CTRL.EMPTY);
+      setState(props.errorMessage ? styles$R['vitro-error'] : CTRL.EMPTY);
     }
   };
   var onFocus = function onFocus(e) {
     var _inputRef$current3;
     onInputValueUpdated();
     isShowTooltipRef.current = false;
-    setState(styles$Q['vitro-focus']);
+    setState(styles$R['vitro-focus']);
     setValueListVisible(true);
     (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
     if (props.onFocus) {
@@ -64790,12 +64869,12 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }
   };
   var getClassName = function getClassName() {
-    var classList = [styles$Q['vitro-lookup-picker'], props.className];
+    var classList = [styles$R['vitro-lookup-picker'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$Q['vitro-read-only']);
+      classList.push(styles$R['vitro-read-only']);
     }
     if (props.isMultiSelect) {
-      classList.push(styles$Q['vitro-lookup-picker-multi-select']);
+      classList.push(styles$R['vitro-lookup-picker-multi-select']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -64806,13 +64885,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }
     return null;
   };
-  return React__default.createElement(Tooltip$1, {
-    text: tooltipText,
-    placement: PLACEMENT.BOTTOM,
-    className: styles$Q['vitro-tooltip'],
-    isShow: isShowTooltipRef.current === false ? false : undefined,
-    isFlip: true
-  }, React__default.createElement("div", {
+  return React__default.createElement("div", {
     className: getClassName(),
     tabIndex: 1,
     onBlur: onFocusOut,
@@ -64821,9 +64894,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$Q['vitro-label']
+    className: styles$R['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$Q['vitro-content'],
+    className: styles$R['vitro-content'],
     onClick: onFocus,
     ref: contentRef
   }, selectedValueList && selectedValueList.length > 0 && (props.isMultiSelect ? true : inputValue.length === 0) ? React__default.createElement(SelectedValueList, {
@@ -64832,8 +64905,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     selectedValueTemplate: selectedValueTemplate,
     isMultiSelect: props.isMultiSelect,
     isReadOnly: props.isReadOnly,
-    getHtmlValue: getHtmlValue,
-    setTooltipText: setTooltipText
+    getHtmlValue: getHtmlValue
   }) : !valueListVisible && React__default.createElement(React__default.Fragment, null, props.placeholder), isEditable && React__default.createElement("input", {
     ref: inputRef,
     value: inputValue,
@@ -64841,9 +64913,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     onChange: onChange,
     onFocus: onFocus
   }), !props.isDisabled && props.children, React__default.createElement("div", {
-    className: styles$Q['vitro-right']
+    className: styles$R['vitro-right']
   }, props.isShowButtonClear !== false && !props.isMultiSelect && selectedValueList && selectedValueList.length > 0 && isEditable && React__default.createElement("div", {
-    className: styles$Q['vitro-button-close'],
+    className: styles$R['vitro-button-close'],
     onClick: function onClick() {
       return onOptionValueDelete();
     }
@@ -64851,9 +64923,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     onClick: function onClick() {
       return onCollapseButtonClick(valueListVisible);
     },
-    className: valueListVisible ? styles$Q['vitro-button-collapse-up'] : styles$Q['vitro-button-collapse-bottom']
+    className: valueListVisible ? styles$R['vitro-button-collapse-up'] : styles$R['vitro-button-collapse-bottom']
   }), props.isReadOnly ? React__default.createElement(CopyButton, {
-    className: styles$Q['vitro-copy-button'],
+    className: styles$R['vitro-copy-button'],
     value: selectedValueList.map(function (x) {
       return props.selectedValueTemplate(x);
     }).join(CTRL.COMMA)
@@ -64873,42 +64945,42 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     button: props.valueListButton
   }), props.errorMessage && React__default.createElement(ErrorMessage, {
     text: props.errorMessage,
-    className: styles$Q['vitro-error-message']
-  })));
+    className: styles$R['vitro-error-message']
+  }));
 });
 
-var styles$R = {"vitro-command-menu":"_command-menu_vitro-command-menu_l82vtIh"};
+var styles$S = {"vitro-command-menu":"_command-menu_vitro-command-menu_l82vtIh"};
 
 var CommandMenu = function CommandMenu(props) {
   return React__default.createElement("nav", {
-    className: styles$R['vitro-command-menu'] + CTRL.SPACE + 'navbar'
+    className: styles$S['vitro-command-menu'] + CTRL.SPACE + 'navbar'
   }, React__default.createElement("ul", {
     className: 'nav'
   }, props.children));
 };
 
-var styles$S = {"vitro-command-menu-button":"_command-menu-button_vitro-command-menu-button_2IiXVbP","vitro-image":"_command-menu-button_vitro-image_27yILgG"};
+var styles$T = {"vitro-command-menu-button":"_command-menu-button_vitro-command-menu-button_2IiXVbP","vitro-image":"_command-menu-button_vitro-image_27yILgG"};
 
 var CommandMenuButton = function CommandMenuButton(props) {
   return React__default.createElement("li", null, React__default.createElement(Button$2, Object.assign({
-    className: styles$S['vitro-command-menu-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
-    imageClassName: styles$S['vitro-image']
+    className: styles$T['vitro-command-menu-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    imageClassName: styles$T['vitro-image']
   }, props)));
 };
 
 var itemStyles = {"vitro-item":"_command-menu-item_vitro-item_2pVhk23"};
 
-var styles$T = {"vitro-item-lookup-picker":"_command-menu-lookup-picker_vitro-item-lookup-picker_28SsSpP","vitro-command-menu-lookup-picker":"_command-menu-lookup-picker_vitro-command-menu-lookup-picker_1840wlg","vitro-content":"_command-menu-lookup-picker_vitro-content_3fNJUmC","vitro-value-list":"_command-menu-lookup-picker_vitro-value-list_3_OCO0r","ps":"_command-menu-lookup-picker_ps_2nXaPqA","ps--active-y":"_command-menu-lookup-picker_ps--active-y_1PYkoqT","vitro-selected-item":"_command-menu-lookup-picker_vitro-selected-item_2oLYUbH","vitro-item":"_command-menu-lookup-picker_vitro-item_16ocUuf","vitro-right":"_command-menu-lookup-picker_vitro-right_3sBWu8H"};
+var styles$U = {"vitro-item-lookup-picker":"_command-menu-lookup-picker_vitro-item-lookup-picker_28SsSpP","vitro-command-menu-lookup-picker":"_command-menu-lookup-picker_vitro-command-menu-lookup-picker_1840wlg","vitro-content":"_command-menu-lookup-picker_vitro-content_3fNJUmC","vitro-value-list":"_command-menu-lookup-picker_vitro-value-list_3_OCO0r","ps":"_command-menu-lookup-picker_ps_2nXaPqA","ps--active-y":"_command-menu-lookup-picker_ps--active-y_1PYkoqT","vitro-selected-item":"_command-menu-lookup-picker_vitro-selected-item_2oLYUbH","vitro-item":"_command-menu-lookup-picker_vitro-item_16ocUuf","vitro-right":"_command-menu-lookup-picker_vitro-right_3sBWu8H"};
 
 var CommandMenuLookupPicker = function CommandMenuLookupPicker(props) {
   return React__default.createElement("li", {
-    className: itemStyles['vitro-item'] + CTRL.SPACE + 'nav-item ' + styles$T['vitro-item-lookup-picker']
+    className: itemStyles['vitro-item'] + CTRL.SPACE + 'nav-item ' + styles$U['vitro-item-lookup-picker']
   }, React__default.createElement(LookupPicker, Object.assign({}, props, {
-    className: styles$T['vitro-command-menu-lookup-picker'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$U['vitro-command-menu-lookup-picker'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   })));
 };
 
-var styles$U = {"vitro-command-menu-dropdown-button":"_command-menu-dropdown-button_vitro-command-menu-dropdown-button_2ImIuc3","vitro-dropdown-button-container":"_command-menu-dropdown-button_vitro-dropdown-button-container_29qd-_O","vitro-right":"_command-menu-dropdown-button_vitro-right_uTzkzdJ","vitro-image":"_command-menu-dropdown-button_vitro-image_2VNGo-H","vitro-button-collapse-bottom":"_command-menu-dropdown-button_vitro-button-collapse-bottom_1OS_X_a","vitro-scrollbar":"_command-menu-dropdown-button_vitro-scrollbar_1J6dT6q"};
+var styles$V = {"vitro-command-menu-dropdown-button":"_command-menu-dropdown-button_vitro-command-menu-dropdown-button_2ImIuc3","vitro-dropdown-button-container":"_command-menu-dropdown-button_vitro-dropdown-button-container_29qd-_O","vitro-right":"_command-menu-dropdown-button_vitro-right_uTzkzdJ","vitro-image":"_command-menu-dropdown-button_vitro-image_2VNGo-H","vitro-button-collapse-bottom":"_command-menu-dropdown-button_vitro-button-collapse-bottom_1OS_X_a","vitro-scrollbar":"_command-menu-dropdown-button_vitro-scrollbar_1J6dT6q"};
 
 var CommandMenuSubItem = function CommandMenuSubItem(props) {
   var onClick = function onClick(e) {
@@ -64927,7 +64999,7 @@ var CommandMenuSubItem = function CommandMenuSubItem(props) {
     onClick: onClick,
     toggle: props.toggle === false ? false : true
   }, props.isShowImage && React__default.createElement("div", {
-    className: styles$U['vitro-image']
+    className: styles$V['vitro-image']
   }, props.imageUrl && React__default.createElement(Image, {
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl
@@ -64961,15 +65033,15 @@ var CommandMenuItemHeader = function CommandMenuItemHeader(props) {
     onMouseLeave: function onMouseLeave() {
       return setIsHover(false);
     },
-    className: itemStyles['vitro-item'] + CTRL.SPACE + styles$U['vitro-command-menu-dropdown-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: itemStyles['vitro-item'] + CTRL.SPACE + styles$V['vitro-command-menu-dropdown-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     "data-show": props.isVisibleFunction
   }, props.imageUrl && React__default.createElement(Image, {
     isHover: isHover,
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl,
-    className: styles$U['vitro-image']
+    className: styles$V['vitro-image']
   }), React__default.createElement("span", null, props.text), !props.isHideChevronDown && React__default.createElement("div", {
-    className: styles$U['vitro-button-collapse-bottom']
+    className: styles$V['vitro-button-collapse-bottom']
   }));
 };
 
@@ -64996,7 +65068,7 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   return React__default.createElement(reactstrap.UncontrolledDropdown, {
     nav: true,
     inNavbar: true,
-    className: styles$U['vitro-dropdown-button-container'] + (isRight ? CTRL.SPACE + styles$U['vitro-right'] : CTRL.EMPTY)
+    className: styles$V['vitro-dropdown-button-container'] + (isRight ? CTRL.SPACE + styles$V['vitro-right'] : CTRL.EMPTY)
   }, React__default.createElement(reactstrap.DropdownToggle, {
     nav: true,
     caret: true,
@@ -65005,7 +65077,7 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
     className: props.className,
     setIsRight: setIsRight
   }))), React__default.createElement(reactstrap.DropdownMenu, null, React__default.createElement(ScrollBar, {
-    className: styles$U['vitro-scrollbar'],
+    className: styles$V['vitro-scrollbar'],
     isHideScrollX: true
   }, props.itemList && props.itemList.map(function (i) {
     return React__default.createElement(CommandMenuSubItem, Object.assign({
@@ -65017,7 +65089,7 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   }), props.children)));
 };
 
-var styles$V = {"vitro-item":"_sidebar-item_vitro-item_1BR_7F0","vitro-image":"_sidebar-item_vitro-image_2A82YI0","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-hover":"_sidebar-item_vitro-hover_1mECzme","vitro-group-item":"_sidebar-item_vitro-group-item_ZADCctV","vitro-item-list":"_sidebar-item_vitro-item-list_17dWov1","vitro-expanded":"_sidebar-item_vitro-expanded_3qb1vOx","vitro-collapsed":"_sidebar-item_vitro-collapsed_2EhVmXL","vitro-display-none":"_sidebar-item_vitro-display-none_2WwKi5v","vitro-scrollbar":"_sidebar-item_vitro-scrollbar___xylIx","vitro-button-close":"_sidebar-item_vitro-button-close_2Kdf-ob"};
+var styles$W = {"vitro-item":"_sidebar-item_vitro-item_1BR_7F0","vitro-image":"_sidebar-item_vitro-image_2A82YI0","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-hover":"_sidebar-item_vitro-hover_1mECzme","vitro-group-item":"_sidebar-item_vitro-group-item_ZADCctV","vitro-item-list":"_sidebar-item_vitro-item-list_17dWov1","vitro-arrow":"_sidebar-item_vitro-arrow_NaAiOHu","vitro-expanded":"_sidebar-item_vitro-expanded_3qb1vOx","vitro-collapsed":"_sidebar-item_vitro-collapsed_2EhVmXL","vitro-display-none":"_sidebar-item_vitro-display-none_2WwKi5v","vitro-scrollbar":"_sidebar-item_vitro-scrollbar___xylIx","vitro-button-close":"_sidebar-item_vitro-button-close_2Kdf-ob"};
 
 var Item$2 = function Item(props) {
   var _useState = React.useState(false),
@@ -65054,10 +65126,10 @@ var Item$2 = function Item(props) {
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl,
     isHover: props.isHover,
-    className: styles$V['vitro-image']
+    className: styles$W['vitro-image']
   })), React__default.createElement("span", {
     ref: textRef,
-    className: styles$V['vitro-item-text'] + (!(props.isSidebarExpanded || props.isMobileView) ? CTRL.SPACE + styles$V['vitro-display-none'] : CTRL.EMPTY)
+    className: styles$W['vitro-item-text'] + (!(props.isSidebarExpanded || props.isMobileView) ? CTRL.SPACE + styles$W['vitro-display-none'] : CTRL.EMPTY)
   }, props.text)));
 };
 
@@ -65073,13 +65145,19 @@ var TARGET$1;
   TARGET["SELF"] = "_self";
 })(TARGET$1 || (TARGET$1 = {}));
 
+var SidebarConstants = {
+    __proto__: null,
+    get MODE () { return MODE; },
+    get TARGET () { return TARGET$1; }
+};
+
 var WIDTH_AUTO = 'auto';
 var LinkItem$1 = function LinkItem(props) {
   var _useState = React.useState(false),
     isHover = _useState[0],
     setIsHover = _useState[1];
   var isActive = !!props.link && (props.link === props.currentUrl && (!props.activeItem || props.activeItem === props.id) || props.altUrlList && props.altUrlList.includes(props.currentUrl));
-  var className = isActive ? styles$V['vitro-active'] : isHover ? styles$V['vitro-hover'] : CTRL.EMPTY;
+  var className = isActive ? styles$W['vitro-active'] : isHover ? styles$W['vitro-hover'] : CTRL.EMPTY;
   var onClick = function onClick(e) {
     if (!props.isDisabled) {
       if (props.onClick) {
@@ -65104,7 +65182,7 @@ var LinkItem$1 = function LinkItem(props) {
     style: {
       width: props.linkItemWidth ? props.linkItemWidth + UNIT.PX : WIDTH_AUTO
     },
-    className: styles$V['vitro-item']
+    className: styles$W['vitro-item']
   }, (props.link || props.onClick) && React__default.createElement("button", {
     onMouseEnter: function onMouseEnter() {
       return setIsHover(true);
@@ -65144,7 +65222,7 @@ var LinkItem$1 = function LinkItem(props) {
   }))));
 };
 
-var styles$W = {"vitro-slide-up-panel":"_slide-up-panel_vitro-slide-up-panel_2EOSLHK","vitro-content":"_slide-up-panel_vitro-content_1er6bcv","vitro-expanded":"_slide-up-panel_vitro-expanded_2f2dYt6","vitro-button-close":"_slide-up-panel_vitro-button-close_2iM7SFL"};
+var styles$X = {"vitro-slide-up-panel":"_slide-up-panel_vitro-slide-up-panel_2EOSLHK","vitro-content":"_slide-up-panel_vitro-content_1er6bcv","vitro-expanded":"_slide-up-panel_vitro-expanded_2f2dYt6","vitro-button-close":"_slide-up-panel_vitro-button-close_2iM7SFL"};
 
 var SlideUpPanel = function SlideUpPanel(props) {
   var _useState = React.useState(props.isShow),
@@ -65208,13 +65286,13 @@ var SlideUpPanel = function SlideUpPanel(props) {
     target: props.container,
     placement: exports.PLACEMENT.TOP
   }, React__default.createElement("div", {
-    className: styles$W['vitro-slide-up-panel'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$X['vitro-slide-up-panel'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, React__default.createElement("div", {
-    className: styles$W['vitro-content'] + (isExpanded ? CTRL.SPACE + styles$W['vitro-expanded'] : CTRL.EMPTY),
+    className: styles$X['vitro-content'] + (isExpanded ? CTRL.SPACE + styles$X['vitro-expanded'] : CTRL.EMPTY),
     ref: contentRef
   }, React__default.createElement("button", {
     ref: buttonRef,
-    className: styles$W['vitro-button-close'],
+    className: styles$X['vitro-button-close'],
     onTouchStart: onTouchStart,
     onTouchEnd: onTouchEnd,
     onTouchMove: onTouchMove,
@@ -65299,7 +65377,7 @@ var GroupItem = function GroupItem(props) {
       setIsHover(focus);
     }
   };
-  var className = isActive ? styles$V['vitro-active'] : isHover ? styles$V['vitro-hover'] : CTRL.EMPTY;
+  var className = isActive ? styles$W['vitro-active'] : isHover ? styles$W['vitro-hover'] : CTRL.EMPTY;
   var content = React__default.createElement(React__default.Fragment, null, props.itemList && props.itemList.map(function (i) {
     return i.link || i.onClick ? React__default.createElement(LinkItem$1, Object.assign({
       link: i.link,
@@ -65328,7 +65406,7 @@ var GroupItem = function GroupItem(props) {
     style: {
       width: props.linkItemWidth ? props.linkItemWidth + UNIT.PX : WIDTH_AUTO$1
     },
-    className: styles$V['vitro-item'] + CTRL.SPACE + styles$V['vitro-group-item']
+    className: styles$W['vitro-item'] + CTRL.SPACE + styles$W['vitro-group-item']
   }, React__default.createElement("button", {
     onMouseEnter: function onMouseEnter() {
       return _onFocus(true);
@@ -65347,7 +65425,7 @@ var GroupItem = function GroupItem(props) {
   }, React__default.createElement(Item$2, Object.assign({}, props, {
     isHover: isHover || isActive
   })), props.isSidebarExpanded && !props.isMobileView && React__default.createElement("span", {
-    className: isExpanded ? styles$V['vitro-expanded'] : styles$V['vitro-collapsed']
+    className: isExpanded ? styles$W['vitro-expanded'] : styles$W['vitro-collapsed']
   })), props.isMobileView ? React__default.createElement(SlideUpPanel, {
     isShow: isExpanded,
     container: props.container,
@@ -65355,38 +65433,113 @@ var GroupItem = function GroupItem(props) {
       return props.setActiveItem(CTRL.EMPTY);
     }
   }, React__default.createElement(ScrollBar, {
-    className: styles$V['vitro-scrollbar']
+    className: styles$W['vitro-scrollbar']
   }, content)) : React__default.createElement("ul", {
-    className: styles$V['vitro-item-list'] + CTRL.SPACE + (props.isSidebarExpanded ? !isExpanded ? styles$V['vitro-display-none'] : CTRL.EMPTY : styles$V['vitro-display-none'])
+    className: styles$W['vitro-item-list'] + CTRL.SPACE + (props.isSidebarExpanded ? !isExpanded ? styles$W['vitro-display-none'] : CTRL.EMPTY : styles$W['vitro-display-none'])
   }, content)));
 };
 
+var WIDTH_AUTO$2 = 'auto';
+var CustomItem = function CustomItem(props) {
+  var _useState = React.useState(false),
+    isHover = _useState[0],
+    setIsHover = _useState[1];
+  var _useState2 = React.useState(false),
+    isActive = _useState2[0],
+    setIsActive = _useState2[1];
+  React.useEffect(function () {
+    var isActive = getIsActive();
+    setIsActive(isActive);
+    props.setActiveItem(isActive ? props.id : CTRL.EMPTY);
+  }, [props.activeItem, props.currentUrl]);
+  var onClick = function onClick(e) {
+    if (props.onClick) {
+      props.onClick(e);
+      setIsActive(true);
+      props.setActiveItem(props.id);
+    }
+  };
+  var onMouseDown = function onMouseDown(e) {
+    if (e.button === 1) {
+      onClick(e);
+    }
+  };
+  var getIsActive = function getIsActive() {
+    if (props.getIsActive) {
+      return props.getIsActive(props.id, props.currentUrl, props.activeItem);
+    }
+    return false;
+  };
+  return React__default.createElement("li", {
+    style: {
+      width: props.linkItemWidth ? props.linkItemWidth + UNIT.PX : WIDTH_AUTO$2
+    },
+    className: styles$W['vitro-item']
+  }, React__default.createElement("button", {
+    onMouseEnter: function onMouseEnter() {
+      return setIsHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHover(false);
+    },
+    onFocus: function onFocus() {
+      return setIsHover(true);
+    },
+    onBlur: function onBlur() {
+      return setIsHover(false);
+    },
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    className: isActive ? styles$W['vitro-active'] : isHover ? styles$W['vitro-hover'] : CTRL.EMPTY
+  }, React__default.createElement(Item$2, Object.assign({}, props, {
+    isHover: isHover || isActive
+  })), props.isSidebarExpanded && !props.isMobileView && React__default.createElement("span", {
+    className: styles$W['vitro-arrow']
+  })));
+};
+
 var Section = function Section(props) {
   return React__default.createElement("li", null, props.text && React__default.createElement("span", null, props.text), props.itemList && props.itemList.length ? React__default.createElement("ul", null, props.itemList.map(function (i) {
-    return i.link || i.onClick ? React__default.createElement(LinkItem$1, Object.assign({
-      link: i.link,
-      linkItemWidth: props.linkItemWidth,
-      activeItem: props.activeItem,
-      key: i.text,
-      currentUrl: props.currentUrl,
-      isSidebarExpanded: props.isExpanded,
-      isMobileView: props.isMobileView,
-      isDisabled: props.isDisabled
-    }, i)) : i.itemList ? React__default.createElement(GroupItem, Object.assign({
-      isSidebarExpanded: props.isExpanded,
-      itemList: i.itemList,
-      linkItemWidth: props.linkItemWidth,
-      activeItem: props.activeItem,
-      setActiveItem: props.setActiveItem,
-      key: i.text,
-      currentUrl: props.currentUrl,
-      isMobileView: props.isMobileView,
-      isDisabled: props.isDisabled
-    }, i)) : React__default.createElement("div", null);
+    if (i.isCustom) {
+      return React__default.createElement(CustomItem, Object.assign({
+        isSidebarExpanded: props.isExpanded,
+        linkItemWidth: props.linkItemWidth,
+        activeItem: props.activeItem,
+        setActiveItem: props.setActiveItem,
+        key: i.text,
+        currentUrl: props.currentUrl,
+        isMobileView: props.isMobileView,
+        isDisabled: props.isDisabled
+      }, i));
+    } else if (i.link || i.onClick) {
+      return React__default.createElement(LinkItem$1, Object.assign({
+        link: i.link,
+        linkItemWidth: props.linkItemWidth,
+        activeItem: props.activeItem,
+        key: i.text,
+        currentUrl: props.currentUrl,
+        isSidebarExpanded: props.isExpanded,
+        isMobileView: props.isMobileView,
+        isDisabled: props.isDisabled
+      }, i));
+    } else if (i.itemList) {
+      return React__default.createElement(GroupItem, Object.assign({
+        isSidebarExpanded: props.isExpanded,
+        itemList: i.itemList,
+        linkItemWidth: props.linkItemWidth,
+        activeItem: props.activeItem,
+        setActiveItem: props.setActiveItem,
+        key: i.text,
+        currentUrl: props.currentUrl,
+        isMobileView: props.isMobileView,
+        isDisabled: props.isDisabled
+      }, i));
+    }
+    return null;
   })) : React__default.createElement(React__default.Fragment, null));
 };
 
-var styles$X = {"vitro-sidebar":"_sidebar_vitro-sidebar_1IxGYiU","vitro-scrollbar":"_sidebar_vitro-scrollbar_2PtQGQD","vitro-sidebar-section-list":"_sidebar_vitro-sidebar-section-list_1nGto5m","vitro-scroll-container":"_sidebar_vitro-scroll-container_3K-iJy8","vitro-button-more":"_sidebar_vitro-button-more_3s9oZY9","vitro-logo-container":"_sidebar_vitro-logo-container_31O5Ly-","vitro-logo":"_sidebar_vitro-logo_1qxi8L_","vitro-scroll-content":"_sidebar_vitro-scroll-content_2RUBhZd"};
+var styles$Y = {"vitro-sidebar":"_sidebar_vitro-sidebar_1IxGYiU","vitro-scrollbar":"_sidebar_vitro-scrollbar_2PtQGQD","vitro-sidebar-section-list":"_sidebar_vitro-sidebar-section-list_1nGto5m","vitro-scroll-container":"_sidebar_vitro-scroll-container_3K-iJy8","vitro-button-more":"_sidebar_vitro-button-more_3s9oZY9","vitro-logo-container":"_sidebar_vitro-logo-container_31O5Ly-","vitro-logo":"_sidebar_vitro-logo_1qxi8L_","vitro-scroll-content":"_sidebar_vitro-scroll-content_2RUBhZd"};
 
 var SectionList = React.forwardRef(function (props, ref) {
   if (!props.itemList || props.itemList.length === 0) {
@@ -65394,7 +65547,7 @@ var SectionList = React.forwardRef(function (props, ref) {
   }
   return React__default.createElement("ul", {
     ref: ref,
-    className: styles$X['vitro-sidebar-section-list']
+    className: styles$Y['vitro-sidebar-section-list']
   }, props.itemList.map(function (section) {
     return React__default.createElement(Section, Object.assign({
       isExpanded: props.isExpanded,
@@ -65489,12 +65642,12 @@ var Sidebar = function Sidebar(props) {
     var width = containerWidth / count;
     setLinkItemWidth(width);
   };
-  var className = styles$X['vitro-sidebar'] + (props.theme ? CTRL.SPACE + props.theme : CTRL.EMPTY) + CTRL.SPACE + (isMobileView ? 'vitro-bottom-menu' : CTRL.EMPTY);
+  var className = styles$Y['vitro-sidebar'] + (props.theme ? CTRL.SPACE + props.theme : CTRL.EMPTY) + CTRL.SPACE + (isMobileView ? 'vitro-bottom-menu' : CTRL.EMPTY);
   return React__default.createElement("div", {
     className: className,
     id: 'vitro-sidebar'
   }, !isMobileView ? React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollBar, {
-    className: styles$X['vitro-scrollbar']
+    className: styles$Y['vitro-scrollbar']
   }, React__default.createElement(SectionList, {
     itemList: itemList,
     currentUrl: currentUrl,
@@ -65512,18 +65665,18 @@ var Sidebar = function Sidebar(props) {
     isMobileView: isMobileView,
     isDisabled: props.isDisabled
   })), React__default.createElement("div", {
-    className: styles$X['vitro-logo-container']
+    className: styles$Y['vitro-logo-container']
   }, React__default.createElement(Item$2, {
     text: props.logoText,
     imageUrl: props.logo,
     isSidebarExpanded: !props.sidebar,
     isMobileView: isMobileView,
-    className: styles$X['vitro-logo']
+    className: styles$Y['vitro-logo']
   }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$X['vitro-scroll-container'],
+    className: styles$Y['vitro-scroll-container'],
     ref: menuRef
   }, React__default.createElement("div", {
-    className: styles$X['vitro-scroll-content'],
+    className: styles$Y['vitro-scroll-content'],
     ref: scrollContentRef
   }, React__default.createElement(SectionList, {
     container: menuRef.current,
@@ -65541,36 +65694,36 @@ var Sidebar = function Sidebar(props) {
     width: linkItemWidth,
     isSidebarExpanded: !props.sidebar,
     isMobileView: isMobileView,
-    className: styles$X['vitro-logo']
+    className: styles$Y['vitro-logo']
   }))), React__default.createElement("button", {
     onClick: scroll,
-    className: styles$X['vitro-button-more']
+    className: styles$Y['vitro-button-more']
   })));
 };
 
-var styles$Y = {"vitro-item":"_activity-item_vitro-item_3Tprske","vitro-active":"_activity-item_vitro-active_2kENgvf","vitro-title":"_activity-item_vitro-title__QItISm","vitro-due-date":"_activity-item_vitro-due-date_1mBIraY","vitro-content":"_activity-item_vitro-content_3Lt7XRy","vitro-message":"_activity-item_vitro-message_1ndqhgR","vitro-flex":"_activity-item_vitro-flex_37IxBWe","vitro-dropdown-button":"_activity-item_vitro-dropdown-button_1J50ja7","vitro-avatar":"_activity-item_vitro-avatar_218ZqAk"};
+var styles$Z = {"vitro-item":"_activity-item_vitro-item_3Tprske","vitro-active":"_activity-item_vitro-active_2kENgvf","vitro-title":"_activity-item_vitro-title__QItISm","vitro-due-date":"_activity-item_vitro-due-date_1mBIraY","vitro-content":"_activity-item_vitro-content_3Lt7XRy","vitro-message":"_activity-item_vitro-message_1ndqhgR","vitro-flex":"_activity-item_vitro-flex_37IxBWe","vitro-dropdown-button":"_activity-item_vitro-dropdown-button_1J50ja7","vitro-avatar":"_activity-item_vitro-avatar_218ZqAk"};
 
 var ActivityItem = function ActivityItem(props) {
   return React__default.createElement("div", {
-    className: styles$Y['vitro-item'] + (props.isActive ? CTRL.SPACE + styles$Y['vitro-active'] : CTRL.EMPTY)
+    className: styles$Z['vitro-item'] + (props.isActive ? CTRL.SPACE + styles$Z['vitro-active'] : CTRL.EMPTY)
   }, React__default.createElement("div", {
-    className: styles$Y['vitro-flex']
+    className: styles$Z['vitro-flex']
   }, React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.userImageUrl,
-    className: styles$Y['vitro-avatar']
+    className: styles$Z['vitro-avatar']
   }), React__default.createElement("div", {
-    className: styles$Y['vitro-content']
+    className: styles$Z['vitro-content']
   }, React__default.createElement("div", null, React__default.createElement("div", {
-    className: styles$Y['vitro-title']
+    className: styles$Z['vitro-title']
   }, React__default.createElement("span", null, props.title || props.userName), props.isShowDetail && React__default.createElement("span", {
-    className: styles$Y['vitro-due-date']
+    className: styles$Z['vitro-due-date']
   }, props.date), props.isShowDetail && props.dropdownItemList && React__default.createElement(DropdownButton, {
     itemList: props.dropdownItemList,
     onToggle: props.onDropdownToggle,
-    className: styles$Y['vitro-dropdown-button']
+    className: styles$Z['vitro-dropdown-button']
   })), React__default.createElement("div", {
-    className: styles$Y['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
+    className: styles$Z['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
   }, React__default.createElement("p", {
     dangerouslySetInnerHTML: {
       __html: props.message
@@ -65578,46 +65731,46 @@ var ActivityItem = function ActivityItem(props) {
   }), props.children)))));
 };
 
-var styles$Z = {"vitro-task-user-list":"_task-user-list_vitro-task-user-list_3GBJVjt"};
+var styles$_ = {"vitro-task-user-list":"_task-user-list_vitro-task-user-list_3GBJVjt"};
 
 var TaskUserList = function TaskUserList(props) {
   return React__default.createElement("div", {
-    className: styles$Z['vitro-task-user-list']
+    className: styles$_['vitro-task-user-list']
   }, props.itemList && props.itemList.map(function (x) {
     return React__default.createElement(ActivityItem, Object.assign({}, x));
   }));
 };
 
-var styles$_ = {"vitro-task-tile":"_task-tile_vitro-task-tile_35bZu48","vitro-active":"_task-tile_vitro-active_11W9nJz","vitro-content":"_task-tile_vitro-content_rl2ERCQ","vitro-description":"_task-tile_vitro-description_qtyUbLy","vitro-comment":"_task-tile_vitro-comment_2im2AJj","vitro-title":"_task-tile_vitro-title_1pXrIrB","vitro-top-right":"_task-tile_vitro-top-right_19tbPX4","vitro-dropdown-button":"_task-tile_vitro-dropdown-button_2YgEUdg","vitro-bottom-right":"_task-tile_vitro-bottom-right_2E9WAle","vitro-button-cancel":"_task-tile_vitro-button-cancel_1lgja1K"};
+var styles$$ = {"vitro-task-tile":"_task-tile_vitro-task-tile_35bZu48","vitro-active":"_task-tile_vitro-active_11W9nJz","vitro-content":"_task-tile_vitro-content_rl2ERCQ","vitro-description":"_task-tile_vitro-description_qtyUbLy","vitro-comment":"_task-tile_vitro-comment_2im2AJj","vitro-title":"_task-tile_vitro-title_1pXrIrB","vitro-top-right":"_task-tile_vitro-top-right_19tbPX4","vitro-dropdown-button":"_task-tile_vitro-dropdown-button_2YgEUdg","vitro-bottom-right":"_task-tile_vitro-bottom-right_2E9WAle","vitro-button-cancel":"_task-tile_vitro-button-cancel_1lgja1K"};
 
 var TaskTile = function TaskTile(props) {
   return React__default.createElement("div", {
-    className: styles$_['vitro-task-tile'] + (props.isActive ? CTRL.SPACE + styles$_['vitro-active'] : CTRL.EMPTY),
+    className: styles$$['vitro-task-tile'] + (props.isActive ? CTRL.SPACE + styles$$['vitro-active'] : CTRL.EMPTY),
     onClick: props.onClick
   }, props.dropdownItemList && React__default.createElement("div", {
-    className: styles$_['vitro-top-right']
+    className: styles$$['vitro-top-right']
   }, React__default.createElement(DropdownButton, {
     itemList: props.dropdownItemList,
-    className: styles$_['vitro-dropdown-button']
+    className: styles$$['vitro-dropdown-button']
   })), props.isShowDeleteButton && React__default.createElement("div", {
-    className: styles$_['vitro-button-cancel'],
+    className: styles$$['vitro-button-cancel'],
     onClick: props.onDeleteClick
   }), props.description && React__default.createElement("div", {
-    className: styles$_['vitro-description']
+    className: styles$$['vitro-description']
   }, props.description), React__default.createElement("div", {
-    className: styles$_['vitro-title']
+    className: styles$$['vitro-title']
   }, props.title), props.comment && React__default.createElement("div", {
-    className: styles$_['vitro-comment']
+    className: styles$$['vitro-comment']
   }, props.comment), React__default.createElement("div", {
-    className: styles$_['vitro-content']
+    className: styles$$['vitro-content']
   }, props.userList && React__default.createElement(TaskUserList, {
     itemList: props.userList
   })), React__default.createElement("div", {
-    className: styles$_['vitro-bottom-right']
+    className: styles$$['vitro-bottom-right']
   }, props.dateComment, " \xA0 ", props.date), props.children);
 };
 
-var styles$$ = {"vitro-alert":"_alert_vitro-alert_3sPAkJb","vitro-alert-content":"_alert_vitro-alert-content_10fW1n4","vitro-button-close":"_alert_vitro-button-close_39K9cqW","vitro-icon":"_alert_vitro-icon_pK385gF","vitro-text":"_alert_vitro-text_37Erxqj","vitro-alert-action-list":"_alert_vitro-alert-action-list_2XzbaCO","vitro-position-center":"_alert_vitro-position-center_1r_lK_e"};
+var styles$10 = {"vitro-alert":"_alert_vitro-alert_3sPAkJb","vitro-alert-content":"_alert_vitro-alert-content_10fW1n4","vitro-button-close":"_alert_vitro-button-close_39K9cqW","vitro-icon":"_alert_vitro-icon_pK385gF","vitro-text":"_alert_vitro-text_37Erxqj","vitro-alert-action-list":"_alert_vitro-alert-action-list_2XzbaCO","vitro-position-center":"_alert_vitro-position-center_1r_lK_e"};
 
 var Alert$1 = function Alert(props) {
   var ref = React.useRef(null);
@@ -65649,7 +65802,7 @@ var Alert$1 = function Alert(props) {
     }
   };
   var actionList = props.actionList && React__default.createElement("div", {
-    className: styles$$['vitro-alert-action-list']
+    className: styles$10['vitro-alert-action-list']
   }, props.actionList.map(function (a) {
     return React__default.createElement(Button$1, {
       key: a.text,
@@ -65658,7 +65811,7 @@ var Alert$1 = function Alert(props) {
       }
     }, a.text);
   }));
-  var className = styles$$['vitro-alert'] + CTRL.SPACE + (props.isPositionCenter && styles$$['vitro-position-center']) + CTRL.SPACE + (props.className ? props.className : CTRL.EMPTY);
+  var className = styles$10['vitro-alert'] + CTRL.SPACE + (props.isPositionCenter && styles$10['vitro-position-center']) + CTRL.SPACE + (props.className ? props.className : CTRL.EMPTY);
   return React__default.createElement("div", {
     tabIndex: 1,
     onBlur: onFocusOut,
@@ -65668,13 +65821,13 @@ var Alert$1 = function Alert(props) {
     variant: props.type,
     onClose: props.onClose
   }, React__default.createElement("div", {
-    className: styles$$['vitro-alert-content']
+    className: styles$10['vitro-alert-content']
   }, React__default.createElement("div", {
-    className: styles$$['vitro-icon']
+    className: styles$10['vitro-icon']
   }), React__default.createElement("div", {
-    className: styles$$['vitro-text']
+    className: styles$10['vitro-text']
   }, props.title && React__default.createElement("strong", null, props.title), props.text, !props.text && props.children), !props.isMultiline && actionList, props.isDismissible && React__default.createElement("div", {
-    className: styles$$['vitro-button-close'],
+    className: styles$10['vitro-button-close'],
     onClick: onClose
   })), props.text && props.children, props.isMultiline && actionList));
 };
@@ -65691,7 +65844,7 @@ var AlertConstants = {
     get TYPE () { return TYPE$2; }
 };
 
-var styles$10 = {"vitro-user-profile":"_user-profile_vitro-user-profile_11XpBoQ","vitro-dropdown-item":"_user-profile_vitro-dropdown-item_dSErsta","vitro-avatar":"_user-profile_vitro-avatar_3SzDPAi"};
+var styles$11 = {"vitro-user-profile":"_user-profile_vitro-user-profile_11XpBoQ","vitro-dropdown-item":"_user-profile_vitro-dropdown-item_dSErsta","vitro-avatar":"_user-profile_vitro-avatar_3SzDPAi"};
 
 var UserProfileMenuItem = function UserProfileMenuItem(props) {
   var onClick = function onClick() {
@@ -65702,7 +65855,7 @@ var UserProfileMenuItem = function UserProfileMenuItem(props) {
   };
   if (props.link) {
     return React__default.createElement("div", {
-      className: styles$10['vitro-dropdown-item'],
+      className: styles$11['vitro-dropdown-item'],
       onClick: onClick
     }, React__default.createElement("a", {
       href: props.link
@@ -65713,7 +65866,7 @@ var UserProfileMenuItem = function UserProfileMenuItem(props) {
   }
   if (props.onClick) {
     return React__default.createElement("div", {
-      className: styles$10['vitro-dropdown-item'],
+      className: styles$11['vitro-dropdown-item'],
       key: props.text,
       onClick: onClick
     }, props.imageUrl && React__default.createElement(Image, {
@@ -65747,15 +65900,15 @@ var UserProfile = function UserProfile(props) {
   return React__default.createElement(reactstrap.Dropdown, {
     isOpen: dropdownOpen,
     toggle: toggle,
-    className: styles$10['vitro-user-profile']
+    className: styles$11['vitro-user-profile']
   }, React__default.createElement(reactstrap.DropdownToggle, {
     caret: true
   }, React__default.createElement("div", null, React__default.createElement("span", {
-    className: styles$10['vitro-text-color-white']
+    className: styles$11['vitro-text-color-white']
   }, createSurnameWithInitials(props.userName)), React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.image,
-    className: styles$10['vitro-avatar']
+    className: styles$11['vitro-avatar']
   }))), React__default.createElement(reactstrap.DropdownMenu, {
     right: true
   }, props.dropdownMenuItemList && props.dropdownMenuItemList.length > 0 && props.dropdownMenuItemList.map(function (item) {
@@ -65765,7 +65918,7 @@ var UserProfile = function UserProfile(props) {
   })));
 };
 
-var styles$11 = {"vitro-avatar":"_user-lookup-picker_vitro-avatar_2vI-SeH"};
+var styles$12 = {"vitro-avatar":"_user-lookup-picker_vitro-avatar_2vI-SeH"};
 
 var UserLookupPicker = React.forwardRef(function (props, ref) {
   var lookupPickerRef = React.useRef(null);
@@ -65773,7 +65926,7 @@ var UserLookupPicker = React.forwardRef(function (props, ref) {
     var prop = props.getHtmlValueTemplateProps(item);
     if (props.isMultiSelect) {
       return _extends({}, prop, {
-        className: styles$11['vitro-avatar']
+        className: styles$12['vitro-avatar']
       });
     }
     return prop;
@@ -65794,7 +65947,7 @@ var UserLookupPicker = React.forwardRef(function (props, ref) {
   }));
 });
 
-var styles$12 = {"vitro-title":"_activity_vitro-title_1rdvvaa","vitro-dropdown-button":"_activity_vitro-dropdown-button_12258nJ","vitro-activity":"_activity_vitro-activity_1u7YeF3"};
+var styles$13 = {"vitro-title":"_activity_vitro-title_1rdvvaa","vitro-dropdown-button":"_activity_vitro-dropdown-button_12258nJ","vitro-activity":"_activity_vitro-activity_1u7YeF3"};
 
 var Activity = function Activity(props) {
   var onDrop = function onDrop(e) {
@@ -65807,16 +65960,16 @@ var Activity = function Activity(props) {
     className: 'vitro-activity',
     onDrop: onDrop
   }, (props.filterDropdownList || props.title) && React__default.createElement("div", {
-    className: styles$12['vitro-title']
+    className: styles$13['vitro-title']
   }, props.filterDropdownList && React__default.createElement(DropdownButton, {
     itemList: props.filterDropdownList,
-    className: styles$12['vitro-dropdown-button']
+    className: styles$13['vitro-dropdown-button']
   }), props.title && React__default.createElement("h3", null, props.title)), React__default.createElement("div", {
     className: 'vitro-content'
   }, props.children));
 };
 
-var styles$13 = {"vitro-file":"_file_vitro-file_2xkXgkS","vitro-preview":"_file_vitro-preview_2RVdrbm","vitro-preview-container":"_file_vitro-preview-container_2dmbDD7","vitro-flex":"_file_vitro-flex_3nGTlWX","vitro-image":"_file_vitro-image_2Bt3otk","vitro-file-name":"_file_vitro-file-name_2t9Y643","vitro-file-size":"_file_vitro-file-size_15f_E_0","vitro-dropdown-button":"_file_vitro-dropdown-button_3MgI2n9"};
+var styles$14 = {"vitro-file":"_file_vitro-file_2xkXgkS","vitro-preview":"_file_vitro-preview_2RVdrbm","vitro-preview-container":"_file_vitro-preview-container_2dmbDD7","vitro-flex":"_file_vitro-flex_3nGTlWX","vitro-image":"_file_vitro-image_2Bt3otk","vitro-file-name":"_file_vitro-file-name_2t9Y643","vitro-file-size":"_file_vitro-file-size_15f_E_0","vitro-dropdown-button":"_file_vitro-dropdown-button_3MgI2n9"};
 
 var File = function File(props) {
   var onClick = function onClick() {
@@ -65824,33 +65977,33 @@ var File = function File(props) {
       props.onClick(props.id);
     }
   };
-  var className = [styles$13['vitro-file'], props.className || CTRL.EMPTY, props.isImage ? styles$13['vitro-preview'] : CTRL.EMPTY].join(CTRL.SPACE);
+  var className = [styles$14['vitro-file'], props.className || CTRL.EMPTY, props.isImage ? styles$14['vitro-preview'] : CTRL.EMPTY].join(CTRL.SPACE);
   return React__default.createElement("div", {
     className: className
   }, props.actionList && props.actionList.length ? React__default.createElement(DropdownButton, {
     itemList: props.actionList,
-    className: styles$13['vitro-dropdown-button']
+    className: styles$14['vitro-dropdown-button']
   }) : null, React__default.createElement(Tooltip$1, {
     placement: PLACEMENT.TOP,
     text: props.tooltip || CTRL.EMPTY
   }, React__default.createElement("div", {
-    className: styles$13['vitro-preview-container'],
+    className: styles$14['vitro-preview-container'],
     onClick: onClick
   }, React__default.createElement("img", {
     src: props.preview
   }))), !props.isImage && React__default.createElement("div", {
-    className: styles$13['vitro-flex']
+    className: styles$14['vitro-flex']
   }, props.image && React__default.createElement("img", {
     src: props.image,
-    className: styles$13['vitro-image']
+    className: styles$14['vitro-image']
   }), React__default.createElement("div", null, React__default.createElement("span", {
-    className: styles$13['vitro-file-name']
+    className: styles$14['vitro-file-name']
   }, props.name), React__default.createElement("span", {
-    className: styles$13['vitro-file-size']
+    className: styles$14['vitro-file-size']
   }, props.size))));
 };
 
-var styles$14 = {"vitro-file-list-container":"_attached-file-list_vitro-file-list-container_5PIFyI7","vitro-overflow-button":"_attached-file-list_vitro-overflow-button_39QxX1m","vitro-item-count":"_attached-file-list_vitro-item-count_35PIT1U","vitro-file":"_attached-file-list_vitro-file_2mPE3Rq"};
+var styles$15 = {"vitro-file-list-container":"_attached-file-list_vitro-file-list-container_5PIFyI7","vitro-overflow-button":"_attached-file-list_vitro-overflow-button_39QxX1m","vitro-item-count":"_attached-file-list_vitro-item-count_35PIT1U","vitro-file":"_attached-file-list_vitro-file_2mPE3Rq"};
 
 var AttachedFileListItem = function AttachedFileListItem(props) {
   var _useState = React.useState(null),
@@ -65866,14 +66019,14 @@ var AttachedFileListItem = function AttachedFileListItem(props) {
   return React__default.createElement(React__default.Fragment, null, props.fileList.map(function (file, index) {
     if (index < props.maxVisibleFileCount) {
       return React__default.createElement(File, Object.assign({}, file, {
-        className: styles$14['vitro-file']
+        className: styles$15['vitro-file']
       }));
     }
     return React__default.createElement(React__default.Fragment, null);
   }), props.fileList.length > props.maxVisibleFileCount && !hiddenFileList ? React__default.createElement("div", {
-    className: styles$14['vitro-overflow-button']
+    className: styles$15['vitro-overflow-button']
   }, React__default.createElement("div", {
-    className: styles$14['vitro-item-count'],
+    className: styles$15['vitro-item-count'],
     onClick: function onClick() {
       return onHiddenFileListClick(props.fileList.slice(props.maxVisibleFileCount));
     }
@@ -65882,10 +66035,10 @@ var AttachedFileListItem = function AttachedFileListItem(props) {
     text: props.hiddenFileCountTooltip || CTRL.EMPTY
   }, React__default.createElement("div", null, CTRL.PLUS + (props.fileList.length - props.maxVisibleFileCount)))), React__default.createElement(File, Object.assign({}, props.fileList[props.maxVisibleFileCount], {
     actionList: [],
-    className: styles$14['vitro-file']
+    className: styles$15['vitro-file']
   }))) : null, hiddenFileList && hiddenFileList.map(function (file) {
     return React__default.createElement(File, Object.assign({}, file, {
-      className: styles$14['vitro-file']
+      className: styles$15['vitro-file']
     }));
   }));
 };
@@ -65921,7 +66074,7 @@ var AttachedFileList = function AttachedFileList(props) {
     }
   };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$14['vitro-file-list-container']
+    className: styles$15['vitro-file-list-container']
   }, imageList && React__default.createElement(AttachedFileListItem, {
     fileList: imageList,
     maxVisibleFileCount: maxImageCount,
@@ -65935,7 +66088,7 @@ var AttachedFileList = function AttachedFileList(props) {
   })));
 };
 
-var styles$15 = {"vitro-activity-message":"_activity-message_vitro-activity-message_3GdyQuC","vitro-item":"_activity-message_vitro-item_3Q-7zX3","vitro-value":"_activity-message_vitro-value_O4DpuTR","vitro-message":"_activity-message_vitro-message_25otUOy","vitro-field-name":"_activity-message_vitro-field-name_hdjdQbg","vitro-separator":"_activity-message_vitro-separator_vxgHLaH"};
+var styles$16 = {"vitro-activity-message":"_activity-message_vitro-activity-message_3GdyQuC","vitro-item":"_activity-message_vitro-item_3Q-7zX3","vitro-value":"_activity-message_vitro-value_O4DpuTR","vitro-message":"_activity-message_vitro-message_25otUOy","vitro-field-name":"_activity-message_vitro-field-name_hdjdQbg","vitro-separator":"_activity-message_vitro-separator_vxgHLaH"};
 
 var ActivityMessage = function ActivityMessage(props) {
   var _useState = React.useState(false),
@@ -65977,25 +66130,25 @@ var ActivityMessage = function ActivityMessage(props) {
     return false;
   };
   return React__default.createElement(React__default.Fragment, null, props.changedValueList.length ? React__default.createElement("div", {
-    className: styles$15['vitro-activity-message']
+    className: styles$16['vitro-activity-message']
   }, props.changedValueList.map(function (item) {
     return React__default.createElement("div", {
-      className: styles$15['vitro-item']
+      className: styles$16['vitro-item']
     }, item.fieldName && React__default.createElement("span", {
-      className: styles$15['vitro-field-name']
+      className: styles$16['vitro-field-name']
     }, "" + item.fieldName + CTRL.COLON), item.oldValue && React__default.createElement(React__default.Fragment, null, React__default.createElement(Tooltip$1, {
       text: item.oldValue,
       isShow: isShowOldValueTooltip ? undefined : false
     }, React__default.createElement("div", {
-      className: styles$15['vitro-value'],
+      className: styles$16['vitro-value'],
       ref: oldValueRef
     }, item.oldValue)), React__default.createElement("span", {
-      className: styles$15['vitro-separator']
+      className: styles$16['vitro-separator']
     })), item.newValue && React__default.createElement(Tooltip$1, {
       text: item.newValue,
       isShow: isShowNewValueTooltip ? undefined : false
     }, React__default.createElement("div", {
-      className: item.isMessage ? styles$15['vitro-message'] : styles$15['vitro-value'],
+      className: item.isMessage ? styles$16['vitro-message'] : styles$16['vitro-value'],
       ref: newValueRef
     }, item.newValue)));
   })) : null, props.fileList && props.fileList.length ? React__default.createElement(AttachedFileList, Object.assign({
@@ -66022,7 +66175,7 @@ var LOCALE$6;
   LOCALE["ADD_FILE"] = "app.common.messageInput.action.addFile";
 })(LOCALE$6 || (LOCALE$6 = {}));
 
-var styles$16 = {"vitro-attached-file-container":"_attached-file_vitro-attached-file-container_3AhHHlm","vitro-attached-file":"_attached-file_vitro-attached-file_1R6PPQN","vitro-button-remove":"_attached-file_vitro-button-remove_3ehToHf"};
+var styles$17 = {"vitro-attached-file-container":"_attached-file_vitro-attached-file-container_3AhHHlm","vitro-attached-file":"_attached-file_vitro-attached-file_1R6PPQN","vitro-button-remove":"_attached-file_vitro-button-remove_3ehToHf"};
 
 var AttachedFile = function AttachedFile(props) {
   var _useState = React.useState(null),
@@ -66060,23 +66213,23 @@ var AttachedFile = function AttachedFile(props) {
     return null;
   }
   return React__default.createElement("div", {
-    className: styles$16['vitro-attached-file-container']
+    className: styles$17['vitro-attached-file-container']
   }, React__default.createElement(Tooltip$1, {
     placement: PLACEMENT.TOP,
     text: localeService.create(LOCALE$6.DELETE_FILE)
   }, React__default.createElement("button", {
-    className: styles$16['vitro-button-remove'],
+    className: styles$17['vitro-button-remove'],
     onClick: function onClick() {
       return props.onDelete(props.index);
     }
   })), React__default.createElement(File, Object.assign({
     id: "" + props.index
   }, file, {
-    className: styles$16['vitro-attached-file']
+    className: styles$17['vitro-attached-file']
   })));
 };
 
-var styles$17 = {"vitro-message-input":"_message-input_vitro-message-input_3MkcjWD","vitro-control":"_message-input_vitro-control_1PUSjq9","vitro-message":"_message-input_vitro-message_2EJSy-9","vitro-placeholder":"_message-input_vitro-placeholder_1FBfIqN","vitro-button-add-file":"_message-input_vitro-button-add-file_1qdtHHq","vitro-button-send":"_message-input_vitro-button-send_1vktQrZ","vitro-display-none":"_message-input_vitro-display-none_2dYTZ22","vitro-attached-file-list":"_message-input_vitro-attached-file-list_l95S4VR","vitro-flex":"_message-input_vitro-flex_18M_7xU"};
+var styles$18 = {"vitro-message-input":"_message-input_vitro-message-input_3MkcjWD","vitro-control":"_message-input_vitro-control_1PUSjq9","vitro-message":"_message-input_vitro-message_2EJSy-9","vitro-placeholder":"_message-input_vitro-placeholder_1FBfIqN","vitro-button-add-file":"_message-input_vitro-button-add-file_1qdtHHq","vitro-button-send":"_message-input_vitro-button-send_1vktQrZ","vitro-display-none":"_message-input_vitro-display-none_2dYTZ22","vitro-attached-file-list":"_message-input_vitro-attached-file-list_l95S4VR","vitro-flex":"_message-input_vitro-flex_18M_7xU"};
 
 var MessageInput = React.forwardRef(function (props, ref) {
   var _useState = React.useState(true),
@@ -66189,12 +66342,12 @@ var MessageInput = React.forwardRef(function (props, ref) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$17['vitro-message-input'],
+    className: styles$18['vitro-message-input'],
     onDrop: props.onDrop
   }, React__default.createElement("div", {
-    className: styles$17['vitro-control']
+    className: styles$18['vitro-control']
   }, fileList.length ? React__default.createElement("div", {
-    className: styles$17['vitro-attached-file-list']
+    className: styles$18['vitro-attached-file-list']
   }, React__default.createElement(ScrollBar, null, fileList.map(function (file, index) {
     return React__default.createElement(AttachedFile, {
       key: index,
@@ -66205,11 +66358,11 @@ var MessageInput = React.forwardRef(function (props, ref) {
       getFileSize: props.getFileSize
     });
   }))) : null, React__default.createElement(FlexBox, {
-    className: styles$17['vitro-flex']
+    className: styles$18['vitro-flex']
   }, !props.isDisabled && React__default.createElement(ScrollBar, {
     isHideScrollX: true
   }, React__default.createElement("div", {
-    className: styles$17['vitro-message'],
+    className: styles$18['vitro-message'],
     ref: inputRef,
     onInput: onChange,
     onKeyDown: onKeyDown,
@@ -66219,20 +66372,20 @@ var MessageInput = React.forwardRef(function (props, ref) {
     onDrop: onDrop,
     contentEditable: true
   }, isShowPlaceholder && React__default.createElement("span", {
-    className: styles$17['vitro-placeholder']
+    className: styles$18['vitro-placeholder']
   }, props.placeholder || localeService.create(LOCALE$6.PLACEHOLDER)))), props.children, props.onSelectFiles && React__default.createElement(React__default.Fragment, null, React__default.createElement(ImageButton, {
     onClick: selectFile,
     tooltipText: localeService.create(LOCALE$6.ADD_FILE),
-    className: styles$17['vitro-button-add-file']
+    className: styles$18['vitro-button-add-file']
   }), React__default.createElement("input", {
     type: 'file',
     onChange: onSelectFile,
     ref: fileInputRef,
-    className: styles$17['vitro-display-none'],
+    className: styles$18['vitro-display-none'],
     multiple: true
   })))), React__default.createElement(ImageButton, {
     onClick: onEnter,
-    className: styles$17['vitro-button-send']
+    className: styles$18['vitro-button-send']
   }));
 });
 
@@ -66247,7 +66400,7 @@ var LOCALE$7;
   LOCALE["ACTION_DELETE"] = "app.common.action.delete";
 })(LOCALE$7 || (LOCALE$7 = {}));
 
-var styles$18 = {"vitro-image-picker-root":"_image-picker_vitro-image-picker-root_AqOYRhP","vitro-image-picker-dropdown-wrapper":"_image-picker_vitro-image-picker-dropdown-wrapper_8Tr_BBS","vitro-image-picker-defaultImage-wrapper":"_image-picker_vitro-image-picker-defaultImage-wrapper_1BHZ1he","vitro-image-picker-image-wrapper":"_image-picker_vitro-image-picker-image-wrapper_328OVLU","vitro-image-picker-input":"_image-picker_vitro-image-picker-input_12jFFNU","vitro-image-default":"_image-picker_vitro-image-default_LhN4iy6","vitro-image-picker-label-wrapper":"_image-picker_vitro-image-picker-label-wrapper_WRLzUYM","vitro-image-picker-wrapper":"_image-picker_vitro-image-picker-wrapper_dlZyYFL","vitro-required":"_image-picker_vitro-required_2lpwlb0"};
+var styles$19 = {"vitro-image-picker-root":"_image-picker_vitro-image-picker-root_AqOYRhP","vitro-image-picker-dropdown-wrapper":"_image-picker_vitro-image-picker-dropdown-wrapper_8Tr_BBS","vitro-image-picker-defaultImage-wrapper":"_image-picker_vitro-image-picker-defaultImage-wrapper_1BHZ1he","vitro-image-picker-image-wrapper":"_image-picker_vitro-image-picker-image-wrapper_328OVLU","vitro-image-picker-input":"_image-picker_vitro-image-picker-input_12jFFNU","vitro-image-default":"_image-picker_vitro-image-default_LhN4iy6","vitro-image-picker-label-wrapper":"_image-picker_vitro-image-picker-label-wrapper_WRLzUYM","vitro-image-picker-wrapper":"_image-picker_vitro-image-picker-wrapper_dlZyYFL","vitro-required":"_image-picker_vitro-required_2lpwlb0"};
 
 var ImagePicker = function ImagePicker(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
@@ -66255,16 +66408,16 @@ var ImagePicker = function ImagePicker(props) {
   var renderPreview = function renderPreview() {
     if (props.defaultUrl) {
       return React__default.createElement("div", {
-        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$18['vitro-image-picker-image-wrapper']
+        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$19['vitro-image-picker-image-wrapper']
       }, React__default.createElement(Image, {
         defaultUrl: props.defaultUrl,
-        className: props.classNameImage ? props.classNameImage : styles$18['vitro-image-picker-image']
+        className: props.classNameImage ? props.classNameImage : styles$19['vitro-image-picker-image']
       }));
     } else {
       return React__default.createElement("div", {
-        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$18['vitro-image-picker-defaultImage-wrapper']
+        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$19['vitro-image-picker-defaultImage-wrapper']
       }, React__default.createElement("div", {
-        className: styles$18['vitro-image-default']
+        className: styles$19['vitro-image-default']
       }));
     }
   };
@@ -66304,19 +66457,19 @@ var ImagePicker = function ImagePicker(props) {
     return (_props$itemList = props.itemList) !== null && _props$itemList !== void 0 && _props$itemList.length ? result.concat(props.itemList) : result;
   }, [props.itemList, props.defaultUrl]);
   return React__default.createElement("div", {
-    className: styles$18['vitro-image-picker-wrapper']
+    className: styles$19['vitro-image-picker-wrapper']
   }, React__default.createElement("div", {
-    className: styles$18['vitro-image-picker-label-wrapper']
+    className: styles$19['vitro-image-picker-label-wrapper']
   }, props.label ? props.label : '', props.isRequired && React__default.createElement("span", {
-    className: styles$18['vitro-required']
+    className: styles$19['vitro-required']
   }, CTRL.ASTERISK)), React__default.createElement("div", {
-    className: props.classNameRoot ? props.classNameRoot : styles$18['vitro-image-picker-root']
+    className: props.classNameRoot ? props.classNameRoot : styles$19['vitro-image-picker-root']
   }, !props.isReadOnly && React__default.createElement(DropdownButton, {
     itemList: defaultItemList,
-    className: styles$18['vitro-image-picker-dropdown-wrapper']
+    className: styles$19['vitro-image-picker-dropdown-wrapper']
   }), React__default.createElement("input", {
     type: 'file',
-    className: styles$18['vitro-image-picker-input'],
+    className: styles$19['vitro-image-picker-input'],
     ref: inputFileRef,
     onChange: onChange,
     accept: 'image/*'
@@ -66325,7 +66478,7 @@ var ImagePicker = function ImagePicker(props) {
   }));
 };
 
-var styles$19 = {"vitro-list":"_list_vitro-list_2cs4WZE"};
+var styles$1a = {"vitro-list":"_list_vitro-list_2cs4WZE"};
 
 var List = React.forwardRef(function (props, ref) {
   var _onClick = function onClick(item) {
@@ -66333,18 +66486,33 @@ var List = React.forwardRef(function (props, ref) {
       props.onClick(item);
     }
   };
-  return React__default.createElement("ul", {
-    ref: ref,
-    className: styles$19['vitro-list'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
-    onBlur: props.onBlur
-  }, props.itemList && props.itemList.map(function (item, index) {
+  var children = React__default.createElement(React__default.Fragment, null, props.itemList && props.itemList.map(function (item, index) {
+    if (index === props.itemList.length - 1) {
+      setTimeout(function () {
+        if (props.onRenderFinish) {
+          props.onRenderFinish();
+        }
+      });
+    }
     return React__default.createElement("li", {
       onClick: function onClick() {
         return _onClick(item);
       },
-      key: index
-    }, React__default.createElement(props.itemTemplate, item));
+      key: index,
+      className: props.itemClassName
+    }, React__default.createElement(props.itemTemplate, _extends({}, item, {
+      index: index
+    })));
   }));
+  if (props.isCustomContainer) {
+    return children;
+  }
+  return React__default.createElement("ul", Object.assign({}, props, {
+    onClick: function onClick() {},
+    ref: ref,
+    className: styles$1a['vitro-list'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    onBlur: props.onBlur
+  }), children);
 });
 
 var Overlay$2 = React.forwardRef(function (props, ref) {
@@ -66386,7 +66554,7 @@ var Overlay$2 = React.forwardRef(function (props, ref) {
   }, props.children));
 });
 
-var styles$1a = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","vitro-control":"_criterion_vitro-control_2JLaybj","vitro-label":"_criterion_vitro-label_3F6a8dj","vitro-operator-select-container":"_criterion_vitro-operator-select-container_3OkjzXG","vitro-operator-select":"_criterion_vitro-operator-select_1guNlk9","vitro-operator-list":"_criterion_vitro-operator-list_3A2VZsd","vitro-button-cancel":"_criterion_vitro-button-cancel_2C2G0sL","vitro-focus":"_criterion_vitro-focus_3FNLsoN","vitro-error":"_criterion_vitro-error_3pvFrlW","vitro-condition-select":"_criterion_vitro-condition-select_1hTBBg-","vitro-image":"_criterion_vitro-image_1f6DKPL","vitro-condition-list-container":"_criterion_vitro-condition-list-container_ERfumwB","vitro-operator-list-container":"_criterion_vitro-operator-list-container_RgT0R_Z","vitro-condition-list":"_criterion_vitro-condition-list_10UIxJI","vitro-condition":"_criterion_vitro-condition_2RFixrp","vitro-criterion-container-mobile":"_criterion_vitro-criterion-container-mobile_1yxaJHi"};
+var styles$1b = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","vitro-control":"_criterion_vitro-control_2JLaybj","vitro-label":"_criterion_vitro-label_3F6a8dj","vitro-operator-select-container":"_criterion_vitro-operator-select-container_3OkjzXG","vitro-operator-select":"_criterion_vitro-operator-select_1guNlk9","vitro-operator-list":"_criterion_vitro-operator-list_3A2VZsd","vitro-button-cancel":"_criterion_vitro-button-cancel_2C2G0sL","vitro-focus":"_criterion_vitro-focus_3FNLsoN","vitro-error":"_criterion_vitro-error_3pvFrlW","vitro-condition-select":"_criterion_vitro-condition-select_1hTBBg-","vitro-image":"_criterion_vitro-image_1f6DKPL","vitro-condition-list-container":"_criterion_vitro-condition-list-container_ERfumwB","vitro-operator-list-container":"_criterion_vitro-operator-list-container_RgT0R_Z","vitro-condition-list":"_criterion_vitro-condition-list_10UIxJI","vitro-condition":"_criterion_vitro-condition_2RFixrp","vitro-criterion-container-mobile":"_criterion_vitro-criterion-container-mobile_1yxaJHi"};
 
 var ConditionSelect = React.forwardRef(function (props, ref) {
   var _useState = React.useState(props.defaultValue || props.itemList[0]),
@@ -66402,6 +66570,9 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
       window.removeEventListener(exports.EVENT.MOUSEDOWN, onBlur);
     };
   });
+  React.useEffect(function () {
+    setCondition(props.defaultValue);
+  }, [props.defaultValue]);
   var toggleSelect = function toggleSelect() {
     setShowSelectList(!showSelectList);
   };
@@ -66417,37 +66588,37 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
   };
   var getCondition = function getCondition(props) {
     return React__default.createElement(FlexBox, {
-      className: styles$1a['vitro-condition']
+      className: styles$1b['vitro-condition']
     }, props.imageUrl && React__default.createElement(Image, {
       defaultUrl: props.imageUrl
     }), props.text);
   };
   return React__default.createElement(React__default.Fragment, null, condition && React__default.createElement("div", {
     ref: ref,
-    className: styles$1a['vitro-condition-select']
+    className: styles$1b['vitro-condition-select']
   }, React__default.createElement("div", {
     onClick: toggleSelect
   }, condition.imageUrl ? React__default.createElement(Image, {
     defaultUrl: condition.imageUrl,
-    className: styles$1a['vitro-image']
+    className: styles$1b['vitro-image']
   }) : condition.text), React__default.createElement(Overlay$2, {
     isShow: showSelectList,
     isFlip: true,
     target: ref.current,
     placement: exports.PLACEMENT.BOTTOM + CTRL.DASH + exports.PLACEMENT.START,
-    className: styles$1a['vitro-condition-list-container']
+    className: styles$1b['vitro-condition-list-container']
   }, React__default.createElement(List, {
     ref: listRef,
     itemList: props.itemList,
     itemTemplate: getCondition,
     onClick: onClick,
     onBlur: onBlur,
-    className: styles$1a['vitro-condition-list']
+    className: styles$1b['vitro-condition-list']
   }))));
 });
 
 var Criterion = function Criterion(props) {
-  var _useState = React.useState(props.operatorList[0]),
+  var _useState = React.useState(props.operatorList ? props.operatorList[0] : null),
     operator = _useState[0],
     setOperator = _useState[1];
   var _useState2 = React.useState(false),
@@ -66457,11 +66628,11 @@ var Criterion = function Criterion(props) {
     state = _useState3[0],
     setState = _useState3[1];
   var componentProps = props.content.props;
-  var defaultOperator = (componentProps.value ? props.operatorList.find(function (x) {
+  var defaultOperator = props.operatorList ? (componentProps.value ? props.operatorList.find(function (x) {
     return x.type === componentProps.value.operator;
   }) : props.operatorList.find(function (x) {
     return x.type === props.defaultOperator;
-  })) || props.operatorList[0];
+  })) || props.operatorList[0] : null;
   var defaultCondition = (componentProps.value ? props.conditionList.find(function (x) {
     return x.type === componentProps.value.condition;
   }) : props.conditionList.find(function (x) {
@@ -66470,7 +66641,7 @@ var Criterion = function Criterion(props) {
   var value = React.useMemo(function () {
     return {
       internalName: componentProps.name,
-      operator: defaultOperator.type,
+      operator: defaultOperator ? defaultOperator.type : 0,
       valueList: componentProps.value ? componentProps.value.valueList : [],
       condition: defaultCondition.type
     };
@@ -66509,13 +66680,13 @@ var Criterion = function Criterion(props) {
     onChange(value);
   };
   var onFocus = function onFocus(e) {
-    setState(styles$1a['vitro-focus']);
+    setState(styles$1b['vitro-focus']);
     if (componentProps.onFocus) {
       componentProps.onFocus(e);
     }
   };
   var onBlur = function onBlur(e) {
-    setState(componentProps.errorMessage ? styles$1a['vitro-error'] : CTRL.EMPTY);
+    setState(componentProps.errorMessage ? styles$1b['vitro-error'] : CTRL.EMPTY);
     if (componentProps.onBlur) {
       componentProps.onBlur(e);
     }
@@ -66530,39 +66701,39 @@ var Criterion = function Criterion(props) {
     onChange(value);
   };
   return React__default.createElement(FlexBox, {
-    className: props.isMobileView ? styles$1a['vitro-criterion-container-mobile'] : styles$1a['vitro-criterion-container']
-  }, React__default.createElement("div", {
-    className: styles$1a['vitro-operator-select-container']
+    className: props.isMobileView ? styles$1b['vitro-criterion-container-mobile'] : styles$1b['vitro-criterion-container']
+  }, props.operatorList && operator ? React__default.createElement("div", {
+    className: styles$1b['vitro-operator-select-container']
   }, props.isShowOperatorSelect && React__default.createElement(FlexBox, {
     ref: operatorSelectRef,
-    className: styles$1a['vitro-operator-select'],
+    className: styles$1b['vitro-operator-select'],
     onClick: toggleOperatorSelect
   }, React__default.createElement("div", null, operator.text)), React__default.createElement(Overlay$2, {
     isShow: showOperatorSelectList,
     isFlip: true,
     target: operatorSelectRef.current,
     placement: exports.PLACEMENT.BOTTOM + CTRL.DASH + exports.PLACEMENT.END,
-    className: styles$1a['vitro-operator-list-container']
+    className: styles$1b['vitro-operator-list-container']
   }, React__default.createElement(List, {
     itemList: props.operatorList,
     itemTemplate: function itemTemplate(props) {
       return React__default.createElement(React__default.Fragment, null, props.text);
     },
     onClick: onOperatorClick,
-    className: styles$1a['vitro-operator-list']
-  }))), React__default.createElement("div", {
-    className: styles$1a['vitro-control'] + CTRL.SPACE + state
+    className: styles$1b['vitro-operator-list']
+  }))) : CTRL.EMPTY, React__default.createElement("div", {
+    className: styles$1b['vitro-control'] + CTRL.SPACE + state
   }, React__default.createElement(Label, {
     ref: labelRef,
     text: props.label,
-    className: styles$1a['vitro-label']
+    className: styles$1b['vitro-label']
   }), React__default.createElement(ConditionSelect, {
     ref: conditionSelectRef,
     itemList: props.conditionList,
     onSelect: onConditionClick,
     defaultValue: defaultCondition
   }), React__default.createElement(props.content.component, _extends({}, componentProps, {
-    className: styles$1a['vitro-control'],
+    className: styles$1b['vitro-control'],
     onBlur: onBlur,
     onFocus: onFocus,
     onChange: onControlChange,
@@ -66574,161 +66745,15 @@ var Criterion = function Criterion(props) {
     onClick: function onClick() {
       return props.onDelete(componentProps.id);
     },
-    className: styles$1a['vitro-button-cancel']
+    className: styles$1b['vitro-button-cancel']
   }));
 };
 
 var LOCALE$8;
-(function (LOCALE) {
-  LOCALE["VALUE_COUNT"] = "app.common.searchInput.valueCount";
-  LOCALE["PLACEHOLDER"] = "app.common.searchInput.placeholder";
-})(LOCALE$8 || (LOCALE$8 = {}));
-
-var styles$1b = {"vitro-search-input":"_search-input_vitro-search-input_3M9i4Gi","vitro-search-value-list":"_search-input_vitro-search-value-list_1Gqj4bm","vitro-button-cancel":"_search-input_vitro-button-cancel_xqdMNLo","vitro-search-value":"_search-input_vitro-search-value_TJm1BCf","vitro-search-input-mobile":"_search-input_vitro-search-input-mobile_1H1USnO"};
-
-var NEW_LINE = '\n';
-var SearchInput = function SearchInput(props) {
-  var _props$searchCriterio;
-  var _useState = React.useState(CTRL.EMPTY),
-    value = _useState[0],
-    setValue = _useState[1];
-  var _useState2 = React.useState(CTRL.EMPTY),
-    state = _useState2[0],
-    setState = _useState2[1];
-  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
-  var inputRef = React.useRef(null);
-  var onKeyDown = function onKeyDown(e) {
-    if (e.keyCode === KEY_CODE.ENTER) {
-      e.preventDefault();
-      onSubmit();
-    }
-  };
-  var onSubmit = function onSubmit() {
-    if (value && props.onSubmit) {
-      props.onSubmit(value);
-      resetValue();
-    }
-  };
-  var onCancel = function onCancel() {
-    resetValue();
-    props.onCancel();
-  };
-  var onChange = function onChange(e) {
-    setValue(e.target.value);
-    if (props.onChange) {
-      props.onChange(e.target.value);
-    }
-  };
-  var onBlur = function onBlur() {
-    if (props.onBlur) {
-      props.onBlur();
-    }
-    setState(CTRL.EMPTY);
-  };
-  var onFocus = function onFocus() {
-    if (props.onFocus) {
-      props.onFocus();
-    }
-    setState('vitro-focus');
-  };
-  var resetValue = function resetValue() {
-    if (inputRef.current) {
-      inputRef.current.value = CTRL.EMPTY;
-    }
-    setValue(CTRL.EMPTY);
-  };
-  var getTextValue = function getTextValue(value) {
-    var valueArray = value.valueList.map(function (x) {
-      if (x && typeof x === 'object') {
-        if (x instanceof Date) {
-          return x.toLocaleString().split(CTRL.COMMA)[0];
-        }
-        return x.name || x.fieldValueMap.name;
-      } else {
-        return x;
-      }
-    });
-    var text = [value.name, valueArray.join(CTRL.COMMA + CTRL.SPACE)].join(CTRL.COLON + CTRL.SPACE);
-    return text;
-  };
-  var onRemoveValue = function onRemoveValue(valueList) {
-    if (props.onRemoveValue && props.searchCriterionList) {
-      var newList = props.searchCriterionList;
-      var _loop = function _loop() {
-        var value = _step.value;
-        newList = newList.filter(function (x) {
-          return x.internalName !== value.internalName;
-        });
-      };
-      for (var _iterator = _createForOfIteratorHelperLoose(valueList), _step; !(_step = _iterator()).done;) {
-        _loop();
-      }
-      props.onRemoveValue(newList);
-    }
-  };
-  var getTextValueList = function getTextValueList(valueList) {
-    var list = valueList.map(function (x) {
-      return getTextValue(x);
-    });
-    return list.join(NEW_LINE);
-  };
-  var getClassName = function getClassName() {
-    var classList = [props.isMobileView ? styles$1b['vitro-search-input-mobile'] : styles$1b['vitro-search-input'], props.className || CTRL.EMPTY, state];
-    if (props.isActive) {
-      classList.push('vitro-active');
-    }
-    return classList.join(CTRL.SPACE);
-  };
-  var getSelectedValueList = function getSelectedValueList(valueList) {
-    var firstValue = valueList[0];
-    var list = valueList.slice(1);
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement(FlexBox, {
-      className: styles$1b['vitro-search-value']
-    }, React__default.createElement("span", null, getTextValue(firstValue)), React__default.createElement(ImageButton, {
-      onClick: function onClick() {
-        return onRemoveValue([firstValue]);
-      },
-      className: styles$1b['vitro-button-cancel']
-    })), list.length >= 1 ? React__default.createElement(Tooltip$1, {
-      text: getTextValueList(list),
-      placement: PLACEMENT.BOTTOM
-    }, React__default.createElement("div", null, React__default.createElement(FlexBox, {
-      className: styles$1b['vitro-search-value']
-    }, localeService.create(LOCALE$8.VALUE_COUNT, {
-      count: list.length
-    }), React__default.createElement(ImageButton, {
-      onClick: function onClick() {
-        return onRemoveValue(list);
-      },
-      className: styles$1b['vitro-button-cancel']
-    })))) : null);
-  };
-  return React__default.createElement(FlexBox, {
-    className: getClassName()
-  }, React__default.createElement(ImageButton, {
-    className: 'vitro-button-search',
-    onClick: props.onSearchClick ? props.onSearchClick : onSubmit
-  }), !props.isMobileView && React__default.createElement(React__default.Fragment, null, React__default.createElement(FlexBox, {
-    className: styles$1b['vitro-search-value-list']
-  }, props.searchCriterionList && props.searchCriterionList.length ? getSelectedValueList(props.searchCriterionList) : React__default.createElement("input", {
-    type: 'text',
-    ref: inputRef,
-    onKeyDown: onKeyDown,
-    onChange: onChange,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    placeholder: !props.isActive ? props.placeholder || localeService.create(LOCALE$8.PLACEHOLDER) : CTRL.EMPTY
-  })), props.children, value || (_props$searchCriterio = props.searchCriterionList) !== null && _props$searchCriterio !== void 0 && _props$searchCriterio.length || props.isActive ? React__default.createElement(ImageButton, {
-    onClick: onCancel,
-    className: styles$1b['vitro-button-cancel']
-  }) : null));
-};
-
-var LOCALE$9;
 (function (LOCALE) {
   LOCALE["EXPAND_TEXT"] = "app.common.expandControlGroup.expand";
   LOCALE["COLLAPSE_TEXT"] = "app.common.expandControlGroup.collapse";
-})(LOCALE$9 || (LOCALE$9 = {}));
+})(LOCALE$8 || (LOCALE$8 = {}));
 
 var styles$1c = {"vitro-expand-control-group":"_expand-control-group_vitro-expand-control-group_1qSUMoN","vitro-top":"_expand-control-group_vitro-top_pV-8fhr","vitro-display-none":"_expand-control-group_vitro-display-none_Zs_5rQL"};
 
@@ -66752,8 +66777,8 @@ var ExpandControlGroup = function ExpandControlGroup(props) {
   }, React__default.createElement(ExpandCollapseButton, {
     expandImage: props.expandImage,
     collapseImage: props.collapseImage,
-    expandText: props.expandText || localeService.create(LOCALE$9.EXPAND_TEXT),
-    collapseText: props.collapseText || localeService.create(LOCALE$9.COLLAPSE_TEXT),
+    expandText: props.expandText || localeService.create(LOCALE$8.EXPAND_TEXT),
+    collapseText: props.collapseText || localeService.create(LOCALE$8.COLLAPSE_TEXT),
     onClick: onClick,
     isExpanded: isExpanded,
     className: props.buttonClassName
@@ -66800,6 +66825,16 @@ var FieldIterator = React.forwardRef(function (props, ref) {
       setControlList([]);
     }
   }, [props.fieldList]);
+  React.useEffect(function () {
+    if (props.changedFieldValueMap) {
+      for (var _iterator2 = _createForOfIteratorHelperLoose(props.changedFieldValueMap), _step2; !(_step2 = _iterator2()).done;) {
+        var _step2$value = _step2.value,
+          key = _step2$value[0],
+          value = _step2$value[1];
+        changedFieldValueMap.set(key, value);
+      }
+    }
+  }, [props.changedFieldValueMap]);
   React.useEffect(function () {
     updateControlList();
   }, [props.fieldValueMap, props.fieldList]);
@@ -66977,9 +67012,151 @@ var FieldIterator = React.forwardRef(function (props, ref) {
   })) : null);
 });
 
-var styles$1e = {"vitro-search":"_search_vitro-search_QkJksC_","vitro-active":"_search_vitro-active_1HhQOCR","vitro-settings-dialog":"_search_vitro-settings-dialog_1_c5bIg","vitro-filter-container":"_search_vitro-filter-container_3p6D0hI","vitro-filter":"_search_vitro-filter_2n-Y-mS","vitro-add-field":"_search_vitro-add-field_2hHt1Z2","vitro-add-field-button":"_search_vitro-add-field-button_30hdXYn","vitro-add-field-dialog":"_search_vitro-add-field-dialog_3gC92SF","vitro-button-group":"_search_vitro-button-group_1VuZJdq","vitro-button":"_search_vitro-button_1kaitIg","vitro-button-cancel":"_search_vitro-button-cancel_1M8UkMM","vitro-button-settings":"_search_vitro-button-settings_oJCn__t","vitro-search-mobile":"_search_vitro-search-mobile_XsKRflV","vitro-settings-dialog-mobile":"_search_vitro-settings-dialog-mobile_1no71m6","vitro-settings-dialog-header":"_search_vitro-settings-dialog-header_vID4BE6","vitro-settings-dialog-footer":"_search_vitro-settings-dialog-footer_11fP4FC","vitro-scrollbar":"_search_vitro-scrollbar_3Xg3VXI"};
+var styles$1e = {"vitro-criterion-container":"_item_vitro-criterion-container_3cAvpK0","vitro-control":"_item_vitro-control_2yXKeQZ","vitro-label":"_item_vitro-label_1UoRViU","vitro-button-cancel":"_item_vitro-button-cancel_3FPRPrk","vitro-focus":"_item_vitro-focus_1VqbeO1","vitro-error":"_item_vitro-error_2VnXFaz","vitro-image":"_item_vitro-image_24giw0o"};
+
+var Item$3 = function Item(props) {
+  var _useState = React.useState(CTRL.EMPTY),
+    state = _useState[0],
+    setState = _useState[1];
+  var componentProps = props.content.props;
+  var value = React.useMemo(function () {
+    return {
+      internalName: componentProps.name,
+      valueList: componentProps.value ? componentProps.value.valueList : []
+    };
+  }, []);
+  var labelRef = React.useRef(null);
+  var onFocus = function onFocus(e) {
+    setState(styles$1e['vitro-focus']);
+    if (componentProps.onFocus) {
+      componentProps.onFocus(e);
+    }
+  };
+  var onBlur = function onBlur(e) {
+    setState(componentProps.errorMessage ? styles$1e['vitro-error'] : CTRL.EMPTY);
+    if (componentProps.onBlur) {
+      componentProps.onBlur(e);
+    }
+  };
+  var onChange = function onChange(val) {
+    if (props.onChange) {
+      props.onChange(val, componentProps.name);
+    }
+  };
+  var onControlChange = function onControlChange(val, name) {
+    value.valueList = Array.isArray(val) ? val : [val];
+    onChange(value);
+  };
+  return React__default.createElement(FlexBox, {
+    className: props.isMobileView ? styles$1e['vitro-criterion-container-mobile'] : styles$1e['vitro-criterion-container']
+  }, React__default.createElement("div", {
+    className: styles$1e['vitro-control'] + CTRL.SPACE + state
+  }, React__default.createElement(Label, {
+    ref: labelRef,
+    text: props.label,
+    className: styles$1e['vitro-label']
+  }), React__default.createElement(props.content.component, _extends({}, componentProps, {
+    className: styles$1e['vitro-control'],
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onChange: onControlChange,
+    label: CTRL.EMPTY,
+    isDisabled: false,
+    isReadOnly: false,
+    isRequired: false
+  }))), React__default.createElement(ImageButton, {
+    onClick: function onClick() {
+      return props.onDelete(componentProps.id);
+    },
+    className: styles$1e['vitro-button-cancel']
+  }));
+};
+
+var styles$1f = {"vitro-field-iterator":"_editable-field-iterator_vitro-field-iterator_myx5yu3"};
+
+var EditableFieldIterator = function EditableFieldIterator(props) {
+  var _useState = React.useState(null),
+    componentMap = _useState[0],
+    setComponentMap = _useState[1];
+  var _useState2 = React.useState(null),
+    fieldValueMap = _useState2[0],
+    setFieldValueMap = _useState2[1];
+  var _useState3 = React.useState(null),
+    changedFieldValueMap = _useState3[0],
+    setChangedFieldValueMap = _useState3[1];
+  React.useEffect(function () {
+    initComponentMap();
+  }, [props.componentMap]);
+  React.useEffect(function () {
+    if (changedFieldValueMap) {
+      setFieldValueMap(Object.fromEntries(changedFieldValueMap));
+    }
+  }, [props.fieldList, changedFieldValueMap]);
+  React.useEffect(function () {
+    if (props.valueList) {
+      var valueMap = new Map();
+      props.valueList.map(function (x) {
+        valueMap.set(x.internalName, x);
+      });
+      setFieldValueMap(Object.fromEntries(valueMap));
+      setChangedFieldValueMap(valueMap);
+    } else {
+      setFieldValueMap(null);
+      setChangedFieldValueMap(null);
+    }
+  }, [props.valueList]);
+  var initComponentMap = function initComponentMap() {
+    var map = props.componentMap.map(function (component) {
+      return {
+        name: component.name,
+        value: function value(componentProps) {
+          return React__default.createElement(Item$3, {
+            label: componentProps.label,
+            onDelete: props.onDeleteField,
+            content: {
+              component: component.value,
+              props: _extends({}, componentProps, {
+                label: CTRL.EMPTY
+              })
+            },
+            onChange: componentProps.onChange,
+            isMobileView: props.isMobileView
+          });
+        }
+      };
+    });
+    setComponentMap(map);
+  };
+  var onChange = function onChange(changedFieldValueMap) {
+    setChangedFieldValueMap(changedFieldValueMap);
+    props.onChange(changedFieldValueMap);
+  };
+  return React__default.createElement("div", {
+    className: styles$1f['vitro-filter']
+  }, props.isNoScrollBar ? componentMap && React__default.createElement(FieldIterator, {
+    fieldList: props.fieldList,
+    fieldValueMap: fieldValueMap,
+    changedFieldValueMap: changedFieldValueMap,
+    componentMap: componentMap,
+    onChange: onChange,
+    isVisibleOverflow: true,
+    className: styles$1f['vitro-field-iterator']
+  }) : React__default.createElement(ScrollBar, {
+    className: styles$1f['vitro-scrollbar']
+  }, componentMap && React__default.createElement(FieldIterator, {
+    fieldList: props.fieldList,
+    fieldValueMap: fieldValueMap,
+    changedFieldValueMap: changedFieldValueMap,
+    componentMap: componentMap,
+    onChange: onChange,
+    isVisibleOverflow: true,
+    className: styles$1f['vitro-field-iterator']
+  })));
+};
+
+var styles$1g = {"vitro-field-iterator":"_criterion-field-iterator_vitro-field-iterator_24abkh9","vitro-add-field":"_criterion-field-iterator_vitro-add-field_c1abzX_","vitro-add-field-button":"_criterion-field-iterator_vitro-add-field-button_2oPndf7","vitro-add-field-dialog":"_criterion-field-iterator_vitro-add-field-dialog_3QlfaQE"};
 
-var Filter = function Filter(props) {
+var CriterionFieldIterator = function CriterionFieldIterator(props) {
   var _useState = React.useState(null),
     componentMap = _useState[0],
     setComponentMap = _useState[1];
@@ -67028,7 +67205,7 @@ var Filter = function Filter(props) {
               })
             },
             onChange: componentProps.onChange,
-            isShowOperatorSelect: componentProps.index ? true : false,
+            isShowOperatorSelect: props.operatorList ? componentProps.index ? true : false : false,
             isMobileView: props.isMobileView
           });
         }
@@ -67041,25 +67218,180 @@ var Filter = function Filter(props) {
     props.onChange(changedFieldValueMap);
   };
   return React__default.createElement("div", {
-    className: styles$1e['vitro-filter']
-  }, React__default.createElement(ScrollBar, {
-    className: styles$1e['vitro-scrollbar']
+    className: styles$1g['vitro-filter']
+  }, props.isNoScrollBar ? componentMap && React__default.createElement(FieldIterator, {
+    fieldList: props.fieldList,
+    fieldValueMap: fieldValueMap,
+    changedFieldValueMap: changedFieldValueMap,
+    componentMap: componentMap,
+    onChange: onChange,
+    isVisibleOverflow: true,
+    className: styles$1g['vitro-field-iterator']
+  }) : React__default.createElement(ScrollBar, {
+    className: styles$1g['vitro-scrollbar']
   }, componentMap && React__default.createElement(FieldIterator, {
     fieldList: props.fieldList,
     fieldValueMap: fieldValueMap,
     changedFieldValueMap: changedFieldValueMap,
     componentMap: componentMap,
     onChange: onChange,
-    isVisibleOverflow: true
+    isVisibleOverflow: true,
+    className: styles$1g['vitro-field-iterator']
   })));
 };
 
+var LOCALE$9;
+(function (LOCALE) {
+  LOCALE["VALUE_COUNT"] = "app.common.searchInput.valueCount";
+  LOCALE["PLACEHOLDER"] = "app.common.searchInput.placeholder";
+})(LOCALE$9 || (LOCALE$9 = {}));
+
+var styles$1h = {"vitro-search-input":"_search-input_vitro-search-input_3M9i4Gi","vitro-search-value-list":"_search-input_vitro-search-value-list_1Gqj4bm","vitro-button-cancel":"_search-input_vitro-button-cancel_xqdMNLo","vitro-search-value":"_search-input_vitro-search-value_TJm1BCf","vitro-search-input-mobile":"_search-input_vitro-search-input-mobile_1H1USnO"};
+
+var NEW_LINE = '\n';
+var SearchInput = function SearchInput(props) {
+  var _props$searchCriterio;
+  var _useState = React.useState(CTRL.EMPTY),
+    value = _useState[0],
+    setValue = _useState[1];
+  var _useState2 = React.useState(CTRL.EMPTY),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
+  var inputRef = React.useRef(null);
+  var onKeyDown = function onKeyDown(e) {
+    if (e.keyCode === KEY_CODE.ENTER) {
+      e.preventDefault();
+      onSubmit();
+    }
+  };
+  var onSubmit = function onSubmit() {
+    if (value && props.onSubmit) {
+      props.onSubmit(value);
+      resetValue();
+    }
+  };
+  var onCancel = function onCancel() {
+    resetValue();
+    props.onCancel();
+  };
+  var onChange = function onChange(e) {
+    setValue(e.target.value);
+    if (props.onChange) {
+      props.onChange(e.target.value);
+    }
+  };
+  var onBlur = function onBlur() {
+    if (props.onBlur) {
+      props.onBlur();
+    }
+    setState(CTRL.EMPTY);
+  };
+  var onFocus = function onFocus() {
+    if (props.onFocus) {
+      props.onFocus();
+    }
+    setState('vitro-focus');
+  };
+  var resetValue = function resetValue() {
+    if (inputRef.current) {
+      inputRef.current.value = CTRL.EMPTY;
+    }
+    setValue(CTRL.EMPTY);
+  };
+  var getTextValue = function getTextValue(value) {
+    var valueArray = value.valueList.map(function (x) {
+      if (x && typeof x === 'object') {
+        if (x instanceof Date) {
+          return x.toLocaleString().split(CTRL.COMMA)[0];
+        }
+        return x.name || x.fieldValueMap.name;
+      } else {
+        return x;
+      }
+    });
+    var text = [value.name, valueArray.join(CTRL.COMMA + CTRL.SPACE)].join(CTRL.COLON + CTRL.SPACE);
+    return text;
+  };
+  var onRemoveValue = function onRemoveValue(valueList) {
+    if (props.onRemoveValue && props.searchCriterionList) {
+      var newList = props.searchCriterionList;
+      var _loop = function _loop() {
+        var value = _step.value;
+        newList = newList.filter(function (x) {
+          return x.internalName !== value.internalName;
+        });
+      };
+      for (var _iterator = _createForOfIteratorHelperLoose(valueList), _step; !(_step = _iterator()).done;) {
+        _loop();
+      }
+      props.onRemoveValue(newList);
+    }
+  };
+  var getTextValueList = function getTextValueList(valueList) {
+    var list = valueList.map(function (x) {
+      return getTextValue(x);
+    });
+    return list.join(NEW_LINE);
+  };
+  var getClassName = function getClassName() {
+    var classList = [props.isMobileView ? styles$1h['vitro-search-input-mobile'] : styles$1h['vitro-search-input'], props.className || CTRL.EMPTY, state];
+    if (props.isActive) {
+      classList.push('vitro-active');
+    }
+    return classList.join(CTRL.SPACE);
+  };
+  var getSelectedValueList = function getSelectedValueList(valueList) {
+    var firstValue = valueList[0];
+    var list = valueList.slice(1);
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(FlexBox, {
+      className: styles$1h['vitro-search-value']
+    }, React__default.createElement("span", null, getTextValue(firstValue)), React__default.createElement(ImageButton, {
+      onClick: function onClick() {
+        return onRemoveValue([firstValue]);
+      },
+      className: styles$1h['vitro-button-cancel']
+    })), list.length >= 1 ? React__default.createElement(Tooltip$1, {
+      text: getTextValueList(list),
+      placement: PLACEMENT.BOTTOM
+    }, React__default.createElement("div", null, React__default.createElement(FlexBox, {
+      className: styles$1h['vitro-search-value']
+    }, localeService.create(LOCALE$9.VALUE_COUNT, {
+      count: list.length
+    }), React__default.createElement(ImageButton, {
+      onClick: function onClick() {
+        return onRemoveValue(list);
+      },
+      className: styles$1h['vitro-button-cancel']
+    })))) : null);
+  };
+  return React__default.createElement(FlexBox, {
+    className: getClassName()
+  }, React__default.createElement(ImageButton, {
+    className: 'vitro-button-search',
+    onClick: props.onSearchClick ? props.onSearchClick : onSubmit
+  }), !props.isMobileView && React__default.createElement(React__default.Fragment, null, React__default.createElement(FlexBox, {
+    className: styles$1h['vitro-search-value-list']
+  }, props.searchCriterionList && props.searchCriterionList.length ? getSelectedValueList(props.searchCriterionList) : React__default.createElement("input", {
+    type: 'text',
+    ref: inputRef,
+    onKeyDown: onKeyDown,
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    placeholder: !props.isActive ? props.placeholder || localeService.create(LOCALE$9.PLACEHOLDER) : CTRL.EMPTY
+  })), props.children, value || (_props$searchCriterio = props.searchCriterionList) !== null && _props$searchCriterio !== void 0 && _props$searchCriterio.length || props.isActive ? React__default.createElement(ImageButton, {
+    onClick: onCancel,
+    className: styles$1h['vitro-button-cancel']
+  }) : null));
+};
+
 var LOCALE$a;
 (function (LOCALE) {
   LOCALE["EMPTY_PLACEHOLDER"] = "app.common.searchValueList.emptyPlaceholder";
 })(LOCALE$a || (LOCALE$a = {}));
 
-var styles$1f = {"vitro-search-input-container":"_search-value-list_vitro-search-input-container_167CEqB","vitro-empty-placeholder":"_search-value-list_vitro-empty-placeholder_2f08lDK"};
+var styles$1i = {"vitro-search-input-container":"_search-value-list_vitro-search-input-container_167CEqB","vitro-empty-placeholder":"_search-value-list_vitro-empty-placeholder_2f08lDK"};
 
 var SearchValueList = function SearchValueList(props) {
   var _useState = React.useState(props.itemList),
@@ -67086,7 +67418,7 @@ var SearchValueList = function SearchValueList(props) {
   return React__default.createElement("div", {
     className: props.className || CTRL.EMPTY
   }, React__default.createElement("div", {
-    className: styles$1f['vitro-search-input-container']
+    className: styles$1i['vitro-search-input-container']
   }, React__default.createElement(SearchInput, {
     onCancel: onSearchCancel,
     onChange: onInputChange,
@@ -67095,11 +67427,11 @@ var SearchValueList = function SearchValueList(props) {
   })), React__default.createElement(ScrollBar, null, props.children, itemList.length ? itemList.map(function (item) {
     return props.valueTemplate(item);
   }) : React__default.createElement("span", {
-    className: styles$1f['vitro-empty-placeholder']
+    className: styles$1i['vitro-empty-placeholder']
   }, props.emptyPlaceHolder || localeService.create(LOCALE$a.EMPTY_PLACEHOLDER))));
 };
 
-var styles$1g = {"vitro-checkbox-list":"_checkbox-list_vitro-checkbox-list_1iZSkkv","vitro-search-value-list":"_checkbox-list_vitro-search-value-list_2i58fRK","vitro-checkbox":"_checkbox-list_vitro-checkbox_1EqsnoQ"};
+var styles$1j = {"vitro-checkbox-list":"_checkbox-list_vitro-checkbox-list_1iZSkkv","vitro-search-value-list":"_checkbox-list_vitro-search-value-list_2i58fRK","vitro-checkbox":"_checkbox-list_vitro-checkbox_1EqsnoQ"};
 
 var CheckboxList = React.forwardRef(function (props, ref) {
   var _useState = React.useState(props.itemList),
@@ -67134,23 +67466,57 @@ var CheckboxList = React.forwardRef(function (props, ref) {
       onChange: function onChange(value, name) {
         return _onChange(value, item.id);
       },
-      className: styles$1g['vitro-checkbox']
+      className: styles$1j['vitro-checkbox']
     });
   };
   var filterValueTemplate = function filterValueTemplate(item) {
     return item.name;
   };
   return React__default.createElement("div", {
-    className: styles$1g['vitro-checkbox-list'],
+    className: styles$1j['vitro-checkbox-list'],
     ref: ref
   }, React__default.createElement(SearchValueList, {
     itemList: props.itemList,
     valueTemplate: getCheckbox,
     filterValueTemplate: filterValueTemplate,
-    className: styles$1g['vitro-search-value-list']
+    className: styles$1j['vitro-search-value-list']
   }));
 });
 
+var styles$1k = {"vitro-search":"_search_vitro-search_QkJksC_","vitro-active":"_search_vitro-active_1HhQOCR","vitro-settings-dialog":"_search_vitro-settings-dialog_1_c5bIg","vitro-filter-container":"_search_vitro-filter-container_3p6D0hI","vitro-filter":"_search_vitro-filter_2n-Y-mS","vitro-field-iterator":"_search_vitro-field-iterator_2xhcd1b","vitro-add-field":"_search_vitro-add-field_2hHt1Z2","vitro-add-field-button":"_search_vitro-add-field-button_30hdXYn","vitro-add-field-dialog":"_search_vitro-add-field-dialog_3gC92SF","vitro-button-group":"_search_vitro-button-group_1VuZJdq","vitro-button":"_search_vitro-button_1kaitIg","vitro-button-cancel":"_search_vitro-button-cancel_1M8UkMM","vitro-button-settings":"_search_vitro-button-settings_oJCn__t","vitro-search-mobile":"_search_vitro-search-mobile_XsKRflV","vitro-settings-dialog-mobile":"_search_vitro-settings-dialog-mobile_1no71m6","vitro-settings-dialog-header":"_search_vitro-settings-dialog-header_vID4BE6","vitro-settings-dialog-footer":"_search_vitro-settings-dialog-footer_11fP4FC","vitro-scrollbar":"_search_vitro-scrollbar_3Xg3VXI"};
+
+var AddFieldButton = React.forwardRef(function (props, ref) {
+  var _props$filterContaine;
+  var addFieldButtonRef = React.useRef(null);
+  var addFieldListRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return {
+      addFieldButtonRef: addFieldButtonRef.current,
+      addFieldListRef: addFieldListRef.current
+    };
+  });
+  return React__default.createElement("div", {
+    className: styles$1k['vitro-add-field']
+  }, React__default.createElement(Button$2, {
+    ref: addFieldButtonRef,
+    text: props.labelAddField,
+    onClick: props.onAddField,
+    className: styles$1k['vitro-add-field-button']
+  }), React__default.createElement(Overlay$2, {
+    isShow: props.isShowAddFieldDialog,
+    isFlip: props.isMobileView,
+    target: addFieldButtonRef.current,
+    container: (_props$filterContaine = props.filterContainerRef) !== null && _props$filterContaine !== void 0 && _props$filterContaine.current ? props.filterContainerRef.current : undefined,
+    placement: props.isMobileView ? exports.PLACEMENT.BOTTOM + CTRL.DASH + exports.PLACEMENT.START : exports.PLACEMENT.RIGHT + CTRL.DASH + exports.PLACEMENT.START,
+    className: styles$1k['vitro-add-field-dialog']
+  }, React__default.createElement(CheckboxList, {
+    ref: addFieldListRef,
+    itemList: props.checkboxFieldList,
+    onChange: props.onFieldListChange,
+    isAllSelected: props.isAllFieldsVisible
+  })));
+});
+
 var CONDITION_CONTAINS = 11;
 var Search = function Search(props) {
   var _useState = React.useState(false),
@@ -67177,8 +67543,7 @@ var Search = function Search(props) {
   var _useState8 = React.useState(CTRL.EMPTY),
     state = _useState8[0],
     setState = _useState8[1];
-  var addFieldListRef = React.useRef(null);
-  var addFieldButtonRef = React.useRef(null);
+  var addFieldComponentRef = React.useRef(null);
   var searchRef = React.useRef(null);
   var filterContainerRef = React.useRef(null);
   React.useEffect(function () {
@@ -67209,7 +67574,7 @@ var Search = function Search(props) {
   }, [filterFieldList]);
   React.useEffect(function () {
     if (selectedSearchCriterionList.length) {
-      setState(styles$1e['vitro-active']);
+      setState(styles$1k['vitro-active']);
     }
   }, [selectedSearchCriterionList]);
   React.useEffect(function () {
@@ -67351,14 +67716,15 @@ var Search = function Search(props) {
     }
   };
   var onBlurAddFieldDialog = function onBlurAddFieldDialog(e) {
-    var list = addFieldListRef.current;
-    var button = addFieldButtonRef.current;
+    var _addFieldComponentRef, _addFieldComponentRef2;
+    var list = (_addFieldComponentRef = addFieldComponentRef.current) === null || _addFieldComponentRef === void 0 ? void 0 : _addFieldComponentRef.addFieldListRef;
+    var button = (_addFieldComponentRef2 = addFieldComponentRef.current) === null || _addFieldComponentRef2 === void 0 ? void 0 : _addFieldComponentRef2.addFieldButtonRef;
     if (list && !list.contains(e.target) && button && !button.contains(e.target)) {
       setIsShowAddFieldDialog(false);
     }
   };
   var onFocusInput = function onFocusInput() {
-    setState(styles$1e['vitro-active']);
+    setState(styles$1k['vitro-active']);
   };
   var onRemoveValue = function onRemoveValue(valueList) {
     setSearchCriterionList(valueList);
@@ -67368,9 +67734,9 @@ var Search = function Search(props) {
     closeSettings();
   };
   var content = React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$1e['vitro-filter-container'],
+    className: styles$1k['vitro-filter-container'],
     ref: filterContainerRef
-  }, React__default.createElement(Filter, {
+  }, React__default.createElement(CriterionFieldIterator, {
     fieldList: filterFieldList,
     valueList: selectedSearchCriterionList,
     onChange: onFilterChange,
@@ -67380,39 +67746,30 @@ var Search = function Search(props) {
     getConditionList: props.getConditionList,
     getDefaultCondition: props.getDefaultCondition,
     isMobileView: props.isMobileView
-  }), isShowAddFieldButton && React__default.createElement("div", {
-    className: styles$1e['vitro-add-field']
-  }, React__default.createElement(Button$2, {
-    ref: addFieldButtonRef,
-    text: props.labelAddField,
-    onClick: onAddField,
-    className: styles$1e['vitro-add-field-button']
-  }), React__default.createElement(Overlay$2, {
-    isShow: isShowAddFieldDialog,
-    isFlip: props.isMobileView,
-    target: addFieldButtonRef.current,
-    container: filterContainerRef.current,
-    placement: props.isMobileView ? exports.PLACEMENT.BOTTOM + CTRL.DASH + exports.PLACEMENT.START : exports.PLACEMENT.RIGHT + CTRL.DASH + exports.PLACEMENT.START,
-    className: styles$1e['vitro-add-field-dialog']
-  }, React__default.createElement(CheckboxList, {
-    ref: addFieldListRef,
-    itemList: checkboxFieldList,
-    onChange: onFieldListChange,
-    isAllSelected: props.isAllFieldsVisible
-  }))), !props.isMobileView && React__default.createElement(ButtonGroup, {
-    className: styles$1e['vitro-button-group']
+  }), isShowAddFieldButton && React__default.createElement(AddFieldButton, {
+    ref: addFieldComponentRef,
+    labelAddField: props.labelAddField,
+    onAddField: onAddField,
+    isShowAddFieldDialog: isShowAddFieldDialog,
+    isMobileView: props.isMobileView,
+    checkboxFieldList: checkboxFieldList,
+    onFieldListChange: onFieldListChange,
+    isAllFieldsVisible: props.isAllFieldsVisible,
+    filterContainerRef: filterContainerRef
+  }), !props.isMobileView && React__default.createElement(ButtonGroup, {
+    className: styles$1k['vitro-button-group']
   }, React__default.createElement(Button$2, {
     text: props.labelCancel,
     onClick: onCancel,
-    className: styles$1e['vitro-button-cancel']
+    className: styles$1k['vitro-button-cancel']
   }), React__default.createElement(Button$2, {
     text: props.labelSearch,
     onClick: onSearch,
-    className: styles$1e['vitro-button']
+    className: styles$1k['vitro-button']
   }))));
   return React__default.createElement("div", {
     ref: searchRef,
-    className: (props.isMobileView || props.isMinifiedInput ? styles$1e['vitro-search-mobile'] : styles$1e['vitro-search']) + CTRL.SPACE + state
+    className: (props.isMobileView || props.isMinifiedInput ? styles$1k['vitro-search-mobile'] : styles$1k['vitro-search']) + CTRL.SPACE + state
   }, React__default.createElement(SearchInput, {
     searchCriterionList: selectedSearchCriterionList,
     onCancel: onCancelSearch,
@@ -67424,10 +67781,10 @@ var Search = function Search(props) {
     onFocus: onFocusInput,
     isActive: state || isShowDialog ? true : false,
     isMobileView: props.isMobileView ? true : props.isMinifiedInput,
-    className: styles$1e['vitro-control']
+    className: styles$1k['vitro-control']
   }, (state || isShowDialog) && React__default.createElement(ImageButton, {
     onClick: onSettingsClick,
-    className: styles$1e['vitro-button-settings'] + (isShowDialog ? CTRL.SPACE + styles$1e['vitro-active'] : CTRL.EMPTY)
+    className: styles$1k['vitro-button-settings'] + (isShowDialog ? CTRL.SPACE + styles$1k['vitro-active'] : CTRL.EMPTY)
   })), isShowDialog && (props.isMobileView ? React__default.createElement(Dialog, {
     title: props.inputPlaceholder || CTRL.EMPTY,
     onClose: closeSettings,
@@ -67435,12 +67792,12 @@ var Search = function Search(props) {
       text: props.labelSearch,
       onClick: onSearch
     }],
-    className: styles$1e['vitro-settings-dialog-mobile'],
-    headerClassName: styles$1e['vitro-settings-dialog-header'],
-    footerClassName: styles$1e['vitro-settings-dialog-footer'],
+    className: styles$1k['vitro-settings-dialog-mobile'],
+    headerClassName: styles$1k['vitro-settings-dialog-header'],
+    footerClassName: styles$1k['vitro-settings-dialog-footer'],
     isDismissible: true
   }, content) : React__default.createElement(FlexBox, {
-    className: styles$1e['vitro-settings-dialog']
+    className: styles$1k['vitro-settings-dialog']
   }, content)));
 };
 
@@ -67485,12 +67842,18 @@ var Splitter = function Splitter(props) {
       resizeObserver.disconnect();
     };
   }, []);
+  var getWidth = function getWidth(value) {
+    if (+value) {
+      return value + CTRL.PERCENT;
+    }
+    return value;
+  };
   return React__default.createElement(ReactSplitter, {
     ref: ref,
     position: props.position || POSITION$1.VERTICAL,
-    primaryPaneMaxWidth: (props.maxWidth ? props.maxWidth : WIDTH.DEFAULT_MAX) + CTRL.PERCENT,
-    primaryPaneMinWidth: (props.minWidth ? props.minWidth : WIDTH.DEFAULT_MIN) + CTRL.PERCENT,
-    primaryPaneWidth: (props.width ? props.width : WIDTH.DEFAULT) + CTRL.PERCENT,
+    primaryPaneMaxWidth: getWidth(props.maxWidth ? props.maxWidth : WIDTH.DEFAULT_MAX),
+    primaryPaneMinWidth: getWidth(props.minWidth ? props.minWidth : WIDTH.DEFAULT_MIN),
+    primaryPaneWidth: getWidth(props.width ? props.width : WIDTH.DEFAULT),
     postPoned: props.isPostPoned,
     maximizedPrimaryPane: props.isMaximizedPrimaryPane,
     minimalizedPrimaryPane: props.isMinimalizedPrimaryPane,
@@ -67500,7 +67863,7 @@ var Splitter = function Splitter(props) {
   }, props.children);
 };
 
-var styles$1h = {"vitro-route-item":"_route-item_vitro-route-item_bBCgBZG","vitro-route-item-body":"_route-item_vitro-route-item-body_1_1fjOZ","vitro-route-item-content":"_route-item_vitro-route-item-content_2CcLogk","vitro-button-collapse":"_route-item_vitro-button-collapse_1kVB5Vo","vitro-button-expand":"_route-item_vitro-button-expand_3IuABa1","vitro-button-hide-comment":"_route-item_vitro-button-hide-comment_2CiY-Ch","vitro-button-show-comment":"_route-item_vitro-button-show-comment_DJt2SLC","vitro-avatar":"_route-item_vitro-avatar_3Dypnmz","vitro-date":"_route-item_vitro-date_3ojnKSb","vitro-route-item-header":"_route-item_vitro-route-item-header_y69bLwZ","vitro-flex":"_route-item_vitro-flex_3ebkqZ9","vitro-comment":"_route-item_vitro-comment_2K7RwrZ","vitro-status-color":"_route-item_vitro-status-color_VgXzXKD"};
+var styles$1l = {"vitro-route-item":"_route-item_vitro-route-item_bBCgBZG","vitro-route-item-body":"_route-item_vitro-route-item-body_1_1fjOZ","vitro-route-item-content":"_route-item_vitro-route-item-content_2CcLogk","vitro-button-collapse":"_route-item_vitro-button-collapse_1kVB5Vo","vitro-button-expand":"_route-item_vitro-button-expand_3IuABa1","vitro-button-hide-comment":"_route-item_vitro-button-hide-comment_2CiY-Ch","vitro-button-show-comment":"_route-item_vitro-button-show-comment_DJt2SLC","vitro-avatar":"_route-item_vitro-avatar_3Dypnmz","vitro-date":"_route-item_vitro-date_3ojnKSb","vitro-route-item-header":"_route-item_vitro-route-item-header_y69bLwZ","vitro-flex":"_route-item_vitro-flex_3ebkqZ9","vitro-comment":"_route-item_vitro-comment_2K7RwrZ","vitro-status-color":"_route-item_vitro-status-color_VgXzXKD"};
 
 var RouteItem = function RouteItem(props) {
   var _useState = React.useState(true),
@@ -67510,42 +67873,42 @@ var RouteItem = function RouteItem(props) {
     isShowComment = _useState2[0],
     setIsShowComment = _useState2[1];
   return React__default.createElement("div", {
-    className: styles$1h['vitro-route-item']
+    className: styles$1l['vitro-route-item']
   }, props.children ? React__default.createElement("button", {
-    className: isExpanded ? styles$1h['vitro-button-collapse'] : styles$1h['vitro-button-expand'],
+    className: isExpanded ? styles$1l['vitro-button-collapse'] : styles$1l['vitro-button-expand'],
     onClick: function onClick() {
       return setIsExpanded(!isExpanded);
     }
   }) : null, React__default.createElement("div", {
-    className: styles$1h['vitro-route-item-content']
+    className: styles$1l['vitro-route-item-content']
   }, props.userName && props.status && React__default.createElement("div", {
-    className: styles$1h['vitro-route-item-header']
+    className: styles$1l['vitro-route-item-header']
   }, React__default.createElement("div", null, React__default.createElement("div", null, React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.userImage,
-    className: styles$1h['vitro-avatar']
+    className: styles$1l['vitro-avatar']
   }), props.userName), React__default.createElement("div", {
-    className: styles$1h['vitro-date']
+    className: styles$1l['vitro-date']
   }, props.date)), React__default.createElement("div", null, React__default.createElement("div", null, props.statusColor && React__default.createElement("div", {
-    className: styles$1h['vitro-status-color'],
+    className: styles$1l['vitro-status-color'],
     style: {
       background: props.statusColor
     }
   }), props.status), React__default.createElement("div", null, React__default.createElement("a", {
     href: props.itemUrl
   }, CTRL.SHARP + props.itemId)))), React__default.createElement("div", {
-    className: styles$1h['vitro-route-item-body']
+    className: styles$1l['vitro-route-item-body']
   }, React__default.createElement("div", {
-    className: styles$1h['vitro-flex']
+    className: styles$1l['vitro-flex']
   }, React__default.createElement("span", null, props.name), props.comment && React__default.createElement("button", {
-    className: isShowComment ? styles$1h['vitro-button-hide-comment'] : styles$1h['vitro-button-show-comment'],
+    className: isShowComment ? styles$1l['vitro-button-hide-comment'] : styles$1l['vitro-button-show-comment'],
     onClick: function onClick() {
       return setIsShowComment(!isShowComment);
     }
   })), isShowComment && props.comment && React__default.createElement("div", {
-    className: styles$1h['vitro-comment']
+    className: styles$1l['vitro-comment']
   }, props.comment)), isExpanded && React__default.createElement("div", {
-    className: styles$1h['vitro-route-item-child']
+    className: styles$1l['vitro-route-item-child']
   }, props.children)));
 };
 
@@ -67653,7 +68016,7 @@ var BimViewer = function BimViewer(props) {
   });
 };
 
-var styles$1i = {"vitro-scroll-view":"_scroll-view_vitro-scroll-view_TXQ8QQh"};
+var styles$1m = {"vitro-scroll-view":"_scroll-view_vitro-scroll-view_TXQ8QQh"};
 
 var COMPONENT_NAME = 'kendoScrollView';
 var CONTENT_HEIGHT = 100;
@@ -67698,27 +68061,27 @@ var ScrollView = function ScrollView(props) {
   };
   return React__default.createElement("div", {
     ref: scrollViewRef,
-    className: styles$1i['vitro-scroll-view'] + CTRL.SPACE + (props.className || CTRL.EMPTY),
+    className: styles$1m['vitro-scroll-view'] + CTRL.SPACE + (props.className || CTRL.EMPTY),
     tabIndex: 0
   }, props.itemList.map(function (item) {
     return React__default.createElement(item.component, item.props);
   }));
 };
 
-var styles$1j = {"vitro-image-container":"_page_vitro-image-container_QEXhGHE"};
+var styles$1n = {"vitro-image-container":"_page_vitro-image-container_QEXhGHE"};
 
 var Page = function Page(props) {
   return React__default.createElement("div", {
-    className: styles$1j['vitro-page'],
+    className: styles$1n['vitro-page'],
     "data-role": "page"
   }, React__default.createElement("div", {
-    className: styles$1j['vitro-image-container']
+    className: styles$1n['vitro-image-container']
   }, React__default.createElement("img", {
     src: props.url
   })));
 };
 
-var styles$1k = {"vitro-image-viewer":"_image-viewer_vitro-image-viewer_19T7Auc","vitro-header":"_image-viewer_vitro-header_1KIbDWk","vitro-button-close":"_image-viewer_vitro-button-close_36TY-iY","vitro-scroll-view":"_image-viewer_vitro-scroll-view_3nuGD7c","vitro-dropdown-button":"_image-viewer_vitro-dropdown-button_2TOT1pw","vitro-pager":"_image-viewer_vitro-pager_1FiaoGR"};
+var styles$1o = {"vitro-image-viewer":"_image-viewer_vitro-image-viewer_19T7Auc","vitro-header":"_image-viewer_vitro-header_1KIbDWk","vitro-button-close":"_image-viewer_vitro-button-close_36TY-iY","vitro-scroll-view":"_image-viewer_vitro-scroll-view_3nuGD7c","vitro-dropdown-button":"_image-viewer_vitro-dropdown-button_2TOT1pw","vitro-pager":"_image-viewer_vitro-pager_1FiaoGR"};
 
 var ImageViewer = React.forwardRef(function (props, ref) {
   var _props$itemList$;
@@ -67776,25 +68139,25 @@ var ImageViewer = React.forwardRef(function (props, ref) {
     }
   };
   return React__default.createElement(React__default.Fragment, null, itemList.length ? React__default.createElement("div", {
-    className: styles$1k['vitro-image-viewer']
+    className: styles$1o['vitro-image-viewer']
   }, React__default.createElement("div", {
-    className: styles$1k['vitro-header']
+    className: styles$1o['vitro-header']
   }, actionList.length ? React__default.createElement(DropdownButton, {
     itemList: actionList,
-    className: styles$1k['vitro-dropdown-button']
+    className: styles$1o['vitro-dropdown-button']
   }) : null, React__default.createElement("button", {
-    className: styles$1k['vitro-button-close'],
+    className: styles$1o['vitro-button-close'],
     onClick: props.onCloseClick
   })), React__default.createElement(ScrollView, {
     itemList: itemList,
     onChange: onChange,
-    className: styles$1k['vitro-scroll-view'],
+    className: styles$1o['vitro-scroll-view'],
     isEnablePager: true,
     activePage: props.activePage
   })) : null);
 });
 
-var styles$1l = {"vitro-page":"_page-layout_vitro-page_GzZ3agH"};
+var styles$1p = {"vitro-page":"_page-layout_vitro-page_GzZ3agH"};
 
 var PageLayout = function PageLayout(props) {
   var getClassName = function getClassName(sidebar) {
@@ -67808,7 +68171,7 @@ var PageLayout = function PageLayout(props) {
     return CTRL.SPACE + classNameArr.join(CTRL.SPACE);
   };
   return React__default.createElement("div", {
-    className: styles$1l['vitro-page'] + getClassName(props.sidebar) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$1p['vitro-page'] + getClassName(props.sidebar) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     id: 'vitro-page'
   }, props.children);
 };
@@ -67823,7 +68186,7 @@ var HeaderConstants = {
     get LOCAL_STORAGE_KEY () { return LOCAL_STORAGE_KEY; }
 };
 
-var styles$1m = {"vitro-header":"_header_vitro-header_ta9aLJn"};
+var styles$1q = {"vitro-header":"_header_vitro-header_ta9aLJn"};
 
 var onChangeSidebarMode = function onChangeSidebarMode() {};
 var Header = function Header(props) {
@@ -67866,44 +68229,44 @@ var Header = function Header(props) {
     }
   }, [props.sidebar]);
   return React__default.createElement("div", {
-    className: styles$1m['vitro-header'],
+    className: styles$1q['vitro-header'],
     id: 'vitro-header',
     ref: ref
   }, props.children);
 };
 
-var styles$1n = {"vitro-nav-bar-sidebar-button":"_header-nav-bar-sidebar-button_vitro-nav-bar-sidebar-button_3IZcIOc"};
+var styles$1r = {"vitro-nav-bar-sidebar-button":"_header-nav-bar-sidebar-button_vitro-nav-bar-sidebar-button_3IZcIOc"};
 
 var SidebarButton = function SidebarButton(props) {
   return React__default.createElement("button", {
-    className: styles$1n['vitro-nav-bar-sidebar-button'],
+    className: styles$1r['vitro-nav-bar-sidebar-button'],
     onClick: props.onClick
   });
 };
 
-var styles$1o = {"vitro-nav-bar":"_header-nav-bar_vitro-nav-bar_EuyFIk8"};
+var styles$1s = {"vitro-nav-bar":"_header-nav-bar_vitro-nav-bar_EuyFIk8"};
 
 var HeaderNavBar = function HeaderNavBar(props) {
   return React__default.createElement("nav", {
-    className: styles$1o['vitro-nav-bar'] + CTRL.SPACE + ['navbar', 'navbar-expand-lg', 'navbar-light'].join(CTRL.SPACE)
+    className: styles$1s['vitro-nav-bar'] + CTRL.SPACE + ['navbar', 'navbar-expand-lg', 'navbar-light'].join(CTRL.SPACE)
   }, React__default.createElement(SidebarButton, {
     onClick: onChangeSidebarMode
   }), props.children);
 };
 
-var styles$1p = {"vitro-nav-service":"_header-nav-service_vitro-nav-service_1-i4GOh"};
+var styles$1t = {"vitro-nav-service":"_header-nav-service_vitro-nav-service_1-i4GOh"};
 
 var logoStyles = {"vitro-customer-logo":"_header-customer-logo_vitro-customer-logo_2htY4zG"};
 
 var HeaderNavService = function HeaderNavService(props) {
   return React__default.createElement("div", {
-    className: styles$1p['vitro-nav-service']
+    className: styles$1t['vitro-nav-service']
   }, React__default.createElement("div", {
     className: logoStyles['vitro-customer-logo']
   }), props.children);
 };
 
-var styles$1q = {"vitro-product-title":"_product-title_vitro-product-title_2gZcA5j"};
+var styles$1u = {"vitro-product-title":"_product-title_vitro-product-title_2gZcA5j"};
 
 var ProductTitle = function ProductTitle(props) {
   var content = React__default.createElement(React__default.Fragment, null, React__default.createElement(Image, {
@@ -67925,22 +68288,22 @@ var ProductTitle = function ProductTitle(props) {
   if (props.href) {
     return React__default.createElement("a", {
       href: props.href,
-      className: styles$1q['vitro-product-title'],
+      className: styles$1u['vitro-product-title'],
       title: props.imageCaption
     }, content);
   }
   return React__default.createElement("a", {
     onClick: onClick,
-    className: styles$1q['vitro-product-title'],
+    className: styles$1u['vitro-product-title'],
     title: props.imageCaption
   }, content);
 };
 
-var styles$1r = {"vitro-right":"_right-align-control-group_vitro-right_2vnd6R7"};
+var styles$1v = {"vitro-right":"_right-align-control-group_vitro-right_2vnd6R7"};
 
 var RightAlignControlGroup = function RightAlignControlGroup(props) {
   return React__default.createElement("div", {
-    className: styles$1r['vitro-right']
+    className: styles$1v['vitro-right']
   }, props.children);
 };
 
@@ -67950,32 +68313,32 @@ var LeftAlignControlGroup = function LeftAlignControlGroup(props) {
   }, props.children);
 };
 
-var styles$1s = {"vitro-center":"_center-align-control-group_vitro-center_3SHmVN-"};
+var styles$1w = {"vitro-center":"_center-align-control-group_vitro-center_3SHmVN-"};
 
 var CenterAlignControlGroup = function CenterAlignControlGroup(props) {
   return React__default.createElement("div", {
-    className: styles$1s['vitro-center']
+    className: styles$1w['vitro-center']
   }, props.children);
 };
 
-var styles$1t = {"vitro-main":"_main_vitro-main_Kk2JMBF"};
+var styles$1x = {"vitro-main":"_main_vitro-main_Kk2JMBF"};
 
 var Main = function Main(props) {
   return React__default.createElement("div", {
-    className: styles$1t['vitro-main'],
+    className: styles$1x['vitro-main'],
     id: 'vitro-main'
   }, props.children);
 };
 
-var styles$1u = {"vitro-table-view-detail":"_table-view-detail_vitro-table-view-detail_zxwp4XX"};
+var styles$1y = {"vitro-table-view-detail":"_table-view-detail_vitro-table-view-detail_zxwp4XX"};
 
 var TableViewDetail = function TableViewDetail(props) {
   return React__default.createElement("div", {
-    className: styles$1u['vitro-table-view-detail']
+    className: styles$1y['vitro-table-view-detail']
   }, props.children);
 };
 
-var styles$1v = {"vitro-control":"_radio_vitro-control_1pRRp6K","vitro-radio-content":"_radio_vitro-radio-content_2iXhEPK","vitro-disabled":"_radio_vitro-disabled_2JSpn9-","vitro-label":"_radio_vitro-label_21dXFJN","vitro-left-label":"_radio_vitro-left-label_3BbOjIR"};
+var styles$1z = {"vitro-control":"_radio_vitro-control_1pRRp6K","vitro-radio-content":"_radio_vitro-radio-content_2iXhEPK","vitro-disabled":"_radio_vitro-disabled_2JSpn9-","vitro-label":"_radio_vitro-label_21dXFJN","vitro-left-label":"_radio_vitro-left-label_3BbOjIR"};
 
 var Radio = React.forwardRef(function (props, ref) {
   var radioRef = React.useRef(null);
@@ -67999,14 +68362,14 @@ var Radio = React.forwardRef(function (props, ref) {
       props.onChange(props.value, e);
     }
   };
-  var className = styles$1v['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$1v['vitro-left-label'] : CTRL.EMPTY) + CTRL.SPACE + (props.isDisabled ? styles$1v['vitro-disabled'] : CTRL.EMPTY) + CTRL.SPACE + (props.className || CTRL.EMPTY);
+  var className = styles$1z['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$1z['vitro-left-label'] : CTRL.EMPTY) + CTRL.SPACE + (props.isDisabled ? styles$1z['vitro-disabled'] : CTRL.EMPTY) + CTRL.SPACE + (props.className || CTRL.EMPTY);
   return React__default.createElement("div", {
     className: className
   }, props.labelPosition === POSITION.LEFT && React__default.createElement(Label, {
     text: props.label,
-    className: styles$1v['vitro-label']
+    className: styles$1z['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$1v['vitro-radio-content']
+    className: styles$1z['vitro-radio-content']
   }, React__default.createElement("input", {
     ref: radioRef,
     type: 'radio',
@@ -68018,7 +68381,7 @@ var Radio = React.forwardRef(function (props, ref) {
     onChange: onChange
   }), props.labelPosition !== POSITION.LEFT && React__default.createElement(Label, {
     text: props.label,
-    className: styles$1v['vitro-label']
+    className: styles$1z['vitro-label']
   })));
 });
 
@@ -68032,7 +68395,7 @@ var TARGET$2 = function TARGET() {};
 TARGET$2.BLANK = '_blank';
 TARGET$2.SELF = '_self';
 
-var styles$1w = {"vitro-link-input":"_link-input_vitro-link-input_1FBo8kO","vitro-edit-mode":"_link-input_vitro-edit-mode_2HhUoeO","vitro-read-only":"_link-input_vitro-read-only_AG9_cYJ","vitro-control":"_link-input_vitro-control_1MGkxWi","vitro-edit-button":"_link-input_vitro-edit-button_1PMQnWv"};
+var styles$1A = {"vitro-link-input":"_link-input_vitro-link-input_1FBo8kO","vitro-edit-mode":"_link-input_vitro-edit-mode_2HhUoeO","vitro-read-only":"_link-input_vitro-read-only_AG9_cYJ","vitro-control":"_link-input_vitro-control_1MGkxWi","vitro-edit-button":"_link-input_vitro-edit-button_1PMQnWv"};
 
 var LinkInput = React.forwardRef(function (props, ref) {
   var _useState = React.useState(false),
@@ -68102,7 +68465,7 @@ var LinkInput = React.forwardRef(function (props, ref) {
       link.remove();
     }
   };
-  var className = styles$1w['vitro-link-input'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY) + (props.isReadOnly ? CTRL.SPACE + styles$1w['vitro-read-only'] : CTRL.EMPTY) + (isEditMode ? CTRL.SPACE + styles$1w['vitro-edit-mode'] : CTRL.EMPTY);
+  var className = styles$1A['vitro-link-input'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY) + (props.isReadOnly ? CTRL.SPACE + styles$1A['vitro-read-only'] : CTRL.EMPTY) + (isEditMode ? CTRL.SPACE + styles$1A['vitro-edit-mode'] : CTRL.EMPTY);
   return React__default.createElement("div", {
     className: className
   }, React__default.createElement(Tooltip$1, {
@@ -68121,11 +68484,11 @@ var LinkInput = React.forwardRef(function (props, ref) {
     isRequired: props.isRequired,
     isError: props.isError,
     isReadOnly: props.isReadOnly ? true : !isEditMode,
-    className: styles$1w['vitro-control']
+    className: styles$1A['vitro-control']
   }))), !props.isReadOnly && !isEditMode && React__default.createElement(ImageButton, {
     onClick: onClickEditButton,
     tooltipText: localeService.create(LOCALE$b.TOOLTIP_EDIT),
-    className: styles$1w['vitro-edit-button']
+    className: styles$1A['vitro-edit-button']
   }));
 });
 
@@ -68142,7 +68505,7 @@ var LOCALE$c;
   LOCALE["SETTING_SYSTEM_INFO"] = "systemInformation";
 })(LOCALE$c || (LOCALE$c = {}));
 
-var styles$1x = {"vitro-system-exception-dialog":"_system-exception-dialog_vitro-system-exception-dialog_2UVdbuB","vitro-image":"_system-exception-dialog_vitro-image_XG5PD8h","vitro-exception":"_system-exception-dialog_vitro-exception_2bLGF01","vitro-exception-message":"_system-exception-dialog_vitro-exception-message_2S8ZwQP","vitro-label":"_system-exception-dialog_vitro-label_1Nbb_It","vitro-input":"_system-exception-dialog_vitro-input_262484M","vitro-flex":"_system-exception-dialog_vitro-flex_EHka5VC","vitro-settings-list":"_system-exception-dialog_vitro-settings-list_6N3QiPa","vitro-checkbox":"_system-exception-dialog_vitro-checkbox_354NjHR"};
+var styles$1B = {"vitro-system-exception-dialog":"_system-exception-dialog_vitro-system-exception-dialog_2UVdbuB","vitro-image":"_system-exception-dialog_vitro-image_XG5PD8h","vitro-exception":"_system-exception-dialog_vitro-exception_2bLGF01","vitro-exception-message":"_system-exception-dialog_vitro-exception-message_2S8ZwQP","vitro-label":"_system-exception-dialog_vitro-label_1Nbb_It","vitro-input":"_system-exception-dialog_vitro-input_262484M","vitro-flex":"_system-exception-dialog_vitro-flex_EHka5VC","vitro-settings-list":"_system-exception-dialog_vitro-settings-list_6N3QiPa","vitro-checkbox":"_system-exception-dialog_vitro-checkbox_354NjHR"};
 
 var settingsList = [LOCALE$c.SETTING_SCREENSHOT, LOCALE$c.SETTING_EXCEPTION_TEXT, LOCALE$c.SETTING_USER_NAME, LOCALE$c.SETTING_SYSTEM_INFO];
 var SystemExceptionDialog = function SystemExceptionDialog(props) {
@@ -68192,52 +68555,52 @@ var SystemExceptionDialog = function SystemExceptionDialog(props) {
     text: props.labelConfirm || localeService.create(LOCALE$c.ACTION_SEND)
   }];
   var hiddenContent = React__default.createElement("div", {
-    className: styles$1x['vitro-settings-list']
+    className: styles$1B['vitro-settings-list']
   }, settingsList.map(function (name, index) {
     return React__default.createElement("div", {
       key: index,
-      className: styles$1x['vitro-flex']
+      className: styles$1B['vitro-flex']
     }, React__default.createElement(Checkbox, {
       label: CTRL.EMPTY,
       name: name,
       value: true,
       onChange: onChangeSetting,
-      className: styles$1x['vitro-checkbox']
+      className: styles$1B['vitro-checkbox']
     }), getCheckboxLabel(name));
   }));
   return React__default.createElement(Dialog, {
     title: localeService.create(LOCALE$c.TITLE),
     subtitle: isMobileView ? CTRL.EMPTY : localeService.create(LOCALE$c.SUBTITLE),
     image: React__default.createElement("div", {
-      className: styles$1x['vitro-image']
+      className: styles$1B['vitro-image']
     }),
     onClose: props.onCancel,
     buttonList: buttonList,
     labelClose: props.labelClose,
-    className: styles$1x['vitro-system-exception-dialog'],
+    className: styles$1B['vitro-system-exception-dialog'],
     hiddenContent: hiddenContent,
     zIndex: props.zIndex,
     isDismissible: true
   }, React__default.createElement(DialogContent, null, isMobileView && React__default.createElement(Label, {
     text: localeService.create(LOCALE$c.SUBTITLE),
-    className: styles$1x['vitro-label']
+    className: styles$1B['vitro-label']
   }), React__default.createElement(Input, {
     ref: inputRef,
-    className: styles$1x['vitro-input'],
+    className: styles$1B['vitro-input'],
     isMultiline: true
   }), props.message && React__default.createElement("div", {
-    className: styles$1x['vitro-exception']
+    className: styles$1B['vitro-exception']
   }, React__default.createElement(ScrollBar, null, React__default.createElement("div", {
     onCut: blockAction,
     onPaste: blockAction,
     onBeforeInput: blockAction,
     spellCheck: false,
     contentEditable: true,
-    className: styles$1x['vitro-exception-message']
+    className: styles$1B['vitro-exception-message']
   }, props.message)))));
 };
 
-var styles$1y = {"vitro-star-button":"_star-button_vitro-star-button_1_mQ_Gq","vitro-hidden":"_star-button_vitro-hidden_oRKUkzt","vitro-active":"_star-button_vitro-active_2UV6u5C"};
+var styles$1C = {"vitro-star-button":"_star-button_vitro-star-button_1_mQ_Gq","vitro-hidden":"_star-button_vitro-hidden_oRKUkzt","vitro-active":"_star-button_vitro-active_2UV6u5C"};
 
 var StarButton = function StarButton(props) {
   var _useState = React.useState(props.isActive || false),
@@ -68254,11 +68617,11 @@ var StarButton = function StarButton(props) {
   };
   return React__default.createElement("button", {
     onClick: onClick,
-    className: styles$1y['vitro-star-button'] + (isActive ? CTRL.SPACE + styles$1y['vitro-active'] : CTRL.EMPTY) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$1C['vitro-star-button'] + (isActive ? CTRL.SPACE + styles$1C['vitro-active'] : CTRL.EMPTY) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   });
 };
 
-var styles$1z = {"vitro-item":"_site-item_vitro-item_1eSpRGl","vitro-active":"_site-item_vitro-active_1d0nDLb","vitro-name":"_site-item_vitro-name_141-LTn","vitro-image":"_site-item_vitro-image_3wrW9q4","vitro-default-image":"_site-item_vitro-default-image_fcWWNwv","vitro-hidden":"_site-item_vitro-hidden_d6n2ocz","vitro-mobile-view":"_site-item_vitro-mobile-view_3bXuBr6"};
+var styles$1D = {"vitro-item":"_site-item_vitro-item_1eSpRGl","vitro-active":"_site-item_vitro-active_1d0nDLb","vitro-name":"_site-item_vitro-name_141-LTn","vitro-image":"_site-item_vitro-image_3wrW9q4","vitro-default-image":"_site-item_vitro-default-image_fcWWNwv","vitro-hidden":"_site-item_vitro-hidden_d6n2ocz","vitro-mobile-view":"_site-item_vitro-mobile-view_3bXuBr6"};
 
 var SiteItem = function SiteItem(props) {
   var _useState = React.useState(props.isStarActive || false),
@@ -68284,7 +68647,7 @@ var SiteItem = function SiteItem(props) {
       props.onMouseDown(e);
     }
   };
-  var className = [styles$1z['vitro-item'], props.className || CTRL.EMPTY, props.isActive ? styles$1z['vitro-active'] : CTRL.EMPTY, props.isMobileView && styles$1z['vitro-mobile-view']].join(CTRL.SPACE);
+  var className = [styles$1D['vitro-item'], props.className || CTRL.EMPTY, props.isActive ? styles$1D['vitro-active'] : CTRL.EMPTY, props.isMobileView && styles$1D['vitro-mobile-view']].join(CTRL.SPACE);
   return React__default.createElement(FlexBox, {
     onClick: props.onClick,
     onMouseDown: onMouseDown,
@@ -68293,19 +68656,19 @@ var SiteItem = function SiteItem(props) {
     className: className
   }, props.imageUrl ? React__default.createElement(Image, {
     defaultUrl: props.imageUrl,
-    className: styles$1z['vitro-image']
+    className: styles$1D['vitro-image']
   }) : React__default.createElement("div", {
-    className: styles$1z['vitro-default-image']
+    className: styles$1D['vitro-default-image']
   }), React__default.createElement("div", {
-    className: styles$1z['vitro-name']
+    className: styles$1D['vitro-name']
   }, props.name), props.onStar && React__default.createElement(StarButton, {
     onChange: props.onStar,
     isActive: props.isStarActive,
-    className: isShowStar || props.isStarActive ? CTRL.EMPTY : styles$1z['vitro-hidden']
+    className: isShowStar || props.isStarActive ? CTRL.EMPTY : styles$1D['vitro-hidden']
   }));
 };
 
-var styles$1A = {"vitro-site-select":"_site-select_vitro-site-select_2irDOFZ","vitro-flex":"_site-select_vitro-flex_15EJnju","vitro-expand":"_site-select_vitro-expand_KKfRtc8","vitro-collapse":"_site-select_vitro-collapse_B0ZjAm-","vitro-site-list":"_site-select_vitro-site-list_1Yt4nLj","vitro-title":"_site-select_vitro-title_2vfT7F5","vitro-search-input":"_site-select_vitro-search-input_UMmv9PP","vitro-root-item":"_site-select_vitro-root-item_f1rGcQ4","vitro-slide-up-panel":"_site-select_vitro-slide-up-panel_U3Xn-UQ","vitro-search-value-list":"_site-select_vitro-search-value-list_3XlFSA6"};
+var styles$1E = {"vitro-site-select":"_site-select_vitro-site-select_2irDOFZ","vitro-flex":"_site-select_vitro-flex_15EJnju","vitro-expand":"_site-select_vitro-expand_KKfRtc8","vitro-collapse":"_site-select_vitro-collapse_B0ZjAm-","vitro-site-list":"_site-select_vitro-site-list_1Yt4nLj","vitro-title":"_site-select_vitro-title_2vfT7F5","vitro-search-input":"_site-select_vitro-search-input_UMmv9PP","vitro-root-item":"_site-select_vitro-root-item_f1rGcQ4","vitro-slide-up-panel":"_site-select_vitro-slide-up-panel_U3Xn-UQ","vitro-search-value-list":"_site-select_vitro-search-value-list_3XlFSA6"};
 
 var SiteSelect = function SiteSelect(props) {
   var _useState = React.useState(props.itemList),
@@ -68408,8 +68771,8 @@ var SiteSelect = function SiteSelect(props) {
     itemList: visibleItemList,
     valueTemplate: getItem,
     filterValueTemplate: filterValueTemplate,
-    className: styles$1A['vitro-search-value-list'],
-    inputClassName: styles$1A['vitro-search-input']
+    className: styles$1E['vitro-search-value-list'],
+    inputClassName: styles$1E['vitro-search-input']
   }, React__default.createElement(SiteItem, Object.assign({}, props.rootItem, {
     isMobileView: isMobileView,
     onClick: function onClick() {
@@ -68418,49 +68781,49 @@ var SiteSelect = function SiteSelect(props) {
     onMouseDown: function onMouseDown(e) {
       return onItemMouseDown(props.rootItem, e);
     },
-    className: styles$1A['vitro-root-item']
+    className: styles$1E['vitro-root-item']
   })), React__default.createElement(FlexBox, {
-    className: styles$1A['vitro-title']
+    className: styles$1E['vitro-title']
   }, props.title, props.onStarChange && React__default.createElement(StarButton, {
     onChange: filterStarActive
   })));
   return React__default.createElement("div", {
-    className: styles$1A['vitro-site-select']
+    className: styles$1E['vitro-site-select']
   }, React__default.createElement(FlexBox, {
-    className: styles$1A['vitro-flex'],
+    className: styles$1E['vitro-flex'],
     ref: flexBoxRef
   }, React__default.createElement("h2", {
     onClick: onClick
   }, props.activeItem.name), React__default.createElement(ImageButton, {
-    className: isExpanded ? styles$1A['vitro-collapse'] : styles$1A['vitro-expand'],
+    className: isExpanded ? styles$1E['vitro-collapse'] : styles$1E['vitro-expand'],
     onClick: onClick
   })), isMobileView && React__default.createElement(SlideUpPanel, {
-    className: styles$1A['vitro-slide-up-panel'],
+    className: styles$1E['vitro-slide-up-panel'],
     isShow: isExpanded,
     onClose: function onClose() {
       return setIsExpanded(false);
     }
   }, content), !isMobileView && isExpanded && React__default.createElement("div", {
-    className: styles$1A['vitro-site-list'],
+    className: styles$1E['vitro-site-list'],
     ref: listRef
   }, content));
 };
 
-var styles$1B = {"vitro-bottom":"_bottom-align-control-group_vitro-bottom_3-a5nWD"};
+var styles$1F = {"vitro-bottom":"_bottom-align-control-group_vitro-bottom_3-a5nWD"};
 
 var BottomAlignControlGroup = function BottomAlignControlGroup(props) {
   return React__default.createElement("div", {
-    className: styles$1B['vitro-bottom']
+    className: styles$1F['vitro-bottom']
   }, props.children);
 };
 
-var styles$1C = {"vitro-linear-progress":"_linear-progress_vitro-linear-progress_1i4VVyb","vitro-bar":"_linear-progress_vitro-bar_2rwmbp3","progress":"_linear-progress_progress_11DTdlB"};
+var styles$1G = {"vitro-linear-progress":"_linear-progress_vitro-linear-progress_1i4VVyb","vitro-bar":"_linear-progress_vitro-bar_2rwmbp3","progress":"_linear-progress_progress_11DTdlB"};
 
 var LinearProgress = function LinearProgress(props) {
   return React__default.createElement("div", {
-    className: styles$1C['vitro-linear-progress'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$1G['vitro-linear-progress'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, React__default.createElement("div", {
-    className: styles$1C['vitro-bar']
+    className: styles$1G['vitro-bar']
   }));
 };
 
@@ -82810,7 +83173,7 @@ var Thumbnail = function Thumbnail(props) {
 
 var w$a = window;
 var CSS_CLASS_SIDEBAR_CONTENT$1 = 'sidebar-content';
-var CSS_CLASS_ACTIVE$1 = 'vitro-active';
+var CSS_CLASS_ACTIVE$2 = 'vitro-active';
 var CSS_CLASS_ISSUE_TILE$1 = 'vitro-issue-tile';
 var CSS_CLASS_ISSUE_LIST = 'vitro-issue-list';
 var ID_FILE_VERSION_SELECT$2 = 'fileVersionSelect';
@@ -82848,7 +83211,7 @@ var Viewer$2 = function Viewer(props) {
   var _initIssueList = function _initIssueList(context, isUpdate) {
     var sidebar = document.getElementsByClassName(CSS_CLASS_SIDEBAR_CONTENT$1)[0];
     if (sidebar) {
-      $(CTRL.DOT + CSS_CLASS_ISSUE_LIST).children().removeClass(CSS_CLASS_ACTIVE$1);
+      $(CTRL.DOT + CSS_CLASS_ISSUE_LIST).children().removeClass(CSS_CLASS_ACTIVE$2);
       if (context.issueList && !isUpdate) {
         renderIssueList(context, context.issueList, sidebar);
       } else {
@@ -82889,9 +83252,9 @@ var Viewer$2 = function Viewer(props) {
     }
   };
   var selectIssue = function selectIssue(id, isScrollIntoView) {
-    $(CTRL.DOT + CSS_CLASS_ISSUE_LIST).children().removeClass(CSS_CLASS_ACTIVE$1);
+    $(CTRL.DOT + CSS_CLASS_ISSUE_LIST).children().removeClass(CSS_CLASS_ACTIVE$2);
     var issueTile = $(CTRL.SHARP + CSS_CLASS_ISSUE_TILE$1 + CTRL.DASH + id);
-    issueTile.addClass(CSS_CLASS_ACTIVE$1);
+    issueTile.addClass(CSS_CLASS_ACTIVE$2);
     if (isScrollIntoView && issueTile[0]) {
       issueTile[0].scrollIntoView();
     }
@@ -82996,7 +83359,7 @@ var DxfViewer = function DxfViewer(props) {
   });
 };
 
-var styles$1D = {"vitro-select":"_select_vitro-select_EObExkL","vitro-active":"_select_vitro-active_3I2oZ9Y","vitro-label":"_select_vitro-label_1sD79dR","vitro-list-container":"_select_vitro-list-container_1iaPtG5","vitro-item":"_select_vitro-item_3Q88bWt"};
+var styles$1H = {"vitro-select":"_select_vitro-select_EObExkL","vitro-active":"_select_vitro-active_3I2oZ9Y","vitro-label":"_select_vitro-label_1sD79dR","vitro-list-container":"_select_vitro-list-container_1iaPtG5","vitro-item":"_select_vitro-item_3Q88bWt"};
 
 var Select = function Select(props) {
   var _useState = React.useState(null),
@@ -83041,11 +83404,11 @@ var Select = function Select(props) {
   };
   var defaultItemTemplate = function defaultItemTemplate(props) {
     return React__default.createElement("div", {
-      className: styles$1D['vitro-item']
+      className: styles$1H['vitro-item']
     }, props.text);
   };
   var itemTemplate = props.itemTemplate ? props.itemTemplate : defaultItemTemplate;
-  var className = [styles$1D['vitro-select'], isExpanded ? styles$1D['vitro-active'] : CTRL.EMPTY, props.className || CTRL.EMPTY].join(CTRL.SPACE);
+  var className = [styles$1H['vitro-select'], isExpanded ? styles$1H['vitro-active'] : CTRL.EMPTY, props.className || CTRL.EMPTY].join(CTRL.SPACE);
   if (!props.itemList.length || !value) {
     return null;
   }
@@ -83058,9 +83421,9 @@ var Select = function Select(props) {
     ref: flexBoxRef
   }, props.label && React__default.createElement(Label, {
     text: props.label,
-    className: styles$1D['vitro-label']
+    className: styles$1H['vitro-label']
   }), React__default.createElement(itemTemplate, value), React__default.createElement("div", {
-    className: styles$1D['vitro-list-container'],
+    className: styles$1H['vitro-list-container'],
     ref: listRef
   }, React__default.createElement(List, {
     itemList: props.itemList,
@@ -83069,12 +83432,561 @@ var Select = function Select(props) {
   })));
 };
 
+var styles$1I = {"vitro-switch":"_switch_vitro-switch_1noCcra","vitro-slider":"_switch_vitro-slider_3wesxda","vitro-active":"_switch_vitro-active_3LJI9TW"};
+
+var Switch = function Switch(props) {
+  var _useState = React.useState(props.value ? true : false),
+    value = _useState[0],
+    setValue = _useState[1];
+  React.useEffect(function () {
+    setValue(props.value ? true : false);
+  }, [props.value]);
+  var onChange = function onChange() {
+    props.onChange && props.onChange(!value, props.name);
+    setValue(!value);
+  };
+  return React__default.createElement("label", {
+    className: styles$1I['vitro-switch'] + (value ? CTRL.SPACE + styles$1I['vitro-active'] : CTRL.EMPTY)
+  }, React__default.createElement("input", {
+    checked: value,
+    type: 'checkbox',
+    name: props.name,
+    onChange: onChange,
+    disabled: props.isDisabled
+  }), React__default.createElement("span", {
+    className: styles$1I['vitro-slider']
+  }));
+};
+
+var styles$1J = {"vitro-editable-list":"_editable-list_vitro-editable-list_2y8aXbO","vitro-header":"_editable-list_vitro-header_3ilVZhe","vitro-create-button":"_editable-list_vitro-create-button_3E1aQDB","vitro-editable-item":"_editable-list_vitro-editable-item_cWSWi1n","vitro-active":"_editable-list_vitro-active_39PUrSM","vitro-button-container":"_editable-list_vitro-button-container_1okfn08","vitro-dropdown-button":"_editable-list_vitro-dropdown-button_vPtNQxA"};
+
+var EditableItem = function EditableItem(props) {
+  var _useState = React.useState(props.text),
+    text = _useState[0],
+    setText = _useState[1];
+  var _useState2 = React.useState(false),
+    isHover = _useState2[0],
+    setIsHover = _useState2[1];
+  React.useEffect(function () {
+    setText(props.text);
+  }, [props.text]);
+  React.useEffect(function () {
+    setIsHover(props.isActive);
+  }, [props.isActive]);
+  var onChange = function onChange(e) {
+    setText(e.target.value);
+    props.onChange(e.target.value);
+  };
+  var onBlur = function onBlur(e) {
+    props.onBlur(e.target.value);
+  };
+  var onToggleDropdownButton = function onToggleDropdownButton(state, e) {
+    e.originalEvent.stopPropagation();
+    if (props.onToggleDropdown) {
+      props.onToggleDropdown(state);
+    }
+  };
+  return React__default.createElement(FlexBox, {
+    onMouseOver: function onMouseOver() {
+      return setIsHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHover(props.isActive);
+    },
+    className: styles$1J['vitro-editable-item'] + (props.isActive ? CTRL.SPACE + styles$1J['vitro-active'] : CTRL.EMPTY)
+  }, props.isEditMode ? React__default.createElement("input", {
+    value: text,
+    onChange: onChange,
+    onBlur: onBlur,
+    autoFocus: true
+  }) : React__default.createElement(Label, {
+    text: props.text
+  }), React__default.createElement("div", {
+    className: styles$1J['vitro-button-container']
+  }, isHover && props.dropdownItemList ? React__default.createElement(DropdownButton, {
+    itemList: props.dropdownItemList,
+    onToggle: onToggleDropdownButton,
+    isShow: props.isDropdownActive,
+    className: styles$1J['vitro-dropdown-button']
+  }) : props.button));
+};
+
+var EditableList = function EditableList(props) {
+  var _useState = React.useState(),
+    editedItem = _useState[0],
+    setEditedItem = _useState[1];
+  var _useState2 = React.useState(),
+    activeItem = _useState2[0],
+    setActiveItem = _useState2[1];
+  var _useState3 = React.useState(),
+    activeDropdownItemId = _useState3[0],
+    setActiveDropdownItemId = _useState3[1];
+  var changedFieldValueMap = React.useMemo(function () {
+    return new Map();
+  }, []);
+  React.useEffect(function () {
+    setEditedItem(props.editedItemId);
+    if (props.editedItemId) {
+      if (props.onStartEdit) {
+        props.onStartEdit(props.itemList.find(function (val) {
+          return val.id === props.editedItemId;
+        }));
+      }
+      setActiveItem(props.editedItemId);
+    }
+  }, [props.editedItemId]);
+  React.useEffect(function () {
+    if (!props.newItem) {
+      setActiveItem(props.activeItemId);
+    }
+  }, [props.newItem]);
+  React.useEffect(function () {
+    changedFieldValueMap.clear();
+    setActiveItem(props.activeItemId);
+  }, [props.activeItemId]);
+  React.useEffect(function () {
+    changedFieldValueMap.clear();
+  }, [props.itemList]);
+  var onClick = function onClick(item) {
+    setActiveItem(item.id);
+    if (item.id !== editedItem && item.id !== activeItem) {
+      setEditedItem(null);
+      if (props.onClick) {
+        props.onClick(item);
+      }
+    }
+  };
+  var _onChange = function onChange(item, value) {
+    changedFieldValueMap.set(item.id, value);
+    if (props.onChange) {
+      props.onChange(item, value);
+    }
+  };
+  var _onBlur = function onBlur(item, value) {
+    setEditedItem(undefined);
+    if (props.onEndEdit) {
+      props.onEndEdit(item, value);
+    }
+  };
+  var onCreate = function onCreate() {
+    setEditedItem(undefined);
+    setActiveItem(undefined);
+    if (props.onCreate) {
+      props.onCreate();
+    }
+  };
+  var _onToggleDropdown = function onToggleDropdown(item, state) {
+    if (state) {
+      setActiveDropdownItemId(item.id);
+      onClick(item);
+    } else {
+      setActiveDropdownItemId(undefined);
+    }
+  };
+  return React__default.createElement(FlexBox, {
+    className: styles$1J['vitro-editable-list'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }, React__default.createElement(FlexBox, {
+    className: styles$1J['vitro-header']
+  }, props.title && React__default.createElement(Heading, {
+    tag: TAG.H3,
+    text: props.title
+  }), props.isShowCreateButton && React__default.createElement(Tooltip$1, {
+    text: props.createButtonTooltip || CTRL.EMPTY
+  }, React__default.createElement(ImageButton, {
+    onClick: onCreate,
+    className: styles$1J['vitro-create-button']
+  }))), React__default.createElement(List, {
+    itemList: props.itemList,
+    itemTemplate: function itemTemplate(item) {
+      return React__default.createElement(EditableItem, Object.assign({}, item, {
+        text: changedFieldValueMap.get(item.id) || item.text,
+        onChange: function onChange(value) {
+          return _onChange(item, value);
+        },
+        onBlur: function onBlur(value) {
+          return _onBlur(item, value);
+        },
+        onToggleDropdown: function onToggleDropdown(state) {
+          return _onToggleDropdown(item, state);
+        },
+        isActive: activeItem === item.id,
+        isEditMode: editedItem === item.id,
+        isDropdownActive: activeDropdownItemId === item.id,
+        button: props.getItemButton ? props.getItemButton(item) : null
+      }));
+    },
+    onClick: onClick
+  }), props.newItem && React__default.createElement(EditableItem, Object.assign({}, props.newItem, {
+    onChange: function onChange(value) {
+      return props.newItem && _onChange(props.newItem, value);
+    },
+    onBlur: function onBlur(value) {
+      return props.newItem && _onBlur(props.newItem, value);
+    },
+    isActive: true,
+    isEditMode: true
+  })));
+};
+
+var styles$1K = {"vitro-reorderable-list":"_reorderable-list_vitro-reorderable-list_3Vinbji","vitro-reorderable-item":"_reorderable-list_vitro-reorderable-item_2gH3muk","vitro-drag-button":"_reorderable-list_vitro-drag-button_2gzxwKx","vitro-dragged-item":"_reorderable-list_vitro-dragged-item_fft3ham","vitro-drop-zone":"_reorderable-list_vitro-drop-zone_15pbLJE","vitro-hidden":"_reorderable-list_vitro-hidden_2ZpMCYZ"};
+
+var ReorderableListContent = function ReorderableListContent(props) {
+  return React__default.createElement(React__default.Fragment, null, props.draggedIndex !== null && React__default.createElement("div", {
+    style: {
+      left: props.position[0] + UNIT.PX,
+      top: props.position[1] + UNIT.PX,
+      width: props.draggedItemWidth ? props.draggedItemWidth + UNIT.PX : undefined
+    },
+    className: styles$1K['vitro-dragged-item']
+  }, props.getItem(_extends({}, props.itemList[props.draggedIndex], {
+    index: -1
+  }), false)), React__default.createElement("li", {
+    style: {
+      width: props.draggedItemWidth ? props.draggedItemWidth + UNIT.PX : undefined
+    }
+  }, React__default.createElement("div", {
+    className: styles$1K['vitro-drop-zone'] + (props.draggedIndex === null || props.activeDropZoneIndex !== 0 ? CTRL.SPACE + styles$1K['vitro-hidden'] : CTRL.EMPTY)
+  })), props.itemList && props.itemList.map(function (item, index) {
+    return React__default.createElement("li", {
+      key: index,
+      className: styles$1K['vitro-reorderable-item'] + (props.itemClassName ? CTRL.SPACE + props.itemClassName : CTRL.EMPTY)
+    }, props.getItem(_extends({}, item, {
+      index: index
+    })));
+  }));
+};
+
+var ReorderableItem = function ReorderableItem(props) {
+  var ref = React.useRef(null);
+  var buttonRef = React.useRef(null);
+  var onMouseDown = function onMouseDown(e) {
+    e.preventDefault();
+    var width = 0;
+    if (ref.current && buttonRef.current) {
+      var _ref$current, _buttonRef$current;
+      width = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect().width) - ((_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.getBoundingClientRect().width);
+    }
+    props.onMouseDown(e, props.index, width);
+  };
+  if (props.isDragged) {
+    return null;
+  }
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(FlexBox, {
+    ref: ref,
+    key: props.index,
+    className: props.className
+  }, React__default.createElement(ImageButton, {
+    ref: buttonRef,
+    onClick: function onClick() {},
+    onMouseDown: onMouseDown,
+    className: styles$1K['vitro-drag-button']
+  }), props.children), props.isDropAllowed !== false && React__default.createElement("div", {
+    style: {
+      width: props.draggedItemWidth ? props.draggedItemWidth - 16 + UNIT.PX : undefined
+    },
+    className: styles$1K['vitro-drop-zone'] + (props.isDropZoneActive ? CTRL.EMPTY : CTRL.SPACE + styles$1K['vitro-hidden'])
+  }));
+};
+
+var ReorderableList = function ReorderableList(props) {
+  var _useState = React.useState([]),
+    itemList = _useState[0],
+    setItemList = _useState[1];
+  var _useState2 = React.useState(null),
+    draggedIndex = _useState2[0],
+    setDraggedIndex = _useState2[1];
+  var _useState3 = React.useState([0, 0]),
+    position = _useState3[0],
+    setPosition = _useState3[1];
+  var _useState4 = React.useState(0),
+    activeDropZoneIndex = _useState4[0],
+    setActiveDropZoneIndex = _useState4[1];
+  var _useState5 = React.useState(0),
+    draggedItemWidth = _useState5[0],
+    setDraggedItemWidth = _useState5[1];
+  var startPosition = React.useRef([0, 0]);
+  var isDragged = React.useRef(false);
+  React.useEffect(function () {
+    var onMouseMove = function onMouseMove(e) {
+      if (isDragged.current) {
+        setPosition([e.x - startPosition.current[0], e.y - startPosition.current[1]]);
+      }
+    };
+    document.addEventListener(exports.EVENT.MOUSEMOVE, onMouseMove);
+    return function () {
+      return document.removeEventListener(exports.EVENT.MOUSEMOVE, onMouseMove);
+    };
+  }, []);
+  React.useEffect(function () {
+    var onMouseUp = function onMouseUp(e) {
+      if (draggedIndex !== null) {
+        e.preventDefault();
+        isDragged.current = false;
+        setDraggedIndex(null);
+        var reorderedList = reorderList(itemList, draggedIndex, activeDropZoneIndex).map(function (val, index) {
+          return _extends({}, val, {
+            index: index
+          });
+        });
+        setItemList(reorderedList);
+        if (props.onChange) {
+          props.onChange(reorderedList);
+        }
+      }
+    };
+    document.addEventListener(exports.EVENT.MOUSEUP, onMouseUp);
+    return function () {
+      return document.removeEventListener(exports.EVENT.MOUSEUP, onMouseUp);
+    };
+  });
+  React.useEffect(function () {
+    if (draggedIndex !== null) {
+      var elements = Array.from(document.getElementsByClassName(styles$1K['vitro-drop-zone']));
+      var positions = elements.map(function (e) {
+        return e.getBoundingClientRect().top - startPosition.current[1];
+      });
+      var absDifferences = positions.map(function (v) {
+        return Math.abs(v - position[1]);
+      });
+      var result = absDifferences.indexOf(Math.min.apply(Math, absDifferences));
+      if (result > draggedIndex) {
+        result += 1;
+      }
+      setActiveDropZoneIndex(result);
+    }
+  }, [draggedIndex, position]);
+  React.useEffect(function () {
+    setItemList(props.itemList.sort(sort));
+  }, [props.itemList]);
+  var sort = function sort(a, b) {
+    if (a.index < b.index) {
+      return -1;
+    }
+    if (a.index > b.index) {
+      return 1;
+    }
+    return 0;
+  };
+  var onMouseDown = function onMouseDown(e, index, width) {
+    var _e$target;
+    isDragged.current = true;
+    var parentRect = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.offsetParent.getBoundingClientRect();
+    startPosition.current = [parentRect.left, parentRect.top];
+    setPosition([e.clientX - startPosition.current[0], e.clientY - startPosition.current[1]]);
+    setActiveDropZoneIndex(index);
+    setDraggedIndex(index);
+    setDraggedItemWidth(width);
+  };
+  var reorderForward = function reorderForward(list, start, end) {
+    var temp = list[start];
+    for (var i = start; i < end; i++) {
+      if (i + 1 < list.length) {
+        list[i] = list[i + 1];
+      }
+    }
+    list[end - 1] = temp;
+    return list;
+  };
+  var reorderBackward = function reorderBackward(list, start, end) {
+    var temp = list[start];
+    for (var i = start; i > end; i--) {
+      if (i > 0) {
+        list[i] = list[i - 1];
+      }
+    }
+    list[end] = temp;
+    return list;
+  };
+  var reorderList = function reorderList(list, startIndex, endIndex) {
+    if (startIndex < endIndex) return reorderForward(list.slice(), startIndex, endIndex);else if (startIndex > endIndex) return reorderBackward(list.slice(), startIndex, endIndex);else return list;
+  };
+  var getItem = function getItem(item, isDropAllowed) {
+    if (item) {
+      return React__default.createElement(ReorderableItem, Object.assign({}, item, {
+        isDropAllowed: isDropAllowed,
+        onMouseDown: onMouseDown,
+        draggedItemWidth: draggedItemWidth,
+        isDropZoneActive: !(draggedIndex === null || activeDropZoneIndex !== item.index + 1),
+        isDragged: draggedIndex === item.index
+      }), React__default.createElement(props.itemTemplate, _extends({}, item)));
+    }
+    return null;
+  };
+  if (props.isCustomContainer) {
+    return React__default.createElement(ReorderableListContent, {
+      itemList: itemList,
+      draggedIndex: draggedIndex,
+      activeDropZoneIndex: activeDropZoneIndex,
+      position: position,
+      getItem: getItem,
+      draggedItemWidth: draggedItemWidth,
+      itemClassName: props.itemClassName
+    });
+  }
+  return React__default.createElement("ul", {
+    className: styles$1K['vitro-list'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }, React__default.createElement(ReorderableListContent, {
+    itemList: itemList,
+    draggedIndex: draggedIndex,
+    activeDropZoneIndex: activeDropZoneIndex,
+    position: position,
+    getItem: getItem,
+    draggedItemWidth: draggedItemWidth,
+    itemClassName: props.itemClassName
+  }));
+};
+
+var styles$1L = {"vitro-checkbox-reorderable-list":"_checkbox-reorderable-list_vitro-checkbox-reorderable-list_3VUoUyI","vitro-reorderable-item":"_checkbox-reorderable-list_vitro-reorderable-item__ZSM4NT","vitro-checkbox":"_checkbox-reorderable-list_vitro-checkbox_3FVD6mG"};
+
+var CheckboxReorderableList = function CheckboxReorderableList(props) {
+  var _useState = React.useState([]),
+    itemList = _useState[0],
+    setItemList = _useState[1];
+  var _useState2 = React.useState([]),
+    reorderableItemList = _useState2[0],
+    setReorderableItemList = _useState2[1];
+  var listRef = React.useRef(null);
+  React.useEffect(function () {
+    if (props.isAllSelected === true) {
+      setItemList([]);
+      setReorderableItemList(props.itemList);
+    } else if (props.isAllSelected === false) {
+      setItemList(props.itemList.sort(sortByName));
+      setReorderableItemList([]);
+    } else {
+      updateItemList();
+    }
+  }, [props.itemList, props.isAllSelected]);
+  var updateItemList = function updateItemList() {
+    var checkedItemList = [];
+    var uncheckedItemList = [];
+    props.itemList.map(function (val) {
+      if (val.value) {
+        checkedItemList.push(val);
+      } else {
+        uncheckedItemList.push(val);
+      }
+    });
+    setReorderableItemList(checkedItemList);
+    setItemList(uncheckedItemList.sort(sortByName));
+  };
+  var _onChange = function onChange(value, id) {
+    var changedItem = props.itemList.find(function (val) {
+      return val.id === id;
+    });
+    if (changedItem) {
+      var changedItemList;
+      var item = _extends({}, changedItem, {
+        value: value
+      });
+      if (value) {
+        changedItemList = addItem(reorderableItemList, item);
+        setReorderableItemList(changedItemList);
+        setItemList(removeItem(itemList, item));
+      } else {
+        changedItemList = removeItem(reorderableItemList, item);
+        setReorderableItemList(changedItemList);
+        setItemList(addItem(itemList, item).sort(sortByName));
+      }
+      if (props.onChange) {
+        props.onChange(changedItemList);
+      }
+    }
+  };
+  var onChangePosition = function onChangePosition(itemList) {
+    setReorderableItemList(itemList);
+    if (props.onChange) {
+      props.onChange(itemList);
+    }
+  };
+  var addItem = function addItem(list, item) {
+    var newList = [].concat(list);
+    newList.push(item);
+    return newList;
+  };
+  var removeItem = function removeItem(list, item) {
+    var newList = [].concat(list);
+    newList = newList.filter(function (val) {
+      return val.id !== item.id;
+    });
+    return newList;
+  };
+  var sortByName = function sortByName(a, b) {
+    if (a.text.toLowerCase() < b.text.toLowerCase()) {
+      return -1;
+    }
+    if (a.text.toLowerCase() > b.text.toLowerCase()) {
+      return 1;
+    }
+    return 0;
+  };
+  var getValue = function getValue(value) {
+    if (props.isAllSelected === true) {
+      return true;
+    }
+    if (props.isAllSelected === false) {
+      return false;
+    }
+    return value;
+  };
+  var getCheckbox = function getCheckbox(item, className) {
+    return React__default.createElement(Checkbox, {
+      label: item.text,
+      name: item.text,
+      value: getValue(item.value),
+      onChange: function onChange(value) {
+        return _onChange(value, item.id);
+      },
+      className: styles$1L['vitro-checkbox'] + (className ? CTRL.SPACE + className : CTRL.EMPTY)
+    });
+  };
+  return React__default.createElement("ul", {
+    ref: listRef,
+    className: styles$1L['vitro-checkbox-reorderable-list'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }, React__default.createElement(ReorderableList, {
+    itemList: reorderableItemList,
+    itemTemplate: getCheckbox,
+    onChange: onChangePosition,
+    itemClassName: styles$1L['vitro-reorderable-item'],
+    isCustomContainer: true
+  }), React__default.createElement(List, {
+    itemList: itemList,
+    itemTemplate: getCheckbox,
+    itemClassName: styles$1L['vitro-item'],
+    isCustomContainer: true
+  }));
+};
+
+var styles$1M = {"vitro-pin-button":"_pin-button_vitro-pin-button_3DklgEh","vitro-active":"_pin-button_vitro-active_2PgztSG"};
+
+var PinButton = function PinButton(props) {
+  var _useState = React.useState(props.isActive || false),
+    isActive = _useState[0],
+    setIsActive = _useState[1];
+  React.useEffect(function () {
+    setIsActive(props.isActive || false);
+  }, [props.isActive]);
+  var onClick = function onClick(e) {
+    e.stopPropagation();
+    var newVal = !isActive;
+    setIsActive(newVal);
+    if (props.onChange) {
+      props.onChange(newVal);
+    }
+  };
+  return React__default.createElement(ImageButton, {
+    onClick: onClick,
+    className: styles$1M['vitro-pin-button'] + (isActive ? CTRL.SPACE + styles$1M['vitro-active'] : CTRL.EMPTY) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  });
+};
+
 exports.ACTION_HANDLER = ActionHandlerConstants;
 exports.ALERT = AlertConstants;
 exports.ActionHandler = ActionHandler;
 exports.Activity = Activity;
 exports.ActivityItem = ActivityItem;
 exports.ActivityMessage = ActivityMessage;
+exports.AddFieldButton = AddFieldButton;
 exports.Alert = Alert$1;
 exports.Avatar = Avatar;
 exports.BimViewer = BimViewer;
@@ -83086,6 +83998,7 @@ exports.ButtonGroup = ButtonGroup;
 exports.CONTROL = CONTROL;
 exports.CenterAlignControlGroup = CenterAlignControlGroup;
 exports.Checkbox = Checkbox;
+exports.CheckboxReorderableList = CheckboxReorderableList;
 exports.CommandMenu = CommandMenu;
 exports.CommandMenuButton = CommandMenuButton;
 exports.CommandMenuDropdownButton = CommandMenuDropdownButton;
@@ -83096,12 +84009,15 @@ exports.ComponentLoaderContextImpl = ComponentLoaderContextImpl;
 exports.ControlGroup = ControlGroup;
 exports.CopyButton = CopyButton;
 exports.Criterion = Criterion;
+exports.CriterionFieldIterator = CriterionFieldIterator;
 exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
 exports.DialogContent = DialogContent;
 exports.DialogFooter = DialogFooter;
 exports.DropdownButton = DropdownButton;
 exports.DxfViewer = DxfViewer;
+exports.EditableFieldIterator = EditableFieldIterator;
+exports.EditableList = EditableList;
 exports.ErrorMessage = ErrorMessage;
 exports.ExpandCollapseButton = ExpandCollapseButton;
 exports.ExpandControlGroup = ExpandControlGroup;
@@ -83121,6 +84037,7 @@ exports.ImagePicker = ImagePicker;
 exports.ImageViewer = ImageViewer;
 exports.Input = Input;
 exports.IssueTile = IssueTile;
+exports.KEY_CODE = KEY_CODE;
 exports.Label = Label;
 exports.LeftAlignControlGroup = LeftAlignControlGroup;
 exports.LinearProgress = LinearProgress;
@@ -83140,12 +84057,15 @@ exports.Overlay = Overlay$2;
 exports.PageLayout = PageLayout;
 exports.PasswordInput = PasswordInput;
 exports.PdfViewer = PdfViewer;
+exports.PinButton = PinButton;
 exports.ProductTitle = ProductTitle;
 exports.Progress = Progress;
 exports.ProgressBar = ProgressBar;
 exports.Radio = Radio;
+exports.ReorderableList = ReorderableList;
 exports.RightAlignControlGroup = RightAlignControlGroup;
 exports.RouteItem = RouteItem;
+exports.SIDEBAR = SidebarConstants;
 exports.SPLITTER = SplitterConstants;
 exports.ScriptLoader = ScriptLoader;
 exports.ScrollBar = ScrollBar;
@@ -83158,10 +84078,12 @@ exports.SiteSelect = SiteSelect;
 exports.SlideUpPanel = SlideUpPanel;
 exports.Splitter = Splitter;
 exports.StarButton = StarButton;
+exports.Switch = Switch;
 exports.SystemExceptionDialog = SystemExceptionDialog;
 exports.TABLE_VIEW = TableViewConstants;
 exports.TOOLTIP = TooltipConstants;
 exports.TREE_VIEW = TreeViewConstants;
+exports.TabButtonGroup = TabButtonGroup;
 exports.TabGroup = TabGroup;
 exports.TableView = TableView;
 exports.TableViewDetail = TableViewDetail;