@majoo-ui/react 1.52.4 → 1.52.6

package/index.esm.js

@@ -43,6 +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 { useSticky } from 'react-table-sticky';
 
 var _jsxFileName$10 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
@@ -4632,8 +4633,8 @@ const ContainerFallback = styled(Flex$1, {
   border: '2px dashed #C0C4C4',
   borderRadius: 8,
   backgroundColor: '$gray50',
-  minHeight: 120,
-  minWidth: 188,
+  height: 120,
+  width: 188,
   variants: {
     rounded: {
       true: {
@@ -6311,7 +6312,7 @@ InputRadioGroup.propTypes = {
 };
 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',
@@ -6426,7 +6427,8 @@ const InputRadio = _ref => {
     disabled,
     css,
     inputType,
-    inputProps
+    inputProps,
+    description
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
@@ -6438,7 +6440,7 @@ const InputRadio = _ref => {
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 124,
+            lineNumber: 125,
             columnNumber: 16
           }
         }));
@@ -6449,7 +6451,7 @@ const InputRadio = _ref => {
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 127,
+            lineNumber: 128,
             columnNumber: 16
           }
         }));
@@ -6469,7 +6471,7 @@ const InputRadio = _ref => {
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 131,
+            lineNumber: 132,
             columnNumber: 11
           }
         }, props.label);
@@ -6480,7 +6482,7 @@ const InputRadio = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$E,
-      lineNumber: 150,
+      lineNumber: 151,
       columnNumber: 5
     }
   }, ({
@@ -6490,8 +6492,7 @@ const InputRadio = _ref => {
   }) => {
     const checked = value !== null && value !== void 0 ? value : defaultValue;
     return /*#__PURE__*/React__default.createElement(Container$8, {
-      align: "center",
-      gap: 4,
+      direction: "column",
       outlined: outlined,
       disabled: disabled,
       active: outlined && checked === props.value && !disabled,
@@ -6499,9 +6500,18 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 155,
+        lineNumber: 156,
         columnNumber: 11
       }
+    }, /*#__PURE__*/React__default.createElement(Flex$1, {
+      align: "center",
+      gap: 4,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$E,
+        lineNumber: 163,
+        columnNumber: 13
+      }
     }, /*#__PURE__*/React__default.createElement(StyledRadio, _extends({
       id: id,
       disabled: disabled
@@ -6509,17 +6519,29 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 163,
-        columnNumber: 13
+        lineNumber: 164,
+        columnNumber: 15
       }
     }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 164,
+        lineNumber: 165,
+        columnNumber: 17
+      }
+    })), renderInputType(inputType, checked)), description && /*#__PURE__*/React__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 = {
@@ -6529,7 +6551,8 @@ InputRadio.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   css: PropTypes.object,
   inputType: PropTypes.oneOf(['number', 'text', 'default']),
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  description: PropTypes.string
 };
 InputRadio.displayName = 'InputRadio';
 
@@ -9016,41 +9039,6 @@ $$f({ target: 'Array', proto: true, forced: !STRICT_METHOD || CHROME_BUG }, {
   }
 });
 
