@majoo-ui/react 1.55.24 → 1.55.26

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('react-i18next'), require('moment'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react'), require('otp-input-react'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', 'react-i18next', 'moment', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react', 'otp-input-react', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.reactI18next, global.moment, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.react$1, global.OTPInput, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, reactI18next, moment, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, react$1, OTPInput, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('react-i18next'), require('moment'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react'), require('@radix-ui/react-dialog'), require('otp-input-react'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-accordion'), require('dayzed'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', 'react-i18next', 'moment', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react', '@radix-ui/react-dialog', 'otp-input-react', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-accordion', 'dayzed', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.reactI18next, global.moment, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.react$1, global.DialogPrimitive, global.OTPInput, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.AccordionPrimitive, global.dayzed, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, reactI18next, moment, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, react$1, DialogPrimitive, OTPInput, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, AccordionPrimitive, dayzed, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -39,12 +39,12 @@
   var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
   var InfiniteScroll__default = /*#__PURE__*/_interopDefaultLegacy(InfiniteScroll);
   var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+  var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
   var OTPInput__default = /*#__PURE__*/_interopDefaultLegacy(OTPInput);
   var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
   var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
   var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
   var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
-  var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
   var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
   var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
   var ADialog__namespace = /*#__PURE__*/_interopNamespace(ADialog);
@@ -2632,7 +2632,7 @@
 
   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',
@@ -2660,7 +2660,7 @@
         contentHeader
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
-    return /*#__PURE__*/React__default["default"].createElement(StyledDiv$3, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(StyledDiv$2, _extends({
       id: "retina-container",
       css: Object.assign({
         maxWidth: isCollapse ? '1206px' : '1006px'
@@ -8549,6 +8549,104 @@
     ];
   });
 
+  var StyledOverlay$2 = styled(DialogPrimitive__namespace.Overlay, {
+    backgroundColor: '$bgDimmer',
+    position: 'fixed',
+    inset: 0
+  });
+  var StyledContent$5 = styled(DialogPrimitive__namespace.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'
+    }
+  });
+  var Content$2 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+    var children = props.children,
+      rest = __rest(props, ["children"]);
+    return jsxRuntime.jsx(StyledContent$5, __assign({}, rest, {
+      ref: ref
+    }, {
+      children: children
+    }), void 0);
+  });
+  var StyledTitle$1 = styled(DialogPrimitive__namespace.Title, {});
+  var StyledDescription$2 = styled(DialogPrimitive__namespace.Description, {
+    margin: '10px 0 20px',
+    color: '$textSecondary',
+    fontSize: 15,
+    lineHeight: 1.5
+  });
+  // Exports
+  var Dialog = DialogPrimitive__namespace.Root;
+  var DialogTrigger = DialogPrimitive__namespace.Trigger;
+  var DialogContent = Content$2;
+  var DialogTitle = StyledTitle$1;
+  var DialogDescription = StyledDescription$2;
+  var DialogClose = DialogPrimitive__namespace.Close;
+  var DialogOverlay = StyledOverlay$2;
+  var DialogPortal = DialogPrimitive__namespace.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 {
@@ -8594,7 +8692,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$y,
-        lineNumber: 46,
+        lineNumber: 49,
         columnNumber: 10
       }
     }, children);
@@ -8616,7 +8714,8 @@
   const PopoverContent = ({
     children,
     isMobile,
-    style
+    style,
+    portalled
   }) => {
     const {
       openState,
@@ -8629,7 +8728,23 @@
       },
       getFloatingProps
     } = React.useContext(PopoverContext);
-    return openState ? /*#__PURE__*/React__default["default"].createElement(react$1.FloatingFocusManager, {
+    return openState ? /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
+      condition: portalled,
+      wrapper: child => /*#__PURE__*/React__default["default"].createElement(react$1.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["default"].createElement(react$1.FloatingFocusManager, {
       context: context,
       modal: false,
       order: ['reference', 'content'],
@@ -8637,8 +8752,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$y,
-        lineNumber: 64,
-        columnNumber: 5
+        lineNumber: 68,
+        columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", _extends({}, getFloatingProps({
       ref: refs.setFloating,
@@ -8652,10 +8767,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$y,
-        lineNumber: 65,
-        columnNumber: 7
+        lineNumber: 69,
+        columnNumber: 9
       }
-    }), children)) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
+    }), children))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
   };
   const PopoverClose = _ref => {
     let {
@@ -8673,7 +8788,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$y,
-        lineNumber: 88,
+        lineNumber: 93,
         columnNumber: 5
       }
     }), children);
