@majoo-ui/react 1.41.0 → 1.41.1

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('@majoo-ui/helpers'), require('react/jsx-runtime'), 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('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), 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-dom'), require('react-table'), 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')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', '@majoo-ui/helpers', 'react/jsx-runtime', '@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', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@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-dom', 'react-table', '@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'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.helpers, global.jsxRuntime, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.ReactDOM, global.reactTable, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, helpers, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, SwitchPrimitive, Downshift, InfiniteScroll, debounce, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, ReactDOM, reactTable, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1) { '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('@majoo-ui/helpers'), require('react/jsx-runtime'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react-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-dom'), require('react-table'), 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')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', '@majoo-ui/helpers', 'react/jsx-runtime', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react-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-dom', 'react-table', '@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'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.helpers, global.jsxRuntime, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.ReactDOM, global.reactTable, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, helpers, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, ReactDOM, reactTable, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,6 +33,7 @@
   var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
   var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
   var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
+  var NumberFormat__default = /*#__PURE__*/_interopDefaultLegacy(NumberFormat);
   var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
   var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
   var InfiniteScroll__default = /*#__PURE__*/_interopDefaultLegacy(InfiniteScroll);
@@ -50,6 +51,7 @@
   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 _jsxFileName$17 = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
 
@@ -6074,6 +6076,151 @@
   };
   InputRightElement.name = 'InputRightElement';
 
