@majoo-ui/react 1.52.8 → 1.52.10

package/index.esm.js

@@ -43,7 +43,7 @@ import { ResponsiveContainer, LineChart as LineChart$1, XAxis, YAxis, CartesianG
 import { EditorState } from 'draft-js';
 import { Editor } from 'react-draft-wysiwyg';
 import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
-import imageCompression from 'browser-image-compression';
+import imageCompressionComponent from 'browser-image-compression';
 import { useSticky } from 'react-table-sticky';
 
 var _jsxFileName$10 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
@@ -2820,6 +2820,9 @@ const StyledLink = styled('a', {
       },
       failed: {
         color: '$hlFailed'
+      },
+      pending: {
+        color: '$orange500'
       }
     }
   },
@@ -2946,6 +2949,10 @@ const StyledToast = styled(Flex$1, {
       failed: {
         backgroundColor: '$bgFailed',
         border: '1px solid $hlFailed'
+      },
+      pending: {
+        backgroundColor: '$bgProcess',
+        border: '1px solid $orange500'
       }
     },
     hasAction: {
@@ -2973,6 +2980,9 @@ const LeftBar = styled('div', {
       },
       failed: {
         backgroundColor: '$hlFailed'
+      },
+      pending: {
+        backgroundColor: '$orange500'
       }
     }
   }
@@ -3045,7 +3055,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Z,
-      lineNumber: 205,
+      lineNumber: 212,
       columnNumber: 5
     }
   }, state => /*#__PURE__*/React.createElement(Root, _extends({
@@ -3057,7 +3067,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Z,
-      lineNumber: 216,
+      lineNumber: 223,
       columnNumber: 9
     }
   }), /*#__PURE__*/React.createElement(StyledToast, {
@@ -3067,7 +3077,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Z,
-      lineNumber: 223,
+      lineNumber: 230,
       columnNumber: 11
     }
   }, /*#__PURE__*/React.createElement(Flex$1, {
@@ -3075,7 +3085,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Z,
-      lineNumber: 224,
+      lineNumber: 231,
       columnNumber: 13
     }
   }, /*#__PURE__*/React.createElement(Flex$1, {
@@ -3083,7 +3093,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Z,
-      lineNumber: 225,
+      lineNumber: 232,
       columnNumber: 15
     }
   }, /*#__PURE__*/React.createElement(LeftBar, {
@@ -3091,7 +3101,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Z,
-      lineNumber: 226,
+      lineNumber: 233,
       columnNumber: 17
     }
   }), /*#__PURE__*/React.createElement(Flex$1, {
@@ -3103,7 +3113,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Z,
-      lineNumber: 227,
+      lineNumber: 234,
       columnNumber: 17
     }
   }, title && /*#__PURE__*/React.createElement(Flex$1, {
@@ -3111,7 +3121,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Z,
-      lineNumber: 235,
+      lineNumber: 242,
       columnNumber: 21
     }
   }, /*#__PURE__*/React.createElement(Heading, {
@@ -3126,7 +3136,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Z,
-      lineNumber: 236,
+      lineNumber: 243,
       columnNumber: 23
     }
   }, title)), /*#__PURE__*/React.createElement(DescriptionField, {
@@ -3135,7 +3145,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Z,
-      lineNumber: 250,
+      lineNumber: 257,
       columnNumber: 19
     }
   }, description)), /*#__PURE__*/React.createElement(CloseButton$2, {
@@ -3150,7 +3160,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Z,
-      lineNumber: 254,
+      lineNumber: 261,
       columnNumber: 17
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
@@ -3159,7 +3169,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Z,
-      lineNumber: 264,
+      lineNumber: 271,
       columnNumber: 19
     }
   }))), (hrefOfAction || isExternalOfAction || onClickOfAction) && /*#__PURE__*/React.createElement(Link, {
@@ -3174,7 +3184,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Z,
-      lineNumber: 268,
+      lineNumber: 275,
       columnNumber: 17
     }
   }, captionOfAction)))));
@@ -3426,6 +3436,10 @@ const StyledBanner = styled(Flex$1, {
       failed: {
         backgroundColor: '$bgFailed',
         border: '1px solid $hlFailed'
+      },
+      pending: {
+        backgroundColor: '$bgProcess',
+        border: '1px solid $orange500'
       }
     },
     hasAction: {
@@ -3476,7 +3490,7 @@ const BannerTitle = props => /*#__PURE__*/React.createElement(Title$2, _extends(
   __self: undefined,
   __source: {
     fileName: _jsxFileName$V,
-    lineNumber: 91,
+    lineNumber: 95,
     columnNumber: 3
   }
 }), props.children);
@@ -3498,7 +3512,7 @@ const BannerDescription = props => /*#__PURE__*/React.createElement(Description,
   __self: undefined,
   __source: {
     fileName: _jsxFileName$V,
-    lineNumber: 108,
+    lineNumber: 112,
     columnNumber: 3
   }
 }), props.children);
