@majoo-ui/react 1.55.6 → 1.55.7

package/index.umd.js

@@ -3664,7 +3664,7 @@
     onClick: e => {
       e.preventDefault();
       e.stopPropagation();
-      value === null || value === void 0 ? void 0 : value.onRemove();
+      value == null ? void 0 : value.onRemove();
     },
     __self: undefined,
     __source: {
@@ -3741,7 +3741,7 @@
       onClick: e => {
         e.preventDefault();
         e.stopPropagation();
-        props === null || props === void 0 ? void 0 : props.onRemove();
+        props == null ? void 0 : props.onRemove();
       },
       closeCenter: !props.title && !props.link,
       __self: undefined,
@@ -5905,7 +5905,7 @@
     const [isChecked, setChecked] = React.useState(false);
     React.useEffect(() => {
       const checkValue = context && context.checkedItems.includes(value) || checked || indeterminate;
-      setChecked(checkValue !== null && checkValue !== void 0 ? checkValue : false);
+      setChecked(checkValue != null ? checkValue : false);
     }, [checked, indeterminate, context]);
     return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, _extends({
       id: id,
@@ -6552,7 +6552,7 @@
     React.useEffect(() => {
       if (textareaRef.current) {
         textareaRef.current.style.height = '50px';
-        const scrollHeight = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current.scrollHeight;
+        const scrollHeight = textareaRef == null ? void 0 : textareaRef.current.scrollHeight;
         textareaRef.current.style.height = scrollHeight + 5 + 'px';
       }
     }, []);
@@ -6600,7 +6600,7 @@
   var _jsxFileName$G = "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 || props === void 0 ? void 0 : props.children) && /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Provider, {
+    return (props == null ? void 0 : props.children) && /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Provider, {
       value: props,
       __self: this,
       __source: {
@@ -6615,7 +6615,7 @@
         lineNumber: 14,
         columnNumber: 9
       }
-    }), React__default["default"].Children.map(props === null || props === void 0 ? void 0 : props.children, child => /*#__PURE__*/React__default["default"].cloneElement(child, {
+    }), React__default["default"].Children.map(props == null ? void 0 : props.children, child => /*#__PURE__*/React__default["default"].cloneElement(child, {
       style: Object.assign({}, child.props.style, {
         opacity: 1
       })
@@ -6842,7 +6842,7 @@
       value,
       outlined
     }) => {
-      const checked = value !== null && value !== void 0 ? value : defaultValue;
+      const checked = value != null ? value : defaultValue;
       return /*#__PURE__*/React__default["default"].createElement(Container$a, {
         direction: "column",
         outlined: outlined,
@@ -7133,7 +7133,7 @@
       size: size,
       isInvalid: isInvalid,
       readOnly: readOnly,
-      isReadOnly: readOnly && !(props !== null && props !== void 0 && props.inputGroup) && !(props !== null && props !== void 0 && props.asChild),
+      isReadOnly: readOnly && !(props != null && props.inputGroup) && !(props != null && props.asChild),
       disabled: disabled
     }, props, {
       __self: undefined,
@@ -7949,18 +7949,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 || onEnter === void 0 ? void 0 : onEnter({
+          onEnter == null ? void 0 : onEnter({
             key: 'duplicate',
             value: event.target.value
           });
           return;
         }
 
-        if (pattern && pattern !== null && pattern !== void 0 && pattern.regex) {
+        if (pattern && pattern != null && pattern.regex) {
           const regex = new RegExp(pattern.regex);
 
           if (!regex.test(event.target.value)) {
-            onEnter === null || onEnter === void 0 ? void 0 : onEnter({
+            onEnter == null ? void 0 : onEnter({
               key: 'error',
               value: event.target.value
             });
@@ -7970,7 +7970,7 @@
         }
 
         setRegexError(false);
-        onEnter === null || onEnter === void 0 ? void 0 : onEnter({
+        onEnter == null ? void 0 : onEnter({
           key: 'success',
           value: event.target.value
         });
@@ -7983,7 +7983,7 @@
       if (disabled || readOnly) {
         return tags;
       } else if (key === 'removeTag' || key === 'Backspace') {
-        onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(tags[index]);
+        onRemoveItem == null ? void 0 : onRemoveItem(tags[index]);
         setTags([...tags.filter(tag => tags.indexOf(tag) !== index)]);
       }
     }; // const handleErrorMessage = () => {
@@ -8031,7 +8031,7 @@
         lineNumber: 180,
         columnNumber: 9
       }
-    })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default["default"].createElement(FormHelper, {
+    })), regexError && pattern && (pattern != null && pattern.errorMessage ? /*#__PURE__*/React__default["default"].createElement(FormHelper, {
       color: "red",
       __self: this,
       __source: {
@@ -8339,7 +8339,7 @@
         props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
     const [value, setValue] = React__default["default"].useState('');
-    const inputValue = (_props$value = props === null || props === void 0 ? void 0 : props.value) !== null && _props$value !== void 0 ? _props$value : value;
+    const inputValue = (_props$value = props == null ? void 0 : props.value) != null ? _props$value : value;
     const handleChange = React__default["default"].useCallback(e => {
       setValue(e.target.value);
 
@@ -9944,10 +9944,10 @@
           return setItems(sortValue);
         }
       } else {
-        let filterItems = option === null || option === void 0 ? void 0 : option.filter(item => {
-          var _item$name, _item$name$toLowerCas, _item$name$toLowerCas2, _input$toLocaleLowerC;
+        let filterItems = option == null ? void 0 : option.filter(item => {
+          var _item$name, _item$name$toLowerCas;
 
-          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));
+          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());
         });
         setItems(filterItems);
       }
@@ -9957,9 +9957,9 @@
       if (disabled || readOnly) {
         return selectedValue;
       } else {
-        if ((selected === null || selected === void 0 ? void 0 : selected.id) === 'counter') {
+        if ((selected == null ? void 0 : selected.id) === 'counter') {
           setSelectedValue([]);
-          onChange === null || onChange === void 0 ? void 0 : onChange([]);
+          onChange == null ? void 0 : onChange([]);
 
           for (let i = 0; i < selectedValue.length; i++) {
             removeSelectedItem(selectedValue[i]);
@@ -9970,7 +9970,7 @@
           setSelectedValue(filterItems);
 
           if (selected.id !== '!all') {
-            onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
+            onChange == null ? void 0 : onChange(filterItems);
           }
         }
       }
@@ -10015,7 +10015,7 @@
                       removeSelectedItem(item);
                     });
                     setSelectedValue([]);
-                    onChange === null || onChange === void 0 ? void 0 : onChange([]);
+                    onChange == null ? void 0 : onChange([]);
                   } else {
                     removeItem(selectedItem);
                   }
@@ -10030,12 +10030,12 @@
                     itemIds.push(item.id);
                   });
                   setSelectedValue(itemIds);
-                  onChange === null || onChange === void 0 ? void 0 : onChange(itemIds.slice(1));
+                  onChange == null ? void 0 : onChange(itemIds.slice(1));
                 } else {
                   addSelectedItem(selectedItem);
                   setSelectedValue([...selectedValue, selectedItem.id]);
                   const filteredSelectedValues = selectedValue.filter(val => val !== '!all');
-                  onChange === null || onChange === void 0 ? void 0 : onChange([...filteredSelectedValues, selectedItem.id]);
+                  onChange == null ? void 0 : onChange([...filteredSelectedValues, selectedItem.id]);
                 }
 
                 selectItem(null);
@@ -10190,13 +10190,13 @@
         lineNumber: 564,
         columnNumber: 13
       }
-    }, 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$filter2 = _selectedItems$filter.filter((_, idx) => {
+    }, selectedItems == null ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : (_selectedItems$filter2 = _selectedItems$filter.filter((_, idx) => {
       if (showAllTags || !collapsible) {
         return true;
       } else {
         return idx < 5;
       }
-    })) === null || _selectedItems$filter2 === void 0 ? void 0 : _selectedItems$filter2.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
+    })) == null ? void 0 : _selectedItems$filter2.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
       disabled: disabled,
       isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
       size: "lg",
@@ -10220,7 +10220,7 @@
         lineNumber: 575,
         columnNumber: 19
       }
-    }), selectedItem.name))), collapsible && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+    }), selectedItem.name))), collapsible && (selectedItems == null ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       align: "center",
       justify: "center",
       onClick: toggleCollapsible,
@@ -10286,7 +10286,7 @@
         lineNumber: 612,
         columnNumber: 17
       }
