@vitrosoftware/common-ui-ts 1.1.98 → 1.1.99

package/dist/index.js

@@ -197,14 +197,6 @@ var app$1 = {
 		messageInput: {
 			placeholder: "Добавить комментарий..."
 		},
-		search: {
-			input: {
-				more: "ещё {{count}}"
-			},
-			checkboxList: {
-				emptyPlaceholder: "Нет данных"
-			}
-		},
 		linkInput: {
 			tooltip: {
 				edit: "Редактировать",
@@ -230,6 +222,13 @@ var app$1 = {
 				showDetail: "Подробнее",
 				hide: "Скрыть"
 			}
+		},
+		searchInput: {
+			placeholder: "Поиск",
+			valueCount: "ещё {{count}}"
+		},
+		searchValueList: {
+			emptyPlaceholder: "Нет данных"
 		}
 	}
 };
@@ -493,10 +492,9 @@ var ScrollBar = function ScrollBar(props) {
   EVENT["CONTEXTMENU"] = "contextmenu";
 })(exports.EVENT || (exports.EVENT = {}));
 
-var MOBILE_VIEW;
 (function (MOBILE_VIEW) {
   MOBILE_VIEW[MOBILE_VIEW["WIDTH"] = 800] = "WIDTH";
-})(MOBILE_VIEW || (MOBILE_VIEW = {}));
+})(exports.MOBILE_VIEW || (exports.MOBILE_VIEW = {}));
 
 var ELEMENT_CANVAS = 'canvas';
 var CANVAS_CONTEXT = '2d';
@@ -602,7 +600,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
   }, [containerWidth]);
   var updateBreadcrumbsView = function updateBreadcrumbsView() {
     if (windowWidth) {
-      windowWidth < MOBILE_VIEW.WIDTH ? setIsMobileView(true) : setIsMobileView(false);
+      windowWidth < exports.MOBILE_VIEW.WIDTH ? setIsMobileView(true) : setIsMobileView(false);
     }
   };
   var updateItemList = function updateItemList(e) {
@@ -60458,7 +60456,7 @@ var Dialog = function Dialog(props) {
     }
   };
   var updateIsMobileView = function updateIsMobileView() {
-    setIsMobileView(window.innerWidth < MOBILE_VIEW.WIDTH);
+    setIsMobileView(window.innerWidth < exports.MOBILE_VIEW.WIDTH);
   };
   var onClickDetailButton = function onClickDetailButton(isExpanded) {
     setIsShowHiddenContent(isExpanded);
@@ -61849,7 +61847,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.98";
+var version$1 = "1.1.99";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -63502,7 +63500,7 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   }), props.children));
 };
 
-var styles$R = {"vitro-item":"_sidebar-item_vitro-item_1BR_7F0","vitro-image":"_sidebar-item_vitro-image_2A82YI0","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-hover":"_sidebar-item_vitro-hover_1mECzme","vitro-group-item":"_sidebar-item_vitro-group-item_ZADCctV","vitro-item-list":"_sidebar-item_vitro-item-list_17dWov1","vitro-expanded":"_sidebar-item_vitro-expanded_3qb1vOx","vitro-collapsed":"_sidebar-item_vitro-collapsed_2EhVmXL","vitro-display-none":"_sidebar-item_vitro-display-none_2WwKi5v","vitro-popup-container":"_sidebar-item_vitro-popup-container_2X7SVxe","vitro-scrollbar":"_sidebar-item_vitro-scrollbar___xylIx","vitro-popup-item-list":"_sidebar-item_vitro-popup-item-list_JUwcoZB","vitro-button-close":"_sidebar-item_vitro-button-close_2Kdf-ob"};
+var styles$R = {"vitro-item":"_sidebar-item_vitro-item_1BR_7F0","vitro-image":"_sidebar-item_vitro-image_2A82YI0","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-hover":"_sidebar-item_vitro-hover_1mECzme","vitro-group-item":"_sidebar-item_vitro-group-item_ZADCctV","vitro-item-list":"_sidebar-item_vitro-item-list_17dWov1","vitro-expanded":"_sidebar-item_vitro-expanded_3qb1vOx","vitro-collapsed":"_sidebar-item_vitro-collapsed_2EhVmXL","vitro-display-none":"_sidebar-item_vitro-display-none_2WwKi5v","vitro-scrollbar":"_sidebar-item_vitro-scrollbar___xylIx","vitro-button-close":"_sidebar-item_vitro-button-close_2Kdf-ob"};
 
 var Item$2 = function Item(props) {
   var _useState = React.useState(false),
@@ -63627,6 +63625,86 @@ var LinkItem$1 = function LinkItem(props) {
   }))));
 };
 
+var styles$S = {"vitro-slide-up-panel":"_slide-up-panel_vitro-slide-up-panel_2EOSLHK","vitro-content":"_slide-up-panel_vitro-content_1er6bcv","vitro-expanded":"_slide-up-panel_vitro-expanded_2f2dYt6","vitro-button-close":"_slide-up-panel_vitro-button-close_2iM7SFL"};
+
+var SlideUpPanel = function SlideUpPanel(props) {
+  var _useState = React.useState(props.isShow),
+    isShow = _useState[0],
+    setIsShow = _useState[1];
+  var _useState2 = React.useState(props.isShow),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var _useState3 = React.useState({
+      start: 0,
+      end: 0
+    }),
+    swipePosition = _useState3[0],
+    setSwipePosition = _useState3[1];
+  var contentRef = React.useRef(null);
+  var buttonRef = React.useRef(null);
+  React.useEffect(function () {
+    setIsShow(props.isShow);
+    if (props.isShow) {
+      setTimeout(function () {
+        setIsExpanded(true);
+      }, 100);
+    } else {
+      setIsExpanded(false);
+    }
+  }, [props.isShow]);
+  React.useEffect(function () {
+    if (isExpanded && contentRef.current) {
+      contentRef.current.style.height = contentRef.current.offsetHeight + UNIT.PX;
+    }
+  }, [isExpanded]);
+  var onTouchStart = function onTouchStart(e) {
+    setSwipePosition(_extends({}, swipePosition, {
+      start: e.changedTouches[0].clientY
+    }));
+  };
+  var onTouchEnd = function onTouchEnd(e) {
+    setSwipePosition(_extends({}, swipePosition, {
+      end: e.changedTouches[0].clientY
+    }));
+    if (swipePosition.start < e.changedTouches[0].clientY) {
+      close();
+    }
+  };
+  var onTouchMove = function onTouchMove(e) {
+    var inset = swipePosition.start - e.changedTouches[0].clientY;
+    if (contentRef.current && inset < 0) {
+      var height = contentRef.current.getBoundingClientRect().height + inset;
+      contentRef.current.style.height = height + UNIT.PX;
+    }
+  };
+  var close = function close() {
+    setIsShow(false);
+    setIsExpanded(false);
+    if (props.onClose) {
+      props.onClose();
+    }
+  };
+  return React__default.createElement(Overlay$1, {
+    show: isShow,
+    target: props.container,
+    placement: exports.PLACEMENT.TOP
+  }, React__default.createElement("div", {
+    className: styles$S['vitro-slide-up-panel'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }, React__default.createElement("div", {
+    className: styles$S['vitro-content'] + (isExpanded ? CTRL.SPACE + styles$S['vitro-expanded'] : CTRL.EMPTY),
+    ref: contentRef
+  }, React__default.createElement("button", {
+    ref: buttonRef,
+    className: styles$S['vitro-button-close'],
+    onTouchStart: onTouchStart,
+    onTouchEnd: onTouchEnd,
+    onTouchMove: onTouchMove,
+    onClick: function onClick() {
+      return close();
+    }
+  }), props.children)));
+};
+
 var WIDTH_AUTO$1 = 'auto';
 var GroupItem = function GroupItem(props) {
   var _useState = React.useState(false),
@@ -63641,14 +63719,6 @@ var GroupItem = function GroupItem(props) {
   var _useState4 = React.useState(false),
     isActiveChildItem = _useState4[0],
     setIsActiveChildItem = _useState4[1];
-  var _useState5 = React.useState({
-      start: 0,
-      end: 0
-    }),
-    swipePosition = _useState5[0],
-    setSwipePosition = _useState5[1];
-  var itemListRef = React.useRef(null);
-  var buttonRef = React.useRef(null);
   React.useEffect(function () {
     if (getIsActiveChildItem() && props.isSidebarExpanded && !props.isMobileView) {
       setIsExpanded(true);
@@ -63710,30 +63780,6 @@ var GroupItem = function GroupItem(props) {
       setIsHover(focus);
     }
   };
-  var onTouchStart = function onTouchStart(e) {
-    setSwipePosition(_extends({}, swipePosition, {
-      start: e.changedTouches[0].clientY
-    }));
-  };
-  var onTouchEnd = function onTouchEnd(e) {
-    setSwipePosition(_extends({}, swipePosition, {
-      end: e.changedTouches[0].clientY
-    }));
-    if (swipePosition.start < e.changedTouches[0].clientY) {
-      closePopupMenu();
-    }
-  };
-  var onTouchMove = function onTouchMove(e) {
-    var inset = swipePosition.start - e.changedTouches[0].clientY;
-    if (itemListRef.current && inset < 0) {
-      var height = itemListRef.current.getBoundingClientRect().height + inset;
-      itemListRef.current.style.height = height + UNIT.PX;
-    }
-  };
-  var closePopupMenu = function closePopupMenu() {
-    setIsExpanded(false);
-    props.setActiveItem(CTRL.EMPTY);
-  };
   var className = isActive ? styles$R['vitro-active'] : isHover ? styles$R['vitro-hover'] : CTRL.EMPTY;
   var content = React__default.createElement(React__default.Fragment, null, props.itemList && props.itemList.map(function (i) {
     return i.link || i.onClick ? React__default.createElement(LinkItem$1, Object.assign({
@@ -63781,27 +63827,15 @@ var GroupItem = function GroupItem(props) {
     isHover: isHover || isActive
   })), props.isSidebarExpanded && !props.isMobileView && React__default.createElement("span", {
     className: isExpanded ? styles$R['vitro-expanded'] : styles$R['vitro-collapsed']
-  })), props.isMobileView ? React__default.createElement(Overlay$1, {
-    show: isExpanded,
-    target: props.container,
-    placement: exports.PLACEMENT.TOP
-  }, React__default.createElement("div", {
-    className: styles$R['vitro-popup-container']
-  }, React__default.createElement("ul", {
-    className: styles$R['vitro-popup-item-list'],
-    ref: itemListRef
-  }, React__default.createElement("button", {
-    ref: buttonRef,
-    className: styles$R['vitro-button-close'],
-    onTouchStart: onTouchStart,
-    onTouchEnd: onTouchEnd,
-    onTouchMove: onTouchMove,
-    onClick: function onClick() {
-      return closePopupMenu();
+  })), props.isMobileView ? React__default.createElement(SlideUpPanel, {
+    isShow: isExpanded,
+    container: props.container,
+    onClose: function onClose() {
+      return props.setActiveItem(CTRL.EMPTY);
     }
-  }), React__default.createElement(ScrollBar, {
+  }, React__default.createElement(ScrollBar, {
     className: styles$R['vitro-scrollbar']
-  }, content)))) : React__default.createElement("ul", {
+  }, content)) : React__default.createElement("ul", {
     className: styles$R['vitro-item-list'] + CTRL.SPACE + (props.isSidebarExpanded ? !isExpanded ? styles$R['vitro-display-none'] : CTRL.EMPTY : styles$R['vitro-display-none'])
   }, content)));
 };
@@ -63829,7 +63863,7 @@ var Section = function Section(props) {
   })) : React__default.createElement(React__default.Fragment, null));
 };
 
-var styles$S = {"vitro-sidebar":"_sidebar_vitro-sidebar_1IxGYiU","vitro-scrollbar":"_sidebar_vitro-scrollbar_2PtQGQD","vitro-sidebar-section-list":"_sidebar_vitro-sidebar-section-list_1nGto5m","vitro-scroll-container":"_sidebar_vitro-scroll-container_3K-iJy8","vitro-button-more":"_sidebar_vitro-button-more_3s9oZY9","vitro-logo-container":"_sidebar_vitro-logo-container_31O5Ly-","vitro-logo":"_sidebar_vitro-logo_1qxi8L_","vitro-scroll-content":"_sidebar_vitro-scroll-content_2RUBhZd"};
+var styles$T = {"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) {
@@ -63837,7 +63871,7 @@ var SectionList = React.forwardRef(function (props, ref) {
   }
   return React__default.createElement("ul", {
     ref: ref,
-    className: styles$S['vitro-sidebar-section-list']
+    className: styles$T['vitro-sidebar-section-list']
   }, props.itemList.map(function (section) {
     return React__default.createElement(Section, Object.assign({
       isExpanded: props.isExpanded,
@@ -63902,8 +63936,8 @@ var Sidebar = function Sidebar(props) {
     handleResize();
   }, [window.innerWidth]);
   var handleResize = function handleResize() {
-    window.innerWidth < MOBILE_VIEW.WIDTH ? setIsMobileView(true) : setIsMobileView(false);
-    if (window.innerWidth < MOBILE_VIEW.WIDTH && menuRef.current) {
+    window.innerWidth < exports.MOBILE_VIEW.WIDTH ? setIsMobileView(true) : setIsMobileView(false);
+    if (window.innerWidth < exports.MOBILE_VIEW.WIDTH && menuRef.current) {
       var info = menuRef.current.getBoundingClientRect();
       var width = info.right - info.left;
       updateLinkItemWidth(width);
@@ -63931,12 +63965,12 @@ var Sidebar = function Sidebar(props) {
     var width = containerWidth / count;
     setLinkItemWidth(width);
   };
-  var className = styles$S['vitro-sidebar'] + (props.theme ? CTRL.SPACE + props.theme : CTRL.EMPTY) + CTRL.SPACE + (isMobileView ? 'vitro-bottom-menu' : CTRL.EMPTY);
+  var className = styles$T['vitro-sidebar'] + (props.theme ? CTRL.SPACE + props.theme : CTRL.EMPTY) + CTRL.SPACE + (isMobileView ? 'vitro-bottom-menu' : CTRL.EMPTY);
   return React__default.createElement("div", {
     className: className,
     id: 'vitro-sidebar'
   }, !isMobileView ? React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollBar, {
-    className: styles$S['vitro-scrollbar']
+    className: styles$T['vitro-scrollbar']
   }, React__default.createElement(SectionList, {
     itemList: itemList,
     currentUrl: currentUrl,
@@ -63952,18 +63986,18 @@ var Sidebar = function Sidebar(props) {
     isExpanded: !props.sidebar,
     isMobileView: isMobileView
   })), React__default.createElement("div", {
-    className: styles$S['vitro-logo-container']
+    className: styles$T['vitro-logo-container']
   }, React__default.createElement(Item$2, {
     text: props.logoText,
     imageUrl: props.logo,
     isSidebarExpanded: !props.sidebar,
     isMobileView: isMobileView,
-    className: styles$S['vitro-logo']
+    className: styles$T['vitro-logo']
   }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$S['vitro-scroll-container'],
+    className: styles$T['vitro-scroll-container'],
     ref: menuRef
   }, React__default.createElement("div", {
-    className: styles$S['vitro-scroll-content'],
+    className: styles$T['vitro-scroll-content'],
     ref: scrollContentRef
   }, React__default.createElement(SectionList, {
     container: menuRef.current,
@@ -63980,36 +64014,36 @@ var Sidebar = function Sidebar(props) {
     width: linkItemWidth,
     isSidebarExpanded: !props.sidebar,
     isMobileView: isMobileView,
-    className: styles$S['vitro-logo']
+    className: styles$T['vitro-logo']
   }))), React__default.createElement("button", {
     onClick: scroll,
-    className: styles$S['vitro-button-more']
+    className: styles$T['vitro-button-more']
   })));
 };
 
-var styles$T = {"vitro-item":"_activity-item_vitro-item_3Tprske","vitro-active":"_activity-item_vitro-active_2kENgvf","vitro-title":"_activity-item_vitro-title__QItISm","vitro-due-date":"_activity-item_vitro-due-date_1mBIraY","vitro-content":"_activity-item_vitro-content_3Lt7XRy","vitro-message":"_activity-item_vitro-message_1ndqhgR","vitro-flex":"_activity-item_vitro-flex_37IxBWe","vitro-dropdown-button":"_activity-item_vitro-dropdown-button_1J50ja7","vitro-avatar":"_activity-item_vitro-avatar_218ZqAk"};
+var styles$U = {"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$T['vitro-item'] + (props.isActive ? CTRL.SPACE + styles$T['vitro-active'] : CTRL.EMPTY)
+    className: styles$U['vitro-item'] + (props.isActive ? CTRL.SPACE + styles$U['vitro-active'] : CTRL.EMPTY)
   }, React__default.createElement("div", {
-    className: styles$T['vitro-flex']
+    className: styles$U['vitro-flex']
   }, React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.userImageUrl,
-    className: styles$T['vitro-avatar']
+    className: styles$U['vitro-avatar']
   }), React__default.createElement("div", {
-    className: styles$T['vitro-content']
+    className: styles$U['vitro-content']
   }, React__default.createElement("div", null, React__default.createElement("div", {
-    className: styles$T['vitro-title']
+    className: styles$U['vitro-title']
   }, React__default.createElement("span", null, props.title || props.userName), props.isShowDetail && React__default.createElement("span", {
-    className: styles$T['vitro-due-date']
+    className: styles$U['vitro-due-date']
   }, props.date), props.isShowDetail && props.dropdownItemList && React__default.createElement(DropdownButton, {
     itemList: props.dropdownItemList,
     onToggle: props.onDropdownToggle,
-    className: styles$T['vitro-dropdown-button']
+    className: styles$U['vitro-dropdown-button']
   })), React__default.createElement("div", {
-    className: styles$T['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
+    className: styles$U['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
   }, React__default.createElement("p", {
     dangerouslySetInnerHTML: {
       __html: props.message
@@ -64017,46 +64051,46 @@ var ActivityItem = function ActivityItem(props) {
   }), props.children)))));
 };
 
-var styles$U = {"vitro-task-user-list":"_task-user-list_vitro-task-user-list_3GBJVjt"};
+var styles$V = {"vitro-task-user-list":"_task-user-list_vitro-task-user-list_3GBJVjt"};
 
 var TaskUserList = function TaskUserList(props) {
   return React__default.createElement("div", {
-    className: styles$U['vitro-task-user-list']
+    className: styles$V['vitro-task-user-list']
   }, props.itemList && props.itemList.map(function (x) {
     return React__default.createElement(ActivityItem, Object.assign({}, x));
   }));
 };
 
-var styles$V = {"vitro-task-tile":"_task-tile_vitro-task-tile_35bZu48","vitro-active":"_task-tile_vitro-active_11W9nJz","vitro-content":"_task-tile_vitro-content_rl2ERCQ","vitro-description":"_task-tile_vitro-description_qtyUbLy","vitro-comment":"_task-tile_vitro-comment_2im2AJj","vitro-title":"_task-tile_vitro-title_1pXrIrB","vitro-top-right":"_task-tile_vitro-top-right_19tbPX4","vitro-dropdown-button":"_task-tile_vitro-dropdown-button_2YgEUdg","vitro-bottom-right":"_task-tile_vitro-bottom-right_2E9WAle","vitro-button-cancel":"_task-tile_vitro-button-cancel_1lgja1K"};
+var styles$W = {"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$V['vitro-task-tile'] + (props.isActive ? CTRL.SPACE + styles$V['vitro-active'] : CTRL.EMPTY),
+    className: styles$W['vitro-task-tile'] + (props.isActive ? CTRL.SPACE + styles$W['vitro-active'] : CTRL.EMPTY),
     onClick: props.onClick
   }, props.dropdownItemList && React__default.createElement("div", {
-    className: styles$V['vitro-top-right']
+    className: styles$W['vitro-top-right']
   }, React__default.createElement(DropdownButton, {
     itemList: props.dropdownItemList,
-    className: styles$V['vitro-dropdown-button']
+    className: styles$W['vitro-dropdown-button']
   })), props.isShowDeleteButton && React__default.createElement("div", {
-    className: styles$V['vitro-button-cancel'],
+    className: styles$W['vitro-button-cancel'],
     onClick: props.onDeleteClick
   }), props.description && React__default.createElement("div", {
-    className: styles$V['vitro-description']
+    className: styles$W['vitro-description']
   }, props.description), React__default.createElement("div", {
-    className: styles$V['vitro-title']
+    className: styles$W['vitro-title']
   }, props.title), props.comment && React__default.createElement("div", {
-    className: styles$V['vitro-comment']
+    className: styles$W['vitro-comment']
   }, props.comment), React__default.createElement("div", {
-    className: styles$V['vitro-content']
+    className: styles$W['vitro-content']
   }, props.userList && React__default.createElement(TaskUserList, {
     itemList: props.userList
   })), React__default.createElement("div", {
-    className: styles$V['vitro-bottom-right']
+    className: styles$W['vitro-bottom-right']
   }, props.dateComment, " \xA0 ", props.date), props.children);
 };
 
-var styles$W = {"vitro-alert":"_alert_vitro-alert_3sPAkJb","vitro-alert-content":"_alert_vitro-alert-content_10fW1n4","vitro-button-close":"_alert_vitro-button-close_39K9cqW","vitro-icon":"_alert_vitro-icon_pK385gF","vitro-text":"_alert_vitro-text_37Erxqj","vitro-alert-action-list":"_alert_vitro-alert-action-list_2XzbaCO","vitro-position-center":"_alert_vitro-position-center_1r_lK_e"};
+var styles$X = {"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);
@@ -64088,7 +64122,7 @@ var Alert$1 = function Alert(props) {
     }
   };
   var actionList = props.actionList && React__default.createElement("div", {
-    className: styles$W['vitro-alert-action-list']
+    className: styles$X['vitro-alert-action-list']
   }, props.actionList.map(function (a) {
     return React__default.createElement(Button$1, {
       key: a.text,
@@ -64097,7 +64131,7 @@ var Alert$1 = function Alert(props) {
       }
     }, a.text);
   }));
-  var className = styles$W['vitro-alert'] + CTRL.SPACE + (props.isPositionCenter && styles$W['vitro-position-center']) + CTRL.SPACE + (props.className ? props.className : CTRL.EMPTY);
+  var className = styles$X['vitro-alert'] + CTRL.SPACE + (props.isPositionCenter && styles$X['vitro-position-center']) + CTRL.SPACE + (props.className ? props.className : CTRL.EMPTY);
   return React__default.createElement("div", {
     tabIndex: 1,
     onBlur: onFocusOut,
@@ -64107,13 +64141,13 @@ var Alert$1 = function Alert(props) {
     variant: props.type,
     onClose: props.onClose
   }, React__default.createElement("div", {
-    className: styles$W['vitro-alert-content']
+    className: styles$X['vitro-alert-content']
   }, React__default.createElement("div", {
-    className: styles$W['vitro-icon']
+    className: styles$X['vitro-icon']
   }), React__default.createElement("div", {
-    className: styles$W['vitro-text']
+    className: styles$X['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$W['vitro-button-close'],
+    className: styles$X['vitro-button-close'],
     onClick: onClose
   })), props.text && props.children, props.isMultiline && actionList));
 };
@@ -64130,7 +64164,7 @@ var AlertConstants = {
     get TYPE () { return TYPE$2; }
 };
 
-var styles$X = {"vitro-user-profile":"_user-profile_vitro-user-profile_11XpBoQ","vitro-dropdown-item":"_user-profile_vitro-dropdown-item_dSErsta","vitro-avatar":"_user-profile_vitro-avatar_3SzDPAi"};
+var styles$Y = {"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() {
@@ -64141,7 +64175,7 @@ var UserProfileMenuItem = function UserProfileMenuItem(props) {
   };
   if (props.link) {
     return React__default.createElement("div", {
-      className: styles$X['vitro-dropdown-item'],
+      className: styles$Y['vitro-dropdown-item'],
       onClick: onClick
     }, React__default.createElement("a", {
       href: props.link
@@ -64152,7 +64186,7 @@ var UserProfileMenuItem = function UserProfileMenuItem(props) {
   }
   if (props.onClick) {
     return React__default.createElement("div", {
-      className: styles$X['vitro-dropdown-item'],
+      className: styles$Y['vitro-dropdown-item'],
       key: props.text,
       onClick: onClick
     }, props.imageUrl && React__default.createElement(Image, {
@@ -64186,15 +64220,15 @@ var UserProfile = function UserProfile(props) {
   return React__default.createElement(reactstrap.Dropdown, {
     isOpen: dropdownOpen,
     toggle: toggle,
-    className: styles$X['vitro-user-profile']
+    className: styles$Y['vitro-user-profile']
   }, React__default.createElement(reactstrap.DropdownToggle, {
     caret: true
   }, React__default.createElement("div", null, React__default.createElement("span", {
-    className: styles$X['vitro-text-color-white']
+    className: styles$Y['vitro-text-color-white']
   }, createSurnameWithInitials(props.userName)), React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.image,
-    className: styles$X['vitro-avatar']
+    className: styles$Y['vitro-avatar']
   }))), React__default.createElement(reactstrap.DropdownMenu, {
     right: true
   }, props.dropdownMenuItemList && props.dropdownMenuItemList.length > 0 && props.dropdownMenuItemList.map(function (item) {
@@ -64204,7 +64238,7 @@ var UserProfile = function UserProfile(props) {
   })));
 };
 
-var styles$Y = {"vitro-avatar":"_user-lookup-picker_vitro-avatar_2vI-SeH"};
+var styles$Z = {"vitro-avatar":"_user-lookup-picker_vitro-avatar_2vI-SeH"};
 
 var UserLookupPicker = React.forwardRef(function (props, ref) {
   var lookupPickerRef = React.useRef(null);
@@ -64212,7 +64246,7 @@ var UserLookupPicker = React.forwardRef(function (props, ref) {
     var prop = props.getHtmlValueTemplateProps(item);
     if (props.isMultiSelect) {
       return _extends({}, prop, {
-        className: styles$Y['vitro-avatar']
+        className: styles$Z['vitro-avatar']
       });
     }
     return prop;
@@ -64233,22 +64267,22 @@ var UserLookupPicker = React.forwardRef(function (props, ref) {
   }));
 });
 
-var styles$Z = {"vitro-title":"_activity_vitro-title_1rdvvaa","vitro-dropdown-button":"_activity_vitro-dropdown-button_12258nJ","vitro-activity":"_activity_vitro-activity_1u7YeF3"};
+var styles$_ = {"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$Z['vitro-title']
+    className: styles$_['vitro-title']
   }, props.filterDropdownList && React__default.createElement(DropdownButton, {
     itemList: props.filterDropdownList,
-    className: styles$Z['vitro-dropdown-button']
+    className: styles$_['vitro-dropdown-button']
   }), props.title && React__default.createElement("h3", null, props.title)), React__default.createElement("div", {
     className: 'vitro-content'
   }, props.children));
 };
 
-var styles$_ = {"vitro-activity-message":"_activity-message_vitro-activity-message_3GdyQuC","vitro-item":"_activity-message_vitro-item_3Q-7zX3","vitro-value":"_activity-message_vitro-value_O4DpuTR","vitro-message":"_activity-message_vitro-message_25otUOy","vitro-field-name":"_activity-message_vitro-field-name_hdjdQbg","vitro-separator":"_activity-message_vitro-separator_vxgHLaH"};
+var styles$$ = {"vitro-activity-message":"_activity-message_vitro-activity-message_3GdyQuC","vitro-item":"_activity-message_vitro-item_3Q-7zX3","vitro-value":"_activity-message_vitro-value_O4DpuTR","vitro-message":"_activity-message_vitro-message_25otUOy","vitro-field-name":"_activity-message_vitro-field-name_hdjdQbg","vitro-separator":"_activity-message_vitro-separator_vxgHLaH"};
 
 var ActivityMessage = function ActivityMessage(props) {
   var _useState = React.useState(false),
@@ -64290,25 +64324,25 @@ var ActivityMessage = function ActivityMessage(props) {
     return false;
   };
   return React__default.createElement("div", {
-    className: styles$_['vitro-activity-message']
+    className: styles$$['vitro-activity-message']
   }, props.changedValueList.map(function (item) {
     return React__default.createElement("div", {
-      className: styles$_['vitro-item']
+      className: styles$$['vitro-item']
     }, item.fieldName && React__default.createElement("span", {
-      className: styles$_['vitro-field-name']
+      className: styles$$['vitro-field-name']
     }, "" + item.fieldName + CTRL.COLON), item.oldValue && React__default.createElement(React__default.Fragment, null, React__default.createElement(Tooltip$1, {
       text: item.oldValue,
       isShow: isShowOldValueTooltip ? undefined : false
     }, React__default.createElement("div", {
-      className: styles$_['vitro-value'],
+      className: styles$$['vitro-value'],
       ref: oldValueRef
     }, item.oldValue)), React__default.createElement("span", {
-      className: styles$_['vitro-separator']
+      className: styles$$['vitro-separator']
     })), React__default.createElement(Tooltip$1, {
       text: item.newValue,
       isShow: isShowNewValueTooltip ? undefined : false
     }, React__default.createElement("div", {
-      className: item.isMessage ? styles$_['vitro-message'] : styles$_['vitro-value'],
+      className: item.isMessage ? styles$$['vitro-message'] : styles$$['vitro-value'],
       ref: newValueRef
     }, item.newValue)));
   }));
@@ -64331,7 +64365,7 @@ var LOCALE$6;
   LOCALE["PLACEHOLDER"] = "app.common.messageInput.placeholder";
 })(LOCALE$6 || (LOCALE$6 = {}));
 
-var styles$$ = {"vitro-message-input":"_message-input_vitro-message-input_3MkcjWD","vitro-control":"_message-input_vitro-control_1PUSjq9","vitro-message":"_message-input_vitro-message_2EJSy-9","vitro-placeholder":"_message-input_vitro-placeholder_1FBfIqN","vitro-button-add-file":"_message-input_vitro-button-add-file_1qdtHHq","vitro-button-send":"_message-input_vitro-button-send_1vktQrZ"};
+var styles$10 = {"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) {
@@ -64382,14 +64416,14 @@ var MessageInput = function MessageInput(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$$['vitro-message-input'],
+    className: styles$10['vitro-message-input'],
     onDrop: props.onDrop
   }, React__default.createElement("div", {
-    className: styles$$['vitro-control']
+    className: styles$10['vitro-control']
   }, !props.isDisabled && React__default.createElement(ScrollBar, {
     isHideScrollX: true
   }, React__default.createElement("div", {
-    className: styles$$['vitro-message'],
+    className: styles$10['vitro-message'],
     ref: inputRef,
     onChange: onChange,
     onKeyDown: onKeyDown,
@@ -64397,17 +64431,17 @@ var MessageInput = function MessageInput(props) {
     onBlur: onBlur,
     contentEditable: true
   }, isShowPlaceholder && React__default.createElement("span", {
-    className: styles$$['vitro-placeholder']
+    className: styles$10['vitro-placeholder']
   }, props.placeholder || localeService.create(LOCALE$6.PLACEHOLDER)))), props.children, props.onAddFile && React__default.createElement("button", {
     onClick: props.onAddFile,
-    className: styles$$['vitro-button-add-file']
+    className: styles$10['vitro-button-add-file']
   })), React__default.createElement("button", {
     onClick: onEnter,
-    className: styles$$['vitro-button-send']
+    className: styles$10['vitro-button-send']
   }));
 };
 
-var styles$10 = {"vitro-image-picker-root":"_image-picker_vitro-image-picker-root_AqOYRhP","vitro-image-picker-dropdown-wrapper":"_image-picker_vitro-image-picker-dropdown-wrapper_8Tr_BBS","vitro-image-picker-defaultImage-wrapper":"_image-picker_vitro-image-picker-defaultImage-wrapper_1BHZ1he","vitro-image-picker-image-wrapper":"_image-picker_vitro-image-picker-image-wrapper_328OVLU","vitro-image-picker-input":"_image-picker_vitro-image-picker-input_12jFFNU","vitro-image-default":"_image-picker_vitro-image-default_LhN4iy6","vitro-image-picker-label-wrapper":"_image-picker_vitro-image-picker-label-wrapper_WRLzUYM","vitro-image-picker-wrapper":"_image-picker_vitro-image-picker-wrapper_dlZyYFL","vitro-required":"_image-picker_vitro-required_2lpwlb0","vitro-error-text":"_image-picker_vitro-error-text_3xviMND"};
+var styles$11 = {"vitro-image-picker-root":"_image-picker_vitro-image-picker-root_AqOYRhP","vitro-image-picker-dropdown-wrapper":"_image-picker_vitro-image-picker-dropdown-wrapper_8Tr_BBS","vitro-image-picker-defaultImage-wrapper":"_image-picker_vitro-image-picker-defaultImage-wrapper_1BHZ1he","vitro-image-picker-image-wrapper":"_image-picker_vitro-image-picker-image-wrapper_328OVLU","vitro-image-picker-input":"_image-picker_vitro-image-picker-input_12jFFNU","vitro-image-default":"_image-picker_vitro-image-default_LhN4iy6","vitro-image-picker-label-wrapper":"_image-picker_vitro-image-picker-label-wrapper_WRLzUYM","vitro-image-picker-wrapper":"_image-picker_vitro-image-picker-wrapper_dlZyYFL","vitro-required":"_image-picker_vitro-required_2lpwlb0","vitro-error-text":"_image-picker_vitro-error-text_3xviMND"};
 
 var ACTION$1;
 (function (ACTION) {
@@ -64426,16 +64460,16 @@ var ImagePicker = function ImagePicker(props) {
   var renderPreview = function renderPreview() {
     if (props.defaultUrl) {
       return React__default.createElement("div", {
-        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$10['vitro-image-picker-image-wrapper']
+        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$11['vitro-image-picker-image-wrapper']
       }, React__default.createElement(Image, {
         defaultUrl: props.defaultUrl,
-        className: props.classNameImage ? props.classNameImage : styles$10['vitro-image-picker-image']
+        className: props.classNameImage ? props.classNameImage : styles$11['vitro-image-picker-image']
       }));
     } else {
       return React__default.createElement("div", {
-        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$10['vitro-image-picker-defaultImage-wrapper']
+        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$11['vitro-image-picker-defaultImage-wrapper']
       }, React__default.createElement("div", {
-        className: styles$10['vitro-image-default']
+        className: styles$11['vitro-image-default']
       }));
     }
   };
@@ -64475,28 +64509,28 @@ var ImagePicker = function ImagePicker(props) {
     return (_props$itemList = props.itemList) !== null && _props$itemList !== void 0 && _props$itemList.length ? result.concat(props.itemList) : result;
   }, [props.itemList, props.defaultUrl]);
   return React__default.createElement("div", {
-    className: styles$10['vitro-image-picker-wrapper']
+    className: styles$11['vitro-image-picker-wrapper']
   }, React__default.createElement("div", {
-    className: styles$10['vitro-image-picker-label-wrapper']
+    className: styles$11['vitro-image-picker-label-wrapper']
   }, props.label ? props.label : '', props.isRequired && React__default.createElement("span", {
-    className: styles$10['vitro-required']
+    className: styles$11['vitro-required']
   }, CTRL.ASTERISK)), React__default.createElement("div", {
-    className: props.classNameRoot ? props.classNameRoot : styles$10['vitro-image-picker-root']
+    className: props.classNameRoot ? props.classNameRoot : styles$11['vitro-image-picker-root']
   }, !props.isReadOnly && React__default.createElement(DropdownButton, {
     itemList: defaultItemList,
-    className: styles$10['vitro-image-picker-dropdown-wrapper']
+    className: styles$11['vitro-image-picker-dropdown-wrapper']
   }), React__default.createElement("input", {
     type: 'file',
-    className: styles$10['vitro-image-picker-input'],
+    className: styles$11['vitro-image-picker-input'],
     ref: inputFileRef,
     onChange: onChange,
     accept: "image/*"
   }), renderPreview()), props.errorMessage && React__default.createElement("span", {
-    className: styles$10['vitro-error-text']
+    className: styles$11['vitro-error-text']
   }, props.errorMessage));
 };
 
-var styles$11 = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","vitro-block":"_criterion_vitro-block_3E9-RXM","vitro-control":"_criterion_vitro-control_2JLaybj","vitro-label":"_criterion_vitro-label_3F6a8dj","vitro-operator-select-container":"_criterion_vitro-operator-select-container_3OkjzXG","vitro-operator-select":"_criterion_vitro-operator-select_1guNlk9","vitro-operator-list":"_criterion_vitro-operator-list_3A2VZsd","vitro-button-cancel":"_criterion_vitro-button-cancel_2C2G0sL","vitro-focus":"_criterion_vitro-focus_3FNLsoN","vitro-error":"_criterion_vitro-error_3pvFrlW","vitro-condition-select":"_criterion_vitro-condition-select_1hTBBg-","vitro-image":"_criterion_vitro-image_1f6DKPL","vitro-condition-list-container":"_criterion_vitro-condition-list-container_ERfumwB","vitro-operator-list-container":"_criterion_vitro-operator-list-container_RgT0R_Z","vitro-condition-list":"_criterion_vitro-condition-list_10UIxJI"};
+var styles$12 = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","vitro-block":"_criterion_vitro-block_3E9-RXM","vitro-control":"_criterion_vitro-control_2JLaybj","vitro-label":"_criterion_vitro-label_3F6a8dj","vitro-operator-select-container":"_criterion_vitro-operator-select-container_3OkjzXG","vitro-operator-select":"_criterion_vitro-operator-select_1guNlk9","vitro-operator-list":"_criterion_vitro-operator-list_3A2VZsd","vitro-button-cancel":"_criterion_vitro-button-cancel_2C2G0sL","vitro-focus":"_criterion_vitro-focus_3FNLsoN","vitro-error":"_criterion_vitro-error_3pvFrlW","vitro-condition-select":"_criterion_vitro-condition-select_1hTBBg-","vitro-image":"_criterion_vitro-image_1f6DKPL","vitro-condition-list-container":"_criterion_vitro-condition-list-container_ERfumwB","vitro-operator-list-container":"_criterion_vitro-operator-list-container_RgT0R_Z","vitro-condition-list":"_criterion_vitro-condition-list_10UIxJI"};
 
 var ROOT_ID = 'root';
 var ConditionSelect = React.forwardRef(function (props, ref) {
@@ -64554,13 +64588,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$11['vitro-condition-list-container'];
+      container.className = styles$12['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$11['vitro-condition-list'],
+        className: styles$12['vitro-condition-list'],
         onBlur: onBlur
       }, props.itemList.map(function (item) {
         return React__default.createElement("li", {
@@ -64569,7 +64603,7 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
           }
         }, item.imageUrl && React__default.createElement(Image, {
           defaultUrl: item.imageUrl,
-          className: styles$11['vitro-image']
+          className: styles$12['vitro-image']
         }), item.text);
       }));
       reactDom.render(content, container);
@@ -64578,12 +64612,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$11['vitro-condition-select']
+    className: styles$12['vitro-condition-select']
   }, React__default.createElement("div", {
     onClick: toggleSelect
   }, condition.imageUrl ? React__default.createElement(Image, {
     defaultUrl: condition.imageUrl,
-    className: styles$11['vitro-image']
+    className: styles$12['vitro-image']
   }) : condition.text)));
 });
 
@@ -64663,13 +64697,13 @@ var Criterion = function Criterion(props) {
     onChange(value);
   };
   var onFocus = function onFocus(e) {
-    setState(styles$11['vitro-focus']);
+    setState(styles$12['vitro-focus']);
     if (componentProps.onFocus) {
       componentProps.onFocus(e);
     }
   };
   var onBlur = function onBlur(e) {
-    setState(componentProps.errorMessage ? styles$11['vitro-error'] : CTRL.EMPTY);
+    setState(componentProps.errorMessage ? styles$12['vitro-error'] : CTRL.EMPTY);
     if (componentProps.onBlur) {
       componentProps.onBlur(e);
     }
@@ -64699,12 +64733,12 @@ var Criterion = function Criterion(props) {
     var root = document.getElementById(ROOT_ID$1);
     if (position && root) {
       var container = document.createElement('div');
-      container.className = styles$11['vitro-operator-list-container'];
+      container.className = styles$12['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$11['vitro-operator-list']
+        className: styles$12['vitro-operator-list']
       }, props.operatorList.map(function (item) {
         return React__default.createElement("li", {
           onClick: function onClick() {
@@ -64717,25 +64751,25 @@ var Criterion = function Criterion(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$11['vitro-criterion-container']
+    className: styles$12['vitro-criterion-container']
   }, React__default.createElement("div", {
-    className: styles$11['vitro-operator-select-container']
+    className: styles$12['vitro-operator-select-container']
   }, props.isShowOperatorSelect && React__default.createElement("div", {
     ref: operatorSelectRef,
-    className: styles$11['vitro-operator-select'],
+    className: styles$12['vitro-operator-select'],
     onClick: toggleOperatorSelect
   }, React__default.createElement("div", null, operator.text))), React__default.createElement("div", {
-    className: styles$11['vitro-control'] + CTRL.SPACE + state
+    className: styles$12['vitro-control'] + CTRL.SPACE + state
   }, React__default.createElement("div", {
     ref: labelRef,
-    className: styles$11['vitro-label']
+    className: styles$12['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$11['vitro-control'],
+    className: styles$12['vitro-control'],
     onBlur: onBlur,
     onFocus: onFocus,
     onChange: onControlChange,
@@ -64747,39 +64781,49 @@ var Criterion = function Criterion(props) {
     onClick: function onClick() {
       return props.onDelete(componentProps.id);
     },
-    className: styles$11['vitro-button-cancel']
+    className: styles$12['vitro-button-cancel']
   }));
 };
 
+var styles$13 = {"vitro-flex-box":"_flex-box_vitro-flex-box_3jGTD6k"};
+
+var FlexBox = function FlexBox(props) {
+  return React__default.createElement("div", Object.assign({}, props, {
+    style: props.gap ? {
+      gridGap: props.gap + UNIT.PX
+    } : {},
+    className: styles$13['vitro-flex-box'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }), props.children);
+};
+
 var LOCALE$8;
 (function (LOCALE) {
-  LOCALE["INPUT_MORE"] = "app.common.search.input.more";
-  LOCALE["EMPTY_PLACEHOLDER"] = "app.common.search.checkboxList.emptyPlaceholder";
+  LOCALE["VALUE_COUNT"] = "app.common.searchInput.valueCount";
+  LOCALE["PLACEHOLDER"] = "app.common.searchInput.placeholder";
 })(LOCALE$8 || (LOCALE$8 = {}));
 
-var styles$12 = {"vitro-control":"_input_vitro-control__btu7j_","vitro-active":"_input_vitro-active_jxhGdE8","vitro-focus":"_input_vitro-focus_3tuxmPs","vitro-button-search":"_input_vitro-button-search_15PeWCS","vitro-search-value-list":"_input_vitro-search-value-list_2I_KVY5","vitro-button-cancel":"_input_vitro-button-cancel_YqNZPj-","vitro-button-settings":"_input_vitro-button-settings_1w9FwYt","vitro-search-value":"_input_vitro-search-value_1ZbcNTJ"};
+var styles$14 = {"vitro-search-input":"_search-input_vitro-search-input_3M9i4Gi","vitro-search-value-list":"_search-input_vitro-search-value-list_1Gqj4bm","vitro-button-cancel":"_search-input_vitro-button-cancel_xqdMNLo","vitro-search-value":"_search-input_vitro-search-value_TJm1BCf"};
 
 var NEW_LINE$1 = '\n';
-var Input$1 = function Input(props) {
+var SearchInput = function SearchInput(props) {
+  var _props$searchCriterio;
   var _useState = React.useState(CTRL.EMPTY),
-    state = _useState[0],
-    setState = _useState[1];
+    value = _useState[0],
+    setValue = _useState[1];
+  var _useState2 = React.useState(CTRL.EMPTY),
+    state = _useState2[0],
+    setState = _useState2[1];
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   var inputRef = React.useRef(null);
-  var onSettingsClick = function onSettingsClick() {
-    if (props.onSettingsClick) {
-      props.onSettingsClick();
-    }
-  };
   var onKeyDown = function onKeyDown(e) {
-    if (e.keyCode === 13) {
+    if (e.keyCode === KEY_CODE.ENTER) {
       e.preventDefault();
       onSubmit();
     }
   };
   var onSubmit = function onSubmit() {
     var value = inputRef.current && inputRef.current.value;
-    if (value) {
+    if (value && inputRef.current && props.onSubmit) {
       props.onSubmit();
       inputRef.current.value = CTRL.EMPTY;
     }
@@ -64788,9 +64832,11 @@ var Input$1 = function Input(props) {
     if (inputRef.current) {
       inputRef.current.value = CTRL.EMPTY;
     }
+    setValue(CTRL.EMPTY);
     props.onCancel();
   };
   var onChange = function onChange(e) {
+    setValue(e.target.value);
     if (props.onChange) {
       props.onChange(e.target.value);
     }
@@ -64800,20 +64846,12 @@ var Input$1 = function Input(props) {
       props.onBlur();
     }
     setState(CTRL.EMPTY);
-    onSubmit();
   };
   var onFocus = function onFocus() {
-    setState(styles$12['vitro-focus']);
     if (props.onFocus) {
       props.onFocus();
     }
-  };
-  var getClassName = function getClassName() {
-    var classList = [styles$12['vitro-control'], props.className || CTRL.EMPTY, state];
-    if (props.isActive) {
-      classList.push(styles$12['vitro-active']);
-    }
-    return classList.join(CTRL.SPACE);
+    setState('vitro-focus');
   };
   var getTextValue = function getTextValue(value) {
     var valueArray = value.valueList.map(function (x) {
@@ -64830,8 +64868,8 @@ var Input$1 = function Input(props) {
     return text;
   };
   var onRemoveValue = function onRemoveValue(valueList) {
-    if (props.onRemoveValue) {
-      var newList = props.valueList;
+    if (props.onRemoveValue && props.searchCriterionList) {
+      var newList = props.searchCriterionList;
       var _loop = function _loop() {
         var value = _step.value;
         newList = newList.filter(function (x) {
@@ -64850,59 +64888,56 @@ var Input$1 = function Input(props) {
     });
     return list.join(NEW_LINE$1);
   };
+  var getClassName = function getClassName() {
+    var classList = [styles$14['vitro-search-input'], props.className || CTRL.EMPTY, state];
+    if (props.isActive) {
+      classList.push('vitro-active');
+    }
+    return classList.join(CTRL.SPACE);
+  };
   var getSelectedValueList = function getSelectedValueList(valueList) {
     var firstValue = valueList[0];
     var list = valueList.slice(1);
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-      className: styles$12['vitro-search-value']
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(FlexBox, {
+      className: styles$14['vitro-search-value']
     }, React__default.createElement("span", null, getTextValue(firstValue)), React__default.createElement("button", {
       onClick: function onClick() {
         return onRemoveValue([firstValue]);
       },
-      className: styles$12['vitro-button-cancel']
+      className: styles$14['vitro-button-cancel']
     })), list.length >= 1 ? React__default.createElement(Tooltip$1, {
       text: getTextValueList(list),
       placement: PLACEMENT.BOTTOM
-    }, React__default.createElement("div", {
-      className: styles$12['vitro-search-value']
-    }, localeService.create(LOCALE$8.INPUT_MORE, {
+    }, React__default.createElement("div", null, React__default.createElement(FlexBox, {
+      className: styles$14['vitro-search-value']
+    }, localeService.create(LOCALE$8.VALUE_COUNT, {
       count: list.length
     }), React__default.createElement("button", {
       onClick: function onClick() {
         return onRemoveValue(list);
       },
-      className: styles$12['vitro-button-cancel']
-    }))) : null);
+      className: styles$14['vitro-button-cancel']
+    })))) : null);
   };
-  var onSearchClick = function onSearchClick() {
-    if (props.isMobileView) {
-      onSettingsClick();
-    } else {
-      onSubmit();
-    }
-  };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+  return React__default.createElement("div", {
     className: getClassName()
-  }, React__default.createElement("button", {
-    className: styles$12['vitro-button-search'] + (props.isSettingsActive ? CTRL.SPACE + styles$12['vitro-active'] : CTRL.EMPTY),
-    onClick: onSearchClick
-  }), !props.isMobileView && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$12['vitro-search-value-list']
-  }, props.valueList.length ? getSelectedValueList(props.valueList) : React__default.createElement("input", {
+  }, React__default.createElement(ImageButton, {
+    className: 'vitro-button-search',
+    onClick: onSubmit
+  }), !props.isMobileView && React__default.createElement(React__default.Fragment, null, React__default.createElement(FlexBox, {
+    className: styles$14['vitro-search-value-list']
+  }, props.searchCriterionList && props.searchCriterionList.length ? getSelectedValueList(props.searchCriterionList) : React__default.createElement("input", {
     type: 'text',
     ref: inputRef,
     onKeyDown: onKeyDown,
     onChange: onChange,
     onFocus: onFocus,
     onBlur: onBlur,
-    placeholder: !props.isActive ? props.placeholder : CTRL.EMPTY
-  })), props.isActive && React__default.createElement(React__default.Fragment, null, props.isShowSettings && React__default.createElement("button", {
-    onClick: onSettingsClick,
-    className: styles$12['vitro-button-settings'] + (props.isSettingsActive ? CTRL.SPACE + styles$12['vitro-active'] : CTRL.EMPTY)
-  }), React__default.createElement("button", {
+    placeholder: !props.isActive ? props.placeholder || localeService.create(LOCALE$8.PLACEHOLDER) : CTRL.EMPTY
+  })), props.children, value || (_props$searchCriterio = props.searchCriterionList) !== null && _props$searchCriterio !== void 0 && _props$searchCriterio.length || props.isActive ? React__default.createElement("button", {
     onClick: onCancel,
-    className: styles$12['vitro-button-cancel']
-  })))));
+    className: styles$14['vitro-button-cancel']
+  }) : null));
 };
 
 var FieldIterator = React.forwardRef(function (props, ref) {
@@ -65089,7 +65124,7 @@ var FieldIterator = React.forwardRef(function (props, ref) {
   })));
 });
 
-var styles$13 = {"vitro-search":"_search_vitro-search_QkJksC_","vitro-active":"_search_vitro-active_1HhQOCR","vitro-settings-dialog":"_search_vitro-settings-dialog_1_c5bIg","vitro-filter":"_search_vitro-filter_2n-Y-mS","vitro-add-field":"_search_vitro-add-field_2hHt1Z2","vitro-add-field-button":"_search_vitro-add-field-button_30hdXYn","vitro-add-field-dialog":"_search_vitro-add-field-dialog_3gC92SF","vitro-footer":"_search_vitro-footer_1-ya4xk","vitro-button-cancel":"_search_vitro-button-cancel_1M8UkMM"};
+var styles$15 = {"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","vitro-button-settings":"_search_vitro-button-settings_oJCn__t"};
 
 var Filter = function Filter(props) {
   var _useState = React.useState(null),
@@ -65147,7 +65182,7 @@ var Filter = function Filter(props) {
     props.onChange(changedFieldValueMap);
   };
   return React__default.createElement("div", {
-    className: styles$13['vitro-filter']
+    className: styles$15['vitro-filter']
   }, componentMap && React__default.createElement(FieldIterator, {
     fieldList: props.fieldList,
     fieldValueMap: fieldValueMap,
@@ -65158,19 +65193,57 @@ var Filter = function Filter(props) {
   }));
 };
 
-var styles$14 = {"vitro-checkbox-list":"_checkbox-list_vitro-checkbox-list_1iZSkkv","vitro-control":"_checkbox-list_vitro-control_cxgm4cj","vitro-checkbox":"_checkbox-list_vitro-checkbox_1EqsnoQ"};
+var LOCALE$9;
+(function (LOCALE) {
+  LOCALE["EMPTY_PLACEHOLDER"] = "app.common.searchValueList.emptyPlaceholder";
+})(LOCALE$9 || (LOCALE$9 = {}));
+
+var styles$16 = {"vitro-search-input-container":"_search-value-list_vitro-search-input-container_167CEqB","vitro-empty-placeholder":"_search-value-list_vitro-empty-placeholder_2f08lDK"};
+
+var SearchValueList = function SearchValueList(props) {
+  var _useState = React.useState(props.itemList),
+    itemList = _useState[0],
+    setItemList = _useState[1];
+  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
+  React.useEffect(function () {
+    setItemList(props.itemList);
+  }, [props.itemList]);
+  var onSearchCancel = function onSearchCancel() {
+    setItemList(props.itemList);
+  };
+  var onInputChange = function onInputChange(text) {
+    if (text) {
+      setItemList(function (prevState) {
+        return prevState.filter(function (item) {
+          return props.filterValueTemplate(item).toLowerCase().includes(text.toLowerCase());
+        });
+      });
+    } else {
+      onSearchCancel();
+    }
+  };
+  return React__default.createElement("div", {
+    className: props.className || CTRL.EMPTY
+  }, React__default.createElement("div", {
+    className: styles$16['vitro-search-input-container']
+  }, React__default.createElement(SearchInput, {
+    onCancel: onSearchCancel,
+    onChange: onInputChange,
+    className: props.inputClassName,
+    isMobileView: Boolean(props.isMobileView)
+  })), React__default.createElement(ScrollBar, null, props.children, itemList.length ? itemList.map(function (item) {
+    return props.valueTemplate(item);
+  }) : React__default.createElement("span", {
+    className: styles$16['vitro-empty-placeholder']
+  }, props.emptyPlaceHolder || localeService.create(LOCALE$9.EMPTY_PLACEHOLDER))));
+};
+
+var styles$17 = {"vitro-checkbox-list":"_checkbox-list_vitro-checkbox-list_1iZSkkv","vitro-checkbox":"_checkbox-list_vitro-checkbox_1EqsnoQ"};
 
 var CheckboxList = function CheckboxList(props) {
   var _useState = React.useState(props.itemList),
     itemList = _useState[0],
     setItemList = _useState[1];
-  var _useState2 = React.useState([]),
-    searchItemList = _useState2[0],
-    setSearchItemList = _useState2[1];
-  var _useState3 = React.useState(false),
-    isShowSearchResult = _useState3[0],
-    setIsShowSearchResult = _useState3[1];
-  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   var _onChange = function onChange(value, id) {
     setItemList(function (prevState) {
       return prevState.map(function (item) {
@@ -65192,17 +65265,6 @@ var CheckboxList = function CheckboxList(props) {
       return item.id;
     });
   };
-  var onSearchCancel = function onSearchCancel() {
-    setSearchItemList([]);
-    setIsShowSearchResult(false);
-  };
-  var onInputChange = function onInputChange(text) {
-    var valueList = props.itemList.filter(function (item) {
-      return item.name.toLowerCase().includes(text.toLowerCase());
-    });
-    setSearchItemList(valueList);
-    setIsShowSearchResult(true);
-  };
   var getCheckbox = function getCheckbox(item) {
     return React__default.createElement(Checkbox, {
       label: item.name,
@@ -65211,27 +65273,21 @@ var CheckboxList = function CheckboxList(props) {
       onChange: function onChange(value, name) {
         return _onChange(value, item.id);
       },
-      className: styles$14['vitro-checkbox']
+      className: styles$17['vitro-checkbox']
     });
   };
+  var filterValueTemplate = function filterValueTemplate(item) {
+    return item.name;
+  };
   return React__default.createElement("div", {
-    className: styles$14['vitro-checkbox-list']
-  }, React__default.createElement(Input$1, {
-    valueList: [],
-    onCancel: onSearchCancel,
-    onChange: onInputChange,
-    onSubmit: onInputChange,
-    isActive: false,
-    className: styles$14['vitro-control'],
-    isMobileView: false
-  }), React__default.createElement(ScrollBar, null, isShowSearchResult ? searchItemList.length ? searchItemList.map(function (item) {
-    return getCheckbox(item);
-  }) : React__default.createElement("span", null, localeService.create(LOCALE$8.EMPTY_PLACEHOLDER)) : itemList.map(function (item) {
-    return getCheckbox(item);
-  })));
+    className: styles$17['vitro-checkbox-list']
+  }, React__default.createElement(SearchValueList, {
+    itemList: props.itemList,
+    valueTemplate: getCheckbox,
+    filterValueTemplate: filterValueTemplate
+  }));
 };
 
-var ESC_KEY_CODE = 27;
 var CONDITION_CONTAINS = 11;
 var Search = function Search(props) {
   var _useState = React.useState(false),
@@ -65297,7 +65353,7 @@ var Search = function Search(props) {
   }, [window.innerWidth]);
   React.useEffect(function () {
     if (selectedSearchCriterionList.length) {
-      setState(styles$13['vitro-active']);
+      setState(styles$15['vitro-active']);
     }
   }, [selectedSearchCriterionList]);
   React.useEffect(function () {
@@ -65310,7 +65366,7 @@ var Search = function Search(props) {
     }
   }, [props.searchCriterionList]);
   var handleResize = function handleResize() {
-    window.innerWidth < MOBILE_VIEW.WIDTH ? setIsMobileView(true) : setIsMobileView(false);
+    window.innerWidth < exports.MOBILE_VIEW.WIDTH ? setIsMobileView(true) : setIsMobileView(false);
   };
   var onSettingsClick = function onSettingsClick() {
     setIsShowDialog(!isShowDialog);
@@ -65437,7 +65493,7 @@ var Search = function Search(props) {
     setSearchCriterionList([criterion]);
   };
   var onEscClick = function onEscClick(e) {
-    if (e.keyCode === ESC_KEY_CODE) {
+    if (e.keyCode === KEY_CODE.ESC) {
       closeSettings();
     }
   };
@@ -65447,7 +65503,7 @@ var Search = function Search(props) {
     }
   };
   var onFocusInput = function onFocusInput() {
-    setState(styles$13['vitro-active']);
+    setState(styles$15['vitro-active']);
   };
   var onRemoveValue = function onRemoveValue(valueList) {
     setSearchCriterionList(valueList);
@@ -65455,22 +65511,23 @@ var Search = function Search(props) {
   };
   return React__default.createElement("div", {
     ref: searchRef,
-    className: styles$13['vitro-search'] + CTRL.SPACE + state
-  }, React__default.createElement(Input$1, {
-    valueList: selectedSearchCriterionList,
-    onSettingsClick: onSettingsClick,
+    className: styles$15['vitro-search'] + CTRL.SPACE + state
+  }, React__default.createElement(SearchInput, {
+    searchCriterionList: selectedSearchCriterionList,
     onCancel: onCancel,
     onSubmit: onSubmit,
     onRemoveValue: onRemoveValue,
     onChange: onInputChange,
     placeholder: props.inputPlaceholder,
-    isSettingsActive: isShowDialog,
     onFocus: onFocusInput,
     isActive: state || isShowDialog ? true : false,
     isMobileView: isMobileView,
-    isShowSettings: true
-  }), isShowDialog && React__default.createElement("div", {
-    className: styles$13['vitro-settings-dialog']
+    className: styles$15['vitro-control']
+  }, (state || isShowDialog) && React__default.createElement("button", {
+    onClick: onSettingsClick,
+    className: styles$15['vitro-button-settings'] + (isShowDialog ? CTRL.SPACE + styles$15['vitro-active'] : CTRL.EMPTY)
+  })), isShowDialog && React__default.createElement("div", {
+    className: styles$15['vitro-settings-dialog']
   }, React__default.createElement(Filter, {
     fieldList: filterFieldList,
     valueList: selectedSearchCriterionList,
@@ -65481,24 +65538,24 @@ var Search = function Search(props) {
     getConditionList: props.getConditionList,
     getDefaultCondition: props.getDefaultCondition
   }), isShowAddFieldButton && React__default.createElement("div", {
-    className: styles$13['vitro-add-field']
+    className: styles$15['vitro-add-field']
   }, React__default.createElement(Button$2, {
     text: props.labelAddField,
     onClick: onAddField,
-    className: styles$13['vitro-add-field-button']
+    className: styles$15['vitro-add-field-button']
   }), isShowAddFieldDialog && React__default.createElement("div", {
     ref: addFieldDialogRef,
-    className: styles$13['vitro-add-field-dialog']
+    className: styles$15['vitro-add-field-dialog']
   }, React__default.createElement(CheckboxList, {
     itemList: checkboxFieldList,
     onChange: onFieldListChange,
     isAllSelected: props.isAllFieldsVisible
   }))), React__default.createElement("div", {
-    className: styles$13['vitro-footer']
+    className: styles$15['vitro-footer']
   }, React__default.createElement(Button$2, {
     text: props.labelCancel,
     onClick: closeSettings,
-    className: styles$13['vitro-button-cancel']
+    className: styles$15['vitro-button-cancel']
   }), React__default.createElement(Button$2, {
     text: props.labelSearch,
     onClick: onSubmit
@@ -65538,7 +65595,7 @@ var Splitter = function Splitter(props) {
   }, props.children);
 };
 
-var styles$15 = {"vitro-route-item":"_route-item_vitro-route-item_bBCgBZG","vitro-route-item-body":"_route-item_vitro-route-item-body_1_1fjOZ","vitro-route-item-content":"_route-item_vitro-route-item-content_2CcLogk","vitro-button-collapse":"_route-item_vitro-button-collapse_1kVB5Vo","vitro-button-expand":"_route-item_vitro-button-expand_3IuABa1","vitro-button-hide-comment":"_route-item_vitro-button-hide-comment_2CiY-Ch","vitro-button-show-comment":"_route-item_vitro-button-show-comment_DJt2SLC","vitro-avatar":"_route-item_vitro-avatar_3Dypnmz","vitro-date":"_route-item_vitro-date_3ojnKSb","vitro-route-item-header":"_route-item_vitro-route-item-header_y69bLwZ","vitro-flex":"_route-item_vitro-flex_3ebkqZ9","vitro-comment":"_route-item_vitro-comment_2K7RwrZ","vitro-status-color":"_route-item_vitro-status-color_VgXzXKD"};
+var styles$18 = {"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),
@@ -65548,42 +65605,42 @@ var RouteItem = function RouteItem(props) {
     isShowComment = _useState2[0],
     setIsShowComment = _useState2[1];
   return React__default.createElement("div", {
-    className: styles$15['vitro-route-item']
+    className: styles$18['vitro-route-item']
   }, props.children ? React__default.createElement("button", {
-    className: isExpanded ? styles$15['vitro-button-collapse'] : styles$15['vitro-button-expand'],
+    className: isExpanded ? styles$18['vitro-button-collapse'] : styles$18['vitro-button-expand'],
     onClick: function onClick() {
       return setIsExpanded(!isExpanded);
     }
   }) : null, React__default.createElement("div", {
-    className: styles$15['vitro-route-item-content']
+    className: styles$18['vitro-route-item-content']
   }, props.userName && props.status && React__default.createElement("div", {
-    className: styles$15['vitro-route-item-header']
+    className: styles$18['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$15['vitro-avatar']
+    className: styles$18['vitro-avatar']
   }), props.userName), React__default.createElement("div", {
-    className: styles$15['vitro-date']
+    className: styles$18['vitro-date']
   }, props.date)), React__default.createElement("div", null, React__default.createElement("div", null, props.statusColor && React__default.createElement("div", {
-    className: styles$15['vitro-status-color'],
+    className: styles$18['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$15['vitro-route-item-body']
+    className: styles$18['vitro-route-item-body']
   }, React__default.createElement("div", {
-    className: styles$15['vitro-flex']
+    className: styles$18['vitro-flex']
   }, React__default.createElement("span", null, props.name), props.comment && React__default.createElement("button", {
-    className: isShowComment ? styles$15['vitro-button-hide-comment'] : styles$15['vitro-button-show-comment'],
+    className: isShowComment ? styles$18['vitro-button-hide-comment'] : styles$18['vitro-button-show-comment'],
     onClick: function onClick() {
       return setIsShowComment(!isShowComment);
     }
   })), isShowComment && props.comment && React__default.createElement("div", {
-    className: styles$15['vitro-comment']
+    className: styles$18['vitro-comment']
   }, props.comment)), isExpanded && React__default.createElement("div", {
-    className: styles$15['vitro-route-item-child']
+    className: styles$18['vitro-route-item-child']
   }, props.children)));
 };
 
@@ -65691,7 +65748,7 @@ var BimViewer = function BimViewer(props) {
   });
 };
 
-var styles$16 = {"vitro-page":"_page-layout_vitro-page_GzZ3agH"};
+var styles$19 = {"vitro-page":"_page-layout_vitro-page_GzZ3agH"};
 
 var PageLayout = function PageLayout(props) {
   var getClassName = function getClassName(sidebar) {
@@ -65705,7 +65762,7 @@ var PageLayout = function PageLayout(props) {
     return CTRL.SPACE + classNameArr.join(CTRL.SPACE);
   };
   return React__default.createElement("div", {
-    className: styles$16['vitro-page'] + getClassName(props.sidebar) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$19['vitro-page'] + getClassName(props.sidebar) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     id: 'vitro-page'
   }, props.children);
 };
@@ -65720,7 +65777,7 @@ var HeaderConstants = {
     get LOCAL_STORAGE_KEY () { return LOCAL_STORAGE_KEY; }
 };
 
-var styles$17 = {"vitro-header":"_header_vitro-header_ta9aLJn"};
+var styles$1a = {"vitro-header":"_header_vitro-header_ta9aLJn"};
 
 var onChangeSidebarMode = function onChangeSidebarMode() {};
 var Header = function Header(props) {
@@ -65728,7 +65785,7 @@ var Header = function Header(props) {
   var localStorageService = inversifyReact.useInjection(SERVICE.LOCAL_STORAGE);
   var allowedSidebarFullMode = props.cfgSidebar && props.cfgSidebar.overflowItemList && props.cfgSidebar.overflowItemList.length > 0;
   var mobileView = function mobileView() {
-    return window.innerWidth <= MOBILE_VIEW.WIDTH;
+    return window.innerWidth <= exports.MOBILE_VIEW.WIDTH;
   };
   onChangeSidebarMode = function onChangeSidebarMode() {
     var newMode = props.sidebar < MODE.PINNED ? props.sidebar + MODE.TOGGLED_HOVERED : MODE.TOGGLED_PINNED;
@@ -65763,44 +65820,44 @@ var Header = function Header(props) {
     }
   }, [props.sidebar]);
   return React__default.createElement("div", {
-    className: styles$17['vitro-header'],
+    className: styles$1a['vitro-header'],
     id: 'vitro-header',
     ref: ref
   }, props.children);
 };
 
-var styles$18 = {"vitro-nav-bar-sidebar-button":"_header-nav-bar-sidebar-button_vitro-nav-bar-sidebar-button_3IZcIOc"};
+var styles$1b = {"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$18['vitro-nav-bar-sidebar-button'],
+    className: styles$1b['vitro-nav-bar-sidebar-button'],
     onClick: props.onClick
   });
 };
 
-var styles$19 = {"vitro-nav-bar":"_header-nav-bar_vitro-nav-bar_EuyFIk8"};
+var styles$1c = {"vitro-nav-bar":"_header-nav-bar_vitro-nav-bar_EuyFIk8"};
 
 var HeaderNavBar = function HeaderNavBar(props) {
   return React__default.createElement("nav", {
-    className: styles$19['vitro-nav-bar'] + CTRL.SPACE + ['navbar', 'navbar-expand-lg', 'navbar-light'].join(CTRL.SPACE)
+    className: styles$1c['vitro-nav-bar'] + CTRL.SPACE + ['navbar', 'navbar-expand-lg', 'navbar-light'].join(CTRL.SPACE)
   }, React__default.createElement(SidebarButton, {
     onClick: onChangeSidebarMode
   }), props.children);
 };
 
-var styles$1a = {"vitro-nav-service":"_header-nav-service_vitro-nav-service_1-i4GOh"};
+var styles$1d = {"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$1a['vitro-nav-service']
+    className: styles$1d['vitro-nav-service']
   }, React__default.createElement("div", {
     className: logoStyles['vitro-customer-logo']
   }), props.children);
 };
 
-var styles$1b = {"vitro-product-title":"_product-title_vitro-product-title_2gZcA5j"};
+var styles$1e = {"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, {
@@ -65810,7 +65867,7 @@ var ProductTitle = function ProductTitle(props) {
   if (props.href) {
     return React__default.createElement("a", {
       href: props.href,
-      className: styles$1b['vitro-product-title'],
+      className: styles$1e['vitro-product-title'],
       title: props.imageCaption
     }, content);
   }
@@ -65825,16 +65882,16 @@ var ProductTitle = function ProductTitle(props) {
   };
   return React__default.createElement("a", {
     onClick: onClick,
-    className: styles$1b['vitro-product-title'],
+    className: styles$1e['vitro-product-title'],
     title: props.imageCaption
   }, content);
 };
 
-var styles$1c = {"vitro-right":"_right-align-control-group_vitro-right_2vnd6R7"};
+var styles$1f = {"vitro-right":"_right-align-control-group_vitro-right_2vnd6R7"};
 
 var RightAlignControlGroup = function RightAlignControlGroup(props) {
   return React__default.createElement("div", {
-    className: styles$1c['vitro-right']
+    className: styles$1f['vitro-right']
   }, props.children);
 };
 
@@ -65844,32 +65901,32 @@ var LeftAlignControlGroup = function LeftAlignControlGroup(props) {
   }, props.children);
 };
 
-var styles$1d = {"vitro-center":"_center-align-control-group_vitro-center_3SHmVN-"};
+var styles$1g = {"vitro-center":"_center-align-control-group_vitro-center_3SHmVN-"};
 
 var CenterAlignControlGroup = function CenterAlignControlGroup(props) {
   return React__default.createElement("div", {
-    className: styles$1d['vitro-center']
+    className: styles$1g['vitro-center']
   }, props.children);
 };
 
-var styles$1e = {"vitro-main":"_main_vitro-main_Kk2JMBF"};
+var styles$1h = {"vitro-main":"_main_vitro-main_Kk2JMBF"};
 
 var Main = function Main(props) {
   return React__default.createElement("div", {
-    className: styles$1e['vitro-main'],
+    className: styles$1h['vitro-main'],
     id: 'vitro-main'
   }, props.children);
 };
 
-var styles$1f = {"vitro-table-view-detail":"_table-view-detail_vitro-table-view-detail_zxwp4XX"};
+var styles$1i = {"vitro-table-view-detail":"_table-view-detail_vitro-table-view-detail_zxwp4XX"};
 
 var TableViewDetail = function TableViewDetail(props) {
   return React__default.createElement("div", {
-    className: styles$1f['vitro-table-view-detail']
+    className: styles$1i['vitro-table-view-detail']
   }, props.children);
 };
 
-var styles$1g = {"vitro-title":"_expand-control-group_vitro-title_3nqqfyQ","vitro-expand-collapse-button":"_expand-control-group_vitro-expand-collapse-button_hBX5TTj","vitro-expand-control-group":"_expand-control-group_vitro-expand-control-group_1qSUMoN","vitro-content":"_expand-control-group_vitro-content_2UPEUhm","vitro-display-none":"_expand-control-group_vitro-display-none_Zs_5rQL","vitro-right":"_expand-control-group_vitro-right_jD5r2aS","vitro-button-collapse":"_expand-control-group_vitro-button-collapse_14wEdB1","vitro-button-expand":"_expand-control-group_vitro-button-expand_bwV3dXl"};
+var styles$1j = {"vitro-title":"_expand-control-group_vitro-title_3nqqfyQ","vitro-expand-collapse-button":"_expand-control-group_vitro-expand-collapse-button_hBX5TTj","vitro-expand-control-group":"_expand-control-group_vitro-expand-control-group_1qSUMoN","vitro-content":"_expand-control-group_vitro-content_2UPEUhm","vitro-display-none":"_expand-control-group_vitro-display-none_Zs_5rQL","vitro-right":"_expand-control-group_vitro-right_jD5r2aS","vitro-button-collapse":"_expand-control-group_vitro-button-collapse_14wEdB1","vitro-button-expand":"_expand-control-group_vitro-button-expand_bwV3dXl"};
 
 var ExpandControlGroup = function ExpandControlGroup(props) {
   var _useState = React.useState(props.isOpen),
@@ -65880,20 +65937,20 @@ var ExpandControlGroup = function ExpandControlGroup(props) {
     props.onClick && props.onClick();
   };
   return React__default.createElement("div", {
-    className: styles$1g['vitro-expand-control-group']
+    className: styles$1j['vitro-expand-control-group']
   }, React__default.createElement("div", {
-    className: styles$1g['vitro-title'],
+    className: styles$1j['vitro-title'],
     onClick: onClick
   }, React__default.createElement(ExpandCollapseButton, {
     isExpanded: isOpen,
     onClick: onClick,
-    className: styles$1g['vitro-expand-collapse-button'] + (props.isRight ? CTRL.SPACE + styles$1g['vitro-right'] : CTRL.EMPTY)
+    className: styles$1j['vitro-expand-collapse-button'] + (props.isRight ? CTRL.SPACE + styles$1j['vitro-right'] : CTRL.EMPTY)
   }), props.title), React__default.createElement("div", {
-    className: styles$1g['vitro-content'] + (isOpen ? CTRL.EMPTY : CTRL.SPACE + styles$1g['vitro-display-none'])
+    className: styles$1j['vitro-content'] + (isOpen ? CTRL.EMPTY : CTRL.SPACE + styles$1j['vitro-display-none'])
   }, props.children));
 };
 
-var styles$1h = {"vitro-control":"_radio_vitro-control_1pRRp6K","vitro-radio-content":"_radio_vitro-radio-content_2iXhEPK","vitro-disabled":"_radio_vitro-disabled_2JSpn9-","vitro-label":"_radio_vitro-label_21dXFJN","vitro-left-label":"_radio_vitro-left-label_3BbOjIR"};
+var styles$1k = {"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);
@@ -65917,14 +65974,14 @@ var Radio = React.forwardRef(function (props, ref) {
       props.onChange(props.value, e);
     }
   };
-  var className = styles$1h['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$1h['vitro-left-label'] : CTRL.EMPTY) + CTRL.SPACE + (props.isDisabled ? styles$1h['vitro-disabled'] : CTRL.EMPTY) + CTRL.SPACE + (props.className || CTRL.EMPTY);
+  var className = styles$1k['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$1k['vitro-left-label'] : CTRL.EMPTY) + CTRL.SPACE + (props.isDisabled ? styles$1k['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$1h['vitro-label']
+    className: styles$1k['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$1h['vitro-radio-content']
+    className: styles$1k['vitro-radio-content']
   }, React__default.createElement("input", {
     ref: radioRef,
     type: 'radio',
@@ -65936,21 +65993,21 @@ var Radio = React.forwardRef(function (props, ref) {
     onChange: onChange
   }), props.labelPosition !== POSITION.LEFT && React__default.createElement(Label, {
     text: props.label,
-    className: styles$1h['vitro-label']
+    className: styles$1k['vitro-label']
   })));
 });
 
-var LOCALE$9;
+var LOCALE$a;
 (function (LOCALE) {
   LOCALE["TOOLTIP_EDIT"] = "app.common.linkInput.tooltip.edit";
   LOCALE["TOOLTIP_OPEN"] = "app.common.linkInput.tooltip.open";
-})(LOCALE$9 || (LOCALE$9 = {}));
+})(LOCALE$a || (LOCALE$a = {}));
 
 var TARGET$1 = function TARGET() {};
 TARGET$1.BLANK = '_blank';
 TARGET$1.SELF = '_self';
 
-var styles$1i = {"vitro-link-input":"_link-input_vitro-link-input_1FBo8kO","vitro-edit-mode":"_link-input_vitro-edit-mode_2HhUoeO","vitro-read-only":"_link-input_vitro-read-only_AG9_cYJ","vitro-control":"_link-input_vitro-control_1MGkxWi","vitro-edit-button":"_link-input_vitro-edit-button_1PMQnWv"};
+var styles$1l = {"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),
@@ -66020,11 +66077,11 @@ var LinkInput = React.forwardRef(function (props, ref) {
       link.remove();
     }
   };
-  var className = styles$1i['vitro-link-input'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY) + (props.isReadOnly ? CTRL.SPACE + styles$1i['vitro-read-only'] : CTRL.EMPTY) + (isEditMode ? CTRL.SPACE + styles$1i['vitro-edit-mode'] : CTRL.EMPTY);
+  var className = styles$1l['vitro-link-input'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY) + (props.isReadOnly ? CTRL.SPACE + styles$1l['vitro-read-only'] : CTRL.EMPTY) + (isEditMode ? CTRL.SPACE + styles$1l['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
+    text: !isEditMode && value.url ? localeService.create(LOCALE$a.TOOLTIP_OPEN) : CTRL.EMPTY
   }, React__default.createElement("div", {
     onMouseDown: onMouseDown
   }, React__default.createElement(Input, {
@@ -66039,11 +66096,11 @@ var LinkInput = React.forwardRef(function (props, ref) {
     isRequired: props.isRequired,
     isError: props.isError,
     isReadOnly: props.isReadOnly ? true : !isEditMode,
-    className: styles$1i['vitro-control']
+    className: styles$1l['vitro-control']
   }))), !props.isReadOnly && !isEditMode && React__default.createElement(ImageButton, {
     onClick: onClickEditButton,
-    tooltipText: localeService.create(LOCALE$9.TOOLTIP_EDIT),
-    className: styles$1i['vitro-edit-button']
+    tooltipText: localeService.create(LOCALE$a.TOOLTIP_EDIT),
+    className: styles$1l['vitro-edit-button']
   }));
 });
 
@@ -66086,7 +66143,7 @@ var Overlay$2 = React.forwardRef(function (props, ref) {
   }, props.children));
 });
 
-var LOCALE$a;
+var LOCALE$b;
 (function (LOCALE) {
   LOCALE["TITLE"] = "app.common.systemExceptionDialog.title";
   LOCALE["SUBTITLE"] = "app.common.systemExceptionDialog.subtitle";
@@ -66097,11 +66154,11 @@ var LOCALE$a;
   LOCALE["SETTING_EXCEPTION_TEXT"] = "detailedExceptionText";
   LOCALE["SETTING_USER_NAME"] = "userName";
   LOCALE["SETTING_SYSTEM_INFO"] = "systemInformation";
-})(LOCALE$a || (LOCALE$a = {}));
+})(LOCALE$b || (LOCALE$b = {}));
 
-var styles$1j = {"vitro-system-exception-dialog":"_system-exception-dialog_vitro-system-exception-dialog_2UVdbuB","vitro-image":"_system-exception-dialog_vitro-image_XG5PD8h","vitro-exception":"_system-exception-dialog_vitro-exception_2bLGF01","vitro-scrollbar-content":"_system-exception-dialog_vitro-scrollbar-content_2sob8Xl","vitro-label":"_system-exception-dialog_vitro-label_1Nbb_It","vitro-input":"_system-exception-dialog_vitro-input_262484M","vitro-flex":"_system-exception-dialog_vitro-flex_EHka5VC","vitro-settings-list":"_system-exception-dialog_vitro-settings-list_6N3QiPa","vitro-checkbox":"_system-exception-dialog_vitro-checkbox_354NjHR"};
+var styles$1m = {"vitro-system-exception-dialog":"_system-exception-dialog_vitro-system-exception-dialog_2UVdbuB","vitro-image":"_system-exception-dialog_vitro-image_XG5PD8h","vitro-exception":"_system-exception-dialog_vitro-exception_2bLGF01","vitro-scrollbar-content":"_system-exception-dialog_vitro-scrollbar-content_2sob8Xl","vitro-label":"_system-exception-dialog_vitro-label_1Nbb_It","vitro-input":"_system-exception-dialog_vitro-input_262484M","vitro-flex":"_system-exception-dialog_vitro-flex_EHka5VC","vitro-settings-list":"_system-exception-dialog_vitro-settings-list_6N3QiPa","vitro-checkbox":"_system-exception-dialog_vitro-checkbox_354NjHR"};
 
-var settingsList = [LOCALE$a.SETTING_SCREENSHOT, LOCALE$a.SETTING_EXCEPTION_TEXT, LOCALE$a.SETTING_USER_NAME, LOCALE$a.SETTING_SYSTEM_INFO];
+var settingsList = [LOCALE$b.SETTING_SCREENSHOT, LOCALE$b.SETTING_EXCEPTION_TEXT, LOCALE$b.SETTING_USER_NAME, LOCALE$b.SETTING_SYSTEM_INFO];
 var SystemExceptionDialog = function SystemExceptionDialog(props) {
   var _useState = React.useState(false),
     isMobileView = _useState[0],
@@ -66130,7 +66187,7 @@ var SystemExceptionDialog = function SystemExceptionDialog(props) {
     }
   };
   var getCheckboxLabel = function getCheckboxLabel(key) {
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement("span", null, localeService.create(LOCALE$a.ACTION_INCLUDE) + CTRL.SPACE), React__default.createElement("span", null, localeService.create(LOCALE$a.SETTING + CTRL.DOT + key)));
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement("span", null, localeService.create(LOCALE$b.ACTION_INCLUDE) + CTRL.SPACE), React__default.createElement("span", null, localeService.create(LOCALE$b.SETTING + CTRL.DOT + key)));
   };
   var onChangeSetting = function onChangeSetting(value, name) {
     var newData = data;
@@ -66138,52 +66195,245 @@ var SystemExceptionDialog = function SystemExceptionDialog(props) {
     setData(newData);
   };
   var updateIsMobileView = function updateIsMobileView() {
-    setIsMobileView(window.innerWidth < MOBILE_VIEW.WIDTH);
+    setIsMobileView(window.innerWidth < exports.MOBILE_VIEW.WIDTH);
   };
   var buttonList = [{
     onClick: onConfirm,
-    text: props.labelConfirm || localeService.create(LOCALE$a.ACTION_SEND)
+    text: props.labelConfirm || localeService.create(LOCALE$b.ACTION_SEND)
   }];
   var hiddenContent = React__default.createElement("div", {
-    className: styles$1j['vitro-settings-list']
+    className: styles$1m['vitro-settings-list']
   }, settingsList.map(function (name, index) {
     return React__default.createElement("div", {
       key: index,
-      className: styles$1j['vitro-flex']
+      className: styles$1m['vitro-flex']
     }, React__default.createElement(Checkbox, {
       label: CTRL.EMPTY,
       name: name,
       value: true,
       onChange: onChangeSetting,
-      className: styles$1j['vitro-checkbox']
+      className: styles$1m['vitro-checkbox']
     }), getCheckboxLabel(name));
   }));
   return React__default.createElement(Dialog, {
-    title: localeService.create(LOCALE$a.TITLE),
-    subtitle: isMobileView ? CTRL.EMPTY : localeService.create(LOCALE$a.SUBTITLE),
+    title: localeService.create(LOCALE$b.TITLE),
+    subtitle: isMobileView ? CTRL.EMPTY : localeService.create(LOCALE$b.SUBTITLE),
     image: React__default.createElement("div", {
-      className: styles$1j['vitro-image']
+      className: styles$1m['vitro-image']
     }),
     onClose: props.onCancel,
     buttonList: buttonList,
     labelClose: props.labelClose,
-    className: styles$1j['vitro-system-exception-dialog'],
+    className: styles$1m['vitro-system-exception-dialog'],
     hiddenContent: hiddenContent,
     isDismissible: true
   }, React__default.createElement(DialogContent, null, isMobileView && React__default.createElement(Label, {
-    text: localeService.create(LOCALE$a.SUBTITLE),
-    className: styles$1j['vitro-label']
+    text: localeService.create(LOCALE$b.SUBTITLE),
+    className: styles$1m['vitro-label']
   }), React__default.createElement(Input, {
     ref: inputRef,
-    className: styles$1j['vitro-input'],
+    className: styles$1m['vitro-input'],
     isMultiline: true
   }), React__default.createElement("div", {
-    className: styles$1j['vitro-exception']
+    className: styles$1m['vitro-exception']
   }, React__default.createElement(ScrollBar, {
-    contentClassName: styles$1j['vitro-scrollbar-content']
+    contentClassName: styles$1m['vitro-scrollbar-content']
   }, props.stackTrace))));
 };
 
+var styles$1n = {"vitro-star-button":"_star-button_vitro-star-button_1_mQ_Gq","vitro-hidden":"_star-button_vitro-hidden_oRKUkzt","vitro-active":"_star-button_vitro-active_2UV6u5C"};
+
+var StarButton = function StarButton(props) {
+  var _useState = React.useState(props.isActive || false),
+    isActive = _useState[0],
+    setIsActive = _useState[1];
+  React.useEffect(function () {
+    setIsActive(props.isActive || false);
+  }, [props.isActive]);
+  var onClick = function onClick(e) {
+    e.stopPropagation();
+    var newVal = !isActive;
+    setIsActive(newVal);
+    props.onChange(newVal);
+  };
+  return React__default.createElement("button", {
+    onClick: onClick,
+    className: styles$1n['vitro-star-button'] + (isActive ? CTRL.SPACE + styles$1n['vitro-active'] : CTRL.EMPTY) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  });
+};
+
+var styles$1o = {"vitro-item":"_site-item_vitro-item_1eSpRGl","vitro-active":"_site-item_vitro-active_1d0nDLb","vitro-name":"_site-item_vitro-name_141-LTn","vitro-image":"_site-item_vitro-image_3wrW9q4","vitro-default-image":"_site-item_vitro-default-image_fcWWNwv","vitro-hidden":"_site-item_vitro-hidden_d6n2ocz","vitro-mobile-view":"_site-item_vitro-mobile-view_3bXuBr6"};
+
+var SiteItem = function SiteItem(props) {
+  var _useState = React.useState(props.isStarActive || false),
+    isShowStar = _useState[0],
+    setIsShowStar = _useState[1];
+  React.useEffect(function () {
+    if (props.isMobileView) {
+      setIsShowStar(true);
+    }
+  }, [props.isMobileView]);
+  var onMouseOver = function onMouseOver() {
+    if (!props.isMobileView) {
+      setIsShowStar(true);
+    }
+  };
+  var onMouseLeave = function onMouseLeave() {
+    if (!props.isMobileView) {
+      setIsShowStar(false);
+    }
+  };
+  var className = [styles$1o['vitro-item'], props.className || CTRL.EMPTY, props.isActive ? styles$1o['vitro-active'] : CTRL.EMPTY, props.isMobileView && styles$1o['vitro-mobile-view']].join(CTRL.SPACE);
+  return React__default.createElement(FlexBox, {
+    onClick: props.onClick,
+    onMouseOver: onMouseOver,
+    onMouseLeave: onMouseLeave,
+    className: className
+  }, props.imageUrl ? React__default.createElement(Image, {
+    defaultUrl: props.imageUrl,
+    className: styles$1o['vitro-image']
+  }) : React__default.createElement("div", {
+    className: styles$1o['vitro-default-image']
+  }), React__default.createElement("div", {
+    className: styles$1o['vitro-name']
+  }, props.name), props.onStar && React__default.createElement(StarButton, {
+    onChange: props.onStar,
+    isActive: props.isStarActive,
+    className: isShowStar || props.isStarActive ? CTRL.EMPTY : styles$1o['vitro-hidden']
+  }));
+};
+
+var styles$1p = {"vitro-site-select":"_site-select_vitro-site-select_2irDOFZ","vitro-flex":"_site-select_vitro-flex_15EJnju","vitro-expand":"_site-select_vitro-expand_KKfRtc8","vitro-collapse":"_site-select_vitro-collapse_B0ZjAm-","vitro-site-list":"_site-select_vitro-site-list_1Yt4nLj","vitro-title":"_site-select_vitro-title_2vfT7F5","vitro-search-input":"_site-select_vitro-search-input_UMmv9PP","vitro-root-item":"_site-select_vitro-root-item_f1rGcQ4","vitro-slide-up-panel":"_site-select_vitro-slide-up-panel_U3Xn-UQ","vitro-search-value-list":"_site-select_vitro-search-value-list_3XlFSA6"};
+
+var SiteSelect = function SiteSelect(props) {
+  var _useState = React.useState(props.itemList),
+    visibleItemList = _useState[0],
+    setVisibleItemList = _useState[1];
+  var _useState2 = React.useState(false),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var _useState3 = React.useState(false),
+    isMobileView = _useState3[0],
+    setIsMobileView = _useState3[1];
+  var listRef = React.useRef(null);
+  React.useEffect(function () {
+    setVisibleItemList(function (prevState) {
+      return props.itemList.filter(function (item) {
+        if (prevState.find(function (itm) {
+          return item.id === item.id;
+        })) {
+          return true;
+        }
+        return false;
+      });
+    });
+  }, [props.itemList]);
+  React.useEffect(function () {
+    updateIsMobileView();
+    window.addEventListener(exports.EVENT.MOUSEDOWN, onMouseDown);
+    return function () {
+      window.removeEventListener(exports.EVENT.MOUSEDOWN, onMouseDown);
+    };
+  }, []);
+  React.useEffect(function () {
+    updateIsMobileView();
+  }, [window.innerWidth]);
+  var updateIsMobileView = function updateIsMobileView() {
+    window.innerWidth < exports.MOBILE_VIEW.WIDTH ? setIsMobileView(true) : setIsMobileView(false);
+  };
+  var onSelect = function onSelect(item) {
+    if (props.onChange) {
+      props.onChange(item);
+    }
+    setIsExpanded(false);
+  };
+  var getItem = function getItem(item) {
+    return React__default.createElement(SiteItem, {
+      key: item.id,
+      id: item.id,
+      name: item.name,
+      imageUrl: item.imageUrl,
+      isStarActive: item.isStarActive,
+      isActive: item.id === props.activeItem.id,
+      isMobileView: isMobileView,
+      onClick: function onClick() {
+        return onSelect(item);
+      },
+      onStar: props.onStarChange ? function (isStarActive) {
+        return onStarChange(isStarActive, item);
+      } : undefined
+    });
+  };
+  var filterValueTemplate = function filterValueTemplate(item) {
+    return item.name;
+  };
+  var filterStarActive = function filterStarActive(isStarActive) {
+    if (isStarActive) {
+      setVisibleItemList(props.itemList.filter(function (item) {
+        return item.isStarActive;
+      }));
+    } else {
+      setVisibleItemList(props.itemList);
+    }
+  };
+  var onStarChange = function onStarChange(isStarActive, item) {
+    if (props.onStarChange) {
+      props.onStarChange(_extends({}, item, {
+        isStarActive: isStarActive
+      }));
+    }
+  };
+  var onClick = function onClick() {
+    setIsExpanded(!isExpanded);
+  };
+  var onMouseDown = function onMouseDown(e) {
+    if (!isMobileView && listRef.current && !listRef.current.contains(e.target)) {
+      setIsExpanded(false);
+    }
+  };
+  var content = React__default.createElement(SearchValueList, {
+    itemList: visibleItemList,
+    valueTemplate: getItem,
+    filterValueTemplate: filterValueTemplate,
+    className: styles$1p['vitro-search-value-list'],
+    inputClassName: styles$1p['vitro-search-input']
+  }, React__default.createElement(SiteItem, Object.assign({}, props.rootItem, {
+    isMobileView: isMobileView,
+    className: styles$1p['vitro-root-item']
+  })), React__default.createElement(FlexBox, {
+    className: styles$1p['vitro-title']
+  }, props.title, props.onStarChange && React__default.createElement(StarButton, {
+    onChange: filterStarActive
+  })));
+  return React__default.createElement("div", {
+    className: styles$1p['vitro-site-select']
+  }, React__default.createElement(FlexBox, {
+    className: 'vitro-flex'
+  }, React__default.createElement("h2", {
+    onClick: onClick
+  }, props.activeItem.name), React__default.createElement(ImageButton, {
+    className: isExpanded ? styles$1p['vitro-collapse'] : styles$1p['vitro-expand'],
+    onClick: onClick
+  })), isMobileView && React__default.createElement(SlideUpPanel, {
+    className: styles$1p['vitro-slide-up-panel'],
+    isShow: isExpanded,
+    onClose: function onClose() {
+      return setIsExpanded(false);
+    }
+  }, content), !isMobileView && isExpanded && React__default.createElement("div", {
+    className: styles$1p['vitro-site-list'],
+    ref: listRef
+  }, content));
+};
+
+var styles$1q = {"vitro-bottom":"_bottom-align-control-group_vitro-bottom_3-a5nWD"};
+
+var BottomAlignControlGroup = function BottomAlignControlGroup(props) {
+  return React__default.createElement("div", {
+    className: styles$1q['vitro-bottom']
+  }, props.children);
+};
+
 exports.ACTION_HANDLER = ActionHandlerConstants;
 exports.ALERT = AlertConstants;
 exports.ActionHandler = ActionHandler;
@@ -66193,6 +66443,7 @@ exports.ActivityMessage = ActivityMessage;
 exports.Alert = Alert$1;
 exports.Avatar = Avatar;
 exports.BimViewer = BimViewer;
+exports.BottomAlignControlGroup = BottomAlignControlGroup;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button$2;
 exports.ButtonCancel = ButtonCancel;
@@ -66218,6 +66469,7 @@ exports.ExpandCollapseButton = ExpandCollapseButton;
 exports.ExpandControlGroup = ExpandControlGroup;
 exports.FieldIterator = FieldIterator;
 exports.FileVersionSelect = FileVersionSelect;
+exports.FlexBox = FlexBox;
 exports.HEADER = HeaderConstants;
 exports.HEADING = HeadingConstants;
 exports.Header = Header;
@@ -66258,7 +66510,10 @@ exports.ScrollBar = ScrollBar;
 exports.Search = Search;
 exports.Sidebar = Sidebar;
 exports.SidebarButton = SidebarButton;
+exports.SiteSelect = SiteSelect;
+exports.SlideUpPanel = SlideUpPanel;
 exports.Splitter = Splitter;
+exports.StarButton = StarButton;
 exports.SystemExceptionDialog = SystemExceptionDialog;
 exports.TABLE_VIEW = TableViewConstants;
 exports.TOOLTIP = TooltipConstants;