@majoo-ui/react 1.52.4 → 1.52.6

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('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', '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.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, reactTableSticky) { 'use strict';
+  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';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -55,6 +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 _jsxFileName$10 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
 
@@ -4712,8 +4713,8 @@
     border: '2px dashed #C0C4C4',
     borderRadius: 8,
     backgroundColor: '$gray50',
-    minHeight: 120,
-    minWidth: 188,
+    height: 120,
+    width: 188,
     variants: {
       rounded: {
         true: {
@@ -6391,7 +6392,7 @@
   };
   InputRadioGroup.displayName = 'InputRadioGroup';
 
-  const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps"];
+  const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps", "description"];
   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',
@@ -6506,7 +6507,8 @@
       disabled,
       css,
       inputType,
-      inputProps
+      inputProps,
+      description
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
@@ -6518,7 +6520,7 @@
             __self: this,
             __source: {
               fileName: _jsxFileName$E,
-              lineNumber: 124,
+              lineNumber: 125,
               columnNumber: 16
             }
           }));
@@ -6529,7 +6531,7 @@
             __self: this,
             __source: {
               fileName: _jsxFileName$E,
-              lineNumber: 127,
+              lineNumber: 128,
               columnNumber: 16
             }
           }));
@@ -6549,7 +6551,7 @@
             __self: this,
             __source: {
               fileName: _jsxFileName$E,
-              lineNumber: 131,
+              lineNumber: 132,
               columnNumber: 11
             }
           }, props.label);
@@ -6560,7 +6562,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 150,
+        lineNumber: 151,
         columnNumber: 5
       }
     }, ({
@@ -6570,8 +6572,7 @@
     }) => {
       const checked = value !== null && value !== void 0 ? value : defaultValue;
       return /*#__PURE__*/React__default["default"].createElement(Container$8, {
-        align: "center",
-        gap: 4,
+        direction: "column",
         outlined: outlined,
         disabled: disabled,
         active: outlined && checked === props.value && !disabled,
@@ -6579,9 +6580,18 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 155,
+          lineNumber: 156,
           columnNumber: 11
         }
+      }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        align: "center",
+        gap: 4,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$E,
+          lineNumber: 163,
+          columnNumber: 13
+        }
       }, /*#__PURE__*/React__default["default"].createElement(StyledRadio, _extends({
         id: id,
         disabled: disabled
@@ -6589,17 +6599,29 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 163,
-          columnNumber: 13
+          lineNumber: 164,
+          columnNumber: 15
         }
       }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$1, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 164,
+          lineNumber: 165,
+          columnNumber: 17
+        }
+      })), renderInputType(inputType, checked)), description && /*#__PURE__*/React__default["default"].createElement(Text$1, {
+        variant: "caption",
+        color: "secondary",
+        css: {
+          marginTop: '10px'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$E,
+          lineNumber: 171,
           columnNumber: 15
         }
-      })), renderInputType(inputType, checked));
+      }, description));
     });
   };
   InputRadio.propTypes = {
@@ -6609,7 +6631,8 @@
     label: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]),
     css: PropTypes__default["default"].object,
     inputType: PropTypes__default["default"].oneOf(['number', 'text', 'default']),
-    onChange: PropTypes__default["default"].func
+    onChange: PropTypes__default["default"].func,
+    description: PropTypes__default["default"].string
   };
   InputRadio.displayName = 'InputRadio';
 
@@ -9153,41 +9176,6 @@
     }
   });
 
