@majoo-ui/react 1.52.4 → 1.52.5

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";
 
@@ -10723,6 +10724,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 +10792,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 +10812,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 +10846,7 @@
     }, {
       children: [jsxRuntime.jsx(Button, __assign({
         type: "button",
-        disabled: disabled,
+        disabled: disabled || disabledDecrement,
         buttonType: "secondary",
         counterType: "minus",
         icon: true,
@@ -10834,11 +10854,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 +10867,7 @@
         suffix: suffix
       }, void 0), jsxRuntime.jsx(Button, __assign({
         type: "button",
-        disabled: disabled,
+        disabled: disabled || disabledIncrement,
         buttonType: "secondary",
         counterType: "plus",
         icon: true,
@@ -10854,7 +10875,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);
@@ -21743,7 +21764,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 +21784,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 +21799,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 +21844,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 +21987,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 118,
+        lineNumber: 119,
         columnNumber: 5
       }
     })) : /*#__PURE__*/React__default["default"].createElement(EyeIcon, _extends({}, props, {
@@ -21966,7 +21997,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 125,
+        lineNumber: 126,
         columnNumber: 5
       }
     }));
@@ -22001,7 +22032,8 @@
     resKey,
     ratio,
     disabled,
-    errorMessage
+    errorMessage,
+    maxSizeMB
   }) => {
     const isFile = listType === 'file';
     const imgRef = React.useRef(null);
@@ -22284,14 +22316,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 +22462,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 558,
+          lineNumber: 572,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -22430,7 +22472,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 559,
+          lineNumber: 573,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
@@ -22446,7 +22488,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 569,
+              lineNumber: 583,
               columnNumber: 16
             }
           });
@@ -22458,7 +22500,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 572,
+            lineNumber: 586,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22468,7 +22510,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 573,
+            lineNumber: 587,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22477,7 +22519,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 574,
+            lineNumber: 588,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22490,7 +22532,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 575,
+            lineNumber: 589,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22499,7 +22541,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 583,
+            lineNumber: 597,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -22509,7 +22551,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 585,
+            lineNumber: 599,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -22528,7 +22570,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 596,
+              lineNumber: 610,
               columnNumber: 16
             }
           });
@@ -22539,7 +22581,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 599,
+            lineNumber: 613,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22549,7 +22591,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 600,
+            lineNumber: 614,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22558,7 +22600,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 601,
+            lineNumber: 615,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22571,7 +22613,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 602,
+            lineNumber: 616,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22581,14 +22623,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 +22638,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 612,
+            lineNumber: 626,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -22611,7 +22653,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 613,
+            lineNumber: 627,
             columnNumber: 19
           }
         }, item.name)))), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22624,7 +22666,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 628,
+            lineNumber: 642,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22633,7 +22675,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 636,
+            lineNumber: 650,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -22641,7 +22683,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 638,
+            lineNumber: 652,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -22657,7 +22699,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 649,
+          lineNumber: 663,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22671,7 +22713,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 650,
+          lineNumber: 664,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -22697,7 +22739,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 651,
+          lineNumber: 665,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -22705,14 +22747,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 +22767,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 673,
+          lineNumber: 687,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -22741,7 +22783,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 674,
+          lineNumber: 688,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -22753,21 +22795,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 +22818,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 689,
+          lineNumber: 703,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -22784,7 +22826,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 690,
+          lineNumber: 704,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -22794,14 +22836,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 +22854,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 706,
+          lineNumber: 720,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -22820,7 +22862,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 707,
+          lineNumber: 721,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -22828,7 +22870,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 708,
+          lineNumber: 722,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -22841,7 +22883,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 710,
+          lineNumber: 724,
           columnNumber: 9
         }
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -22853,7 +22895,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 713,
+          lineNumber: 727,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -22864,7 +22906,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 714,
+          lineNumber: 728,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -22878,14 +22920,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 +22939,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 719,
+          lineNumber: 733,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -22905,7 +22947,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 720,
+          lineNumber: 734,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -22917,7 +22959,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 721,
+          lineNumber: 735,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22925,7 +22967,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 727,
+          lineNumber: 741,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$3, {
@@ -22934,7 +22976,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 728,
+          lineNumber: 742,
           columnNumber: 15
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$3, {
@@ -22942,7 +22984,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 +23000,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 +23009,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 745,
+        lineNumber: 759,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -22984,7 +23026,8 @@
     reqKey: 'file',
     resKey: 'url',
     ratio: 16 / 9,
-    disabled: false
+    disabled: false,
+    maxSizeMB: 1
   };
   Upload.propTypes = {
     /**
@@ -23055,6 +23098,11 @@
      */
     max: PropTypes__default["default"].number,
 
+    /**
+     Limit the maximum image size in MB.
+     */
+    maxSizeMB: PropTypes__default["default"].number,
+
     /**
      Limit file type of upload.
      */
@@ -30483,6 +30531,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 +30563,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 {