@majoo-ui/react 1.54.1-rc.2 → 1.54.1

package/index.esm.js

@@ -3584,7 +3584,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   onClick: e => {
     e.preventDefault();
     e.stopPropagation();
-    value == null ? void 0 : value.onRemove();
+    value === null || value === void 0 ? void 0 : value.onRemove();
   },
   __self: undefined,
   __source: {
@@ -3661,7 +3661,7 @@ const SingleTagBanner = props => {
     onClick: e => {
       e.preventDefault();
       e.stopPropagation();
-      props == null ? void 0 : props.onRemove();
+      props === null || props === void 0 ? void 0 : props.onRemove();
     },
     closeCenter: !props.title && !props.link,
     __self: undefined,
@@ -5703,7 +5703,7 @@ const Checkbox = _ref => {
   const [isChecked, setChecked] = useState(false);
   useEffect(() => {
     const checkValue = context && context.checkedItems.includes(value) || checked || indeterminate;
-    setChecked(checkValue != null ? checkValue : false);
+    setChecked(checkValue !== null && checkValue !== void 0 ? checkValue : false);
   }, [checked, indeterminate, context]);
   return /*#__PURE__*/React__default.createElement(StyledCheckbox, _extends({
     id: id,
@@ -6311,15 +6311,15 @@ const InputTextArea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const textareaRef = useRef(null);
   useEffect(() => {
     if (textareaRef.current) {
-      textareaRef.current.style.height = '60px';
-      const scrollHeight = textareaRef == null ? void 0 : textareaRef.current.scrollHeight;
-      textareaRef.current.style.height = scrollHeight + 20 + 'px';
+      textareaRef.current.style.height = '50px';
+      const scrollHeight = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current.scrollHeight;
+      textareaRef.current.style.height = scrollHeight + 5 + 'px';
     }
   }, []);
 
   function handleKeyDown(e) {
-    e.target.style.height = '60px';
-    e.target.style.height = `${e.target.scrollHeight + 20}px`;
+    e.target.style.height = '50px';
+    e.target.style.height = `${e.target.scrollHeight + 5}px`;
   }
 
   return /*#__PURE__*/React__default.createElement(StyledTextArea, _extends({
@@ -6354,7 +6354,7 @@ const InputRadioContext = /*#__PURE__*/React__default.createContext();
 var _jsxFileName$F = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadioGroup.js";
 const RadioGroup = styled(RadioGroupPrimitive.Root, Flex$1);
 function InputRadioGroup(props) {
-  return (props == null ? void 0 : props.children) && /*#__PURE__*/React__default.createElement(InputRadioContext.Provider, {
+  return (props === null || props === void 0 ? void 0 : props.children) && /*#__PURE__*/React__default.createElement(InputRadioContext.Provider, {
     value: props,
     __self: this,
     __source: {
@@ -6369,7 +6369,7 @@ function InputRadioGroup(props) {
       lineNumber: 14,
       columnNumber: 9
     }
-  }), React__default.Children.map(props == null ? void 0 : props.children, child => /*#__PURE__*/React__default.cloneElement(child, {
+  }), React__default.Children.map(props === null || props === void 0 ? void 0 : props.children, child => /*#__PURE__*/React__default.cloneElement(child, {
     style: Object.assign({}, child.props.style, {
       opacity: 1
     })
@@ -6583,7 +6583,7 @@ const InputRadio = _ref => {
     value,
     outlined
   }) => {
-    const checked = value != null ? value : defaultValue;
+    const checked = value !== null && value !== void 0 ? value : defaultValue;
     return /*#__PURE__*/React__default.createElement(Container$8, {
       direction: "column",
       outlined: outlined,
@@ -6833,7 +6833,7 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     size: size,
     isInvalid: isInvalid,
     readOnly: readOnly,
-    isReadOnly: readOnly && !(props != null && props.inputGroup),
+    isReadOnly: readOnly && !(props !== null && props !== void 0 && props.inputGroup),
     disabled: disabled
   }, props, {
     __self: undefined,
@@ -7649,18 +7649,18 @@ function TagsInput(_ref) {
   const addTags = event => {
     if (event.key === 'Enter' && event.target.value !== '' && max !== tags.length) {
       if (tags.find(tag => tag.toLowerCase() === event.target.value.toLowerCase())) {
-        onEnter == null ? void 0 : onEnter({
+        onEnter === null || onEnter === void 0 ? void 0 : onEnter({
           key: 'duplicate',
           value: event.target.value
         });
         return;
       }
 
-      if (pattern && pattern != null && pattern.regex) {
+      if (pattern && pattern !== null && pattern !== void 0 && pattern.regex) {
         const regex = new RegExp(pattern.regex);
 
         if (!regex.test(event.target.value)) {
-          onEnter == null ? void 0 : onEnter({
+          onEnter === null || onEnter === void 0 ? void 0 : onEnter({
             key: 'error',
             value: event.target.value
           });
@@ -7670,7 +7670,7 @@ function TagsInput(_ref) {
       }
 
       setRegexError(false);
-      onEnter == null ? void 0 : onEnter({
+      onEnter === null || onEnter === void 0 ? void 0 : onEnter({
         key: 'success',
         value: event.target.value
       });
@@ -7683,7 +7683,7 @@ function TagsInput(_ref) {
     if (disabled || readOnly) {
       return tags;
     } else if (key === 'removeTag' || key === 'Backspace') {
-      onRemoveItem == null ? void 0 : onRemoveItem(tags[index]);
+      onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(tags[index]);
       setTags([...tags.filter(tag => tags.indexOf(tag) !== index)]);
     }
   }; // const handleErrorMessage = () => {
@@ -7731,7 +7731,7 @@ function TagsInput(_ref) {
       lineNumber: 180,
       columnNumber: 9
     }
-  })), regexError && pattern && (pattern != null && pattern.errorMessage ? /*#__PURE__*/React__default.createElement(FormHelper, {
+  })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default.createElement(FormHelper, {
     color: "red",
     __self: this,
     __source: {
@@ -8788,7 +8788,8 @@ function InputSelect(_a) {
           suppressRefError: true
         }), {
           css: {
-            display: isOpen ? 'block' : 'none'
+            display: isOpen ? 'block' : 'none',
+            zIndex: '$popover'
           },
           placement: placement
         }, {
@@ -9552,10 +9553,10 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         return setItems(sortValue);
       }
     } else {
-      let filterItems = option == null ? void 0 : option.filter(item => {
-        var _item$name, _item$name$toLowerCas;
+      let filterItems = option === null || option === void 0 ? void 0 : option.filter(item => {
+        var _item$name, _item$name$toLowerCas, _item$name$toLowerCas2, _input$toLocaleLowerC;
 
-        return item == null ? void 0 : (_item$name = item.name) == null ? void 0 : (_item$name$toLowerCas = _item$name.toLowerCase()) == null ? void 0 : _item$name$toLowerCas.includes == null ? void 0 : _item$name$toLowerCas.includes(input == null ? void 0 : input.toLocaleLowerCase == null ? void 0 : input.toLocaleLowerCase());
+        return item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : (_item$name$toLowerCas = _item$name.toLowerCase()) === null || _item$name$toLowerCas === void 0 ? void 0 : (_item$name$toLowerCas2 = _item$name$toLowerCas.includes) === null || _item$name$toLowerCas2 === void 0 ? void 0 : _item$name$toLowerCas2.call(_item$name$toLowerCas, input === null || input === void 0 ? void 0 : (_input$toLocaleLowerC = input.toLocaleLowerCase) === null || _input$toLocaleLowerC === void 0 ? void 0 : _input$toLocaleLowerC.call(input));
       });
       setItems(filterItems);
     }
@@ -9565,9 +9566,9 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     if (disabled || readOnly) {
       return selectedValue;
     } else {
-      if ((selected == null ? void 0 : selected.id) === 'counter') {
+      if ((selected === null || selected === void 0 ? void 0 : selected.id) === 'counter') {
         setSelectedValue([]);
-        onChange == null ? void 0 : onChange([]);
+        onChange === null || onChange === void 0 ? void 0 : onChange([]);
 
         for (let i = 0; i < selectedValue.length; i++) {
           removeSelectedItem(selectedValue[i]);
@@ -9578,7 +9579,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         setSelectedValue(filterItems);
 
         if (selected.id !== '!all') {
-          onChange == null ? void 0 : onChange(filterItems);
+          onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
         }
       }
     }
@@ -9623,7 +9624,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
                     removeSelectedItem(item);
                   });
                   setSelectedValue([]);
-                  onChange == null ? void 0 : onChange([]);
+                  onChange === null || onChange === void 0 ? void 0 : onChange([]);
                 } else {
                   removeItem(selectedItem);
                 }
@@ -9638,12 +9639,12 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
                   itemIds.push(item.id);
                 });
                 setSelectedValue(itemIds);
-                onChange == null ? void 0 : onChange(itemIds.slice(1));
+                onChange === null || onChange === void 0 ? void 0 : onChange(itemIds.slice(1));
               } else {
                 addSelectedItem(selectedItem);
                 setSelectedValue([...selectedValue, selectedItem.id]);
                 const filteredSelectedValues = selectedValue.filter(val => val !== '!all');
-                onChange == null ? void 0 : onChange([...filteredSelectedValues, selectedItem.id]);
+                onChange === null || onChange === void 0 ? void 0 : onChange([...filteredSelectedValues, selectedItem.id]);
               }
 
               selectItem(null);
@@ -9795,7 +9796,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       lineNumber: 559,
       columnNumber: 11
     }
-  }, selectedItems == null ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : _selectedItems$filter.map((selectedItem, index) => /*#__PURE__*/React__default.createElement(Tag, _extends({
+  }, selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : _selectedItems$filter.map((selectedItem, index) => /*#__PURE__*/React__default.createElement(Tag, _extends({
     disabled: disabled,
     isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
     size: size,
@@ -9819,7 +9820,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       lineNumber: 563,
       columnNumber: 17
     }
-  }), selectedItem.name))), showSelectedTag && showCounter && Boolean(selectedItems == null ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
+  }), selectedItem.name))), showSelectedTag && showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
     disabled: disabled,
     __self: undefined,
     __source: {
@@ -9832,7 +9833,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       maxWidth: '150px !important'
     },
     disabled: disabled,
-    isRemovable: readOnly || disabled || Boolean(selectedItems == null ? void 0 : selectedItems.length),
+    isRemovable: readOnly || disabled || Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length),
     size: size,
     readOnly: readOnly // {...getSelectedItemProps({ selectedItem, index })}
     ,
@@ -9854,7 +9855,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       lineNumber: 586,
       columnNumber: 13
     }
-  }, `${selectedItems == null ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
+  }, `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
     placement: placement,
     css: {
       display: isOpen && disabled === false ? 'block' : 'none',
@@ -9922,7 +9923,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       lineNumber: 640,
       columnNumber: 27
     }
-  }), showSelectAll && (item == null ? void 0 : item.id) === '!all' && selectedValue != null && selectedValue.length && (selectedValue == null ? void 0 : selectedValue.length) < (items == null ? void 0 : items.length) ? /*#__PURE__*/React__default.createElement(IndeterminateFilled, {
+  }), showSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default.createElement(IndeterminateFilled, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
@@ -11166,8 +11167,8 @@ const PopoverContent = ({
     ref: floating,
     style: Object.assign({
       position: strategy,
-      top: isMobile ? 0 : y != null ? y : '',
-      left: isMobile ? 0 : x != null ? x : '',
+      top: isMobile ? 0 : y !== null && y !== void 0 ? y : '',
+      left: isMobile ? 0 : x !== null && x !== void 0 ? x : '',
       zIndex: zIndices.popover
     }, style)
   }), {
@@ -12400,7 +12401,7 @@ const NotificationBadge = _ref => {
       props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   const getValue = () => {
-    let value = props == null ? void 0 : props.value;
+    let value = props === null || props === void 0 ? void 0 : props.value;
 
     if (typeof value === 'number' || parseInt(value)) {
       if (Math.sign(value) === 1 || Math.sign(value) === 0) {
@@ -17148,7 +17149,7 @@ function PaginationInfo(_ref) {
       lineNumber: 40,
       columnNumber: 11
     }
-  }, limits == null ? void 0 : limits.map(limit => /*#__PURE__*/React__default.createElement(PopoverClose, {
+  }, limits === null || limits === void 0 ? void 0 : limits.map(limit => /*#__PURE__*/React__default.createElement(PopoverClose, {
     key: limit,
     css: limitItemContainerStyle(selectedLimit === limit),
     onClick: () => onChange(limit),
@@ -17796,7 +17797,7 @@ const stickyPositionStyling = column => {
   return {};
 };
 
-const stickyShadowStyling = column => {
+const stickyShadowStyling = (column, tableScrollPosition) => {
   const cssAfter = {
     position: 'absolute',
     top: 0,
@@ -17812,12 +17813,12 @@ const stickyShadowStyling = column => {
     return column.sticky === 'left' ? {
       '&::after': Object.assign(Object.assign({}, cssAfter), {
         right: 0,
-        boxShadow: 'inset 10px 0 10px -10px #00000026'
+        boxShadow: tableScrollPosition === 'start' ? 'none' : 'inset 10px 0 10px -10px #00000026'
       })
     } : {
       '&::after': Object.assign(Object.assign({}, cssAfter), {
         left: 0,
-        boxShadow: 'inset -10px 0 10px -10px #00000026'
+        boxShadow: tableScrollPosition === 'end' ? 'none' : 'inset -10px 0 10px -10px #00000026'
       })
     };
   }
@@ -17872,6 +17873,8 @@ function Table({
 }) {
   const [limit, setLimit] = useState(rowLimit);
   const [dataRow, setDataRow] = useState({});
+  const [tableScrollPosition, setTableScrollPosition] = useState('start');
+  const [scrollAreaWidth, setScrollAreaWidth] = useState(0);
 
   const getInitialState = () => {
     const initialState = {};
@@ -17905,6 +17908,8 @@ function Table({
     autoResetSelectedRows: false,
     getRowId: showDuplicatedData ? undefined : row => row[keyId] || JSON.stringify(row)
   }, useSortBy, useExpanded, usePagination, useRowSelect, useSticky, useColumnOrder);
+  const scrollerRef = useRef(null);
+  const isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
   const {
     getTableProps,
     getTableBodyProps,
@@ -17936,9 +17941,6 @@ function Table({
     if (fetchData) fetchData(fetchParams);
   };
 
-  const scrollerRef = useRef(null);
-  const isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
-
   const renderFooter = () => jsx(Pagination, {
     limit: pageSize,
     currentPage: pageIndex + 1,
@@ -17980,43 +17982,6 @@ function Table({
     children: children
   }), void 0);
 
-  useEffect(() => {
-    if (hiddenColumns) setHiddenColumns(hiddenColumns);
-  }, [hiddenColumns]);
-  useEffect(() => {
-    if (columnOrder) setColumnOrder(columnOrder);
-  }, [columnOrder]);
-  useEffect(() => {
-    setPageSize(rowLimit);
-  }, [rowLimit]);
-  useEffect(() => {
-    gotoPage(controlledPageIndex);
-  }, [controlledPageIndex]);
-  useEffect(() => {
-    if (data && data.length > 0) doFetchData(0, isInfiniteScroll ? rowLimit : pageSize);
-  }, [sortBy]);
-  useMountedLayoutEffect(() => {
-    if (data && data.length > 0 && selectedRowIds && onSelectedChange) onSelectedChange(selectedRowIds ? Object.keys(selectedRowIds) : []);
-  }, [selectedRowIds]);
-  useEffect(() => {
-    var _a;
-
-    if (isInfiniteScroll && data.length <= rowLimit) {
-      (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-        top: 0
-      });
-    }
-  }, [data]);
-  useEffect(() => {
-    if (selectedIds && data.length > 0) {
-      const selectedIdsKeys = Object.keys(selectedIds);
-      selectedIdsKeys.map(key => {
-        toggleRowSelected(key, true);
-        return key;
-      });
-    }
-  }, [data, selectedIds]);
-
   const getOptionsMenu = () => {
     var _a, _b;
 
@@ -18064,6 +18029,47 @@ function Table({
     setDataRow(row);
   };
 
+  useLayoutEffect(() => {
+    if (scrollerRef && scrollerRef.current) {
+      setScrollAreaWidth(scrollerRef.current.scrollWidth - scrollerRef.current.clientWidth);
+    }
+  }, [scrollerRef]);
+  useEffect(() => {
+    if (hiddenColumns) setHiddenColumns(hiddenColumns);
+  }, [hiddenColumns]);
+  useEffect(() => {
+    if (columnOrder) setColumnOrder(columnOrder);
+  }, [columnOrder]);
+  useEffect(() => {
+    setPageSize(rowLimit);
+  }, [rowLimit]);
+  useEffect(() => {
+    gotoPage(controlledPageIndex);
+  }, [controlledPageIndex]);
+  useEffect(() => {
+    if (data && data.length > 0) doFetchData(0, isInfiniteScroll ? rowLimit : pageSize);
+  }, [sortBy]);
+  useMountedLayoutEffect(() => {
+    if (data && data.length > 0 && selectedRowIds && onSelectedChange) onSelectedChange(selectedRowIds ? Object.keys(selectedRowIds) : []);
+  }, [selectedRowIds]);
+  useEffect(() => {
+    var _a;
+
+    if (isInfiniteScroll && data.length <= rowLimit) {
+      (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+        top: 0
+      });
+    }
+  }, [data]);
+  useEffect(() => {
+    if (selectedIds && data.length > 0) {
+      const selectedIdsKeys = Object.keys(selectedIds);
+      selectedIdsKeys.map(key => {
+        toggleRowSelected(key, true);
+        return key;
+      });
+    }
+  }, [data, selectedIds]);
   return jsxs(Box, Object.assign({
     css: {
       position: 'relative',
@@ -18093,7 +18099,18 @@ function Table({
     }), void 0), !isMobile ? jsxs(Fragment, {
       children: [jsxs(TableContainer$3, Object.assign({
         css: css,
-        ref: scrollerRef
+        ref: scrollerRef,
+        onScroll: e => {
+          const scrollPosition = e.currentTarget.scrollLeft;
+
+          if (scrollPosition < 3) {
+            setTableScrollPosition('start');
+          } else if (scrollPosition > scrollAreaWidth - 3) {
+            setTableScrollPosition('end');
+          } else {
+            setTableScrollPosition('between');
+          }
+        }
       }, {
         children: [renderInfiniteScrollWrapper(jsxs(TableContent$3, Object.assign({}, getTableProps(), {
           children: [jsx(TableHead$3, Object.assign({
@@ -18113,7 +18130,7 @@ function Table({
                       minWidth: column.colMinWidth
                     }
                   }]), {
-                    css: Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column))
+                    css: Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition))
                   }, {
                     children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, Object.assign({
                       isSortedDesc: column.isSortedDesc,
@@ -18168,7 +18185,7 @@ function Table({
                         padding: !isContextMenu || ['expander', 'selection', 'menu', 'eye'].includes((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id) ? cell.column.accessor ? '20px 8px' : '20px 20px' : '',
                         verticalAlign: cell.column.accessor ? cellAlign : 'center',
                         cursor: onRowClick ? 'pointer' : 'unset'
-                      }, stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column)),
+                      }, stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column, tableScrollPosition)),
                       onClick: () => handleRowClick(row, i)
                     }, {
                       children: jsx(ConditionalWrapper, Object.assign({
@@ -19726,7 +19743,7 @@ const TemplateAlertFunction = props => {
       if (!props.onOpenAutoFocus) {
         e.preventDefault();
       } else {
-        props == null ? void 0 : props.onOpenAutoFocus();
+        props === null || props === void 0 ? void 0 : props.onOpenAutoFocus();
       }
     },
     __self: undefined,
@@ -19847,8 +19864,8 @@ const TemplateAlertFunction = props => {
     size: "sm",
     onClick: buttonConfirm,
     buttonType: props.dialogType,
-    disabled: props == null ? void 0 : props.disabledButton
-  }, props == null ? void 0 : props.actionButtonProps, {
+    disabled: props === null || props === void 0 ? void 0 : props.disabledButton
+  }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
@@ -19867,12 +19884,12 @@ const TemplateAlertFunction = props => {
     size: "sm",
     onClick: buttonCancel,
     css: {
-      color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$gray900 !important',
+      color: props.dialogType === 'negative' && !(props !== null && props !== void 0 && props.disabledButton) && '$gray900 !important',
       flex: props.isMobile && 1
     },
     buttonType: "ghost",
-    disabled: props == null ? void 0 : props.disabledButton
-  }, props == null ? void 0 : props.cancelButtonProps, {
+    disabled: props === null || props === void 0 ? void 0 : props.disabledButton
+  }, props === null || props === void 0 ? void 0 : props.cancelButtonProps, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
@@ -19894,8 +19911,8 @@ const TemplateAlertFunction = props => {
     css: {
       flex: props.isMobile && 1
     },
-    disabled: props == null ? void 0 : props.disabledButton
-  }, props == null ? void 0 : props.actionButtonProps, {
+    disabled: props === null || props === void 0 ? void 0 : props.disabledButton
+  }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
@@ -20055,8 +20072,8 @@ function AlertDialog(props) {
     css: {
       flex: props.isMobile && 1
     },
-    disabled: props == null ? void 0 : props.disabledButton
-  }, props == null ? void 0 : props.actionButtonProps, {
+    disabled: props === null || props === void 0 ? void 0 : props.disabledButton
+  }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
@@ -20075,12 +20092,12 @@ function AlertDialog(props) {
     size: "sm",
     onClick: props.onCancel,
     css: {
-      color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$gray900 !important',
+      color: props.dialogType === 'negative' && !(props !== null && props !== void 0 && props.disabledButton) && '$gray900 !important',
       flex: props.isMobile && 1
     },
     buttonType: "ghost",
-    disabled: props == null ? void 0 : props.disabledButton
-  }, props == null ? void 0 : props.cancelButtonProps, {
+    disabled: props === null || props === void 0 ? void 0 : props.disabledButton
+  }, props === null || props === void 0 ? void 0 : props.cancelButtonProps, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
@@ -20102,8 +20119,8 @@ function AlertDialog(props) {
     css: {
       flex: props.isMobile && 1
     },
-    disabled: props == null ? void 0 : props.disabledButton
-  }, props == null ? void 0 : props.actionButtonProps, {
+    disabled: props === null || props === void 0 ? void 0 : props.disabledButton
+  }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
@@ -22585,7 +22602,7 @@ const Upload = ({
         upload({
           url: action,
           file: newFile,
-          customBody: customBodyRequest == null ? void 0 : customBodyRequest(newFile),
+          customBody: customBodyRequest === null || customBodyRequest === void 0 ? void 0 : customBodyRequest(newFile),
           token,
           tokenKey,
           reqKey,
@@ -22608,12 +22625,12 @@ const Upload = ({
               }
             }
 
-            onChange == null ? void 0 : (_onChange = onChange({
+            onChange === null || onChange === void 0 ? void 0 : (_onChange = onChange({
               fileList: arrProgress,
               file: fileProgress,
               indexReplace: indexReplace.current,
               isReplace: indexReplace.current !== null
-            })) == null ? void 0 : (_onChange$then = _onChange.then(() => setError(null))) == null ? void 0 : _onChange$then.catch(error => setError(error.message));
+            })) === null || _onChange === void 0 ? void 0 : (_onChange$then = _onChange.then(() => setError(null))) === null || _onChange$then === void 0 ? void 0 : _onChange$then.catch(error => setError(error.message));
           }
         }).then(result => {
           var _onChange2, _onChange2$then;
@@ -22630,12 +22647,12 @@ const Upload = ({
             }
           }
 
-          onChange == null ? void 0 : (_onChange2 = onChange({
+          onChange === null || onChange === void 0 ? void 0 : (_onChange2 = onChange({
             fileList: arrSuccess,
             file: fileSuccess,
             indexReplace: indexReplace.current,
             isReplace: indexReplace.current !== null
-          })) == null ? void 0 : (_onChange2$then = _onChange2.then(() => setError(null))) == null ? void 0 : _onChange2$then.catch(error => setError(error.message));
+          })) === null || _onChange2 === void 0 ? void 0 : (_onChange2$then = _onChange2.then(() => setError(null))) === null || _onChange2$then === void 0 ? void 0 : _onChange2$then.catch(error => setError(error.message));
         }).catch(error => {
           var _onChange3, _onChange3$then;
 
@@ -22651,22 +22668,22 @@ const Upload = ({
             }
           }
 
-          onChange == null ? void 0 : (_onChange3 = onChange({
+          onChange === null || onChange === void 0 ? void 0 : (_onChange3 = onChange({
             fileList: arrError,
             file: fileError,
             indexReplace: indexReplace.current,
             isReplace: indexReplace.current !== null
-          })) == null ? void 0 : (_onChange3$then = _onChange3.then(() => setError(null))) == null ? void 0 : _onChange3$then.catch(error => setError(error.message));
+          })) === null || _onChange3 === void 0 ? void 0 : (_onChange3$then = _onChange3.then(() => setError(null))) === null || _onChange3$then === void 0 ? void 0 : _onChange3$then.catch(error => setError(error.message));
         });
       } else {
         var _onChange4, _onChange4$then;
 
-        onChange == null ? void 0 : (_onChange4 = onChange({
+        onChange === null || onChange === void 0 ? void 0 : (_onChange4 = onChange({
           fileList: arrFile,
           file: newFile,
           indexReplace: indexReplace.current,
           isReplace: indexReplace.current !== null
-        })) == null ? void 0 : (_onChange4$then = _onChange4.then(() => setError(null))) == null ? void 0 : _onChange4$then.catch(error => setError(error.message));
+        })) === null || _onChange4 === void 0 ? void 0 : (_onChange4$then = _onChange4.then(() => setError(null))) === null || _onChange4$then === void 0 ? void 0 : _onChange4$then.catch(error => setError(error.message));
       }
 
       if (indexReplace.current !== null) {
@@ -22691,24 +22708,24 @@ const Upload = ({
           // program to get the dimensions of an image
           const img = document.createElement('img');
           img.src = URL.createObjectURL(files[0]);
-          img.size = files == null ? void 0 : (_files$ = files[0]) == null ? void 0 : _files$.size;
-          img.type = files == null ? void 0 : (_files$2 = files[0]) == null ? void 0 : _files$2.type;
+          img.size = files === null || files === void 0 ? void 0 : (_files$ = files[0]) === null || _files$ === void 0 ? void 0 : _files$.size;
+          img.type = files === null || files === void 0 ? void 0 : (_files$2 = files[0]) === null || _files$2 === void 0 ? void 0 : _files$2.type;
 
           img.onload = () => {
             var _onBeforeCrop, _onBeforeCrop$then;
 
-            onBeforeCrop == null ? void 0 : (_onBeforeCrop = onBeforeCrop(img)) == null ? void 0 : (_onBeforeCrop$then = _onBeforeCrop.then(() => {
+            onBeforeCrop === null || onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop = onBeforeCrop(img)) === null || _onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop$then = _onBeforeCrop.then(() => {
               setError(null);
               toggleModal();
               setFileState(files[0]);
               setPreviewImage(URL.createObjectURL(files[0]));
-            })) == null ? void 0 : _onBeforeCrop$then.catch(error => setError(error == null ? void 0 : error.message));
+            })) === null || _onBeforeCrop$then === void 0 ? void 0 : _onBeforeCrop$then.catch(error => setError(error === null || error === void 0 ? void 0 : error.message));
           };
 
           img.onerror = error => {
             var _onBeforeCrop2, _onBeforeCrop2$then;
 
-            onBeforeCrop == null ? void 0 : (_onBeforeCrop2 = onBeforeCrop(img, error)) == null ? void 0 : (_onBeforeCrop2$then = _onBeforeCrop2.then(() => setError(null))) == null ? void 0 : _onBeforeCrop2$then.catch(error => setError(error == null ? void 0 : error.message));
+            onBeforeCrop === null || onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop2 = onBeforeCrop(img, error)) === null || _onBeforeCrop2 === void 0 ? void 0 : (_onBeforeCrop2$then = _onBeforeCrop2.then(() => setError(null))) === null || _onBeforeCrop2$then === void 0 ? void 0 : _onBeforeCrop2$then.catch(error => setError(error === null || error === void 0 ? void 0 : error.message));
           };
         } else {
           toggleModal();
@@ -22720,15 +22737,15 @@ const Upload = ({
   }
 
   function handleCrop() {
-    if (completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height && imgRef.current) {
+    if (completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height && imgRef.current) {
       imgPreview(imgRef.current, completedCrop, 1, 0, ratio).then(blob => {
-        const sizeMB = (blob == null ? void 0 : blob.size) / 1024 / 1024;
+        const sizeMB = (blob === null || blob === void 0 ? void 0 : blob.size) / 1024 / 1024;
 
         if (sizeMB < maxSizeMB || sizeMB < 1 || !imageCompression) {
           var _fileState$name;
 
-          const file = new File([blob], (fileState == null ? void 0 : (_fileState$name = fileState.name) == null ? void 0 : _fileState$name.replace(/\.[^/.]+$/, '')) + '.png', {
-            type: blob == null ? void 0 : blob.type
+          const file = new File([blob], (fileState === null || fileState === void 0 ? void 0 : (_fileState$name = fileState.name) === null || _fileState$name === void 0 ? void 0 : _fileState$name.replace(/\.[^/.]+$/, '')) + '.png', {
+            type: blob === null || blob === void 0 ? void 0 : blob.type
           });
           handleUpload([file]);
           setCrop(null);
@@ -22743,17 +22760,17 @@ const Upload = ({
           }).then(compressedFile => {
             var _fileState$name2;
 
-            const file = new File([compressedFile], (fileState == null ? void 0 : (_fileState$name2 = fileState.name) == null ? void 0 : _fileState$name2.replace(/\.[^/.]+$/, '')) + '.png', {
-              type: compressedFile == null ? void 0 : compressedFile.type
+            const file = new File([compressedFile], (fileState === null || fileState === void 0 ? void 0 : (_fileState$name2 = fileState.name) === null || _fileState$name2 === void 0 ? void 0 : _fileState$name2.replace(/\.[^/.]+$/, '')) + '.png', {
+              type: compressedFile === null || compressedFile === void 0 ? void 0 : compressedFile.type
             });
             handleUpload([file]);
             setCrop(null);
             setCompletedCrop(null);
-          }).catch(error => console.error(error == null ? void 0 : error.message));
+          }).catch(error => console.error(error === null || error === void 0 ? void 0 : error.message));
         }
 
         toggleModal();
-      }).catch(error => console.error(error == null ? void 0 : error.message));
+      }).catch(error => console.error(error === null || error === void 0 ? void 0 : error.message));
     } else {
       handleUpload([fileState]);
       toggleModal();
@@ -22784,7 +22801,7 @@ const Upload = ({
     const index = fileList.indexOf(file);
     const newFileList = fileList.slice();
     newFileList.splice(index, 1);
-    onChange == null ? void 0 : onChange({
+    onChange === null || onChange === void 0 ? void 0 : onChange({
       fileList: newFileList,
       file
     });
@@ -22812,22 +22829,22 @@ const Upload = ({
   function handleOpenFile(file) {
     var _String, _file$name;
 
-    let extension = (_String = String(file == null ? void 0 : (_file$name = file.name) == null ? void 0 : _file$name.split('.').pop())) == null ? void 0 : _String.toLowerCase();
+    let extension = (_String = String(file === null || file === void 0 ? void 0 : (_file$name = file.name) === null || _file$name === void 0 ? void 0 : _file$name.split('.').pop())) === null || _String === void 0 ? void 0 : _String.toLowerCase();
 
     if (extension === 'pdf') {
-      window.open(file == null ? void 0 : file.url);
+      window.open(file === null || file === void 0 ? void 0 : file.url);
     } else {
-      request.get(file == null ? void 0 : file.url).end((err, res) => {
+      request.get(file === null || file === void 0 ? void 0 : file.url).end((err, res) => {
         if (err) {
           console.error(err.message);
         }
 
-        if (res && res != null && res.ok) {
-          const response = res == null ? void 0 : res.text;
+        if (res && res !== null && res !== void 0 && res.ok) {
+          const response = res === null || res === void 0 ? void 0 : res.text;
           const url = window.URL.createObjectURL(new Blob([response]));
           const link = document.createElement('a');
           link.href = url;
-          link.setAttribute('download', file == null ? void 0 : file.name);
+          link.setAttribute('download', file === null || file === void 0 ? void 0 : file.name);
           document.body.appendChild(link);
           link.click();
           document.body.removeChild(link);
@@ -22897,12 +22914,12 @@ const Upload = ({
   }
 
   const renderPicture = () => {
-    return fileList == null ? void 0 : fileList.map((item, index) => {
-      if ((item == null ? void 0 : item.status) === 'uploading') {
+    return fileList === null || fileList === void 0 ? void 0 : fileList.map((item, index) => {
+      if ((item === null || item === void 0 ? void 0 : item.status) === 'uploading') {
         return /*#__PURE__*/React__default.createElement(UploadProgress, {
           key: index,
-          progress: item == null ? void 0 : item.percent,
-          loading: item == null ? void 0 : item.loading,
+          progress: item === null || item === void 0 ? void 0 : item.percent,
+          loading: item === null || item === void 0 ? void 0 : item.loading,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
@@ -22977,14 +22994,14 @@ const Upload = ({
   };
 
   const renderFile = () => {
-    return fileList == null ? void 0 : fileList.map((item, index) => {
+    return fileList === null || fileList === void 0 ? void 0 : fileList.map((item, index) => {
       var _item$name;
 
-      if ((item == null ? void 0 : item.status) === 'uploading') {
+      if ((item === null || item === void 0 ? void 0 : item.status) === 'uploading') {
         return /*#__PURE__*/React__default.createElement(UploadProgress, {
           key: index,
-          progress: item == null ? void 0 : item.percent,
-          loading: item == null ? void 0 : item.loading,
+          progress: item === null || item === void 0 ? void 0 : item.percent,
+          loading: item === null || item === void 0 ? void 0 : item.loading,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
@@ -23051,7 +23068,7 @@ const Upload = ({
           lineNumber: 661,
           columnNumber: 17
         }
-      }, ".", item == null ? void 0 : (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip$1, {
+      }, ".", item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip$1, {
         label: item.name,
         __self: undefined,
         __source: {
@@ -23223,7 +23240,7 @@ const Upload = ({
         lineNumber: 736,
         columnNumber: 11
       }
-    }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+    }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
@@ -23257,7 +23274,7 @@ const Upload = ({
         lineNumber: 742,
         columnNumber: 17
       }
-    }, placeholder != null ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
+    }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
@@ -23417,7 +23434,7 @@ const Upload = ({
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     direction: "row",
-    gap: (fileList == null ? void 0 : fileList.length) <= 1 && max === 1 ? 0 : 3,
+    gap: (fileList === null || fileList === void 0 ? void 0 : fileList.length) <= 1 && max === 1 ? 0 : 3,
     wrap: "wrap",
     css: {
       userSelect: 'none'
@@ -23674,6 +23691,8 @@ const CardMessage = styled('div', {
   color: '$textPrimary',
   fontSize: 12,
   fontWeight: 400,
+  overflowWrap: 'break-word',
+  wordWrap: 'break-word',
   variants: {
     variant: {
       sms: {
@@ -23901,8 +23920,7 @@ const Device = props => {
               border: 'none',
               width: '100%',
               height: '100%',
-              overflow: 'hidden',
-              zIndex: 1
+              zIndex: 3
             }
           }, {
             children: jsxs(Box, Object.assign({
@@ -23915,13 +23933,29 @@ const Device = props => {
                 height: "100%",
                 objectFit: props.typeDevice === 'android' ? 'fill' : 'cover',
                 src: img$g,
-                alt: "whatsapp-preview"
+                alt: "whatsapp-preview",
+                css: {
+                  borderRadius: 8
+                }
               }, void 0), jsx(Box, Object.assign({
+                className: "mobile-scrollbar",
                 css: {
                   position: 'absolute',
                   right: '5%',
                   bottom: '12%',
-                  left: '10%'
+                  left: '10%',
+                  top: '10%',
+                  overflow: 'auto',
+                  '&::-webkit-scrollbar': {
+                    width: 3
+                  },
+                  '&::-webkit-scrollbar-track': {
+                    boxShadow: 'inset 0 0 6px $gray200'
+                  },
+                  '&::-webkit-scrollbar-thumb': {
+                    backgroundColor: '$gray150',
+                    outline: '1px solid $gray150'
+                  }
                 }
               }, {
                 children: typeof (content === null || content === void 0 ? void 0 : content.message) === 'string' ? jsx(CardMessage, Object.assign({
@@ -24037,7 +24071,9 @@ const Device = props => {
                     css: {
                       fontSize: 12,
                       color: '$textPrimary',
-                      lineHeight: '16px'
+                      lineHeight: '16px',
+                      overflowWrap: 'break-word',
+                      wordWrap: 'break-word'
                     }
                   }, {
                     children: typeof (content === null || content === void 0 ? void 0 : content.message) === 'string' ? content === null || content === void 0 ? void 0 : content.message : (_f = content === null || content === void 0 ? void 0 : content.message) === null || _f === void 0 ? void 0 : _f.call(content)
@@ -24136,7 +24172,9 @@ const Device = props => {
                     css: {
                       fontSize: 9,
                       color: '$textSecondary',
-                      lineHeight: '14px !important'
+                      lineHeight: '14px !important',
+                      overflowWrap: 'break-word',
+                      wordWrap: 'break-word'
                     }
                   }, {
                     children: typeof (content === null || content === void 0 ? void 0 : content.message) === 'string' ? content === null || content === void 0 ? void 0 : content.message : (_j = content === null || content === void 0 ? void 0 : content.message) === null || _j === void 0 ? void 0 : _j.call(content)
@@ -24180,7 +24218,7 @@ const Device = props => {
         style: {
           width: props.size ? props.size : undefined,
           position: 'relative',
-          zIndex: withComponent ? 1 : 2
+          zIndex: withComponent || (props === null || props === void 0 ? void 0 : props.variant) === 'whatsapp' ? 1 : 2
         },
         src: properties.typeDevice,
         alt: "device-preview"
@@ -24243,10 +24281,10 @@ function InputColorPicker(props) {
   const [isPopover, setIsPopover] = useState(false);
 
   function getColor() {
-    const color = props == null ? void 0 : props.color;
+    const color = props === null || props === void 0 ? void 0 : props.color;
 
     if (typeof color === 'string') {
-      return color == null ? void 0 : color.toUpperCase();
+      return color === null || color === void 0 ? void 0 : color.toUpperCase();
     }
 
     return `rgba(${color.r},${color.g},${color.b},${color.a})`;
@@ -27218,9 +27256,9 @@ const Navigation = props => {
           lineNumber: 120,
           columnNumber: 30
         }
-      }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) == null ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) == null ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
+      }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) === null || _data$title === void 0 ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
         align: "center",
-        label: (_data3 = data[i - 1]) == null ? void 0 : _data3.tooltipsContents,
+        label: (_data3 = data[i - 1]) === null || _data3 === void 0 ? void 0 : _data3.tooltipsContents,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -27239,9 +27277,9 @@ const Navigation = props => {
           lineNumber: 124,
           columnNumber: 19
         }
-      })), ((_data4 = data[i - 1]) == null ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
+      })), ((_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
         css: {
-          marginLeft: (_data5 = data[i - 1]) != null && _data5.withTolltip ? 0 : '$spacing-03'
+          marginLeft: (_data5 = data[i - 1]) !== null && _data5 !== void 0 && _data5.withTolltip ? 0 : '$spacing-03'
         },
         align: "center",
         __self: undefined,
@@ -27293,7 +27331,7 @@ const Navigation = props => {
           height: 24,
           borderRadius: '$round',
           border: `4px solid ${isActive ? '$bgGreen' : '$bgInactive'}`,
-          backgroundColor: (_data6 = data[i - 1]) != null && _data6.disabled ? '$gray200' : '$white'
+          backgroundColor: (_data6 = data[i - 1]) !== null && _data6 !== void 0 && _data6.disabled ? '$gray200' : '$white'
         },
         __self: undefined,
         __source: {
@@ -27311,10 +27349,10 @@ const Navigation = props => {
           lineNumber: 163,
           columnNumber: 15
         }
-      }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) == null ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) == null ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
+      }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
         align: "center",
         withClick: true,
-        label: (_data9 = data[i - 1]) == null ? void 0 : _data9.tooltipsContents,
+        label: (_data9 = data[i - 1]) === null || _data9 === void 0 ? void 0 : _data9.tooltipsContents,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -27330,11 +27368,11 @@ const Navigation = props => {
           lineNumber: 168,
           columnNumber: 19
         }
-      })), isActive && ((_data10 = data[i - 1]) == null ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
+      })), isActive && ((_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
         align: "center",
         justify: "center",
         css: {
-          marginTop: (_data11 = data[i - 1]) != null && _data11.withTolltip ? 0 : '$spacing-03'
+          marginTop: (_data11 = data[i - 1]) !== null && _data11 !== void 0 && _data11.withTolltip ? 0 : '$spacing-03'
         },
         __self: undefined,
         __source: {
@@ -27416,7 +27454,9 @@ const Default = props => {
     }));
   }, [props.hide]);
   useEffect(() => {
-    props == null ? void 0 : props.onChangeVisibility == null ? void 0 : props.onChangeVisibility(state.hide);
+    var _props$onChangeVisibi;
+
+    props === null || props === void 0 ? void 0 : (_props$onChangeVisibi = props.onChangeVisibility) === null || _props$onChangeVisibi === void 0 ? void 0 : _props$onChangeVisibi.call(props, state.hide);
   }, [state.hide]);
 
   const toogleVisibility = value => {
@@ -27428,13 +27468,13 @@ const Default = props => {
   const getIsComplete = currentStep => {
     var _state$isComplete;
 
-    return state == null ? void 0 : (_state$isComplete = state.isComplete) == null ? void 0 : _state$isComplete[currentStep - 1];
+    return state === null || state === void 0 ? void 0 : (_state$isComplete = state.isComplete) === null || _state$isComplete === void 0 ? void 0 : _state$isComplete[currentStep - 1];
   };
 
   const getTitleStep = currentStep => {
     var _props$navContents, _props$navContents2;
 
-    return props == null ? void 0 : (_props$navContents = props.navContents) == null ? void 0 : (_props$navContents2 = _props$navContents[currentStep - 1]) == null ? void 0 : _props$navContents2.title;
+    return props === null || props === void 0 ? void 0 : (_props$navContents = props.navContents) === null || _props$navContents === void 0 ? void 0 : (_props$navContents2 = _props$navContents[currentStep - 1]) === null || _props$navContents2 === void 0 ? void 0 : _props$navContents2.title;
   };
 
   const setState = value => {
@@ -27476,15 +27516,15 @@ const Default = props => {
     });
     props.onStepChange && props.onStepChange(e);
 
-    if (props != null && (_props$navContents3 = props.navContents) != null && (_props$navContents4 = _props$navContents3[(e == null ? void 0 : e.activeStep) - 1]) != null && _props$navContents4.disabled) {
-      if ((e == null ? void 0 : e.activeStep) > (e == null ? void 0 : e.previousStep)) {
+    if (props !== null && props !== void 0 && (_props$navContents3 = props.navContents) !== null && _props$navContents3 !== void 0 && (_props$navContents4 = _props$navContents3[(e === null || e === void 0 ? void 0 : e.activeStep) - 1]) !== null && _props$navContents4 !== void 0 && _props$navContents4.disabled) {
+      if ((e === null || e === void 0 ? void 0 : e.activeStep) > (e === null || e === void 0 ? void 0 : e.previousStep)) {
         var _state$SW;
 
-        state == null ? void 0 : (_state$SW = state.SW) == null ? void 0 : _state$SW.nextStep();
+        state === null || state === void 0 ? void 0 : (_state$SW = state.SW) === null || _state$SW === void 0 ? void 0 : _state$SW.nextStep();
       } else {
         var _state$SW2;
 
-        state == null ? void 0 : (_state$SW2 = state.SW) == null ? void 0 : _state$SW2.previousStep();
+        state === null || state === void 0 ? void 0 : (_state$SW2 = state.SW) === null || _state$SW2 === void 0 ? void 0 : _state$SW2.previousStep();
       }
     }
   };
@@ -27500,11 +27540,11 @@ const Default = props => {
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
     value: {
       toogleVisibility,
-      isHide: state == null ? void 0 : state.hide,
+      isHide: state === null || state === void 0 ? void 0 : state.hide,
       setComplete,
       setState,
       state,
-      SW: state == null ? void 0 : state.SW,
+      SW: state === null || state === void 0 ? void 0 : state.SW,
       forbidClickNav: props.forbidClickNav,
       titles: props.titles,
       isMobile: props.isMobile,
@@ -27677,10 +27717,10 @@ function Content({
   function getDatasets(content, activeId, isCollapse) {
     const datasets = [];
 
-    for (let i = 0; i < (content == null ? void 0 : content.length); i++) {
+    for (let i = 0; i < (content === null || content === void 0 ? void 0 : content.length); i++) {
       var _content$i;
 
-      if (((_content$i = content[i]) == null ? void 0 : _content$i.id) === activeId) {
+      if (((_content$i = content[i]) === null || _content$i === void 0 ? void 0 : _content$i.id) === activeId) {
         datasets.unshift(content[i]);
       } else {
         datasets.push(content[i]);
@@ -27720,7 +27760,7 @@ function Content({
       lineNumber: 99,
       columnNumber: 7
     }
-  }, (_getDatasets = getDatasets(content, activeId, isCollapse)) == null ? void 0 : _getDatasets.map((item, index) => {
+  }, (_getDatasets = getDatasets(content, activeId, isCollapse)) === null || _getDatasets === void 0 ? void 0 : _getDatasets.map((item, index) => {
     return /*#__PURE__*/React__default.createElement(List, {
       key: index,
       __self: this,
@@ -27737,11 +27777,11 @@ function Content({
         marginLeft: '-4px !important',
         borderLeftWidth: '4px !important',
         borderLeftStyle: 'solid !important',
-        borderLeftColor: `${(item == null ? void 0 : item.id) === activeId ? colors$4.primary500 : 'transparent'} !important`,
+        borderLeftColor: `${(item === null || item === void 0 ? void 0 : item.id) === activeId ? colors$4.primary500 : 'transparent'} !important`,
         paddingLeft: '16px !important',
         minHeight: 25
       },
-      "data-to-scrollspy-id": item == null ? void 0 : item.id,
+      "data-to-scrollspy-id": item === null || item === void 0 ? void 0 : item.id,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
@@ -27750,8 +27790,8 @@ function Content({
       }
     }, /*#__PURE__*/React__default.createElement(Title$1, {
       className: "link-title",
-      active: (item == null ? void 0 : item.id) === activeId,
-      href: `#${item == null ? void 0 : item.id}`,
+      active: (item === null || item === void 0 ? void 0 : item.id) === activeId,
+      href: `#${item === null || item === void 0 ? void 0 : item.id}`,
       onClick: e => {
         e.preventDefault();
         const target = window.document.getElementById(e.currentTarget.href.split('#')[1]);
@@ -27780,7 +27820,7 @@ function Content({
         lineNumber: 117,
         columnNumber: 17
       }
-    }, item == null ? void 0 : item.title), item == null ? void 0 : item.icon));
+    }, item === null || item === void 0 ? void 0 : item.title), item === null || item === void 0 ? void 0 : item.icon));
   })));
 }
 
@@ -28044,7 +28084,8 @@ function EditableTableMobile(props) {
     instance,
     emptyDataMessage,
     showCheckbox,
-    customRows
+    customRows,
+    onExpand
   } = props;
   const {
     getTableProps,
@@ -28126,6 +28167,7 @@ function EditableTableMobile(props) {
               }
 
               row.toggleRowExpanded(!row.isExpanded);
+              onExpand === null || onExpand === void 0 ? void 0 : onExpand(!row.isExpanded);
             }
           }, {
             children: row.isExpanded ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)
@@ -28572,7 +28614,8 @@ function EditableTable(props) {
     onSelectedChange,
     getCheckboxProps,
     keyId = 'id',
-    selectedIds
+    selectedIds,
+    onExpand
   } = props;
   const [selectedIndex, setSelectedIndex] = useState(null);
 
@@ -28821,7 +28864,8 @@ function EditableTable(props) {
     instance: instance,
     emptyDataMessage: emptyDataMessage,
     showCheckbox: showCheckbox,
-    customRows: customRows
+    customRows: customRows,
+    onExpand: onExpand
   }, void 0);
 }