@majoo-ui/react 1.41.0 → 1.41.1

package/index.esm.js

@@ -13,6 +13,7 @@ import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import NumberFormat from 'react-number-format';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import Downshift, { useMultipleSelection, useCombobox } from 'downshift';
 import InfiniteScroll from 'react-infinite-scroller';
@@ -34,6 +35,7 @@ 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';
 
 var _jsxFileName$17 = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
 
@@ -6039,6 +6041,151 @@ InputRightElement.propTypes = {
 };
 InputRightElement.name = 'InputRightElement';
 
+const InputNumber = styled(NumberFormat, {
+  // Reset
+  appearance: 'none',
+  boxSizing: 'border-box',
+  fontFamily: 'inherit',
+  margin: '0',
+  outline: 'none',
+  width: '100%',
+  WebkitTapHighlightColor: 'rgba(0,0,0,0)',
+  '&::before': {
+    boxSizing: 'border-box'
+  },
+  '&::after': {
+    boxSizing: 'border-box'
+  },
+  // Custom
+  background: 'none',
+  color: '$textPrimary',
+  fontVariantNumeric: 'tabular-nums',
+  fontSize: '$short-content-regular',
+  letterSpacing: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  fontWeight: '400',
+  padding: '10px $spacing-05',
+  border: '1px solid $gray300',
+  borderRadius: '$lg',
+  '&:focus': {
+    border: '1px solid $colors$primary400'
+  },
+  '&:active': {
+    border: '1px solid $colors$primary400'
+  },
+  '&:hover': {
+    border: '1px solid $colors$primary600'
+  },
+  '&:disabled': {
+    backgroundColor: '$formDisable',
+    color: '$textDisable',
+    cursor: 'not-allowed',
+    '&::placeholder': {
+      color: '$textDisable'
+    },
+    '&:hover': {
+      border: '1px solid $colors$gray300'
+    }
+  },
+  '&::placeholder': {
+    color: '$textDisable'
+  },
+  compoundVariants: [{
+    inputGroup: true,
+    isInvalid: true,
+    css: {
+      border: 'none',
+      '&:focus': {
+        border: 'none'
+      },
+      '&:hover': {
+        border: 'none'
+      }
+    }
+  }],
+  variants: {
+    readOnly: {
+      true: {
+        backgroundColor: '$formDisable'
+      }
+    },
+    inputGroup: {
+      true: {
+        border: 'none',
+        borderRadius: '$lg',
+        '&:focus': {
+          border: 'none'
+        },
+        '&:active': {
+          border: 'none'
+        },
+        '&:hover': {
+          border: 'none'
+        },
+        '&:disabled': {
+          backgroundColor: 'transparent',
+          color: '$textDisable',
+          cursor: 'default',
+          '&::placeholder': {
+            color: '$textDisable'
+          },
+          '&:hover': {
+            border: '1px solid $colors$gray300'
+          }
+        }
+      }
+    },
+    size: {
+      sm: {
+        height: 32
+      },
+      lg: {
+        height: 40
+      }
+    },
+    isInvalid: {
+      true: {
+        border: '1px solid $colors$red400',
+        '&:focus': {
+          border: '1px solid $colors$red400'
+        },
+        '&:hover': {
+          border: '1px solid $colors$red400'
+        }
+      }
+    },
+    isPicker: {
+      true: {
+        fontSize: '$placeholder',
+        letterSpacing: '$placeholder',
+        lineHeight: '$placeholder',
+        fontVariantNumeric: 'unset',
+        caretColor: 'transparent',
+        cursor: 'pointer',
+        padding: '0'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'lg'
+  }
+});
+InputNumber.propTypes = {
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  size: PropTypes.oneOf(['sm', 'lg']),
+  isInvalid: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool
+};
+InputNumber.defaultProps = {
+  size: 'lg',
+  thousandSeparator: '.',
+  decimalSeparator: ','
+};
+InputNumber.name = 'InputText';
+InputNumber.displayName = 'InputNumber';
+
 const _excluded$l = ["className", "children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"];
 var _jsxFileName$K = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/tag/Tag.js";
 const TagWrapper$3 = styled('div', {
@@ -8865,12 +9012,14 @@ function InputResourceList({
   searchPlaceholder = 'Cari ...',
   counterFooterText = 'kategori dipilih',
   isLoading = false,
+  disableUnchecked = false,
   value,
   fetchData,
   onQueryChange,
   css
 }) {
   const [checkedResources, setCheckedResources] = useState([]);
+  const [tempCheckedRes, setTempCheckedRes] = useState(value);
   const [query, setQuery] = useState();
   const scrollerRef = useRef(null);
   useEffect(() => {
@@ -8884,6 +9033,7 @@ function InputResourceList({
   const renderCheckbox = (resource, index) => {
     var _a;
 
+    const isDisabled = disableUnchecked && !tempCheckedRes.includes(resource);
     return jsx(InputCheckbox, {
       label: jsxs(Flex$1, Object.assign({
         gap: 3
@@ -8896,14 +9046,15 @@ function InputResourceList({
           type: "varian",
           size: "lg",
           css: {
-            color: disabled ? '$textDisable' : '$textGreen'
+            color: disabled || isDisabled ? '$textDisable' : '$textGreen'
           }
         }, {
           children: variant
         }), index))]
       }), void 0),
       index: index,
-      value: resource.value
+      value: resource.value,
+      disabled: isDisabled
     }, `${resource.value}-${new Date().toISOString()}`);
   };
 
@@ -8965,11 +9116,15 @@ function InputResourceList({
       }), void 0), jsx(ConditionalWrapper, Object.assign({
         condition: !!fetchData && data.length > 0,
         wrapper: children => jsx(InfiniteScroll, Object.assign({
-          loadMore: _ => fetchData({
-            query
-          }),
+          loadMore: _ => {
+            if (!isLoading) {
+              fetchData({
+                query
+              });
+            }
+          },
           hasMore: true,
-          threshold: 10,
+          threshold: 5,
           useWindow: false
         }, {
           children: children
@@ -13806,12 +13961,7 @@ const TableContainer$1 = styled(Flex$1, {
   height: '100%',
   overflowY: 'auto',
   overflowX: 'hidden',
-  padding: '0 $spacing-05',
-  '-ms-overflow-style': 'none',
-  scrollbarWidth: 'none',
-  '&::-webkit-scrollbar': {
-    display: 'none'
-  }
+  padding: '0 $spacing-05'
 });
 const TableHeadRow$1 = styled('tr', {
   borderBottom: '1pt solid $bgBorder',
@@ -13842,12 +13992,13 @@ const TableCell$1 = styled('td', {
   fontWeight: '400',
   color: '$textPrimary'
 });
-
-function MobileTable({
+const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   instance,
+  isInfiniteScroll,
   footer,
+  infiniteScrollWrapper,
   css
-}) {
+}, ref) => {
   const {
     getTableProps,
     getTableBodyProps,
@@ -13860,98 +14011,101 @@ function MobileTable({
   } = instance;
   return /*#__PURE__*/React__default.createElement(TableContainer$1, {
     css: css,
-    __self: this,
+    ref: ref,
+    __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 71,
+      lineNumber: 74,
       columnNumber: 5
     }
-  }, /*#__PURE__*/React__default.createElement(TableContent, _extends({}, getTableProps(), {
-    __self: this,
+  }, infiniteScrollWrapper( /*#__PURE__*/React__default.createElement(TableContent, _extends({}, getTableProps(), {
+    __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 72,
-      columnNumber: 7
+      lineNumber: 76,
+      columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(TableHead, {
-    __self: this,
+    __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 73,
-      columnNumber: 9
+      lineNumber: 77,
+      columnNumber: 11
     }
   }, headerGroups.map(headerGroup => /*#__PURE__*/React__default.createElement(TableHeadRow$1, _extends({}, headerGroup.getHeaderGroupProps(), {
-    __self: this,
+    __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 75,
-      columnNumber: 13
+      lineNumber: 79,
+      columnNumber: 15
     }
   }), headerGroup.headers.map(column => {
     const headerRender = column.render('Header');
-    return /*#__PURE__*/React__default.createElement(TableHeadCell$1, _extends({}, column.getHeaderProps(column.getSortByToggleProps()), {
-      __self: this,
+    return /*#__PURE__*/React__default.createElement(TableHeadCell$1, _extends({}, column.getHeaderProps(column.getSortByToggleProps && !column.unsortable ? column.getSortByToggleProps({
+      title: 'Urutkan'
+    }) : {}), {
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 79,
-        columnNumber: 19
+        lineNumber: 83,
+        columnNumber: 21
       }
     }), typeof headerRender === 'string' ? /*#__PURE__*/React__default.createElement(TableHeaderCellContainer, {
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 81,
-        columnNumber: 23
+        lineNumber: 91,
+        columnNumber: 25
       }
     }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TableHeadCellContent, {
       heading: "headerTable",
       color: "secondary",
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 83,
-        columnNumber: 27
+        lineNumber: 93,
+        columnNumber: 29
       }
     }, headerRender.toUpperCase()), /*#__PURE__*/React__default.createElement(SortingOutline, {
       color: colors.iconSecondary,
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 86,
-        columnNumber: 27
+        lineNumber: 96,
+        columnNumber: 29
       }
     }))) : headerRender);
   })))), /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps(), {
-    __self: this,
+    __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 98,
-      columnNumber: 9
+      lineNumber: 108,
+      columnNumber: 11
     }
   }), page.map(row => {
     prepareRow(row);
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: row.id,
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 102,
-        columnNumber: 15
+        lineNumber: 112,
+        columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(TableRow$1, _extends({}, row.getRowProps(), {
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 103,
-        columnNumber: 17
+        lineNumber: 113,
+        columnNumber: 19
       }
     }), row.cells.map(cell => {
       return /*#__PURE__*/React__default.createElement(TableCell$1, _extends({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
-        __self: this,
+        __self: undefined,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 106,
-          columnNumber: 23
+          lineNumber: 116,
+          columnNumber: 25
         }
       }), cell.column.accessor ? /*#__PURE__*/React__default.createElement(Flex$1, {
         justify: "between",
@@ -13966,49 +14120,49 @@ function MobileTable({
         css: {
           cursor: 'pointer'
         },
-        __self: this,
+        __self: undefined,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 108,
-          columnNumber: 27
+          lineNumber: 118,
+          columnNumber: 29
         }
       }, cell.render('Cell'), row.isExpanded ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
-        __self: this,
+        __self: undefined,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 122,
-          columnNumber: 47
+          lineNumber: 132,
+          columnNumber: 49
         }
       }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
-        __self: this,
+        __self: undefined,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 122,
-          columnNumber: 70
+          lineNumber: 132,
+          columnNumber: 72
         }
       })) : cell.render('Cell'));
     })), row.isExpanded ? /*#__PURE__*/React__default.createElement(TableRow$1, {
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 132,
-        columnNumber: 19
+        lineNumber: 142,
+        columnNumber: 21
       }
     }, /*#__PURE__*/React__default.createElement(TableCell$1, {
       colSpan: visibleColumns.length,
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 133,
-        columnNumber: 21
+        lineNumber: 143,
+        columnNumber: 23
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
       direction: "column",
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 134,
-        columnNumber: 23
+        lineNumber: 144,
+        columnNumber: 25
       }
     }, row.allCells.filter(cell => !cell.column.isMobileHeader && (cell.column.accessor || cell.column.id === 'menu')).map(cell => cell.column.accessor ? /*#__PURE__*/React__default.createElement(Flex$1, {
       key: `${cell.column.id}-${row.id}`,
@@ -14019,20 +14173,20 @@ function MobileTable({
         padding: '$spacing-03 $spacing-05',
         borderBottom: '1pt solid $bgBorder'
       },
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 141,
-        columnNumber: 31
+        lineNumber: 151,
+        columnNumber: 33
       }
     }, /*#__PURE__*/React__default.createElement(Heading, {
       heading: "headerTable",
       color: "secondary",
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 151,
-        columnNumber: 33
+        lineNumber: 161,
+        columnNumber: 35
       }
     }, cell.column.Header.toUpperCase()), cell.render('Cell')) : /*#__PURE__*/React__default.createElement(Flex$1, {
       key: `${cell.column.id}-${row.id}`,
@@ -14041,37 +14195,37 @@ function MobileTable({
         height: '40px',
         alignSelf: 'flex-end'
       },
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 157,
-        columnNumber: 31
+        lineNumber: 167,
+        columnNumber: 33
       }
     }, cell.render('Cell')))))) : null);
-  })), /*#__PURE__*/React__default.createElement(TableFoot, {
-    __self: this,
+  })), !isInfiniteScroll && /*#__PURE__*/React__default.createElement(TableFoot, {
+    __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 177,
-      columnNumber: 9
+      lineNumber: 188,
+      columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(TableFootRow, {
-    __self: this,
+    __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 178,
-      columnNumber: 11
+      lineNumber: 189,
+      columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(TableFootCell, {
     colSpan: "100%",
-    __self: this,
+    __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 179,
-      columnNumber: 13
+      lineNumber: 190,
+      columnNumber: 17
     }
-  }, footer)))));
-}
+  }, footer))))));
+});
 
 var _jsxFileName$h = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/table/Table.js";
 const TableContainer = styled('div', {
@@ -14278,9 +14432,12 @@ function Table({
   emptyDataMessage,
   isLoading,
   css,
-  onSelectedChange
+  onSelectedChange,
+  isInfiniteScroll,
+  hasMoreItems,
+  rowLimit
 }) {
-  const [limit, setLimit] = useState(10);
+  const [limit, setLimit] = useState(rowLimit);
   const instance = useTable({
     columns,
     data,
@@ -14312,8 +14469,7 @@ function Table({
       pageSize,
       sortBy,
       selectedRowIds
-    },
-    selectedFlatRows
+    }
   } = instance;
 
   const doFetchData = (pageIndex, pageSize, sortAccessor = sortBy.length > 0 ? sortBy[0].id : undefined, sortDirection = sortBy.length > 0 ? sortBy[0].desc ? 'DESC' : 'ASC' : undefined) => {
@@ -14326,6 +14482,7 @@ function Table({
     if (fetchData) fetchData(fetchParams);
   };
 
+  const scrollerRef = useRef(null);
   const isMobile = useMediaQuery('(max-width: 1024px)');
 
   const renderFooter = () => /*#__PURE__*/React__default.createElement(Pagination, {
@@ -14353,11 +14510,35 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 284,
+      lineNumber: 289,
       columnNumber: 5
     }
   });
 
+  const renderInfiniteScrollWrapper = children => /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: isInfiniteScroll && data.length > 0,
+    wrapper: children => /*#__PURE__*/React__default.createElement(InfiniteScroll, {
+      loadMore: _ => {
+        if (!isLoading) doFetchData(controlledPageIndex + 1, rowLimit);
+      },
+      hasMore: hasMoreItems,
+      threshold: 5,
+      useWindow: false,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$h,
+        lineNumber: 316,
+        columnNumber: 9
+      }
+    }, children),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$h,
+      lineNumber: 313,
+      columnNumber: 5
+    }
+  }, children);
+
   useEffect(() => {
     if (isMobile) {
       allColumns.map(column => {
@@ -14378,41 +14559,90 @@ function Table({
     gotoPage(controlledPageIndex);
   }, [controlledPageIndex]);
   useEffect(() => {
-    if (data && data.length > 0) doFetchData(0, pageSize);
+    if (data && data.length > 0) doFetchData(0, isInfiniteScroll ? rowLimit : pageSize);
   }, [sortBy]);
   useEffect(() => {
     if (data && data.length > 0 && selectedRowIds && onSelectedChange) onSelectedChange(selectedRowIds ? Object.keys(selectedRowIds) : []);
   }, [selectedRowIds]);
-  return !isMobile ? /*#__PURE__*/React__default.createElement(TableContainer, {
-    css: css,
+  useEffect(() => {
+    if (isInfiniteScroll && data.length <= rowLimit) {
+      var _scrollerRef$current;
+
+      (_scrollerRef$current = scrollerRef.current) === null || _scrollerRef$current === void 0 ? void 0 : _scrollerRef$current.scrollTo({
+        top: 0
+      });
+    }
+  }, [data]);
+  return /*#__PURE__*/React__default.createElement(Box$1, {
+    css: {
+      position: 'relative',
+      width: `${css.width || '100%'}`,
+      height: 'fit-content'
+    },
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 337,
+      lineNumber: 370,
       columnNumber: 5
     }
-  }, /*#__PURE__*/React__default.createElement(TableContent, _extends({}, getTableProps(), {
+  }, isLoading && /*#__PURE__*/React__default.createElement(Flex$1, {
+    justify: "center",
+    align: "center",
+    css: {
+      zIndex: 10,
+      position: 'absolute',
+      inset: 0,
+      top: isMobile ? 40 : 64,
+      width: '100%',
+      height: `calc(100% - ${isInfiniteScroll ? 0 : '72px'})`,
+      backgroundColor: '$bgWhite',
+      opacity: 0.8
+    },
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 338,
-      columnNumber: 7
+      lineNumber: 372,
+      columnNumber: 9
     }
-  }), /*#__PURE__*/React__default.createElement(TableHead, {
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "caption",
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 339,
+      lineNumber: 386,
+      columnNumber: 11
+    }
+  }, "Loading .... ")), !isMobile ? /*#__PURE__*/React__default.createElement(TableContainer, {
+    css: css,
+    ref: scrollerRef,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$h,
+      lineNumber: 390,
       columnNumber: 9
     }
+  }, renderInfiniteScrollWrapper( /*#__PURE__*/React__default.createElement(TableContent, _extends({}, getTableProps(), {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$h,
+      lineNumber: 392,
+      columnNumber: 13
+    }
+  }), /*#__PURE__*/React__default.createElement(TableHead, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$h,
+      lineNumber: 393,
+      columnNumber: 15
+    }
   }, headerGroups.map(headerGroup => {
     const visibleHeaders = headerGroup.headers.filter(column => !column.isSubRow);
     return /*#__PURE__*/React__default.createElement(TableHeadRow, _extends({}, headerGroup.getHeaderGroupProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 343,
-        columnNumber: 15
+        lineNumber: 397,
+        columnNumber: 21
       }
     }), visibleHeaders.map((column, index) => {
       const headerRender = column.render('Header');
@@ -14428,8 +14658,8 @@ function Table({
         __self: this,
         __source: {
           fileName: _jsxFileName$h,
-          lineNumber: 347,
-          columnNumber: 21
+          lineNumber: 401,
+          columnNumber: 27
         }
       }), typeof headerRender === 'string' ? /*#__PURE__*/React__default.createElement(TableHeaderCellContainer // css={{
       //   padding:
@@ -14445,16 +14675,16 @@ function Table({
         __self: this,
         __source: {
           fileName: _jsxFileName$h,
-          lineNumber: 363,
-          columnNumber: 25
+          lineNumber: 417,
+          columnNumber: 31
         }
       }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TableHeadCellContent, {
         heading: "headerTable",
         __self: this,
         __source: {
           fileName: _jsxFileName$h,
-          lineNumber: 376,
-          columnNumber: 29
+          lineNumber: 430,
+          columnNumber: 35
         }
       }, headerRender.toUpperCase()))) : headerRender);
     }));
@@ -14462,8 +14692,8 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 392,
-      columnNumber: 9
+      lineNumber: 446,
+      columnNumber: 15
     }
   }), page.map((row, i) => {
     var _row$cells$filter;
@@ -14477,17 +14707,19 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 401,
-        columnNumber: 15
+        lineNumber: 456,
+        columnNumber: 21
       }
     }, /*#__PURE__*/React__default.createElement(TableRow, _extends({}, row.getRowProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 402,
-        columnNumber: 17
+        lineNumber: 457,
+        columnNumber: 23
       }
-    }), row.cells.filter(cell => !cell.column.isSubRow).map((cell, index) => /*#__PURE__*/React__default.createElement(TableCell, _extends({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+    }), row.cells.filter(cell => !cell.column.isSubRow).map((cell, index) => /*#__PURE__*/React__default.createElement(TableCell, _extends({
+      key: cell.column.id
+    }, cell.getCellProps(addOnCellStyle(cell.column.id)), {
       css: {
         // padding: cell.column.accessor && index > 0 ? '0 8px' : '0 20px',
         padding: cell.column.accessor ? '0 8px' : '0 20px'
@@ -14495,8 +14727,8 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 406,
-        columnNumber: 23
+        lineNumber: 461,
+        columnNumber: 29
       }
     }), cell.render('Cell')))), row.isExpanded ? subRowCells.map(cell => /*#__PURE__*/React__default.createElement(TableRow, {
       key: cell.column.id,
@@ -14504,24 +14736,24 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 419,
-        columnNumber: 21
+        lineNumber: 475,
+        columnNumber: 27
       }
     }, leftAddOnCells.map((_, index) => /*#__PURE__*/React__default.createElement("td", {
       key: index,
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 421,
-        columnNumber: 25
+        lineNumber: 477,
+        columnNumber: 31
       }
     })), /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: cell.column.id,
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 423,
-        columnNumber: 23
+        lineNumber: 479,
+        columnNumber: 29
       }
     }, /*#__PURE__*/React__default.createElement(TableCell, {
       subCell: true,
@@ -14534,16 +14766,16 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 424,
-        columnNumber: 25
+        lineNumber: 480,
+        columnNumber: 31
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
       paragraph: "shortContentBold",
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 433,
-        columnNumber: 27
+        lineNumber: 489,
+        columnNumber: 33
       }
     }, cell.column.Header)), /*#__PURE__*/React__default.createElement(TableCell, {
       subCell: true,
@@ -14555,39 +14787,39 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 435,
-        columnNumber: 25
+        lineNumber: 491,
+        columnNumber: 31
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
       paragraph: "shortContentRegular",
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 443,
-        columnNumber: 27
+        lineNumber: 499,
+        columnNumber: 33
       }
     }, cell.render('Cell')))))) : null);
