@majoo-ui/react 1.52.8 → 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";
 
@@ -2897,6 +2897,9 @@
         },
         failed: {
           color: '$hlFailed'
+        },
+        pending: {
+          color: '$orange500'
         }
       }
     },
@@ -3025,6 +3028,10 @@
         failed: {
           backgroundColor: '$bgFailed',
           border: '1px solid $hlFailed'
+        },
+        pending: {
+          backgroundColor: '$bgProcess',
+          border: '1px solid $orange500'
         }
       },
       hasAction: {
@@ -3052,6 +3059,9 @@
         },
         failed: {
           backgroundColor: '$hlFailed'
+        },
+        pending: {
+          backgroundColor: '$orange500'
         }
       }
     }
@@ -3124,7 +3134,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 205,
+        lineNumber: 212,
         columnNumber: 5
       }
     }, state => /*#__PURE__*/React__namespace.createElement(Root, _extends({
@@ -3136,7 +3146,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 216,
+        lineNumber: 223,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__namespace.createElement(StyledToast, {
@@ -3146,7 +3156,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 223,
+        lineNumber: 230,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3154,7 +3164,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 224,
+        lineNumber: 231,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3162,7 +3172,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 225,
+        lineNumber: 232,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__namespace.createElement(LeftBar, {
@@ -3170,7 +3180,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 226,
+        lineNumber: 233,
         columnNumber: 17
       }
     }), /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3182,7 +3192,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 227,
+        lineNumber: 234,
         columnNumber: 17
       }
     }, title && /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3190,7 +3200,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 235,
+        lineNumber: 242,
         columnNumber: 21
       }
     }, /*#__PURE__*/React__namespace.createElement(Heading, {
@@ -3205,7 +3215,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 236,
+        lineNumber: 243,
         columnNumber: 23
       }
     }, title)), /*#__PURE__*/React__namespace.createElement(DescriptionField, {
@@ -3214,7 +3224,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 250,
+        lineNumber: 257,
         columnNumber: 19
       }
     }, description)), /*#__PURE__*/React__namespace.createElement(CloseButton$2, {
@@ -3229,7 +3239,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 254,
+        lineNumber: 261,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
@@ -3238,7 +3248,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 264,
+        lineNumber: 271,
         columnNumber: 19
       }
     }))), (hrefOfAction || isExternalOfAction || onClickOfAction) && /*#__PURE__*/React__namespace.createElement(Link, {
@@ -3253,7 +3263,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 268,
+        lineNumber: 275,
         columnNumber: 17
       }
     }, captionOfAction)))));
@@ -3505,6 +3515,10 @@
         failed: {
           backgroundColor: '$bgFailed',
           border: '1px solid $hlFailed'
+        },
+        pending: {
+          backgroundColor: '$bgProcess',
+          border: '1px solid $orange500'
         }
       },
       hasAction: {
@@ -3555,7 +3569,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 91,
+      lineNumber: 95,
       columnNumber: 3
     }
   }), props.children);
@@ -3577,7 +3591,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 108,
+      lineNumber: 112,
       columnNumber: 3
     }
   }), props.children);
@@ -3600,7 +3614,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 125,
+      lineNumber: 129,
       columnNumber: 3
     }
   }, value => /*#__PURE__*/React__namespace.createElement(Link, {
@@ -3612,7 +3626,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 127,
+      lineNumber: 131,
       columnNumber: 7
     }
   }, children));
@@ -3639,7 +3653,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 154,
+      lineNumber: 158,
       columnNumber: 3
     }
   }, value => /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
@@ -3651,7 +3665,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 156,
+      lineNumber: 160,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
@@ -3660,7 +3674,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 163,
+      lineNumber: 167,
       columnNumber: 9
     }
   })));
@@ -3670,7 +3684,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 171,
+        lineNumber: 175,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3680,7 +3694,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 172,
+        lineNumber: 176,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3693,21 +3707,21 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 173,
+        lineNumber: 177,
         columnNumber: 9
       }
     }, props.title && /*#__PURE__*/React__namespace.createElement(BannerTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 181,
+        lineNumber: 185,
         columnNumber: 27
       }
     }, props.title), props.description && /*#__PURE__*/React__namespace.createElement(BannerDescription, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 182,
+        lineNumber: 186,
         columnNumber: 33
       }
     }, props.description)), props.link && /*#__PURE__*/React__namespace.createElement(BannerLink, {
@@ -3716,7 +3730,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 185,
+        lineNumber: 189,
         columnNumber: 11
       }
     }, props.linkText)), /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