-  var $$e = _export;
-  var uncurryThis$f = functionUncurryThis;
-  var getOwnPropertyDescriptor$2 = objectGetOwnPropertyDescriptor.f;
-  var toLength$2 = toLength$4;
-  var toString$a = toString$h;
-  var notARegExp = notARegexp;
-  var requireObjectCoercible$5 = requireObjectCoercible$a;
-  var correctIsRegExpLogic = correctIsRegexpLogic;
-
-  // eslint-disable-next-line es-x/no-string-prototype-startswith -- safe
-  var un$StartsWith = uncurryThis$f(''.startsWith);
-  var stringSlice$7 = uncurryThis$f(''.slice);
-  var min$2 = Math.min;
-
-  var CORRECT_IS_REGEXP_LOGIC = correctIsRegExpLogic('startsWith');
-  // https://github.com/zloirock/core-js/pull/702
-  var MDN_POLYFILL_BUG = !CORRECT_IS_REGEXP_LOGIC && !!function () {
-    var descriptor = getOwnPropertyDescriptor$2(String.prototype, 'startsWith');
-    return descriptor && !descriptor.writable;
-  }();
-
-  // `String.prototype.startsWith` method
-  // https://tc39.es/ecma262/#sec-string.prototype.startswith
-  $$e({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
-    startsWith: function startsWith(searchString /* , position = 0 */) {
-      var that = toString$a(requireObjectCoercible$5(this));
-      notARegExp(searchString);
-      var index = toLength$2(min$2(arguments.length > 1 ? arguments[1] : undefined, that.length));
-      var search = toString$a(searchString);
-      return un$StartsWith
-        ? un$StartsWith(that, search, index)
-        : stringSlice$7(that, index, index + search.length) === search;
-    }
-  });
-
   var _jsxFileName$w = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\icon\\CheckOutline.js";
 
   const CheckOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
@@ -9333,8 +9321,12 @@
     outline: 'none',
     border: 'none',
     cursor: 'text',
+    color: '$textPrimary',
     '&:disabled': {
-      cursor: 'not-allowed'
+      cursor: 'not-allowed',
+      '&::placeholder': {
+        color: '$textDisable'
+      }
     },
     variants: {
       hiddden: {
@@ -9435,7 +9427,6 @@
     display: 'flex',
     position: 'relative',
     flex: 'auto',
-    flexWrap: 'wrap',
     maxWidth: '100%',
     cursor: 'pointer',
     alignItems: 'center',
@@ -9584,7 +9575,11 @@
           return setItems(sortValue);
         }
       } else {
-        let filterItems = option.filter(item => item.name.toLowerCase().startsWith(input.toLocaleLowerCase()));
+        let filterItems = option === null || option === void 0 ? void 0 : option.filter(item => {
+          var _item$name, _item$name$toLowerCas, _item$name$toLowerCas2, _input$toLocaleLowerC;
+
+          return item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : (_item$name$toLowerCas = _item$name.toLowerCase()) === null || _item$name$toLowerCas === void 0 ? void 0 : (_item$name$toLowerCas2 = _item$name$toLowerCas.includes) === null || _item$name$toLowerCas2 === void 0 ? void 0 : _item$name$toLowerCas2.call(_item$name$toLowerCas, input === null || input === void 0 ? void 0 : (_input$toLocaleLowerC = input.toLocaleLowerCase) === null || _input$toLocaleLowerC === void 0 ? void 0 : _input$toLocaleLowerC.call(input));
+        });
         setItems(filterItems);
       }
     };
@@ -9717,7 +9712,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 490,
+        lineNumber: 495,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -9727,7 +9722,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 491,
+        lineNumber: 496,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9742,7 +9737,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 492,
+        lineNumber: 497,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -9758,7 +9753,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 502,
+        lineNumber: 507,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -9771,7 +9766,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 508,
+        lineNumber: 513,
         columnNumber: 13
       }
     }), placeholder)), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9782,7 +9777,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 518,
+        lineNumber: 523,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -9790,7 +9785,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 523,
+        lineNumber: 528,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -9803,7 +9798,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 527,
+        lineNumber: 532,
         columnNumber: 11
       }
     }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
@@ -9811,12 +9806,12 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 532,
+        lineNumber: 537,
         columnNumber: 11
       }
     }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
-      isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
       disabled: disabled,
+      isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
       size: size,
       readOnly: readOnly,
       key: `selected-item-${index}`
@@ -9835,7 +9830,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 534,
+        lineNumber: 539,
         columnNumber: 15
       }
     }), selectedItem.name))), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
