@majoo-ui/react 1.42.1 → 1.42.2

package/index.umd.js

@@ -1124,7 +1124,8 @@
       lineHeights: Object.assign({}, core.foundations.lineHeights),
       letterSpacings: Object.assign({}, core.foundations.letterSpacings),
       radii: Object.assign({}, core.foundations.radii),
-      sizes: Object.assign({}, core.foundations.sizes)
+      sizes: Object.assign({}, core.foundations.sizes),
+      zIndices: Object.assign({}, core.foundations.zIndices)
     },
     media: {
       sm: '(min-width: 359px)',
@@ -2589,10 +2590,25 @@
           overflow: 'hidden',
           whiteSpace: 'nowrap'
         }
+      },
+      align: {
+        justify: {
+          textAlign: 'justify'
+        },
+        center: {
+          textAlign: 'center'
+        },
+        right: {
+          textAlign: 'right'
+        },
+        left: {
+          textAlign: 'left'
+        }
       }
     },
     defaultVariants: {
-      as: 'p'
+      as: 'p',
+      align: 'left'
     }
   });
   const TextVariantsEnum = ['link', 'contentButton', 'placeholder', 'breadcrumb', 'label', 'status', 'helper', 'caption'];
@@ -2701,7 +2717,13 @@
           letterSpacing: '$long-content-regular',
           fontWeight: '400'
         }
-      }
+      },
+      maxLine: seqNumberVariants(value => ({
+        '-webkit-line-clamp': `${value}`,
+        display: '-webkit-box',
+        '-webkit-box-orient': 'vertical',
+        overflow: 'hidden'
+      }), 10, true)
     },
     defaultVariants: {
       paragraph: 'shortContentRegular',
@@ -9266,6 +9288,9 @@
 
   const _excluded$g = ["children"];
   var _jsxFileName$B = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/popover/Popover.js";
+  const {
+    zIndices
+  } = core.foundations;
   const PopoverContext = /*#__PURE__*/React.createContext();
   const Popover = ({
     children,
@@ -9303,7 +9328,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 42,
+        lineNumber: 44,
         columnNumber: 10
       }
     }, children);
@@ -9345,7 +9370,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 60,
+        lineNumber: 62,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", _extends({}, getFloatingProps({
@@ -9354,13 +9379,13 @@
         position: strategy,
         top: isMobile ? 0 : y != null ? y : '',
         left: isMobile ? 0 : x != null ? x : '',
-        zIndex: 50
+        zIndex: zIndices.popover
       }, style)
     }), {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 61,
+        lineNumber: 63,
         columnNumber: 7
       }
     }), children)) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
@@ -9382,7 +9407,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 84,
+        lineNumber: 86,
         columnNumber: 5
       }
     }), children);
@@ -10732,7 +10757,7 @@
     bottom: 0,
     left: 0,
     backgroundColor: '$bgDimmer',
-    zIndex: 10000,
+    zIndex: '$overlay',
     '&[data-state="open"]': {
       animation: `${fadeIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`
     },
@@ -10793,7 +10818,7 @@
     top: 0,
     bottom: 0,
     width: '100%',
-    zIndex: 10000,
+    zIndex: '$modal',
     display: 'flex',
     flexDirection: 'column',
     maxHeight: '100vh',