@@ -3729,7 +3743,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 190,
+        lineNumber: 194,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
@@ -3738,7 +3752,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 198,
+        lineNumber: 202,
         columnNumber: 9
       }
     })));
@@ -3767,7 +3781,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 206,
+        lineNumber: 210,
         columnNumber: 5
       }
     }), children ? /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3784,7 +3798,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 208,
+        lineNumber: 212,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(Context$2.Provider, {
@@ -3795,7 +3809,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 215,
+        lineNumber: 219,
         columnNumber: 11
       }
     }, children)) : /*#__PURE__*/React__namespace.createElement(SingleTagBanner, {
@@ -3809,7 +3823,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 218,
+        lineNumber: 222,
         columnNumber: 9
       }
     }));
@@ -3940,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',
@@ -4027,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),
@@ -5724,9 +5753,9 @@
     },
     '&:disabled': {
       pointerEvents: 'none',
+      border: '1.5px solid $gray200',
       '&[data-state=checked]': {
         backgroundColor: '$gray200',
-        border: '1.5px solid $gray200',
         color: 'white'
       }
     }
@@ -6407,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',
@@ -6478,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, {
@@ -6497,6 +6540,11 @@
           }
         }
       },
+      disabledOutlined: {
+        true: {
+          backgroundColor: '$gray150 !important'
+        }
+      },
       active: {
         true: {
           border: '1px solid $primary400 !important'
@@ -6523,7 +6571,8 @@
       css,
       inputType,
       inputProps,
-      description
+      description,
+      readOnly
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
@@ -6532,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
             }
           }));
 
@@ -6561,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);
@@ -6577,7 +6628,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 151,
+        lineNumber: 183,
         columnNumber: 5
       }
     }, ({
@@ -6589,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, {
@@ -6604,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, {
@@ -6633,7 +6686,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 171,
+          lineNumber: 203,
           columnNumber: 15
         }
       }, description));
@@ -6647,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';
 
@@ -6829,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,
@@ -9471,6 +9525,8 @@
     alignItems: 'center'
   });
   const InputSelectCheck = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+    var _selectedItems$filter;
+
     let {
       placeholder,
       option,
@@ -9835,7 +9891,7 @@
         lineNumber: 549,
         columnNumber: 11
       }
-    }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
+    }, selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : _selectedItems$filter.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
       disabled: disabled,
       isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
       size: size,
@@ -9856,8 +9912,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 551,
-        columnNumber: 15
+        lineNumber: 553,
+        columnNumber: 17
       }
     }), selectedItem.name))), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
       placement: placement,
@@ -9868,7 +9924,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 572,
+        lineNumber: 574,
         columnNumber: 9
       }
     }, items.length !== 0 ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({}, {
@@ -9877,7 +9933,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 577,
+        lineNumber: 579,
         columnNumber: 13
       }
     }), isOpen && items.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
@@ -9895,7 +9951,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 580,
+        lineNumber: 582,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -9908,7 +9964,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 593,
+        lineNumber: 595,
         columnNumber: 21
       }
     }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9916,7 +9972,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 602,
+        lineNumber: 604,
         columnNumber: 25
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9924,21 +9980,21 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 606,
+        lineNumber: 608,
         columnNumber: 27
       }
     }), showSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 613,
+        lineNumber: 615,
         columnNumber: 25
       }
     }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 615,
+        lineNumber: 617,
         columnNumber: 25
       }
     })), /*#__PURE__*/React__default["default"].createElement(Item$2, {
@@ -9948,7 +10004,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 618,
+        lineNumber: 620,
         columnNumber: 21
       }
     }, item.name)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -9961,14 +10017,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 623,
+        lineNumber: 625,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 624,
+        lineNumber: 626,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -9978,7 +10034,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 625,
+        lineNumber: 627,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -9990,7 +10046,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 626,
+        lineNumber: 628,
         columnNumber: 19
       }
     })), textEmptyItem))));
@@ -16590,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'));
     }
@@ -16678,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
@@ -17679,6 +17733,35 @@
     return {};
   };
 
