@majoo-ui/react 1.54.9 → 1.54.11

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';
@@ -4098,11 +4098,10 @@ const CardComponent = styled('div', {
   borderRadius: '$lg',
   position: 'relative',
   backgroundColor: '$white',
-  border: '1px solid $bgBorder',
   variants: {
     shadow: {
       true: {
-        boxShadow: '0px 2px 12px #00000014'
+        boxShadow: '0px 0px 11px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.03)'
       }
     }
   }
@@ -4242,7 +4241,7 @@ const Card = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 103,
+      lineNumber: 102,
       columnNumber: 5
     }
   }, showBottomLine && /*#__PURE__*/React__default.createElement(CardLineColor, {
@@ -4250,14 +4249,14 @@ const Card = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 114,
+      lineNumber: 113,
       columnNumber: 26
     }
   }), title !== '' ? icon !== undefined ? /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 117,
+      lineNumber: 116,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(StyledIcon$1, {
@@ -4266,14 +4265,14 @@ const Card = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 118,
+      lineNumber: 117,
       columnNumber: 13
     }
   }, icon), title) : /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 124,
+      lineNumber: 123,
       columnNumber: 11
     }
   }, title) : null, children);
@@ -4293,7 +4292,7 @@ Card.propTypes = {
 Card.defaultProps = {
   className: '',
   color: 'green',
-  shadow: false,
+  shadow: true,
   radius: '$lg',
   padding: '12px',
   title: '',
@@ -19959,25 +19958,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 +20132,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 +28379,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 +28421,7 @@ function Content({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 97,
+      lineNumber: 106,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Separator, {
@@ -28441,7 +28429,7 @@ function Content({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 98,
+      lineNumber: 107,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(ListWrap, {
@@ -28451,7 +28439,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 +28448,7 @@ function Content({
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 102,
+        lineNumber: 111,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28479,7 +28467,7 @@ function Content({
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 103,
+        lineNumber: 112,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(Title$1, {
@@ -28514,7 +28502,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 +28532,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 160,
+      lineNumber: 169,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content, {
@@ -28556,7 +28544,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 161,
+      lineNumber: 170,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Box, {
@@ -28568,7 +28556,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 168,
+      lineNumber: 177,
       columnNumber: 7
     }
   }, mobileCollapse ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
@@ -28578,7 +28566,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 170,
+      lineNumber: 179,
       columnNumber: 11
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -28588,7 +28576,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 172,
+      lineNumber: 181,
       columnNumber: 11
     }
   }))) : /*#__PURE__*/React__default.createElement(DesktopContainer, {
@@ -28597,9 +28585,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 +28604,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);
 
@@ -4178,11 +4178,10 @@
     borderRadius: '$lg',
     position: 'relative',
     backgroundColor: '$white',
-    border: '1px solid $bgBorder',
     variants: {
       shadow: {
         true: {
-          boxShadow: '0px 2px 12px #00000014'
+          boxShadow: '0px 0px 11px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.03)'
         }
       }
     }
@@ -4322,7 +4321,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 103,
+        lineNumber: 102,
         columnNumber: 5
       }
     }, showBottomLine && /*#__PURE__*/React__default["default"].createElement(CardLineColor, {
@@ -4330,14 +4329,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 114,
+        lineNumber: 113,
         columnNumber: 26
       }
     }), title !== '' ? icon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledTitle$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 117,
+        lineNumber: 116,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledIcon$1, {
@@ -4346,14 +4345,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 118,
+        lineNumber: 117,
         columnNumber: 13
       }
     }, icon), title) : /*#__PURE__*/React__default["default"].createElement(StyledTitle$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 124,
+        lineNumber: 123,
         columnNumber: 11
       }
     }, title) : null, children);
@@ -4373,7 +4372,7 @@
   Card.defaultProps = {
     className: '',
     color: 'green',
-    shadow: false,
+    shadow: true,
     radius: '$lg',
     padding: '12px',
     title: '',
@@ -20319,25 +20318,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 +20494,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 +28788,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 +28830,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 97,
+        lineNumber: 106,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator, {
@@ -28850,7 +28838,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 98,
+        lineNumber: 107,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(ListWrap, {
@@ -28860,7 +28848,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 +28857,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
-          lineNumber: 102,
+          lineNumber: 111,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28888,7 +28876,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
-          lineNumber: 103,
+          lineNumber: 112,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(Title$1, {
@@ -28923,7 +28911,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 +28941,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 160,
+        lineNumber: 169,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content, {
@@ -28965,7 +28953,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 161,
+        lineNumber: 170,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -28977,7 +28965,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 168,
+        lineNumber: 177,
         columnNumber: 7
       }
     }, mobileCollapse ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
@@ -28987,7 +28975,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 170,
+        lineNumber: 179,
         columnNumber: 11
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
@@ -28997,7 +28985,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 172,
+        lineNumber: 181,
         columnNumber: 11
       }
     }))) : /*#__PURE__*/React__default["default"].createElement(DesktopContainer, {
@@ -29006,9 +28994,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 +29013,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.11",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",