@@ -14709,7 +14734,7 @@
       justify: "center",
       align: "center",
       css: {
-        zIndex: 10,
+        zIndex: '$docked',
         position: 'absolute',
         inset: 0,
         top: isMobile ? 40 : 64,
@@ -15821,10 +15846,21 @@
 
   var _jsxFileName$f = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/table/components/columns/RowMenuColumn.js";
 
-  const rowMenuColumn = (options, icon) => ({
+  const rowMenuColumn = (options, icon, config) => ({
     id: 'menu',
     Header: () => null,
     Cell: props => {
+      const defaultConfig = {
+        mobileTitle: 'Aksi',
+        cssContent: {},
+        cssMenuItem: {}
+      };
+      const currentConfig = Object.assign({}, defaultConfig, config);
+      const {
+        mobileTitle,
+        cssContent,
+        cssMenuItem
+      } = currentConfig;
       const [openModal, setOpenModal] = React.useState(false);
       const [openDrop, setOpenDrop] = React.useState(false);
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DropdownMenu, {
@@ -15834,7 +15870,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 27,
+          lineNumber: 34,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuTrigger, {
@@ -15842,7 +15878,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 28,
+          lineNumber: 35,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -15855,7 +15891,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 29,
+          lineNumber: 36,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -15863,19 +15899,20 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 30,
+          lineNumber: 37,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 30,
+          lineNumber: 37,
           columnNumber: 70
         }
       })))), /*#__PURE__*/React__default["default"].createElement(DropdownMenuContent, {
         onInteractOutside: () => setOpenDrop(false),
-        css: {
+        css: Object.assign({
+          width: 'auto',
           color: '$textPrimary',
           padding: '12px 16px',
           '& > div': {
@@ -15887,11 +15924,11 @@
           '& > *:last-child': {
             display: 'none'
           }
-        },
+        }, cssContent),
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 33,
+          lineNumber: 40,
           columnNumber: 11
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -15899,7 +15936,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 50,
+          lineNumber: 59,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
@@ -15907,10 +15944,11 @@
           setOpenDrop(false);
           option.onClick(props);
         },
+        css: cssMenuItem,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 51,
+          lineNumber: 60,
           columnNumber: 17
         }
       }, option.title), /*#__PURE__*/React__default["default"].createElement(DropdownMenuSeparator, {
@@ -15921,7 +15959,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 59,
+          lineNumber: 69,
           columnNumber: 17
         }
       }))))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
@@ -15930,10 +15968,11 @@
         modal: true,
         open: openModal,
         onOpenChange: setOpenModal,
+        width: "100%",
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 64,
+          lineNumber: 74,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -15941,7 +15980,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 65,
+          lineNumber: 75,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -15954,38 +15993,38 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 66,
+          lineNumber: 76,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 67,
+          lineNumber: 77,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 67,
+          lineNumber: 77,
           columnNumber: 36
         }
       })))), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 70,
+          lineNumber: 80,
           columnNumber: 11
         }
-      }, "Aksi"), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
+      }, mobileTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
         css: {
           padding: '20px 16px'
         },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 71,
+          lineNumber: 81,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -16000,7 +16039,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 72,
+          lineNumber: 82,
           columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -16008,7 +16047,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 74,
+          lineNumber: 84,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -16021,7 +16060,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 75,
+          lineNumber: 85,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -16030,7 +16069,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 83,
+          lineNumber: 93,
           columnNumber: 21
         }
       }, option.title)), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -16038,7 +16077,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 87,
+          lineNumber: 97,
           columnNumber: 19
         }
       })))))));
@@ -16245,7 +16284,8 @@
       }
     }))), /*#__PURE__*/React__default["default"].createElement(DialogTitle, {
       css: {
-        margin: 0
+        margin: 0,
+        zIndex: isMobile ? 1 : 'unset'
       },
       __self: undefined,
       __source: {
@@ -16337,13 +16377,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 136,
+        lineNumber: 138,
         columnNumber: 15
       }
     }))))));
   };
   PageDialog.defaultProps = {
-    size: 'full'
+    size: 'full',
+    layer: '$modal'
   };
 
   const _excluded$2 = ["children"];
@@ -19169,20 +19210,22 @@
     max,
     replaceLabel,
     width,
-    height
+    height,
+    css
   }) => {
     const isFile = listType === 'file';
     const hiddenFileInput = React.useRef(null);
     const indexReplace = React.useRef(null);
+    const [dragActive, setDragActive] = React.useState(false);
     const [errorMessage, setErrorMessage] = React.useState(null);
-    const defaultSize = 200;
     const ContainerUpload = styled('div', {
       border: '2px dashed $gray300',
       borderRadius: 8,
-      height: height != null ? height : defaultSize,
-      width: width != null ? width : defaultSize,
+      height: height,
+      width: width,
       cursor: 'pointer',
       transition: '0.2s',
+      transitionDuration: '0.5s',
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
@@ -19204,25 +19247,44 @@
           true: {
             display: 'none !important'
           }
+        },
+        focus: {
+          true: {
+            height: height + 16,
+            width: width + 16
+          }
+        }
+      }
+    });
+    const FocusArea = styled('div', {
+      transition: '0.2s',
+      transitionDuration: '0.5s',
+      variants: {
+        focus: {
+          true: {
+            border: '2px solid $borderFocus',
+            padding: 8,
+            borderRadius: 8
+          }
         }
       }
     });
     const Container = styled('div', {
-      height: height != null ? height : defaultSize,
-      width: width != null ? width : defaultSize,
+      height: height,
+      width: width,
       background: '$white',
       borderRadius: 8
     });
     const Image = styled('img', {
       borderRadius: 8,
-      width: width != null ? width : defaultSize,
-      height: height ? height - 36 : defaultSize - 36,
+      width: width,
+      height: height - 36,
       objectFit: 'cover'
     });
     const Blank = styled('div', {
       borderRadius: 8,
-      width: width != null ? width : defaultSize,
-      height: height ? height - 36 : defaultSize - 36,
+      width: width,
+      height: height - 36,
       background: 'rgba(39, 42, 42, 0.6);'
     });
 