+  var stickyShadowStyling = function stickyShadowStyling(column) {
+    var cssAfter = {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      width: 5,
+      transition: 'box-shadow 0.3s',
+      content: '',
+      pointerEvents: 'none',
+      boxSizing: 'border'
+    };
+
+    if ((column === null || column === void 0 ? void 0 : column.sticky) && (column === null || column === void 0 ? void 0 : column.shadow)) {
+      return column.sticky === 'left' ? {
+        '&::after': __assign(__assign({}, cssAfter), {
+          right: 0,
+          boxShadow: 'inset 10px 0 10px -10px #00000026'
+        })
+      } : {
+        '&::after': __assign(__assign({}, cssAfter), {
+          left: 0,
+          boxShadow: 'inset -10px 0 10px -10px #00000026'
+        })
+      };
+    }
+
+    return {};
+  };
+
   var formattingData = function formattingData(rawData, groupKey) {
     if (groupKey) {
       rawData.forEach(function (item, index) {
@@ -17733,7 +17816,8 @@
         hiddenColumns = _a.hiddenColumns,
         columnOrder = _a.columnOrder,
         customRowsStyle = _a.customRowsStyle,
-        isMobileLayout = _a.isMobileLayout;
+        isMobileLayout = _a.isMobileLayout,
+        showDuplicatedData = _a.showDuplicatedData;
 
     var _o = React.useState(rowLimit),
         limit = _o[0],
@@ -17769,7 +17853,7 @@
       autoResetExpanded: true,
       autoResetPage: false,
       autoResetSelectedRows: false,
-      getRowId: function (row) {
+      getRowId: showDuplicatedData ? undefined : function (row) {
         return row[keyId] || JSON.stringify(row);
       }
     }, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect, reactTableSticky.useSticky, reactTable.useColumnOrder);
@@ -17948,7 +18032,7 @@
                         }
                       }];
                     }), {
-                      css: stickyPositionStyling(column)
+                      css: __assign(__assign({}, stickyPositionStyling(column)), stickyShadowStyling(column))
                     }, {
                       children: typeof headerRender === 'string' ? jsxRuntime.jsx(TableHeaderCellContainer, __assign({
                         isSortedDesc: column.isSortedDesc,
@@ -18000,10 +18084,10 @@
                       return !cell.column.isSubRow;
                     }).map(function (cell) {
                       return jsxRuntime.jsx(TableCell$3, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
-                        css: __assign({
+                        css: __assign(__assign({
                           padding: cell.column.accessor ? '20px 8px' : '20px 20px',
                           verticalAlign: cell.column.accessor ? cellAlign : 'center'
-                        }, stickyPositionStyling(cell.column))
+                        }, stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column))
                       }, {
                         children: cell.render('Cell')
                       }), void 0);
@@ -18853,7 +18937,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 35,
+          lineNumber: 36,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuTrigger, {
@@ -18861,7 +18945,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 36,
+          lineNumber: 37,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18874,7 +18958,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 37,
+          lineNumber: 38,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -18882,17 +18966,24 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 38,
+          lineNumber: 39,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 38,
+          lineNumber: 39,
           columnNumber: 70
         }
-      })))), /*#__PURE__*/React__default["default"].createElement(DropdownMenuContent, {
+      })))), /*#__PURE__*/React__default["default"].createElement(DropdownMenuPortal, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$d,
+          lineNumber: 42,
+          columnNumber: 11
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuContent, {
         onInteractOutside: () => setOpenDrop(false),
         css: Object.assign({
           width: 'auto',
@@ -18912,16 +19003,16 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 41,
-          columnNumber: 11
+          lineNumber: 43,
+          columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         key: `${option.title}dd-${index}`,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 61,
-          columnNumber: 15
+          lineNumber: 63,
+          columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
         onClick: () => {
@@ -18932,8 +19023,8 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 62,
-          columnNumber: 17
+          lineNumber: 64,
+          columnNumber: 19
         }
       }, option.title), /*#__PURE__*/React__default["default"].createElement(DropdownMenuSeparator, {
         key: `${option.title}ds`,
@@ -18943,10 +19034,10 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 71,
-          columnNumber: 17
+          lineNumber: 73,
+          columnNumber: 19
         }
-      }))))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
+      })))))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
         isMobile: true,
         modal: true,
         open: openModal,
