@majoo-ui/react 1.52.10 → 1.53.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('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('react-ui-scrollspy'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', 'react-ui-scrollspy', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, api, request, recharts, draftJs, reactDraftWysiwyg, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('react-ui-scrollspy'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', 'react-ui-scrollspy', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -4913,7 +4913,7 @@
   const {
     zIndices: zIndices$1
   } = core.foundations;
-  const slideUpAndFade$1 = keyframes({
+  const slideUpAndFade$2 = keyframes({
     '0%': {
       opacity: 0,
       transform: 'translateY(2px)'
@@ -4923,7 +4923,7 @@
       transform: 'translateY(0)'
     }
   });
-  const slideRightAndFade$1 = keyframes({
+  const slideRightAndFade$2 = keyframes({
     '0%': {
       opacity: 0,
       transform: 'translateX(-2px)'
@@ -4933,7 +4933,7 @@
       transform: 'translateX(0)'
     }
   });
-  const slideDownAndFade$1 = keyframes({
+  const slideDownAndFade$2 = keyframes({
     '0%': {
       opacity: 0,
       transform: 'translateY(-2px)'
@@ -4943,7 +4943,7 @@
       transform: 'translateY(0)'
     }
   });
-  const slideLeftAndFade$1 = keyframes({
+  const slideLeftAndFade$2 = keyframes({
     '0%': {
       opacity: 0,
       transform: 'translateX(2px)'
@@ -4970,16 +4970,16 @@
       willChange: 'transform, opacity',
       '&[data-state="delayed-open"]': {
         '&[data-side="top"]': {
-          animationName: slideDownAndFade$1
+          animationName: slideDownAndFade$2
         },
         '&[data-side="right"]': {
-          animationName: slideLeftAndFade$1
+          animationName: slideLeftAndFade$2
         },
         '&[data-side="bottom"]': {
-          animationName: slideUpAndFade$1
+          animationName: slideUpAndFade$2
         },
         '&[data-side="left"]': {
-          animationName: slideRightAndFade$1
+          animationName: slideRightAndFade$2
         }
       }
     }
@@ -6382,18 +6382,39 @@
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
+    const textareaRef = React.useRef(null);
+    React.useEffect(() => {
+      if (textareaRef.current) {
+        textareaRef.current.style.height = '60px';
+        const scrollHeight = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current.scrollHeight;
+        textareaRef.current.style.height = scrollHeight + 20 + 'px';
+      }
+    }, []);
+
+    function handleKeyDown(e) {
+      e.target.style.height = '60px';
+      e.target.style.height = `${e.target.scrollHeight + 20}px`;
+    }
+
     return /*#__PURE__*/React__default["default"].createElement(StyledTextArea, _extends({
-      ref: ref,
+      ref: node => {
+        textareaRef.current = node;
+
+        if (ref && ref.current) {
+          ref.current = node;
+        }
+      },
       disabled: disabled,
       isDisabled: disabled,
       readOnly: readOnly,
-      isReadOnly: readOnly
+      isReadOnly: readOnly,
+      onKeyDown: handleKeyDown
     }, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$G,
-        lineNumber: 22,
-        columnNumber: 3
+        lineNumber: 38,
+        columnNumber: 5
       }
     }));
   });
@@ -6612,7 +6633,7 @@
               letterSpacing: '$long-content-regular',
               fontWeight: '400',
               cursor: 'pointer',
-              color: disabled || readOnly ? '$textDisable' : '$textPrimary'
+              color: disabled || readOnly && checked !== props.value ? '$textDisable' : '$textPrimary'
             },
             __self: this,
             __source: {
@@ -6834,6 +6855,9 @@
         sm: {
           height: 32
         },
+        md: {
+          height: 36
+        },
         lg: {
           height: 40
         }
@@ -6889,7 +6913,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 147,
+        lineNumber: 150,
         columnNumber: 3
       }
     }));
@@ -9293,7 +9317,7 @@
     }
   }));
 
-  const _excluded$d = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css"];
+  const _excluded$d = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter"];
   var _jsxFileName$v = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\InputSelectCheck.js";
   const Wrapper$1 = styled('div', {
     margin: 0,
@@ -9501,7 +9525,7 @@
     alignItems: 'center',
     borderBottom: '1px solid $bgBorder'
   });
-  const Item$2 = styled('div', {
+  const Item$3 = styled('div', {
     overflow: 'hidden',
     backgroundColor: '$bgWhite',
     lineHeight: '20px',
@@ -9547,7 +9571,9 @@
       showSelectedTag,
       unremovableTags,
       helperText,
-      css
+      css,
+      showCounter,
+      labelCounter
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
@@ -9670,12 +9696,21 @@
       if (disabled || readOnly) {
         return selectedValue;
       } else {
-        const filterItems = selectedValue.filter(val => val !== selected.id && val !== '!all');
-        removeSelectedItem(selected);
-        setSelectedValue(filterItems);
+        if ((selected === null || selected === void 0 ? void 0 : selected.id) === 'counter') {
+          setSelectedValue([]);
+          onChange === null || onChange === void 0 ? void 0 : onChange([]);
 
-        if (selected.id !== '!all') {
-          onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
+          for (let i = 0; i < selectedValue.length; i++) {
+            removeSelectedItem(selectedValue[i]);
+          }
+        } else {
+          const filterItems = selectedValue.filter(val => val !== selected.id && val !== '!all');
+          removeSelectedItem(selected);
+          setSelectedValue(filterItems);
+
+          if (selected.id !== '!all') {
+            onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
+          }
         }
       }
     };
@@ -9794,7 +9829,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 507,
+        lineNumber: 517,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -9804,7 +9839,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 508,
+        lineNumber: 518,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9819,7 +9854,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 509,
+        lineNumber: 519,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -9835,7 +9870,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 519,
+        lineNumber: 529,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -9848,7 +9883,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 525,
+        lineNumber: 535,
         columnNumber: 13
       }
     }), placeholder)), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9859,7 +9894,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 535,
+        lineNumber: 545,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -9867,7 +9902,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 540,
+        lineNumber: 550,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -9880,15 +9915,15 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 544,
+        lineNumber: 554,
         columnNumber: 11
       }
-    }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
+    }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
       disabled: disabled,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 549,
+        lineNumber: 559,
         columnNumber: 11
       }
     }, selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : _selectedItems$filter.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
@@ -9912,10 +9947,45 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 553,
+        lineNumber: 563,
         columnNumber: 17
       }
