@majoo-ui/react 1.52.9 → 1.52.10

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('react-ui-scrollspy'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', 'react-ui-scrollspy', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.ReactCrop, global.imageCompression, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, api, request, recharts, draftJs, reactDraftWysiwyg, ReactCrop, imageCompression, reactTableSticky) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, api, request, recharts, draftJs, reactDraftWysiwyg, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -55,7 +55,7 @@
   var ScrollSpy__default = /*#__PURE__*/_interopDefaultLegacy(ScrollSpy);
   var request__default = /*#__PURE__*/_interopDefaultLegacy(request);
   var ReactCrop__default = /*#__PURE__*/_interopDefaultLegacy(ReactCrop);
-  var imageCompression__default = /*#__PURE__*/_interopDefaultLegacy(imageCompression);
+  var imageCompressionComponent__default = /*#__PURE__*/_interopDefaultLegacy(imageCompressionComponent);
 
   var _jsxFileName$10 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
 
@@ -3954,6 +3954,20 @@
       outline: '1px solid $btnNegative'
     }
   };
+  var ButtonGhostSecondary = {
+    backgroundColor: '$btnSecondary',
+    color: '$textSecondary',
+    border: 'none',
+    '&:hover': {
+      backgroundColor: '$gray100',
+      outline: '1px solid $gray100',
+      color: '$textSecondary'
+    },
+    '&:active': {
+      backgroundColor: '$gray150',
+      outline: '1px solid $gray150'
+    }
+  };
   var ButtonHeaderMenu = {
     backgroundColor: '$bgWhite',
     border: '1px solid $bgBorder',
@@ -4041,6 +4055,7 @@
         primary: __assign({}, ButtonPrimary),
         secondary: __assign({}, PrimarySecondary),
         ghost: __assign({}, GhostButton),
+        'ghost-secondary': __assign({}, ButtonGhostSecondary),
         negative: __assign({}, ButtonNegative),
         'negative-secondary': __assign({}, ButtonNegativeSecondary),
         'negative-ghost': __assign({}, ButtonNegativeGhost),
@@ -6421,7 +6436,7 @@
   };
   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',
@@ -6492,6 +6507,20 @@
           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, {
@@ -6511,6 +6540,11 @@
           }
         }
       },
+      disabledOutlined: {
+        true: {
+          backgroundColor: '$gray150 !important'
+        }
+      },
       active: {
         true: {
           border: '1px solid $primary400 !important'
@@ -6537,7 +6571,8 @@
       css,
       inputType,
       inputProps,
-      description
+      description,
+      readOnly
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
@@ -6546,22 +6581,24 @@
         case 'number':
           return /*#__PURE__*/React__default["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["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
             }
           }));
 
@@ -6575,12 +6612,12 @@
               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);
@@ -6591,7 +6628,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 151,
+        lineNumber: 183,
         columnNumber: 5
       }
     }, ({
@@ -6603,13 +6640,14 @@
       return /*#__PURE__*/React__default["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["default"].createElement(Flex$1, {
@@ -6618,24 +6656,25 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 163,
+          lineNumber: 196,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["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["default"].createElement(StyledIndicator$1, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 165,
+          lineNumber: 198,
           columnNumber: 17
         }
       })), renderInputType(inputType, checked)), description && /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -6647,7 +6686,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 171,
+          lineNumber: 203,
           columnNumber: 15
         }
       }, description));
@@ -6661,7 +6700,8 @@
     css: PropTypes__default["default"].object,
     inputType: PropTypes__default["default"].oneOf(['number', 'text', 'default']),
     onChange: PropTypes__default["default"].func,
-    description: PropTypes__default["default"].string
+    description: PropTypes__default["default"].string,
+    readOnly: PropTypes__default["default"].bool
   };
   InputRadio.displayName = 'InputRadio';
 
@@ -6843,7 +6883,7 @@
       size: size,
       isInvalid: isInvalid,
       readOnly: readOnly,