@@ -19291,6 +19353,40 @@
       }
     }
 
+    function handleDragEnter(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragActive(true);
+    }
+
+    function handleDragLeave(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragActive(false);
+    }
+
+    function handleDragOver(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    function handleDrop(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragActive(false);
+      const {
+        files
+      } = e.dataTransfer;
+
+      if (files && files.length) {
+        handleChange({
+          target: {
+            files
+          }
+        });
+      }
+    }
+
     function renderButtonReplace(index) {
       return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
         justify: "center",
@@ -19301,7 +19397,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 240,
+          lineNumber: 283,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -19310,7 +19406,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 241,
+          lineNumber: 284,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -19323,7 +19419,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 251,
+            lineNumber: 294,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -19333,7 +19429,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 252,
+            lineNumber: 295,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -19342,7 +19438,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 253,
+            lineNumber: 296,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -19355,7 +19451,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 254,
+            lineNumber: 297,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -19364,7 +19460,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 262,
+            lineNumber: 305,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -19372,7 +19468,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 264,
+            lineNumber: 307,
             columnNumber: 13
           }
         })), renderButtonReplace(index));
@@ -19386,7 +19482,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 275,
+            lineNumber: 318,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -19396,7 +19492,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 276,
+            lineNumber: 319,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -19405,7 +19501,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 277,
+            lineNumber: 320,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -19418,7 +19514,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 278,
+            lineNumber: 321,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -19428,7 +19524,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 286,
+            lineNumber: 329,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(CheckIcon, {
@@ -19436,7 +19532,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 287,
+            lineNumber: 330,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -19450,14 +19546,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 288,
+            lineNumber: 331,
             columnNumber: 17
           }
         }, item.name))), /*#__PURE__*/React__default["default"].createElement(Blank, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 301,
+            lineNumber: 344,
             columnNumber: 13
           }
         })), renderButtonReplace(index));
