@majoo-ui/react 1.52.9 → 1.53.0

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.imageCompression, 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, imageCompression, 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 }; }
 
@@ -55,7 +55,7 @@
   var ScrollSpy__default = /*#__PURE__*/_interopDefaultLegacy(ScrollSpy);
   var request__default = /*#__PURE__*/_interopDefaultLegacy(request);
   var ReactCrop__default = /*#__PURE__*/_interopDefaultLegacy(ReactCrop);
-  var imageCompression__default = /*#__PURE__*/_interopDefaultLegacy(imageCompression);
+  var imageCompressionComponent__default = /*#__PURE__*/_interopDefaultLegacy(imageCompressionComponent);
 
   var _jsxFileName$10 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
 
@@ -3954,6 +3954,20 @@
       outline: '1px solid $btnNegative'
     }
   };
+  var ButtonGhostSecondary = {
+    backgroundColor: '$btnSecondary',
+    color: '$textSecondary',
+    border: 'none',
+    '&:hover': {
+      backgroundColor: '$gray100',
+      outline: '1px solid $gray100',
+      color: '$textSecondary'
+    },
+    '&:active': {
+      backgroundColor: '$gray150',
+      outline: '1px solid $gray150'
+    }
+  };
   var ButtonHeaderMenu = {
     backgroundColor: '$bgWhite',
     border: '1px solid $bgBorder',
@@ -4041,6 +4055,7 @@
         primary: __assign({}, ButtonPrimary),
         secondary: __assign({}, PrimarySecondary),
         ghost: __assign({}, GhostButton),
+        'ghost-secondary': __assign({}, ButtonGhostSecondary),
         negative: __assign({}, ButtonNegative),
         'negative-secondary': __assign({}, ButtonNegativeSecondary),
         'negative-ghost': __assign({}, ButtonNegativeGhost),
@@ -4898,7 +4913,7 @@
   const {
     zIndices: zIndices$1
   } = core.foundations;
-  const slideUpAndFade$1 = keyframes({
+  const slideUpAndFade$2 = keyframes({
     '0%': {
       opacity: 0,
       transform: 'translateY(2px)'
@@ -4908,7 +4923,7 @@
       transform: 'translateY(0)'
     }
   });
-  const slideRightAndFade$1 = keyframes({
+  const slideRightAndFade$2 = keyframes({
     '0%': {
       opacity: 0,
       transform: 'translateX(-2px)'
@@ -4918,7 +4933,7 @@
       transform: 'translateX(0)'
     }
   });
-  const slideDownAndFade$1 = keyframes({
+  const slideDownAndFade$2 = keyframes({
     '0%': {
       opacity: 0,
       transform: 'translateY(-2px)'
@@ -4928,7 +4943,7 @@
       transform: 'translateY(0)'
     }
   });
-  const slideLeftAndFade$1 = keyframes({
+  const slideLeftAndFade$2 = keyframes({
     '0%': {
       opacity: 0,
       transform: 'translateX(2px)'
@@ -4955,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
         }
       }
     }
@@ -6421,7 +6436,7 @@
   };
   InputRadioGroup.displayName = 'InputRadioGroup';
 
-  const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps", "description"];
+  const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps", "description", "readOnly"];
   var _jsxFileName$E = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
   const INDICATOR_BASE_STYLES = {
     alignItems: 'center',
@@ -6492,6 +6507,20 @@
           backgroundColor: '$gray200'
         }
       }
+    },
+    variants: {
+      readOnly: {
+        true: {
+          '&[data-state=checked]': {
+            border: '2px solid $primary500 !important'
+          },
+          [`& ${StyledIndicator$1}`]: {
+            '&::after': {
+              backgroundColor: '$primary500 !important'
+            }
+          }
+        }
+      }
     }
   });
   const Container$8 = styled(Flex$1, {
@@ -6511,6 +6540,11 @@
           }
         }
       },
+      disabledOutlined: {
+        true: {
+          backgroundColor: '$gray150 !important'
+        }
+      },
       active: {
         true: {
           border: '1px solid $primary400 !important'
@@ -6537,7 +6571,8 @@
       css,
       inputType,
       inputProps,
-      description
+      description,
+      readOnly
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
@@ -6546,22 +6581,24 @@
         case 'number':
           return /*#__PURE__*/React__default["default"].createElement(InputNumber, _extends({}, inputProps, {
             disabled: disabled || checked !== props.value,
+            readOnly: readOnly || checked !== props.value,
             __self: this,
             __source: {
               fileName: _jsxFileName$E,
-              lineNumber: 125,
-              columnNumber: 16
+              lineNumber: 146,
+              columnNumber: 11
             }
           }));
 
         case 'text':
           return /*#__PURE__*/React__default["default"].createElement(InputText, _extends({}, inputProps, {
             disabled: disabled || checked !== props.value,
+            readOnly: readOnly || checked !== props.value,
             __self: this,
             __source: {
               fileName: _jsxFileName$E,
-              lineNumber: 128,
-              columnNumber: 16
+              lineNumber: 155,
+              columnNumber: 11
             }
           }));
 
@@ -6575,12 +6612,12 @@
               letterSpacing: '$long-content-regular',
               fontWeight: '400',
               cursor: 'pointer',
-              color: disabled ? '$textDisable' : '$textPrimary'
+              color: disabled || readOnly ? '$textDisable' : '$textPrimary'
             },
             __self: this,
             __source: {
               fileName: _jsxFileName$E,
-              lineNumber: 132,
+              lineNumber: 164,
               columnNumber: 11
             }
           }, props.label);
@@ -6591,7 +6628,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 151,
+        lineNumber: 183,
         columnNumber: 5
       }
     }, ({
@@ -6603,13 +6640,14 @@
       return /*#__PURE__*/React__default["default"].createElement(Container$8, {
         direction: "column",
         outlined: outlined,
+        disabledOutlined: outlined && (readOnly || disabled),
         disabled: disabled,
-        active: outlined && checked === props.value && !disabled,
+        active: outlined && checked === props.value && !disabled && !readOnly,
         css: css,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 156,
+          lineNumber: 188,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -6618,24 +6656,25 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 163,
+          lineNumber: 196,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(StyledRadio, _extends({
         id: id,
-        disabled: disabled
+        disabled: disabled || readOnly,
+        readOnly: readOnly
       }, props, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 164,
+          lineNumber: 197,
           columnNumber: 15
         }
       }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$1, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 165,
+          lineNumber: 198,
           columnNumber: 17
         }
       })), renderInputType(inputType, checked)), description && /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -6647,7 +6686,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 171,
