@majoo-ui/react 1.54.7 → 1.54.8

package/components/stepWizard/index.d.ts

@@ -31,6 +31,7 @@ interface IStepWizardProps {
     onChangeVisibility?: (isHide: boolean) => void;
     onNavClicked?: () => void;
     hideCheckedIcon?: boolean;
+    appendContent?: JSX.Element;
 }
 declare const StepWizard: (props: IStepWizardProps) => JSX.Element;
 export default StepWizard;

package/components/table/Table.d.ts

@@ -1273,6 +1273,10 @@ export interface TableColumnProps {
      * If true, the column will be rendered on the bottom flex of mobile layout.
      */
     isAction?: boolean;
+    /**
+     * Additional column header styles css.
+     */
+    headerCss?: CSS;
 }
 export declare const TableColumn: React.FC<TableColumnProps>;
 export {};

package/index.esm.js

@@ -18705,7 +18705,7 @@ function Table({
                       minWidth: column.colMinWidth
                     }
                   }]), {
-                    css: Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth))
+                    css: Object.assign(Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss)
                   }, {
                     children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, Object.assign({
                       isSortedDesc: column.isSortedDesc,
@@ -18802,11 +18802,11 @@ function Table({
                       subCell: true,
                       colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
                       headerSubCell: true,
-                      css: Object.assign({
+                      css: Object.assign(Object.assign({
                         paddingTop: `${index === 0 ? '24px' : '13px'} !important`,
                         paddingBottom: `${index === subRowCells.length - 1 ? '24px' : '13px'} !important`,
                         backgroundColor: '$bgGray'
-                      }, stickyPositionStyling(cell.column))
+                      }, stickyPositionStyling(cell.column)), cell.column.headerCss)
                     }, {
                       children: jsx(Paragraph, Object.assign({
                         paragraph: "shortContentBold"
@@ -19915,10 +19915,28 @@ const PageDialogFooter = styled('div');
 PageDialogFooter.displayName = 'PageDialogFooter';
 const PageDialogTitle = styled('div');
 PageDialogTitle.displayName = 'PageDialogTitle';
-const PageDialogContent = styled('div');
+const PageDialogContent = styled('div', {});
 PageDialogContent.displayName = 'PageDialogContent';
 const PageDialogTrigger = styled('div');
 PageDialogTrigger.displayName = 'PageDialogTrigger';
+const ContentWrapper = styled(Box, {
+  variants: {
+    wrapperSize: {
+      md: {
+        padding: '40px 24px 0px',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        maxWidth: 982
+      },
+      lg: {
+        padding: '40px 24px 0px',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        maxWidth: 1400
+      }
+    }
+  }
+});
 
 const findNodeChild = (array, displayName) => {
   const result = array.find(child => {
@@ -19962,6 +19980,8 @@ const HEADER_HEIGHT_MOBILE = 76;
  */
 
 const PageDialog = props => {
+  var _a, _b;
+
   const {
     children,
     size,
@@ -20133,6 +20153,20 @@ const PageDialog = props => {
               }, void 0)
             }), void 0)]
           }), void 0), pageDialogChildren && jsx(Box, Object.assign({}, pageDialogChildren.props, {
+            children: jsx(ConditionalWrapper, Object.assign({
+              condition: !isMobile && ((_a = pageDialogChildren.props) === null || _a === void 0 ? void 0 : _a.wrapperSize),
+              wrapper: child => {
+                var _a;
+
+                return jsx(ContentWrapper, Object.assign({
+                  wrapperSize: (_a = pageDialogChildren.props) === null || _a === void 0 ? void 0 : _a.wrapperSize
+                }, {
+                  children: child
+                }), void 0);
+              }
+            }, {
+              children: (_b = pageDialogChildren.props) === null || _b === void 0 ? void 0 : _b.children
+            }), void 0),
             css: Object.assign({
               flexGrow: 1,
               maxHeight: footerChildren ? `calc(100vh - ${isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT}px - ${FOOTER_HEIGHT}px)` : `calc(100vh - ${isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT}px)`,
@@ -27731,9 +27765,10 @@ const StyledCircleInfoOutline = styled(CircleInfoOutline, {});
 const WrapperDiv = styled('div', {
   '& .stepperInstance': {
     display: 'flex',
-    gap: 10,
+    gap: 25,
     '& .rsw_2Y': {
       width: '100%',
+      maxWidth: 982,
       '& .rsw_2f': {
         display: 'none'
       },
@@ -27829,7 +27864,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 104,
+          lineNumber: 106,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Span, {
@@ -27839,7 +27874,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 119,
+          lineNumber: 121,
           columnNumber: 15
         }
       }), isComplete && !hideCheckedIcon && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -27851,8 +27886,8 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 120,
-          columnNumber: 50
+          lineNumber: 123,
+          columnNumber: 17
         }
       }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) == null ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) == null ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
         align: "center",
@@ -27860,7 +27895,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 123,
+          lineNumber: 127,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -27872,7 +27907,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 124,
+          lineNumber: 128,
           columnNumber: 19
         }
       })), ((_data4 = data[i - 1]) == null ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -27883,7 +27918,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 128,
+          lineNumber: 132,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Tag, {
@@ -27892,7 +27927,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 129,
+          lineNumber: 133,
           columnNumber: 19
         }
       }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -27906,10 +27941,17 @@ const Navigation = props => {
           fontSize: '12px',
           textAlign: '-webkit-center'
         },
+        onClick: () => {
+          if (props.onNavClicked) props.onNavClicked(i);
+
+          if (!forbidClickNav && isComplete && !isHide) {
+            props.goToStep(i);
+          }
+        },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 137,
+          lineNumber: 141,
           columnNumber: 13
         }
       }, isComplete && !hideCheckedIcon && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -27918,7 +27960,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 149,
+          lineNumber: 159,
           columnNumber: 50
         }
       }), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -27934,7 +27976,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 151,
