@vitrosoftware/common-ui-ts 1.1.88 → 1.1.90

package/dist/index.js

@@ -122,21 +122,50 @@ var app$1 = {
 			itemName: "Элемент: {{itemName}}"
 		},
 		login: {
-			title: "Вход",
-			separatorText: "или",
 			copyright: "VitroCAD",
-			field: {
-				userName: "Логин",
-				password: "Пароль"
-			},
 			action: {
-				saveData: "Запомнить меня",
-				resetPassword: "Забыли пароль?",
-				register: "Зарегистрируйтесь!",
-				login: "Войти"
+				login: "Войти",
+				goBack: "Вернуться назад"
+			},
+			loginForm: {
+				title: "Вход",
+				separatorText: "или",
+				field: {
+					userName: "Логин",
+					password: "Пароль"
+				},
+				action: {
+					saveData: "Запомнить меня",
+					resetPassword: "Забыли пароль?",
+					register: "Зарегистрируйтесь!"
+				},
+				error: {
+					empty: "{{fieldName}} не может быть пустым"
+				}
 			},
-			error: {
-				empty: "{{fieldName}} не может быть пустым"
+			twoFactorAuthenticationForm: {
+				title: "Введите код",
+				subtitle: {
+					userName: "Код для логина",
+					email: "отправлен на электронный адрес"
+				},
+				field: {
+					code: "Код"
+				},
+				action: {
+					resendCode: "Выслать код повторно",
+					codeSendError: "Не пришел код"
+				},
+				description: {
+					codeValidityDuration: "Код действует {{duration}} минут",
+					resendCodeDuration: "Получить код повторно можно через {{duration}} секунд"
+				},
+				error: {
+					empty: "Заполните поле"
+				}
+			},
+			ntlmAuthenticationForm: {
+				description: "Выполняется вход через Windows..."
 			}
 		},
 		lookupPicker: {
@@ -158,6 +187,12 @@ var app$1 = {
 			checkboxList: {
 				emptyPlaceholder: "Нет данных"
 			}
+		},
+		linkInput: {
+			tooltip: {
+				edit: "Редактировать",
+				open: "Открыть в новой вкладке"
+			}
 		}
 	}
 };
@@ -61141,7 +61176,7 @@ var AUTOCOMPLETE;
 var KEY_CODE = function KEY_CODE() {};
 KEY_CODE.ENTER = 13;
 
