@vitrosoftware/common-ui-ts 1.1.96 → 1.1.98

package/dist/index.js

@@ -118,8 +118,25 @@ var app$1 = {
 			}
 		},
 		actionHandler: {
-			itemCount: "Выбранных элементов: {{itemCount}}",
-			itemName: "Элемент: {{itemName}}"
+			confirmDialog: {
+				title: "{{actionName}} выделенные элементы ({{count}} шт.) ?"
+			},
+			resultDialog: {
+				progress: {
+					title: "Выполняется действие “{{actionName}}”",
+					count: "Осталось элементов: {{processedCount}} из {{count}}"
+				},
+				success: {
+					title: "Действие “{{actionName}}” выполнено успешно",
+					message: "Действие выполнено успешно"
+				},
+				error: {
+					title: "Не удалось выполнить действие “{{actionName}}” \nдля {{errorCount}} из {{count}} элементов"
+				},
+				action: {
+					saveReport: "Сохранить отчет"
+				}
+			}
 		},
 		login: {
 			copyright: "VitroCAD",
@@ -193,6 +210,26 @@ var app$1 = {
 				edit: "Редактировать",
 				open: "Открыть в новой вкладке"
 			}
+		},
+		systemExceptionDialog: {
+			title: "Произошла непредвиденная ошибка!",
+			subtitle: "Опишите шаги её воспроизведения и отправьте в службу тех. поддержки",
+			action: {
+				send: "Отправить",
+				includeInReport: "Включить в отчёт"
+			},
+			setting: {
+				screenshot: "Снимок экрана",
+				detailedExceptionText: "Текст ошибки",
+				userName: "Имя пользователя",
+				systemInformation: "Информацию о системе"
+			}
+		},
+		dialog: {
+			action: {
+				showDetail: "Подробнее",
+				hide: "Скрыть"
+			}
 		}
 	}
 };
@@ -304,18 +341,6 @@ function _wrapNativeSuper(Class) {
   };
   return _wrapNativeSuper(Class);
 }
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -450,7 +475,7 @@ var ScrollBar = function ScrollBar(props) {
     ref: ref,
     className: props.className || CTRL.EMPTY
   }, React__default.createElement("div", {
-    className: styles$1['vitro-scrollbar-content']
+    className: styles$1['vitro-scrollbar-content'] + (props.contentClassName ? CTRL.SPACE + props.contentClassName : CTRL.EMPTY)
   }, element && props.children));
 };
 
@@ -21813,7 +21838,7 @@ var COLOR_GREEN = '#198754';
 var KENDO_UPLOAD = 'kendoUpload';
 var AUTHORIZATION_TOKEN_HEADER = 'AuthorizationToken';
 var TelerikUploaderContextImpl = /*#__PURE__*/function () {
-  function TelerikUploaderContextImpl(uploader, container, dropZone, settings, localeService, toggleButtons) {
+  function TelerikUploaderContextImpl(uploader, container, dropZone, progressBar, settings, localeService, toggleButtons) {
     this.token = CTRL.EMPTY;
     this.successCount = 0;
     this.errorCount = 0;
@@ -21823,11 +21848,12 @@ var TelerikUploaderContextImpl = /*#__PURE__*/function () {
       percent: 0
     };
     this.progressInfoContainer = $$1('#vitro-uploader-progress-info');
-    this.progressBar = $$1('#vitro-progress-bar')[0];
+    this.progressBar = null;
     this.title = $$1('#vitro-uploader-title');
     this.subtitle = $$1('#vitro-uploader-subtitle');
     this.uploader = uploader;
     this.container = container[0];
+    this.progressBar = progressBar;
     this.settings = settings;
     this.localeService = localeService;
     this.toggleButtons = toggleButtons;
@@ -21960,7 +21986,7 @@ var TelerikUploaderContextImpl = /*#__PURE__*/function () {
       }));
     }
     this.setProgressBar(100);