+          lineNumber: 161,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -27944,7 +27986,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 163,
+          lineNumber: 173,
           columnNumber: 15
         }
       }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) == null ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) == null ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -27954,7 +27996,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 167,
+          lineNumber: 177,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -27963,7 +28005,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 168,
+          lineNumber: 178,
           columnNumber: 19
         }
       })), isActive && ((_data10 = data[i - 1]) == null ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -27975,7 +28017,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 172,
+          lineNumber: 182,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Tag, {
@@ -27984,14 +28026,66 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 173,
+          lineNumber: 183,
           columnNumber: 19
         }
       }, "Coming Soon"))));
     }
   }
 
-  return /*#__PURE__*/React__default.createElement(StepperList, {
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: !isMobile,
+    wrapper: child => /*#__PURE__*/React__default.createElement(Box, {
+      css: {
+        opacity: isHide ? 0 : undefined,
+        maxWidth: 311
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 196,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default.createElement(Flex$1, {
+      css: {
+        position: !isMobile && 'sticky',
+        top: !isMobile ? 44 : 40
+      },
+      direction: "column",
+      gap: 7,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 197,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default.createElement(Card, {
+      css: {
+        height: 'fit-content',
+        padding: 0
+      },
+      showBottomLine: false,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 198,
+        columnNumber: 13
+      }
+    }, child), /*#__PURE__*/React__default.createElement(Box, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 207,
+        columnNumber: 13
+      }
+    }, typeof (props == null ? void 0 : props.appendContent) === 'function' ? props == null ? void 0 : props.appendContent == null ? void 0 : props.appendContent() : props == null ? void 0 : props.appendContent))),
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 193,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement(StepperList, {
     css: Object.assign({
       borderLeft: !isMobile ? '4px solid $bgBorder' : undefined,
       marginBottom: isMobile ? 65 : undefined,
@@ -28006,8 +28100,8 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 183,
-      columnNumber: 5
+      lineNumber: 212,
+      columnNumber: 7
     }
   }, isMobile ? /*#__PURE__*/React__default.createElement(StyledDiv, {
     css: {
@@ -28018,8 +28112,8 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 199,
-      columnNumber: 9
+      lineNumber: 228,
+      columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
     direction: "row",
@@ -28031,10 +28125,10 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 200,
-      columnNumber: 11
+      lineNumber: 229,
+      columnNumber: 13
     }
-  }, stepItems)) : stepItems);
+  }, stepItems)) : stepItems));
 };
 const Default = props => {
   const [state, updateState] = React__default.useState(Object.assign({
@@ -28130,7 +28224,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 297,
+      lineNumber: 327,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
@@ -28153,7 +28247,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 298,
+      lineNumber: 328,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -28163,11 +28257,12 @@ const Default = props => {
     nav: /*#__PURE__*/React__default.createElement(Navigation, {
       onNavClicked: props.onNavClicked,
       isComplete: state.isComplete,
+      appendContent: props == null ? void 0 : props.appendContent,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 321,
-        columnNumber: 16
+        lineNumber: 352,
+        columnNumber: 13
       }
     }),
     initialStep: props.initialStep,
@@ -28176,7 +28271,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 316,
+      lineNumber: 346,
       columnNumber: 9
     }
   }), props.children)));