+          lineNumber: 203,
           columnNumber: 15
         }
       }, description));
@@ -6661,7 +6700,8 @@
     css: PropTypes__default["default"].object,
     inputType: PropTypes__default["default"].oneOf(['number', 'text', 'default']),
     onChange: PropTypes__default["default"].func,
-    description: PropTypes__default["default"].string
+    description: PropTypes__default["default"].string,
+    readOnly: PropTypes__default["default"].bool
   };
   InputRadio.displayName = 'InputRadio';
 
@@ -6843,7 +6883,7 @@
       size: size,
       isInvalid: isInvalid,
       readOnly: readOnly,
-      isReadOnly: readOnly,
+      isReadOnly: readOnly && !(props !== null && props !== void 0 && props.inputGroup),
       disabled: disabled
     }, props, {
       __self: undefined,
@@ -9461,7 +9501,7 @@
     alignItems: 'center',
     borderBottom: '1px solid $bgBorder'
   });
-  const Item$2 = styled('div', {
+  const Item$3 = styled('div', {
     overflow: 'hidden',
     backgroundColor: '$bgWhite',
     lineHeight: '20px',
@@ -9957,7 +9997,7 @@
         lineNumber: 617,
         columnNumber: 25
       }
-    })), /*#__PURE__*/React__default["default"].createElement(Item$2, {
+    })), /*#__PURE__*/React__default["default"].createElement(Item$3, {
       css: {
         backgroundColor: 'unset'
       },
@@ -10231,7 +10271,7 @@
     color: '$textGreen',
     height: '100%'
   });
