@majoo-ui/react 1.52.3 → 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.
    */
@@ -26349,22 +26397,14 @@ const Navigation = props => {
           lineNumber: 119,
           columnNumber: 30
         }
-      }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) === null || _data$title === void 0 ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.withTolltip) && ((_data3 = data[i - 1]) !== null && _data3 !== void 0 && _data3.comingSoon ? /*#__PURE__*/React__default.createElement(Flex$1, {
+      }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) === null || _data$title === void 0 ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
         align: "center",
+        label: (_data3 = data[i - 1]) === null || _data3 === void 0 ? void 0 : _data3.tooltipsContents,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 123,
-          columnNumber: 19
-        }
-      }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
-        align: "center",
-        label: (_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.tooltipsContents,
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$4,
-          lineNumber: 124,
-          columnNumber: 21
+          lineNumber: 122,
+          columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
         css: {
@@ -26375,40 +26415,30 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 125,
-          columnNumber: 23
+          lineNumber: 123,
+          columnNumber: 19
         }
-      })), /*#__PURE__*/React__default.createElement(Tag, {
-        size: "lg",
-        type: "error",
+      })), ((_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
+        css: {
+          marginLeft: (_data5 = data[i - 1]) !== null && _data5 !== void 0 && _data5.withTolltip ? 0 : '$spacing-03'
+        },
+        align: "center",
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
           lineNumber: 127,
-          columnNumber: 21
+          columnNumber: 17
         }
-      }, "Coming Soon")) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
-        align: "center",
-        label: (_data5 = data[i - 1]) === null || _data5 === void 0 ? void 0 : _data5.tooltipsContents,
+      }, /*#__PURE__*/React__default.createElement(Tag, {
+        size: "lg",
+        type: "error",
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 132,
+          lineNumber: 128,
           columnNumber: 19
         }
-      }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
-        css: {
-          margin: '0 9px'
-        },
-        size: "20",
-        color: colors$4.iconSecondary,
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$4,
-          lineNumber: 133,
-          columnNumber: 21
-        }
-      }))))) : stepItems.push( /*#__PURE__*/React__default.createElement(Flex$1, {
+      }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default.createElement(Flex$1, {
         justify: "center",
         align: "center",
         direction: "column",
@@ -26422,7 +26452,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 139,
+          lineNumber: 136,
           columnNumber: 13
         }
       }, isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -26431,7 +26461,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 151,
+          lineNumber: 148,
           columnNumber: 30
         }
       }), !isComplete && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -26447,7 +26477,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 153,
+          lineNumber: 150,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -26457,29 +26487,18 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 165,
+          lineNumber: 162,
           columnNumber: 15
         }
-      }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.withTolltip) && (isActive && (_data9 = data[i - 1]) !== null && _data9 !== void 0 && _data9.comingSoon ? /*#__PURE__*/React__default.createElement(Flex$1, {
-        align: "center",
-        justify: "center",
-        gap: 3,
-        direction: "column",
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$4,
-          lineNumber: 171,
-          columnNumber: 19
-        }
-      }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
+      }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
         align: "center",
         withClick: true,
-        label: (_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.tooltipsContents,
+        label: (_data9 = data[i - 1]) === null || _data9 === void 0 ? void 0 : _data9.tooltipsContents,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 172,
-          columnNumber: 21
+          lineNumber: 166,
+          columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
         size: "20",
@@ -26487,38 +26506,31 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 173,
-          columnNumber: 23
-        }
-      })), /*#__PURE__*/React__default.createElement(Tag, {
-        size: "lg",
-        type: "error",
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$4,
-          lineNumber: 175,
-          columnNumber: 21
+          lineNumber: 167,
+          columnNumber: 19
         }
-      }, "Coming Soon")) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
+      })), isActive && ((_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
         align: "center",
-        withClick: true,
-        label: (_data11 = data[i - 1]) === null || _data11 === void 0 ? void 0 : _data11.tooltipsContents,
+        justify: "center",
+        css: {
+          marginTop: (_data11 = data[i - 1]) !== null && _data11 !== void 0 && _data11.withTolltip ? 0 : '$spacing-03'
+        },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 180,
-          columnNumber: 19
+          lineNumber: 171,
+          columnNumber: 17
         }
-      }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
-        size: "20",
-        color: colors$4.iconSecondary,
+      }, /*#__PURE__*/React__default.createElement(Tag, {
+        size: "lg",
+        type: "error",
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 181,
-          columnNumber: 21
+          lineNumber: 172,
+          columnNumber: 19
         }
-      })))));
+      }, "Coming Soon"))));
     }
   }
 
@@ -26537,7 +26549,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 189,
+      lineNumber: 182,
       columnNumber: 5
     }
   }, isMobile ? /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -26549,7 +26561,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 205,
+      lineNumber: 198,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -26562,7 +26574,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 206,
+      lineNumber: 199,
       columnNumber: 11
     }
   }, stepItems)) : stepItems);
@@ -26663,7 +26675,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 303,
+      lineNumber: 296,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
@@ -26685,7 +26697,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 304,
+      lineNumber: 297,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -26697,7 +26709,7 @@ const Default = props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 326,
+        lineNumber: 319,
         columnNumber: 16
       }
     }),
@@ -26707,7 +26719,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 321,
+      lineNumber: 314,
       columnNumber: 9
     }
   }), props.children)));
@@ -30010,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,
@@ -30017,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': {