package/index.umd.js

@@ -19042,7 +19042,7 @@
                         }
                       }];
                     }), {
-                      css: __assign(__assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth))
+                      css: __assign(__assign(__assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss)
                     }, {
                       children: typeof headerRender === 'string' ? jsxRuntime.jsx(TableHeaderCellContainer, __assign({
                         isSortedDesc: column.isSortedDesc,
@@ -19154,11 +19154,11 @@
                           subCell: true,
                           colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
                           headerSubCell: true,
-                          css: __assign({
+                          css: __assign(__assign({
                             paddingTop: "".concat(index === 0 ? '24px' : '13px', " !important"),
                             paddingBottom: "".concat(index === subRowCells.length - 1 ? '24px' : '13px', " !important"),
                             backgroundColor: '$bgGray'
-                          }, stickyPositionStyling(cell.column))
+                          }, stickyPositionStyling(cell.column)), cell.column.headerCss)
                         }, {
                           children: jsxRuntime.jsx(Paragraph, __assign({
                             paragraph: "shortContentBold"
@@ -20275,10 +20275,28 @@
   PageDialogFooter.displayName = 'PageDialogFooter';
   var PageDialogTitle = styled('div');
   PageDialogTitle.displayName = 'PageDialogTitle';
-  var PageDialogContent = styled('div');
+  var PageDialogContent = styled('div', {});
   PageDialogContent.displayName = 'PageDialogContent';
   var PageDialogTrigger = styled('div');
   PageDialogTrigger.displayName = 'PageDialogTrigger';
+  var ContentWrapper = styled(Box, {
+    variants: {
+      wrapperSize: {
+        md: {
+          padding: '40px 24px 0px',
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          maxWidth: 982
+        },
+        lg: {
+          padding: '40px 24px 0px',
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          maxWidth: 1400
+        }
+      }
+    }
+  });
 
   var findNodeChild = function findNodeChild(array, displayName) {
     var result = array.find(function (child) {
@@ -20322,6 +20340,8 @@
    */
 
   var PageDialog = function PageDialog(props) {
+    var _a, _b;
+
     var children = props.children,
         size = props.size,
         css = props.css,
@@ -20495,6 +20515,20 @@
                 }, void 0)
               }), void 0)]
             }), void 0), pageDialogChildren && jsxRuntime.jsx(Box, __assign({}, pageDialogChildren.props, {
+              children: jsxRuntime.jsx(ConditionalWrapper, __assign({
+                condition: !isMobile && ((_a = pageDialogChildren.props) === null || _a === void 0 ? void 0 : _a.wrapperSize),
+                wrapper: function (child) {
+                  var _a;
+
+                  return jsxRuntime.jsx(ContentWrapper, __assign({
+                    wrapperSize: (_a = pageDialogChildren.props) === null || _a === void 0 ? void 0 : _a.wrapperSize
+                  }, {
+                    children: child
+                  }), void 0);
+                }
+              }, {
+                children: (_b = pageDialogChildren.props) === null || _b === void 0 ? void 0 : _b.children
+              }), void 0),
               css: __assign({
                 flexGrow: 1,
                 maxHeight: footerChildren ? "calc(100vh - ".concat(isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT, "px - ").concat(FOOTER_HEIGHT, "px)") : "calc(100vh - ".concat(isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT, "px)"),
@@ -28140,9 +28174,10 @@
   const WrapperDiv = styled('div', {
     '& .stepperInstance': {
       display: 'flex',
-      gap: 10,
+      gap: 25,
       '& .rsw_2Y': {
         width: '100%',
+        maxWidth: 982,
         '& .rsw_2f': {
           display: 'none'
         },
@@ -28238,7 +28273,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 104,
+            lineNumber: 106,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Span, {
@@ -28248,7 +28283,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 119,
+            lineNumber: 121,
             columnNumber: 15
           }
         }), isComplete && !hideCheckedIcon && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -28260,8 +28295,8 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 120,
-            columnNumber: 50
+            lineNumber: 123,
+            columnNumber: 17
           }
         }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) == null ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) == null ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           align: "center",
@@ -28269,7 +28304,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 123,
+            lineNumber: 127,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -28281,7 +28316,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 124,
+            lineNumber: 128,
             columnNumber: 19
           }
         })), ((_data4 = data[i - 1]) == null ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28292,7 +28327,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 128,
+            lineNumber: 132,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -28301,7 +28336,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 129,
+            lineNumber: 133,
             columnNumber: 19
           }
         }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28315,10 +28350,17 @@
             fontSize: '12px',
             textAlign: '-webkit-center'
           },