-  const Item$1 = styled('div', {
+  const Item$2 = styled('div', {
     backgroundColor: '$bgWhite',
     cursor: 'pointer',
     lineHeight: '20px'
@@ -10322,7 +10362,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);
@@ -14280,7 +14320,7 @@
   }
 
   var ButtonGroup = styled(ToggleGroupPrimitive__namespace.Root, {});
-  var Item = styled(ButtonGroupItem, {
+  var Item$1 = styled(ButtonGroupItem, {
     fontSize: '$label',
     lineHeight: '$label',
     letterSpacing: '$label',
@@ -14299,7 +14339,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,
@@ -16606,13 +16646,11 @@
 
   moment__default["default"].locale('id');
 
-  var getInputPickerValue = function getInputPickerValue(type, date) {
+  var getInputPickerValue = function getInputPickerValue(type, date, isTimePicker) {
     if (!date) return '';
 
     if (type === SINGLE_PICKER) {
-      return Intl.DateTimeFormat('id-ID', {
-        dateStyle: 'long'
-      }).format(date);
+      return "".concat(moment__default["default"](date).format(isTimePicker ? 'D MMMM YYYY, HH:mm' : 'D MMMM YYYY'));
     } else {
       return "".concat(moment__default["default"](date[0]).format('ll'), " - ").concat(moment__default["default"](date[1]).format('ll'));
     }
@@ -16694,7 +16732,7 @@
           children: jsxRuntime.jsx(icons.CalendarOutline, {}, void 0)
         }, void 0), jsxRuntime.jsx(InputText, {
           placeholder: placeholder,
-          value: getInputPickerValue(type, selectedDate),
+          value: getInputPickerValue(type, selectedDate, showTimePicker),
           // eslint-disable-next-line @typescript-eslint/no-empty-function
           onChange: function () {},
           isPicker: true
@@ -17272,6 +17310,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',
@@ -17779,12 +17941,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 = {};
 
@@ -17829,11 +17996,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;
 
@@ -17941,6 +18108,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',
@@ -17968,11 +18185,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
             }, {
@@ -18012,7 +18229,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) {
@@ -18024,6 +18241,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) {
@@ -18045,13 +18267,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) {
@@ -18095,7 +18345,7 @@
                 }, row.id);
               })
             }), void 0)]
-          }), void 0))
+          }), void 0)), renderContextMenu()]
         }), void 0), !isInfiniteScroll && jsxRuntime.jsx(Box, __assign({
           css: {
             width: '100%'
@@ -18876,6 +19126,7 @@
 
   const rowMenuColumn = (options, icon, config) => ({
     id: 'menu',
+    options,
     Header: () => null,
     Cell: props => {
       const defaultConfig = {
@@ -18899,7 +19150,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 36,
+          lineNumber: 37,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuTrigger, {
@@ -18907,7 +19158,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 37,
+          lineNumber: 38,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18920,7 +19171,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 38,
+          lineNumber: 39,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -18928,21 +19179,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, {
@@ -18965,7 +19216,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, {
@@ -18973,7 +19224,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 63,
+          lineNumber: 64,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
@@ -18985,7 +19236,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 64,
+          lineNumber: 65,
           columnNumber: 19
         }
       }, option.title), /*#__PURE__*/React__default["default"].createElement(DropdownMenuSeparator, {
@@ -18996,7 +19247,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 73,
+          lineNumber: 74,
           columnNumber: 19
         }
       })))))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
@@ -19007,7 +19258,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 79,
+          lineNumber: 80,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -19015,7 +19266,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 80,
+          lineNumber: 81,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19028,28 +19279,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, {
@@ -19059,7 +19310,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 86,
+          lineNumber: 87,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19074,7 +19325,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, {
@@ -19082,7 +19333,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 89,
+          lineNumber: 90,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19098,7 +19349,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 90,
+          lineNumber: 91,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -19107,7 +19358,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 101,
+          lineNumber: 102,
           columnNumber: 21
         }
       }, option.title)), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -19115,7 +19366,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 105,
+          lineNumber: 106,
           columnNumber: 19
         }
       })))))));