@@ -9847,7 +9842,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 555,
+        lineNumber: 560,
         columnNumber: 9
       }
     }, items.length !== 0 ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({}, {
@@ -9856,7 +9851,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 560,
+        lineNumber: 565,
         columnNumber: 13
       }
     }), isOpen && items.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
@@ -9874,7 +9869,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 563,
+        lineNumber: 568,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -9887,7 +9882,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 576,
+        lineNumber: 581,
         columnNumber: 21
       }
     }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9895,7 +9890,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 585,
+        lineNumber: 590,
         columnNumber: 25
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9903,7 +9898,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 589,
+        lineNumber: 594,
         columnNumber: 27
       }
     })), /*#__PURE__*/React__default["default"].createElement(Item$2, {
@@ -9913,7 +9908,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 593,
+        lineNumber: 598,
         columnNumber: 21
       }
     }, item.name)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -9926,14 +9921,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 598,
+        lineNumber: 603,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 599,
+        lineNumber: 604,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -9943,7 +9938,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 600,
+        lineNumber: 605,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -9955,7 +9950,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 601,
+        lineNumber: 606,
         columnNumber: 19
       }
     })), textEmptyItem))));
@@ -10495,6 +10490,41 @@
     }), void 0);
   }
 
+  var $$e = _export;
+  var uncurryThis$f = functionUncurryThis;
+  var getOwnPropertyDescriptor$2 = objectGetOwnPropertyDescriptor.f;
+  var toLength$2 = toLength$4;
+  var toString$a = toString$h;
+  var notARegExp = notARegexp;
+  var requireObjectCoercible$5 = requireObjectCoercible$a;
+  var correctIsRegExpLogic = correctIsRegexpLogic;
+
+  // eslint-disable-next-line es-x/no-string-prototype-startswith -- safe
+  var un$StartsWith = uncurryThis$f(''.startsWith);
+  var stringSlice$7 = uncurryThis$f(''.slice);
+  var min$2 = Math.min;
+
+  var CORRECT_IS_REGEXP_LOGIC = correctIsRegExpLogic('startsWith');
+  // https://github.com/zloirock/core-js/pull/702
+  var MDN_POLYFILL_BUG = !CORRECT_IS_REGEXP_LOGIC && !!function () {
+    var descriptor = getOwnPropertyDescriptor$2(String.prototype, 'startsWith');
+    return descriptor && !descriptor.writable;
+  }();
+
+  // `String.prototype.startsWith` method
+  // https://tc39.es/ecma262/#sec-string.prototype.startswith
+  $$e({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
+    startsWith: function startsWith(searchString /* , position = 0 */) {
+      var that = toString$a(requireObjectCoercible$5(this));
+      notARegExp(searchString);
+      var index = toLength$2(min$2(arguments.length > 1 ? arguments[1] : undefined, that.length));
+      var search = toString$a(searchString);
+      return un$StartsWith
+        ? un$StartsWith(that, search, index)
+        : stringSlice$7(that, index, index + search.length) === search;
+    }
+  });
+
   var InputCombobox = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
     var _b = _a.options,
         items = _b === void 0 ? [] : _b,
@@ -10723,6 +10753,18 @@
       '&:hover': {
         borderColor: '$gray150'
       }
+    },
+    variants: {
+      disabledChange: {
+        true: {
+          backgroundColor: '$bgWhite !important',
+          border: "1px solid $gray150",
+          color: '$textPrimary !important',
+          '&:hover': {
+            borderColor: '$gray150'
+          }
+        }
+      }
     }
   });
   var Button = styled(Button$3, {
@@ -10779,10 +10821,12 @@
         min = props.min,
         max = props.max,
         disabled = props.disabled,
+        disabledIncrement = props.disabledIncrement,
+        disabledDecrement = props.disabledDecrement,
         prefix = props.prefix,
         suffix = props.suffix;
 
-    var _b = React.useState((_a = min !== null && min !== void 0 ? min : value) !== null && _a !== void 0 ? _a : 0),
+    var _b = React.useState((_a = value !== null && value !== void 0 ? value : min) !== null && _a !== void 0 ? _a : 0),
         inputValue = _b[0],
         setInputValue = _b[1];
 
@@ -10797,6 +10841,11 @@
         onChange === null || onChange === void 0 ? void 0 : onChange(max);
       }
     }, [inputValue, min, max, onChange]);
