@majoo-ui/react 1.55.24 → 1.55.26

package/index.esm.js

@@ -20,13 +20,13 @@ import * as SwitchPrimitive from '@radix-ui/react-switch';
 import Downshift, { useMultipleSelection, useCombobox } from 'downshift';
 import InfiniteScroll from 'react-infinite-scroller';
 import debounce from 'lodash.debounce';
-import { useFloating, offset, flip, shift as shift$2, useInteractions, useClick, useDismiss, FloatingFocusManager } from '@floating-ui/react';
+import { useFloating, offset, flip, shift as shift$2, useInteractions, useClick, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import OTPInput, { ResendOTP as ResendOTP$1 } from 'otp-input-react';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { useDayzed } from 'dayzed';
 import { useTable, useSortBy, useExpanded, usePagination, useRowSelect, useColumnOrder, useMountedLayoutEffect } from 'react-table';
@@ -2522,7 +2522,7 @@ GridItem.displayName = 'Grid Item';
 
 const _excluded$A = ["children", "isCollapse", "css", "contentHeader"];
 var _jsxFileName$11 = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/layout/pageContainer/PageContainer.js";
-const StyledDiv$3 = styled(Flex$1, {
+const StyledDiv$2 = styled(Flex$1, {
   justifyContent: 'center',
   marginLeft: 'auto',
   marginRight: 'auto',
@@ -2550,7 +2550,7 @@ const PageContainer = _ref => {
       contentHeader
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
-  return /*#__PURE__*/React__default.createElement(StyledDiv$3, _extends({
+  return /*#__PURE__*/React__default.createElement(StyledDiv$2, _extends({
     id: "retina-container",
     css: Object.assign({
       maxWidth: isCollapse ? '1206px' : '1006px'
@@ -8473,6 +8473,106 @@ fixRegExpWellKnownSymbolLogic$1('search', function (SEARCH, nativeSearch, maybeC
   ];
 });
 
+const StyledOverlay$2 = styled(DialogPrimitive.Overlay, {
+  backgroundColor: '$bgDimmer',
+  position: 'fixed',
+  inset: 0
+});
+const StyledContent$5 = styled(DialogPrimitive.Content, {
+  position: 'fixed',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  '&:focus': {
+    outline: 'none'
+  },
+  width: '100%',
+  variants: {
+    /**
+    * Size of modal width, the height sized according to content. Size must be placed on DialogContent element
+    * if it's on mobile view will auto set maxWidth to 'unset'.
+    */
+    size: {
+      auto: {
+        '@md': {
+          width: 'auto'
+        }
+      },
+      xs: {
+        maxWidth: 'unset',
+        '@md': {
+          maxWidth: '320px'
+        }
+      },
+      sm: {
+        maxWidth: 'unset',
+        '@md': {
+          maxWidth: '384px'
+        }
+      },
+      md: {
+        maxWidth: 'unset',
+        '@md': {
+          maxWidth: '448px'
+        }
+      },
+      lg: {
+        maxWidth: 'unset',
+        '@md': {
+          maxWidth: '512px'
+        }
+      },
+      xl: {
+        maxWidth: 'unset',
+        '@md': {
+          maxWidth: '576px'
+        }
+      },
+      full: {
+        maxWidth: '100vw',
+        minHeight: '100vh'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+});
+const Content$2 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+      children
+    } = props,
+    rest = __rest(props, ["children"]);
+  return jsx(StyledContent$5, Object.assign({}, rest, {
+    ref: ref
+  }, {
+    children: children
+  }), void 0);
+});
+const StyledTitle$1 = styled(DialogPrimitive.Title, {});
+const StyledDescription$2 = styled(DialogPrimitive.Description, {
+  margin: '10px 0 20px',
+  color: '$textSecondary',
+  fontSize: 15,
+  lineHeight: 1.5
+});
+// Exports
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogContent = Content$2;
+const DialogTitle = StyledTitle$1;
+const DialogDescription = StyledDescription$2;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = StyledOverlay$2;
+const DialogPortal = DialogPrimitive.Portal;
+DialogTrigger.displayName = 'DialogTrigger';
+DialogContent.displayName = 'DialogContent';
+DialogTitle.displayName = 'DialogTitle';
+DialogDescription.displayName = 'DialogDescription';
+DialogClose.displayName = 'DialogClose';
+DialogOverlay.displayName = 'DialogOverlay';
+DialogPortal.displayName = 'DialogPortal';
+
 const _excluded$d = ["children"];
 var _jsxFileName$y = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/popover/Popover.js";
 const {
@@ -8518,7 +8618,7 @@ const Popover = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$y,
-      lineNumber: 46,
+      lineNumber: 49,
       columnNumber: 10
     }
   }, children);
@@ -8540,7 +8640,8 @@ const PopoverTrigger = ({
 const PopoverContent = ({
   children,
   isMobile,
-  style
+  style,
+  portalled
 }) => {
   const {
     openState,
@@ -8553,7 +8654,23 @@ const PopoverContent = ({
     },
     getFloatingProps
   } = useContext(PopoverContext);
-  return openState ? /*#__PURE__*/React__default.createElement(FloatingFocusManager, {
+  return openState ? /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: portalled,
+    wrapper: child => /*#__PURE__*/React__default.createElement(FloatingPortal, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$y,
+        lineNumber: 67,
+        columnNumber: 65
+      }
+    }, child),
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$y,
+      lineNumber: 67,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement(FloatingFocusManager, {
     context: context,
     modal: false,
     order: ['reference', 'content'],
@@ -8561,8 +8678,8 @@ const PopoverContent = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$y,
-      lineNumber: 64,
-      columnNumber: 5
+      lineNumber: 68,
+      columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement("div", _extends({}, getFloatingProps({
     ref: refs.setFloating,
@@ -8576,10 +8693,10 @@ const PopoverContent = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$y,
-      lineNumber: 65,
-      columnNumber: 7
+      lineNumber: 69,
+      columnNumber: 9
     }
-  }), children)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+  }), children))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };
 const PopoverClose = _ref => {
   let {
@@ -8597,7 +8714,7 @@ const PopoverClose = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$y,
-      lineNumber: 88,
+      lineNumber: 93,
       columnNumber: 5
     }
   }), children);
@@ -8839,7 +8956,7 @@ const StyledFooter = styled('div', {
   borderTop: '1px solid $bgBorder',
   pointerEvents: 'auto'
 });
-const StyledDiv$2 = styled('div', {
+const StyledDiv$1 = styled('div', {
   color: '$textDisable',
   display: 'flex',
   alignItems: 'center'
@@ -9234,7 +9351,7 @@ function InputSelect(_a) {
                         }, void 0)
                       }), void 0)
                     }), void 0) : jsx(SelectOption, {
-                      children: jsxs(StyledDiv$2, {
+                      children: jsxs(StyledDiv$1, {
                         children: [jsx("div", Object.assign({
                           style: {
                             marginRight: '6px'
@@ -9802,7 +9919,7 @@ const Item$3 = styled('div', {
   marginLeft: '10px',
   padding: '12px 0'
 });
-const StyledDiv$1 = styled('div', {
+const StyledDiv = styled('div', {
   padding: '6px 0',
   color: '$textDisable',
   display: 'inline-flex'
@@ -10410,7 +10527,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       lineNumber: 692,
       columnNumber: 13
     }
-  }), /*#__PURE__*/React__default.createElement(StyledDiv$1, {
+  }), /*#__PURE__*/React__default.createElement(StyledDiv, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
@@ -12139,7 +12256,7 @@ const StyledTrigger$1 = styled(TabsPrimitive.Trigger, {
     size: 'lg'
   }
 });
-const StyledContent$5 = styled(TabsPrimitive.Content, {
+const StyledContent$4 = styled(TabsPrimitive.Content, {
   flexGrow: 1,
   borderRadius: '$lg',
   backgroundColor: '$white',
@@ -12359,7 +12476,7 @@ const TabsTrigger$1 = _ref3 => {
 };
 const TabsContent$1 = _ref4 => {
   let props = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
-  return /*#__PURE__*/React__default.createElement(StyledContent$5, _extends({}, props, {
+  return /*#__PURE__*/React__default.createElement(StyledContent$4, _extends({}, props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
@@ -13042,106 +13159,6 @@ const IconButton = styled('button', {
   }
 });
 
-const StyledOverlay$2 = styled(DialogPrimitive.Overlay, {
-  backgroundColor: '$bgDimmer',
-  position: 'fixed',
-  inset: 0
-});
-const StyledContent$4 = styled(DialogPrimitive.Content, {
-  position: 'fixed',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  '&:focus': {
-    outline: 'none'
-  },
-  width: '100%',
-  variants: {
-    /**
-    * Size of modal width, the height sized according to content. Size must be placed on DialogContent element
-    * if it's on mobile view will auto set maxWidth to 'unset'.
-    */
-    size: {
-      auto: {
-        '@md': {
-          width: 'auto'
-        }
-      },
-      xs: {
-        maxWidth: 'unset',
-        '@md': {
-          maxWidth: '320px'
-        }
-      },
-      sm: {
-        maxWidth: 'unset',
-        '@md': {
-          maxWidth: '384px'
-        }
-      },
-      md: {
-        maxWidth: 'unset',
-        '@md': {
-          maxWidth: '448px'
-        }
-      },
-      lg: {
-        maxWidth: 'unset',
-        '@md': {
-          maxWidth: '512px'
-        }
-      },
-      xl: {
-        maxWidth: 'unset',
-        '@md': {
-          maxWidth: '576px'
-        }
-      },
-      full: {
-        maxWidth: '100vw',
-        minHeight: '100vh'
-      }
-    }
-  },
-  defaultVariants: {
-    size: 'md'
-  }
-});
-const Content$2 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  const {
-      children
-    } = props,
-    rest = __rest(props, ["children"]);
-  return jsx(StyledContent$4, Object.assign({}, rest, {
-    ref: ref
-  }, {
-    children: children
-  }), void 0);
-});
-const StyledTitle$1 = styled(DialogPrimitive.Title, {});
-const StyledDescription$2 = styled(DialogPrimitive.Description, {
-  margin: '10px 0 20px',
-  color: '$textSecondary',
-  fontSize: 15,
-  lineHeight: 1.5
-});
-// Exports
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
-const DialogContent = Content$2;
-const DialogTitle = StyledTitle$1;
-const DialogDescription = StyledDescription$2;
-const DialogClose = DialogPrimitive.Close;
-const DialogOverlay = StyledOverlay$2;
-const DialogPortal = DialogPrimitive.Portal;
-DialogTrigger.displayName = 'DialogTrigger';
-DialogContent.displayName = 'DialogContent';
-DialogTitle.displayName = 'DialogTitle';
-DialogDescription.displayName = 'DialogDescription';
-DialogClose.displayName = 'DialogClose';
-DialogOverlay.displayName = 'DialogOverlay';
-DialogPortal.displayName = 'DialogPortal';
-
 var isPrototypeOf$1 = objectIsPrototypeOf;
 
 var $TypeError$5 = TypeError;
@@ -17339,7 +17356,8 @@ function InputDatePicker({
   maxDate,
   readOnly,
   isInvalid,
-  allowReset
+  allowReset,
+  portalled
 }) {
   const {
     t,
@@ -17519,9 +17537,11 @@ function InputDatePicker({
           children: renderInputGroup()
         }), void 0)
       }, void 0)
-    }), void 0), jsx(PopoverContent, {
+    }), void 0), jsx(PopoverContent, Object.assign({
+      portalled: portalled
+    }, {
       children: renderDatePicker()
-    }, void 0)]
+    }), void 0)]
   }), void 0) : jsxs(Fragment, {
     children: [jsx(Box, Object.assign({
       css: css
@@ -27876,14 +27896,15 @@ const WrapperDiv = styled('div', {
     }
   }
 });
-const centerAbsolute = {
+const MobileContainer$1 = styled(Flex$1, {
   position: 'absolute',
-  marginLeft: 'auto',
-  marginRight: 'auto',
+  margin: '0px -40px 0px -40px',
+  padding: '40px 40px 10px 40px',
   left: 0,
-  right: 0
-};
-const StyledDiv = styled('div', {});
+  right: 0,
+  top: -40,
+  backgroundColor: '$bgWhite'
+});
 const Line$1 = styled('span', {
   width: '100%',
   height: 2,
@@ -28054,7 +28075,7 @@ const Navigation = props => {
     const lastItem = navMobileItems.indexOf(data[i - 1]) + 1 === navMobileItems.length;
     // eslint-disable-next-line no-lone-blocks
     {
-      var _data$title, _data3, _data4, _data5, _data6, _data7, _data8, _data9, _data$title2, _data10, _data11, _data12, _data13, _data14, _data15;
+      var _data$title, _data3, _data4, _data5, _data6, _data7, _data$title2, _data8, _data9, _data10, _data11, _data12, _data13, _data14;
       !isMobile ? stepItems.push( /*#__PURE__*/React__default.createElement(StepperItem, {
         css: {
           opacity: data[i - 1].hidden ? 0 : undefined,
@@ -28139,57 +28160,28 @@ const Navigation = props => {
           lineNumber: 186,
           columnNumber: 19
         }
-      }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default.createElement(Flex$1, {
-        align: "center",
+      }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isActive && /*#__PURE__*/React__default.createElement(Box, {
         css: {
-          position: 'relative',
-          userSelect: 'none',
-          fontSize: '12px',
-          textAlign: '-webkit-center',
-          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'),
-          flex: isActive ? 0 : 1,
-          maxWidth: lastItem && 26
-        },
-        onClick: () => {
-          if (props.onNavClicked) props.onNavClicked(i);
-          if (!forbidClickNav && isComplete && !isHide) {
-            props.goToStep(i);
-          }
+          position: 'absolute',
+          top: 40,
+          left: 40
         },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 194,
-          columnNumber: 13
+          lineNumber: 196,
+          columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
-        css: {
-          marginTop: isActive && lastItem && '-4px'
-        },
-        justify: "center",
-        direction: "column",
-        gap: 1,
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$4,
-          lineNumber: 213,
-          columnNumber: 15
-        }
-      }, isActive && /*#__PURE__*/React__default.createElement(Flex$1, {
         align: "center",
         gap: 2,
-        css: {
-          height: 18,
-          marginLeft: lastItem && '-78%'
-        },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 215,
+          lineNumber: 197,
           columnNumber: 19
         }
-      }, /*#__PURE__*/React__default.createElement(StyledDiv, {
+      }, /*#__PURE__*/React__default.createElement(Box, {
         css: {
           width: 'max-content',
           color: '$textGreen',
@@ -28198,17 +28190,17 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 216,
+          lineNumber: 198,
           columnNumber: 21
         }
-      }, 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)), ((_data11 = data[i - 1]) === null || _data11 === void 0 ? void 0 : _data11.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
+      }, typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data8 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data8)), ((_data9 = data[i - 1]) === null || _data9 === void 0 ? void 0 : _data9.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
         align: "center",
         withClick: true,
-        label: (_data12 = data[i - 1]) === null || _data12 === void 0 ? void 0 : _data12.tooltipsContents,
+        label: (_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.tooltipsContents,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 226,
+          lineNumber: 208,
           columnNumber: 23
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -28217,19 +28209,19 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 227,
+          lineNumber: 209,
           columnNumber: 25
         }
-      })), ((_data13 = data[i - 1]) === null || _data13 === void 0 ? void 0 : _data13.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
+      })), ((_data11 = data[i - 1]) === null || _data11 === void 0 ? void 0 : _data11.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
         align: "center",
         justify: "center",
         css: {
-          marginTop: (_data14 = data[i - 1]) !== null && _data14 !== void 0 && _data14.withTolltip ? 0 : '$spacing-03'
+          marginTop: (_data12 = data[i - 1]) !== null && _data12 !== void 0 && _data12.withTolltip ? 0 : '$spacing-03'
         },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 231,
+          lineNumber: 213,
           columnNumber: 23
         }
       }, /*#__PURE__*/React__default.createElement(Tag, {
@@ -28238,14 +28230,41 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 236,
+          lineNumber: 218,
           columnNumber: 25
         }
-      }, "Coming Soon"))), isComplete && !hideCheckedIcon && /*#__PURE__*/React__default.createElement(Flex$1, {
+      }, "Coming Soon")))), /*#__PURE__*/React__default.createElement(Flex$1, {
+        align: "center",
+        css: {
+          position: 'relative',
+          userSelect: 'none',
+          fontSize: '12px',
+          textAlign: '-webkit-center',
+          display: ((_data13 = data[i - 1]) === null || _data13 === void 0 ? void 0 : _data13.disabled) && 'none',
+          marginTop: '$spacing-07',
+          flex: 1,
+          maxWidth: lastItem && 26
+        },
+        onClick: () => {
+          if (props.onNavClicked) props.onNavClicked(i);
+          if (!forbidClickNav && isComplete && !isHide) {
+            props.goToStep(i);
+          }
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 226,
+          columnNumber: 15
+        }
+      }, isComplete && !hideCheckedIcon && /*#__PURE__*/React__default.createElement(Flex$1, {
+        css: {
+          flex: 1
+        },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 244,
+          lineNumber: 246,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28255,14 +28274,14 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 245,
+          lineNumber: 247,
           columnNumber: 21
         }
       }, /*#__PURE__*/React__default.createElement(SvgCheckFilled$1, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 246,
+          lineNumber: 248,
           columnNumber: 23
         }
       })), !lastItem && /*#__PURE__*/React__default.createElement(Line$1, {
@@ -28270,14 +28289,17 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 248,
+          lineNumber: 250,
           columnNumber: 35
         }
       })), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default.createElement(Flex$1, {
+        css: {
+          flex: 1
+        },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 252,
+          lineNumber: 254,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28287,7 +28309,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 253,
+          lineNumber: 255,
           columnNumber: 21
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28298,12 +28320,12 @@ const Navigation = props => {
           height: 24,
           borderRadius: '$round',
           border: `4px solid ${isActive ? '$bgGreen' : '$bgInactive'}`,
-          backgroundColor: (_data15 = data[i - 1]) !== null && _data15 !== void 0 && _data15.disabled ? '$gray200' : '$white'
+          backgroundColor: (_data14 = data[i - 1]) !== null && _data14 !== void 0 && _data14.disabled ? '$gray200' : '$white'
         },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 254,
+          lineNumber: 256,
           columnNumber: 23
         }
       })), isActive && !lastItem && /*#__PURE__*/React__default.createElement(Line$1, {
@@ -28311,18 +28333,18 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 266,
+          lineNumber: 268,
           columnNumber: 47
         }
-      }))), !lastItem && !isActive && /*#__PURE__*/React__default.createElement(Line$1, {
+      })), !lastItem && !isActive && /*#__PURE__*/React__default.createElement(Line$1, {
         active: isComplete && !hideCheckedIcon,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 270,
-          columnNumber: 42
+          lineNumber: 271,
+          columnNumber: 44
         }
-      })));
+      }))));
     }
   }
   return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
