@majoo-ui/react 1.52.9 → 1.52.10

package/index.esm.js

@@ -43,7 +43,7 @@ import { ResponsiveContainer, LineChart as LineChart$1, XAxis, YAxis, CartesianG
 import { EditorState } from 'draft-js';
 import { Editor } from 'react-draft-wysiwyg';
 import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
-import imageCompression from 'browser-image-compression';
+import imageCompressionComponent from 'browser-image-compression';
 import { useSticky } from 'react-table-sticky';
 
 var _jsxFileName$10 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
@@ -3875,6 +3875,20 @@ const ButtonNegativeGhost = {
     outline: '1px solid $btnNegative'
   }
 };
+const ButtonGhostSecondary = {
+  backgroundColor: '$btnSecondary',
+  color: '$textSecondary',
+  border: 'none',
+  '&:hover': {
+    backgroundColor: '$gray100',
+    outline: '1px solid $gray100',
+    color: '$textSecondary'
+  },
+  '&:active': {
+    backgroundColor: '$gray150',
+    outline: '1px solid $gray150'
+  }
+};
 const ButtonHeaderMenu = {
   backgroundColor: '$bgWhite',
   border: '1px solid $bgBorder',
@@ -3962,6 +3976,7 @@ const ButtonPrimitive = styled('button', {
       primary: Object.assign({}, ButtonPrimary),
       secondary: Object.assign({}, PrimarySecondary),
       ghost: Object.assign({}, GhostButton),
+      'ghost-secondary': Object.assign({}, ButtonGhostSecondary),
       negative: Object.assign({}, ButtonNegative),
       'negative-secondary': Object.assign({}, ButtonNegativeSecondary),
       'negative-ghost': Object.assign({}, ButtonNegativeGhost),
@@ -6341,7 +6356,7 @@ InputRadioGroup.propTypes = {
 };
 InputRadioGroup.displayName = 'InputRadioGroup';
 
-const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps", "description"];
+const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps", "description", "readOnly"];
 var _jsxFileName$E = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
 const INDICATOR_BASE_STYLES = {
   alignItems: 'center',
@@ -6412,6 +6427,20 @@ const StyledRadio = styled(RadioGroupPrimitive.Item, RADIO_BASE_STYLES, {
         backgroundColor: '$gray200'
       }
     }
+  },
+  variants: {
+    readOnly: {
+      true: {
+        '&[data-state=checked]': {
+          border: '2px solid $primary500 !important'
+        },
+        [`& ${StyledIndicator$1}`]: {
+          '&::after': {
+            backgroundColor: '$primary500 !important'
+          }
+        }
+      }
+    }
   }
 });
 const Container$8 = styled(Flex$1, {
@@ -6431,6 +6460,11 @@ const Container$8 = styled(Flex$1, {
         }
       }
     },
+    disabledOutlined: {
+      true: {
+        backgroundColor: '$gray150 !important'
+      }
+    },
     active: {
       true: {
         border: '1px solid $primary400 !important'
@@ -6457,7 +6491,8 @@ const InputRadio = _ref => {
     css,
     inputType,
     inputProps,
-    description
+    description,
+    readOnly
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
@@ -6466,22 +6501,24 @@ const InputRadio = _ref => {
       case 'number':
         return /*#__PURE__*/React__default.createElement(InputNumber, _extends({}, inputProps, {
           disabled: disabled || checked !== props.value,
+          readOnly: readOnly || checked !== props.value,
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 125,
-            columnNumber: 16
+            lineNumber: 146,
+            columnNumber: 11
           }
         }));
 
       case 'text':
         return /*#__PURE__*/React__default.createElement(InputText, _extends({}, inputProps, {
           disabled: disabled || checked !== props.value,
+          readOnly: readOnly || checked !== props.value,
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 128,
-            columnNumber: 16
+            lineNumber: 155,
+            columnNumber: 11
           }
         }));
 
@@ -6495,12 +6532,12 @@ const InputRadio = _ref => {
             letterSpacing: '$long-content-regular',
             fontWeight: '400',
             cursor: 'pointer',
-            color: disabled ? '$textDisable' : '$textPrimary'
+            color: disabled || readOnly ? '$textDisable' : '$textPrimary'
           },
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 132,
+            lineNumber: 164,
             columnNumber: 11
           }
         }, props.label);
@@ -6511,7 +6548,7 @@ const InputRadio = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$E,
-      lineNumber: 151,
+      lineNumber: 183,
       columnNumber: 5
     }
   }, ({
@@ -6523,13 +6560,14 @@ const InputRadio = _ref => {
     return /*#__PURE__*/React__default.createElement(Container$8, {
       direction: "column",
       outlined: outlined,
+      disabledOutlined: outlined && (readOnly || disabled),
       disabled: disabled,
-      active: outlined && checked === props.value && !disabled,
+      active: outlined && checked === props.value && !disabled && !readOnly,
       css: css,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 156,
+        lineNumber: 188,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -6538,24 +6576,25 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 163,
+        lineNumber: 196,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(StyledRadio, _extends({
       id: id,
-      disabled: disabled
+      disabled: disabled || readOnly,
+      readOnly: readOnly
     }, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 164,
+        lineNumber: 197,
         columnNumber: 15
       }
     }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 165,
+        lineNumber: 198,
         columnNumber: 17
       }
     })), renderInputType(inputType, checked)), description && /*#__PURE__*/React__default.createElement(Text$1, {
@@ -6567,7 +6606,7 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 171,
+        lineNumber: 203,
         columnNumber: 15
       }
     }, description));