+    React.useEffect(function () {
+      if (value) {
+        setInputValue(value);
+      }
+    }, [value]);
 
     function handleUp() {
       if (!max || inputValue < max) {
@@ -10826,7 +10875,7 @@
     }, {
       children: [jsxRuntime.jsx(Button, __assign({
         type: "button",
-        disabled: disabled,
+        disabled: disabled || disabledDecrement,
         buttonType: "secondary",
         counterType: "minus",
         icon: true,
@@ -10834,11 +10883,12 @@
       }, {
         children: jsxRuntime.jsx(icons.MinusOutline, {
           size: 24,
-          color: disabled ? colors$4.iconDisable : colors$4.primary500
+          color: disabled || disabledDecrement ? colors$4.iconDisable : colors$4.primary500
         }, void 0)
       }), void 0), jsxRuntime.jsx(Input$4, {
         ref: ref,
-        disabled: disabled,
+        disabled: disabled || disabledIncrement || disabledDecrement,
+        disabledChange: disabledIncrement || disabledDecrement,
         value: inputValue,
         allowNegative: allowNegative,
         onChange: handleChange,
@@ -10846,7 +10896,7 @@
         suffix: suffix
       }, void 0), jsxRuntime.jsx(Button, __assign({
         type: "button",
-        disabled: disabled,
+        disabled: disabled || disabledIncrement,
         buttonType: "secondary",
         counterType: "plus",
         icon: true,
@@ -10854,7 +10904,7 @@
       }, {
         children: jsxRuntime.jsx(icons.PlusOutline, {
           size: 24,
-          color: disabled ? colors$4.iconDisable : colors$4.primary500
+          color: disabled || disabledIncrement ? colors$4.iconDisable : colors$4.primary500
         }, void 0)
       }), void 0)]
     }), void 0);
@@ -19582,6 +19632,7 @@
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+      paragraph: "longContentRegular",
       css: {
         textAlign: 'justify'
       },
@@ -19598,7 +19649,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 238,
+        lineNumber: 240,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -19606,7 +19657,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 239,
+        lineNumber: 241,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -19620,7 +19671,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 240,
+        lineNumber: 242,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -19628,7 +19679,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 242,
+        lineNumber: 244,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
@@ -19643,7 +19694,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 243,
+        lineNumber: 245,
         columnNumber: 17
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -19651,7 +19702,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 256,
+        lineNumber: 258,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
@@ -19667,7 +19718,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 257,
+        lineNumber: 259,
         columnNumber: 19
       }
     }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -19675,7 +19726,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 271,
+        lineNumber: 273,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
@@ -19690,7 +19741,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 272,
+        lineNumber: 274,
         columnNumber: 19
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -21743,7 +21794,7 @@
   });
 
   var TO_RADIANS = Math.PI / 180;
