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

package/index.umd.js

@@ -3661,7 +3661,7 @@
     onClick: e => {
       e.preventDefault();
       e.stopPropagation();
-      value == null ? void 0 : value.onRemove();
+      value === null || value === void 0 ? void 0 : value.onRemove();
     },
     __self: undefined,
     __source: {
@@ -3738,7 +3738,7 @@
       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,
@@ -5781,7 +5781,7 @@
     const [isChecked, setChecked] = React.useState(false);
     React.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["default"].createElement(StyledCheckbox, _extends({
       id: id,
@@ -6389,15 +6389,15 @@
     const textareaRef = React.useRef(null);
     React.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["default"].createElement(StyledTextArea, _extends({
@@ -6432,7 +6432,7 @@
   var _jsxFileName$F = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadioGroup.js";
   const RadioGroup = styled(RadioGroupPrimitive__namespace.Root, Flex$1);
   function InputRadioGroup(props) {
-    return (props == null ? void 0 : props.children) && /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Provider, {
+    return (props === null || props === void 0 ? void 0 : props.children) && /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Provider, {
       value: props,
       __self: this,
       __source: {
@@ -6447,7 +6447,7 @@
         lineNumber: 14,
         columnNumber: 9
       }
-    }), React__default["default"].Children.map(props == null ? void 0 : props.children, child => /*#__PURE__*/React__default["default"].cloneElement(child, {
+    }), React__default["default"].Children.map(props === null || props === void 0 ? void 0 : props.children, child => /*#__PURE__*/React__default["default"].cloneElement(child, {
       style: Object.assign({}, child.props.style, {
         opacity: 1
       })
@@ -6661,7 +6661,7 @@
       value,
       outlined
     }) => {
-      const checked = value != null ? value : defaultValue;
+      const checked = value !== null && value !== void 0 ? value : defaultValue;
       return /*#__PURE__*/React__default["default"].createElement(Container$8, {
         direction: "column",
         outlined: outlined,
@@ -6911,7 +6911,7 @@
       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,
@@ -7727,18 +7727,18 @@
     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
             });
@@ -7748,7 +7748,7 @@
         }
 
         setRegexError(false);
-        onEnter == null ? void 0 : onEnter({
+        onEnter === null || onEnter === void 0 ? void 0 : onEnter({
           key: 'success',
           value: event.target.value
         });
@@ -7761,7 +7761,7 @@
       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 = () => {
@@ -7809,7 +7809,7 @@
         lineNumber: 180,
         columnNumber: 9
       }
-    })), regexError && pattern && (pattern != null && pattern.errorMessage ? /*#__PURE__*/React__default["default"].createElement(FormHelper, {
+    })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default["default"].createElement(FormHelper, {
       color: "red",
       __self: this,
       __source: {
@@ -8921,7 +8921,8 @@
             suppressRefError: true
           }), {
             css: {
-              display: isOpen ? 'block' : 'none'
+              display: isOpen ? 'block' : 'none',
+              zIndex: '$popover'
             },
             placement: placement
           }, {
@@ -9687,10 +9688,10 @@
           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);
       }
@@ -9700,9 +9701,9 @@
       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]);
@@ -9713,7 +9714,7 @@
           setSelectedValue(filterItems);
 
           if (selected.id !== '!all') {
-            onChange == null ? void 0 : onChange(filterItems);
+            onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
           }
         }
       }
@@ -9758,7 +9759,7 @@
                       removeSelectedItem(item);
                     });
                     setSelectedValue([]);
-                    onChange == null ? void 0 : onChange([]);
+                    onChange === null || onChange === void 0 ? void 0 : onChange([]);
                   } else {
                     removeItem(selectedItem);
                   }
@@ -9773,12 +9774,12 @@
                     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);
@@ -9930,7 +9931,7 @@
         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["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["default"].createElement(Tag, _extends({
       disabled: disabled,
       isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
       size: size,
@@ -9954,7 +9955,7 @@
         lineNumber: 563,
         columnNumber: 17
       }
-    }), selectedItem.name))), showSelectedTag && showCounter && Boolean(selectedItems == null ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
+    }), selectedItem.name))), showSelectedTag && showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
       disabled: disabled,
       __self: undefined,
       __source: {
@@ -9967,7 +9968,7 @@
         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 })}
       ,
@@ -9989,7 +9990,7 @@
         lineNumber: 586,
         columnNumber: 13
       }
-    }, `${selectedItems == null ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
+    }, `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
       placement: placement,
       css: {
         display: isOpen && disabled === false ? 'block' : 'none',
@@ -10057,7 +10058,7 @@
         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["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["default"].createElement(IndeterminateFilled, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
@@ -11340,8 +11341,8 @@
       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)
     }), {
@@ -12574,7 +12575,7 @@
         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) {
@@ -17430,7 +17431,7 @@
         lineNumber: 40,
         columnNumber: 11
       }