-    }))), showSelectedTag && showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
+    }))), showSelectedTag && showCounter && Boolean(selectedItems == null ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
       disabled: disabled,
       __self: undefined,
       __source: {
@@ -10299,7 +10299,7 @@
         maxWidth: '150px !important'
       },
       disabled: disabled,
-      isRemovable: readOnly || disabled || Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length),
+      isRemovable: readOnly || disabled || Boolean(selectedItems == null ? void 0 : selectedItems.length),
       size: "lg",
       readOnly: readOnly // {...getSelectedItemProps({ selectedItem, index })}
       ,
@@ -10321,7 +10321,7 @@
         lineNumber: 619,
         columnNumber: 13
       }
-    }, `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
+    }, `${selectedItems == null ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
       placement: placement,
       css: {
         display: isOpen && disabled === false ? 'block' : 'none',
@@ -10389,7 +10389,7 @@
         lineNumber: 673,
         columnNumber: 27
       }
-    }), 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, {
+    }), 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, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
@@ -11101,7 +11101,7 @@
         },
         ref: scrollerRef
       }, {
-        children: [data.length <= 0 && (value || checkedResources).length <= 0 && !isLoading || defaultSort && data.length < 1 && jsxRuntime.jsx(Flex$1, __assign({
+        children: [data.length <= 0 && (value || checkedResources).length <= 0 && !isLoading || defaultSort && data.length < 1 ? jsxRuntime.jsx(Flex$1, __assign({
           justify: "center",
           align: "center",
           css: {
@@ -11117,7 +11117,7 @@
               ns: 'translation'
             })
           }), void 0)
-        }), void 0), jsxRuntime.jsx(ConditionalWrapper, __assign({
+        }), void 0) : null, jsxRuntime.jsx(ConditionalWrapper, __assign({
           condition: !!fetchData && data.length > 0,
           wrapper: function (children) {
             return jsxRuntime.jsx(InfiniteScroll__default["default"], __assign({
@@ -11688,8 +11688,8 @@
       ref: floating,
       style: Object.assign({
         position: strategy,
-        top: isMobile ? 0 : y !== null && y !== void 0 ? y : '',
-        left: isMobile ? 0 : x !== null && x !== void 0 ? x : '',
+        top: isMobile ? 0 : y != null ? y : '',
+        left: isMobile ? 0 : x != null ? x : '',
         zIndex: zIndices.popover
       }, style)
     }), {
@@ -13092,7 +13092,7 @@
     };
 
     const getValue = () => {
-      let value = props === null || props === void 0 ? void 0 : props.value;
+      let value = props == null ? void 0 : props.value;
       const isTrailing = variantIcon === 'trailing';
 
       if (typeof value === 'number' || parseInt(value)) {
@@ -18529,7 +18529,7 @@
         lineNumber: 42,
         columnNumber: 11
       }
-    }, limits === null || limits === void 0 ? void 0 : limits.map(limit => /*#__PURE__*/React__default["default"].createElement(PopoverClose, {
+    }, limits == null ? void 0 : limits.map(limit => /*#__PURE__*/React__default["default"].createElement(PopoverClose, {
       key: limit,
       css: limitItemContainerStyle(selectedLimit === limit),
       onClick: () => onChange(limit),
@@ -18563,7 +18563,7 @@
     })));
   }
 
-  const _excluded$2 = ["limit", "currentPage", "totalData", "totalPage", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions"];
+  const _excluded$2 = ["limit", "currentPage", "totalData", "totalPage", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions", "hidePagination"];
   var _jsxFileName$h = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\pagination\\Pagination.js";
 
   function Pagination(_ref) {
@@ -18575,7 +18575,8 @@
       hideDataInfo,
       onLimitChange,
       onPageChange,
-      rowsPerPageOptions
+      rowsPerPageOptions,
+      hidePagination
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
@@ -18590,7 +18591,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 22,
+        lineNumber: 23,
         columnNumber: 5
       }
     }), !hideDataInfo ? /*#__PURE__*/React__default["default"].createElement(PaginationInfo, {
@@ -18602,25 +18603,25 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 24,
+        lineNumber: 25,
         columnNumber: 9
       }
     }) : /*#__PURE__*/React__default["default"].createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 32,
+        lineNumber: 33,
         columnNumber: 9
       }
-    }), /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
+    }), !hidePagination && /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
       currentPage: currentPage,
       totalPages: totalPages,
       onSelect: onPageChange,
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 35,
-        columnNumber: 7
+        lineNumber: 37,
+        columnNumber: 9
       }
     }));
   }