@@ -22133,6 +22384,7 @@
   function upload(_a) {
     var url = _a.url,
         file = _a.file,
+        customBody = _a.customBody,
         tokenKey = _a.tokenKey,
         token = _a.token,
         progress = _a.progress,
@@ -22142,8 +22394,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));
@@ -22280,6 +22542,7 @@
     multiple,
     fileList,
     onChange,
+    onBeforeCrop,
     onError,
     onSuccess,
     onProgress,
@@ -22297,6 +22560,7 @@
     progress,
     loading,
     action,
+    customBodyRequest,
     token,
     tokenKey,
     reqKey,
@@ -22304,7 +22568,9 @@
     ratio,
     disabled,
     errorMessage,
-    maxSizeMB
+    maxSizeMB,
+    imageCompression,
+    hiddenToggleAspect
   }) => {
     const isFile = listType === 'file';
     const imgRef = React.useRef(null);
@@ -22478,6 +22744,7 @@
           upload({
             url: action,
             file: newFile,
+            customBody: customBodyRequest === null || customBodyRequest === void 0 ? void 0 : customBodyRequest(newFile),
             token,
             tokenKey,
             reqKey,
@@ -22500,7 +22767,7 @@
                 }
               }
 
-              (_onChange = onChange({
+              onChange === null || onChange === void 0 ? void 0 : (_onChange = onChange({
                 fileList: arrProgress,
                 file: fileProgress,
                 indexReplace: indexReplace.current,
@@ -22522,7 +22789,7 @@
               }
             }
 
-            (_onChange2 = onChange({
+            onChange === null || onChange === void 0 ? void 0 : (_onChange2 = onChange({
               fileList: arrSuccess,
               file: fileSuccess,
               indexReplace: indexReplace.current,
@@ -22543,7 +22810,7 @@
               }
             }
 
-            (_onChange3 = onChange({
+            onChange === null || onChange === void 0 ? void 0 : (_onChange3 = onChange({
               fileList: arrError,
               file: fileError,
               indexReplace: indexReplace.current,
@@ -22553,7 +22820,7 @@
         } else {
           var _onChange4, _onChange4$then;
 
-          (_onChange4 = onChange({
+          onChange === null || onChange === void 0 ? void 0 : (_onChange4 = onChange({
             fileList: arrFile,
             file: newFile,
             indexReplace: indexReplace.current,
@@ -22571,15 +22838,41 @@
     }
 
     function handleChange(e) {
-      if (e.target.files && e.target.files[0] && onChange) {
+      if (e.target.files && e.target.files[0]) {
         const files = e.target.files;
 
         if (isFile || !showCropper) {
           handleUpload(files);
         } else {
-          toggleModal();
-          setFileState(files[0]);
-          setPreviewImage(URL.createObjectURL(files[0]));
+          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;
+
+              onBeforeCrop === null || onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop = onBeforeCrop(img)) === null || _onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop$then = _onBeforeCrop.then(() => {
+                setError(null);
+                toggleModal();
+                setFileState(files[0]);
+                setPreviewImage(URL.createObjectURL(files[0]));
+              })) === null || _onBeforeCrop$then === void 0 ? void 0 : _onBeforeCrop$then.catch(error => setError(error === null || error === void 0 ? void 0 : error.message));
+            };
+
+            img.onerror = error => {
+              var _onBeforeCrop2, _onBeforeCrop2$then;
+
+              onBeforeCrop === null || onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop2 = onBeforeCrop(img, error)) === null || _onBeforeCrop2 === void 0 ? void 0 : (_onBeforeCrop2$then = _onBeforeCrop2.then(() => setError(null))) === null || _onBeforeCrop2$then === void 0 ? void 0 : _onBeforeCrop2$then.catch(error => setError(error === null || error === void 0 ? void 0 : error.message));
+            };
+          } else {
+            toggleModal();
+            setFileState(files[0]);
+            setPreviewImage(URL.createObjectURL(files[0]));
+          }
         }
       }
     }
@@ -22587,22 +22880,36 @@
     function handleCrop() {
       if (completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height && imgRef.current) {
         imgPreview(imgRef.current, completedCrop, 1, 0, ratio).then(blob => {
-          imageCompression__default["default"](blob, {
-            maxSizeMB,
-            maxWidthOrHeight: 1920,
-            maxIteration: 2,
-            useWebWorker: true,
-            alwaysKeepResolution: true
-          }).then(compressedFile => {
+          const sizeMB = (blob === null || blob === void 0 ? void 0 : blob.size) / 1024 / 1024;
+
+          if (sizeMB < maxSizeMB || sizeMB < 1 || !imageCompression) {
             var _fileState$name;
 
-            const file = new File([compressedFile], (fileState === null || fileState === void 0 ? void 0 : (_fileState$name = fileState.name) === null || _fileState$name === void 0 ? void 0 : _fileState$name.replace(/\.[^/.]+$/, '')) + '.png', {
-              type: compressedFile === null || compressedFile === void 0 ? void 0 : compressedFile.type
+            const file = new File([blob], (fileState === null || fileState === void 0 ? void 0 : (_fileState$name = fileState.name) === null || _fileState$name === void 0 ? void 0 : _fileState$name.replace(/\.[^/.]+$/, '')) + '.png', {
+              type: blob === null || blob === void 0 ? void 0 : blob.type
             });
             handleUpload([file]);
             setCrop(null);
             setCompletedCrop(null);
-          }).catch(error => console.error(error === null || error === void 0 ? void 0 : error.message));
+          } else {
+            imageCompressionComponent__default["default"](blob, {
+              maxSizeMB,
+              maxWidthOrHeight: 1920,
+              maxIteration: 10,
+              useWebWorker: true,
+              alwaysKeepResolution: true
+            }).then(compressedFile => {
+              var _fileState$name2;
+
+              const file = new File([compressedFile], (fileState === null || fileState === void 0 ? void 0 : (_fileState$name2 = fileState.name) === null || _fileState$name2 === void 0 ? void 0 : _fileState$name2.replace(/\.[^/.]+$/, '')) + '.png', {
+                type: compressedFile === null || compressedFile === void 0 ? void 0 : compressedFile.type
+              });
+              handleUpload([file]);
+              setCrop(null);
+              setCompletedCrop(null);
+            }).catch(error => console.error(error === null || error === void 0 ? void 0 : error.message));
+          }
+
           toggleModal();
         }).catch(error => console.error(error === null || error === void 0 ? void 0 : error.message));
       } else {
@@ -22632,15 +22939,13 @@
     }
 
     function handleClose(file) {
-      if (onChange) {
-        const index = fileList.indexOf(file);
-        const newFileList = fileList.slice();
-        newFileList.splice(index, 1);
-        onChange({
-          fileList: newFileList,
-          file
-        });
-      }
+      const index = fileList.indexOf(file);
+      const newFileList = fileList.slice();
+      newFileList.splice(index, 1);
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        fileList: newFileList,
+        file
+      });
     }
 
     function handleRemove(file) {
@@ -22733,7 +23038,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 572,
+          lineNumber: 607,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -22743,7 +23048,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 573,
+          lineNumber: 608,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
@@ -22759,7 +23064,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 583,
+              lineNumber: 618,
               columnNumber: 16
             }
           });
@@ -22771,7 +23076,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 586,
+            lineNumber: 621,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22781,7 +23086,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 587,
+            lineNumber: 622,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22790,7 +23095,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 588,
+            lineNumber: 623,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22803,7 +23108,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 589,
+            lineNumber: 624,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22812,7 +23117,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 597,
+            lineNumber: 632,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -22822,7 +23127,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 599,
+            lineNumber: 634,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -22841,7 +23146,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 610,
+              lineNumber: 645,
               columnNumber: 16
             }
           });
@@ -22852,7 +23157,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 613,
+            lineNumber: 648,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22862,7 +23167,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 614,
+            lineNumber: 649,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22871,7 +23176,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 615,
+            lineNumber: 650,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22884,7 +23189,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 616,
+            lineNumber: 651,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22894,14 +23199,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 624,
+            lineNumber: 659,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 625,
+            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, {
@@ -22909,7 +23214,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 626,
+            lineNumber: 661,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -22924,7 +23229,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 627,
+            lineNumber: 662,
             columnNumber: 19
           }
         }, item.name)))), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22937,7 +23242,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 642,
+            lineNumber: 677,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22946,7 +23251,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 650,
+            lineNumber: 685,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -22954,7 +23259,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 652,
+            lineNumber: 687,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -22970,7 +23275,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 663,
+          lineNumber: 698,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22984,7 +23289,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 664,
+          lineNumber: 699,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -23010,7 +23315,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 665,
+          lineNumber: 700,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -23018,14 +23323,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 678,
+          lineNumber: 713,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 679,
+          lineNumber: 714,
           columnNumber: 11
         }
       }, "Berkas sedang diunggah")));
@@ -23038,7 +23343,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 687,
+          lineNumber: 722,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -23054,7 +23359,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 688,
+          lineNumber: 723,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -23066,21 +23371,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 699,
+          lineNumber: 734,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 700,
+          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: 702,
+          lineNumber: 737,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -23089,7 +23394,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 703,
+          lineNumber: 738,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -23097,7 +23402,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 704,
+          lineNumber: 739,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -23107,14 +23412,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 706,
+          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: 713,
+          lineNumber: 748,
           columnNumber: 19
         }
       }, error));