-  })), /*#__PURE__*/React__default.createElement(TableFoot, {
+  })), !isInfiniteScroll && /*#__PURE__*/React__default.createElement(TableFoot, {
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 453,
-      columnNumber: 9
+      lineNumber: 510,
+      columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(TableFootRow, {
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 454,
-      columnNumber: 11
+      lineNumber: 511,
+      columnNumber: 19
     }
   }, /*#__PURE__*/React__default.createElement(TableFootCell, {
     colSpan: "100%",
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 455,
-      columnNumber: 13
+      lineNumber: 512,
+      columnNumber: 21
     }
   }, totalData > 0 || isLoading ? renderFooter() : /*#__PURE__*/React__default.createElement(Flex$1, {
     css: {
@@ -14598,8 +14830,8 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 459,
-      columnNumber: 17
+      lineNumber: 516,
+      columnNumber: 25
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
     heading: "shortContentRegular",
@@ -14607,20 +14839,23 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 466,
-      columnNumber: 19
+      lineNumber: 523,
+      columnNumber: 27
     }
-  }, emptyDataMessage || 'Tidak ada data'))))))) : /*#__PURE__*/React__default.createElement(MobileTable, {
+  }, emptyDataMessage || 'Tidak ada data')))))))) : /*#__PURE__*/React__default.createElement(MobileTable, {
+    ref: scrollerRef,
     instance: instance,
+    isInfiniteScroll: isInfiniteScroll,
     footer: renderFooter(),
+    infiniteScrollWrapper: renderInfiniteScrollWrapper,
     css: css,
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 477,
-      columnNumber: 5
+      lineNumber: 536,
+      columnNumber: 9
     }
-  });
+  }));
 }
 
 Table.propTypes = {
@@ -14634,12 +14869,17 @@ Table.propTypes = {
   css: PropTypes.object,
   onSelectedChange: PropTypes.func,
   hideDataInfo: PropTypes.bool,
-  emptyDataMessage: PropTypes.string
+  emptyDataMessage: PropTypes.string,
+  isInfiniteScroll: PropTypes.bool,
+  hasMoreItems: PropTypes.bool,
+  rowLimit: PropTypes.number
 };
 Table.defaultProps = {
   keyId: 'id',
   pageIndex: 0,
-  hideDataInfo: false
+  hideDataInfo: false,
+  hasMoreItems: true,
+  rowLimit: 10
 };
 Table.displayName = 'Table';
 
@@ -15460,7 +15700,7 @@ const rowExpanderColumn = {
 
 var _jsxFileName$e = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/table/components/columns/RowMenuColumn.js";
 
-const rowMenuColumn = options => ({
+const rowMenuColumn = (options, icon) => ({
   id: 'menu',
   Header: () => null,
   Cell: props => {
@@ -15473,7 +15713,7 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 15,
+        lineNumber: 27,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuTrigger, {
@@ -15481,7 +15721,7 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 16,
+        lineNumber: 28,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -15494,7 +15734,7 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 17,
+        lineNumber: 29,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
@@ -15502,15 +15742,15 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 18,
+        lineNumber: 30,
         columnNumber: 15
       }
-    }, /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
+    }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 19,
-        columnNumber: 17
+        lineNumber: 30,
+        columnNumber: 70
       }
     })))), /*#__PURE__*/React__default.createElement(DropdownMenuContent, {
       onInteractOutside: () => setOpenDrop(false),
@@ -15530,7 +15770,7 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 23,
+        lineNumber: 33,
         columnNumber: 11
       }
     }, options.map(option => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropdownMenuItem, {
@@ -15542,7 +15782,7 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 41,
+        lineNumber: 51,
         columnNumber: 17
       }
     }, option.title), /*#__PURE__*/React__default.createElement(DropdownMenuSeparator, {
@@ -15553,7 +15793,7 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 46,
+        lineNumber: 60,
         columnNumber: 17
       }
     }))))), /*#__PURE__*/React__default.createElement(ModalDialog, {
@@ -15565,7 +15805,7 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 51,
+        lineNumber: 65,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -15573,7 +15813,7 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 58,
+        lineNumber: 66,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -15586,28 +15826,28 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 59,
+        lineNumber: 67,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 60,
+        lineNumber: 68,
         columnNumber: 15
       }
-    }, /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
+    }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 61,
-        columnNumber: 17
+        lineNumber: 68,
+        columnNumber: 36
       }
     })))), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 65,
