@majoo-ui/react 1.55.6 → 1.55.7

package/index.esm.js

@@ -3588,7 +3588,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   onClick: e => {
     e.preventDefault();
     e.stopPropagation();
-    value === null || value === void 0 ? void 0 : value.onRemove();
+    value == null ? void 0 : value.onRemove();
   },
   __self: undefined,
   __source: {
@@ -3665,7 +3665,7 @@ const SingleTagBanner = props => {
     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,
@@ -5828,7 +5828,7 @@ const Checkbox = _ref => {
   const [isChecked, setChecked] = useState(false);
   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.createElement(StyledCheckbox, _extends({
     id: id,
@@ -6475,7 +6475,7 @@ const InputTextArea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   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';
     }
   }, []);
@@ -6523,7 +6523,7 @@ const InputRadioContext = /*#__PURE__*/React__default.createContext();
 var _jsxFileName$G = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadioGroup.js";
 const RadioGroup = styled(RadioGroupPrimitive.Root, Flex$1);
 function InputRadioGroup(props) {
-  return (props === null || props === void 0 ? void 0 : props.children) && /*#__PURE__*/React__default.createElement(InputRadioContext.Provider, {
+  return (props == null ? void 0 : props.children) && /*#__PURE__*/React__default.createElement(InputRadioContext.Provider, {
     value: props,
     __self: this,
     __source: {
@@ -6538,7 +6538,7 @@ function InputRadioGroup(props) {
       lineNumber: 14,
       columnNumber: 9
     }
-  }), React__default.Children.map(props === null || props === void 0 ? void 0 : props.children, child => /*#__PURE__*/React__default.cloneElement(child, {
+  }), React__default.Children.map(props == null ? void 0 : props.children, child => /*#__PURE__*/React__default.cloneElement(child, {
     style: Object.assign({}, child.props.style, {
       opacity: 1
     })
@@ -6765,7 +6765,7 @@ const InputRadio = _ref => {
     value,
     outlined
   }) => {
-    const checked = value !== null && value !== void 0 ? value : defaultValue;
+    const checked = value != null ? value : defaultValue;
     return /*#__PURE__*/React__default.createElement(Container$a, {
       direction: "column",
       outlined: outlined,
@@ -7056,7 +7056,7 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     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,
@@ -7872,18 +7872,18 @@ function TagsInput(_ref) {
   const addTags = event => {
     if (event.key === 'Enter' && event.target.value !== '' && max !== tags.length) {
       if (tags.find(tag => tag.toLowerCase() === event.target.value.toLowerCase())) {
-        onEnter === null || 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
           });
@@ -7893,7 +7893,7 @@ function TagsInput(_ref) {
       }
 
       setRegexError(false);
-      onEnter === null || onEnter === void 0 ? void 0 : onEnter({
+      onEnter == null ? void 0 : onEnter({
         key: 'success',
         value: event.target.value
       });
@@ -7906,7 +7906,7 @@ function TagsInput(_ref) {
     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 = () => {
@@ -7954,7 +7954,7 @@ function TagsInput(_ref) {
       lineNumber: 180,
       columnNumber: 9
     }
-  })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default.createElement(FormHelper, {
+  })), regexError && pattern && (pattern != null && pattern.errorMessage ? /*#__PURE__*/React__default.createElement(FormHelper, {
     color: "red",
     __self: this,
     __source: {
@@ -8262,7 +8262,7 @@ const InputSearchbox = _ref => {
       props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
   const [value, setValue] = React__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.useCallback(e => {
     setValue(e.target.value);
 
@@ -9808,10 +9808,10 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         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);
     }
@@ -9821,9 +9821,9 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     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]);
@@ -9834,7 +9834,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         setSelectedValue(filterItems);
 
         if (selected.id !== '!all') {
-          onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
+          onChange == null ? void 0 : onChange(filterItems);
         }
       }
     }
@@ -9879,7 +9879,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
                     removeSelectedItem(item);
                   });
                   setSelectedValue([]);
-                  onChange === null || onChange === void 0 ? void 0 : onChange([]);
+                  onChange == null ? void 0 : onChange([]);
                 } else {
                   removeItem(selectedItem);
                 }
@@ -9894,12 +9894,12 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
                   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);
@@ -10054,13 +10054,13 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       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.createElement(Tag, _extends({
+  })) == null ? void 0 : _selectedItems$filter2.map((selectedItem, index) => /*#__PURE__*/React__default.createElement(Tag, _extends({
     disabled: disabled,
     isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
     size: "lg",
@@ -10084,7 +10084,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       lineNumber: 575,
       columnNumber: 19
     }
-  }), selectedItem.name))), collapsible && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default.createElement(Flex$1, {
+  }), selectedItem.name))), collapsible && (selectedItems == null ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default.createElement(Flex$1, {
     align: "center",
     justify: "center",
     onClick: toggleCollapsible,
@@ -10150,7 +10150,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       lineNumber: 612,
       columnNumber: 17
     }
-  }))), showSelectedTag && showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
+  }))), showSelectedTag && showCounter && Boolean(selectedItems == null ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
     disabled: disabled,
     __self: undefined,
     __source: {
@@ -10163,7 +10163,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       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 })}
     ,
@@ -10185,7 +10185,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       lineNumber: 619,
       columnNumber: 13
     }