@@ -23125,7 +23430,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 720,
+          lineNumber: 755,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -23133,7 +23438,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 721,
+          lineNumber: 756,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -23141,7 +23446,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 722,
+          lineNumber: 757,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -23154,7 +23459,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 724,
+          lineNumber: 759,
           columnNumber: 9
         }
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -23166,7 +23471,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 727,
+          lineNumber: 762,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -23177,7 +23482,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 728,
+          lineNumber: 763,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -23191,14 +23496,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 729,
+          lineNumber: 764,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 732,
+          lineNumber: 767,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -23210,16 +23515,23 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 733,
+          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: 734,
-          columnNumber: 13
+          lineNumber: 772,
+          columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
         style: {
@@ -23230,15 +23542,15 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 735,
-          columnNumber: 15
+          lineNumber: 773,
+          columnNumber: 17
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
         gap: 4,
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 741,
+          lineNumber: 780,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$3, {
@@ -23247,7 +23559,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 742,
+          lineNumber: 781,
           columnNumber: 15
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$3, {
@@ -23255,7 +23567,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 745,
+          lineNumber: 784,
           columnNumber: 15
         }
       }, "Simpan")))));
@@ -23271,7 +23583,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 754,
+        lineNumber: 793,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -23280,7 +23592,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 757,
+        lineNumber: 796,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -23298,7 +23610,8 @@
     resKey: 'url',
     ratio: 16 / 9,
     disabled: false,