-    }, limits == null ? void 0 : limits.map(limit => /*#__PURE__*/React__default["default"].createElement(PopoverClose, {
+    }, limits === null || limits === void 0 ? void 0 : limits.map(limit => /*#__PURE__*/React__default["default"].createElement(PopoverClose, {
       key: limit,
       css: limitItemContainerStyle(selectedLimit === limit),
       onClick: () => onChange(limit),
@@ -18085,7 +18086,7 @@
     return {};
   };
 
-  var stickyShadowStyling = function stickyShadowStyling(column) {
+  var stickyShadowStyling = function stickyShadowStyling(column, tableScrollPosition) {
     var cssAfter = {
       position: 'absolute',
       top: 0,
@@ -18101,12 +18102,12 @@
       return column.sticky === 'left' ? {
         '&::after': __assign(__assign({}, cssAfter), {
           right: 0,
-          boxShadow: 'inset 10px 0 10px -10px #00000026'
+          boxShadow: tableScrollPosition === 'start' ? 'none' : 'inset 10px 0 10px -10px #00000026'
         })
       } : {
         '&::after': __assign(__assign({}, cssAfter), {
           left: 0,
-          boxShadow: 'inset -10px 0 10px -10px #00000026'
+          boxShadow: tableScrollPosition === 'end' ? 'none' : 'inset -10px 0 10px -10px #00000026'
         })
       };
     }
@@ -18180,6 +18181,14 @@
         dataRow = _p[0],
         setDataRow = _p[1];
 
+    var _q = React.useState('start'),
+        tableScrollPosition = _q[0],
+        setTableScrollPosition = _q[1];
+
+    var _r = React.useState(0),
+        scrollAreaWidth = _r[0],
+        setScrollAreaWidth = _r[1];
+
     var getInitialState = function getInitialState() {
       var initialState = {};
 
@@ -18214,6 +18223,8 @@
         return row[keyId] || JSON.stringify(row);
       }
     }, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect, reactTableSticky.useSticky, reactTable.useColumnOrder);
+    var scrollerRef = React.useRef(null);
+    var isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
     var getTableProps = instance.getTableProps,
         getTableBodyProps = instance.getTableBodyProps,
         headerGroups = instance.headerGroups;
@@ -18224,11 +18235,11 @@
         gotoPage = instance.gotoPage,
         setPageSize = instance.setPageSize,
         toggleRowSelected = instance.toggleRowSelected,
-        _q = instance.state,
-        pageIndex = _q.pageIndex,
-        pageSize = _q.pageSize,
-        sortBy = _q.sortBy,
-        selectedRowIds = _q.selectedRowIds,
+        _s = instance.state,
+        pageIndex = _s.pageIndex,
+        pageSize = _s.pageSize,
+        sortBy = _s.sortBy,
+        selectedRowIds = _s.selectedRowIds,
         setHiddenColumns = instance.setHiddenColumns,
         setColumnOrder = instance.setColumnOrder;
 
@@ -18250,9 +18261,6 @@
       if (fetchData) fetchData(fetchParams);
     };
 
-    var scrollerRef = React.useRef(null);
-    var isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
-
     var renderFooter = function renderFooter() {
       return jsxRuntime.jsx(Pagination, {
         limit: pageSize,
@@ -18300,43 +18308,6 @@
       }), void 0);
     };
 
-    React.useEffect(function () {
-      if (hiddenColumns) setHiddenColumns(hiddenColumns);
-    }, [hiddenColumns]);
-    React.useEffect(function () {
-      if (columnOrder) setColumnOrder(columnOrder);
-    }, [columnOrder]);
-    React.useEffect(function () {
-      setPageSize(rowLimit);
-    }, [rowLimit]);
-    React.useEffect(function () {
-      gotoPage(controlledPageIndex);
-    }, [controlledPageIndex]);
-    React.useEffect(function () {
-      if (data && data.length > 0) doFetchData(0, isInfiniteScroll ? rowLimit : pageSize);
-    }, [sortBy]);
-    reactTable.useMountedLayoutEffect(function () {
-      if (data && data.length > 0 && selectedRowIds && onSelectedChange) onSelectedChange(selectedRowIds ? Object.keys(selectedRowIds) : []);
-    }, [selectedRowIds]);
-    React.useEffect(function () {
-      var _a;
-
-      if (isInfiniteScroll && data.length <= rowLimit) {
-        (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-          top: 0
-        });
-      }
-    }, [data]);
-    React.useEffect(function () {
-      if (selectedIds && data.length > 0) {
-        var selectedIdsKeys = Object.keys(selectedIds);
-        selectedIdsKeys.map(function (key) {
-          toggleRowSelected(key, true);
-          return key;
-        });
-      }
-    }, [data, selectedIds]);
-
     var getOptionsMenu = function getOptionsMenu() {
       var _a, _b;
 
@@ -18386,6 +18357,47 @@
       setDataRow(row);
     };
 
+    React.useLayoutEffect(function () {
+      if (scrollerRef && scrollerRef.current) {
+        setScrollAreaWidth(scrollerRef.current.scrollWidth - scrollerRef.current.clientWidth);
+      }
+    }, [scrollerRef]);
+    React.useEffect(function () {
+      if (hiddenColumns) setHiddenColumns(hiddenColumns);
+    }, [hiddenColumns]);
+    React.useEffect(function () {
+      if (columnOrder) setColumnOrder(columnOrder);
+    }, [columnOrder]);
+    React.useEffect(function () {
+      setPageSize(rowLimit);
+    }, [rowLimit]);
+    React.useEffect(function () {
+      gotoPage(controlledPageIndex);
+    }, [controlledPageIndex]);
+    React.useEffect(function () {
+      if (data && data.length > 0) doFetchData(0, isInfiniteScroll ? rowLimit : pageSize);
+    }, [sortBy]);
+    reactTable.useMountedLayoutEffect(function () {
+      if (data && data.length > 0 && selectedRowIds && onSelectedChange) onSelectedChange(selectedRowIds ? Object.keys(selectedRowIds) : []);
+    }, [selectedRowIds]);
+    React.useEffect(function () {
+      var _a;
+
+      if (isInfiniteScroll && data.length <= rowLimit) {
+        (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+          top: 0
+        });
+      }
+    }, [data]);
+    React.useEffect(function () {
+      if (selectedIds && data.length > 0) {
+        var selectedIdsKeys = Object.keys(selectedIds);
+        selectedIdsKeys.map(function (key) {
+          toggleRowSelected(key, true);
+          return key;
+        });
+      }
+    }, [data, selectedIds]);
     return jsxRuntime.jsxs(Box, __assign({
       css: {
         position: 'relative',
@@ -18415,7 +18427,18 @@
       }), void 0), !isMobile ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [jsxRuntime.jsxs(TableContainer$3, __assign({
           css: css,
-          ref: scrollerRef
+          ref: scrollerRef,
+          onScroll: function (e) {
+            var scrollPosition = e.currentTarget.scrollLeft;
+
+            if (scrollPosition < 3) {
+              setTableScrollPosition('start');
+            } else if (scrollPosition > scrollAreaWidth - 3) {
+              setTableScrollPosition('end');
+            } else {
+              setTableScrollPosition('between');
+            }
+          }
         }, {
           children: [renderInfiniteScrollWrapper(jsxRuntime.jsxs(TableContent$3, __assign({}, getTableProps(), {
             children: [jsxRuntime.jsx(TableHead$3, __assign({
@@ -18439,7 +18462,7 @@
                         }
                       }];
                     }), {
-                      css: __assign(__assign({}, stickyPositionStyling(column)), stickyShadowStyling(column))
+                      css: __assign(__assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition))
                     }, {
                       children: typeof headerRender === 'string' ? jsxRuntime.jsx(TableHeaderCellContainer, __assign({
                         isSortedDesc: column.isSortedDesc,
@@ -18502,7 +18525,7 @@
                           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: function () {
                           return handleRowClick(row, i);
                         }
@@ -20079,7 +20102,7 @@
         if (!props.onOpenAutoFocus) {
           e.preventDefault();
         } else {
-          props == null ? void 0 : props.onOpenAutoFocus();
+          props === null || props === void 0 ? void 0 : props.onOpenAutoFocus();
         }
       },
       __self: undefined,
@@ -20200,8 +20223,8 @@
       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,
@@ -20220,12 +20243,12 @@
       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,
@@ -20247,8 +20270,8 @@
       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,
@@ -20408,8 +20431,8 @@
       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,
@@ -20428,12 +20451,12 @@
       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,
@@ -20455,8 +20478,8 @@
       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,
@@ -22972,7 +22995,7 @@
           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,
@@ -22995,12 +23018,12 @@
                 }
               }
 
-              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;
@@ -23017,12 +23040,12 @@
               }
             }
 
-            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;
 
@@ -23038,22 +23061,22 @@
               }
             }
 
-            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) {
@@ -23078,24 +23101,24 @@
             // 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();
@@ -23107,15 +23130,15 @@
     }
 
     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);
@@ -23130,17 +23153,17 @@
             }).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();
@@ -23171,7 +23194,7 @@
       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
       });