-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.createElement("svg", _extends({
@@ -9196,8 +9184,12 @@ const Input$6 = styled('input', {
   outline: 'none',
   border: 'none',
   cursor: 'text',
+  color: '$textPrimary',
   '&:disabled': {
-    cursor: 'not-allowed'
+    cursor: 'not-allowed',
+    '&::placeholder': {
+      color: '$textDisable'
+    }
   },
   variants: {
     hiddden: {
@@ -9298,7 +9290,6 @@ const ItemWrapper$1 = styled(Box, {
   display: 'flex',
   position: 'relative',
   flex: 'auto',
-  flexWrap: 'wrap',
   maxWidth: '100%',
   cursor: 'pointer',
   alignItems: 'center',
@@ -9447,7 +9438,11 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         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);
     }
   };
@@ -9580,7 +9575,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 490,
+      lineNumber: 495,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -9590,7 +9585,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 491,
+      lineNumber: 496,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9605,7 +9600,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 492,
+      lineNumber: 497,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -9621,7 +9616,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 502,
+      lineNumber: 507,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -9634,7 +9629,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 508,
+      lineNumber: 513,
       columnNumber: 13
     }
   }), placeholder)), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9645,7 +9640,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 518,
+      lineNumber: 523,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -9653,7 +9648,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 523,
+      lineNumber: 528,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -9666,7 +9661,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 527,
+      lineNumber: 532,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
@@ -9674,12 +9669,12 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 532,
+      lineNumber: 537,
       columnNumber: 11
     }
   }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__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}`
@@ -9698,7 +9693,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 534,
+      lineNumber: 539,
       columnNumber: 15
     }
   }), selectedItem.name))), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
@@ -9710,7 +9705,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 555,
+      lineNumber: 560,
       columnNumber: 9
     }
   }, items.length !== 0 ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({}, {
@@ -9719,7 +9714,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 560,
+      lineNumber: 565,
       columnNumber: 13
     }
   }), isOpen && items.map((item, index) => /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
@@ -9737,7 +9732,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 563,
+      lineNumber: 568,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -9750,7 +9745,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 576,
+      lineNumber: 581,
       columnNumber: 21
     }
   }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -9758,7 +9753,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __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.createElement(CheckOutline, {
@@ -9766,7 +9761,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 589,
+      lineNumber: 594,
       columnNumber: 27
     }
   })), /*#__PURE__*/React__default.createElement(Item$2, {
@@ -9776,7 +9771,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 593,
+      lineNumber: 598,
       columnNumber: 21
     }
   }, item.name)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -9789,14 +9784,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 598,
+      lineNumber: 603,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 599,
+      lineNumber: 604,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -9806,7 +9801,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 600,
+      lineNumber: 605,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -9818,7 +9813,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 601,
+      lineNumber: 606,
       columnNumber: 19
     }
   })), textEmptyItem))));
@@ -10332,6 +10327,41 @@ function InputResourceList({
   }), 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;
+  }
+});
+
 const InputCombobox = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   var {
     options: items = [],
@@ -10554,6 +10584,18 @@ const Input$4 = styled(InputNumber, {
     '&:hover': {
       borderColor: '$gray150'
     }
+  },
+  variants: {
+    disabledChange: {
+      true: {
+        backgroundColor: '$bgWhite !important',
+        border: `1px solid $gray150`,
+        color: '$textPrimary !important',
+        '&:hover': {
+          borderColor: '$gray150'
+        }
+      }
+    }
   }
 });
 const Button = styled(Button$3, {
@@ -10611,10 +10653,12 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
     min,
     max,
     disabled,
+    disabledIncrement,
+    disabledDecrement,
     prefix,
     suffix
   } = props;
-  const [inputValue, setInputValue] = useState((_a = min !== null && min !== void 0 ? min : value) !== null && _a !== void 0 ? _a : 0);
+  const [inputValue, setInputValue] = useState((_a = value !== null && value !== void 0 ? value : min) !== null && _a !== void 0 ? _a : 0);
   useEffect(() => {
     if (min && inputValue < min) {
       setInputValue(min);
@@ -10626,6 +10670,11 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
       onChange === null || onChange === void 0 ? void 0 : onChange(max);
     }
   }, [inputValue, min, max, onChange]);
+  useEffect(() => {
+    if (value) {
+      setInputValue(value);
+    }
+  }, [value]);
 
   function handleUp() {
     if (!max || inputValue < max) {
@@ -10655,7 +10704,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
   }, {
     children: [jsx(Button, Object.assign({
       type: "button",
-      disabled: disabled,
+      disabled: disabled || disabledDecrement,
       buttonType: "secondary",
       counterType: "minus",
       icon: true,
@@ -10663,11 +10712,12 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
     }, {
       children: jsx(MinusOutline, {
         size: 24,
-        color: disabled ? colors$4.iconDisable : colors$4.primary500
+        color: disabled || disabledDecrement ? colors$4.iconDisable : colors$4.primary500
       }, void 0)
     }), void 0), jsx(Input$4, {
       ref: ref,
-      disabled: disabled,
+      disabled: disabled || disabledIncrement || disabledDecrement,
+      disabledChange: disabledIncrement || disabledDecrement,
       value: inputValue,
       allowNegative: allowNegative,
       onChange: handleChange,
@@ -10675,7 +10725,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
       suffix: suffix
     }, void 0), jsx(Button, Object.assign({
       type: "button",
-      disabled: disabled,
+      disabled: disabled || disabledIncrement,
       buttonType: "secondary",
       counterType: "plus",
       icon: true,
@@ -10683,7 +10733,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
     }, {
       children: jsx(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);
@@ -19243,6 +19293,7 @@ function AlertDialog(props) {
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
+    paragraph: "longContentRegular",
     css: {
       textAlign: 'justify'
     },
@@ -19259,7 +19310,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 238,
+      lineNumber: 240,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -19267,7 +19318,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 239,
+      lineNumber: 241,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -19281,7 +19332,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 240,
+      lineNumber: 242,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -19289,7 +19340,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 242,
+      lineNumber: 244,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
@@ -19304,7 +19355,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 243,
+      lineNumber: 245,
       columnNumber: 17
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -19312,7 +19363,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 256,
+      lineNumber: 258,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
@@ -19328,7 +19379,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 257,
+      lineNumber: 259,
       columnNumber: 19
     }
   }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -19336,7 +19387,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 271,
+      lineNumber: 273,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
@@ -19351,7 +19402,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 272,
+      lineNumber: 274,
       columnNumber: 19
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -21404,7 +21455,7 @@ $$3({ global: true, constructor: true, forced: !USE_NATIVE_URL, sham: !DESCRIPTO
 });
 
 const TO_RADIANS = Math.PI / 180;
-function canvasPreview(image, canvas, crop, scale = 1, rotate = 0) {
+function canvasPreview(image, canvas, crop, scale = 1, rotate = 0, ratio) {
   return __awaiter(this, void 0, void 0, function* () {
     const ctx = canvas.getContext('2d');
 
@@ -21413,7 +21464,12 @@ function canvasPreview(image, canvas, crop, scale = 1, rotate = 0) {
     }
 
     const scaleX = image.naturalWidth / image.width;
-    const scaleY = image.naturalHeight / image.height;
+    let scaleY = image.naturalHeight / image.height;
+
+    if (ratio === 1) {
+      scaleY = scaleX;
+    }
+
     const pixelRatio = window.devicePixelRatio;
     canvas.width = Math.floor(crop.width * scaleX * pixelRatio);
     canvas.height = Math.floor(crop.height * scaleY * pixelRatio);
@@ -21423,7 +21479,12 @@ function canvasPreview(image, canvas, crop, scale = 1, rotate = 0) {
     const cropY = crop.y * scaleY;
     const rotateRads = rotate * TO_RADIANS;
     const centerX = image.naturalWidth / 2;
-    const centerY = image.naturalHeight / 2;
+    let centerY = image.naturalHeight / 2;
+
+    if (ratio === 1) {
+      centerY = centerX;
+    }
+
     ctx.save();
     ctx.translate(-cropX, -cropY);
     ctx.translate(centerX, centerY);
@@ -21448,7 +21509,7 @@ function imgPreview(image, crop, scale = 1, rotate = 0, ratio) {
     }
 
     const canvas = document.createElement('canvas');
-    canvasPreview(image, canvas, crop, scale, rotate);
+    canvasPreview(image, canvas, crop, scale, rotate, ratio);
     const blob = yield toBlob(canvas);
     return blob;
   });
@@ -21583,7 +21644,7 @@ const IconStateFull = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 118,
+      lineNumber: 119,
       columnNumber: 5
     }
   })) : /*#__PURE__*/React__default.createElement(EyeIcon, _extends({}, props, {
@@ -21593,7 +21654,7 @@ const IconStateFull = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 125,
+      lineNumber: 126,
       columnNumber: 5
     }
   }));
@@ -21628,7 +21689,8 @@ const Upload = ({
   resKey,
   ratio,
   disabled,
-  errorMessage
+  errorMessage,
+  maxSizeMB
 }) => {
   const isFile = listType === 'file';
   const imgRef = useRef(null);
@@ -21911,14 +21973,24 @@ 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 => {
-        const file = new File([blob], fileState === null || fileState === void 0 ? void 0 : fileState.name, {
-          type: blob.type
-        });
-        handleUpload([file]);
-        setCrop(null);
-        setCompletedCrop(null);
+        imageCompression(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();
@@ -22047,7 +22119,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 558,
+        lineNumber: 572,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -22057,7 +22129,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 559,
+        lineNumber: 573,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
@@ -22073,7 +22145,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 569,
+            lineNumber: 583,
             columnNumber: 16
           }
         });
@@ -22085,7 +22157,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 572,
+          lineNumber: 586,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -22095,7 +22167,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 573,
+          lineNumber: 587,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22104,7 +22176,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 574,
+          lineNumber: 588,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -22117,7 +22189,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 575,
+          lineNumber: 589,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22126,7 +22198,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 583,
+          lineNumber: 597,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -22136,7 +22208,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 585,
+          lineNumber: 599,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -22155,7 +22227,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 596,
+            lineNumber: 610,
             columnNumber: 16
           }
         });
@@ -22166,7 +22238,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 599,
+          lineNumber: 613,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -22176,7 +22248,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 600,
+          lineNumber: 614,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22185,7 +22257,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 601,
+          lineNumber: 615,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -22198,7 +22270,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 602,
+          lineNumber: 616,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22208,14 +22280,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 610,
+          lineNumber: 624,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__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.createElement(Tooltip$1, {
@@ -22223,7 +22295,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 612,
+          lineNumber: 626,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -22238,7 +22310,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 613,
+          lineNumber: 627,
           columnNumber: 19
         }
       }, item.name)))), /*#__PURE__*/React__default.createElement(Box, {
@@ -22251,7 +22323,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 628,
+          lineNumber: 642,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22260,7 +22332,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 636,
+          lineNumber: 650,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -22268,7 +22340,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 638,
+          lineNumber: 652,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -22284,7 +22356,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 649,
+        lineNumber: 663,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22298,7 +22370,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 650,
+        lineNumber: 664,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -22324,7 +22396,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 651,
+        lineNumber: 665,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -22332,14 +22404,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 664,
+        lineNumber: 678,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 665,
+        lineNumber: 679,
         columnNumber: 11
       }
     }, "Berkas sedang diunggah")));
@@ -22352,7 +22424,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 673,
+        lineNumber: 687,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -22368,7 +22440,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 674,
+        lineNumber: 688,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -22380,21 +22452,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 685,
+        lineNumber: 699,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 686,
+        lineNumber: 700,
         columnNumber: 11
       }
     }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 688,
+        lineNumber: 702,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -22403,7 +22475,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 689,
+        lineNumber: 703,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -22411,7 +22483,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 690,
+        lineNumber: 704,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -22421,14 +22493,14 @@ const Upload = ({
       __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.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 699,
+        lineNumber: 713,
         columnNumber: 19
       }
     }, error));
@@ -22439,7 +22511,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 706,
+        lineNumber: 720,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -22447,7 +22519,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 707,
+        lineNumber: 721,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -22455,7 +22527,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 708,
+        lineNumber: 722,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -22468,7 +22540,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 710,
+        lineNumber: 724,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -22480,7 +22552,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 713,
+        lineNumber: 727,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -22491,7 +22563,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 714,
+        lineNumber: 728,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -22505,14 +22577,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 715,
+        lineNumber: 729,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 718,
+        lineNumber: 732,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22524,7 +22596,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 719,
+        lineNumber: 733,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -22532,7 +22604,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 720,
+        lineNumber: 734,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -22544,7 +22616,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 721,
+        lineNumber: 735,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22552,7 +22624,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 727,
+        lineNumber: 741,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$3, {
@@ -22561,7 +22633,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 728,
+        lineNumber: 742,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$3, {
@@ -22569,7 +22641,7 @@ const Upload = ({
       __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'}`)))));