@@ -19465,21 +19561,28 @@
     };
 
     function renderUpload() {
-      return /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      return /*#__PURE__*/React__default["default"].createElement(FocusArea, {
+        focus: dragActive,
+        css: css,
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 311,
+          lineNumber: 354,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
         hidden: max ? fileList.length >= max ? true : false : false,
         showError: errorMessage !== null,
         onClick: handleClick,
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        focus: dragActive,
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 312,
+          lineNumber: 355,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$1, {
@@ -19490,49 +19593,49 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 317,
+          lineNumber: 365,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 318,
+          lineNumber: 366,
           columnNumber: 11
         }
       }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 320,
+          lineNumber: 368,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 321,
+          lineNumber: 369,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 322,
+          lineNumber: 370,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 324,
+          lineNumber: 372,
           columnNumber: 17
         }
       }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} anda disini`)))), errorMessage && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 329,
+          lineNumber: 377,
           columnNumber: 26
         }
       }, errorMessage));
@@ -19548,7 +19651,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 335,
+        lineNumber: 383,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), renderUpload());
@@ -19556,7 +19659,9 @@
 
   Upload.defaultProps = {
     listType: 'file',
-    fileList: []
+    fileList: [],
+    height: 200,
+    width: 200
   };
   Upload.propType = {
     listType: PropTypes__default["default"].oneOf(['file', 'picture']),
@@ -19569,7 +19674,8 @@
     max: PropTypes__default["default"].number,
     replaceLabel: PropTypes__default["default"].string,
     width: PropTypes__default["default"].number,
-    height: PropTypes__default["default"].number
+    height: PropTypes__default["default"].number,
+    css: PropTypes__default["default"].object
   };
   Upload.displayName = 'Upload';
 
@@ -22682,6 +22788,10 @@
       cssNav,
       isHide
     } = React__default["default"].useContext(StepWizardContext);
+    const mobileHidden = isMobile && isHide && {
+      height: 'unset',
+      margin: 'unset'
+    };
     const stepItems = [];
     const height = props.totalSteps * 24 + (props.totalSteps - 1) * 16;
 
@@ -22707,7 +22817,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 88,
+            lineNumber: 93,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Span, {
@@ -22717,7 +22827,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 101,
+            lineNumber: 106,
             columnNumber: 15
           }
         }), isComplete && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -22729,7 +22839,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 102,
+            lineNumber: 107,
             columnNumber: 30
           }
         }), data[i - 1].title, ((_data = data[i - 1]) === null || _data === void 0 ? void 0 : _data.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip, {
@@ -22738,7 +22848,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 105,
+            lineNumber: 110,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -22750,7 +22860,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 106,
+            lineNumber: 111,
             columnNumber: 19
           }
         })))) : stepItems.push( /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22767,7 +22877,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 112,
+            lineNumber: 117,
             columnNumber: 13
           }
         }, isComplete && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -22776,7 +22886,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 124,
+            lineNumber: 129,
             columnNumber: 30
           }
         }), !isComplete && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22792,7 +22902,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 126,
+            lineNumber: 131,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -22802,7 +22912,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 138,
+            lineNumber: 143,
             columnNumber: 15
           }
         }, isActive ? data[i - 1].title : ''), isActive && ((_data3 = data[i - 1]) === null || _data3 === void 0 ? void 0 : _data3.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip, {
@@ -22812,7 +22922,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 140,
+            lineNumber: 145,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -22821,7 +22931,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 141,
+            lineNumber: 146,
             columnNumber: 19
           }
         }))));
@@ -22832,17 +22942,16 @@
       css: Object.assign({
         borderLeft: !isMobile ? '4px solid $bgBorder' : undefined,
         marginBottom: isMobile ? 65 : undefined,
-        height: !isMobile ? height : undefined
-      }, cssNav, {
+        height: !isMobile ? height : undefined,
         opacity: isHide ? 0 : undefined
-      }),
+      }, cssNav, mobileHidden),
       gap: 5,
       justify: isMobile ? 'center' : undefined,
       direction: isMobile ? 'row' : 'column',
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 149,
+        lineNumber: 154,
         columnNumber: 5
       }
     }, isMobile ? /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -22854,7 +22963,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 162,
+        lineNumber: 168,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22867,12 +22976,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 163,
+        lineNumber: 169,
         columnNumber: 11
       }
     }, stepItems)) : stepItems);
   };
   const Default = props => {
+    var _props$children, _props$children2;
+
     const [state, updateState] = React__default["default"].useState(Object.assign({
       isComplete: [],
       hide: false
@@ -22925,11 +23036,24 @@
       }));
     };
 
+    const WrapperBox = props => {
+      return /*#__PURE__*/React__default["default"].createElement(Box$1, {
+        id: "content-container",
+        css: props.css,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 232,
+          columnNumber: 7
+        }
+      }, /*#__PURE__*/React__default["default"].cloneElement(props.children, props));
+    };
+
     return /*#__PURE__*/React__default["default"].createElement(WrapperDiv, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 225,
+        lineNumber: 238,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
@@ -22950,7 +23074,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 226,
+        lineNumber: 239,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Stepper, _extends({}, props, {
@@ -22962,7 +23086,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 247,
+          lineNumber: 260,
           columnNumber: 16
         }
       }),
@@ -22970,10 +23094,27 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 242,
+        lineNumber: 255,
         columnNumber: 9
       }
-    }), props.children)));
+    }), ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.length) > 1 ? (_props$children2 = props.children) === null || _props$children2 === void 0 ? void 0 : _props$children2.map((child, idx) => /*#__PURE__*/React__default["default"].createElement(WrapperBox, {
+      key: idx,
+      css: props.cssContent,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 265,
+        columnNumber: 15
+      }
+    }, child)) : /*#__PURE__*/React__default["default"].createElement(WrapperBox, {
+      css: props.cssContent,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 270,
+        columnNumber: 13
+      }
+    }, props.children))));
   };
 
   var StepWizard = function StepWizard(props) {
@@ -23031,7 +23172,9 @@
   const DesktopContainer = styled(Flex$1, {
     display: 'none',
     '& .active-scroll-spy': {
-      borderLeft: '4px solid #04c99e !important',
+      borderLeft: '4px solid #04c99e !important'
+    },
+    '& .active-scroll-spy .link-title': {
       color: '#04c99e !important'
     },
     '@md': {
@@ -23045,8 +23188,11 @@
     padding: '8px 8px',
     width: '100%',
     transition: '0.4s max-height',
+    position: 'relative',
     '& .active-scroll-spy': {
-      borderLeft: '4px solid #04c99e !important',
+      borderLeft: '4px solid #04c99e !important'
+    },
+    '& .active-scroll-spy .link-title': {
       color: '#04c99e !important'
     },
     '@md': {
@@ -23062,12 +23208,6 @@
   const List = styled('li', {
     '&:not(:last-child)': {
       marginBottom: 20
-    },
-    '&:first-child': {
-      marginTop: -4
-    },
-    '&:last-child': {
-      marginBottom: -4
     }
   });
   const Title = styled('a', {
@@ -23137,7 +23277,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 98,
+        lineNumber: 99,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator, {
@@ -23145,7 +23285,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 99,
+        lineNumber: 100,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(ListWrap, {
@@ -23155,7 +23295,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 100,
+        lineNumber: 101,
         columnNumber: 7
       }
     }, (_getDatasets = getDatasets(content, activeId, isCollapse)) === null || _getDatasets === void 0 ? void 0 : _getDatasets.map((item, index) => {
@@ -23164,7 +23304,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
-          lineNumber: 103,
+          lineNumber: 104,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -23172,15 +23312,22 @@
         gap: 5,
         align: "center",
         css: {
+          marginLeft: '-4px !important',
+          borderLeftWidth: '4px !important',
+          borderLeftStyle: 'solid !important',
+          borderLeftColor: 'transparent !important',
+          paddingLeft: '16px !important',
           minHeight: 25
         },
+        "data-to-scrollspy-id": item === null || item === void 0 ? void 0 : item.id,
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
-          lineNumber: 104,
+          lineNumber: 105,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(Title, {
+        className: "link-title",
         active: (item === null || item === void 0 ? void 0 : item.id) === activeId,
         href: `#${item === null || item === void 0 ? void 0 : item.id}`,
         onClick: e => {
@@ -23208,25 +23355,10 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
-          lineNumber: 105,
+          lineNumber: 119,
           columnNumber: 17
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
-        css: {
-          marginLeft: '-4px !important',
-          borderLeftWidth: '4px !important',
-          borderLeftStyle: 'solid !important',
-          borderLeftColor: 'transparent !important',
-          paddingLeft: '16px !important'
-        },
-        "data-to-scrollspy-id": item === null || item === void 0 ? void 0 : item.id,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 126,
-          columnNumber: 19
-        }
-      }, item === null || item === void 0 ? void 0 : item.title)), item === null || item === void 0 ? void 0 : item.icon));
+      }, item === null || item === void 0 ? void 0 : item.title), item === null || item === void 0 ? void 0 : item.icon));
     })));
   }
 
@@ -23252,7 +23384,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 157,
+        lineNumber: 161,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content, {
@@ -23263,26 +23395,48 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 158,
+        lineNumber: 162,
         columnNumber: 7
       }
-    }), /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
+    }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      css: {
+        position: 'absolute',
+        top: 8,
+        right: 8
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 163,
+        columnNumber: 7
+      }
+    }, mobileCollapse ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
       style: {
         cursor: 'pointer'
       },
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 159,
-        columnNumber: 7
+        lineNumber: 165,
+        columnNumber: 11
+      }
+    }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
+      style: {
+        cursor: 'pointer'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 167,
+        columnNumber: 11
       }
-    })) : /*#__PURE__*/React__default["default"].createElement(DesktopContainer, {
+    }))) : /*#__PURE__*/React__default["default"].createElement(DesktopContainer, {
       direction: "row",
       css: css,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 162,
+        lineNumber: 172,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content, {
@@ -23292,7 +23446,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 163,
+        lineNumber: 173,
         columnNumber: 7
       }
     }));