@@ -19392,23 +19393,25 @@
         customRowsStyle = _a.customRowsStyle,
         isMobileLayout = _a.isMobileLayout,
         showDuplicatedData = _a.showDuplicatedData,
-        onRowClick = _a.onRowClick;
+        onRowClick = _a.onRowClick,
+        _o = _a.hidePagination,
+        hidePagination = _o === void 0 ? false : _o;
 
-    var _o = React.useState(rowLimit),
-        limit = _o[0],
-        setLimit = _o[1];
+    var _p = React.useState(rowLimit),
+        limit = _p[0],
+        setLimit = _p[1];
 
-    var _p = React.useState({}),
-        dataRow = _p[0],
-        setDataRow = _p[1];
+    var _q = React.useState({}),
+        dataRow = _q[0],
+        setDataRow = _q[1];
 
-    var _q = React.useState('start'),
-        tableScrollPosition = _q[0],
-        setTableScrollPosition = _q[1];
+    var _r = React.useState('start'),
+        tableScrollPosition = _r[0],
+        setTableScrollPosition = _r[1];
 
-    var _r = React.useState(0),
-        scrollAreaWidth = _r[0],
-        setScrollAreaWidth = _r[1];
+    var _s = React.useState(0),
+        scrollAreaWidth = _s[0],
+        setScrollAreaWidth = _s[1];
 
     var t = reactI18next.useTranslation('MajooUI/table').t;
     var customEmptyDataProps = emptyDataProps || defaultEmptyDataProps(t);
@@ -19461,11 +19464,11 @@
         gotoPage = instance.gotoPage,
         setPageSize = instance.setPageSize,
         toggleRowSelected = instance.toggleRowSelected,
-        _s = instance.state,
-        pageIndex = _s.pageIndex,
-        pageSize = _s.pageSize,
-        sortBy = _s.sortBy,
-        selectedRowIds = _s.selectedRowIds,
+        _t = instance.state,
+        pageIndex = _t.pageIndex,
+        pageSize = _t.pageSize,
+        sortBy = _t.sortBy,
+        selectedRowIds = _t.selectedRowIds,
         setHiddenColumns = instance.setHiddenColumns,
         setColumnOrder = instance.setColumnOrder;
 
@@ -19489,6 +19492,7 @@
 
     var renderFooter = function renderFooter() {
       return jsxRuntime.jsx(Pagination, {
+        hidePagination: hidePagination,
         limit: pageSize,
         currentPage: pageIndex + 1,
         totalData: totalData,
@@ -20680,7 +20684,7 @@
           var _document$getElements;
 
           setOpenDrop(true);
-          const contextMenu = (_document$getElements = document.getElementsByClassName('react-contextmenu')) === null || _document$getElements === void 0 ? void 0 : _document$getElements[0];
+          const contextMenu = (_document$getElements = document.getElementsByClassName('react-contextmenu')) == null ? void 0 : _document$getElements[0];
           contextMenu.style.opacity = 0;
         },
         __self: undefined,
@@ -21380,7 +21384,7 @@
         if (!props.onOpenAutoFocus) {
           e.preventDefault();
         } else {
-          props === null || props === void 0 ? void 0 : props.onOpenAutoFocus();
+          props == null ? void 0 : props.onOpenAutoFocus();
         }
       },
       __self: undefined,
@@ -21501,8 +21505,8 @@
       size: props.btnSize,
       onClick: buttonConfirm,
       buttonType: props.dialogType,
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.actionButtonProps, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
@@ -21521,12 +21525,12 @@
       size: props.btnSize,
       onClick: buttonCancel,
       css: {
-        color: props.dialogType === 'negative' && !(props !== null && props !== void 0 && props.disabledButton) && '$textSecondary !important',
+        color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$textSecondary !important',
         flex: props.isMobile && 1
       },
-      buttonType: props.dialogType === 'negative' && !(props !== null && props !== void 0 && props.disabledButton) ? 'ghost-secondary' : 'ghost',
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.cancelButtonProps, {
+      buttonType: props.dialogType === 'negative' && !(props != null && props.disabledButton) ? 'ghost-secondary' : 'ghost',
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.cancelButtonProps, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
@@ -21548,8 +21552,8 @@
       css: {
         flex: props.isMobile && 1
       },
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.actionButtonProps, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
@@ -21712,8 +21716,8 @@
       css: {
         flex: props.isMobile && 1
       },
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.actionButtonProps, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
@@ -21732,12 +21736,12 @@
       size: props.btnSize,
       onClick: props.onCancel,
       css: {
-        color: props.dialogType === 'negative' && !(props !== null && props !== void 0 && props.disabledButton) && '$textSecondary !important',
+        color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$textSecondary !important',
         flex: props.isMobile && 1
       },
-      buttonType: props.dialogType === 'negative' && !(props !== null && props !== void 0 && props.disabledButton) ? 'ghost-secondary' : 'ghost',
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.cancelButtonProps, {
+      buttonType: props.dialogType === 'negative' && !(props != null && props.disabledButton) ? 'ghost-secondary' : 'ghost',
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.cancelButtonProps, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
@@ -21759,8 +21763,8 @@
       css: {
         flex: props.isMobile && 1
       },
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.actionButtonProps, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
@@ -23877,13 +23881,13 @@
     });
   }
 
-  function toBlob(canvas) {
+  function toBlob(canvas, type) {
     return new Promise(function (resolve) {
-      canvas.toBlob(resolve);
+      canvas.toBlob(resolve, type);
     });
   }
 
-  function imgPreview(image, crop, scale, rotate, ratio) {
+  function imgPreview(image, crop, scale, rotate, ratio, type) {
     if (scale === void 0) {
       scale = 1;
     }
@@ -23905,7 +23909,7 @@
             canvasPreview(image, canvas, crop, scale, rotate, ratio);
             return [4
             /*yield*/
-            , toBlob(canvas)];
+            , toBlob(canvas, type)];
 
           case 1:
             blob = _a.sent();
@@ -23946,6 +23950,8 @@
         onProgress === null || onProgress === void 0 ? void 0 : onProgress(e);
         progress === null || progress === void 0 ? void 0 : progress(Math.round(e.percent));
       }).end(function (err, res) {
+        var _a, _b;
+
         if (err) {
           var error = new Error(err.message);
           onError === null || onError === void 0 ? void 0 : onError(error, (res === null || res === void 0 ? void 0 : res.text) && JSON.parse(res.text));
@@ -23955,7 +23961,9 @@
         if (res && (res === null || res === void 0 ? void 0 : res.ok)) {
           var response = JSON.parse(res === null || res === void 0 ? void 0 : res.text);
           onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(response);
-          resolve(response[resKey]);
+          resolve((_b = (_a = [response]) === null || _a === void 0 ? void 0 : _a.concat(resKey === null || resKey === void 0 ? void 0 : resKey.split('.'))) === null || _b === void 0 ? void 0 : _b.reduce(function (a, b) {
+            return a[b];
+          }));
         }
       });
     });
