@majoo-ui/react 1.52.4 → 1.52.5

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";
@@ -10554,6 +10555,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 +10624,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 +10641,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 +10675,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 +10683,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 +10696,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 +10704,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);
@@ -21404,7 +21425,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 +21434,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 +21449,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 +21479,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 +21614,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 +21624,7 @@ const IconStateFull = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 125,
+      lineNumber: 126,
       columnNumber: 5
     }
   }));
@@ -21628,7 +21659,8 @@ const Upload = ({
   resKey,
   ratio,
   disabled,
-  errorMessage
+  errorMessage,
+  maxSizeMB
 }) => {
   const isFile = listType === 'file';
   const imgRef = useRef(null);
@@ -21911,14 +21943,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 +22089,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 558,
+        lineNumber: 572,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -22057,7 +22099,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 559,
+        lineNumber: 573,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
@@ -22073,7 +22115,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 569,
+            lineNumber: 583,
             columnNumber: 16
           }
         });
@@ -22085,7 +22127,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 572,
+          lineNumber: 586,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -22095,7 +22137,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 573,
+          lineNumber: 587,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22104,7 +22146,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 574,
+          lineNumber: 588,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -22117,7 +22159,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 575,
+          lineNumber: 589,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22126,7 +22168,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 583,
+          lineNumber: 597,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -22136,7 +22178,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 585,
+          lineNumber: 599,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -22155,7 +22197,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 596,
+            lineNumber: 610,
             columnNumber: 16
           }
         });
@@ -22166,7 +22208,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 599,
+          lineNumber: 613,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -22176,7 +22218,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 600,
+          lineNumber: 614,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22185,7 +22227,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 601,
+          lineNumber: 615,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -22198,7 +22240,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 602,
+          lineNumber: 616,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22208,14 +22250,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 +22265,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 612,
+          lineNumber: 626,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -22238,7 +22280,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 613,
+          lineNumber: 627,
           columnNumber: 19
         }
       }, item.name)))), /*#__PURE__*/React__default.createElement(Box, {
@@ -22251,7 +22293,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 628,
+          lineNumber: 642,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22260,7 +22302,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 636,
+          lineNumber: 650,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -22268,7 +22310,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 638,
+          lineNumber: 652,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -22284,7 +22326,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 649,
+        lineNumber: 663,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22298,7 +22340,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 650,
+        lineNumber: 664,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -22324,7 +22366,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 651,
+        lineNumber: 665,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -22332,14 +22374,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 +22394,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 673,
+        lineNumber: 687,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -22368,7 +22410,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 674,
+        lineNumber: 688,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -22380,21 +22422,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 +22445,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 689,
+        lineNumber: 703,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -22411,7 +22453,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 690,
+        lineNumber: 704,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -22421,14 +22463,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 +22481,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 706,
+        lineNumber: 720,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -22447,7 +22489,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 707,
+        lineNumber: 721,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -22455,7 +22497,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 708,
+        lineNumber: 722,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -22468,7 +22510,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 710,
+        lineNumber: 724,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -22480,7 +22522,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 713,
+        lineNumber: 727,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -22491,7 +22533,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 714,
+        lineNumber: 728,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -22505,14 +22547,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 +22566,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 719,
+        lineNumber: 733,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -22532,7 +22574,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 720,
+        lineNumber: 734,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -22544,7 +22586,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 721,
+        lineNumber: 735,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22552,7 +22594,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 727,
+        lineNumber: 741,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$3, {
@@ -22561,7 +22603,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 728,
+        lineNumber: 742,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$3, {
@@ -22569,7 +22611,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 +22627,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 +22636,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 745,
+      lineNumber: 759,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -22611,7 +22653,8 @@ Upload.defaultProps = {
   reqKey: 'file',
   resKey: 'url',
   ratio: 16 / 9,
-  disabled: false
+  disabled: false,
+  maxSizeMB: 1
 };
 Upload.propTypes = {
   /**
@@ -22682,6 +22725,11 @@ Upload.propTypes = {
    */
   max: PropTypes.number,
 
+  /**
+   Limit the maximum image size in MB.
+   */
+  maxSizeMB: PropTypes.number,
+
   /**
    Limit file type of upload.
    */
@@ -29974,6 +30022,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 +30054,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': {