+  const InputNumber = styled(NumberFormat__default["default"], {
+    // 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__default["default"].string,
+    value: PropTypes__default["default"].string,
+    size: PropTypes__default["default"].oneOf(['sm', 'lg']),
+    isInvalid: PropTypes__default["default"].bool,
+    readOnly: PropTypes__default["default"].bool,
+    disabled: PropTypes__default["default"].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', {
@@ -8904,18 +9051,24 @@
         counterFooterText = _d === void 0 ? 'kategori dipilih' : _d,
         _e = _a.isLoading,
         isLoading = _e === void 0 ? false : _e,
+        _f = _a.disableUnchecked,
+        disableUnchecked = _f === void 0 ? false : _f,
         value = _a.value,
         fetchData = _a.fetchData,
         onQueryChange = _a.onQueryChange,
         css = _a.css;
 
-    var _f = React.useState([]),
-        checkedResources = _f[0],
-        setCheckedResources = _f[1];
+    var _g = React.useState([]),
+        checkedResources = _g[0],
+        setCheckedResources = _g[1];
 
-    var _g = React.useState(),
-        query = _g[0],
-        setQuery = _g[1];
+    var _h = React.useState(value),
+        tempCheckedRes = _h[0];
+        _h[1];
+
+    var _j = React.useState(),
+        query = _j[0],
+        setQuery = _j[1];
 
     var scrollerRef = React.useRef(null);
     React.useEffect(function () {
@@ -8929,6 +9082,7 @@
     var renderCheckbox = function renderCheckbox(resource, index) {
       var _a;
 
+      var isDisabled = disableUnchecked && !tempCheckedRes.includes(resource);
       return jsxRuntime.jsx(InputCheckbox, {
         label: jsxRuntime.jsxs(Flex$1, __assign({
           gap: 3
@@ -8942,7 +9096,7 @@
               type: "varian",
               size: "lg",
               css: {
-                color: disabled ? '$textDisable' : '$textGreen'
+                color: disabled || isDisabled ? '$textDisable' : '$textGreen'
               }
             }, {
               children: variant
@@ -8950,7 +9104,8 @@
           })]
         }), void 0),
         index: index,
-        value: resource.value
+        value: resource.value,
+        disabled: isDisabled
       }, "".concat(resource.value, "-").concat(new Date().toISOString()));
     };
 
@@ -9014,12 +9169,14 @@
           wrapper: function (children) {
             return jsxRuntime.jsx(InfiniteScroll__default["default"], __assign({
               loadMore: function (_) {
-                return fetchData({
-                  query: query
-                });
+                if (!isLoading) {
+                  fetchData({
+                    query: query
+                  });
+                }
               },
               hasMore: true,
-              threshold: 10,
+              threshold: 5,
               useWindow: false
             }, {
               children: children
@@ -13867,12 +14024,7 @@
     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',
@@ -13903,12 +14055,13 @@
     fontWeight: '400',
     color: '$textPrimary'
   });
-
-  function MobileTable({
+  const MobileTable = /*#__PURE__*/React__default["default"].forwardRef(({
     instance,
+    isInfiniteScroll,
     footer,
+    infiniteScrollWrapper,
     css
-  }) {
+  }, ref) => {
     const {
       getTableProps,
       getTableBodyProps,
@@ -13921,98 +14074,101 @@
     } = instance;
     return /*#__PURE__*/React__default["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["default"].createElement(TableContent, _extends({}, getTableProps(), {
-      __self: this,
+    }, infiniteScrollWrapper( /*#__PURE__*/React__default["default"].createElement(TableContent, _extends({}, getTableProps(), {
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 72,
-        columnNumber: 7
+        lineNumber: 76,
+        columnNumber: 9
       }
     }), /*#__PURE__*/React__default["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["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["default"].createElement(TableHeadCell$1, _extends({}, column.getHeaderProps(column.getSortByToggleProps()), {
-        __self: this,
+      return /*#__PURE__*/React__default["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["default"].createElement(TableHeaderCellContainer, {
-        __self: this,
+        __self: undefined,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 81,
-          columnNumber: 23
+          lineNumber: 91,
+          columnNumber: 25
         }
       }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["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["default"].createElement(icons.SortingOutline, {
         color: colors.iconSecondary,
-        __self: this,
+        __self: undefined,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 86,
-          columnNumber: 27
+          lineNumber: 96,
+          columnNumber: 29
         }
       }))) : headerRender);
     })))), /*#__PURE__*/React__default["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["default"].createElement(React__default["default"].Fragment, {
         key: row.id,
-        __self: this,
+        __self: undefined,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 102,
-          columnNumber: 15
+          lineNumber: 112,
+          columnNumber: 17
         }
       }, /*#__PURE__*/React__default["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["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["default"].createElement(Flex$1, {
           justify: "between",
@@ -14027,49 +14183,49 @@
           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["default"].createElement(icons.ChevronUpOutline, {
-          __self: this,
+          __self: undefined,
           __source: {
             fileName: _jsxFileName$i,
-            lineNumber: 122,
-            columnNumber: 47
+            lineNumber: 132,
+            columnNumber: 49
           }
         }) : /*#__PURE__*/React__default["default"].createElement(icons.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["default"].createElement(TableRow$1, {
-        __self: this,
+        __self: undefined,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 132,
-          columnNumber: 19
+          lineNumber: 142,
+          columnNumber: 21
         }
       }, /*#__PURE__*/React__default["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["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["default"].createElement(Flex$1, {
         key: `${cell.column.id}-${row.id}`,
@@ -14080,20 +14236,20 @@
           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["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["default"].createElement(Flex$1, {
         key: `${cell.column.id}-${row.id}`,
@@ -14102,37 +14258,37 @@
           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["default"].createElement(TableFoot, {
-      __self: this,
+    })), !isInfiniteScroll && /*#__PURE__*/React__default["default"].createElement(TableFoot, {
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 177,
-        columnNumber: 9
+        lineNumber: 188,
+        columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableFootRow, {
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 178,
-        columnNumber: 11
+        lineNumber: 189,
+        columnNumber: 15
       }
     }, /*#__PURE__*/React__default["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', {
@@ -14339,9 +14495,12 @@
     emptyDataMessage,
     isLoading,
     css,
-    onSelectedChange
+    onSelectedChange,
+    isInfiniteScroll,
+    hasMoreItems,
+    rowLimit
   }) {
-    const [limit, setLimit] = React.useState(10);
+    const [limit, setLimit] = React.useState(rowLimit);
     const instance = reactTable.useTable({
       columns,
       data,
@@ -14373,8 +14532,7 @@
         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) => {
@@ -14387,6 +14545,7 @@
       if (fetchData) fetchData(fetchParams);
     };
 
+    const scrollerRef = React.useRef(null);
     const isMobile = useMediaQuery('(max-width: 1024px)');
 
     const renderFooter = () => /*#__PURE__*/React__default["default"].createElement(Pagination, {
@@ -14414,11 +14573,35 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 284,
+        lineNumber: 289,
         columnNumber: 5
       }
     });
 
+    const renderInfiniteScrollWrapper = children => /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
+      condition: isInfiniteScroll && data.length > 0,
+      wrapper: children => /*#__PURE__*/React__default["default"].createElement(InfiniteScroll__default["default"], {
+        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);
+
     React.useEffect(() => {
       if (isMobile) {
         allColumns.map(column => {
@@ -14439,41 +14622,90 @@
       gotoPage(controlledPageIndex);
     }, [controlledPageIndex]);
     React.useEffect(() => {
-      if (data && data.length > 0) doFetchData(0, pageSize);
+      if (data && data.length > 0) doFetchData(0, isInfiniteScroll ? rowLimit : pageSize);
     }, [sortBy]);
     React.useEffect(() => {
       if (data && data.length > 0 && selectedRowIds && onSelectedChange) onSelectedChange(selectedRowIds ? Object.keys(selectedRowIds) : []);
     }, [selectedRowIds]);
-    return !isMobile ? /*#__PURE__*/React__default["default"].createElement(TableContainer, {
-      css: css,
+    React.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["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["default"].createElement(TableContent, _extends({}, getTableProps(), {
+    }, isLoading && /*#__PURE__*/React__default["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["default"].createElement(TableHead, {
+    }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+      variant: "caption",
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 339,
+        lineNumber: 386,
+        columnNumber: 11
+      }
+    }, "Loading .... ")), !isMobile ? /*#__PURE__*/React__default["default"].createElement(TableContainer, {
+      css: css,
+      ref: scrollerRef,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$h,
+        lineNumber: 390,
         columnNumber: 9
       }
+    }, renderInfiniteScrollWrapper( /*#__PURE__*/React__default["default"].createElement(TableContent, _extends({}, getTableProps(), {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$h,
+        lineNumber: 392,
+        columnNumber: 13
+      }
+    }), /*#__PURE__*/React__default["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["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');
@@ -14489,8 +14721,8 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$h,
-            lineNumber: 347,
-            columnNumber: 21
+            lineNumber: 401,
+            columnNumber: 27
           }
         }), typeof headerRender === 'string' ? /*#__PURE__*/React__default["default"].createElement(TableHeaderCellContainer // css={{
         //   padding:
@@ -14506,16 +14738,16 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$h,
-            lineNumber: 363,
-            columnNumber: 25
+            lineNumber: 417,
+            columnNumber: 31
           }
         }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TableHeadCellContent, {
           heading: "headerTable",
           __self: this,
           __source: {
             fileName: _jsxFileName$h,
-            lineNumber: 376,
-            columnNumber: 29
+            lineNumber: 430,
+            columnNumber: 35
           }
         }, headerRender.toUpperCase()))) : headerRender);
       }));
@@ -14523,8 +14755,8 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 392,
-        columnNumber: 9
+        lineNumber: 446,
+        columnNumber: 15
       }
     }), page.map((row, i) => {
       var _row$cells$filter;
@@ -14538,17 +14770,19 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$h,
-          lineNumber: 401,
-          columnNumber: 15
+          lineNumber: 456,
+          columnNumber: 21
         }
       }, /*#__PURE__*/React__default["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["default"].createElement(TableCell, _extends({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+      }), row.cells.filter(cell => !cell.column.isSubRow).map((cell, index) => /*#__PURE__*/React__default["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'
@@ -14556,8 +14790,8 @@
         __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["default"].createElement(TableRow, {
         key: cell.column.id,
@@ -14565,24 +14799,24 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$h,
-          lineNumber: 419,
-          columnNumber: 21
+          lineNumber: 475,
+          columnNumber: 27
         }
       }, leftAddOnCells.map((_, index) => /*#__PURE__*/React__default["default"].createElement("td", {
         key: index,
         __self: this,
         __source: {
           fileName: _jsxFileName$h,
-          lineNumber: 421,
-          columnNumber: 25
+          lineNumber: 477,
+          columnNumber: 31
         }
       })), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         key: cell.column.id,
         __self: this,
         __source: {
           fileName: _jsxFileName$h,
-          lineNumber: 423,
-          columnNumber: 23
+          lineNumber: 479,
+          columnNumber: 29
         }
       }, /*#__PURE__*/React__default["default"].createElement(TableCell, {
         subCell: true,
@@ -14595,16 +14829,16 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$h,
-          lineNumber: 424,
-          columnNumber: 25
+          lineNumber: 480,
+          columnNumber: 31
         }
       }, /*#__PURE__*/React__default["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["default"].createElement(TableCell, {
         subCell: true,
@@ -14616,39 +14850,39 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$h,
-          lineNumber: 435,
-          columnNumber: 25
+          lineNumber: 491,
+          columnNumber: 31
         }
       }, /*#__PURE__*/React__default["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["default"].createElement(TableFoot, {
+    })), !isInfiniteScroll && /*#__PURE__*/React__default["default"].createElement(TableFoot, {
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 453,
-        columnNumber: 9
+        lineNumber: 510,
+        columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableFootRow, {
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 454,
-        columnNumber: 11
+        lineNumber: 511,
+        columnNumber: 19
       }
     }, /*#__PURE__*/React__default["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["default"].createElement(Flex$1, {
       css: {
@@ -14659,8 +14893,8 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 459,
-        columnNumber: 17
+        lineNumber: 516,
+        columnNumber: 25
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
       heading: "shortContentRegular",
@@ -14668,20 +14902,23 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 466,
-        columnNumber: 19
+        lineNumber: 523,
+        columnNumber: 27
       }
-    }, emptyDataMessage || 'Tidak ada data'))))))) : /*#__PURE__*/React__default["default"].createElement(MobileTable, {
+    }, emptyDataMessage || 'Tidak ada data')))))))) : /*#__PURE__*/React__default["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 = {
@@ -14695,12 +14932,17 @@
     css: PropTypes__default["default"].object,
     onSelectedChange: PropTypes__default["default"].func,
     hideDataInfo: PropTypes__default["default"].bool,
-    emptyDataMessage: PropTypes__default["default"].string
+    emptyDataMessage: PropTypes__default["default"].string,
+    isInfiniteScroll: PropTypes__default["default"].bool,
+    hasMoreItems: PropTypes__default["default"].bool,
+    rowLimit: PropTypes__default["default"].number
   };
   Table.defaultProps = {
     keyId: 'id',
     pageIndex: 0,
-    hideDataInfo: false
+    hideDataInfo: false,
+    hasMoreItems: true,
+    rowLimit: 10
   };
   Table.displayName = 'Table';
 