@@ -18954,7 +19045,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 76,
+          lineNumber: 79,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -18962,7 +19053,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 77,
+          lineNumber: 80,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18975,28 +19066,28 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 78,
+          lineNumber: 81,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 79,
+          lineNumber: 82,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 79,
+          lineNumber: 82,
           columnNumber: 36
         }
       })))), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 82,
+          lineNumber: 85,
           columnNumber: 11
         }
       }, mobileTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -19006,7 +19097,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 83,
+          lineNumber: 86,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19021,7 +19112,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 84,
+          lineNumber: 87,
           columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -19029,7 +19120,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 86,
+          lineNumber: 89,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19045,7 +19136,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 87,
+          lineNumber: 90,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -19054,7 +19145,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 98,
+          lineNumber: 101,
           columnNumber: 21
         }
       }, option.title)), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -19062,7 +19153,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 102,
+          lineNumber: 105,
           columnNumber: 19
         }
       })))))));
@@ -20201,6 +20292,7 @@
 
   const DropdownMenu = DropdownMenuContext;
   const DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
+  const DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
   const DropdownMenuContent = DropdownMenuContentContext;
   const DropdownMenuItem = StyledItem;
   const DropdownMenuCheckboxItem = StyledCheckboxItem;
@@ -22226,6 +22318,7 @@
     multiple,
     fileList,
     onChange,
+    onBeforeCrop,
     onError,
     onSuccess,
     onProgress,
@@ -22250,7 +22343,8 @@
     ratio,
     disabled,
     errorMessage,
-    maxSizeMB
+    maxSizeMB,
+    imageCompression
   }) => {
     const isFile = listType === 'file';
     const imgRef = React.useRef(null);
@@ -22446,7 +22540,7 @@
                 }
               }
 
-              (_onChange = onChange({
+              onChange === null || onChange === void 0 ? void 0 : (_onChange = onChange({
                 fileList: arrProgress,
                 file: fileProgress,
                 indexReplace: indexReplace.current,
@@ -22468,7 +22562,7 @@
               }
             }
 
-            (_onChange2 = onChange({
+            onChange === null || onChange === void 0 ? void 0 : (_onChange2 = onChange({
               fileList: arrSuccess,
               file: fileSuccess,
               indexReplace: indexReplace.current,
@@ -22489,7 +22583,7 @@
               }
             }
 
-            (_onChange3 = onChange({
+            onChange === null || onChange === void 0 ? void 0 : (_onChange3 = onChange({
               fileList: arrError,
               file: fileError,
               indexReplace: indexReplace.current,
@@ -22499,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,
@@ -22517,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]));
+          }
         }
       }
     }
@@ -22533,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 {
@@ -22578,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) {
@@ -22679,7 +22808,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 572,
+          lineNumber: 603,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -22689,7 +22818,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 573,
+          lineNumber: 604,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
@@ -22705,7 +22834,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 583,
+              lineNumber: 614,
               columnNumber: 16
             }
           });
@@ -22717,7 +22846,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 586,
+            lineNumber: 617,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22727,7 +22856,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 587,
+            lineNumber: 618,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22736,7 +22865,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 588,
+            lineNumber: 619,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22749,7 +22878,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 589,
+            lineNumber: 620,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22758,7 +22887,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 597,
+            lineNumber: 628,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -22768,7 +22897,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 599,
+            lineNumber: 630,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -22787,7 +22916,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 610,
+              lineNumber: 641,
               columnNumber: 16
             }
           });
@@ -22798,7 +22927,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 613,
+            lineNumber: 644,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22808,7 +22937,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 614,
+            lineNumber: 645,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22817,7 +22946,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 615,
+            lineNumber: 646,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22830,7 +22959,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 616,
+            lineNumber: 647,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22840,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, {
@@ -22855,7 +22984,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 626,
+            lineNumber: 657,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -22870,7 +22999,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 627,
+            lineNumber: 658,
             columnNumber: 19
           }
         }, item.name)))), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22883,7 +23012,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 642,