@@ -28337,7 +28359,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 279,
+          lineNumber: 281,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28350,7 +28372,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 280,
+          lineNumber: 282,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(Card, {
@@ -28362,14 +28384,14 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 281,
+          lineNumber: 283,
           columnNumber: 13
         }
       }, child), /*#__PURE__*/React__default.createElement(Box, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 290,
+          lineNumber: 292,
           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)));
@@ -28377,18 +28399,18 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 276,
+      lineNumber: 278,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepperList, {
     css: Object.assign({
       borderLeft: !isMobile ? '4px solid $bgBorder' : undefined,
-      marginTop: isMobile ? 40 : undefined,
-      marginBottom: isMobile ? 30 : undefined,
+      marginBottom: isMobile ? 60 : undefined,
       height: !isMobile ? height : undefined,
       opacity: isHide ? 0 : undefined,
-      position: !isMobile && 'sticky',
-      top: !isMobile ? 44 : 40
+      position: 'sticky',
+      top: !isMobile ? 44 : 40,
+      zIndex: 10
     }, cssNav, mobileHidden),
     gap: 5,
     justify: isMobile ? 'center' : undefined,
@@ -28396,30 +28418,28 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 295,
+      lineNumber: 297,
       columnNumber: 7
     }
-  }, isMobile ? /*#__PURE__*/React__default.createElement(StyledDiv, {
+  }, isMobile ? /*#__PURE__*/React__default.createElement(Box, {
     css: {
       position: 'relative',
-      width: '100vw'
+      width: '100vw',
+      backgroundColor: '$bgBorder'
     },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 312,
+      lineNumber: 314,
       columnNumber: 11
     }
-  }, /*#__PURE__*/React__default.createElement(Flex$1, {
+  }, /*#__PURE__*/React__default.createElement(MobileContainer$1, {
     direction: "row",
     justify: "between",
-    css: Object.assign({}, centerAbsolute, {
-      top: -12
-    }),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 313,
+      lineNumber: 315,
       columnNumber: 13
     }
   }, stepItems)) : stepItems));
@@ -28503,7 +28523,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 410,
+      lineNumber: 405,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
@@ -28526,7 +28546,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 411,
+      lineNumber: 406,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -28540,7 +28560,7 @@ const Default = props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 435,
+        lineNumber: 430,
         columnNumber: 13
       }
     }),
@@ -28550,7 +28570,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 429,
+      lineNumber: 424,
       columnNumber: 9
     }
   }), props.children)));