@@ -15521,7 +15763,7 @@
 
   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 => {
@@ -15534,7 +15776,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 15,
+          lineNumber: 27,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuTrigger, {
@@ -15542,7 +15784,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 16,
+          lineNumber: 28,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -15555,7 +15797,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 17,
+          lineNumber: 29,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -15563,15 +15805,15 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 18,
+          lineNumber: 30,
           columnNumber: 15
         }
-      }, /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
+      }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 19,
-          columnNumber: 17
+          lineNumber: 30,
+          columnNumber: 70
         }
       })))), /*#__PURE__*/React__default["default"].createElement(DropdownMenuContent, {
         onInteractOutside: () => setOpenDrop(false),
@@ -15591,7 +15833,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 23,
+          lineNumber: 33,
           columnNumber: 11
         }
       }, options.map(option => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
@@ -15603,7 +15845,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 41,
+          lineNumber: 51,
           columnNumber: 17
         }
       }, option.title), /*#__PURE__*/React__default["default"].createElement(DropdownMenuSeparator, {
@@ -15614,7 +15856,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 46,
+          lineNumber: 60,
           columnNumber: 17
         }
       }))))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
@@ -15626,7 +15868,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 51,
+          lineNumber: 65,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -15634,7 +15876,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 58,
+          lineNumber: 66,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -15647,28 +15889,28 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 59,
+          lineNumber: 67,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 60,
+          lineNumber: 68,
           columnNumber: 15
         }