-  }, `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
+  }, `${selectedItems == null ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
     placement: placement,
     css: {
       display: isOpen && disabled === false ? 'block' : 'none',
@@ -10253,7 +10253,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       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.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.createElement(IndeterminateFilled, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
@@ -10940,7 +10940,7 @@ function InputResourceList({
       },
       ref: scrollerRef
     }, {
-      children: [data.length <= 0 && (value || checkedResources).length <= 0 && !isLoading || defaultSort && data.length < 1 && jsx(Flex$1, Object.assign({
+      children: [data.length <= 0 && (value || checkedResources).length <= 0 && !isLoading || defaultSort && data.length < 1 ? jsx(Flex$1, Object.assign({
         justify: "center",
         align: "center",
         css: {
@@ -10956,7 +10956,7 @@ function InputResourceList({
             ns: 'translation'
           })
         }), void 0)
-      }), void 0), jsx(ConditionalWrapper, Object.assign({
+      }), void 0) : null, jsx(ConditionalWrapper, Object.assign({
         condition: !!fetchData && data.length > 0,
         wrapper: children => jsx(InfiniteScroll, Object.assign({
           loadMore: _ => {
@@ -11517,8 +11517,8 @@ const PopoverContent = ({
     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)
   }), {
@@ -12921,7 +12921,7 @@ const NotificationBadge = _ref => {
   };
 
   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)) {
@@ -18227,7 +18227,7 @@ function PaginationInfo(_ref) {
       lineNumber: 42,
       columnNumber: 11
     }
-  }, limits === null || limits === void 0 ? void 0 : limits.map(limit => /*#__PURE__*/React__default.createElement(PopoverClose, {
+  }, limits == null ? void 0 : limits.map(limit => /*#__PURE__*/React__default.createElement(PopoverClose, {
     key: limit,
     css: limitItemContainerStyle(selectedLimit === limit),
     onClick: () => onChange(limit),
@@ -18261,7 +18261,7 @@ function PaginationInfo(_ref) {
   })));
 }
 
-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) {
@@ -18273,7 +18273,8 @@ function Pagination(_ref) {
     hideDataInfo,
     onLimitChange,
     onPageChange,
-    rowsPerPageOptions
+    rowsPerPageOptions,
+    hidePagination
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
@@ -18288,7 +18289,7 @@ function Pagination(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 22,
+      lineNumber: 23,
       columnNumber: 5
     }
   }), !hideDataInfo ? /*#__PURE__*/React__default.createElement(PaginationInfo, {
@@ -18300,25 +18301,25 @@ function Pagination(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 24,
+      lineNumber: 25,
       columnNumber: 9
     }
   }) : /*#__PURE__*/React__default.createElement(Box, {
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 32,
+      lineNumber: 33,
       columnNumber: 9
     }
-  }), /*#__PURE__*/React__default.createElement(PaginationButton, {
+  }), !hidePagination && /*#__PURE__*/React__default.createElement(PaginationButton, {
     currentPage: currentPage,
     totalPages: totalPages,
     onSelect: onPageChange,
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 35,
-      columnNumber: 7
+      lineNumber: 37,
+      columnNumber: 9
     }
   }));
 }
@@ -19065,7 +19066,8 @@ function Table({
   customRowsStyle,
   isMobileLayout,
   showDuplicatedData,
-  onRowClick
+  onRowClick,
+  hidePagination = false
 }) {
   const [limit, setLimit] = useState(rowLimit);
   const [dataRow, setDataRow] = useState({});
@@ -19142,6 +19144,7 @@ function Table({
   };
 
   const renderFooter = () => jsx(Pagination, {
+    hidePagination: hidePagination,
     limit: pageSize,
     currentPage: pageIndex + 1,
     totalData: totalData,
@@ -20299,7 +20302,7 @@ const rowMenuColumn = (options, icon, config) => ({
         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,
@@ -20997,7 +21000,7 @@ const TemplateAlertFunction = props => {
       if (!props.onOpenAutoFocus) {
         e.preventDefault();
       } else {
-        props === null || props === void 0 ? void 0 : props.onOpenAutoFocus();
+        props == null ? void 0 : props.onOpenAutoFocus();
       }
     },
     __self: undefined,
@@ -21118,8 +21121,8 @@ const TemplateAlertFunction = props => {
     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,
@@ -21138,12 +21141,12 @@ const TemplateAlertFunction = props => {
     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,
@@ -21165,8 +21168,8 @@ const TemplateAlertFunction = props => {
     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,
@@ -21329,8 +21332,8 @@ function AlertDialog(props) {
     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,
@@ -21349,12 +21352,12 @@ function AlertDialog(props) {
     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,
@@ -21376,8 +21379,8 @@ function AlertDialog(props) {
     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,
@@ -23480,13 +23483,13 @@ function canvasPreview(image, canvas, crop, scale = 1, rotate = 0, ratio) {
   });
 }
 
-function toBlob(canvas) {
+function toBlob(canvas, type) {
   return new Promise(resolve => {
-    canvas.toBlob(resolve);
+    canvas.toBlob(resolve, type);
   });
 }
 
-function imgPreview(image, crop, scale = 1, rotate = 0, ratio) {
+function imgPreview(image, crop, scale = 1, rotate = 0, ratio, type) {
   return __awaiter(this, void 0, void 0, function* () {
     if (ratio === 1) {
       crop.width = crop.height;
@@ -23494,7 +23497,7 @@ function imgPreview(image, crop, scale = 1, rotate = 0, ratio) {
 
     const canvas = document.createElement('canvas');
     canvasPreview(image, canvas, crop, scale, rotate, ratio);
-    const blob = yield toBlob(canvas);
+    const blob = yield toBlob(canvas, type);
     return blob;
   });
 }
@@ -23529,6 +23532,8 @@ function upload({
       onProgress === null || onProgress === void 0 ? void 0 : onProgress(e);
       progress === null || progress === void 0 ? void 0 : progress(Math.round(e.percent));
     }).end((err, res) => {
+      var _a, _b;
+
       if (err) {
         const 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));
@@ -23538,7 +23543,9 @@ function upload({
       if (res && (res === null || res === void 0 ? void 0 : res.ok)) {
         const 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];
+        }));
       }
     });
   });
@@ -23866,7 +23873,7 @@ const Upload = ({
         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,
@@ -23889,12 +23896,12 @@ const Upload = ({
               }
             }
 
-            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;
@@ -23911,12 +23918,12 @@ const Upload = ({
             }
           }
 
-          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;
 
@@ -23932,22 +23939,22 @@ const Upload = ({
             }
           }
 
-          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) {
@@ -23972,24 +23979,24 @@ const Upload = ({
           // program to get the dimensions of an image
           const img = document.createElement('img');
           img.src = URL.createObjectURL(files[0]);
-          img.size = files === null || 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();
@@ -24001,15 +24008,13 @@ const Upload = ({
   }
 
   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);
@@ -24022,19 +24027,19 @@ const Upload = ({
             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();
@@ -24065,7 +24070,7 @@ const Upload = ({
     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
     });
@@ -24093,22 +24098,22 @@ const Upload = ({
   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.get(file === null || file === void 0 ? void 0 : file.url).end((err, res) => {
+      request.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);
@@ -24178,12 +24183,12 @@ const Upload = ({
   }
 
   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.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,
@@ -24258,14 +24263,14 @@ const Upload = ({
   };
 
   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.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,
@@ -24332,7 +24337,7 @@ const Upload = ({
           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.createElement(Tooltip$1, {
+      }, ".", item == null ? void 0 : (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip$1, {
         label: item.name,
         __self: undefined,
         __source: {
@@ -24504,7 +24509,7 @@ const Upload = ({
         lineNumber: 742,
         columnNumber: 11
       }
-    }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+    }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
@@ -24538,7 +24543,7 @@ const Upload = ({
         lineNumber: 748,
         columnNumber: 17
       }
-    }, placeholder !== null && placeholder !== void 0 ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
+    }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       css: {
         width: width - 5
       },
@@ -24705,7 +24710,7 @@ const Upload = ({
 
   return /*#__PURE__*/React__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'
@@ -25580,10 +25585,10 @@ function InputColorPicker(props) {
   const [isPopover, setIsPopover] = 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})`;
@@ -28512,7 +28517,7 @@ const Navigation = props => {
 
     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;
@@ -28528,7 +28533,7 @@ const Navigation = props => {
         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);
@@ -28562,9 +28567,9 @@ const Navigation = props => {
           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.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.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,
@@ -28583,9 +28588,9 @@ const Navigation = props => {
           lineNumber: 135,
           columnNumber: 19
         }
-      })), ((_data6 = data[i - 1]) === null || _data6 === void 0 ? void 0 : _data6.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
+      })), ((_data6 = data[i - 1]) == null ? void 0 : _data6.comingSoon) && /*#__PURE__*/React__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,
@@ -28613,7 +28618,7 @@ const Navigation = props => {
           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);
@@ -28645,7 +28650,7 @@ const Navigation = props => {
           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: {
@@ -28663,10 +28668,10 @@ const Navigation = props => {
           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.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.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,
@@ -28682,11 +28687,11 @@ const Navigation = props => {
           lineNumber: 186,
           columnNumber: 19
         }
-      })), isActive && ((_data13 = data[i - 1]) === null || _data13 === void 0 ? void 0 : _data13.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
+      })), isActive && ((_data13 = data[i - 1]) == null ? void 0 : _data13.comingSoon) && /*#__PURE__*/React__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: {
@@ -28709,54 +28714,50 @@ const Navigation = props => {
 
   return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
     condition: !isMobile,
-    wrapper: child => {
-      var _props$appendContent;
-
-      return /*#__PURE__*/React__default.createElement(Box, {
-        css: {
-          opacity: isHide ? 0 : undefined,
-          maxWidth: 311
-        },
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$4,
-          lineNumber: 204,
-          columnNumber: 9
-        }
-      }, /*#__PURE__*/React__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.createElement(Card, {
-        css: {
-          height: 'fit-content',
-          padding: 0
-        },
-        showBottomLine: false,
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$4,
-          lineNumber: 206,
-          columnNumber: 13
-        }
-      }, child), /*#__PURE__*/React__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.createElement(Box, {
+      css: {
+        opacity: isHide ? 0 : undefined,
+        maxWidth: 311
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 204,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__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.createElement(Card, {
+      css: {
+        height: 'fit-content',
+        padding: 0
+      },
+      showBottomLine: false,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 206,
+        columnNumber: 13
+      }
+    }, child), /*#__PURE__*/React__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,
@@ -28824,9 +28825,7 @@ const Default = props => {
     }));
   }, [props.hide]);
   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 => {
@@ -28838,13 +28837,13 @@ const Default = props => {
   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 => {
@@ -28886,15 +28885,15 @@ const Default = props => {
     });
     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();
       }
     }
   };
@@ -28910,11 +28909,11 @@ const Default = props => {
   }, /*#__PURE__*/React__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,
@@ -28937,7 +28936,7 @@ const Default = props => {
     nav: /*#__PURE__*/React__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,
@@ -29096,10 +29095,10 @@ function Content({
   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]);
@@ -29139,7 +29138,7 @@ function Content({
       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.createElement(List, {
       key: index,
       __self: this,
@@ -29156,11 +29155,11 @@ function Content({
         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,
@@ -29169,14 +29168,14 @@ function Content({
       }
     }, /*#__PURE__*/React__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;
@@ -29202,7 +29201,7 @@ function Content({
         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));
   })));
 }
 
@@ -30417,40 +30416,56 @@ const Status = styled('div', {
   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'
       }
     }
   }
 });
 const 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
       }
     }
@@ -30466,20 +30481,46 @@ const Line = styled('span', {
         backgroundColor: '$primary500'
       },
       inActive: {
-        backgroundColor: '$gray100'
+        backgroundColor: '$gray150'
       },
       error: {
         backgroundColor: '$red400'
       }
+    },
+    withIcon: {
+      true: {
+        width: 'calc(100% - 40px)'
+      }
     }
   }
 });
+
+const SvgCheckFilled = () => jsx("svg", Object.assign({
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, {
+  children: 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;
+
   const {
     progressList,
     progress,
     progressError
   } = props;
+  const isMobile = useMediaQuery('(max-width: 767px)');
+  const 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) {
@@ -30493,41 +30534,108 @@ function ProgressIndicator(props) {
     }
   }
 
-  return jsxs(Container$4, Object.assign({
+  function renderIcon(item) {
+    const isCompleted = (item === null || item === void 0 ? void 0 : item.progress) < progress && (item === null || item === void 0 ? void 0 : item.progress) !== progressError;
+    const state = getState(item === null || item === void 0 ? void 0 : item.progress);
+
+    const getColor = state => {
+      switch (state) {
+        case 'error':
+          return colors$4.red400;
+
+        case 'active':
+          return colors$4.primary500;
+
+        default:
+          return colors$4.gray150;
+      }
+    };
+
+    const iconProps = {
+      size: 24,
+      color: getColor(state)
+    };
+    return isCompleted ? jsx(SvgCheckFilled, {}, void 0) : /*#__PURE__*/cloneElement(item === null || item === void 0 ? void 0 : item.icon, iconProps);
+  }
+
+  return jsx(Container$4, Object.assign({
     direction: "column"
   }, {
-    children: [jsx(Flex$1, Object.assign({
-      align: "center",
-      justify: "between"
-    }, {
-      children: progressList === null || progressList === void 0 ? void 0 : progressList.map((item, index) => {
-        return jsx(Title, Object.assign({
-          state: getState(item === null || item === void 0 ? void 0 : item.progress)
-        }, {
-          children: item.title
-        }), index);
-      })
-    }), void 0), jsx(Flex$1, Object.assign({
+    children: jsx(Flex$1, Object.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: `-${isIcon ? 500 : 3000}%`
+          }
+        },
+        '& > div:last-child': {
+          '.title-progress': {
+            display: 'flex',
+            justifyContent: 'end',
+            right: '-10%',
+            left: `-${isIcon ? 500 : 3000}%`
+          }
+        }
+      },
       justify: "between"
     }, {
       children: progressList === null || progressList === void 0 ? void 0 : progressList.map((item, index) => {
+        var _a;
+
+        const isCompleted = (item === null || item === void 0 ? void 0 : item.progress) < progress && (item === null || item === void 0 ? void 0 : item.progress) !== progressError;
         return jsxs(Flex$1, Object.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: [jsx(Status, {
-            state: getState(item === null || item === void 0 ? void 0 : item.progress)
-          }, void 0), jsx(Line, {
+          children: [jsxs(Status, Object.assign({
             state: getState(item === null || item === void 0 ? void 0 : item.progress),
+            withIcon: isIcon,
+            completed: isCompleted
+          }, {
+            children: [isIcon && renderIcon(item), jsx(Box, Object.assign({
+              className: "title-progress",
+              css: {
+                position: 'absolute',
+                top: -45,
+                left: `-${isIcon ? 250 : 2000}%`,
+                right: `-${isIcon ? 250 : 2000}%`
+              }
+            }, {
+              children: jsx(Title, Object.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), 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);
 }