@@ -24283,7 +24291,7 @@
           upload({
             url: action,
             file: newFile,
-            customBody: customBodyRequest === null || customBodyRequest === void 0 ? void 0 : customBodyRequest(newFile),
+            customBody: customBodyRequest == null ? void 0 : customBodyRequest(newFile),
             token,
             tokenKey,
             reqKey,
@@ -24306,12 +24314,12 @@
                 }
               }
 
-              onChange === null || onChange === void 0 ? void 0 : (_onChange = onChange({
+              onChange == null ? void 0 : (_onChange = onChange({
                 fileList: arrProgress,
                 file: fileProgress,
                 indexReplace: indexReplace.current,
                 isReplace: indexReplace.current !== null
-              })) === 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));
+              })) == null ? void 0 : (_onChange$then = _onChange.then(() => setError(null))) == null ? void 0 : _onChange$then.catch(error => setError(error.message));
             }
           }).then(result => {
             var _onChange2, _onChange2$then;
@@ -24328,12 +24336,12 @@
               }
             }
 
-            onChange === null || onChange === void 0 ? void 0 : (_onChange2 = onChange({
+            onChange == null ? void 0 : (_onChange2 = onChange({
               fileList: arrSuccess,
               file: fileSuccess,
               indexReplace: indexReplace.current,
               isReplace: indexReplace.current !== null
-            })) === 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));
+            })) == null ? void 0 : (_onChange2$then = _onChange2.then(() => setError(null))) == null ? void 0 : _onChange2$then.catch(error => setError(error.message));
           }).catch(error => {
             var _onChange3, _onChange3$then;
 
@@ -24349,22 +24357,22 @@
               }
             }
 
-            onChange === null || onChange === void 0 ? void 0 : (_onChange3 = onChange({
+            onChange == null ? void 0 : (_onChange3 = onChange({
               fileList: arrError,
               file: fileError,
               indexReplace: indexReplace.current,
               isReplace: indexReplace.current !== null
-            })) === 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));
+            })) == null ? void 0 : (_onChange3$then = _onChange3.then(() => setError(null))) == null ? void 0 : _onChange3$then.catch(error => setError(error.message));
           });
         } else {
           var _onChange4, _onChange4$then;
 
-          onChange === null || onChange === void 0 ? void 0 : (_onChange4 = onChange({
+          onChange == null ? void 0 : (_onChange4 = onChange({
             fileList: arrFile,
             file: newFile,
             indexReplace: indexReplace.current,
             isReplace: indexReplace.current !== null
-          })) === 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));
+          })) == null ? void 0 : (_onChange4$then = _onChange4.then(() => setError(null))) == null ? void 0 : _onChange4$then.catch(error => setError(error.message));
         }
 
         if (indexReplace.current !== null) {
@@ -24389,24 +24397,24 @@
             // program to get the dimensions of an image
             const img = document.createElement('img');
             img.src = URL.createObjectURL(files[0]);
-            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.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.onload = () => {
               var _onBeforeCrop, _onBeforeCrop$then;
 
-              onBeforeCrop === null || onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop = onBeforeCrop(img)) === null || _onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop$then = _onBeforeCrop.then(() => {
+              onBeforeCrop == null ? void 0 : (_onBeforeCrop = onBeforeCrop(img)) == null ? void 0 : (_onBeforeCrop$then = _onBeforeCrop.then(() => {
                 setError(null);
                 toggleModal();
                 setFileState(files[0]);
                 setPreviewImage(URL.createObjectURL(files[0]));
-              })) === null || _onBeforeCrop$then === void 0 ? void 0 : _onBeforeCrop$then.catch(error => setError(error === null || error === void 0 ? void 0 : error.message));
+              })) == null ? void 0 : _onBeforeCrop$then.catch(error => setError(error == null ? void 0 : error.message));
             };
 
             img.onerror = error => {
               var _onBeforeCrop2, _onBeforeCrop2$then;
 
-              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));
+              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));
             };
           } else {
             toggleModal();
@@ -24418,15 +24426,13 @@
     }
 
     function handleCrop() {
-      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 || blob === void 0 ? void 0 : blob.size) / 1024 / 1024;
+      if (completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height && imgRef.current) {
+        imgPreview(imgRef.current, completedCrop, 1, 0, ratio, fileState == null ? void 0 : fileState.type).then(blob => {
+          const sizeMB = (blob == null ? void 0 : blob.size) / 1024 / 1024;
 
           if (sizeMB < maxSizeMB || sizeMB < 1 || !imageCompression) {
-            var _fileState$name;
-
-            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
+            const file = new File([blob], fileState == null ? void 0 : fileState.name, {
+              type: blob == null ? void 0 : blob.type
             });
             handleUpload([file]);
             setCrop(null);
@@ -24439,19 +24445,19 @@
               useWebWorker: true,
               alwaysKeepResolution: true
             }).then(compressedFile => {
-              var _fileState$name2;
+              var _fileState$name;
 
-              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
+              const file = new File([compressedFile], (fileState == null ? void 0 : (_fileState$name = fileState.name) == null ? void 0 : _fileState$name.replace(/\.[^/.]+$/, '')) + '.png', {
+                type: compressedFile == null ? void 0 : compressedFile.type
               });
               handleUpload([file]);
               setCrop(null);
               setCompletedCrop(null);
-            }).catch(error => console.error(error === null || error === void 0 ? void 0 : error.message));
+            }).catch(error => console.error(error == null ? void 0 : error.message));
           }
 
           toggleModal();