-var styles$h = {"vitro-control":"_input_vitro-control_1DmPFkF","vitro-focus":"_input_vitro-focus_1txynr8","vitro-label":"_input_vitro-label_2XBESiY","vitro-read-only":"_input_vitro-read-only_3f-cBbK","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$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 Input = React.forwardRef(function (props, ref) {
   var control;
@@ -61174,6 +61209,7 @@ var Input = React.forwardRef(function (props, ref) {
       focus: function focus() {
         if (inputRef.current) {
           inputRef.current.focus();
+          onFocus();
         }
       },
       setValue: function setValue(value) {
@@ -61288,7 +61324,7 @@ var Input = React.forwardRef(function (props, ref) {
     isRequired: props.isRequired,
     width: props.labelWidth,
     className: styles$h['vitro-label']
-  }), control, props.isReadOnly ? React__default.createElement("span", {
+  }), control, props.isReadOnly && props.isShowCopyButton !== false ? React__default.createElement("span", {
     className: styles$h['vitro-button-copy'],
     onClick: copyValue
   }) : null, props.children, props.errorMessage && React__default.createElement("span", {
@@ -61472,6 +61508,9 @@ var TooltipConstants = {
 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: {
@@ -61669,7 +61708,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.88";
+var version$1 = "1.1.90";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -61812,7 +61851,91 @@ var PdfViewer = function PdfViewer(props) {
   });
 };
 
-var styles$o = {"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$o = {"vitro-login-content":"_login-content_vitro-login-content_2RdLZle"};
+
+var LoginContent = function LoginContent(props) {
+  var ref = React.useRef(null);
+  React.useEffect(function () {
+    if (ref.current) {
+      var height = Array.from(ref.current.children)[0].getBoundingClientRect().height;
+      ref.current.style.flexBasis = height + UNIT.PX;
+    }
+  }, [props.children]);
+  return React__default.createElement("div", {
+    className: styles$o['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 LoginFooter = function LoginFooter(props) {
+  return React__default.createElement("div", {
+    className: styles$p['vitro-footer']
+  }, React__default.createElement("div", {
+    className: styles$p['vitro-language']
+  }), React__default.createElement("ul", {
+    className: styles$p['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']
+  }, props.copyright));
+};
+
+var LOCALE$3;
+(function (LOCALE) {
+  LOCALE["LOGIN_FORM_ERROR_EMPTY"] = "app.common.login.loginForm.error.empty";
+  LOCALE["LOGIN_FORM_FIELD_NAME"] = "app.common.login.loginForm.field.userName";
+  LOCALE["LOGIN_FORM_FIELD_PASSWORD"] = "app.common.login.loginForm.field.password";
+  LOCALE["LOGIN_FORM_ACTION_SAVE_DATA"] = "app.common.login.loginForm.action.saveData";
+  LOCALE["LOGIN_FORM_ACTION_RESET_PASSWORD"] = "app.common.login.loginForm.action.resetPassword";
+  LOCALE["LOGIN_FORM_ACTION_REGISTER"] = "app.common.login.loginForm.action.register";
+  LOCALE["LOGIN_FORM_SEPARATOR_TEXT"] = "app.common.login.loginForm.separatorText";
+  LOCALE["LOGIN_FORM_TITLE"] = "app.common.login.loginForm.title";
+  LOCALE["TWO_FACTOR_AUTHENTICATION_FORM_TITLE"] = "app.common.login.twoFactorAuthenticationForm.title";
+  LOCALE["TWO_FACTOR_AUTHENTICATION_FORM_SUBTITLE_USER_NAME"] = "app.common.login.twoFactorAuthenticationForm.subtitle.userName";
+  LOCALE["TWO_FACTOR_AUTHENTICATION_FORM_SUBTITLE_EMAIL"] = "app.common.login.twoFactorAuthenticationForm.subtitle.email";
+  LOCALE["TWO_FACTOR_AUTHENTICATION_FORM_FIELD_CODE"] = "app.common.login.twoFactorAuthenticationForm.field.code";
+  LOCALE["TWO_FACTOR_AUTHENTICATION_FORM_ACTION_RESEND_CODE"] = "app.common.login.twoFactorAuthenticationForm.action.resendCode";
+  LOCALE["TWO_FACTOR_AUTHENTICATION_FORM_ACTION_CODE_SEND_ERROR"] = "app.common.login.twoFactorAuthenticationForm.action.codeSendError";
+  LOCALE["TWO_FACTOR_AUTHENTICATION_FORM_DESCRIPTION_VALIDITY"] = "app.common.login.twoFactorAuthenticationForm.description.codeValidityDuration";
+  LOCALE["TWO_FACTOR_AUTHENTICATION_FORM_DESCRIPTION_RESEND"] = "app.common.login.twoFactorAuthenticationForm.description.resendCodeDuration";
+  LOCALE["TWO_FACTOR_AUTHENTICATION_FORM_ERROR_EMPTY"] = "app.common.login.twoFactorAuthenticationForm.error.empty";
+  LOCALE["NTLM_AUTHENTICATION_FORM_DESCRIPTION"] = "app.common.login.ntlmAuthenticationForm.description";
+  LOCALE["ACTION_LOGIN"] = "app.common.login.action.login";
+  LOCALE["ACTION_GO_BACK"] = "app.common.login.action.goBack";
+  LOCALE["ACTION_RESET_PASSWORD"] = "app.common.login.action.resetPassword";
+  LOCALE["ACTION_REGISTER"] = "app.common.login.action.register";
+  LOCALE["SEPARATOR_TEXT"] = "app.common.login.separatorText";
+  LOCALE["TITLE"] = "app.common.login.title";
+  LOCALE["COPYRIGHT"] = "app.common.login.copyright";
+})(LOCALE$3 || (LOCALE$3 = {}));
+var FIELD_NAME;
+(function (FIELD_NAME) {
+  FIELD_NAME["USER_NAME"] = "userName";
+  FIELD_NAME["PASSWORD"] = "password";
+  FIELD_NAME["SAVE_DATA"] = "saveData";
+})(FIELD_NAME || (FIELD_NAME = {}));
+
+var Login = function Login(props) {
+  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
+  return React__default.createElement("div", {
+    className: styles$p['vitro-login-layout']
+  }, React__default.createElement("div", {
+    className: styles$p['vitro-login']
+  }, React__default.createElement(Image, {
+    className: styles$p['vitro-logo'],
+    defaultUrl: props.logo
+  }), React__default.createElement(LoginContent, null, props.children)), React__default.createElement(LoginFooter, {
+    copyright: props.copyright || localeService.create(LOCALE$3.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 Checkbox = React.forwardRef(function (props, ref) {
   var _useState = React.useState(props.value ? true : false),
@@ -61836,14 +61959,14 @@ var Checkbox = React.forwardRef(function (props, ref) {
     props.onChange && props.onChange(!value, props.name);
     _setValue(!value);
   };
-  var className = styles$o['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$o['vitro-left-label'] : CTRL.EMPTY) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY);
+  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);
   return React__default.createElement("div", {
     className: className
   }, props.labelPosition === POSITION.LEFT && React__default.createElement(Label, {
     text: props.label,
-    className: styles$o['vitro-label']
+    className: styles$q['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$o['vitro-checkbox-content']
+    className: styles$q['vitro-checkbox-content']
   }, React__default.createElement("input", {
     ref: checkboxRef,
     disabled: props.isDisabled,
@@ -61853,50 +61976,32 @@ var Checkbox = React.forwardRef(function (props, ref) {
     onChange: onChange
   }), props.labelPosition !== POSITION.LEFT && React__default.createElement(Label, {
     text: props.label,
-    className: styles$o['vitro-label']
+    className: styles$q['vitro-label']
   })));
 });
 
-var styles$p = {"vitro-login-layout":"_login_vitro-login-layout_1C8owlz","vitro-form-login":"_login_vitro-form-login_2nyw95B","vitro-logo":"_login_vitro-logo_3-qTjgy","vitro-title":"_login_vitro-title_nfoHltS","vitro-flex":"_login_vitro-flex_2CffX6W","vitro-error":"_login_vitro-error_1Nk25em","vitro-link":"_login_vitro-link_az1ZWIc","vitro-separator":"_login_vitro-separator_2jHZJHO","vitro-control":"_login_vitro-control_3YqxIR2","vitro-password-control":"_login_vitro-password-control_2Zp5fJi","vitro-login-checkbox":"_login_vitro-login-checkbox_39NOnZg","vitro-button":"_login_vitro-button_2OCqKtD","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","vitro-link-register":"_login_vitro-link-register_3FH012R"};
-
-var LoginFooter = function LoginFooter(props) {
-  return React__default.createElement("div", {
-    className: styles$p['vitro-footer']
-  }, React__default.createElement("div", {
-    className: styles$p['vitro-language']
-  }), React__default.createElement("ul", {
-    className: styles$p['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']
-  }, props.copyright));
-};
-
 var TYPE;
 (function (TYPE) {
   TYPE["TEXT"] = "text";
   TYPE["PASSWORD"] = "password";
 })(TYPE || (TYPE = {}));
 
-var styles$q = {"vitro-button-show-password":"_password-input_vitro-button-show-password_2jL4nM-","vitro-button-hide-password":"_password-input_vitro-button-hide-password_vPoUeVl"};
+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 PasswordInput = React.forwardRef(function (props, ref) {
   var _useState = React.useState(TYPE.PASSWORD),
     type = _useState[0],
     setType = _useState[1];
-  var _useState2 = React.useState(styles$q['vitro-button-show-password']),
+  var _useState2 = React.useState(styles$r['vitro-button-show-password']),
     icon = _useState2[0],
     setIcon = _useState2[1];
   var togglePassword = function togglePassword() {
     if (type === TYPE.PASSWORD) {
       setType(TYPE.TEXT);
-      setIcon(styles$q['vitro-button-hide-password']);
+      setIcon(styles$r['vitro-button-hide-password']);
     } else {
       setType(TYPE.PASSWORD);
-      setIcon(styles$q['vitro-button-show-password']);
+      setIcon(styles$r['vitro-button-show-password']);
     }
   };
   return React__default.createElement(Input, Object.assign({}, props, {
@@ -61908,27 +62013,41 @@ var PasswordInput = React.forwardRef(function (props, ref) {
   }));
 });
 
-var LOCALE$3;
-(function (LOCALE) {
-  LOCALE["ERROR_EMPTY"] = "app.common.login.error.empty";
-  LOCALE["FIELD_NAME"] = "app.common.login.field.userName";
-  LOCALE["FIELD_PASSWORD"] = "app.common.login.field.password";
-  LOCALE["ACTION_SAVE_DATA"] = "app.common.login.action.saveData";
-  LOCALE["ACTION_LOGIN"] = "app.common.login.action.login";
-  LOCALE["ACTION_RESET_PASSWORD"] = "app.common.login.action.resetPassword";
-  LOCALE["ACTION_REGISTER"] = "app.common.login.action.register";
-  LOCALE["SEPARATOR_TEXT"] = "app.common.login.separatorText";
-  LOCALE["TITLE"] = "app.common.login.title";
-  LOCALE["COPYRIGHT"] = "app.common.login.copyright";
-})(LOCALE$3 || (LOCALE$3 = {}));
-var FIELD_NAME;
-(function (FIELD_NAME) {
-  FIELD_NAME["USER_NAME"] = "userName";
-  FIELD_NAME["PASSWORD"] = "password";
-  FIELD_NAME["SAVE_DATA"] = "saveData";
-})(FIELD_NAME || (FIELD_NAME = {}));
+var styles$s = {"vitro-link":"_link_vitro-link_2ePaXvd"};
 
-var Login = React.forwardRef(function (props, ref) {
+var Link = function Link(props) {
+  return React__default.createElement("a", {
+    className: styles$s['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 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),
+    onClick: props.onClick,
+    isDisabled: props.isDisabled
+  });
+};
+
+var styles$u = {"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));
+};
+
+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 LoginForm = React.forwardRef(function (props, ref) {
   var _useState = React.useState(CTRL.EMPTY),
     userName = _useState[0],
     setUserName = _useState[1];
@@ -61948,6 +62067,12 @@ var Login = React.forwardRef(function (props, ref) {
     errorMessage = _useState6[0],
     _setErrorMessage = _useState6[1];
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
+  React.useEffect(function () {
+    window.addEventListener(exports.EVENT.KEYDOWN, onKeyDown);
+    return function () {
+      window.removeEventListener(exports.EVENT.KEYDOWN, onKeyDown);
+    };
+  });
   React.useEffect(function () {
     _setErrorMessage(props.errorMessage || CTRL.EMPTY);
   }, [props.errorMessage]);
@@ -61955,6 +62080,12 @@ var Login = React.forwardRef(function (props, ref) {
     return {
       setErrorMessage: function setErrorMessage(message) {
         _setErrorMessage(message);
+      },
+      getUserName: function getUserName() {
+        return userName;
+      },
+      getPassword: function getPassword() {
+        return password;
       }
     };
   });
@@ -61976,8 +62107,8 @@ var Login = React.forwardRef(function (props, ref) {
   var validate = function validate() {
     var result = true;
     if (userName.trim() === CTRL.EMPTY) {
-      var fieldName = localeService.create(LOCALE$3.FIELD_NAME);
-      setUserNameErrorMessage(props.emptyErrorText || localeService.create(LOCALE$3.ERROR_EMPTY, {
+      var fieldName = localeService.create(LOCALE$3.LOGIN_FORM_FIELD_NAME);
+      setUserNameErrorMessage(props.emptyErrorText || localeService.create(LOCALE$3.LOGIN_FORM_ERROR_EMPTY, {
         fieldName: fieldName
       }));
       result = false;
@@ -61985,8 +62116,8 @@ var Login = React.forwardRef(function (props, ref) {
       setUserNameErrorMessage(CTRL.EMPTY);
     }
     if (password.trim() === CTRL.EMPTY) {
-      var _fieldName = localeService.create(LOCALE$3.FIELD_PASSWORD);
-      setPasswordErrorMessage(props.emptyErrorText || localeService.create(LOCALE$3.ERROR_EMPTY, {
+      var _fieldName = localeService.create(LOCALE$3.LOGIN_FORM_FIELD_PASSWORD);
+      setPasswordErrorMessage(props.emptyErrorText || localeService.create(LOCALE$3.LOGIN_FORM_ERROR_EMPTY, {
         fieldName: _fieldName
       }));
       result = false;
@@ -62023,62 +62154,205 @@ var Login = React.forwardRef(function (props, ref) {
       submit();
     }
   };
-  return React__default.createElement("div", {
-    className: styles$p['vitro-login-layout'],
-    onKeyDown: onKeyDown
-  }, React__default.createElement("div", {
-    className: styles$p['vitro-form-login']
-  }, React__default.createElement("img", {
-    className: styles$p['vitro-logo'],
-    src: props.logo
-  }), React__default.createElement("div", {
-    className: styles$p['vitro-title']
-  }, localeService.create(LOCALE$3.TITLE)), React__default.createElement(Input, {
+  return React__default.createElement("div", null, React__default.createElement(LoginTitle, {
+    className: styles$v['vitro-title']
+  }), React__default.createElement(Input, {
     name: FIELD_NAME.USER_NAME,
-    label: localeService.create(LOCALE$3.FIELD_NAME),
+    label: localeService.create(LOCALE$3.LOGIN_FORM_FIELD_NAME),
     onChange: onChangeUserName,
     errorMessage: userNameErrorMessage,
     onFocus: function onFocus() {
       return _onFocus(FIELD_NAME.USER_NAME);
     },
     isError: errorMessage ? true : false,
-    className: styles$p['vitro-control']
+    className: styles$v['vitro-control']
   }), React__default.createElement(PasswordInput, {
     name: FIELD_NAME.PASSWORD,
-    label: localeService.create(LOCALE$3.FIELD_PASSWORD),
+    label: localeService.create(LOCALE$3.LOGIN_FORM_FIELD_PASSWORD),
     onChange: onChangePassword,
     errorMessage: passwordErrorMessage || errorMessage,
     onFocus: function onFocus() {
       return _onFocus(FIELD_NAME.PASSWORD);
     },
     isError: errorMessage ? true : false,
-    className: styles$p['vitro-control']
+    className: styles$v['vitro-control']
   }), (props.onSaveData || props.onResetPassword) && React__default.createElement("div", {
-    className: styles$p['vitro-flex'] + (passwordErrorMessage || errorMessage || userNameErrorMessage ? CTRL.SPACE + styles$p['vitro-error'] : CTRL.EMPTY)
+    className: styles$v['vitro-flex'] + (passwordErrorMessage || errorMessage || userNameErrorMessage ? CTRL.SPACE + styles$v['vitro-error'] : CTRL.EMPTY)
   }, props.onSaveData && React__default.createElement(Checkbox, {
-    label: localeService.create(LOCALE$3.ACTION_SAVE_DATA),
+    label: localeService.create(LOCALE$3.LOGIN_FORM_ACTION_SAVE_DATA),
     name: FIELD_NAME.SAVE_DATA,
     onChange: props.onSaveData,
-    className: styles$p['vitro-login-checkbox']
-  }), props.onResetPassword && React__default.createElement("a", {
-    className: styles$p['vitro-link'],
-    onClick: props.onResetPassword
-  }, localeService.create(LOCALE$3.ACTION_RESET_PASSWORD))), React__default.createElement(Button$2, {
-    className: styles$p['vitro-button'],
-    text: localeService.create(LOCALE$3.ACTION_LOGIN),
+    className: styles$v['vitro-login-checkbox']
+  }), props.onResetPassword && React__default.createElement(Link, {
+    text: localeService.create(LOCALE$3.LOGIN_FORM_ACTION_RESET_PASSWORD),
+    onClick: props.onResetPassword,
+    className: styles$v['vitro-link']
+  })), React__default.createElement(LoginSubmitButton, {
     onClick: submit,
     isDisabled: loading
-  }), props.onRegister && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$p['vitro-separator']
-  }, localeService.create(LOCALE$3.SEPARATOR_TEXT)), React__default.createElement("a", {
-    className: styles$p['vitro-link-register'],
-    onClick: props.onRegister
-  }, localeService.create(LOCALE$3.ACTION_REGISTER)))), React__default.createElement(LoginFooter, {
-    copyright: props.copyright || localeService.create(LOCALE$3.COPYRIGHT),
-    itemList: props.linkItemList
+  }), 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']
+  }, props.buttonList && props.buttonList.map(function (button) {
+    return React__default.createElement(Button$2, Object.assign({}, button, {
+      className: styles$v['vitro-button']
+    }));
+  })), props.onRegister && React__default.createElement(Link, {
+    text: localeService.create(LOCALE$3.LOGIN_FORM_ACTION_REGISTER),
+    onClick: props.onRegister,
+    className: styles$v['vitro-link-register']
+  }));
+});
+
+var styles$w = {"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),
+    onClick: props.onClick,
+    className: styles$w['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 RESEND_CODE_DURATION = 60000;
+var DOT_STRING = "\u2022\u2022\u2022\u2022";
+var TwoFactorAuthenticationForm = React.forwardRef(function (props, ref) {
+  var _useState = React.useState(CTRL.EMPTY),
+    code = _useState[0],
+    setCode = _useState[1];
+  var _useState2 = React.useState((props.resendCodeDurationMs || RESEND_CODE_DURATION) / 1000),
+    resendDuration = _useState2[0],
+    setResendDuration = _useState2[1];
+  var _useState3 = React.useState(props.errorMessage || CTRL.EMPTY),
+    errorMessage = _useState3[0],
+    _setErrorMessage = _useState3[1];
+  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
+  React.useEffect(function () {
+    window.addEventListener(exports.EVENT.KEYDOWN, onKeyDown);
+    return function () {
+      window.removeEventListener(exports.EVENT.KEYDOWN, onKeyDown);
+    };
+  });
+  React.useEffect(function () {
+    if (resendDuration > 0) {
+      setTimeout(function () {
+        setResendDuration(resendDuration - 1);
+      }, 1000);
+    }
+  }, [resendDuration]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      setErrorMessage: function setErrorMessage(message) {
+        _setErrorMessage(message);
+      },
+      getCode: function getCode() {
+        return code;
+      }
+    };
+  });
+  var submit = function submit() {
+    if (validate()) {
+      props.onSubmit(code);
+    }
+  };
+  var onChange = function onChange(value) {
+    setCode(value);
+    if (value) {
+      _setErrorMessage(CTRL.EMPTY);
+    }
+  };
+  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));
+      result = false;
+    }
+    return result;
+  };
+  var getEmail = function getEmail(email) {
+    var emailArr = email.split(CTRL.AT_SIGN);
+    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']
+    }, DOT_STRING), CTRL.AT_SIGN, React__default.createElement("span", {
+      className: styles$x['vitro-hidden-symbol']
+    }, DOT_STRING), domain);
+  };
+  var onResendCode = function onResendCode() {
+    setResendDuration((props.resendCodeDurationMs || RESEND_CODE_DURATION) / 1000);
+    if (props.onResendCode) {
+      props.onResendCode();
+    }
+  };
+  var onKeyDown = function onKeyDown(e) {
+    if (e.keyCode === KEY_CODE.ENTER) {
+      e.preventDefault();
+      e.stopPropagation();
+      submit();
+    }
+  };
+  return React__default.createElement("div", {
+    className: styles$x['vitro-two-factor-authentication-form']
+  }, React__default.createElement(LoginTitle, {
+    className: styles$x['vitro-title'],
+    text: localeService.create(LOCALE$3.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']
+  }, getEmail(props.email)))), React__default.createElement(Input, {
+    name: FIELD_NAME.USER_NAME,
+    label: localeService.create(LOCALE$3.TWO_FACTOR_AUTHENTICATION_FORM_FIELD_CODE),
+    onChange: onChange,
+    onBlur: validate,
+    errorMessage: errorMessage,
+    className: styles$x['vitro-control']
+  }), React__default.createElement("div", {
+    className: styles$x['vitro-flex']
+  }, React__default.createElement(Link, {
+    text: localeService.create(LOCALE$3.TWO_FACTOR_AUTHENTICATION_FORM_ACTION_CODE_SEND_ERROR),
+    onClick: props.onResendCode,
+    className: styles$x['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, {
+    duration: props.codeValidityDurationMin || 10
+  }))), React__default.createElement(LoginSubmitButton, {
+    onClick: submit,
+    className: styles$x['vitro-button']
+  }), !resendDuration ? React__default.createElement(Link, {
+    text: localeService.create(LOCALE$3.TWO_FACTOR_AUTHENTICATION_FORM_ACTION_RESEND_CODE),
+    onClick: onResendCode,
+    className: styles$x['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, {
+    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 NTLMAuthenticationForm = function NTLMAuthenticationForm(props) {
+  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
+  return React__default.createElement("div", {
+    className: styles$y['vitro-ntlm-authentication-form']
+  }, React__default.createElement(LoginTitle, null), React__default.createElement("div", {
+    className: styles$y['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, {
+    onClick: props.onGoBack
+  }));
+};
+
 var AUTOCOMPLETE$1;
 (function (AUTOCOMPLETE) {
   AUTOCOMPLETE["ON"] = "on";
@@ -62200,7 +62474,7 @@ var PLACEMENT$2;
   PLACEMENT["AUTO"] = "auto";
 })(PLACEMENT$2 || (PLACEMENT$2 = {}));
 
-var styles$r = {"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-focus":"_date-picker_vitro-focus_2cJKcKr","vitro-label":"_date-picker_vitro-label_2jh9qxb","vitro-read-only":"_date-picker_vitro-read-only_2NZoMN5","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$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 $$3 = window.$;
 var DatePicker = React.forwardRef(function (props, ref) {
@@ -62250,7 +62524,7 @@ var DatePicker = React.forwardRef(function (props, ref) {
     }
   }, [props.isWorkDay]);
   React.useEffect(function () {
-    props.errorMessage ? setState(styles$r['vitro-error']) : setState(CTRL.EMPTY);
+    props.errorMessage ? setState(styles$z['vitro-error']) : setState(CTRL.EMPTY);
   }, [props.errorMessage]);
   React.useEffect(function () {
     if (isOpened && !props.isFlipDropdown && controlRef.current) {
@@ -62322,13 +62596,13 @@ var DatePicker = React.forwardRef(function (props, ref) {
     $$3(inputRef.current).data(componentName).setOptions(options);
   };
   var onFocus = function onFocus(e) {
-    setState(styles$r['vitro-focus']);
+    setState(styles$z['vitro-focus']);
     if (props.onFocus) {
       props.onFocus(e);
     }
   };
   var onBlur = function onBlur(e) {
-    setState(props.errorMessage ? styles$r['vitro-error'] : styles$r[CTRL.EMPTY]);
+    setState(props.errorMessage ? styles$z['vitro-error'] : styles$z[CTRL.EMPTY]);
     if (props.onBlur) {
       props.onBlur(e);
     }
@@ -62356,12 +62630,12 @@ var DatePicker = React.forwardRef(function (props, ref) {
     navigator.clipboard.writeText("" + props.value);
   };
   var getClassName = function getClassName() {
-    var classList = [styles$r['vitro-control'], props.className];
+    var classList = [styles$z['vitro-control'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$r['vitro-read-only']);
+      classList.push(styles$z['vitro-read-only']);
     }
     if (props.labelPosition === POSITION.LEFT) {
-      classList.push(styles$r['vitro-left-label']);
+      classList.push(styles$z['vitro-left-label']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -62373,29 +62647,29 @@ var DatePicker = React.forwardRef(function (props, ref) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$r['vitro-label']
+    className: styles$z['vitro-label']
   }), React__default.createElement("input", {
     ref: inputRef,
     placeholder: props.placeholder,
     onFocus: onFocus,
     onBlur: onBlur
   }), props.isReadOnly ? React__default.createElement("span", {
-    className: styles$r['vitro-button-copy'],
+    className: styles$z['vitro-button-copy'],
     onClick: copyValue
   }) : null, props.isFlipDropdown ? React__default.createElement("div", {
     ref: containerRef,
-    className: styles$r['vitro-control-container']
+    className: styles$z['vitro-control-container']
   }) : React__default.createElement(Overlay$1, {
     show: true,
     target: inputRef.current,
     placement: PLACEMENT$2.AUTO
   }, React__default.createElement("div", {
     style: style ? style : {},
-    className: styles$r['vitro-control-container'] + (style ? CTRL.EMPTY : CTRL.SPACE + styles$r['vitro-display-none'])
+    className: styles$z['vitro-control-container'] + (style ? CTRL.EMPTY : CTRL.SPACE + styles$z['vitro-display-none'])
   }, React__default.createElement("div", {
     ref: containerRef
   }))), props.errorMessage && React__default.createElement("span", {
-    className: styles$r['vitro-error-text']
+    className: styles$z['vitro-error-text']
   }, props.errorMessage));
 });
 
@@ -62416,7 +62690,7 @@ var COMPONENT_TYPE;
   COMPONENT_TYPE["MODERN"] = "modern";
 })(COMPONENT_TYPE || (COMPONENT_TYPE = {}));
 
-var styles$s = {"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-focus":"_time-picker_vitro-focus_wmhPjvE","vitro-label":"_time-picker_vitro-label_2b97aCy","vitro-error":"_time-picker_vitro-error_2ZmK0I5","vitro-read-only":"_time-picker_vitro-read-only_NlE18Zm","vitro-left-label":"_time-picker_vitro-left-label_3NRmFYH","vitro-error-text":"_time-picker_vitro-error-text_2BNoBKW"};
+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 $$4 = window.$;
 var TimePicker = React.forwardRef(function (props, ref) {
@@ -62516,13 +62790,13 @@ var TimePicker = React.forwardRef(function (props, ref) {
     }
   };
   var onFocus = function onFocus(e) {
-    setState(styles$s['vitro-focus']);
+    setState(styles$A['vitro-focus']);
     if (props.onFocus) {
       props.onFocus(e);
     }
   };
   var onBlur = function onBlur(e) {
-    setState(props.errorMessage ? styles$s['vitro-error'] : styles$s[CTRL.EMPTY]);
+    setState(props.errorMessage ? styles$A['vitro-error'] : styles$A[CTRL.EMPTY]);
     if (props.onBlur) {
       props.onBlur(e);
     }
@@ -62531,12 +62805,12 @@ var TimePicker = React.forwardRef(function (props, ref) {
     navigator.clipboard.writeText("" + props.value);
   };
   var getClassName = function getClassName() {
-    var classList = [styles$s['vitro-control'], props.className];
+    var classList = [styles$A['vitro-control'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$s['vitro-read-only']);
+      classList.push(styles$A['vitro-read-only']);
     }
     if (props.labelPosition === POSITION.LEFT) {
-      classList.push(styles$s['vitro-left-label']);
+      classList.push(styles$A['vitro-left-label']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -62548,38 +62822,38 @@ var TimePicker = React.forwardRef(function (props, ref) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$s['vitro-label']
+    className: styles$A['vitro-label']
   }), React__default.createElement("input", {
     ref: inputRef,
     placeholder: props.placeholder,
     onFocus: onFocus,
     onBlur: onBlur
   }), props.isReadOnly ? React__default.createElement("span", {
-    className: styles$s['vitro-button-copy'],
+    className: styles$A['vitro-button-copy'],
     onClick: copyValue
   }) : null, props.isFlipDropdown ? React__default.createElement("div", {
     ref: containerRef,
-    className: styles$s['vitro-control-container']
+    className: styles$A['vitro-control-container']
   }) : React__default.createElement(Overlay$1, {
     show: true,
     target: inputRef.current,
     placement: PLACEMENT$2.AUTO
   }, React__default.createElement("div", {
     style: style ? style : {},
-    className: styles$s['vitro-control-container'] + (style ? CTRL.EMPTY : CTRL.SPACE + styles$s['vitro-display-none'])
+    className: styles$A['vitro-control-container'] + (style ? CTRL.EMPTY : CTRL.SPACE + styles$A['vitro-display-none'])
   }, React__default.createElement("div", {
     ref: containerRef
   }))), props.errorMessage && React__default.createElement("span", {
-    className: styles$s['vitro-error-text']
+    className: styles$A['vitro-error-text']
   }, props.errorMessage));
 });
 
-var styles$t = {"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$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 htmlValueStyles = {"vitro-item-html-value":"_lookup-picker-html-value_vitro-item-html-value_2QBoTey"};
 
 var SelectedValueList = function SelectedValueList(props) {
-  var className = props.isMultiSelect ? styles$t['vitro-selected-item-multi'] : styles$t['vitro-selected-item'];
+  var className = props.isMultiSelect ? styles$B['vitro-selected-item-multi'] : styles$B['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", {
@@ -62592,7 +62866,7 @@ var SelectedValueList = function SelectedValueList(props) {
       onClick: function onClick() {
         return props.onOptionValueDelete(x.id);
       },
-      className: styles$t['vitro-button-close']
+      className: styles$B['vitro-button-close']
     }));
   }));
 };
@@ -62682,7 +62956,7 @@ var LOCALE$4;
   LOCALE["PLACEHOLDER_EMPTY"] = "app.common.lookupPicker.empty";
 })(LOCALE$4 || (LOCALE$4 = {}));
 
-var styles$u = {"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-focus":"_lookup-picker_vitro-focus_2UGpxXD","vitro-label":"_lookup-picker_vitro-label_2QoJkUz","vitro-read-only":"_lookup-picker_vitro-read-only_32NOdGB","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$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 $$5 = window.$;
 var LookupPicker = React.forwardRef(function (props, ref) {
@@ -62705,7 +62979,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$u['vitro-read-only'] : CTRL.EMPTY),
+  var _useState7 = React.useState(props.isDisabled || props.isReadOnly ? styles$C['vitro-read-only'] : CTRL.EMPTY),
     state = _useState7[0],
     setState = _useState7[1];
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
@@ -62800,7 +63074,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }
   }, [selectedValueList]);
   React.useEffect(function () {
-    setState(props.errorMessage ? styles$u['vitro-error'] : CTRL.EMPTY);
+    setState(props.errorMessage ? styles$C['vitro-error'] : CTRL.EMPTY);
   }, [props.errorMessage]);
   var updateFilteredValueList = function updateFilteredValueList(valueList) {
     var availableValueList = inputValue ? filteredValueList : valueList;
@@ -62822,7 +63096,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     return props.selectedValueTemplate ? props.selectedValueTemplate(value) : value.title;
   };
   var onChange = function onChange(e) {
-    setState(styles$u['vitro-focus']);
+    setState(styles$C['vitro-focus']);
     setValueListVisible(true);
     setInputValue(e.target.value);
   };
@@ -62876,7 +63150,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   };
   var onFocusOut = function onFocusOut(e) {
     var target = e.currentTarget;
-    setState(props.errorMessage ? styles$u['vitro-error'] : CTRL.EMPTY);
+    setState(props.errorMessage ? styles$C['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']))) {
@@ -62891,7 +63165,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     });
   };
   var onFocus = function onFocus(e) {
-    setState(styles$u['vitro-focus']);
+    setState(styles$C['vitro-focus']);
     setValueListVisible(true);
     if (props.onFocus) {
       props.onFocus(e);
@@ -62909,12 +63183,12 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }).join(CTRL.COMMA));
   };
   var getClassName = function getClassName() {
-    var classList = [styles$u['vitro-lookup-picker'], props.className];
+    var classList = [styles$C['vitro-lookup-picker'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$u['vitro-read-only']);
+      classList.push(styles$C['vitro-read-only']);
     }
     if (props.isMultiSelect) {
-      classList.push(styles$u['vitro-lookup-picker-multi-select']);
+      classList.push(styles$C['vitro-lookup-picker-multi-select']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -62934,9 +63208,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$u['vitro-label']
+    className: styles$C['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$u['vitro-content'],
+    className: styles$C['vitro-content'],
     onClick: onFocus,
     ref: contentRef
   }, selectedValueList && selectedValueList.length > 0 && (props.isMultiSelect ? true : inputValue.length === 0) ? React__default.createElement(SelectedValueList, {
@@ -62952,9 +63226,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     onChange: onChange,
     onClick: onFocus
   }), !props.isDisabled && props.children, React__default.createElement("div", {
-    className: styles$u['vitro-right']
+    className: styles$C['vitro-right']
   }, !props.isMultiSelect && selectedValueList && selectedValueList.length > 0 && isEditable && React__default.createElement("div", {
-    className: styles$u['vitro-button-close'],
+    className: styles$C['vitro-button-close'],
     onClick: function onClick() {
       return onOptionValueDelete();
     }
@@ -62962,9 +63236,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     onClick: function onClick() {
       return onCollapseButtonClick(valueListVisible);
     },
-    className: valueListVisible ? styles$u['vitro-button-collapse-up'] : styles$u['vitro-button-collapse-bottom']
+    className: valueListVisible ? styles$C['vitro-button-collapse-up'] : styles$C['vitro-button-collapse-bottom']
   }), props.isReadOnly ? React__default.createElement("span", {
-    className: styles$u['vitro-button-copy'],
+    className: styles$C['vitro-button-copy'],
     onClick: copyValue
   }) : null)), isEditable && (!props.filterMinLength || props.filterMinLength <= inputValue.length) && React__default.createElement(ValueList, {
     isPending: pending,
@@ -62979,42 +63253,42 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     emptyPlaceholder: props.emptyPlaceholder || localeService.create(LOCALE$4.PLACEHOLDER_EMPTY),
     getHtmlValue: getHtmlValue
   }), props.errorMessage && React__default.createElement("span", {
-    className: styles$u['vitro-error-text']
+    className: styles$C['vitro-error-text']
   }, props.errorMessage));
 });
 
-var styles$v = {"vitro-command-menu":"_command-menu_vitro-command-menu_l82vtIh"};
+var styles$D = {"vitro-command-menu":"_command-menu_vitro-command-menu_l82vtIh"};
 
 var CommandMenu = function CommandMenu(props) {
   return React__default.createElement("nav", {
-    className: styles$v['vitro-command-menu'] + CTRL.SPACE + 'navbar'
+    className: styles$D['vitro-command-menu'] + CTRL.SPACE + 'navbar'
   }, React__default.createElement("ul", {
     className: 'nav'
   }, props.children));
 };
 
-var styles$w = {"vitro-command-menu-button":"_command-menu-button_vitro-command-menu-button_2IiXVbP","vitro-image":"_command-menu-button_vitro-image_27yILgG"};
+var styles$E = {"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$w['vitro-command-menu-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
-    imageClassName: styles$w['vitro-image']
+    className: styles$E['vitro-command-menu-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    imageClassName: styles$E['vitro-image']
   }, props)));
 };
 
 var itemStyles = {"vitro-item":"_command-menu-item_vitro-item_2pVhk23"};
 
-var styles$x = {"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$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 CommandMenuLookupPicker = function CommandMenuLookupPicker(props) {
   return React__default.createElement("li", {
-    className: itemStyles['vitro-item'] + CTRL.SPACE + 'nav-item ' + styles$x['vitro-item-lookup-picker']
+    className: itemStyles['vitro-item'] + CTRL.SPACE + 'nav-item ' + styles$F['vitro-item-lookup-picker']
   }, React__default.createElement(LookupPicker, Object.assign({}, props, {
-    className: styles$x['vitro-command-menu-lookup-picker'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$F['vitro-command-menu-lookup-picker'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   })));
 };
 
-var styles$y = {"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$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 CommandMenuSubItem = function CommandMenuSubItem(props) {
   var onClick = function onClick(e) {
@@ -63033,7 +63307,7 @@ var CommandMenuSubItem = function CommandMenuSubItem(props) {
     onClick: onClick,
     toggle: props.toggle === false ? false : true
   }, props.isShowImage && React__default.createElement("div", {
-    className: styles$y['vitro-image']
+    className: styles$G['vitro-image']
   }, props.imageUrl && React__default.createElement(Image, {
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl
@@ -63051,15 +63325,15 @@ var CommandMenuItemHeader = function CommandMenuItemHeader(props) {
     onMouseLeave: function onMouseLeave() {
       return setIsHover(false);
     },
-    className: itemStyles['vitro-item'] + CTRL.SPACE + styles$y['vitro-command-menu-dropdown-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: itemStyles['vitro-item'] + CTRL.SPACE + styles$G['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$y['vitro-image']
+    className: styles$G['vitro-image']
   }), React__default.createElement("span", null, props.text), !props.isHideChevronDown && React__default.createElement("div", {
-    className: styles$y['vitro-button-collapse-bottom']
+    className: styles$G['vitro-button-collapse-bottom']
   }));
 };
 
@@ -63071,7 +63345,7 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   return React__default.createElement(reactstrap.UncontrolledDropdown, {
     nav: true,
     inNavbar: true,
-    className: styles$y['vitro-dropdown-button-container']
+    className: styles$G['vitro-dropdown-button-container']
   }, React__default.createElement(reactstrap.DropdownToggle, {
     nav: true,
     caret: true
@@ -63087,17 +63361,39 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   }), props.children));
 };
 
-var styles$z = {"vitro-item":"_sidebar-item_vitro-item_1BR_7F0","vitro-image":"_sidebar-item_vitro-image_2A82YI0","vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","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$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 Item$2 = function Item(props) {
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", null, props.imageUrl && React__default.createElement(Image, {
+  var _useState = React.useState(false),
+    isShowTooltip = _useState[0],
+    setIsShowTooltip = _useState[1];
+  var textRef = React.useRef(null);
+  React.useEffect(function () {
+    var isOverflow = textRef.current && textRef.current.offsetWidth < textRef.current.scrollWidth;
+    if (!props.isMobileView && (!props.isSidebarExpanded || isOverflow)) {
+      setIsShowTooltip(true);
+    } else {
+      setIsShowTooltip(false);
+    }
+  }, [props.isSidebarExpanded]);
+  return React__default.createElement(Tooltip$1, {
+    text: props.text || CTRL.EMPTY,
+    placement: PLACEMENT$1.RIGHT,
+    isShow: isShowTooltip ? undefined : false
+  }, React__default.createElement("div", {
+    className: props.className,
+    style: props.width ? {
+      minWidth: props.width + UNIT.PX
+    } : {}
+  }, React__default.createElement("div", null, props.imageUrl && React__default.createElement(Image, {
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl,
     isHover: props.isHover,
-    className: styles$z['vitro-image']
+    className: styles$H['vitro-image']
   })), React__default.createElement("span", {
-    className: styles$z['vitro-item-text'] + (!(props.isSidebarExpanded || props.isMobileView) ? CTRL.SPACE + styles$z['vitro-display-none'] : CTRL.EMPTY)
-  }, props.text));
+    ref: textRef,
+    className: styles$H['vitro-item-text'] + (!(props.isSidebarExpanded || props.isMobileView) ? CTRL.SPACE + styles$H['vitro-display-none'] : CTRL.EMPTY)
+  }, props.text)));
 };
 
 var MODE;
@@ -63117,8 +63413,8 @@ var LinkItem$1 = function LinkItem(props) {
   var _useState = React.useState(false),
     isHover = _useState[0],
     setIsHover = _useState[1];
-  var isActive = !!props.link && (props.link === props.currentUrl || props.activeItem === props.id || props.altUrlList && props.altUrlList.includes(props.currentUrl));
-  var className = isActive ? styles$z['vitro-active'] : isHover ? styles$z['vitro-hover'] : CTRL.EMPTY;
+  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 onClick = function onClick(e) {
     if (props.onClick) {
       props.onClick(e);
@@ -63135,7 +63431,7 @@ var LinkItem$1 = function LinkItem(props) {
     style: {
       width: props.linkItemWidth ? props.linkItemWidth + UNIT.PX : WIDTH_AUTO
     },
-    className: styles$z['vitro-item']
+    className: styles$H['vitro-item']
   }, (props.link || props.onClick) && React__default.createElement("button", {
     onMouseEnter: function onMouseEnter() {
       return setIsHover(true);
@@ -63199,13 +63495,21 @@ var GroupItem = function GroupItem(props) {
   React.useEffect(function () {
     updateState();
   }, [props.isSidebarExpanded, props.activeItem, props.currentUrl, isExpanded]);
+  React.useEffect(function () {
+    if (props.isMobileView && props.activeItem !== props.id) {
+      setIsExpanded(false);
+      setIsActive(false);
+    }
+  }, [props.activeItem]);
   React.useEffect(function () {
     if (props.isMobileView) {
       setIsExpanded(false);
     }
   }, [props.currentUrl]);
-  var className = isActive ? styles$z['vitro-active'] : isHover ? styles$z['vitro-hover'] : CTRL.EMPTY;
   var onClick = function onClick(e) {
+    if (props.isMobileView && !getIsActiveChildItem()) {
+      props.setActiveItem(!isExpanded ? props.id : CTRL.EMPTY);
+    }
     setIsExpanded(!isExpanded);
   };
   var getIsActiveChildItem = function getIsActiveChildItem() {
@@ -63232,7 +63536,7 @@ var GroupItem = function GroupItem(props) {
         setIsHover(false);
       }
     } else {
-      if (isActiveChildItem) {
+      if (isActiveChildItem || props.isMobileView && isExpanded) {
         setIsActive(true);
       } else {
         setIsActive(false);
@@ -63254,7 +63558,7 @@ var GroupItem = function GroupItem(props) {
       end: e.changedTouches[0].clientY
     }));
     if (swipePosition.start < e.changedTouches[0].clientY) {
-      setIsExpanded(false);
+      closePopupMenu();
     }
   };
   var onTouchMove = function onTouchMove(e) {
@@ -63264,6 +63568,11 @@ var GroupItem = function GroupItem(props) {
       itemListRef.current.style.height = height + UNIT.PX;
     }
   };
+  var closePopupMenu = function closePopupMenu() {
+    setIsExpanded(false);
+    props.setActiveItem(CTRL.EMPTY);
+  };
+  var className = isActive ? styles$H['vitro-active'] : isHover ? styles$H['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,
@@ -63273,24 +63582,23 @@ var GroupItem = function GroupItem(props) {
       currentUrl: props.currentUrl,
       isSidebarExpanded: props.isSidebarExpanded,
       isMobileView: props.isMobileView
-    }, i)) : i.itemList ? React__default.createElement(GroupItem, {
+    }, i)) : i.itemList ? React__default.createElement(GroupItem, Object.assign({
       isSidebarExpanded: props.isSidebarExpanded,
-      id: i.id,
-      text: i.text,
       link: i.link,
       itemList: i.itemList,
       linkItemWidth: props.linkItemWidth,
       activeItem: props.activeItem,
+      setActiveItem: props.setActiveItem,
       key: i.text,
       currentUrl: props.currentUrl,
       isMobileView: props.isMobileView
-    }) : null;
+    }, i)) : null;
   }));
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("li", {
     style: {
       width: props.linkItemWidth ? props.linkItemWidth + UNIT.PX : WIDTH_AUTO$1
     },
-    className: styles$z['vitro-item'] + CTRL.SPACE + styles$z['vitro-group-item']
+    className: styles$H['vitro-item'] + CTRL.SPACE + styles$H['vitro-group-item']
   }, React__default.createElement("button", {
     onMouseEnter: function onMouseEnter() {
       return _onFocus(true);
@@ -63308,30 +63616,30 @@ var GroupItem = function GroupItem(props) {
     className: className
   }, React__default.createElement(Item$2, Object.assign({}, props, {
     isHover: isHover || isActive
-  })), props.isSidebarExpanded && React__default.createElement("span", {
-    className: isExpanded ? styles$z['vitro-expanded'] : styles$z['vitro-collapsed']
+  })), props.isSidebarExpanded && !props.isMobileView && React__default.createElement("span", {
+    className: isExpanded ? styles$H['vitro-expanded'] : styles$H['vitro-collapsed']
   })), props.isMobileView ? React__default.createElement(Overlay$1, {
     show: isExpanded,
     target: props.container,
     placement: PLACEMENT$2.TOP
   }, React__default.createElement("div", {
-    className: styles$z['vitro-popup-container']
+    className: styles$H['vitro-popup-container']
   }, React__default.createElement("ul", {
-    className: styles$z['vitro-popup-item-list'],
+    className: styles$H['vitro-popup-item-list'],
     ref: itemListRef
   }, React__default.createElement("button", {
     ref: buttonRef,
-    className: styles$z['vitro-button-close'],
+    className: styles$H['vitro-button-close'],
     onTouchStart: onTouchStart,
     onTouchEnd: onTouchEnd,
     onTouchMove: onTouchMove,
     onClick: function onClick() {
-      return setIsExpanded(false);
+      return closePopupMenu();
     }
   }), React__default.createElement(ScrollBar, {
-    className: styles$z['vitro-scrollbar']
+    className: styles$H['vitro-scrollbar']
   }, content)))) : React__default.createElement("ul", {
-    className: styles$z['vitro-item-list'] + CTRL.SPACE + (props.isSidebarExpanded ? !isExpanded ? styles$z['vitro-display-none'] : CTRL.EMPTY : styles$z['vitro-display-none'])
+    className: styles$H['vitro-item-list'] + CTRL.SPACE + (props.isSidebarExpanded ? !isExpanded ? styles$H['vitro-display-none'] : CTRL.EMPTY : styles$H['vitro-display-none'])
   }, content)));
 };
 
@@ -63345,21 +63653,20 @@ var Section = function Section(props) {
       currentUrl: props.currentUrl,
       isSidebarExpanded: props.isExpanded,
       isMobileView: props.isMobileView
-    }, i)) : i.itemList ? React__default.createElement(GroupItem, {
+    }, i)) : i.itemList ? React__default.createElement(GroupItem, Object.assign({
       isSidebarExpanded: props.isExpanded,
-      id: i.id,
-      text: i.text,
       itemList: i.itemList,
       linkItemWidth: props.linkItemWidth,
       activeItem: props.activeItem,
+      setActiveItem: props.setActiveItem,
       key: i.text,
       currentUrl: props.currentUrl,
       isMobileView: props.isMobileView
-    }) : React__default.createElement("div", null);
+    }, i)) : React__default.createElement("div", null);
   })));
 };
 
-var styles$A = {"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"};
+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 SectionList = React.forwardRef(function (props, ref) {
   if (!props.itemList || props.itemList.length === 0) {
@@ -63367,7 +63674,7 @@ var SectionList = React.forwardRef(function (props, ref) {
   }
   return React__default.createElement("ul", {
     ref: ref,
-    className: styles$A['vitro-sidebar-section-list']
+    className: styles$I['vitro-sidebar-section-list']
   }, props.itemList.map(function (section) {
     return React__default.createElement(Section, Object.assign({
       isExpanded: props.isExpanded,
@@ -63375,7 +63682,8 @@ var SectionList = React.forwardRef(function (props, ref) {
       currentUrl: props.currentUrl,
       activeItem: props.activeItem,
       isMobileView: props.isMobileView,
-      container: props.container
+      container: props.container,
+      setActiveItem: props.setActiveItem
     }, section));
   }));
 });
@@ -63396,22 +63704,26 @@ var Sidebar = function Sidebar(props) {
   var _useState5 = React.useState(0),
     linkItemWidth = _useState5[0],
     setLinkItemWidth = _useState5[1];
+  var _useState6 = React.useState(props.activeItem || CTRL.EMPTY),
+    activeItem = _useState6[0],
+    setActiveItem = _useState6[1];
   var menuRef = React.useRef(null);
-  var scrollableListRef = React.useRef(null);
+  var scrollContentRef = React.useRef(null);
   var handleHistoryChanged = function handleHistoryChanged(e) {
     setCurrentUrl(e.detail.pathname);
+    setActiveItem(CTRL.EMPTY);
   };
   React.useEffect(function () {
     if (props.sidebar === MODE.TOGGLED_HOVERED && props.overflowItemList && props.overflowItemList.length > 0) {
       setItemList([].concat(props.topItemList, props.overflowItemList));
     } else if (isMobileView) {
-      var list = props.bottomItemList ? [].concat(props.topItemList, props.bottomItemList) : props.topItemList;
+      var list = [].concat(props.topItemList, props.bottomItemList ? props.bottomItemList : []);
       setItemList(list);
       handleResize();
     } else {
       setItemList(props.topItemList);
     }
-  }, [props.sidebar, isMobileView]);
+  }, [props.sidebar, props.topItemList, props.bottomItemList, isMobileView]);
   React.useEffect(function () {
     window.addEventListener(exports.EVENT.RESIZE, handleResize);
     window.addEventListener(exports.EVENT.HISTORY_CHANGED, handleHistoryChanged);
@@ -63420,6 +63732,9 @@ var Sidebar = function Sidebar(props) {
       window.removeEventListener(exports.EVENT.HISTORY_CHANGED, handleHistoryChanged);
     };
   }, []);
+  React.useEffect(function () {
+    setActiveItem(props.activeItem);
+  }, [props.activeItem]);
   React.useEffect(function () {
     handleResize();
   }, [window.innerWidth]);
@@ -63433,8 +63748,8 @@ var Sidebar = function Sidebar(props) {
   };
   var scroll = function scroll() {
     var container = menuRef.current;
-    var scrollableList = scrollableListRef.current;
-    if (container && scrollableList) {
+    var scrollContent = scrollContentRef.current;
+    if (container && scrollContent) {
       var info = container.getBoundingClientRect();
       var width = info.right - info.left;
       var translateValue = translate;
@@ -63444,7 +63759,7 @@ var Sidebar = function Sidebar(props) {
         translateValue += width;
       }
       setTranslate(translateValue);
-      scrollableList.style.transform = "translate(-" + translateValue + "px)";
+      scrollContent.style.transform = "translate(-" + translateValue + "px)";
     }
   };
   var updateLinkItemWidth = function updateLinkItemWidth(containerWidth) {
@@ -63453,65 +63768,85 @@ var Sidebar = function Sidebar(props) {
     var width = containerWidth / count;
     setLinkItemWidth(width);
   };
-  var className = styles$A['vitro-sidebar'] + (props.theme ? CTRL.SPACE + props.theme : CTRL.EMPTY) + CTRL.SPACE + (isMobileView ? 'vitro-bottom-menu' : CTRL.EMPTY);
+  var className = styles$I['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(ScrollBar, {
-    className: styles$A['vitro-scrollbar']
+  }, !isMobileView ? React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollBar, {
+    className: styles$I['vitro-scrollbar']
   }, React__default.createElement(SectionList, {
     itemList: itemList,
     currentUrl: currentUrl,
-    activeItem: props.activeItem,
-    isExpanded: props.sidebar === null ? false : !props.sidebar,
+    activeItem: activeItem,
+    setActiveItem: setActiveItem,
+    isExpanded: !props.sidebar,
     isMobileView: isMobileView
-  }), props.bottomItemList && React__default.createElement(SectionList, {
-    itemList: props.bottomItemList,
+  }), React__default.createElement(SectionList, {
+    itemList: props.bottomItemList || [],
     currentUrl: currentUrl,
-    activeItem: props.activeItem,
-    isExpanded: props.sidebar === null ? false : !props.sidebar,
+    activeItem: activeItem,
+    setActiveItem: setActiveItem,
+    isExpanded: !props.sidebar,
     isMobileView: isMobileView
-  })) : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$A['vitro-scroll-container'],
+  })), React__default.createElement("div", {
+    className: styles$I['vitro-logo-container']
+  }, React__default.createElement(Item$2, {
+    text: props.logoText,
+    imageUrl: props.logo,
+    isSidebarExpanded: !props.sidebar,
+    isMobileView: isMobileView,
+    className: styles$I['vitro-logo']
+  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: styles$I['vitro-scroll-container'],
     ref: menuRef
+  }, React__default.createElement("div", {
+    className: styles$I['vitro-scroll-content'],
+    ref: scrollContentRef
   }, React__default.createElement(SectionList, {
     container: menuRef.current,
     itemList: itemList,
     currentUrl: currentUrl,
-    activeItem: props.activeItem,
-    ref: scrollableListRef,
+    activeItem: activeItem,
+    setActiveItem: setActiveItem,
     linkItemWidth: linkItemWidth,
-    isExpanded: props.sidebar === null ? false : !props.sidebar,
+    isExpanded: !props.sidebar,
     isMobileView: isMobileView
-  })), React__default.createElement("button", {
+  }), React__default.createElement(Item$2, {
+    text: props.logoText,
+    imageUrl: props.logo,
+    width: linkItemWidth,
+    isSidebarExpanded: !props.sidebar,
+    isMobileView: isMobileView,
+    className: styles$I['vitro-logo']
+  }))), React__default.createElement("button", {
     onClick: scroll,
-    className: styles$A['vitro-button-more']
+    className: styles$I['vitro-button-more']
   })));
 };
 
-var styles$B = {"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$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 ActivityItem = function ActivityItem(props) {
   return React__default.createElement("div", {
-    className: styles$B['vitro-item'] + (props.isActive ? CTRL.SPACE + styles$B['vitro-active'] : CTRL.EMPTY)
+    className: styles$J['vitro-item'] + (props.isActive ? CTRL.SPACE + styles$J['vitro-active'] : CTRL.EMPTY)
   }, React__default.createElement("div", {
-    className: styles$B['vitro-flex']
+    className: styles$J['vitro-flex']
   }, React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.userImageUrl,
-    className: styles$B['vitro-avatar']
+    className: styles$J['vitro-avatar']
   }), React__default.createElement("div", {
-    className: styles$B['vitro-content']
+    className: styles$J['vitro-content']
   }, React__default.createElement("div", null, React__default.createElement("div", {
-    className: styles$B['vitro-title']
+    className: styles$J['vitro-title']
   }, React__default.createElement("span", null, props.title || props.userName), props.isShowDetail && React__default.createElement("span", {
-    className: styles$B['vitro-due-date']
+    className: styles$J['vitro-due-date']
   }, props.date), props.isShowDetail && props.dropdownItemList && React__default.createElement(DropdownButton, {
     itemList: props.dropdownItemList,
     onToggle: props.onDropdownToggle,
-    className: styles$B['vitro-dropdown-button']
+    className: styles$J['vitro-dropdown-button']
   })), React__default.createElement("div", {
-    className: styles$B['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
+    className: styles$J['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
   }, React__default.createElement("p", {
     dangerouslySetInnerHTML: {
       __html: props.message
@@ -63519,46 +63854,46 @@ var ActivityItem = function ActivityItem(props) {
   }), props.children)))));
 };
 
-var styles$C = {"vitro-task-user-list":"_task-user-list_vitro-task-user-list_3GBJVjt"};
+var styles$K = {"vitro-task-user-list":"_task-user-list_vitro-task-user-list_3GBJVjt"};
 
 var TaskUserList = function TaskUserList(props) {
   return React__default.createElement("div", {
-    className: styles$C['vitro-task-user-list']
+    className: styles$K['vitro-task-user-list']
   }, props.itemList && props.itemList.map(function (x) {
     return React__default.createElement(ActivityItem, Object.assign({}, x));
   }));
 };
 
-var styles$D = {"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$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 TaskTile = function TaskTile(props) {
   return React__default.createElement("div", {
-    className: styles$D['vitro-task-tile'] + (props.isActive ? CTRL.SPACE + styles$D['vitro-active'] : CTRL.EMPTY),
+    className: styles$L['vitro-task-tile'] + (props.isActive ? CTRL.SPACE + styles$L['vitro-active'] : CTRL.EMPTY),
     onClick: props.onClick
   }, props.dropdownItemList && React__default.createElement("div", {
-    className: styles$D['vitro-top-right']
+    className: styles$L['vitro-top-right']
   }, React__default.createElement(DropdownButton, {
     itemList: props.dropdownItemList,
-    className: styles$D['vitro-dropdown-button']
+    className: styles$L['vitro-dropdown-button']
   })), props.isShowDeleteButton && React__default.createElement("div", {
-    className: styles$D['vitro-button-cancel'],
+    className: styles$L['vitro-button-cancel'],
     onClick: props.onDeleteClick
   }), props.description && React__default.createElement("div", {
-    className: styles$D['vitro-description']
+    className: styles$L['vitro-description']
   }, props.description), React__default.createElement("div", {
-    className: styles$D['vitro-title']
+    className: styles$L['vitro-title']
   }, props.title), props.comment && React__default.createElement("div", {
-    className: styles$D['vitro-comment']
+    className: styles$L['vitro-comment']
   }, props.comment), React__default.createElement("div", {
-    className: styles$D['vitro-content']
+    className: styles$L['vitro-content']
   }, props.userList && React__default.createElement(TaskUserList, {
     itemList: props.userList
   })), React__default.createElement("div", {
-    className: styles$D['vitro-bottom-right']
+    className: styles$L['vitro-bottom-right']
   }, props.dateComment, " \xA0 ", props.date), props.children);
 };
 
-var styles$E = {"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$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 Alert$1 = function Alert(props) {
   var ref = React.useRef(null);
@@ -63590,7 +63925,7 @@ var Alert$1 = function Alert(props) {
     }
   };
   var actionList = props.actionList && React__default.createElement("div", {
-    className: styles$E['vitro-alert-action-list']
+    className: styles$M['vitro-alert-action-list']
   }, props.actionList.map(function (a) {
     return React__default.createElement(Button$1, {
       key: a.text,
@@ -63599,7 +63934,7 @@ var Alert$1 = function Alert(props) {
       }
     }, a.text);
   }));
-  var className = styles$E['vitro-alert'] + CTRL.SPACE + (props.isPositionCenter && styles$E['vitro-position-center']) + CTRL.SPACE + (props.className ? props.className : CTRL.EMPTY);
+  var className = styles$M['vitro-alert'] + CTRL.SPACE + (props.isPositionCenter && styles$M['vitro-position-center']) + CTRL.SPACE + (props.className ? props.className : CTRL.EMPTY);
   return React__default.createElement("div", {
     tabIndex: 1,
     onBlur: onFocusOut,
@@ -63609,13 +63944,13 @@ var Alert$1 = function Alert(props) {
     variant: props.type,
     onClose: props.onClose
   }, React__default.createElement("div", {
-    className: styles$E['vitro-alert-content']
+    className: styles$M['vitro-alert-content']
   }, React__default.createElement("div", {
-    className: styles$E['vitro-icon']
+    className: styles$M['vitro-icon']
   }), React__default.createElement("div", {
-    className: styles$E['vitro-text']
+    className: styles$M['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$E['vitro-button-close'],
+    className: styles$M['vitro-button-close'],
     onClick: onClose
   })), props.text && props.children, props.isMultiline && actionList));
 };
@@ -63641,34 +63976,34 @@ var DialogComponent = function DialogComponent(props) {
   }, props.children);
 };
 
-var styles$F = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x"};
+var styles$N = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x"};
 
 var DialogContent = function DialogContent(props) {
   return React__default.createElement("div", {
-    className: styles$F['vitro-dialog-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$N['vitro-dialog-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, props.children);
 };
 
-var styles$G = {"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 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$G['vitro-dialog-header']
+    className: styles$O['vitro-dialog-header']
   }, props.imageUrl && React__default.createElement(Image, {
     defaultUrl: props.imageUrl,
-    className: styles$G['vitro-image']
+    className: styles$O['vitro-image']
   }), React__default.createElement("div", null, React__default.createElement("h1", {
-    className: styles$G['vitro-title']
+    className: styles$O['vitro-title']
   }, props.title), props.description && React__default.createElement("h2", {
-    className: styles$G['vitro-description']
+    className: styles$O['vitro-description']
   }, props.description)));
 };
 
-var styles$H = {"vitro-dialog-button":"_dialog-button_vitro-dialog-button_1fQ5l22"};
+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$H['vitro-dialog-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$P['vitro-dialog-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }));
 };
 
@@ -63701,7 +64036,7 @@ var LOCALE$5;
   LOCALE["ACTION_SAVE"] = "app.common.action.save";
 })(LOCALE$5 || (LOCALE$5 = {}));
 
-var styles$I = {"vitro-dialog-footer":"_dialog-footer_vitro-dialog-footer_2vUQ3aG"};
+var styles$Q = {"vitro-dialog-footer":"_dialog-footer_vitro-dialog-footer_2vUQ3aG"};
 
 var DialogFooter = function DialogFooter(props) {
   var _props$buttonList, _props$buttonList2;
@@ -63713,7 +64048,7 @@ var DialogFooter = function DialogFooter(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$I['vitro-dialog-footer']
+    className: styles$Q['vitro-dialog-footer']
   }, props.isDismissible && props.onClose && React__default.createElement(DialogCloseButton, {
     text: labelClose,
     isDisabled: !props.isDismissible,
@@ -63777,7 +64112,7 @@ var Dialog = function Dialog(props) {
   }) : null));
 };
 
-var styles$J = {"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$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 UserProfileMenuItem = function UserProfileMenuItem(props) {
   var onClick = function onClick() {
@@ -63788,7 +64123,7 @@ var UserProfileMenuItem = function UserProfileMenuItem(props) {
   };
   if (props.link) {
     return React__default.createElement("div", {
-      className: styles$J['vitro-dropdown-item'],
+      className: styles$R['vitro-dropdown-item'],
       onClick: onClick
     }, React__default.createElement("a", {
       href: props.link
@@ -63799,7 +64134,7 @@ var UserProfileMenuItem = function UserProfileMenuItem(props) {
   }
   if (props.onClick) {
     return React__default.createElement("div", {
-      className: styles$J['vitro-dropdown-item'],
+      className: styles$R['vitro-dropdown-item'],
       key: props.text,
       onClick: onClick
     }, props.imageUrl && React__default.createElement(Image, {
@@ -63833,15 +64168,15 @@ var UserProfile = function UserProfile(props) {
   return React__default.createElement(reactstrap.Dropdown, {
     isOpen: dropdownOpen,
     toggle: toggle,
-    className: styles$J['vitro-user-profile']
+    className: styles$R['vitro-user-profile']
   }, React__default.createElement(reactstrap.DropdownToggle, {
     caret: true
   }, React__default.createElement("div", null, React__default.createElement("span", {
-    className: styles$J['vitro-text-color-white']
+    className: styles$R['vitro-text-color-white']
   }, createSurnameWithInitials(props.userName)), React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.image,
-    className: styles$J['vitro-avatar']
+    className: styles$R['vitro-avatar']
   }))), React__default.createElement(reactstrap.DropdownMenu, {
     right: true
   }, props.dropdownMenuItemList && props.dropdownMenuItemList.length > 0 && props.dropdownMenuItemList.map(function (item) {
@@ -63851,7 +64186,7 @@ var UserProfile = function UserProfile(props) {
   })));
 };
 
-var styles$K = {"vitro-avatar":"_user-lookup-picker_vitro-avatar_2vI-SeH"};
+var styles$S = {"vitro-avatar":"_user-lookup-picker_vitro-avatar_2vI-SeH"};
 
 var UserLookupPicker = React.forwardRef(function (props, ref) {
   var lookupPickerRef = React.useRef(null);
@@ -63859,7 +64194,7 @@ var UserLookupPicker = React.forwardRef(function (props, ref) {
     var prop = props.getHtmlValueTemplateProps(item);
     if (props.isMultiSelect) {
       return _extends({}, prop, {
-        className: styles$K['vitro-avatar']
+        className: styles$S['vitro-avatar']
       });
     }
     return prop;
@@ -63880,22 +64215,22 @@ var UserLookupPicker = React.forwardRef(function (props, ref) {
   }));
 });
 
-var styles$L = {"vitro-title":"_activity_vitro-title_1rdvvaa","vitro-dropdown-button":"_activity_vitro-dropdown-button_12258nJ","vitro-activity":"_activity_vitro-activity_1u7YeF3"};
+var styles$T = {"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$L['vitro-title']
+    className: styles$T['vitro-title']
   }, props.filterDropdownList && React__default.createElement(DropdownButton, {
     itemList: props.filterDropdownList,
-    className: styles$L['vitro-dropdown-button']
+    className: styles$T['vitro-dropdown-button']
   }), props.title && React__default.createElement("h3", null, props.title)), React__default.createElement("div", {
     className: 'vitro-content'
   }, props.children));
 };
 
-var styles$M = {"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$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 ActivityMessage = function ActivityMessage(props) {
   var _useState = React.useState(false),
@@ -63937,25 +64272,25 @@ var ActivityMessage = function ActivityMessage(props) {
     return false;
   };
   return React__default.createElement("div", {
-    className: styles$M['vitro-activity-message']
+    className: styles$U['vitro-activity-message']
   }, props.changedValueList.map(function (item) {
     return React__default.createElement("div", {
-      className: styles$M['vitro-item']
+      className: styles$U['vitro-item']
     }, item.fieldName && React__default.createElement("span", {
-      className: styles$M['vitro-field-name']
+      className: styles$U['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$M['vitro-value'],
+      className: styles$U['vitro-value'],
       ref: oldValueRef
     }, item.oldValue)), React__default.createElement("span", {
-      className: styles$M['vitro-separator']
+      className: styles$U['vitro-separator']
     })), React__default.createElement(Tooltip$1, {
       text: item.newValue,
       isShow: isShowNewValueTooltip ? undefined : false
     }, React__default.createElement("div", {
-      className: item.isMessage ? styles$M['vitro-message'] : styles$M['vitro-value'],
+      className: item.isMessage ? styles$U['vitro-message'] : styles$U['vitro-value'],
       ref: newValueRef
     }, item.newValue)));
   }));
@@ -63971,13 +64306,14 @@ CONTROL.INPUT = 'Input';
 CONTROL.NUMBER_INPUT = 'NumberInput';
 CONTROL.PASSWORD = 'Password';
 CONTROL.TIME_PICKER = 'TimePicker';
+CONTROL.LINK_INPUT = 'LinkInput';
 
 var LOCALE$6;
 (function (LOCALE) {
   LOCALE["PLACEHOLDER"] = "app.common.messageInput.placeholder";
 })(LOCALE$6 || (LOCALE$6 = {}));
 
-var styles$N = {"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$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 NEW_LINE = '\n';
 var MessageInput = function MessageInput(props) {
@@ -64028,14 +64364,14 @@ var MessageInput = function MessageInput(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$N['vitro-message-input'],
+    className: styles$V['vitro-message-input'],
     onDrop: props.onDrop
   }, React__default.createElement("div", {
-    className: styles$N['vitro-control']
+    className: styles$V['vitro-control']
   }, !props.isDisabled && React__default.createElement(ScrollBar, {
     isHideScrollX: true
   }, React__default.createElement("div", {
-    className: styles$N['vitro-message'],
+    className: styles$V['vitro-message'],
     ref: inputRef,
     onChange: onChange,
     onKeyDown: onKeyDown,
@@ -64043,17 +64379,17 @@ var MessageInput = function MessageInput(props) {
     onBlur: onBlur,
     contentEditable: true
   }, isShowPlaceholder && React__default.createElement("span", {
-    className: styles$N['vitro-placeholder']
+    className: styles$V['vitro-placeholder']
   }, props.placeholder || localeService.create(LOCALE$6.PLACEHOLDER)))), props.children, props.onAddFile && React__default.createElement("button", {
     onClick: props.onAddFile,
-    className: styles$N['vitro-button-add-file']
+    className: styles$V['vitro-button-add-file']
   })), React__default.createElement("button", {
     onClick: onEnter,
-    className: styles$N['vitro-button-send']
+    className: styles$V['vitro-button-send']
   }));
 };
 
-var styles$O = {"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$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 ACTION$1;
 (function (ACTION) {
@@ -64072,16 +64408,16 @@ var ImagePicker = function ImagePicker(props) {
   var renderPreview = function renderPreview() {
     if (props.defaultUrl) {
       return React__default.createElement("div", {
-        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$O['vitro-image-picker-image-wrapper']
+        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$W['vitro-image-picker-image-wrapper']
       }, React__default.createElement(Image, {
         defaultUrl: props.defaultUrl,
-        className: props.classNameImage ? props.classNameImage : styles$O['vitro-image-picker-image']
+        className: props.classNameImage ? props.classNameImage : styles$W['vitro-image-picker-image']
       }));
     } else {
       return React__default.createElement("div", {
-        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$O['vitro-image-picker-defaultImage-wrapper']
+        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$W['vitro-image-picker-defaultImage-wrapper']
       }, React__default.createElement("div", {
-        className: styles$O['vitro-image-default']
+        className: styles$W['vitro-image-default']
       }));
     }
   };
@@ -64121,24 +64457,24 @@ 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$O['vitro-image-picker-wrapper']
+    className: styles$W['vitro-image-picker-wrapper']
   }, React__default.createElement("div", {
-    className: styles$O['vitro-image-picker-label-wrapper']
+    className: styles$W['vitro-image-picker-label-wrapper']
   }, props.label ? props.label : ''), React__default.createElement("div", {
-    className: props.classNameRoot ? props.classNameRoot : styles$O['vitro-image-picker-root']
+    className: props.classNameRoot ? props.classNameRoot : styles$W['vitro-image-picker-root']
   }, !props.isReadOnly && React__default.createElement(DropdownButton, {
     itemList: defaultItemList,
-    className: styles$O['vitro-image-picker-dropdown-wrapper']
+    className: styles$W['vitro-image-picker-dropdown-wrapper']
   }), React__default.createElement("input", {
     type: 'file',
-    className: styles$O['vitro-image-picker-input'],
+    className: styles$W['vitro-image-picker-input'],
     ref: inputFileRef,
     onChange: onChange,
     accept: "image/*"
   }), renderPreview()));
 };
 
-var styles$P = {"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$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 ROOT_ID = 'root';
 var ConditionSelect = React.forwardRef(function (props, ref) {
@@ -64196,13 +64532,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$P['vitro-condition-list-container'];
+      container.className = styles$X['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$P['vitro-condition-list'],
+        className: styles$X['vitro-condition-list'],
         onBlur: onBlur
       }, props.itemList.map(function (item) {
         return React__default.createElement("li", {
@@ -64211,7 +64547,7 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
           }
         }, item.imageUrl && React__default.createElement(Image, {
           defaultUrl: item.imageUrl,
-          className: styles$P['vitro-image']
+          className: styles$X['vitro-image']
         }), item.text);
       }));
       reactDom.render(content, container);
@@ -64220,12 +64556,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$P['vitro-condition-select']
+    className: styles$X['vitro-condition-select']
   }, React__default.createElement("div", {
     onClick: toggleSelect
   }, condition.imageUrl ? React__default.createElement(Image, {
     defaultUrl: condition.imageUrl,
-    className: styles$P['vitro-image']
+    className: styles$X['vitro-image']
   }) : condition.text)));
 });
 
@@ -64305,13 +64641,13 @@ var Criterion = function Criterion(props) {
     onChange(value);
   };
   var onFocus = function onFocus(e) {
-    setState(styles$P['vitro-focus']);
+    setState(styles$X['vitro-focus']);
     if (componentProps.onFocus) {
       componentProps.onFocus(e);
     }
   };
   var onBlur = function onBlur(e) {
-    setState(componentProps.errorMessage ? styles$P['vitro-error'] : CTRL.EMPTY);
+    setState(componentProps.errorMessage ? styles$X['vitro-error'] : CTRL.EMPTY);
     if (componentProps.onBlur) {
       componentProps.onBlur(e);
     }
@@ -64341,12 +64677,12 @@ var Criterion = function Criterion(props) {
     var root = document.getElementById(ROOT_ID$1);
     if (position && root) {
       var container = document.createElement('div');
-      container.className = styles$P['vitro-operator-list-container'];
+      container.className = styles$X['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$P['vitro-operator-list']
+        className: styles$X['vitro-operator-list']
       }, props.operatorList.map(function (item) {
         return React__default.createElement("li", {
           onClick: function onClick() {
@@ -64359,25 +64695,25 @@ var Criterion = function Criterion(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$P['vitro-criterion-container']
+    className: styles$X['vitro-criterion-container']
   }, React__default.createElement("div", {
-    className: styles$P['vitro-operator-select-container']
+    className: styles$X['vitro-operator-select-container']
   }, props.isShowOperatorSelect && React__default.createElement("div", {
     ref: operatorSelectRef,
-    className: styles$P['vitro-operator-select'],
+    className: styles$X['vitro-operator-select'],
     onClick: toggleOperatorSelect
   }, React__default.createElement("div", null, operator.text))), React__default.createElement("div", {
-    className: styles$P['vitro-control'] + CTRL.SPACE + state
+    className: styles$X['vitro-control'] + CTRL.SPACE + state
   }, React__default.createElement("div", {
     ref: labelRef,
-    className: styles$P['vitro-label']
+    className: styles$X['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$P['vitro-control'],
+    className: styles$X['vitro-control'],
     onBlur: onBlur,
     onFocus: onFocus,
     onChange: onControlChange,
@@ -64389,7 +64725,7 @@ var Criterion = function Criterion(props) {
     onClick: function onClick() {
       return props.onDelete(componentProps.id);
     },
-    className: styles$P['vitro-button-cancel']
+    className: styles$X['vitro-button-cancel']
   }));
 };
 
@@ -64399,7 +64735,7 @@ var LOCALE$8;
   LOCALE["EMPTY_PLACEHOLDER"] = "app.common.search.checkboxList.emptyPlaceholder";
 })(LOCALE$8 || (LOCALE$8 = {}));
 
-var styles$Q = {"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$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 NEW_LINE$1 = '\n';
 var Input$1 = function Input(props) {
@@ -64445,15 +64781,15 @@ var Input$1 = function Input(props) {
     onSubmit();
   };
   var onFocus = function onFocus() {
-    setState(styles$Q['vitro-focus']);
+    setState(styles$Y['vitro-focus']);
     if (props.onFocus) {
       props.onFocus();
     }
   };
   var getClassName = function getClassName() {
-    var classList = [styles$Q['vitro-control'], props.className || CTRL.EMPTY, state];
+    var classList = [styles$Y['vitro-control'], props.className || CTRL.EMPTY, state];
     if (props.isActive) {
-      classList.push(styles$Q['vitro-active']);
+      classList.push(styles$Y['vitro-active']);
     }
     return classList.join(CTRL.SPACE);
   };
@@ -64496,24 +64832,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$Q['vitro-search-value']
+      className: styles$Y['vitro-search-value']
     }, React__default.createElement("span", null, getTextValue(firstValue)), React__default.createElement("button", {
       onClick: function onClick() {
         return onRemoveValue([firstValue]);
       },
-      className: styles$Q['vitro-button-cancel']
+      className: styles$Y['vitro-button-cancel']
     })), list.length >= 1 ? React__default.createElement(Tooltip$1, {
       text: getTextValueList(list),
       placement: PLACEMENT$1.BOTTOM
     }, React__default.createElement("div", {
-      className: styles$Q['vitro-search-value']
+      className: styles$Y['vitro-search-value']
     }, localeService.create(LOCALE$8.INPUT_MORE, {
       count: list.length
     }), React__default.createElement("button", {
       onClick: function onClick() {
         return onRemoveValue(list);
       },
-      className: styles$Q['vitro-button-cancel']
+      className: styles$Y['vitro-button-cancel']
     }))) : null);
   };
   var onSearchClick = function onSearchClick() {
@@ -64526,10 +64862,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$Q['vitro-button-search'] + (props.isSettingsActive ? CTRL.SPACE + styles$Q['vitro-active'] : CTRL.EMPTY),
+    className: styles$Y['vitro-button-search'] + (props.isSettingsActive ? CTRL.SPACE + styles$Y['vitro-active'] : CTRL.EMPTY),
     onClick: onSearchClick
   }), !props.isMobileView && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$Q['vitro-search-value-list']
+    className: styles$Y['vitro-search-value-list']
   }, props.valueList.length ? getSelectedValueList(props.valueList) : React__default.createElement("input", {
     type: 'text',
     ref: inputRef,
@@ -64540,10 +64876,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$Q['vitro-button-settings'] + (props.isSettingsActive ? CTRL.SPACE + styles$Q['vitro-active'] : CTRL.EMPTY)
+    className: styles$Y['vitro-button-settings'] + (props.isSettingsActive ? CTRL.SPACE + styles$Y['vitro-active'] : CTRL.EMPTY)
   }), React__default.createElement("button", {
     onClick: onCancel,
-    className: styles$Q['vitro-button-cancel']
+    className: styles$Y['vitro-button-cancel']
   })))));
 };
 
@@ -64731,7 +65067,7 @@ var FieldIterator = React.forwardRef(function (props, ref) {
   })));
 });
 
-var styles$R = {"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$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 Filter = function Filter(props) {
   var _useState = React.useState(null),
@@ -64789,7 +65125,7 @@ var Filter = function Filter(props) {
     props.onChange(changedFieldValueMap);
   };
   return React__default.createElement("div", {
-    className: styles$R['vitro-filter']
+    className: styles$Z['vitro-filter']
   }, componentMap && React__default.createElement(FieldIterator, {
     fieldList: props.fieldList,
     fieldValueMap: fieldValueMap,
@@ -64800,7 +65136,7 @@ var Filter = function Filter(props) {
   }));
 };
 
-var styles$S = {"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$_ = {"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),
@@ -64853,18 +65189,18 @@ var CheckboxList = function CheckboxList(props) {
       onChange: function onChange(value, name) {
         return _onChange(value, item.id);
       },
-      className: styles$S['vitro-checkbox']
+      className: styles$_['vitro-checkbox']
     });
   };
   return React__default.createElement("div", {
-    className: styles$S['vitro-checkbox-list']
+    className: styles$_['vitro-checkbox-list']
   }, React__default.createElement(Input$1, {
     valueList: [],
     onCancel: onSearchCancel,
     onChange: onInputChange,
     onSubmit: onInputChange,
     isActive: false,
-    className: styles$S['vitro-control'],
+    className: styles$_['vitro-control'],
     isMobileView: false
   }), React__default.createElement(ScrollBar, null, isShowSearchResult ? searchItemList.length ? searchItemList.map(function (item) {
     return getCheckbox(item);
@@ -64939,7 +65275,7 @@ var Search = function Search(props) {
   }, [window.innerWidth]);
   React.useEffect(function () {
     if (selectedSearchCriterionList.length) {
-      setState(styles$R['vitro-active']);
+      setState(styles$Z['vitro-active']);
     }
   }, [selectedSearchCriterionList]);
   React.useEffect(function () {
@@ -65079,7 +65415,7 @@ var Search = function Search(props) {
     }
   };
   var onFocusInput = function onFocusInput() {
-    setState(styles$R['vitro-active']);
+    setState(styles$Z['vitro-active']);
   };
   var onRemoveValue = function onRemoveValue(valueList) {
     setSearchCriterionList(valueList);
@@ -65087,7 +65423,7 @@ var Search = function Search(props) {
   };
   return React__default.createElement("div", {
     ref: searchRef,
-    className: styles$R['vitro-search'] + CTRL.SPACE + state
+    className: styles$Z['vitro-search'] + CTRL.SPACE + state
   }, React__default.createElement(Input$1, {
     valueList: selectedSearchCriterionList,
     onSettingsClick: onSettingsClick,
@@ -65102,7 +65438,7 @@ var Search = function Search(props) {
     isMobileView: isMobileView,
     isShowSettings: true
   }), isShowDialog && React__default.createElement("div", {
-    className: styles$R['vitro-settings-dialog']
+    className: styles$Z['vitro-settings-dialog']
   }, React__default.createElement(Filter, {
     fieldList: filterFieldList,
     valueList: selectedSearchCriterionList,
@@ -65113,24 +65449,24 @@ var Search = function Search(props) {
     getConditionList: props.getConditionList,
     getDefaultCondition: props.getDefaultCondition
   }), isShowAddFieldButton && React__default.createElement("div", {
-    className: styles$R['vitro-add-field']
+    className: styles$Z['vitro-add-field']
   }, React__default.createElement(Button$2, {
     text: props.labelAddField,
     onClick: onAddField,
-    className: styles$R['vitro-add-field-button']
+    className: styles$Z['vitro-add-field-button']
   }), isShowAddFieldDialog && React__default.createElement("div", {
     ref: addFieldDialogRef,
-    className: styles$R['vitro-add-field-dialog']
+    className: styles$Z['vitro-add-field-dialog']
   }, React__default.createElement(CheckboxList, {
     itemList: checkboxFieldList,
     onChange: onFieldListChange,
     isAllSelected: props.isAllFieldsVisible
   }))), React__default.createElement("div", {
-    className: styles$R['vitro-footer']
+    className: styles$Z['vitro-footer']
   }, React__default.createElement(Button$2, {
     text: props.labelCancel,
     onClick: closeSettings,
-    className: styles$R['vitro-button-cancel']
+    className: styles$Z['vitro-button-cancel']
   }), React__default.createElement(Button$2, {
     text: props.labelSearch,
     onClick: onSubmit
@@ -65170,7 +65506,7 @@ var Splitter = function Splitter(props) {
   }, props.children);
 };
 
-var styles$T = {"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$$ = {"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),
@@ -65180,42 +65516,42 @@ var RouteItem = function RouteItem(props) {
     isShowComment = _useState2[0],
     setIsShowComment = _useState2[1];
   return React__default.createElement("div", {
-    className: styles$T['vitro-route-item']
+    className: styles$$['vitro-route-item']
   }, props.children ? React__default.createElement("button", {
-    className: isExpanded ? styles$T['vitro-button-collapse'] : styles$T['vitro-button-expand'],
+    className: isExpanded ? styles$$['vitro-button-collapse'] : styles$$['vitro-button-expand'],
     onClick: function onClick() {
       return setIsExpanded(!isExpanded);
     }
   }) : null, React__default.createElement("div", {
-    className: styles$T['vitro-route-item-content']
+    className: styles$$['vitro-route-item-content']
   }, props.userName && props.status && React__default.createElement("div", {
-    className: styles$T['vitro-route-item-header']
+    className: styles$$['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$T['vitro-avatar']
+    className: styles$$['vitro-avatar']
   }), props.userName), React__default.createElement("div", {
-    className: styles$T['vitro-date']
+    className: styles$$['vitro-date']
   }, props.date)), React__default.createElement("div", null, React__default.createElement("div", null, props.statusColor && React__default.createElement("div", {
-    className: styles$T['vitro-status-color'],
+    className: styles$$['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$T['vitro-route-item-body']
+    className: styles$$['vitro-route-item-body']
   }, React__default.createElement("div", {
-    className: styles$T['vitro-flex']
+    className: styles$$['vitro-flex']
   }, React__default.createElement("span", null, props.name), props.comment && React__default.createElement("button", {
-    className: isShowComment ? styles$T['vitro-button-hide-comment'] : styles$T['vitro-button-show-comment'],
+    className: isShowComment ? styles$$['vitro-button-hide-comment'] : styles$$['vitro-button-show-comment'],
     onClick: function onClick() {
       return setIsShowComment(!isShowComment);
     }
   })), isShowComment && props.comment && React__default.createElement("div", {
-    className: styles$T['vitro-comment']
+    className: styles$$['vitro-comment']
   }, props.comment)), isExpanded && React__default.createElement("div", {
-    className: styles$T['vitro-route-item-child']
+    className: styles$$['vitro-route-item-child']
   }, props.children)));
 };
 
@@ -65323,7 +65659,7 @@ var BimViewer = function BimViewer(props) {
   });
 };
 
-var styles$U = {"vitro-page":"_page-layout_vitro-page_GzZ3agH"};
+var styles$10 = {"vitro-page":"_page-layout_vitro-page_GzZ3agH"};
 
 var PageLayout = function PageLayout(props) {
   var getClassName = function getClassName(sidebar) {
@@ -65337,7 +65673,7 @@ var PageLayout = function PageLayout(props) {
     return CTRL.SPACE + classNameArr.join(CTRL.SPACE);
   };
   return React__default.createElement("div", {
-    className: styles$U['vitro-page'] + getClassName(props.sidebar) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$10['vitro-page'] + getClassName(props.sidebar) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     id: 'vitro-page'
   }, props.children);
 };
@@ -65352,7 +65688,7 @@ var HeaderConstants = {
     get LOCAL_STORAGE_KEY () { return LOCAL_STORAGE_KEY; }
 };
 
-var styles$V = {"vitro-header":"_header_vitro-header_ta9aLJn"};
+var styles$11 = {"vitro-header":"_header_vitro-header_ta9aLJn"};
 
 var onChangeSidebarMode = function onChangeSidebarMode() {};
 var Header = function Header(props) {
@@ -65387,54 +65723,52 @@ var Header = function Header(props) {
     }
   }, [ref.current]);
   React.useEffect(function () {
-    if (props.sidebar >= 0) {
+    if (props.sidebar >= 0 && props.sidebar !== null) {
       localStorageService.setItem(LOCAL_STORAGE_KEY.SIDEBAR_MODE, props.sidebar);
     } else {
       var sidebarMode = localStorageService.getItem(LOCAL_STORAGE_KEY.SIDEBAR_MODE);
-      if (sidebarMode) {
-        props.setSidebar(parseInt(sidebarMode) >= MODE.TOGGLED_PINNED ? parseInt(sidebarMode) : MODE.TOGGLED_PINNED);
-      }
+      props.setSidebar(parseInt(sidebarMode) >= MODE.TOGGLED_PINNED ? parseInt(sidebarMode) : MODE.TOGGLED_PINNED);
     }
   }, [props.sidebar]);
   return React__default.createElement("div", {
-    className: styles$V['vitro-header'],
+    className: styles$11['vitro-header'],
     id: 'vitro-header',
     ref: ref
   }, props.children);
 };
 
-var styles$W = {"vitro-nav-bar-sidebar-button":"_header-nav-bar-sidebar-button_vitro-nav-bar-sidebar-button_3IZcIOc"};
+var styles$12 = {"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$W['vitro-nav-bar-sidebar-button'],
+    className: styles$12['vitro-nav-bar-sidebar-button'],
     onClick: props.onClick
   });
 };
 
-var styles$X = {"vitro-nav-bar":"_header-nav-bar_vitro-nav-bar_EuyFIk8"};
+var styles$13 = {"vitro-nav-bar":"_header-nav-bar_vitro-nav-bar_EuyFIk8"};
 
 var HeaderNavBar = function HeaderNavBar(props) {
   return React__default.createElement("nav", {
-    className: styles$X['vitro-nav-bar'] + CTRL.SPACE + ['navbar', 'navbar-expand-lg', 'navbar-light'].join(CTRL.SPACE)
+    className: styles$13['vitro-nav-bar'] + CTRL.SPACE + ['navbar', 'navbar-expand-lg', 'navbar-light'].join(CTRL.SPACE)
   }, React__default.createElement(SidebarButton, {
     onClick: onChangeSidebarMode
   }), props.children);
 };
 
-var styles$Y = {"vitro-nav-service":"_header-nav-service_vitro-nav-service_1-i4GOh"};
+var styles$14 = {"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$Y['vitro-nav-service']
+    className: styles$14['vitro-nav-service']
   }, React__default.createElement("div", {
     className: logoStyles['vitro-customer-logo']
   }), props.children);
 };
 
-var styles$Z = {"vitro-product-title":"_product-title_vitro-product-title_2gZcA5j"};
+var styles$15 = {"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, {
@@ -65444,7 +65778,7 @@ var ProductTitle = function ProductTitle(props) {
   if (props.href) {
     return React__default.createElement("a", {
       href: props.href,
-      className: styles$Z['vitro-product-title'],
+      className: styles$15['vitro-product-title'],
       title: props.imageCaption
     }, content);
   }
@@ -65459,16 +65793,16 @@ var ProductTitle = function ProductTitle(props) {
   };
   return React__default.createElement("a", {
     onClick: onClick,
-    className: styles$Z['vitro-product-title'],
+    className: styles$15['vitro-product-title'],
     title: props.imageCaption
   }, content);
 };
 
-var styles$_ = {"vitro-right":"_right-align-control-group_vitro-right_2vnd6R7"};
+var styles$16 = {"vitro-right":"_right-align-control-group_vitro-right_2vnd6R7"};
 
 var RightAlignControlGroup = function RightAlignControlGroup(props) {
   return React__default.createElement("div", {
-    className: styles$_['vitro-right']
+    className: styles$16['vitro-right']
   }, props.children);
 };
 
@@ -65478,32 +65812,32 @@ var LeftAlignControlGroup = function LeftAlignControlGroup(props) {
   }, props.children);
 };
 
-var styles$$ = {"vitro-center":"_center-align-control-group_vitro-center_3SHmVN-"};
+var styles$17 = {"vitro-center":"_center-align-control-group_vitro-center_3SHmVN-"};
 
 var CenterAlignControlGroup = function CenterAlignControlGroup(props) {
   return React__default.createElement("div", {
-    className: styles$$['vitro-center']
+    className: styles$17['vitro-center']
   }, props.children);
 };
 
-var styles$10 = {"vitro-main":"_main_vitro-main_Kk2JMBF"};
+var styles$18 = {"vitro-main":"_main_vitro-main_Kk2JMBF"};
 
 var Main = function Main(props) {
   return React__default.createElement("div", {
-    className: styles$10['vitro-main'],
+    className: styles$18['vitro-main'],
     id: 'vitro-main'
   }, props.children);
 };
 
-var styles$11 = {"vitro-table-view-detail":"_table-view-detail_vitro-table-view-detail_zxwp4XX"};
+var styles$19 = {"vitro-table-view-detail":"_table-view-detail_vitro-table-view-detail_zxwp4XX"};
 
 var TableViewDetail = function TableViewDetail(props) {
   return React__default.createElement("div", {
-    className: styles$11['vitro-table-view-detail']
+    className: styles$19['vitro-table-view-detail']
   }, props.children);
 };
 
-var styles$12 = {"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$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 ExpandControlGroup = function ExpandControlGroup(props) {
   var _useState = React.useState(props.isOpen),
@@ -65514,18 +65848,18 @@ var ExpandControlGroup = function ExpandControlGroup(props) {
     props.onClick && props.onClick();
   };
   return React__default.createElement("div", {
-    className: styles$12['vitro-expand-control-group']
+    className: styles$1a['vitro-expand-control-group']
   }, React__default.createElement("div", {
-    className: styles$12['vitro-title'],
+    className: styles$1a['vitro-title'],
     onClick: onClick
   }, React__default.createElement("div", {
-    className: isOpen ? styles$12['vitro-button-collapse'] : styles$12['vitro-button-expand'] + (props.isRight ? CTRL.SPACE + styles$12['vitro-right'] : CTRL.EMPTY)
+    className: isOpen ? styles$1a['vitro-button-collapse'] : styles$1a['vitro-button-expand'] + (props.isRight ? CTRL.SPACE + styles$1a['vitro-right'] : CTRL.EMPTY)
   }), props.title), React__default.createElement("div", {
-    className: styles$12['vitro-content'] + (isOpen ? CTRL.EMPTY : CTRL.SPACE + styles$12['vitro-display-none'])
+    className: styles$1a['vitro-content'] + (isOpen ? CTRL.EMPTY : CTRL.SPACE + styles$1a['vitro-display-none'])
   }, props.children));
 };
 
-var styles$13 = {"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$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 Radio = React.forwardRef(function (props, ref) {
   var radioRef = React.useRef(null);
@@ -65549,14 +65883,14 @@ var Radio = React.forwardRef(function (props, ref) {
       props.onChange(props.value, e);
     }
   };
-  var className = styles$13['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$13['vitro-left-label'] : CTRL.EMPTY) + CTRL.SPACE + (props.isDisabled ? styles$13['vitro-disabled'] : CTRL.EMPTY) + CTRL.SPACE + (props.className || CTRL.EMPTY);
+  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);
   return React__default.createElement("div", {
     className: className
   }, props.labelPosition === POSITION.LEFT && React__default.createElement(Label, {
     text: props.label,
-    className: styles$13['vitro-label']
+    className: styles$1b['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$13['vitro-radio-content']
+    className: styles$1b['vitro-radio-content']
   }, React__default.createElement("input", {
     ref: radioRef,
     type: 'radio',
@@ -65568,10 +65902,132 @@ var Radio = React.forwardRef(function (props, ref) {
     onChange: onChange
   }), props.labelPosition !== POSITION.LEFT && React__default.createElement(Label, {
     text: props.label,
-    className: styles$13['vitro-label']
+    className: styles$1b['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";
+  LOCALE["TOOLTIP_OPEN"] = "app.common.linkInput.tooltip.open";
+})(LOCALE$9 || (LOCALE$9 = {}));
+
+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 LinkInput = React.forwardRef(function (props, ref) {
+  var _useState = React.useState(false),
+    isEditMode = _useState[0],
+    setIsEditMode = _useState[1];
+  var _useState2 = React.useState(props.value || {
+      url: CTRL.EMPTY,
+      name: CTRL.EMPTY
+    }),
+    value = _useState2[0],
+    _setValue = _useState2[1];
+  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
+  var inputRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      },
+      setValue: function setValue(value) {
+        _setValue(value);
+      },
+      getValue: function getValue() {
+        return value;
+      }
+    };
+  });
+  React.useEffect(function () {
+    _setValue(props.value || {
+      url: CTRL.EMPTY,
+      name: CTRL.EMPTY
+    });
+  }, [props.value]);
+  React.useEffect(function () {
+    if (isEditMode && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isEditMode]);
+  var onClickEditButton = function onClickEditButton() {
+    setIsEditMode(true);
+  };
+  var onChange = function onChange(val) {
+    _setValue(function (prevState) {
+      return _extends({}, prevState, {
+        url: val
+      });
+    });
+    if (props.onChange) {
+      props.onChange(value, props.name);
+    }
+  };
+  var onBlur = function onBlur() {
+    setIsEditMode(false);
+    if (props.onBlur && isEditMode) {
+      props.onBlur(value, props.name);
+    }
+  };
+  var onMouseDown = function onMouseDown(e) {
+    if (!isEditMode && value.url) {
+      e.preventDefault();
+      e.stopPropagation();
+      var link = document.createElement('a');
+      link.href = value.url;
+      link.target = TARGET$1.BLANK;
+      link.click();
+      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);
+  return React__default.createElement("div", {
+    className: className
+  }, React__default.createElement(Tooltip$1, {
+    text: !isEditMode && value.url ? localeService.create(LOCALE$9.TOOLTIP_OPEN) : CTRL.EMPTY
+  }, React__default.createElement("div", {
+    onMouseDown: onMouseDown
+  }, React__default.createElement(Input, {
+    ref: inputRef,
+    label: props.label,
+    value: value.name || value.url,
+    onBlur: onBlur,
+    onFocus: props.onFocus,
+    onChange: onChange,
+    errorMessage: props.errorMessage,
+    isShowCopyButton: false,
+    isRequired: props.isRequired,
+    isError: props.isError,
+    isReadOnly: props.isReadOnly ? true : !isEditMode,
+    className: styles$1d['vitro-control']
+  }))), !props.isReadOnly && !isEditMode && React__default.createElement(ImageButton, {
+    onClick: onClickEditButton,
+    tooltipText: localeService.create(LOCALE$9.TOOLTIP_EDIT),
+    className: styles$1d['vitro-edit-button']
+  }));
+});
+
 exports.ACTION_HANDLER = ActionHandlerConstants;
 exports.ALERT = AlertConstants;
 exports.ActionHandler = ActionHandler;
@@ -65609,16 +66065,21 @@ exports.Header = Header;
 exports.HeaderNavBar = HeaderNavBar;
 exports.HeaderNavService = HeaderNavService;
 exports.Image = Image;
+exports.ImageButton = ImageButton;
 exports.ImagePicker = ImagePicker;
 exports.Input = Input;
 exports.IssueTile = IssueTile;
 exports.Label = Label;
 exports.LeftAlignControlGroup = LeftAlignControlGroup;
+exports.Link = Link;
+exports.LinkInput = LinkInput;
 exports.Login = Login;
+exports.LoginForm = LoginForm;
 exports.LookupPicker = LookupPicker;
 exports.Main = Main;
 exports.MessageInput = MessageInput;
 exports.MicroFrontend = MicroFrontend;
+exports.NTLMAuthenticationForm = NTLMAuthenticationForm;
 exports.NUMBER_INPUT = NumberInputConstants;
 exports.NumberInput = NumberInput;
 exports.PageLayout = PageLayout;
@@ -65650,6 +66111,7 @@ exports.TimePicker = TimePicker;
 exports.Tooltip = Tooltip$1;
 exports.TopLevelMenu = TopLevelMenu;
 exports.TreeView = TreeView;
+exports.TwoFactorAuthenticationForm = TwoFactorAuthenticationForm;
 exports.UNIT = UNIT;
 exports.UserLookupPicker = UserLookupPicker;
 exports.UserProfile = UserProfile;