+          onClick: () => {
+            if (props.onNavClicked) props.onNavClicked(i);
+
+            if (!forbidClickNav && isComplete && !isHide) {
+              props.goToStep(i);
+            }
+          },
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 137,
+            lineNumber: 141,
             columnNumber: 13
           }
         }, isComplete && !hideCheckedIcon && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -28327,7 +28369,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 149,
+            lineNumber: 159,
             columnNumber: 50
           }
         }), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28343,7 +28385,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 151,
+            lineNumber: 161,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -28353,7 +28395,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 163,
+            lineNumber: 173,
             columnNumber: 15
           }
         }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) == null ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) == null ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -28363,7 +28405,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 167,
+            lineNumber: 177,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -28372,7 +28414,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 168,
+            lineNumber: 178,
             columnNumber: 19
           }
         })), isActive && ((_data10 = data[i - 1]) == null ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28384,7 +28426,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 172,
+            lineNumber: 182,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -28393,14 +28435,66 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 173,
+            lineNumber: 183,
             columnNumber: 19
           }
         }, "Coming Soon"))));
       }
     }
 
-    return /*#__PURE__*/React__default["default"].createElement(StepperList, {
+    return /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
+      condition: !isMobile,
+      wrapper: child => /*#__PURE__*/React__default["default"].createElement(Box, {
+        css: {
+          opacity: isHide ? 0 : undefined,
+          maxWidth: 311
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 196,
+          columnNumber: 9
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        css: {
+          position: !isMobile && 'sticky',
+          top: !isMobile ? 44 : 40
+        },
+        direction: "column",
+        gap: 7,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 197,
+          columnNumber: 11
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Card, {
+        css: {
+          height: 'fit-content',
+          padding: 0
+        },
+        showBottomLine: false,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 198,
+          columnNumber: 13
+        }
+      }, child), /*#__PURE__*/React__default["default"].createElement(Box, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 207,
+          columnNumber: 13
+        }
+      }, typeof (props == null ? void 0 : props.appendContent) === 'function' ? props == null ? void 0 : props.appendContent == null ? void 0 : props.appendContent() : props == null ? void 0 : props.appendContent))),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 193,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(StepperList, {
       css: Object.assign({
         borderLeft: !isMobile ? '4px solid $bgBorder' : undefined,
         marginBottom: isMobile ? 65 : undefined,
@@ -28415,8 +28509,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 183,
-        columnNumber: 5
+        lineNumber: 212,
+        columnNumber: 7
       }
     }, isMobile ? /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
       css: {
@@ -28427,8 +28521,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 199,
-        columnNumber: 9
+        lineNumber: 228,
+        columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       direction: "row",
@@ -28440,10 +28534,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 200,
-        columnNumber: 11
+        lineNumber: 229,
+        columnNumber: 13
       }
-    }, stepItems)) : stepItems);
+    }, stepItems)) : stepItems));
   };
   const Default = props => {
     const [state, updateState] = React__default["default"].useState(Object.assign({
@@ -28539,7 +28633,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 297,
+        lineNumber: 327,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
@@ -28562,7 +28656,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 298,
+        lineNumber: 328,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Stepper, _extends({}, props, {
@@ -28572,11 +28666,12 @@
       nav: /*#__PURE__*/React__default["default"].createElement(Navigation, {
         onNavClicked: props.onNavClicked,
         isComplete: state.isComplete,
+        appendContent: props == null ? void 0 : props.appendContent,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 321,
-          columnNumber: 16
+          lineNumber: 352,
+          columnNumber: 13
         }
       }),
       initialStep: props.initialStep,
@@ -28585,7 +28680,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 316,
+        lineNumber: 346,
         columnNumber: 9
       }
     }), props.children)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.54.7",
+  "version": "1.54.8",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",