-      isReadOnly: readOnly,
+      isReadOnly: readOnly && !(props !== null && props !== void 0 && props.inputGroup),
       disabled: disabled
     }, props, {
       __self: undefined,
@@ -16606,13 +16646,11 @@
 
   moment__default["default"].locale('id');
 
-  var getInputPickerValue = function getInputPickerValue(type, date) {
+  var getInputPickerValue = function getInputPickerValue(type, date, isTimePicker) {
     if (!date) return '';
 
     if (type === SINGLE_PICKER) {
-      return Intl.DateTimeFormat('id-ID', {
-        dateStyle: 'long'
-      }).format(date);
+      return "".concat(moment__default["default"](date).format(isTimePicker ? 'D MMMM YYYY, HH:mm' : 'D MMMM YYYY'));
     } else {
       return "".concat(moment__default["default"](date[0]).format('ll'), " - ").concat(moment__default["default"](date[1]).format('ll'));
     }
@@ -16694,7 +16732,7 @@
           children: jsxRuntime.jsx(icons.CalendarOutline, {}, void 0)
         }, void 0), jsxRuntime.jsx(InputText, {
           placeholder: placeholder,
-          value: getInputPickerValue(type, selectedDate),
+          value: getInputPickerValue(type, selectedDate, showTimePicker),
           // eslint-disable-next-line @typescript-eslint/no-empty-function
           onChange: function () {},
           isPicker: true
@@ -22280,6 +22318,7 @@
     multiple,
     fileList,
     onChange,
+    onBeforeCrop,
     onError,
     onSuccess,
     onProgress,
@@ -22304,7 +22343,8 @@
     ratio,
     disabled,
     errorMessage,
-    maxSizeMB
+    maxSizeMB,
+    imageCompression
   }) => {
     const isFile = listType === 'file';
     const imgRef = React.useRef(null);
@@ -22500,7 +22540,7 @@
                 }
               }
 
-              (_onChange = onChange({
+              onChange === null || onChange === void 0 ? void 0 : (_onChange = onChange({
                 fileList: arrProgress,
                 file: fileProgress,
                 indexReplace: indexReplace.current,
@@ -22522,7 +22562,7 @@
               }
             }
 
-            (_onChange2 = onChange({
+            onChange === null || onChange === void 0 ? void 0 : (_onChange2 = onChange({
               fileList: arrSuccess,
               file: fileSuccess,
               indexReplace: indexReplace.current,
@@ -22543,7 +22583,7 @@
               }
             }
 
-            (_onChange3 = onChange({
+            onChange === null || onChange === void 0 ? void 0 : (_onChange3 = onChange({
               fileList: arrError,
               file: fileError,
               indexReplace: indexReplace.current,
@@ -22553,7 +22593,7 @@
         } else {
           var _onChange4, _onChange4$then;
 
-          (_onChange4 = onChange({
+          onChange === null || onChange === void 0 ? void 0 : (_onChange4 = onChange({
             fileList: arrFile,
             file: newFile,
             indexReplace: indexReplace.current,
@@ -22571,15 +22611,38 @@
     }
 
     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]));
+          }
         }
       }
     }
@@ -22587,22 +22650,36 @@
     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__default["default"](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__default["default"](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 {
@@ -22632,15 +22709,13 @@
     }
 
     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) {
@@ -22733,7 +22808,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 572,
+          lineNumber: 603,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -22743,7 +22818,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 573,
+          lineNumber: 604,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
@@ -22759,7 +22834,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 583,
+              lineNumber: 614,
               columnNumber: 16
             }
           });
@@ -22771,7 +22846,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 586,
+            lineNumber: 617,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22781,7 +22856,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 587,
+            lineNumber: 618,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22790,7 +22865,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 588,
+            lineNumber: 619,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22803,7 +22878,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 589,
+            lineNumber: 620,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22812,7 +22887,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 597,
+            lineNumber: 628,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -22822,7 +22897,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 599,
+            lineNumber: 630,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -22841,7 +22916,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 610,
+              lineNumber: 641,
               columnNumber: 16
             }
           });
@@ -22852,7 +22927,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 613,
+            lineNumber: 644,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22862,7 +22937,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 614,
+            lineNumber: 645,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22871,7 +22946,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 615,
+            lineNumber: 646,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22884,7 +22959,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 616,
+            lineNumber: 647,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22894,14 +22969,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 624,
+            lineNumber: 655,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["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["default"].createElement(Tooltip$1, {
@@ -22909,7 +22984,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 626,
+            lineNumber: 657,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -22924,7 +22999,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 627,
+            lineNumber: 658,
             columnNumber: 19
           }
         }, item.name)))), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22937,7 +23012,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 642,
+            lineNumber: 673,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22946,7 +23021,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 650,
+            lineNumber: 681,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -22954,7 +23029,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 652,
+            lineNumber: 683,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -22970,7 +23045,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 663,
+          lineNumber: 694,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22984,7 +23059,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 664,
+          lineNumber: 695,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -23010,7 +23085,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 665,
+          lineNumber: 696,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -23018,14 +23093,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 678,
+          lineNumber: 709,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 679,
+          lineNumber: 710,
           columnNumber: 11
         }
       }, "Berkas sedang diunggah")));
@@ -23038,7 +23113,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 687,
+          lineNumber: 718,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -23054,7 +23129,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 688,
+          lineNumber: 719,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -23066,21 +23141,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 699,
+          lineNumber: 730,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 700,
+          lineNumber: 731,
           columnNumber: 11
         }
       }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 702,
+          lineNumber: 733,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -23089,7 +23164,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 703,
+          lineNumber: 734,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -23097,7 +23172,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 704,
+          lineNumber: 735,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -23107,14 +23182,14 @@
         __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["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 713,
+          lineNumber: 744,
           columnNumber: 19
         }
       }, error));