-      }, /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
+      }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 61,
-          columnNumber: 17
+          lineNumber: 68,
+          columnNumber: 36
         }
       })))), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 65,
+          lineNumber: 71,
           columnNumber: 11
         }
       }, "Aksi"), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -15678,7 +15920,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 66,
+          lineNumber: 72,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -15693,7 +15935,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 67,
+          lineNumber: 73,
           columnNumber: 13
         }
       }, options.map(option => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -15707,7 +15949,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 70,
+          lineNumber: 76,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -15716,7 +15958,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 71,
+          lineNumber: 85,
           columnNumber: 21
         }
       }, option.title)), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -15724,7 +15966,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 73,
+          lineNumber: 89,
           columnNumber: 19
         }
       })))))));
@@ -15854,7 +16096,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
       css: {
-        backgroundColor: isMobile ? '$white' : '$gray150',
+        backgroundColor: isMobile ? '$white' : '$gray50',
         height: '100%',
         display: 'flex',
         flexDirection: 'column'
@@ -18724,8 +18966,8 @@
     height
   }) => {
     const isFile = listType === 'file';
-    const hiddenFileInput = React__default["default"].useRef(null);
-    const [indexReplace, setIndexReplace] = React.useState(null);
+    const hiddenFileInput = React.useRef(null);
+    const indexReplace = React.useRef(null);
     const [errorMessage, setErrorMessage] = React.useState(null);
     const defaultSize = 200;
     const ContainerUpload = styled('div', {
@@ -18751,6 +18993,11 @@
               background: '$bgFailed'
             }
           }
+        },
+        hidden: {
+          true: {
+            display: 'none !important'
+          }
         }
       }
     });