@@ -6581,7 +6620,8 @@ InputRadio.propTypes = {
   css: PropTypes.object,
   inputType: PropTypes.oneOf(['number', 'text', 'default']),
   onChange: PropTypes.func,
-  description: PropTypes.string
+  description: PropTypes.string,
+  readOnly: PropTypes.bool
 };
 InputRadio.displayName = 'InputRadio';
 
@@ -6763,7 +6803,7 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     size: size,
     isInvalid: isInvalid,
     readOnly: readOnly,
-    isReadOnly: readOnly,
+    isReadOnly: readOnly && !(props !== null && props !== void 0 && props.inputGroup),
     disabled: disabled
   }, props, {
     __self: undefined,
@@ -16343,13 +16383,11 @@ function advancePickerDate(type) {
 
 moment.locale('id');
 
-const getInputPickerValue = (type, date) => {
+const getInputPickerValue = (type, date, isTimePicker) => {
   if (!date) return '';
 
   if (type === SINGLE_PICKER) {
-    return Intl.DateTimeFormat('id-ID', {
-      dateStyle: 'long'
-    }).format(date);
+    return `${moment(date).format(isTimePicker ? 'D MMMM YYYY, HH:mm' : 'D MMMM YYYY')}`;
   } else {
     return `${moment(date[0]).format('ll')} - ${moment(date[1]).format('ll')}`;
   }
@@ -16415,7 +16453,7 @@ function InputDatePicker({
       children: jsx(CalendarOutline, {}, void 0)
     }, void 0), jsx(InputText, {
       placeholder: placeholder,
-      value: getInputPickerValue(type, selectedDate),
+      value: getInputPickerValue(type, selectedDate, showTimePicker),
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       onChange: () => {},
       isPicker: true
@@ -21902,6 +21940,7 @@ const Upload = ({
   multiple,
   fileList,
   onChange,
+  onBeforeCrop,
   onError,
   onSuccess,
   onProgress,
@@ -21926,7 +21965,8 @@ const Upload = ({
   ratio,
   disabled,
   errorMessage,
-  maxSizeMB
+  maxSizeMB,
+  imageCompression
 }) => {
   const isFile = listType === 'file';
   const imgRef = useRef(null);
@@ -22122,7 +22162,7 @@ const Upload = ({
               }
             }
 
-            (_onChange = onChange({
+            onChange === null || onChange === void 0 ? void 0 : (_onChange = onChange({
               fileList: arrProgress,
               file: fileProgress,
               indexReplace: indexReplace.current,
@@ -22144,7 +22184,7 @@ const Upload = ({
             }
           }
 
-          (_onChange2 = onChange({
+          onChange === null || onChange === void 0 ? void 0 : (_onChange2 = onChange({
             fileList: arrSuccess,
             file: fileSuccess,
             indexReplace: indexReplace.current,
@@ -22165,7 +22205,7 @@ const Upload = ({
             }
           }
 
-          (_onChange3 = onChange({
+          onChange === null || onChange === void 0 ? void 0 : (_onChange3 = onChange({
             fileList: arrError,
             file: fileError,
             indexReplace: indexReplace.current,
@@ -22175,7 +22215,7 @@ const Upload = ({
       } else {
         var _onChange4, _onChange4$then;
 
-        (_onChange4 = onChange({
+        onChange === null || onChange === void 0 ? void 0 : (_onChange4 = onChange({
           fileList: arrFile,
           file: newFile,
           indexReplace: indexReplace.current,
@@ -22193,15 +22233,38 @@ const Upload = ({
   }
 
   function handleChange(e) {
-    if (e.target.files && e.target.files[0] && onChange) {
+    if (e.target.files && e.target.files[0]) {
       const files = e.target.files;
 
       if (isFile || !showCropper) {
         handleUpload(files);
       } else {
-        toggleModal();
-        setFileState(files[0]);
-        setPreviewImage(URL.createObjectURL(files[0]));
+        if (onBeforeCrop) {
+          // program to get the dimensions of an image
+          const img = document.createElement('img');
+          img.src = URL.createObjectURL(files[0]);
+
+          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(() => {
+              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));
+          };
+
+          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));
+          };
+        } else {
+          toggleModal();
+          setFileState(files[0]);
+          setPreviewImage(URL.createObjectURL(files[0]));
+        }
       }
     }
   }
@@ -22209,22 +22272,36 @@ 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 => {
-        imageCompression(blob, {
-          maxSizeMB,
-          maxWidthOrHeight: 1920,
-          maxIteration: 2,
-          useWebWorker: true,
-          alwaysKeepResolution: true
-        }).then(compressedFile => {
+        const sizeMB = (blob === null || blob === void 0 ? void 0 : blob.size) / 1024 / 1024;
+
+        if (sizeMB < maxSizeMB || sizeMB < 1 || !imageCompression) {
           var _fileState$name;
 
-          const file = new File([compressedFile], (fileState === null || fileState === void 0 ? void 0 : (_fileState$name = fileState.name) === null || _fileState$name === void 0 ? void 0 : _fileState$name.replace(/\.[^/.]+$/, '')) + '.png', {
-            type: compressedFile === null || compressedFile === void 0 ? void 0 : compressedFile.type
+          const file = new File([blob], (fileState === null || fileState === void 0 ? void 0 : (_fileState$name = fileState.name) === null || _fileState$name === void 0 ? void 0 : _fileState$name.replace(/\.[^/.]+$/, '')) + '.png', {
+            type: blob === null || blob === void 0 ? void 0 : blob.type
           });
           handleUpload([file]);
           setCrop(null);
           setCompletedCrop(null);
-        }).catch(error => console.error(error === null || error === void 0 ? void 0 : error.message));
+        } else {
+          imageCompressionComponent(blob, {
+            maxSizeMB,
+            maxWidthOrHeight: 1920,
+            maxIteration: 10,
+            useWebWorker: true,
+            alwaysKeepResolution: true
+          }).then(compressedFile => {
+            var _fileState$name2;
+
+            const file = new File([compressedFile], (fileState === null || fileState === void 0 ? void 0 : (_fileState$name2 = fileState.name) === null || _fileState$name2 === void 0 ? void 0 : _fileState$name2.replace(/\.[^/.]+$/, '')) + '.png', {
+              type: compressedFile === null || compressedFile === void 0 ? void 0 : compressedFile.type
+            });
+            handleUpload([file]);
+            setCrop(null);
+            setCompletedCrop(null);
+          }).catch(error => console.error(error === null || error === void 0 ? void 0 : error.message));
+        }
+
         toggleModal();
       }).catch(error => console.error(error === null || error === void 0 ? void 0 : error.message));
     } else {
@@ -22254,15 +22331,13 @@ const Upload = ({
   }
 
   function handleClose(file) {
-    if (onChange) {
-      const index = fileList.indexOf(file);
-      const newFileList = fileList.slice();
-      newFileList.splice(index, 1);
-      onChange({
-        fileList: newFileList,
-        file
-      });
-    }
+    const index = fileList.indexOf(file);
+    const newFileList = fileList.slice();
+    newFileList.splice(index, 1);
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      fileList: newFileList,
+      file
+    });
   }
 
   function handleRemove(file) {
@@ -22355,7 +22430,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 572,
+        lineNumber: 603,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -22365,7 +22440,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 573,
+        lineNumber: 604,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
@@ -22381,7 +22456,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 583,
+            lineNumber: 614,
             columnNumber: 16
           }
         });
@@ -22393,7 +22468,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 586,
+          lineNumber: 617,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -22403,7 +22478,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 587,
+          lineNumber: 618,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22412,7 +22487,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 588,
+          lineNumber: 619,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -22425,7 +22500,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 589,
+          lineNumber: 620,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22434,7 +22509,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 597,
+          lineNumber: 628,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -22444,7 +22519,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 599,
+          lineNumber: 630,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -22463,7 +22538,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 610,
+            lineNumber: 641,
             columnNumber: 16
           }
         });
@@ -22474,7 +22549,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 613,
+          lineNumber: 644,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -22484,7 +22559,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 614,
+          lineNumber: 645,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22493,7 +22568,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 615,
+          lineNumber: 646,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -22506,7 +22581,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 616,
+          lineNumber: 647,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22516,14 +22591,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 624,
+          lineNumber: 655,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(FileExtension, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 625,
+          lineNumber: 656,
           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, {
@@ -22531,7 +22606,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 626,
+          lineNumber: 657,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -22546,7 +22621,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 627,
+          lineNumber: 658,
           columnNumber: 19
         }
       }, item.name)))), /*#__PURE__*/React__default.createElement(Box, {
@@ -22559,7 +22634,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 642,
+          lineNumber: 673,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22568,7 +22643,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 650,
+          lineNumber: 681,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -22576,7 +22651,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 652,
+          lineNumber: 683,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -22592,7 +22667,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 663,
+        lineNumber: 694,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22606,7 +22681,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 664,
+        lineNumber: 695,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -22632,7 +22707,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 665,
+        lineNumber: 696,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -22640,14 +22715,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 678,
+        lineNumber: 709,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 679,
+        lineNumber: 710,
         columnNumber: 11
       }
     }, "Berkas sedang diunggah")));
@@ -22660,7 +22735,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 687,
+        lineNumber: 718,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -22676,7 +22751,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 688,
+        lineNumber: 719,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -22688,21 +22763,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 699,
+        lineNumber: 730,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 700,
+        lineNumber: 731,
         columnNumber: 11
       }
     }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 702,
+        lineNumber: 733,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -22711,7 +22786,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 703,
+        lineNumber: 734,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -22719,7 +22794,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 704,
+        lineNumber: 735,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -22729,14 +22804,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 706,
+        lineNumber: 737,
         columnNumber: 17
       }
     }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 713,
+        lineNumber: 744,
         columnNumber: 19
       }
     }, error));
@@ -22747,7 +22822,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 720,
+        lineNumber: 751,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -22755,7 +22830,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 721,
+        lineNumber: 752,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -22763,7 +22838,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 722,
+        lineNumber: 753,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -22776,7 +22851,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 724,
+        lineNumber: 755,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -22788,7 +22863,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 727,
+        lineNumber: 758,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -22799,7 +22874,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 728,
+        lineNumber: 759,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -22813,14 +22888,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 729,
+        lineNumber: 760,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 732,
+        lineNumber: 763,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22832,7 +22907,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 733,
+        lineNumber: 764,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -22840,7 +22915,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 734,
+        lineNumber: 765,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -22852,7 +22927,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 735,
+        lineNumber: 766,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22860,7 +22935,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 741,
+        lineNumber: 772,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$3, {
@@ -22869,7 +22944,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 742,
+        lineNumber: 773,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$3, {
@@ -22877,7 +22952,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 745,
+        lineNumber: 776,
         columnNumber: 15
       }
     }, "Simpan")))));
@@ -22893,7 +22968,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 754,
+      lineNumber: 785,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -22902,7 +22977,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 757,
+      lineNumber: 788,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -22920,7 +22995,8 @@ Upload.defaultProps = {
   resKey: 'url',
   ratio: 16 / 9,
   disabled: false,
-  maxSizeMB: 1
+  maxSizeMB: 1,
+  imageCompression: true
 };
 Upload.propTypes = {
   /**
@@ -23074,7 +23150,17 @@ Upload.propTypes = {
   /**
    Referencing the key to get the file from the API response.
    */
-  resKey: PropTypes.string
+  resKey: PropTypes.string,
+
+  /**
+   To compression image if file size > 1MB.
+   */
+  imageCompression: PropTypes.bool,
+
+  /**
+   Callback to handle before crop image.
+   */
+  onBeforeCrop: PropTypes.func
 };
 Upload.displayName = 'Upload';
 
@@ -26631,6 +26717,8 @@ const Navigation = props => {
         align: "center",
         key: `step-${i}`,
         onClick: () => {
+          if (props.onNavClicked) props.onNavClicked(i);
+
           if (!forbidClickNav && isComplete && !isHide) {
             props.goToStep(i);
           }
@@ -26648,7 +26736,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 118,
+          lineNumber: 119,
           columnNumber: 15
         }
       }), isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -26660,7 +26748,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 119,
+          lineNumber: 120,
           columnNumber: 30
         }
       }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) === null || _data$title === void 0 ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -26669,7 +26757,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 122,
+          lineNumber: 123,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -26681,7 +26769,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 123,
+          lineNumber: 124,
           columnNumber: 19
         }
       })), ((_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -26692,7 +26780,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 127,
+          lineNumber: 128,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Tag, {
@@ -26701,7 +26789,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 128,
+          lineNumber: 129,
           columnNumber: 19
         }
       }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -26718,7 +26806,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 136,
+          lineNumber: 137,
           columnNumber: 13
         }
       }, isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -26727,7 +26815,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 148,