@@ -8913,7 +9028,7 @@
     borderTop: '1px solid $bgBorder',
     pointerEvents: 'auto'
   });
-  var StyledDiv$2 = styled('div', {
+  var StyledDiv$1 = styled('div', {
     color: '$textDisable',
     display: 'flex',
     alignItems: 'center'
@@ -9354,7 +9469,7 @@
                           }, void 0)
                         }), void 0)
                       }), void 0) : jsxRuntime.jsx(SelectOption, {
-                        children: jsxRuntime.jsxs(StyledDiv$2, {
+                        children: jsxRuntime.jsxs(StyledDiv$1, {
                           children: [jsxRuntime.jsx("div", __assign({
                             style: {
                               marginRight: '6px'
@@ -9922,7 +10037,7 @@
     marginLeft: '10px',
     padding: '12px 0'
   });
-  const StyledDiv$1 = styled('div', {
+  const StyledDiv = styled('div', {
     padding: '6px 0',
     color: '$textDisable',
     display: 'inline-flex'
@@ -10530,7 +10645,7 @@
         lineNumber: 692,
         columnNumber: 13
       }
-    }), /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, {
+    }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
@@ -12288,7 +12403,7 @@
       size: 'lg'
     }
   });
-  const StyledContent$5 = styled(TabsPrimitive__namespace.Content, {
+  const StyledContent$4 = styled(TabsPrimitive__namespace.Content, {
     flexGrow: 1,
     borderRadius: '$lg',
     backgroundColor: '$white',
@@ -12508,7 +12623,7 @@
   };
   const TabsContent$1 = _ref4 => {
     let props = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
-    return /*#__PURE__*/React__default["default"].createElement(StyledContent$5, _extends({}, props, {
+    return /*#__PURE__*/React__default["default"].createElement(StyledContent$4, _extends({}, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
@@ -13191,104 +13306,6 @@
     }
   });
 
-  var StyledOverlay$2 = styled(DialogPrimitive__namespace.Overlay, {
-    backgroundColor: '$bgDimmer',
-    position: 'fixed',
-    inset: 0
-  });
-  var StyledContent$4 = styled(DialogPrimitive__namespace.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'
-    }
-  });
-  var Content$2 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-    var children = props.children,
-      rest = __rest(props, ["children"]);
-    return jsxRuntime.jsx(StyledContent$4, __assign({}, rest, {
-      ref: ref
-    }, {
-      children: children
-    }), void 0);
-  });
-  var StyledTitle$1 = styled(DialogPrimitive__namespace.Title, {});
-  var StyledDescription$2 = styled(DialogPrimitive__namespace.Description, {
-    margin: '10px 0 20px',
-    color: '$textSecondary',
-    fontSize: 15,
-    lineHeight: 1.5
-  });
-  // Exports
-  var Dialog = DialogPrimitive__namespace.Root;
-  var DialogTrigger = DialogPrimitive__namespace.Trigger;
-  var DialogContent = Content$2;
-  var DialogTitle = StyledTitle$1;
-  var DialogDescription = StyledDescription$2;
-  var DialogClose = DialogPrimitive__namespace.Close;
-  var DialogOverlay = StyledOverlay$2;
-  var DialogPortal = DialogPrimitive__namespace.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;
@@ -17570,7 +17587,8 @@
       maxDate = _a.maxDate,
       readOnly = _a.readOnly,
       isInvalid = _a.isInvalid,
-      allowReset = _a.allowReset;
+      allowReset = _a.allowReset,
+      portalled = _a.portalled;
     var _f = reactI18next.useTranslation('MajooUI/datePicker'),
       t = _f.t,
       i18n = _f.i18n;
@@ -17760,9 +17778,11 @@
             children: renderInputGroup()
           }), void 0)
         }, void 0)
-      }), void 0), jsxRuntime.jsx(PopoverContent, {
+      }), void 0), jsxRuntime.jsx(PopoverContent, __assign({
+        portalled: portalled
+      }, {
         children: renderDatePicker()
-      }, void 0)]
+      }), void 0)]
     }), void 0) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(Box, __assign({
         css: css
@@ -28238,14 +28258,15 @@
       }
     }
   });