@@ -18784,26 +19031,25 @@
         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);
+          }
         }
       }
     }
@@ -18829,7 +19075,7 @@
     }
 
     function handleReplace(index) {
-      setIndexReplace(index);
+      indexReplace.current = index;
       handleClick();
     }
 
@@ -18849,7 +19095,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 235,
+          lineNumber: 240,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -18858,7 +19104,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 236,
+          lineNumber: 241,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -18871,7 +19117,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 246,
+            lineNumber: 251,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -18881,7 +19127,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 247,
+            lineNumber: 252,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -18890,7 +19136,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 248,
+            lineNumber: 253,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -18903,7 +19149,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 249,
+            lineNumber: 254,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -18912,7 +19158,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 257,
+            lineNumber: 262,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -18920,7 +19166,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 259,
+            lineNumber: 264,
             columnNumber: 13
           }
         })), renderButtonReplace(index));
@@ -18934,7 +19180,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 270,
+            lineNumber: 275,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -18944,7 +19190,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 271,
+            lineNumber: 276,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -18953,7 +19199,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 272,
+            lineNumber: 277,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -18966,7 +19212,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 273,
+            lineNumber: 278,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -18976,7 +19222,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 281,
+            lineNumber: 286,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(CheckIcon, {
@@ -18984,7 +19230,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 282,
+            lineNumber: 287,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -18998,14 +19244,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 283,
+            lineNumber: 288,
             columnNumber: 17
           }
         }, item.name))), /*#__PURE__*/React__default["default"].createElement(Blank, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 296,
+            lineNumber: 301,
             columnNumber: 13
           }
         })), renderButtonReplace(index));