+        lineNumber: 71,
         columnNumber: 11
       }
     }, "Aksi"), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -15617,7 +15857,7 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 66,
+        lineNumber: 72,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -15632,7 +15872,7 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 67,
+        lineNumber: 73,
         columnNumber: 13
       }
     }, options.map(option => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -15646,7 +15886,7 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 70,
+        lineNumber: 76,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15655,7 +15895,7 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 71,
+        lineNumber: 85,
         columnNumber: 21
       }
     }, option.title)), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -15663,7 +15903,7 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 73,
+        lineNumber: 89,
         columnNumber: 19
       }
     })))))));
@@ -15793,7 +16033,7 @@ const PageDialog = _ref => {
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
     css: {
-      backgroundColor: isMobile ? '$white' : '$gray150',
+      backgroundColor: isMobile ? '$white' : '$gray50',
       height: '100%',
       display: 'flex',
       flexDirection: 'column'
@@ -18663,8 +18903,8 @@ const Upload = ({
   height
 }) => {
   const isFile = listType === 'file';
-  const hiddenFileInput = React__default.useRef(null);
-  const [indexReplace, setIndexReplace] = useState(null);
+  const hiddenFileInput = useRef(null);
+  const indexReplace = useRef(null);
   const [errorMessage, setErrorMessage] = useState(null);
   const defaultSize = 200;
   const ContainerUpload = styled('div', {
@@ -18690,6 +18930,11 @@ const Upload = ({
             background: '$bgFailed'
           }
         }
+      },
+      hidden: {
+        true: {
+          display: 'none !important'
+        }
       }
     }
   });
@@ -18723,26 +18968,25 @@ const Upload = ({
       for (let i = 0; i < e.target.files.length; i++) {
         var _onChange, _onChange$then;
 
-        if (max && arrFile.length >= max) {
+        if (max && arrFile.length >= max && indexReplace.current === null) {
           break;
         }
 
         let newFile = e.target.files[i];
         newFile.url = URL.createObjectURL(newFile);
-
-        if (indexReplace !== null) {
-          arrFile[indexReplace] = newFile;
-          setIndexReplace(null);
-        } else {
-          arrFile.push(newFile);
-        }
-
         (_onChange = onChange({
           fileList: arrFile,
           file: newFile,
-          indexReplace,
-          isReplace: indexReplace !== null
+          indexReplace: indexReplace.current,
+          isReplace: indexReplace.current !== null
         })) === null || _onChange === void 0 ? void 0 : (_onChange$then = _onChange.then(() => setErrorMessage(null))) === null || _onChange$then === void 0 ? void 0 : _onChange$then.catch(error => setErrorMessage(error.message));
+
+        if (indexReplace.current !== null) {
+          arrFile[indexReplace.current] = newFile;
+          indexReplace.current = null;
+        } else {
+          arrFile.push(newFile);
+        }
       }
     }
   }
@@ -18768,7 +19012,7 @@ const Upload = ({
   }
 
   function handleReplace(index) {
-    setIndexReplace(index);
+    indexReplace.current = index;
     handleClick();
   }
 
@@ -18788,7 +19032,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 235,
+        lineNumber: 240,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -18797,7 +19041,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 236,
+        lineNumber: 241,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -18810,7 +19054,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 246,
+          lineNumber: 251,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -18820,7 +19064,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 247,
+          lineNumber: 252,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -18829,7 +19073,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 248,
+          lineNumber: 253,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box$1, {
@@ -18842,7 +19086,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 249,
+          lineNumber: 254,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -18851,7 +19095,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 257,
+          lineNumber: 262,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -18859,7 +19103,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 259,
+          lineNumber: 264,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -18873,7 +19117,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 270,
+          lineNumber: 275,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -18883,7 +19127,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 271,
+          lineNumber: 276,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -18892,7 +19136,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 272,
+          lineNumber: 277,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box$1, {
@@ -18905,7 +19149,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 273,
+          lineNumber: 278,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -18915,7 +19159,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 281,
+          lineNumber: 286,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(CheckIcon, {
@@ -18923,7 +19167,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 282,
+          lineNumber: 287,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(Text, {
@@ -18937,14 +19181,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 283,
+          lineNumber: 288,
           columnNumber: 17
         }
       }, item.name))), /*#__PURE__*/React__default.createElement(Blank, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 296,
+          lineNumber: 301,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -18956,16 +19200,17 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 306,
+        lineNumber: 311,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
+      hidden: max ? fileList.length >= max ? true : false : false,
       showError: errorMessage !== null,
       onClick: handleClick,
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 307,
+        lineNumber: 312,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input, {
@@ -18976,49 +19221,49 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 308,
+        lineNumber: 317,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 309,
+        lineNumber: 318,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 311,
+        lineNumber: 320,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 312,
+        lineNumber: 321,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 313,
+        lineNumber: 322,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 315,
+        lineNumber: 324,
         columnNumber: 17
       }
     }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} anda disini`)))), errorMessage && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 320,
+        lineNumber: 329,
         columnNumber: 26
       }
     }, errorMessage));
@@ -19034,10 +19279,10 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$8,
-      lineNumber: 326,
+      lineNumber: 335,
       columnNumber: 5
     }
-  }, !isFile && renderPicture(), isFile && renderFile(), max ? fileList.length >= max ? null : renderUpload() : renderUpload());
+  }, !isFile && renderPicture(), isFile && renderFile(), renderUpload());
 };
 
 Upload.defaultProps = {
@@ -22441,51 +22686,6 @@ const StepWizard = props => {
   }), void 0);
 };
 
-const useTableOfContent = (rootMargin, isMobile) => {
-  const [activeId, setActiveId] = useState();
-  const headingElementsRef = useRef({});
-  useEffect(() => {
-    const margin = Object.assign({
-      top: '0px',
-      right: '0px',
-      bottom: '-200px',
-      left: '0px'
-    }, rootMargin);
-
-    const callback = headings => {
-      headingElementsRef.current = headings.reduce((map, headingElement) => {
-        map[headingElement.target.id] = headingElement;
-        return map;
-      }, headingElementsRef.current);
-      const visibleHeadings = [];
-      Object.keys(headingElementsRef.current).forEach(key => {
-        const headingElement = headingElementsRef.current[key];
-        if (headingElement.isIntersecting) visibleHeadings.push(headingElement);
-      });
-
-      const getIndexFromId = id => headingElements.findIndex(heading => heading.id === id);
-
-      if (visibleHeadings.length === 1) {
-        setActiveId(visibleHeadings[0].target.id);
-      } else if (visibleHeadings.length > 1) {
-        const sortedVisibleHeadings = visibleHeadings.sort((a, b) => getIndexFromId(a.target.id) > getIndexFromId(b.target.id));
-        setActiveId(sortedVisibleHeadings[0].target.id);
-      }
-    };
-
-    const observer = new IntersectionObserver(callback, {
-      rootMargin: `${margin.top} ${margin.right} ${margin.bottom} ${margin.left}`
-    });
-    const headingElements = Array.from(document.querySelectorAll('h2, h3, section'));
-    headingElements.forEach(element => {
-      observer.observe(element);
-      element.style.scrollMarginTop = `${Math.abs(parseInt(margin.top)) + 20}px`;
-    });
-    return () => observer.disconnect();
-  }, [setActiveId, rootMargin, isMobile]);
-  return [activeId];
-};
-
 var _jsxFileName$2 = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/tableOfContent/transition.js";
 
 function Collapse({
@@ -22534,6 +22734,9 @@ Collapse.defaultProps = {
 var _jsxFileName$1 = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/tableOfContent/TableOfContent.js";
 const DesktopContainer = styled(Flex$1, {
   display: 'none',
+  '& .active-scroll-spy': {
+    borderLeft: '4px solid #04c99e !important'
+  },
   '@md': {
     display: 'unset'
   }
@@ -22542,9 +22745,12 @@ const MobileContainer = styled(Flex$1, {
   backgroundColor: '$white',
   border: '1px solid #EEF0F0',
   borderRadius: 8,
-  padding: '6.5px 8px',
+  padding: '8px 8px',
   width: '100%',
   transition: '0.4s max-height',
+  '& .active-scroll-spy': {
+    borderLeft: '4px solid #04c99e !important'
+  },
   '@md': {
     display: 'none'
   }
@@ -22557,24 +22763,24 @@ const ListWrap = styled('ul', {
 });
 const List = styled('li', {
   '&:not(:last-child)': {
-    marginBottom: 16
+    marginBottom: 20
   }
 });
 const Title = styled('a', {
   fontWeight: '600',
   fontSize: '$short-content-bold',
-  color: '$textDisable',
-  padding: '4px 0px',
+  color: '$textDisable !important',
   paddingRight: 2,
   transitionDuration: '0.1s',
   userSelect: 'none',
+  textDecoration: 'none !important',
+  '&:hover': {
+    color: '$gray300 !important'
+  },
   variants: {
     active: {
       true: {
-        color: '$textGreen'
-      },
-      false: {
-        color: '$textDisable'
+        color: '$textGreen !important'
       }
     }
   }
@@ -22582,17 +22788,12 @@ const Title = styled('a', {
 const Separator = styled('div', {
   width: 4,
   borderRadius: 2,
-  backgroundColor: '$gray150',
-  transitionDuration: '0.1s',
+  backgroundColor: '$gray150 !important',
+  transitionDuration: '0.2s',
   variants: {
-    active: {
-      true: {
-        backgroundColor: '$bgGreen',
-        marginLeft: -4
-      },
+    isCollapse: {
       false: {
-        backgroundColor: 'transparent',
-        marginLeft: -4
+        backgroundColor: '$primary500 !important'
       }
     }
   }
@@ -22601,7 +22802,8 @@ const Separator = styled('div', {
 function Content({
   content,
   activeId,
-  isCollapse
+  isCollapse,
+  isDialog
 }) {
   var _getDatasets;
 
@@ -22630,21 +22832,25 @@ function Content({
     __self: this,
     __source: {
       fileName: _jsxFileName$1,
-      lineNumber: 96,
+      lineNumber: 93,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Separator, {
+    isCollapse: isCollapse,
     __self: this,
     __source: {
       fileName: _jsxFileName$1,
-      lineNumber: 97,
+      lineNumber: 94,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(ListWrap, {
+    css: {
+      position: 'relative'
+    },
     __self: this,
     __source: {
       fileName: _jsxFileName$1,
-      lineNumber: 98,
+      lineNumber: 95,
       columnNumber: 7
     }
   }, (_getDatasets = getDatasets(content, activeId, isCollapse)) === null || _getDatasets === void 0 ? void 0 : _getDatasets.map((item, index) => {
@@ -22653,54 +22859,79 @@ function Content({
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 101,
+        lineNumber: 98,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
       direction: "row",
       gap: 5,
+      align: "center",
+      css: {
+        minHeight: 25
+      },
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 102,
+        lineNumber: 99,
         columnNumber: 15
       }
-    }, /*#__PURE__*/React__default.createElement(Separator, {
+    }, /*#__PURE__*/React__default.createElement(Title, {
       active: (item === null || item === void 0 ? void 0 : item.id) === activeId,
+      href: `#${item === null || item === void 0 ? void 0 : item.id}`,
+      onClick: e => {
+        e.preventDefault();
+        const target = window.document.getElementById(e.currentTarget.href.split('#')[1]);
+
+        if (target) {
+          var headerOffset = 20;
+          var elementPosition = target.getBoundingClientRect().top;
+          var offsetPosition = elementPosition - headerOffset;
+
+          if (!isDialog) {
+            window.scrollBy({
+              top: offsetPosition,
+              behavior: 'smooth'
+            });
+          } else {
+            target.scrollIntoView({
+              behavior: 'smooth',
+              block: 'start'
+            });
+          }
+        }
+      },
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 103,
+        lineNumber: 100,
         columnNumber: 17
       }
-    }), /*#__PURE__*/React__default.createElement(Title, {
-      active: (item === null || item === void 0 ? void 0 : item.id) === activeId,
-      href: `#${item === null || item === void 0 ? void 0 : item.id}`,
-      onClick: e => {
-        var _document$querySelect;
-
-        e.preventDefault();
-        (_document$querySelect = document.querySelector(`#${item === null || item === void 0 ? void 0 : item.id}`)) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.scrollIntoView({
-          behavior: 'smooth'
-        });
+    }, /*#__PURE__*/React__default.createElement(Box$1, {
+      css: {
+        marginLeft: '-4px !important',
+        borderLeftWidth: '4px !important',
+        borderLeftStyle: 'solid !important',
+        borderLeftColor: 'transparent !important',
+        paddingLeft: '16px !important'
       },
+      "data-to-scrollspy-id": item === null || item === void 0 ? void 0 : item.id,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 104,
-        columnNumber: 17
+        lineNumber: 121,
+        columnNumber: 19
       }
-    }, item === null || item === void 0 ? void 0 : item.title), item === null || item === void 0 ? void 0 : item.icon));
+    }, item === null || item === void 0 ? void 0 : item.title)), item === null || item === void 0 ? void 0 : item.icon));
   })));
 }
 
 function TableOfContent({
   content,
-  rootMargin,
   css,
-  isMobile
+  isMobile,
+  isDialog,
+  activeId
 }) {
-  const [activeId] = useTableOfContent(rootMargin, isMobile);
   const [mobileCollapse, setMobileCollapse] = useState(false);
 
   function toggleCollapse() {
@@ -22710,22 +22941,24 @@ function TableOfContent({
   return isMobile ? /*#__PURE__*/React__default.createElement(MobileContainer, {
     direction: "row",
     justify: "between",
+    align: "center",
     css: css,
     onClick: toggleCollapse,
     __self: this,
     __source: {
       fileName: _jsxFileName$1,
-      lineNumber: 135,
+      lineNumber: 152,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content, {
+    activeId: activeId,
     isCollapse: mobileCollapse,
+    isDialog: isDialog,
     content: content,
-    activeId: activeId,
     __self: this,
     __source: {
       fileName: _jsxFileName$1,
-      lineNumber: 136,
+      lineNumber: 153,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -22735,7 +22968,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$1,
-      lineNumber: 137,
+      lineNumber: 154,
       columnNumber: 7
     }
   })) : /*#__PURE__*/React__default.createElement(DesktopContainer, {
@@ -22744,28 +22977,33 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$1,
-      lineNumber: 140,
+      lineNumber: 157,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content, {
     isCollapse: true,
+    isDialog: isDialog,
     content: content,
-    activeId: activeId,
     __self: this,
     __source: {
       fileName: _jsxFileName$1,
-      lineNumber: 141,
+      lineNumber: 158,
       columnNumber: 7
     }
   }));
 }
+
+const Page = styled(ScrollSpy);
+Page.displayName = 'TableOfContent.Page';
+TableOfContent.Page = Page;
 TableOfContent.defaultProps = {
   isMobile: false
 };
 TableOfContent.propTypes = {
   content: PropTypes.array,
   isMobile: PropTypes.bool,
-  rootMarin: PropTypes.object
+  isDialog: PropTypes.bool,
+  activeId: PropTypes.string
 };
 
 var _jsxFileName = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/colors/Colors.js";
@@ -22877,4 +23115,4 @@ const Colors = props => {
   }, i.hex))));
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box$1 as Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, Select$1 as InputSelect, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, Link, MajooProvider, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress, RANGE_PICKER, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledSpan, StyledTitle$2 as StyledTitle, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody, TableContent, TableFoot, TableFootCell, TableFootRow, TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TimePicker, ToastContext, Tooltip, Upload, addOnCellStyle, defaultFetchDataParams, useTableOfContent };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box$1 as Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputNumber, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, Select$1 as InputSelect, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, Link, MajooProvider, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress, RANGE_PICKER, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledSpan, StyledTitle$2 as StyledTitle, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody, TableContent, TableFoot, TableFootCell, TableFootRow, TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TimePicker, ToastContext, Tooltip, Upload, addOnCellStyle, defaultFetchDataParams };