-  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,
@@ -28416,7 +28437,7 @@
       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["default"].createElement(StepperItem, {
           css: {
             opacity: data[i - 1].hidden ? 0 : undefined,
@@ -28501,57 +28522,28 @@
             lineNumber: 186,
             columnNumber: 19
           }
-        }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default["default"].createElement(Flex$1, {
-          align: "center",
+        }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isActive && /*#__PURE__*/React__default["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["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["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["default"].createElement(StyledDiv, {
+        }, /*#__PURE__*/React__default["default"].createElement(Box, {
           css: {
             width: 'max-content',
             color: '$textGreen',
@@ -28560,17 +28552,17 @@
           __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["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["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["default"].createElement(StyledCircleInfoOutline, {
@@ -28579,19 +28571,19 @@
           __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["default"].createElement(Flex$1, {
+        })), ((_data11 = data[i - 1]) === null || _data11 === void 0 ? void 0 : _data11.comingSoon) && /*#__PURE__*/React__default["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["default"].createElement(Tag, {
@@ -28600,14 +28592,41 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 236,
+            lineNumber: 218,
             columnNumber: 25
           }
-        }, "Coming Soon"))), isComplete && !hideCheckedIcon && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        }, "Coming Soon")))), /*#__PURE__*/React__default["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: 244,
+            lineNumber: 226,
+            columnNumber: 15
+          }
+        }, isComplete && !hideCheckedIcon && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+          css: {
+            flex: 1
+          },
+          __self: undefined,
+          __source: {
+            fileName: _jsxFileName$4,
+            lineNumber: 246,
             columnNumber: 19
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28617,14 +28636,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 245,
+            lineNumber: 247,
             columnNumber: 21
           }
         }, /*#__PURE__*/React__default["default"].createElement(SvgCheckFilled$1, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 246,
+            lineNumber: 248,
             columnNumber: 23
           }
         })), !lastItem && /*#__PURE__*/React__default["default"].createElement(Line$1, {
@@ -28632,14 +28651,17 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 248,
+            lineNumber: 250,
             columnNumber: 35
           }
         })), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+          css: {
+            flex: 1
+          },
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 252,
+            lineNumber: 254,
             columnNumber: 19
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28649,7 +28671,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 253,
+            lineNumber: 255,
             columnNumber: 21
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28660,12 +28682,12 @@
             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["default"].createElement(Line$1, {
@@ -28673,18 +28695,18 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 266,
+            lineNumber: 268,
             columnNumber: 47
           }
-        }))), !lastItem && !isActive && /*#__PURE__*/React__default["default"].createElement(Line$1, {
+        })), !lastItem && !isActive && /*#__PURE__*/React__default["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["default"].createElement(ConditionalWrapper, {
@@ -28699,7 +28721,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 279,
+            lineNumber: 281,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28712,7 +28734,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 280,
+            lineNumber: 282,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(Card, {
@@ -28724,14 +28746,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 281,
+            lineNumber: 283,
             columnNumber: 13
           }
         }, child), /*#__PURE__*/React__default["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)));
@@ -28739,18 +28761,18 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 276,
+        lineNumber: 278,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["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,
@@ -28758,30 +28780,28 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 295,
+        lineNumber: 297,
         columnNumber: 7
       }
-    }, isMobile ? /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
+    }, isMobile ? /*#__PURE__*/React__default["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["default"].createElement(Flex$1, {
+    }, /*#__PURE__*/React__default["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));
@@ -28865,7 +28885,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 410,
+        lineNumber: 405,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
@@ -28888,7 +28908,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 411,
+        lineNumber: 406,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Stepper, _extends({}, props, {
@@ -28902,7 +28922,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 435,
+          lineNumber: 430,
           columnNumber: 13
         }
       }),
@@ -28912,7 +28932,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 429,
+        lineNumber: 424,
         columnNumber: 9
       }
     }), props.children)));