@majoo-ui/react 1.42.1 → 1.42.2

package/index.esm.js

@@ -1108,7 +1108,8 @@ const {
     lineHeights: Object.assign({}, foundations.lineHeights),
     letterSpacings: Object.assign({}, foundations.letterSpacings),
     radii: Object.assign({}, foundations.radii),
-    sizes: Object.assign({}, foundations.sizes)
+    sizes: Object.assign({}, foundations.sizes),
+    zIndices: Object.assign({}, foundations.zIndices)
   },
   media: {
     sm: '(min-width: 359px)',
@@ -2573,10 +2574,25 @@ const Text$1 = styled('p', {
         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'];
@@ -2685,7 +2701,13 @@ const Paragraph = styled(Text$1, {
         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',
@@ -9201,6 +9223,9 @@ function InputResourceList({
 
 const _excluded$g = ["children"];
 var _jsxFileName$B = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/popover/Popover.js";
+const {
+  zIndices
+} = foundations;
 const PopoverContext = /*#__PURE__*/createContext();
 const Popover = ({
   children,
@@ -9238,7 +9263,7 @@ const Popover = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$B,
-      lineNumber: 42,
+      lineNumber: 44,
       columnNumber: 10
     }
   }, children);
@@ -9280,7 +9305,7 @@ const PopoverContent = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$B,
-      lineNumber: 60,
+      lineNumber: 62,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement("div", _extends({}, getFloatingProps({
@@ -9289,13 +9314,13 @@ const PopoverContent = ({
       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.createElement(React__default.Fragment, null);
@@ -9317,7 +9342,7 @@ const PopoverClose = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$B,
-      lineNumber: 84,
+      lineNumber: 86,
       columnNumber: 5
     }
   }), children);
@@ -10667,7 +10692,7 @@ const StyledOverlay$2 = styled(DialogPrimitive.Overlay, {
   bottom: 0,
   left: 0,
   backgroundColor: '$bgDimmer',
-  zIndex: 10000,
+  zIndex: '$overlay',
   '&[data-state="open"]': {
     animation: `${fadeIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`
   },
@@ -10728,7 +10753,7 @@ const StyledContent$4 = styled(DialogPrimitive.Content, {
   top: 0,
   bottom: 0,
   width: '100%',
-  zIndex: 10000,
+  zIndex: '$modal',
   display: 'flex',
   flexDirection: 'column',
   maxHeight: '100vh',
@@ -14644,7 +14669,7 @@ function Table({
     justify: "center",
     align: "center",
     css: {
-      zIndex: 10,
+      zIndex: '$docked',
       position: 'absolute',
       inset: 0,
       top: isMobile ? 40 : 64,
@@ -15756,10 +15781,21 @@ const rowExpanderColumn = {
 
 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] = useState(false);
     const [openDrop, setOpenDrop] = useState(false);
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropdownMenu, {
@@ -15769,7 +15805,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 27,
+        lineNumber: 34,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuTrigger, {
@@ -15777,7 +15813,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 28,
+        lineNumber: 35,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -15790,7 +15826,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 29,
+        lineNumber: 36,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
@@ -15798,19 +15834,20 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 30,
+        lineNumber: 37,
         columnNumber: 15
       }
     }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 30,
+        lineNumber: 37,
         columnNumber: 70
       }
     })))), /*#__PURE__*/React__default.createElement(DropdownMenuContent, {
       onInteractOutside: () => setOpenDrop(false),
-      css: {
+      css: Object.assign({
+        width: 'auto',
         color: '$textPrimary',
         padding: '12px 16px',
         '& > div': {
@@ -15822,11 +15859,11 @@ const rowMenuColumn = (options, icon) => ({
         '& > *:last-child': {
           display: 'none'
         }
-      },
+      }, cssContent),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 33,
+        lineNumber: 40,
         columnNumber: 11
       }
     }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -15834,7 +15871,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 50,
+        lineNumber: 59,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuItem, {
@@ -15842,10 +15879,11 @@ const rowMenuColumn = (options, icon) => ({
         setOpenDrop(false);
         option.onClick(props);
       },
+      css: cssMenuItem,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 51,
+        lineNumber: 60,
         columnNumber: 17
       }
     }, option.title), /*#__PURE__*/React__default.createElement(DropdownMenuSeparator, {
@@ -15856,7 +15894,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 59,
+        lineNumber: 69,
         columnNumber: 17
       }
     }))))), /*#__PURE__*/React__default.createElement(ModalDialog, {
@@ -15865,10 +15903,11 @@ const rowMenuColumn = (options, icon) => ({
       modal: true,
       open: openModal,
       onOpenChange: setOpenModal,
+      width: "100%",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 64,
+        lineNumber: 74,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -15876,7 +15915,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 65,
+        lineNumber: 75,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -15889,38 +15928,38 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 66,
+        lineNumber: 76,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 67,
+        lineNumber: 77,
         columnNumber: 15
       }
     }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 67,
+        lineNumber: 77,
         columnNumber: 36
       }
     })))), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 70,
+        lineNumber: 80,
         columnNumber: 11
       }
-    }, "Aksi"), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
+    }, mobileTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
       css: {
         padding: '20px 16px'
       },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 71,
+        lineNumber: 81,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -15935,7 +15974,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 72,
+        lineNumber: 82,
         columnNumber: 13
       }
     }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -15943,7 +15982,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 74,
+        lineNumber: 84,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -15956,7 +15995,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 75,
+        lineNumber: 85,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15965,7 +16004,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 83,
+        lineNumber: 93,
         columnNumber: 21
       }
     }, option.title)), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -15973,7 +16012,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 87,
+        lineNumber: 97,
         columnNumber: 19
       }
     })))))));
@@ -16180,7 +16219,8 @@ const PageDialog = _ref => {
     }
   }))), /*#__PURE__*/React__default.createElement(DialogTitle, {
     css: {
-      margin: 0
+      margin: 0,
+      zIndex: isMobile ? 1 : 'unset'
     },
     __self: undefined,
     __source: {
@@ -16272,13 +16312,14 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 136,
+      lineNumber: 138,
       columnNumber: 15
     }
   }))))));
 };
 PageDialog.defaultProps = {
-  size: 'full'
+  size: 'full',
+  layer: '$modal'
 };
 
 const _excluded$2 = ["children"];
@@ -19104,20 +19145,22 @@ const Upload = ({
   max,
   replaceLabel,
   width,
-  height
+  height,
+  css
 }) => {
   const isFile = listType === 'file';
   const hiddenFileInput = useRef(null);
   const indexReplace = useRef(null);
+  const [dragActive, setDragActive] = useState(false);
   const [errorMessage, setErrorMessage] = 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',
@@ -19139,25 +19182,44 @@ const Upload = ({
         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);'
   });
 
@@ -19226,6 +19288,40 @@ const Upload = ({
     }
   }
 
+  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.createElement(Flex$1, {
       justify: "center",
@@ -19236,7 +19332,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 240,
+        lineNumber: 283,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -19245,7 +19341,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 241,
+        lineNumber: 284,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -19258,7 +19354,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 251,
+          lineNumber: 294,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -19268,7 +19364,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 252,
+          lineNumber: 295,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -19277,7 +19373,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 253,
+          lineNumber: 296,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box$1, {
@@ -19290,7 +19386,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 254,
+          lineNumber: 297,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -19299,7 +19395,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 262,
+          lineNumber: 305,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -19307,7 +19403,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 264,
+          lineNumber: 307,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -19321,7 +19417,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 275,
+          lineNumber: 318,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -19331,7 +19427,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 276,
+          lineNumber: 319,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -19340,7 +19436,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 277,
+          lineNumber: 320,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box$1, {
@@ -19353,7 +19449,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 278,
+          lineNumber: 321,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -19363,7 +19459,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 286,
+          lineNumber: 329,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(CheckIcon, {
@@ -19371,7 +19467,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 287,
+          lineNumber: 330,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(Text, {
@@ -19385,14 +19481,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 288,
+          lineNumber: 331,
           columnNumber: 17
         }
       }, item.name))), /*#__PURE__*/React__default.createElement(Blank, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 301,
+          lineNumber: 344,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -19400,21 +19496,28 @@ const Upload = ({
   };
 
   function renderUpload() {
-    return /*#__PURE__*/React__default.createElement(Box$1, {
+    return /*#__PURE__*/React__default.createElement(FocusArea, {
+      focus: dragActive,
+      css: css,
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 311,
+        lineNumber: 354,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__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.createElement(Input$1, {
@@ -19425,49 +19528,49 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 317,
+        lineNumber: 365,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 318,
+        lineNumber: 366,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 320,
+        lineNumber: 368,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 321,
+        lineNumber: 369,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 322,
+        lineNumber: 370,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__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.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 329,
+        lineNumber: 377,
         columnNumber: 26
       }
     }, errorMessage));
@@ -19483,7 +19586,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 335,
+      lineNumber: 383,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), renderUpload());
@@ -19491,7 +19594,9 @@ const Upload = ({
 
 Upload.defaultProps = {
   listType: 'file',
-  fileList: []
+  fileList: [],
+  height: 200,
+  width: 200
 };
 Upload.propType = {
   listType: PropTypes.oneOf(['file', 'picture']),
@@ -19504,7 +19609,8 @@ Upload.propType = {
   max: PropTypes.number,
   replaceLabel: PropTypes.string,
   width: PropTypes.number,
-  height: PropTypes.number
+  height: PropTypes.number,
+  css: PropTypes.object
 };
 Upload.displayName = 'Upload';
 
@@ -22603,6 +22709,10 @@ const Navigation = props => {
     cssNav,
     isHide
   } = React__default.useContext(StepWizardContext);
+  const mobileHidden = isMobile && isHide && {
+    height: 'unset',
+    margin: 'unset'
+  };
   const stepItems = [];
   const height = props.totalSteps * 24 + (props.totalSteps - 1) * 16;
 
@@ -22628,7 +22738,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 88,
+          lineNumber: 93,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Span, {
@@ -22638,7 +22748,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 101,
+          lineNumber: 106,
           columnNumber: 15
         }
       }), isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -22650,7 +22760,7 @@ const Navigation = props => {
         __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.createElement(Tooltip, {
@@ -22659,7 +22769,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 105,
+          lineNumber: 110,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -22671,7 +22781,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 106,
+          lineNumber: 111,
           columnNumber: 19
         }
       })))) : stepItems.push( /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22688,7 +22798,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 112,
+          lineNumber: 117,
           columnNumber: 13
         }
       }, isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -22697,7 +22807,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 124,
+          lineNumber: 129,
           columnNumber: 30
         }
       }), !isComplete && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22713,7 +22823,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 126,
+          lineNumber: 131,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -22723,7 +22833,7 @@ const Navigation = props => {
         __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.createElement(Tooltip, {
@@ -22733,7 +22843,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 140,
+          lineNumber: 145,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -22742,7 +22852,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 141,
+          lineNumber: 146,
           columnNumber: 19
         }
       }))));
@@ -22753,17 +22863,16 @@ const Navigation = props => {
     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.createElement(StyledDiv, {
@@ -22775,7 +22884,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 162,
+      lineNumber: 168,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22788,12 +22897,14 @@ const Navigation = props => {
     __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.useState(Object.assign({
     isComplete: [],
     hide: false
@@ -22846,11 +22957,24 @@ const Default = props => {
     }));
   };
 
+  const WrapperBox = props => {
+    return /*#__PURE__*/React__default.createElement(Box$1, {
+      id: "content-container",
+      css: props.css,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 232,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default.cloneElement(props.children, props));
+  };
+
   return /*#__PURE__*/React__default.createElement(WrapperDiv, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 225,
+      lineNumber: 238,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
@@ -22871,7 +22995,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 226,
+      lineNumber: 239,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -22883,7 +23007,7 @@ const Default = props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 247,
+        lineNumber: 260,
         columnNumber: 16
       }
     }),
@@ -22891,10 +23015,27 @@ const Default = props => {
     __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.createElement(WrapperBox, {
+    key: idx,
+    css: props.cssContent,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 265,
+      columnNumber: 15
+    }
+  }, child)) : /*#__PURE__*/React__default.createElement(WrapperBox, {
+    css: props.cssContent,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 270,
+      columnNumber: 13
+    }
+  }, props.children))));
 };
 
 const StepWizard = props => {
@@ -22952,7 +23093,9 @@ var _jsxFileName$2 = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/
 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': {
@@ -22966,8 +23109,11 @@ const MobileContainer = styled(Flex$1, {
   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': {
@@ -22983,12 +23129,6 @@ const ListWrap = styled('ul', {
 const List = styled('li', {
   '&:not(:last-child)': {
     marginBottom: 20
-  },
-  '&:first-child': {
-    marginTop: -4
-  },
-  '&:last-child': {
-    marginBottom: -4
   }
 });
 const Title = styled('a', {
@@ -23058,7 +23198,7 @@ function Content({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 98,
+      lineNumber: 99,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Separator, {
@@ -23066,7 +23206,7 @@ function Content({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 99,
+      lineNumber: 100,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(ListWrap, {
@@ -23076,7 +23216,7 @@ function Content({
     __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) => {
@@ -23085,7 +23225,7 @@ function Content({
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 103,
+        lineNumber: 104,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -23093,15 +23233,22 @@ function Content({
       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.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 => {
@@ -23129,25 +23276,10 @@ function Content({
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 105,
+        lineNumber: 119,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__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));
   })));
 }
 
@@ -23173,7 +23305,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 157,
+      lineNumber: 161,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content, {
@@ -23184,26 +23316,48 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 158,
+      lineNumber: 162,
       columnNumber: 7
     }
-  }), /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
+  }), /*#__PURE__*/React__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.createElement(ChevronUpOutline, {
     style: {
       cursor: 'pointer'
     },
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 159,
-      columnNumber: 7
+      lineNumber: 165,
+      columnNumber: 11
+    }
+  }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
+    style: {
+      cursor: 'pointer'
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 167,
+      columnNumber: 11
     }
-  })) : /*#__PURE__*/React__default.createElement(DesktopContainer, {
+  }))) : /*#__PURE__*/React__default.createElement(DesktopContainer, {
     direction: "row",
     css: css,
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 162,
+      lineNumber: 172,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content, {
@@ -23213,7 +23367,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 163,
+      lineNumber: 173,
       columnNumber: 7
     }
   }));