-    if (this.settings.isAutoReset) {
+    if (this.settings.isAutoReset && !this.errorCount) {
       window.setTimeout(function () {
         _this2.clearAllFiles();
         _this2.toggleButtons(false);
@@ -22005,16 +22031,25 @@ var TelerikUploaderContextImpl = /*#__PURE__*/function () {
     this.token = token;
   };
   _proto.setErrorMessage = function setErrorMessage(file, resp) {
-    if (this.settings.handleError) {
+    if (this.settings.onError) {
       var response = JSON.parse(resp);
-      var error = this.settings.handleError(response);
-      var message = error.message;
-      if (message) {
-        $$1(this.container).find(".k-file[data-uid='" + file.uid + "'] .k-file-validation-message").text(message);
+      var res = this.settings.onError(response);
+      if (res.abort) {
+        this.cancelUpload();
+        return;
+      }
+      var exception = res.exception;
+      var message = exception ? exception.message : CTRL.EMPTY;
+      $$1(this.container).find(".k-file[data-uid='" + file.uid + "'] .k-file-validation-message").text(message);
+      if (exception) {
+        console.error(exception);
       }
-      console.error(error);
     }
   };
+  _proto.cancelUpload = function cancelUpload() {
+    this.uploader.data("kendoUpload").removeAllFiles();
+    this.errorCount = this.fileList.length - this.successCount;
+  };
   _proto.setFileImage = function setFileImage(file) {
     if (this.settings.getFileImage) {
       var image = this.settings.getFileImage(file.name);
@@ -22023,11 +22058,13 @@ var TelerikUploaderContextImpl = /*#__PURE__*/function () {
     }
   };
   _proto.setProgressBar = function setProgressBar(percent) {
-    this.progressBar.style.width = percent + CTRL.PERCENT;
-    if (percent == 100) {
-      this.progressBar.style.background = COLOR_GREEN;
-    } else {
-      this.progressBar.style.background = CTRL.EMPTY;
+    if (this.progressBar) {
+      this.progressBar.style.width = percent + CTRL.PERCENT;
+      if (percent == 100) {
+        this.progressBar.style.background = COLOR_GREEN;
+      } else {
+        this.progressBar.style.background = CTRL.EMPTY;
+      }
     }
   };
   _proto.setFileProgress = function setFileProgress(id, percent) {
@@ -22075,11 +22112,25 @@ var TelerikUploaderContextImpl = /*#__PURE__*/function () {
   return TelerikUploaderContextImpl;
 }();
 
+var styles$6 = {"vitro-progress-bar":"_progress-bar_vitro-progress-bar_u2VLQeW","vitro-bar":"_progress-bar_vitro-bar_7V1N3eH","progressBar":"_progress-bar_progressBar_2l9PJjC"};
+
+var ProgressBar = React.forwardRef(function (props, ref) {
+  return React__default.createElement("div", {
+    className: styles$6['vitro-progress-bar'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }, React__default.createElement("div", {
+    className: styles$6['vitro-bar'],
+    ref: ref,
+    style: {
+      width: props.percentComplete + CTRL.PERCENT
+    }
+  }));
+});
+
 var SERVICE = function SERVICE() {};
 SERVICE.LOCALE = 'LocaleService';
 SERVICE.LOCAL_STORAGE = 'LocalStorageService';
 
-var styles$6 = {"vitro-uploader":"_uploader_vitro-uploader_237vX7T","vitro-upload-container":"_uploader_vitro-upload-container_2ASGHSS","vitro-drop-zone":"_uploader_vitro-drop-zone_3w2dluc","vitro-progress-info":"_uploader_vitro-progress-info_J4BRjZ0","vitro-button-close":"_uploader_vitro-button-close_30As0AM","vitro-button-show":"_uploader_vitro-button-show_uUmWVJc","vitro-button-hide":"_uploader_vitro-button-hide_LYS1px9","vitro-hidden":"_uploader_vitro-hidden_12825pc","vitro-progress":"_uploader_vitro-progress_2NtaSj2","vitro-dropzone-image":"_uploader_vitro-dropzone-image_ianU_0j","vitro-drop-zone-text":"_uploader_vitro-drop-zone-text_KLjek2K","vitro-progress-bar":"_uploader_vitro-progress-bar_3YXLbbu"};
+var styles$7 = {"vitro-uploader":"_uploader_vitro-uploader_237vX7T","vitro-upload-container":"_uploader_vitro-upload-container_2ASGHSS","vitro-drop-zone":"_uploader_vitro-drop-zone_3w2dluc","vitro-progress-info":"_uploader_vitro-progress-info_J4BRjZ0","vitro-button-close":"_uploader_vitro-button-close_30As0AM","vitro-button-show":"_uploader_vitro-button-show_uUmWVJc","vitro-button-hide":"_uploader_vitro-button-hide_LYS1px9","vitro-hidden":"_uploader_vitro-hidden_12825pc","vitro-progress":"_uploader_vitro-progress_2NtaSj2","vitro-dropzone-image":"_uploader_vitro-dropzone-image_ianU_0j","vitro-drop-zone-text":"_uploader_vitro-drop-zone-text_KLjek2K","vitro-progress-bar":"_uploader_vitro-progress-bar_3YXLbbu"};
 
 var $$2 = window.$;
 var TYPE_FILES = 'Files';
@@ -22101,17 +22152,18 @@ var TelerikUploader = function TelerikUploader(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   var componentName = 'telerikUploader';
   React.useEffect(function () {
-    if (uploaderRef && dropZoneRef) {
+    if (uploaderRef && dropZoneRef && progressBarRef) {
       var input = $$2(uploaderRef.current);
       var dropZone = $$2(dropZoneRef.current);
       var container = $$2(containerRef.current);
-      var _kendoUploader = new TelerikUploaderContextImpl(input, container, dropZone, props.settings, localeService, toggleButtons);
+      var progressBar = progressBarRef.current;
+      var _kendoUploader = new TelerikUploaderContextImpl(input, container, dropZone, progressBar, props.settings, localeService, toggleButtons);
       setKendoUploader(_kendoUploader);
       if (props.onInit) {
         props.onInit(_kendoUploader);
       }
     }
-  }, [uploaderRef, dropZoneRef]);
+  }, [uploaderRef, dropZoneRef, progressBarRef]);
   React.useEffect(function () {
     if (kendoUploader) {
       window.addEventListener(EVENT$2.ADD_FILE, addFile);
@@ -22175,40 +22227,38 @@ var TelerikUploader = function TelerikUploader(props) {
   };
   return React__default.createElement("div", {
     id: componentName,
-    className: styles$6['vitro-uploader'],
+    className: styles$7['vitro-uploader'],
     ref: containerRef
   }, showClose && React__default.createElement(React__default.Fragment, null, React__default.createElement("button", {
-    className: styles$6['vitro-button-close'],
+    className: styles$7['vitro-button-close'],
     onClick: clearUploadResult
   }), React__default.createElement("button", {
-    className: hide ? styles$6['vitro-button-show'] : styles$6['vitro-button-hide'],
+    className: hide ? styles$7['vitro-button-show'] : styles$7['vitro-button-hide'],
     onClick: hideUploadResult
   })), React__default.createElement("div", {
-    className: styles$6['vitro-drop-zone'],
+    className: styles$7['vitro-drop-zone'],
     id: 'vitro-uploader-drop-zone',
     ref: dropZoneRef,
     onClick: addFile
   }, React__default.createElement("div", null, React__default.createElement("div", {
-    className: styles$6['vitro-dropzone-image']
+    className: styles$7['vitro-dropzone-image']
   }), React__default.createElement("div", {
-    className: styles$6['vitro-drop-zone-text']
+    className: styles$7['vitro-drop-zone-text']
   }, localeService.create(LOCALE.DROPZONE_TEXT)))), React__default.createElement("div", {
-    className: styles$6['vitro-upload-container'] + (hide ? CTRL.SPACE + styles$6['vitro-hidden'] : CTRL.EMPTY)
+    className: styles$7['vitro-upload-container'] + (hide ? CTRL.SPACE + styles$7['vitro-hidden'] : CTRL.EMPTY)
   }, React__default.createElement("div", {
-    className: styles$6['vitro-progress-info'],
+    className: styles$7['vitro-progress-info'],
     id: 'vitro-uploader-progress-info',
     ref: progressInfoRef
   }, React__default.createElement("span", {
     id: 'vitro-uploader-title'
   }), React__default.createElement("span", {
     id: 'vitro-uploader-subtitle'
-  }), React__default.createElement("div", {
-    className: styles$6['vitro-progress'],
-    ref: progressBarRef
-  }, React__default.createElement("div", {
-    className: styles$6['vitro-progress-bar'],
-    id: 'vitro-progress-bar'
-  }))), React__default.createElement("input", {
+  }), React__default.createElement(ProgressBar, {
+    percentComplete: 0,
+    ref: progressBarRef,
+    className: styles$7['vitro-progress-bar']
+  })), React__default.createElement("input", {
     name: 'fileList',
     type: 'file',
     id: props.id,
@@ -22257,6 +22307,19 @@ var ComponentLoaderContextImpl = /*#__PURE__*/function () {
   return ComponentLoaderContextImpl;
 }();
 
+var PLACEMENT;
+(function (PLACEMENT) {
+  PLACEMENT["LEFT"] = "left";
+  PLACEMENT["TOP"] = "top";
+  PLACEMENT["RIGHT"] = "right";
+  PLACEMENT["BOTTOM"] = "bottom";
+})(PLACEMENT || (PLACEMENT = {}));
+
+var TooltipConstants = {
+    __proto__: null,
+    get PLACEMENT () { return PLACEMENT; }
+};
+
 var classnames = createCommonjsModule(function (module) {
 /*!
 	Copyright (c) 2018 Jed Watson.
@@ -22346,7 +22409,7 @@ function _extends$1() {
   return _extends$1.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose$1(source, excluded) {
+function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -22450,7 +22513,7 @@ function useUncontrolled(props, config) {
     var _ref = result,
         defaultValue = _ref[defaultKey(fieldName)],
         propsValue = _ref[fieldName],
-        rest = _objectWithoutPropertiesLoose$1(_ref, [defaultKey(fieldName), fieldName].map(_toPropertyKey$1));
+        rest = _objectWithoutPropertiesLoose(_ref, [defaultKey(fieldName), fieldName].map(_toPropertyKey$1));
 
     var handlerName = config[fieldName];
 
@@ -54914,7 +54977,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
 
     var _this$props = this.props,
         children = _this$props.children,
-        childProps = _objectWithoutPropertiesLoose$1(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
+        childProps = _objectWithoutPropertiesLoose(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
 
     return (
       /*#__PURE__*/
@@ -55558,7 +55621,7 @@ const isDOM = typeof document !== 'undefined';
 var useIsomorphicEffect = isDOM || isReactNative ? React.useLayoutEffect : React.useEffect;
 
 const _excluded = ["as", "disabled"];
-function _objectWithoutPropertiesLoose$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _objectWithoutPropertiesLoose$1(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function isTrivialHref(href) {
   return !href || href.trim() === '#';
 }
@@ -55631,7 +55694,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       as: asProp,
       disabled
     } = _ref,
-    props = _objectWithoutPropertiesLoose$2(_ref, _excluded);
+    props = _objectWithoutPropertiesLoose$1(_ref, _excluded);
   const [buttonProps, {
     tagName: Component
   }] = useButtonProps(Object.assign({
@@ -55645,7 +55708,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 Button.displayName = 'Button';
 
 const _excluded$1 = ["onKeyDown"];
-function _objectWithoutPropertiesLoose$3(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _objectWithoutPropertiesLoose$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function isTrivialHref$1(href) {
   return !href || href.trim() === '#';
 }
@@ -55657,7 +55720,7 @@ const Anchor = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       onKeyDown
     } = _ref,
-    props = _objectWithoutPropertiesLoose$3(_ref, _excluded$1);
+    props = _objectWithoutPropertiesLoose$2(_ref, _excluded$1);
   const [buttonProps] = useButtonProps(Object.assign({
     tagName: 'a'
   }, props));
@@ -57794,7 +57857,7 @@ const createPopper = popperGenerator({
 });
 
 const _excluded$2 = ["enabled", "placement", "strategy", "modifiers"];
-function _objectWithoutPropertiesLoose$4(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _objectWithoutPropertiesLoose$3(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const disabledApplyStylesModifier = {
   name: 'applyStyles',
   enabled: false,
@@ -57861,7 +57924,7 @@ function usePopper(referenceElement, popperElement, _ref = {}) {
       strategy = 'absolute',
       modifiers = EMPTY_MODIFIERS
     } = _ref,
-    config = _objectWithoutPropertiesLoose$4(_ref, _excluded$2);
+    config = _objectWithoutPropertiesLoose$3(_ref, _excluded$2);
   const prevModifiers = React.useRef(modifiers);
   const popperInstanceRef = React.useRef();
   const update = React.useCallback(() => {
@@ -58176,7 +58239,7 @@ function mergeOptionsWithPopperConfig({
 }
 
 const _excluded$3 = ["children"];
-function _objectWithoutPropertiesLoose$5(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _objectWithoutPropertiesLoose$4(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const noop$2 = () => {};
 
 /**
@@ -58263,7 +58326,7 @@ function DropdownMenu(_ref) {
   let {
       children
     } = _ref,
-    options = _objectWithoutPropertiesLoose$5(_ref, _excluded$3);
+    options = _objectWithoutPropertiesLoose$4(_ref, _excluded$3);
   const [props, meta] = useDropdownMenu(options);
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: children(props, meta)
@@ -58458,7 +58521,7 @@ function dataProp(property) {
 }
 
 const _excluded$4 = ["eventKey", "disabled", "onClick", "active", "as"];
-function _objectWithoutPropertiesLoose$6(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _objectWithoutPropertiesLoose$5(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * Create a dropdown item. Returns a set of props for the dropdown item component
  * including an `onClick` handler that prevents selection when the item is disabled
@@ -58501,7 +58564,7 @@ const DropdownItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       active,
       as: Component = Button
     } = _ref,
-    props = _objectWithoutPropertiesLoose$6(_ref, _excluded$4);
+    props = _objectWithoutPropertiesLoose$5(_ref, _excluded$4);
   const [dropdownItemProps] = useDropdownItem({
     key: eventKey,
     href: props.href,
@@ -59019,7 +59082,7 @@ var BootstrapDropdown = Object.assign(Dropdown$1, {
 const TabContext = /*#__PURE__*/React.createContext(null);
 
 const _excluded$5 = ["as", "active", "eventKey"];
-function _objectWithoutPropertiesLoose$7(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _objectWithoutPropertiesLoose$6(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function useNavItem({
   key,
   onClick,
@@ -59086,7 +59149,7 @@ const NavItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       active,
       eventKey
     } = _ref,
-    options = _objectWithoutPropertiesLoose$7(_ref, _excluded$5);
+    options = _objectWithoutPropertiesLoose$6(_ref, _excluded$5);
   const [props, meta] = useNavItem(Object.assign({
     key: makeEventKey(eventKey, options.href),
     active
@@ -59101,7 +59164,7 @@ const NavItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 NavItem.displayName = 'NavItem';
 
 const _excluded$6 = ["as", "onSelect", "activeKey", "role", "onKeyDown"];
-function _objectWithoutPropertiesLoose$8(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _objectWithoutPropertiesLoose$7(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop$4 = () => {};
 const EVENT_KEY_ATTR = dataAttr('event-key');
@@ -59114,7 +59177,7 @@ const Nav = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       role,
       onKeyDown
     } = _ref,
-    props = _objectWithoutPropertiesLoose$8(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose$7(_ref, _excluded$6);
   // A ref and forceUpdate for refocus, b/c we only want to trigger when needed
   // and don't want to reset the set in the effect
   const forceUpdate = useForceUpdate();
@@ -60070,11 +60133,22 @@ const OverlayTrigger = ({
   });
 };
 
-var styles$7 = {"vitro-button-group":"_button-group_vitro-button-group_3TLqxjf"};
+var styles$8 = {"vitro-tooltip":"_tooltip_vitro-tooltip_JvGPShz"};
 
-var ButtonGroup = function ButtonGroup(props) {
-  return React__default.createElement("div", {
-    className: styles$7['vitro-button-group']
+var Tooltip$1 = function Tooltip(props) {
+  if (!props.text) {
+    return props.children;
+  }
+  return React__default.createElement(OverlayTrigger, {
+    placement: props.placement || PLACEMENT.TOP,
+    delay: {
+      show: 750,
+      hide: 0
+    },
+    show: props.isShow,
+    overlay: React__default.createElement(TooltipComponent, {
+      className: styles$8['vitro-tooltip']
+    }, props.text)
   }, props.children);
 };
 
@@ -60096,10 +60170,84 @@ var Image = function Image(props) {
   }));
 };
 
+var styles$9 = {"vitro-image-button":"_image-button_vitro-image-button_34pBVmE"};
+
+var ImageButton = function ImageButton(props) {
+  return React__default.createElement(Tooltip$1, {
+    text: props.tooltipText || CTRL.EMPTY,
+    placement: props.tooltipPlacement
+  }, React__default.createElement("button", {
+    onClick: props.onClick,
+    className: styles$9['vitro-image-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }, props.imageUrl && React__default.createElement(Image, {
+    defaultUrl: props.imageUrl,
+    hoverUrl: props.imageHoverUrl
+  })));
+};
+
+var DialogComponent = function DialogComponent(props) {
+  return React__default.createElement("div", {
+    style: {
+      width: props.width + CTRL.PERCENT,
+      height: props.height + CTRL.PERCENT
+    },
+    className: props.className
+  }, props.children);
+};
+
+var styles$a = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x"};
+
+var DialogContent = function DialogContent(props) {
+  return React__default.createElement("div", {
+    className: styles$a['vitro-dialog-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }, props.children);
+};
+
+var styles$b = {"vitro-heading-h1":"_heading_vitro-heading-h1_3SB01Ds","vitro-heading-h2":"_heading_vitro-heading-h2_2W1uEiH","vitro-heading-h3":"_heading_vitro-heading-h3_3H5QlHH","vitro-heading-h4":"_heading_vitro-heading-h4_y-DCkfR","vitro-heading-h5":"_heading_vitro-heading-h5_2MeHzg3"};
+
+var Heading = function Heading(props) {
+  var className = styles$b["vitro-heading-" + props.tag] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY);
+  return React__default.createElement(props.tag, {
+    className: className
+  }, props.text);
+};
+
+var TAG;
+(function (TAG) {
+  TAG["H1"] = "h1";
+  TAG["H2"] = "h2";
+  TAG["H3"] = "h3";
+  TAG["H4"] = "h4";
+  TAG["H5"] = "h5";
+})(TAG || (TAG = {}));
+
+var HeadingConstants = {
+    __proto__: null,
+    get TAG () { return TAG; }
+};
+
+var styles$c = {"vitro-dialog-header":"_dialog-header_vitro-dialog-header_2W3GraU","vitro-subtitle":"_dialog-header_vitro-subtitle_3mjvJAN","vitro-image":"_dialog-header_vitro-image_3TdbvmV"};
+
+var DialogHeader = function DialogHeader(props) {
+  return React__default.createElement("div", {
+    className: styles$c['vitro-dialog-header'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }, props.imageUrl && React__default.createElement(Image, {
+    defaultUrl: props.imageUrl,
+    className: styles$c['vitro-image']
+  }), props.image, React__default.createElement("div", null, React__default.createElement(Heading, {
+    tag: TAG.H1,
+    text: props.title
+  }), props.subtitle && React__default.createElement(Heading, {
+    tag: TAG.H2,
+    text: props.subtitle,
+    className: styles$c['vitro-subtitle']
+  })));
+};
+
 var UNIT = function UNIT() {};
 UNIT.PX = 'px';
 
-var styles$8 = {"vitro-button":"_button_vitro-button_hVfBuSO","vitro-animation-ripple":"_button_vitro-animation-ripple_7CFAk_a"};
+var styles$d = {"vitro-button":"_button_vitro-button_hVfBuSO","vitro-animation-ripple":"_button_vitro-animation-ripple_7CFAk_a"};
 
 var HTML_ELEMENT_SPAN = 'span';
 var TYPE_BUTTON = 'button';
@@ -60156,7 +60304,7 @@ var Button$2 = function Button(props) {
     },
     disabled: pending || props.isDisabled,
     type: TYPE_BUTTON,
-    className: styles$8['vitro-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$d['vitro-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     title: CTRL.EMPTY,
     onClick: onClick,
     onMouseDown: props.isCreateRipple ? createRipple : function () {}
@@ -60169,134 +60317,396 @@ var Button$2 = function Button(props) {
   return button;
 };
 
-var styles$9 = {"vitro-action-handler":"_action-handler_vitro-action-handler_1wgWRHB","vitro-icon-before":"_action-handler_vitro-icon-before_2OomEjN","vitro-icon-progress":"_action-handler_vitro-icon-progress_2QurHaw","vitro-icon-success":"_action-handler_vitro-icon-success_3Pt7XlJ","vitro-icon-error":"_action-handler_vitro-icon-error_2elcVFa","vitro-icon-warning":"_action-handler_vitro-icon-warning_3X_YncE","vitro-content":"_action-handler_vitro-content_1UEsgWV","vitro-flex":"_action-handler_vitro-flex_ryggQ_S","vitro-interface-blur":"_action-handler_vitro-interface-blur_3p_JKB_","vitro-action-handler-dialog-confirm":"_action-handler_vitro-action-handler-dialog-confirm_30dwuBp","vitro-action-handler-dialog":"_action-handler_vitro-action-handler-dialog_1rRT66e","vitro-content-container":"_action-handler_vitro-content-container_DBST6Nz","vitro-confirm":"_action-handler_vitro-confirm_24pI7Nj","vitro-progress":"_action-handler_vitro-progress_2RheviN","vitro-progress-bar":"_action-handler_vitro-progress-bar_1dwFpsn","vitro-small":"_action-handler_vitro-small_oqifqlS","vitro-button-close":"_action-handler_vitro-button-close_3mRTgQq","vitro-success":"_action-handler_vitro-success_1bfGHQQ","vitro-warning":"_action-handler_vitro-warning_2uE9UfG","vitro-error":"_action-handler_vitro-error_1XXlWG-","vitro-button-cancel":"_action-handler_vitro-button-cancel_GE8JsGp","vitro-button":"_action-handler_vitro-button_1wSNAYT","vitro-button-collapse-up":"_action-handler_vitro-button-collapse-up_2lQ6JWm","vitro-button-collapse-bottom":"_action-handler_vitro-button-collapse-bottom_aocIZUX"};
+var styles$e = {"vitro-button-cancel":"_button-cancel_vitro-button-cancel_2UT1K9Z"};
+
+var ButtonCancel = function ButtonCancel(props) {
+  return React__default.createElement(Button$2, Object.assign({}, props, {
+    className: styles$e['vitro-button-cancel'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }));
+};
+
+var styles$f = {"vitro-button-group":"_button-group_vitro-button-group_3TLqxjf"};
 
-var _excluded$7 = ["popper", "children", "show"];
-var UpdatingPopover = React__default.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+var ButtonGroup = function ButtonGroup(props) {
   return React__default.createElement("div", {
-    className: styles$9["vitro-action-handler"]
-  }, React__default.createElement(Popover$1, Object.assign({
-    ref: ref,
-    body: true,
-    content: true
-  }, props), children));
-});
+    className: styles$f['vitro-button-group'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }, props.children);
+};
 
-var styles$a = {"vitro-info-container":"_action-handler-info_vitro-info-container_eNvJr3n","vitro-action-info":"_action-handler-info_vitro-action-info_40N4L4N","vitro-item":"_action-handler-info_vitro-item_2pXL5Ks","vitro-title":"_action-handler-info_vitro-title_kdIhxqv","vitro-subtitle":"_action-handler-info_vitro-subtitle_29cfoD0","vitro-progress-bar":"_action-handler-info_vitro-progress-bar_2IxowO0","vitro-button-cancel":"_action-handler-info_vitro-button-cancel_3eqrIKx","vitro-success":"_action-handler-info_vitro-success_22wks7Q","vitro-progress":"_action-handler-info_vitro-progress_1pVf3VJ","vitro-error":"_action-handler-info_vitro-error_2JNd137","vitro-status":"_action-handler-info_vitro-status_3Ey3f6C"};
+var styles$g = {"vitro-expand-collapse-button":"_expand-collapse-button_vitro-expand-collapse-button_2O97Y_w","vitro-expanded":"_expand-collapse-button_vitro-expanded_bPbXQ6M","vitro-collapsed":"_expand-collapse-button_vitro-collapsed_1NqpRKU"};
 
-var ActionInfoItem = function ActionInfoItem(props) {
-  var getClassName = function getClassName() {
-    if (props.info.success) {
-      return styles$a['vitro-success'];
-    } else if (props.info.error) {
-      return styles$a['vitro-error'];
-    } else if (props.info.progress) {
-      return styles$a['vitro-progress'];
+var ExpandCollapseButton = function ExpandCollapseButton(props) {
+  var _useState = React.useState(props.isExpanded || false),
+    isExpanded = _useState[0],
+    setIsExpanded = _useState[1];
+  React.useEffect(function () {
+    setIsExpanded(props.isExpanded || false);
+  }, [props.isExpanded]);
+  var onClick = function onClick() {
+    setIsExpanded(!isExpanded);
+    props.onClick(!isExpanded);
+  };
+  return React__default.createElement("button", {
+    onClick: onClick,
+    className: styles$g['vitro-expand-collapse-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }, props.expandImage && props.collapseImage ? React__default.createElement(React__default.Fragment, null, isExpanded ? props.collapseImage : props.expandImage) : React__default.createElement("div", {
+    className: isExpanded ? styles$g['vitro-expanded'] : styles$g['vitro-collapsed']
+  }), isExpanded ? props.collapseText : props.expandText);
+};
+
+var LOCALE$1;
+(function (LOCALE) {
+  LOCALE["ACTION_CANCEL"] = "app.common.action.cancel";
+  LOCALE["ACTION_CLOSE"] = "app.common.action.close";
+  LOCALE["ACTION_SAVE"] = "app.common.action.save";
+  LOCALE["ACTION_SHOW_DETAIL"] = "app.common.dialog.action.showDetail";
+  LOCALE["ACTION_HIDE"] = "app.common.dialog.action.hide";
+})(LOCALE$1 || (LOCALE$1 = {}));
+
+var styles$h = {"vitro-dialog-footer":"_dialog-footer_vitro-dialog-footer_2vUQ3aG","vitro-button-group":"_dialog-footer_vitro-button-group_1HXCUOQ","vitro-button":"_dialog-footer_vitro-button_3RufMLa","vitro-detail-button":"_dialog-footer_vitro-detail-button_Ue4coux","vitro-expand":"_dialog-footer_vitro-expand_cSDlKgd","vitro-collapse":"_dialog-footer_vitro-collapse_21FwaIZ"};
+
+var DialogDetailExpandButton = function DialogDetailExpandButton(props) {
+  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
+  return React__default.createElement(ExpandCollapseButton, {
+    expandText: localeService.create(LOCALE$1.ACTION_SHOW_DETAIL),
+    collapseText: localeService.create(LOCALE$1.ACTION_HIDE),
+    expandImage: React__default.createElement("div", {
+      className: styles$h['vitro-expand']
+    }),
+    collapseImage: React__default.createElement("div", {
+      className: styles$h['vitro-collapse']
+    }),
+    onClick: props.onClick,
+    className: styles$h['vitro-detail-button']
+  });
+};
+
+var DialogFooter = function DialogFooter(props) {
+  var _props$buttonList, _props$buttonList2;
+  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
+  var labelClose = props.labelClose || localeService.create((_props$buttonList = props.buttonList) !== null && _props$buttonList !== void 0 && _props$buttonList.length ? LOCALE$1.ACTION_CANCEL : LOCALE$1.ACTION_CLOSE);
+  return React__default.createElement("div", {
+    className: styles$h['vitro-dialog-footer']
+  }, React__default.createElement(ButtonGroup, {
+    className: styles$h['vitro-button-group']
+  }, props.isShowDetailButton && React__default.createElement(DialogDetailExpandButton, {
+    onClick: props.onClickDetailButton
+  }), props.isDismissible && React__default.createElement(ButtonCancel, {
+    text: labelClose,
+    isDisabled: !props.isDismissible,
+    onClick: props.onClose,
+    className: styles$h['vitro-button']
+  }), (_props$buttonList2 = props.buttonList) !== null && _props$buttonList2 !== void 0 && _props$buttonList2.length ? props.buttonList.map(function (button) {
+    return React__default.createElement(Button$2, {
+      text: button.text,
+      onClick: function onClick() {
+        var _button$onClick;
+        return (_button$onClick = button.onClick) === null || _button$onClick === void 0 ? void 0 : _button$onClick.call(button, props.dialog);
+      },
+      isDisabled: button.isDisabled,
+      className: styles$h['vitro-button'] + (button.className ? CTRL.SPACE + button.className : CTRL.EMPTY)
+    });
+  }) : null));
+};
+
+var KEY_CODE = function KEY_CODE() {};
+KEY_CODE.ENTER = 13;
+KEY_CODE.ESC = 27;
+
+var styles$i = {"vitro-dialog":"_dialog_vitro-dialog_2NzcRZg","vitro-dialog-button-close":"_dialog_vitro-dialog-button-close_2TF5iry","vitro-hidden-content":"_dialog_vitro-hidden-content_niGbpGx","vitro-hidden":"_dialog_vitro-hidden_1kSAyNC"};
+
+var Dialog = function Dialog(props) {
+  var _props$buttonList;
+  var _useState = React.useState(null),
+    component = _useState[0],
+    setComponent = _useState[1];
+  var _useState2 = React.useState(false),
+    isShowHiddenContent = _useState2[0],
+    setIsShowHiddenContent = _useState2[1];
+  var _useState3 = React.useState(false),
+    isMobileView = _useState3[0],
+    setIsMobileView = _useState3[1];
+  var className = styles$i['vitro-dialog'];
+  var showFooter = !props.isHideFooter && (((_props$buttonList = props.buttonList) === null || _props$buttonList === void 0 ? void 0 : _props$buttonList.length) || props.onClose);
+  React.useEffect(function () {
+    updateIsMobileView();
+    window.document.addEventListener(exports.EVENT.KEYDOWN, escFunction, false);
+    return function () {
+      window.document.removeEventListener(exports.EVENT.KEYDOWN, escFunction, false);
+    };
+  }, []);
+  React.useEffect(function () {
+    if (props.content) {
+      var c = React__default.createElement(props.content.component, props.content.props);
+      setComponent(c);
+    }
+  }, [props.content]);
+  var onClose = function onClose() {
+    if (props.onClose && props.isDismissible) {
+      props.onClose(props.dialog);
+    }
+  };
+  var onOutsideClick = function onOutsideClick(e) {
+    var target = e.target;
+    if (target && target.className === className) {
+      onClose();
     }
-    return styles$a['vitro-status'];
+  };
+  var escFunction = function escFunction(e) {
+    if (e.keyCode === KEY_CODE.ESC) {
+      onClose();
+    }
+  };
+  var updateIsMobileView = function updateIsMobileView() {
+    setIsMobileView(window.innerWidth < MOBILE_VIEW.WIDTH);
+  };
+  var onClickDetailButton = function onClickDetailButton(isExpanded) {
+    setIsShowHiddenContent(isExpanded);
   };
   return React__default.createElement("div", {
-    className: styles$a['vitro-item'],
-    key: props.id
-  }, React__default.createElement("span", {
-    className: styles$a['vitro-title']
-  }, props.name), React__default.createElement("span", {
-    className: getClassName()
-  }, props.info.text));
+    className: className,
+    onClick: onOutsideClick
+  }, React__default.createElement(DialogComponent, {
+    width: props.width,
+    height: props.height,
+    className: props.className
+  }, props.isDismissible && React__default.createElement(ImageButton, {
+    className: styles$i['vitro-dialog-button-close'],
+    onClick: onClose
+  }), React__default.createElement(DialogHeader, {
+    title: props.title,
+    subtitle: props.subtitle,
+    imageUrl: props.imageUrl,
+    image: props.image,
+    className: props.headerClassName
+  }), component && React__default.createElement(DialogContent, null, component), props.children, isMobileView && props.hiddenContent && React__default.createElement(DialogDetailExpandButton, {
+    onClick: onClickDetailButton
+  }), props.hiddenContent && React__default.createElement("div", {
+    className: styles$i['vitro-hidden-content'] + (isShowHiddenContent ? CTRL.EMPTY : CTRL.SPACE + styles$i['vitro-hidden'])
+  }, props.hiddenContent), showFooter ? React__default.createElement(DialogFooter, {
+    dialog: props.dialog,
+    buttonList: props.buttonList,
+    labelClose: props.labelClose,
+    onClose: onClose,
+    isShowDetailButton: props.hiddenContent && !isMobileView ? true : false,
+    onClickDetailButton: onClickDetailButton,
+    isDismissible: props.isDismissible
+  }) : null));
 };
 
-var LOCALE$1;
+var LOCALE$2;
 (function (LOCALE) {
-  LOCALE["CONF_SINGLE"] = "app.common.msg.action.conf.single";
-  LOCALE["CONF_MULTI"] = "app.common.msg.action.conf.multi";
-  LOCALE["CONF_STD"] = "app.common.msg.action.conf.std";
-  LOCALE["ITEM_COUNT"] = "app.common.actionHandler.itemCount";
-  LOCALE["ITEM_NAME"] = "app.common.actionHandler.itemName";
-  LOCALE["SUCCESS_SINGLE"] = "app.common.msg.action.success.single";
-  LOCALE["SUCCESS_MULTI"] = "app.common.msg.action.success.multi";
-  LOCALE["SUCCESS_STD"] = "app.common.msg.action.success.std";
-  LOCALE["ERROR_SINGLE"] = "app.common.msg.action.error.single";
-  LOCALE["ERROR_MULTI"] = "app.common.msg.action.error.multi";
-  LOCALE["ERROR_STD"] = "app.common.msg.action.error.std";
-  LOCALE["PROGRESS_SINGLE"] = "app.common.msg.action.progress.single";
-  LOCALE["PROGRESS_MULTI"] = "app.common.msg.action.progress.multi";
-  LOCALE["PROGRESS_STD"] = "app.common.msg.action.progress.std";
   LOCALE["ACTION"] = "app.common.action";
-  LOCALE["ERROR_MSG"] = "app.common.msg.error";
-  LOCALE["SUCCESS"] = "success";
-  LOCALE["PROGRESS"] = "progress";
-  LOCALE["ERROR"] = "error";
   LOCALE["CANCEL"] = "app.common.action.cancel";
-  LOCALE["PENDING"] = "app.common.msg.action.pending";
-  LOCALE["PROCESSING"] = "app.common.msg.action.processing";
-  LOCALE["COMPLETE"] = "app.common.msg.action.complete";
-})(LOCALE$1 || (LOCALE$1 = {}));
-var PLACEMENT;
-(function (PLACEMENT) {
-  PLACEMENT["TOP"] = "top";
-  PLACEMENT["BOTTOM"] = "bottom";
-})(PLACEMENT || (PLACEMENT = {}));
-var TRIGGER;
-(function (TRIGGER) {
-  TRIGGER["CLICK"] = "click";
-})(TRIGGER || (TRIGGER = {}));
+  LOCALE["CONFIRM_DIALOG_TITLE"] = "app.common.actionHandler.confirmDialog.title";
+  LOCALE["RESULT_DIALOG_PROGRESS_TITLE"] = "app.common.actionHandler.resultDialog.progress.title";
+  LOCALE["RESULT_DIALOG_PROGRESS_COUNT"] = "app.common.actionHandler.resultDialog.progress.count";
+  LOCALE["RESULT_DIALOG_SUCCESS_TITLE"] = "app.common.actionHandler.resultDialog.success.title";
+  LOCALE["RESULT_DIALOG_SUCCESS_MESSAGE"] = "app.common.actionHandler.resultDialog.success.message";
+  LOCALE["RESULT_DIALOG_ERROR_TITLE"] = "app.common.actionHandler.resultDialog.error.title";
+  LOCALE["RESULT_DIALOG_ACTION_SAVE_REPORT"] = "app.common.actionHandler.resultDialog.action.saveReport";
+})(LOCALE$2 || (LOCALE$2 = {}));
 
 var ActionHandlerConstants = {
     __proto__: null,
-    get LOCALE () { return LOCALE$1; },
-    get PLACEMENT () { return PLACEMENT; },
-    get TRIGGER () { return TRIGGER; }
+    get LOCALE () { return LOCALE$2; }
 };
 
-var ActionInfo = function ActionInfo(props) {
+var styles$j = {"vitro-confirm-dialog":"_confirm-dialog_vitro-confirm-dialog_1r-CtWW","vitro-image":"_confirm-dialog_vitro-image_3vwBe8E","vitro-header":"_confirm-dialog_vitro-header_3nRlgzW"};
+
+var ConfirmDialog = function ConfirmDialog(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
-  var getInfo = function getInfo(item) {
-    var info = {
-      text: localeService.create(LOCALE$1.PENDING)
-    };
-    if (props.currentItem && item.id === props.currentItem.id) {
-      info = {
-        progress: true,
-        text: localeService.create(LOCALE$1.PROCESSING)
-      };
+  var buttonList = [{
+    onClick: props.onConfirm,
+    text: props.actionName || props.labelYes || CTRL.EMPTY
+  }];
+  return React__default.createElement(Dialog, {
+    title: localeService.create(LOCALE$2.CONFIRM_DIALOG_TITLE, {
+      actionName: props.actionName,
+      count: props.itemCount
+    }),
+    image: React__default.createElement("div", {
+      className: styles$j['vitro-image']
+    }),
+    className: styles$j['vitro-confirm-dialog'],
+    headerClassName: styles$j['vitro-header'],
+    onClose: props.onCancel,
+    buttonList: buttonList,
+    labelClose: props.labelNo,
+    isDismissible: true
+  });
+};
+
+var styles$k = {"vitro-action-result-list":"_action-result-list_vitro-action-result-list_fJtJWdL","vitro-scrollbar":"_action-result-list_vitro-scrollbar_1mcualw","vitro-result-item":"_action-result-list_vitro-result-item_2AUSpie","vitro-image-container":"_action-result-list_vitro-image-container_ModalRS","vitro-flex-column":"_action-result-list_vitro-flex-column_3z0h2Y_","vitro-name":"_action-result-list_vitro-name_10TEfnU","vitro-error-message":"_action-result-list_vitro-error-message_12OqWLU","vitro-success-message":"_action-result-list_vitro-success-message_1yRyyKc","vitro-image-success":"_action-result-list_vitro-image-success_2ovrZNi","vitro-image-error":"_action-result-list_vitro-image-error_KGQj2dj","vitro-hidden":"_action-result-list_vitro-hidden_1_bZmps","vitro-visible":"_action-result-list_vitro-visible_2K_m-HH"};
+
+var ActionResultItem = function ActionResultItem(props) {
+  return React__default.createElement("div", {
+    className: styles$k['vitro-result-item']
+  }, React__default.createElement("div", {
+    className: styles$k['vitro-image-container']
+  }, props.imageUrl && React__default.createElement(Image, {
+    defaultUrl: props.imageUrl
+  })), React__default.createElement("div", {
+    className: styles$k['vitro-flex-column']
+  }, React__default.createElement("span", {
+    className: styles$k['vitro-name']
+  }, props.name), props.id && React__default.createElement("span", {
+    className: styles$k['vitro-name']
+  }, CTRL.PARENTHESIS_OPEN + props.id + CTRL.PARENTHESIS_CLOSE), React__default.createElement("span", {
+    className: props.isSuccess ? styles$k['vitro-success-message'] : styles$k['vitro-error-message']
+  }, props.message)), React__default.createElement("div", {
+    className: props.isSuccess ? styles$k['vitro-image-success'] : styles$k['vitro-image-error']
+  }));
+};
+
+var ActionResultList = function ActionResultList(props) {
+  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
+  var listRef = React.useRef(null);
+  React.useEffect(function () {
+    var _listRef$current;
+    if (props.isVisible && !((_listRef$current = listRef.current) !== null && _listRef$current !== void 0 && _listRef$current.style.height)) {
+      setTimeout(function () {
+        if (listRef.current) {
+          var height = listRef.current.getBoundingClientRect().height;
+          console.log(height + UNIT.PX);
+          listRef.current.style.height = height + UNIT.PX;
+        }
+      }, 500);
     }
-    if (props.successResult && props.successResult.flat().find(function (itm) {
-      return itm.id === item.id;
-    })) {
-      info = {
-        success: true,
-        text: localeService.create(LOCALE$1.COMPLETE)
-      };
+  }, [props.isVisible]);
+  return React__default.createElement("div", {
+    className: styles$k['vitro-action-result-list'] + CTRL.SPACE + (props.isVisible ? styles$k['vitro-visible'] : styles$k['vitro-hidden']),
+    ref: listRef
+  }, React__default.createElement(ScrollBar, {
+    className: styles$k['vitro-scrollbar']
+  }, props.failResult.map(function (result, index) {
+    return React__default.createElement(ActionResultItem, {
+      key: index,
+      name: result[0].name,
+      id: result[0].id,
+      imageUrl: result[0].imageUrl,
+      message: result[1] ? result[1].message : CTRL.EMPTY,
+      isSuccess: false
+    });
+  }), props.successResult.map(function (result, index) {
+    return React__default.createElement(ActionResultItem, {
+      key: index,
+      name: result[0].name,
+      id: result[0].id,
+      imageUrl: result[0].imageUrl,
+      message: localeService.create(LOCALE$2.RESULT_DIALOG_SUCCESS_MESSAGE),
+      isSuccess: true
+    });
+  })));
+};
+
+var styles$l = {"vitro-result-dialog":"_result-dialog_vitro-result-dialog_kqxXHts","vitro-progress":"_result-dialog_vitro-progress_3WaZ52V","vitro-success":"_result-dialog_vitro-success_3UZikJl","vitro-error":"_result-dialog_vitro-error_3-IKuM9","vitro-header":"_result-dialog_vitro-header_2rBOm3x","vitro-image":"_result-dialog_vitro-image_19CVcbX","vitro-flex":"_result-dialog_vitro-flex_1CUfSCh","vitro-result-text":"_result-dialog_vitro-result-text_3wNan1D","vitro-button-group":"_result-dialog_vitro-button-group_2cBzj9Q","vitro-progress-bar":"_result-dialog_vitro-progress-bar_2MazExd","vitro-button-close":"_result-dialog_vitro-button-close_AJxsgiW","vitro-save-report-button":"_result-dialog_vitro-save-report-button_28kdZ5l","vitro-save-report-image":"_result-dialog_vitro-save-report-image_2fnLBCP"};
+
+var ResultDialog = function ResultDialog(props) {
+  var _useState = React.useState(styles$l['vitro-progress']),
+    state = _useState[0],
+    setState = _useState[1];
+  var _useState2 = React.useState(!props.isSuccess),
+    showInfo = _useState2[0],
+    setShowInfo = _useState2[1];
+  var _useState3 = React.useState(CTRL.EMPTY),
+    text = _useState3[0],
+    setText = _useState3[1];
+  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
+  React.useEffect(function () {
+    updateState(props.isProgress, props.isSuccess);
+    updateText(props.isProgress, props.isSuccess);
+    if (!props.isProgress) {
+      setShowInfo(!props.isSuccess);
+    }
+  }, [props.isProgress, props.isSuccess]);
+  var updateState = function updateState(isProgress, isSuccess) {
+    if (isProgress) {
+      setState(styles$l['vitro-progress']);
+      return;
     }
-    if (props.failResult && props.failResult.flat().find(function (itm) {
-      return itm.id === item.id;
-    })) {
-      var errorMessage = localeService.create(LOCALE$1.COMPLETE);
-      props.failResult.forEach(function (result) {
-        if (result[0].id === item.id && result[1].message) {
-          errorMessage = result[1].message;
-        }
-      });
-      info = {
-        error: true,
-        text: errorMessage
-      };
+    if (isSuccess) {
+      setState(styles$l['vitro-success']);
+    } else {
+      setState(styles$l['vitro-error']);
+    }
+  };
+  var updateText = function updateText(isProgress, isSuccess) {
+    if (isProgress) {
+      setText(localeService.create(LOCALE$2.RESULT_DIALOG_PROGRESS_TITLE, {
+        actionName: props.actionName
+      }));
+      return;
+    }
+    if (isSuccess) {
+      setText(localeService.create(LOCALE$2.RESULT_DIALOG_SUCCESS_TITLE, {
+        actionName: props.actionName
+      }));
+    } else {
+      setText(localeService.create(LOCALE$2.RESULT_DIALOG_ERROR_TITLE, {
+        actionName: props.actionName,
+        errorCount: props.failResult.length,
+        count: props.itemList.length
+      }));
+    }
+  };
+  var getPercentComplete = function getPercentComplete(processedItemCount) {
+    return processedItemCount * 100 / props.itemList.length;
+  };
+  var onClose = function onClose() {
+    if (props.isProgress) {
+      props.onCancel();
+    } else {
+      props.onClose();
+    }
+  };
+  var onSaveReport = function onSaveReport() {
+    if (props.onSaveReport) {
+      props.onSaveReport(props.successResult, props.failResult);
     }
-    return info;
   };
   return React__default.createElement("div", {
-    className: styles$a['vitro-info-container']
+    className: styles$l['vitro-result-dialog'] + CTRL.SPACE + state
   }, React__default.createElement("div", {
-    className: styles$a['vitro-item-container']
-  }, props.itemList.map(function (item) {
-    return React__default.createElement(ActionInfoItem, {
-      id: item.id,
-      name: item.name,
-      info: getInfo(item)
-    });
-  })));
+    className: styles$l['vitro-header']
+  }, React__default.createElement("div", {
+    className: styles$l['vitro-flex']
+  }, !props.isProgress && React__default.createElement("div", {
+    className: styles$l['vitro-image']
+  }), props.isProgress ? React__default.createElement(Heading, {
+    tag: TAG.H3,
+    text: text
+  }) : React__default.createElement("span", {
+    className: styles$l['vitro-result-text']
+  }, text), React__default.createElement(ButtonGroup, {
+    className: styles$l['vitro-button-group']
+  }, (props.isProgress || !props.isSuccess) && React__default.createElement(ExpandCollapseButton, {
+    isExpanded: showInfo,
+    onClick: function onClick(isExpanded) {
+      return setShowInfo(isExpanded);
+    }
+  }), React__default.createElement(ImageButton, {
+    className: styles$l['vitro-button-close'],
+    onClick: onClose
+  }))), props.isProgress && React__default.createElement(React__default.Fragment, null, React__default.createElement(Heading, {
+    tag: TAG.H4,
+    text: localeService.create(LOCALE$2.RESULT_DIALOG_PROGRESS_COUNT, {
+      processedCount: props.itemList.length - props.processedItemCount,
+      count: props.itemList.length
+    })
+  }), React__default.createElement(ProgressBar, {
+    className: styles$l['vitro-progress-bar'],
+    percentComplete: getPercentComplete(props.processedItemCount)
+  })), props.onSaveReport && !props.isProgress && React__default.createElement("button", {
+    onClick: onSaveReport,
+    className: styles$l['vitro-save-report-button']
+  }, localeService.create(LOCALE$2.RESULT_DIALOG_ACTION_SAVE_REPORT), React__default.createElement("div", {
+    className: styles$l['vitro-save-report-image']
+  }))), React__default.createElement(ActionResultList, {
+    successResult: props.successResult,
+    failResult: props.failResult,
+    isVisible: showInfo
+  }));
 };
 
 var AbortExceptionImpl = /*#__PURE__*/function (_Error) {
@@ -60312,94 +60722,49 @@ var actionMap = {
   progress: 1,
   after: 2
 };
-var ESC_KEY_CODE = 27;
 var ActionHandler = function ActionHandler(props) {
-  var _useState = React.useState(CTRL.EMPTY),
-    text = _useState[0],
-    setText = _useState[1];
+  var _useState = React.useState(actionMap.before),
+    currentAction = _useState[0],
+    setCurrentAction = _useState[1];
   var _useState2 = React.useState(false),
-    showItemCount = _useState2[0],
-    setShowItemCount = _useState2[1];
-  var _useState3 = React.useState(false),
-    showProgressBar = _useState3[0],
-    setShowProgressBar = _useState3[1];
-  var _useState4 = React.useState(true),
-    isCloseEnabled = _useState4[0],
-    setIsCloseEnabled = _useState4[1];
-  var _useState5 = React.useState(false),
-    show = _useState5[0],
-    setShow = _useState5[1];
-  var _useState6 = React.useState(false),
-    blockInterface = _useState6[0],
-    setBlockInterface = _useState6[1];
-  var _useState7 = React.useState(actionMap.before),
-    currentAction = _useState7[0],
-    setCurrentAction = _useState7[1];
-  var _useState8 = React.useState(null),
-    icon = _useState8[0],
-    setIcon = _useState8[1];
-  var _useState9 = React.useState(props.isConfirm ? styles$9['vitro-confirm'] : CTRL.EMPTY),
-    state = _useState9[0],
-    setState = _useState9[1];
-  var _useState10 = React.useState(true),
-    success = _useState10[0],
-    setSuccess = _useState10[1];
-  var _useState11 = React.useState([]),
-    successResult = _useState11[0],
-    setSuccessResult = _useState11[1];
-  var _useState12 = React.useState([]),
-    failResult = _useState12[0],
-    setFailResult = _useState12[1];
-  var _useState13 = React.useState(null),
-    currentItem = _useState13[0],
-    setCurrentItem = _useState13[1];
-  var _useState14 = React.useState(false),
-    showInfo = _useState14[0],
-    setShowInfo = _useState14[1];
+    isShow = _useState2[0],
+    setIsShow = _useState2[1];
+  var _useState3 = React.useState(true),
+    isSuccess = _useState3[0],
+    setIsSuccess = _useState3[1];
+  var _useState4 = React.useState([]),
+    successResult = _useState4[0],
+    setSuccessResult = _useState4[1];
+  var _useState5 = React.useState([]),
+    failResult = _useState5[0],
+    setFailResult = _useState5[1];
+  var _useState6 = React.useState(0),
+    processedItemCount = _useState6[0],
+    setProcessedItemCount = _useState6[1];
   var cancellationToken = React.useMemo(function () {
     return {
       cancel: false
     };
   }, []);
   var data = React.useMemo(function () {
-    var itemList = props.itemList || props.item ? props.itemList || [props.item] : [];
+    var itemList = props.itemList ? props.itemList : props.item ? [props.item] : [];
     return {
       itemList: itemList,
       itemCount: itemList.length
     };
   }, []);
-  var progressBarRef = React.useRef(null);
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
-  var action = props.actionText || localeService.create(LOCALE$1.ACTION + CTRL.DOT + props.actionCode);
-  React.useEffect(function () {
-    setIsCloseEnabled(currentAction !== actionMap.progress);
-    if (currentAction === actionMap.before) {
-      setState(styles$9['vitro-confirm']);
-      setShowItemCount(true);
-      setIcon(styles$9['vitro-icon-before']);
-    }
-    if (currentAction === actionMap.progress) {
-      setState(CTRL.EMPTY);
-      setShowProgressBar(!props.isHideProgressBar);
-      setShowItemCount(false);
-      setIcon(styles$9['vitro-icon-progress']);
-    }
-    if (currentAction !== actionMap.progress) {
-      setShowProgressBar(false);
-    }
-  }, [currentAction]);
+  var actionName = props.actionName || localeService.create(LOCALE$2.ACTION + CTRL.DOT + props.actionCode);
   React.useEffect(function () {
     if (!props.isShowProgress && !props.isShowAfterAction && !props.isConfirm) {
       onStart();
     } else {
-      if (props.isShow) {
-        setShow(props.isShow);
-        if (props.isConfirm) {
-          init();
-        } else {
-          onStart();
-        }
+      if (props.isConfirm) {
+        init();
+      } else {
+        onStart();
       }
+      setIsShow(true);
     }
     window.addEventListener(exports.EVENT.KEYDOWN, onEscClick, false);
     return function () {
@@ -60410,159 +60775,43 @@ var ActionHandler = function ActionHandler(props) {
     if (props.onBeforeAction) {
       props.onBeforeAction();
     }
-    if (props.isConfirm) {
-      var confText;
-      if (props.confirmText && props.confirmText()) {
-        confText = props.confirmText(data.itemCount);
-      } else {
-        if (data.itemCount == 0) {
-          confText = localeService.create(LOCALE$1.CONF_STD, {
-            actionCode: action
-          });
-        } else if (data.itemCount === 1) {
-          confText = localeService.create(LOCALE$1.CONF_SINGLE, {
-            actionCode: action,
-            itemCount: data.itemCount
-          });
-        } else {
-          confText = localeService.create(LOCALE$1.CONF_MULTI, {
-            actionCode: action,
-            itemCount: data.itemCount
-          });
-        }
-      }
-      setText(confText + CTRL.QUESTION);
-    }
     setCurrentAction(actionMap.before);
   };
   var finish = function finish(success, error, successResult, failResult) {
     if (failResult.length) {
       if (props.processError) {
+        setIsShow(false);
         props.processError(failResult);
       } else {
-        setShow(true);
+        setIsShow(true);
       }
     }
-    setSuccess(success);
+    setIsSuccess(success);
     setCurrentAction(actionMap.after);
     if (props.onAfterAction) {
       props.onAfterAction(error, successResult, failResult);
     }
-    if (props.isBlockInterface) {
-      setBlockInterface(false);
-    }
     if (!props.isShowAfterAction && !failResult.length) {
-      close(error, successResult, failResult);
+      onClose(error, successResult, failResult);
       return;
     }
-    if (props.isAutoClose) {
+    if (props.isAutoClose && success) {
       window.setTimeout(function () {
-        close(error, successResult, failResult);
+        onClose(error, successResult, failResult);
       }, props.durationMs || 5000);
     }
-    setActionResult(success, successResult, failResult);
-    if (success) {
-      if (props.successText && props.successText()) {
-        setText(props.successText(data.itemCount));
-      }
-    } else {
-      if (error && error.text) {
-        setText(error.text);
-      } else if (props.errorText) {
-        setText(props.errorText(error, data.itemCount));
-      }
-    }
-  };
-  var setActionResult = function setActionResult(success, successResult, failResult) {
-    if (success) {
-      setIcon(styles$9['vitro-icon-success']);
-      setState(styles$9['vitro-success']);
-      setSuccessText(action, successResult);
-    } else if (successResult.length && failResult.length) {
-      setIcon(styles$9['vitro-icon-warning']);
-      setState(styles$9['vitro-warning']);
-      setErrorText(action, failResult);
-    } else {
-      setIcon(styles$9['vitro-icon-error']);
-      setState(styles$9['vitro-error']);
-      setErrorText(action, failResult);
-    }
-  };
-  var setSuccessText = function setSuccessText(action, result) {
-    var key;
-    if (data.itemCount == 0) {
-      key = LOCALE$1.SUCCESS_STD;
-    } else if (data.itemCount === 1) {
-      key = LOCALE$1.SUCCESS_SINGLE;
-    } else {
-      key = LOCALE$1.SUCCESS_MULTI;
-    }
-    setText(localeService.create(key, {
-      actionCode: action,
-      count: result.length
-    }));
-  };
-  var setErrorText = function setErrorText(action, result) {
-    var key;
-    if (data.itemCount == 0) {
-      key = LOCALE$1.ERROR_STD;
-    } else if (data.itemCount === 1) {
-      key = LOCALE$1.ERROR_SINGLE;
-    } else {
-      key = LOCALE$1.ERROR_MULTI;
-    }
-    setText(localeService.create(key, {
-      actionCode: action,
-      itemCount: result.length
-    }));
-  };
-  var setProgress = function setProgress(index) {
-    var percent = index * 100 / data.itemCount;
-    if (progressBarRef.current) {
-      progressBarRef.current.style.width = percent + CTRL.PERCENT;
-    }
   };
   var onStart = function onStart() {
     try {
-      init();
-      if (props.progressText) {
-        setText(props.progressText(data.itemCount));
-      } else {
-        if (data.itemCount === 1) {
-          setText(localeService.create(LOCALE$1.PROGRESS_SINGLE, {
-            actionCode: action
-          }));
-        } else {
-          setText(localeService.create(LOCALE$1.PROGRESS_MULTI, {
-            idx: 1,
-            actionCode: action,
-            itemCount: data.itemCount
-          }));
-        }
-      }
-      ;
       setCurrentAction(actionMap.progress);
-      if (props.isBlockInterface) {
-        setBlockInterface(true);
-      }
-      ;
-      if (!props.isShowProgress && !props.isShowAfterAction && !props.isConfirm) {
-        hideDialog();
-      }
-      ;
-      var _temp2 = function () {
+      var _temp = function () {
         if (data.itemList) {
-          var _temp = _catch(function () {
-            return Promise.resolve(process()).then(function (result) {
-              finish(result.success, null, result.successResult, result.failResult);
-            });
-          }, function (error) {
-            finish(false, error, successResult, failResult);
+          return Promise.resolve(process()).then(function (result) {
+            finish(result.success, null, result.successResult, result.failResult);
           });
-          if (_temp && _temp.then) return _temp.then(function () {});
         }
       }();
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
@@ -60581,7 +60830,7 @@ var ActionHandler = function ActionHandler(props) {
     try {
       var _temp5 = function _temp5() {
         return {
-          success: _success,
+          success: success,
           successResult: _successResult,
           failResult: _failResult
         };
@@ -60589,50 +60838,39 @@ var ActionHandler = function ActionHandler(props) {
       var _interrupt = false;
       var _successResult = [];
       var _failResult = [];
-      var _success = true;
+      var success = true;
       var _i = 0;
       var _temp4 = _for(function () {
         return !_interrupt && _i <= data.itemList.length - 1;
       }, function () {
         return _i++;
       }, function () {
+        function _temp3() {
+          setProcessedItemCount(_i + 1);
+        }
         if (cancellationToken.cancel) {
           data.itemList = data.itemList.slice(0, _i + 1);
           data.itemCount = data.itemList.length;
           _interrupt = true;
           return;
         }
-        if (data.itemCount === 0) {
-          setText(localeService.create(LOCALE$1.PROGRESS_STD, {
-            actionCode: action
-          }));
-        } else if (data.itemCount > 1) {
-          setText(localeService.create(LOCALE$1.PROGRESS_MULTI, {
-            idx: _i + 1,
-            itemCount: data.itemCount,
-            actionCode: action
-          }));
-        } else {
-          setText(localeService.create(LOCALE$1.PROGRESS_SINGLE, {
-            actionCode: action
-          }));
-        }
         var item = data.itemList[_i];
-        setCurrentItem(item);
-        setProgress(_i + 1);
-        var _temp3 = _catch(function () {
+        var _temp2 = _catch(function () {
           return Promise.resolve(props.processItem(item)).then(function (result) {
             _successResult.push([item, result]);
             setSuccessResult(_successResult);
           });
         }, function (error) {
-          _failResult.push([item, error]);
+          var err = onError(error);
+          _failResult.push([item, err]);
           setFailResult(_failResult);
-          _success = false;
-          setSuccess(false);
-          console.error(error);
+          success = false;
+          setIsSuccess(false);
+          if (err) {
+            console.error(err);
+          }
         });
-        if (_temp3 && _temp3.then) return _temp3.then(function () {});
+        return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
       });
       return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
     } catch (e) {
@@ -60643,142 +60881,87 @@ var ActionHandler = function ActionHandler(props) {
     try {
       var _temp7 = function _temp7() {
         return {
-          success: _success2,
+          success: success,
           successResult: _successResult2,
           failResult: _failResult2
         };
       };
       var _successResult2 = [];
       var _failResult2 = [];
-      var _success2 = true;
+      var success = true;
       var _temp6 = _catch(function () {
         return Promise.resolve(props.processItem({})).then(function (result) {
           _successResult2.push([{}, result]);
           setSuccessResult(_successResult2);
         });
       }, function (error) {
-        _failResult2.push([{}, error]);
+        var err = onError(error);
+        _failResult2.push([{}, err]);
         setFailResult(_failResult2);
-        _success2 = false;
-        setSuccess(false);
-        console.error(error);
+        success = false;
+        setIsSuccess(false);
+        if (err) {
+          console.error(err);
+        }
       });
       return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp7) : _temp7(_temp6));
     } catch (e) {
       return Promise.reject(e);
     }
   };
-  var onEnter = function onEnter() {
-    if (!props.isShowProgress && !props.isShowAfterAction && !props.isConfirm) {
-      window.document.body.click();
-    }
-    if (currentAction !== actionMap.progress) {
-      init();
-    }
-    if (!props.isConfirm) {
-      onStart();
-    }
-  };
   var onEscClick = function onEscClick(e) {
-    if (e.keyCode === ESC_KEY_CODE && currentAction === actionMap.before) {
-      hideDialog();
+    if (e.keyCode === KEY_CODE.ESC && currentAction === actionMap.before) {
+      onClose();
     }
   };
-  var hideDialog = function hideDialog() {
-    setShow(false);
-    window.document.body.click();
-  };
-  var close = function close(error, successResult, failResult) {
-    if (isCloseEnabled) {
-      if (currentAction == actionMap.after && props.onAfterActionClose) {
-        props.onAfterActionClose(error, successResult, failResult);
-      }
-      hideDialog();
-    }
-    if (currentAction === actionMap.progress) {
-      cancellationToken.cancel = true;
+  var onClose = function onClose(error, successResult, failResult) {
+    if (props.onAfterActionClose) {
+      props.onAfterActionClose(error || null, successResult || [], failResult || []);
     }
+    setIsShow(false);
   };
   var onCancel = function onCancel() {
     if (props.onAfterAction) {
       props.onAfterAction(new AbortExceptionImpl(), [], []);
     }
-    hideDialog();
+    cancellationToken.cancel = true;
+    onClose();
   };
-  var getSelectedItemText = function getSelectedItemText() {
-    if (data.itemCount === 1 && data.itemList[0].name) {
-      return localeService.create(LOCALE$1.ITEM_NAME, {
-        itemName: data.itemList[0].name
-      });
+  var onError = function onError(error) {
+    if (props.onError) {
+      var res = props.onError(error);
+      if (res.abort) {
+        cancellationToken.cancel = true;
+      }
+      return res.exception;
     }
-    return localeService.create(LOCALE$1.ITEM_COUNT, {
-      itemCount: data.itemCount
-    });
+    return error;
   };
-  var showConfirmButtonGroup = props.isConfirm && currentAction === actionMap.before;
-  var showCloseButtonGroup = currentAction !== actionMap.before;
-  var positionCenter = !props.target && !props.children;
-  var content = React__default.createElement("div", {
-    className: styles$9['vitro-content'] + CTRL.SPACE + state
-  }, React__default.createElement("div", {
-    className: styles$9['vitro-content-container']
-  }, React__default.createElement("div", {
-    className: styles$9['vitro-flex']
-  }, icon && React__default.createElement("div", {
-    className: icon
-  }), React__default.createElement("span", null, text), showCloseButtonGroup && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: showInfo ? styles$9['vitro-button-collapse-up'] : styles$9['vitro-button-collapse-bottom'],
-    onClick: function onClick() {
-      return setShowInfo(!showInfo);
-    }
-  }), currentAction != actionMap.before && React__default.createElement("div", {
-    className: styles$9['vitro-button-close'],
-    onClick: close
-  }))), showItemCount && React__default.createElement("span", {
-    className: styles$9['vitro-small']
-  }, getSelectedItemText()), showInfo && React__default.createElement(ActionInfo, {
+  if (!isShow) {
+    return React__default.createElement(React__default.Fragment, null);
+  }
+  return React__default.createElement(React__default.Fragment, null, currentAction === actionMap.before ? React__default.createElement(ConfirmDialog, {
+    actionName: props.actionName || actionName,
+    itemCount: data.itemCount,
+    labelNo: props.labelNo,
+    labelYes: props.labelYes,
+    onCancel: onClose,
+    onConfirm: onStart
+  }) : React__default.createElement(ResultDialog, {
+    actionName: actionName,
     itemList: data.itemList,
+    processedItemCount: processedItemCount,
+    isSuccess: isSuccess,
+    isProgress: currentAction === actionMap.progress,
     successResult: successResult,
     failResult: failResult,
-    actionCode: props.actionCode,
-    action: currentAction,
-    isSuccess: success,
-    currentItem: currentItem
-  })), showProgressBar && React__default.createElement("div", {
-    className: styles$9['vitro-progress']
-  }, React__default.createElement("div", {
-    className: styles$9['vitro-progress-bar'],
-    ref: progressBarRef
-  })), showConfirmButtonGroup && React__default.createElement(ButtonGroup, null, React__default.createElement(Button$2, {
-    onClick: onCancel,
-    text: localeService.create(LOCALE$1.CANCEL) || props.labelNo || CTRL.EMPTY,
-    className: styles$9['vitro-button-cancel']
-  }), React__default.createElement(Button$2, {
-    onClick: onStart,
-    text: action || props.labelYes || CTRL.EMPTY,
-    isDisabled: currentAction !== actionMap.before,
-    className: styles$9['vitro-button']
-  })));
-  return React__default.createElement(React__default.Fragment, null, props.children && React__default.createElement(OverlayTrigger, {
-    trigger: TRIGGER.CLICK,
-    onEnter: onEnter,
-    rootClose: isCloseEnabled,
-    placement: props.placement || PLACEMENT.TOP,
-    overlay: React__default.createElement(UpdatingPopover, null, content)
-  }, React__default.createElement("div", null, props.children)), props.target && !props.children && React__default.createElement(Overlay$1, {
-    show: show,
-    target: props.target,
-    rootClose: isCloseEnabled,
-    onHide: close,
-    placement: props.placement || PLACEMENT.TOP
-  }, React__default.createElement(UpdatingPopover, null, content)), positionCenter && show && React__default.createElement("div", {
-    className: currentAction === actionMap.before ? styles$9['vitro-action-handler-dialog-confirm'] : styles$9['vitro-action-handler-dialog']
-  }, content), blockInterface && React__default.createElement("div", {
-    className: styles$9['vitro-interface-blur']
+    onSaveReport: props.onSaveReport,
+    onClose: onClose,
+    onCancel: onCancel
   }));
 };
 
-var styles$b = {"vitro-view-part":"_view-part_vitro-view-part_3j_gZpl"};
+var styles$m = {"vitro-view-part":"_view-part_vitro-view-part_3j_gZpl"};
 
 var ViewPart = function ViewPart(props) {
   var _useState = React.useState(null),
@@ -60794,11 +60977,11 @@ var ViewPart = function ViewPart(props) {
     }
   }, [props.component, props.settings, props.item]);
   return React__default.createElement("div", {
-    className: styles$b['vitro-view-part'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$m['vitro-view-part'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, component);
 };
 
-var styles$c = {"vitro-dropdown-button":"_dropdown-button_vitro-dropdown-button_1myvkhB","vitro-dropdown-icon":"_dropdown-button_vitro-dropdown-icon_2aKCNii","vitro-text":"_dropdown-button_vitro-text_1FRiwp0","vitro-dropdown-button-item-overflow":"_dropdown-button_vitro-dropdown-button-item-overflow_2aWEhD4","vitro-image":"_dropdown-button_vitro-image_3bX1quk","dropdown-item":"_dropdown-button_dropdown-item_1c2DhhE"};
+var styles$n = {"vitro-dropdown-button":"_dropdown-button_vitro-dropdown-button_1myvkhB","vitro-dropdown-icon":"_dropdown-button_vitro-dropdown-icon_2aKCNii","vitro-text":"_dropdown-button_vitro-text_1FRiwp0","vitro-dropdown-button-item-overflow":"_dropdown-button_vitro-dropdown-button-item-overflow_2aWEhD4","vitro-image":"_dropdown-button_vitro-image_3bX1quk","dropdown-item":"_dropdown-button_dropdown-item_1c2DhhE"};
 
 var w$4 = window;
 var ALIGN_END = 'end';
@@ -60852,10 +61035,10 @@ var DropdownButton = function DropdownButton(props) {
     return !!item.imageUrl;
   }) ? true : false;
   return React__default.createElement("div", {
-    className: styles$c['vitro-dropdown-button'] + CTRL.SPACE + (props.className || CTRL.EMPTY)
+    className: styles$n['vitro-dropdown-button'] + CTRL.SPACE + (props.className || CTRL.EMPTY)
   }, overflowItemList.map(function (item) {
     return React__default.createElement("div", {
-      className: styles$c['vitro-dropdown-button-item-overflow'],
+      className: styles$n['vitro-dropdown-button-item-overflow'],
       key: item.key,
       onClick: function onClick(e) {
         return item.onClick(item.value, e);
@@ -60863,37 +61046,26 @@ var DropdownButton = function DropdownButton(props) {
     }, item.imageUrl && React__default.createElement(Image, {
       defaultUrl: item.imageUrl,
       hoverUrl: item.imageHoverUrl,
-      className: styles$c['vitro-image']
+      className: styles$n['vitro-image']
     }), React__default.createElement("span", null, item.text));
   }), dropItemList.length > 0 && React__default.createElement(BootstrapDropdown, {
     align: ALIGN_END,
     onToggle: onDropdownToggle
   }, React__default.createElement(BootstrapDropdown.Toggle, null, props.title && React__default.createElement("span", {
-    className: styles$c['vitro-title']
+    className: styles$n['vitro-title']
   }, props.title), React__default.createElement("span", {
-    className: styles$c['vitro-dropdown-icon']
+    className: styles$n['vitro-dropdown-icon']
   })), React__default.createElement(BootstrapDropdown.Menu, {
     renderOnMount: true,
     flip: props.flip !== false
   }, dropItemList.map(function (x) {
-    return x.isConfirm && x.actionCode ? React__default.createElement(ActionHandler, {
-      key: x.key,
-      actionCode: x.actionCode,
-      processItem: function processItem() {
-        return x.onClick(x.value);
-      },
-      item: x,
-      isConfirm: true
-    }, React__default.createElement("a", {
-      className: styles$c['dropdown-item'],
-      role: 'button'
-    }, x.text)) : React__default.createElement(BootstrapDropdown.Item, {
+    return React__default.createElement(BootstrapDropdown.Item, {
       key: x.key,
       onClick: function onClick(e) {
         return x.onClick(x.value, e);
       }
     }, isShowImage && React__default.createElement("div", {
-      className: styles$c['vitro-image']
+      className: styles$n['vitro-image']
     }, x.imageUrl && React__default.createElement(Image, {
       defaultUrl: x.imageUrl,
       hoverUrl: x.imageHoverUrl
@@ -60901,12 +61073,12 @@ var DropdownButton = function DropdownButton(props) {
   }))));
 };
 
-var styles$d = {"vitro-tab":"_tab-group_vitro-tab_1Qb50HL","vitro-item":"_tab-group_vitro-item_2YnBcmb","active":"_tab-group_active_3M-IIR2","vitro-dropdown-button":"_tab-group_vitro-dropdown-button_146jv_h"};
+var styles$o = {"vitro-tab":"_tab-group_vitro-tab_1Qb50HL","vitro-item":"_tab-group_vitro-item_2YnBcmb","active":"_tab-group_active_3M-IIR2","vitro-dropdown-button":"_tab-group_vitro-dropdown-button_146jv_h"};
 
 var OverflowButton = function OverflowButton(props) {
   if (!props.list || !props.list.length) return null;
   return React__default.createElement(DropdownButton, {
-    className: styles$d['vitro-dropdown-button'],
+    className: styles$o['vitro-dropdown-button'],
     itemList: props.list.map(function (x, i) {
       return _extends({}, x, {
         value: x.index,
@@ -60922,9 +61094,9 @@ var OverflowButton = function OverflowButton(props) {
 var Tab = function Tab(props) {
   return React__default.createElement("div", {
     key: props.index,
-    className: styles$d['vitro-item']
+    className: styles$o['vitro-item']
   }, React__default.createElement(Nav$2.Item, {
-    className: props.active ? styles$d['active'] : undefined,
+    className: props.active ? styles$o['active'] : undefined,
     onClick: function onClick() {
       return props.onClick(props.index);
     }
@@ -61043,7 +61215,7 @@ var TabGroupComponent = function TabGroupComponent(props) {
     }
   }, [props.itemList]);
   return React__default.createElement("div", {
-    className: styles$d['vitro-tab'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$o['vitro-tab'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     ref: ref
   }, React__default.createElement(TabGroupHeader, {
     itemList: tabList,
@@ -61081,22 +61253,22 @@ var TabGroup = function TabGroup(props) {
   }, React__default.createElement(TabGroupComponent, Object.assign({}, props))) : React__default.createElement(TabGroupComponent, Object.assign({}, props));
 };
 
-var styles$e = {"vitro-control":"_control-group_vitro-control_2h_sXQv","vitro-control-row":"_control-group_vitro-control-row_6l8m5Wh","vitro-label":"_control-group_vitro-label_3J193Ml"};
+var styles$p = {"vitro-control":"_control-group_vitro-control_2h_sXQv","vitro-control-row":"_control-group_vitro-control-row_6l8m5Wh","vitro-label":"_control-group_vitro-label_3J193Ml"};
 
 var ControlGroup = function ControlGroup(props) {
   if (props.horizontal) {
     return React__default.createElement("div", {
-      className: 'container ' + styles$e['vitro-control']
+      className: 'container ' + styles$p['vitro-control']
     }, React__default.createElement("div", {
       className: props.as
     }, props.children));
   }
   return React__default.createElement("div", {
-    className: styles$e['vitro-control-row']
+    className: styles$p['vitro-control-row']
   }, props.children);
 };
 
-var styles$f = {"vitro-view":"_view_vitro-view_1NKb-kU","vitro-view-part":"_view_vitro-view-part_X1Zzk97"};
+var styles$q = {"vitro-view":"_view_vitro-view_1NKb-kU","vitro-view-part":"_view_vitro-view-part_X1Zzk97","vitro-tab":"_view_vitro-tab_2sqf0L9"};
 
 var View = function View(props) {
   var _useState = React.useState([]),
@@ -61122,9 +61294,10 @@ var View = function View(props) {
     }
   }, [props.tabList]);
   return tabList && React__default.createElement("div", {
-    className: styles$f["vitro-view"]
+    className: styles$q['vitro-view']
   }, React__default.createElement(TabGroup, {
     itemList: tabList,
+    className: styles$q['vitro-tab'],
     wrap: true
   }));
 };
@@ -61137,7 +61310,7 @@ var GetGroupControl = function GetGroupControl(props) {
       settings: viewPart.settings,
       props: props,
       item: props.item,
-      className: styles$f['vitro-view-part']
+      className: styles$q['vitro-view-part']
     });
   })) : props.componentList.map(function (viewPart) {
     return React__default.createElement(ViewPart, {
@@ -61149,16 +61322,16 @@ var GetGroupControl = function GetGroupControl(props) {
   }));
 };
 
-var styles$g = {"vitro-label":"_label_vitro-label_it8WNUE","vitro-required":"_label_vitro-required_2-bSGif"};
+var styles$r = {"vitro-label":"_label_vitro-label_it8WNUE","vitro-required":"_label_vitro-required_2-bSGif"};
 
 var Label = function Label(props) {
   return React__default.createElement("div", {
-    className: styles$g['vitro-label'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$r['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$g['vitro-required']
+    className: styles$r['vitro-required']
   }, CTRL.ASTERISK));
 };
 
@@ -61173,10 +61346,7 @@ var AUTOCOMPLETE;
   AUTOCOMPLETE["OFF"] = "off";
 })(AUTOCOMPLETE || (AUTOCOMPLETE = {}));
 
-var KEY_CODE = function KEY_CODE() {};
-KEY_CODE.ENTER = 13;
-
-var styles$h = {"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-text":"_input_vitro-error-text_QpZK56k","vitro-button-copy":"_input_vitro-button-copy_jjyktjx"};
+var styles$s = {"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-text":"_input_vitro-error-text_QpZK56k","vitro-button-copy":"_input_vitro-button-copy_jjyktjx"};
 
 var Input = React.forwardRef(function (props, ref) {
   var control;
@@ -61195,7 +61365,7 @@ var Input = React.forwardRef(function (props, ref) {
     setInputValue(value);
   }, [props.value]);
   React.useEffect(function () {
-    setState(props.errorMessage || props.isError ? styles$h['vitro-error'] : CTRL.EMPTY);
+    setState(props.errorMessage || props.isError ? styles$s['vitro-error'] : CTRL.EMPTY);
   }, [props.errorMessage, props.isError]);
   React.useEffect(function () {
     var jsonStyle = {};
@@ -61229,13 +61399,13 @@ var Input = React.forwardRef(function (props, ref) {
     }
   };
   var onBlur = function onBlur(e) {
-    setState(props.errorMessage || props.isError ? styles$h['vitro-error'] : CTRL.EMPTY);
+    setState(props.errorMessage || props.isError ? styles$s['vitro-error'] : CTRL.EMPTY);
     if (props.onBlur) {
       props.onBlur(e);
     }
   };
   var onFocus = function onFocus(e) {
-    setState(styles$h['vitro-focus']);
+    setState(styles$s['vitro-focus']);
     if (props.onFocus) {
       props.onFocus(e);
     }
@@ -61300,19 +61470,19 @@ var Input = React.forwardRef(function (props, ref) {
     });
     if (props.isIcon) {
       control = React__default.createElement("div", {
-        className: styles$h['vitro-icon-control'] + CTRL.SPACE + state
+        className: styles$s['vitro-icon-control'] + CTRL.SPACE + state
       }, input);
     } else {
       control = input;
     }
   }
   var getClassName = function getClassName() {
-    var classList = [styles$h['vitro-control'], props.className];
+    var classList = [styles$s['vitro-control'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$h['vitro-read-only']);
+      classList.push(styles$s['vitro-read-only']);
     }
     if (props.labelPosition === POSITION.LEFT) {
-      classList.push(styles$h['vitro-left-label']);
+      classList.push(styles$s['vitro-left-label']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -61323,34 +61493,34 @@ var Input = React.forwardRef(function (props, ref) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$h['vitro-label']
+    className: styles$s['vitro-label']
   }), control, props.isReadOnly && props.isShowCopyButton !== false ? React__default.createElement("span", {
-    className: styles$h['vitro-button-copy'],
+    className: styles$s['vitro-button-copy'],
     onClick: copyValue
   }) : null, props.children, props.errorMessage && React__default.createElement("span", {
-    className: styles$h['vitro-error-text']
+    className: styles$s['vitro-error-text']
   }, props.errorMessage));
 });
 
-var styles$i = {"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$t = {"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$i['vitro-issue-tile-footer']
+    className: styles$t['vitro-issue-tile-footer']
   }, React__default.createElement("div", {
-    className: styles$i['vitro-issue-tile-status']
+    className: styles$t['vitro-issue-tile-status']
   }, props.statusColor && React__default.createElement("div", {
-    className: styles$i['vitro-status-color'],
+    className: styles$t['vitro-status-color'],
     style: {
       background: props.statusColor
     }
   }), props.status), props.onShowMoreClick && React__default.createElement("div", {
     onClick: props.onShowMoreClick,
-    className: styles$i['vitro-button-more']
+    className: styles$t['vitro-button-more']
   }));
 };
 
-var styles$j = {"vitro-avatar":"_avatar_vitro-avatar_P2tU-_r"};
+var styles$u = {"vitro-avatar":"_avatar_vitro-avatar_P2tU-_r"};
 
 var Avatar = function Avatar(props) {
   var getInitials = function getInitials() {
@@ -61389,7 +61559,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$j['vitro-avatar'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY);
+  var className = styles$u['vitro-avatar'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY);
   return React__default.createElement("div", {
     className: className,
     style: props.image ? {} : {
@@ -61400,44 +61570,44 @@ var Avatar = function Avatar(props) {
   }) : getInitials());
 };
 
-var styles$k = {"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$v = {"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$k['vitro-issue-tile-header']
+    className: styles$v['vitro-issue-tile-header']
   }, React__default.createElement("a", {
-    className: styles$k['vitro-link'],
+    className: styles$v['vitro-link'],
     href: props.url,
     target: TARGET_BLANK
   }, CTRL.SHARP + props.id), React__default.createElement("div", {
-    className: styles$k['vitro-user-info']
+    className: styles$v['vitro-user-info']
   }, React__default.createElement(Avatar, {
     image: props.userImage,
     userName: props.userName,
-    className: styles$k['vitro-avatar']
+    className: styles$v['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$k['vitro-link'],
+    className: styles$v['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$k['vitro-dropdown-button']
+    className: styles$v['vitro-dropdown-button']
   }) : null);
 };
 
-var LOCALE$2;
+var LOCALE$3;
 (function (LOCALE) {
   LOCALE["TEXTAREA_LABEL"] = "app.common.issueTile.textareaLabel";
-})(LOCALE$2 || (LOCALE$2 = {}));
+})(LOCALE$3 || (LOCALE$3 = {}));
 
-var styles$l = {"vitro-issue-tile":"_issue-tile_vitro-issue-tile_2D7E9Y-","vitro-control":"_issue-tile_vitro-control_3V6_Ze7"};
+var styles$w = {"vitro-issue-tile":"_issue-tile_vitro-issue-tile_2D7E9Y-","vitro-control":"_issue-tile_vitro-control_3V6_Ze7"};
 
 var IssueTile = function IssueTile(props) {
   return React__default.createElement("div", {
     id: 'vitro-issue-tile-' + props.id,
-    className: styles$l['vitro-issue-tile'] + (props.isActive ? CTRL.SPACE + 'vitro-active' : CTRL.EMPTY),
+    className: styles$w['vitro-issue-tile'] + (props.isActive ? CTRL.SPACE + 'vitro-active' : CTRL.EMPTY),
     onClick: props.onClick
   }, React__default.createElement(IssueTileHeader, {
     id: props.id,
@@ -61450,9 +61620,9 @@ var IssueTile = function IssueTile(props) {
     actionList: props.actionList
   }), React__default.createElement(Input, {
     isMultiline: true,
-    label: props.createLocale(LOCALE$2.TEXTAREA_LABEL),
+    label: props.createLocale(LOCALE$3.TEXTAREA_LABEL),
     onBlur: props.onBlur,
-    className: styles$l['vitro-control'],
+    className: styles$w['vitro-control'],
     value: props.text,
     rows: 7
   }), React__default.createElement(IssueTileFooter, {
@@ -61462,7 +61632,7 @@ var IssueTile = function IssueTile(props) {
   }));
 };
 
-var styles$m = {"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-position-absolute":"_file-version-select_vitro-position-absolute_1ENrwLq","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$x = {"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) {
@@ -61473,7 +61643,7 @@ var Item$1 = function Item(props) {
     }
   }, [versionNameRef]);
   return React__default.createElement("li", {
-    className: styles$m['vitro-file-version-item'] + CTRL.SPACE + (props.isActive ? styles$m['vitro-active'] : CTRL.EMPTY),
+    className: styles$x['vitro-file-version-item'] + CTRL.SPACE + (props.isActive ? styles$x['vitro-active'] : CTRL.EMPTY),
     onClick: function onClick() {
       return props.onClick(props.version);
     }
@@ -61482,48 +61652,16 @@ var Item$1 = function Item(props) {
     style: props.versionWidth ? {
       width: props.versionWidth + UNIT.PX
     } : {},
-    className: props.isActive ? props.isCurrent ? styles$m['vitro-version-name-green'] : styles$m['vitro-version-name-red'] : styles$m['vitro-version-name']
+    className: props.isActive ? props.isCurrent ? styles$x['vitro-version-name-green'] : styles$x['vitro-version-name-red'] : styles$x['vitro-version-name']
   }, VERSION_PREFIX + props.version.name), React__default.createElement("div", {
-    className: styles$m['vitro-content']
+    className: styles$x['vitro-content']
   }, React__default.createElement("div", {
-    className: styles$m['vitro-file-name']
+    className: styles$x['vitro-file-name']
   }, props.fileName), React__default.createElement("div", {
-    className: styles$m['vitro-flex']
+    className: styles$x['vitro-flex']
   }, React__default.createElement("span", null, props.version.userName), React__default.createElement("span", null, props.version.date))));
 };
 
-var PLACEMENT$1;
-(function (PLACEMENT) {
-  PLACEMENT["LEFT"] = "left";
-  PLACEMENT["TOP"] = "top";
-  PLACEMENT["RIGHT"] = "right";
-  PLACEMENT["BOTTOM"] = "bottom";
-})(PLACEMENT$1 || (PLACEMENT$1 = {}));
-
-var TooltipConstants = {
-    __proto__: null,
-    get PLACEMENT () { return PLACEMENT$1; }
-};
-
-var styles$n = {"vitro-tooltip":"_tooltip_vitro-tooltip_JvGPShz"};
-
-var Tooltip$1 = function Tooltip(props) {
-  if (!props.text) {
-    return props.children;
-  }
-  return React__default.createElement(OverlayTrigger, {
-    placement: props.placement || PLACEMENT$1.TOP,
-    delay: {
-      show: 750,
-      hide: 0
-    },
-    show: props.isShow,
-    overlay: React__default.createElement(TooltipComponent, {
-      className: styles$n['vitro-tooltip']
-    }, props.text)
-  }, props.children);
-};
-
 var VERSION_PREFIX$1 = 'v';
 var FileVersionSelect = function FileVersionSelect(props) {
   var _useState = React.useState(false),
@@ -61585,27 +61723,30 @@ var FileVersionSelect = function FileVersionSelect(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$m['vitro-file-version-select'],
+    className: styles$x['vitro-file-version-select'],
     ref: selectRef
   }, selectedVersion && React__default.createElement("div", {
-    className: styles$m['vitro-selected-version'],
+    className: styles$x['vitro-selected-version'],
     onClick: onCollapseButtonClick
   }, React__default.createElement("div", {
     ref: fileNameRef,
     onMouseOver: onMouseOver,
+    className: styles$x['vitro-file-name']
+  }, props.fileName), showFileName && React__default.createElement("div", {
+    className: styles$x['vitro-file-name-tip'],
     onMouseLeave: function onMouseLeave() {
       return setShowFileName(false);
     },
-    className: styles$m['vitro-file-name'] + (showFileName ? CTRL.SPACE + styles$m['vitro-position-absolute'] : CTRL.EMPTY)
+    onClick: onCollapseButtonClick
   }, props.fileName), React__default.createElement(Tooltip$1, {
-    placement: PLACEMENT$1.BOTTOM,
+    placement: PLACEMENT.BOTTOM,
     text: isCurrent ? props.tooltipTextCurrent : props.tooltipTextNotCurrent
   }, React__default.createElement("div", {
-    className: isCurrent ? styles$m['vitro-version-name-green'] : styles$m['vitro-version-name-red']
+    className: isCurrent ? styles$x['vitro-version-name-green'] : styles$x['vitro-version-name-red']
   }, VERSION_PREFIX$1 + selectedVersion.name)), React__default.createElement("div", {
-    className: showValueList ? styles$m['vitro-button-collapse-up'] : styles$m['vitro-button-collapse-bottom']
+    className: showValueList ? styles$x['vitro-button-collapse-up'] : styles$x['vitro-button-collapse-bottom']
   })), showValueList && React__default.createElement("ul", {
-    className: styles$m['vitro-version-list']
+    className: styles$x['vitro-version-list']
   }, React__default.createElement(ScrollBar, null, props.itemList.map(function (item) {
     return React__default.createElement(Item$1, {
       version: item,
@@ -61708,7 +61849,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.96";
+var version$1 = "1.1.98";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -61851,7 +61992,7 @@ var PdfViewer = function PdfViewer(props) {
   });
 };
 
-var styles$o = {"vitro-login-content":"_login-content_vitro-login-content_2RdLZle"};
+var styles$y = {"vitro-login-content":"_login-content_vitro-login-content_2RdLZle"};
 
 var LoginContent = function LoginContent(props) {
   var ref = React.useRef(null);
@@ -61862,30 +62003,30 @@ var LoginContent = function LoginContent(props) {
     }
   }, [props.children]);
   return React__default.createElement("div", {
-    className: styles$o['vitro-login-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$y['vitro-login-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     ref: ref
   }, props.children);
 };
 
-var styles$p = {"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$z = {"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$p['vitro-footer']
+    className: styles$z['vitro-footer']
   }, React__default.createElement("div", {
-    className: styles$p['vitro-language']
+    className: styles$z['vitro-language']
   }), React__default.createElement("ul", {
-    className: styles$p['vitro-link-list']
+    className: styles$z['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$p['vitro-copyright']
+    className: styles$z['vitro-copyright']
   }, props.copyright));
 };
 
-var LOCALE$3;
+var LOCALE$4;
 (function (LOCALE) {
   LOCALE["LOGIN_FORM_ERROR_EMPTY"] = "app.common.login.loginForm.error.empty";
   LOCALE["LOGIN_FORM_FIELD_NAME"] = "app.common.login.loginForm.field.userName";
@@ -61912,7 +62053,7 @@ var LOCALE$3;
   LOCALE["SEPARATOR_TEXT"] = "app.common.login.separatorText";
   LOCALE["TITLE"] = "app.common.login.title";
   LOCALE["COPYRIGHT"] = "app.common.login.copyright";
-})(LOCALE$3 || (LOCALE$3 = {}));
+})(LOCALE$4 || (LOCALE$4 = {}));
 var FIELD_NAME;
 (function (FIELD_NAME) {
   FIELD_NAME["USER_NAME"] = "userName";
@@ -61923,19 +62064,19 @@ var FIELD_NAME;
 var Login = function Login(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   return React__default.createElement("div", {
-    className: styles$p['vitro-login-layout']
+    className: styles$z['vitro-login-layout']
   }, React__default.createElement("div", {
-    className: styles$p['vitro-login']
+    className: styles$z['vitro-login']
   }, React__default.createElement(Image, {
-    className: styles$p['vitro-logo'],
+    className: styles$z['vitro-logo'],
     defaultUrl: props.logo
   }), React__default.createElement(LoginContent, null, props.children)), React__default.createElement(LoginFooter, {
-    copyright: props.copyright || localeService.create(LOCALE$3.COPYRIGHT),
+    copyright: props.copyright || localeService.create(LOCALE$4.COPYRIGHT),
     itemList: props.linkItemList
   }));
 };
 
-var styles$q = {"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$A = {"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),
@@ -61959,14 +62100,14 @@ var Checkbox = React.forwardRef(function (props, ref) {
     props.onChange && props.onChange(!value, props.name);
     _setValue(!value);
   };
-  var className = styles$q['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$q['vitro-left-label'] : CTRL.EMPTY) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY);
+  var className = styles$A['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$A['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$q['vitro-label']
+    className: styles$A['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$q['vitro-checkbox-content']
+    className: styles$A['vitro-checkbox-content']
   }, React__default.createElement("input", {
     ref: checkboxRef,
     disabled: props.isDisabled,
@@ -61976,7 +62117,7 @@ var Checkbox = React.forwardRef(function (props, ref) {
     onChange: onChange
   }), props.labelPosition !== POSITION.LEFT && React__default.createElement(Label, {
     text: props.label,
-    className: styles$q['vitro-label']
+    className: styles$A['vitro-label']
   })));
 });
 
@@ -61986,22 +62127,22 @@ var TYPE;
   TYPE["PASSWORD"] = "password";
 })(TYPE || (TYPE = {}));
 
-var styles$r = {"vitro-button-show-password":"_password-input_vitro-button-show-password_2jL4nM-","vitro-button-hide-password":"_password-input_vitro-button-hide-password_vPoUeVl"};
+var styles$B = {"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$r['vitro-button-show-password']),
+  var _useState2 = React.useState(styles$B['vitro-button-show-password']),
     icon = _useState2[0],
     setIcon = _useState2[1];
   var togglePassword = function togglePassword() {
     if (type === TYPE.PASSWORD) {
       setType(TYPE.TEXT);
-      setIcon(styles$r['vitro-button-hide-password']);
+      setIcon(styles$B['vitro-button-hide-password']);
     } else {
       setType(TYPE.PASSWORD);
-      setIcon(styles$r['vitro-button-show-password']);
+      setIcon(styles$B['vitro-button-show-password']);
     }
   };
   return React__default.createElement(Input, Object.assign({}, props, {
@@ -62013,39 +62154,39 @@ var PasswordInput = React.forwardRef(function (props, ref) {
   }));
 });
 
-var styles$s = {"vitro-link":"_link_vitro-link_2ePaXvd"};
+var styles$C = {"vitro-link":"_link_vitro-link_2ePaXvd"};
 
 var Link = function Link(props) {
   return React__default.createElement("a", {
-    className: styles$s['vitro-link'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$C['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$t = {"vitro-submit-button":"_login-submit-button_vitro-submit-button_1TFkn8x"};
+var styles$D = {"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$t['vitro-submit-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
-    text: localeService.create(LOCALE$3.ACTION_LOGIN),
+    className: styles$D['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$u = {"vitro-login-title":"_login-title_vitro-login-title_3Y4jqav"};
+var styles$E = {"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$u['vitro-login-title'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
-  }, props.text || localeService.create(LOCALE$3.LOGIN_FORM_TITLE));
+    className: styles$E['vitro-login-title'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }, props.text || localeService.create(LOCALE$4.LOGIN_FORM_TITLE));
 };
 
-var styles$v = {"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$F = {"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),
@@ -62107,8 +62248,8 @@ var LoginForm = React.forwardRef(function (props, ref) {
   var validate = function validate() {
     var result = true;
     if (userName.trim() === CTRL.EMPTY) {
-      var fieldName = localeService.create(LOCALE$3.LOGIN_FORM_FIELD_NAME);
-      setUserNameErrorMessage(props.emptyErrorText || localeService.create(LOCALE$3.LOGIN_FORM_ERROR_EMPTY, {
+      var fieldName = localeService.create(LOCALE$4.LOGIN_FORM_FIELD_NAME);
+      setUserNameErrorMessage(props.emptyErrorText || localeService.create(LOCALE$4.LOGIN_FORM_ERROR_EMPTY, {
         fieldName: fieldName
       }));
       result = false;
@@ -62116,8 +62257,8 @@ var LoginForm = React.forwardRef(function (props, ref) {
       setUserNameErrorMessage(CTRL.EMPTY);
     }
     if (password.trim() === CTRL.EMPTY) {
-      var _fieldName = localeService.create(LOCALE$3.LOGIN_FORM_FIELD_PASSWORD);
-      setPasswordErrorMessage(props.emptyErrorText || localeService.create(LOCALE$3.LOGIN_FORM_ERROR_EMPTY, {
+      var _fieldName = localeService.create(LOCALE$4.LOGIN_FORM_FIELD_PASSWORD);
+      setPasswordErrorMessage(props.emptyErrorText || localeService.create(LOCALE$4.LOGIN_FORM_ERROR_EMPTY, {
         fieldName: _fieldName
       }));
       result = false;
@@ -62155,68 +62296,68 @@ var LoginForm = React.forwardRef(function (props, ref) {
     }
   };
   return React__default.createElement("div", null, React__default.createElement(LoginTitle, {
-    className: styles$v['vitro-title']
+    className: styles$F['vitro-title']
   }), React__default.createElement(Input, {
     name: FIELD_NAME.USER_NAME,
-    label: localeService.create(LOCALE$3.LOGIN_FORM_FIELD_NAME),
+    label: localeService.create(LOCALE$4.LOGIN_FORM_FIELD_NAME),
     onChange: onChangeUserName,
     errorMessage: userNameErrorMessage,
     onFocus: function onFocus() {
       return _onFocus(FIELD_NAME.USER_NAME);
     },
     isError: errorMessage ? true : false,
-    className: styles$v['vitro-control']
+    className: styles$F['vitro-control']
   }), React__default.createElement(PasswordInput, {
     name: FIELD_NAME.PASSWORD,
-    label: localeService.create(LOCALE$3.LOGIN_FORM_FIELD_PASSWORD),
+    label: localeService.create(LOCALE$4.LOGIN_FORM_FIELD_PASSWORD),
     onChange: onChangePassword,
     errorMessage: passwordErrorMessage || errorMessage,
     onFocus: function onFocus() {
       return _onFocus(FIELD_NAME.PASSWORD);
     },
     isError: errorMessage ? true : false,
-    className: styles$v['vitro-control']
+    className: styles$F['vitro-control']
   }), (props.onSaveData || props.onResetPassword) && React__default.createElement("div", {
-    className: styles$v['vitro-flex'] + (passwordErrorMessage || errorMessage || userNameErrorMessage ? CTRL.SPACE + styles$v['vitro-error'] : CTRL.EMPTY)
+    className: styles$F['vitro-flex'] + (passwordErrorMessage || errorMessage || userNameErrorMessage ? CTRL.SPACE + styles$F['vitro-error'] : CTRL.EMPTY)
   }, props.onSaveData && React__default.createElement(Checkbox, {
-    label: localeService.create(LOCALE$3.LOGIN_FORM_ACTION_SAVE_DATA),
+    label: localeService.create(LOCALE$4.LOGIN_FORM_ACTION_SAVE_DATA),
     name: FIELD_NAME.SAVE_DATA,
     onChange: props.onSaveData,
-    className: styles$v['vitro-login-checkbox']
+    className: styles$F['vitro-login-checkbox']
   }), props.onResetPassword && React__default.createElement(Link, {
-    text: localeService.create(LOCALE$3.LOGIN_FORM_ACTION_RESET_PASSWORD),
+    text: localeService.create(LOCALE$4.LOGIN_FORM_ACTION_RESET_PASSWORD),
     onClick: props.onResetPassword,
-    className: styles$v['vitro-link']
+    className: styles$F['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$v['vitro-separator']
-  }, localeService.create(LOCALE$3.LOGIN_FORM_SEPARATOR_TEXT)), React__default.createElement("div", {
-    className: styles$v['vitro-button-list']
+    className: styles$F['vitro-separator']
+  }, localeService.create(LOCALE$4.LOGIN_FORM_SEPARATOR_TEXT)), React__default.createElement("div", {
+    className: styles$F['vitro-button-list']
   }, props.buttonList.map(function (button) {
     return React__default.createElement(Button$2, Object.assign({}, button, {
-      className: styles$v['vitro-button']
+      className: styles$F['vitro-button']
     }));
   }))) : React__default.createElement(React__default.Fragment, null), props.onRegister && React__default.createElement(Link, {
-    text: localeService.create(LOCALE$3.LOGIN_FORM_ACTION_REGISTER),
+    text: localeService.create(LOCALE$4.LOGIN_FORM_ACTION_REGISTER),
     onClick: props.onRegister,
-    className: styles$v['vitro-link-register']
+    className: styles$F['vitro-link-register']
   }));
 });
 
-var styles$w = {"vitro-link":"_login-go-back-link_vitro-link_103lWHm"};
+var styles$G = {"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$3.ACTION_GO_BACK),
+    text: localeService.create(LOCALE$4.ACTION_GO_BACK),
     onClick: props.onClick,
-    className: styles$w['vitro-link']
+    className: styles$G['vitro-link']
   });
 };
 
-var styles$x = {"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$H = {"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";
@@ -62268,7 +62409,7 @@ var TwoFactorAuthenticationForm = React.forwardRef(function (props, ref) {
   var validate = function validate() {
     var result = true;
     if (code.trim() === CTRL.EMPTY) {
-      _setErrorMessage(props.emptyErrorText || localeService.create(LOCALE$3.TWO_FACTOR_AUTHENTICATION_FORM_ERROR_EMPTY));
+      _setErrorMessage(props.emptyErrorText || localeService.create(LOCALE$4.TWO_FACTOR_AUTHENTICATION_FORM_ERROR_EMPTY));
       result = false;
     }
     return result;
@@ -62278,9 +62419,9 @@ var TwoFactorAuthenticationForm = React.forwardRef(function (props, ref) {
     var name = emailArr[0].slice(0, 2);
     var domain = emailArr[1].slice(emailArr[1].indexOf(CTRL.DOT));
     return React__default.createElement(React__default.Fragment, null, name, React__default.createElement("span", {
-      className: styles$x['vitro-hidden-symbol']
+      className: styles$H['vitro-hidden-symbol']
     }, DOT_STRING), CTRL.AT_SIGN, React__default.createElement("span", {
-      className: styles$x['vitro-hidden-symbol']
+      className: styles$H['vitro-hidden-symbol']
     }, DOT_STRING), domain);
   };
   var onResendCode = function onResendCode() {
@@ -62297,58 +62438,58 @@ var TwoFactorAuthenticationForm = React.forwardRef(function (props, ref) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$x['vitro-two-factor-authentication-form']
+    className: styles$H['vitro-two-factor-authentication-form']
   }, React__default.createElement(LoginTitle, {
-    className: styles$x['vitro-title'],
-    text: localeService.create(LOCALE$3.TWO_FACTOR_AUTHENTICATION_FORM_TITLE)
+    className: styles$H['vitro-title'],
+    text: localeService.create(LOCALE$4.TWO_FACTOR_AUTHENTICATION_FORM_TITLE)
   }), React__default.createElement("div", {
-    className: styles$x['vitro-subtitle']
-  }, React__default.createElement("div", null, localeService.create(LOCALE$3.TWO_FACTOR_AUTHENTICATION_FORM_SUBTITLE_USER_NAME), React__default.createElement("span", null, CTRL.SPACE + props.userName)), React__default.createElement("div", null, localeService.create(LOCALE$3.TWO_FACTOR_AUTHENTICATION_FORM_SUBTITLE_EMAIL) + CTRL.SPACE, React__default.createElement("span", {
-    className: styles$x['vitro-email']
+    className: styles$H['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$H['vitro-email']
   }, getEmail(props.email)))), React__default.createElement(Input, {
     name: FIELD_NAME.USER_NAME,
-    label: localeService.create(LOCALE$3.TWO_FACTOR_AUTHENTICATION_FORM_FIELD_CODE),
+    label: localeService.create(LOCALE$4.TWO_FACTOR_AUTHENTICATION_FORM_FIELD_CODE),
     onChange: onChange,
     onBlur: validate,
     errorMessage: errorMessage,
-    className: styles$x['vitro-control']
+    className: styles$H['vitro-control']
   }), React__default.createElement("div", {
-    className: styles$x['vitro-flex']
+    className: styles$H['vitro-flex']
   }, React__default.createElement(Link, {
-    text: localeService.create(LOCALE$3.TWO_FACTOR_AUTHENTICATION_FORM_ACTION_CODE_SEND_ERROR),
+    text: localeService.create(LOCALE$4.TWO_FACTOR_AUTHENTICATION_FORM_ACTION_CODE_SEND_ERROR),
     onClick: props.onResendCode,
-    className: styles$x['vitro-link']
+    className: styles$H['vitro-link']
   }), React__default.createElement("div", {
-    className: styles$x['vitro-description'] + CTRL.SPACE + styles$x['vitro-clock']
-  }, localeService.create(LOCALE$3.TWO_FACTOR_AUTHENTICATION_FORM_DESCRIPTION_VALIDITY, {
+    className: styles$H['vitro-description'] + CTRL.SPACE + styles$H['vitro-clock']
+  }, localeService.create(LOCALE$4.TWO_FACTOR_AUTHENTICATION_FORM_DESCRIPTION_VALIDITY, {
     duration: props.codeValidityDurationMin || 10
   }))), React__default.createElement(LoginSubmitButton, {
     onClick: submit,
-    className: styles$x['vitro-button']
+    className: styles$H['vitro-button']
   }), !resendDuration ? React__default.createElement(Link, {
-    text: localeService.create(LOCALE$3.TWO_FACTOR_AUTHENTICATION_FORM_ACTION_RESEND_CODE),
+    text: localeService.create(LOCALE$4.TWO_FACTOR_AUTHENTICATION_FORM_ACTION_RESEND_CODE),
     onClick: onResendCode,
-    className: styles$x['vitro-link-resend-code']
+    className: styles$H['vitro-link-resend-code']
   }) : React__default.createElement("div", {
-    className: styles$x['vitro-resend-code-description']
-  }, localeService.create(LOCALE$3.TWO_FACTOR_AUTHENTICATION_FORM_DESCRIPTION_RESEND, {
+    className: styles$H['vitro-resend-code-description']
+  }, localeService.create(LOCALE$4.TWO_FACTOR_AUTHENTICATION_FORM_DESCRIPTION_RESEND, {
     duration: resendDuration
   })), React__default.createElement(LoginGoBackLink, {
     onClick: props.onGoBack
   }));
 });
 
-var styles$y = {"vitro-ntlm-authentication-form":"_ntlm-authentication-form_vitro-ntlm-authentication-form_cZo4EPu","vitro-content":"_ntlm-authentication-form_vitro-content_1CCJ4Md","vitro-image":"_ntlm-authentication-form_vitro-image_1rt02c3"};
+var styles$I = {"vitro-ntlm-authentication-form":"_ntlm-authentication-form_vitro-ntlm-authentication-form_cZo4EPu","vitro-content":"_ntlm-authentication-form_vitro-content_1CCJ4Md","vitro-image":"_ntlm-authentication-form_vitro-image_1rt02c3"};
 
 var NTLMAuthenticationForm = function NTLMAuthenticationForm(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   return React__default.createElement("div", {
-    className: styles$y['vitro-ntlm-authentication-form']
+    className: styles$I['vitro-ntlm-authentication-form']
   }, React__default.createElement(LoginTitle, null), React__default.createElement("div", {
-    className: styles$y['vitro-content']
+    className: styles$I['vitro-content']
   }, React__default.createElement("div", {
-    className: styles$y['vitro-image']
-  }), React__default.createElement("span", null, localeService.create(LOCALE$3.NTLM_AUTHENTICATION_FORM_DESCRIPTION))), React__default.createElement(LoginGoBackLink, {
+    className: styles$I['vitro-image']
+  }), React__default.createElement("span", null, localeService.create(LOCALE$4.NTLM_AUTHENTICATION_FORM_DESCRIPTION))), React__default.createElement(LoginGoBackLink, {
     onClick: props.onGoBack
   }));
 };
@@ -62474,7 +62615,7 @@ var LABEL_POSITION;
   PLACEMENT["END"] = "end";
 })(exports.PLACEMENT || (exports.PLACEMENT = {}));
 
-var styles$z = {"vitro-control":"_date-picker_vitro-control_2AYXegb","vitro-display-none":"_date-picker_vitro-display-none_2wJx8XG","vitro-button-copy":"_date-picker_vitro-button-copy_1cGY1Uu","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-text":"_date-picker_vitro-error-text_15CdrRj"};
+var styles$J = {"vitro-control":"_date-picker_vitro-control_2AYXegb","vitro-display-none":"_date-picker_vitro-display-none_2wJx8XG","vitro-button-copy":"_date-picker_vitro-button-copy_1cGY1Uu","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-text":"_date-picker_vitro-error-text_15CdrRj"};
 
 var $$3 = window.$;
 var DatePicker = React.forwardRef(function (props, ref) {
@@ -62524,7 +62665,7 @@ var DatePicker = React.forwardRef(function (props, ref) {
     }
   }, [props.isWorkDay]);
   React.useEffect(function () {
-    props.errorMessage ? setState(styles$z['vitro-error']) : setState(CTRL.EMPTY);
+    props.errorMessage ? setState(styles$J['vitro-error']) : setState(CTRL.EMPTY);
   }, [props.errorMessage]);
   React.useEffect(function () {
     if (isOpened && !props.isFlipDropdown && controlRef.current) {
@@ -62596,13 +62737,13 @@ var DatePicker = React.forwardRef(function (props, ref) {
     $$3(inputRef.current).data(componentName).setOptions(options);
   };
   var onFocus = function onFocus(e) {
-    setState(styles$z['vitro-focus']);
+    setState(styles$J['vitro-focus']);
     if (props.onFocus) {
       props.onFocus(e);
     }
   };
   var onBlur = function onBlur(e) {
-    setState(props.errorMessage ? styles$z['vitro-error'] : styles$z[CTRL.EMPTY]);
+    setState(props.errorMessage ? styles$J['vitro-error'] : styles$J[CTRL.EMPTY]);
     if (props.onBlur) {
       props.onBlur(e);
     }
@@ -62630,12 +62771,12 @@ var DatePicker = React.forwardRef(function (props, ref) {
     navigator.clipboard.writeText("" + props.value);
   };
   var getClassName = function getClassName() {
-    var classList = [styles$z['vitro-control'], props.className];
+    var classList = [styles$J['vitro-control'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$z['vitro-read-only']);
+      classList.push(styles$J['vitro-read-only']);
     }
     if (props.labelPosition === POSITION.LEFT) {
-      classList.push(styles$z['vitro-left-label']);
+      classList.push(styles$J['vitro-left-label']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -62647,29 +62788,29 @@ var DatePicker = React.forwardRef(function (props, ref) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$z['vitro-label']
+    className: styles$J['vitro-label']
   }), React__default.createElement("input", {
     ref: inputRef,
     placeholder: props.placeholder,
     onFocus: onFocus,
     onBlur: onBlur
   }), props.isReadOnly ? React__default.createElement("span", {
-    className: styles$z['vitro-button-copy'],
+    className: styles$J['vitro-button-copy'],
     onClick: copyValue
   }) : null, props.isFlipDropdown ? React__default.createElement("div", {
     ref: containerRef,
-    className: styles$z['vitro-control-container']
+    className: styles$J['vitro-control-container']
   }) : React__default.createElement(Overlay$1, {
     show: true,
     target: inputRef.current,
     placement: exports.PLACEMENT.AUTO
   }, React__default.createElement("div", {
     style: style ? style : {},
-    className: styles$z['vitro-control-container'] + (style ? CTRL.EMPTY : CTRL.SPACE + styles$z['vitro-display-none'])
+    className: styles$J['vitro-control-container'] + (style ? CTRL.EMPTY : CTRL.SPACE + styles$J['vitro-display-none'])
   }, React__default.createElement("div", {
     ref: containerRef
   }))), props.errorMessage && React__default.createElement("span", {
-    className: styles$z['vitro-error-text']
+    className: styles$J['vitro-error-text']
   }, props.errorMessage));
 });
 
@@ -62690,7 +62831,7 @@ var COMPONENT_TYPE;
   COMPONENT_TYPE["MODERN"] = "modern";
 })(COMPONENT_TYPE || (COMPONENT_TYPE = {}));
 
-var styles$A = {"vitro-control":"_time-picker_vitro-control_1sx07It","vitro-display-none":"_time-picker_vitro-display-none_3GgWh46","vitro-button-copy":"_time-picker_vitro-button-copy_QZg3bTW","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-text":"_time-picker_vitro-error-text_2BNoBKW"};
+var styles$K = {"vitro-control":"_time-picker_vitro-control_1sx07It","vitro-display-none":"_time-picker_vitro-display-none_3GgWh46","vitro-button-copy":"_time-picker_vitro-button-copy_QZg3bTW","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-text":"_time-picker_vitro-error-text_2BNoBKW"};
 
 var $$4 = window.$;
 var TimePicker = React.forwardRef(function (props, ref) {
@@ -62790,13 +62931,13 @@ var TimePicker = React.forwardRef(function (props, ref) {
     }
   };
   var onFocus = function onFocus(e) {
-    setState(styles$A['vitro-focus']);
+    setState(styles$K['vitro-focus']);
     if (props.onFocus) {
       props.onFocus(e);
     }
   };
   var onBlur = function onBlur(e) {
-    setState(props.errorMessage ? styles$A['vitro-error'] : styles$A[CTRL.EMPTY]);
+    setState(props.errorMessage ? styles$K['vitro-error'] : styles$K[CTRL.EMPTY]);
     if (props.onBlur) {
       props.onBlur(e);
     }
@@ -62805,12 +62946,12 @@ var TimePicker = React.forwardRef(function (props, ref) {
     navigator.clipboard.writeText("" + props.value);
   };
   var getClassName = function getClassName() {
-    var classList = [styles$A['vitro-control'], props.className];
+    var classList = [styles$K['vitro-control'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$A['vitro-read-only']);
+      classList.push(styles$K['vitro-read-only']);
     }
     if (props.labelPosition === POSITION.LEFT) {
-      classList.push(styles$A['vitro-left-label']);
+      classList.push(styles$K['vitro-left-label']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -62822,38 +62963,38 @@ var TimePicker = React.forwardRef(function (props, ref) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$A['vitro-label']
+    className: styles$K['vitro-label']
   }), React__default.createElement("input", {
     ref: inputRef,
     placeholder: props.placeholder,
     onFocus: onFocus,
     onBlur: onBlur
   }), props.isReadOnly ? React__default.createElement("span", {
-    className: styles$A['vitro-button-copy'],
+    className: styles$K['vitro-button-copy'],
     onClick: copyValue
   }) : null, props.isFlipDropdown ? React__default.createElement("div", {
     ref: containerRef,
-    className: styles$A['vitro-control-container']
+    className: styles$K['vitro-control-container']
   }) : React__default.createElement(Overlay$1, {
     show: true,
     target: inputRef.current,
     placement: exports.PLACEMENT.AUTO
   }, React__default.createElement("div", {
     style: style ? style : {},
-    className: styles$A['vitro-control-container'] + (style ? CTRL.EMPTY : CTRL.SPACE + styles$A['vitro-display-none'])
+    className: styles$K['vitro-control-container'] + (style ? CTRL.EMPTY : CTRL.SPACE + styles$K['vitro-display-none'])
   }, React__default.createElement("div", {
     ref: containerRef
   }))), props.errorMessage && React__default.createElement("span", {
-    className: styles$A['vitro-error-text']
+    className: styles$K['vitro-error-text']
   }, props.errorMessage));
 });
 
-var styles$B = {"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$L = {"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 htmlValueStyles = {"vitro-item-html-value":"_lookup-picker-html-value_vitro-item-html-value_2QBoTey"};
 
 var SelectedValueList = function SelectedValueList(props) {
-  var className = props.isMultiSelect ? styles$B['vitro-selected-item-multi'] : styles$B['vitro-selected-item'];
+  var className = props.isMultiSelect ? styles$L['vitro-selected-item-multi'] : styles$L['vitro-selected-item'];
   return React__default.createElement(React__default.Fragment, null, props.list.map(function (x) {
     var title = props.selectedValueTemplate(x);
     return React__default.createElement("div", {
@@ -62866,7 +63007,7 @@ var SelectedValueList = function SelectedValueList(props) {
       onClick: function onClick() {
         return props.onOptionValueDelete(x.id);
       },
-      className: styles$B['vitro-button-close']
+      className: styles$L['vitro-button-close']
     }));
   }));
 };
@@ -62951,12 +63092,12 @@ var ValueList = function ValueList(props) {
   }, props.emptyPlaceholder)))));
 };
 
-var LOCALE$4;
+var LOCALE$5;
 (function (LOCALE) {
   LOCALE["PLACEHOLDER_EMPTY"] = "app.common.lookupPicker.empty";
-})(LOCALE$4 || (LOCALE$4 = {}));
+})(LOCALE$5 || (LOCALE$5 = {}));
 
-var styles$C = {"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-text":"_lookup-picker_vitro-error-text_273lqvD","vitro-button-copy":"_lookup-picker_vitro-button-copy_2UIHHZD","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"};
+var styles$M = {"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-text":"_lookup-picker_vitro-error-text_273lqvD","vitro-button-copy":"_lookup-picker_vitro-button-copy_2UIHHZD","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"};
 
 var $$5 = window.$;
 var LookupPicker = React.forwardRef(function (props, ref) {
@@ -62979,7 +63120,7 @@ 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$C['vitro-read-only'] : CTRL.EMPTY),
+  var _useState7 = React.useState(props.isDisabled || props.isReadOnly ? styles$M['vitro-read-only'] : CTRL.EMPTY),
     state = _useState7[0],
     setState = _useState7[1];
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
@@ -63074,7 +63215,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }
   }, [selectedValueList]);
   React.useEffect(function () {
-    setState(props.errorMessage ? styles$C['vitro-error'] : CTRL.EMPTY);
+    setState(props.errorMessage ? styles$M['vitro-error'] : CTRL.EMPTY);
   }, [props.errorMessage]);
   var updateFilteredValueList = function updateFilteredValueList(valueList) {
     var availableValueList = inputValue ? filteredValueList : valueList;
@@ -63096,7 +63237,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     return props.selectedValueTemplate ? props.selectedValueTemplate(value) : value.title;
   };
   var onChange = function onChange(e) {
-    setState(styles$C['vitro-focus']);
+    setState(styles$M['vitro-focus']);
     setValueListVisible(true);
     setInputValue(e.target.value);
   };
@@ -63150,7 +63291,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   };
   var onFocusOut = function onFocusOut(e) {
     var target = e.currentTarget;
-    setState(props.errorMessage ? styles$C['vitro-error'] : CTRL.EMPTY);
+    setState(props.errorMessage ? styles$M['vitro-error'] : CTRL.EMPTY);
     setTimeout(function () {
       var _document$activeEleme;
       if (!target.contains(document.activeElement) && !((_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.classList.contains(valueListStyles['vitro-item']))) {
@@ -63165,7 +63306,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     });
   };
   var onFocus = function onFocus(e) {
-    setState(styles$C['vitro-focus']);
+    setState(styles$M['vitro-focus']);
     setValueListVisible(true);
     if (props.onFocus) {
       props.onFocus(e);
@@ -63183,12 +63324,12 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }).join(CTRL.COMMA));
   };
   var getClassName = function getClassName() {
-    var classList = [styles$C['vitro-lookup-picker'], props.className];
+    var classList = [styles$M['vitro-lookup-picker'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$C['vitro-read-only']);
+      classList.push(styles$M['vitro-read-only']);
     }
     if (props.isMultiSelect) {
-      classList.push(styles$C['vitro-lookup-picker-multi-select']);
+      classList.push(styles$M['vitro-lookup-picker-multi-select']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -63208,9 +63349,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$C['vitro-label']
+    className: styles$M['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$C['vitro-content'],
+    className: styles$M['vitro-content'],
     onClick: onFocus,
     ref: contentRef
   }, selectedValueList && selectedValueList.length > 0 && (props.isMultiSelect ? true : inputValue.length === 0) ? React__default.createElement(SelectedValueList, {
@@ -63226,9 +63367,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     onChange: onChange,
     onClick: onFocus
   }), !props.isDisabled && props.children, React__default.createElement("div", {
-    className: styles$C['vitro-right']
+    className: styles$M['vitro-right']
   }, !props.isMultiSelect && selectedValueList && selectedValueList.length > 0 && isEditable && React__default.createElement("div", {
-    className: styles$C['vitro-button-close'],
+    className: styles$M['vitro-button-close'],
     onClick: function onClick() {
       return onOptionValueDelete();
     }
@@ -63236,9 +63377,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     onClick: function onClick() {
       return onCollapseButtonClick(valueListVisible);
     },
-    className: valueListVisible ? styles$C['vitro-button-collapse-up'] : styles$C['vitro-button-collapse-bottom']
+    className: valueListVisible ? styles$M['vitro-button-collapse-up'] : styles$M['vitro-button-collapse-bottom']
   }), props.isReadOnly ? React__default.createElement("span", {
-    className: styles$C['vitro-button-copy'],
+    className: styles$M['vitro-button-copy'],
     onClick: copyValue
   }) : null)), isEditable && (!props.filterMinLength || props.filterMinLength <= inputValue.length) && React__default.createElement(ValueList, {
     isPending: pending,
@@ -63250,45 +63391,45 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     contentRef: contentRef.current,
     containerRef: containerRef.current,
     isVisible: valueListVisible,
-    emptyPlaceholder: props.emptyPlaceholder || localeService.create(LOCALE$4.PLACEHOLDER_EMPTY),
+    emptyPlaceholder: props.emptyPlaceholder || localeService.create(LOCALE$5.PLACEHOLDER_EMPTY),
     getHtmlValue: getHtmlValue
   }), props.errorMessage && React__default.createElement("span", {
-    className: styles$C['vitro-error-text']
+    className: styles$M['vitro-error-text']
   }, props.errorMessage));
 });
 
-var styles$D = {"vitro-command-menu":"_command-menu_vitro-command-menu_l82vtIh"};
+var styles$N = {"vitro-command-menu":"_command-menu_vitro-command-menu_l82vtIh"};
 
 var CommandMenu = function CommandMenu(props) {
   return React__default.createElement("nav", {
-    className: styles$D['vitro-command-menu'] + CTRL.SPACE + 'navbar'
+    className: styles$N['vitro-command-menu'] + CTRL.SPACE + 'navbar'
   }, React__default.createElement("ul", {
     className: 'nav'
   }, props.children));
 };
 
-var styles$E = {"vitro-command-menu-button":"_command-menu-button_vitro-command-menu-button_2IiXVbP","vitro-image":"_command-menu-button_vitro-image_27yILgG"};
+var styles$O = {"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$E['vitro-command-menu-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
-    imageClassName: styles$E['vitro-image']
+    className: styles$O['vitro-command-menu-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    imageClassName: styles$O['vitro-image']
   }, props)));
 };
 
 var itemStyles = {"vitro-item":"_command-menu-item_vitro-item_2pVhk23"};
 
-var styles$F = {"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$P = {"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$F['vitro-item-lookup-picker']
+    className: itemStyles['vitro-item'] + CTRL.SPACE + 'nav-item ' + styles$P['vitro-item-lookup-picker']
   }, React__default.createElement(LookupPicker, Object.assign({}, props, {
-    className: styles$F['vitro-command-menu-lookup-picker'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$P['vitro-command-menu-lookup-picker'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   })));
 };
 
-var styles$G = {"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-image":"_command-menu-dropdown-button_vitro-image_2VNGo-H","vitro-button-collapse-bottom":"_command-menu-dropdown-button_vitro-button-collapse-bottom_1OS_X_a"};
+var styles$Q = {"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-image":"_command-menu-dropdown-button_vitro-image_2VNGo-H","vitro-button-collapse-bottom":"_command-menu-dropdown-button_vitro-button-collapse-bottom_1OS_X_a"};
 
 var CommandMenuSubItem = function CommandMenuSubItem(props) {
   var onClick = function onClick(e) {
@@ -63307,7 +63448,7 @@ var CommandMenuSubItem = function CommandMenuSubItem(props) {
     onClick: onClick,
     toggle: props.toggle === false ? false : true
   }, props.isShowImage && React__default.createElement("div", {
-    className: styles$G['vitro-image']
+    className: styles$Q['vitro-image']
   }, props.imageUrl && React__default.createElement(Image, {
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl
@@ -63325,15 +63466,15 @@ var CommandMenuItemHeader = function CommandMenuItemHeader(props) {
     onMouseLeave: function onMouseLeave() {
       return setIsHover(false);
     },
-    className: itemStyles['vitro-item'] + CTRL.SPACE + styles$G['vitro-command-menu-dropdown-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: itemStyles['vitro-item'] + CTRL.SPACE + styles$Q['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$G['vitro-image']
+    className: styles$Q['vitro-image']
   }), React__default.createElement("span", null, props.text), !props.isHideChevronDown && React__default.createElement("div", {
-    className: styles$G['vitro-button-collapse-bottom']
+    className: styles$Q['vitro-button-collapse-bottom']
   }));
 };
 
@@ -63345,7 +63486,7 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   return React__default.createElement(reactstrap.UncontrolledDropdown, {
     nav: true,
     inNavbar: true,
-    className: styles$G['vitro-dropdown-button-container']
+    className: styles$Q['vitro-dropdown-button-container']
   }, React__default.createElement(reactstrap.DropdownToggle, {
     nav: true,
     caret: true
@@ -63361,7 +63502,7 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   }), props.children));
 };
 
-var styles$H = {"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-popup-container":"_sidebar-item_vitro-popup-container_2X7SVxe","vitro-scrollbar":"_sidebar-item_vitro-scrollbar___xylIx","vitro-popup-item-list":"_sidebar-item_vitro-popup-item-list_JUwcoZB","vitro-button-close":"_sidebar-item_vitro-button-close_2Kdf-ob"};
+var styles$R = {"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-popup-container":"_sidebar-item_vitro-popup-container_2X7SVxe","vitro-scrollbar":"_sidebar-item_vitro-scrollbar___xylIx","vitro-popup-item-list":"_sidebar-item_vitro-popup-item-list_JUwcoZB","vitro-button-close":"_sidebar-item_vitro-button-close_2Kdf-ob"};
 
 var Item$2 = function Item(props) {
   var _useState = React.useState(false),
@@ -63387,7 +63528,7 @@ var Item$2 = function Item(props) {
   };
   return React__default.createElement(Tooltip$1, {
     text: props.text || CTRL.EMPTY,
-    placement: PLACEMENT$1.RIGHT,
+    placement: PLACEMENT.RIGHT,
     isShow: isShowTooltip ? undefined : false
   }, React__default.createElement("div", {
     className: props.className,
@@ -63398,10 +63539,10 @@ var Item$2 = function Item(props) {
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl,
     isHover: props.isHover,
-    className: styles$H['vitro-image']
+    className: styles$R['vitro-image']
   })), React__default.createElement("span", {
     ref: textRef,
-    className: styles$H['vitro-item-text'] + (!(props.isSidebarExpanded || props.isMobileView) ? CTRL.SPACE + styles$H['vitro-display-none'] : CTRL.EMPTY)
+    className: styles$R['vitro-item-text'] + (!(props.isSidebarExpanded || props.isMobileView) ? CTRL.SPACE + styles$R['vitro-display-none'] : CTRL.EMPTY)
   }, props.text)));
 };
 
@@ -63423,7 +63564,7 @@ var LinkItem$1 = function LinkItem(props) {
     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$H['vitro-active'] : isHover ? styles$H['vitro-hover'] : CTRL.EMPTY;
+  var className = isActive ? styles$R['vitro-active'] : isHover ? styles$R['vitro-hover'] : CTRL.EMPTY;
   var onClick = function onClick(e) {
     if (props.onClick) {
       props.onClick(e);
@@ -63446,7 +63587,7 @@ var LinkItem$1 = function LinkItem(props) {
     style: {
       width: props.linkItemWidth ? props.linkItemWidth + UNIT.PX : WIDTH_AUTO
     },
-    className: styles$H['vitro-item']
+    className: styles$R['vitro-item']
   }, (props.link || props.onClick) && React__default.createElement("button", {
     onMouseEnter: function onMouseEnter() {
       return setIsHover(true);
@@ -63593,7 +63734,7 @@ var GroupItem = function GroupItem(props) {
     setIsExpanded(false);
     props.setActiveItem(CTRL.EMPTY);
   };
-  var className = isActive ? styles$H['vitro-active'] : isHover ? styles$H['vitro-hover'] : CTRL.EMPTY;
+  var className = isActive ? styles$R['vitro-active'] : isHover ? styles$R['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,
@@ -63620,7 +63761,7 @@ var GroupItem = function GroupItem(props) {
     style: {
       width: props.linkItemWidth ? props.linkItemWidth + UNIT.PX : WIDTH_AUTO$1
     },
-    className: styles$H['vitro-item'] + CTRL.SPACE + styles$H['vitro-group-item']
+    className: styles$R['vitro-item'] + CTRL.SPACE + styles$R['vitro-group-item']
   }, React__default.createElement("button", {
     onMouseEnter: function onMouseEnter() {
       return _onFocus(true);
@@ -63639,19 +63780,19 @@ 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$H['vitro-expanded'] : styles$H['vitro-collapsed']
+    className: isExpanded ? styles$R['vitro-expanded'] : styles$R['vitro-collapsed']
   })), props.isMobileView ? React__default.createElement(Overlay$1, {
     show: isExpanded,
     target: props.container,
     placement: exports.PLACEMENT.TOP
   }, React__default.createElement("div", {
-    className: styles$H['vitro-popup-container']
+    className: styles$R['vitro-popup-container']
   }, React__default.createElement("ul", {
-    className: styles$H['vitro-popup-item-list'],
+    className: styles$R['vitro-popup-item-list'],
     ref: itemListRef
   }, React__default.createElement("button", {
     ref: buttonRef,
-    className: styles$H['vitro-button-close'],
+    className: styles$R['vitro-button-close'],
     onTouchStart: onTouchStart,
     onTouchEnd: onTouchEnd,
     onTouchMove: onTouchMove,
@@ -63659,14 +63800,14 @@ var GroupItem = function GroupItem(props) {
       return closePopupMenu();
     }
   }), React__default.createElement(ScrollBar, {
-    className: styles$H['vitro-scrollbar']
+    className: styles$R['vitro-scrollbar']
   }, content)))) : React__default.createElement("ul", {
-    className: styles$H['vitro-item-list'] + CTRL.SPACE + (props.isSidebarExpanded ? !isExpanded ? styles$H['vitro-display-none'] : CTRL.EMPTY : styles$H['vitro-display-none'])
+    className: styles$R['vitro-item-list'] + CTRL.SPACE + (props.isSidebarExpanded ? !isExpanded ? styles$R['vitro-display-none'] : CTRL.EMPTY : styles$R['vitro-display-none'])
   }, content)));
 };
 
 var Section = function Section(props) {
-  return React__default.createElement("li", null, props.text && React__default.createElement("span", null, props.text), React__default.createElement("ul", null, props.itemList && props.itemList.map(function (i) {
+  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,
@@ -63685,10 +63826,10 @@ var Section = function Section(props) {
       currentUrl: props.currentUrl,
       isMobileView: props.isMobileView
     }, i)) : React__default.createElement("div", null);
-  })));
+  })) : React__default.createElement(React__default.Fragment, null));
 };
 
-var styles$I = {"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$S = {"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) {
@@ -63696,7 +63837,7 @@ var SectionList = React.forwardRef(function (props, ref) {
   }
   return React__default.createElement("ul", {
     ref: ref,
-    className: styles$I['vitro-sidebar-section-list']
+    className: styles$S['vitro-sidebar-section-list']
   }, props.itemList.map(function (section) {
     return React__default.createElement(Section, Object.assign({
       isExpanded: props.isExpanded,
@@ -63790,12 +63931,12 @@ var Sidebar = function Sidebar(props) {
     var width = containerWidth / count;
     setLinkItemWidth(width);
   };
-  var className = styles$I['vitro-sidebar'] + (props.theme ? CTRL.SPACE + props.theme : CTRL.EMPTY) + CTRL.SPACE + (isMobileView ? 'vitro-bottom-menu' : CTRL.EMPTY);
+  var className = styles$S['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$I['vitro-scrollbar']
+    className: styles$S['vitro-scrollbar']
   }, React__default.createElement(SectionList, {
     itemList: itemList,
     currentUrl: currentUrl,
@@ -63811,18 +63952,18 @@ var Sidebar = function Sidebar(props) {
     isExpanded: !props.sidebar,
     isMobileView: isMobileView
   })), React__default.createElement("div", {
-    className: styles$I['vitro-logo-container']
+    className: styles$S['vitro-logo-container']
   }, React__default.createElement(Item$2, {
     text: props.logoText,
     imageUrl: props.logo,
     isSidebarExpanded: !props.sidebar,
     isMobileView: isMobileView,
-    className: styles$I['vitro-logo']
+    className: styles$S['vitro-logo']
   }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$I['vitro-scroll-container'],
+    className: styles$S['vitro-scroll-container'],
     ref: menuRef
   }, React__default.createElement("div", {
-    className: styles$I['vitro-scroll-content'],
+    className: styles$S['vitro-scroll-content'],
     ref: scrollContentRef
   }, React__default.createElement(SectionList, {
     container: menuRef.current,
@@ -63839,36 +63980,36 @@ var Sidebar = function Sidebar(props) {
     width: linkItemWidth,
     isSidebarExpanded: !props.sidebar,
     isMobileView: isMobileView,
-    className: styles$I['vitro-logo']
+    className: styles$S['vitro-logo']
   }))), React__default.createElement("button", {
     onClick: scroll,
-    className: styles$I['vitro-button-more']
+    className: styles$S['vitro-button-more']
   })));
 };
 
-var styles$J = {"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$T = {"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$J['vitro-item'] + (props.isActive ? CTRL.SPACE + styles$J['vitro-active'] : CTRL.EMPTY)
+    className: styles$T['vitro-item'] + (props.isActive ? CTRL.SPACE + styles$T['vitro-active'] : CTRL.EMPTY)
   }, React__default.createElement("div", {
-    className: styles$J['vitro-flex']
+    className: styles$T['vitro-flex']
   }, React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.userImageUrl,
-    className: styles$J['vitro-avatar']
+    className: styles$T['vitro-avatar']
   }), React__default.createElement("div", {
-    className: styles$J['vitro-content']
+    className: styles$T['vitro-content']
   }, React__default.createElement("div", null, React__default.createElement("div", {
-    className: styles$J['vitro-title']
+    className: styles$T['vitro-title']
   }, React__default.createElement("span", null, props.title || props.userName), props.isShowDetail && React__default.createElement("span", {
-    className: styles$J['vitro-due-date']
+    className: styles$T['vitro-due-date']
   }, props.date), props.isShowDetail && props.dropdownItemList && React__default.createElement(DropdownButton, {
     itemList: props.dropdownItemList,
     onToggle: props.onDropdownToggle,
-    className: styles$J['vitro-dropdown-button']
+    className: styles$T['vitro-dropdown-button']
   })), React__default.createElement("div", {
-    className: styles$J['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
+    className: styles$T['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
   }, React__default.createElement("p", {
     dangerouslySetInnerHTML: {
       __html: props.message
@@ -63876,46 +64017,46 @@ var ActivityItem = function ActivityItem(props) {
   }), props.children)))));
 };
 
-var styles$K = {"vitro-task-user-list":"_task-user-list_vitro-task-user-list_3GBJVjt"};
+var styles$U = {"vitro-task-user-list":"_task-user-list_vitro-task-user-list_3GBJVjt"};
 
 var TaskUserList = function TaskUserList(props) {
   return React__default.createElement("div", {
-    className: styles$K['vitro-task-user-list']
+    className: styles$U['vitro-task-user-list']
   }, props.itemList && props.itemList.map(function (x) {
     return React__default.createElement(ActivityItem, Object.assign({}, x));
   }));
 };
 
-var styles$L = {"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$V = {"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$L['vitro-task-tile'] + (props.isActive ? CTRL.SPACE + styles$L['vitro-active'] : CTRL.EMPTY),
+    className: styles$V['vitro-task-tile'] + (props.isActive ? CTRL.SPACE + styles$V['vitro-active'] : CTRL.EMPTY),
     onClick: props.onClick
   }, props.dropdownItemList && React__default.createElement("div", {
-    className: styles$L['vitro-top-right']
+    className: styles$V['vitro-top-right']
   }, React__default.createElement(DropdownButton, {
     itemList: props.dropdownItemList,
-    className: styles$L['vitro-dropdown-button']
+    className: styles$V['vitro-dropdown-button']
   })), props.isShowDeleteButton && React__default.createElement("div", {
-    className: styles$L['vitro-button-cancel'],
+    className: styles$V['vitro-button-cancel'],
     onClick: props.onDeleteClick
   }), props.description && React__default.createElement("div", {
-    className: styles$L['vitro-description']
+    className: styles$V['vitro-description']
   }, props.description), React__default.createElement("div", {
-    className: styles$L['vitro-title']
+    className: styles$V['vitro-title']
   }, props.title), props.comment && React__default.createElement("div", {
-    className: styles$L['vitro-comment']
+    className: styles$V['vitro-comment']
   }, props.comment), React__default.createElement("div", {
-    className: styles$L['vitro-content']
+    className: styles$V['vitro-content']
   }, props.userList && React__default.createElement(TaskUserList, {
     itemList: props.userList
   })), React__default.createElement("div", {
-    className: styles$L['vitro-bottom-right']
+    className: styles$V['vitro-bottom-right']
   }, props.dateComment, " \xA0 ", props.date), props.children);
 };
 
-var styles$M = {"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$W = {"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);
@@ -63947,7 +64088,7 @@ var Alert$1 = function Alert(props) {
     }
   };
   var actionList = props.actionList && React__default.createElement("div", {
-    className: styles$M['vitro-alert-action-list']
+    className: styles$W['vitro-alert-action-list']
   }, props.actionList.map(function (a) {
     return React__default.createElement(Button$1, {
       key: a.text,
@@ -63956,7 +64097,7 @@ var Alert$1 = function Alert(props) {
       }
     }, a.text);
   }));
-  var className = styles$M['vitro-alert'] + CTRL.SPACE + (props.isPositionCenter && styles$M['vitro-position-center']) + CTRL.SPACE + (props.className ? props.className : CTRL.EMPTY);
+  var className = styles$W['vitro-alert'] + CTRL.SPACE + (props.isPositionCenter && styles$W['vitro-position-center']) + CTRL.SPACE + (props.className ? props.className : CTRL.EMPTY);
   return React__default.createElement("div", {
     tabIndex: 1,
     onBlur: onFocusOut,
@@ -63966,13 +64107,13 @@ var Alert$1 = function Alert(props) {
     variant: props.type,
     onClose: props.onClose
   }, React__default.createElement("div", {
-    className: styles$M['vitro-alert-content']
+    className: styles$W['vitro-alert-content']
   }, React__default.createElement("div", {
-    className: styles$M['vitro-icon']
+    className: styles$W['vitro-icon']
   }), React__default.createElement("div", {
-    className: styles$M['vitro-text']
+    className: styles$W['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$M['vitro-button-close'],
+    className: styles$W['vitro-button-close'],
     onClick: onClose
   })), props.text && props.children, props.isMultiline && actionList));
 };
@@ -63989,152 +64130,7 @@ var AlertConstants = {
     get TYPE () { return TYPE$2; }
 };
 
-var DialogComponent = function DialogComponent(props) {
-  return React__default.createElement("div", {
-    style: {
-      width: props.width + CTRL.PERCENT,
-      height: props.height + CTRL.PERCENT
-    }
-  }, props.children);
-};
-
-var styles$N = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x"};
-
-var DialogContent = function DialogContent(props) {
-  return React__default.createElement("div", {
-    className: styles$N['vitro-dialog-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
-  }, props.children);
-};
-
-var styles$O = {"vitro-dialog-header":"_dialog-header_vitro-dialog-header_2W3GraU","vitro-title":"_dialog-header_vitro-title_2k8SPhE","vitro-description":"_dialog-header_vitro-description_Hiq51VI","vitro-image":"_dialog-header_vitro-image_3TdbvmV"};
-
-var DialogHeader = function DialogHeader(props) {
-  return React__default.createElement("div", {
-    className: styles$O['vitro-dialog-header']
-  }, props.imageUrl && React__default.createElement(Image, {
-    defaultUrl: props.imageUrl,
-    className: styles$O['vitro-image']
-  }), React__default.createElement("div", null, React__default.createElement("h1", {
-    className: styles$O['vitro-title']
-  }, props.title), props.description && React__default.createElement("h2", {
-    className: styles$O['vitro-description']
-  }, props.description)));
-};
-
-var styles$P = {"vitro-dialog-button":"_dialog-button_vitro-dialog-button_1fQ5l22"};
-
-var DialogButton = function DialogButton(props) {
-  return React__default.createElement(Button$2, Object.assign({}, props, {
-    className: styles$P['vitro-dialog-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
-  }));
-};
-
-var dialogButtonCloseStyles = {"vitro-dialog-button-close":"_dialog-button-close_vitro-dialog-button-close_1p27cEz","vitro-button-close":"_dialog-button-close_vitro-button-close_2BpzTR0"};
-
-var DialogCloseButton = function DialogCloseButton(props) {
-  React.useEffect(function () {
-    window.document.addEventListener(exports.EVENT.KEYDOWN, escFunction, false);
-    return function () {
-      window.document.removeEventListener(exports.EVENT.KEYDOWN, escFunction, false);
-    };
-  }, []);
-  var escFunction = function escFunction(e) {
-    if (e.keyCode === 27) {
-      props.onClose();
-    }
-  };
-  return React__default.createElement(DialogButton, {
-    onClick: props.onClose,
-    text: props.text,
-    isDisabled: props.isDisabled,
-    className: dialogButtonCloseStyles['vitro-button-close']
-  });
-};
-
-var LOCALE$5;
-(function (LOCALE) {
-  LOCALE["ACTION_CANCEL"] = "app.common.action.cancel";
-  LOCALE["ACTION_CLOSE"] = "app.common.action.close";
-  LOCALE["ACTION_SAVE"] = "app.common.action.save";
-})(LOCALE$5 || (LOCALE$5 = {}));
-
-var styles$Q = {"vitro-dialog-footer":"_dialog-footer_vitro-dialog-footer_2vUQ3aG"};
-
-var DialogFooter = function DialogFooter(props) {
-  var _props$buttonList, _props$buttonList2;
-  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
-  var labelClose = props.labelClose || localeService.create((_props$buttonList = props.buttonList) !== null && _props$buttonList !== void 0 && _props$buttonList.length ? LOCALE$5.ACTION_CANCEL : LOCALE$5.ACTION_CLOSE);
-  var onClose = function onClose() {
-    if (props.onClose) {
-      props.onClose(props.dialog);
-    }
-  };
-  return React__default.createElement("div", {
-    className: styles$Q['vitro-dialog-footer']
-  }, props.isDismissible && props.onClose && React__default.createElement(DialogCloseButton, {
-    text: labelClose,
-    isDisabled: !props.isDismissible,
-    onClose: onClose
-  }), (_props$buttonList2 = props.buttonList) !== null && _props$buttonList2 !== void 0 && _props$buttonList2.length ? props.buttonList.map(function (button) {
-    return React__default.createElement(DialogButton, {
-      text: button.text,
-      onClick: function onClick() {
-        return button.onClick(props.dialog);
-      },
-      isDisabled: button.isDisabled,
-      className: button.className
-    });
-  }) : null);
-};
-
-var dialogStyles = {"vitro-dialog":"_dialog_vitro-dialog_2NzcRZg"};
-
-var Dialog = function Dialog(props) {
-  var _props$buttonList;
-  var _useState = React.useState(null),
-    component = _useState[0],
-    setComponent = _useState[1];
-  var className = dialogStyles['vitro-dialog'];
-  var showFooter = !props.isHideFooter && (((_props$buttonList = props.buttonList) === null || _props$buttonList === void 0 ? void 0 : _props$buttonList.length) || props.onClose);
-  React.useEffect(function () {
-    if (props.content) {
-      var c = React__default.createElement(props.content.component, props.content.props);
-      setComponent(c);
-    }
-  }, [props.content]);
-  var onClose = function onClose() {
-    if (props.onClose) {
-      props.onClose(props.dialog);
-    }
-  };
-  var onOutsideClick = function onOutsideClick(e) {
-    if (e.target && e.target.className === className) {
-      onClose();
-    }
-  };
-  return React__default.createElement("div", {
-    className: className,
-    onClick: onOutsideClick
-  }, React__default.createElement(DialogComponent, {
-    width: props.width,
-    height: props.height
-  }, props.isDismissible && React__default.createElement("button", {
-    className: dialogButtonCloseStyles['vitro-dialog-button-close'],
-    onClick: onClose
-  }), React__default.createElement(DialogHeader, {
-    title: props.title,
-    description: props.description,
-    imageUrl: props.imageUrl
-  }), component && React__default.createElement(DialogContent, null, component), props.children, showFooter ? React__default.createElement(DialogFooter, {
-    dialog: props.dialog,
-    buttonList: props.buttonList,
-    labelClose: props.labelClose,
-    onClose: props.onClose,
-    isDismissible: props.isDismissible
-  }) : null));
-};
-
-var styles$R = {"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$X = {"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() {
@@ -64145,7 +64141,7 @@ var UserProfileMenuItem = function UserProfileMenuItem(props) {
   };
   if (props.link) {
     return React__default.createElement("div", {
-      className: styles$R['vitro-dropdown-item'],
+      className: styles$X['vitro-dropdown-item'],
       onClick: onClick
     }, React__default.createElement("a", {
       href: props.link
@@ -64156,7 +64152,7 @@ var UserProfileMenuItem = function UserProfileMenuItem(props) {
   }
   if (props.onClick) {
     return React__default.createElement("div", {
-      className: styles$R['vitro-dropdown-item'],
+      className: styles$X['vitro-dropdown-item'],
       key: props.text,
       onClick: onClick
     }, props.imageUrl && React__default.createElement(Image, {
@@ -64190,15 +64186,15 @@ var UserProfile = function UserProfile(props) {
   return React__default.createElement(reactstrap.Dropdown, {
     isOpen: dropdownOpen,
     toggle: toggle,
-    className: styles$R['vitro-user-profile']
+    className: styles$X['vitro-user-profile']
   }, React__default.createElement(reactstrap.DropdownToggle, {
     caret: true
   }, React__default.createElement("div", null, React__default.createElement("span", {
-    className: styles$R['vitro-text-color-white']
+    className: styles$X['vitro-text-color-white']
   }, createSurnameWithInitials(props.userName)), React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.image,
-    className: styles$R['vitro-avatar']
+    className: styles$X['vitro-avatar']
   }))), React__default.createElement(reactstrap.DropdownMenu, {
     right: true
   }, props.dropdownMenuItemList && props.dropdownMenuItemList.length > 0 && props.dropdownMenuItemList.map(function (item) {
@@ -64208,7 +64204,7 @@ var UserProfile = function UserProfile(props) {
   })));
 };
 
-var styles$S = {"vitro-avatar":"_user-lookup-picker_vitro-avatar_2vI-SeH"};
+var styles$Y = {"vitro-avatar":"_user-lookup-picker_vitro-avatar_2vI-SeH"};
 
 var UserLookupPicker = React.forwardRef(function (props, ref) {
   var lookupPickerRef = React.useRef(null);
@@ -64216,7 +64212,7 @@ var UserLookupPicker = React.forwardRef(function (props, ref) {
     var prop = props.getHtmlValueTemplateProps(item);
     if (props.isMultiSelect) {
       return _extends({}, prop, {
-        className: styles$S['vitro-avatar']
+        className: styles$Y['vitro-avatar']
       });
     }
     return prop;
@@ -64237,22 +64233,22 @@ var UserLookupPicker = React.forwardRef(function (props, ref) {
   }));
 });
 
-var styles$T = {"vitro-title":"_activity_vitro-title_1rdvvaa","vitro-dropdown-button":"_activity_vitro-dropdown-button_12258nJ","vitro-activity":"_activity_vitro-activity_1u7YeF3"};
+var styles$Z = {"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) {
   return React__default.createElement("div", {
     className: 'vitro-activity'
   }, (props.filterDropdownList || props.title) && React__default.createElement("div", {
-    className: styles$T['vitro-title']
+    className: styles$Z['vitro-title']
   }, props.filterDropdownList && React__default.createElement(DropdownButton, {
     itemList: props.filterDropdownList,
-    className: styles$T['vitro-dropdown-button']
+    className: styles$Z['vitro-dropdown-button']
   }), props.title && React__default.createElement("h3", null, props.title)), React__default.createElement("div", {
     className: 'vitro-content'
   }, props.children));
 };
 
-var styles$U = {"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$_ = {"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),
@@ -64294,25 +64290,25 @@ var ActivityMessage = function ActivityMessage(props) {
     return false;
   };
   return React__default.createElement("div", {
-    className: styles$U['vitro-activity-message']
+    className: styles$_['vitro-activity-message']
   }, props.changedValueList.map(function (item) {
     return React__default.createElement("div", {
-      className: styles$U['vitro-item']
+      className: styles$_['vitro-item']
     }, item.fieldName && React__default.createElement("span", {
-      className: styles$U['vitro-field-name']
+      className: styles$_['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$U['vitro-value'],
+      className: styles$_['vitro-value'],
       ref: oldValueRef
     }, item.oldValue)), React__default.createElement("span", {
-      className: styles$U['vitro-separator']
+      className: styles$_['vitro-separator']
     })), React__default.createElement(Tooltip$1, {
       text: item.newValue,
       isShow: isShowNewValueTooltip ? undefined : false
     }, React__default.createElement("div", {
-      className: item.isMessage ? styles$U['vitro-message'] : styles$U['vitro-value'],
+      className: item.isMessage ? styles$_['vitro-message'] : styles$_['vitro-value'],
       ref: newValueRef
     }, item.newValue)));
   }));
@@ -64335,7 +64331,7 @@ var LOCALE$6;
   LOCALE["PLACEHOLDER"] = "app.common.messageInput.placeholder";
 })(LOCALE$6 || (LOCALE$6 = {}));
 
-var styles$V = {"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"};
+var styles$$ = {"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"};
 
 var NEW_LINE = '\n';
 var MessageInput = function MessageInput(props) {
@@ -64386,14 +64382,14 @@ var MessageInput = function MessageInput(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$V['vitro-message-input'],
+    className: styles$$['vitro-message-input'],
     onDrop: props.onDrop
   }, React__default.createElement("div", {
-    className: styles$V['vitro-control']
+    className: styles$$['vitro-control']
   }, !props.isDisabled && React__default.createElement(ScrollBar, {
     isHideScrollX: true
   }, React__default.createElement("div", {
-    className: styles$V['vitro-message'],
+    className: styles$$['vitro-message'],
     ref: inputRef,
     onChange: onChange,
     onKeyDown: onKeyDown,
@@ -64401,17 +64397,17 @@ var MessageInput = function MessageInput(props) {
     onBlur: onBlur,
     contentEditable: true
   }, isShowPlaceholder && React__default.createElement("span", {
-    className: styles$V['vitro-placeholder']
+    className: styles$$['vitro-placeholder']
   }, props.placeholder || localeService.create(LOCALE$6.PLACEHOLDER)))), props.children, props.onAddFile && React__default.createElement("button", {
     onClick: props.onAddFile,
-    className: styles$V['vitro-button-add-file']
+    className: styles$$['vitro-button-add-file']
   })), React__default.createElement("button", {
     onClick: onEnter,
-    className: styles$V['vitro-button-send']
+    className: styles$$['vitro-button-send']
   }));
 };
 
-var styles$W = {"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"};
+var styles$10 = {"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","vitro-error-text":"_image-picker_vitro-error-text_3xviMND"};
 
 var ACTION$1;
 (function (ACTION) {
@@ -64430,16 +64426,16 @@ var ImagePicker = function ImagePicker(props) {
   var renderPreview = function renderPreview() {
     if (props.defaultUrl) {
       return React__default.createElement("div", {
-        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$W['vitro-image-picker-image-wrapper']
+        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$10['vitro-image-picker-image-wrapper']
       }, React__default.createElement(Image, {
         defaultUrl: props.defaultUrl,
-        className: props.classNameImage ? props.classNameImage : styles$W['vitro-image-picker-image']
+        className: props.classNameImage ? props.classNameImage : styles$10['vitro-image-picker-image']
       }));
     } else {
       return React__default.createElement("div", {
-        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$W['vitro-image-picker-defaultImage-wrapper']
+        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$10['vitro-image-picker-defaultImage-wrapper']
       }, React__default.createElement("div", {
-        className: styles$W['vitro-image-default']
+        className: styles$10['vitro-image-default']
       }));
     }
   };
@@ -64479,24 +64475,28 @@ 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$W['vitro-image-picker-wrapper']
+    className: styles$10['vitro-image-picker-wrapper']
   }, React__default.createElement("div", {
-    className: styles$W['vitro-image-picker-label-wrapper']
-  }, props.label ? props.label : ''), React__default.createElement("div", {
-    className: props.classNameRoot ? props.classNameRoot : styles$W['vitro-image-picker-root']
+    className: styles$10['vitro-image-picker-label-wrapper']
+  }, props.label ? props.label : '', props.isRequired && React__default.createElement("span", {
+    className: styles$10['vitro-required']
+  }, CTRL.ASTERISK)), React__default.createElement("div", {
+    className: props.classNameRoot ? props.classNameRoot : styles$10['vitro-image-picker-root']
   }, !props.isReadOnly && React__default.createElement(DropdownButton, {
     itemList: defaultItemList,
-    className: styles$W['vitro-image-picker-dropdown-wrapper']
+    className: styles$10['vitro-image-picker-dropdown-wrapper']
   }), React__default.createElement("input", {
     type: 'file',
-    className: styles$W['vitro-image-picker-input'],
+    className: styles$10['vitro-image-picker-input'],
     ref: inputFileRef,
     onChange: onChange,
     accept: "image/*"
-  }), renderPreview()));
+  }), renderPreview()), props.errorMessage && React__default.createElement("span", {
+    className: styles$10['vitro-error-text']
+  }, props.errorMessage));
 };
 
-var styles$X = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","vitro-block":"_criterion_vitro-block_3E9-RXM","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"};
+var styles$11 = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","vitro-block":"_criterion_vitro-block_3E9-RXM","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"};
 
 var ROOT_ID = 'root';
 var ConditionSelect = React.forwardRef(function (props, ref) {
@@ -64554,13 +64554,13 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
     var root = document.getElementById(ROOT_ID);
     if (position && root) {
       var container = document.createElement('div');
-      container.className = styles$X['vitro-condition-list-container'];
+      container.className = styles$11['vitro-condition-list-container'];
       container.style.left = position.left + UNIT.PX;
       container.style.top = position.top + UNIT.PX;
       setConditionListContainer(container);
       var content = React__default.createElement("ul", {
         ref: listRef,
-        className: styles$X['vitro-condition-list'],
+        className: styles$11['vitro-condition-list'],
         onBlur: onBlur
       }, props.itemList.map(function (item) {
         return React__default.createElement("li", {
@@ -64569,7 +64569,7 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
           }
         }, item.imageUrl && React__default.createElement(Image, {
           defaultUrl: item.imageUrl,
-          className: styles$X['vitro-image']
+          className: styles$11['vitro-image']
         }), item.text);
       }));
       reactDom.render(content, container);
@@ -64578,12 +64578,12 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
   };
   return React__default.createElement(React__default.Fragment, null, condition && React__default.createElement("div", {
     ref: ref,
-    className: styles$X['vitro-condition-select']
+    className: styles$11['vitro-condition-select']
   }, React__default.createElement("div", {
     onClick: toggleSelect
   }, condition.imageUrl ? React__default.createElement(Image, {
     defaultUrl: condition.imageUrl,
-    className: styles$X['vitro-image']
+    className: styles$11['vitro-image']
   }) : condition.text)));
 });
 
@@ -64663,13 +64663,13 @@ var Criterion = function Criterion(props) {
     onChange(value);
   };
   var onFocus = function onFocus(e) {
-    setState(styles$X['vitro-focus']);
+    setState(styles$11['vitro-focus']);
     if (componentProps.onFocus) {
       componentProps.onFocus(e);
     }
   };
   var onBlur = function onBlur(e) {
-    setState(componentProps.errorMessage ? styles$X['vitro-error'] : CTRL.EMPTY);
+    setState(componentProps.errorMessage ? styles$11['vitro-error'] : CTRL.EMPTY);
     if (componentProps.onBlur) {
       componentProps.onBlur(e);
     }
@@ -64699,12 +64699,12 @@ var Criterion = function Criterion(props) {
     var root = document.getElementById(ROOT_ID$1);
     if (position && root) {
       var container = document.createElement('div');
-      container.className = styles$X['vitro-operator-list-container'];
+      container.className = styles$11['vitro-operator-list-container'];
       container.style.left = position.right + UNIT.PX;
       container.style.top = position.top + UNIT.PX;
       setOperatorListContainer(container);
       var content = React__default.createElement("ul", {
-        className: styles$X['vitro-operator-list']
+        className: styles$11['vitro-operator-list']
       }, props.operatorList.map(function (item) {
         return React__default.createElement("li", {
           onClick: function onClick() {
@@ -64717,25 +64717,25 @@ var Criterion = function Criterion(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$X['vitro-criterion-container']
+    className: styles$11['vitro-criterion-container']
   }, React__default.createElement("div", {
-    className: styles$X['vitro-operator-select-container']
+    className: styles$11['vitro-operator-select-container']
   }, props.isShowOperatorSelect && React__default.createElement("div", {
     ref: operatorSelectRef,
-    className: styles$X['vitro-operator-select'],
+    className: styles$11['vitro-operator-select'],
     onClick: toggleOperatorSelect
   }, React__default.createElement("div", null, operator.text))), React__default.createElement("div", {
-    className: styles$X['vitro-control'] + CTRL.SPACE + state
+    className: styles$11['vitro-control'] + CTRL.SPACE + state
   }, React__default.createElement("div", {
     ref: labelRef,
-    className: styles$X['vitro-label']
+    className: styles$11['vitro-label']
   }, React__default.createElement("span", null, props.label)), React__default.createElement(ConditionSelect, {
     ref: conditionSelectRef,
     itemList: props.conditionList,
     onSelect: onConditionClick,
     defaultValue: defaultCondition
   }), React__default.createElement(props.content.component, _extends({}, componentProps, {
-    className: styles$X['vitro-control'],
+    className: styles$11['vitro-control'],
     onBlur: onBlur,
     onFocus: onFocus,
     onChange: onControlChange,
@@ -64747,7 +64747,7 @@ var Criterion = function Criterion(props) {
     onClick: function onClick() {
       return props.onDelete(componentProps.id);
     },
-    className: styles$X['vitro-button-cancel']
+    className: styles$11['vitro-button-cancel']
   }));
 };
 
@@ -64757,7 +64757,7 @@ var LOCALE$8;
   LOCALE["EMPTY_PLACEHOLDER"] = "app.common.search.checkboxList.emptyPlaceholder";
 })(LOCALE$8 || (LOCALE$8 = {}));
 
-var styles$Y = {"vitro-control":"_input_vitro-control__btu7j_","vitro-active":"_input_vitro-active_jxhGdE8","vitro-focus":"_input_vitro-focus_3tuxmPs","vitro-button-search":"_input_vitro-button-search_15PeWCS","vitro-search-value-list":"_input_vitro-search-value-list_2I_KVY5","vitro-button-cancel":"_input_vitro-button-cancel_YqNZPj-","vitro-button-settings":"_input_vitro-button-settings_1w9FwYt","vitro-search-value":"_input_vitro-search-value_1ZbcNTJ"};
+var styles$12 = {"vitro-control":"_input_vitro-control__btu7j_","vitro-active":"_input_vitro-active_jxhGdE8","vitro-focus":"_input_vitro-focus_3tuxmPs","vitro-button-search":"_input_vitro-button-search_15PeWCS","vitro-search-value-list":"_input_vitro-search-value-list_2I_KVY5","vitro-button-cancel":"_input_vitro-button-cancel_YqNZPj-","vitro-button-settings":"_input_vitro-button-settings_1w9FwYt","vitro-search-value":"_input_vitro-search-value_1ZbcNTJ"};
 
 var NEW_LINE$1 = '\n';
 var Input$1 = function Input(props) {
@@ -64803,21 +64803,21 @@ var Input$1 = function Input(props) {
     onSubmit();
   };
   var onFocus = function onFocus() {
-    setState(styles$Y['vitro-focus']);
+    setState(styles$12['vitro-focus']);
     if (props.onFocus) {
       props.onFocus();
     }
   };
   var getClassName = function getClassName() {
-    var classList = [styles$Y['vitro-control'], props.className || CTRL.EMPTY, state];
+    var classList = [styles$12['vitro-control'], props.className || CTRL.EMPTY, state];
     if (props.isActive) {
-      classList.push(styles$Y['vitro-active']);
+      classList.push(styles$12['vitro-active']);
     }
     return classList.join(CTRL.SPACE);
   };
   var getTextValue = function getTextValue(value) {
     var valueArray = value.valueList.map(function (x) {
-      if (typeof x === 'object') {
+      if (x && typeof x === 'object') {
         if (x instanceof Date) {
           return x.toLocaleString().split(CTRL.COMMA)[0];
         }
@@ -64854,24 +64854,24 @@ var Input$1 = function Input(props) {
     var firstValue = valueList[0];
     var list = valueList.slice(1);
     return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-      className: styles$Y['vitro-search-value']
+      className: styles$12['vitro-search-value']
     }, React__default.createElement("span", null, getTextValue(firstValue)), React__default.createElement("button", {
       onClick: function onClick() {
         return onRemoveValue([firstValue]);
       },
-      className: styles$Y['vitro-button-cancel']
+      className: styles$12['vitro-button-cancel']
     })), list.length >= 1 ? React__default.createElement(Tooltip$1, {
       text: getTextValueList(list),
-      placement: PLACEMENT$1.BOTTOM
+      placement: PLACEMENT.BOTTOM
     }, React__default.createElement("div", {
-      className: styles$Y['vitro-search-value']
+      className: styles$12['vitro-search-value']
     }, localeService.create(LOCALE$8.INPUT_MORE, {
       count: list.length
     }), React__default.createElement("button", {
       onClick: function onClick() {
         return onRemoveValue(list);
       },
-      className: styles$Y['vitro-button-cancel']
+      className: styles$12['vitro-button-cancel']
     }))) : null);
   };
   var onSearchClick = function onSearchClick() {
@@ -64884,10 +64884,10 @@ var Input$1 = function Input(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: getClassName()
   }, React__default.createElement("button", {
-    className: styles$Y['vitro-button-search'] + (props.isSettingsActive ? CTRL.SPACE + styles$Y['vitro-active'] : CTRL.EMPTY),
+    className: styles$12['vitro-button-search'] + (props.isSettingsActive ? CTRL.SPACE + styles$12['vitro-active'] : CTRL.EMPTY),
     onClick: onSearchClick
   }), !props.isMobileView && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$Y['vitro-search-value-list']
+    className: styles$12['vitro-search-value-list']
   }, props.valueList.length ? getSelectedValueList(props.valueList) : React__default.createElement("input", {
     type: 'text',
     ref: inputRef,
@@ -64898,10 +64898,10 @@ var Input$1 = function Input(props) {
     placeholder: !props.isActive ? props.placeholder : CTRL.EMPTY
   })), props.isActive && React__default.createElement(React__default.Fragment, null, props.isShowSettings && React__default.createElement("button", {
     onClick: onSettingsClick,
-    className: styles$Y['vitro-button-settings'] + (props.isSettingsActive ? CTRL.SPACE + styles$Y['vitro-active'] : CTRL.EMPTY)
+    className: styles$12['vitro-button-settings'] + (props.isSettingsActive ? CTRL.SPACE + styles$12['vitro-active'] : CTRL.EMPTY)
   }), React__default.createElement("button", {
     onClick: onCancel,
-    className: styles$Y['vitro-button-cancel']
+    className: styles$12['vitro-button-cancel']
   })))));
 };
 
@@ -65089,7 +65089,7 @@ var FieldIterator = React.forwardRef(function (props, ref) {
   })));
 });
 
-var styles$Z = {"vitro-search":"_search_vitro-search_QkJksC_","vitro-active":"_search_vitro-active_1HhQOCR","vitro-settings-dialog":"_search_vitro-settings-dialog_1_c5bIg","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-footer":"_search_vitro-footer_1-ya4xk","vitro-button-cancel":"_search_vitro-button-cancel_1M8UkMM"};
+var styles$13 = {"vitro-search":"_search_vitro-search_QkJksC_","vitro-active":"_search_vitro-active_1HhQOCR","vitro-settings-dialog":"_search_vitro-settings-dialog_1_c5bIg","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-footer":"_search_vitro-footer_1-ya4xk","vitro-button-cancel":"_search_vitro-button-cancel_1M8UkMM"};
 
 var Filter = function Filter(props) {
   var _useState = React.useState(null),
@@ -65147,7 +65147,7 @@ var Filter = function Filter(props) {
     props.onChange(changedFieldValueMap);
   };
   return React__default.createElement("div", {
-    className: styles$Z['vitro-filter']
+    className: styles$13['vitro-filter']
   }, componentMap && React__default.createElement(FieldIterator, {
     fieldList: props.fieldList,
     fieldValueMap: fieldValueMap,
@@ -65158,7 +65158,7 @@ var Filter = function Filter(props) {
   }));
 };
 
-var styles$_ = {"vitro-checkbox-list":"_checkbox-list_vitro-checkbox-list_1iZSkkv","vitro-control":"_checkbox-list_vitro-control_cxgm4cj","vitro-checkbox":"_checkbox-list_vitro-checkbox_1EqsnoQ"};
+var styles$14 = {"vitro-checkbox-list":"_checkbox-list_vitro-checkbox-list_1iZSkkv","vitro-control":"_checkbox-list_vitro-control_cxgm4cj","vitro-checkbox":"_checkbox-list_vitro-checkbox_1EqsnoQ"};
 
 var CheckboxList = function CheckboxList(props) {
   var _useState = React.useState(props.itemList),
@@ -65211,18 +65211,18 @@ var CheckboxList = function CheckboxList(props) {
       onChange: function onChange(value, name) {
         return _onChange(value, item.id);
       },
-      className: styles$_['vitro-checkbox']
+      className: styles$14['vitro-checkbox']
     });
   };
   return React__default.createElement("div", {
-    className: styles$_['vitro-checkbox-list']
+    className: styles$14['vitro-checkbox-list']
   }, React__default.createElement(Input$1, {
     valueList: [],
     onCancel: onSearchCancel,
     onChange: onInputChange,
     onSubmit: onInputChange,
     isActive: false,
-    className: styles$_['vitro-control'],
+    className: styles$14['vitro-control'],
     isMobileView: false
   }), React__default.createElement(ScrollBar, null, isShowSearchResult ? searchItemList.length ? searchItemList.map(function (item) {
     return getCheckbox(item);
@@ -65231,7 +65231,7 @@ var CheckboxList = function CheckboxList(props) {
   })));
 };
 
-var ESC_KEY_CODE$1 = 27;
+var ESC_KEY_CODE = 27;
 var CONDITION_CONTAINS = 11;
 var Search = function Search(props) {
   var _useState = React.useState(false),
@@ -65297,7 +65297,7 @@ var Search = function Search(props) {
   }, [window.innerWidth]);
   React.useEffect(function () {
     if (selectedSearchCriterionList.length) {
-      setState(styles$Z['vitro-active']);
+      setState(styles$13['vitro-active']);
     }
   }, [selectedSearchCriterionList]);
   React.useEffect(function () {
@@ -65358,6 +65358,16 @@ var Search = function Search(props) {
         }
       });
     });
+    var field = props.fieldList.find(function (field) {
+      return field.id === id;
+    });
+    if (field) {
+      setSearchCriterionList(function (prevState) {
+        return prevState.filter(function (criterion) {
+          return criterion.internalName !== field.internalName;
+        });
+      });
+    }
   };
   var onFilterChange = function onFilterChange(changedFieldValueMap, saveStatus) {
     var criterionList = [];
@@ -65427,7 +65437,7 @@ var Search = function Search(props) {
     setSearchCriterionList([criterion]);
   };
   var onEscClick = function onEscClick(e) {
-    if (e.keyCode === ESC_KEY_CODE$1) {
+    if (e.keyCode === ESC_KEY_CODE) {
       closeSettings();
     }
   };
@@ -65437,7 +65447,7 @@ var Search = function Search(props) {
     }
   };
   var onFocusInput = function onFocusInput() {
-    setState(styles$Z['vitro-active']);
+    setState(styles$13['vitro-active']);
   };
   var onRemoveValue = function onRemoveValue(valueList) {
     setSearchCriterionList(valueList);
@@ -65445,7 +65455,7 @@ var Search = function Search(props) {
   };
   return React__default.createElement("div", {
     ref: searchRef,
-    className: styles$Z['vitro-search'] + CTRL.SPACE + state
+    className: styles$13['vitro-search'] + CTRL.SPACE + state
   }, React__default.createElement(Input$1, {
     valueList: selectedSearchCriterionList,
     onSettingsClick: onSettingsClick,
@@ -65460,7 +65470,7 @@ var Search = function Search(props) {
     isMobileView: isMobileView,
     isShowSettings: true
   }), isShowDialog && React__default.createElement("div", {
-    className: styles$Z['vitro-settings-dialog']
+    className: styles$13['vitro-settings-dialog']
   }, React__default.createElement(Filter, {
     fieldList: filterFieldList,
     valueList: selectedSearchCriterionList,
@@ -65471,24 +65481,24 @@ var Search = function Search(props) {
     getConditionList: props.getConditionList,
     getDefaultCondition: props.getDefaultCondition
   }), isShowAddFieldButton && React__default.createElement("div", {
-    className: styles$Z['vitro-add-field']
+    className: styles$13['vitro-add-field']
   }, React__default.createElement(Button$2, {
     text: props.labelAddField,
     onClick: onAddField,
-    className: styles$Z['vitro-add-field-button']
+    className: styles$13['vitro-add-field-button']
   }), isShowAddFieldDialog && React__default.createElement("div", {
     ref: addFieldDialogRef,
-    className: styles$Z['vitro-add-field-dialog']
+    className: styles$13['vitro-add-field-dialog']
   }, React__default.createElement(CheckboxList, {
     itemList: checkboxFieldList,
     onChange: onFieldListChange,
     isAllSelected: props.isAllFieldsVisible
   }))), React__default.createElement("div", {
-    className: styles$Z['vitro-footer']
+    className: styles$13['vitro-footer']
   }, React__default.createElement(Button$2, {
     text: props.labelCancel,
     onClick: closeSettings,
-    className: styles$Z['vitro-button-cancel']
+    className: styles$13['vitro-button-cancel']
   }), React__default.createElement(Button$2, {
     text: props.labelSearch,
     onClick: onSubmit
@@ -65528,7 +65538,7 @@ var Splitter = function Splitter(props) {
   }, props.children);
 };
 
-var styles$$ = {"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$15 = {"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),
@@ -65538,42 +65548,42 @@ var RouteItem = function RouteItem(props) {
     isShowComment = _useState2[0],
     setIsShowComment = _useState2[1];
   return React__default.createElement("div", {
-    className: styles$$['vitro-route-item']
+    className: styles$15['vitro-route-item']
   }, props.children ? React__default.createElement("button", {
-    className: isExpanded ? styles$$['vitro-button-collapse'] : styles$$['vitro-button-expand'],
+    className: isExpanded ? styles$15['vitro-button-collapse'] : styles$15['vitro-button-expand'],
     onClick: function onClick() {
       return setIsExpanded(!isExpanded);
     }
   }) : null, React__default.createElement("div", {
-    className: styles$$['vitro-route-item-content']
+    className: styles$15['vitro-route-item-content']
   }, props.userName && props.status && React__default.createElement("div", {
-    className: styles$$['vitro-route-item-header']
+    className: styles$15['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$$['vitro-avatar']
+    className: styles$15['vitro-avatar']
   }), props.userName), React__default.createElement("div", {
-    className: styles$$['vitro-date']
+    className: styles$15['vitro-date']
   }, props.date)), React__default.createElement("div", null, React__default.createElement("div", null, props.statusColor && React__default.createElement("div", {
-    className: styles$$['vitro-status-color'],
+    className: styles$15['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$$['vitro-route-item-body']
+    className: styles$15['vitro-route-item-body']
   }, React__default.createElement("div", {
-    className: styles$$['vitro-flex']
+    className: styles$15['vitro-flex']
   }, React__default.createElement("span", null, props.name), props.comment && React__default.createElement("button", {
-    className: isShowComment ? styles$$['vitro-button-hide-comment'] : styles$$['vitro-button-show-comment'],
+    className: isShowComment ? styles$15['vitro-button-hide-comment'] : styles$15['vitro-button-show-comment'],
     onClick: function onClick() {
       return setIsShowComment(!isShowComment);
     }
   })), isShowComment && props.comment && React__default.createElement("div", {
-    className: styles$$['vitro-comment']
+    className: styles$15['vitro-comment']
   }, props.comment)), isExpanded && React__default.createElement("div", {
-    className: styles$$['vitro-route-item-child']
+    className: styles$15['vitro-route-item-child']
   }, props.children)));
 };
 
@@ -65681,7 +65691,7 @@ var BimViewer = function BimViewer(props) {
   });
 };
 
-var styles$10 = {"vitro-page":"_page-layout_vitro-page_GzZ3agH"};
+var styles$16 = {"vitro-page":"_page-layout_vitro-page_GzZ3agH"};
 
 var PageLayout = function PageLayout(props) {
   var getClassName = function getClassName(sidebar) {
@@ -65695,7 +65705,7 @@ var PageLayout = function PageLayout(props) {
     return CTRL.SPACE + classNameArr.join(CTRL.SPACE);
   };
   return React__default.createElement("div", {
-    className: styles$10['vitro-page'] + getClassName(props.sidebar) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$16['vitro-page'] + getClassName(props.sidebar) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     id: 'vitro-page'
   }, props.children);
 };
@@ -65710,7 +65720,7 @@ var HeaderConstants = {
     get LOCAL_STORAGE_KEY () { return LOCAL_STORAGE_KEY; }
 };
 
-var styles$11 = {"vitro-header":"_header_vitro-header_ta9aLJn"};
+var styles$17 = {"vitro-header":"_header_vitro-header_ta9aLJn"};
 
 var onChangeSidebarMode = function onChangeSidebarMode() {};
 var Header = function Header(props) {
@@ -65753,44 +65763,44 @@ var Header = function Header(props) {
     }
   }, [props.sidebar]);
   return React__default.createElement("div", {
-    className: styles$11['vitro-header'],
+    className: styles$17['vitro-header'],
     id: 'vitro-header',
     ref: ref
   }, props.children);
 };
 
-var styles$12 = {"vitro-nav-bar-sidebar-button":"_header-nav-bar-sidebar-button_vitro-nav-bar-sidebar-button_3IZcIOc"};
+var styles$18 = {"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$12['vitro-nav-bar-sidebar-button'],
+    className: styles$18['vitro-nav-bar-sidebar-button'],
     onClick: props.onClick
   });
 };
 
-var styles$13 = {"vitro-nav-bar":"_header-nav-bar_vitro-nav-bar_EuyFIk8"};
+var styles$19 = {"vitro-nav-bar":"_header-nav-bar_vitro-nav-bar_EuyFIk8"};
 
 var HeaderNavBar = function HeaderNavBar(props) {
   return React__default.createElement("nav", {
-    className: styles$13['vitro-nav-bar'] + CTRL.SPACE + ['navbar', 'navbar-expand-lg', 'navbar-light'].join(CTRL.SPACE)
+    className: styles$19['vitro-nav-bar'] + CTRL.SPACE + ['navbar', 'navbar-expand-lg', 'navbar-light'].join(CTRL.SPACE)
   }, React__default.createElement(SidebarButton, {
     onClick: onChangeSidebarMode
   }), props.children);
 };
 
-var styles$14 = {"vitro-nav-service":"_header-nav-service_vitro-nav-service_1-i4GOh"};
+var styles$1a = {"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$14['vitro-nav-service']
+    className: styles$1a['vitro-nav-service']
   }, React__default.createElement("div", {
     className: logoStyles['vitro-customer-logo']
   }), props.children);
 };
 
-var styles$15 = {"vitro-product-title":"_product-title_vitro-product-title_2gZcA5j"};
+var styles$1b = {"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, {
@@ -65800,7 +65810,7 @@ var ProductTitle = function ProductTitle(props) {
   if (props.href) {
     return React__default.createElement("a", {
       href: props.href,
-      className: styles$15['vitro-product-title'],
+      className: styles$1b['vitro-product-title'],
       title: props.imageCaption
     }, content);
   }
@@ -65815,16 +65825,16 @@ var ProductTitle = function ProductTitle(props) {
   };
   return React__default.createElement("a", {
     onClick: onClick,
-    className: styles$15['vitro-product-title'],
+    className: styles$1b['vitro-product-title'],
     title: props.imageCaption
   }, content);
 };
 
-var styles$16 = {"vitro-right":"_right-align-control-group_vitro-right_2vnd6R7"};
+var styles$1c = {"vitro-right":"_right-align-control-group_vitro-right_2vnd6R7"};
 
 var RightAlignControlGroup = function RightAlignControlGroup(props) {
   return React__default.createElement("div", {
-    className: styles$16['vitro-right']
+    className: styles$1c['vitro-right']
   }, props.children);
 };
 
@@ -65834,32 +65844,32 @@ var LeftAlignControlGroup = function LeftAlignControlGroup(props) {
   }, props.children);
 };
 
-var styles$17 = {"vitro-center":"_center-align-control-group_vitro-center_3SHmVN-"};
+var styles$1d = {"vitro-center":"_center-align-control-group_vitro-center_3SHmVN-"};
 
 var CenterAlignControlGroup = function CenterAlignControlGroup(props) {
   return React__default.createElement("div", {
-    className: styles$17['vitro-center']
+    className: styles$1d['vitro-center']
   }, props.children);
 };
 
-var styles$18 = {"vitro-main":"_main_vitro-main_Kk2JMBF"};
+var styles$1e = {"vitro-main":"_main_vitro-main_Kk2JMBF"};
 
 var Main = function Main(props) {
   return React__default.createElement("div", {
-    className: styles$18['vitro-main'],
+    className: styles$1e['vitro-main'],
     id: 'vitro-main'
   }, props.children);
 };
 
-var styles$19 = {"vitro-table-view-detail":"_table-view-detail_vitro-table-view-detail_zxwp4XX"};
+var styles$1f = {"vitro-table-view-detail":"_table-view-detail_vitro-table-view-detail_zxwp4XX"};
 
 var TableViewDetail = function TableViewDetail(props) {
   return React__default.createElement("div", {
-    className: styles$19['vitro-table-view-detail']
+    className: styles$1f['vitro-table-view-detail']
   }, props.children);
 };
 
-var styles$1a = {"vitro-title":"_expand-control-group_vitro-title_3nqqfyQ","vitro-button-collapse":"_expand-control-group_vitro-button-collapse_14wEdB1","vitro-button-expand":"_expand-control-group_vitro-button-expand_bwV3dXl","vitro-expand-control-group":"_expand-control-group_vitro-expand-control-group_1qSUMoN","vitro-content":"_expand-control-group_vitro-content_2UPEUhm","vitro-display-none":"_expand-control-group_vitro-display-none_Zs_5rQL","vitro-right":"_expand-control-group_vitro-right_jD5r2aS"};
+var styles$1g = {"vitro-title":"_expand-control-group_vitro-title_3nqqfyQ","vitro-expand-collapse-button":"_expand-control-group_vitro-expand-collapse-button_hBX5TTj","vitro-expand-control-group":"_expand-control-group_vitro-expand-control-group_1qSUMoN","vitro-content":"_expand-control-group_vitro-content_2UPEUhm","vitro-display-none":"_expand-control-group_vitro-display-none_Zs_5rQL","vitro-right":"_expand-control-group_vitro-right_jD5r2aS","vitro-button-collapse":"_expand-control-group_vitro-button-collapse_14wEdB1","vitro-button-expand":"_expand-control-group_vitro-button-expand_bwV3dXl"};
 
 var ExpandControlGroup = function ExpandControlGroup(props) {
   var _useState = React.useState(props.isOpen),
@@ -65870,18 +65880,20 @@ var ExpandControlGroup = function ExpandControlGroup(props) {
     props.onClick && props.onClick();
   };
   return React__default.createElement("div", {
-    className: styles$1a['vitro-expand-control-group']
+    className: styles$1g['vitro-expand-control-group']
   }, React__default.createElement("div", {
-    className: styles$1a['vitro-title'],
+    className: styles$1g['vitro-title'],
     onClick: onClick
-  }, React__default.createElement("div", {
-    className: isOpen ? styles$1a['vitro-button-collapse'] : styles$1a['vitro-button-expand'] + (props.isRight ? CTRL.SPACE + styles$1a['vitro-right'] : CTRL.EMPTY)
+  }, React__default.createElement(ExpandCollapseButton, {
+    isExpanded: isOpen,
+    onClick: onClick,
+    className: styles$1g['vitro-expand-collapse-button'] + (props.isRight ? CTRL.SPACE + styles$1g['vitro-right'] : CTRL.EMPTY)
   }), props.title), React__default.createElement("div", {
-    className: styles$1a['vitro-content'] + (isOpen ? CTRL.EMPTY : CTRL.SPACE + styles$1a['vitro-display-none'])
+    className: styles$1g['vitro-content'] + (isOpen ? CTRL.EMPTY : CTRL.SPACE + styles$1g['vitro-display-none'])
   }, props.children));
 };
 
-var styles$1b = {"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$1h = {"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);
@@ -65905,14 +65917,14 @@ var Radio = React.forwardRef(function (props, ref) {
       props.onChange(props.value, e);
     }
   };
-  var className = styles$1b['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$1b['vitro-left-label'] : CTRL.EMPTY) + CTRL.SPACE + (props.isDisabled ? styles$1b['vitro-disabled'] : CTRL.EMPTY) + CTRL.SPACE + (props.className || CTRL.EMPTY);
+  var className = styles$1h['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$1h['vitro-left-label'] : CTRL.EMPTY) + CTRL.SPACE + (props.isDisabled ? styles$1h['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$1b['vitro-label']
+    className: styles$1h['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$1b['vitro-radio-content']
+    className: styles$1h['vitro-radio-content']
   }, React__default.createElement("input", {
     ref: radioRef,
     type: 'radio',
@@ -65924,25 +65936,10 @@ var Radio = React.forwardRef(function (props, ref) {
     onChange: onChange
   }), props.labelPosition !== POSITION.LEFT && React__default.createElement(Label, {
     text: props.label,
-    className: styles$1b['vitro-label']
+    className: styles$1h['vitro-label']
   })));
 });
 
-var styles$1c = {"vitro-image-button":"_image-button_vitro-image-button_34pBVmE"};
-
-var ImageButton = function ImageButton(props) {
-  return React__default.createElement(Tooltip$1, {
-    text: props.tooltipText || CTRL.EMPTY,
-    placement: props.tooltipPlacement
-  }, React__default.createElement("button", {
-    onClick: props.onClick,
-    className: styles$1c['vitro-image-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
-  }, props.imageUrl && React__default.createElement(Image, {
-    defaultUrl: props.imageUrl,
-    hoverUrl: props.imageHoverUrl
-  })));
-};
-
 var LOCALE$9;
 (function (LOCALE) {
   LOCALE["TOOLTIP_EDIT"] = "app.common.linkInput.tooltip.edit";
@@ -65953,7 +65950,7 @@ var TARGET$1 = function TARGET() {};
 TARGET$1.BLANK = '_blank';
 TARGET$1.SELF = '_self';
 
-var styles$1d = {"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$1i = {"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),
@@ -66023,7 +66020,7 @@ var LinkInput = React.forwardRef(function (props, ref) {
       link.remove();
     }
   };
-  var className = styles$1d['vitro-link-input'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY) + (props.isReadOnly ? CTRL.SPACE + styles$1d['vitro-read-only'] : CTRL.EMPTY) + (isEditMode ? CTRL.SPACE + styles$1d['vitro-edit-mode'] : CTRL.EMPTY);
+  var className = styles$1i['vitro-link-input'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY) + (props.isReadOnly ? CTRL.SPACE + styles$1i['vitro-read-only'] : CTRL.EMPTY) + (isEditMode ? CTRL.SPACE + styles$1i['vitro-edit-mode'] : CTRL.EMPTY);
   return React__default.createElement("div", {
     className: className
   }, React__default.createElement(Tooltip$1, {
@@ -66042,11 +66039,11 @@ var LinkInput = React.forwardRef(function (props, ref) {
     isRequired: props.isRequired,
     isError: props.isError,
     isReadOnly: props.isReadOnly ? true : !isEditMode,
-    className: styles$1d['vitro-control']
+    className: styles$1i['vitro-control']
   }))), !props.isReadOnly && !isEditMode && React__default.createElement(ImageButton, {
     onClick: onClickEditButton,
     tooltipText: localeService.create(LOCALE$9.TOOLTIP_EDIT),
-    className: styles$1d['vitro-edit-button']
+    className: styles$1i['vitro-edit-button']
   }));
 });
 
@@ -66089,6 +66086,104 @@ var Overlay$2 = React.forwardRef(function (props, ref) {
   }, props.children));
 });
 
+var LOCALE$a;
+(function (LOCALE) {
+  LOCALE["TITLE"] = "app.common.systemExceptionDialog.title";
+  LOCALE["SUBTITLE"] = "app.common.systemExceptionDialog.subtitle";
+  LOCALE["ACTION_SEND"] = "app.common.systemExceptionDialog.action.send";
+  LOCALE["ACTION_INCLUDE"] = "app.common.systemExceptionDialog.action.includeInReport";
+  LOCALE["SETTING"] = "app.common.systemExceptionDialog.setting";
+  LOCALE["SETTING_SCREENSHOT"] = "screenshot";
+  LOCALE["SETTING_EXCEPTION_TEXT"] = "detailedExceptionText";
+  LOCALE["SETTING_USER_NAME"] = "userName";
+  LOCALE["SETTING_SYSTEM_INFO"] = "systemInformation";
+})(LOCALE$a || (LOCALE$a = {}));
+
+var styles$1j = {"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-scrollbar-content":"_system-exception-dialog_vitro-scrollbar-content_2sob8Xl","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$a.SETTING_SCREENSHOT, LOCALE$a.SETTING_EXCEPTION_TEXT, LOCALE$a.SETTING_USER_NAME, LOCALE$a.SETTING_SYSTEM_INFO];
+var SystemExceptionDialog = function SystemExceptionDialog(props) {
+  var _useState = React.useState(false),
+    isMobileView = _useState[0],
+    setIsMobileView = _useState[1];
+  var _useState2 = React.useState({
+      comment: CTRL.EMPTY,
+      screenshot: true,
+      detailedErrorText: true,
+      userName: true,
+      systemInformation: true
+    }),
+    data = _useState2[0],
+    setData = _useState2[1];
+  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
+  var inputRef = React.useRef(null);
+  React.useEffect(function () {
+    updateIsMobileView();
+  }, []);
+  var onConfirm = function onConfirm() {
+    if (inputRef.current) {
+      var comment = inputRef.current.getValue();
+      var newData = _extends({}, data, {
+        comment: comment
+      });
+      props.onConfirm(newData);
+    }
+  };
+  var getCheckboxLabel = function getCheckboxLabel(key) {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement("span", null, localeService.create(LOCALE$a.ACTION_INCLUDE) + CTRL.SPACE), React__default.createElement("span", null, localeService.create(LOCALE$a.SETTING + CTRL.DOT + key)));
+  };
+  var onChangeSetting = function onChangeSetting(value, name) {
+    var newData = data;
+    newData[name] = value;
+    setData(newData);
+  };
+  var updateIsMobileView = function updateIsMobileView() {
+    setIsMobileView(window.innerWidth < MOBILE_VIEW.WIDTH);
+  };
+  var buttonList = [{
+    onClick: onConfirm,
+    text: props.labelConfirm || localeService.create(LOCALE$a.ACTION_SEND)
+  }];
+  var hiddenContent = React__default.createElement("div", {
+    className: styles$1j['vitro-settings-list']
+  }, settingsList.map(function (name, index) {
+    return React__default.createElement("div", {
+      key: index,
+      className: styles$1j['vitro-flex']
+    }, React__default.createElement(Checkbox, {
+      label: CTRL.EMPTY,
+      name: name,
+      value: true,
+      onChange: onChangeSetting,
+      className: styles$1j['vitro-checkbox']
+    }), getCheckboxLabel(name));
+  }));
+  return React__default.createElement(Dialog, {
+    title: localeService.create(LOCALE$a.TITLE),
+    subtitle: isMobileView ? CTRL.EMPTY : localeService.create(LOCALE$a.SUBTITLE),
+    image: React__default.createElement("div", {
+      className: styles$1j['vitro-image']
+    }),
+    onClose: props.onCancel,
+    buttonList: buttonList,
+    labelClose: props.labelClose,
+    className: styles$1j['vitro-system-exception-dialog'],
+    hiddenContent: hiddenContent,
+    isDismissible: true
+  }, React__default.createElement(DialogContent, null, isMobileView && React__default.createElement(Label, {
+    text: localeService.create(LOCALE$a.SUBTITLE),
+    className: styles$1j['vitro-label']
+  }), React__default.createElement(Input, {
+    ref: inputRef,
+    className: styles$1j['vitro-input'],
+    isMultiline: true
+  }), React__default.createElement("div", {
+    className: styles$1j['vitro-exception']
+  }, React__default.createElement(ScrollBar, {
+    contentClassName: styles$1j['vitro-scrollbar-content']
+  }, props.stackTrace))));
+};
+
 exports.ACTION_HANDLER = ActionHandlerConstants;
 exports.ALERT = AlertConstants;
 exports.ActionHandler = ActionHandler;
@@ -66100,6 +66195,7 @@ exports.Avatar = Avatar;
 exports.BimViewer = BimViewer;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button$2;
+exports.ButtonCancel = ButtonCancel;
 exports.ButtonGroup = ButtonGroup;
 exports.CONTROL = CONTROL;
 exports.CenterAlignControlGroup = CenterAlignControlGroup;
@@ -66118,13 +66214,16 @@ exports.Dialog = Dialog;
 exports.DialogContent = DialogContent;
 exports.DialogFooter = DialogFooter;
 exports.DropdownButton = DropdownButton;
+exports.ExpandCollapseButton = ExpandCollapseButton;
 exports.ExpandControlGroup = ExpandControlGroup;
 exports.FieldIterator = FieldIterator;
 exports.FileVersionSelect = FileVersionSelect;
 exports.HEADER = HeaderConstants;
+exports.HEADING = HeadingConstants;
 exports.Header = Header;
 exports.HeaderNavBar = HeaderNavBar;
 exports.HeaderNavService = HeaderNavService;
+exports.Heading = Heading;
 exports.Image = Image;
 exports.ImageButton = ImageButton;
 exports.ImagePicker = ImagePicker;
@@ -66149,6 +66248,7 @@ exports.PasswordInput = PasswordInput;
 exports.PdfViewer = PdfViewer;
 exports.ProductTitle = ProductTitle;
 exports.Progress = Progress;
+exports.ProgressBar = ProgressBar;
 exports.Radio = Radio;
 exports.RightAlignControlGroup = RightAlignControlGroup;
 exports.RouteItem = RouteItem;
@@ -66159,6 +66259,7 @@ exports.Search = Search;
 exports.Sidebar = Sidebar;
 exports.SidebarButton = SidebarButton;
 exports.Splitter = Splitter;
+exports.SystemExceptionDialog = SystemExceptionDialog;
 exports.TABLE_VIEW = TableViewConstants;
 exports.TOOLTIP = TooltipConstants;
 exports.TREE_VIEW = TreeViewConstants;