@@ -3521,7 +3535,7 @@ const BannerLink = ({
   __self: undefined,
   __source: {
     fileName: _jsxFileName$V,
-    lineNumber: 125,
+    lineNumber: 129,
     columnNumber: 3
   }
 }, value => /*#__PURE__*/React.createElement(Link, {
@@ -3533,7 +3547,7 @@ const BannerLink = ({
   __self: undefined,
   __source: {
     fileName: _jsxFileName$V,
-    lineNumber: 127,
+    lineNumber: 131,
     columnNumber: 7
   }
 }, children));
@@ -3560,7 +3574,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$V,
-    lineNumber: 154,
+    lineNumber: 158,
     columnNumber: 3
   }
 }, value => /*#__PURE__*/React.createElement(CloseButton$1, {
@@ -3572,7 +3586,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$V,
-    lineNumber: 156,
+    lineNumber: 160,
     columnNumber: 7
   }
 }, /*#__PURE__*/React.createElement(CloseOutline, {
@@ -3581,7 +3595,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$V,
-    lineNumber: 163,
+    lineNumber: 167,
     columnNumber: 9
   }
 })));
@@ -3591,7 +3605,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 171,
+      lineNumber: 175,
       columnNumber: 5
     }
   }, /*#__PURE__*/React.createElement(Flex$1, {
@@ -3601,7 +3615,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 172,
+      lineNumber: 176,
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(Flex$1, {
@@ -3614,21 +3628,21 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 173,
+      lineNumber: 177,
       columnNumber: 9
     }
   }, props.title && /*#__PURE__*/React.createElement(BannerTitle, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 181,
+      lineNumber: 185,
       columnNumber: 27
     }
   }, props.title), props.description && /*#__PURE__*/React.createElement(BannerDescription, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 182,
+      lineNumber: 186,
       columnNumber: 33
     }
   }, props.description)), props.link && /*#__PURE__*/React.createElement(BannerLink, {
@@ -3637,7 +3651,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 185,
+      lineNumber: 189,
       columnNumber: 11
     }
   }, props.linkText)), /*#__PURE__*/React.createElement(CloseButton$1, {
@@ -3650,7 +3664,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 190,
+      lineNumber: 194,
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
@@ -3659,7 +3673,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 198,
+      lineNumber: 202,
       columnNumber: 9
     }
   })));
@@ -3688,7 +3702,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 206,
+      lineNumber: 210,
       columnNumber: 5
     }
   }), children ? /*#__PURE__*/React.createElement(Flex$1, {
@@ -3705,7 +3719,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 208,
+      lineNumber: 212,
       columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement(Context$2.Provider, {
@@ -3716,7 +3730,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 215,
+      lineNumber: 219,
       columnNumber: 11
     }
   }, children)) : /*#__PURE__*/React.createElement(SingleTagBanner, {
@@ -3730,7 +3744,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 218,
+      lineNumber: 222,
       columnNumber: 9
     }
   }));
@@ -3861,6 +3875,20 @@ const ButtonNegativeGhost = {
     outline: '1px solid $btnNegative'
   }
 };
