@majoo-ui/react 1.54.9 → 1.54.10

package/components/pageDialog/PageDialog.d.ts

@@ -403,24 +403,6 @@ interface PageDialogProps extends IDialog, DialogContentProps {
      */
     disabledCloseButton?: boolean;
 }
-/**
- * PageDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.
- * https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
- * @param size - default fullsize
- * @param layer - z-index default 1400
- * @param isMobile - force mobile/desktop view, default is responsive
- * @param onOpenAutoFocus - set default open behaviour
- *
- * @example
- * // Uncontrolled Example
- *  <PageDialog>
- *    <PageDialogTrigger>Button Trigger</PageDialogTrigger>
- *    <PageDialogTitle>Title</PageDialogTitle>
- *    <PageDialogContent>Content</PageDialogContent>
- *    <PageDialogFooter>Footer</PageDialogFooter>
- *  </PageDialog>
- * @component
- */
 export declare const PageDialog: {
     (props: PageDialogProps): JSX.Element;
     Trigger: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {

package/index.esm.js

@@ -36,7 +36,6 @@ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { EditableInput, ColorWrap, Saturation, Hue, Alpha, Swatch } from 'react-color/lib/components/common';
 import * as color from 'react-color/lib/helpers/color';
 import StepWizard$1 from 'react-step-wizard';
-import ScrollSpy from 'react-ui-scrollspy';
 import { useJsApiLoader, GoogleMap, StandaloneSearchBox } from '@react-google-maps/api';
 import request from 'superagent';
 import { ResponsiveContainer, LineChart as LineChart$1, XAxis, YAxis, CartesianGrid, Tooltip as Tooltip$2, Line as Line$1 } from 'recharts';
@@ -45,6 +44,7 @@ import { Editor } from 'react-draft-wysiwyg';
 import { ContextMenuTrigger as ContextMenuTrigger$1, ContextMenu as ContextMenu$1, MenuItem } from 'react-contextmenu';
 import ReactSkeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import 'react-loading-skeleton/dist/skeleton.css';
+import ScrollSpy from 'react-ui-scrollspy';
 import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
 import imageCompressionComponent from 'browser-image-compression';
 import { useSticky } from 'react-table-sticky';
@@ -19959,25 +19959,6 @@ const findNodeChild = (array, displayName) => {
 const FOOTER_HEIGHT = 64;
 const HEADER_HEIGHT = 56;
 const HEADER_HEIGHT_MOBILE = 76;
-/**
- * PageDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.
- * https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
- * @param size - default fullsize
- * @param layer - z-index default 1400
- * @param isMobile - force mobile/desktop view, default is responsive
- * @param onOpenAutoFocus - set default open behaviour
- *
- * @example
- * // Uncontrolled Example
- *  <PageDialog>
- *    <PageDialogTrigger>Button Trigger</PageDialogTrigger>
- *    <PageDialogTitle>Title</PageDialogTitle>
- *    <PageDialogContent>Content</PageDialogContent>
- *    <PageDialogFooter>Footer</PageDialogFooter>
- *  </PageDialog>
- * @component
- */
-
 const PageDialog = props => {
   var _a, _b;
 
@@ -20152,6 +20133,7 @@ const PageDialog = props => {
               }, void 0)
             }), void 0)]
           }), void 0), pageDialogChildren && jsx(Box, Object.assign({}, pageDialogChildren.props, {
+            ref: pageDialogChildren === null || pageDialogChildren === void 0 ? void 0 : pageDialogChildren.ref,
             children: jsx(ConditionalWrapper, Object.assign({
               condition: !isMobile && ((_a = pageDialogChildren.props) === null || _a === void 0 ? void 0 : _a.wrapperSize),
               wrapper: child => {
@@ -28398,6 +28380,13 @@ const Separator = styled('div', {
     }
   }
 });
+const StyledCard = styled(Card, {
+  height: 'fit-content',
+  width: 'fit-content',
+  maxWidth: 311,
+  padding: '24px !important',
+  boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.04)'
+});
 
 function Content({
   content,
@@ -28433,7 +28422,7 @@ function Content({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 97,
+      lineNumber: 106,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Separator, {
@@ -28441,7 +28430,7 @@ function Content({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 98,
+      lineNumber: 107,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(ListWrap, {
@@ -28451,7 +28440,7 @@ function Content({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 99,
+      lineNumber: 108,
       columnNumber: 7
     }
   }, (_getDatasets = getDatasets(content, activeId, isCollapse)) == null ? void 0 : _getDatasets.map((item, index) => {
@@ -28460,7 +28449,7 @@ function Content({
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 102,
+        lineNumber: 111,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28479,7 +28468,7 @@ function Content({
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 103,
+        lineNumber: 112,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(Title$1, {
@@ -28514,7 +28503,7 @@ function Content({
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 117,
+        lineNumber: 126,
         columnNumber: 17
       }
     }, item == null ? void 0 : item.title), item == null ? void 0 : item.icon));
@@ -28544,7 +28533,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 160,
+      lineNumber: 169,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content, {
@@ -28556,7 +28545,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 161,
+      lineNumber: 170,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Box, {
@@ -28568,7 +28557,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 168,
+      lineNumber: 177,
       columnNumber: 7
     }
   }, mobileCollapse ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
@@ -28578,7 +28567,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 170,
+      lineNumber: 179,
       columnNumber: 11
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -28588,7 +28577,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 172,
+      lineNumber: 181,
       columnNumber: 11
     }
   }))) : /*#__PURE__*/React__default.createElement(DesktopContainer, {
@@ -28597,9 +28586,17 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 177,
+      lineNumber: 186,
       columnNumber: 5
     }
+  }, /*#__PURE__*/React__default.createElement(StyledCard, {
+    showBottomLine: false,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 187,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React__default.createElement(Content, {
     isCollapse: true,
     isDialog: isDialog,
@@ -28608,13 +28605,31 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 178,
-      columnNumber: 7
+      lineNumber: 188,
+      columnNumber: 9
     }
-  }));
+  })));
 }
 
-const Page = styled(ScrollSpy);
+const StyledPage = styled(Box, {
+  maxWidth: 982
+});
+const Page = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(StyledPage, {
+  ref: ref,
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$2,
+    lineNumber: 197,
+    columnNumber: 3
+  }
+}, /*#__PURE__*/React__default.createElement(ScrollSpy, _extends({}, props, {
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$2,
+    lineNumber: 198,
+    columnNumber: 5
+  }
+}))));
 Page.displayName = 'TableOfContent.Page';
 TableOfContent.Page = Page;
 TableOfContent.defaultProps = {

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('@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('otp-input-react'), require('@floating-ui/react-dom-interactions'), 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('moment'), 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-ui-scrollspy'), 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-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', '@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', 'otp-input-react', '@floating-ui/react-dom-interactions', '@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', 'moment', '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-ui-scrollspy', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', '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.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, 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('@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('otp-input-react'), require('@floating-ui/react-dom-interactions'), 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('moment'), 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', '@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', 'otp-input-react', '@floating-ui/react-dom-interactions', '@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', 'moment', '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.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, 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, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, 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 }; }
 
@@ -52,9 +52,9 @@
   var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
   var color__namespace = /*#__PURE__*/_interopNamespace(color);
   var StepWizard__default = /*#__PURE__*/_interopDefaultLegacy(StepWizard$1);
-  var ScrollSpy__default = /*#__PURE__*/_interopDefaultLegacy(ScrollSpy);
   var request__default = /*#__PURE__*/_interopDefaultLegacy(request);
   var ReactSkeleton__default = /*#__PURE__*/_interopDefaultLegacy(ReactSkeleton);
+  var ScrollSpy__default = /*#__PURE__*/_interopDefaultLegacy(ScrollSpy);
   var ReactCrop__default = /*#__PURE__*/_interopDefaultLegacy(ReactCrop);
   var imageCompressionComponent__default = /*#__PURE__*/_interopDefaultLegacy(imageCompressionComponent);
 
@@ -20319,25 +20319,6 @@
   var FOOTER_HEIGHT = 64;
   var HEADER_HEIGHT = 56;
   var HEADER_HEIGHT_MOBILE = 76;
-  /**
-   * PageDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.
-   * https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
-   * @param size - default fullsize
-   * @param layer - z-index default 1400
-   * @param isMobile - force mobile/desktop view, default is responsive
-   * @param onOpenAutoFocus - set default open behaviour
-   *
-   * @example
-   * // Uncontrolled Example
-   *  <PageDialog>
-   *    <PageDialogTrigger>Button Trigger</PageDialogTrigger>
-   *    <PageDialogTitle>Title</PageDialogTitle>
-   *    <PageDialogContent>Content</PageDialogContent>
-   *    <PageDialogFooter>Footer</PageDialogFooter>
-   *  </PageDialog>
-   * @component
-   */
-
   var PageDialog = function PageDialog(props) {
     var _a, _b;
 
@@ -20514,6 +20495,7 @@
                 }, void 0)
               }), void 0)]
             }), void 0), pageDialogChildren && jsxRuntime.jsx(Box, __assign({}, pageDialogChildren.props, {
+              ref: pageDialogChildren === null || pageDialogChildren === void 0 ? void 0 : pageDialogChildren.ref,
               children: jsxRuntime.jsx(ConditionalWrapper, __assign({
                 condition: !isMobile && ((_a = pageDialogChildren.props) === null || _a === void 0 ? void 0 : _a.wrapperSize),
                 wrapper: function (child) {
@@ -28807,6 +28789,13 @@
       }
     }
   });
+  const StyledCard = styled(Card, {
+    height: 'fit-content',
+    width: 'fit-content',
+    maxWidth: 311,
+    padding: '24px !important',
+    boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.04)'
+  });
 
   function Content({
     content,
@@ -28842,7 +28831,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 97,
+        lineNumber: 106,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator, {
@@ -28850,7 +28839,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 98,
+        lineNumber: 107,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(ListWrap, {
@@ -28860,7 +28849,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 99,
+        lineNumber: 108,
         columnNumber: 7
       }
     }, (_getDatasets = getDatasets(content, activeId, isCollapse)) == null ? void 0 : _getDatasets.map((item, index) => {
@@ -28869,7 +28858,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
-          lineNumber: 102,
+          lineNumber: 111,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28888,7 +28877,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
-          lineNumber: 103,
+          lineNumber: 112,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(Title$1, {
@@ -28923,7 +28912,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
-          lineNumber: 117,
+          lineNumber: 126,
           columnNumber: 17
         }
       }, item == null ? void 0 : item.title), item == null ? void 0 : item.icon));
@@ -28953,7 +28942,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 160,
+        lineNumber: 169,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content, {
@@ -28965,7 +28954,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 161,
+        lineNumber: 170,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -28977,7 +28966,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 168,
+        lineNumber: 177,
         columnNumber: 7
       }
     }, mobileCollapse ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
@@ -28987,7 +28976,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 170,
+        lineNumber: 179,
         columnNumber: 11
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
@@ -28997,7 +28986,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 172,
+        lineNumber: 181,
         columnNumber: 11
       }
     }))) : /*#__PURE__*/React__default["default"].createElement(DesktopContainer, {
@@ -29006,9 +28995,17 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 177,
+        lineNumber: 186,
         columnNumber: 5
       }
+    }, /*#__PURE__*/React__default["default"].createElement(StyledCard, {
+      showBottomLine: false,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 187,
+        columnNumber: 7
+      }
     }, /*#__PURE__*/React__default["default"].createElement(Content, {
       isCollapse: true,
       isDialog: isDialog,
@@ -29017,13 +29014,31 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 178,
-        columnNumber: 7
+        lineNumber: 188,
+        columnNumber: 9
       }
-    }));
+    })));
   }
 
-  const Page = styled(ScrollSpy__default["default"]);
+  const StyledPage = styled(Box, {
+    maxWidth: 982
+  });
+  const Page = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement(StyledPage, {
+    ref: ref,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 197,
+      columnNumber: 3
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ScrollSpy__default["default"], _extends({}, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 198,
+      columnNumber: 5
+    }
+  }))));
   Page.displayName = 'TableOfContent.Page';
   TableOfContent.Page = Page;
   TableOfContent.defaultProps = {

package/package.json

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