-    maxSizeMB: 1
+    maxSizeMB: 1,
+    imageCompression: true
   };
   Upload.propTypes = {
     /**
@@ -23409,6 +23722,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.
      */
@@ -23434,6 +23752,11 @@
      */
     action: PropTypes__default["default"].string,
 
+    /**
+     Custom body request to upload action.
+     */
+    customBodyRequest: PropTypes__default["default"].func,
+
     /**
      Contains an authentication token for upload API.
      */
@@ -23452,7 +23775,17 @@
     /**
      Referencing the key to get the file from the API response.
      */
-    resKey: PropTypes__default["default"].string
+    resKey: PropTypes__default["default"].string,
+
+    /**
+     To compression image if file size > 1MB.
+     */
+    imageCompression: PropTypes__default["default"].bool,
+
+    /**
+     Callback to handle before crop image.
+     */
+    onBeforeCrop: PropTypes__default["default"].func
   };
   Upload.displayName = 'Upload';
 
@@ -27022,6 +27355,8 @@
           align: "center",
           key: `step-${i}`,
           onClick: () => {
+            if (props.onNavClicked) props.onNavClicked(i);
+
             if (!forbidClickNav && isComplete && !isHide) {
               props.goToStep(i);
             }
@@ -27039,7 +27374,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 118,
+            lineNumber: 119,
             columnNumber: 15
           }
         }), isComplete && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -27051,7 +27386,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 119,