+const ButtonGhostSecondary = {
+  backgroundColor: '$btnSecondary',
+  color: '$textSecondary',
+  border: 'none',
+  '&:hover': {
+    backgroundColor: '$gray100',
+    outline: '1px solid $gray100',
+    color: '$textSecondary'
+  },
+  '&:active': {
+    backgroundColor: '$gray150',
+    outline: '1px solid $gray150'
+  }
+};
 const ButtonHeaderMenu = {
   backgroundColor: '$bgWhite',
   border: '1px solid $bgBorder',
@@ -3948,6 +3976,7 @@ const ButtonPrimitive = styled('button', {
       primary: Object.assign({}, ButtonPrimary),
       secondary: Object.assign({}, PrimarySecondary),
       ghost: Object.assign({}, GhostButton),
+      'ghost-secondary': Object.assign({}, ButtonGhostSecondary),
       negative: Object.assign({}, ButtonNegative),
       'negative-secondary': Object.assign({}, ButtonNegativeSecondary),
       'negative-ghost': Object.assign({}, ButtonNegativeGhost),
@@ -5644,9 +5673,9 @@ const StyledCheckbox = styled(CheckboxPrimitive.Root, {
   },
   '&:disabled': {
     pointerEvents: 'none',
+    border: '1.5px solid $gray200',
     '&[data-state=checked]': {
       backgroundColor: '$gray200',
-      border: '1.5px solid $gray200',
       color: 'white'
     }
   }
@@ -6327,7 +6356,7 @@ InputRadioGroup.propTypes = {
 };
 InputRadioGroup.displayName = 'InputRadioGroup';
 
-const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps", "description"];
+const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps", "description", "readOnly"];
 var _jsxFileName$E = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
 const INDICATOR_BASE_STYLES = {
   alignItems: 'center',
@@ -6398,6 +6427,20 @@ const StyledRadio = styled(RadioGroupPrimitive.Item, RADIO_BASE_STYLES, {
         backgroundColor: '$gray200'
       }
     }
+  },
+  variants: {
+    readOnly: {
+      true: {
+        '&[data-state=checked]': {
+          border: '2px solid $primary500 !important'
+        },
+        [`& ${StyledIndicator$1}`]: {
+          '&::after': {
+            backgroundColor: '$primary500 !important'
+          }
+        }
+      }
+    }
   }
 });
 const Container$8 = styled(Flex$1, {
@@ -6417,6 +6460,11 @@ const Container$8 = styled(Flex$1, {
         }
       }
     },
+    disabledOutlined: {
+      true: {
+        backgroundColor: '$gray150 !important'
+      }
+    },
     active: {
       true: {
         border: '1px solid $primary400 !important'
@@ -6443,7 +6491,8 @@ const InputRadio = _ref => {
     css,
     inputType,
     inputProps,
-    description
+    description,
+    readOnly
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
@@ -6452,22 +6501,24 @@ const InputRadio = _ref => {
       case 'number':
         return /*#__PURE__*/React__default.createElement(InputNumber, _extends({}, inputProps, {
           disabled: disabled || checked !== props.value,
+          readOnly: readOnly || checked !== props.value,
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 125,
-            columnNumber: 16
+            lineNumber: 146,
+            columnNumber: 11
           }
         }));
 
       case 'text':
         return /*#__PURE__*/React__default.createElement(InputText, _extends({}, inputProps, {
           disabled: disabled || checked !== props.value,
+          readOnly: readOnly || checked !== props.value,
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 128,
-            columnNumber: 16
+            lineNumber: 155,
+            columnNumber: 11
           }
         }));
 
@@ -6481,12 +6532,12 @@ const InputRadio = _ref => {
             letterSpacing: '$long-content-regular',
             fontWeight: '400',
             cursor: 'pointer',
-            color: disabled ? '$textDisable' : '$textPrimary'
+            color: disabled || readOnly ? '$textDisable' : '$textPrimary'
           },
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 132,
+            lineNumber: 164,
             columnNumber: 11
           }
         }, props.label);
@@ -6497,7 +6548,7 @@ const InputRadio = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$E,
-      lineNumber: 151,
+      lineNumber: 183,
       columnNumber: 5
     }
   }, ({
@@ -6509,13 +6560,14 @@ const InputRadio = _ref => {
     return /*#__PURE__*/React__default.createElement(Container$8, {
       direction: "column",
       outlined: outlined,
+      disabledOutlined: outlined && (readOnly || disabled),
       disabled: disabled,
-      active: outlined && checked === props.value && !disabled,
+      active: outlined && checked === props.value && !disabled && !readOnly,
       css: css,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 156,
+        lineNumber: 188,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -6524,24 +6576,25 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 163,
+        lineNumber: 196,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(StyledRadio, _extends({
       id: id,
-      disabled: disabled
+      disabled: disabled || readOnly,
+      readOnly: readOnly
     }, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 164,
+        lineNumber: 197,
         columnNumber: 15
       }
     }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 165,
+        lineNumber: 198,
         columnNumber: 17
       }
     })), renderInputType(inputType, checked)), description && /*#__PURE__*/React__default.createElement(Text$1, {
@@ -6553,7 +6606,7 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 171,
+        lineNumber: 203,
         columnNumber: 15
       }
     }, description));
@@ -6567,7 +6620,8 @@ InputRadio.propTypes = {
   css: PropTypes.object,
   inputType: PropTypes.oneOf(['number', 'text', 'default']),
   onChange: PropTypes.func,
-  description: PropTypes.string
+  description: PropTypes.string,
+  readOnly: PropTypes.bool
 };
 InputRadio.displayName = 'InputRadio';
 