@@ -19017,16 +19263,17 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 306,
+          lineNumber: 311,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["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["default"].createElement(Input, {
@@ -19037,49 +19284,49 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 308,
+          lineNumber: 317,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 309,
+          lineNumber: 318,
           columnNumber: 11
         }
       }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 311,
+          lineNumber: 320,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
         __self: this,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 312,
+          lineNumber: 321,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
         __self: this,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 313,
+          lineNumber: 322,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["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["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 320,
+          lineNumber: 329,
           columnNumber: 26
         }
       }, errorMessage));
@@ -19095,10 +19342,10 @@
       __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 = {
@@ -22516,51 +22763,6 @@
     }), void 0);
   };
 
-  const useTableOfContent = (rootMargin, isMobile) => {
-    const [activeId, setActiveId] = React.useState();
-    const headingElementsRef = React.useRef({});
-    React.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({
@@ -22609,6 +22811,9 @@
   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'
     }
@@ -22617,9 +22822,12 @@
     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'
     }
@@ -22632,24 +22840,24 @@
   });
   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'
         }
       }
     }
@@ -22657,17 +22865,12 @@
   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'
         }
       }
     }
@@ -22676,7 +22879,8 @@
   function Content({
     content,
     activeId,
-    isCollapse
+    isCollapse,
+    isDialog
   }) {
     var _getDatasets;
 
@@ -22705,21 +22909,25 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 96,
+        lineNumber: 93,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator, {
+      isCollapse: isCollapse,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 97,
+        lineNumber: 94,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["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) => {
@@ -22728,54 +22936,79 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 101,
+          lineNumber: 98,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["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["default"].createElement(Separator, {
+      }, /*#__PURE__*/React__default["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["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["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] = React.useState(false);
 
     function toggleCollapse() {
@@ -22785,22 +23018,24 @@
     return isMobile ? /*#__PURE__*/React__default["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["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["default"].createElement(icons.ChevronDownOutline, {
@@ -22810,7 +23045,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 137,
+        lineNumber: 154,
         columnNumber: 7
       }
     })) : /*#__PURE__*/React__default["default"].createElement(DesktopContainer, {
@@ -22819,28 +23054,33 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 140,
+        lineNumber: 157,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["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__default["default"]);
+  Page.displayName = 'TableOfContent.Page';
+  TableOfContent.Page = Page;
   TableOfContent.defaultProps = {
     isMobile: false
   };
   TableOfContent.propTypes = {
     content: PropTypes__default["default"].array,
     isMobile: PropTypes__default["default"].bool,
-    rootMarin: PropTypes__default["default"].object
+    isDialog: PropTypes__default["default"].bool,
+    activeId: PropTypes__default["default"].string
   };
 
   var _jsxFileName = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/colors/Colors.js";
@@ -23042,6 +23282,7 @@
   exports.InputGroup = InputGroup;
   exports.InputLeftAddon = InputLeftAddon;
   exports.InputLeftElement = InputLeftElement;
+  exports.InputNumber = InputNumber;
   exports.InputPrefix = InputPrefix;
   exports.InputRadio = InputRadio;
   exports.InputRadioGroup = InputRadioGroup;
@@ -23121,7 +23362,6 @@
   exports.Upload = Upload;
   exports.addOnCellStyle = addOnCellStyle;
   exports.defaultFetchDataParams = defaultFetchDataParams;
-  exports.useTableOfContent = useTableOfContent;
 
   Object.defineProperty(exports, '__esModule', { value: true });