-  function canvasPreview(image, canvas, crop, scale, rotate) {
+  function canvasPreview(image, canvas, crop, scale, rotate, ratio) {
     if (scale === void 0) {
       scale = 1;
     }
@@ -21763,6 +21814,11 @@
 
         scaleX = image.naturalWidth / image.width;
         scaleY = image.naturalHeight / image.height;
+
+        if (ratio === 1) {
+          scaleY = scaleX;
+        }
+
         pixelRatio = window.devicePixelRatio;
         canvas.width = Math.floor(crop.width * scaleX * pixelRatio);
         canvas.height = Math.floor(crop.height * scaleY * pixelRatio);
@@ -21773,6 +21829,11 @@
         rotateRads = rotate * TO_RADIANS;
         centerX = image.naturalWidth / 2;
         centerY = image.naturalHeight / 2;
+
+        if (ratio === 1) {
+          centerY = centerX;
+        }
+
         ctx.save();
         ctx.translate(-cropX, -cropY);
         ctx.translate(centerX, centerY);
@@ -21813,7 +21874,7 @@
             }
 
             canvas = document.createElement('canvas');
-            canvasPreview(image, canvas, crop, scale, rotate);
+            canvasPreview(image, canvas, crop, scale, rotate, ratio);
             return [4
             /*yield*/
             , toBlob(canvas)];
@@ -21956,7 +22017,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 118,
+        lineNumber: 119,
         columnNumber: 5
       }
     })) : /*#__PURE__*/React__default["default"].createElement(EyeIcon, _extends({}, props, {
@@ -21966,7 +22027,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 125,
+        lineNumber: 126,
         columnNumber: 5
       }
     }));
@@ -22001,7 +22062,8 @@
     resKey,
     ratio,
     disabled,
-    errorMessage
+    errorMessage,
+    maxSizeMB
   }) => {
     const isFile = listType === 'file';
     const imgRef = React.useRef(null);
@@ -22284,14 +22346,24 @@
     function handleCrop() {
       if (completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height && imgRef.current) {
         imgPreview(imgRef.current, completedCrop, 1, 0, ratio).then(blob => {
-          const file = new File([blob], fileState === null || fileState === void 0 ? void 0 : fileState.name, {
-            type: blob.type
-          });
-          handleUpload([file]);
-          setCrop(null);
-          setCompletedCrop(null);
+          imageCompression__default["default"](blob, {
+            maxSizeMB,
+            maxWidthOrHeight: 1920,
+            maxIteration: 2,
+            useWebWorker: true,
+            alwaysKeepResolution: true
+          }).then(compressedFile => {
+            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
+            });
+            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 {
         handleUpload([fileState]);
         toggleModal();
@@ -22420,7 +22492,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 558,
+          lineNumber: 572,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -22430,7 +22502,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 559,
+          lineNumber: 573,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
@@ -22446,7 +22518,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 569,
+              lineNumber: 583,
               columnNumber: 16
             }
           });
@@ -22458,7 +22530,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 572,
+            lineNumber: 586,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22468,7 +22540,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 573,
+            lineNumber: 587,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22477,7 +22549,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 574,
+            lineNumber: 588,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22490,7 +22562,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 575,
+            lineNumber: 589,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22499,7 +22571,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 583,
+            lineNumber: 597,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -22509,7 +22581,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 585,
+            lineNumber: 599,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -22528,7 +22600,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 596,
+              lineNumber: 610,
               columnNumber: 16
             }
           });
@@ -22539,7 +22611,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 599,
+            lineNumber: 613,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22549,7 +22621,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 600,
+            lineNumber: 614,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22558,7 +22630,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 601,
+            lineNumber: 615,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22571,7 +22643,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 602,
+            lineNumber: 616,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22581,14 +22653,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 610,
+            lineNumber: 624,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 611,
+            lineNumber: 625,
             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, {
@@ -22596,7 +22668,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 612,
+            lineNumber: 626,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -22611,7 +22683,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 613,
+            lineNumber: 627,
             columnNumber: 19
           }
         }, item.name)))), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22624,7 +22696,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 628,
+            lineNumber: 642,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22633,7 +22705,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 636,
+            lineNumber: 650,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -22641,7 +22713,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 638,
+            lineNumber: 652,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -22657,7 +22729,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 649,
+          lineNumber: 663,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22671,7 +22743,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 650,
+          lineNumber: 664,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -22697,7 +22769,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 651,
+          lineNumber: 665,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -22705,14 +22777,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 664,
+          lineNumber: 678,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 665,
+          lineNumber: 679,
           columnNumber: 11
         }
       }, "Berkas sedang diunggah")));