+            lineNumber: 673,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22892,7 +23021,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 650,
+            lineNumber: 681,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -22900,7 +23029,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 652,
+            lineNumber: 683,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -22916,7 +23045,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 663,
+          lineNumber: 694,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22930,7 +23059,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 664,
+          lineNumber: 695,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -22956,7 +23085,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 665,
+          lineNumber: 696,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -22964,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")));
@@ -22984,7 +23113,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 687,
+          lineNumber: 718,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -23000,7 +23129,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 688,
+          lineNumber: 719,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -23012,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, {
@@ -23035,7 +23164,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 703,
+          lineNumber: 734,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -23043,7 +23172,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 704,
+          lineNumber: 735,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -23053,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));
@@ -23071,7 +23200,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 720,
+          lineNumber: 751,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -23079,7 +23208,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 721,
+          lineNumber: 752,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -23087,7 +23216,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 722,
+          lineNumber: 753,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -23100,7 +23229,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 724,
+          lineNumber: 755,
           columnNumber: 9
         }
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -23112,7 +23241,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 727,
+          lineNumber: 758,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -23123,7 +23252,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 728,
+          lineNumber: 759,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -23137,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, {
@@ -23156,7 +23285,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 733,
+          lineNumber: 764,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -23164,7 +23293,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 734,
+          lineNumber: 765,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -23176,7 +23305,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 735,
+          lineNumber: 766,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -23184,7 +23313,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 741,
+          lineNumber: 772,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$3, {
@@ -23193,7 +23322,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 742,
+          lineNumber: 773,
           columnNumber: 15
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$3, {
@@ -23201,10 +23330,10 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 745,
+          lineNumber: 776,
           columnNumber: 15
         }
-      }, `${completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
+      }, "Simpan")))));
     }
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -23217,7 +23346,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 756,
+        lineNumber: 785,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -23226,7 +23355,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 759,
+        lineNumber: 788,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -23244,7 +23373,8 @@
     resKey: 'url',
     ratio: 16 / 9,
     disabled: false,
-    maxSizeMB: 1
+    maxSizeMB: 1,
+    imageCompression: true
   };
   Upload.propTypes = {
     /**
@@ -23398,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';
 
@@ -26968,6 +27108,8 @@
           align: "center",
           key: `step-${i}`,
           onClick: () => {
+            if (props.onNavClicked) props.onNavClicked(i);
+
             if (!forbidClickNav && isComplete && !isHide) {
               props.goToStep(i);
             }
@@ -26985,7 +27127,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 118,
+            lineNumber: 119,
             columnNumber: 15
           }
         }), isComplete && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -26997,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, {
@@ -27006,7 +27148,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 122,
+            lineNumber: 123,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -27018,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, {
@@ -27029,7 +27171,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 127,
+            lineNumber: 128,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -27038,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, {
@@ -27055,7 +27197,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 136,
+            lineNumber: 137,
             columnNumber: 13
           }
         }, isComplete && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -27064,7 +27206,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 148,
+            lineNumber: 149,
             columnNumber: 30
           }
         }), !isComplete && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -27080,7 +27222,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 150,
+            lineNumber: 151,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -27090,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, {
@@ -27100,7 +27242,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 166,
+            lineNumber: 167,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -27109,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, {
@@ -27121,7 +27263,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 171,
+            lineNumber: 172,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -27130,7 +27272,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 172,
+            lineNumber: 173,
             columnNumber: 19
           }
         }, "Coming Soon"))));
@@ -27152,7 +27294,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 182,
+        lineNumber: 183,
         columnNumber: 5
       }
     }, isMobile ? /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -27164,7 +27306,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 198,
+        lineNumber: 199,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -27177,7 +27319,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 199,
+        lineNumber: 200,
         columnNumber: 11
       }
     }, stepItems)) : stepItems);
@@ -27278,7 +27420,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 296,
+        lineNumber: 297,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
@@ -27300,7 +27442,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 297,
+        lineNumber: 298,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Stepper, _extends({}, props, {
@@ -27308,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
         }
       }),
@@ -27322,7 +27465,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 314,
+        lineNumber: 315,
         columnNumber: 9
       }
     }), props.children)));
@@ -32578,6 +32721,7 @@
   exports.DropdownMenuItem = DropdownMenuItem;
   exports.DropdownMenuItemIndicator = DropdownMenuItemIndicator;
   exports.DropdownMenuLabel = DropdownMenuLabel;
+  exports.DropdownMenuPortal = DropdownMenuPortal;
   exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
   exports.DropdownMenuRadioItem = DropdownMenuRadioItem;
   exports.DropdownMenuSeparator = DropdownMenuSeparator;