@@ -6749,7 +6803,7 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     size: size,
     isInvalid: isInvalid,
     readOnly: readOnly,
-    isReadOnly: readOnly,
+    isReadOnly: readOnly && !(props !== null && props !== void 0 && props.inputGroup),
     disabled: disabled
   }, props, {
     __self: undefined,
@@ -9334,6 +9388,8 @@ const IndeterminateFilled = styled('div', {
   alignItems: 'center'
 });
 const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var _selectedItems$filter;
+
   let {
     placeholder,
     option,
@@ -9698,7 +9754,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       lineNumber: 549,
       columnNumber: 11
     }
-  }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__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.createElement(Tag, _extends({
     disabled: disabled,
     isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
     size: size,
@@ -9719,8 +9775,8 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 551,
-      columnNumber: 15
+      lineNumber: 553,
+      columnNumber: 17
     }
   }), selectedItem.name))), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
     placement: placement,
@@ -9731,7 +9787,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 572,
+      lineNumber: 574,
       columnNumber: 9
     }
   }, items.length !== 0 ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({}, {
@@ -9740,7 +9796,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 577,
+      lineNumber: 579,
       columnNumber: 13
     }
   }), isOpen && items.map((item, index) => /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
@@ -9758,7 +9814,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 580,
+      lineNumber: 582,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -9771,7 +9827,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 593,
+      lineNumber: 595,
       columnNumber: 21
     }
   }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -9779,7 +9835,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __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.createElement(CheckOutline, {
@@ -9787,21 +9843,21 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __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.createElement(IndeterminateFilled, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 613,
+      lineNumber: 615,
       columnNumber: 25
     }
   }, "-") : /*#__PURE__*/React__default.createElement("div", {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 615,
+      lineNumber: 617,
       columnNumber: 25
     }
   })), /*#__PURE__*/React__default.createElement(Item$2, {
@@ -9811,7 +9867,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 618,
+      lineNumber: 620,
       columnNumber: 21
     }
   }, item.name)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -9824,14 +9880,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 623,
+      lineNumber: 625,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 624,
+      lineNumber: 626,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -9841,7 +9897,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 625,
+      lineNumber: 627,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -9853,7 +9909,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 626,
+      lineNumber: 628,
       columnNumber: 19
     }
   })), textEmptyItem))));