@@ -23199,22 +23222,22 @@
     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__default["default"].get(file == null ? void 0 : file.url).end((err, res) => {
+        request__default["default"].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);
@@ -23284,12 +23307,12 @@
     }
 
     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["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,
@@ -23364,14 +23387,14 @@
     };
 
     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["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,
@@ -23438,7 +23461,7 @@
             lineNumber: 661,
             columnNumber: 17
           }
-        }, ".", item == null ? void 0 : (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["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["default"].createElement(Tooltip$1, {
           label: item.name,
           __self: undefined,
           __source: {
@@ -23610,7 +23633,7 @@
           lineNumber: 736,
           columnNumber: 11
         }
-      }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
@@ -23644,7 +23667,7 @@
           lineNumber: 742,
           columnNumber: 17
         }
-      }, placeholder != null ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
+      }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
@@ -23804,7 +23827,7 @@
 
     return /*#__PURE__*/React__default["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'
@@ -24061,6 +24084,8 @@
     color: '$textPrimary',
     fontSize: 12,
     fontWeight: 400,
+    overflowWrap: 'break-word',
+    wordWrap: 'break-word',
     variants: {
       variant: {
         sms: {
@@ -24301,8 +24326,7 @@
                 border: 'none',
                 width: '100%',
                 height: '100%',
-                overflow: 'hidden',
-                zIndex: 1
+                zIndex: 3
               }
             }, {
               children: jsxRuntime.jsxs(Box, __assign({
@@ -24315,13 +24339,29 @@
                   height: "100%",
                   objectFit: props.typeDevice === 'android' ? 'fill' : 'cover',
                   src: img$g,
-                  alt: "whatsapp-preview"
+                  alt: "whatsapp-preview",
+                  css: {
+                    borderRadius: 8
+                  }
                 }, void 0), jsxRuntime.jsx(Box, __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' ? jsxRuntime.jsx(CardMessage, __assign({
@@ -24437,7 +24477,9 @@
                       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)
@@ -24536,7 +24578,9 @@
                       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)
@@ -24580,7 +24624,7 @@
           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"
@@ -24643,10 +24687,10 @@
     const [isPopover, setIsPopover] = React.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})`;
@@ -27618,9 +27662,9 @@
             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["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["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,
@@ -27639,9 +27683,9 @@
             lineNumber: 124,
             columnNumber: 19
           }
-        })), ((_data4 = data[i - 1]) == null ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        })), ((_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default["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,
@@ -27693,7 +27737,7 @@
             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: {
@@ -27711,10 +27755,10 @@
             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["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["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,
@@ -27730,11 +27774,11 @@
             lineNumber: 168,
             columnNumber: 19
           }
-        })), isActive && ((_data10 = data[i - 1]) == null ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        })), isActive && ((_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default["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: {
@@ -27816,7 +27860,9 @@
       }));
     }, [props.hide]);
     React.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 => {
@@ -27828,13 +27874,13 @@
     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 => {
@@ -27876,15 +27922,15 @@
       });
       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();
         }
       }
     };
@@ -27900,11 +27946,11 @@
     }, /*#__PURE__*/React__default["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,
@@ -28077,10 +28123,10 @@
     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]);
@@ -28120,7 +28166,7 @@
         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["default"].createElement(List, {
         key: index,
         __self: this,
@@ -28137,11 +28183,11 @@
           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,
@@ -28150,8 +28196,8 @@
         }
       }, /*#__PURE__*/React__default["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]);
@@ -28180,7 +28226,7 @@
           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));
     })));
   }
 
@@ -28443,7 +28489,8 @@
     var instance = props.instance,
         emptyDataMessage = props.emptyDataMessage,
         showCheckbox = props.showCheckbox,
-        customRows = props.customRows;
+        customRows = props.customRows,
+        onExpand = props.onExpand;
     var getTableProps = instance.getTableProps,
         getTableBodyProps = instance.getTableBodyProps,
         headerGroups = instance.headerGroups,
@@ -28526,6 +28573,7 @@
                 }
 
                 row.toggleRowExpanded(!row.isExpanded);
+                onExpand === null || onExpand === void 0 ? void 0 : onExpand(!row.isExpanded);
               }
             }, {
               children: row.isExpanded ? jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0)
@@ -28975,7 +29023,8 @@
         getCheckboxProps = props.getCheckboxProps,
         _a = props.keyId,
         keyId = _a === void 0 ? 'id' : _a,
-        selectedIds = props.selectedIds;
+        selectedIds = props.selectedIds,
+        onExpand = props.onExpand;
 
     var _b = React.useState(null),
         selectedIndex = _b[0],
@@ -29234,7 +29283,8 @@
       instance: instance,
       emptyDataMessage: emptyDataMessage,
       showCheckbox: showCheckbox,
-      customRows: customRows
+      customRows: customRows,
+      onExpand: onExpand
     }, void 0);
   }