+          lineNumber: 149,
           columnNumber: 30
         }
       }), !isComplete && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -26743,7 +26831,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 150,
+          lineNumber: 151,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -26753,7 +26841,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 162,
+          lineNumber: 163,
           columnNumber: 15
         }
       }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -26763,7 +26851,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 166,
+          lineNumber: 167,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -26772,7 +26860,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 167,
+          lineNumber: 168,
           columnNumber: 19
         }
       })), isActive && ((_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -26784,7 +26872,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 171,
+          lineNumber: 172,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Tag, {
@@ -26793,7 +26881,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 172,
+          lineNumber: 173,
           columnNumber: 19
         }
       }, "Coming Soon"))));
@@ -26815,7 +26903,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 182,
+      lineNumber: 183,
       columnNumber: 5
     }
   }, isMobile ? /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -26827,7 +26915,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 198,
+      lineNumber: 199,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -26840,7 +26928,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 199,
+      lineNumber: 200,
       columnNumber: 11
     }
   }, stepItems)) : stepItems);
@@ -26941,7 +27029,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 296,
+      lineNumber: 297,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
@@ -26963,7 +27051,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 297,
+      lineNumber: 298,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -26971,11 +27059,12 @@ const Default = props => {
     className: !props.isMobile && 'stepperInstance',
     instance: setInstance,
     nav: /*#__PURE__*/React__default.createElement(Navigation, {
+      onNavClicked: props.onNavClicked,
       isComplete: state.isComplete,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 319,
+        lineNumber: 320,
         columnNumber: 16
       }
     }),
@@ -26985,7 +27074,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 314,
+      lineNumber: 315,
       columnNumber: 9
     }
   }), props.children)));