-    }), selectedItem.name))), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
+    }), selectedItem.name))), showSelectedTag && showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
+      disabled: disabled,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$v,
+        lineNumber: 585,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Tag, {
+      css: {
+        maxWidth: '150px !important'
+      },
+      disabled: disabled,
+      isRemovable: readOnly || disabled || Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length),
+      size: size,
+      readOnly: readOnly // {...getSelectedItemProps({ selectedItem, index })}
+      ,
+      onRemove: event => {
+        if (onRemoveItem) {
+          return onRemoveItem({
+            id: 'counter'
+          });
+        } else {
+          event.stopPropagation();
+          removeItem({
+            id: 'counter'
+          });
+        }
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$v,
+        lineNumber: 586,
+        columnNumber: 13
+      }
+    }, `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
       placement: placement,
       css: {
         display: isOpen && disabled === false ? 'block' : 'none',
@@ -9924,7 +9994,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 574,
+        lineNumber: 606,
         columnNumber: 9
       }
     }, items.length !== 0 ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({}, {
@@ -9933,7 +10003,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 579,
+        lineNumber: 611,
         columnNumber: 13
       }
     }), isOpen && items.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
@@ -9951,7 +10021,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 582,
+        lineNumber: 614,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -9964,7 +10034,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 595,
+        lineNumber: 627,
         columnNumber: 21
       }
     }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9972,7 +10042,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 604,
+        lineNumber: 636,
         columnNumber: 25
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9980,31 +10050,31 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 608,
+        lineNumber: 640,
         columnNumber: 27
       }
     }), showSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 615,
+        lineNumber: 647,
         columnNumber: 25
       }
     }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 617,
+        lineNumber: 649,
         columnNumber: 25
       }
-    })), /*#__PURE__*/React__default["default"].createElement(Item$2, {
+    })), /*#__PURE__*/React__default["default"].createElement(Item$3, {
       css: {
         backgroundColor: 'unset'
       },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 620,
+        lineNumber: 652,
         columnNumber: 21
       }
     }, item.name)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -10017,14 +10087,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 625,
+        lineNumber: 657,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 626,
+        lineNumber: 658,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -10034,7 +10104,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 627,
+        lineNumber: 659,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -10046,7 +10116,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 628,
+        lineNumber: 660,
         columnNumber: 19
       }
     })), textEmptyItem))));
@@ -10071,7 +10141,9 @@
     selectAllLabel: PropTypes__default["default"].string,
     showSelectedTag: PropTypes__default["default"].bool,
     css: PropTypes__default["default"].object,
-    helperText: PropTypes__default["default"].string
+    helperText: PropTypes__default["default"].string,
+    showCounter: PropTypes__default["default"].bool,
+    labelCounter: PropTypes__default["default"].string
   };
   InputSelectCheck.defaultProps = {
     placeholder: 'Select Item',
@@ -10087,7 +10159,9 @@
     textEmptyItem: 'Item tidak ditemukan',
     sortBy: 'name',
     showSelectAll: false,
-    selectAllLabel: 'Pilih Semua'
+    selectAllLabel: 'Pilih Semua',
+    showCounter: false,
+    labelCounter: 'Item terpilih'
   };
 
   var _jsxFileName$u = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\InputSelectTag.js";
@@ -10120,7 +10194,9 @@
     unremovableTags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
     disabledOptions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
     textEmptyItem: PropTypes__default["default"].string,
-    helperText: PropTypes__default["default"].string
+    helperText: PropTypes__default["default"].string,
+    showCounter: PropTypes__default["default"].bool,
+    labelCounter: PropTypes__default["default"].string
   };
   InputSelectTag.defaultProps = {
     placeholder: 'Select Item',
@@ -10134,7 +10210,9 @@
     disabledOptions: [],
     unremovableTags: [],
     textEmptyItem: 'Item tidak ditemukan',
-    sortBy: 'name'
+    sortBy: 'name',
+    showCounter: false,
+    labelCounter: 'Item terpilih'
   };
 
   var _jsxFileName$t = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCreatable\\InputCreatable.js";
@@ -10271,7 +10349,7 @@
     color: '$textGreen',
     height: '100%'
   });
-  const Item$1 = styled('div', {
+  const Item$2 = styled('div', {
     backgroundColor: '$bgWhite',
     cursor: 'pointer',
     lineHeight: '20px'
@@ -10362,7 +10440,7 @@
         lineNumber: 181,
         columnNumber: 11
       }
-    }), /*#__PURE__*/React__default["default"].createElement(Item$1, {
+    }), /*#__PURE__*/React__default["default"].createElement(Item$2, {
       onClick: () => {
         if (onClickItem) onClickItem();
         setOpen(false);
@@ -11042,6 +11120,20 @@
             border: "1px solid $gray150 !important"
           }
         }
+      },
+      buttonSize: {
+        sm: {
+          height: '32px !important',
+          padding: '4px 16px !important'
+        },
+        md: {
+          height: '36px !important',
+          padding: '4px 16px !important'
+        },
+        lg: {
+          height: '40px !important',
+          padding: '7px 16px !important'
+        }
       }
     }
   });
@@ -11058,7 +11150,8 @@
         disabledIncrement = props.disabledIncrement,
         disabledDecrement = props.disabledDecrement,
         prefix = props.prefix,
-        suffix = props.suffix;
+        suffix = props.suffix,
+        size = props.size;
 
     var _b = React.useState((_a = value !== null && value !== void 0 ? value : min) !== null && _a !== void 0 ? _a : 0),
         inputValue = _b[0],
@@ -11111,6 +11204,7 @@
         type: "button",
         disabled: disabled || disabledDecrement,
         buttonType: "secondary",
+        buttonSize: size,
         counterType: "minus",
         icon: true,
         onClick: handleDown
@@ -11127,11 +11221,13 @@
         allowNegative: allowNegative,
         onChange: handleChange,
         prefix: prefix,
-        suffix: suffix
+        suffix: suffix,
+        size: size
       }, void 0), jsxRuntime.jsx(Button, __assign({
         type: "button",
         disabled: disabled || disabledIncrement,
         buttonType: "secondary",
+        buttonSize: size,
         counterType: "plus",
         icon: true,
         onClick: handleUp
@@ -11145,7 +11241,8 @@
   });
   InputCounter.defaultProps = {
     allowNegative: false,
-    disabled: false
+    disabled: false,
+    size: 'lg'
   };
 
   const _excluded$c = ["children"];
@@ -14320,7 +14417,7 @@
   }
 
   var ButtonGroup = styled(ToggleGroupPrimitive__namespace.Root, {});
-  var Item = styled(ButtonGroupItem, {
+  var Item$1 = styled(ButtonGroupItem, {
     fontSize: '$label',
     lineHeight: '$label',
     letterSpacing: '$label',
@@ -14339,7 +14436,7 @@
       orientation: "vertical"
     }, {
       children: options.map(function (option) {
-        return jsxRuntime.jsx(Item, __assign({
+        return jsxRuntime.jsx(Item$1, __assign({
           isToggle: false,
           disabled: disabled,
           value: option.value,
@@ -17310,6 +17407,130 @@
   };
   Pagination.displayName = 'Pagination';
 
+  var Trigger = function Trigger(props) {
+    return jsxRuntime.jsx(reactContextmenu.ContextMenuTrigger, __assign({}, props, {
+      mouseButton: (props === null || props === void 0 ? void 0 : props.triggerSide) === 'left' ? 0 : undefined
+    }, {
+      children: props === null || props === void 0 ? void 0 : props.children
+    }), void 0);
+  };
+
+  var Menu = function Menu(props) {
+    return jsxRuntime.jsx(reactContextmenu.ContextMenu, __assign({}, props, {
+      children: props === null || props === void 0 ? void 0 : props.children
+    }), void 0);
+  };
+
+  var Item = function Item(props) {
+    return jsxRuntime.jsx(reactContextmenu.MenuItem, __assign({}, props, {
+      children: props === null || props === void 0 ? void 0 : props.children
+    }), void 0);
+  };
+
+  var slideUpAndFade$1 = keyframes({
+    '0%': {
+      opacity: 0,
+      transform: 'translateY(2px)'
+    },
+    '100%': {
+      opacity: 1,
+      transform: 'translateY(0)'
+    }
+  });
+  var slideRightAndFade$1 = keyframes({
+    '0%': {
+      opacity: 0,
+      transform: 'translateX(-2px)'
+    },
+    '100%': {
+      opacity: 1,
+      transform: 'translateX(0)'
+    }
+  });
+  var slideDownAndFade$1 = keyframes({
+    '0%': {
+      opacity: 0,
+      transform: 'translateY(-2px)'
+    },
+    '100%': {
+      opacity: 1,
+      transform: 'translateY(0)'
+    }
+  });
+  var slideLeftAndFade$1 = keyframes({
+    '0%': {
+      opacity: 0,
+      transform: 'translateX(2px)'
+    },
+    '100%': {
+      opacity: 1,
+      transform: 'translateX(0)'
+    }
+  });
+  var ContextMenuTrigger = styled(Trigger);
+  var ContextMenu = styled(Menu, {
+    width: 'auto',
+    minWidth: 143,
+    maxWidth: 243,
+    backgroundColor: 'white',
+    borderRadius: 4,
+    padding: 8,
+    zIndex: '$sticky',
+    boxShadow: '0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)',
+    '@media (prefers-reduced-motion: no-preference)': {
+      animationDuration: '400ms',
+      animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+      animationFillMode: 'forwards',
+      willChange: 'transform, opacity',
+      '&[data-state="open"]': {
+        '&[data-side="top"]': {
+          animationName: slideDownAndFade$1
+        },
+        '&[data-side="right"]': {
+          animationName: slideLeftAndFade$1
+        },
+        '&[data-side="bottom"]': {
+          animationName: slideUpAndFade$1
+        },
+        '&[data-side="left"]': {
+          animationName: slideRightAndFade$1
+        }
+      }
+    }
+  });
+  var ContextMenuItem = styled(Item, {
+    all: 'unset',
+    fontSize: 14,
+    lineHeight: 1.5,
+    borderRadius: 3,
+    display: 'flex',
+    alignItems: 'center',
+    height: 'calc(36px - 8px)',
+    padding: '4px 0',
+    position: 'relative',
+    userSelect: 'none',
+    color: '$textPrimary',
+    '&[data-disabled]': {
+      color: colors$4.gray400,
+      pointerEvents: 'none'
+    },
+    '&:hover': {
+      cursor: 'pointer',
+      backgroundColor: colors$4.gray100
+    },
+    '&:active': {
+      backgroundColor: colors$4.gray150
+    },
+    '&:focus': {
+      backgroundColor: colors$4.gray100
+    }
+  });
+  var ContextMenuSeparator = styled('div', {
+    height: 1,
+    backgroundColor: colors$4.gray150,
+    margin: 5
+  });
+
   var TableContainer$4 = styled(Flex$1, {
     position: 'relative',
     flexDirection: 'column',
@@ -17817,12 +18038,17 @@
         columnOrder = _a.columnOrder,
         customRowsStyle = _a.customRowsStyle,
         isMobileLayout = _a.isMobileLayout,
-        showDuplicatedData = _a.showDuplicatedData;
+        showDuplicatedData = _a.showDuplicatedData,
+        onRowClick = _a.onRowClick;
 
     var _o = React.useState(rowLimit),
         limit = _o[0],
         setLimit = _o[1];
 
+    var _p = React.useState({}),
+        dataRow = _p[0],
+        setDataRow = _p[1];
+
     var getInitialState = function getInitialState() {
       var initialState = {};
 
@@ -17867,11 +18093,11 @@
         gotoPage = instance.gotoPage,
         setPageSize = instance.setPageSize,
         toggleRowSelected = instance.toggleRowSelected,
-        _p = instance.state,
-        pageIndex = _p.pageIndex,
-        pageSize = _p.pageSize,
-        sortBy = _p.sortBy,
-        selectedRowIds = _p.selectedRowIds,
+        _q = instance.state,
+        pageIndex = _q.pageIndex,
+        pageSize = _q.pageSize,
+        sortBy = _q.sortBy,
+        selectedRowIds = _q.selectedRowIds,
         setHiddenColumns = instance.setHiddenColumns,
         setColumnOrder = instance.setColumnOrder;
 
@@ -17979,6 +18205,56 @@
         });
       }
     }, [data, selectedIds]);
+
+    var getOptionsMenu = function getOptionsMenu() {
+      var _a, _b;
+
+      var options = [];
+
+      for (var i = 0; i < (page === null || page === void 0 ? void 0 : page.length); i++) {
+        prepareRow(page[i]);
+
+        for (var j = 0; j < page[i].cells.length; j++) {
+          var column = (_b = (_a = page[i]) === null || _a === void 0 ? void 0 : _a.cells[j]) === null || _b === void 0 ? void 0 : _b.column;
+
+          if (column === null || column === void 0 ? void 0 : column.options) {
+            options = column === null || column === void 0 ? void 0 : column.options;
+          }
+        }
+      }
+
+      return options;
+    };
+
+    var renderContextMenu = function renderContextMenu() {
+      var options = getOptionsMenu();
+      return jsxRuntime.jsx(ContextMenu, __assign({
+        id: "context-menu-table"
+      }, {
+        children: options === null || options === void 0 ? void 0 : options.map(function (option, index) {
+          return jsxRuntime.jsxs(React__namespace.Fragment, {
+            children: [jsxRuntime.jsx(ContextMenuItem, __assign({
+              data: {
+                row: dataRow
+              },
+              onClick: function () {
+                return option === null || option === void 0 ? void 0 : option.onClick({
+                  row: dataRow
+                });
+              }
+            }, {
+              children: option === null || option === void 0 ? void 0 : option.title
+            }), void 0), index !== (options === null || options === void 0 ? void 0 : options.length) - 1 && jsxRuntime.jsx(ContextMenuSeparator, {}, void 0)]
+          }, index);
+        })
+      }), void 0);
+    };
+
+    var handleRowClick = function handleRowClick(row, i) {
+      onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, i);
+      setDataRow(row);
+    };
+
     return jsxRuntime.jsxs(Box, __assign({
       css: {
         position: 'relative',
@@ -18006,11 +18282,11 @@
           children: "Loading .... "
         }), void 0)
       }), void 0), !isMobile ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(TableContainer$3, __assign({
+        children: [jsxRuntime.jsxs(TableContainer$3, __assign({
           css: css,
           ref: scrollerRef
         }, {
-          children: renderInfiniteScrollWrapper(jsxRuntime.jsxs(TableContent$3, __assign({}, getTableProps(), {
+          children: [renderInfiniteScrollWrapper(jsxRuntime.jsxs(TableContent$3, __assign({}, getTableProps(), {
             children: [jsxRuntime.jsx(TableHead$3, __assign({
               css: headerCss
             }, {
@@ -18050,7 +18326,7 @@
               })
             }), void 0), jsxRuntime.jsx(TableBody$3, __assign({}, getTableBodyProps(), {
               children: page.map(function (row, i) {
-                var _a;
+                var _a, _b;
 
                 prepareRow(row);
                 var subRowCells = row.cells.filter(function (cell) {
@@ -18062,6 +18338,11 @@
                 var notNullHeaderColumns = visibleColumns.filter(function (column) {
                   return typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow;
                 });
+                var isContextMenu = (_b = row.cells.filter(function (cell) {
+                  var _a, _b;
+
+                  return (_b = (_a = cell.column) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
+                })) === null || _b === void 0 ? void 0 : _b.length;
                 var customStyle = {};
 
                 if (customRowsStyle && customRowsStyle(row.values).length) {
@@ -18083,13 +18364,41 @@
                     children: row.cells.filter(function (cell) {
                       return !cell.column.isSubRow;
                     }).map(function (cell) {
+                      var _a, _b;
+
                       return jsxRuntime.jsx(TableCell$3, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                         css: __assign(__assign({
-                          padding: cell.column.accessor ? '20px 8px' : '20px 20px',
-                          verticalAlign: cell.column.accessor ? cellAlign : 'center'
-                        }, stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column))
+                          padding: !isContextMenu || ['expander', 'selection', 'menu', 'eye'].includes((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id) ? cell.column.accessor ? '20px 8px' : '20px 20px' : '',
+                          verticalAlign: cell.column.accessor ? cellAlign : 'center',
+                          cursor: onRowClick ? 'pointer' : 'unset'
+                        }, stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column)),
+                        onClick: function () {
+                          return handleRowClick(row, i);
+                        }
                       }, {
-                        children: cell.render('Cell')
+                        children: jsxRuntime.jsx(ConditionalWrapper, __assign({
+                          condition: isContextMenu && !['expander', 'selection', 'menu', 'eye'].includes((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id),
+                          wrapper: function (children) {
+                            return jsxRuntime.jsx(ContextMenuTrigger, __assign({
+                              id: "context-menu-table",
+                              triggerSide: "left"
+                            }, {
+                              children: jsxRuntime.jsx(Box, __assign({
+                                css: {
+                                  cursor: 'pointer',
+                                  padding: cell.column.accessor ? '20px 8px' : '20px 20px'
+                                },
+                                onClick: function () {
+                                  return handleRowClick(row, i);
+                                }
+                              }, {
+                                children: children
+                              }), void 0)
+                            }), void 0);
+                          }
+                        }, {
+                          children: cell.render('Cell')
+                        }), void 0)
                       }), void 0);
                     })
                   }), void 0), row.isExpanded ? subRowCells.map(function (cell, index) {
@@ -18133,7 +18442,7 @@
                 }, row.id);
               })
             }), void 0)]
-          }), void 0))
+          }), void 0)), renderContextMenu()]
         }), void 0), !isInfiniteScroll && jsxRuntime.jsx(Box, __assign({
           css: {
             width: '100%'
@@ -18914,6 +19223,7 @@
 
   const rowMenuColumn = (options, icon, config) => ({
     id: 'menu',
+    options,
     Header: () => null,
     Cell: props => {
       const defaultConfig = {
@@ -18937,7 +19247,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 36,
+          lineNumber: 37,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuTrigger, {
@@ -18945,7 +19255,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 37,
+          lineNumber: 38,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18958,7 +19268,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 38,
+          lineNumber: 39,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -18966,21 +19276,21 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 39,
+          lineNumber: 40,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 39,
+          lineNumber: 40,
           columnNumber: 70
         }
       })))), /*#__PURE__*/React__default["default"].createElement(DropdownMenuPortal, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 42,
+          lineNumber: 43,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuContent, {
@@ -19003,7 +19313,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 43,
+          lineNumber: 44,
           columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -19011,7 +19321,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 63,
+          lineNumber: 64,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
@@ -19023,7 +19333,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 64,
+          lineNumber: 65,
           columnNumber: 19
         }
       }, option.title), /*#__PURE__*/React__default["default"].createElement(DropdownMenuSeparator, {
@@ -19034,7 +19344,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 73,
+          lineNumber: 74,
           columnNumber: 19
         }
       })))))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
@@ -19045,7 +19355,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 79,
+          lineNumber: 80,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -19053,7 +19363,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 80,
+          lineNumber: 81,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19066,28 +19376,28 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 81,
+          lineNumber: 82,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 82,
+          lineNumber: 83,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 82,
+          lineNumber: 83,
           columnNumber: 36
         }
       })))), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 85,
+          lineNumber: 86,
           columnNumber: 11
         }
       }, mobileTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -19097,7 +19407,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 86,
+          lineNumber: 87,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19112,7 +19422,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 87,
+          lineNumber: 88,
           columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -19120,7 +19430,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 89,
+          lineNumber: 90,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19136,7 +19446,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 90,
+          lineNumber: 91,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -19145,7 +19455,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 101,
+          lineNumber: 102,
           columnNumber: 21
         }
       }, option.title)), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -19153,7 +19463,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 105,
+          lineNumber: 106,
           columnNumber: 19
         }
       })))))));
@@ -22171,6 +22481,7 @@
   function upload(_a) {
     var url = _a.url,
         file = _a.file,
+        customBody = _a.customBody,
         tokenKey = _a.tokenKey,
         token = _a.token,
         progress = _a.progress,
@@ -22180,8 +22491,18 @@
         onSuccess = _a.onSuccess,
         onProgress = _a.onProgress;
     var promise = new Promise(function (resolve, reject) {
+      var _a;
+
       var formdata = new FormData();
-      formdata.append(reqKey, file);
+
+      if (customBody) {
+        for (var i = 0; i < ((_a = Object.keys(customBody)) === null || _a === void 0 ? void 0 : _a.length); i++) {
+          formdata.append(Object.keys(customBody)[i], customBody[Object.keys(customBody)[i]]);
+        }
+      } else {
+        formdata.append(reqKey, file);
+      }
+
       request__default["default"].post(url).set(tokenKey, token).send(formdata).on('progress', function (e) {
         onProgress === null || onProgress === void 0 ? void 0 : onProgress(e);
         progress === null || progress === void 0 ? void 0 : progress(Math.round(e.percent));
@@ -22336,6 +22657,7 @@
     progress,
     loading,
     action,
+    customBodyRequest,
     token,
     tokenKey,
     reqKey,
@@ -22344,7 +22666,8 @@
     disabled,
     errorMessage,
     maxSizeMB,
-    imageCompression
+    imageCompression,
+    hiddenToggleAspect
   }) => {
     const isFile = listType === 'file';
     const imgRef = React.useRef(null);
@@ -22518,6 +22841,7 @@
           upload({
             url: action,
             file: newFile,
+            customBody: customBodyRequest === null || customBodyRequest === void 0 ? void 0 : customBodyRequest(newFile),
             token,
             tokenKey,
             reqKey,
@@ -22618,9 +22942,12 @@
           handleUpload(files);
         } else {
           if (onBeforeCrop) {
+            var _files$;
+
             // program to get the dimensions of an image
             const img = document.createElement('img');
             img.src = URL.createObjectURL(files[0]);
+            img.size = files === null || files === void 0 ? void 0 : (_files$ = files[0]) === null || _files$ === void 0 ? void 0 : _files$.size;
 
             img.onload = () => {
               var _onBeforeCrop, _onBeforeCrop$then;
@@ -22808,7 +23135,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 603,
+          lineNumber: 607,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -22818,7 +23145,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 604,
+          lineNumber: 608,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
@@ -22834,7 +23161,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 614,
+              lineNumber: 618,
               columnNumber: 16
             }
           });
@@ -22846,7 +23173,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 617,
+            lineNumber: 621,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22856,7 +23183,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 618,
+            lineNumber: 622,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22865,7 +23192,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 619,
+            lineNumber: 623,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22878,7 +23205,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 620,
+            lineNumber: 624,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22887,7 +23214,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 628,
+            lineNumber: 632,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -22897,7 +23224,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 630,
+            lineNumber: 634,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -22916,7 +23243,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 641,
+              lineNumber: 645,
               columnNumber: 16
             }
           });
@@ -22927,7 +23254,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 644,
+            lineNumber: 648,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22937,7 +23264,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 645,
+            lineNumber: 649,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22946,7 +23273,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 646,
+            lineNumber: 650,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22959,7 +23286,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 647,
+            lineNumber: 651,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22969,14 +23296,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 655,
+            lineNumber: 659,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 656,
+            lineNumber: 660,
             columnNumber: 17
           }
         }, ".", item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -22984,7 +23311,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 657,
+            lineNumber: 661,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -22999,7 +23326,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 658,
+            lineNumber: 662,
             columnNumber: 19
           }
         }, item.name)))), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -23012,7 +23339,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 673,
+            lineNumber: 677,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -23021,7 +23348,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 681,
+            lineNumber: 685,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -23029,7 +23356,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 683,
+            lineNumber: 687,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -23045,7 +23372,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 694,
+          lineNumber: 698,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -23059,7 +23386,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 695,
+          lineNumber: 699,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -23085,7 +23412,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 696,
+          lineNumber: 700,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -23093,14 +23420,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 709,
+          lineNumber: 713,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 710,
+          lineNumber: 714,
           columnNumber: 11
         }
       }, "Berkas sedang diunggah")));
@@ -23113,7 +23440,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 718,
+          lineNumber: 722,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -23129,7 +23456,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 719,
+          lineNumber: 723,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -23141,21 +23468,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 730,
+          lineNumber: 734,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 731,
+          lineNumber: 735,
           columnNumber: 11
         }
       }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 733,
+          lineNumber: 737,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -23164,7 +23491,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 734,
+          lineNumber: 738,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -23172,7 +23499,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 735,
+          lineNumber: 739,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -23182,14 +23509,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 737,
+          lineNumber: 741,
           columnNumber: 17
         }
       }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 744,
+          lineNumber: 748,
           columnNumber: 19
         }
       }, error));
@@ -23200,7 +23527,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 751,
+          lineNumber: 755,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -23208,7 +23535,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 752,
+          lineNumber: 756,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -23216,7 +23543,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 753,
+          lineNumber: 757,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -23229,7 +23556,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 755,
+          lineNumber: 759,
           columnNumber: 9
         }
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -23241,7 +23568,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 758,
+          lineNumber: 762,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -23252,7 +23579,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 759,
+          lineNumber: 763,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -23266,14 +23593,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 760,
+          lineNumber: 764,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 763,
+          lineNumber: 767,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -23285,16 +23612,23 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 764,
+          lineNumber: 768,
           columnNumber: 11
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+      }, hiddenToggleAspect ? /*#__PURE__*/React__default["default"].createElement(Box, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$9,
+          lineNumber: 770,
+          columnNumber: 15
+        }
+      }) : /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
         label: "Aspect Ratio",
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 765,
-          columnNumber: 13
+          lineNumber: 772,
+          columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
         style: {
@@ -23305,15 +23639,15 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 766,
-          columnNumber: 15
+          lineNumber: 773,
+          columnNumber: 17
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
         gap: 4,
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 772,
+          lineNumber: 780,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$3, {
@@ -23322,7 +23656,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 773,
+          lineNumber: 781,
           columnNumber: 15
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$3, {
@@ -23330,7 +23664,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 776,
+          lineNumber: 784,
           columnNumber: 15
         }
       }, "Simpan")))));
@@ -23346,7 +23680,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 785,
+        lineNumber: 793,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -23355,7 +23689,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 788,
+        lineNumber: 796,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -23485,6 +23819,11 @@
      */
     showCropper: PropTypes__default["default"].bool,
 
+    /**
+     Hidden toggle aspect ratio image cropper.
+     */
+    hiddenToggleAspect: PropTypes__default["default"].bool,
+
     /**
      The aspect ratio of the crop, e.g. `1` for a square or `16 / 9` for landscape. Omit/pass undefined for a free-form crop.
      */
@@ -23510,6 +23849,11 @@
      */
     action: PropTypes__default["default"].string,
 
+    /**
+     Custom body request to upload action.
+     */
+    customBodyRequest: PropTypes__default["default"].func,
+
     /**
      Contains an authentication token for upload API.
      */
@@ -27968,7 +28312,8 @@
   function EditableTableMobile(props) {
     var instance = props.instance,
         emptyDataMessage = props.emptyDataMessage,
-        showCheckbox = props.showCheckbox;
+        showCheckbox = props.showCheckbox,
+        customRows = props.customRows;
     var getTableProps = instance.getTableProps,
         getTableBodyProps = instance.getTableBodyProps,
         headerGroups = instance.headerGroups,
@@ -27976,6 +28321,160 @@
         prepareRow = instance.prepareRow,
         state = instance.state,
         toggleAllRowsExpanded = instance.toggleAllRowsExpanded;
+
+    var getCustomRows = function getCustomRows(row, renderRow) {
+      var _a, _b;
+
+      var customStyle = {};
+      var CustomRow;
+      var showInMobile = false;
+
+      if (customRows && customRows(row).length) {
+        var _loop_1 = function _loop_1(i) {
+          if ((_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.showInMobile) {
+            showInMobile = true;
+          }
+
+          if (customRows(row)[i].predicate) {
+            customStyle = (_b = customRows(row)[i]) === null || _b === void 0 ? void 0 : _b.css;
+
+            CustomRow = function () {
+              var _a;
+
+              return (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.Row(row.values, renderRow);
+            };
+          }
+        };
+
+        for (var i = 0; i < customRows(row).length; i++) {
+          _loop_1(i);
+        }
+      }
+
+      return {
+        CustomRow: CustomRow,
+        customStyle: customStyle,
+        showInMobile: showInMobile
+      };
+    };
+
+    var renderTableRow = function renderTableRow(row, index, customStyle) {
+      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/React.createElement(TableRow$2, __assign({
+          css: customStyle
+        }, row.getRowProps(), {
+          key: "row_mobile_".concat(index)
+        }), row.cells.map(function (cell, index) {
+          var _a, _b;
+
+          var isMobileHeader = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isMobileHeader;
+          var isSelector = ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id) === 'selection';
+          return (isMobileHeader || isSelector) && /*#__PURE__*/React.createElement(TableCell$2, __assign({}, cell.getCellProps({
+            style: {
+              minWidth: cell.column.minWidth,
+              width: isSelector ? 10 : cell.column.width,
+              maxWidth: isSelector ? 10 : cell.column.maxWidth
+            }
+          }), {
+            key: index
+          }), jsxRuntime.jsxs(Flex$1, __assign({
+            align: "center",
+            justify: "between",
+            css: {
+              cursor: 'pointer',
+              minHeight: 40
+            }
+          }, {
+            children: [jsxRuntime.jsx(Box, {
+              children: cell.render('Cell')
+            }, void 0), !isSelector && jsxRuntime.jsx(Flex$1, __assign({
+              justify: "center",
+              align: "center",
+              onClick: function () {
+                if (!Object.keys(state.expanded).includes(row.id)) {
+                  toggleAllRowsExpanded(false);
+                }
+
+                row.toggleRowExpanded(!row.isExpanded);
+              }
+            }, {
+              children: row.isExpanded ? jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0)
+            }), void 0)]
+          }), void 0));
+        })), /*#__PURE__*/React.createElement(TableRowCollapse, __assign({}, row.getRowProps(), {
+          key: "row_mobile_collapse_".concat(index),
+          css: {
+            backgroundColor: '$gray50'
+          }
+        }), showCheckbox && jsxRuntime.jsx(TableCell$2, {}, void 0), jsxRuntime.jsx(TableCellCollapse, {
+          children: jsxRuntime.jsx(Collapalse, __assign({
+            isOpen: row.isExpanded
+          }, {
+            children: jsxRuntime.jsx(Flex$1, __assign({
+              direction: "column",
+              css: {
+                borderTop: '1pt solid $bgBorder'
+              }
+            }, {
+              children: row.cells.filter(function (cell) {
+                var _a, _b, _c, _d;
+
+                return typeof ((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.hidden) === 'boolean' ? !((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) : !((_d = (_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) === null || _d === void 0 ? void 0 : _d.call(_c, cell));
+              }).map(function (cell, index) {
+                var _a, _b, _c, _d;
+
+                var headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
+                var isMobileHeader = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isMobileHeader;
+                var isSelector = ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'selection';
+                return !isMobileHeader && !isSelector && jsxRuntime.jsx(Flex$1, __assign({
+                  direction: "column",
+                  justify: "center",
+                  css: {
+                    borderBottom: '1pt solid $bgBorder',
+                    padding: '10px 12px',
+                    minHeight: 52
+                  }
+                }, {
+                  children: jsxRuntime.jsxs(Grid, __assign({
+                    columns: 6,
+                    flow: "row",
+                    css: {
+                      gridRowGap: '$spacing-04',
+                      gridColumnGap: '$spacing-04',
+                      alignItems: 'center'
+                    }
+                  }, {
+                    children: [jsxRuntime.jsx(GridItem, __assign({
+                      colSpan: 3
+                    }, {
+                      children: jsxRuntime.jsx(Heading, __assign({
+                        heading: "headerTable",
+                        color: "secondary"
+                      }, {
+                        children: typeof headerRender === 'string' ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                          children: [headerRender === null || headerRender === void 0 ? void 0 : headerRender.toUpperCase(), ((_d = cell === null || cell === void 0 ? void 0 : cell.column) === null || _d === void 0 ? void 0 : _d.isRequired) ? jsxRuntime.jsx(Required$2, {
+                            children: "*"
+                          }, void 0) : '']
+                        }, void 0) : headerRender
+                      }), void 0)
+                    }), void 0), jsxRuntime.jsx(GridItem, __assign({
+                      colSpan: 3
+                    }, {
+                      children: jsxRuntime.jsx(Flex$1, __assign({
+                        justify: "end"
+                      }, {
+                        children: cell.render('Cell')
+                      }), void 0)
+                    }), void 0)]
+                  }), void 0)
+                }), index);
+              })
+            }), void 0)
+          }), void 0)
+        }, void 0))]
+      }, void 0);
+    };
+
     return jsxRuntime.jsx(TableContainer$2, __assign({
       css: props === null || props === void 0 ? void 0 : props.css
     }, {
@@ -28008,117 +28507,18 @@
         }, void 0), jsxRuntime.jsx(TableBody$2, __assign({}, getTableBodyProps(), {
           children: rows.map(function (row, index) {
             prepareRow(row);
-            return jsxRuntime.jsxs(React__default["default"].Fragment, {
-              children: [/*#__PURE__*/React.createElement(TableRow$2, __assign({}, row.getRowProps(), {
-                key: "row_mobile_".concat(index)
-              }), row.cells.map(function (cell, index) {
-                var _a, _b;
+            var customStyle = getCustomRows(row).customStyle;
 
-                var isMobileHeader = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isMobileHeader;
-                var isSelector = ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id) === 'selection';
-                return (isMobileHeader || isSelector) && /*#__PURE__*/React.createElement(TableCell$2, __assign({}, cell.getCellProps({
-                  style: {
-                    minWidth: cell.column.minWidth,
-                    width: isSelector ? 10 : cell.column.width,
-                    maxWidth: isSelector ? 10 : cell.column.maxWidth
-                  }
-                }), {
-                  key: index
-                }), jsxRuntime.jsxs(Flex$1, __assign({
-                  align: "center",
-                  justify: "between",
-                  css: {
-                    cursor: 'pointer',
-                    minHeight: 40
-                  }
-                }, {
-                  children: [jsxRuntime.jsx(Box, {
-                    children: cell.render('Cell')
-                  }, void 0), !isSelector && jsxRuntime.jsx(Flex$1, __assign({
-                    justify: "center",
-                    align: "center",
-                    onClick: function () {
-                      if (!Object.keys(state.expanded).includes(row.id)) {
-                        toggleAllRowsExpanded(false);
-                      }
+            var _a = getCustomRows(row, function () {
+              return renderTableRow(row, index, customStyle);
+            }),
+                CustomRow = _a.CustomRow,
+                showInMobile = _a.showInMobile;
 
-                      row.toggleRowExpanded(!row.isExpanded);
-                    }
-                  }, {
-                    children: row.isExpanded ? jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0)
-                  }), void 0)]
-                }), void 0));
-              })), /*#__PURE__*/React.createElement(TableRowCollapse, __assign({}, row.getRowProps(), {
-                key: "row_mobile_collapse_".concat(index),
-                css: {
-                  backgroundColor: '$gray50'
-                }
-              }), showCheckbox && jsxRuntime.jsx(TableCell$2, {}, void 0), jsxRuntime.jsx(TableCellCollapse, {
-                children: jsxRuntime.jsx(Collapalse, __assign({
-                  isOpen: row.isExpanded
-                }, {
-                  children: jsxRuntime.jsx(Flex$1, __assign({
-                    direction: "column",
-                    css: {
-                      borderTop: '1pt solid $bgBorder'
-                    }
-                  }, {
-                    children: row.cells.filter(function (cell) {
-                      var _a, _b, _c, _d;
-
-                      return typeof ((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.hidden) === 'boolean' ? !((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) : !((_d = (_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) === null || _d === void 0 ? void 0 : _d.call(_c, cell));
-                    }).map(function (cell, index) {
-                      var _a, _b, _c, _d;
-
-                      var headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
-                      var isMobileHeader = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isMobileHeader;
-                      var isSelector = ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'selection';
-                      return !isMobileHeader && !isSelector && jsxRuntime.jsx(Flex$1, __assign({
-                        direction: "column",
-                        justify: "center",
-                        css: {
-                          borderBottom: '1pt solid $bgBorder',
-                          padding: '10px 12px',
-                          minHeight: 52
-                        }
-                      }, {
-                        children: jsxRuntime.jsxs(Grid, __assign({
-                          columns: 6,
-                          flow: "row",
-                          css: {
-                            gridRowGap: '$spacing-04',
-                            gridColumnGap: '$spacing-04',
-                            alignItems: 'center'
-                          }
-                        }, {
-                          children: [jsxRuntime.jsx(GridItem, __assign({
-                            colSpan: 3
-                          }, {
-                            children: jsxRuntime.jsx(Heading, __assign({
-                              heading: "headerTable",
-                              color: "secondary"
-                            }, {
-                              children: typeof headerRender === 'string' ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                                children: [headerRender === null || headerRender === void 0 ? void 0 : headerRender.toUpperCase(), ((_d = cell === null || cell === void 0 ? void 0 : cell.column) === null || _d === void 0 ? void 0 : _d.isRequired) ? jsxRuntime.jsx(Required$2, {
-                                  children: "*"
-                                }, void 0) : '']
-                              }, void 0) : headerRender
-                            }), void 0)
-                          }), void 0), jsxRuntime.jsx(GridItem, __assign({
-                            colSpan: 3
-                          }, {
-                            children: jsxRuntime.jsx(Flex$1, __assign({
-                              justify: "end"
-                            }, {
-                              children: cell.render('Cell')
-                            }), void 0)
-                          }), void 0)]
-                        }), void 0)
-                      }), index);
-                    })
-                  }), void 0)
-                }), void 0)
-              }, void 0))]
+            return jsxRuntime.jsx(React__default["default"].Fragment, {
+              children: CustomRow && showInMobile ? jsxRuntime.jsx(CustomRow, {
+                style: customStyle
+              }, void 0) : renderTableRow(row, index, customStyle)
             }, index);
           })
         }), void 0), rows.length < 1 && jsxRuntime.jsx(TableFoot$1, {
@@ -28524,6 +28924,71 @@
       }
     }, [selectedRowIds, data, onSelectedChange, selectedIndex]);
     var isDesktop = useMediaQuery('(min-width: 767px)');
+
+    var getCustomRows = function getCustomRows(row, renderRow) {
+      var _a;
+
+      var customStyle = {};
+      var CustomRow;
+
+      if (customRows && customRows(row).length) {
+        var _loop_1 = function _loop_1(i) {
+          if (customRows(row)[i].predicate) {
+            customStyle = (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.css;
+
+            CustomRow = function () {
+              var _a;
+
+              return (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.Row(row.values, renderRow);
+            };
+          }
+        };
+
+        for (var i = 0; i < customRows(row).length; i++) {
+          _loop_1(i);
+        }
+      }
+
+      return {
+        CustomRow: CustomRow,
+        customStyle: customStyle
+      };
+    };
+
+    var renderTableRow = function renderTableRow(row, customStyle) {
+      return jsxRuntime.jsx(TableRow$1, __assign({
+        css: customStyle
+      }, row.getRowProps(), {
+        children: row.cells.filter(function (cell) {
+          var _a, _b, _c, _d, _e;
+
+          return !((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isSubRow) && (typeof ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) === 'boolean' ? !((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) : !((_e = (_d = cell === null || cell === void 0 ? void 0 : cell.column) === null || _d === void 0 ? void 0 : _d.hidden) === null || _e === void 0 ? void 0 : _e.call(_d, cell)));
+        }).map(function (cell) {
+          var _a;
+
+          return !((_a = cell.column) === null || _a === void 0 ? void 0 : _a.isMobileOnly) && jsxRuntime.jsx(TableCell$1, __assign({}, cell.getCellProps({
+            style: {
+              minWidth: cell.column.minWidth,
+              width: cell.column.width,
+              maxWidth: cell.column.maxWidth
+            }
+          }), {
+            css: {
+              '@md': {
+                height: rowHeight
+              }
+            }
+          }, {
+            children: jsxRuntime.jsx(TableCellContent$1, __assign({
+              align: align
+            }, {
+              children: cell.render('Cell')
+            }), void 0)
+          }), void 0);
+        })
+      }), void 0);
+    };
+
     return isDesktop ? jsxRuntime.jsx(TableContainer$1, __assign({
       css: props === null || props === void 0 ? void 0 : props.css
     }, {
@@ -28553,8 +29018,6 @@
           })
         }, void 0), jsxRuntime.jsx(TableBody$1, __assign({}, getTableBodyProps(), {
           children: rows.map(function (row, index) {
-            var _a;
-
             prepareRow(row);
             var subRowCells = row.cells.filter(function (cell) {
               return cell.column.isSubRow;
@@ -28562,61 +29025,14 @@
             var notNullHeaderColumns = visibleColumns.filter(function (column) {
               return typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow;
             });
-            var customStyle = {};
-            var CustomRow;
-
-            if (customRows && customRows(row).length) {
-              var _loop_1 = function _loop_1(i) {
-                if (customRows(row)[i].predicate) {
-                  customStyle = (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.css;
-
-                  CustomRow = function () {
-                    var _a;
-
-                    return (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.Row(row.values);
-                  };
-                }
-              };
-
-              for (var i = 0; i < customRows(row).length; i++) {
-                _loop_1(i);
-              }
-            }
-
+            var customStyle = getCustomRows(row).customStyle;
+            var CustomRow = getCustomRows(row, function () {
+              return renderTableRow(row, customStyle);
+            }).CustomRow;
             return jsxRuntime.jsxs(React__default["default"].Fragment, {
               children: [CustomRow ? jsxRuntime.jsx(CustomRow, {
                 style: customStyle
-              }, void 0) : jsxRuntime.jsx(TableRow$1, __assign({
-                css: customStyle
-              }, row.getRowProps(), {
-                children: row.cells.filter(function (cell) {
-                  var _a, _b, _c, _d, _e;
-
-                  return !((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isSubRow) && (typeof ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) === 'boolean' ? !((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) : !((_e = (_d = cell === null || cell === void 0 ? void 0 : cell.column) === null || _d === void 0 ? void 0 : _d.hidden) === null || _e === void 0 ? void 0 : _e.call(_d, cell)));
-                }).map(function (cell) {
-                  var _a;
-
-                  return !((_a = cell.column) === null || _a === void 0 ? void 0 : _a.isMobileOnly) && jsxRuntime.jsx(TableCell$1, __assign({}, cell.getCellProps({
-                    style: {
-                      minWidth: cell.column.minWidth,
-                      width: cell.column.width,
-                      maxWidth: cell.column.maxWidth
-                    }
-                  }), {
-                    css: {
-                      '@md': {
-                        height: rowHeight
-                      }
-                    }
-                  }, {
-                    children: jsxRuntime.jsx(TableCellContent$1, __assign({
-                      align: align
-                    }, {
-                      children: cell.render('Cell')
-                    }), void 0)
-                  }), void 0);
-                })
-              }), void 0), subRowCells.map(function (cell) {
+              }, void 0) : renderTableRow(row, customStyle), subRowCells.map(function (cell) {
                 var _a;
 
                 return jsxRuntime.jsx(TableRow$1, __assign({
@@ -28687,7 +29103,8 @@
       css: props === null || props === void 0 ? void 0 : props.css,
       instance: instance,
       emptyDataMessage: emptyDataMessage,
-      showCheckbox: showCheckbox
+      showCheckbox: showCheckbox,
+      customRows: customRows
     }, void 0);
   }
 
@@ -32692,6 +33109,10 @@
   exports.ColorPicker = ColorPicker$1;
   exports.Colors = Colors;
   exports.ContentEditor = ContentEditor;
+  exports.ContextMenu = ContextMenu;
+  exports.ContextMenuItem = ContextMenuItem;
+  exports.ContextMenuSeparator = ContextMenuSeparator;
+  exports.ContextMenuTrigger = ContextMenuTrigger;
   exports.DateColumn = DateColumn;
   exports.DatePicker = DatePicker;
   exports.DecimalColumn = DecimalColumn;