+            lineNumber: 120,
             columnNumber: 30
           }
         }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) === null || _data$title === void 0 ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -27060,7 +27395,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 122,
+            lineNumber: 123,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -27072,7 +27407,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 123,
+            lineNumber: 124,
             columnNumber: 19
           }
         })), ((_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -27083,7 +27418,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 127,
+            lineNumber: 128,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -27092,7 +27427,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 128,
+            lineNumber: 129,
             columnNumber: 19
           }
         }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -27109,7 +27444,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 136,
+            lineNumber: 137,
             columnNumber: 13
           }
         }, isComplete && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -27118,7 +27453,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 148,
+            lineNumber: 149,
             columnNumber: 30
           }
         }), !isComplete && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -27134,7 +27469,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 150,
+            lineNumber: 151,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -27144,7 +27479,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 162,
+            lineNumber: 163,
             columnNumber: 15
           }
         }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -27154,7 +27489,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 166,
+            lineNumber: 167,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -27163,7 +27498,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 167,
+            lineNumber: 168,
             columnNumber: 19
           }
         })), isActive && ((_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -27175,7 +27510,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 171,
+            lineNumber: 172,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -27184,7 +27519,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 172,
+            lineNumber: 173,
             columnNumber: 19
           }
         }, "Coming Soon"))));
@@ -27206,7 +27541,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 182,
+        lineNumber: 183,
         columnNumber: 5
       }
     }, isMobile ? /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -27218,7 +27553,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 198,
+        lineNumber: 199,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -27231,7 +27566,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 199,
+        lineNumber: 200,
         columnNumber: 11
       }
     }, stepItems)) : stepItems);
@@ -27332,7 +27667,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 296,
+        lineNumber: 297,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
@@ -27354,7 +27689,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 297,
+        lineNumber: 298,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Stepper, _extends({}, props, {
@@ -27362,11 +27697,12 @@
       className: !props.isMobile && 'stepperInstance',
       instance: setInstance,
       nav: /*#__PURE__*/React__default["default"].createElement(Navigation, {
+        onNavClicked: props.onNavClicked,
         isComplete: state.isComplete,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 319,
+          lineNumber: 320,
           columnNumber: 16
         }
       }),
@@ -27376,7 +27712,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 314,
+        lineNumber: 315,
         columnNumber: 9
       }
     }), props.children)));
@@ -27879,7 +28215,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,
@@ -27887,6 +28224,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
     }, {
@@ -27919,117 +28410,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, {
@@ -28435,6 +28827,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
     }, {
@@ -28464,8 +28921,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;
@@ -28473,61 +28928,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({
@@ -28598,7 +29006,8 @@
       css: props === null || props === void 0 ? void 0 : props.css,
       instance: instance,
       emptyDataMessage: emptyDataMessage,
-      showCheckbox: showCheckbox
+      showCheckbox: showCheckbox,
+      customRows: customRows
     }, void 0);
   }
 
@@ -32603,6 +33012,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;