-        }).catch(error => console.error(error === null || error === void 0 ? void 0 : error.message));
+        }).catch(error => console.error(error == null ? void 0 : error.message));
       } else {
         handleUpload([fileState]);
         toggleModal();
@@ -24482,7 +24488,7 @@
       const index = fileList.indexOf(file);
       const newFileList = fileList.slice();
       newFileList.splice(index, 1);
-      onChange === null || onChange === void 0 ? void 0 : onChange({
+      onChange == null ? void 0 : onChange({
         fileList: newFileList,
         file
       });
@@ -24510,22 +24516,22 @@
     function handleOpenFile(file) {
       var _String, _file$name;
 
-      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();
+      let extension = (_String = String(file == null ? void 0 : (_file$name = file.name) == null ? void 0 : _file$name.split('.').pop())) == null ? void 0 : _String.toLowerCase();
 
       if (extension === 'pdf') {
-        window.open(file === null || file === void 0 ? void 0 : file.url);
+        window.open(file == null ? void 0 : file.url);
       } else {
-        request__default["default"].get(file === null || file === void 0 ? void 0 : file.url).end((err, res) => {
+        request__default["default"].get(file == null ? void 0 : file.url).end((err, res) => {
           if (err) {
             console.error(err.message);
           }
 
-          if (res && res !== null && res !== void 0 && res.ok) {
-            const response = res === null || res === void 0 ? void 0 : res.text;
+          if (res && res != null && res.ok) {
+            const response = res == null ? 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 || file === void 0 ? void 0 : file.name);
+            link.setAttribute('download', file == null ? void 0 : file.name);
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
@@ -24595,12 +24601,12 @@
     }
 
     const renderPicture = () => {
-      return fileList === null || fileList === void 0 ? void 0 : fileList.map((item, index) => {
-        if ((item === null || item === void 0 ? void 0 : item.status) === 'uploading') {
+      return fileList == null ? void 0 : fileList.map((item, index) => {
+        if ((item == null ? void 0 : item.status) === 'uploading') {
           return /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
             key: index,
-            progress: item === null || item === void 0 ? void 0 : item.percent,
-            loading: item === null || item === void 0 ? void 0 : item.loading,
+            progress: item == null ? void 0 : item.percent,
+            loading: item == null ? void 0 : item.loading,
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
@@ -24675,14 +24681,14 @@
     };
 
     const renderFile = () => {
-      return fileList === null || fileList === void 0 ? void 0 : fileList.map((item, index) => {
+      return fileList == null ? void 0 : fileList.map((item, index) => {
         var _item$name;
 
-        if ((item === null || item === void 0 ? void 0 : item.status) === 'uploading') {
+        if ((item == null ? void 0 : item.status) === 'uploading') {
           return /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
             key: index,
-            progress: item === null || item === void 0 ? void 0 : item.percent,
-            loading: item === null || item === void 0 ? void 0 : item.loading,
+            progress: item == null ? void 0 : item.percent,
+            loading: item == null ? void 0 : item.loading,
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
@@ -24749,7 +24755,7 @@
             lineNumber: 665,
             columnNumber: 17
           }
-        }, ".", 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, {
+        }, ".", item == null ? void 0 : (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           label: item.name,
           __self: undefined,
           __source: {
@@ -24921,7 +24927,7 @@
           lineNumber: 742,
           columnNumber: 11
         }
-      }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
@@ -24955,7 +24961,7 @@
           lineNumber: 748,
           columnNumber: 17
         }
-      }, placeholder !== null && placeholder !== void 0 ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
+      }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
         css: {
           width: width - 5
         },
@@ -25122,7 +25128,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       direction: "row",
-      gap: (fileList === null || fileList === void 0 ? void 0 : fileList.length) <= 1 && max === 1 ? 0 : 3,
+      gap: (fileList == null ? void 0 : fileList.length) <= 1 && max === 1 ? 0 : 3,
       wrap: "wrap",
       css: {
         userSelect: 'none'
@@ -26011,10 +26017,10 @@
     const [isPopover, setIsPopover] = React.useState(false);
 
     function getColor() {
-      const color = props === null || props === void 0 ? void 0 : props.color;
+      const color = props == null ? void 0 : props.color;
 
       if (typeof color === 'string') {
-        return color === null || color === void 0 ? void 0 : color.toUpperCase();
+        return color == null ? void 0 : color.toUpperCase();
       }
 
       return `rgba(${color.r},${color.g},${color.b},${color.a})`;
@@ -28943,7 +28949,7 @@
 
       const isActive = props.currentStep === i;
       const isComplete = props.isComplete[i - 1];
-      const isAdditional = (_data = data[i - 1]) === null || _data === void 0 ? void 0 : _data.additional; // eslint-disable-next-line no-lone-blocks
+      const isAdditional = (_data = data[i - 1]) == null ? void 0 : _data.additional; // eslint-disable-next-line no-lone-blocks
 
       {
         var _data$title, _data3, _data4, _data5, _data6, _data7, _data8, _data9, _data$title2, _data10, _data11, _data12, _data13, _data14;
@@ -28959,7 +28965,7 @@
           onClick: () => {
             var _data2;
 
-            if (props.onNavClicked && !((_data2 = data[i - 1]) !== null && _data2 !== void 0 && _data2.disabled) || isAdditional) props.onNavClicked(i);
+            if (props.onNavClicked && !((_data2 = data[i - 1]) != null && _data2.disabled) || isAdditional) props.onNavClicked(i);
 
             if (!forbidClickNav && isComplete && !isHide || isAdditional) {
               props.goToStep(i);
@@ -28993,9 +28999,9 @@
             lineNumber: 130,
             columnNumber: 17
           }
-        }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data3 = data[i - 1]).title) === null || _data$title === void 0 ? void 0 : _data$title.call(_data3), ((_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data3 = data[i - 1]).title) == null ? void 0 : _data$title.call(_data3), ((_data4 = data[i - 1]) == null ? void 0 : _data4.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           align: "center",
-          label: (_data5 = data[i - 1]) === null || _data5 === void 0 ? void 0 : _data5.tooltipsContents,
+          label: (_data5 = data[i - 1]) == null ? void 0 : _data5.tooltipsContents,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -29014,9 +29020,9 @@
             lineNumber: 135,
             columnNumber: 19
           }
-        })), ((_data6 = data[i - 1]) === null || _data6 === void 0 ? void 0 : _data6.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        })), ((_data6 = data[i - 1]) == null ? void 0 : _data6.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
           css: {
-            marginLeft: (_data7 = data[i - 1]) !== null && _data7 !== void 0 && _data7.withTolltip ? 0 : '$spacing-03'
+            marginLeft: (_data7 = data[i - 1]) != null && _data7.withTolltip ? 0 : '$spacing-03'
           },
           align: "center",
           __self: undefined,
@@ -29044,7 +29050,7 @@
             userSelect: 'none',
             fontSize: '12px',
             textAlign: '-webkit-center',
-            display: ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.disabled) && 'none'
+            display: ((_data8 = data[i - 1]) == null ? void 0 : _data8.disabled) && 'none'
           },
           onClick: () => {
             if (props.onNavClicked) props.onNavClicked(i);
@@ -29076,7 +29082,7 @@
             height: 24,
             borderRadius: '$round',
             border: `4px solid ${isActive ? '$bgGreen' : '$bgInactive'}`,
-            backgroundColor: (_data9 = data[i - 1]) !== null && _data9 !== void 0 && _data9.disabled ? '$gray200' : '$white'
+            backgroundColor: (_data9 = data[i - 1]) != null && _data9.disabled ? '$gray200' : '$white'
           },
           __self: undefined,
           __source: {
@@ -29094,10 +29100,10 @@
             lineNumber: 181,
             columnNumber: 15
           }
-        }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data10 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data10) : ''), isActive && ((_data11 = data[i - 1]) === null || _data11 === void 0 ? void 0 : _data11.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data10 = data[i - 1]).title) == null ? void 0 : _data$title2.call(_data10) : ''), isActive && ((_data11 = data[i - 1]) == null ? void 0 : _data11.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           align: "center",
           withClick: true,
-          label: (_data12 = data[i - 1]) === null || _data12 === void 0 ? void 0 : _data12.tooltipsContents,
+          label: (_data12 = data[i - 1]) == null ? void 0 : _data12.tooltipsContents,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -29113,11 +29119,11 @@
             lineNumber: 186,
             columnNumber: 19
           }
-        })), isActive && ((_data13 = data[i - 1]) === null || _data13 === void 0 ? void 0 : _data13.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        })), isActive && ((_data13 = data[i - 1]) == null ? void 0 : _data13.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
           align: "center",
           justify: "center",
           css: {
-            marginTop: (_data14 = data[i - 1]) !== null && _data14 !== void 0 && _data14.withTolltip ? 0 : '$spacing-03'
+            marginTop: (_data14 = data[i - 1]) != null && _data14.withTolltip ? 0 : '$spacing-03'
           },
           __self: undefined,
           __source: {
@@ -29140,54 +29146,50 @@
 
     return /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
       condition: !isMobile,
-      wrapper: child => {
-        var _props$appendContent;
-
-        return /*#__PURE__*/React__default["default"].createElement(Box, {
-          css: {
-            opacity: isHide ? 0 : undefined,
-            maxWidth: 311
-          },
-          __self: undefined,
-          __source: {
-            fileName: _jsxFileName$4,
-            lineNumber: 204,
-            columnNumber: 9
-          }
-        }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
-          css: {
-            position: !isMobile && 'sticky',
-            top: !isMobile ? 44 : 40
-          },
-          direction: "column",
-          gap: 7,
-          __self: undefined,
-          __source: {
-            fileName: _jsxFileName$4,
-            lineNumber: 205,
-            columnNumber: 11
-          }
-        }, /*#__PURE__*/React__default["default"].createElement(Card, {
-          css: {
-            height: 'fit-content',
-            padding: 0
-          },
-          showBottomLine: false,
-          __self: undefined,
-          __source: {
-            fileName: _jsxFileName$4,
-            lineNumber: 206,
-            columnNumber: 13
-          }
-        }, child), /*#__PURE__*/React__default["default"].createElement(Box, {
-          __self: undefined,
-          __source: {
-            fileName: _jsxFileName$4,
-            lineNumber: 215,
-            columnNumber: 13
-          }
-        }, typeof (props === null || props === void 0 ? void 0 : props.appendContent) === 'function' ? props === null || props === void 0 ? void 0 : (_props$appendContent = props.appendContent) === null || _props$appendContent === void 0 ? void 0 : _props$appendContent.call(props) : props === null || props === void 0 ? void 0 : props.appendContent)));
-      },
+      wrapper: child => /*#__PURE__*/React__default["default"].createElement(Box, {
+        css: {
+          opacity: isHide ? 0 : undefined,
+          maxWidth: 311
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 204,
+          columnNumber: 9
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        css: {
+          position: !isMobile && 'sticky',
+          top: !isMobile ? 44 : 40
+        },
+        direction: "column",
+        gap: 7,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 205,
+          columnNumber: 11
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Card, {
+        css: {
+          height: 'fit-content',
+          padding: 0
+        },
+        showBottomLine: false,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 206,
+          columnNumber: 13
+        }
+      }, child), /*#__PURE__*/React__default["default"].createElement(Box, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 215,
+          columnNumber: 13
+        }
+      }, typeof (props == null ? void 0 : props.appendContent) === 'function' ? props == null ? void 0 : props.appendContent == null ? void 0 : props.appendContent() : props == null ? void 0 : props.appendContent))),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
@@ -29255,9 +29257,7 @@
       }));
     }, [props.hide]);
     React.useEffect(() => {
-      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);
+      props == null ? void 0 : props.onChangeVisibility == null ? void 0 : props.onChangeVisibility(state.hide);
     }, [state.hide]);
 
     const toogleVisibility = value => {
@@ -29269,13 +29269,13 @@
     const getIsComplete = currentStep => {
       var _state$isComplete;
 
-      return state === null || state === void 0 ? void 0 : (_state$isComplete = state.isComplete) === null || _state$isComplete === void 0 ? void 0 : _state$isComplete[currentStep - 1];
+      return state == null ? void 0 : (_state$isComplete = state.isComplete) == null ? void 0 : _state$isComplete[currentStep - 1];
     };
 
     const getTitleStep = currentStep => {
       var _props$navContents, _props$navContents2;
 
-      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;
+      return props == null ? void 0 : (_props$navContents = props.navContents) == null ? void 0 : (_props$navContents2 = _props$navContents[currentStep - 1]) == null ? void 0 : _props$navContents2.title;
     };
 
     const setState = value => {
@@ -29317,15 +29317,15 @@
       });
       props.onStepChange && props.onStepChange(e);
 