@@ -16327,13 +16383,11 @@ function advancePickerDate(type) {
 
 moment.locale('id');
 
-const getInputPickerValue = (type, date) => {
+const getInputPickerValue = (type, date, isTimePicker) => {
   if (!date) return '';
 
   if (type === SINGLE_PICKER) {
-    return Intl.DateTimeFormat('id-ID', {
-      dateStyle: 'long'
-    }).format(date);
+    return `${moment(date).format(isTimePicker ? 'D MMMM YYYY, HH:mm' : 'D MMMM YYYY')}`;
   } else {
     return `${moment(date[0]).format('ll')} - ${moment(date[1]).format('ll')}`;
   }
@@ -16399,7 +16453,7 @@ function InputDatePicker({
       children: jsx(CalendarOutline, {}, void 0)
     }, void 0), jsx(InputText, {
       placeholder: placeholder,
-      value: getInputPickerValue(type, selectedDate),
+      value: getInputPickerValue(type, selectedDate, showTimePicker),
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       onChange: () => {},
       isPicker: true
@@ -17388,6 +17442,35 @@ const stickyPositionStyling = column => {
   return {};
 };
 
+const stickyShadowStyling = column => {
+  const 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': Object.assign(Object.assign({}, cssAfter), {
+        right: 0,
+        boxShadow: 'inset 10px 0 10px -10px #00000026'
+      })
+    } : {
+      '&::after': Object.assign(Object.assign({}, cssAfter), {
+        left: 0,
+        boxShadow: 'inset -10px 0 10px -10px #00000026'
+      })
+    };
+  }
+
+  return {};
+};
+
 const formattingData = (rawData, groupKey) => {
   if (groupKey) {
     rawData.forEach((item, index) => {
@@ -17429,7 +17512,8 @@ function Table({
   hiddenColumns,
   columnOrder,
   customRowsStyle,
-  isMobileLayout
+  isMobileLayout,
+  showDuplicatedData
 }) {
   const [limit, setLimit] = useState(rowLimit);
 
@@ -17463,7 +17547,7 @@ function Table({
     autoResetExpanded: true,
     autoResetPage: false,
     autoResetSelectedRows: false,
-    getRowId: row => row[keyId] || JSON.stringify(row)
+    getRowId: showDuplicatedData ? undefined : row => row[keyId] || JSON.stringify(row)
   }, useSortBy, useExpanded, usePagination, useRowSelect, useSticky, useColumnOrder);
   const {
     getTableProps,
@@ -17625,7 +17709,7 @@ function Table({
                       minWidth: column.colMinWidth
                     }
                   }]), {
-                    css: stickyPositionStyling(column)
+                    css: Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column))
                   }, {
                     children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, Object.assign({
                       isSortedDesc: column.isSortedDesc,
@@ -17669,10 +17753,10 @@ function Table({
                 }, row.getRowProps(), {
                   children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
                     return jsx(TableCell$3, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
-                      css: Object.assign({
+                      css: Object.assign(Object.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);
@@ -18511,7 +18595,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 35,
+        lineNumber: 36,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuTrigger, {
@@ -18519,7 +18603,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 36,
+        lineNumber: 37,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18532,7 +18616,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 37,
+        lineNumber: 38,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
@@ -18540,17 +18624,24 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 38,
+        lineNumber: 39,
         columnNumber: 15
       }
     }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 38,
+        lineNumber: 39,
         columnNumber: 70
       }
-    })))), /*#__PURE__*/React__default.createElement(DropdownMenuContent, {
+    })))), /*#__PURE__*/React__default.createElement(DropdownMenuPortal, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$d,
+        lineNumber: 42,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default.createElement(DropdownMenuContent, {
       onInteractOutside: () => setOpenDrop(false),
       css: Object.assign({
         width: 'auto',
@@ -18570,16 +18661,16 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 41,
-        columnNumber: 11
+        lineNumber: 43,
+        columnNumber: 13
       }
     }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: `${option.title}dd-${index}`,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 61,
-        columnNumber: 15
+        lineNumber: 63,
+        columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuItem, {
       onClick: () => {
@@ -18590,8 +18681,8 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 62,
-        columnNumber: 17
+        lineNumber: 64,
+        columnNumber: 19
       }
     }, option.title), /*#__PURE__*/React__default.createElement(DropdownMenuSeparator, {
       key: `${option.title}ds`,
@@ -18601,10 +18692,10 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 71,
-        columnNumber: 17
+        lineNumber: 73,
+        columnNumber: 19
       }
-    }))))), /*#__PURE__*/React__default.createElement(ModalDialog, {
+    })))))), /*#__PURE__*/React__default.createElement(ModalDialog, {
       isMobile: true,
       modal: true,
       open: openModal,
@@ -18612,7 +18703,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 76,
+        lineNumber: 79,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -18620,7 +18711,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 77,
+        lineNumber: 80,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18633,28 +18724,28 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 78,
+        lineNumber: 81,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 79,
+        lineNumber: 82,
         columnNumber: 15
       }
     }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 79,
+        lineNumber: 82,
         columnNumber: 36
       }
     })))), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 82,
+        lineNumber: 85,
         columnNumber: 11
       }
     }, mobileTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -18664,7 +18755,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 83,
+        lineNumber: 86,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18679,7 +18770,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 84,
+        lineNumber: 87,
         columnNumber: 13
       }
     }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -18687,7 +18778,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 86,
+        lineNumber: 89,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18703,7 +18794,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 87,
+        lineNumber: 90,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -18712,7 +18803,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 98,
+        lineNumber: 101,
         columnNumber: 21
       }
     }, option.title)), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18720,7 +18811,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 102,
+        lineNumber: 105,
         columnNumber: 19
       }
     })))))));
@@ -19857,6 +19948,7 @@ RightSlot.displayName = 'RightSlot'; // Exports
 
 const DropdownMenu = DropdownMenuContext;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 const DropdownMenuContent = DropdownMenuContentContext;
 const DropdownMenuItem = StyledItem;
 const DropdownMenuCheckboxItem = StyledCheckboxItem;
