@vitrosoftware/common-ui-ts 1.1.191 → 1.1.193

package/dist/index.js

@@ -61019,7 +61019,7 @@ var HeadingConstants = {
     get TAG () { return TAG; }
 };
 
-var styles$g = {"vitro-dialog-header":"_dialog-header_vitro-dialog-header_2W3GraU","vitro-subtitle":"_dialog-header_vitro-subtitle_3mjvJAN","vitro-image":"_dialog-header_vitro-image_3TdbvmV","vitro-title-container":"_dialog-header_vitro-title-container_c5zBWdq"};
+var styles$g = {"vitro-dialog-header":"_dialog-header_vitro-dialog-header_2W3GraU","vitro-subtitle":"_dialog-header_vitro-subtitle_3mjvJAN","vitro-image":"_dialog-header_vitro-image_3TdbvmV","vitro-title-container":"_dialog-header_vitro-title-container_c5zBWdq","vitro-title":"_dialog-header_vitro-title_2k8SPhE"};
 
 var DialogHeader = function DialogHeader(props) {
   return React__default.createElement(FlexBox, {
@@ -61030,6 +61030,7 @@ var DialogHeader = function DialogHeader(props) {
   }), props.image, React__default.createElement(FlexBox, {
     className: styles$g['vitro-title-container']
   }, React__default.createElement(FlexBox, {
+    className: styles$g['vitro-title'],
     isColumn: true
   }, props.title && React__default.createElement(Heading, {
     tag: TAG.H1,
@@ -61405,25 +61406,51 @@ var ConfirmDialog = function ConfirmDialog(props) {
   });
 };
 
-var styles$o = {"vitro-action-result-list":"_action-result-list_vitro-action-result-list_fJtJWdL","vitro-scrollbar":"_action-result-list_vitro-scrollbar_1mcualw","vitro-result-item":"_action-result-list_vitro-result-item_2AUSpie","vitro-image-container":"_action-result-list_vitro-image-container_ModalRS","vitro-flex-column":"_action-result-list_vitro-flex-column_3z0h2Y_","vitro-name":"_action-result-list_vitro-name_10TEfnU","vitro-error-message":"_action-result-list_vitro-error-message_12OqWLU","vitro-success-message":"_action-result-list_vitro-success-message_1yRyyKc","vitro-warning-message":"_action-result-list_vitro-warning-message_2UEX9Kp","vitro-image-success":"_action-result-list_vitro-image-success_2ovrZNi","vitro-image-error":"_action-result-list_vitro-image-error_KGQj2dj","vitro-image-warning":"_action-result-list_vitro-image-warning_3SKqDID","vitro-hidden":"_action-result-list_vitro-hidden_1_bZmps","vitro-visible":"_action-result-list_vitro-visible_2K_m-HH"};
+var styles$o = {"vitro-link":"_link_vitro-link_2ePaXvd"};
+
+var Link = function Link(props) {
+  return React__default.createElement("a", {
+    className: styles$o['vitro-link'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    href: props.href,
+    onClick: props.href ? function () {} : props.onClick,
+    target: props.target
+  }, props.text);
+};
+
+var TARGET$1 = function TARGET() {};
+TARGET$1.BLANK = '_blank';
+TARGET$1.SELF = '_self';
+
+var styles$p = {"vitro-action-result-list":"_action-result-list_vitro-action-result-list_fJtJWdL","vitro-scrollbar":"_action-result-list_vitro-scrollbar_1mcualw","vitro-result-item":"_action-result-list_vitro-result-item_2AUSpie","vitro-image-container":"_action-result-list_vitro-image-container_ModalRS","vitro-flex-column":"_action-result-list_vitro-flex-column_3z0h2Y_","vitro-name":"_action-result-list_vitro-name_10TEfnU","vitro-error-message":"_action-result-list_vitro-error-message_12OqWLU","vitro-success-message":"_action-result-list_vitro-success-message_1yRyyKc","vitro-warning-message":"_action-result-list_vitro-warning-message_2UEX9Kp","vitro-image-success":"_action-result-list_vitro-image-success_2ovrZNi","vitro-image-error":"_action-result-list_vitro-image-error_KGQj2dj","vitro-image-warning":"_action-result-list_vitro-image-warning_3SKqDID","vitro-hidden":"_action-result-list_vitro-hidden_1_bZmps","vitro-visible":"_action-result-list_vitro-visible_2K_m-HH","vitro-link-list":"_action-result-list_vitro-link-list_2mScWX3","vitro-link":"_action-result-list_vitro-link_1xl-Pq-"};
 
 var ActionResultItem = function ActionResultItem(props) {
   return React__default.createElement("div", {
-    className: styles$o['vitro-result-item']
+    className: styles$p['vitro-result-item']
   }, React__default.createElement("div", {
-    className: styles$o['vitro-image-container']
+    className: styles$p['vitro-image-container']
   }, props.imageUrl && React__default.createElement(Image, {
     defaultUrl: props.imageUrl
-  })), React__default.createElement("div", {
-    className: styles$o['vitro-flex-column']
+  })), React__default.createElement(FlexBox, {
+    className: styles$p['vitro-flex-column'],
+    isColumn: true
   }, React__default.createElement("span", {
-    className: styles$o['vitro-name']
+    className: styles$p['vitro-name']
   }, props.name), props.id && React__default.createElement("span", {
-    className: styles$o['vitro-name']
+    className: styles$p['vitro-name']
   }, CTRL.PARENTHESIS_OPEN + props.id + CTRL.PARENTHESIS_CLOSE), React__default.createElement("span", {
-    className: props.isWarning ? styles$o['vitro-warning-message'] : props.isSuccess ? styles$o['vitro-success-message'] : styles$o['vitro-error-message']
-  }, props.message)), React__default.createElement("div", {
-    className: props.isWarning ? styles$o['vitro-image-warning'] : props.isSuccess ? styles$o['vitro-image-success'] : styles$o['vitro-image-error']
+    className: props.isWarning ? styles$p['vitro-warning-message'] : props.isSuccess ? styles$p['vitro-success-message'] : styles$p['vitro-error-message']
+  }, props.message), props.linkList && props.linkList.length > 0 ? React__default.createElement(FlexBox, {
+    className: styles$p['vitro-link-list'],
+    isColumn: true
+  }, props.linkList.map(function (link) {
+    return React__default.createElement(Link, {
+      text: link.name || link.uri,
+      href: link.uri,
+      target: TARGET$1.BLANK,
+      className: styles$p['vitro-link']
+    });
+  })) : null), React__default.createElement("div", {
+    className: props.isWarning ? styles$p['vitro-image-warning'] : props.isSuccess ? styles$p['vitro-image-success'] : styles$p['vitro-image-error']
   }));
 };
 
@@ -61436,34 +61463,37 @@ var ActionResultList = function ActionResultList(props) {
       setTimeout(function () {
         if (listRef.current) {
           var height = listRef.current.getBoundingClientRect().height;
-          console.log(height + UNIT.PX);
           listRef.current.style.height = height + UNIT.PX;
         }
       }, 500);
     }
   }, [props.isVisible]);
   return React__default.createElement("div", {
-    className: styles$o['vitro-action-result-list'] + CTRL.SPACE + (props.isVisible ? styles$o['vitro-visible'] : styles$o['vitro-hidden']),
+    className: styles$p['vitro-action-result-list'] + CTRL.SPACE + (props.isVisible ? styles$p['vitro-visible'] : styles$p['vitro-hidden']),
     ref: listRef
   }, React__default.createElement(ScrollBar, {
-    className: styles$o['vitro-scrollbar']
+    className: styles$p['vitro-scrollbar']
   }, props.failResult.map(function (result, index) {
+    var _result$;
     return React__default.createElement(ActionResultItem, {
       key: index,
       name: result[0].name,
       id: result[0].id,
       imageUrl: result[0].imageUrl,
       message: result[1] ? result[1].message : CTRL.EMPTY,
+      linkList: (_result$ = result[1]) === null || _result$ === void 0 ? void 0 : _result$.linkList,
       isSuccess: false,
       isWarning: false
     });
   }), props.warningResult.map(function (result, index) {
+    var _result$2;
     return React__default.createElement(ActionResultItem, {
       key: index,
       name: result[0].name,
       id: result[0].id,
       imageUrl: result[0].imageUrl,
       message: result[1] ? result[1].message : CTRL.EMPTY,
+      linkList: (_result$2 = result[1]) === null || _result$2 === void 0 ? void 0 : _result$2.linkList,
       isSuccess: true,
       isWarning: true
     });
@@ -61480,10 +61510,10 @@ var ActionResultList = function ActionResultList(props) {
   })));
 };
 
-var styles$p = {"vitro-result-dialog":"_result-dialog_vitro-result-dialog_kqxXHts","vitro-progress":"_result-dialog_vitro-progress_3WaZ52V","vitro-success":"_result-dialog_vitro-success_3UZikJl","vitro-error":"_result-dialog_vitro-error_3-IKuM9","vitro-warning":"_result-dialog_vitro-warning_1YXyHJC","vitro-header":"_result-dialog_vitro-header_2rBOm3x","vitro-image":"_result-dialog_vitro-image_19CVcbX","vitro-flex":"_result-dialog_vitro-flex_1CUfSCh","vitro-result-text":"_result-dialog_vitro-result-text_3wNan1D","vitro-button-group":"_result-dialog_vitro-button-group_2cBzj9Q","vitro-progress-bar":"_result-dialog_vitro-progress-bar_2MazExd","vitro-button-close":"_result-dialog_vitro-button-close_AJxsgiW","vitro-save-report-button":"_result-dialog_vitro-save-report-button_28kdZ5l","vitro-save-report-image":"_result-dialog_vitro-save-report-image_2fnLBCP"};
+var styles$q = {"vitro-result-dialog":"_result-dialog_vitro-result-dialog_kqxXHts","vitro-progress":"_result-dialog_vitro-progress_3WaZ52V","vitro-success":"_result-dialog_vitro-success_3UZikJl","vitro-error":"_result-dialog_vitro-error_3-IKuM9","vitro-warning":"_result-dialog_vitro-warning_1YXyHJC","vitro-header":"_result-dialog_vitro-header_2rBOm3x","vitro-image":"_result-dialog_vitro-image_19CVcbX","vitro-flex":"_result-dialog_vitro-flex_1CUfSCh","vitro-result-text":"_result-dialog_vitro-result-text_3wNan1D","vitro-button-group":"_result-dialog_vitro-button-group_2cBzj9Q","vitro-progress-bar":"_result-dialog_vitro-progress-bar_2MazExd","vitro-button-close":"_result-dialog_vitro-button-close_AJxsgiW","vitro-save-report-button":"_result-dialog_vitro-save-report-button_28kdZ5l","vitro-save-report-image":"_result-dialog_vitro-save-report-image_2fnLBCP"};
 
 var ResultDialog = function ResultDialog(props) {
-  var _useState = React.useState(styles$p['vitro-progress']),
+  var _useState = React.useState(styles$q['vitro-progress']),
     state = _useState[0],
     setState = _useState[1];
   var _useState2 = React.useState(!props.isSuccess || props.isWarning),
@@ -61502,17 +61532,17 @@ var ResultDialog = function ResultDialog(props) {
   }, [props.isProgress, props.isSuccess, props.isWarning]);
   var updateState = function updateState(isProgress, isSuccess, isWarning) {
     if (isProgress) {
-      setState(styles$p['vitro-progress']);
+      setState(styles$q['vitro-progress']);
       return;
     }
     if (isSuccess) {
       if (isWarning) {
-        setState(styles$p['vitro-warning']);
+        setState(styles$q['vitro-warning']);
       } else {
-        setState(styles$p['vitro-success']);
+        setState(styles$q['vitro-success']);
       }
     } else {
-      setState(styles$p['vitro-error']);
+      setState(styles$q['vitro-error']);
     }
   };
   var updateText = function updateText(isProgress, isSuccess, isWarning) {
@@ -61556,30 +61586,30 @@ var ResultDialog = function ResultDialog(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$p['vitro-result-dialog'] + CTRL.SPACE + state,
+    className: styles$q['vitro-result-dialog'] + CTRL.SPACE + state,
     style: {
       zIndex: props.zIndex
     }
   }, React__default.createElement("div", {
-    className: styles$p['vitro-header']
+    className: styles$q['vitro-header']
   }, React__default.createElement("div", {
-    className: styles$p['vitro-flex']
+    className: styles$q['vitro-flex']
   }, !props.isProgress && React__default.createElement("div", {
-    className: styles$p['vitro-image']
+    className: styles$q['vitro-image']
   }), props.isProgress ? React__default.createElement(Heading, {
     tag: TAG.H3,
     text: text
   }) : React__default.createElement("span", {
-    className: styles$p['vitro-result-text']
+    className: styles$q['vitro-result-text']
   }, text), React__default.createElement(ButtonGroup, {
-    className: styles$p['vitro-button-group']
+    className: styles$q['vitro-button-group']
   }, (props.isProgress || !props.isSuccess || props.isWarning) && React__default.createElement(ExpandCollapseButton, {
     isExpanded: showInfo,
     onClick: function onClick(isExpanded) {
       return setShowInfo(isExpanded);
     }
   }), React__default.createElement(ImageButton, {
-    className: styles$p['vitro-button-close'],
+    className: styles$q['vitro-button-close'],
     onClick: onClose
   }))), props.isProgress && React__default.createElement(React__default.Fragment, null, React__default.createElement(Heading, {
     tag: TAG.H4,
@@ -61588,13 +61618,13 @@ var ResultDialog = function ResultDialog(props) {
       count: props.itemList.length
     })
   }), React__default.createElement(ProgressBar, {
-    className: styles$p['vitro-progress-bar'],
+    className: styles$q['vitro-progress-bar'],
     percentComplete: getPercentComplete(props.processedItemCount)
   })), props.onSaveReport && !props.isProgress && React__default.createElement("button", {
     onClick: onSaveReport,
-    className: styles$p['vitro-save-report-button']
+    className: styles$q['vitro-save-report-button']
   }, localeService.create(LOCALE$2.RESULT_DIALOG_ACTION_SAVE_REPORT), React__default.createElement("div", {
-    className: styles$p['vitro-save-report-image']
+    className: styles$q['vitro-save-report-image']
   }))), React__default.createElement(ActionResultList, {
     successResult: props.successResult,
     failResult: props.failResult,
@@ -61882,7 +61912,7 @@ var ActionHandler = function ActionHandler(props) {
   }));
 };
 