-      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)) {
+      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)) {
           var _state$SW;
 
-          state === null || state === void 0 ? void 0 : (_state$SW = state.SW) === null || _state$SW === void 0 ? void 0 : _state$SW.nextStep();
+          state == null ? void 0 : (_state$SW = state.SW) == null ? void 0 : _state$SW.nextStep();
         } else {
           var _state$SW2;
 
-          state === null || state === void 0 ? void 0 : (_state$SW2 = state.SW) === null || _state$SW2 === void 0 ? void 0 : _state$SW2.previousStep();
+          state == null ? void 0 : (_state$SW2 = state.SW) == null ? void 0 : _state$SW2.previousStep();
         }
       }
     };
@@ -29341,11 +29341,11 @@
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
       value: {
         toogleVisibility,
-        isHide: state === null || state === void 0 ? void 0 : state.hide,
+        isHide: state == null ? void 0 : state.hide,
         setComplete,
         setState,
         state,
-        SW: state === null || state === void 0 ? void 0 : state.SW,
+        SW: state == null ? void 0 : state.SW,
         forbidClickNav: props.forbidClickNav,
         titles: props.titles,
         isMobile: props.isMobile,
@@ -29368,7 +29368,7 @@
       nav: /*#__PURE__*/React__default["default"].createElement(Navigation, {
         onNavClicked: props.onNavClicked,
         isComplete: state.isComplete,
-        appendContent: props === null || props === void 0 ? void 0 : props.appendContent,
+        appendContent: props == null ? void 0 : props.appendContent,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -29527,10 +29527,10 @@
     function getDatasets(content, activeId, isCollapse) {
       const datasets = [];
 
-      for (let i = 0; i < (content === null || content === void 0 ? void 0 : content.length); i++) {
+      for (let i = 0; i < (content == null ? void 0 : content.length); i++) {
         var _content$i;
 
-        if (((_content$i = content[i]) === null || _content$i === void 0 ? void 0 : _content$i.id) === activeId) {
+        if (((_content$i = content[i]) == null ? void 0 : _content$i.id) === activeId) {
           datasets.unshift(content[i]);
         } else {
           datasets.push(content[i]);
@@ -29570,7 +29570,7 @@
         lineNumber: 107,
         columnNumber: 7
       }
-    }, (_getDatasets = getDatasets(content, activeId, isCollapse)) === null || _getDatasets === void 0 ? void 0 : _getDatasets.map((item, index) => {
+    }, (_getDatasets = getDatasets(content, activeId, isCollapse)) == null ? void 0 : _getDatasets.map((item, index) => {
       return /*#__PURE__*/React__default["default"].createElement(List, {
         key: index,
         __self: this,
@@ -29587,11 +29587,11 @@
           marginLeft: '-4px !important',
           borderLeftWidth: '4px !important',
           borderLeftStyle: 'solid !important',
-          borderLeftColor: `${(item === null || item === void 0 ? void 0 : item.id) === activeId ? colors$4.primary500 : 'transparent'} !important`,
+          borderLeftColor: `${(item == null ? void 0 : item.id) === activeId ? colors$4.primary500 : 'transparent'} !important`,
           paddingLeft: '16px !important',
           minHeight: 25
         },
-        "data-to-scrollspy-id": item === null || item === void 0 ? void 0 : item.id,
+        "data-to-scrollspy-id": item == null ? void 0 : item.id,
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
@@ -29600,14 +29600,14 @@
         }
       }, /*#__PURE__*/React__default["default"].createElement(Title$1, {
         className: "link-title",
-        active: (item === null || item === void 0 ? void 0 : item.id) === activeId,
-        href: `#${item === null || item === void 0 ? void 0 : item.id}`,
+        active: (item == null ? void 0 : item.id) === activeId,
+        href: `#${item == null ? void 0 : item.id}`,
         onClick: e => {
           var _e$currentTarget, _e$currentTarget$href, _e$currentTarget$href2, _e$currentTarget2, _e$currentTarget2$hre, _e$currentTarget2$hre2;
 
           e.preventDefault();
-          onNavClick === null || onNavClick === void 0 ? void 0 : onNavClick(e === null || e === void 0 ? void 0 : (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : (_e$currentTarget$href = _e$currentTarget.href) === null || _e$currentTarget$href === void 0 ? void 0 : (_e$currentTarget$href2 = _e$currentTarget$href.split('#')) === null || _e$currentTarget$href2 === void 0 ? void 0 : _e$currentTarget$href2[1]);
-          const target = window.document.getElementById(e === null || e === void 0 ? void 0 : (_e$currentTarget2 = e.currentTarget) === null || _e$currentTarget2 === void 0 ? void 0 : (_e$currentTarget2$hre = _e$currentTarget2.href) === null || _e$currentTarget2$hre === void 0 ? void 0 : (_e$currentTarget2$hre2 = _e$currentTarget2$hre.split('#')) === null || _e$currentTarget2$hre2 === void 0 ? void 0 : _e$currentTarget2$hre2[1]);
+          onNavClick == null ? void 0 : onNavClick(e == null ? void 0 : (_e$currentTarget = e.currentTarget) == null ? void 0 : (_e$currentTarget$href = _e$currentTarget.href) == null ? void 0 : (_e$currentTarget$href2 = _e$currentTarget$href.split('#')) == null ? void 0 : _e$currentTarget$href2[1]);
+          const target = window.document.getElementById(e == null ? void 0 : (_e$currentTarget2 = e.currentTarget) == null ? void 0 : (_e$currentTarget2$hre = _e$currentTarget2.href) == null ? void 0 : (_e$currentTarget2$hre2 = _e$currentTarget2$hre.split('#')) == null ? void 0 : _e$currentTarget2$hre2[1]);
 
           if (target) {
             var headerOffset = 20;
@@ -29633,7 +29633,7 @@
           lineNumber: 125,
           columnNumber: 17
         }
-      }, item === null || item === void 0 ? void 0 : item.title), item === null || item === void 0 ? void 0 : item.icon));
+      }, item == null ? void 0 : item.title), item == null ? void 0 : item.icon));
     })));
   }
 