@@ -21848,6 +21940,7 @@ const Upload = ({
   multiple,
   fileList,
   onChange,
+  onBeforeCrop,
   onError,
   onSuccess,
   onProgress,
@@ -21872,7 +21965,8 @@ const Upload = ({
   ratio,
   disabled,
   errorMessage,
-  maxSizeMB
+  maxSizeMB,
+  imageCompression
 }) => {
   const isFile = listType === 'file';
   const imgRef = useRef(null);
@@ -22068,7 +22162,7 @@ const Upload = ({
               }
             }
 
-            (_onChange = onChange({
+            onChange === null || onChange === void 0 ? void 0 : (_onChange = onChange({
               fileList: arrProgress,
               file: fileProgress,
               indexReplace: indexReplace.current,
@@ -22090,7 +22184,7 @@ const Upload = ({
             }
           }
 
-          (_onChange2 = onChange({
+          onChange === null || onChange === void 0 ? void 0 : (_onChange2 = onChange({
             fileList: arrSuccess,
             file: fileSuccess,
             indexReplace: indexReplace.current,
@@ -22111,7 +22205,7 @@ const Upload = ({
             }
           }
 
-          (_onChange3 = onChange({
+          onChange === null || onChange === void 0 ? void 0 : (_onChange3 = onChange({
             fileList: arrError,
             file: fileError,
             indexReplace: indexReplace.current,
@@ -22121,7 +22215,7 @@ const Upload = ({
       } else {
         var _onChange4, _onChange4$then;
 
-        (_onChange4 = onChange({
+        onChange === null || onChange === void 0 ? void 0 : (_onChange4 = onChange({
           fileList: arrFile,
           file: newFile,
           indexReplace: indexReplace.current,
@@ -22139,15 +22233,38 @@ const Upload = ({
   }
 
   function handleChange(e) {
-    if (e.target.files && e.target.files[0] && onChange) {
+    if (e.target.files && e.target.files[0]) {
       const files = e.target.files;
 
       if (isFile || !showCropper) {
         handleUpload(files);
       } else {
-        toggleModal();
-        setFileState(files[0]);
-        setPreviewImage(URL.createObjectURL(files[0]));
+        if (onBeforeCrop) {
+          // program to get the dimensions of an image
+          const img = document.createElement('img');
+          img.src = URL.createObjectURL(files[0]);
+
+          img.onload = () => {
+            var _onBeforeCrop, _onBeforeCrop$then;
+
+            onBeforeCrop === null || onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop = onBeforeCrop(img)) === null || _onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop$then = _onBeforeCrop.then(() => {
+              setError(null);
+              toggleModal();
+              setFileState(files[0]);
+              setPreviewImage(URL.createObjectURL(files[0]));
+            })) === null || _onBeforeCrop$then === void 0 ? void 0 : _onBeforeCrop$then.catch(error => setError(error === null || error === void 0 ? void 0 : error.message));
+          };
+
+          img.onerror = error => {
+            var _onBeforeCrop2, _onBeforeCrop2$then;
+
+            onBeforeCrop === null || onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop2 = onBeforeCrop(img, error)) === null || _onBeforeCrop2 === void 0 ? void 0 : (_onBeforeCrop2$then = _onBeforeCrop2.then(() => setError(null))) === null || _onBeforeCrop2$then === void 0 ? void 0 : _onBeforeCrop2$then.catch(error => setError(error === null || error === void 0 ? void 0 : error.message));
+          };
+        } else {
+          toggleModal();
+          setFileState(files[0]);
+          setPreviewImage(URL.createObjectURL(files[0]));
+        }
       }
     }
   }
@@ -22155,22 +22272,36 @@ const Upload = ({
   function handleCrop() {
     if (completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height && imgRef.current) {
       imgPreview(imgRef.current, completedCrop, 1, 0, ratio).then(blob => {
-        imageCompression(blob, {
-          maxSizeMB,
-          maxWidthOrHeight: 1920,
-          maxIteration: 2,
-          useWebWorker: true,
-          alwaysKeepResolution: true
-        }).then(compressedFile => {
+        const sizeMB = (blob === null || blob === void 0 ? void 0 : blob.size) / 1024 / 1024;
+
+        if (sizeMB < maxSizeMB || sizeMB < 1 || !imageCompression) {
           var _fileState$name;
 
-          const file = new File([compressedFile], (fileState === null || fileState === void 0 ? void 0 : (_fileState$name = fileState.name) === null || _fileState$name === void 0 ? void 0 : _fileState$name.replace(/\.[^/.]+$/, '')) + '.png', {
-            type: compressedFile === null || compressedFile === void 0 ? void 0 : compressedFile.type
+          const file = new File([blob], (fileState === null || fileState === void 0 ? void 0 : (_fileState$name = fileState.name) === null || _fileState$name === void 0 ? void 0 : _fileState$name.replace(/\.[^/.]+$/, '')) + '.png', {
+            type: blob === null || blob === void 0 ? void 0 : blob.type
           });
           handleUpload([file]);
           setCrop(null);
           setCompletedCrop(null);
-        }).catch(error => console.error(error === null || error === void 0 ? void 0 : error.message));
+        } else {
+          imageCompressionComponent(blob, {
+            maxSizeMB,
+            maxWidthOrHeight: 1920,
+            maxIteration: 10,
+            useWebWorker: true,
+            alwaysKeepResolution: true
+          }).then(compressedFile => {
+            var _fileState$name2;
+
+            const file = new File([compressedFile], (fileState === null || fileState === void 0 ? void 0 : (_fileState$name2 = fileState.name) === null || _fileState$name2 === void 0 ? void 0 : _fileState$name2.replace(/\.[^/.]+$/, '')) + '.png', {
+              type: compressedFile === null || compressedFile === void 0 ? void 0 : compressedFile.type
+            });
+            handleUpload([file]);
+            setCrop(null);
+            setCompletedCrop(null);
+          }).catch(error => console.error(error === null || error === void 0 ? void 0 : error.message));
+        }
+
         toggleModal();
       }).catch(error => console.error(error === null || error === void 0 ? void 0 : error.message));
     } else {
@@ -22200,15 +22331,13 @@ const Upload = ({
   }
 
   function handleClose(file) {
-    if (onChange) {
-      const index = fileList.indexOf(file);
-      const newFileList = fileList.slice();
-      newFileList.splice(index, 1);
-      onChange({
-        fileList: newFileList,
-        file
-      });
-    }
+    const index = fileList.indexOf(file);
+    const newFileList = fileList.slice();
+    newFileList.splice(index, 1);
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      fileList: newFileList,
+      file
+    });
   }
 
   function handleRemove(file) {
@@ -22301,7 +22430,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 572,
+        lineNumber: 603,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -22311,7 +22440,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 573,
+        lineNumber: 604,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
@@ -22327,7 +22456,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 583,
+            lineNumber: 614,
             columnNumber: 16
           }
         });
@@ -22339,7 +22468,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 586,
+          lineNumber: 617,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -22349,7 +22478,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 587,
+          lineNumber: 618,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22358,7 +22487,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 588,
+          lineNumber: 619,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -22371,7 +22500,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 589,
+          lineNumber: 620,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22380,7 +22509,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 597,
+          lineNumber: 628,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -22390,7 +22519,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 599,
+          lineNumber: 630,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -22409,7 +22538,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 610,
+            lineNumber: 641,
             columnNumber: 16
           }
         });
@@ -22420,7 +22549,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 613,
+          lineNumber: 644,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -22430,7 +22559,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 614,
+          lineNumber: 645,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22439,7 +22568,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 615,
+          lineNumber: 646,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -22452,7 +22581,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 616,
+          lineNumber: 647,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22462,14 +22591,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 624,
+          lineNumber: 655,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(FileExtension, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 625,
+          lineNumber: 656,
           columnNumber: 17
         }
       }, ".", item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -22477,7 +22606,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 626,
+          lineNumber: 657,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -22492,7 +22621,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 627,
+          lineNumber: 658,
           columnNumber: 19
         }
       }, item.name)))), /*#__PURE__*/React__default.createElement(Box, {
@@ -22505,7 +22634,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 642,
+          lineNumber: 673,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22514,7 +22643,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 650,
+          lineNumber: 681,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -22522,7 +22651,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 652,
+          lineNumber: 683,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -22538,7 +22667,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 663,
+        lineNumber: 694,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22552,7 +22681,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 664,
+        lineNumber: 695,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -22578,7 +22707,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 665,
+        lineNumber: 696,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -22586,14 +22715,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 678,
+        lineNumber: 709,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 679,
+        lineNumber: 710,
         columnNumber: 11
       }
     }, "Berkas sedang diunggah")));
@@ -22606,7 +22735,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 687,
+        lineNumber: 718,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -22622,7 +22751,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 688,
+        lineNumber: 719,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -22634,21 +22763,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 699,
+        lineNumber: 730,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 700,
+        lineNumber: 731,
         columnNumber: 11
       }
     }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 702,
+        lineNumber: 733,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -22657,7 +22786,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 703,
+        lineNumber: 734,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -22665,7 +22794,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 704,
+        lineNumber: 735,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -22675,14 +22804,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 706,
+        lineNumber: 737,
         columnNumber: 17
       }
     }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 713,
+        lineNumber: 744,
         columnNumber: 19
       }
     }, error));
@@ -22693,7 +22822,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 720,
+        lineNumber: 751,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -22701,7 +22830,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 721,
+        lineNumber: 752,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -22709,7 +22838,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 722,
+        lineNumber: 753,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -22722,7 +22851,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 724,
+        lineNumber: 755,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -22734,7 +22863,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 727,
+        lineNumber: 758,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -22745,7 +22874,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 728,
+        lineNumber: 759,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -22759,14 +22888,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 729,
+        lineNumber: 760,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 732,
+        lineNumber: 763,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22778,7 +22907,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 733,
+        lineNumber: 764,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -22786,7 +22915,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 734,
+        lineNumber: 765,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -22798,7 +22927,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 735,
+        lineNumber: 766,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22806,7 +22935,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 741,
+        lineNumber: 772,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$3, {
@@ -22815,7 +22944,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 742,
+        lineNumber: 773,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$3, {
@@ -22823,10 +22952,10 @@ const Upload = ({
       __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.createElement(Flex$1, {
@@ -22839,7 +22968,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 756,
+      lineNumber: 785,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -22848,7 +22977,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 759,
+      lineNumber: 788,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -22866,7 +22995,8 @@ Upload.defaultProps = {
   resKey: 'url',
   ratio: 16 / 9,
   disabled: false,
-  maxSizeMB: 1
+  maxSizeMB: 1,
+  imageCompression: true
 };
 Upload.propTypes = {
   /**
@@ -23020,7 +23150,17 @@ Upload.propTypes = {
   /**
    Referencing the key to get the file from the API response.
    */
-  resKey: PropTypes.string
+  resKey: PropTypes.string,
+
+  /**
+   To compression image if file size > 1MB.
+   */
+  imageCompression: PropTypes.bool,
+
+  /**
+   Callback to handle before crop image.
+   */
+  onBeforeCrop: PropTypes.func
 };
 Upload.displayName = 'Upload';
 
@@ -26577,6 +26717,8 @@ const Navigation = props => {
         align: "center",
         key: `step-${i}`,
         onClick: () => {
+          if (props.onNavClicked) props.onNavClicked(i);
+
           if (!forbidClickNav && isComplete && !isHide) {
             props.goToStep(i);
           }
@@ -26594,7 +26736,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 118,
+          lineNumber: 119,
           columnNumber: 15
         }
       }), isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -26606,7 +26748,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 119,
+          lineNumber: 120,
           columnNumber: 30
         }
       }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) === null || _data$title === void 0 ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -26615,7 +26757,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 122,
+          lineNumber: 123,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -26627,7 +26769,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 123,
+          lineNumber: 124,
           columnNumber: 19
         }
       })), ((_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -26638,7 +26780,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 127,
+          lineNumber: 128,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Tag, {
@@ -26647,7 +26789,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 128,
+          lineNumber: 129,
           columnNumber: 19
         }
       }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -26664,7 +26806,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 136,
+          lineNumber: 137,
           columnNumber: 13
         }
       }, isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -26673,7 +26815,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 148,
+          lineNumber: 149,
           columnNumber: 30
         }
       }), !isComplete && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -26689,7 +26831,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 150,
+          lineNumber: 151,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -26699,7 +26841,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 162,
+          lineNumber: 163,
           columnNumber: 15
         }
       }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -26709,7 +26851,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 166,
+          lineNumber: 167,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -26718,7 +26860,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 167,
+          lineNumber: 168,
           columnNumber: 19
         }
       })), isActive && ((_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -26730,7 +26872,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 171,
+          lineNumber: 172,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Tag, {
@@ -26739,7 +26881,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 172,
+          lineNumber: 173,
           columnNumber: 19
         }
       }, "Coming Soon"))));
@@ -26761,7 +26903,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 182,
+      lineNumber: 183,
       columnNumber: 5
     }
   }, isMobile ? /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -26773,7 +26915,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 198,
+      lineNumber: 199,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -26786,7 +26928,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 199,
+      lineNumber: 200,
       columnNumber: 11
     }
   }, stepItems)) : stepItems);
@@ -26887,7 +27029,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 296,
+      lineNumber: 297,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
@@ -26909,7 +27051,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 297,
+      lineNumber: 298,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -26917,11 +27059,12 @@ const Default = props => {
     className: !props.isMobile && 'stepperInstance',
     instance: setInstance,
     nav: /*#__PURE__*/React__default.createElement(Navigation, {
+      onNavClicked: props.onNavClicked,
       isComplete: state.isComplete,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 319,
+        lineNumber: 320,
         columnNumber: 16
       }
     }),
@@ -26931,7 +27074,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 314,
+      lineNumber: 315,
       columnNumber: 9
     }
   }), props.children)));
@@ -31982,4 +32125,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$3 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$3 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };