@majoo-ui/react 1.55.19 → 1.55.21

package/index.esm.js

@@ -2530,7 +2530,7 @@ const StyledDiv$3 = styled(Flex$1, {
   marginLeft: 'auto',
   marginRight: 'auto',
   '@sm': {
-    padding: '$spacing-04 $spacing-05',
+    padding: '0 $spacing-05 $spacing-06',
     backgroundColor: '$white',
     width: '100%'
   },
@@ -15510,7 +15510,8 @@ const CalendarBox = ({
             },
             onClick: onReset,
             disabled: disabled,
-            size: "sm"
+            size: "sm",
+            type: "button"
           }, {
             children: "Reset"
           }), void 0) : jsx(Button$4, Object.assign({
@@ -15520,7 +15521,8 @@ const CalendarBox = ({
             },
             onClick: onCancel,
             disabled: disabled,
-            size: "sm"
+            size: "sm",
+            type: "button"
           }, {
             children: t('label.cancel', 'Batal', {
               ns: 'translation'
@@ -15531,7 +15533,8 @@ const CalendarBox = ({
             },
             onClick: onUpdate,
             disabled: disabled || !selected || selected.length <= 1,
-            size: "sm"
+            size: "sm",
+            type: "button"
           }, {
             children: t('label.process', 'Proses', {
               ns: 'translation'
@@ -15805,7 +15808,7 @@ const MobileCalendarBox = ({
   const {
     t,
     i18n
-  } = useTranslation('MajooUI/datePicker');
+  } = useTranslation(['MajooUI/datePicker', 'translation']);
   const [pickerState, setPickerState] = useState({
     type: DATE_PICKER,
     selectedMonth: Number(calendars[0].month),
@@ -16079,7 +16082,7 @@ const MobileCalendarBox = ({
       }, {
         children: [allowReset ? jsx(Button$4, Object.assign({
           buttonType: "ghost",
-          size: "sm",
+          size: "md",
           css: {
             width: '160px',
             fontWeight: 600,
@@ -16087,12 +16090,13 @@ const MobileCalendarBox = ({
             flex: 1
           },
           onClick: onReset,
-          disabled: disabled
+          disabled: disabled,
+          type: "button"
         }, {
           children: "Reset"
         }), void 0) : jsx(Button$4, Object.assign({
           buttonType: "ghost",
-          size: "sm",
+          size: "md",
           css: {
             width: '160px',
             fontWeight: 600,
@@ -16100,11 +16104,14 @@ const MobileCalendarBox = ({
             flex: 1
           },
           onClick: onCancel,
-          disabled: disabled
+          disabled: disabled,
+          type: "button"
         }, {
-          children: "Batal"
+          children: t('label.cancel', 'Batal', {
+            ns: 'translation'
+          })
         }), void 0), jsx(Button$4, Object.assign({
-          size: "sm",
+          size: "md",
           css: {
             width: '160px',
             fontWeight: 600,
@@ -16112,9 +16119,12 @@ const MobileCalendarBox = ({
             flex: 1
           },
           onClick: onUpdate,
-          disabled: disabled
+          disabled: disabled,
+          type: "button"
         }, {
-          children: "Proses"
+          children: t('label.process', 'Proses', {
+            ns: 'translation'
+          })
         }), void 0)]
       }), void 0)]
     }), void 0);
@@ -18282,7 +18292,7 @@ const TableHeadRow$4 = styled('tr', {
   }
 });
 const TableHeadCell$4 = styled('th', {
-  height: '40px'
+  height: '48px'
 });
 const TableRow$4 = styled('tr', {
   borderBottom: '1pt solid $bgBorder',
@@ -18343,6 +18353,31 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
         return 'center';
     }
   };
+  const getIsMobileHeader = useCallback(() => {
+    var _a, _b, _c;
+    let isMobileHeader;
+    for (let i = 0; i < (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length); i++) {
+      for (let x = 0; x < ((_b = (_a = headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups[i]) === null || _a === void 0 ? void 0 : _a.headers) === null || _b === void 0 ? void 0 : _b.length); x++) {
+        const headerData = (_c = headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups[i]) === null || _c === void 0 ? void 0 : _c.headers[x];
+        if (headerData === null || headerData === void 0 ? void 0 : headerData.isMobileHeader) {
+          isMobileHeader = true;
+        }
+      }
+    }
+    return isMobileHeader;
+  }, [headerGroups]);
+  let indexDefaultHeader = 0;
+  const filterMobileHeader = (column, index) => {
+    switch (column.id) {
+      case 'selection':
+        indexDefaultHeader += 1;
+        break;
+      case 'expander':
+        indexDefaultHeader += 1;
+        break;
+    }
+    return (getIsMobileHeader() ? column.isMobileHeader : index === indexDefaultHeader) || column.id === 'selection';
+  };
   return jsxs(TableContainer$4, Object.assign({
     css: css,
     ref: ref
@@ -18350,7 +18385,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
     children: [infiniteScrollWrapper(jsxs(TableContent$3, Object.assign({}, getTableProps(), {
       children: [jsx(TableHead$3, {
         children: headerGroups.map(headerGroup => jsx(TableHeadRow$4, Object.assign({}, headerGroup.getHeaderGroupProps(), {
-          children: headerGroup.headers.filter(column => column.isMobileHeader || column.id === 'selection').map(column => {
+          children: headerGroup.headers.filter((column, index) => filterMobileHeader(column, index)).map(column => {
             const headerRender = column.render('Header');
             return jsx(TableHeadCell$4, Object.assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
               title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
@@ -18400,7 +18435,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
             }), void 0)), jsx(TableRow$4, Object.assign({
               css: customStyle
             }, row.getRowProps(), {
-              children: row.cells.filter(cell => cell.column.isMobileHeader || cell.column.id === 'selection').map(cell => {
+              children: row.cells.filter((cell, indexCell) => (getIsMobileHeader() ? cell.column.isMobileHeader : indexCell === indexDefaultHeader) || cell.column.id === 'selection').map(cell => {
                 var _a;
                 const collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
                 const exceptionId = ['expander', 'selection', 'menu', 'eye'].includes(collId);
@@ -18424,26 +18459,37 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                   children: cell.render('Cell')
                 }), void 0);
                 return jsx(TableCell$4, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
-                  onClick: () => {
-                    if (!exceptionId) {
-                      handleRowClick(row, i);
-                    }
-                  }
-                }, {
                   children: cell.column.accessor ? jsxs(Flex$1, Object.assign({
                     justify: "between",
                     align: "center",
-                    onClick: () => {
-                      if (!Object.keys(state.expanded).includes(row.id)) {
-                        toggleAllRowsExpanded(false);
-                      }
-                      row.toggleRowExpanded(!row.isExpanded);
-                    },
                     css: {
-                      cursor: 'pointer'
+                      cursor: 'pointer',
+                      height: '100%'
                     }
                   }, {
-                    children: [renderCell(), row.isExpanded ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)]
+                    children: [jsx(Flex$1, Object.assign({
+                      align: "center",
+                      css: {
+                        flex: 1,
+                        height: '100%'
+                      },
+                      onClick: () => {
+                        if (!exceptionId) {
+                          handleRowClick(row, i);
+                        }
+                      }
+                    }, {
+                      children: renderCell()
+                    }), void 0), jsx(Box, Object.assign({
+                      onClick: () => {
+                        if (!Object.keys(state.expanded).includes(row.id)) {
+                          toggleAllRowsExpanded(false);
+                        }
+                        row.toggleRowExpanded(!row.isExpanded);
+                      }
+                    }, {
+                      children: row.isExpanded ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)
+                    }), void 0)]
                   }), void 0) : renderCell()
                 }), void 0);
               })
@@ -18454,7 +18500,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                 children: [jsx(Flex$1, Object.assign({
                   direction: "column"
                 }, {
-                  children: row.cells.filter(cell => !cell.column.isMobileHeader && cell.column.accessor).map(cell => {
+                  children: row.cells.filter((cell, indexCell) => (getIsMobileHeader() ? !cell.column.isMobileHeader : indexCell !== indexDefaultHeader) && cell.column.accessor).map(cell => {
                     var _a;
                     return jsxs(Flex$1, Object.assign({
                       align: "center",
@@ -19040,7 +19086,7 @@ function Table({
       const isMenu = ((_d = (_c = (_b = row === null || row === void 0 ? void 0 : row.cells) === null || _b === void 0 ? void 0 : _b[_i]) === null || _c === void 0 ? void 0 : _c.column) === null || _d === void 0 ? void 0 : _d.id) === 'menu';
       clickable = !isMenu;
     }
-    clickable && !isMobile && (onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, i));
+    clickable && (onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, i));
     setDataRow(row);
   };
   useLayoutEffect(() => {
@@ -19886,42 +19932,34 @@ const rowMenuColumn = (options, icon, config) => ({
     };
     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, {
+    return /*#__PURE__*/React__default.createElement(DropdownMenu, {
       align: currentConfig.align,
       open: openDrop,
       onOpenchange: setOpenDrop,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 39,
-        columnNumber: 9
+        lineNumber: 31,
+        columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuTrigger, {
       asChild: true,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 40,
-        columnNumber: 11
+        lineNumber: 32,
+        columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
-      css: {
-        display: 'none',
-        '@md': {
-          display: 'block'
-        }
-      },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 41,
-        columnNumber: 13
+        lineNumber: 33,
+        columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
       type: "button",
@@ -19934,22 +19972,22 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 42,
-        columnNumber: 15
+        lineNumber: 34,
+        columnNumber: 13
       }
     }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 50,
-        columnNumber: 26
+        lineNumber: 42,
+        columnNumber: 24
       }
     })))), /*#__PURE__*/React__default.createElement(DropdownMenuPortal, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 54,
-        columnNumber: 11
+        lineNumber: 46,
+        columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuContent, {
       onInteractOutside: () => setOpenDrop(false),
@@ -19971,16 +20009,16 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 55,
-        columnNumber: 13
+        lineNumber: 47,
+        columnNumber: 11
       }
     }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: `${option.title}dd-${index}`,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 75,
-        columnNumber: 17
+        lineNumber: 67,
+        columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuItem, {
       onClick: () => {
@@ -19991,8 +20029,8 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 76,
-        columnNumber: 19
+        lineNumber: 68,
+        columnNumber: 17
       }
     }, option.title), /*#__PURE__*/React__default.createElement(DropdownMenuSeparator, {
       key: `${option.title}ds`,
@@ -20002,130 +20040,10 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 85,
-        columnNumber: 19
-      }
-    })))))), /*#__PURE__*/React__default.createElement(ModalDialog, {
-      isMobile: true,
-      modal: true,
-      open: openModal,
-      onOpenChange: setOpenModal,
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 91,
-        columnNumber: 9
-      }
-    }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
-      asChild: true,
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 92,
-        columnNumber: 11
-      }
-    }, /*#__PURE__*/React__default.createElement(Box, {
-      css: {
-        display: 'block',
-        '@md': {
-          display: 'none'
-        }
-      },
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 93,
-        columnNumber: 13
-      }
-    }, /*#__PURE__*/React__default.createElement(IconButton, {
-      type: "button",
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 94,
-        columnNumber: 15
-      }
-    }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 94,
-        columnNumber: 50
-      }
-    })))), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 97,
-        columnNumber: 11
-      }
-    }, mobileTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
-      css: {
-        padding: '20px 16px'
-      },
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 98,
-        columnNumber: 11
-      }
-    }, /*#__PURE__*/React__default.createElement(Box, {
-      css: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 20,
-        '& > *:last-child': {
-          display: 'none'
-        }
-      },
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 99,
-        columnNumber: 13
-      }
-    }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-      key: `${option.title}mb-${index}`,
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 101,
+        lineNumber: 77,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__default.createElement(Box, {
-      type: "button",
-      role: "button",
-      css: {
-        cursor: 'pointer'
-      },
-      onClick: () => {
-        setOpenModal(false);
-        option.onClick(props);
-      },
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 102,
-        columnNumber: 19
-      }
-    }, /*#__PURE__*/React__default.createElement(Paragraph, {
-      paragraph: "shortContentRegular",
-      color: "primary",
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 113,
-        columnNumber: 21
-      }
-    }, option.title)), /*#__PURE__*/React__default.createElement(Separator$2, {
-      key: `${option.title}ms`,
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 117,
-        columnNumber: 19
-      }
-    })))))));
+    }))))));
   },
   unsortable: true
 });
@@ -27998,7 +27916,7 @@ const Navigation = props => {
     const isAdditional = (_data = data[i - 1]) === null || _data === void 0 ? void 0 : _data.additional;
     // eslint-disable-next-line no-lone-blocks
     {
-      var _data$title, _data3, _data4, _data5, _data6, _data7, _data8, _data9, _data$title2, _data10, _data11, _data12, _data13, _data14;
+      var _data$title, _data3, _data4, _data5, _data6, _data7, _data8, _data9, _data$title2, _data10, _data11, _data12, _data13, _data14, _data15;
       !isMobile ? stepItems.push( /*#__PURE__*/React__default.createElement(StepperItem, {
         css: {
           opacity: data[i - 1].hidden ? 0 : undefined,
@@ -28093,7 +28011,8 @@ const Navigation = props => {
           userSelect: 'none',
           fontSize: '12px',
           textAlign: '-webkit-center',
-          display: ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.disabled) && 'none'
+          display: ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.disabled) && 'none',
+          marginTop: isActive && ((_data9 = data[i - 1]) !== null && _data9 !== void 0 && _data9.withTolltip ? '-20px' : '-18px')
         },
         onClick: () => {
           if (props.onNavClicked) props.onNavClicked(i);
@@ -28107,40 +28026,24 @@ const Navigation = props => {
           lineNumber: 148,
           columnNumber: 13
         }
-      }, isComplete && !hideCheckedIcon && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
-        size: "24",
-        color: colors$4.bgGreen,
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$4,
-          lineNumber: 167,
-          columnNumber: 50
-        }
-      }), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default.createElement(Flex$1, {
-        justify: "center",
+      }, /*#__PURE__*/React__default.createElement(Flex$1, {
         align: "center",
-        css: {
-          width: 24,
-          height: 24,
-          borderRadius: '$round',
-          border: `4px solid ${isActive ? '$bgGreen' : '$bgInactive'}`,
-          backgroundColor: (_data9 = data[i - 1]) !== null && _data9 !== void 0 && _data9.disabled ? '$gray200' : '$white'
-        },
+        gap: 2,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 169,
-          columnNumber: 17
+          lineNumber: 168,
+          columnNumber: 15
         }
-      }), /*#__PURE__*/React__default.createElement(StyledDiv, {
+      }, /*#__PURE__*/React__default.createElement(StyledDiv, {
         css: {
           width: 'max-content'
         },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 181,
-          columnNumber: 15
+          lineNumber: 169,
+          columnNumber: 17
         }
       }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data10 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data10) : ''), isActive && ((_data11 = data[i - 1]) === null || _data11 === void 0 ? void 0 : _data11.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
         align: "center",
@@ -28149,8 +28052,8 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 185,
-          columnNumber: 17
+          lineNumber: 173,
+          columnNumber: 19
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
         size: "20",
@@ -28158,8 +28061,8 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 186,
-          columnNumber: 19
+          lineNumber: 174,
+          columnNumber: 21
         }
       })), isActive && ((_data13 = data[i - 1]) === null || _data13 === void 0 ? void 0 : _data13.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
         align: "center",
@@ -28170,19 +28073,44 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 190,
-          columnNumber: 17
+          lineNumber: 178,
+          columnNumber: 19
         }
       }, /*#__PURE__*/React__default.createElement(Tag, {
         size: "lg",
         type: "error",
         __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 183,
+          columnNumber: 21
+        }
+      }, "Coming Soon"))), isComplete && !hideCheckedIcon && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
+        size: "24",
+        color: colors$4.bgGreen,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 189,
+          columnNumber: 50
+        }
+      }), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default.createElement(Flex$1, {
+        justify: "center",
+        align: "center",
+        css: {
+          width: 24,
+          height: 24,
+          borderRadius: '$round',
+          border: `4px solid ${isActive ? '$bgGreen' : '$bgInactive'}`,
+          backgroundColor: (_data15 = data[i - 1]) !== null && _data15 !== void 0 && _data15.disabled ? '$gray200' : '$white'
+        },
+        __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
           lineNumber: 191,
-          columnNumber: 19
+          columnNumber: 17
         }
-      }, "Coming Soon"))));
+      })));
     }
   }
   return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
@@ -28197,7 +28125,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 204,
+          lineNumber: 211,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28210,7 +28138,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 205,
+          lineNumber: 212,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(Card, {
@@ -28222,14 +28150,14 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 206,
+          lineNumber: 213,
           columnNumber: 13
         }
       }, child), /*#__PURE__*/React__default.createElement(Box, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 215,
+          lineNumber: 222,
           columnNumber: 13
         }
       }, typeof (props === null || props === void 0 ? void 0 : props.appendContent) === 'function' ? props === null || props === void 0 ? void 0 : (_props$appendContent = props.appendContent) === null || _props$appendContent === void 0 ? void 0 : _props$appendContent.call(props) : props === null || props === void 0 ? void 0 : props.appendContent)));
@@ -28237,13 +28165,14 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 201,
+      lineNumber: 208,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepperList, {
     css: Object.assign({
       borderLeft: !isMobile ? '4px solid $bgBorder' : undefined,
-      marginBottom: isMobile ? 65 : undefined,
+      marginTop: isMobile ? 40 : undefined,
+      marginBottom: isMobile ? 30 : undefined,
       height: !isMobile ? height : undefined,
       opacity: isHide ? 0 : undefined,
       position: !isMobile && 'sticky',
@@ -28255,7 +28184,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 220,
+      lineNumber: 227,
       columnNumber: 7
     }
   }, isMobile ? /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -28267,7 +28196,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 236,
+      lineNumber: 244,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28280,7 +28209,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 237,
+      lineNumber: 245,
       columnNumber: 13
     }
   }, stepItems)) : stepItems));
@@ -28364,7 +28293,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 335,
+      lineNumber: 343,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
@@ -28387,7 +28316,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 336,
+      lineNumber: 344,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -28401,7 +28330,7 @@ const Default = props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 360,
+        lineNumber: 368,
         columnNumber: 13
       }
     }),
@@ -28411,7 +28340,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 354,
+      lineNumber: 362,
       columnNumber: 9
     }
   }), props.children)));