@@ -30863,40 +30863,56 @@
     width: 16,
     height: 16,
     background: '$bgWhite',
-    border: '4px solid $primary500',
+    borderWidth: 4,
+    borderStyle: 'solid',
+    borderColor: '$primary500',
     borderRadius: 50,
     boxSizing: 'border-box',
+    position: 'relative',
     variants: {
       state: {
         active: {
-          border: '4px solid $primary500'
+          borderColor: '$primary500'
         },
         inActive: {
-          border: '4px solid $gray100'
+          borderColor: '$gray150'
         },
         error: {
-          border: '4px solid $red400'
+          borderColor: '$red400'
+        }
+      },
+      withIcon: {
+        true: {
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: 40,
+          height: 40,
+          borderWidth: 2
+        }
+      },
+      completed: {
+        true: {
+          backgroundColor: '$primary500'
         }
       }
     }
   });
   var Title = styled('p', {
     fontStyle: 'normal',
-    fontWeight: 600,
     fontSize: 14,
     color: '$textPrimary',
     margin: 0,
+    zIndex: 10,
     variants: {
       state: {
         active: {
-          color: '$textPrimary'
+          fontWeight: 600
         },
         inActive: {
-          color: '$textDisable',
           fontWeight: 400
         },
         error: {
-          color: '$textRed',
           fontWeight: 400
         }
       }
@@ -30912,18 +30928,46 @@
           backgroundColor: '$primary500'
         },
         inActive: {
-          backgroundColor: '$gray100'
+          backgroundColor: '$gray150'
         },
         error: {
           backgroundColor: '$red400'
         }
+      },
+      withIcon: {
+        true: {
+          width: 'calc(100% - 40px)'
+        }
       }
     }
   });