@@ -22725,7 +22797,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 673,
+          lineNumber: 687,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -22741,7 +22813,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 674,
+          lineNumber: 688,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -22753,21 +22825,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 685,
+          lineNumber: 699,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 686,
+          lineNumber: 700,
           columnNumber: 11
         }
       }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 688,
+          lineNumber: 702,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -22776,7 +22848,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 689,
+          lineNumber: 703,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -22784,7 +22856,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 690,
+          lineNumber: 704,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -22794,14 +22866,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 692,
+          lineNumber: 706,
           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: 699,
+          lineNumber: 713,
           columnNumber: 19
         }
       }, error));
@@ -22812,7 +22884,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 706,
+          lineNumber: 720,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -22820,7 +22892,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 707,
+          lineNumber: 721,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -22828,7 +22900,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 708,
+          lineNumber: 722,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -22841,7 +22913,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 710,
+          lineNumber: 724,
           columnNumber: 9
         }
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -22853,7 +22925,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 713,
+          lineNumber: 727,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -22864,7 +22936,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 714,
+          lineNumber: 728,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -22878,14 +22950,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 715,
+          lineNumber: 729,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 718,
+          lineNumber: 732,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22897,7 +22969,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 719,
+          lineNumber: 733,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -22905,7 +22977,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 720,
+          lineNumber: 734,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -22917,7 +22989,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 721,
+          lineNumber: 735,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22925,7 +22997,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 727,
+          lineNumber: 741,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$3, {
@@ -22934,7 +23006,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 728,
+          lineNumber: 742,
           columnNumber: 15
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$3, {
@@ -22942,7 +23014,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 731,
+          lineNumber: 745,
           columnNumber: 15
         }
       }, `${completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
@@ -22958,7 +23030,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 742,
+        lineNumber: 756,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -22967,7 +23039,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 745,
+        lineNumber: 759,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -22984,7 +23056,8 @@
     reqKey: 'file',
     resKey: 'url',
     ratio: 16 / 9,
-    disabled: false
+    disabled: false,
+    maxSizeMB: 1
   };
   Upload.propTypes = {
     /**
@@ -23055,6 +23128,11 @@
      */
     max: PropTypes__default["default"].number,
 
+    /**
+     Limit the maximum image size in MB.
+     */
+    maxSizeMB: PropTypes__default["default"].number,
+
     /**
      Limit file type of upload.
      */
@@ -27860,7 +27938,6 @@
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    maxWidth: 60,
     textAlign: 'center',
     margin: 0,
     '@md': {
@@ -28023,18 +28100,90 @@
         emptyDataMessage = props.emptyDataMessage,
         rowHeight = props.rowHeight,
         align = props.align,
-        customRows = props.customRows;
+        customRows = props.customRows,
+        showCheckbox = props.showCheckbox,
+        onSelectedChange = props.onSelectedChange,
+        getCheckboxProps = props.getCheckboxProps,
+        _a = props.keyId,
+        keyId = _a === void 0 ? 'id' : _a,
+        selectedIds = props.selectedIds;
+
+    var _b = React.useState(null),
+        selectedIndex = _b[0],
+        setSelectedIndex = _b[1];
+
+    var IndeterminateCheckbox = function IndeterminateCheckbox(props) {
+      function handleCheckedChange(checked) {
+        props === null || props === void 0 ? void 0 : props.onChange({
+          target: {
+            checked: checked
+          }
+        });
+        setSelectedIndex(__assign({}, props));
+      }
+
+      return jsxRuntime.jsx(InputCheckbox, __assign({}, props, getCheckboxProps === null || getCheckboxProps === void 0 ? void 0 : getCheckboxProps(props === null || props === void 0 ? void 0 : props.row), {
+        onCheckedChange: handleCheckedChange
+      }), void 0);
+    };
+
+    var getInitialState = function getInitialState() {
+      var initialState = {};
+
+      if (selectedIds) {
+        Object.assign(initialState, {
+          selectedRowIds: selectedIds
+        });
+      }
+
+      return Object.keys(initialState).length > 0 ? initialState : undefined;
+    };
+
     var instance = reactTable.useTable({
       columns: columns,
       data: data,
-      autoResetExpanded: false
-    }, reactTable.useExpanded);
+      initialState: getInitialState(),
+      autoResetExpanded: false,
+      getRowId: function (row) {
+        return row[keyId] || JSON.stringify(row);
+      }
+    }, reactTable.useExpanded, reactTable.useRowSelect, function (hooks) {
+      showCheckbox && hooks.visibleColumns.push(function (columns) {
+        return __spreadArray([{
+          id: 'selection',
+          Header: function (_a) {
+            var getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps;
+            return jsxRuntime.jsx(IndeterminateCheckbox, __assign({
+              index: "header"
+            }, getToggleAllRowsSelectedProps()), void 0);
+          },
+          Cell: function (_a) {
+            var row = _a.row;
+            return jsxRuntime.jsx(IndeterminateCheckbox, __assign({
+              row: row
+            }, row.getToggleRowSelectedProps()), void 0);
+          },
+          width: 30
+        }], columns, true);
+      });
+    });
     var getTableProps = instance.getTableProps,
         getTableBodyProps = instance.getTableBodyProps,
         headerGroups = instance.headerGroups,
         rows = instance.rows,
         prepareRow = instance.prepareRow,
-        visibleColumns = instance.visibleColumns;
+        visibleColumns = instance.visibleColumns,
+        selectedRowIds = instance.state.selectedRowIds;
+    React.useEffect(function () {
+      if (data && data.length > 0 && selectedRowIds && onSelectedChange && selectedIndex) {
+        var selected = selectedRowIds ? Object.keys(selectedRowIds) : [];
+        onSelectedChange({
+          selected: selected,
+          row: selectedIndex === null || selectedIndex === void 0 ? void 0 : selectedIndex.row,
+          state: !(selectedIndex === null || selectedIndex === void 0 ? void 0 : selectedIndex.checked)
+        });
+      }
+    }, [selectedRowIds, data, onSelectedChange, selectedIndex]);
     var isDesktop = useMediaQuery('(min-width: 767px)');
     return isDesktop ? jsxRuntime.jsx(TableContainer$1, __assign({
       css: props === null || props === void 0 ? void 0 : props.css
@@ -30483,6 +30632,31 @@
       borderRadius: 8,
       backgroundColor: '$bgWhite'
     },
+    '& > .wrapper-root > .toolbar-root > div > .rdw-option-wrapper': {
+      border: 'none !important',
+      height: 'unset !important',
+      borderRadius: '4px !important'
+    },
+    '& > .wrapper-root > .toolbar-root > div > .rdw-option-wrapper:hover': {
+      boxShadow: 'none !important',
+      backgroundColor: '$gray100 !important'
+    },
+    '& > .wrapper-root > .toolbar-root > div > .rdw-option-active': {
+      backgroundColor: '$gray100 !important'
+    },
+    '& > .wrapper-root > .toolbar-root > div > .rdw-link-modal': {
+      height: 'unset !important'
+    },
+    '& > .wrapper-root > .toolbar-root > div > .rdw-dropdown-wrapper': {
+      border: 'unset !important'
+    },
+    '& > .wrapper-root > .toolbar-root > div > .rdw-dropdown-wrapper:hover': {
+      boxShadow: 'none !important',
+      backgroundColor: '$gray100 !important'
+    },
+    '& > .wrapper-root > .toolbar-root > div > .rdw-dropdown-wrapper:active': {
+      backgroundColor: '$gray100 !important'
+    },
     '& > .wrapper-root > .editor-root': {
       border: '1px solid $gray300',
       borderRadius: 8,
@@ -30490,6 +30664,9 @@
       padding: '$spacing-05',
       height: 400
     },
+    '& > .wrapper-root > .editor-root > div > div > div > div > div > .public-DraftStyleDefault-ltr': {
+      textAlign: 'unset !important'
+    },
     variants: {
       editorHeight: seqNumberVariants(function (value) {
         return {