-var styles$q = {"vitro-dropdown-button":"_dropdown-button_vitro-dropdown-button_1myvkhB","vitro-dropdown-icon":"_dropdown-button_vitro-dropdown-icon_2aKCNii","vitro-text":"_dropdown-button_vitro-text_1FRiwp0","vitro-dropdown-button-item-overflow":"_dropdown-button_vitro-dropdown-button-item-overflow_2aWEhD4","vitro-image":"_dropdown-button_vitro-image_3bX1quk","dropdown-item":"_dropdown-button_dropdown-item_1c2DhhE"};
+var styles$r = {"vitro-dropdown-button":"_dropdown-button_vitro-dropdown-button_1myvkhB","vitro-dropdown-icon":"_dropdown-button_vitro-dropdown-icon_2aKCNii","vitro-text":"_dropdown-button_vitro-text_1FRiwp0","vitro-dropdown-button-item-overflow":"_dropdown-button_vitro-dropdown-button-item-overflow_2aWEhD4","vitro-image":"_dropdown-button_vitro-image_3bX1quk","dropdown-item":"_dropdown-button_dropdown-item_1c2DhhE"};
 
 var w$4 = window;
 var ALIGN_END = 'end';
@@ -61946,10 +61976,10 @@ var DropdownButton = function DropdownButton(props) {
     return !!item.imageUrl;
   }) ? true : false;
   return React__default.createElement("div", {
-    className: styles$q['vitro-dropdown-button'] + CTRL.SPACE + (props.className || CTRL.EMPTY)
+    className: styles$r['vitro-dropdown-button'] + CTRL.SPACE + (props.className || CTRL.EMPTY)
   }, overflowItemList.map(function (item) {
     return React__default.createElement("div", {
-      className: styles$q['vitro-dropdown-button-item-overflow'],
+      className: styles$r['vitro-dropdown-button-item-overflow'],
       key: item.key,
       onClick: function onClick(e) {
         return item.onClick(item.value, e);
@@ -61957,7 +61987,7 @@ var DropdownButton = function DropdownButton(props) {
     }, item.imageUrl && React__default.createElement(Image, {
       defaultUrl: item.imageUrl,
       hoverUrl: item.imageHoverUrl,
-      className: styles$q['vitro-image']
+      className: styles$r['vitro-image']
     }), React__default.createElement("span", null, item.text));
   }), React__default.createElement(BootstrapDropdown, {
     align: ALIGN_END,
@@ -61967,12 +61997,12 @@ var DropdownButton = function DropdownButton(props) {
   }, React__default.createElement(BootstrapDropdown.Toggle, {
     ref: buttonRef
   }, props.title && React__default.createElement("span", {
-    className: styles$q['vitro-title']
+    className: styles$r['vitro-title']
   }, props.title), props.imageUrl ? React__default.createElement(Image, {
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl
   }) : React__default.createElement("span", {
-    className: styles$q['vitro-dropdown-icon']
+    className: styles$r['vitro-dropdown-icon']
   })), React__default.createElement(BootstrapDropdown.Menu, {
     renderOnMount: props.isRenderOnMount,
     flip: props.isFlip !== false,
@@ -61986,7 +62016,7 @@ var DropdownButton = function DropdownButton(props) {
         return x.onClick(x.value, e);
       }
     }, isShowImage && React__default.createElement("div", {
-      className: styles$q['vitro-image']
+      className: styles$r['vitro-image']
     }, x.imageUrl && React__default.createElement(Image, {
       defaultUrl: x.imageUrl,
       hoverUrl: x.imageHoverUrl
@@ -61994,12 +62024,12 @@ var DropdownButton = function DropdownButton(props) {
   })))));
 };
 
-var styles$r = {"vitro-tab":"_tab-group_vitro-tab_1Qb50HL","vitro-item":"_tab-group_vitro-item_2YnBcmb","active":"_tab-group_active_3M-IIR2","vitro-dropdown-button":"_tab-group_vitro-dropdown-button_146jv_h"};
+var styles$s = {"vitro-tab":"_tab-group_vitro-tab_1Qb50HL","vitro-item":"_tab-group_vitro-item_2YnBcmb","active":"_tab-group_active_3M-IIR2","vitro-dropdown-button":"_tab-group_vitro-dropdown-button_146jv_h"};
 
 var OverflowButton = function OverflowButton(props) {
   if (!props.list || !props.list.length) return null;
   return React__default.createElement(DropdownButton, {
-    className: styles$r['vitro-dropdown-button'],
+    className: styles$s['vitro-dropdown-button'],
     itemList: props.list.map(function (x, i) {
       return _extends({}, x, {
         value: x.index,
@@ -62021,9 +62051,9 @@ var Tab = function Tab(props) {
   }
   return React__default.createElement("div", {
     key: props.index,
-    className: styles$r['vitro-item']
+    className: styles$s['vitro-item']
   }, React__default.createElement(Nav$2.Item, {
-    className: props.active ? styles$r['active'] : undefined,
+    className: props.active ? styles$s['active'] : undefined,
     onClick: function onClick() {
       return props.onClick(props.index);
     }
@@ -62160,7 +62190,7 @@ var TabGroupComponent = React.forwardRef(function (props, forwardedRef) {
     return null;
   };
   return React__default.createElement("div", {
-    className: styles$r['vitro-tab'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$s['vitro-tab'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     ref: ref
   }, props.itemList.length === 1 && props.isHideSingleHeader === true ? null : React__default.createElement(TabGroupHeader, {
     itemList: props.itemList.map(function (item, index) {
@@ -62207,7 +62237,7 @@ var TabGroup = React.forwardRef(function (props, ref) {
   }));
 });
 
-var styles$s = {"vitro-view-part":"_view-part_vitro-view-part_3j_gZpl"};
+var styles$t = {"vitro-view-part":"_view-part_vitro-view-part_3j_gZpl"};
 
 var ViewPart = function ViewPart(props) {
   var _useState = React.useState(null),
@@ -62223,26 +62253,26 @@ var ViewPart = function ViewPart(props) {
     }
   }, [props.component, props.settings, props.item]);
   return React__default.createElement("div", {
-    className: styles$s['vitro-view-part'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$t['vitro-view-part'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, component);
 };
 
-var styles$t = {"vitro-control":"_control-group_vitro-control_2h_sXQv","vitro-control-row":"_control-group_vitro-control-row_6l8m5Wh","vitro-label":"_control-group_vitro-label_3J193Ml"};
+var styles$u = {"vitro-control":"_control-group_vitro-control_2h_sXQv","vitro-control-row":"_control-group_vitro-control-row_6l8m5Wh","vitro-label":"_control-group_vitro-label_3J193Ml"};
 
 var ControlGroup = function ControlGroup(props) {
   if (props.horizontal) {
     return React__default.createElement("div", {
-      className: 'container ' + styles$t['vitro-control']
+      className: 'container ' + styles$u['vitro-control']
     }, React__default.createElement("div", {
       className: props.as
     }, props.children));
   }
   return React__default.createElement("div", {
-    className: styles$t['vitro-control-row']
+    className: styles$u['vitro-control-row']
   }, props.children);
 };
 
-var styles$u = {"vitro-view":"_view_vitro-view_1NKb-kU","vitro-tab":"_view_vitro-tab_2sqf0L9","vitro-content":"_view_vitro-content_17HzDlb"};
+var styles$v = {"vitro-view":"_view_vitro-view_1NKb-kU","vitro-tab":"_view_vitro-tab_2sqf0L9","vitro-content":"_view_vitro-content_17HzDlb"};
 
 var GroupControl = function GroupControl(props) {
   var scrollbarContentRef = React.useRef(null);
@@ -62257,7 +62287,7 @@ var GroupControl = function GroupControl(props) {
   return React__default.createElement(ControlGroup, {
     horizontal: true
   }, React__default.createElement(ScrollBar, {
-    contentClassName: styles$u['vitro-content'],
+    contentClassName: styles$v['vitro-content'],
     contentRef: scrollbarContentRef
   }, props.componentList && props.componentList.map(function (viewPart) {
     return React__default.createElement(ViewPart, {
@@ -62265,7 +62295,7 @@ var GroupControl = function GroupControl(props) {
       settings: viewPart.settings,
       props: props,
       item: props.item,
-      className: styles$u['vitro-view-part']
+      className: styles$v['vitro-view-part']
     });
   })));
 };
@@ -62294,18 +62324,18 @@ var View = React.forwardRef(function (props, ref) {
     }
   }, [props.tabList]);
   return tabList && React__default.createElement("div", {
-    className: styles$u['vitro-view']
+    className: styles$v['vitro-view']
   }, React__default.createElement(TabGroup, {
     itemList: tabList,
     isDisabled: props.isDisabled,
-    className: styles$u['vitro-tab'],
+    className: styles$v['vitro-tab'],
     isHideSingleHeader: props.isHideSingleTabHeader,
     ref: ref,
     wrap: true
   }));
 });
 
-var styles$v = {"vitro-tab-button-group":"_tab-button-group_vitro-tab-button-group_18mZ_Ds","vitro-tab-button-group-content":"_tab-button-group_vitro-tab-button-group-content_2jyBqmO","active":"_tab-button-group_active_35VFF8T"};
+var styles$w = {"vitro-tab-button-group":"_tab-button-group_vitro-tab-button-group_18mZ_Ds","vitro-tab-button-group-content":"_tab-button-group_vitro-tab-button-group-content_2jyBqmO","active":"_tab-button-group_active_35VFF8T"};
 
 var CSS_CLASS_ACTIVE = 'active';
 var CSS_CLASS_TAB_BUTTON_GROUP = 'vitro-tab-button-group';
@@ -62426,7 +62456,7 @@ var TabButtonGroup = function TabButtonGroup(props) {
   var getTabButton = function getTabButton(item, index) {
     return React__default.createElement(Button$2, {
       key: item.id,
-      className: isTabButtonActive(index) ? styles$v[CSS_CLASS_ACTIVE] : CTRL.EMPTY,
+      className: isTabButtonActive(index) ? styles$w[CSS_CLASS_ACTIVE] : CTRL.EMPTY,
       text: item.text,
       onClick: function onClick() {
         setButtonActive(index);
@@ -62439,9 +62469,9 @@ var TabButtonGroup = function TabButtonGroup(props) {
     return _width >= tabMinWidth ? _width : tabMinWidth;
   };
   return React__default.createElement("div", {
-    className: styles$v[CSS_CLASS_TAB_BUTTON_GROUP]
+    className: styles$w[CSS_CLASS_TAB_BUTTON_GROUP]
   }, React__default.createElement("div", {
-    className: styles$v[CSS_CLASS_TAB_BUTTON_GROUP_CONTENT],
+    className: styles$w[CSS_CLASS_TAB_BUTTON_GROUP_CONTENT],
     ref: ref
   }, tabList.map(function (item, index) {
     if ((activeItemTabBtn ? index + 2 : index + 1) * tabMinWidth < getWidth() || !props.wrap) {
@@ -62457,7 +62487,7 @@ var TabButtonGroup = function TabButtonGroup(props) {
     return null;
   }), activeItemTabBtn && React__default.createElement(Button$2, {
     key: activeItemTabBtn.id,
-    className: styles$v[CSS_CLASS_ACTIVE],
+    className: styles$w[CSS_CLASS_ACTIVE],
     text: activeItemTabBtn.text,
     onClick: function onClick() {}
   }), tabList && props.wrap && React__default.createElement(OverflowButton, {
@@ -62468,25 +62498,25 @@ var TabButtonGroup = function TabButtonGroup(props) {
   })));
 };
 
-var styles$w = {"vitro-issue-tile-footer":"_issue-tile-footer_vitro-issue-tile-footer_KtHOieL","vitro-issue-tile-status":"_issue-tile-footer_vitro-issue-tile-status_3OjC56L","vitro-status-color":"_issue-tile-footer_vitro-status-color_hhLb22J","vitro-button-more":"_issue-tile-footer_vitro-button-more_1RyVAeR"};
+var styles$x = {"vitro-issue-tile-footer":"_issue-tile-footer_vitro-issue-tile-footer_KtHOieL","vitro-issue-tile-status":"_issue-tile-footer_vitro-issue-tile-status_3OjC56L","vitro-status-color":"_issue-tile-footer_vitro-status-color_hhLb22J","vitro-button-more":"_issue-tile-footer_vitro-button-more_1RyVAeR"};
 
 var IssueTileFooter = function IssueTileFooter(props) {
   return React__default.createElement("div", {
-    className: styles$w['vitro-issue-tile-footer']
+    className: styles$x['vitro-issue-tile-footer']
   }, React__default.createElement("div", {
-    className: styles$w['vitro-issue-tile-status']
+    className: styles$x['vitro-issue-tile-status']
   }, props.statusColor && React__default.createElement("div", {
-    className: styles$w['vitro-status-color'],
+    className: styles$x['vitro-status-color'],
     style: {
       background: props.statusColor
     }
   }), props.status), props.onShowMoreClick && React__default.createElement("div", {
     onClick: props.onShowMoreClick,
-    className: styles$w['vitro-button-more']
+    className: styles$x['vitro-button-more']
   }));
 };
 
-var styles$x = {"vitro-avatar":"_avatar_vitro-avatar_P2tU-_r"};
+var styles$y = {"vitro-avatar":"_avatar_vitro-avatar_P2tU-_r"};
 
 var Avatar = function Avatar(props) {
   var getInitials = function getInitials() {
@@ -62525,7 +62555,7 @@ var Avatar = function Avatar(props) {
   var getBgColor = function getBgColor(name) {
     return "linear-gradient(0deg, hsla(" + getHue(name) + ", 58%, 55%, 1), hsla(" + (getHue(name) + 50) + ", 100%, 78%, 1))";
   };
-  var className = styles$x['vitro-avatar'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY);
+  var className = styles$y['vitro-avatar'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY);
   return React__default.createElement("div", {
     className: className,
     style: props.image ? {} : {
@@ -62536,30 +62566,30 @@ var Avatar = function Avatar(props) {
   }) : getInitials());
 };
 
-var styles$y = {"vitro-issue-tile-header":"_issue-tile-header_vitro-issue-tile-header_jTcaXBE","vitro-link":"_issue-tile-header_vitro-link_9DQ3Bqk","vitro-user-info":"_issue-tile-header_vitro-user-info_16Yhluy","vitro-avatar":"_issue-tile-header_vitro-avatar_3rf1BME","vitro-dropdown-button":"_issue-tile-header_vitro-dropdown-button_1-7nI-k"};
+var styles$z = {"vitro-issue-tile-header":"_issue-tile-header_vitro-issue-tile-header_jTcaXBE","vitro-link":"_issue-tile-header_vitro-link_9DQ3Bqk","vitro-user-info":"_issue-tile-header_vitro-user-info_16Yhluy","vitro-avatar":"_issue-tile-header_vitro-avatar_3rf1BME","vitro-dropdown-button":"_issue-tile-header_vitro-dropdown-button_1-7nI-k"};
 
 var VERSION = 'V';
 var TARGET_BLANK = '_blank';
 var IssueTileHeader = function IssueTileHeader(props) {
   return React__default.createElement("div", {
-    className: styles$y['vitro-issue-tile-header']
+    className: styles$z['vitro-issue-tile-header']
   }, React__default.createElement("a", {
-    className: styles$y['vitro-link'],
+    className: styles$z['vitro-link'],
     href: props.url,
     target: TARGET_BLANK
   }, CTRL.SHARP + props.id), React__default.createElement("div", {
-    className: styles$y['vitro-user-info']
+    className: styles$z['vitro-user-info']
   }, React__default.createElement(Avatar, {
     image: props.userImage,
     userName: props.userName,
-    className: styles$y['vitro-avatar']
+    className: styles$z['vitro-avatar']
   }), React__default.createElement("div", null, React__default.createElement("span", null, props.userName), React__default.createElement("span", null, props.date))), React__default.createElement("a", {
-    className: styles$y['vitro-link'],
+    className: styles$z['vitro-link'],
     href: props.fileVersionUrl,
     target: TARGET_BLANK
   }, VERSION + CTRL.SQUARE_BRACKET_OPEN + props.fileVersion + CTRL.SQUARE_BRACKET_CLOSE), props.actionList && props.actionList.length ? React__default.createElement(DropdownButton, {
     itemList: props.actionList,
-    className: styles$y['vitro-dropdown-button']
+    className: styles$z['vitro-dropdown-button']
   }) : null);
 };
 
@@ -62569,7 +62599,7 @@ var LOCALE$3;
   LOCALE["COLLAPSE_TEXT"] = "app.common.expandControlGroup.collapse";
 })(LOCALE$3 || (LOCALE$3 = {}));
 
-var styles$z = {"vitro-expand-control-group":"_expand-control-group_vitro-expand-control-group_1qSUMoN","vitro-top":"_expand-control-group_vitro-top_pV-8fhr","vitro-display-none":"_expand-control-group_vitro-display-none_Zs_5rQL"};
+var styles$A = {"vitro-expand-control-group":"_expand-control-group_vitro-expand-control-group_1qSUMoN","vitro-top":"_expand-control-group_vitro-top_pV-8fhr","vitro-display-none":"_expand-control-group_vitro-display-none_Zs_5rQL"};
 
 var ExpandControlGroup = function ExpandControlGroup(props) {
   var _useState = React.useState(props.isExpanded || false),
@@ -62585,7 +62615,7 @@ var ExpandControlGroup = function ExpandControlGroup(props) {
       props.onClick(isExpanded);
     }
   };
-  var className = [styles$z['vitro-expand-control-group'], props.className || CTRL.EMPTY, props.isExpandTop ? styles$z['vitro-top'] : CTRL.EMPTY, isExpanded ? 'vitro-expanded' : 'vitro-collapsed'].join(CTRL.SPACE);
+  var className = [styles$A['vitro-expand-control-group'], props.className || CTRL.EMPTY, props.isExpandTop ? styles$A['vitro-top'] : CTRL.EMPTY, isExpanded ? 'vitro-expanded' : 'vitro-collapsed'].join(CTRL.SPACE);
   return React__default.createElement("div", {
     className: className
   }, React__default.createElement(ExpandCollapseButton, {
@@ -62597,11 +62627,11 @@ var ExpandControlGroup = function ExpandControlGroup(props) {
     isExpanded: isExpanded,
     className: props.buttonClassName
   }), React__default.createElement("div", {
-    className: 'vitro-content' + (isExpanded ? CTRL.EMPTY : CTRL.SPACE + styles$z['vitro-display-none'])
+    className: 'vitro-content' + (isExpanded ? CTRL.EMPTY : CTRL.SPACE + styles$A['vitro-display-none'])
   }, props.children));
 };
 
-var styles$A = {"vitro-field-iterator":"_field-iterator_vitro-field-iterator_2zUPyUF","vitro-expand-control-group":"_field-iterator_vitro-expand-control-group_3R-v8Nb","vitro-expand-collapse-button":"_field-iterator_vitro-expand-collapse-button_myRTctg","vitro-collapse":"_field-iterator_vitro-collapse_SZoovCi","vitro-expand":"_field-iterator_vitro-expand_ToLTBVI"};
+var styles$B = {"vitro-field-iterator":"_field-iterator_vitro-field-iterator_2zUPyUF","vitro-expand-control-group":"_field-iterator_vitro-expand-control-group_3R-v8Nb","vitro-expand-collapse-button":"_field-iterator_vitro-expand-collapse-button_myRTctg","vitro-collapse":"_field-iterator_vitro-collapse_SZoovCi","vitro-expand":"_field-iterator_vitro-expand_ToLTBVI"};
 
 var FieldIterator = React.forwardRef(function (props, ref) {
   var _useState = React.useState([]),
@@ -62794,7 +62824,7 @@ var FieldIterator = React.forwardRef(function (props, ref) {
     }, React__default.createElement("div", null, React__default.createElement(component.value, control)));
   };
   return React__default.createElement("div", {
-    className: styles$A['vitro-field-iterator'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$B['vitro-field-iterator'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, controlList.map(function (control, index) {
     var component = props.componentMap.find(function (x) {
       return x.name === control.code;
@@ -62811,13 +62841,13 @@ var FieldIterator = React.forwardRef(function (props, ref) {
     return null;
   }), props.maxVisibleCount && controlList.length > props.maxVisibleCount ? React__default.createElement(ExpandControlGroup, {
     expandImage: React__default.createElement("span", {
-      className: styles$A['vitro-expand']
+      className: styles$B['vitro-expand']
     }),
     collapseImage: React__default.createElement("span", {
-      className: styles$A['vitro-collapse']
+      className: styles$B['vitro-collapse']
     }),
-    className: styles$A['vitro-expand-control-group'],
-    buttonClassName: styles$A['vitro-expand-collapse-button'],
+    className: styles$B['vitro-expand-control-group'],
+    buttonClassName: styles$B['vitro-expand-collapse-button'],
     isExpandTop: true
   }, controlList.map(function (control, index) {
     var component = props.componentMap.find(function (x) {
@@ -62830,12 +62860,12 @@ var FieldIterator = React.forwardRef(function (props, ref) {
   })) : null);
 });
 
-var styles$B = {"vitro-issue-tile":"_issue-tile_vitro-issue-tile_2D7E9Y-","vitro-control":"_issue-tile_vitro-control_3V6_Ze7"};
+var styles$C = {"vitro-issue-tile":"_issue-tile_vitro-issue-tile_2D7E9Y-","vitro-control":"_issue-tile_vitro-control_3V6_Ze7"};
 
 var IssueTile = function IssueTile(props) {
   return React__default.createElement("div", {
     id: 'vitro-issue-tile-' + props.id,
-    className: styles$B['vitro-issue-tile'] + (props.isActive ? CTRL.SPACE + 'vitro-active' : CTRL.EMPTY),
+    className: styles$C['vitro-issue-tile'] + (props.isActive ? CTRL.SPACE + 'vitro-active' : CTRL.EMPTY),
     onClick: props.onClick
   }, React__default.createElement(IssueTileHeader, {
     id: props.id,
@@ -62859,7 +62889,7 @@ var IssueTile = function IssueTile(props) {
   }));
 };
 
-var styles$C = {"vitro-file-version-select":"_file-version-select_vitro-file-version-select_1wIyab3","vitro-selected-version":"_file-version-select_vitro-selected-version_2BVgaBC","vitro-file-name":"_file-version-select_vitro-file-name_1PtLh8A","vitro-file-name-tip":"_file-version-select_vitro-file-name-tip_12pxa7I","vitro-button-collapse-up":"_file-version-select_vitro-button-collapse-up_2GaCEdu","vitro-button-collapse-bottom":"_file-version-select_vitro-button-collapse-bottom_38zg3bU","vitro-version-name-red":"_file-version-select_vitro-version-name-red_-j6Z9ap","vitro-version-name-green":"_file-version-select_vitro-version-name-green_7PfVUHk","vitro-version-list":"_file-version-select_vitro-version-list_3h5D3pD","vitro-file-version-item":"_file-version-select_vitro-file-version-item_38KWa8a","vitro-content":"_file-version-select_vitro-content_zDUhjj0","vitro-version-name":"_file-version-select_vitro-version-name_1821bal","vitro-flex":"_file-version-select_vitro-flex_35zCAQv","vitro-active":"_file-version-select_vitro-active_1PRyjUa"};
+var styles$D = {"vitro-file-version-select":"_file-version-select_vitro-file-version-select_1wIyab3","vitro-selected-version":"_file-version-select_vitro-selected-version_2BVgaBC","vitro-file-name":"_file-version-select_vitro-file-name_1PtLh8A","vitro-file-name-tip":"_file-version-select_vitro-file-name-tip_12pxa7I","vitro-button-collapse-up":"_file-version-select_vitro-button-collapse-up_2GaCEdu","vitro-button-collapse-bottom":"_file-version-select_vitro-button-collapse-bottom_38zg3bU","vitro-version-name-red":"_file-version-select_vitro-version-name-red_-j6Z9ap","vitro-version-name-green":"_file-version-select_vitro-version-name-green_7PfVUHk","vitro-version-list":"_file-version-select_vitro-version-list_3h5D3pD","vitro-file-version-item":"_file-version-select_vitro-file-version-item_38KWa8a","vitro-content":"_file-version-select_vitro-content_zDUhjj0","vitro-version-name":"_file-version-select_vitro-version-name_1821bal","vitro-flex":"_file-version-select_vitro-flex_35zCAQv","vitro-active":"_file-version-select_vitro-active_1PRyjUa"};
 
 var VERSION_PREFIX = 'V';
 var Item$1 = function Item(props) {
@@ -62870,7 +62900,7 @@ var Item$1 = function Item(props) {
     }
   }, [versionNameRef]);
   return React__default.createElement("li", {
-    className: styles$C['vitro-file-version-item'] + CTRL.SPACE + (props.isActive ? styles$C['vitro-active'] : CTRL.EMPTY),
+    className: styles$D['vitro-file-version-item'] + CTRL.SPACE + (props.isActive ? styles$D['vitro-active'] : CTRL.EMPTY),
     onClick: function onClick() {
       return props.onClick(props.version);
     }
@@ -62879,13 +62909,13 @@ var Item$1 = function Item(props) {
     style: props.versionWidth ? {
       width: props.versionWidth + UNIT.PX
     } : {},
-    className: props.isActive ? props.isCurrent ? styles$C['vitro-version-name-green'] : styles$C['vitro-version-name-red'] : styles$C['vitro-version-name']
+    className: props.isActive ? props.isCurrent ? styles$D['vitro-version-name-green'] : styles$D['vitro-version-name-red'] : styles$D['vitro-version-name']
   }, VERSION_PREFIX + props.version.name), React__default.createElement("div", {
-    className: styles$C['vitro-content']
+    className: styles$D['vitro-content']
   }, React__default.createElement("div", {
-    className: styles$C['vitro-file-name']
+    className: styles$D['vitro-file-name']
   }, props.fileName), React__default.createElement("div", {
-    className: styles$C['vitro-flex']
+    className: styles$D['vitro-flex']
   }, React__default.createElement("span", null, props.version.userName), React__default.createElement("span", null, props.version.date))));
 };
 
@@ -62957,17 +62987,17 @@ var FileVersionSelect = function FileVersionSelect(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$C['vitro-file-version-select'],
+    className: styles$D['vitro-file-version-select'],
     ref: selectRef
   }, selectedVersion && React__default.createElement("div", {
-    className: styles$C['vitro-selected-version'],
+    className: styles$D['vitro-selected-version'],
     onClick: onCollapseButtonClick
   }, React__default.createElement("div", {
     ref: fileNameRef,
     onMouseOver: onMouseOver,
-    className: styles$C['vitro-file-name']
+    className: styles$D['vitro-file-name']
   }, props.fileName), showFileName && React__default.createElement("div", {
-    className: styles$C['vitro-file-name-tip'],
+    className: styles$D['vitro-file-name-tip'],
     onMouseLeave: function onMouseLeave() {
       return setShowFileName(false);
     },
@@ -62976,11 +63006,11 @@ var FileVersionSelect = function FileVersionSelect(props) {
     placement: PLACEMENT.BOTTOM,
     text: isCurrent ? props.tooltipTextCurrent : props.tooltipTextNotCurrent
   }, React__default.createElement("div", {
-    className: isCurrent ? styles$C['vitro-version-name-green'] : styles$C['vitro-version-name-red']
+    className: isCurrent ? styles$D['vitro-version-name-green'] : styles$D['vitro-version-name-red']
   }, VERSION_PREFIX$1 + selectedVersion.name)), React__default.createElement("div", {
-    className: showValueList ? styles$C['vitro-button-collapse-up'] : styles$C['vitro-button-collapse-bottom']
+    className: showValueList ? styles$D['vitro-button-collapse-up'] : styles$D['vitro-button-collapse-bottom']
   })), showValueList && React__default.createElement("ul", {
-    className: styles$C['vitro-version-list']
+    className: styles$D['vitro-version-list']
   }, React__default.createElement(ScrollBar, null, props.itemList.map(function (item) {
     return React__default.createElement(Item$1, {
       version: item,
@@ -63082,7 +63112,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.191";
+var version$1 = "1.1.193";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -63229,7 +63259,7 @@ var PdfViewer = function PdfViewer(props) {
   });
 };
 
-var styles$D = {"vitro-login-content":"_login-content_vitro-login-content_2RdLZle"};
+var styles$E = {"vitro-login-content":"_login-content_vitro-login-content_2RdLZle"};
 
 var LoginContent = function LoginContent(props) {
   var ref = React.useRef(null);
@@ -63240,26 +63270,26 @@ var LoginContent = function LoginContent(props) {
     }
   }, [props.children]);
   return React__default.createElement("div", {
-    className: styles$D['vitro-login-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$E['vitro-login-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     ref: ref
   }, props.children);
 };
 
-var styles$E = {"vitro-login-layout":"_login_vitro-login-layout_1C8owlz","vitro-login":"_login_vitro-login_12nYNm2","vitro-logo":"_login_vitro-logo_3-qTjgy","vitro-footer":"_login_vitro-footer_1lceaP0","vitro-link-list":"_login_vitro-link-list_1rQQg9u","vitro-copyright":"_login_vitro-copyright_1gm65Ao","vitro-language":"_login_vitro-language_2T3uktL"};
+var styles$F = {"vitro-login-layout":"_login_vitro-login-layout_1C8owlz","vitro-login":"_login_vitro-login_12nYNm2","vitro-logo":"_login_vitro-logo_3-qTjgy","vitro-footer":"_login_vitro-footer_1lceaP0","vitro-link-list":"_login_vitro-link-list_1rQQg9u","vitro-copyright":"_login_vitro-copyright_1gm65Ao","vitro-language":"_login_vitro-language_2T3uktL"};
 
 var LoginFooter = function LoginFooter(props) {
   return React__default.createElement("div", {
-    className: styles$E['vitro-footer']
+    className: styles$F['vitro-footer']
   }, React__default.createElement("div", {
-    className: styles$E['vitro-language']
+    className: styles$F['vitro-language']
   }), React__default.createElement("ul", {
-    className: styles$E['vitro-link-list']
+    className: styles$F['vitro-link-list']
   }, props.itemList && props.itemList.map(function (item) {
     return React__default.createElement("li", null, React__default.createElement("a", {
       href: item.url
     }, item.text));
   })), React__default.createElement("div", {
-    className: styles$E['vitro-copyright']
+    className: styles$F['vitro-copyright']
   }, props.copyright));
 };
 
@@ -63303,11 +63333,11 @@ var FIELD_NAME;
 var Login = function Login(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   return React__default.createElement("div", {
-    className: styles$E['vitro-login-layout']
+    className: styles$F['vitro-login-layout']
   }, React__default.createElement("div", {
-    className: styles$E['vitro-login']
+    className: styles$F['vitro-login']
   }, React__default.createElement(Image, {
-    className: styles$E['vitro-logo'],
+    className: styles$F['vitro-logo'],
     defaultUrl: props.logo
   }), React__default.createElement(LoginContent, null, props.children)), React__default.createElement(LoginFooter, {
     copyright: props.copyright || localeService.create(LOCALE$4.COPYRIGHT),
@@ -63315,18 +63345,18 @@ var Login = function Login(props) {
   }));
 };
 
-var styles$F = {"vitro-label":"_label_vitro-label_it8WNUE","vitro-inline-label":"_label_vitro-inline-label_1TMnPWg","vitro-required":"_label_vitro-required_2-bSGif"};
+var styles$G = {"vitro-label":"_label_vitro-label_it8WNUE","vitro-inline-label":"_label_vitro-inline-label_1TMnPWg","vitro-required":"_label_vitro-required_2-bSGif"};
 
 var Label = React.forwardRef(function (props, ref) {
   var content = React__default.createElement(React__default.Fragment, null, props.text, props.isRequired && React__default.createElement("span", {
-    className: styles$F['vitro-required']
+    className: styles$G['vitro-required']
   }, CTRL.ASTERISK));
   return props.isInline === false ? React__default.createElement(FlexBox, {
     ref: ref,
-    className: styles$F['vitro-label'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$G['vitro-label'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, content) : React__default.createElement("div", {
     ref: ref,
-    className: styles$F['vitro-inline-label'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$G['vitro-inline-label'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     style: props.width ? {
       width: props.width + UNIT.PX
     } : undefined
@@ -63338,7 +63368,7 @@ var POSITION;
   POSITION["LEFT"] = "left";
 })(POSITION || (POSITION = {}));
 
-var styles$G = {"vitro-control":"_checkbox_vitro-control_DfB5DDM","vitro-checkbox-content":"_checkbox_vitro-checkbox-content_2fBG1zl","vitro-label":"_checkbox_vitro-label_qZxCbCP","vitro-left-label":"_checkbox_vitro-left-label_Uu1Tp31"};
+var styles$H = {"vitro-control":"_checkbox_vitro-control_DfB5DDM","vitro-checkbox-content":"_checkbox_vitro-checkbox-content_2fBG1zl","vitro-label":"_checkbox_vitro-label_qZxCbCP","vitro-left-label":"_checkbox_vitro-left-label_Uu1Tp31"};
 
 var Checkbox = React.forwardRef(function (props, ref) {
   var _useState = React.useState(props.value ? true : false),
@@ -63367,14 +63397,14 @@ var Checkbox = React.forwardRef(function (props, ref) {
     props.onChange && props.onChange(!value, props.name);
     _setValue(!value);
   };
-  var className = styles$G['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$G['vitro-left-label'] : CTRL.EMPTY) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY);
+  var className = styles$H['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$H['vitro-left-label'] : CTRL.EMPTY) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY);
   return React__default.createElement("div", {
     className: className
   }, props.labelPosition === POSITION.LEFT && React__default.createElement(Label, {
     text: props.label,
-    className: styles$G['vitro-label']
+    className: styles$H['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$G['vitro-checkbox-content']
+    className: styles$H['vitro-checkbox-content']
   }, React__default.createElement("input", {
     ref: checkboxRef,
     disabled: props.isDisabled,
@@ -63384,7 +63414,7 @@ var Checkbox = React.forwardRef(function (props, ref) {
     onChange: onChange
   }), props.labelPosition !== POSITION.LEFT && React__default.createElement(Label, {
     text: props.label,
-    className: styles$G['vitro-label']
+    className: styles$H['vitro-label']
   })));
 });
 
@@ -63500,15 +63530,15 @@ var ValueTooltip = React.forwardRef(function (props, ref) {
   }), props.children);
 });
 
-var styles$H = {"vitro-error-message":"_error-message_vitro-error-message_2lHJjgO"};
+var styles$I = {"vitro-error-message":"_error-message_vitro-error-message_2lHJjgO"};
 
 var ErrorMessage = function ErrorMessage(props) {
   return React__default.createElement("span", {
-    className: styles$H['vitro-error-message'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$I['vitro-error-message'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, props.text);
 };
 
-var styles$I = {"vitro-copy-button":"_copy-button_vitro-copy-button_1_JmPVH"};
+var styles$J = {"vitro-copy-button":"_copy-button_vitro-copy-button_1_JmPVH"};
 
 var CopyButton = function CopyButton(props) {
   var copy = function copy() {
@@ -63546,7 +63576,7 @@ var CopyButton = function CopyButton(props) {
     }
   };
   return React__default.createElement(ImageButton, {
-    className: styles$I['vitro-copy-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$J['vitro-copy-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     onClick: copy
   });
 };
@@ -64082,7 +64112,7 @@ var MAX_LENGTH;
   MAX_LENGTH[MAX_LENGTH["SINGLELINE"] = 255] = "SINGLELINE";
 })(MAX_LENGTH || (MAX_LENGTH = {}));
 
-var styles$J = {"vitro-control":"_input_vitro-control_1DmPFkF","vitro-read-only":"_input_vitro-read-only_3f-cBbK","vitro-label":"_input_vitro-label_2XBESiY","vitro-focus":"_input_vitro-focus_1txynr8","vitro-error":"_input_vitro-error_1T3dLzB","vitro-left-label":"_input_vitro-left-label_D9Fpvpd","vitro-error-message":"_input_vitro-error-message_349uWKt","vitro-copy-button":"_input_vitro-copy-button_3wNhQ24","vitro-tooltip":"_input_vitro-tooltip_2DcJtbX"};
+var styles$K = {"vitro-control":"_input_vitro-control_1DmPFkF","vitro-read-only":"_input_vitro-read-only_3f-cBbK","vitro-label":"_input_vitro-label_2XBESiY","vitro-focus":"_input_vitro-focus_1txynr8","vitro-error":"_input_vitro-error_1T3dLzB","vitro-left-label":"_input_vitro-left-label_D9Fpvpd","vitro-error-message":"_input_vitro-error-message_349uWKt","vitro-copy-button":"_input_vitro-copy-button_3wNhQ24","vitro-tooltip":"_input_vitro-tooltip_2DcJtbX"};
 
 var Input = React.forwardRef(function (props, ref) {
   var control;
@@ -64102,7 +64132,7 @@ var Input = React.forwardRef(function (props, ref) {
     setInputValue(value);
   }, [props.value]);
   React.useEffect(function () {
-    setState(props.errorMessage || props.isError ? styles$J['vitro-error'] : CTRL.EMPTY);
+    setState(props.errorMessage || props.isError ? styles$K['vitro-error'] : CTRL.EMPTY);
   }, [props.errorMessage, props.isError]);
   React.useEffect(function () {
     var jsonStyle = {};
@@ -64112,7 +64142,7 @@ var Input = React.forwardRef(function (props, ref) {
     setStyle(jsonStyle);
   }, [props.height, props.minHeight, props.maxHeight]);
   React.useEffect(function () {
-    if (state === styles$J['vitro-focus'] && inputRef.current && document.activeElement !== inputRef.current) {
+    if (state === styles$K['vitro-focus'] && inputRef.current && document.activeElement !== inputRef.current) {
       inputRef.current.focus();
     }
   }, [state]);
@@ -64148,7 +64178,7 @@ var Input = React.forwardRef(function (props, ref) {
     }
   };
   var setStateOnBlur = function setStateOnBlur() {
-    setState(props.errorMessage || props.isError ? styles$J['vitro-error'] : CTRL.EMPTY);
+    setState(props.errorMessage || props.isError ? styles$K['vitro-error'] : CTRL.EMPTY);
   };
   var onBlur = function onBlur(e) {
     var _valueTooltipRef$curr, _valueTooltipRef$curr2;
@@ -64162,7 +64192,7 @@ var Input = React.forwardRef(function (props, ref) {
   var onFocus = function onFocus(e) {
     var _valueTooltipRef$curr3, _inputRef$current;
     (_valueTooltipRef$curr3 = valueTooltipRef.current) === null || _valueTooltipRef$curr3 === void 0 ? void 0 : _valueTooltipRef$curr3.setIsShow(false);
-    setState(styles$J['vitro-focus']);
+    setState(styles$K['vitro-focus']);
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     if (props.onFocus) {
       props.onFocus(e);
@@ -64245,19 +64275,19 @@ var Input = React.forwardRef(function (props, ref) {
     });
     if (props.isIcon) {
       control = React__default.createElement("div", {
-        className: styles$J['vitro-icon-control'] + CTRL.SPACE + state
+        className: styles$K['vitro-icon-control'] + CTRL.SPACE + state
       }, input);
     } else {
       control = input;
     }
   }
   var getClassName = function getClassName() {
-    var classList = [styles$J['vitro-control'], props.className];
+    var classList = [styles$K['vitro-control'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$J['vitro-read-only']);
+      classList.push(styles$K['vitro-read-only']);
     }
     if (props.labelPosition === POSITION.LEFT) {
-      classList.push(styles$J['vitro-left-label']);
+      classList.push(styles$K['vitro-left-label']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -64266,7 +64296,7 @@ var Input = React.forwardRef(function (props, ref) {
     containerRef: inputRef,
     text: props.isMultiline || !props.value ? CTRL.EMPTY : props.value,
     placement: PLACEMENT.BOTTOM,
-    className: styles$J['vitro-tooltip'],
+    className: styles$K['vitro-tooltip'],
     ref: valueTooltipRef
   }, React__default.createElement("div", {
     className: getClassName()
@@ -64274,13 +64304,13 @@ var Input = React.forwardRef(function (props, ref) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$J['vitro-label']
+    className: styles$K['vitro-label']
   }), control, props.isReadOnly && props.isShowCopyButton !== false ? React__default.createElement(CopyButton, {
-    className: styles$J['vitro-copy-button'],
+    className: styles$K['vitro-copy-button'],
     value: inputValue
   }) : null, props.children, props.errorMessage && React__default.createElement(ErrorMessage, {
     text: props.errorMessage,
-    className: styles$J['vitro-error-message']
+    className: styles$K['vitro-error-message']
   })));
 });
 
@@ -64290,22 +64320,22 @@ var TYPE;
   TYPE["PASSWORD"] = "password";
 })(TYPE || (TYPE = {}));
 
-var styles$K = {"vitro-button-show-password":"_password-input_vitro-button-show-password_2jL4nM-","vitro-button-hide-password":"_password-input_vitro-button-hide-password_vPoUeVl"};
+var styles$L = {"vitro-button-show-password":"_password-input_vitro-button-show-password_2jL4nM-","vitro-button-hide-password":"_password-input_vitro-button-hide-password_vPoUeVl"};
 
 var PasswordInput = React.forwardRef(function (props, ref) {
   var _useState = React.useState(TYPE.PASSWORD),
     type = _useState[0],
     setType = _useState[1];
-  var _useState2 = React.useState(styles$K['vitro-button-show-password']),
+  var _useState2 = React.useState(styles$L['vitro-button-show-password']),
     icon = _useState2[0],
     setIcon = _useState2[1];
   var togglePassword = function togglePassword() {
     if (type === TYPE.PASSWORD) {
       setType(TYPE.TEXT);
-      setIcon(styles$K['vitro-button-hide-password']);
+      setIcon(styles$L['vitro-button-hide-password']);
     } else {
       setType(TYPE.PASSWORD);
-      setIcon(styles$K['vitro-button-show-password']);
+      setIcon(styles$L['vitro-button-show-password']);
     }
   };
   return React__default.createElement(Input, Object.assign({}, props, {
@@ -64317,17 +64347,6 @@ var PasswordInput = React.forwardRef(function (props, ref) {
   }));
 });
 
-var styles$L = {"vitro-link":"_link_vitro-link_2ePaXvd"};
-
-var Link = function Link(props) {
-  return React__default.createElement("a", {
-    className: styles$L['vitro-link'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
-    href: props.href,
-    onClick: props.href ? function () {} : props.onClick,
-    target: props.target
-  }, props.text);
-};
-
 var styles$M = {"vitro-submit-button":"_login-submit-button_vitro-submit-button_1TFkn8x"};
 
 var LoginSubmitButton = function LoginSubmitButton(props) {
@@ -65253,7 +65272,7 @@ var MODIFIER;
   MODIFIER["FLIP"] = "flip";
 })(MODIFIER || (MODIFIER = {}));
 
-var styles$W = {"vitro-overlay":"_overlay_vitro-overlay_3SpYfCG","vitro-dropdown-arrow":"_overlay_vitro-dropdown-arrow_33kJJVJ"};
+var styles$W = {"vitro-overlay":"_overlay_vitro-overlay_3SpYfCG","vitro-dropdown-arrow":"_overlay_vitro-dropdown-arrow_33kJJVJ","vitro-visibility-hidden":"_overlay_vitro-visibility-hidden_1zcpvxJ"};
 
 var Overlay$2 = React.forwardRef(function (props, ref) {
   var _useState = React.useState(null),
@@ -65268,6 +65287,11 @@ var Overlay$2 = React.forwardRef(function (props, ref) {
   var _useState4 = React.useState(),
     popperConfig = _useState4[0],
     setPopperConfig = _useState4[1];
+  var _useState5 = React.useState(1),
+    zIndex = _useState5[0],
+    setZIndex = _useState5[1];
+  var overlayRef = React.useRef(null);
+  var onEnteredFuncRef = React.useRef();
   React.useImperativeHandle(ref, function () {
     return {
       setTarget: function setTarget(target) {
@@ -65275,25 +65299,29 @@ var Overlay$2 = React.forwardRef(function (props, ref) {
       },
       setStyle: function setStyle(style) {
         _setStyle(style);
+      },
+      setOnEntered: function setOnEntered(onEntered) {
+        onEnteredFuncRef.current = onEntered;
       }
     };
   });
   React.useEffect(function () {
-    if (props.isFlip && props.isVertical) {
+    if (props.isFlip !== false && !props.placement || props.placement && props.allowedAutoPlacements) {
       setPopperConfig({
         modifiers: [{
           name: MODIFIER.FLIP,
           options: {
-            allowedAutoPlacements: [[exports.PLACEMENT.TOP, exports.PLACEMENT.START].join(CTRL.DASH), [exports.PLACEMENT.BOTTOM, exports.PLACEMENT.START].join(CTRL.DASH)],
+            allowedAutoPlacements: props.allowedAutoPlacements || [[exports.PLACEMENT.TOP, exports.PLACEMENT.END].join(CTRL.DASH), [exports.PLACEMENT.BOTTOM, exports.PLACEMENT.END].join(CTRL.DASH)],
             flipVariations: false
           }
         }]
       });
     }
-  }, []);
+  }, [props.isFlip, props.allowedAutoPlacements, props.placement]);
   React.useEffect(function () {
     if (props.target) {
       _setTarget(props.target);
+      setZIndex(getZIndex(props.target));
     }
   }, [props.target]);
   React.useEffect(function () {
@@ -65308,29 +65336,58 @@ var Overlay$2 = React.forwardRef(function (props, ref) {
       setContainer(getContainer(target));
     }
   }, [props.container, target]);
-  var getContainer = function getContainer(el) {
-    for (; el && el !== document; el = el.parentNode) {
+  var getContainer = function getContainer(target) {
+    var parent = findParentByCondition(target, function (el) {
       var _el$dataset;
-      if (((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.type) === 'app') {
-        return el;
+      return ((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.type) === 'app';
+    });
+    return parent || document.body;
+  };
+  var getZIndex = function getZIndex(target) {
+    var parent = findParentByCondition(target, function (el) {
+      var compStyle = window.getComputedStyle(el);
+      if (+compStyle.zIndex >= 0 && compStyle.position !== 'absolute') {
+        return true;
+      }
+      return false;
+    });
+    if (parent) {
+      return +window.getComputedStyle(parent).zIndex;
+    }
+    return 1;
+  };
+  var findParentByCondition = function findParentByCondition(target, condition) {
+    for (; target && target !== document; target = target.parentNode) {
+      if (condition(target)) {
+        return target;
       }
     }
-    return document.body;
   };
-  var className = [styles$W['vitro-overlay'], props.className || CTRL.EMPTY, props.isShowArrow ? styles$W['vitro-dropdown-arrow'] : CTRL.EMPTY].join(CTRL.SPACE);
-  if (!target || !container) {
+  var onEntered = function onEntered(element, isEntered) {
+    if (element) {
+      element.style.zIndex = zIndex.toString();
+      element.classList.remove(styles$W['vitro-visibility-hidden']);
+    }
+    if (onEnteredFuncRef.current) {
+      onEnteredFuncRef.current(element, isEntered);
+    }
+  };
+  var className = [styles$W['vitro-overlay'], styles$W['vitro-visibility-hidden'], props.className || CTRL.EMPTY, props.isShowArrow ? styles$W['vitro-dropdown-arrow'] : CTRL.EMPTY].join(CTRL.SPACE);
+  if (!container || !target) {
     return null;
   }
   return React__default.createElement(Overlay$1, {
     show: props.isShow,
     target: target,
     container: container,
-    placement: props.placement || (props.isFlip && props.isVertical ? [exports.PLACEMENT.AUTO, exports.PLACEMENT.START].join(CTRL.DASH) : exports.PLACEMENT.AUTO),
-    flip: props.isFlip ? true : false,
-    popperConfig: popperConfig
+    placement: props.placement || (props.isFlip !== false ? [exports.PLACEMENT.AUTO, exports.PLACEMENT.END].join(CTRL.DASH) : exports.PLACEMENT.AUTO),
+    flip: props.isFlip === false ? false : true,
+    popperConfig: popperConfig,
+    onEntered: onEntered
   }, React__default.createElement("div", {
     className: className,
-    style: style
+    style: style,
+    ref: overlayRef
   }, props.children));
 });
 
@@ -65413,8 +65470,7 @@ var ValueList = function ValueList(props) {
     placement: props.placement,
     isFlip: props.isFlip,
     className: valueListStyles['vitro-value-list'],
-    style: style ? style : {},
-    isVertical: true
+    style: style ? style : {}
   }, React__default.createElement("div", {
     onMouseDown: onMouseDown
   }, React__default.createElement(ScrollBar, {
@@ -66040,16 +66096,16 @@ var MODE;
   MODE[MODE["TOGGLED_HOVERED"] = 1] = "TOGGLED_HOVERED";
   MODE[MODE["PINNED"] = 2] = "PINNED";
 })(MODE || (MODE = {}));
-var TARGET$1;
+var TARGET$2;
 (function (TARGET) {
   TARGET["BLANK"] = "_blank";
   TARGET["SELF"] = "_self";
-})(TARGET$1 || (TARGET$1 = {}));
+})(TARGET$2 || (TARGET$2 = {}));
 
 var SidebarConstants = {
     __proto__: null,
     get MODE () { return MODE; },
-    get TARGET () { return TARGET$1; }
+    get TARGET () { return TARGET$2; }
 };
 
 var WIDTH_AUTO = 'auto';
@@ -66116,7 +66172,7 @@ var LinkItem$1 = function LinkItem(props) {
       return setIsHover(false);
     },
     href: props.isDisabled ? undefined : props.href,
-    target: props.isExternal ? TARGET$1.BLANK : TARGET$1.SELF,
+    target: props.isExternal ? TARGET$2.BLANK : TARGET$2.SELF,
     className: className
   }, React__default.createElement(Item$2, Object.assign({}, props, {
     isHover: isHover || isActive
@@ -67497,8 +67553,9 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
   }) : condition.text), React__default.createElement(Overlay$2, {
     isShow: showSelectList,
     isFlip: true,
+    placement: [exports.PLACEMENT.AUTO, exports.PLACEMENT.START].join(CTRL.DASH),
+    allowedAutoPlacements: [[exports.PLACEMENT.BOTTOM, exports.PLACEMENT.START].join(CTRL.DASH), [exports.PLACEMENT.TOP, exports.PLACEMENT.START].join(CTRL.DASH)],
     target: ref.current,
-    placement: exports.PLACEMENT.BOTTOM + CTRL.DASH + exports.PLACEMENT.START,
     className: styles$1g['vitro-condition-list-container']
   }, React__default.createElement(List, {
     ref: listRef,
@@ -67861,7 +67918,6 @@ var CriterionFieldIterator = function CriterionFieldIterator(props) {
     changedFieldValueMap: changedFieldValueMap,
     componentMap: componentMap,
     onChange: onChange,
-    isVisibleOverflow: true,
     isClearChangedFieldValueMap: props.isClearChangedFieldValueMap,
     className: styles$1j['vitro-field-iterator'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }) : React__default.createElement(ScrollBar, {
@@ -67872,7 +67928,6 @@ var CriterionFieldIterator = function CriterionFieldIterator(props) {
     changedFieldValueMap: changedFieldValueMap,
     componentMap: componentMap,
     onChange: onChange,
-    isVisibleOverflow: true,
     isClearChangedFieldValueMap: props.isClearChangedFieldValueMap,
     className: styles$1j['vitro-field-iterator'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   })));
@@ -68234,11 +68289,12 @@ var AddFieldButton = React.forwardRef(function (props, ref) {
     imageClassName: props.imageClassName
   }), React__default.createElement(Overlay$2, {
     isShow: props.isShowAddFieldDialog,
-    isFlip: props.isMobileView,
+    isFlip: props.isFlip,
     target: addFieldButtonRef.current,
     container: (_props$filterContaine = props.filterContainerRef) !== null && _props$filterContaine !== void 0 && _props$filterContaine.current ? props.filterContainerRef.current : undefined,
-    placement: props.isMobileView ? exports.PLACEMENT.BOTTOM + CTRL.DASH + exports.PLACEMENT.START : exports.PLACEMENT.RIGHT + CTRL.DASH + exports.PLACEMENT.START,
-    className: styles$1n['vitro-add-field-dialog']
+    placement: props.isMobileView ? undefined : exports.PLACEMENT.AUTO + CTRL.DASH + exports.PLACEMENT.START,
+    className: styles$1n['vitro-add-field-dialog'],
+    allowedAutoPlacements: props.isMobileView ? undefined : [[exports.PLACEMENT.RIGHT, exports.PLACEMENT.START].join(CTRL.DASH), [exports.PLACEMENT.RIGHT, exports.PLACEMENT.END].join(CTRL.DASH)]
   }, React__default.createElement(List$1, {
     ref: addFieldListRef,
     itemList: props.fieldList,
@@ -68276,7 +68332,6 @@ var Search = function Search(props) {
     setState = _useState8[1];
   var addFieldComponentRef = React.useRef(null);
   var searchRef = React.useRef(null);
-  var filterContainerRef = React.useRef(null);
   React.useEffect(function () {
     window.addEventListener(exports.EVENT.KEYDOWN, onEscClick, false);
     return function () {
@@ -68512,8 +68567,7 @@ var Search = function Search(props) {
     });
   };
   var content = React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$1n['vitro-filter-container'],
-    ref: filterContainerRef
+    className: styles$1n['vitro-filter-container']
   }, React__default.createElement(CriterionFieldIterator, {
     fieldList: filterFieldList,
     valueList: selectedSearchCriterionList,
@@ -68534,7 +68588,6 @@ var Search = function Search(props) {
     fieldList: checkboxFieldList,
     onFieldListChange: onFieldListChange,
     isAllFieldsVisible: props.isAllFieldsVisible,
-    filterContainerRef: filterContainerRef,
     onBlur: onBlurAddFieldDialog,
     isSearch: true
   }), !props.isMobileView && React__default.createElement(ButtonGroup, {
@@ -68579,8 +68632,7 @@ var Search = function Search(props) {
     isDismissible: true
   }, content) : React__default.createElement(Overlay$2, {
     isShow: true,
-    placement: exports.PLACEMENT.BOTTOM + CTRL.DASH + exports.PLACEMENT.END,
-    target: searchRef.current || undefined,
+    target: searchRef.current,
     className: styles$1n['vitro-settings-dialog']
   }, content)));
 };
@@ -69174,10 +69226,6 @@ var LOCALE$a;
   LOCALE["TOOLTIP_OPEN"] = "app.common.linkInput.tooltip.open";
 })(LOCALE$a || (LOCALE$a = {}));
 
-var TARGET$2 = function TARGET() {};
-TARGET$2.BLANK = '_blank';
-TARGET$2.SELF = '_self';
-
 var styles$1D = {"vitro-link-input":"_link-input_vitro-link-input_1FBo8kO","vitro-edit-mode":"_link-input_vitro-edit-mode_2HhUoeO","vitro-read-only":"_link-input_vitro-read-only_AG9_cYJ","vitro-control":"_link-input_vitro-control_1MGkxWi","vitro-edit-button":"_link-input_vitro-edit-button_1PMQnWv"};
 
 var LinkInput = React.forwardRef(function (props, ref) {
@@ -69243,7 +69291,7 @@ var LinkInput = React.forwardRef(function (props, ref) {
       e.stopPropagation();
       var link = document.createElement('a');
       link.href = value.uri;
-      link.target = TARGET$2.BLANK;
+      link.target = TARGET$1.BLANK;
       link.click();
       link.remove();
     }