+
+  var SvgCheckFilled = function SvgCheckFilled() {
+    return jsxRuntime.jsx("svg", __assign({
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, {
+      children: jsxRuntime.jsx("path", {
+        d: "M5 11.5L10 16.5L19 7.5",
+        stroke: "white",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, void 0)
+    }), void 0);
+  };
+
   function ProgressIndicator(props) {
+    var _a;
+
     var progressList = props.progressList,
         progress = props.progress,
         progressError = props.progressError;
+    var isMobile = useMediaQuery('(max-width: 767px)');
+    var isIcon = Boolean((_a = progressList === null || progressList === void 0 ? void 0 : progressList[0]) === null || _a === void 0 ? void 0 : _a.icon);
 
     function getState(itemProgress) {
       if (itemProgress === progressError) {
@@ -30937,41 +30981,108 @@
       }
     }
 
-    return jsxRuntime.jsxs(Container$4, __assign({
+    function renderIcon(item) {
+      var isCompleted = (item === null || item === void 0 ? void 0 : item.progress) < progress && (item === null || item === void 0 ? void 0 : item.progress) !== progressError;
+      var state = getState(item === null || item === void 0 ? void 0 : item.progress);
+
+      var getColor = function getColor(state) {
+        switch (state) {
+          case 'error':
+            return colors$4.red400;
+
+          case 'active':
+            return colors$4.primary500;
+
+          default:
+            return colors$4.gray150;
+        }
+      };
+
+      var iconProps = {
+        size: 24,
+        color: getColor(state)
+      };
+      return isCompleted ? jsxRuntime.jsx(SvgCheckFilled, {}, void 0) : /*#__PURE__*/React.cloneElement(item === null || item === void 0 ? void 0 : item.icon, iconProps);
+    }
+
+    return jsxRuntime.jsx(Container$4, __assign({
       direction: "column"
     }, {
-      children: [jsxRuntime.jsx(Flex$1, __assign({
-        align: "center",
-        justify: "between"
-      }, {
-        children: progressList === null || progressList === void 0 ? void 0 : progressList.map(function (item, index) {
-          return jsxRuntime.jsx(Title, __assign({
-            state: getState(item === null || item === void 0 ? void 0 : item.progress)
-          }, {
-            children: item.title
-          }), index);
-        })
-      }), void 0), jsxRuntime.jsx(Flex$1, __assign({
+      children: jsxRuntime.jsx(Flex$1, __assign({
+        css: {
+          margin: '0px 8px',
+          '@md': {
+            margin: '0px 4px'
+          },
+          '& > div:not(:first-child):not(:last-child)': {
+            '.title-progress': {
+              display: 'flex',
+              justifyContent: 'center'
+            }
+          },
+          '& > div:first-child': {
+            '.title-progress': {
+              display: 'flex',
+              justifyContent: 'start',
+              left: '-10%',
+              right: "-".concat(isIcon ? 500 : 3000, "%")
+            }
+          },
+          '& > div:last-child': {
+            '.title-progress': {
+              display: 'flex',
+              justifyContent: 'end',
+              right: '-10%',
+              left: "-".concat(isIcon ? 500 : 3000, "%")
+            }
+          }
+        },
         justify: "between"
       }, {
         children: progressList === null || progressList === void 0 ? void 0 : progressList.map(function (item, index) {
+          var _a;
+
+          var isCompleted = (item === null || item === void 0 ? void 0 : item.progress) < progress && (item === null || item === void 0 ? void 0 : item.progress) !== progressError;
           return jsxRuntime.jsxs(Flex$1, __assign({
             align: "center",
             css: {
-              flex: (progressList === null || progressList === void 0 ? void 0 : progressList.length) !== index + 1 ? 1 : 0
+              flex: (progressList === null || progressList === void 0 ? void 0 : progressList.length) !== index + 1 ? 1 : 0,
+              paddingTop: 45
             }
           }, {
-            children: [jsxRuntime.jsx(Status, {
-              state: getState(item === null || item === void 0 ? void 0 : item.progress)
-            }, void 0), jsxRuntime.jsx(Line, {
+            children: [jsxRuntime.jsxs(Status, __assign({
               state: getState(item === null || item === void 0 ? void 0 : item.progress),
+              withIcon: isIcon,
+              completed: isCompleted
+            }, {
+              children: [isIcon && renderIcon(item), jsxRuntime.jsx(Box, __assign({
+                className: "title-progress",
+                css: {
+                  position: 'absolute',
+                  top: -45,
+                  left: "-".concat(isIcon ? 250 : 2000, "%"),
+                  right: "-".concat(isIcon ? 250 : 2000, "%")
+                }
+              }, {
+                children: jsxRuntime.jsx(Title, __assign({
+                  css: {
+                    opacity: isMobile && (item === null || item === void 0 ? void 0 : item.progress) !== progress ? 0 : 1
+                  },
+                  state: getState(item === null || item === void 0 ? void 0 : item.progress)
+                }, {
+                  children: typeof (item === null || item === void 0 ? void 0 : item.title) === 'function' ? (_a = item === null || item === void 0 ? void 0 : item.title) === null || _a === void 0 ? void 0 : _a.call(item) : item === null || item === void 0 ? void 0 : item.title
+                }), index)
+              }), void 0)]
+            }), void 0), jsxRuntime.jsx(Line, {
+              state: getState((item === null || item === void 0 ? void 0 : item.progress) + 1),
+              withIcon: isIcon,
               css: {
                 display: (progressList === null || progressList === void 0 ? void 0 : progressList.length) === index + 1 ? 'none' : 'unset'
               }
             }, void 0)]
           }), index);
         })
-      }), void 0)]
+      }), void 0)
     }), void 0);
   }