@@ -23125,7 +23200,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 720,
+          lineNumber: 751,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -23133,7 +23208,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 721,
+          lineNumber: 752,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -23141,7 +23216,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 722,
+          lineNumber: 753,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -23154,7 +23229,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 724,
+          lineNumber: 755,
           columnNumber: 9
         }
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -23166,7 +23241,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 727,
+          lineNumber: 758,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -23177,7 +23252,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 728,
+          lineNumber: 759,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -23191,14 +23266,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 729,
+          lineNumber: 760,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 732,
+          lineNumber: 763,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -23210,7 +23285,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 733,
+          lineNumber: 764,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -23218,7 +23293,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 734,
+          lineNumber: 765,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -23230,7 +23305,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 735,
+          lineNumber: 766,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -23238,7 +23313,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 741,
+          lineNumber: 772,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$3, {
@@ -23247,7 +23322,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 742,
+          lineNumber: 773,
           columnNumber: 15
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$3, {
@@ -23255,7 +23330,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 745,
+          lineNumber: 776,
           columnNumber: 15
         }
       }, "Simpan")))));
@@ -23271,7 +23346,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 754,
+        lineNumber: 785,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -23280,7 +23355,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 757,
+        lineNumber: 788,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -23298,7 +23373,8 @@
     resKey: 'url',
     ratio: 16 / 9,
     disabled: false,
-    maxSizeMB: 1
+    maxSizeMB: 1,
+    imageCompression: true
   };
   Upload.propTypes = {
     /**
@@ -23452,7 +23528,17 @@
     /**
      Referencing the key to get the file from the API response.
      */
-    resKey: PropTypes__default["default"].string
+    resKey: PropTypes__default["default"].string,
+
+    /**
+     To compression image if file size > 1MB.
+     */
+    imageCompression: PropTypes__default["default"].bool,
+
+    /**
+     Callback to handle before crop image.
+     */
+    onBeforeCrop: PropTypes__default["default"].func
   };
   Upload.displayName = 'Upload';
 
@@ -27022,6 +27108,8 @@
           align: "center",
           key: `step-${i}`,
           onClick: () => {
+            if (props.onNavClicked) props.onNavClicked(i);
+
             if (!forbidClickNav && isComplete && !isHide) {
               props.goToStep(i);
             }
@@ -27039,7 +27127,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 118,
+            lineNumber: 119,
             columnNumber: 15
           }
         }), isComplete && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -27051,7 +27139,7 @@
           __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["default"].createElement(Tooltip$1, {
@@ -27060,7 +27148,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 122,
+            lineNumber: 123,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -27072,7 +27160,7 @@
           __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["default"].createElement(Flex$1, {
@@ -27083,7 +27171,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 127,
+            lineNumber: 128,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -27092,7 +27180,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 128,
+            lineNumber: 129,
             columnNumber: 19
           }
         }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -27109,7 +27197,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 136,
+            lineNumber: 137,
             columnNumber: 13
           }
         }, isComplete && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -27118,7 +27206,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 148,
+            lineNumber: 149,
             columnNumber: 30
           }
         }), !isComplete && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -27134,7 +27222,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 150,
+            lineNumber: 151,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -27144,7 +27232,7 @@
           __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["default"].createElement(Tooltip$1, {
@@ -27154,7 +27242,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 166,
+            lineNumber: 167,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -27163,7 +27251,7 @@
           __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["default"].createElement(Flex$1, {
@@ -27175,7 +27263,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 171,
+            lineNumber: 172,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -27184,7 +27272,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 172,
+            lineNumber: 173,
             columnNumber: 19
           }
         }, "Coming Soon"))));
@@ -27206,7 +27294,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 182,
+        lineNumber: 183,
         columnNumber: 5
       }
     }, isMobile ? /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -27218,7 +27306,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 198,
+        lineNumber: 199,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -27231,7 +27319,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 199,
+        lineNumber: 200,
         columnNumber: 11
       }
     }, stepItems)) : stepItems);
@@ -27332,7 +27420,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 296,
+        lineNumber: 297,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
@@ -27354,7 +27442,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 297,
+        lineNumber: 298,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Stepper, _extends({}, props, {
@@ -27362,11 +27450,12 @@
       className: !props.isMobile && 'stepperInstance',
       instance: setInstance,
       nav: /*#__PURE__*/React__default["default"].createElement(Navigation, {
+        onNavClicked: props.onNavClicked,
         isComplete: state.isComplete,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 319,
+          lineNumber: 320,
           columnNumber: 16
         }
       }),
@@ -27376,7 +27465,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 314,
+        lineNumber: 315,
         columnNumber: 9
       }
     }), props.children)));