@@ -22585,7 +22657,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 742,
+      lineNumber: 756,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -22594,7 +22666,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 745,
+      lineNumber: 759,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -22611,7 +22683,8 @@ Upload.defaultProps = {
   reqKey: 'file',
   resKey: 'url',
   ratio: 16 / 9,
-  disabled: false
+  disabled: false,
+  maxSizeMB: 1
 };
 Upload.propTypes = {
   /**
@@ -22682,6 +22755,11 @@ Upload.propTypes = {
    */
   max: PropTypes.number,
 
+  /**
+   Limit the maximum image size in MB.
+   */
+  maxSizeMB: PropTypes.number,
+
   /**
    Limit file type of upload.
    */
@@ -27476,7 +27554,6 @@ const VariantItem = styled('p', {
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  maxWidth: 60,
   textAlign: 'center',
   margin: 0,
   '@md': {
@@ -27638,21 +27715,87 @@ function EditableTable(props) {
     emptyDataMessage,
     rowHeight,
     align,
-    customRows
+    customRows,
+    showCheckbox,
+    onSelectedChange,
+    getCheckboxProps,
+    keyId = 'id',
+    selectedIds
   } = props;
+  const [selectedIndex, setSelectedIndex] = useState(null);
+
+  const IndeterminateCheckbox = props => {
+    function handleCheckedChange(checked) {
+      props === null || props === void 0 ? void 0 : props.onChange({
+        target: {
+          checked
+        }
+      });
+      setSelectedIndex(Object.assign({}, props));
+    }
+
+    return jsx(InputCheckbox, Object.assign({}, props, getCheckboxProps === null || getCheckboxProps === void 0 ? void 0 : getCheckboxProps(props === null || props === void 0 ? void 0 : props.row), {
+      onCheckedChange: handleCheckedChange
+    }), void 0);
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+
+    if (selectedIds) {
+      Object.assign(initialState, {
+        selectedRowIds: selectedIds
+      });
+    }
+
+    return Object.keys(initialState).length > 0 ? initialState : undefined;
+  };
+
   const instance = useTable({
     columns,
     data,
-    autoResetExpanded: false
-  }, useExpanded);
+    initialState: getInitialState(),
+    autoResetExpanded: false,
+    getRowId: row => row[keyId] || JSON.stringify(row)
+  }, useExpanded, useRowSelect, hooks => {
+    showCheckbox && hooks.visibleColumns.push(columns => {
+      return [{
+        id: 'selection',
+        Header: ({
+          getToggleAllRowsSelectedProps
+        }) => jsx(IndeterminateCheckbox, Object.assign({
+          index: "header"
+        }, getToggleAllRowsSelectedProps()), void 0),
+        Cell: ({
+          row
+        }) => jsx(IndeterminateCheckbox, Object.assign({
+          row: row
+        }, row.getToggleRowSelectedProps()), void 0),
+        width: 30
+      }, ...columns];
+    });
+  });
   const {
     getTableProps,
     getTableBodyProps,
     headerGroups,
     rows,
     prepareRow,
-    visibleColumns
+    visibleColumns,
+    state: {
+      selectedRowIds
+    }
   } = instance;
+  useEffect(() => {
+    if (data && data.length > 0 && selectedRowIds && onSelectedChange && selectedIndex) {
+      const selected = selectedRowIds ? Object.keys(selectedRowIds) : [];
+      onSelectedChange({
+        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]);
   const isDesktop = useMediaQuery('(min-width: 767px)');
   return isDesktop ? jsx(TableContainer$1, Object.assign({
     css: props === null || props === void 0 ? void 0 : props.css
@@ -29974,6 +30117,31 @@ const Container = styled('div', {
     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,
@@ -29981,6 +30149,9 @@ const Container = styled('div', {
     padding: '$spacing-05',
     height: 400
   },
+  '& > .wrapper-root > .editor-root > div > div > div > div > div > .public-DraftStyleDefault-ltr': {
+    textAlign: 'unset !important'
+  },
   variants: {
     editorHeight: seqNumberVariants(value => ({
       '& > .wrapper-root > .editor-root': {